.page-products{
  --pp-line: rgba(185,163,255,.18);
  --pp-line-strong: rgba(185,163,255,.38);
  --pp-paper-line: rgba(36,27,18,.16);
  --pp-lift: 0 22px 48px -30px rgba(0,0,0,.95);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero{
  position:relative;
  overflow:hidden;
}
.page-products .pp-hero::before{
  content:"";
  position:absolute;
  inset:-30% -10% -40% 42%;
  background:
    radial-gradient(circle at 62% 32%, rgba(124,77,255,.32), transparent 62%),
    radial-gradient(circle at 12% 88%, rgba(47,224,208,.12), transparent 55%);
  pointer-events:none;
}
.page-products .pp-hero .es-shell{
  position:relative;
  z-index:1;
}
.page-products .pp-hero__grid{
  display:grid;
  gap:clamp(1.4rem,4vw,2.6rem);
  margin-top:clamp(1rem,3vw,2rem);
}
.page-products .pp-hero__title{
  max-width:17ch;
  margin:.35em 0 .45em;
}
.page-products .pp-hero__lead .es-lede{
  max-width:58ch;
}
.page-products .pp-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.5rem;
}
.page-products .pp-hero__board{
  padding:clamp(1.1rem,3.2vw,1.7rem);
  position:relative;
}
.page-products .pp-board__label{
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--es-violet-soft);
  margin:0;
}
.page-products .pp-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--pp-line);
  border-radius:14px;
  overflow:hidden;
  margin-top:.9rem;
}
.page-products .pp-stats .es-stat{
  background:var(--es-ink-2);
  padding:clamp(.85rem,2.4vw,1.15rem);
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.page-products .pp-stats .es-stat__num{
  font-family:var(--es-mono);
  font-size:clamp(1.7rem,5.4vw,2.5rem);
  line-height:1;
  letter-spacing:-.02em;
}
.page-products .pp-stats .es-stat__label{
  font-size:.7rem;
  letter-spacing:.12em;
  color:var(--es-silver);
}
.page-products .pp-board__note{
  margin:1rem 0 0;
  font-size:.82rem;
  line-height:1.7;
  color:var(--es-silver);
}

/* ---------- 工具索引台 ---------- */
.page-products .pp-headnote{
  max-width:34ch;
  font-size:.86rem;
  line-height:1.7;
  color:var(--es-silver);
  margin:0;
}
.page-products .pp-console{
  display:grid;
  gap:clamp(1rem,3vw,1.9rem);
}
.page-products .pp-console__list{
  display:grid;
  gap:.5rem;
  align-content:start;
}
.page-products .pp-console__btn{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.2rem .9rem;
  width:100%;
  text-align:left;
  padding:.85rem 1rem;
  border-radius:14px;
  background:var(--es-ink);
  border:1px solid var(--pp-line);
  color:var(--es-text);
  font:inherit;
  font-size:.94rem;
  cursor:pointer;
  transition:transform .28s var(--es-ease), border-color .28s var(--es-ease), background .28s var(--es-ease);
}
.page-products .pp-console__btn:hover{
  transform:translateY(-2px);
  border-color:var(--pp-line-strong);
}
.page-products .pp-console__btn:focus-visible{
  outline:2px solid var(--es-violet);
  outline-offset:2px;
}
.page-products .pp-console__btn[aria-selected="true"]{
  background:linear-gradient(100deg, rgba(124,77,255,.34), rgba(124,77,255,.06));
  border-color:rgba(124,77,255,.7);
}
.page-products .pp-console__idx{
  grid-row:span 2;
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--es-violet-soft);
}
.page-products .pp-console__name{
  font-weight:600;
  letter-spacing:.01em;
}
.page-products .pp-console__hint{
  grid-column:2;
  font-size:.76rem;
  color:var(--es-silver);
  line-height:1.5;
}
.page-products .pp-console__panel{
  background:var(--es-paper);
  color:var(--es-brown);
  border:1px solid var(--pp-paper-line);
  padding:clamp(1.1rem,3.6vw,2rem);
  box-shadow:var(--es-shadow);
  clip-path:polygon(0 0, calc(100% - var(--es-cut)) 0, 100% var(--es-cut), 100% 100%, 0 100%);
}
.page-products .pp-console__purpose{
  margin:0;
  font-size:1.04rem;
  line-height:1.7;
  font-weight:500;
}
.page-products .pp-spec{
  margin:1.2rem 0 0;
  border-top:1px solid var(--pp-paper-line);
}
.page-products .pp-spec__row{
  display:grid;
  grid-template-columns:4.6rem minmax(0,1fr);
  gap:.9rem;
  padding:.72rem 0;
  border-bottom:1px solid var(--pp-paper-line);
}
.page-products .pp-spec dt{
  font-family:var(--es-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:rgba(36,27,18,.55);
  padding-top:.2rem;
}
.page-products .pp-spec dd{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
}

/* ---------- 工具详情章节 ---------- */
.page-products .pp-tool{
  position:relative;
}
.page-products .pp-tool__grid{
  display:grid;
  gap:clamp(1.3rem,3.6vw,2.4rem);
  align-items:center;
}
.page-products .pp-tool--paper{
  background:var(--es-paper);
  color:var(--es-brown);
  padding-block:clamp(2.4rem,6vw,4.2rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
}
.page-products .pp-tool--paper + .es-section{
  padding-top:clamp(3rem,7vw,5rem);
}
.page-products .pp-tool__media{
  margin:0;
}
.page-products .pp-tool__media .es-media__img img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
.page-products .pp-fields{
  margin-top:1.4rem;
  border-top:1px solid var(--pp-line);
}
.page-products .pp-fields__title{
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--es-violet-soft);
  margin:1rem 0 .6rem;
}
.page-products .pp-fields__list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-products .pp-fields__list li{
  display:grid;
  grid-template-columns:minmax(6.5rem,auto) minmax(0,1fr);
  gap:.9rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--pp-line);
  font-size:.86rem;
  line-height:1.65;
}
.page-products .pp-fields__list li .es-mono{
  color:var(--es-cyan);
  font-size:.8rem;
  letter-spacing:.02em;
}
.page-products .pp-fields__list li span:last-child{
  color:var(--es-silver);
}
.page-products .pp-linkrow{
  margin:1.4rem 0 0;
}
.page-products .pp-tablewrap{
  margin-top:1.4rem;
}
.page-products .pp-versus{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--pp-line);
  border-radius:14px;
  overflow:hidden;
  margin-top:1.5rem;
}
.page-products .pp-versus__item{
  background:var(--es-ink-2);
  padding:1rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.page-products .pp-versus__key{
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--es-silver);
}
.page-products .pp-versus__val{
  font-family:var(--es-mono);
  font-size:clamp(1.3rem,4vw,1.7rem);
  line-height:1;
  color:var(--es-cyan);
}
.page-products .pp-tool__aside{
  background:var(--es-ink);
  border:1px solid var(--pp-line);
  border-radius:var(--es-radius);
  padding:clamp(1.2rem,3.4vw,1.9rem);
}
.page-products .pp-check{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
}
.page-products .pp-check li{
  position:relative;
  padding:.62rem 0 .62rem 1.5rem;
  border-bottom:1px solid var(--pp-line);
  font-size:.9rem;
  line-height:1.65;
  color:var(--es-text);
}
.page-products .pp-check li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.15rem;
  width:.7rem;
  height:2px;
  background:var(--es-flare);
  transform:skewX(-24deg);
}
.page-products .pp-aside__note{
  margin:1rem 0 0;
  font-size:.82rem;
  line-height:1.7;
  color:var(--es-silver);
}

/* ---------- 积分曲线卡 ---------- */
.page-products .pp-chartcard{
  background:var(--es-ink);
  border:1px solid var(--pp-line);
  border-radius:var(--es-radius);
  padding:clamp(1rem,3vw,1.6rem);
  box-shadow:var(--pp-lift);
}
.page-products .pp-chart{
  width:100%;
  height:auto;
  display:block;
}
.page-products .pp-line{
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-products .pp-line--a{ stroke:var(--es-violet-soft); }
.page-products .pp-line--b{ stroke:var(--es-cyan); }
.page-products .pp-line--c{ stroke:var(--es-flare); }
.page-products .pp-line--d{ stroke:var(--es-gold); }
.page-products .pp-dot{
  transform-box:fill-box;
  transform-origin:center;
  animation:pp-pulse 2.6s var(--es-ease) infinite;
}
.page-products .pp-dot--b{ animation-delay:.3s; }
.page-products .pp-dot--c{ animation-delay:.6s; }
.page-products .pp-dot--d{ animation-delay:.9s; }
@keyframes pp-pulse{
  0%,100%{ opacity:.45; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.4); }
}
.page-products .pp-legend{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.1rem;
  margin:1rem 0 0;
  padding:0;
  font-size:.76rem;
  color:var(--es-silver);
}
.page-products .pp-legend li{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.page-products .pp-legend__swatch{
  width:.85rem;
  height:3px;
  border-radius:2px;
  display:inline-block;
}
.page-products .pp-legend__swatch--a{ background:var(--es-violet-soft); }
.page-products .pp-legend__swatch--b{ background:var(--es-cyan); }
.page-products .pp-legend__swatch--c{ background:var(--es-flare); }
.page-products .pp-legend__swatch--d{ background:var(--es-gold); }

/* ---------- 适用角色 ---------- */
.page-products .pp-roles{
  display:grid;
  gap:1rem;
  margin-top:clamp(1.4rem,4vw,2rem);
}
.page-products .pp-role{
  background:var(--es-ink);
  border:1px solid var(--pp-line);
  border-radius:var(--es-radius);
  padding:clamp(1.1rem,3vw,1.6rem);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  transition:transform .3s var(--es-ease), border-color .3s var(--es-ease);
}
.page-products .pp-role:hover{
  transform:translateY(-4px);
  border-color:var(--pp-line-strong);
}
.page-products .pp-role .es-chip{
  align-self:flex-start;
  font-size:.68rem;
  letter-spacing:.14em;
}
.page-products .pp-role__title{
  margin:0;
  font-size:1.06rem;
  font-weight:600;
  line-height:1.5;
}
.page-products .pp-role__body{
  margin:0;
  font-size:.88rem;
  line-height:1.75;
  color:var(--es-silver);
}
.page-products .pp-role__tools{
  margin:auto 0 0;
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--es-cyan);
  padding-top:.8rem;
  border-top:1px solid var(--pp-line);
}
.page-products .pp-roles__media{
  margin:clamp(1.4rem,4vw,2.2rem) 0 0;
}
.page-products .pp-roles__media .es-media__img img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* ---------- 收尾 ---------- */
.page-products .pp-cta{
  background:linear-gradient(115deg, rgba(124,77,255,.3), rgba(11,11,20,.94) 64%);
  border:1px solid rgba(124,77,255,.42);
  border-radius:var(--es-radius);
  padding:clamp(1.4rem,4vw,2.4rem);
  display:grid;
  gap:1.2rem;
}
.page-products .pp-cta__title{
  margin:0;
  font-size:clamp(1.15rem,3.4vw,1.6rem);
  line-height:1.45;
  font-weight:600;
}
.page-products .pp-cta__text{
  margin:.7rem 0 0;
  font-size:.92rem;
  line-height:1.75;
  color:var(--es-silver);
  max-width:52ch;
}
.page-products .pp-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

/* ---------- 响应式 ---------- */
@media (min-width:760px){
  .page-products .pp-roles{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-products .pp-hero__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:end;
  }
  .page-products .pp-console{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-items:start;
  }
  .page-products .pp-console__list{
    gap:.62rem;
  }
  .page-products .pp-console__btn:nth-child(1){ margin-left:0; }
  .page-products .pp-console__btn:nth-child(2){ margin-left:7px; }
  .page-products .pp-console__btn:nth-child(3){ margin-left:14px; }
  .page-products .pp-console__btn:nth-child(4){ margin-left:21px; }
  .page-products .pp-console__btn:nth-child(5){ margin-left:28px; }
  .page-products .pp-console__btn:nth-child(6){ margin-left:35px; }

  .page-products .pp-tool__grid{
    grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  }
  .page-products .pp-tool__grid--flip .pp-tool__body{
    order:2;
  }
  .page-products .pp-tool__grid--flip .pp-tool__media,
  .page-products .pp-tool__grid--flip .pp-tool__aside{
    order:1;
  }
  .page-products .pp-cta{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
}

@media (max-width:560px){
  .page-products .pp-fields__list li{
    grid-template-columns:minmax(0,1fr);
    gap:.25rem;
  }
  .page-products .pp-versus{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .pp-spec__row{
    grid-template-columns:3.6rem minmax(0,1fr);
    gap:.7rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .pp-dot{
    animation:none;
    opacity:1;
    transform:none;
  }
  .page-products .pp-console__btn:hover,
  .page-products .pp-role:hover{
    transform:none;
  }
}