/* About / Figma 53:178 — all desktop geometry follows the 1920px canvas. */
.about-page { background: var(--color-ink); color: #fff; }
.profile-banner { position: relative; height: calc(800 * var(--design-unit)); overflow: hidden; }
.profile-banner picture { display: block; width: 100%; height: 100%; }
.profile-banner__image { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.about-content { position: relative; margin-top: calc(-140 * var(--design-unit)); background: url('../../images/pages/about/background.svg') top center / 100% 100% no-repeat; }
.about-intro { padding-top: calc(240 * var(--design-unit)); }
.about-intro__heading { text-align: center; }
.about-intro__title { max-width: calc(846 * var(--design-unit)); margin: calc(38 * var(--design-unit)) auto 0; }
.about-intro__copy { max-width: calc(765 * var(--design-unit)); min-height: calc(91.8 * var(--design-unit)); margin: calc(20 * var(--design-unit)) auto 0; }
.about-intro__image { aspect-ratio: 1560 / 660; margin-top: calc(108.2 * var(--design-unit)); border-radius: calc(22 * var(--design-unit)); background: #1d1a28; overflow: hidden; }
.about-intro__image picture { display: block; width: 100%; height: 100%; }
.about-intro__image img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.about-values { padding-top: calc(140 * var(--design-unit)); padding-bottom: calc(200 * var(--design-unit)); }
.about-values__title { max-width: calc(846 * var(--design-unit)); }
.about-values__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: calc(40 * var(--design-unit)) calc(30 * var(--design-unit)); margin-top: calc(100 * var(--design-unit)); }
.about-values__card { display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--design-unit)); min-height: calc(220 * var(--design-unit)); padding: calc(40 * var(--design-unit)); padding-right: calc(30 * var(--design-unit)); border-radius: calc(22 * var(--design-unit)); background: linear-gradient(rgba(50,37,87,.32),rgba(70,51,131,.32)); box-shadow: inset 0 1px 1px rgba(95,62,192,.32); backdrop-filter: blur(13px); }
.about-values__text { flex: 1; min-width: 0; }
.about-values__text h3 { color: #fff; font-size: calc(24 * var(--design-unit)); line-height: 1.6; font-weight: 700; }
.about-values__text p { color: var(--color-muted); font-size: calc(17 * var(--design-unit)); line-height: 1.8; margin-top: calc(15.6 * var(--design-unit)); }
.about-values__icon { flex: 0 0 calc(120 * var(--design-unit)); height: calc(120 * var(--design-unit)); background-position: center; background-size: contain; background-repeat: no-repeat; }
.about-values__card:nth-child(1) .about-values__icon { background-image: url('../../images/pages/about/value-outcomes.png'); }
.about-values__card:nth-child(2) .about-values__icon { background-image: url('../../images/pages/about/value-decisions.png'); }
.about-values__card:nth-child(3) .about-values__icon { background-image: url('../../images/pages/about/value-release.png'); }
.about-values__card:nth-child(4) .about-values__icon { background-image: url('../../images/pages/about/value-progress.png'); }
@media (prefers-reduced-motion: no-preference) {
  .profile-banner__image { animation: profile-banner-in 1.1s var(--ease-out) both; }
  @keyframes profile-banner-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 768px) {
  .profile-banner { height: 5.4rem; }
  .about-content { margin-top: -.6rem; background: linear-gradient(165deg, #100e19, #15111f 30%, #100e19 60%) bottom center / 100% calc(100% - var(--banner-seam-height)) no-repeat; }
  .about-intro { padding-top: 1.33rem; }
  .about-intro__title { max-width: 100%; margin-top: .34rem; font-size: .55rem; line-height: 1.25; }
  .about-intro__copy { max-width: 3.3rem; min-height: 0; margin-top: .3rem; font-size: .15rem; line-height: 1.75; }
  .about-intro__image { aspect-ratio: 350 / 200; margin-top: .56rem; border-radius: .18rem; background: #1d1a28; }
  .about-values { padding-top: 1.5rem; padding-bottom: .95rem; }
  .about-values__title { max-width: 100%; font-size: .56rem; line-height: 1.24; }
  html[lang^="zh"] .about-intro__title,
  html[lang^="zh"] .about-values__title { font-size: .46rem; white-space: nowrap; }
  .about-values__grid { grid-template-columns: 1fr; gap: .2rem; margin-top: .42rem; }
  .about-values__card { position: relative; align-items: flex-start; height: 2.65rem; min-height: 0; padding: .4rem; border-radius: .2rem; overflow: hidden; }
  .about-values__text h3 { max-width: 1.9rem; font-size: .22rem; line-height: 1.5; }
  .about-values__text p { margin-top: .13rem; font-size: .16rem; line-height: 1.6; }
  .about-values__icon { position: absolute; top: .2rem; right: .2rem; width: .84rem; height: .84rem; }
  .about-values__card:nth-child(1) .about-values__icon { background: url('../../images/pages/about/value-outcomes-mobile.png') center / contain no-repeat; }
  .about-values__card:nth-child(2) .about-values__icon { background: url('../../images/pages/about/value-decisions-mobile.png') center / contain no-repeat; }
  .about-values__card:nth-child(3) .about-values__icon { background: url('../../images/pages/about/value-release-mobile.png') center / contain no-repeat; }
  .about-values__card:nth-child(4) .about-values__icon { background: url('../../images/pages/about/value-progress-mobile.png') center / contain no-repeat; }
}