.page-products {
  --pro-hair: rgba(233, 231, 224, .22);
  --pro-line: #22302D;
  display: block;
}

/* ---------- 面包屑 ---------- */
.page-products .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--concrete);
}
.page-products .breadcrumbs a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.page-products .breadcrumbs a:hover {
  border-bottom-color: var(--teal);
}

/* ---------- 首屏 ---------- */
.page-products .pro-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}
.page-products .pro-lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 46ch;
  margin: 18px 0 0;
}
.page-products .pro-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-products .pro-points li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper);
  border-left: 2px solid var(--pro-hair);
  padding-left: 14px;
}
.page-products .pro-points__k {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cyan);
}
.page-products .pro-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.page-products .pro-hero__visual {
  min-width: 0;
}
.page-products .pro-hero__caption {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--concrete);
  max-width: 42ch;
}

/* 纯 CSS 球场热区 */
.page-products .pitch {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--carbon);
  background:
    radial-gradient(circle at 24% 32%, rgba(53, 240, 208, .55) 0%, rgba(53, 240, 208, .14) 26%, transparent 50%),
    radial-gradient(circle at 74% 66%, rgba(53, 240, 208, .38) 0%, rgba(53, 240, 208, .09) 30%, transparent 56%),
    linear-gradient(158deg, #114a3a 0%, #062A21 60%, #041d17 100%);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  isolation: isolate;
}
.page-products .pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, transparent calc(50% - 1px), var(--pro-hair) calc(50% - 1px), var(--pro-hair) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%, transparent 0 58px, var(--pro-hair) 58px 60px, transparent 60px);
  pointer-events: none;
}
.page-products .pitch::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 56%;
  height: 32%;
  transform: translateX(-50%);
  border: 2px solid var(--pro-hair);
  border-bottom: 0;
  pointer-events: none;
}
.page-products .pitch__mark {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}
.page-products .pitch__mark--a {
  width: 14px;
  height: 14px;
  left: 22%;
  top: 30%;
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(245, 197, 24, .22);
}
.page-products .pitch__mark--b {
  width: 12px;
  height: 12px;
  left: 71%;
  top: 64%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(224, 36, 43, .2);
}
.page-products .pitch__mark--c {
  width: 10px;
  height: 10px;
  left: 48%;
  top: 46%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(53, 240, 208, .25);
}

/* ---------- 模块检索台 ---------- */
.page-products .pro-mods {
  margin-top: 34px;
}
.page-products .pro-mods .card__body {
  font-size: 14px;
  line-height: 1.72;
}
.page-products .pro-mods .card__title {
  margin: 10px 0 10px;
}
.page-products .pro-mods .card__foot {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--concrete);
  margin: 14px 0 0;
}
.page-products .pro-mods .col-12 {
  display: grid;
  gap: 6px;
}

/* ---------- 通用图文分栏 ---------- */
.page-products .pro-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.5vw, 46px);
  align-items: start;
}
.page-products .pro-split__text h2 {
  margin: 12px 0 16px;
}
.page-products .pro-list {
  list-style: none;
  margin: 20px 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-products .pro-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}
.page-products .pro-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--cyan);
}
.page-products .pro-split__media {
  margin: 0;
}

/* ---------- 跑动数据 ---------- */
.page-products .pro-run {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
  margin-top: 30px;
  align-items: stretch;
}
.page-products .heat {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--carbon);
  background:
    linear-gradient(180deg, #0f4a39 0%, #072b22 100%);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.page-products .heat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(233, 231, 224, .07) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to bottom, rgba(233, 231, 224, .07) 0 1px, transparent 1px 16.66%);
}
.page-products .heat__core {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(0.5px);
}
.page-products .heat__core--1 {
  width: 42%;
  height: 58%;
  left: 6%;
  top: 8%;
  background: radial-gradient(circle, rgba(53, 240, 208, .78) 0%, rgba(53, 240, 208, .22) 44%, transparent 72%);
}
.page-products .heat__core--2 {
  width: 30%;
  height: 40%;
  left: 44%;
  top: 34%;
  background: radial-gradient(circle, rgba(53, 240, 208, .58) 0%, rgba(30, 140, 122, .2) 48%, transparent 76%);
}
.page-products .heat__core--3 {
  width: 24%;
  height: 30%;
  right: 6%;
  top: 12%;
  background: radial-gradient(circle, rgba(245, 197, 24, .48) 0%, rgba(245, 197, 24, .12) 48%, transparent 74%);
}
.page-products .heat__core--4 {
  width: 22%;
  height: 26%;
  right: 14%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(224, 36, 43, .42) 0%, rgba(224, 36, 43, .1) 46%, transparent 74%);
}
.page-products .pro-run__note {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: #5d6a68;
}
.page-products .pro-run__list {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
.page-products .pro-run__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 2px solid var(--ink);
}
.page-products .pro-run__row dt {
  font-size: 14px;
  color: var(--ink);
}
.page-products .pro-run__num {
  font-size: clamp(30px, 4vw, 46px);
  color: var(--green);
  line-height: 1;
}
.page-products .pro-run__unit {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: #5d6a68;
}
.page-products .pro-run__foot {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: #4a5352;
}

/* ---------- 青训年龄段 ---------- */
.page-products .pro-ages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 30px;
}
.page-products .pro-age {
  border: 2px solid var(--carbon);
  background: var(--paper);
  color: var(--ink);
  padding: 22px 20px 20px;
  box-shadow: 5px 5px 0 rgba(16, 19, 20, .85);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.page-products .pro-age:hover {
  transform: translateY(-2px);
  box-shadow: 5px 9px 0 rgba(16, 19, 20, .85);
}
.page-products .pro-age__idx {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--green);
}
.page-products .pro-age__title {
  margin: 12px 0 10px;
  font-size: 18px;
  color: var(--carbon);
}
.page-products .pro-age__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: #3b4443;
}
.page-products .pro-age__foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(16, 19, 20, .18);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: #6a7372;
}

/* ---------- 裁判与友谊赛 ---------- */
.page-products .pro-supply {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.5vw, 46px);
  align-items: center;
}
.page-products .pro-supply__col p {
  color: var(--mist);
}
.page-products .pro-supply__col .btn {
  margin-top: 20px;
}
.page-products .pro-supply__media {
  margin: 0;
}

/* ---------- 机构版 ---------- */
.page-products .pro-inst {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 30px;
}
.page-products .pro-inst__card {
  padding: 24px 22px;
}
.page-products .pro-inst__card .card__title {
  margin: 10px 0 10px;
  font-size: 19px;
}

/* ---------- 适用场景 ---------- */
.page-products .pro-scenes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 30px;
}
.page-products .pro-scene {
  border-left: 4px solid var(--teal);
  padding: 4px 0 4px 18px;
}
.page-products .pro-scene__idx {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--teal);
}
.page-products .pro-scene__title {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--carbon);
}
.page-products .pro-scene__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: #4a5352;
}

/* ---------- 怎么开始 ---------- */
.page-products .pro-start {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.5vw, 48px);
  align-items: start;
}
.page-products .pro-steps {
  list-style: none;
  counter-reset: pro-step;
  margin: 22px 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.page-products .pro-steps li {
  counter-increment: pro-step;
  position: relative;
  padding-left: 46px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}
.page-products .pro-steps li::before {
  content: "0" counter(pro-step);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--cyan);
  border: 1px solid rgba(53, 240, 208, .45);
  padding: 2px 6px;
}
.page-products .pro-steps__k {
  color: var(--paper);
  font-weight: 700;
}
.page-products .pro-start__side {
  border: 2px solid rgba(53, 240, 208, .35);
  background: rgba(6, 42, 33, .55);
  padding: 26px 22px;
  box-shadow: var(--shadow-cyan);
}
.page-products .pro-start__quote {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cyan);
  font-weight: 700;
}
.page-products .pro-start__facts {
  margin: 0 0 22px;
  display: grid;
  gap: 0;
}
.page-products .pro-start__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pro-hair);
}
.page-products .pro-start__fact:first-child {
  border-top: 1px solid var(--pro-hair);
}
.page-products .pro-start__fact dt {
  font-size: 13px;
  color: var(--mist);
}
.page-products .pro-start__num {
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--paper);
  line-height: 1;
}
.page-products .pro-start__unit {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--concrete);
}

/* ---------- 图片通用 ---------- */
.page-products .pro-media-wide {
  margin: clamp(28px, 4vw, 46px) 0 0;
}
.page-products .pro-media-wide .media__img,
.page-products .pro-split__media .media__img,
.page-products .pro-supply__media .media__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid var(--carbon);
  box-shadow: var(--shadow-hard);
}
.page-products .media__caption {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--concrete);
}

/* ---------- 响应式 ---------- */
@media (min-width: 560px) {
  .page-products .pro-ages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pro-scenes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pro-inst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pro-inst__card:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .page-products .pro-run {
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .page-products .pro-hero {
    grid-template-columns: 1.05fr .95fr;
  }
  .page-products .pro-split {
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
  }
  .page-products .pro-split--flip {
    grid-template-columns: 1.08fr .92fr;
  }
  .page-products .pro-supply {
    grid-template-columns: 1.15fr .85fr;
  }
  .page-products .pro-start {
    grid-template-columns: 1.2fr .8fr;
  }
  .page-products .pro-ages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pro-scenes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pro-inst {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .pro-inst__card:first-child {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pro-age {
    transition: none;
  }
  .page-products .pro-age:hover {
    transform: none;
    box-shadow: 5px 5px 0 rgba(16, 19, 20, .85);
  }
}