.page-products {
  --pp-gap: clamp(14px, 2vw, 26px);
  --pp-line: rgba(28, 69, 96, 0.85);
  --pp-line-soft: rgba(28, 69, 96, 0.45);
  display: block;
  background: var(--ink);
  color: var(--white);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero {
  position: relative;
  padding: clamp(44px, 7vw, 92px) 0 clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--pp-line);
  background:
    linear-gradient(180deg, rgba(10, 58, 71, 0.55) 0%, rgba(6, 23, 38, 0) 62%),
    var(--ink);
  overflow: hidden;
}

.page-products .pp-hero .crumbs {
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-products .pp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.page-products .eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora);
}

.page-products .pp-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(36px, 6.4vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-products .pp-hero__lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.78;
  color: var(--muted);
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 20px;
}

.page-products .pp-hero__meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--aurora-soft);
}

.page-products .pp-hero__visual {
  position: relative;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--pp-line);
  background:
    linear-gradient(155deg, rgba(47, 227, 198, 0.14) 0%, rgba(10, 58, 71, 0.75) 48%, rgba(6, 23, 38, 0.96) 100%),
    var(--panel);
  overflow: hidden;
}

.page-products .pp-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(28, 69, 96, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 69, 96, 0.45) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.page-products .pp-bars {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

.page-products .pp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-products .pp-bar__idx {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lime);
}

.page-products .pp-bar__line {
  display: block;
  height: 5px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--aurora) 0%, rgba(47, 227, 198, 0.05) 100%);
}

.page-products .pp-bar:nth-child(1) .pp-bar__line { width: 90%; }
.page-products .pp-bar:nth-child(2) .pp-bar__line { width: 72%; }
.page-products .pp-bar:nth-child(3) .pp-bar__line { width: 82%; }
.page-products .pp-bar:nth-child(4) .pp-bar__line { width: 58%; }
.page-products .pp-bar:nth-child(5) .pp-bar__line { width: 86%; }
.page-products .pp-bar:nth-child(6) .pp-bar__line { width: 66%; }
.page-products .pp-bar:nth-child(7) .pp-bar__line { width: 78%; }
.page-products .pp-bar:nth-child(8) .pp-bar__line { width: 52%; }

/* ---------- 章节通用 ---------- */
.page-products .section {
  padding: clamp(48px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-products .section__head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-products .section__index {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lime);
}

.page-products .section__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-products .section__lead {
  margin: 0;
  max-width: 66ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.78;
  color: var(--muted);
}

/* ---------- 图片容器 ---------- */
.page-products .pp-figure {
  margin: 0;
  border: 1px solid var(--pp-line);
  background: var(--panel);
  overflow: hidden;
}

.page-products .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .pp-figure figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--pp-line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 01 服务清单 ---------- */
.page-products .pp-catalog__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-products .pp-catalog__note p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pp-catalog__note p:last-child {
  margin-bottom: 0;
}

.page-products .pp-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 clamp(30px, 4vw, 52px);
  border: 1px solid var(--pp-line);
  background: var(--pp-line);
}

.page-products .pp-strip__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 106px;
  padding: 16px 14px 18px;
  background: var(--ink);
  border-top: 3px solid var(--aurora);
  color: var(--white);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .pp-strip__item:nth-child(2) { border-top-color: var(--amber); }
.page-products .pp-strip__item:nth-child(3) { border-top-color: var(--lime); }
.page-products .pp-strip__item:nth-child(4) { border-top-color: var(--aurora-soft); }
.page-products .pp-strip__item:nth-child(6) { border-top-color: var(--amber); }
.page-products .pp-strip__item:nth-child(7) { border-top-color: var(--lime); }
.page-products .pp-strip__item:nth-child(8) { border-top-color: var(--aurora-soft); }

.page-products .pp-strip__item:hover,
.page-products .pp-strip__item:focus-visible {
  transform: translateY(-4px);
  background: var(--panel);
  border-top-color: var(--aurora);
  outline: none;
}

.page-products .pp-strip__item:focus-visible {
  box-shadow: 0 0 0 2px var(--lime);
}

.page-products .pp-strip__idx {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lime);
}

.page-products .pp-strip__name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.page-products .pp-strip__n {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--muted);
}

.page-products .pp-cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-gap);
}

.page-products .cat-card {
  border: 1px solid var(--pp-line);
  background: linear-gradient(180deg, rgba(13, 42, 68, 0.9) 0%, rgba(6, 23, 38, 0.96) 100%);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .cat-card:hover {
  border-color: var(--aurora);
  transform: translateY(-4px);
}

.page-products .cat-card[open] {
  border-color: var(--aurora);
}

.page-products .cat-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.page-products .cat-card__head::-webkit-details-marker {
  display: none;
}

.page-products .cat-card[open] .cat-card__head {
  border-bottom-color: var(--pp-line);
}

.page-products .cat-card__num {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--lime);
}

.page-products .cat-card__name {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}

.page-products .cat-card__count {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--muted);
}

.page-products .cat-card__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--aurora);
  border-bottom: 2px solid var(--aurora);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.page-products .cat-card[open] .cat-card__toggle {
  transform: rotate(-135deg);
}

.page-products .cat-card__body {
  padding: 16px 18px 22px;
}

.page-products .cat-card__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

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

.page-products .cat-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding-bottom: 9px;
  border-bottom: 1px dotted var(--pp-line);
  font-size: 14px;
  line-height: 1.62;
  color: var(--white);
}

.page-products .cat-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .cat-list__sn {
  font-size: 11.5px;
  color: var(--muted);
}

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

.page-products .cat-tags .tag {
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/* ---------- 02 电脑端 ---------- */
.page-products .pp-desktop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
}

.page-products .pp-feats {
  list-style: none;
  margin: 0 0 clamp(24px, 3vw, 38px);
  padding: 0;
  display: grid;
  gap: 20px;
}

.page-products .pp-feat {
  padding-left: 16px;
  border-left: 2px solid var(--aurora);
}

.page-products .pp-feat h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.page-products .pp-feat p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-spec-wrap {
  overflow-x: auto;
  border: 1px solid var(--pp-line);
}

.page-products .pp-spec {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.page-products .pp-spec__caption {
  caption-side: top;
  padding: 12px 14px;
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--lime);
  background: var(--panel);
  border-bottom: 1px solid var(--pp-line);
}

.page-products .pp-spec th,
.page-products .pp-spec td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pp-line);
  line-height: 1.6;
}

.page-products .pp-spec thead th {
  font-weight: 500;
  color: var(--aurora-soft);
  background: var(--panel);
  white-space: nowrap;
}

.page-products .pp-spec tbody tr:last-child td {
  border-bottom: none;
}

.page-products .pp-spec td {
  color: var(--white);
}

.page-products .pp-spec__note {
  color: var(--muted);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-products .pp-spec tbody tr:hover,
.page-products .pp-spec tbody tr:focus-within {
  background: rgba(13, 42, 68, 0.7);
}

.page-products .pp-spec tbody tr:hover .pp-spec__note,
.page-products .pp-spec tbody tr:focus-within .pp-spec__note {
  opacity: 1;
  color: var(--aurora-soft);
}

/* ---------- 03 标签体系 ---------- */
.page-products .pp-labels__tree {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--pp-line);
  background:
    linear-gradient(180deg, rgba(10, 58, 71, 0.5) 0%, rgba(6, 23, 38, 0.9) 100%),
    var(--panel);
  overflow-x: auto;
}

.page-products .pp-tree {
  display: block;
  width: 100%;
  min-width: 700px;
  height: auto;
}

.page-products .pp-tree__paths path {
  fill: none;
  stroke: var(--grid);
  stroke-width: 1.5;
}

.page-products .pp-tree__dots circle {
  fill: var(--aurora);
}

.page-products .pp-tree__leaves line {
  stroke: var(--aurora-soft);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  opacity: 0.5;
}

.page-products .pp-tree__leaves circle {
  fill: var(--aurora-soft);
}

.page-products .pp-tree__text text {
  fill: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
}

.page-products .pp-labels__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
}

.page-products .pp-labels__text p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pp-labels__text p:last-child {
  margin-bottom: 0;
}

/* ---------- 04 四步流程 ---------- */
.page-products .pp-figure--band {
  margin-bottom: clamp(28px, 4vw, 46px);
}

.page-products .pp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-products .pp-step {
  position: relative;
  padding: 22px 16px 0 0;
  border-top: 2px solid var(--pp-line);
}

.page-products .pp-step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--amber);
}

.page-products .pp-step:nth-child(2)::before { background: var(--lime); }
.page-products .pp-step:nth-child(3)::before { background: var(--aurora-soft); }
.page-products .pp-step:nth-child(4)::before { background: var(--aurora); }

.page-products .pp-step__num {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .pp-step__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.page-products .pp-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-steps__tail {
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-steps__tail a {
  color: var(--aurora);
  text-decoration: none;
  border-bottom: 1px solid var(--aurora);
}

.page-products .pp-steps__tail a:hover,
.page-products .pp-steps__tail a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
  outline: none;
}

/* ---------- 05 支持 ---------- */
.page-products .pp-support__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

.page-products .pp-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--pp-line);
  border: 1px solid var(--pp-line);
}

.page-products .pp-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px;
  background: var(--panel);
}

.page-products .pp-stat__num {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.02em;
  color: var(--aurora);
}

.page-products .pp-stat__label {
  font-size: 12.5px;
  color: var(--muted);
}

.page-products .pp-support__body h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--white);
}

.page-products .pp-support__body h3 + .pp-contact,
.page-products .pp-support__body h3 + .pp-self {
  margin-bottom: clamp(26px, 3vw, 38px);
}

.page-products .pp-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pp-contact li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pp-line);
}

.page-products .pp-contact li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .pp-contact__key {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--lime);
  padding-top: 3px;
}

.page-products .pp-contact__val {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-self {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pp-self li a {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--pp-line);
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-size: 14.5px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-products .pp-self li a:hover,
.page-products .pp-self li a:focus-visible {
  transform: translateY(-4px);
  border-color: var(--aurora);
  background: var(--panel);
  outline: none;
}

.page-products .pp-self li a:focus-visible {
  box-shadow: 0 0 0 2px var(--lime);
}

.page-products .pp-support__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-support__note a {
  color: var(--aurora);
  text-decoration: none;
  border-bottom: 1px solid var(--aurora);
}

.page-products .pp-support__note a:hover,
.page-products .pp-support__note a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
  outline: none;
}

/* ---------- 06 场景 ---------- */
.page-products .pp-scenes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-gap);
  margin-bottom: clamp(30px, 4vw, 50px);
}

.page-products .pp-scene {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px;
  border: 1px solid var(--pp-line);
  border-left: 3px solid var(--aurora);
  background: linear-gradient(180deg, rgba(13, 42, 68, 0.85) 0%, rgba(6, 23, 38, 0.96) 100%);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .pp-scene:nth-child(2) {
  border-left-color: var(--amber);
}

.page-products .pp-scene:nth-child(3) {
  border-left-color: var(--lime);
}

.page-products .pp-scene:hover {
  transform: translateY(-4px);
  border-color: var(--aurora);
}

.page-products .pp-scene__idx {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .pp-scene h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.page-products .pp-scene__dev {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--aurora-soft);
}

.page-products .pp-scene__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .pp-scene__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.page-products .pp-scene__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1px;
  background: var(--aurora);
}

.page-products .pp-scene__gain {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--pp-line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--white);
}

.page-products .pp-outro {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--pp-line);
  background:
    linear-gradient(120deg, rgba(10, 58, 71, 0.7) 0%, rgba(6, 23, 38, 0.95) 70%),
    var(--panel);
}

.page-products .pp-outro p {
  margin: 0 0 22px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--muted);
}

.page-products .pp-outro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .pp-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

  .page-products .pp-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pp-desktop__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }

  .page-products .pp-labels__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-products .pp-support__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .page-products .pp-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .page-products .pp-step {
    padding: 24px 20px 0 0;
  }

  .page-products .pp-scenes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-products .pp-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .page-products .pp-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .page-products .pp-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-products .pp-cats > .cat-card:nth-child(3n + 2) {
    margin-top: 24px;
  }

  .page-products .pp-cats > .cat-card:nth-child(3n) {
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-strip__item,
  .page-products .cat-card,
  .page-products .pp-scene,
  .page-products .pp-self li a,
  .page-products .cat-card__toggle {
    transition: none;
  }

  .page-products .pp-strip__item:hover,
  .page-products .pp-strip__item:focus-visible,
  .page-products .cat-card:hover,
  .page-products .pp-scene:hover,
  .page-products .pp-self li a:hover,
  .page-products .pp-self li a:focus-visible {
    transform: none;
  }
}
<<<END>>>

等等——我得确认一下标记格式。指令说的是标记必须是三个尖括号，每个出现一次，按顺序：先 ``，再 ``。我没加 END 标记，这没问题。

不过再检查一下：步骤区用了 `data-reveal`，还有 `.pp-step`，它们都在作用域内，没问题。

也检查一下有没有禁用词。我扫一遍：

- “边界”“口径”“不做承诺”“不提供”——“那边有专门的对接口径”——哎，这里“口径”用了！得改掉。
- 替换成：“那边有专门的对接人。”

再查一遍其他敏感词：
- “本页只”没有。
- “均”“统计”没有。
- “可核对”没有。

还有 “连接” 之类，没事。

再检查重复：品牌名 “KU游官网” 在首屏导语出现一次，“KU游官网电脑端用户站点” 在 02 节出现一次，够自然。

还有 “2026 服务清单导航” 在 h2 出现一次，符合约束。

系统版本：“Windows 10 及以上”“macOS 12 及以上”——都写清楚了。

“邮件咨询在 12 小时内首次响应”——一致。

客服 46 人，9:00–21:00——一致。

180 天记录，90 天导出——一致。

12 个一级、96 个二级——一致。

8 大类、42 项——一致。

还有那个 `pp-tree` 用了 SVG 内联，没问题。

再确认锚点：`#catalog`、`#cat-01` 到 `#cat-08`、`#desktop`、`#labels`、`#steps`、`#support`、`#scenes`，全都存在。

链接：`/`、`/faq/`（用了三次）、`/cooperation/`（用了两次）、`/blog/`（用了一次）。都在允许的路由列表里。

好，收尾。

再想想 `.pp-hero__visual::before` —— 它盖在内容上面？不，它 `pointer-events: none`，但还在同一个层里，视觉上会盖住色条。给 `.pp-bars` 加上 `position: relative` 和 `z-index: 1`？其实 `::before` 是带 `inset: 0` 的绝对定位，会渲染在上面？其实 `::before` 按顺序渲染……嗯，如果 `.pp-bars` 有 `position: relative`，它就会和 `::before` 叠在同一个层里——两者都是定位元素。`position: relative` 的 `.pp-bars` 如果 z-index 自动，就会在文档顺序里后绘制？实际上，绝对定位的 `::before` 在 DOM 顺序里出现在 `.pp-bars` 之前，所以如果两者都是定位元素且 z-index 相同，`pp-bars` 会画在上面。应该没问题。但为了稳一点，给 `.pp-bars` 加个 `z-index: 1` 吧。

再加：

```css
.page-products .pp-bars { position: relative; z-index: 1; ... }
```

已经设置过 `position: relative` 了。补上 `z-index: 1`。

不过因为 CSS 已经写完了，我得再改一下。把这段加到最终版本里。

另外，`.pp-spec` 的 `min-width: 560px` 放在 `overflow-x: auto` 的包裹层里——在手机上页面本身不会横向溢出，是好的。

`.pp-tree` 的 `min-width: 700px` 放在 `overflow-x: auto` 的包裹层里，也没问题。

好，收尾。就加上那一条改动。

其实还有一处要修：`“那边有专门的对接口径”→“那边有专门的对接同事”`，可以。

输出最终版。
<main id="main-content" class="page-products">

  <section class="pp-hero">
    <div class="container">
      <nav class="crumbs" aria-label="当前位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">服务体系</li>
        </ol>
      </nav>

      <div class="pp-hero__inner">
        <div class="pp-hero__copy">
          <p class="eyebrow">服务体系 · 2026 版</p>
          <h1 class="pp-hero__title">把清单摊开，<br>对着你的场景挑</h1>
          <p class="pp-hero__lead">KU游官网把今年能提供的服务、电脑端能做的事和内容怎么分类，整理成一份可以逐条对照的清单。你带着自己的使用习惯来，就能看出哪一条立刻能用上、第一次上手该按什么顺序走。</p>
          <div class="pp-hero__actions">
            <a class="btn btn--cta" href="#catalog">从服务清单看起</a>
            <a class="btn btn--ghost" href="#steps">第一次怎么用</a>
          </div>
          <p class="pp-hero__meta mono">8 大类 · 42 项条目 · 每季度滚动更新一次</p>
        </div>

        <div class="pp-hero__visual" aria-hidden="true">
          <ol class="pp-bars">
            <li class="pp-bar"><span class="pp-bar__idx mono">01</span><span class="pp-bar__line"></span></li>
            <li class="pp-bar"><span class="pp-bar__idx mono">02</span><span class="pp-bar__line"></span></li>
            <li class="pp-bar"><span class="pp-bar__idx mono">03</span><span class="pp-bar__line"></span></li>
            <li class="pp-bar"><span class="pp-bar__idx mono">04</span><span class="pp-bar__line"></span></li>
            <li class="pp-bar"><span class="pp-bar__idx mono">05</span><span class="pp-bar__line"></span></li>
            <li class="pp-bar"><span class="pp-bar__idx mono">06</span><span class="pp-bar__line"></span></li>
            <li class="pp-bar"><span class="pp-bar__idx mono">07</span><span class="pp-bar__line"></span></li>
            <li class="pp-bar"><span class="pp-bar__idx mono">08</span><span class="pp-bar__line"></span></li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="section pp-catalog" id="catalog">
    <div class="container">
      <header class="section__head">
        <span class="section__index mono">01</span>
        <h2 class="section__title">2026 服务清单导航</h2>
        <p class="section__lead">八类服务、42 项条目，每季度滚动更新一次。每一类下面都写清了具体能做什么、适合在什么情况下用，展开就能看到明细，不用逐页去找。</p>
      </header>

      <div class="pp-catalog__intro">
        <figure class="pp-figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="由八个色块组成的服务分类导航图，每块内含条目编号与简短文字标签">
          <figcaption>八类服务横向铺开，编号与条目摘要一一对应，方便先扫一遍再决定展开哪一类。</figcaption>
        </figure>

        <div class="pp-catalog__note">
          <p>清单里的条目分两种：一种是你注册之后马上能打开的，比如城市主题页、标签筛选、使用记录；另一种需要先跟我们对上话，比如专题联合策划、技术接口对接。两类都写在同一个编号体系里，看条目编号就能知道从哪儿进入。</p>
          <p>去年的条目里，被打开最多的是记录查询和标签对照这两组。今年它们的位置排得更靠前，入口也做得更短。</p>
        </div>
      </div>

      <nav class="pp-strip" aria-label="服务分类快速索引">
        <a class="pp-strip__item" href="#cat-01"><span class="pp-strip__idx mono">01</span><span class="pp-strip__name">地标内容浏览</span><span class="pp-strip__n mono">6 项</span></a>
        <a class="pp-strip__item" href="#cat-02"><span class="pp-strip__idx mono">02</span><span class="pp-strip__name">标签筛选与对照</span><span class="pp-strip__n mono">5 项</span></a>
        <a class="pp-strip__item" href="#cat-03"><span class="pp-strip__idx mono">03</span><span class="pp-strip__name">账号与设备衔接</span><span class="pp-strip__n mono">5 项</span></a>
        <a class="pp-strip__item" href="#cat-04"><span class="pp-strip__idx mono">04</span><span class="pp-strip__name">使用记录与回溯</span><span class="pp-strip__n mono">5 项</span></a>
        <a class="pp-strip__item" href="#cat-05"><span class="pp-strip__idx mono">05</span><span class="pp-strip__name">内容更新与订阅</span><span class="pp-strip__n mono">5 项</span></a>
        <a class="pp-strip__item" href="#cat-06"><span class="pp-strip__idx mono">06</span><span class="pp-strip__name">帮助与自助服务</span><span class="pp-strip__n mono">5 项</span></a>
        <a class="pp-strip__item" href="#cat-07"><span class="pp-strip__idx mono">07</span><span class="pp-strip__name">机构与创作者协作</span><span class="pp-strip__n mono">6 项</span></a>
        <a class="pp-strip__item" href="#cat-08"><span class="pp-strip__idx mono">08</span><span class="pp-strip__name">账号与数据管理</span><span class="pp-strip__n mono">5 项</span></a>
      </nav>

      <div class="pp-cats">

        <details class="cat-card" id="cat-01" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">01</span>
            <span class="cat-card__name">地标内容浏览</span>
            <span class="cat-card__count mono">6 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">围绕 96 座城市的主题页组织阅读路径，适合每周留出一段固定时间、想连着看几站的人。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">1.01</span><span class="cat-list__txt">96 座城市主题页直达，按省级行政区归类</span></li>
              <li><span class="cat-list__sn mono">1.02</span><span class="cat-list__txt">年度地标长卷连续阅读，章节之间不打断</span></li>
              <li><span class="cat-list__sn mono">1.03</span><span class="cat-list__txt">城市专题合集，一次看完同一条线索上的多座城</span></li>
              <li><span class="cat-list__sn mono">1.04</span><span class="cat-list__txt">章节书签，关掉再打开仍停在上次的位置</span></li>
              <li><span class="cat-list__sn mono">1.05</span><span class="cat-list__txt">关键字检索，命中结果在章节内高亮显示</span></li>
              <li><span class="cat-list__sn mono">1.06</span><span class="cat-list__txt">阅读进度在电脑端与移动端之间接着往下走</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--aurora">长内容阅读</li>
              <li class="tag tag--aurora">安静时段</li>
            </ul>
          </div>
        </details>

        <details class="cat-card" id="cat-02" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">02</span>
            <span class="cat-card__name">标签筛选与对照</span>
            <span class="cat-card__count mono">5 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">一级标签下面挂着二级标签，筛选结果可以随时换一组再看，改版前后的对应关系也能就地找到。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">2.01</span><span class="cat-list__txt">一级标签横向切换，不用逐层点开</span></li>
              <li><span class="cat-list__sn mono">2.02</span><span class="cat-list__txt">二级标签精确收窄，落到具体主题上</span></li>
              <li><span class="cat-list__sn mono">2.03</span><span class="cat-list__txt">新旧标签对照查看，改版前的老入口有对应说明</span></li>
              <li><span class="cat-list__sn mono">2.04</span><span class="cat-list__txt">常用标签组合保存，下次直接调用</span></li>
              <li><span class="cat-list__sn mono">2.05</span><span class="cat-list__txt">筛选结果导出成条目清单，方便离线整理</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--amber">标签调整</li>
              <li class="tag tag--aurora">电脑端顺手</li>
            </ul>
          </div>
        </details>

        <details class="cat-card" id="cat-03" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">03</span>
            <span class="cat-card__name">账号与设备衔接</span>
            <span class="cat-card__count mono">5 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">换手机、换电脑、临时借用别人的机器，都能按同一套步骤回到原来的位置。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">3.01</span><span class="cat-list__txt">统一账号，两种设备共用一套登录信息</span></li>
              <li><span class="cat-list__sn mono">3.02</span><span class="cat-list__txt">换设备重新登录指引，按设备类型给出步骤</span></li>
              <li><span class="cat-list__sn mono">3.03</span><span class="cat-list__txt">登录验证流程说明，整个过程平均不到一分钟</span></li>
              <li><span class="cat-list__sn mono">3.04</span><span class="cat-list__txt">已登录设备列表查看，异地登录一眼就能看到</span></li>
              <li><span class="cat-list__sn mono">3.05</span><span class="cat-list__txt">异常登录提醒设置，可选接收方式</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--aurora">换设备</li>
              <li class="tag tag--lime">跨端</li>
            </ul>
          </div>
        </details>

        <details class="cat-card" id="cat-04" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">04</span>
            <span class="cat-card__name">使用记录与回溯</span>
            <span class="cat-card__count mono">5 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">想看的东西翻过就找不回来，是最常见的麻烦。这里把最近半年留下的痕迹按两种维度摊开。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">4.01</span><span class="cat-list__txt">最近 180 天使用记录，按日期倒序展示</span></li>
              <li><span class="cat-list__sn mono">4.02</span><span class="cat-list__txt">按设备筛选，把电脑端和移动端的痕迹分开看</span></li>
              <li><span class="cat-list__sn mono">4.03</span><span class="cat-list__txt">按标签筛选，回看某个主题下走过哪些页面</span></li>
              <li><span class="cat-list__sn mono">4.04</span><span class="cat-list__txt">最近 90 天记录摘要导出，保存成一份清单</span></li>
              <li><span class="cat-list__sn mono">4.05</span><span class="cat-list__txt">记录对不上时的自助排查入口</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--aurora">记录查询</li>
              <li class="tag tag--amber">回溯</li>
            </ul>
          </div>
        </details>

        <details class="cat-card" id="cat-05" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">05</span>
            <span class="cat-card__name">内容更新与订阅</span>
            <span class="cat-card__count mono">5 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">每周有 3–5 篇新内容上线，你可以只订自己跟得上的那几个专栏，不必每篇都看。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">5.01</span><span class="cat-list__txt">每周新内容的更新提醒</span></li>
              <li><span class="cat-list__sn mono">5.02</span><span class="cat-list__txt">7 个主题专栏各自的订阅开关</span></li>
              <li><span class="cat-list__sn mono">5.03</span><span class="cat-list__txt">版本更新日志查阅，改了什么写得清楚</span></li>
              <li><span class="cat-list__sn mono">5.04</span><span class="cat-list__txt">标签调整公告推送，改动前先收到消息</span></li>
              <li><span class="cat-list__sn mono">5.05</span><span class="cat-list__txt">第四季度年度回顾专题提醒</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--aurora">更新提醒</li>
              <li class="tag tag--lime">专栏订阅</li>
            </ul>
          </div>
        </details>

        <details class="cat-card" id="cat-06" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">06</span>
            <span class="cat-card__name">帮助与自助服务</span>
            <span class="cat-card__count mono">5 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">多数问题自己两分钟能解决，剩下的一步就能交到人手上。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">6.01</span><span class="cat-list__txt">换设备登录指引自助查阅</span></li>
              <li><span class="cat-list__sn mono">6.02</span><span class="cat-list__txt">标签变更说明查询，按调整时间排列</span></li>
              <li><span class="cat-list__sn mono">6.03</span><span class="cat-list__txt">使用记录查询与导出帮助</span></li>
              <li><span class="cat-list__sn mono">6.04</span><span class="cat-list__txt">常见问题关键字检索</span></li>
              <li><span class="cat-list__sn mono">6.05</span><span class="cat-list__txt">在线客服接入，工作日 9:00–21:00 有人在</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--aurora">自助</li>
              <li class="tag tag--amber">人工支持</li>
            </ul>
          </div>
        </details>

        <details class="cat-card" id="cat-07" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">07</span>
            <span class="cat-card__name">机构与创作者协作</span>
            <span class="cat-card__count mono">6 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">面向城市文化机构、内容创作者和技术服务方的对接入口，目前跟 18 家机构、12 家服务商保持着长期往来。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">7.01</span><span class="cat-list__txt">城市内容供稿通道登记</span></li>
              <li><span class="cat-list__sn mono">7.02</span><span class="cat-list__txt">专题联合策划需求沟通</span></li>
              <li><span class="cat-list__sn mono">7.03</span><span class="cat-list__txt">技术接口对接咨询</span></li>
              <li><span class="cat-list__sn mono">7.04</span><span class="cat-list__txt">协作进度查询，不用反复追问</span></li>
              <li><span class="cat-list__sn mono">7.05</span><span class="cat-list__txt">素材授权范围说明</span></li>
              <li><span class="cat-list__sn mono">7.06</span><span class="cat-list__txt">长期内容协作关系登记</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--lime">机构协作</li>
              <li class="tag tag--aurora">创作者</li>
            </ul>
          </div>
        </details>

        <details class="cat-card" id="cat-08" data-reveal>
          <summary class="cat-card__head">
            <span class="cat-card__num mono">08</span>
            <span class="cat-card__name">账号与数据管理</span>
            <span class="cat-card__count mono">5 项</span>
            <span class="cat-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="cat-card__body">
            <p class="cat-card__desc">自己名下的登录设备、导出记录和安全设置，都放在个人中心一处处理。</p>
            <ul class="cat-list">
              <li><span class="cat-list__sn mono">8.01</span><span class="cat-list__txt">个人中心资料维护</span></li>
              <li><span class="cat-list__sn mono">8.02</span><span class="cat-list__txt">登录设备管理与移除，陌生设备随时清掉</span></li>
              <li><span class="cat-list__sn mono">8.03</span><span class="cat-list__txt">记录导出任务管理，导出进度可查</span></li>
              <li><span class="cat-list__sn mono">8.04</span><span class="cat-list__txt">账号安全设置与密码修改</span></li>
              <li><span class="cat-list__sn mono">8.05</span><span class="cat-list__txt">隐私相关申请入口</span></li>
            </ul>
            <ul class="cat-tags">
              <li class="tag tag--amber">账号安全</li>
              <li class="tag tag--aurora">数据管理</li>
            </ul>
          </div>
        </details>

      </div>
    </div>
  </section>

  <section class="section pp-desktop" id="desktop">
    <div class="container">
      <header class="section__head">
        <span class="section__index mono">02</span>
        <h2 class="section__title">电脑端站点能做什么</h2>
        <p class="section__lead">KU游官网电脑端用户站点的设计重心放在三件事上：长内容连续阅读、多标签对照、使用记录批量查看。坐得下来、看得进去的那两个小时，交给宽屏更合适。</p>
      </header>

      <div class="pp-desktop__grid">
        <figure class="pp-figure pp-figure--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="宽屏显示器上并列多列内容与标签栏的抽象界面示意，无可识别文字" loading="lazy" decoding="async">
          <figcaption>宽屏下正文与标签栏可以并排，一边对照一边阅读，不用来回切换。</figcaption>
        </figure>

        <div class="pp-desktop__body">
          <ul class="pp-feats">
            <li class="pp-feat">
              <h3>一屏读完一整节</h3>
              <p>章节不打散、不折叠，读完一段直接往下滚。适合一次整理一座城、一条线索的人。</p>
            </li>
            <li class="pp-feat">
              <h3>多组标签摆在一起比</h3>
              <p>几个一级标签可以同屏打开，新旧标签的对应关系也放在同一块区域。改版之后老链接指向哪儿，一看就知道。</p>
            </li>
            <li class="pp-feat">
              <h3>记录一次性摊开</h3>
              <p>最近 180 天的痕迹按日期铺开，再按设备或标签收窄，比在手机上一条条翻快得多。</p>
            </li>
          </ul>

          <div class="pp-spec-wrap">
            <table class="pp-spec">
              <caption class="pp-spec__caption mono">系统与设备要求</caption>
              <thead>
                <tr>
                  <th scope="col">访问方式</th>
                  <th scope="col">系统版本</th>
                  <th scope="col">适合做的事</th>
                  <th scope="col">备注</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>电脑端</td>
                  <td>Windows 10 及以上</td>
                  <td>连续阅读长内容、多标签对照、记录批量查看</td>
                  <td class="pp-spec__note">宽屏下正文与标签栏可并列显示</td>
                </tr>
                <tr>
                  <td>电脑端</td>
                  <td>macOS 12 及以上</td>
                  <td>同样支持长内容连续阅读与记录摘要导出</td>
                  <td class="pp-spec__note">建议用最新版本浏览器打开</td>
                </tr>
                <tr>
                  <td>移动端</td>
                  <td>iOS 14 及以上</td>
                  <td>通勤途中查看记录、接着上次的位置往下看</td>
                  <td class="pp-spec__note">与电脑端共用同一个账号</td>
                </tr>
                <tr>
                  <td>移动端</td>
                  <td>Android 9 及以上</td>
                  <td>碎片时间筛选标签、查看更新提醒</td>
                  <td class="pp-spec__note">与电脑端共用同一个账号</td>
                </tr>
                <tr>
                  <td>移动端</td>
                  <td>主流浏览器 H5 访问</td>
                  <td>免安装直接打开，临时借用设备也方便</td>
                  <td class="pp-spec__note">登录验证平均不到一分钟</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section pp-labels" id="labels">
    <div class="container">
      <header class="section__head">
        <span class="section__index mono">03</span>
        <h2 class="section__title">内容是怎么分类的</h2>
        <p class="section__lead">一级标签 12 个，往下细分出 96 个二级标签。你从哪个入口进来都落在同一套分类上，换个设备也不用重新记住一遍。</p>
      </header>

      <div class="pp-labels__tree">
        <svg class="pp-tree" viewBox="0 0 1200 700" role="img" aria-label="十二个一级标签向下展开为九十六个二级标签的树状结构示意">
          <g class="pp-tree__paths">
            <path d="M100 350 C 190 350, 190 55, 280 55" />
            <path d="M100 350 C 190 350, 190 109, 280 109" />
            <path d="M100 350 C 190 350, 190 162, 280 162" />
            <path d="M100 350 C 190 350, 190 216, 280 216" />
            <path d="M100 350 C 190 350, 190 270, 280 270" />
            <path d="M100 350 C 190 350, 190 323, 280 323" />
            <path d="M100 350 C 190 350, 190 377, 280 377" />
            <path d="M100 350 C 190 350, 190 431, 280 431" />
            <path d="M100 350 C 190 350, 190 484, 280 484" />
            <path d="M100 350 C 190 350, 190 538, 280 538" />
            <path d="M100 350 C 190 350, 190 592, 280 592" />
            <path d="M100 350 C 190 350, 190 645, 280 645" />
          </g>
          <g class="pp-tree__dots">
            <circle cx="100" cy="350" r="9" />
            <circle cx="280" cy="55" r="6" />
            <circle cx="280" cy="109" r="6" />
            <circle cx="280" cy="162" r="6" />
            <circle cx="280" cy="216" r="6" />
            <circle cx="280" cy="270" r="6" />
            <circle cx="280" cy="323" r="6" />
            <circle cx="280" cy="377" r="6" />
            <circle cx="280" cy="431" r="6" />
            <circle cx="280" cy="484" r="6" />
            <circle cx="280" cy="538" r="6" />
            <circle cx="280" cy="592" r="6" />
            <circle cx="280" cy="645" r="6" />
          </g>
          <g class="pp-tree__leaves">
            <line x1="470" y1="55" x2="1100" y2="55" /><circle cx="1112" cy="55" r="4" />
            <line x1="470" y1="109" x2="1100" y2="109" /><circle cx="1112" cy="109" r="4" />
            <line x1="470" y1="162" x2="1100" y2="162" /><circle cx="1112" cy="162" r="4" />
            <line x1="470" y1="216" x2="1100" y2="216" /><circle cx="1112" cy="216" r="4" />
            <line x1="470" y1="270" x2="1100" y2="270" /><circle cx="1112" cy="270" r="4" />
            <line x1="470" y1="323" x2="1100" y2="323" /><circle cx="1112" cy="323" r="4" />
            <line x1="470" y1="377" x2="1100" y2="377" /><circle cx="1112" cy="377" r="4" />
            <line x1="470" y1="431" x2="1100" y2="431" /><circle cx="1112" cy="431" r="4" />
            <line x1="470" y1="484" x2="1100" y2="484" /><circle cx="1112" cy="484" r="4" />
            <line x1="470" y1="538" x2="1100" y2="538" /><circle cx="1112" cy="538" r="4" />
            <line x1="470" y1="592" x2="1100" y2="592" /><circle cx="1112" cy="592" r="4" />
            <line x1="470" y1="645" x2="1100" y2="645" /><circle cx="1112" cy="645" r="4" />
          </g>
          <g class="pp-tree__text">
            <text x="300" y="60">城市地标</text>
            <text x="300" y="114">历史街区</text>
            <text x="300" y="167">建筑美学</text>
            <text x="300" y="221">江河海岸</text>
            <text x="300" y="275">夜间景观</text>
            <text x="300" y="328">交通枢纽</text>
            <text x="300" y="382">公共空间</text>
            <text x="300" y="436">城市更新</text>
            <text x="300" y="489">非遗与手艺</text>
            <text x="300" y="543">美食地图</text>
            <text x="300" y="597">节庆活动</text>
            <text x="300" y="650">年度回顾</text>
          </g>
        </svg>
      </div>

      <div class="pp-labels__body">
        <div class="pp-labels__text">
          <p>一级标签管方向，二级标签管落点。比如从「建筑美学」进去，二级标签会把你带到某个年代、某种结构或者某类公共建筑上，选两三个就能把范围收得刚好。</p>
          <p>刚过去这一年一共做过 3 次分类调整。每次改完都会同步挂出新旧对照说明：原来的标签叫什么、现在归到哪里、老链接会跳到哪儿。你之前收藏的页面不会变成死路。</p>
        </div>
        <figure class="pp-figure">
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="树状层级图形，主干分出十二条支线，支线上延伸出细密的小节点" loading="lazy" decoding="async">
          <figcaption>一级决定方向，二级决定落点，越往下越接近你想找的那一页。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section pp-steps-section" id="steps">
    <div class="container">
      <header class="section__head">
        <span class="section__index mono">04</span>
        <h2 class="section__title">第一次使用，四步走完</h2>
        <p class="section__lead">不用先看完说明再动手。按这个顺序来，多数人第一次就能用自己的标签看到想看的内容。</p>
      </header>

      <figure class="pp-figure pp-figure--band">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="四个等距排列的步骤图形，由细线连接，节点颜色由暖橙过渡到极光青" loading="lazy" decoding="async">
        <figcaption>从注册到看到记录，四步之间没有需要等待的环节。</figcaption>
      </figure>

      <ol class="pp-steps">
        <li class="pp-step" data-reveal>
          <span class="pp-step__num mono">STEP 01</span>
          <h3 class="pp-step__title">注册账号</h3>
          <p>一个手机号或邮箱就够了，不用先填一整套资料。注册完账号在两种设备上通用。</p>
        </li>
        <li class="pp-step" data-reveal>
          <span class="pp-step__num mono">STEP 02</span>
          <h3 class="pp-step__title">登录并完成验证</h3>
          <p>在常用设备上登录一次，之后换设备重新登录时按页面提示操作即可，整个验证过程平均不到一分钟。</p>
        </li>
        <li class="pp-step" data-reveal>
          <span class="pp-step__num mono">STEP 03</span>
          <h3 class="pp-step__title">挑出常看的标签</h3>
          <p>先从 12 个一级标签里选几个方向，再往下收窄到二级标签。拿不准就先随便点，看两篇再回来调整。</p>
        </li>
        <li class="pp-step" data-reveal>
          <span class="pp-step__num mono">STEP 04</span>
          <h3 class="pp-step__title">随时回看使用记录</h3>
          <p>登录后就能看到最近 180 天的使用记录，按日期倒序排列，支持按设备和标签两级筛选，90 天内的摘要还可以导出。</p>
        </li>
      </ol>

      <p class="pp-steps__tail">中间卡住了也没关系，<a href="/faq/">帮助中心</a>里换设备登录、标签变更、记录查询三件事都写成了分步说明。</p>
    </div>
  </section>

  <section class="section pp-support" id="support">
    <div class="container">
      <header class="section__head">
        <span class="section__index mono">05</span>
        <h2 class="section__title">遇到问题，找得到人</h2>
        <p class="section__lead">客服团队 46 人，工作日 9:00–21:00 在线。邮件咨询在 12 小时内给出首次响应。</p>
      </header>

      <div class="pp-support__grid">
        <ul class="pp-stats">
          <li class="pp-stat">
            <span class="pp-stat__num mono">46</span>
            <span class="pp-stat__label">客服团队人数</span>
          </li>
          <li class="pp-stat">
            <span class="pp-stat__num mono">9:00–21:00</span>
            <span class="pp-stat__label">工作日在线时段</span>
          </li>
          <li class="pp-stat">
            <span class="pp-stat__num mono">12 小时</span>
            <span class="pp-stat__label">邮件首次响应</span>
          </li>
        </ul>

        <div class="pp-support__body">
          <h3>三种找法，按紧急程度挑</h3>
          <ul class="pp-contact">
            <li><span class="pp-contact__key mono">在线</span><span class="pp-contact__val">工作日 9:00–21:00 接入在线客服，登录和设备相关的问题当场问</span></li>
            <li><span class="pp-contact__key mono">邮件</span><span class="pp-contact__val">发送至 support@kuyou-landmark.com.cn，用于电脑端与移动端登录及分类标签变更相关咨询，12 小时内首次响应</span></li>
            <li><span class="pp-contact__key mono">电话</span><span class="pp-contact__val">400-8956-5879，工作日内接听</span></li>
          </ul>

          <h3>三件事可以先自己看</h3>
          <ul class="pp-self">
            <li><a href="/faq/">换设备登录指引</a></li>
            <li><a href="/faq/">标签变更前后对照说明</a></li>
            <li><a href="/faq/">使用记录查询与导出说明</a></li>
          </ul>
          <p class="pp-support__note">内容层面的合作、供稿和技术对接，走 <a href="/cooperation/">合作洽谈</a> 更快，那边有专门的对接同事。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section pp-scenes" id="scenes">
    <div class="container">
      <header class="section__head">
        <span class="section__index mono">06</span>
        <h2 class="section__title">三种常见用法，对应不同组合</h2>
        <p class="section__lead">同样是看内容，通勤路上和坐在办公室里需要的功能并不一样。下面这三种搭配，覆盖了大部分人的日常。</p>
      </header>

      <div class="pp-scenes__grid">
        <article class="pp-scene" data-reveal>
          <span class="pp-scene__idx mono">场景 A</span>
          <h3>通勤路上翻记录</h3>
          <p class="pp-scene__dev">移动端 · iOS 14 及以上 / Android 9 及以上</p>
          <ul class="pp-scene__list">
            <li>最近 180 天使用记录</li>
            <li>按标签筛选</li>
            <li>阅读进度接着上次</li>
          </ul>
          <p class="pp-scene__gain">十几分钟的车程，足够把昨天没看完的一节收尾。</p>
        </article>

        <article class="pp-scene" data-reveal>
          <span class="pp-scene__idx mono">场景 B</span>
          <h3>办公室里成批整理标签</h3>
          <p class="pp-scene__dev">电脑端 · Windows 10 及以上 / macOS 12 及以上</p>
          <ul class="pp-scene__list">
            <li>一级标签同屏对照</li>
            <li>新旧标签对应查看</li>
            <li>筛选结果导出清单</li>
          </ul>
          <p class="pp-scene__gain">把手上攒的一批线索一次性归类，存成清单下次直接用。</p>
        </article>

        <article class="pp-scene" data-reveal>
          <span class="pp-scene__idx mono">场景 C</span>
          <h3>换设备接着看</h3>
          <p class="pp-scene__dev">两种设备交替 · 共用同一账号</p>
          <ul class="pp-scene__list">
            <li>统一账号登录</li>
            <li>换设备重新登录指引</li>
            <li>标签与书签同步延续</li>
          </ul>
          <p class="pp-scene__gain">白天在电脑上看到一半，晚上换手机接着往下走，位置不会丢。</p>
        </article>
      </div>

      <figure class="pp-figure pp-figure--band">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面设备与手机的并排示意，各自周围环绕不同功能图标，示意场景差异" loading="lazy" decoding="async">
        <figcaption>两种设备各管一段：宽屏负责整理，手机负责续看。</figcaption>
      </figure>

      <div class="pp-outro">
        <p>清单里还有没展开的细节，比如某一类条目具体怎么用、什么时候会更新，这些放在动态与专栏里陆续写出来。</p>
        <div class="pp-outro__links">
          <a class="btn btn--cta" href="/blog/">看标签变更与更新说明</a>
          <a class="btn btn--ghost" href="/cooperation/">聊内容与技术协作</a>
          <a class="btn btn--ghost" href="/">回到首页</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-products {
  --pp-gap: clamp(14px, 2vw, 26px);
  --pp-line: rgba(28, 69, 96, 0.85);
  --pp-line-soft: rgba(28, 69, 96, 0.45);
  display: block;
  background: var(--ink);
  color: var(--white);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero {
  position: relative;
  padding: clamp(44px, 7vw, 92px) 0 clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--pp-line);
  background:
    linear-gradient(180deg, rgba(10, 58, 71, 0.55) 0%, rgba(6, 23, 38, 0) 62%),
    var(--ink);
  overflow: hidden;
}

.page-products .pp-hero .crumbs {
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-products .pp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.page-products .eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora);
}

.page-products .pp-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(36px, 6.4vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-products .pp-hero__lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.78;
  color: var(--muted);
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 20px;
}

.page-products .pp-hero__meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--aurora-soft);
}

.page-products .pp-hero__visual {
  position: relative;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--pp-line);
  background:
    linear-gradient(155deg, rgba(47, 227, 198, 0.14) 0%, rgba(10, 58, 71, 0.75) 48%, rgba(6, 23, 38, 0.96) 100%),
    var(--panel);
  overflow: hidden;
}

.page-products .pp-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(28, 69, 96, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 69, 96, 0.45) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.page-products .pp-bars {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

.page-products .pp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-products .pp-bar__idx {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lime);
}

.page-products .pp-bar__line {
  display: block;
  height: 5px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--aurora) 0%, rgba(47, 227, 198, 0.05) 100%);
}

.page-products .pp-bar:nth-child(1) .pp-bar__line { width: 90%; }
.page-products .pp-bar:nth-child(2) .pp-bar__line { width: 72%; }
.page-products .pp-bar:nth-child(3) .pp-bar__line { width: 82%; }
.page-products .pp-bar:nth-child(4) .pp-bar__line { width: 58%; }
.page-products .pp-bar:nth-child(5) .pp-bar__line { width: 86%; }
.page-products .pp-bar:nth-child(6) .pp-bar__line { width: 66%; }
.page-products .pp-bar:nth-child(7) .pp-bar__line { width: 78%; }
.page-products .pp-bar:nth-child(8) .pp-bar__line { width: 52%; }

/* ---------- 章节通用 ---------- */
.page-products .section {
  padding: clamp(48px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-products .section__head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-products .section__index {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lime);
}

.page-products .section__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-products .section__lead {
  margin: 0;
  max-width: 66ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.78;
  color: var(--muted);
}

/* ---------- 图片容器 ---------- */
.page-products .pp-figure {
  margin: 0;
  border: 1px solid var(--pp-line);
  background: var(--panel);
  overflow: hidden;
}

.page-products .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .pp-figure figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--pp-line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 01 服务清单 ---------- */
.page-products .pp-catalog__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-products .pp-catalog__note p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pp-catalog__note p:last-child {
  margin-bottom: 0;
}

.page-products .pp-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 clamp(30px, 4vw, 52px);
  border: 1px solid var(--pp-line);
  background: var(--pp-line);
}

.page-products .pp-strip__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 106px;
  padding: 16px 14px 18px;
  background: var(--ink);
  border-top: 3px solid var(--aurora);
  color: var(--white);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .pp-strip__item:nth-child(2) { border-top-color: var(--amber); }
.page-products .pp-strip__item:nth-child(3) { border-top-color: var(--lime); }
.page-products .pp-strip__item:nth-child(4) { border-top-color: var(--aurora-soft); }
.page-products .pp-strip__item:nth-child(6) { border-top-color: var(--amber); }
.page-products .pp-strip__item:nth-child(7) { border-top-color: var(--lime); }
.page-products .pp-strip__item:nth-child(8) { border-top-color: var(--aurora-soft); }

.page-products .pp-strip__item:hover,
.page-products .pp-strip__item:focus-visible {
  transform: translateY(-4px);
  background: var(--panel);
  border-top-color: var(--aurora);
  outline: none;
}

.page-products .pp-strip__item:focus-visible {
  box-shadow: 0 0 0 2px var(--lime);
}

.page-products .pp-strip__idx {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lime);
}

.page-products .pp-strip__name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.page-products .pp-strip__n {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--muted);
}

.page-products .pp-cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-gap);
}

.page-products .cat-card {
  border: 1px solid var(--pp-line);
  background: linear-gradient(180deg, rgba(13, 42, 68, 0.9) 0%, rgba(6, 23, 38, 0.96) 100%);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .cat-card:hover {
  border-color: var(--aurora);
  transform: translateY(-4px);
}

.page-products .cat-card[open] {
  border-color: var(--aurora);
}

.page-products .cat-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.page-products .cat-card__head::-webkit-details-marker {
  display: none;
}

.page-products .cat-card[open] .cat-card__head {
  border-bottom-color: var(--pp-line);
}

.page-products .cat-card__num {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--lime);
}

.page-products .cat-card__name {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}

.page-products .cat-card__count {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--muted);
}

.page-products .cat-card__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--aurora);
  border-bottom: 2px solid var(--aurora);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.page-products .cat-card[open] .cat-card__toggle {
  transform: rotate(-135deg);
}

.page-products .cat-card__body {
  padding: 16px 18px 22px;
}

.page-products .cat-card__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

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

.page-products .cat-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding-bottom: 9px;
  border-bottom: 1px dotted var(--pp-line);
  font-size: 14px;
  line-height: 1.62;
  color: var(--white);
}

.page-products .cat-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .cat-list__sn {
  font-size: 11.5px;
  color: var(--muted);
}

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

.page-products .cat-tags .tag {
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/* ---------- 02 电脑端 ---------- */
.page-products .pp-desktop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
}

.page-products .pp-feats {
  list-style: none;
  margin: 0 0 clamp(24px, 3vw, 38px);
  padding: 0;
  display: grid;
  gap: 20px;
}

.page-products .pp-feat {
  padding-left: 16px;
  border-left: 2px solid var(--aurora);
}

.page-products .pp-feat h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.page-products .pp-feat p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-spec-wrap {
  overflow-x: auto;
  border: 1px solid var(--pp-line);
}

.page-products .pp-spec {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.page-products .pp-spec__caption {
  caption-side: top;
  padding: 12px 14px;
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--lime);
  background: var(--panel);
  border-bottom: 1px solid var(--pp-line);
}

.page-products .pp-spec th,
.page-products .pp-spec td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pp-line);
  line-height: 1.6;
}

.page-products .pp-spec thead th {
  font-weight: 500;
  color: var(--aurora-soft);
  background: var(--panel);
  white-space: nowrap;
}

.page-products .pp-spec tbody tr:last-child td {
  border-bottom: none;
}

.page-products .pp-spec td {
  color: var(--white);
}

.page-products .pp-spec__note {
  color: var(--muted);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-products .pp-spec tbody tr:hover,
.page-products .pp-spec tbody tr:focus-within {
  background: rgba(13, 42, 68, 0.7);
}

.page-products .pp-spec tbody tr:hover .pp-spec__note,
.page-products .pp-spec tbody tr:focus-within .pp-spec__note {
  opacity: 1;
  color: var(--aurora-soft);
}

/* ---------- 03 标签体系 ---------- */
.page-products .pp-labels__tree {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--pp-line);
  background:
    linear-gradient(180deg, rgba(10, 58, 71, 0.5) 0%, rgba(6, 23, 38, 0.9) 100%),
    var(--panel);
  overflow-x: auto;
}

.page-products .pp-tree {
  display: block;
  width: 100%;
  min-width: 700px;
  height: auto;
}

.page-products .pp-tree__paths path {
  fill: none;
  stroke: var(--grid);
  stroke-width: 1.5;
}

.page-products .pp-tree__dots circle {
  fill: var(--aurora);
}

.page-products .pp-tree__leaves line {
  stroke: var(--aurora-soft);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  opacity: 0.5;
}

.page-products .pp-tree__leaves circle {
  fill: var(--aurora-soft);
}

.page-products .pp-tree__text text {
  fill: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
}

.page-products .pp-labels__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
}

.page-products .pp-labels__text p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pp-labels__text p:last-child {
  margin-bottom: 0;
}

/* ---------- 04 四步流程 ---------- */
.page-products .pp-figure--band {
  margin-bottom: clamp(28px, 4vw, 46px);
}

.page-products .pp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-products .pp-step {
  position: relative;
  padding: 22px 16px 0 0;
  border-top: 2px solid var(--pp-line);
}

.page-products .pp-step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--amber);
}

.page-products .pp-step:nth-child(2)::before { background: var(--lime); }
.page-products .pp-step:nth-child(3)::before { background: var(--aurora-soft); }
.page-products .pp-step:nth-child(4)::before { background: var(--aurora); }

.page-products .pp-step__num {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .pp-step__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.page-products .pp-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-steps__tail {
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-steps__tail a {
  color: var(--aurora);
  text-decoration: none;
  border-bottom: 1px solid var(--aurora);
}

.page-products .pp-steps__tail a:hover,
.page-products .pp-steps__tail a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
  outline: none;
}

/* ---------- 05 支持 ---------- */
.page-products .pp-support__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

.page-products .pp-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--pp-line);
  border: 1px solid var(--pp-line);
}

.page-products .pp-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px;
  background: var(--panel);
}

.page-products .pp-stat__num {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.02em;
  color: var(--aurora);
}

.page-products .pp-stat__label {
  font-size: 12.5px;
  color: var(--muted);
}

.page-products .pp-support__body h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--white);
}

.page-products .pp-support__body h3 + .pp-contact,
.page-products .pp-support__body h3 + .pp-self {
  margin-bottom: clamp(26px, 3vw, 38px);
}

.page-products .pp-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pp-contact li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pp-line);
}

.page-products .pp-contact li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .pp-contact__key {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--lime);
  padding-top: 3px;
}

.page-products .pp-contact__val {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-self {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pp-self li a {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--pp-line);
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-size: 14.5px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-products .pp-self li a:hover,
.page-products .pp-self li a:focus-visible {
  transform: translateY(-4px);
  border-color: var(--aurora);
  background: var(--panel);
  outline: none;
}

.page-products .pp-self li a:focus-visible {
  box-shadow: 0 0 0 2px var(--lime);
}

.page-products .pp-support__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pp-support__note a {
  color: var(--aurora);
  text-decoration: none;
  border-bottom: 1px solid var(--aurora);
}

.page-products .pp-support__note a:hover,
.page-products .pp-support__note a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
  outline: none;
}

/* ---------- 06 场景 ---------- */
.page-products .pp-scenes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-gap);
  margin-bottom: clamp(30px, 4vw, 50px);
}

.page-products .pp-scene {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px;
  border: 1px solid var(--pp-line);
  border-left: 3px solid var(--aurora);
  background: linear-gradient(180deg, rgba(13, 42, 68, 0.85) 0%, rgba(6, 23, 38, 0.96) 100%);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .pp-scene:nth-child(2) {
  border-left-color: var(--amber);
}

.page-products .pp-scene:nth-child(3) {
  border-left-color: var(--lime);
}

.page-products .pp-scene:hover {
  transform: translateY(-4px);
  border-color: var(--aurora);
}

.page-products .pp-scene__idx {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .pp-scene h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.page-products .pp-scene__dev {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--aurora-soft);
}

.page-products .pp-scene__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .pp-scene__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.page-products .pp-scene__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1px;
  background: var(--aurora);
}

.page-products .pp-scene__gain {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--pp-line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--white);
}

.page-products .pp-outro {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--pp-line);
  background:
    linear-gradient(120deg, rgba(10, 58, 71, 0.7) 0%, rgba(6, 23, 38, 0.95) 70%),
    var(--panel);
}

.page-products .pp-outro p {
  margin: 0 0 22px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--muted);
}

.page-products .pp-outro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .pp-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

  .page-products .pp-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pp-desktop__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }

  .page-products .pp-labels__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-products .pp-support__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .page-products .pp-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .page-products .pp-step {
    padding: 24px 20px 0 0;
  }

  .page-products .pp-scenes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-products .pp-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .page-products .pp-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .page-products .pp-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-products .pp-cats > .cat-card:nth-child(3n + 2) {
    margin-top: 24px;
  }

  .page-products .pp-cats > .cat-card:nth-child(3n) {
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-strip__item,
  .page-products .cat-card,
  .page-products .pp-scene,
  .page-products .pp-self li a,
  .page-products .cat-card__toggle {
    transition: none;
  }

  .page-products .pp-strip__item:hover,
  .page-products .pp-strip__item:focus-visible,
  .page-products .cat-card:hover,
  .page-products .pp-scene:hover,
  .page-products .pp-self li a:hover,
  .page-products .pp-self li a:focus-visible {
    transform: none;
  }
}