.page-products{
  --dl-pad: clamp(20px, 5vw, 56px);
  --dl-gap: clamp(16px, 2.2vw, 28px);
  --dl-sec: clamp(52px, 8vw, 100px);
  --dl-radius: var(--radius-lg);
  --dl-line: rgba(11, 61, 145, .14);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}
.page-products .page-shell{
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--dl-pad);
}
.page-products .breadcrumb{
  padding-top: 20px;
  font-size: 13px;
}
.page-products .breadcrumb__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .breadcrumb__link{
  color: var(--steel);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.page-products .breadcrumb__link:hover{ color: var(--orange); }
.page-products .breadcrumb__sep{ color: var(--gray); }
.page-products .breadcrumb__item[aria-current]{ color: var(--gray); }

/* ---------- 首屏封面 ---------- */
.page-products .dl-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(36px, 6vw, 72px) clamp(44px, 7vw, 88px);
  border-radius: 0 0 var(--dl-radius) var(--dl-radius);
  background: linear-gradient(155deg, var(--deep) 0%, #0A2E6E 46%, var(--ink) 100%);
  color: var(--white);
}
.page-products .dl-hero::before{
  content: "";
  position: absolute;
  inset: -34% -12% auto auto;
  width: min(640px, 82%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(0, 229, 255, .30), transparent 62%);
  z-index: -1;
}
.page-products .dl-hero::after{
  content: "";
  position: absolute;
  left: -10%;
  bottom: -56px;
  width: 128%;
  height: 150px;
  background: repeating-linear-gradient(105deg, rgba(0, 229, 255, .16) 0 2px, transparent 2px 26px);
  transform: rotate(-3deg);
  opacity: .55;
  z-index: -1;
}
.page-products .dl-hero__kicker{
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.page-products .dl-hero__title{
  margin: 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(32px, 6.4vw, 64px);
  line-height: 1.06;
  letter-spacing: .01em;
}
.page-products .dl-hero__lead{
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.7vw, 17px);
  color: rgba(244, 247, 251, .82);
}
.page-products .dl-hero__chips{
  display: flex;
  gap: 10px;
  margin-top: 28px;
  padding-bottom: 8px;
  overflow-x: auto;
}
.page-products .dl-chip{
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--pill);
  border: 1px solid rgba(0, 229, 255, .42);
  color: var(--white);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.page-products .dl-chip:hover,
.page-products .dl-chip:focus-visible{
  background: rgba(0, 229, 255, .16);
  border-color: var(--cyan);
}
.page-products .dl-hero__stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 32px 0 0;
  padding: 1px;
  background: rgba(0, 229, 255, .2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.page-products .dl-stat{
  background: rgba(6, 26, 58, .68);
  padding: 16px 18px;
}
.page-products .dl-stat__key{
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 247, 251, .66);
}
.page-products .dl-stat__val{
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1.2;
  color: var(--cyan);
  letter-spacing: .02em;
}

/* ---------- 章节骨架 ---------- */
.page-products .dl-section{ padding-block: var(--dl-sec); }
.page-products .dl-section--paper{ background: var(--paper); }
.page-products .dl-section--mist{ background: var(--mist); }
.page-products .dl-section--glow{
  background: linear-gradient(160deg, var(--paper) 0%, #E7F1FE 56%, var(--mist) 100%);
}
.page-products .dl-section--deep{
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(0, 229, 255, .16), transparent 62%),
    linear-gradient(168deg, #08255A 0%, var(--ink) 100%);
  color: var(--white);
}
.page-products .section-head{ margin-bottom: clamp(26px, 4vw, 44px); }
.page-products .section-head__num{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--orange);
}
.page-products .section-head__title{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(25px, 4vw, 40px);
  line-height: 1.18;
  letter-spacing: .01em;
}
.page-products .section-head__lead{
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 16px;
  color: var(--gray);
}
.page-products .dl-section--deep .section-head__num{ color: var(--cyan); }
.page-products .dl-section--deep .section-head__title{ color: var(--white); }
.page-products .dl-section--deep .section-head__lead{ color: rgba(244, 247, 251, .74); }

.page-products .dl-figure{ margin: 0 0 clamp(24px, 3.5vw, 40px); }
.page-products .media-frame{ margin: 0; }
.page-products .media-frame__img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--dl-radius);
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.page-products .media-frame__caption{
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--gray);
}
.page-products .dl-section--deep .media-frame__caption{ color: rgba(244, 247, 251, .6); }

/* ---------- 分类矩阵 ---------- */
.page-products .cat-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .cat-card{
  position: relative;
  padding: 26px 22px 24px;
  background: var(--white);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.page-products .cat-card::before{
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  width: 46px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
}
.page-products .cat-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, .8);
  box-shadow: var(--shadow-lift);
}
.page-products .cat-card__num{
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--orange);
}
.page-products .cat-card__title{
  margin: 10px 0 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
}
.page-products .cat-card__text{
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--gray);
}
.page-products .cat-card__tag{
  display: inline-block;
  margin-top: 16px;
  padding: 4px 12px;
  border-radius: var(--pill);
  background: var(--mist);
  color: var(--deep);
  font-size: 12px;
  letter-spacing: .06em;
}

/* ---------- 版本说明 ---------- */
.page-products .ver-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dl-gap);
  align-items: start;
}
.page-products .ver-card{
  padding: clamp(22px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
}
.page-products .ver-card__head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
}
.page-products .ver-card__ver{
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  color: var(--deep);
  letter-spacing: .02em;
}
.page-products .ver-card__meta{
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gray);
}
.page-products .ver-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .ver-row{
  display: grid;
  gap: 4px;
  padding: 15px 0;
  border-top: 1px dashed rgba(11, 61, 145, .22);
}
.page-products .ver-row__key{
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--orange);
}
.page-products .ver-row__val{
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink);
}
.page-products .ver-note{
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--dl-radius);
  background: linear-gradient(155deg, var(--deep), var(--ink));
  color: var(--white);
}
.page-products .ver-note__kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.page-products .ver-note__text{
  margin: 12px 0 20px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(244, 247, 251, .84);
}
.page-products .ver-note .btn--primary{
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}

/* ---------- 电脑端 ---------- */
.page-products .dev-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-products .dev-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.page-products .dev-pill{
  padding: 7px 16px;
  border-radius: var(--pill);
  border: 1px solid rgba(0, 229, 255, .4);
  background: rgba(0, 229, 255, .08);
  font-size: 13px;
  color: var(--white);
}
.page-products .dev-pill .mono{
  margin-right: 8px;
  color: var(--cyan);
}
.page-products .dev-tabs{ position: relative; }
.page-products .dev-tabs__input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.page-products .dev-tabs__bar{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--pill);
  background: rgba(244, 247, 251, .1);
  border: 1px solid rgba(0, 229, 255, .24);
}
.page-products .dev-tabs__label{
  padding: 8px 20px;
  border-radius: var(--pill);
  font-size: 14px;
  color: rgba(244, 247, 251, .78);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.page-products #pc-offline:checked ~ .dev-tabs__bar .dev-tabs__label[for="pc-offline"],
.page-products #pc-online:checked ~ .dev-tabs__bar .dev-tabs__label[for="pc-online"]{
  background: var(--orange);
  color: var(--ink);
}
.page-products #pc-offline:focus-visible ~ .dev-tabs__bar .dev-tabs__label[for="pc-offline"],
.page-products #pc-online:focus-visible ~ .dev-tabs__bar .dev-tabs__label[for="pc-online"]{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.page-products .dev-tabs__panel{
  margin-top: 20px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: rgba(244, 247, 251, .07);
  border: 1px solid rgba(0, 229, 255, .2);
}
.page-products .dev-tabs__title{
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 18px;
  color: var(--white);
}
.page-products .dev-tabs__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(244, 247, 251, .8);
}
.page-products #pc-offline:checked ~ .dev-tabs__panel--online{ display: none; }
.page-products #pc-online:checked ~ .dev-tabs__panel--offline{ display: none; }
.page-products .dev-figure{ margin: 0; }

/* ---------- 手机端 ---------- */
.page-products .mob-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.page-products .mob-list{
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .mob-item{
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(11, 61, 145, .1);
}
.page-products .mob-item__num{
  flex: 0 0 auto;
  padding-top: 3px;
  font-size: 12px;
  color: var(--orange);
  letter-spacing: .08em;
}
.page-products .mob-item__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--gray);
}
.page-products .mob-item__text strong{
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 16px;
  color: var(--ink);
}
.page-products .mob-figure{ margin: 0; }

/* ---------- 下载流程 ---------- */
.page-products .flow{
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .flow__item{
  background: var(--white);
  border: 1px solid var(--dl-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.page-products .flow__item[open]{
  border-color: rgba(255, 107, 53, .5);
  box-shadow: var(--shadow-soft);
}
.page-products .flow__summary{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
}
.page-products .flow__summary::-webkit-details-marker{ display: none; }
.page-products .flow__num{
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--orange);
}
.page-products .flow__label{
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}
.page-products .flow__mark{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--deep);
  font-size: 15px;
  line-height: 1;
}
.page-products .flow__mark::before{ content: "+"; }
.page-products .flow__item[open] .flow__mark::before{ content: "–"; }
.page-products .flow__body{ padding: 0 20px 20px; }
.page-products .flow__body p{
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray);
}
.page-products .code-card{
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #0A2E6E, var(--ink));
  color: var(--white);
}
.page-products .code-card__label{
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
}
.page-products .code-card__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.page-products .code-card__value{
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: .06em;
  color: var(--white);
}
.page-products .code-card .copy-btn{
  padding: 7px 18px;
  border-radius: var(--pill);
  border: 1px solid rgba(0, 229, 255, .55);
  background: transparent;
  color: var(--cyan);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.page-products .code-card .copy-btn:hover{ background: rgba(0, 229, 255, .16); }
.page-products .code-card .copy-btn[data-copied]{
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.page-products .code-card__note{
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(244, 247, 251, .74);
}

/* ---------- 专题包 ---------- */
.page-products .pack-block{ position: relative; }
.page-products .pack-filter{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.page-products .pack-bar{
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 8px;
  overflow-x: auto;
}
.page-products .pack-bar__label{
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: var(--pill);
  border: 1px solid rgba(11, 61, 145, .2);
  background: var(--white);
  font-size: 13.5px;
  color: var(--deep);
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.page-products #pack-all:checked ~ .pack-bar .pack-bar__label[for="pack-all"],
.page-products #pack-entry:checked ~ .pack-bar .pack-bar__label[for="pack-entry"],
.page-products #pack-version:checked ~ .pack-bar .pack-bar__label[for="pack-version"],
.page-products #pack-tool:checked ~ .pack-bar .pack-bar__label[for="pack-tool"],
.page-products #pack-scene:checked ~ .pack-bar .pack-bar__label[for="pack-scene"]{
  background: var(--deep);
  border-color: var(--deep);
  color: var(--white);
}
.page-products #pack-entry:checked ~ .pack-grid .pack:not(.pack--entry),
.page-products #pack-version:checked ~ .pack-grid .pack:not(.pack--version),
.page-products #pack-tool:checked ~ .pack-grid .pack:not(.pack--tool),
.page-products #pack-scene:checked ~ .pack-grid .pack:not(.pack--scene){
  display: none;
}
.page-products .pack-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .pack{
  padding: 22px 22px 24px;
  background: var(--white);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.page-products .pack:hover{
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, .8);
  box-shadow: var(--shadow-lift);
}
.page-products .pack__tag{
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--pill);
  font-size: 12px;
  letter-spacing: .08em;
}
.page-products .pack__tag--entry{ background: var(--orange); color: var(--ink); }
.page-products .pack__tag--version{ background: var(--deep); color: var(--white); }
.page-products .pack__tag--tool{ background: rgba(0, 229, 255, .22); color: var(--deep); }
.page-products .pack__tag--scene{ background: var(--mist); color: var(--deep); }
.page-products .pack__title{
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.page-products .pack__text{
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--gray);
}
.page-products .pack-figure{ margin: clamp(28px, 4vw, 44px) 0 0; }

/* ---------- 支持入口 ---------- */
.page-products .support-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dl-gap);
}
.page-products .support-card{
  display: block;
  padding: 22px 22px 24px;
  border-radius: var(--dl-radius);
  border: 1px solid var(--dl-line);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.page-products .support-card:hover,
.page-products .support-card:focus-visible{
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: var(--shadow-lift);
}
.page-products .support-card__kicker{
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--steel);
}
.page-products .support-card__title{
  display: block;
  margin-top: 10px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
}
.page-products .support-card__text{
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--gray);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px){
  .page-products .dl-hero__stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-products .cat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-products .ver-wrap{ grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .page-products .ver-row{ grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 12px; }
  .page-products .mob-wrap{ grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .page-products .pack-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-products .support-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
  .page-products .cat-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .cat-card:nth-child(1){ grid-column: span 2; }
  .page-products .cat-card:nth-child(4){ grid-column: span 2; }
  .page-products .cat-card:nth-child(6){ grid-column: span 2; }
  .page-products .dev-wrap{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-products .pack-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .support-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .dl-hero__title{ max-width: 15ch; }
}

@media (prefers-reduced-motion: reduce){
  .page-products .cat-card,
  .page-products .pack,
  .page-products .support-card,
  .page-products .dl-chip{ transition: none; }
  .page-products .cat-card:hover,
  .page-products .pack:hover,
  .page-products .support-card:hover{
    transform: none;
  }
}
<<<END>>>