.page-products{
  --pp-line: rgba(167,139,250,.26);
  --pp-line-soft: rgba(167,139,250,.14);
  --pp-grid: rgba(167,139,250,.13);
  --pp-glass: rgba(238,242,255,.06);
  color: var(--gx-white);
  background: var(--gx-void);
  font-family: var(--gx-font);
  overflow-x: hidden;
}
.page-products *{box-sizing:border-box;}
.page-products p,
.page-products li,
.page-products h1,
.page-products h2,
.page-products h3{margin:0;}
.page-products a{color:inherit;text-decoration:none;}

.page-products .pp-wrap{
  width:100%;
  max-width:var(--gx-max);
  margin:0 auto;
  padding-inline:var(--gx-gutter);
}

.page-products .pp-eyebrow{
  font-family:var(--gx-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gx-lumen);
  margin-bottom:14px;
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero{
  position:relative;
  padding-block:36px 48px;
  background:
    radial-gradient(70% 100% at 8% 0%, rgba(108,76,241,.30), transparent 68%),
    radial-gradient(60% 90% at 96% 8%, rgba(42,27,94,.95), transparent 62%);
  border-bottom:1px solid var(--pp-line);
}
.page-products .pp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--pp-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pp-grid) 1px, transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 88%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 88%);
  opacity:.65;
}
.page-products .pp-hero .pp-wrap{position:relative;z-index:1;}

.page-products .pp-crumbs{font-size:.74rem;letter-spacing:.12em;color:rgba(238,242,255,.55);margin-bottom:32px;}
.page-products .pp-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-family:var(--gx-mono);}
.page-products .pp-crumbs li+li::before{content:"/";margin-right:8px;color:var(--gx-galaxy);}
.page-products .pp-crumbs a{border-bottom:1px solid transparent;padding-bottom:2px;}
.page-products .pp-crumbs a:hover{border-bottom-color:var(--gx-lumen);}
.page-products .pp-crumbs [aria-current="page"]{color:var(--gx-gold);}

.page-products .pp-hero__grid{display:grid;gap:40px;}

.page-products .pp-hero h1{
  font-size:clamp(1.9rem, 6.4vw, 3.4rem);
  line-height:1.16;
  letter-spacing:.03em;
  font-weight:800;
  max-width:19em;
}
.page-products .pp-lede{
  margin-top:22px;
  font-size:1rem;
  line-height:1.85;
  color:rgba(238,242,255,.82);
  max-width:34em;
}
.page-products .pp-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

.page-products .pp-hero__index-wrap{
  border:1px solid var(--pp-line);
  background:var(--pp-glass);
  padding:20px 18px;
  backdrop-filter:blur(6px);
}
.page-products .pp-hero__index-title{
  font-family:var(--gx-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--gx-gold);
  margin-bottom:14px;
}
.page-products .pp-hero__index{list-style:none;padding:0;margin:0;display:grid;gap:2px;}
.page-products .pp-hero__index a{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:9px 4px;
  border-bottom:1px dashed var(--pp-line-soft);
  font-size:.9rem;
  transition:color .2s var(--gx-ease), padding-left .2s var(--gx-ease);
}
.page-products .pp-hero__index li:last-child a{border-bottom:0;}
.page-products .pp-hero__index a:hover,
.page-products .pp-hero__index a:focus-visible{color:var(--gx-gold);padding-left:10px;}
.page-products .pp-hero__no{
  font-family:var(--gx-mono);
  font-size:.72rem;
  color:var(--gx-galaxy);
  letter-spacing:.08em;
}
.page-products .pp-hero__index a:hover .pp-hero__no{color:var(--gx-gold);}

/* ---------- 章节通用 ---------- */
.page-products .pp-section{position:relative;padding-block:52px;}
.page-products .pp-head{max-width:38em;margin-bottom:32px;}
.page-products .pp-head h2{
  font-size:clamp(1.45rem, 4.4vw, 2.25rem);
  line-height:1.28;
  letter-spacing:.02em;
  font-weight:750;
}
.page-products .pp-head__note{
  margin-top:16px;
  font-size:.96rem;
  line-height:1.85;
  color:rgba(238,242,255,.76);
  max-width:36em;
}
.page-products .pp-head__note + .pp-head__note{margin-top:12px;}
.page-products .pp-footnote{
  margin-top:20px;
  font-size:.84rem;
  line-height:1.8;
  color:rgba(238,242,255,.58);
}
.page-products .pp-footnote a{color:var(--gx-gold);border-bottom:1px solid rgba(245,200,107,.4);}
.page-products .pp-footnote a:hover{border-bottom-color:var(--gx-gold);}

.page-products .pp-split{display:grid;gap:36px;}
.page-products .pp-split__main{min-width:0;}
.page-products .pp-split__aside{min-width:0;}

.page-products .gx-figure{margin:0;}
.page-products .gx-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  border:1px solid var(--pp-line);
  background:linear-gradient(150deg, var(--gx-nebula), var(--gx-void));
}
.page-products .gx-figure__cap{
  margin-top:10px;
  font-family:var(--gx-mono);
  font-size:.74rem;
  line-height:1.7;
  letter-spacing:.02em;
  color:rgba(238,242,255,.55);
}

/* ---------- 三类服务技能树 ---------- */
.page-products .pp-section--services{overflow:hidden;}
.page-products .pp-tree__bg{
  position:absolute;
  inset:0;
  margin:0;
  pointer-events:none;
  z-index:0;
}
.page-products .pp-tree__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.22;
}
.page-products .pp-section--services .pp-wrap{position:relative;z-index:1;}

.page-products .pp-tree__diagram{display:none;}
.page-products .pp-tree__svg{width:100%;height:auto;display:block;}

.page-products .pp-branches{display:grid;gap:22px;}

.page-products .pp-branch{
  position:relative;
  padding:22px 20px 20px 22px;
  border:1px solid var(--pp-line);
  border-left:2px dashed var(--gx-lumen);
  background:linear-gradient(160deg, rgba(42,27,94,.72), rgba(11,16,46,.9));
  transition:border-color .24s var(--gx-ease), transform .24s var(--gx-ease), border-left-style .24s linear;
}
.page-products .pp-branch:hover,
.page-products .pp-branch:focus-within{
  border-left-style:solid;
  border-left-color:var(--gx-gold);
  border-color:rgba(167,139,250,.5);
  transform:translateY(-2px);
}
.page-products .pp-branch__no{
  font-family:var(--gx-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  color:var(--gx-galaxy);
  margin-bottom:10px;
}
.page-products .pp-branch h3{
  font-size:1.24rem;
  letter-spacing:.04em;
  font-weight:700;
  margin-bottom:12px;
}
.page-products .pp-branch__for{
  font-size:.82rem;
  line-height:1.75;
  color:var(--gx-amber);
  margin-bottom:12px;
}
.page-products .pp-branch__desc{
  font-size:.93rem;
  line-height:1.85;
  color:rgba(238,242,255,.78);
}
.page-products .pp-branch__link{
  display:inline-block;
  margin-top:16px;
  font-size:.88rem;
  font-weight:600;
  color:var(--gx-gold);
  border-bottom:1px solid rgba(245,200,107,.45);
  padding-bottom:3px;
}
.page-products .pp-branch__link:hover{border-bottom-color:var(--gx-gold);}

.page-products .pp-branch__more{
  margin-top:18px;
  border-top:1px dashed var(--pp-line);
  padding-top:12px;
}
.page-products .pp-branch__more summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--gx-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--gx-lumen);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.page-products .pp-branch__more summary::-webkit-details-marker{display:none;}
.page-products .pp-branch__more summary::after{
  content:"+";
  font-size:.95rem;
  color:var(--gx-gold);
  transition:transform .24s var(--gx-ease);
}
.page-products .pp-branch__more[open] summary::after{transform:rotate(45deg);}
.page-products .pp-branch__more ul{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:8px;
}
.page-products .pp-branch__more li a{
  display:block;
  font-size:.85rem;
  line-height:1.7;
  color:rgba(238,242,255,.72);
  padding-left:14px;
  position:relative;
}
.page-products .pp-branch__more li a::before{
  content:"·";
  position:absolute;
  left:2px;
  color:var(--gx-cyan);
}
.page-products .pp-branch__more li a:hover{color:var(--gx-white);}

/* ---------- 栏目索引 ---------- */
.page-products .pp-section--library{background:linear-gradient(180deg, transparent, rgba(42,27,94,.30) 40%, transparent);}
.page-products .pp-cells{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.page-products .pp-cell{
  display:grid;
  gap:4px;
  padding:14px 14px 16px;
  border:1px solid var(--pp-line-soft);
  background:var(--pp-glass);
  min-height:104px;
  align-content:start;
  transition:border-color .22s var(--gx-ease), background .22s var(--gx-ease), transform .22s var(--gx-ease);
}
.page-products .pp-cell:hover,
.page-products .pp-cell:focus-visible{
  border-color:var(--gx-gold);
  background:rgba(108,76,241,.14);
  transform:translateY(-2px);
}
.page-products .pp-cell__no{
  font-family:var(--gx-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--gx-galaxy);
}
.page-products .pp-cell__name{
  font-size:.92rem;
  font-weight:650;
  letter-spacing:.03em;
}
.page-products .pp-cell__count{
  font-family:var(--gx-mono);
  font-size:.72rem;
  color:var(--gx-gold);
}
.page-products .pp-cell__latest{
  margin-top:6px;
  font-size:.74rem;
  line-height:1.6;
  color:rgba(238,242,255,.5);
  border-top:1px dashed var(--pp-line-soft);
  padding-top:6px;
}
.page-products .pp-cell:hover .pp-cell__latest{color:rgba(238,242,255,.78);}

/* ---------- 编号规则 ---------- */
.page-products .pp-section--steps{background:radial-gradient(70% 120% at 85% 20%, rgba(108,76,241,.16), transparent 70%);}
.page-products .pp-steplist{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--pp-line-soft);
}
.page-products .pp-steplist li{
  display:flex;
  gap:14px;
  align-items:baseline;
  padding:12px 2px;
  border-bottom:1px solid var(--pp-line-soft);
  font-size:.9rem;
  line-height:1.7;
  color:rgba(238,242,255,.8);
  transition:background .2s var(--gx-ease);
}
.page-products .pp-steplist li:hover{background:rgba(238,242,255,.04);}
.page-products .pp-steplist__no{
  flex:0 0 auto;
  font-family:var(--gx-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--gx-gold);
  padding-top:2px;
}

/* ---------- 终端对照表 ---------- */
.page-products .pp-section--devices{background:var(--gx-orbit);border-block:1px solid var(--pp-line-soft);}
.page-products .pp-devices__figure{margin-bottom:30px;}
.page-products .pp-table-wrap{overflow-x:auto;border:1px solid var(--pp-line);}
.page-products .pp-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--gx-mono);
  font-size:.8rem;
  line-height:1.7;
}
.page-products .pp-table caption{
  caption-side:top;
  text-align:left;
  padding:12px 14px;
  font-family:var(--gx-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--gx-lumen);
  background:rgba(238,242,255,.04);
  border-bottom:1px solid var(--pp-line-soft);
}
.page-products .pp-table thead th{
  text-align:left;
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--gx-gold);
  padding:10px 14px;
  background:rgba(238,242,255,.05);
  border-bottom:1px solid var(--pp-line);
  white-space:nowrap;
}
.page-products .pp-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--pp-line-soft);
  color:rgba(238,242,255,.8);
  vertical-align:top;
}
.page-products .pp-table tbody tr:last-child td{border-bottom:0;}
.page-products .pp-table tbody tr:hover td{background:rgba(108,76,241,.12);}
.page-products .pp-table tbody td:first-child{color:var(--gx-lumen);}
.page-products .pp-table a{
  color:var(--gx-gold);
  border-bottom:1px solid rgba(245,200,107,.4);
}
.page-products .pp-table a:hover{border-bottom-color:var(--gx-gold);}

/* ---------- 处理路径 ---------- */
.page-products .pp-path{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:18px;
  counter-reset:none;
}
.page-products .pp-path__item{
  position:relative;
  padding:20px 18px 20px 20px;
  border:1px solid var(--pp-line-soft);
  background:linear-gradient(150deg, rgba(42,27,94,.55), rgba(5,8,23,.9));
  border-top:1px dashed var(--gx-lumen);
  transition:border-color .22s var(--gx-ease), transform .22s var(--gx-ease);
}
.page-products .pp-path__item:hover,
.page-products .pp-path__item:focus-within{
  border-top-style:solid;
  border-top-color:var(--gx-cyan);
  border-color:rgba(167,139,250,.45);
  transform:translateY(-2px);
}
.page-products .pp-path__no{
  display:block;
  font-family:var(--gx-mono);
  font-size:.76rem;
  letter-spacing:.16em;
  color:var(--gx-galaxy);
  margin-bottom:10px;
}
.page-products .pp-path__item h3{
  font-size:1.05rem;
  letter-spacing:.04em;
  margin-bottom:8px;
  font-weight:700;
}
.page-products .pp-path__item p{
  font-size:.87rem;
  line-height:1.78;
  color:rgba(238,242,255,.72);
}
.page-products .pp-path__link{
  display:inline-block;
  margin-top:14px;
  font-size:.82rem;
  color:var(--gx-cyan);
  border-bottom:1px solid rgba(79,216,232,.35);
  padding-bottom:2px;
}
.page-products .pp-path__link:hover{border-bottom-color:var(--gx-cyan);}

/* ---------- 版本标识 ---------- */
.page-products .pp-section--version{background:radial-gradient(60% 100% at 20% 10%, rgba(245,200,107,.10), transparent 65%);}
.page-products .pp-version-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}

/* ---------- 使用场景 ---------- */
.page-products .pp-scenes{display:grid;gap:16px;}
.page-products .pp-scene{
  padding:20px 18px;
  border:1px solid var(--pp-line-soft);
  background:rgba(238,242,255,.04);
  transition:border-color .22s var(--gx-ease), background .22s var(--gx-ease);
}
.page-products .pp-scene:hover{
  border-color:rgba(245,200,107,.5);
  background:rgba(108,76,241,.12);
}
.page-products .pp-scene__tag{
  display:inline-block;
  font-family:var(--gx-mono);
  font-size:.68rem;
  letter-spacing:.18em;
  color:var(--gx-void);
  background:var(--gx-lumen);
  padding:3px 8px;
  margin-bottom:12px;
}
.page-products .pp-scene h3{font-size:1rem;letter-spacing:.03em;margin-bottom:8px;font-weight:700;}
.page-products .pp-scene p{font-size:.86rem;line-height:1.78;color:rgba(238,242,255,.72);}
.page-products .pp-scene__link{
  display:inline-block;
  margin-top:12px;
  font-size:.8rem;
  color:var(--gx-gold);
  border-bottom:1px solid rgba(245,200,107,.4);
  padding-bottom:2px;
}
.page-products .pp-scene__link:hover{border-bottom-color:var(--gx-gold);}

/* ---------- 结尾提示 ---------- */
.page-products .pp-cta{
  margin-top:36px;
  padding:24px 20px;
  border:1px solid var(--pp-line);
  border-left:3px solid var(--gx-gold);
  background:linear-gradient(120deg, rgba(42,27,94,.8), rgba(11,16,46,.95));
  display:grid;
  gap:18px;
}
.page-products .pp-cta__text{
  font-size:.92rem;
  line-height:1.85;
  color:rgba(238,242,255,.82);
  max-width:40em;
}

/* ---------- 平板 ---------- */
@media (min-width:640px){
  .page-products .pp-cells{grid-template-columns:repeat(3, 1fr);}
  .page-products .pp-scenes{grid-template-columns:1fr 1fr;}
  .page-products .pp-path{grid-template-columns:1fr 1fr;}
  .page-products .pp-cta{grid-template-columns:1fr auto;align-items:center;}
}

/* ---------- 桌面 ---------- */
@media (min-width:900px){
  .page-products .pp-hero{padding-block:48px 76px;}
  .page-products .pp-hero__grid{
    grid-template-columns:minmax(0, 7fr) minmax(0, 3fr);
    gap:56px;
    align-items:start;
  }
  .page-products .pp-hero__index-wrap{margin-top:44px;}
  .page-products .pp-section{padding-block:88px;}
  .page-products .pp-section--devices{padding-block:72px;}
  .page-products .pp-head{margin-bottom:44px;}

  .page-products .pp-tree__diagram{display:block;margin-bottom:-6px;}

  .page-products .pp-branches{grid-template-columns:repeat(3, 1fr);gap:26px;}
  .page-products .pp-branch:nth-child(2){margin-top:36px;}
  .page-products .pp-branch:nth-child(3){margin-top:16px;}

  .page-products .pp-split{
    grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);
    gap:56px;
    align-items:start;
  }
  .page-products .pp-split--reverse{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);}
  .page-products .pp-split--reverse .pp-split__aside{order:-1;}
  .page-products .pp-split__aside{position:sticky;top:calc(var(--gx-header-h) + 24px);}

  .page-products .pp-cells{gap:12px;}
  .page-products .pp-cell{min-height:118px;padding:16px;}
  .page-products .pp-cell__latest{margin-top:auto;}

  .page-products .pp-path{
    grid-template-columns:repeat(5, 1fr);
    gap:0;
    border-top:1px dashed var(--gx-lumen);
  }
  .page-products .pp-path__item{
    border:0;
    border-left:1px dashed var(--gx-lumen);
    border-top:0;
    background:transparent;
    padding:22px 16px 4px;
  }
  .page-products .pp-path__item:last-child{border-right:1px dashed var(--gx-lumen);}
  .page-products .pp-path__item:hover,
  .page-products .pp-path__item:focus-within{
    border-left-style:solid;
    border-left-color:var(--gx-cyan);
    border-top:0;
    background:rgba(108,76,241,.10);
    transform:none;
  }
  .page-products .pp-path__no{position:relative;margin-top:-34px;background:var(--gx-void);display:inline-block;padding:2px 8px 2px 0;}

  .page-products .pp-scenes{grid-template-columns:repeat(4, 1fr);gap:18px;}
  .page-products .pp-scene:nth-child(2){margin-top:32px;}
  .page-products .pp-scene:nth-child(4){margin-top:18px;}

  .page-products .pp-table{font-size:.85rem;}
  .page-products .pp-table tbody td{padding:14px 16px;}
}

@media (min-width:1100px){
  .page-products .pp-hero h1{max-width:17em;}
  .page-products .pp-cell__latest{font-size:.76rem;}
}

@media (prefers-reduced-motion:reduce){
  .page-products *{transition:none !important;}
}
<<<PAGE_CSS_END>>>