.page-products {
  position: relative;
  color: var(--paper);
  background:
    radial-gradient(100% 60% at 96% -6%, rgba(200, 16, 46, .24), transparent 62%),
    radial-gradient(80% 55% at -8% 36%, rgba(47, 107, 255, .11), transparent 62%),
    var(--ink);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-products .pr-hero {
  position: relative;
  padding-top: clamp(104px, 14vw, 164px);
  padding-bottom: clamp(36px, 5vw, 60px);
  overflow: hidden;
}

.page-products .pr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(244, 237, 227, .055) 0 1px, transparent 1px 108px),
    repeating-linear-gradient(0deg, rgba(244, 237, 227, .04) 0 1px, transparent 1px 108px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
  pointer-events: none;
}

.page-products .pr-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .pr-hero .breadcrumb {
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.page-products .pr-hero__title {
  margin: clamp(14px, 2.2vw, 24px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 19ch;
  text-wrap: balance;
}

.page-products .pr-hero__cols {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(20px, 3vw, 34px);
}

.page-products .pr-hero__lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(244, 237, 227, .82);
  max-width: 46ch;
}

.page-products .pr-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 880px) {
  .page-products .pr-hero__cols {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
  }
}

/* ---------- 首屏数据带 ---------- */
.page-products .pr-band {
  position: relative;
  z-index: 1;
  margin-top: clamp(30px, 4.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-band > .stat {
  background: rgba(23, 25, 31, .86);
  padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 24px);
}

.page-products .pr-band .stat__num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--volt);
}

.page-products .pr-band .stat__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 760px) {
  .page-products .pr-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 路线主干 ---------- */
.page-products .pr-route {
  position: relative;
  padding-block: clamp(46px, 7vw, 86px);
}

.page-products .pr-route__head {
  max-width: 64ch;
}

.page-products .pr-route__head h2 {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.015em;
}

.page-products .pr-route__lead {
  margin: 14px 0 0;
  line-height: 1.8;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 237, 227, .72);
  text-decoration: none;
  background: rgba(23, 25, 31, .7);
  border: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.page-products .pr-jump a:hover,
.page-products .pr-jump a:focus-visible {
  color: var(--volt);
  border-color: rgba(233, 255, 60, .5);
  background: rgba(200, 16, 46, .16);
}

.page-products .pr-jump__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--volt);
  flex: none;
}

.page-products .pr-spine {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}

.page-products .pr-node {
  display: grid;
  gap: clamp(12px, 2vw, 26px);
  scroll-margin-top: 96px;
  padding-block: clamp(4px, 1vw, 10px);
}

.page-products .pr-node__rail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-products .pr-node__idx {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(244, 237, 227, .22);
  transition: color .28s var(--ease);
}

.page-products .pr-node__idx::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 12px rgba(233, 255, 60, .65);
  flex: none;
}

.page-products .pr-node__body {
  min-width: 0;
}

.page-products .pr-node__title {
  margin: clamp(10px, 1.6vw, 16px) 0 clamp(10px, 1.6vw, 14px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  transition: color .28s var(--ease);
}

.page-products .pr-node__text {
  margin: 0;
  line-height: 1.82;
  color: rgba(244, 237, 227, .8);
  max-width: 64ch;
}

.page-products .pr-node__text--tight {
  margin-top: 16px;
}

.page-products .pr-node:target .pr-node__idx {
  color: var(--volt);
}

.page-products .pr-node:target .pr-node__title {
  color: var(--volt);
}

@media (min-width: 900px) {
  .page-products .pr-node {
    grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr);
  }

  .page-products .pr-node__rail {
    position: sticky;
    top: 96px;
    align-self: start;
    display: block;
  }

  .page-products .pr-node__idx {
    display: block;
  }

  .page-products .pr-node__idx::before {
    margin-bottom: 14px;
  }
}

/* ---------- 01 全场面板 ---------- */
.page-products .pr-m1 {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(16px, 2.4vw, 24px);
  align-items: start;
}

.page-products .pr-facts {
  display: grid;
  gap: 14px;
}

.page-products .pr-fact {
  display: grid;
  gap: 5px;
  padding-left: 14px;
  border-left: 2px solid rgba(200, 16, 46, .7);
}

.page-products .pr-fact b {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--volt);
}

.page-products .pr-fact span {
  font-size: .97rem;
  line-height: 1.72;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-m1__media {
  max-width: 380px;
}

@media (min-width: 800px) {
  .page-products .pr-m1 {
    grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  }

  .page-products .pr-m1__media {
    max-width: none;
    justify-self: end;
    width: 100%;
  }
}

/* ---------- 02 战绩区间 ---------- */
.page-products .pr-ranges {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(16px, 2.4vw, 24px);
}

.page-products .pr-range {
  position: relative;
  padding: clamp(16px, 2.2vw, 24px);
  background: linear-gradient(160deg, var(--charcoal-2), rgba(23, 25, 31, .9));
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .32s var(--ease);
}

.page-products .pr-range::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(200, 16, 46, 0));
}

.page-products .pr-range:hover {
  transform: translateY(-3px);
}

.page-products .pr-range__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.page-products .pr-range__n {
  display: block;
  margin: 10px 0 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  color: var(--volt);
  letter-spacing: -.01em;
}

.page-products .pr-range__t {
  margin: 0;
  font-size: .94rem;
  line-height: 1.72;
  color: rgba(244, 237, 227, .76);
}

.page-products .pr-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: .85rem;
  color: var(--muted);
}

.page-products .pr-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

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

/* ---------- 03 统计与图表 ---------- */
.page-products .pr-m3 {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  margin-top: clamp(16px, 2.4vw, 24px);
  align-items: start;
}

.page-products .pr-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .pr-list li {
  position: relative;
  padding-left: 18px;
  font-size: .97rem;
  line-height: 1.74;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--blue);
  transform: rotate(45deg);
}

.page-products .pr-list b {
  color: var(--paper);
  font-weight: 600;
}

.page-products .pr-m3__media {
  margin-top: clamp(16px, 2.4vw, 22px);
}

.page-products .pr-m3__chart {
  padding: clamp(16px, 2.4vw, 24px);
  background: rgba(23, 25, 31, .88);
}

.page-products .pr-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.page-products .pr-chart__cap {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.page-products .pr-chart text {
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-products .pr-chart__lbl text {
  fill: var(--muted);
  letter-spacing: .06em;
}

.page-products .pr-chart__bar--home {
  fill: var(--volt);
}

.page-products .pr-chart__bar--away {
  fill: var(--blue);
}

.page-products .pr-chart__val--home {
  fill: var(--volt);
  font-weight: 700;
}

.page-products .pr-chart__val--away {
  fill: var(--blue);
  font-weight: 700;
}

.page-products .pr-chart__note {
  margin: 14px 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 900px) {
  .page-products .pr-m3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  }
}

/* ---------- 04 集锦标签 ---------- */
.page-products .pr-tagset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-tagset li {
  padding: 9px 17px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--volt);
  background: rgba(233, 255, 60, .07);
  border: 1px solid rgba(233, 255, 60, .34);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ---------- 05 约球路线 ---------- */
.page-products .pr-pitch {
  position: relative;
  margin-top: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-products .pr-pitch__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
}

.page-products .pr-pitch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(11, 12, 15, .92), rgba(122, 10, 28, .5) 58%, rgba(11, 12, 15, .94));
}

.page-products .pr-pitch__inner {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3.4vw, 40px);
}

.page-products .pr-steps {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-steps li {
  position: relative;
  padding-top: 26px;
}

.page-products .pr-steps li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 4px rgba(233, 255, 60, .14);
}

.page-products .pr-steps__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.page-products .pr-steps b {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--paper);
}

.page-products .pr-steps p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(244, 237, 227, .74);
}

@media (min-width: 840px) {
  .page-products .pr-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
  }

  .page-products .pr-steps li::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 18px;
    right: calc(-1 * clamp(12px, 1.8vw, 20px));
    height: 1px;
    background: rgba(233, 255, 60, .3);
  }

  .page-products .pr-steps li:last-child::after {
    display: none;
  }
}

/* ---------- 过渡横幅 ---------- */
.page-products .pr-strip {
  padding-block: clamp(28px, 4.6vw, 56px);
}

.page-products .pr-strip .media__img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
}

/* ---------- 06 安装 ---------- */
.page-products .pr-install {
  padding-block: clamp(36px, 5.6vw, 72px);
}

.page-products .pr-install__grid {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.page-products .pr-install__media {
  max-width: 640px;
}

.page-products .pr-install__lead {
  margin: 14px 0 0;
  line-height: 1.8;
  color: rgba(244, 237, 227, .78);
  max-width: 52ch;
}

.page-products .pr-install h2 {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -.015em;
}

.page-products .pr-tabs {
  position: relative;
  margin-top: clamp(18px, 2.6vw, 26px);
}

.page-products .pr-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.page-products .pr-tabs__bar {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.page-products .pr-tabs__tab {
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-products .pr-tabs__tab:hover {
  color: rgba(244, 237, 227, .9);
}

.page-products .pr-tabs__radio:focus-visible ~ .pr-tabs__bar {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

.page-products #pr-os-ios:checked ~ .pr-tabs__bar .pr-tabs__tab--ios,
.page-products #pr-os-and:checked ~ .pr-tabs__bar .pr-tabs__tab--and {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

.page-products .pr-tabs__panel {
  display: none;
  padding-top: clamp(14px, 2vw, 20px);
}

.page-products #pr-os-ios:checked ~ .pr-tabs__panel--ios,
.page-products #pr-os-and:checked ~ .pr-tabs__panel--and {
  display: block;
}

.page-products .pr-spec {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.page-products .pr-spec li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding: 11px 14px;
  background: rgba(23, 25, 31, .92);
  font-size: .93rem;
}

.page-products .pr-spec span {
  color: var(--muted);
}

.page-products .pr-spec b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pr-install__note {
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pr-install__note a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pr-install__note a:hover {
  color: var(--volt);
}

@media (min-width: 900px) {
  .page-products .pr-install__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ---------- 07 数据来源 ---------- */
.page-products .pr-src {
  padding-block: clamp(40px, 6vw, 78px);
  border-top: 1px solid var(--line);
}

.page-products .pr-src__head {
  max-width: 62ch;
}

.page-products .pr-src__head h2 {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -.015em;
}

.page-products .pr-src__lead {
  margin: 14px 0 0;
  line-height: 1.8;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-src__grid {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(22px, 3.4vw, 36px);
}

.page-products .pr-flow {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.page-products .pr-flow::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--volt), rgba(200, 16, 46, .7) 60%, rgba(47, 107, 255, .4));
}

.page-products .pr-flow li {
  position: relative;
}

.page-products .pr-flow li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--charcoal);
  border: 2px solid var(--volt);
}

.page-products .pr-flow b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--volt);
  margin-bottom: 5px;
}

.page-products .pr-flow p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.74;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-flow a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pr-flow a:hover {
  color: var(--volt);
}

.page-products .pr-src__stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-src__stats > .stat {
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 22px);
  background: rgba(23, 25, 31, .88);
}

.page-products .pr-src__stats .stat__num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--volt);
}

.page-products .pr-src__stats .stat__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 860px) {
  .page-products .pr-src__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

/* ---------- 收尾 ---------- */
.page-products .pr-end {
  padding-block: clamp(20px, 3vw, 40px) clamp(56px, 8vw, 96px);
}

.page-products .pr-end__inner {
  position: relative;
  padding: clamp(24px, 4vw, 52px);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  display: grid;
  gap: clamp(14px, 2vw, 20px);
}

.page-products .pr-end h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--paper);
}

.page-products .pr-end p {
  margin: 0;
  max-width: 56ch;
  line-height: 1.78;
  color: rgba(244, 237, 227, .92);
}

.page-products .pr-end__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.page-products .pr-end .btn--ghost {
  color: var(--paper);
  border: 1px solid rgba(244, 237, 227, .6);
  background: transparent;
}

.page-products .pr-end .btn--ghost:hover,
.page-products .pr-end .btn--ghost:focus-visible {
  border-color: var(--paper);
  background: rgba(244, 237, 227, .12);
}

.page-products .pr-end__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-end__more a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 237, 227, .82);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(244, 237, 227, .4);
}

.page-products .pr-end__more a:hover,
.page-products .pr-end__more a:focus-visible {
  color: var(--volt);
  text-decoration-color: var(--volt);
}

/* ---------- 图像容器兜底 ---------- */
.page-products .media__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 焦点环 ---------- */
.page-products a:focus-visible,
.page-products label:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

/* ---------- 减小动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-products .pr-range,
  .page-products .pr-node__idx,
  .page-products .pr-node__title,
  .page-products .pr-jump a {
    transition: none;
  }

  .page-products .pr-range:hover {
    transform: none;
  }
}

@media (max-width: 420px) {
  .page-products .pr-end__inner {
    clip-path: none;
  }

  .page-products .pr-range {
    clip-path: none;
  }
}


<main id="main-content" class="page-products">
  <section class="pr-hero" aria-labelledby="pr-hero-title">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <a href="/">首页</a> / <span>APP 与数据工具</span>
      </nav>
      <p class="eyebrow">APP 与数据工具 · v5.2</p>
      <h1 class="pr-hero__title" id="pr-hero-title">下载米兰APP，战绩、控球率、集锦和球局都在手边</h1>
      <div class="pr-hero__cols">
        <p class="pr-hero__lead">
          米兰赛场把每一场比赛的比分、控球率、片段回看和身边正在凑人的球局，收进同一个随身入口。
          装上 5.2 版，从下载到查完第一场战绩，平均用时 90 秒。
        </p>
        <div class="pr-hero__cta">
          <a class="btn btn--volt" href="#install">下载米兰APP</a>
          <a class="btn btn--ghost" href="/guide/">新手指南</a>
        </div>
      </div>
      <div class="pr-band">
        <div class="stat">
          <span class="stat__num">5.2</span>
          <span class="stat__label">当前版本</span>
        </div>
        <div class="stat">
          <span class="stat__num">28MB</span>
          <span class="stat__label">安装包体积</span>
        </div>
        <div class="stat">
          <span class="stat__num">32</span>
          <span class="stat__label">每场技术统计项</span>
        </div>
        <div class="stat">
          <span class="stat__num">120</span>
          <span class="stat__label">片球场可选</span>
        </div>
      </div>
    </div>
  </section>

  <section class="pr-route" id="route" aria-labelledby="route-title">
    <div class="wrap">
      <header class="pr-route__head">
        <p class="eyebrow">使用路线 01 — 05</p>
        <h2 id="route-title">从打开到约成一场球</h2>
        <p class="pr-route__lead">
          装上之后按这条路线走一遍，五分钟就能把查战绩、比数据、翻集锦、约球这几件事全都摸熟。
          每一步都可以单独开始，不必从头来。
        </p>
        <ul class="pr-jump">
          <li><a href="#step-01"><span class="pr-jump__dot"></span>01 全场面板</a></li>
          <li><a href="#step-02"><span class="pr-jump__dot"></span>02 战绩区间</a></li>
          <li><a href="#step-03"><span class="pr-jump__dot"></span>03 控球率</a></li>
          <li><a href="#step-04"><span class="pr-jump__dot"></span>04 集锦标签</a></li>
          <li><a href="#step-05"><span class="pr-jump__dot"></span>05 约球</a></li>
        </ul>
      </header>

      <div class="pr-spine">
        <article class="pr-node" id="step-01">
          <div class="pr-node__rail">
            <span class="pr-node__idx">01</span>
          </div>
          <div class="pr-node__body" data-reveal>
            <p class="tag">功能总览</p>
            <h3 class="pr-node__title">打开就是这一场</h3>
            <p class="pr-node__text">
              第一屏把比分、控球率条、射门数和集锦入口并排放在一起。看球时不用来回切页，
              抬眼看一眼手机，就知道这一场谁在控、谁在打门。
            </p>
            <div class="pr-m1">
              <div class="pr-m1__text">
                <div class="pr-facts">
                  <div class="pr-fact">
                    <b>比分与时间</b>
                    <span>比赛进行中即时刷新，进球之后几秒内就能看到变化。</span>
                  </div>
                  <div class="pr-fact">
                    <b>控球率横条</b>
                    <span>两端对比拉成一条，红与黄谁压得更长，一眼就能分出主动方。</span>
                  </div>
                  <div class="pr-fact">
                    <b>集锦入口</b>
                    <span>进球和扑救分开摆放，看到想回看的那一段，点标签直接跳。</span>
                  </div>
                  <div class="pr-fact">
                    <b>关注球队</b>
                    <span>把球队设成关注，开赛提醒和比分推送会自动跟上。</span>
                  </div>
                </div>
              </div>
              <div class="media media--clip pr-m1__media">
                <img class="media__img" src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机屏幕上的比分与控球率面板，深色界面里控球率条用荧光黄高亮" loading="lazy" decoding="async">
              </div>
            </div>
          </div>
        </article>

        <article class="pr-node" id="step-02">
          <div class="pr-node__rail">
            <span class="pr-node__idx">02</span>
          </div>
          <div class="pr-node__body" data-reveal>
            <p class="tag">战绩查询</p>
            <h3 class="pr-node__title">最近 5 场、10 场，还是整季</h3>
            <p class="pr-node__text">
              同样的战绩列表，切区间就是换一副眼镜。赛前十分钟找手感、赛程过半看走势、
              赛季结束做复盘，各自适合不同的跨度。
            </p>
            <div class="pr-ranges">
              <div class="pr-range">
                <span class="pr-range__k">区间 A</span>
                <b class="pr-range__n">最近 5 场</b>
                <p class="pr-range__t">临场状态的快速读数。谁进的球、失了几场、控球率大概落在哪一档，扫一眼就有数。</p>
              </div>
              <div class="pr-range">
                <span class="pr-range__k">区间 B</span>
                <b class="pr-range__n">最近 10 场</b>
                <p class="pr-range__t">看一段赛程之内的起伏。连胜、连平还是忽上忽下，跨度一拉开就藏不住了。</p>
              </div>
              <div class="pr-range">
                <span class="pr-range__k">区间 C</span>
                <b class="pr-range__n">整个赛季</b>
                <p class="pr-range__t">从第几轮开始控球率往下走、哪些场次射正数掉下来，拉通整季才看得清。</p>
              </div>
            </div>
            <p class="pr-note">换区间在本地瞬间完成，不用等页面刷新。</p>
          </div>
        </article>

        <article class="pr-node" id="step-03">
          <div class="pr-node__rail">
            <span class="pr-node__idx">03</span>
          </div>
          <div class="pr-node__body" data-reveal>
            <p class="tag">技术统计</p>
            <h3 class="pr-node__title">一场球拆成 32 项，先看控球率</h3>
            <p class="pr-node__text">
              每场比赛记下 32 项技术统计，控球率、射门、射正、传球成功率、跑动距离都在其中。
              想知道谁更主动，直接比控球率；想知道控球有没有换成机会，再拉射门和射正一起看。
            </p>
            <div class="pr-m3">
              <div class="pr-m3__text">
                <ul class="pr-list">
                  <li><b>最多同时选 4 支球队</b>，并排摆在同一根轴上，赛季之间的走势横向拉通。</li>
                  <li><b>反着读更有意思</b>：控球率高但射正少，多半是围着打；控球率低而射正多，说明把握机会的效率高。</li>
                  <li><b>传球成功率与跑动距离</b>放在一起看，能分辨出谁在控球、谁在追着跑。</li>
                </ul>
                <div class="media media--clip pr-m3__media">
                  <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="半透明统计图表叠在比赛画面上，蓝色与黄色的对比线条勾出控球率与射门变化" loading="lazy" decoding="async">
                </div>
              </div>
              <div class="panel panel--clip pr-m3__chart">
                <p class="pr-chart__cap">主队 / 客队 · 三项对比</p>
                <svg class="pr-chart" viewBox="0 0 400 156" role="img" aria-label="主队与客队在控球率、射门、射正三项数据上的对比条形图">
                  <g class="pr-chart__lbl">
                    <text x="0" y="16">控球率</text>
                    <text x="0" y="70">射门</text>
                    <text x="0" y="124">射正</text>
                  </g>
                  <rect class="pr-chart__bar--home" x="62" y="4" width="196" height="9"></rect>
                  <rect class="pr-chart__bar--away" x="62" y="19" width="142" height="9"></rect>
                  <text class="pr-chart__val--home" x="266" y="13">58%</text>
                  <text class="pr-chart__val--away" x="212" y="28">42%</text>
                  <rect class="pr-chart__bar--home" x="62" y="58" width="196" height="9"></rect>
                  <rect class="pr-chart__bar--away" x="62" y="73" width="118" height="9"></rect>
                  <text class="pr-chart__val--home" x="266" y="67">15</text>
                  <text class="pr-chart__val--away" x="188" y="82">9</text>
                  <rect class="pr-chart__bar--home" x="62" y="112" width="196" height="9"></rect>
                  <rect class="pr-chart__bar--away" x="62" y="127" width="98" height="9"></rect>
                  <text class="pr-chart__val--home" x="266" y="121">6</text>
                  <text class="pr-chart__val--away" x="168" y="136">3</text>
                </svg>
                <p class="pr-chart__note">黄为主队，蓝为客队；同一行的两条按该行最大值等比铺开。</p>
              </div>
            </div>
          </div>
        </article>

        <article class="pr-node" id="step-04">
          <div class="pr-node__rail">
            <span class="pr-node__idx">04</span>
          </div>
          <div class="pr-node__body" data-reveal>
            <p class="tag">集锦回看</p>
            <h3 class="pr-node__title">数据看着不对劲，就翻片段</h3>
            <p class="pr-node__text">
              每段集锦都按类型打好标签，点哪一类就只看那一类。统计数据旁边挂着对应片段，
              哪一脚进的、哪一次扑出来的，翻回去就能逐条对上，赛后复盘不用再凭印象吵。
            </p>
            <ul class="pr-tagset">
              <li>进球</li>
              <li>助攻</li>
              <li>扑救</li>
              <li>关键拼抢</li>
              <li>拦截解围</li>
              <li>定位球</li>
            </ul>
            <p class="pr-node__text pr-node__text--tight">
              六类之外的长片段按进球顺序串成一条时间线，想按比赛节奏顺着看，直接从头播到尾。
            </p>
          </div>
        </article>

        <article class="pr-node" id="step-05">
          <div class="pr-node__rail">
            <span class="pr-node__idx">05</span>
          </div>
          <div class="pr-node__body" data-reveal>
            <p class="tag">城市约球</p>
            <h3 class="pr-node__title">从选城市到有人应声</h3>
            <p class="pr-node__text">
              比赛日想约人看球赛，周末想约人下场踢一场，两种局都能在这里发起。
              每周有大约 40 场球局在跑，成都占了四成上下，临时起意也常常凑得齐人。
            </p>
            <div class="pr-pitch">
              <img class="pr-pitch__bg" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="夜晚业余球场的俯瞰视角，灯光下边线清晰，场地空旷" loading="lazy" decoding="async">
              <div class="pr-pitch__inner">
                <ol class="pr-steps">
                  <li>
                    <span class="pr-steps__n">01</span>
                    <b>选城市</b>
                    <p>成都、绵阳、德阳、宜宾等 18 个城市，先圈定你活动得开的范围。</p>
                  </li>
                  <li>
                    <span class="pr-steps__n">02</span>
                    <b>挑球场</b>
                    <p>120 片球场按距离和时段排开，哪一片今晚空着写得很清楚。</p>
                  </li>
                  <li>
                    <span class="pr-steps__n">03</span>
                    <b>定时间</b>
                    <p>开场时间、踢多久、要几个人，填完就能发出去。</p>
                  </li>
                  <li>
                    <span class="pr-steps__n">04</span>
                    <b>发起球局</b>
                    <p>写清水平与费用分摊，附近的球友会收到这条局。</p>
                  </li>
                  <li>
                    <span class="pr-steps__n">05</span>
                    <b>等人应声</b>
                    <p>人数凑够就成行。不想自己张罗，也能在列表里直接加入别人的局。</p>
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <div class="wrap pr-strip">
    <div class="media media--clip">
      <img class="media__img" src="{zhanqunpic:h:500w:1000}" width="1000" height="500" alt="球场边线的角旗与草皮特写，晨光斜射拉出长影" loading="lazy" decoding="async">
    </div>
  </div>

  <section class="pr-install" id="install" aria-labelledby="install-title">
    <div class="wrap">
      <div class="pr-install__grid">
        <div class="media media--clip pr-install__media">
          <img class="media__img" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="看台上一位球迷举起手机查看比分，屏幕的光映在脸上" loading="lazy" decoding="async">
        </div>
        <div class="pr-install__body" data-reveal>
          <p class="eyebrow">06 / 安装</p>
          <h2 id="install-title">5.2 版，28MB，一会儿就装好</h2>
          <p class="pr-install__lead">
            安装包约 28MB，不占地方也不挑网络。装完第一次打开，允许通知之后，
            开赛前和进球时都会主动来找你。
          </p>
          <div class="pr-tabs">
            <input class="pr-tabs__radio" type="radio" name="pr-os" id="pr-os-ios" checked>
            <input class="pr-tabs__radio" type="radio" name="pr-os" id="pr-os-and">
            <div class="pr-tabs__bar">
              <label class="pr-tabs__tab pr-tabs__tab--ios" for="pr-os-ios">iOS</label>
              <label class="pr-tabs__tab pr-tabs__tab--and" for="pr-os-and">Android</label>
            </div>
            <div class="pr-tabs__panel pr-tabs__panel--ios">
              <ul class="pr-spec">
                <li><span>最低系统</span><b>iOS 14</b></li>
                <li><span>安装包体积</span><b>约 28MB</b></li>
                <li><span>提醒能力</span><b>开赛提醒 · 比分推送</b></li>
                <li><span>界面</span><b>跟随系统深色模式</b></li>
              </ul>
            </div>
            <div class="pr-tabs__panel pr-tabs__panel--and">
              <ul class="pr-spec">
                <li><span>最低系统</span><b>Android 8.0</b></li>
                <li><span>安装包体积</span><b>约 28MB</b></li>
                <li><span>提醒能力</span><b>开赛提醒 · 比分推送</b></li>
                <li><span>界面</span><b>跟随系统深色模式</b></li>
              </ul>
            </div>
          </div>
          <p class="pr-install__note">
            装完还不知道从哪入手？<a href="/guide/">使用指南</a>里有逐步的操作说明，从切战绩区间到发起一场球局都有。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="pr-src" aria-labelledby="src-title">
    <div class="wrap">
      <header class="pr-src__head">
        <p class="eyebrow">07 / 数据</p>
        <h2 id="src-title">比赛日实时刷，终场后 30 分钟定下来</h2>
        <p class="pr-src__lead">
          比分在比赛进行中即时变化，终场之后统计团队会把 32 项数据再走一遍，页面会标出更新时间。
          数据取自公开赛事技术报告，配上人工复核，再进到你的手机里。
        </p>
      </header>
      <div class="pr-src__grid">
        <ol class="pr-flow">
          <li>
            <b>比赛进行中</b>
            <p>比分与射门实时刷新，页面不用手动重载。</p>
          </li>
          <li>
            <b>终场后 30 分钟内</b>
            <p>32 项统计完成校对，页面标上本次更新时间。</p>
          </li>
          <li>
            <b>每次调整</b>
            <p>写进<a href="/updates/">更新日志</a>，标清改动了哪些模块、影响了哪个版本。</p>
          </li>
        </ol>
        <div class="pr-src__stats">
          <div class="stat">
            <span class="stat__num">14</span>
            <span class="stat__label">数据编辑团队人数</span>
          </div>
          <div class="stat">
            <span class="stat__num">3</span>
            <span class="stat__label">赛事录入 / 统计校对 / 集锦剪辑</span>
          </div>
          <div class="stat">
            <span class="stat__num">90 秒</span>
            <span class="stat__label">新用户首次查到战绩的平均用时</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="pr-end" aria-labelledby="end-title">
    <div class="wrap">
      <div class="pr-end__inner">
        <h2 id="end-title">先装上看一场</h2>
        <p>
          下一场比赛开始之前把它装好，比分、控球率和集锦就都在手边了。
          想先摸清操作，或者想聊聊本地球场和球迷协会的合作，也都有现成的入口。
        </p>
        <div class="pr-end__links">
          <a class="btn btn--volt" href="#install">下载米兰APP</a>
          <a class="btn btn--ghost" href="/guide/">新手指南</a>
          <a class="btn btn--ghost" href="/updates/">更新日志</a>
        </div>
        <ul class="pr-end__more">
          <li><a href="/">回到首页</a></li>
          <li><a href="/culture/">品牌文化</a></li>
          <li><a href="/reach-us/">谈合作</a></li>
          <li><a href="/terms/">引用规则</a></li>
        </ul>
      </div>
    </div>
  </section>
</main>

.page-products {
  position: relative;
  color: var(--paper);
  background:
    radial-gradient(100% 60% at 96% -6%, rgba(200, 16, 46, .24), transparent 62%),
    radial-gradient(80% 55% at -8% 36%, rgba(47, 107, 255, .11), transparent 62%),
    var(--ink);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-products .pr-hero {
  position: relative;
  padding-top: clamp(104px, 14vw, 164px);
  padding-bottom: clamp(36px, 5vw, 60px);
  overflow: hidden;
}

.page-products .pr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(244, 237, 227, .055) 0 1px, transparent 1px 108px),
    repeating-linear-gradient(0deg, rgba(244, 237, 227, .04) 0 1px, transparent 1px 108px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
  pointer-events: none;
}

.page-products .pr-hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-products .pr-hero .breadcrumb {
  margin-bottom: clamp(16px, 2.4vw, 26px);
}

.page-products .pr-hero__title {
  margin: clamp(14px, 2.2vw, 24px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 19ch;
  text-wrap: balance;
}

.page-products .pr-hero__cols {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(20px, 3vw, 34px);
}

.page-products .pr-hero__lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(244, 237, 227, .82);
  max-width: 46ch;
}

.page-products .pr-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 880px) {
  .page-products .pr-hero__cols {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
  }
}

/* ---------- 首屏数据带 ---------- */
.page-products .pr-band {
  margin-top: clamp(30px, 4.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-band > .stat {
  background: rgba(23, 25, 31, .88);
  padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 24px);
}

.page-products .pr-band .stat__num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--volt);
}

.page-products .pr-band .stat__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 760px) {
  .page-products .pr-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 路线主干 ---------- */
.page-products .pr-route {
  position: relative;
  padding-block: clamp(46px, 7vw, 86px);
}

.page-products .pr-route__head {
  max-width: 64ch;
}

.page-products .pr-route__head h2 {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.015em;
}

.page-products .pr-route__lead {
  margin: 14px 0 0;
  line-height: 1.8;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 237, 227, .72);
  text-decoration: none;
  background: rgba(23, 25, 31, .7);
  border: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.page-products .pr-jump a:hover,
.page-products .pr-jump a:focus-visible {
  color: var(--volt);
  border-color: rgba(233, 255, 60, .5);
  background: rgba(200, 16, 46, .16);
}

.page-products .pr-jump__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--volt);
  flex: none;
}

.page-products .pr-spine {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}

.page-products .pr-node {
  display: grid;
  gap: clamp(12px, 2vw, 26px);
  scroll-margin-top: 96px;
  padding-block: clamp(4px, 1vw, 10px);
}

.page-products .pr-node__rail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-products .pr-node__idx {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(244, 237, 227, .22);
  transition: color .28s var(--ease);
}

.page-products .pr-node__idx::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 12px rgba(233, 255, 60, .65);
  flex: none;
}

.page-products .pr-node__body {
  min-width: 0;
}

.page-products .pr-node__title {
  margin: clamp(10px, 1.6vw, 16px) 0 clamp(10px, 1.6vw, 14px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  transition: color .28s var(--ease);
}

.page-products .pr-node__text {
  margin: 0;
  line-height: 1.82;
  color: rgba(244, 237, 227, .8);
  max-width: 64ch;
}

.page-products .pr-node__text--tight {
  margin-top: 16px;
}

.page-products .pr-node:target .pr-node__idx {
  color: var(--volt);
}

.page-products .pr-node:target .pr-node__title {
  color: var(--volt);
}

@media (min-width: 900px) {
  .page-products .pr-node {
    grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr);
  }

  .page-products .pr-node__rail {
    position: sticky;
    top: 96px;
    align-self: start;
    display: block;
  }

  .page-products .pr-node__idx {
    display: block;
  }

  .page-products .pr-node__idx::before {
    margin-bottom: 14px;
  }
}

/* ---------- 01 全场面板 ---------- */
.page-products .pr-m1 {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(16px, 2.4vw, 24px);
  align-items: start;
}

.page-products .pr-facts {
  display: grid;
  gap: 14px;
}

.page-products .pr-fact {
  display: grid;
  gap: 5px;
  padding-left: 14px;
  border-left: 2px solid rgba(200, 16, 46, .7);
}

.page-products .pr-fact b {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--volt);
}

.page-products .pr-fact span {
  font-size: .97rem;
  line-height: 1.72;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-m1__media {
  max-width: 380px;
}

@media (min-width: 800px) {
  .page-products .pr-m1 {
    grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  }

  .page-products .pr-m1__media {
    max-width: none;
    width: 100%;
    justify-self: end;
  }
}

/* ---------- 02 战绩区间 ---------- */
.page-products .pr-ranges {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(16px, 2.4vw, 24px);
}

.page-products .pr-range {
  position: relative;
  padding: clamp(16px, 2.2vw, 24px);
  background: linear-gradient(160deg, var(--charcoal-2), rgba(23, 25, 31, .9));
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .32s var(--ease);
}

.page-products .pr-range::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(200, 16, 46, 0));
}

.page-products .pr-range:hover {
  transform: translateY(-3px);
}

.page-products .pr-range__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.page-products .pr-range__n {
  display: block;
  margin: 10px 0 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--volt);
}

.page-products .pr-range__t {
  margin: 0;
  font-size: .94rem;
  line-height: 1.72;
  color: rgba(244, 237, 227, .76);
}

.page-products .pr-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: .85rem;
  color: var(--muted);
}

.page-products .pr-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

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

/* ---------- 03 统计与图表 ---------- */
.page-products .pr-m3 {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  margin-top: clamp(16px, 2.4vw, 24px);
  align-items: start;
}

.page-products .pr-m3__text {
  min-width: 0;
}

.page-products .pr-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .pr-list li {
  position: relative;
  padding-left: 18px;
  font-size: .97rem;
  line-height: 1.74;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--blue);
  transform: rotate(45deg);
}

.page-products .pr-list b {
  color: var(--paper);
  font-weight: 600;
}

.page-products .pr-m3__media {
  margin-top: clamp(16px, 2.4vw, 22px);
}

.page-products .pr-m3__chart {
  padding: clamp(16px, 2.4vw, 24px);
  background: rgba(23, 25, 31, .9);
  min-width: 0;
}

.page-products .pr-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.page-products .pr-chart__cap {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.page-products .pr-chart text {
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-products .pr-chart__lbl text {
  fill: var(--muted);
  letter-spacing: .06em;
}

.page-products .pr-chart__bar--home {
  fill: var(--volt);
}

.page-products .pr-chart__bar--away {
  fill: var(--blue);
}

.page-products .pr-chart__val--home {
  fill: var(--volt);
  font-weight: 700;
}

.page-products .pr-chart__val--away {
  fill: var(--blue);
  font-weight: 700;
}

.page-products .pr-chart__note {
  margin: 14px 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 900px) {
  .page-products .pr-m3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  }
}

/* ---------- 04 集锦标签 ---------- */
.page-products .pr-tagset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-tagset li {
  padding: 9px 17px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--volt);
  background: rgba(233, 255, 60, .07);
  border: 1px solid rgba(233, 255, 60, .34);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ---------- 05 约球路线 ---------- */
.page-products .pr-pitch {
  position: relative;
  margin-top: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-products .pr-pitch__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
}

.page-products .pr-pitch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(11, 12, 15, .92), rgba(122, 10, 28, .5) 58%, rgba(11, 12, 15, .94));
}

.page-products .pr-pitch__inner {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3.4vw, 40px);
}

.page-products .pr-steps {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-steps li {
  position: relative;
  padding-top: 26px;
}

.page-products .pr-steps li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 4px rgba(233, 255, 60, .14);
}

.page-products .pr-steps__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.page-products .pr-steps b {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--paper);
}

.page-products .pr-steps p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(244, 237, 227, .74);
}

@media (min-width: 840px) {
  .page-products .pr-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
  }

  .page-products .pr-steps li::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 18px;
    right: calc(-1 * clamp(12px, 1.8vw, 20px));
    height: 1px;
    background: rgba(233, 255, 60, .3);
  }

  .page-products .pr-steps li:last-child::after {
    display: none;
  }
}

/* ---------- 过渡横幅 ---------- */
.page-products .pr-strip {
  padding-block: clamp(28px, 4.6vw, 56px);
}

.page-products .pr-strip .media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* ---------- 06 安装 ---------- */
.page-products .pr-install {
  padding-block: clamp(36px, 5.6vw, 72px);
}

.page-products .pr-install__grid {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.page-products .pr-install__media {
  max-width: 640px;
}

.page-products .pr-install h2 {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -.015em;
}

.page-products .pr-install__lead {
  margin: 14px 0 0;
  line-height: 1.8;
  color: rgba(244, 237, 227, .78);
  max-width: 52ch;
}

.page-products .pr-tabs {
  position: relative;
  margin-top: clamp(18px, 2.6vw, 26px);
}

.page-products .pr-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.page-products .pr-tabs__bar {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.page-products .pr-tabs__tab {
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-products .pr-tabs__tab:hover {
  color: rgba(244, 237, 227, .9);
}

.page-products .pr-tabs__radio:focus-visible ~ .pr-tabs__bar {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

.page-products #pr-os-ios:checked ~ .pr-tabs__bar .pr-tabs__tab--ios,
.page-products #pr-os-and:checked ~ .pr-tabs__bar .pr-tabs__tab--and {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

.page-products .pr-tabs__panel {
  display: none;
  padding-top: clamp(14px, 2vw, 20px);
}

.page-products #pr-os-ios:checked ~ .pr-tabs__panel--ios,
.page-products #pr-os-and:checked ~ .pr-tabs__panel--and {
  display: block;
}

.page-products .pr-spec {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.page-products .pr-spec li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding: 11px 14px;
  background: rgba(23, 25, 31, .92);
  font-size: .93rem;
}

.page-products .pr-spec span {
  color: var(--muted);
}

.page-products .pr-spec b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pr-install__note {
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pr-install__note a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pr-install__note a:hover {
  color: var(--volt);
}

@media (min-width: 900px) {
  .page-products .pr-install__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ---------- 07 数据来源 ---------- */
.page-products .pr-src {
  padding-block: clamp(40px, 6vw, 78px);
  border-top: 1px solid var(--line);
}

.page-products .pr-src__head {
  max-width: 62ch;
}

.page-products .pr-src__head h2 {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -.015em;
}

.page-products .pr-src__lead {
  margin: 14px 0 0;
  line-height: 1.8;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-src__grid {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(22px, 3.4vw, 36px);
}

.page-products .pr-flow {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.page-products .pr-flow::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--volt), rgba(200, 16, 46, .7) 60%, rgba(47, 107, 255, .4));
}

.page-products .pr-flow li {
  position: relative;
}

.page-products .pr-flow li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--charcoal);
  border: 2px solid var(--volt);
}

.page-products .pr-flow b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--volt);
}

.page-products .pr-flow p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.74;
  color: rgba(244, 237, 227, .78);
}

.page-products .pr-flow a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pr-flow a:hover {
  color: var(--volt);
}

.page-products .pr-src__stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-src__stats > .stat {
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 22px);
  background: rgba(23, 25, 31, .88);
}

.page-products .pr-src__stats .stat__num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--volt);
}

.page-products .pr-src__stats .stat__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 860px) {
  .page-products .pr-src__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

/* ---------- 收尾 ---------- */
.page-products .pr-end {
  padding-block: clamp(20px, 3vw, 40px) clamp(56px, 8vw, 96px);
}

.page-products .pr-end__inner {
  position: relative;
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(24px, 4vw, 52px);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

.page-products .pr-end h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--paper);
}

.page-products .pr-end p {
  margin: 0;
  max-width: 56ch;
  line-height: 1.78;
  color: rgba(244, 237, 227, .92);
}

.page-products .pr-end__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.page-products .pr-end .btn--ghost {
  color: var(--paper);
  border: 1px solid rgba(244, 237, 227, .6);
  background: transparent;
}

.page-products .pr-end .btn--ghost:hover,
.page-products .pr-end .btn--ghost:focus-visible {
  border-color: var(--paper);
  background: rgba(244, 237, 227, .12);
}

.page-products .pr-end__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-end__more a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 237, 227, .84);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(244, 237, 227, .42);
}

.page-products .pr-end__more a:hover,
.page-products .pr-end__more a:focus-visible {
  color: var(--volt);
  text-decoration-color: var(--volt);
}

/* ---------- 图像兜底 ---------- */
.page-products .media__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 焦点环 ---------- */
.page-products a:focus-visible,
.page-products label:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

/* ---------- 减小动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-products .pr-range,
  .page-products .pr-node__idx,
  .page-products .pr-node__title,
  .page-products .pr-jump a,
  .page-products .pr-tabs__tab {
    transition: none;
  }

  .page-products .pr-range:hover {
    transform: none;
  }
}

@media (max-width: 420px) {
  .page-products .pr-end__inner,
  .page-products .pr-range {
    clip-path: none;
  }
}