.page-products {
  --bp-line: rgba(110, 132, 121, 0.3);
  --bp-line-soft: rgba(110, 132, 121, 0.16);
  --bp-ink-text: #14201B;
  background: var(--ink);
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* ---------- 首屏框景 ---------- */
.page-products .bp-hero {
  position: relative;
  padding: clamp(20px, 4vw, 44px) 0 clamp(30px, 5vw, 56px);
  background:
    radial-gradient(120% 100% at 92% -10%, rgba(61, 242, 208, 0.1), transparent 55%),
    radial-gradient(90% 80% at -5% 110%, rgba(154, 107, 255, 0.12), transparent 58%),
    var(--ink);
  border-bottom: 1px solid var(--bp-line-soft);
}

.page-products .bp-hero__grid {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(20px, 3vw, 34px);
}

@media (min-width: 940px) {
  .page-products .bp-hero__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }
}

.page-products .bp-h1 {
  margin: 12px 0 0;
  max-width: 20ch;
}

.page-products .bp-hero__lead .bx-lede {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--mute);
}

.page-products .bp-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.page-products .bp-hero__panel {
  position: relative;
  border: 1px solid var(--bp-line);
  background: linear-gradient(180deg, rgba(23, 53, 43, 0.86), rgba(16, 37, 30, 0.94));
  padding: clamp(16px, 2.4vw, 24px);
}

.page-products .bp-hero__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--grad-live);
}

.page-products .bp-statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 18px;
}

.page-products .bp-stat {
  border: 1px solid var(--bp-line-soft);
  background: rgba(11, 15, 13, 0.45);
  padding: 10px 8px;
}

.page-products .bp-stat__n {
  display: block;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.1;
  color: var(--cyan);
}

.page-products .bp-stat__k {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mute);
}

.page-products .bp-hero__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .bp-hero__list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bp-line-soft);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
}

.page-products .bp-hero__list .bx-num {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--brick);
}

/* ---------- 区块骨架 ---------- */
.page-products .bp-section {
  padding: clamp(40px, 6vw, 76px) 0;
  border-top: 1px solid var(--bp-line-soft);
}

.page-products .bp-section--tight {
  padding-bottom: clamp(24px, 4vw, 40px);
}

.page-products .bp-sechead {
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.page-products .bp-sechead .bx-h2 {
  margin: 8px 0 0;
}

.page-products .bp-sechead::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--brick), transparent 72%);
}

.page-products .bp-intro {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mute);
}

.page-products .bp-intro--wide {
  max-width: 72ch;
}

/* ---------- Bento 总览 ---------- */
.page-products .bp-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--bp-line);
  background: linear-gradient(180deg, rgba(23, 53, 43, 0.74), rgba(16, 37, 30, 0.94));
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}

.page-products .bp-cell::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--bp-acc, var(--cyan)), transparent 78%);
  opacity: 0.75;
}

.page-products .bp-cell:hover,
.page-products .bp-cell:focus-within {
  transform: translateY(-2px);
  border-color: var(--cyan);
}

.page-products .bp-cell--lead { --bp-acc: var(--cyan); padding: 0; }
.page-products .bp-cell--flow { --bp-acc: var(--cool); }
.page-products .bp-cell--save { --bp-acc: var(--violet); }
.page-products .bp-cell--sync { --bp-acc: var(--amber); }

.page-products .bp-cell__media {
  border-bottom: 1px solid var(--bp-line-soft);
}

.page-products .bp-cell__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2.2vw, 24px);
}

.page-products .bp-cell__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .bp-cell p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mute);
}

.page-products .bp-cell .bx-h3 {
  color: var(--ice);
  margin: 0;
}

.page-products .bp-meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--brick);
}

.page-products .bp-flowfill {
  display: block;
  width: 68%;
}

.page-products .bp-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

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

.page-products .bp-mini li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--bp-line-soft);
  background: rgba(11, 15, 13, 0.4);
  font-size: 13px;
  color: var(--mute);
}

.page-products .bp-mini span {
  color: var(--cyan);
  font-size: 12px;
}

/* ---------- 字段说明 ---------- */
.page-products .bp-fieldsgrid {
  align-items: start;
}

.page-products .bp-cream {
  background: var(--cream);
  color: var(--bp-ink-text);
  border: 1px solid rgba(11, 15, 13, 0.22);
  box-shadow: 0 1px 0 rgba(243, 235, 220, 0.08);
}

.page-products .bp-ftable__head {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #6A5546;
  background: rgba(226, 84, 42, 0.09);
  border-bottom: 1px solid rgba(11, 15, 13, 0.18);
}

.page-products .bp-ftable {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .bp-frow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  padding: 12px 14px 13px;
  border-bottom: 1px solid rgba(11, 15, 13, 0.12);
  border-left: 3px solid transparent;
  outline: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.page-products .bp-frow:last-child {
  border-bottom: 0;
}

.page-products .bp-frow:hover,
.page-products .bp-frow:focus-visible {
  border-left-color: var(--brick);
  background: rgba(226, 84, 42, 0.1);
}

.page-products .bp-frow:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cyan);
}

.page-products .bp-frow__k {
  font-size: 15px;
  font-weight: 700;
  color: var(--bp-ink-text);
}

.page-products .bp-frow__v {
  align-self: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #2F4A3E;
}

.page-products .bp-frow__d {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.66;
  color: #55655C;
}

.page-products .bp-fieldfig {
  margin: 0 0 18px;
}

.page-products .bp-sidenotes {
  display: grid;
  gap: 10px;
}

.page-products .bp-sidenote {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--bp-line-soft);
  border-left: 3px solid var(--bp-line);
  background: rgba(16, 37, 30, 0.72);
  transition: border-color 180ms ease, transform 180ms ease;
}

.page-products .bp-sidenote:hover {
  transform: translateY(-2px);
  border-left-color: var(--cyan);
}

.page-products .bp-sidenote__n {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-products .bp-sidenote p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mute);
}

/* ---------- 转会动态 ---------- */
.page-products .bp-transferfig {
  margin: 0 0 clamp(20px, 3vw, 30px);
}

.page-products .bp-transfergrid {
  align-items: start;
}

.page-products .bp-tagcloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .bp-bullets {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .bp-bullets--tight {
  margin-top: 20px;
  margin-bottom: 0;
  gap: 10px;
}

.page-products .bp-bullets li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.page-products .bp-bullets__dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border: 1px solid var(--cool);
  background: rgba(88, 166, 255, 0.22);
  transform: rotate(45deg);
}

.page-products .bp-bullets__dot--violet {
  border-color: var(--violet);
  background: rgba(154, 107, 255, 0.22);
}

.page-products .bp-bullets strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  color: var(--ice);
}

.page-products .bp-bullets p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mute);
}

/* ---------- 收藏夹 ---------- */
.page-products .bp-savegrid {
  align-items: start;
}

.page-products .bp-cardwall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

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

.page-products .bp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--bp-line);
  background: rgba(23, 53, 43, 0.9);
  transition: transform 180ms ease, border-color 180ms ease;
}

.page-products .bp-card--tall {
  min-height: 126px;
}

.page-products .bp-card:hover,
.page-products .bp-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--cyan);
}

.page-products .bp-card.is-saved {
  border-color: rgba(154, 107, 255, 0.7);
  background: linear-gradient(180deg, rgba(154, 107, 255, 0.18), rgba(23, 53, 43, 0.92));
}

.page-products .bp-card__ico {
  color: var(--mute);
  flex: none;
}

.page-products .bp-card.is-saved .bp-card__ico {
  color: var(--violet);
}

.page-products .bp-card__name {
  margin: auto 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ice);
}

.page-products .bp-card__meta {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
}

.page-products .bp-savefig {
  margin: 0;
}

/* ---------- 两端对照 ---------- */
.page-products .bp-devices {
  display: grid;
  gap: 12px;
  margin: 0 0 clamp(20px, 3vw, 30px);
}

@media (min-width: 780px) {
  .page-products .bp-devices {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

.page-products .bp-device {
  padding: 16px 18px 18px;
  border: 1px solid var(--bp-line);
  border-top: 3px solid var(--cyan);
  background: rgba(16, 37, 30, 0.9);
  transition: transform 180ms ease;
}

.page-products .bp-device:hover {
  transform: translateY(-2px);
}

.page-products .bp-device--desk {
  border-top-color: var(--violet);
}

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

.page-products .bp-device li {
  padding: 10px 0;
  border-top: 1px solid var(--bp-line-soft);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
}

.page-products .bp-mobilefig {
  margin: 0;
}

/* ---------- 三步调取 ---------- */
.page-products .bp-steps {
  display: grid;
  gap: 12px;
}

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

.page-products .bp-step {
  border: 1px solid var(--bp-line);
  border-left: 3px solid var(--brick);
  background: rgba(16, 37, 30, 0.86);
  transition: border-color 180ms ease, transform 180ms ease;
}

.page-products .bp-step:hover {
  transform: translateY(-2px);
}

.page-products .bp-step[open] {
  border-left-color: var(--cyan);
}

.page-products .bp-step summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--ice);
  outline: none;
  transition: color 180ms ease;
}

.page-products .bp-step summary::-webkit-details-marker {
  display: none;
}

.page-products .bp-step summary:hover,
.page-products .bp-step summary:focus-visible {
  color: var(--cyan);
}

.page-products .bp-step summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cyan);
}

.page-products .bp-step__no {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--brick);
}

.page-products .bp-step__hint {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mute);
}

.page-products .bp-step__hint::after {
  content: "展开";
}

.page-products .bp-step[open] .bp-step__hint::after {
  content: "收起";
}

.page-products .bp-step[open] .bp-step__hint {
  color: var(--cyan);
}

.page-products .bp-step p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mute);
}

/* ---------- 收尾 ---------- */
.page-products .bp-cta {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--bp-line);
  background:
    linear-gradient(120deg, rgba(61, 242, 208, 0.08), transparent 46%),
    linear-gradient(300deg, rgba(154, 107, 255, 0.1), transparent 52%),
    var(--panel-deep);
}

@media (min-width: 820px) {
  .page-products .bp-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
  }
}

.page-products .bp-cta .bx-h2 {
  margin: 8px 0 0;
}

.page-products .bp-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
<<<END>>>