.page-products{
  --svc-ink-soft:#4A5262;
  --svc-radius:14px;
  --svc-gap:clamp(32px,5vw,60px);
}

.page-products [id]{ scroll-margin-top:88px; }

.page-products .svc-body{ min-width:0; padding-bottom:clamp(36px,6vw,72px); }

.page-products .rail-note{
  margin:18px 0 0;
  font-size:12.5px;
  line-height:1.75;
  color:var(--svc-ink-soft);
  padding-top:14px;
  border-top:1px solid var(--warm);
}

/* 面包屑 */
.page-products .breadcrumb{ margin:16px 0 2px; font-size:13px; }
.page-products .breadcrumb ol{ display:flex; flex-wrap:wrap; gap:0; list-style:none; margin:0; padding:0; }
.page-products .breadcrumb li{ display:flex; align-items:center; }
.page-products .breadcrumb li + li::before{ content:"/"; margin:0 8px; color:var(--warm); }
.page-products .breadcrumb a{ color:var(--indigo); text-decoration:none; }
.page-products .breadcrumb a:hover{ text-decoration:underline; }
.page-products .breadcrumb [aria-current]{ color:var(--svc-ink-soft); }

/* 首屏 */
.page-products .svc-hero{
  position:relative;
  margin-top:16px;
  padding:clamp(26px,4.6vw,52px);
  border-radius:var(--svc-radius);
  overflow:hidden;
  color:var(--paper);
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(79,143,123,.34), transparent 58%),
    linear-gradient(158deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  box-shadow:var(--shadow);
}
.page-products .svc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(247,242,232,.15) 1px, transparent 1px);
  background-size:16px 16px;
  opacity:.5;
  pointer-events:none;
}
.page-products .svc-hero > *{ position:relative; z-index:1; }
.page-products .svc-hero .eyebrow{
  margin:0 0 12px;
  color:var(--amber-light);
  letter-spacing:.16em;
}
.page-products .svc-hero h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(30px,6vw,54px);
  line-height:1.12;
  letter-spacing:-.02em;
}
.page-products .svc-lede{
  margin:16px 0 0;
  max-width:62ch;
  font-family:var(--font-body);
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.85;
  color:rgba(247,242,232,.86);
}
.page-products .svc-stats{
  list-style:none;
  margin:clamp(20px,3vw,30px) 0 0;
  padding:1px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  background:rgba(247,242,232,.2);
  border-radius:10px;
  overflow:hidden;
}
.page-products .svc-stats li{
  background:rgba(17,28,51,.52);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.page-products .stat-num{
  font-family:var(--font-mono);
  font-size:clamp(20px,2.6vw,26px);
  font-weight:700;
  color:var(--amber-light);
  line-height:1;
}
.page-products .stat-label{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(247,242,232,.72);
}

/* 章节通用 */
.page-products .svc-section{ padding-top:var(--svc-gap); }
.page-products .section-head{ margin-bottom:20px; }
.page-products .svc-section .eyebrow{
  margin:0 0 10px;
  color:var(--amber-deep);
  letter-spacing:.16em;
}
.page-products .svc-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px,3.4vw,32px);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--indigo);
}
.page-products .svc-intro{
  margin:12px 0 0;
  max-width:66ch;
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.85;
  color:var(--svc-ink-soft);
}

/* 服务分类 */
.page-products .cat-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.page-products .cat-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px;
  border:1px solid var(--warm);
  border-radius:var(--svc-radius);
  background:var(--paper);
  color:inherit;
  text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.page-products .cat-card:hover,
.page-products .cat-card:focus-visible{
  border-color:var(--amber);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.page-products .cat-no{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--amber-deep);
  letter-spacing:.08em;
}
.page-products .cat-card h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  color:var(--indigo);
}
.page-products .cat-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--svc-ink-soft);
}
.page-products .cat-count{
  align-self:flex-start;
  margin-top:2px;
  padding:3px 10px;
  border-radius:999px;
  font-family:var(--font-display);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--teal);
  background:rgba(79,143,123,.12);
  border:1px solid rgba(79,143,123,.32);
}

/* 图片 */
.page-products .svc-figure{ margin:20px 0 0; }
.page-products .svc-figure--flush{ margin-top:0; }
.page-products .svc-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
  background:linear-gradient(150deg, var(--indigo), var(--teal));
}
.page-products .media-caption{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--svc-ink-soft);
}

/* 价格筛选标签 */
.page-products .price-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
.page-products .price-filter a{
  display:inline-block;
  padding:7px 13px;
  border:1px solid var(--warm);
  border-radius:999px;
  background:var(--paper);
  color:var(--indigo);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .2s ease, border-color .2s ease;
}
.page-products .price-filter a:hover,
.page-products .price-filter a:focus-visible{
  background:var(--amber-light);
  border-color:var(--amber);
}

/* 价格表 */
.page-products .svc-price{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-size:14.5px;
  background:var(--paper);
}
.page-products .svc-price caption{
  caption-side:bottom;
  padding-top:12px;
  text-align:left;
  font-size:12.5px;
  line-height:1.7;
  color:var(--svc-ink-soft);
}
.page-products .svc-price thead th{
  position:sticky;
  top:0;
  z-index:3;
  padding:11px 12px;
  text-align:left;
  white-space:nowrap;
  background:var(--indigo);
  color:var(--paper);
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
}
.page-products .svc-price thead th:last-child{ text-align:right; }
.page-products .svc-price td{
  padding:11px 12px;
  border-bottom:1px solid rgba(216,208,194,.72);
  vertical-align:top;
  line-height:1.65;
  color:var(--ink);
  transition:background-color .16s ease;
}
.page-products .svc-price tbody tr:not(.grp) th{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--paper);
  transition:background-color .16s ease;
}
.page-products .svc-price tbody tr:not(.grp):hover td{ background:rgba(242,196,109,.24); }
.page-products .svc-price tbody tr:not(.grp):hover th.c-no{ background:var(--amber-light); }

.page-products .svc-price tr.grp th{
  padding:10px 12px;
  text-align:left;
  background:var(--paper-dim);
  color:var(--indigo);
  border-top:2px solid var(--amber);
  border-bottom:1px solid var(--warm);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}
.page-products .c-no{
  width:88px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--amber-deep);
  white-space:nowrap;
}
.page-products .c-name{
  min-width:130px;
  font-weight:600;
  color:var(--indigo);
}
.page-products .c-desc{ min-width:220px; color:var(--svc-ink-soft); }
.page-products .c-note{ min-width:170px; font-size:13px; color:var(--svc-ink-soft); }
.page-products .c-price{
  text-align:right;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--amber-deep);
}
.page-products .c-price .num{ font-size:15px; }
.page-products .c-price.is-free{
  color:var(--celadon);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
}

/* 产品线 */
.page-products .line-branch{
  padding:8px 4px 0;
  margin-bottom:18px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(239,232,218,.7), transparent);
}
.page-products .line-branch svg{
  display:block;
  width:100%;
  height:auto;
  font-family:var(--font-display);
}
.page-products .line-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-products .line-card{
  padding:20px;
  border:1px solid var(--warm);
  border-top:4px solid var(--indigo);
  border-radius:var(--svc-radius);
  background:var(--paper);
}
.page-products .line-card--mid{ border-top-color:var(--amber); }
.page-products .line-card--ent{ border-top-color:var(--celadon); }
.page-products .line-flag{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--amber-deep);
}
.page-products .line-card h3{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--indigo);
}
.page-products .line-who{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--svc-ink-soft);
  padding-bottom:12px;
  border-bottom:1px solid var(--warm);
}
.page-products .line-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.page-products .line-list li{
  position:relative;
  padding-left:16px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink);
}
.page-products .line-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--celadon);
}

/* 选型建议 */
.page-products .advice{ margin-top:clamp(22px,3vw,32px); }
.page-products .advice-title{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  color:var(--indigo);
}
.page-products .advice-list{
  list-style:none;
  counter-reset:adv;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.page-products .advice-list li{
  counter-increment:adv;
  position:relative;
  padding-left:36px;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink);
}
.page-products .advice-list li::before{
  content:counter(adv, decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--amber-deep);
}

/* 区域与预约 */
.page-products .area-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.page-products .area-sub{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:17px;
  color:var(--indigo);
}
.page-products .area-copy p{
  margin:0 0 12px;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.85;
  color:var(--ink);
}
.page-products .filter-list{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-products .filter-list li{
  padding:6px 13px;
  border-radius:999px;
  border:1px solid rgba(79,143,123,.34);
  background:rgba(79,143,123,.12);
  color:var(--teal);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
}
.page-products .area-copy .muted{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--svc-ink-soft);
}
.page-products .steps-block{ margin-top:clamp(24px,4vw,38px); }
.page-products .svc-steps{
  list-style:none;
  margin:0 0 4px;
  padding:0;
}
.page-products .svc-step{
  position:relative;
  margin-left:10px;
  padding:0 0 22px 32px;
  border-left:2px solid var(--warm);
}
.page-products .svc-step:last-child{
  border-left-color:var(--celadon);
  padding-bottom:4px;
}
.page-products .svc-step::before{
  content:"";
  position:absolute;
  left:-8px;
  top:5px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--amber);
  border:3px solid var(--paper);
}
.page-products .svc-step:last-child::before{ background:var(--celadon); }
.page-products .step-title{
  margin:0 0 5px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
  color:var(--indigo);
}
.page-products .step-index{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--amber-deep);
}
.page-products .step-time{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--celadon);
  padding:2px 9px;
  border-radius:999px;
  background:rgba(79,143,123,.12);
  white-space:nowrap;
}
.page-products .step-desc{
  margin:0;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.75;
  color:var(--svc-ink-soft);
}

/* 登录与注册 */
.page-products .account-panel{
  padding:clamp(20px,3.4vw,32px);
  border:1px solid var(--warm);
  border-left:4px solid var(--celadon);
  border-radius:var(--svc-radius);
  background:var(--paper);
}
.page-products .account-panel > p{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.85;
  color:var(--ink);
}
.page-products .field-groups{
  list-style:none;
  margin:20px 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.page-products .field-groups li{
  display:flex;
  gap:12px;
  padding:14px 16px;
  border-radius:10px;
  background:var(--paper-dim);
}
.page-products .fg-no{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--celadon);
  padding-top:2px;
}
.page-products .field-groups h3{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:15px;
  color:var(--indigo);
}
.page-products .field-groups p{
  margin:0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--svc-ink-soft);
}

/* 企业定制 */
.page-products .custom-panel{
  padding:clamp(24px,4vw,44px);
  border-radius:var(--svc-radius);
  background:
    radial-gradient(120% 130% at 0% 100%, rgba(217,154,43,.28), transparent 55%),
    linear-gradient(150deg, var(--indigo), var(--indigo-deep));
  color:var(--paper);
  box-shadow:var(--shadow);
}
.page-products .custom-panel .eyebrow{
  margin:0 0 10px;
  color:var(--amber-light);
  letter-spacing:.16em;
}
.page-products .custom-panel h2{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(21px,3.2vw,30px);
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-products .custom-panel > p{
  margin:0;
  max-width:64ch;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.85;
  color:rgba(247,242,232,.86);
}
.page-products .custom-points{
  list-style:none;
  margin:20px 0 24px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.page-products .custom-points li{
  padding:6px 13px;
  border-radius:999px;
  border:1px solid rgba(242,196,109,.5);
  background:rgba(242,196,109,.13);
  color:var(--amber-light);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
}
.page-products .custom-panel .cluster{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-products .custom-panel .btn--ghost-light{
  color:var(--paper);
  border-color:rgba(247,242,232,.45);
}
.page-products .custom-panel .btn--ghost-light:hover{
  border-color:var(--amber-light);
  background:rgba(242,196,109,.14);
}

/* 收尾链接 */
.page-products .svc-outro{
  margin-top:var(--svc-gap);
  padding-top:22px;
  border-top:1px solid var(--warm);
}
.page-products .outro-links{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.page-products .outro-links a{
  display:block;
  padding:12px 14px;
  border:1px solid var(--warm);
  border-radius:10px;
  background:var(--paper);
  color:var(--indigo);
  font-family:var(--font-body);
  font-size:14.5px;
  text-decoration:none;
  transition:border-color .2s ease, background-color .2s ease;
}
.page-products .outro-links a:hover,
.page-products .outro-links a:focus-visible{
  border-color:var(--amber);
  background:var(--paper-dim);
}

/* 响应式 */
@media (min-width:640px){
  .page-products .cat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .page-products .svc-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .page-products .outro-links{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .page-products .field-groups{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (min-width:860px){
  .page-products .line-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .page-products .advice-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .page-products .area-grid{ grid-template-columns:1.1fr .9fr; align-items:start; }
  .page-products .area-copy{ padding-top:4px; }
}

@media (min-width:1024px){
  .page-products .cat-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .page-products .svc-figure{ margin-top:24px; }
}

@media (prefers-reduced-motion: reduce){
  .page-products .cat-card,
  .page-products .price-filter a,
  .page-products .outro-links a,
  .page-products .svc-price td,
  .page-products .svc-price tbody tr:not(.grp) th{
    transition:none;
  }
  .page-products .cat-card:hover{ transform:none; }
}
<<<END>>>
