/* ===== 应用中心 · page-products ===== */
.page-products{
  --pp-pad: 16px;
  --pp-line: rgba(55,224,200,.35);
  --pp-line-warm: rgba(122,92,18,.6);
  position: relative;
  padding-bottom: 56px;
  color: var(--paper);
  font-family: var(--font-body);
  background:
    radial-gradient(110% 52% at 88% -8%, rgba(55,224,200,.13), transparent 62%),
    radial-gradient(80% 40% at 0% 30%, rgba(242,194,75,.07), transparent 65%),
    var(--ink-0);
}
.page-products h1,
.page-products h2,
.page-products h3{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.14;
}
.page-products p{ margin: 0; }
.page-products a{ color: inherit; }

/* ---- 首屏框景 ---- */
.page-products .apps-hero{ padding: 14px var(--pp-pad) 0; }
.page-products .apps-hero__frame{
  position: relative;
  overflow: hidden;
  border: 2px solid var(--copper);
  background: var(--ink-1);
  box-shadow: var(--shadow-hard);
}
.page-products .apps-hero__frame::after{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--pp-line);
  pointer-events: none;
}
.page-products .apps-hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  filter: saturate(.75);
}
.page-products .apps-hero__inner{
  position: relative;
  display: grid;
  gap: 14px;
  padding: 26px 18px 30px;
}
.page-products .apps-hero__title{
  font-size: clamp(30px, 8.2vw, 58px);
  max-width: 16ch;
}
.page-products .apps-hero__lede{
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--paper);
}
.page-products .apps-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.page-products .apps-hero__facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ink-2);
  background: var(--ink-2);
}
.page-products .apps-hero__facts li{
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(6,18,15,.82);
}
.page-products .apps-hero__facts .data-label{
  color: var(--mute);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.page-products .apps-hero__facts strong{
  font-family: var(--font-data);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
}

/* ---- 通用区块 ---- */
.page-products .apps-block{
  padding: 44px var(--pp-pad) 0;
}
.page-products .apps-h2{
  font-size: clamp(24px, 5.4vw, 34px);
  margin-top: 6px;
}
.page-products .apps-block__head{
  display: grid;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink-2);
}
.page-products .apps-block__note{
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mute);
}

/* ---- 技能树 ---- */
.page-products .tree{
  position: relative;
  margin: 22px 0 0;
  padding: 0 0 0 30px;
  list-style: none;
}
.page-products .tree::before{
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--gold) 55%, var(--copper));
}
.page-products .tree__node{
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--pp-line-warm);
}
.page-products .tree__node:last-child{ border-bottom: 0; }
.page-products .tree__node::before{
  content: "";
  position: absolute;
  left: -26px;
  top: 22px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: var(--ink-0);
  box-shadow: 0 0 0 4px rgba(55,224,200,.12);
}
.page-products .tree__index{
  font-family: var(--font-data);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.2;
}
.page-products .tree__title{
  font-size: 19px;
  color: var(--paper);
}
.page-products .tree__text{
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mute);
}
.page-products .tree__link{
  display: inline-block;
  margin-top: 8px;
  padding-bottom: 2px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--pp-line);
}
.page-products .tree__link:hover,
.page-products .tree__link:focus-visible{
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---- 模块面板 ---- */
.page-products .modules{
  display: grid;
  gap: 18px;
  padding: 44px var(--pp-pad) 0;
}
.page-products .module{
  position: relative;
  overflow: hidden;
  padding: 26px 18px 24px;
  border: 2px solid var(--ink-2);
  border-top-color: var(--copper);
  background: linear-gradient(180deg, var(--ink-1), #091813 70%);
  box-shadow: var(--shadow-soft);
}
.page-products .module::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60px;
  background: linear-gradient(100deg, rgba(55,224,200,.22), rgba(242,194,75,.10) 45%, transparent 72%);
  clip-path: polygon(0 0, 100% 0, 100% 24%, 0 100%);
  pointer-events: none;
}
.page-products .module__badge{
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-data);
  font-size: 34px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(122,92,18,.85);
  pointer-events: none;
}
.page-products .module__grid{
  position: relative;
  display: grid;
  gap: 18px;
}
.page-products .module__body{
  display: grid;
  gap: 12px;
}
.page-products .module__title{
  font-size: clamp(22px, 5.4vw, 30px);
  max-width: 20ch;
}
.page-products .module__text{
  font-size: 16px;
  line-height: 1.78;
  color: var(--paper);
  max-width: 42ch;
}
.page-products .module__media{
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--pp-line-warm);
  background: var(--ink-2);
}
.page-products .module__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-products .module__media--tall{ aspect-ratio: 4 / 5; }
.page-products .module__media--wide{ aspect-ratio: 3 / 2; }
.page-products .module__media--banner{ aspect-ratio: 3 / 2; }
.page-products .module__media--bar{ aspect-ratio: 2 / 1; }

.page-products .metric{
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 12px;
  border-top: 1px solid var(--ink-2);
  border-bottom: 1px solid var(--ink-2);
}
.page-products .metric__num{
  font-family: var(--font-data);
  font-size: clamp(44px, 13vw, 68px);
  font-weight: 700;
  line-height: .9;
  color: var(--gold);
  letter-spacing: -.03em;
}
.page-products .metric__unit{
  font-family: var(--font-data);
  font-size: 18px;
  color: var(--gold);
}
.page-products .metric__label{
  color: var(--mute);
  line-height: 1.4;
}

.page-products .module__list{
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .module__list li{
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mute);
}
.page-products .module__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  transform: rotate(45deg);
}
.page-products .module__list strong{
  display: block;
  color: var(--paper);
  font-weight: 700;
}
.page-products .module__list--inline{
  grid-template-columns: minmax(0,1fr);
}
.page-products .module__foot{ margin-top: 4px; }

/* ---- 球队筛选演示 ---- */
.page-products .team-browser{
  margin-top: 6px;
  padding: 16px 14px 18px;
  border: 1px dashed var(--pp-line-warm);
  background: rgba(18,48,41,.42);
}
.page-products .browser__hint{
  margin-bottom: 10px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold);
}
.page-products .team-browser .filter-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.page-products .team-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .team-card{
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--ink-2);
  border-left: 3px solid var(--cyan);
  background: var(--ink-0);
}
.page-products .team-card__tag{
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.page-products .team-card__name{
  font-size: 17px;
  color: var(--paper);
}
.page-products .team-card__meta{
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--gold);
}
.page-products [data-filter-item].is-hidden,
.page-products [data-filter-item][hidden]{
  display: none;
}

/* ---- 对照表 ---- */
.page-products .apps-cap{ padding-top: 48px; }
.page-products .cap{ margin-top: 20px; }
.page-products .cap .filter-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.page-products .cap__scroll{
  overflow-x: auto;
  border: 2px solid var(--ink-2);
  background: var(--ink-1);
  -webkit-overflow-scrolling: touch;
}
.page-products .cap-table{
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px;
}
.page-products .cap-table caption{
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--mute);
  border-bottom: 1px solid var(--ink-2);
}
.page-products .cap-table th,
.page-products .cap-table td{
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--ink-2);
}
.page-products .cap-table thead th{
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--ink-2);
  white-space: nowrap;
}
.page-products .cap-table tbody th{
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.page-products .cap-table tbody td{
  color: var(--mute);
}
.page-products .cap-table tbody tr:nth-child(even){
  background: rgba(18,48,41,.55);
}
.page-products .cap-table tbody tr:hover{
  background: rgba(55,224,200,.08);
}

/* ---- 下一步 ---- */
.page-products .apps-next{ padding-top: 48px; }
.page-products .next-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
  margin-top: 18px;
}
.page-products .next-card{
  display: grid;
  gap: 6px;
  padding: 16px 16px 18px;
  text-decoration: none;
  border: 2px solid var(--ink-2);
  background: var(--ink-1);
  transition: transform 160ms ease, border-color 160ms ease;
}
.page-products .next-card:hover,
.page-products .next-card:focus-visible{
  transform: translateY(-4px);
  border-color: var(--cyan);
}
.page-products .next-card__kicker{
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.page-products .next-card__title{
  font-size: 18px;
  color: var(--paper);
}
.page-products .next-card__text{
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute);
}

/* ---- 中等屏 ---- */
@media (min-width: 640px){
  .page-products{ --pp-pad: 24px; }
  .page-products .apps-hero__inner{ padding: 34px 30px 38px; }
  .page-products .apps-hero__facts{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .page-products .team-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-products .module__list--inline{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .page-products .next-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-products .apps-block__head{
    grid-template-columns: minmax(0,1fr) minmax(0,320px);
    align-items: end;
  }
}

/* ---- 桌面 ---- */
@media (min-width: 960px){
  .page-products{ --pp-pad: 40px; padding-bottom: 80px; }
  .page-products .apps-hero__inner{
    padding: 56px 48px 56px;
    gap: 16px;
  }
  .page-products .apps-hero__title{ max-width: 15ch; }
  .page-products .apps-block{ padding-top: 64px; }
  .page-products .modules{ padding-top: 64px; gap: 24px; }
  .page-products .module{ padding: 34px 30px 32px; }
  .page-products .module__badge{ font-size: 48px; right: 22px; top: 12px; }

  .page-products .module__grid--split{
    grid-template-columns: minmax(0,320px) minmax(0,1fr);
    align-items: start;
    gap: 30px;
  }
  .page-products .module__grid--flip{
    grid-template-columns: minmax(0,1fr) minmax(0,420px);
  }
  .page-products .module__grid--stack{
    gap: 24px;
  }
  .page-products .module__media--banner{ aspect-ratio: 25 / 12; }
  .page-products .module__media--bar{ aspect-ratio: 4 / 1; }

  .page-products .tree{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0 32px;
    padding-left: 34px;
  }
  .page-products .tree__node{ padding: 20px 0; }
  .page-products .tree__node::before{ left: -30px; }

  .page-products .team-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .page-products .next-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
<<<END>>>