.page-products{
  --pp-radius: 26px;
  background: var(--sea);
  color: var(--cream);
  overflow-x: clip;
}

.page-products p{ line-height: 1.75; }

/* 面包屑 */
.page-products .pp-crumbs-wrap{ padding-top: 26px; padding-bottom: 4px; }
.page-products .crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--steel);
}
.page-products .crumbs a{
  color: var(--cyan-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.page-products .crumbs a:hover,
.page-products .crumbs a:focus-visible{
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-products .crumbs [aria-current="page"]{ color: var(--cream); }

/* 首屏 */
.page-products .pp-hero{
  position: relative;
  padding: 34px 0 0;
}
.page-products .pp-hero::before{
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -140px;
  height: 540px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(43,224,200,.20), transparent 62%),
    radial-gradient(ellipse at 88% 14%, rgba(255,122,47,.14), transparent 58%);
  pointer-events: none;
  z-index: 0;
}
.page-products .pp-hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
}

.page-products .pp-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.page-products .pp-eyebrow::before{
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
}

.page-products .pp-hero__title{
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 6.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.page-products .pp-hero__title2{
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--cyan);
}
.page-products .pp-hero__lede{
  max-width: 60ch;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.35vw, 18px);
  color: rgba(246,243,236,.85);
}
.page-products .pp-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* 模块索引 */
.page-products .pp-toc{
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  background: linear-gradient(165deg, rgba(18,48,85,.92), rgba(10,31,60,.94));
  box-shadow: var(--shadow-1);
  padding: 8px;
}
.page-products .pp-toc__title{
  margin: 0;
  padding: 12px 14px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.page-products .pp-toc__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-products .pp-toc__link{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  color: var(--cream);
  text-decoration: none;
  transition: background .14s ease, transform .14s ease;
}
.page-products .pp-toc__link:hover,
.page-products .pp-toc__link:focus-visible{
  background: rgba(43,224,200,.10);
  transform: translateX(3px);
}
.page-products .pp-toc__num{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan);
}
.page-products .pp-toc__label{ font-weight: 600; font-size: 15px; }
.page-products .pp-toc__meta{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--steel);
}

/* 首屏数字 */
.page-products .pp-hero__stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.page-products .pp-stat{
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(18,48,85,.5);
  padding: 16px 18px;
}
.page-products .pp-stat__num{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  color: var(--cyan);
}
.page-products .pp-stat__label{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--steel);
}

/* 通用区块 */
.page-products .pp-section{ padding: 60px 0; }
.page-products .pp-head{ margin-bottom: 28px; }
.page-products .pp-head__num{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.page-products .pp-head__title{
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.page-products .pp-para{
  max-width: 68ch;
  margin: 14px 0 0;
  font-size: 16px;
  color: rgba(246,243,236,.82);
}

/* 图面容器 */
.page-products .pp-visual{
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #0E2A4A, var(--sea) 68%);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.page-products .pp-visual--fourthree{ aspect-ratio: 4 / 3; }
.page-products .pp-visual img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-products .pp-visual__cap{
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(10,31,60,.82);
  color: var(--cyan-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* 01 改版总览 */
.page-products .pp-v4{
  display: grid;
  gap: 24px;
}
.page-products .pp-compare{
  display: grid;
  gap: 16px;
}
.page-products .pp-compare__block{
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  padding: 20px;
  background: rgba(18,48,85,.45);
}
.page-products .pp-compare__block--new{
  border-color: rgba(43,224,200,.42);
  background: linear-gradient(155deg, rgba(43,224,200,.12), rgba(10,31,60,.6));
  box-shadow: var(--shadow-1);
}
.page-products .pp-compare__label{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}
.page-products .pp-compare__block--new .pp-compare__label{ color: var(--cyan); }
.page-products .pp-compare__flow{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-products .pp-compare__flow li{
  position: relative;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid var(--line-soft);
  color: var(--steel);
}
.page-products .pp-compare__block--new .pp-compare__flow li{
  border-color: rgba(43,224,200,.5);
  color: var(--cream);
  background: rgba(43,224,200,.10);
}
.page-products .pp-compare__desc{
  margin: 16px 0 0;
  font-size: 14.5px;
  color: rgba(246,243,236,.72);
}

/* 02 赛程栏 */
.page-products .pp-fixture{
  display: grid;
  gap: 22px;
}
.page-products .pp-demo{
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(18,48,85,.85), rgba(10,31,60,.9));
  padding: 22px 20px;
  box-shadow: var(--shadow-1);
}
.page-products .pp-demo__label{
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.page-products .pp-caps{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-products .pp-caps .capsule-filter{
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--steel);
  background: transparent;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.page-products .pp-caps .capsule-filter[aria-pressed="true"]{
  border-color: var(--cyan);
  background: rgba(43,224,200,.16);
  color: var(--cyan);
  font-weight: 600;
}
.page-products .pp-fixture__list{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-products .pp-fixture__item{
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(143,163,184,.16);
  background: rgba(10,31,60,.6);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.page-products .pp-fixture__item:hover{
  transform: translateY(-4px);
  border-color: rgba(43,224,200,.5);
  box-shadow: 0 12px 26px rgba(3,12,24,.5);
}
.page-products .pp-fixture__time{
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--cyan);
}
.page-products .pp-fixture__meta{
  font-size: 14px;
  color: rgba(246,243,236,.82);
}
.page-products .pp-fixture__bar{
  display: block;
  height: 6px;
  border-radius: 6px;
  background: rgba(143,163,184,.22);
  overflow: hidden;
}
.page-products .pp-fixture__fill{
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cyan-soft), var(--cyan));
}
.page-products .pp-fixture__item:nth-child(1) .pp-fixture__fill{ width: 72%; }
.page-products .pp-fixture__item:nth-child(2) .pp-fixture__fill{ width: 48%; }
.page-products .pp-fixture__item:nth-child(3) .pp-fixture__fill{ width: 86%; }
.page-products .pp-demo__hint{
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--steel);
  line-height: 1.7;
}

/* 03 资料库 */
.page-products .pp-section--archive{
  background: linear-gradient(180deg, rgba(18,48,85,.55), rgba(10,31,60,.2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-products .pp-archive{
  display: grid;
  gap: 24px;
}
.page-products .pp-chart{
  margin: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(10,31,60,.7);
  padding: 18px 16px 12px;
}
.page-products .pp-chart svg{
  display: block;
  width: 100%;
  height: auto;
}
.page-products .pp-chart__cap{
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--steel);
}
.page-products .pp-archive__side{
  display: grid;
  gap: 18px;
  align-content: start;
}
.page-products .pp-export{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-products .pp-export__item{
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(18,48,85,.4);
}
.page-products .pp-export__key{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--orange-soft);
}
.page-products .pp-export__desc{
  font-size: 14.5px;
  color: rgba(246,243,236,.8);
}

/* 04 会员权益区（奶油底） */
.page-products .pp-section--cream{
  background: var(--cream);
  color: var(--ink);
}
.page-products .pp-section--cream .pp-head__num{ color: #0B7A6D; }
.page-products .pp-section--cream .pp-head__title{ color: var(--ink); }
.page-products .pp-section--cream .pp-para{ color: rgba(20,28,40,.78); }

.page-products .pp-ops{
  display: grid;
  gap: 16px;
}
.page-products .pp-op{
  border: 1px solid var(--line-cream);
  border-radius: var(--r-md);
  background: #FFFFFF;
  padding: 22px 20px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.page-products .pp-op:hover{
  transform: translateY(-4px);
  border-color: rgba(255,122,47,.5);
  box-shadow: 0 16px 34px rgba(20,28,40,.14);
}
.page-products .pp-op__no{
  font-family: var(--font-mono);
  font-size: 13px;
  color: #0B7A6D;
}
.page-products .pp-op__title{
  margin: 10px 0 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
}
.page-products .pp-op__desc{
  margin: 10px 0 0;
  font-size: 14.5px;
  color: rgba(20,28,40,.72);
}
.page-products .pp-favdemo{
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.page-products .pp-favdemo__item{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-cream);
}
.page-products .pp-favdemo__btn{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(20,28,40,.3);
  font-size: 15px;
  font-weight: 600;
  color: #5A6472;
}
.page-products .pp-favdemo__btn--on{
  background: var(--orange);
  border-color: var(--orange);
  color: #2A1206;
  box-shadow: 0 10px 22px rgba(255,122,47,.28);
}
.page-products .pp-favdemo__desc{
  margin: 0;
  font-size: 14px;
  color: rgba(20,28,40,.7);
}
.page-products .pp-member__foot{
  color: rgba(20,28,40,.78);
}

/* 05 看球版本 */
.page-products .pp-follow{
  display: grid;
  gap: 24px;
}
.page-products .pp-follow__sub{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--cream);
}
.page-products .pp-chips{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-products .pp-chips li{
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(43,224,200,.10);
  color: var(--cyan-soft);
  font-size: 13px;
}
.page-products .pp-follow__note{
  margin-top: 20px;
}

/* 06 版本演进 */
.page-products .pp-section--navy{
  background: linear-gradient(180deg, rgba(18,48,85,.65), rgba(10,31,60,.85));
  border-top: 1px solid var(--line);
}
.page-products .pp-version{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.page-products .pp-version__item{
  position: relative;
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(10,31,60,.7);
  outline-offset: 4px;
  transition: transform .14s ease, border-color .14s ease;
}
.page-products .pp-version__item:hover{
  transform: translateY(-4px);
  border-color: rgba(43,224,200,.5);
}
.page-products .pp-version__item:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.page-products .pp-version__item--now{
  border-color: rgba(255,122,47,.55);
  background: linear-gradient(160deg, rgba(255,122,47,.14), rgba(10,31,60,.8));
}
.page-products .pp-version__year{
  justify-self: start;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(43,224,200,.12);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 13px;
}
.page-products .pp-version__item--now .pp-version__year{
  background: var(--orange);
  border-color: var(--orange);
  color: #2A1206;
}
.page-products .pp-version__name{
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
}
.page-products .pp-version__desc{
  font-size: 14px;
  color: rgba(246,243,236,.72);
  line-height: 1.7;
}

/* 07 设备与体验 */
.page-products .pp-device{
  display: grid;
  gap: 24px;
}
.page-products .pp-device__list{
  margin: 0;
  display: grid;
}
.page-products .pp-device__row{
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(143,163,184,.18);
}
.page-products .pp-device__row:first-child{ border-top: 1px solid rgba(143,163,184,.18); }
.page-products .pp-device__row dt{
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan);
}
.page-products .pp-device__row dd{
  margin: 0;
  font-size: 14.5px;
  color: rgba(246,243,236,.78);
  line-height: 1.75;
}
.page-products .pp-device__shot{ margin: 0; }

/* 行动区 */
.page-products .pp-cta{
  padding: 56px 0 76px;
}
.page-products .pp-cta__inner{
  display: grid;
  gap: 22px;
  padding: 32px 26px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,122,47,.35);
  background: linear-gradient(150deg, rgba(255,122,47,.16), rgba(18,48,85,.85));
  box-shadow: var(--shadow-2);
}
.page-products .pp-cta__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cream);
}
.page-products .pp-cta__desc{
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: 15px;
  color: rgba(246,243,236,.8);
}
.page-products .pp-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 桌面端布局 */
@media (min-width: 768px){
  .page-products .pp-hero__stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .page-products .pp-ops{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .pp-favdemo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-products .pp-device__row{
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

@media (min-width: 900px){
  .page-products .pp-section{ padding: 92px 0; }
  .page-products .pp-hero__inner{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 42px;
  }
  .page-products .pp-hero__aside{ padding-bottom: 6px; }

  .page-products .pp-v4{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
  .page-products .pp-fixture{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 26px;
  }
  .page-products .pp-archive{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 28px;
  }
  .page-products .pp-follow{
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 30px;
  }
  .page-products .pp-device{
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
    gap: 30px;
  }
  .page-products .pp-cta__inner{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 44px 48px;
  }

  .page-products .pp-version{
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .page-products .pp-version__item::after{
    content: "";
    position: absolute;
    top: 32px;
    left: 100%;
    width: 18px;
    height: 2px;
    background: rgba(43,224,200,.4);
  }
  .page-products .pp-version__item:last-child::after{ display: none; }
}

@media (max-width: 480px){
  .page-products .pp-fixture__item{
    grid-template-columns: 52px minmax(0, 1fr);
    row-gap: 8px;
  }
  .page-products .pp-fixture__bar{ grid-column: 1 / -1; }
  .page-products .pp-toc__meta{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}