.page-products{
  --prod-h1: clamp(38px, 7.2vw, 88px);
  --prod-h2: clamp(26px, 3.6vw, 52px);
  --prod-h3: clamp(19px, 1.5vw, 23px);
  --prod-gap: clamp(64px, 9vw, 128px);
  --prod-pad: clamp(22px, 3vw, 38px);
  --prod-ink-2: #0D1613;
  background:
    radial-gradient(120% 70% at 80% -10%, rgba(18,51,40,0.85) 0%, rgba(7,11,9,0) 62%),
    var(--ink);
  color: var(--snow);
  padding-top: clamp(104px, 13vw, 168px);
  padding-bottom: clamp(64px, 9vw, 120px);
  overflow-x: hidden;
}

.page-products img{
  display:block;
  max-width:100%;
  height:auto;
}

/* ---------- 面包屑 ---------- */
.page-products .prod-crumb-row{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.page-products .prod-crumb-row a{
  color: var(--mist);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.page-products .prod-crumb-row a:hover,
.page-products .prod-crumb-row a:focus-visible{
  color: var(--lime);
}

/* ---------- 首屏 ---------- */
.page-products .prod-mast{
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--prod-gap);
  border-bottom: 1px solid var(--line);
}
.page-products .prod-mast-main{ min-width: 0; }

.page-products h1{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--prod-h1);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0 0 var(--space-3);
  color: var(--snow);
  text-wrap: balance;
}

.page-products .prod-lede{
  max-width: 54ch;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--snow-soft);
}

.page-products .prod-mast-actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-products .prod-mast-side{
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  min-width: 0;
}
.page-products .prod-side-title{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 var(--space-2);
}
.page-products .prod-svc-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-products .prod-svc-list a{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px var(--space-2);
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--snow);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.page-products .prod-svc-list a:hover,
.page-products .prod-svc-list a:focus-visible{
  color: var(--lime);
  border-bottom-color: var(--lime);
  padding-left: 8px;
}
.page-products .prod-svc-no{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  color: var(--amber);
}
.page-products .prod-svc-name{
  font-size: 15px;
  letter-spacing: .01em;
}
.page-products .prod-svc-meta{
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--mist);
}

/* ---------- 章节骨架 ---------- */
.page-products .prod-section{
  padding-top: var(--prod-gap);
  min-width: 0;
}
.page-products .prod-sec-head{
  max-width: 820px;
  margin-bottom: var(--space-5);
}
.page-products .prod-sec-head .index-no{
  margin: 0 0 var(--space-2);
  color: var(--cyan);
}
.page-products h2{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--prod-h2);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-2);
  color: var(--snow);
  text-wrap: balance;
}
.page-products .prod-measure{
  margin: 0;
  max-width: 64ch;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--snow-soft);
}
.page-products .prod-h3{
  font-family: var(--font-body);
  font-size: var(--prod-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  margin: 0 0 var(--space-2);
  color: var(--snow);
}

/* ---------- 服务卡片矩阵 ---------- */
.page-products .prod-svc-grid{
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-products .prod-svc-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--prod-pad);
  background: var(--prod-ink-2);
  transition: background var(--dur) var(--ease);
}
.page-products .prod-svc-card:hover{ background: var(--field-deep); }
.page-products .prod-svc-card--lead{
  background: var(--field-deep);
}
.page-products .prod-svc-card--paper{
  background: var(--paper);
  color: var(--paper-ink);
}
.page-products .prod-svc-card--paper:hover{ background: #E8DDC7; }
.page-products .prod-svc-card h3{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--prod-h3);
  font-weight: 600;
  line-height: 1.32;
  color: inherit;
}
.page-products .prod-svc-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--snow-soft);
}
.page-products .prod-svc-card--paper p{ color: #3A3226; }
.page-products .prod-card-tag{
  font-family: var(--font-mono);
  font-size: var(--fs-label) !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime) !important;
  margin: 0 !important;
}
.page-products .prod-card-tag--dark{ color: #7A5A18 !important; }

.page-products .prod-inline-link{
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-products .prod-inline-link:hover,
.page-products .prod-inline-link:focus-visible{
  border-bottom-color: var(--lime);
}
.page-products .prod-inline-link--dark{
  color: #33421A;
  border-bottom-color: rgba(20,16,10,0.28);
}
.page-products .prod-inline-link--dark:hover,
.page-products .prod-inline-link--dark:focus-visible{
  color: var(--paper-ink);
  border-bottom-color: var(--paper-ink);
}

/* ---------- 图片框 ---------- */
.page-products .prod-frame{
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--field-deep);
  aspect-ratio: 14 / 9;
}
.page-products .prod-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-products .prod-figure{
  margin: 0 0 var(--space-5);
}
.page-products .prod-figure--tight{
  margin: var(--space-5) 0 0;
}
.page-products .prod-frame--player{ aspect-ratio: 3 / 2; }
.page-products .prod-frame--sub{ aspect-ratio: 3 / 4; }

/* ---------- 数据条 ---------- */
.page-products .prod-stats{
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-products .prod-stat{
  background: var(--field-deep);
  padding: var(--prod-pad);
}
.page-products .prod-stat .data-figure{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--lime);
}
.page-products .prod-stat-label{
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist);
}
.page-products .prod-stat p{
  margin: var(--space-2) 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--snow-soft);
}

/* ---------- 分栏 + 折叠 ---------- */
.page-products .prod-split{
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.page-products .prod-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-products .prod-list li{
  position: relative;
  padding: 12px 0 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.8;
  color: var(--snow-soft);
}
.page-products .prod-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 8px;
  height: 1px;
  background: var(--lime);
}
.page-products .prod-list li:last-child{ border-bottom: 0; }
.page-products .prod-list strong{
  color: var(--snow);
  font-weight: 600;
  margin-right: 6px;
}
.page-products .prod-list--tight li{
  font-size: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.page-products .prod-list--tight li::before{ top: 18px; }
.page-products .prod-list--dark li{ color: #3A3226; }
.page-products .prod-list--dark li strong{ color: var(--paper-ink); }
.page-products .prod-list--dark li::before{ background: #6B5B36; }

.page-products .prod-fold{
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--prod-ink-2);
}
.page-products .prod-fold:last-child{ border-bottom: 1px solid var(--line); }
.page-products .prod-fold summary{
  cursor: pointer;
  list-style: none;
  padding: 16px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--snow);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.page-products .prod-fold summary::-webkit-details-marker{ display: none; }
.page-products .prod-fold summary::after{
  content: "+";
  float: right;
  color: var(--amber);
  font-size: 14px;
  line-height: 1;
}
.page-products .prod-fold[open] summary::after{ content: "–"; }
.page-products .prod-fold summary:hover,
.page-products .prod-fold summary:focus-visible{
  color: var(--lime);
  background: var(--field-deep);
}
.page-products .prod-fold .prod-list{
  padding: 0 var(--space-3) var(--space-2);
}

/* ---------- 球员数据 ---------- */
.page-products .prod-player-grid{
  display: grid;
  gap: var(--space-5);
}
.page-products .prod-player-figure{ margin: 0; }
.page-products .prod-player-body{ min-width: 0; }
.page-products .prod-player-body p{
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--snow-soft);
}
.page-products .prod-player-body .prod-inline-link{
  margin-top: var(--space-1);
}
.page-products .prod-radar{
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 0 var(--space-4);
}
.page-products .prod-radar-frame polygon,
.page-products .prod-radar-frame line{
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.page-products .prod-radar-shape{
  fill: rgba(200, 255, 62, 0.14);
  stroke: var(--lime);
  stroke-width: 1.5;
}
.page-products .prod-radar-dots{
  fill: var(--cyan);
}

/* ---------- 横向分隔带 ---------- */
.page-products .prod-band{
  margin-top: var(--prod-gap);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: var(--field-deep);
}
.page-products .prod-band img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
}

/* ---------- 订阅卡 ---------- */
.page-products .prod-sub-grid{
  display: grid;
  gap: var(--space-5);
}
.page-products .prod-sub-card{
  background: var(--paper);
  color: var(--paper-ink);
  padding: var(--prod-pad);
  border-top: 3px solid var(--lime);
}
.page-products .prod-sub-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: var(--space-3) 0 var(--space-3);
  color: var(--paper-ink);
}
.page-products .prod-sub-card > p{
  margin: 0 0 var(--space-3);
  font-size: 15px;
  line-height: 1.8;
  color: #3A3226;
}
.page-products .prod-sub-btn{
  margin-top: var(--space-4);
  align-self: flex-start;
}
.page-products .prod-sub-figure{ margin: 0; }

/* ---------- 资源包 ---------- */
.page-products .prod-dl-band{
  display: grid;
  gap: var(--space-5);
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}
.page-products .prod-fmt-row{
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-products .prod-fmt{
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "icon name"
    "icon note";
  gap: 2px var(--space-2);
  align-items: center;
  padding: var(--space-3) var(--prod-pad);
  background: var(--prod-ink-2);
  color: var(--lime);
  transition: background var(--dur) var(--ease);
}
.page-products .prod-fmt:hover{ background: var(--field-deep); }
.page-products .prod-fmt--cyan{ color: var(--cyan); }
.page-products .prod-fmt--amber{ color: var(--amber); }
.page-products .prod-fmt-icon{
  grid-area: icon;
  width: 30px;
  height: auto;
  align-self: center;
}
.page-products .prod-fmt-name{
  grid-area: name;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--snow);
}
.page-products .prod-fmt-note{
  grid-area: note;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}
.page-products .prod-dl-note p{
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--snow-soft);
}
.page-products .prod-text-link{
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.page-products .prod-text-link:hover,
.page-products .prod-text-link:focus-visible{
  border-bottom-color: var(--lime);
}

/* ---------- 时间线 ---------- */
.page-products .prod-timeline{
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  border-left: 1px solid var(--line);
}
.page-products .prod-timeline li{
  position: relative;
  padding: 0 0 var(--space-5) var(--space-4);
}
.page-products .prod-timeline li:last-child{ padding-bottom: 0; }
.page-products .prod-timeline li::before{
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--lime);
}
.page-products .prod-tl-time{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
}
.page-products .prod-tl-title{
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: var(--prod-h3);
  font-weight: 600;
  color: var(--snow);
}
.page-products .prod-timeline p{
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--snow-soft);
}

.page-products .prod-scenes{
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-products .prod-scene{
  padding: var(--prod-pad);
  background: var(--field-deep);
}
.page-products .prod-scene-tag{
  margin: 0 0 var(--space-2) !important;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.page-products .prod-scene p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--snow-soft);
}

/* ---------- 支持 ---------- */
.page-products .prod-support-grid{
  display: grid;
  gap: var(--space-3);
}
.page-products .prod-support-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--prod-pad);
  border: 1px solid var(--line);
  background: var(--prod-ink-2);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.page-products .prod-support-card:hover{
  border-color: var(--lime);
  background: var(--field-deep);
}
.page-products .prod-support-card h3{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--prod-h3);
  font-weight: 600;
  color: var(--snow);
}
.page-products .prod-support-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--snow-soft);
}

/* ---------- 焦点可见 ---------- */
.page-products a:focus-visible,
.page-products summary:focus-visible{
  outline: 1px solid var(--lime);
  outline-offset: 3px;
}

/* ---------- 断点 ---------- */
@media (min-width: 700px){
  .page-products .prod-svc-grid{ grid-template-columns: 1fr 1fr; }
  .page-products .prod-svc-card--lead{ grid-row: span 2; }
  .page-products .prod-stats{ grid-template-columns: repeat(3, 1fr); }
  .page-products .prod-scenes{ grid-template-columns: 1fr 1fr; }
  .page-products .prod-support-grid{ grid-template-columns: repeat(3, 1fr); }
  .page-products .prod-fmt-row{ grid-template-columns: repeat(3, 1fr); }
  .page-products .prod-fmt{
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "name"
      "note";
    gap: var(--space-2);
    align-content: start;
  }
}

@media (min-width: 900px){
  .page-products .prod-mast{
    grid-template-columns: 7fr 5fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .page-products .prod-mast-side{
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-top: 0;
    padding-left: clamp(20px, 2.4vw, 36px);
  }
  .page-products .prod-split{
    grid-template-columns: 6fr 6fr;
    gap: clamp(28px, 4vw, 56px);
  }
  .page-products .prod-player-grid{
    grid-template-columns: 7fr 5fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  .page-products .prod-sub-grid{
    grid-template-columns: 7fr 5fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  .page-products .prod-dl-band{
    grid-template-columns: 7fr 5fr;
    gap: clamp(28px, 4vw, 56px);
  }
  .page-products .prod-timeline{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
  }
  .page-products .prod-timeline li{
    padding: 0;
  }
  .page-products .prod-timeline li::before{
    left: 0;
    top: -21px;
  }
  .page-products .prod-scenes{
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products *{
    transition: none !important;
    animation: none !important;
  }
  .page-products .prod-svc-list a:hover,
  .page-products .prod-svc-list a:focus-visible{
    padding-left: 2px;
  }
}
<<<END>>>