.page-about {
  background: var(--ys-ink);
  color: var(--ys-white);
  font-family: var(--ys-font-body);
  overflow: clip;
}

.page-about *,
.page-about *::before,
.page-about *::after {
  box-sizing: border-box;
}

.page-about .ys-section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.page-about .ys-h2 {
  margin: 0;
  font-family: var(--ys-font-display);
  font-size: clamp(1.8rem, 4.8vw, 3.35rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ys-white);
}

.page-about .ys-eyebrow {
  margin: 0 0 0.9rem;
  color: var(--ys-mint);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-about .ys-lede {
  color: var(--ys-mist);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.85;
}

.page-about .ys-prose {
  color: var(--ys-mist);
  font-size: 1rem;
  line-height: 1.85;
}

.page-about .ys-prose p {
  margin: 0 0 1.15em;
}

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

.page-about .ys-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--ys-steel);
  border-radius: var(--ys-radius);
  background: var(--ys-night);
}

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

.page-about .ys-num {
  font-family: var(--ys-font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-about .ys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.3rem;
  border-radius: var(--ys-radius-pill);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 180ms var(--ys-ease), background-color 180ms var(--ys-ease), border-color 180ms var(--ys-ease), color 180ms var(--ys-ease);
}

.page-about .ys-btn:hover {
  transform: translateY(-2px);
}

.page-about .ys-btn--primary {
  background: var(--ys-mint);
  border: 1px solid var(--ys-mint);
  color: var(--ys-ink);
}

.page-about .ys-btn--primary:hover {
  background: var(--ys-mint-soft);
  border-color: var(--ys-mint-soft);
}

.page-about .ys-btn--ghost {
  border: 1px solid var(--ys-steel);
  color: var(--ys-white);
  background: rgba(13, 28, 43, 0.35);
}

.page-about .ys-btn--ghost:hover {
  border-color: var(--ys-mint);
  color: var(--ys-mint);
}

.page-about .ys-btn--track {
  background: var(--ys-track);
  border: 1px solid var(--ys-track);
  color: var(--ys-ink);
}

.page-about .ys-btn--track:hover {
  background: var(--ys-warm);
  border-color: var(--ys-warm);
}

.page-about .about-hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--ys-header-h) + clamp(2.4rem, 7vw, 5.4rem)) 0 clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 82% 12%, rgba(43, 240, 194, 0.14), transparent 34%),
    radial-gradient(circle at 12% 76%, rgba(255, 91, 61, 0.09), transparent 28%),
    var(--ys-ink);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.26;
  pointer-events: none;
  background-image: repeating-linear-gradient(115deg, transparent 0, transparent 46px, rgba(36, 64, 90, 0.34) 47px, transparent 48px);
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.page-about .about-hero__crumb {
  margin-bottom: clamp(1.8rem, 5vw, 3.6rem);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: end;
}

.page-about .about-hero__copy {
  position: relative;
  z-index: 2;
}

.page-about .about-hero__title {
  margin: 0;
  max-width: 12ch;
  color: var(--ys-white);
  font-family: var(--ys-font-display);
  font-size: clamp(3rem, 10.6vw, 7.2rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.page-about .about-hero__lede {
  max-width: 60ch;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.page-about .about-hero__note {
  max-width: 48ch;
  margin: 1.5rem 0 0;
  padding-left: 0.95rem;
  border-left: 2px solid var(--ys-track);
  color: var(--ys-mist);
  font-size: 0.78rem;
  line-height: 1.7;
}

.page-about .about-hero__figure {
  position: relative;
  min-height: 280px;
  aspect-ratio: 4 / 3;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 8% 100%);
}

.page-about .about-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 44%, rgba(7, 17, 29, 0.62));
  pointer-events: none;
}

.page-about .about-hero__band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3.8rem);
  border-top: 1px solid var(--ys-steel);
  border-bottom: 1px solid var(--ys-steel);
}

.page-about .about-hero__band .ys-band__cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1rem 1rem 0;
  min-width: 0;
}

.page-about .about-hero__band .ys-band__cell:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--ys-steel);
}

.page-about .about-hero__band .ys-band__k {
  color: var(--ys-mist);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.page-about .about-hero__band .ys-band__v {
  color: var(--ys-white);
  font-family: var(--ys-font-mono);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.page-about .about-hero__band .ys-band__v--mint {
  color: var(--ys-mint);
}

.page-about .about-hero__band .ys-band__v--track {
  color: var(--ys-track);
}

.page-about .about-mission {
  background: linear-gradient(180deg, var(--ys-ink) 0%, var(--ys-night) 22%, var(--ys-night) 100%);
}

.page-about .about-mission__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

.page-about .about-mission__prose {
  max-width: 66ch;
  margin-top: 1.4rem;
}

.page-about .about-plate {
  position: relative;
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  border-top: 4px solid var(--ys-track);
  border-radius: 0 0 var(--ys-radius) var(--ys-radius);
  background: var(--ys-paper);
  color: var(--ys-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.page-about .about-plate__label {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--ys-steel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-about .about-plate__quote {
  margin: 0;
  font-family: var(--ys-font-serif);
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.page-about .about-plate__meta {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(7, 17, 29, 0.18);
  color: #4f6474;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.page-about .about-mission__plate {
  transform: rotate(-1.2deg);
}

.page-about .about-section-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.page-about .about-section-head__lede {
  max-width: 62ch;
  margin: 0;
}

.page-about .about-timeline {
  border-top: 1px solid var(--ys-steel);
  background: var(--ys-ink);
}

.page-about .about-timeline__track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--ys-mint) var(--ys-night);
}

.page-about .about-timeline__item {
  position: relative;
  flex: 0 0 min(78vw, 270px);
  padding: 1.5rem 1.15rem 1.5rem 0;
  scroll-snap-align: start;
  border-top: 1px solid var(--ys-steel);
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ys-track);
  box-shadow: 0 0 0 4px var(--ys-ink);
}

.page-about .about-timeline__year {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--ys-mint);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1;
}

.page-about .about-timeline__item h3 {
  margin: 0 0 0.65rem;
  color: var(--ys-white);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
}

.page-about .about-timeline__item p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.86rem;
  line-height: 1.75;
}

.page-about .about-review {
  background: var(--ys-night);
}

.page-about .about-review__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.page-about .about-review__lede {
  max-width: 60ch;
  margin: 1.2rem 0 0;
}

.page-about .about-review__steps {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-review__steps li {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 0.8rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--ys-steel);
}

.page-about .about-review__steps li:last-child {
  border-bottom: 1px solid var(--ys-steel);
}

.page-about .about-review__index {
  color: var(--ys-track);
  font-size: 0.88rem;
  line-height: 1.6;
}

.page-about .about-review__steps h3 {
  margin: 0 0 0.45rem;
  color: var(--ys-white);
  font-size: 1rem;
  font-weight: 800;
}

.page-about .about-review__steps p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.9rem;
  line-height: 1.75;
}

.page-about .about-review__visual {
  position: relative;
  padding-bottom: 1.5rem;
}

.page-about .about-review__figure {
  aspect-ratio: 4 / 3;
}

.page-about .about-review__plate {
  width: min(92%, 360px);
  margin: -2rem 0 0 auto;
  transform: rotate(1.2deg);
}

.page-about .about-team {
  background: var(--ys-ink);
}

.page-about .about-team__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
}

.page-about .about-team__role {
  grid-column: span 12;
  min-width: 0;
  padding: 1.35rem;
  border-top: 2px solid var(--ys-steel);
  background: linear-gradient(150deg, rgba(13, 28, 43, 0.92), rgba(7, 17, 29, 0.4));
}

.page-about .about-team__role--lead {
  border-top-color: var(--ys-mint);
}

.page-about .about-team__role--wide {
  border-top-color: var(--ys-track);
}

.page-about .about-team__num {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--ys-mint);
  font-size: clamp(3rem, 8vw, 5.3rem);
  line-height: 0.95;
}

.page-about .about-team__role h3 {
  margin: 0 0 0.65rem;
  color: var(--ys-white);
  font-size: 1.05rem;
  font-weight: 800;
}

.page-about .about-team__role p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.88rem;
  line-height: 1.75;
}

.page-about .about-team__address {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--ys-steel);
  color: var(--ys-mist);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.page-about .about-coverage {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ys-steel);
  border-bottom: 1px solid var(--ys-steel);
  background:
    linear-gradient(145deg, rgba(43, 240, 194, 0.04), transparent 38%),
    var(--ys-night);
}

.page-about .about-coverage__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-about .about-coverage__dots {
  position: absolute;
  top: 8%;
  right: -16%;
  width: min(780px, 88%);
  color: var(--ys-mint);
  opacity: 0.2;
}

.page-about .about-coverage__inner {
  position: relative;
  z-index: 1;
}

.page-about .about-coverage__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--ys-steel);
  background: var(--ys-steel);
}

.page-about .about-coverage__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 1rem;
  background: var(--ys-night);
}

.page-about .about-coverage__value {
  color: var(--ys-white);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.12;
}

.page-about .about-coverage__value.ys-band__v--mint {
  color: var(--ys-mint);
}

.page-about .about-coverage__label {
  color: var(--ys-mist);
  font-size: 0.72rem;
  line-height: 1.5;
}

.page-about .about-coverage__figure {
  margin-top: 1.2rem;
  aspect-ratio: 12 / 5;
}

.page-about .about-coverage__figure img {
  opacity: 0.8;
}

.page-about .about-cooperation {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.2rem, 5vw, 3.6rem);
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px dashed var(--ys-steel);
}

.page-about .about-cooperation__intro h3 {
  margin: 0 0 0.8rem;
  color: var(--ys-white);
  font-family: var(--ys-font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-about .about-cooperation__intro p {
  max-width: 44ch;
  margin: 0 0 1.2rem;
  color: var(--ys-mist);
  font-size: 0.9rem;
  line-height: 1.8;
}

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

.page-about .about-cooperation__list li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--ys-steel);
}

.page-about .about-cooperation__list li:last-child {
  border-bottom: 1px solid var(--ys-steel);
}

.page-about .about-cooperation__idx {
  color: var(--ys-track);
  font-size: 0.82rem;
}

.page-about .about-cooperation__list h4 {
  margin: 0 0 0.35rem;
  color: var(--ys-white);
  font-size: 0.98rem;
  font-weight: 800;
}

.page-about .about-cooperation__list p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.86rem;
  line-height: 1.72;
}

.page-about .about-improve {
  background: var(--ys-ink);
}

.page-about .about-improve__panel {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 5vw, 3.8rem);
  border-radius: var(--ys-radius-lg);
  background:
    linear-gradient(130deg, rgba(255, 91, 61, 0.16), transparent 30%),
    var(--ys-paper);
  color: var(--ys-ink);
}

.page-about .about-improve__eyebrow {
  margin: 0 0 0.9rem;
  color: #9b321f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.page-about .about-improve__title {
  margin: 0;
  color: var(--ys-ink);
  font-family: var(--ys-font-display);
  font-size: clamp(1.8rem, 4.8vw, 3.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.page-about .about-improve__lede {
  max-width: 58ch;
  margin: 1.2rem 0 0;
  color: #3d5262;
  font-size: 0.98rem;
  line-height: 1.85;
}

.page-about .about-improve__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.page-about .about-improve__actions .ys-btn--primary {
  background: var(--ys-ink);
  border-color: var(--ys-ink);
  color: var(--ys-white);
}

.page-about .about-improve__actions .ys-btn--primary:hover {
  background: var(--ys-night);
  border-color: var(--ys-night);
}

.page-about .about-improve__contact {
  margin: 1.2rem 0 0;
  color: #4f6474;
  font-family: var(--ys-font-mono);
  font-size: 0.8rem;
  line-height: 1.8;
}

.page-about .about-improve__flow {
  min-width: 0;
  padding-top: 0.4rem;
}

.page-about .about-improve__flow h3 {
  margin: 0 0 1rem;
  color: var(--ys-ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.page-about .about-improve__flow ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-improve__flow li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.7rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(7, 17, 29, 0.16);
}

.page-about .about-improve__flow li:last-child {
  border-bottom: 1px solid rgba(7, 17, 29, 0.16);
}

.page-about .about-improve__flow li span {
  color: #b63d27;
  font-size: 0.78rem;
}

.page-about .about-improve__flow li p {
  margin: 0;
  color: #304756;
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-improve__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 1.2rem;
}

.page-about .about-improve__links a {
  color: var(--ys-ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ys-track);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.page-about [data-reveal].is-in {
  animation: about-rise 680ms var(--ys-ease) both;
}

@keyframes about-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 720px) {
  .page-about .about-hero__band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-hero__band .ys-band__cell {
    padding: 1.15rem 1.15rem 1.15rem 0;
  }

  .page-about .about-hero__band .ys-band__cell:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .page-about .about-hero__band .ys-band__cell + .ys-band__cell {
    padding-left: 1.15rem;
    border-left: 1px solid var(--ys-steel);
  }

  .page-about .about-section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 2rem;
  }

  .page-about .about-team__role {
    grid-column: span 6;
  }

  .page-about .about-team__role--lead {
    grid-column: span 7;
  }

  .page-about .about-team__role--wide {
    grid-column: span 12;
  }

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

  .page-about .about-cooperation {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 2.5rem;
  }

  .page-about .about-improve__panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
    gap: clamp(2rem, 5vw, 4.8rem);
  }

  .page-about .about-hero__figure {
    aspect-ratio: 10 / 11;
    max-height: 580px;
  }

  .page-about .about-mission__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  }

  .page-about .about-mission__plate {
    margin-top: -1.5rem;
  }

  .page-about .about-timeline__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-timeline__item {
    flex: initial;
    padding-right: 1.5rem;
  }

  .page-about .about-review__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .page-about .about-review__visual {
    padding-top: 2.8rem;
  }

  .page-about .about-team__role--lead {
    grid-column: span 6;
  }

  .page-about .about-team__role:not(.about-team__role--lead):not(.about-team__role--wide) {
    grid-column: span 3;
  }

  .page-about .about-team__role--wide {
    grid-column: span 12;
  }

  .page-about .about-coverage__dots {
    top: 2%;
    right: -7%;
    width: min(760px, 56%);
    opacity: 0.26;
  }

  .page-about .about-coverage__figure {
    aspect-ratio: 12 / 4.4;
  }

  .page-about .about-improve__panel {
    padding: clamp(2.5rem, 5vw, 4.2rem);
  }
}

@media (max-width: 420px) {
  .page-about .about-hero__title {
    font-size: clamp(2.55rem, 13.6vw, 3.4rem);
  }

  .page-about .about-hero__band .ys-band__v {
    font-size: 1.05rem;
  }

  .page-about .about-review__plate {
    width: 100%;
    margin-top: -0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal].is-in {
    animation: none;
  }

  .page-about .ys-btn,
  .page-about .ys-btn:hover {
    transition: none;
    transform: none;
  }

  .page-about .about-timeline__track {
    scroll-behavior: auto;
  }
}


<main id="main-content" class="page-about">
  <div class="ys-page-head about-hero">
    <div class="ys-container about-hero__inner">
      <nav class="ys-breadcrumb about-hero__crumb" aria-label="面包屑">
        <a href="/">赛场首页</a>
        <span aria-hidden="true">/</span>
        <span aria-current="page">品牌与使命</span>
      </nav>

      <div class="about-hero__grid">
        <div class="about-hero__copy">
          <p class="ys-eyebrow">云体育赛场 · 自2018年</p>
          <h1 id="mission-title" class="ys-display about-hero__title">成绩有据可查，<br>换块屏幕也能接着看</h1>
          <p class="ys-lede about-hero__lede">云体育赛场为关注赛果的球迷、带队教练和赛事运营者提供赛后成绩查询、射手榜回溯与跨设备查看。你在手机上翻到的轮次，在平板上打开仍是同一份记录；换设备重新登录，也能从个人中心接着比对。</p>
          <div class="about-hero__actions">
            <a class="ys-btn ys-btn--primary" href="/services/#score-check">去查最新成绩</a>
            <a class="ys-btn ys-btn--ghost" href="#review">看我们怎样复核</a>
          </div>
          <p class="about-hero__note">数据编辑每日进行两次成绩校验，纠错反馈平均在1个工作日内完成复核。</p>
        </div>

        <figure class="ys-media ys-media--slant about-hero__figure">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间赛场灯光照向记分屏边缘，屏幕上显示待更新的赛后数据">
        </figure>
      </div>

      <div class="ys-band about-hero__band" aria-label="赛事收录概况">
        <div class="ys-band__cell">
          <span class="ys-band__k">赛事累计</span>
          <span class="ys-band__v ys-num">6,200余场</span>
        </div>
        <div class="ys-band__cell">
          <span class="ys-band__k">成绩条目</span>
          <span class="ys-band__v ys-num ys-band__v--mint">48万条</span>
        </div>
        <div class="ys-band__cell">
          <span class="ys-band__k">覆盖项目</span>
          <span class="ys-band__v ys-num">12个</span>
        </div>
        <div class="ys-band__cell">
          <span class="ys-band__k">合作城市</span>
          <span class="ys-band__v ys-num ys-band__v--track">26座</span>
        </div>
      </div>
    </div>
  </div>

  <section class="ys-section about-mission" id="mission" aria-labelledby="mission-statement-title">
    <div class="ys-container about-mission__grid">
      <div class="about-mission__copy">
        <p class="ys-eyebrow">我们的出发点</p>
        <h2 id="mission-statement-title" class="ys-h2">比赛结束之后，信息才刚开始被需要</h2>
        <div class="ys-prose about-mission__prose">
          <p>一场比赛打完，比分只是起点。球迷想知道这一轮谁进了球、射手榜往前翻是什么样；教练要按轮次回看球队走势；赛事运营人员则要把赛果交给下一场、下一周。云体育赛场把这些需求拆成可以动手操作的入口：按日期、项目、联赛或赛会、球队或选手组合筛选，翻到哪一轮就看哪一轮。</p>
          <p>2018年上线至今，我们持续围绕成绩查询与跨设备查看两条主线建设。历史数据可回溯至2018赛季，平板访问占比达到31%。屏幕在变，打开同一份记录的动作不该变。</p>
        </div>
      </div>

      <aside class="about-plate about-mission__plate" aria-label="品牌使命说明">
        <span class="about-plate__label">品牌使命</span>
        <p class="about-plate__quote">让成绩更新有迹可循，让不同设备上的阅读不被打断。</p>
        <p class="about-plate__meta">云体育赛场 · 上海</p>
      </aside>
    </div>
  </section>

  <section class="ys-section about-timeline" id="timeline" aria-labelledby="timeline-title">
    <div class="ys-container">
      <div class="about-section-head" data-reveal="0">
        <p class="ys-eyebrow">发展节点</p>
        <h2 id="timeline-title" class="ys-h2">从第一版赛果页，到第3版平板适配</h2>
        <p class="ys-lede about-section-head__lede">五年里，我们把赛后快讯一步步做成能按轮次翻查、能换设备继续看的记录。</p>
      </div>

      <ol class="about-timeline__track" aria-label="云体育赛场发展历程">
        <li class="about-timeline__item" data-reveal="40">
          <span class="about-timeline__year ys-num">2018</span>
          <h3>赛场记录起步</h3>
          <p>开始提供足球、篮球等项目的赛后赛果，历史数据从这一赛季起算。</p>
        </li>
        <li class="about-timeline__item" data-reveal="90">
          <span class="about-timeline__year ys-num">2021</span>
          <h3>成绩查询工作台</h3>
          <p>把日期、项目、联赛或赛会、球队或选手四组条件放进同一个筛选视图。</p>
        </li>
        <li class="about-timeline__item" data-reveal="140">
          <span class="about-timeline__year ys-num">2023</span>
          <h3>移动端横屏切换</h3>
          <p>首页、成绩查询、射手榜、设备记录四个入口在横竖屏下重新排布，并支持分屏查看。</p>
        </li>
        <li class="about-timeline__item" data-reveal="190">
          <span class="about-timeline__year ys-num">2024</span>
          <h3>设备记录上线</h3>
          <p>个人中心保留最近12台设备和90天登录记录，两台设备可以对同一日期做数据比对。</p>
        </li>
        <li class="about-timeline__item" data-reveal="240">
          <span class="about-timeline__year ys-num">2025</span>
          <h3>第3版平板适配</h3>
          <p>覆盖9个品牌24款主流平板，新增11英寸与13英寸横屏对照、分屏查看和触控翻页说明。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="ys-section about-review" id="review" aria-labelledby="review-title">
    <div class="ys-container about-review__grid">
      <div class="about-review__copy" data-reveal="0">
        <p class="ys-eyebrow">数据编辑与复核</p>
        <h2 id="review-title" class="ys-h2">一条成绩进站之后，要过几道手</h2>
        <p class="ys-lede about-review__lede">赛果从场地传来，到出现在你的筛选结果里，中间由数据编辑完成抓取、比对、入库和发布后的抽检。射手榜在比赛结束后30分钟内完成当轮同步。</p>

        <ol class="about-review__steps">
          <li>
            <span class="about-review__index ys-num">01</span>
            <div>
              <h3>抓取赛果</h3>
              <p>比赛结束后，编辑从赛事记录中摘出比分、轮次与关键事件，按项目归类。</p>
            </div>
          </li>
          <li>
            <span class="about-review__index ys-num">02</span>
            <div>
              <h3>双人比对</h3>
              <p>同一场比赛至少由两名编辑比对记录，比分与球员数据分开校验。</p>
            </div>
          </li>
          <li>
            <span class="about-review__index ys-num">03</span>
            <div>
              <h3>写入轮次</h3>
              <p>把球队数据与射手榜挂到对应轮次，支持赛季、轮次和球队回溯。</p>
            </div>
          </li>
          <li>
            <span class="about-review__index ys-num">04</span>
            <div>
              <h3>发布后抽检</h3>
              <p>每日两次成绩校验；发现差异当次标记，纠错平均在1个工作日内完成复核。</p>
            </div>
          </li>
        </ol>
      </div>

      <div class="about-review__visual" data-reveal="120">
        <figure class="ys-media about-review__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="俯拍桌面上的赛事记录纸、键盘与显示表格的屏幕，正在整理赛后数据" loading="lazy" decoding="async">
        </figure>
        <div class="about-plate about-review__plate">
          <span class="about-plate__label">编辑桌 · 发布前</span>
          <p class="about-plate__quote">先把同一场比赛的比分、轮次和球员数据分开看，再放到一起对。</p>
          <p class="about-plate__meta">每日两次校验 · 双人比对</p>
        </div>
      </div>
    </div>
  </section>

  <section class="ys-section about-team" id="team" aria-labelledby="team-title">
    <div class="ys-container">
      <div class="about-section-head about-section-head--split" data-reveal="0">
        <div>
          <p class="ys-eyebrow">团队与分工</p>
          <h2 id="team-title" class="ys-h2">28个人，围着同一块记分屏工作</h2>
        </div>
        <p class="ys-lede about-section-head__lede">数据编辑把赛果变成条目，前端适配把它装进不同尺寸的屏幕，客服和内容运营把问题带回编辑桌。运营主体位于上海。</p>
      </div>

      <div class="about-team__grid">
        <article class="about-team__role about-team__role--lead" data-reveal="40">
          <span class="about-team__num ys-num">12</span>
          <h3>数据编辑</h3>
          <p>负责赛果录入、轮次关联与赛前赛后校验。每日两次成绩校验由这组人轮值完成，纠错反馈在这里被逐条处理。</p>
        </article>
        <article class="about-team__role" data-reveal="90">
          <span class="about-team__num ys-num">6</span>
          <h3>前端适配</h3>
          <p>维护手机横竖屏、平板分屏与触控翻页，第3版平板适配说明由这组人与数据编辑共同整理。</p>
        </article>
        <article class="about-team__role" data-reveal="140">
          <span class="about-team__num ys-num">5</span>
          <h3>客服支持</h3>
          <p>处理成绩纠错、设备记录与登录问题。工作日9:00-18:00在线，纠错优先接收截图与日期。</p>
        </article>
        <article class="about-team__role about-team__role--wide" data-reveal="190">
          <span class="about-team__num ys-num">5</span>
          <h3>内容运营</h3>
          <p>维护赛况笔记、合作专题与帮助内容，每年48期笔记按成绩速递、对照方法、设备适配和赛季观察四个栏目排期。</p>
        </article>
      </div>

      <p class="about-team__address">联系地址：上海市徐汇区云锦路188号 · 运营主体位于上海</p>
    </div>
  </section>

  <section class="ys-section about-coverage" id="coverage" aria-labelledby="coverage-title">
    <div class="about-coverage__bg" aria-hidden="true">
      <svg class="about-coverage__dots" viewBox="0 0 640 320" role="presentation" focusable="false">
        <g fill="currentColor">
          <circle cx="30" cy="40" r="3"></circle><circle cx="70" cy="52" r="3"></circle><circle cx="112" cy="36" r="3"></circle><circle cx="152" cy="64" r="3"></circle><circle cx="196" cy="44" r="3"></circle><circle cx="238" cy="70" r="3"></circle><circle cx="282" cy="40" r="3"></circle><circle cx="326" cy="58" r="3"></circle><circle cx="368" cy="38" r="3"></circle><circle cx="410" cy="66" r="3"></circle><circle cx="452" cy="42" r="3"></circle><circle cx="496" cy="60" r="3"></circle><circle cx="540" cy="40" r="3"></circle><circle cx="584" cy="64" r="3"></circle>
          <circle cx="46" cy="100" r="3"></circle><circle cx="88" cy="112" r="3"></circle><circle cx="132" cy="96" r="3"></circle><circle cx="174" cy="120" r="3"></circle><circle cx="218" cy="102" r="3"></circle><circle cx="260" cy="126" r="3"></circle><circle cx="302" cy="98" r="3"></circle><circle cx="344" cy="116" r="3"></circle><circle cx="388" cy="100" r="3"></circle><circle cx="430" cy="124" r="3"></circle><circle cx="474" cy="104" r="3"></circle><circle cx="518" cy="122" r="3"></circle><circle cx="560" cy="98" r="3"></circle><circle cx="604" cy="118" r="3"></circle>
          <circle cx="34" cy="164" r="3"></circle><circle cx="76" cy="180" r="3"></circle><circle cx="120" cy="158" r="3"></circle><circle cx="162" cy="184" r="3"></circle><circle cx="206" cy="166" r="3"></circle><circle cx="248" cy="190" r="3"></circle><circle cx="290" cy="160" r="3"></circle><circle cx="334" cy="182" r="3"></circle><circle cx="376" cy="164" r="3"></circle><circle cx="420" cy="188" r="3"></circle><circle cx="462" cy="168" r="3"></circle><circle cx="506" cy="186" r="3"></circle><circle cx="548" cy="162" r="3"></circle><circle cx="592" cy="184" r="3"></circle>
          <circle cx="48" cy="232" r="3"></circle><circle cx="90" cy="244" r="3"></circle><circle cx="134" cy="226" r="3"></circle><circle cx="176" cy="250" r="3"></circle><circle cx="220" cy="234" r="3"></circle><circle cx="262" cy="256" r="3"></circle><circle cx="304" cy="228" r="3"></circle><circle cx="346" cy="246" r="3"></circle><circle cx="390" cy="230" r="3"></circle><circle cx="432" cy="254" r="3"></circle><circle cx="476" cy="236" r="3"></circle><circle cx="520" cy="252" r="3"></circle><circle cx="562" cy="228" r="3"></circle><circle cx="606" cy="248" r="3"></circle>
          <circle cx="36" cy="292" r="3"></circle><circle cx="82" cy="304" r="3"></circle><circle cx="126" cy="286" r="3"></circle><circle cx="168" cy="308" r="3"></circle><circle cx="212" cy="292" r="3"></circle><circle cx="254" cy="310" r="3"></circle><circle cx="298" cy="288" r="3"></circle><circle cx="340" cy="306" r="3"></circle><circle cx="382" cy="290" r="3"></circle><circle cx="426" cy="308" r="3"></circle><circle cx="470" cy="292" r="3"></circle><circle cx="514" cy="306" r="3"></circle><circle cx="556" cy="286" r="3"></circle><circle cx="600" cy="304" r="3"></circle>
        </g>
      </svg>
    </div>

    <div class="ys-container about-coverage__inner">
      <div class="about-section-head about-section-head--split" data-reveal="0">
        <div>
          <p class="ys-eyebrow">覆盖与合作</p>
          <h2 id="coverage-title" class="ys-h2">26个城市、12个项目，最后落到你的屏幕上</h2>
        </div>
        <p class="ys-lede about-section-head__lede">从2018赛季到现在，站点累计收录6,200余场赛事、48万条成绩条目。注册用户92万，月活跃用户14万，其中平板设备访问占比31%。</p>
      </div>

      <div class="about-coverage__stats" data-reveal="80">
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num">12</span>
          <span class="about-coverage__label">个项目</span>
        </div>
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num ys-band__v--mint">18</span>
          <span class="about-coverage__label">家赛事主办方</span>
        </div>
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num">26</span>
          <span class="about-coverage__label">个城市</span>
        </div>
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num">92万</span>
          <span class="about-coverage__label">注册用户</span>
        </div>
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num ys-band__v--mint">14万</span>
          <span class="about-coverage__label">月活跃用户</span>
        </div>
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num">31%</span>
          <span class="about-coverage__label">平板设备访问占比</span>
        </div>
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num">6,200+</span>
          <span class="about-coverage__label">场赛事收录</span>
        </div>
        <div class="about-coverage__stat">
          <span class="about-coverage__value ys-num">48万</span>
          <span class="about-coverage__label">条成绩记录</span>
        </div>
      </div>

      <figure class="ys-media ys-media--wide about-coverage__figure" data-reveal="140">
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="抽象城市点阵与赛道线组成的赛事覆盖示意纹理" loading="lazy" decoding="async">
      </figure>

      <div class="about-cooperation" data-reveal="180">
        <div class="about-cooperation__intro">
          <p class="ys-eyebrow">合作生态</p>
          <h3>三种常见的合作方式</h3>
          <p>赛事成绩接入、赛况笔记联合专题、设备适配测试，面向赛事主办方、内容伙伴与设备评测需求开放。</p>
          <a class="ys-btn ys-btn--primary" href="/connect/">聊聊合作</a>
        </div>
        <ul class="about-cooperation__list">
          <li>
            <span class="about-cooperation__idx ys-num">01</span>
            <div>
              <h4>赛事成绩接入</h4>
              <p>把赛果与轮次数据接入站内查询，覆盖足球、篮球、排球、田径、游泳等项目。</p>
            </div>
          </li>
          <li>
            <span class="about-cooperation__idx ys-num">02</span>
            <div>
              <h4>赛况笔记联合专题</h4>
              <p>围绕赛季节点做成绩对照、轮次回溯和设备适配观察，每年48期笔记可持续排期。</p>
            </div>
          </li>
          <li>
            <span class="about-cooperation__idx ys-num">03</span>
            <div>
              <h4>设备适配测试</h4>
              <p>针对平板和手机横竖屏场景做查看、分屏与触控翻页测试，适配结论同步到第3版说明。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="ys-section about-improve" id="improve" aria-labelledby="improve-title">
    <div class="ys-container">
      <div class="about-improve__panel" data-reveal="0">
        <div class="about-improve__copy">
          <p class="about-improve__eyebrow">纠错与持续改进</p>
          <h2 id="improve-title" class="about-improve__title">看到不对的地方，把它交回编辑桌</h2>
          <p class="about-improve__lede">成绩条目由数据编辑复核，适配说明随版本更新。纠错请附截图与日期，客服工作日9:00-18:00内回复，平均1个工作日内完成复核。</p>
          <div class="about-improve__actions">
            <a class="ys-btn ys-btn--primary" href="/services/#score-check">返回成绩查询</a>
            <a class="ys-btn ys-btn--track" href="/connect/">联系沟通</a>
          </div>
          <p class="about-improve__contact">邮箱：contact@sports-yayun.com.cn<br>电话：400-5895-4805</p>
        </div>

        <div class="about-improve__flow">
          <h3>一条纠错会这样走</h3>
          <ol>
            <li>
              <span class="ys-num">01</span>
              <p>截下页面，记下比赛日期、项目与轮次。</p>
            </li>
            <li>
              <span class="ys-num">02</span>
              <p>把截图与日期发到客服邮箱，或在工作日拨打客服电话。</p>
            </li>
            <li>
              <span class="ys-num">03</span>
              <p>数据编辑比对赛事记录，平均1个工作日内给出复核结果。</p>
            </li>
            <li>
              <span class="ys-num">04</span>
              <p>条目更新后回到成绩查询工作台，按日期与项目复查。</p>
            </li>
          </ol>
          <div class="about-improve__links">
            <a href="/support/">遇到登录或换设备问题</a>
            <a href="/notes/">翻看赛况笔记</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

.page-about {
  background: var(--ys-ink);
  color: var(--ys-white);
  font-family: var(--ys-font-body);
  overflow: clip;
}

.page-about *,
.page-about *::before,
.page-about *::after {
  box-sizing: border-box;
}

.page-about .ys-section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.page-about .ys-h2 {
  margin: 0;
  font-family: var(--ys-font-display);
  font-size: clamp(1.8rem, 4.8vw, 3.35rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ys-white);
}

.page-about .ys-eyebrow {
  margin: 0 0 0.9rem;
  color: var(--ys-mint);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-about .ys-lede {
  color: var(--ys-mist);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.85;
}

.page-about .ys-prose {
  color: var(--ys-mist);
  font-size: 1rem;
  line-height: 1.85;
}

.page-about .ys-prose p {
  margin: 0 0 1.15em;
}

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

.page-about .ys-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--ys-steel);
  border-radius: var(--ys-radius);
  background: var(--ys-night);
}

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

.page-about .ys-num {
  font-family: var(--ys-font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-about .ys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.3rem;
  border-radius: var(--ys-radius-pill);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 180ms var(--ys-ease), background-color 180ms var(--ys-ease), border-color 180ms var(--ys-ease), color 180ms var(--ys-ease);
}

.page-about .ys-btn:hover {
  transform: translateY(-2px);
}

.page-about .ys-btn--primary {
  background: var(--ys-mint);
  border: 1px solid var(--ys-mint);
  color: var(--ys-ink);
}

.page-about .ys-btn--primary:hover {
  background: var(--ys-mint-soft);
  border-color: var(--ys-mint-soft);
}

.page-about .ys-btn--ghost {
  border: 1px solid var(--ys-steel);
  color: var(--ys-white);
  background: rgba(13, 28, 43, 0.35);
}

.page-about .ys-btn--ghost:hover {
  border-color: var(--ys-mint);
  color: var(--ys-mint);
}

.page-about .ys-btn--track {
  background: var(--ys-track);
  border: 1px solid var(--ys-track);
  color: var(--ys-ink);
}

.page-about .ys-btn--track:hover {
  background: var(--ys-warm);
  border-color: var(--ys-warm);
}

.page-about .about-hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--ys-header-h) + clamp(2.4rem, 7vw, 5.4rem)) 0 clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 82% 12%, rgba(43, 240, 194, 0.14), transparent 34%),
    radial-gradient(circle at 12% 76%, rgba(255, 91, 61, 0.09), transparent 28%),
    var(--ys-ink);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.26;
  pointer-events: none;
  background-image: repeating-linear-gradient(115deg, transparent 0, transparent 46px, rgba(36, 64, 90, 0.34) 47px, transparent 48px);
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.page-about .about-hero__crumb {
  margin-bottom: clamp(1.8rem, 5vw, 3.6rem);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: end;
}

.page-about .about-hero__copy {
  position: relative;
  z-index: 2;
}

.page-about .about-hero__title {
  margin: 0;
  max-width: 12ch;
  color: var(--ys-white);
  font-family: var(--ys-font-display);
  font-size: clamp(3rem, 10.6vw, 7.2rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.page-about .about-hero__lede {
  max-width: 60ch;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.page-about .about-hero__note {
  max-width: 48ch;
  margin: 1.5rem 0 0;
  padding-left: 0.95rem;
  border-left: 2px solid var(--ys-track);
  color: var(--ys-mist);
  font-size: 0.78rem;
  line-height: 1.7;
}

.page-about .about-hero__figure {
  position: relative;
  min-height: 280px;
  aspect-ratio: 4 / 3;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 8% 100%);
}

.page-about .about-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 44%, rgba(7, 17, 29, 0.62));
  pointer-events: none;
}

.page-about .about-hero__band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3.8rem);
  border-top: 1px solid var(--ys-steel);
  border-bottom: 1px solid var(--ys-steel);
}

.page-about .about-hero__band .ys-band__cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1rem 1rem 0;
  min-width: 0;
}

.page-about .about-hero__band .ys-band__cell:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--ys-steel);
}

.page-about .about-hero__band .ys-band__k {
  color: var(--ys-mist);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.page-about .about-hero__band .ys-band__v {
  color: var(--ys-white);
  font-family: var(--ys-font-mono);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.page-about .about-hero__band .ys-band__v--mint {
  color: var(--ys-mint);
}

.page-about .about-hero__band .ys-band__v--track {
  color: var(--ys-track);
}

.page-about .about-mission {
  background: linear-gradient(180deg, var(--ys-ink) 0%, var(--ys-night) 22%, var(--ys-night) 100%);
}

.page-about .about-mission__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

.page-about .about-mission__prose {
  max-width: 66ch;
  margin-top: 1.4rem;
}

.page-about .about-plate {
  position: relative;
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  border-top: 4px solid var(--ys-track);
  border-radius: 0 0 var(--ys-radius) var(--ys-radius);
  background: var(--ys-paper);
  color: var(--ys-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.page-about .about-plate__label {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--ys-steel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-about .about-plate__quote {
  margin: 0;
  font-family: var(--ys-font-serif);
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.page-about .about-plate__meta {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(7, 17, 29, 0.18);
  color: #4f6474;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.page-about .about-mission__plate {
  transform: rotate(-1.2deg);
}

.page-about .about-section-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.page-about .about-section-head__lede {
  max-width: 62ch;
  margin: 0;
}

.page-about .about-timeline {
  border-top: 1px solid var(--ys-steel);
  background: var(--ys-ink);
}

.page-about .about-timeline__track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--ys-mint) var(--ys-night);
}

.page-about .about-timeline__item {
  position: relative;
  flex: 0 0 min(78vw, 270px);
  padding: 1.5rem 1.15rem 1.5rem 0;
  scroll-snap-align: start;
  border-top: 1px solid var(--ys-steel);
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ys-track);
  box-shadow: 0 0 0 4px var(--ys-ink);
}

.page-about .about-timeline__year {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--ys-mint);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1;
}

.page-about .about-timeline__item h3 {
  margin: 0 0 0.65rem;
  color: var(--ys-white);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
}

.page-about .about-timeline__item p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.86rem;
  line-height: 1.75;
}

.page-about .about-review {
  background: var(--ys-night);
}

.page-about .about-review__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.page-about .about-review__lede {
  max-width: 60ch;
  margin: 1.2rem 0 0;
}

.page-about .about-review__steps {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-review__steps li {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 0.8rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--ys-steel);
}

.page-about .about-review__steps li:last-child {
  border-bottom: 1px solid var(--ys-steel);
}

.page-about .about-review__index {
  color: var(--ys-track);
  font-size: 0.88rem;
  line-height: 1.6;
}

.page-about .about-review__steps h3 {
  margin: 0 0 0.45rem;
  color: var(--ys-white);
  font-size: 1rem;
  font-weight: 800;
}

.page-about .about-review__steps p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.9rem;
  line-height: 1.75;
}

.page-about .about-review__visual {
  position: relative;
  padding-bottom: 1.5rem;
}

.page-about .about-review__figure {
  aspect-ratio: 4 / 3;
}

.page-about .about-review__plate {
  width: min(92%, 360px);
  margin: -2rem 0 0 auto;
  transform: rotate(1.2deg);
}

.page-about .about-team {
  background: var(--ys-ink);
}

.page-about .about-team__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
}

.page-about .about-team__role {
  grid-column: span 12;
  min-width: 0;
  padding: 1.35rem;
  border-top: 2px solid var(--ys-steel);
  background: linear-gradient(150deg, rgba(13, 28, 43, 0.92), rgba(7, 17, 29, 0.4));
}

.page-about .about-team__role--lead {
  border-top-color: var(--ys-mint);
}

.page-about .about-team__role--wide {
  border-top-color: var(--ys-track);
}

.page-about .about-team__num {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--ys-mint);
  font-size: clamp(3rem, 8vw, 5.3rem);
  line-height: 0.95;
}

.page-about .about-team__role h3 {
  margin: 0 0 0.65rem;
  color: var(--ys-white);
  font-size: 1.05rem;
  font-weight: 800;
}

.page-about .about-team__role p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.88rem;
  line-height: 1.75;
}

.page-about .about-team__address {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--ys-steel);
  color: var(--ys-mist);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.page-about .about-coverage {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ys-steel);
  border-bottom: 1px solid var(--ys-steel);
  background:
    linear-gradient(145deg, rgba(43, 240, 194, 0.04), transparent 38%),
    var(--ys-night);
}

.page-about .about-coverage__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-about .about-coverage__dots {
  position: absolute;
  top: 8%;
  right: -16%;
  width: min(780px, 88%);
  color: var(--ys-mint);
  opacity: 0.2;
}

.page-about .about-coverage__inner {
  position: relative;
  z-index: 1;
}

.page-about .about-coverage__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--ys-steel);
  background: var(--ys-steel);
}

.page-about .about-coverage__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 1rem;
  background: var(--ys-night);
}

.page-about .about-coverage__value {
  color: var(--ys-white);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.12;
}

.page-about .about-coverage__value.ys-band__v--mint {
  color: var(--ys-mint);
}

.page-about .about-coverage__label {
  color: var(--ys-mist);
  font-size: 0.72rem;
  line-height: 1.5;
}

.page-about .about-coverage__figure {
  margin-top: 1.2rem;
  aspect-ratio: 12 / 5;
}

.page-about .about-coverage__figure img {
  opacity: 0.8;
}

.page-about .about-cooperation {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.2rem, 5vw, 3.6rem);
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px dashed var(--ys-steel);
}

.page-about .about-cooperation__intro h3 {
  margin: 0 0 0.8rem;
  color: var(--ys-white);
  font-family: var(--ys-font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-about .about-cooperation__intro p {
  max-width: 44ch;
  margin: 0 0 1.2rem;
  color: var(--ys-mist);
  font-size: 0.9rem;
  line-height: 1.8;
}

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

.page-about .about-cooperation__list li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--ys-steel);
}

.page-about .about-cooperation__list li:last-child {
  border-bottom: 1px solid var(--ys-steel);
}

.page-about .about-cooperation__idx {
  color: var(--ys-track);
  font-size: 0.82rem;
}

.page-about .about-cooperation__list h4 {
  margin: 0 0 0.35rem;
  color: var(--ys-white);
  font-size: 0.98rem;
  font-weight: 800;
}

.page-about .about-cooperation__list p {
  margin: 0;
  color: var(--ys-mist);
  font-size: 0.86rem;
  line-height: 1.72;
}

.page-about .about-improve {
  background: var(--ys-ink);
}

.page-about .about-improve__panel {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 5vw, 3.8rem);
  border-radius: var(--ys-radius-lg);
  background:
    linear-gradient(130deg, rgba(255, 91, 61, 0.16), transparent 30%),
    var(--ys-paper);
  color: var(--ys-ink);
}

.page-about .about-improve__eyebrow {
  margin: 0 0 0.9rem;
  color: #9b321f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.page-about .about-improve__title {
  margin: 0;
  color: var(--ys-ink);
  font-family: var(--ys-font-display);
  font-size: clamp(1.8rem, 4.8vw, 3.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.page-about .about-improve__lede {
  max-width: 58ch;
  margin: 1.2rem 0 0;
  color: #3d5262;
  font-size: 0.98rem;
  line-height: 1.85;
}

.page-about .about-improve__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.page-about .about-improve__actions .ys-btn--primary {
  background: var(--ys-ink);
  border-color: var(--ys-ink);
  color: var(--ys-white);
}

.page-about .about-improve__actions .ys-btn--primary:hover {
  background: var(--ys-night);
  border-color: var(--ys-night);
}

.page-about .about-improve__contact {
  margin: 1.2rem 0 0;
  color: #4f6474;
  font-family: var(--ys-font-mono);
  font-size: 0.8rem;
  line-height: 1.8;
}

.page-about .about-improve__flow {
  min-width: 0;
  padding-top: 0.4rem;
}

.page-about .about-improve__flow h3 {
  margin: 0 0 1rem;
  color: var(--ys-ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.page-about .about-improve__flow ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-improve__flow li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.7rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(7, 17, 29, 0.16);
}

.page-about .about-improve__flow li:last-child {
  border-bottom: 1px solid rgba(7, 17, 29, 0.16);
}

.page-about .about-improve__flow li span {
  color: #b63d27;
  font-size: 0.78rem;
}

.page-about .about-improve__flow li p {
  margin: 0;
  color: #304756;
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-improve__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 1.2rem;
}

.page-about .about-improve__links a {
  color: var(--ys-ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ys-track);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.page-about [data-reveal].is-in {
  animation: about-rise 680ms var(--ys-ease) both;
}

@keyframes about-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 720px) {
  .page-about .about-hero__band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-hero__band .ys-band__cell {
    padding: 1.15rem 1.15rem 1.15rem 0;
  }

  .page-about .about-hero__band .ys-band__cell:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .page-about .about-hero__band .ys-band__cell + .ys-band__cell {
    padding-left: 1.15rem;
    border-left: 1px solid var(--ys-steel);
  }

  .page-about .about-section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 2rem;
  }

  .page-about .about-team__role {
    grid-column: span 6;
  }

  .page-about .about-team__role--lead {
    grid-column: span 7;
  }

  .page-about .about-team__role--wide {
    grid-column: span 12;
  }

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

  .page-about .about-cooperation {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 2.5rem;
  }

  .page-about .about-improve__panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
    gap: clamp(2rem, 5vw, 4.8rem);
  }

  .page-about .about-hero__figure {
    aspect-ratio: 10 / 11;
    max-height: 580px;
  }

  .page-about .about-mission__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  }

  .page-about .about-mission__plate {
    margin-top: -1.5rem;
  }

  .page-about .about-timeline__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-timeline__item {
    flex: initial;
    padding-right: 1.5rem;
  }

  .page-about .about-review__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .page-about .about-review__visual {
    padding-top: 2.8rem;
  }

  .page-about .about-team__role--lead {
    grid-column: span 6;
  }

  .page-about .about-team__role:not(.about-team__role--lead):not(.about-team__role--wide) {
    grid-column: span 3;
  }

  .page-about .about-team__role--wide {
    grid-column: span 12;
  }

  .page-about .about-coverage__dots {
    top: 2%;
    right: -7%;
    width: min(760px, 56%);
    opacity: 0.26;
  }

  .page-about .about-coverage__figure {
    aspect-ratio: 12 / 4.4;
  }

  .page-about .about-improve__panel {
    padding: clamp(2.5rem, 5vw, 4.2rem);
  }
}

@media (max-width: 420px) {
  .page-about .about-hero__title {
    font-size: clamp(2.55rem, 13.6vw, 3.4rem);
  }

  .page-about .about-hero__band .ys-band__v {
    font-size: 1.05rem;
  }

  .page-about .about-review__plate {
    width: 100%;
    margin-top: -0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal].is-in {
    animation: none;
  }

  .page-about .ys-btn,
  .page-about .ys-btn:hover {
    transition: none;
    transform: none;
  }

  .page-about .about-timeline__track {
    scroll-behavior: auto;
  }
}