.page-products{
  --cat-line:rgba(56,240,208,.24);
  --cat-line-strong:rgba(56,240,208,.55);
  --cat-pad:clamp(1rem,2.4vw,1.75rem);
  --cat-gap:clamp(.8rem,1.8vw,1.15rem);
  background:
    radial-gradient(940px 480px at 84% -8%, rgba(56,240,208,.11), transparent 66%),
    radial-gradient(680px 380px at 2% 16%, rgba(242,167,59,.06), transparent 70%),
    linear-gradient(180deg,#07120F 0%,#0A1C17 44%,#07120F 100%);
  color:var(--mist);
  overflow-x:clip;
  padding-bottom:clamp(2.2rem,5vw,3.6rem);
}

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

/* ---------- 首屏 ---------- */
.page-products .cat-hero{
  position:relative;
  padding-top:clamp(1rem,2.6vw,2rem);
}

.page-products .cat-hero::before{
  content:"";
  position:absolute;
  top:-14%;
  right:-8%;
  width:min(430px,62%);
  height:280px;
  background:radial-gradient(closest-side, rgba(56,240,208,.16), transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}

.page-products .cat-kicker{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-top:.9rem;
  padding:.28rem .72rem;
  border:1px solid var(--cat-line);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--cyan);
  text-transform:uppercase;
}

.page-products .cat-hero h1{
  position:relative;
  margin:.55rem 0 0;
  font-size:clamp(2.3rem,7.4vw,4.4rem);
  line-height:1;
  letter-spacing:-.02em;
  font-weight:900;
  color:var(--mist);
  background:linear-gradient(100deg,#E8F2EE 26%,#8CFCE6 68%,#F2A73B 110%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 14px 44px rgba(56,240,208,.14);
}

@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .page-products .cat-hero h1{
    color:var(--mist);
    -webkit-text-fill-color:currentColor;
  }
}

.page-products .cat-lede{
  position:relative;
  max-width:44ch;
  margin-top:.95rem;
  font-size:clamp(.98rem,1.9vw,1.08rem);
  line-height:1.78;
  color:var(--gray-cyan);
}

.page-products .cat-lede strong{
  color:var(--mist);
  font-weight:600;
}

.page-products .cat-tabs{
  display:flex;
  gap:.45rem;
  margin-top:1.35rem;
  padding-bottom:.55rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--cat-line-strong) transparent;
}

.page-products .cat-tabs::-webkit-scrollbar{height:3px}
.page-products .cat-tabs::-webkit-scrollbar-thumb{
  background:var(--cat-line-strong);
  border-radius:99px;
}

.page-products .cat-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .95rem;
  border:1px solid var(--cat-line);
  border-radius:999px;
  background:linear-gradient(160deg,rgba(23,69,59,.6),rgba(14,42,36,.35));
  color:var(--gray-cyan);
  font-size:.85rem;
  white-space:nowrap;
  text-decoration:none;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .cat-tab:hover,
.page-products .cat-tab:focus-visible{
  color:var(--mist);
  border-color:var(--cat-line-strong);
  background:linear-gradient(160deg,rgba(23,69,59,.95),rgba(14,42,36,.62));
  transform:translateY(-1px);
}

.page-products .cat-tab__no{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--amber);
}

.page-products .cat-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.6rem;
  margin-top:1.1rem;
  padding-top:1.05rem;
  border-top:1px solid var(--cat-line);
}

.page-products .cat-metric{
  display:flex;
  align-items:baseline;
  gap:.42rem;
}

.page-products .cat-metric b{
  font-family:var(--font-mono);
  font-size:1.18rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--amber);
}

.page-products .cat-metric span{
  font-size:.79rem;
  letter-spacing:.04em;
  color:var(--gray-cyan);
}

/* ---------- 区块标题 ---------- */
.page-products .cat-overview,
.page-products .cat-paths{margin-top:clamp(1.9rem,4vw,3rem)}

.page-products .cat-head{margin-bottom:var(--cat-gap)}

.page-products .cat-title{
  margin:.32rem 0 0;
  font-size:clamp(1.32rem,3.1vw,1.9rem);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--mist);
}

.page-products .cat-sub{
  max-width:52ch;
  margin-top:.55rem;
  font-size:.92rem;
  line-height:1.72;
  color:var(--gray-cyan);
}

/* ---------- 四板块总览 ---------- */
.page-products .cat-deck{
  display:grid;
  grid-template-columns:1fr;
  gap:.72rem;
  margin-top:1.05rem;
}

.page-products .cat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:1rem 1rem 1.05rem;
  border:1px solid var(--cat-line);
  border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(14,42,36,.92),rgba(7,18,15,.86));
  color:inherit;
  text-decoration:none;
  overflow:hidden;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}

.page-products .cat-card::after{
  content:"";
  position:absolute;
  right:-32%;
  bottom:-58%;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(56,240,208,.2), transparent 72%);
  opacity:.45;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}

.page-products .cat-card:hover,
.page-products .cat-card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--cat-line-strong);
  background:linear-gradient(165deg,rgba(23,69,59,.95),rgba(14,42,36,.9));
}

.page-products .cat-card:hover::after,
.page-products .cat-card:focus-visible::after{opacity:.95}

.page-products .cat-card__no{
  font-family:var(--font-mono);
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.02em;
  color:rgba(56,240,208,.5);
}

.page-products .cat-card__name{
  margin:0;
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  color:var(--mist);
}

.page-products .cat-card__desc{
  margin:0;
  font-size:.83rem;
  line-height:1.66;
  color:var(--gray-cyan);
}

.page-products .cat-card__meta{
  margin-top:auto;
  padding-top:.55rem;
  border-top:1px dashed rgba(43,79,70,.95);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--amber);
}

/* ---------- 抽屉面板 ---------- */
.page-products .cat-board{
  position:relative;
  margin-top:clamp(1.6rem,3.6vw,2.6rem);
  border:1px solid var(--cat-line);
  border-radius:var(--radius);
  background:linear-gradient(158deg,rgba(14,42,36,.9),rgba(7,18,15,.93) 62%);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
}

.page-products .cat-board::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(56,240,208,.85),rgba(242,167,59,.6),transparent);
  opacity:.55;
}

.page-products .cat-board__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.85rem;
  align-items:start;
  padding:var(--cat-pad);
  border-bottom:1px solid rgba(43,79,70,.85);
  background:linear-gradient(118deg,rgba(23,69,59,.5),transparent 62%);
}

.page-products .cat-board__head > .tag{
  grid-column:1 / -1;
  justify-self:start;
}

.page-products .cat-board__no{
  font-family:var(--font-mono);
  font-size:clamp(1.5rem,4vw,2.3rem);
  line-height:1;
  letter-spacing:.02em;
  color:rgba(56,240,208,.42);
}

.page-products .cat-board__body{padding:var(--cat-pad)}

/* ---------- 图片 ---------- */
.page-products .cat-media{
  position:relative;
  margin:0;
  border:1px solid rgba(43,79,70,.9);
  border-radius:12px;
  background:
    linear-gradient(150deg,rgba(23,69,59,.7),rgba(7,18,15,.9)),
    repeating-linear-gradient(0deg,rgba(56,240,208,.07) 0 1px,transparent 1px 26px);
  overflow:hidden;
}

.page-products .cat-media img{
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-products .cat-media--tall{
  max-width:320px;
  margin-inline:auto;
}

/* ---------- 归档维度示意图 ---------- */
.page-products .cat-diagram{
  margin-top:var(--cat-gap);
  padding:clamp(.7rem,1.8vw,1.1rem);
  border:1px solid rgba(43,79,70,.8);
  border-radius:12px;
  background:
    repeating-linear-gradient(0deg,rgba(56,240,208,.06) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(56,240,208,.06) 0 1px,transparent 1px 24px),
    linear-gradient(160deg,rgba(14,42,36,.6),rgba(7,18,15,.7));
}

.page-products .cat-diagram svg{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- 三条检索路径 ---------- */
.page-products .cat-routes{
  list-style:none;
  margin:var(--cat-gap) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.68rem;
}

.page-products .cat-route{
  position:relative;
  padding:1rem 1rem 1.05rem 1.2rem;
  border:1px solid rgba(43,79,70,.9);
  border-radius:12px;
  background:linear-gradient(160deg,rgba(23,69,59,.36),rgba(7,18,15,.62));
}

.page-products .cat-route::before{
  content:"";
  position:absolute;
  left:0;
  top:.95rem;
  bottom:.95rem;
  width:2px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--cyan),rgba(56,240,208,.08));
}

.page-products .cat-route__title{
  margin:0 0 .4rem;
  font-size:.99rem;
  font-weight:700;
  color:var(--cyan-soft);
}

.page-products .cat-route p{
  margin:0;
  font-size:.85rem;
  line-height:1.7;
  color:var(--gray-cyan);
}

.page-products .cat-route__hint{
  display:inline-block;
  margin-top:.62rem;
  padding:.16rem .55rem;
  border:1px solid rgba(242,167,59,.42);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--amber);
}

/* ---------- 图文错位布局 ---------- */
.page-products .cat-split{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--cat-gap);
  align-items:start;
}

.page-products .cat-split + .cat-split{margin-top:var(--cat-gap)}

.page-products .cat-split__text p{
  margin:0;
  font-size:.92rem;
  line-height:1.78;
  color:var(--gray-cyan);
}

.page-products .cat-split__text p + p{margin-top:.75rem}

.page-products .cat-split__text p:first-child{color:var(--mist)}

.page-products .cat-list{
  list-style:none;
  margin:.95rem 0 0;
  padding:0;
  display:grid;
  gap:.5rem;
}

.page-products .cat-list li{
  position:relative;
  padding-left:1.05rem;
  font-size:.86rem;
  line-height:1.68;
  color:var(--gray-cyan);
}

.page-products .cat-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--cyan);
  transform:rotate(45deg);
}

/* ---------- 子板块 ---------- */
.page-products .cat-sub-block + .cat-sub-block{
  margin-top:clamp(1.4rem,3vw,2.1rem);
  padding-top:clamp(1.4rem,3vw,2.1rem);
  border-top:1px solid rgba(43,79,70,.85);
}

.page-products .cat-h3{
  margin:0 0 .65rem;
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--cyan-soft);
}

.page-products .cat-h3::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:.5rem;
  vertical-align:middle;
  background:var(--cyan);
  border-radius:2px;
  transform:rotate(45deg);
}

.page-products .cat-sub-block > p{
  max-width:56ch;
  margin:0 0 var(--cat-gap);
  font-size:.92rem;
  line-height:1.78;
  color:var(--gray-cyan);
}

/* ---------- 使用路径 ---------- */
.page-products .cat-path-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.72rem;
  margin-top:1.05rem;
}

.page-products .cat-path{
  position:relative;
  padding:1.05rem 1rem 1.15rem;
  border:1px solid var(--cat-line);
  border-radius:12px;
  background:linear-gradient(150deg,rgba(23,69,59,.4),rgba(7,18,15,.72));
  overflow:hidden;
}

.page-products .cat-path::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid rgba(56,240,208,.18);
  pointer-events:none;
}

.page-products .cat-path__tag{
  display:inline-block;
  margin-bottom:.6rem;
  padding:.2rem .6rem;
  border-radius:999px;
  background:rgba(56,240,208,.12);
  border:1px solid var(--cat-line);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--cyan);
}

.page-products .cat-path__title{
  margin:0 0 .45rem;
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  color:var(--mist);
}

.page-products .cat-path p{
  margin:0;
  font-size:.86rem;
  line-height:1.74;
  color:var(--gray-cyan);
}

/* ---------- 收尾 ---------- */
.page-products .cat-cta{margin-top:clamp(1.9rem,4vw,3rem)}

.page-products .cat-cta__panel{
  position:relative;
  padding:clamp(1.2rem,3.2vw,2.2rem);
  border:1px solid var(--cat-line);
  border-radius:var(--radius);
  background:linear-gradient(118deg,rgba(23,69,59,.62),rgba(7,18,15,.92) 58%,rgba(242,167,59,.08));
  overflow:hidden;
}

.page-products .cat-cta__panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--amber));
}

.page-products .cat-cta__text{
  max-width:58ch;
  margin:.65rem 0 0;
  font-size:.92rem;
  line-height:1.78;
  color:var(--gray-cyan);
}

.page-products .cat-cta__links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.05rem;
}

/* ---------- 响应式 ---------- */
@media (min-width:720px){
  .page-products .cat-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .cat-path-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-products .cat-routes{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:880px){
  .page-products .cat-board__head{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
  }
  .page-products .cat-board__head > .tag{
    grid-column:auto;
    justify-self:end;
    align-self:center;
  }
  .page-products .cat-split{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  }
  .page-products .cat-split--flip{
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  }
}

@media (min-width:1080px){
  .page-products .cat-deck{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-products .cat-lede{max-width:46ch}
}

@media (prefers-reduced-motion:reduce){
  .page-products .cat-card,
  .page-products .cat-tab{
    transition:none;
  }
}
<<<END>>>