.page-products {
  --svc-warm-1: #FFF6E8;
  --svc-warm-2: #FFE2C0;
  --svc-cool-1: #E9F0F5;
  --svc-cool-2: #BCCDDB;
  --svc-deep: #22323D;
  padding-bottom: var(--gap-xl);
}

.page-products .svc-hero {
  position: relative;
  margin: 0 0 var(--gap-l);
  padding: var(--gap-l) var(--gap-m) var(--gap-xl);
  background: linear-gradient(155deg, var(--white) 0%, var(--paper) 52%, #FBE3C4 100%);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.page-products .svc-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -130px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center, rgba(242, 98, 27, 0.24), transparent 66%);
  transform: rotate(-15deg);
  pointer-events: none;
}

@media (min-width: 720px) {
  .page-products .svc-hero {
    padding: var(--gap-xl) var(--gap-l) calc(var(--gap-xl) + .5rem);
  }
}

.page-products .svc-hero__eyebrow {
  margin: 0 0 var(--gap-m);
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--orange);
}

.page-products .svc-hero__title {
  margin: 0 0 var(--gap-m);
  max-width: 22ch;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.8rem, 6.2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  text-shadow: 2px 2px 0 rgba(242, 98, 27, 0.18);
}

.page-products .svc-hero__lead {
  margin: 0 0 var(--gap-l);
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--ink-2);
}

.page-products .svc-hero__caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  position: relative;
  z-index: 1;
}

.page-products .svc-spy {
  margin: 0 0 var(--gap-l);
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: thin;
}

.page-products .svc-spy .tpg-spy__link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 控制台面板 */
.page-products .svc-console {
  margin-top: var(--gap-l);
  padding: var(--gap-m);
  background: var(--white);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-deep);
}

@media (min-width: 720px) {
  .page-products .svc-console {
    padding: var(--gap-l);
  }
}

.page-products .svc-console__banner {
  margin-bottom: var(--gap-l);
}

.page-products .svc-console__rail {
  display: grid;
  gap: var(--gap-l);
}

@media (min-width: 900px) {
  .page-products .svc-console__rail {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-l);
    align-items: start;
  }
}

.page-products .svc-console__colhead {
  margin: 0 0 var(--gap-m);
  padding-bottom: var(--gap-s);
  border-bottom: 2px dashed var(--sand);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.page-products .svc-console__col--warm .svc-console__colhead {
  color: var(--orange);
}

.page-products .svc-console__col--cool .svc-console__colhead {
  color: var(--steel);
}

/* 服务卡 */
.page-products .svc-card {
  margin: 0 0 var(--gap-m);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.page-products .svc-card:last-child {
  margin-bottom: 0;
}

.page-products .svc-card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-m);
  cursor: pointer;
  list-style: none;
}

.page-products .svc-card > summary::-webkit-details-marker {
  display: none;
}

.page-products .svc-card--warm {
  background: linear-gradient(165deg, var(--svc-warm-1), var(--svc-warm-2));
  box-shadow: var(--shadow-card);
}

.page-products .svc-card--warm[open] {
  box-shadow: 0 0 0 3px rgba(255, 176, 32, .5), var(--shadow-deep);
  transform: translateY(-2px);
}

.page-products .svc-card--warm.svc-card--cyan[open] {
  box-shadow: 0 0 0 3px rgba(47, 211, 198, .65), var(--shadow-deep);
}

.page-products .svc-card--cool {
  background: linear-gradient(170deg, var(--steel), var(--svc-deep));
  color: var(--white);
  box-shadow: 4px 4px 0 0 var(--svc-deep);
}

.page-products .svc-card--cool[open] {
  box-shadow: 0 0 0 3px rgba(124, 147, 166, .55), 5px 5px 0 0 var(--svc-deep);
  transform: translateY(-2px);
}

.page-products .svc-card__idx {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-s);
  background: var(--ink-2);
  color: var(--amber);
  font-size: .82rem;
  font-weight: 700;
}

.page-products .svc-card__name {
  flex: 1 1 auto;
  min-width: 7ch;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.3;
}

.page-products .svc-card--cool .svc-card__name {
  color: var(--white);
}

.page-products .svc-card--cool .svc-card__idx {
  background: var(--white);
  color: var(--steel);
}

.page-products .svc-card--cool .tpg-capsule {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .35);
  color: var(--white);
}

.page-products .svc-card--cool .tpg-capsule__value {
  color: var(--amber);
}

.page-products .svc-card__open {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--red);
  border-bottom: 2px solid currentColor;
}

.page-products .svc-card__open::after {
  content: "展开";
}

.page-products .svc-card[open] .svc-card__open::after {
  content: "收起";
}

.page-products .svc-card--cool .svc-card__open {
  color: var(--cyan);
}

.page-products .svc-card__body {
  padding: 0 var(--gap-m) var(--gap-m);
  border-top: 2px dashed rgba(42, 31, 23, .18);
}

.page-products .svc-card--cool .svc-card__body {
  border-top-color: rgba(255, 255, 255, .25);
}

/* 步骤条 */
.page-products .svc-steps {
  counter-reset: svcstep;
  display: grid;
  gap: var(--gap-s);
  margin: var(--gap-m) 0;
  padding: 0;
  list-style: none;
}

.page-products .svc-steps li {
  counter-increment: svcstep;
  position: relative;
  padding-left: 2.1rem;
  font-size: .94rem;
  line-height: 1.72;
}

.page-products .svc-steps li::before {
  content: counter(svcstep);
  position: absolute;
  left: 0;
  top: .15em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
}

.page-products .svc-card--cool .svc-steps li {
  color: rgba(255, 255, 255, .9);
}

.page-products .svc-card--cool .svc-steps li::before {
  background: var(--white);
  color: var(--steel);
}

.page-products .svc-steps--lg {
  margin-top: var(--gap-l);
  gap: var(--gap-m);
}

.page-products .svc-steps--lg li {
  padding-left: 2.6rem;
  font-size: 1rem;
  background: rgba(255, 255, 255, .74);
  border-radius: var(--radius-m);
  padding-top: var(--gap-s);
  padding-bottom: var(--gap-s);
  padding-right: var(--gap-m);
  border: 1.5px solid rgba(74, 96, 114, .35);
}

.page-products .svc-steps--lg li::before {
  left: .7rem;
  top: calc(50% - .78rem);
  width: 1.6rem;
  height: 1.6rem;
  background: var(--steel);
  color: var(--white);
}

/* 冷暖分区 */
.page-products .svc-zone {
  margin-top: var(--gap-xl);
  padding: var(--gap-l) var(--gap-m);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-xl);
}

@media (min-width: 720px) {
  .page-products .svc-zone {
    padding: var(--gap-xl) var(--gap-l);
  }
}

.page-products .svc-zone--warm {
  background: linear-gradient(150deg, var(--svc-warm-1) 0%, #FDE6CB 48%, #FFD6AB 100%);
  box-shadow: var(--shadow-card);
}

.page-products .svc-zone--flat {
  margin-top: var(--gap-l);
  box-shadow: none;
}

.page-products .svc-zone--cool {
  background: linear-gradient(150deg, var(--svc-cool-1) 0%, #CFDCE6 58%, var(--svc-cool-2) 100%);
  box-shadow: 4px 4px 0 0 var(--svc-deep);
}

.page-products .svc-zone .tpg-chapter__title {
  color: var(--ink);
}

.page-products .svc-zone .tpg-lead {
  color: var(--ink-2);
}

/* 表格 */
.page-products .svc-table-wrap {
  margin-top: var(--gap-l);
  overflow-x: auto;
  background: var(--white);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-m);
}

.page-products .svc-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: .93rem;
}

.page-products .svc-table caption {
  caption-side: top;
  text-align: left;
  padding: .7rem var(--gap-m);
  background: var(--sand);
  border-bottom: 2px solid var(--ink-2);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-2);
}

.page-products .svc-table th,
.page-products .svc-table td {
  padding: .72rem var(--gap-m);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dashed var(--sand);
}

.page-products .svc-table thead th {
  background: var(--ink-2);
  color: var(--paper);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-bottom: none;
}

.page-products .svc-table tbody tr:nth-child(even) {
  background: #FCF7EE;
}

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

.page-products .svc-note,
.page-products .svc-copy {
  margin: var(--gap-l) 0 0;
  max-width: 64ch;
  font-size: .96rem;
  line-height: 1.78;
  color: var(--ink-2);
}

/* 图文混排 */
.page-products .svc-area {
  display: grid;
  gap: var(--gap-l);
  margin-top: var(--gap-m);
}

@media (min-width: 900px) {
  .page-products .svc-area {
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    align-items: start;
    gap: var(--gap-xl);
  }
}

.page-products .svc-area__aside {
  margin: 0;
}

/* 订阅三卡 */
.page-products .svc-sub-grid {
  display: grid;
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}

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

.page-products .svc-sub {
  padding: var(--gap-m);
  background: var(--white);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-m);
  box-shadow: 3px 3px 0 0 var(--ink-2);
}

.page-products .svc-sub__k {
  display: inline-block;
  margin-bottom: .45rem;
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--orange);
}

.page-products .svc-sub__t {
  margin: 0 0 .35rem;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--ink);
}

.page-products .svc-sub__d {
  margin: 0;
  font-size: .9rem;
  line-height: 1.72;
  color: var(--ink-2);
}

/* 检索维度 */
.page-products .svc-filters {
  display: grid;
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}

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

.page-products .svc-filter {
  padding: var(--gap-m);
  background: rgba(255, 255, 255, .78);
  border: 2px solid var(--steel);
  border-radius: var(--radius-l);
}

.page-products .svc-filter__label {
  display: block;
  margin-bottom: var(--gap-s);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--steel);
}

.page-products .svc-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.page-products .svc-chip {
  display: inline-block;
  padding: .28rem .68rem;
  border: 1.5px solid var(--mist);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--steel);
  font-size: .84rem;
  line-height: 1.5;
}

.page-products .svc-chip--on {
  background: var(--steel);
  border-color: var(--ink-2);
  color: var(--white);
  font-weight: 700;
}

/* 条目列表 */
.page-products .svc-log {
  display: grid;
  gap: var(--gap-s);
  margin: var(--gap-l) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .svc-log li {
  display: grid;
  gap: .2rem;
  padding: var(--gap-s) var(--gap-m);
  background: rgba(255, 255, 255, .8);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.page-products .svc-log__t {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--steel);
}

.page-products .svc-log__d {
  font-size: .94rem;
  line-height: 1.72;
  color: var(--ink-2);
}

/* 数据面板 */
.page-products .svc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-s);
  margin-top: var(--gap-l);
}

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

.page-products .svc-stat {
  padding: var(--gap-m);
  background: var(--paper);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-m);
}

.page-products .svc-stat__n {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--orange);
}

.page-products .svc-stat__l {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* 按钮行 */
.page-products .svc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  margin: var(--gap-l) 0 0;
}

/* 结尾 */
.page-products .svc-next {
  margin-top: var(--gap-xl);
  padding: var(--gap-l) var(--gap-m);
  background: var(--ink);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-deep);
}

@media (min-width: 720px) {
  .page-products .svc-next {
    padding: var(--gap-xl) var(--gap-l);
  }
}

.page-products .svc-next__title {
  margin: 0 0 var(--gap-s);
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.3rem, 4.4vw, 1.8rem);
  line-height: 1.28;
  color: var(--white);
}

.page-products .svc-next__text {
  margin: 0 0 var(--gap-l);
  max-width: 60ch;
  font-size: .98rem;
  line-height: 1.78;
  color: #EFE4D2;
}

.page-products .svc-next__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
}

/* 图片响应式兜底 */
.page-products .tpg-figure__media img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

@media (min-width: 900px) {
  .page-products .svc-open-figure .tpg-figure__media img,
  .page-products .svc-timeline-figure .tpg-figure__media img {
    max-height: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .svc-card,
  .page-products .svc-card[open] {
    transition: none;
    transform: none;
  }
}