.page-products{
  --roster-accent:#A44CFF;
  --member-accent:#00D4FF;
  --cal-accent:#FFCC00;
  --open-accent:#2DF2A8;
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(900px 420px at 90% -5%, rgba(164,76,255,.16), transparent 65%),
    var(--bg-dark);
  color:var(--text-main);
}
.page-products ::selection{
  background:rgba(164,76,255,.35);
  color:var(--text-main);
}

/* ===== 面包屑 ===== */
.page-products .breadcrumb{
  padding-top:var(--space-5);
}

/* ===== Hero ===== */
.page-products__hero{
  position:relative;
  padding:var(--space-5) 0 0;
  border-bottom:1px solid rgba(164,76,255,.28);
}
.page-products__hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:100%;
  background-image:
    linear-gradient(rgba(0,212,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
}
.page-products__hero-grid{
  display:grid;
  gap:var(--space-6);
}
.page-products__hero-copy{
  position:relative;
  z-index:1;
}
.page-products__hero-kicker{
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-blue);
  margin-bottom:var(--space-4);
}
.page-products__hero h1{
  font-family:var(--font-display);
  font-size:var(--text-h1);
  line-height:1.2;
  margin:0 0 var(--space-5);
  letter-spacing:.02em;
}
.page-products__hero-desc{
  color:var(--text-dim);
  max-width:640px;
  line-height:1.8;
  margin-bottom:var(--space-6);
}
.page-products__hero-metrics{
  display:flex;
  gap:var(--space-6);
  flex-wrap:wrap;
  padding:var(--space-5) 0;
  border-top:1px solid rgba(138,147,166,.25);
}
.page-products__hero-metric{
  padding-left:var(--space-4);
  border-left:2px solid var(--accent-purple);
}
.page-products__hero-metric:nth-child(2){
  border-left-color:var(--accent-blue);
}
.page-products__hero-metric:nth-child(3){
  border-left-color:var(--accent-yellow);
}
.page-products__hero-metric-value{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-h3);
  font-weight:700;
  color:var(--text-main);
}
.page-products__hero-metric-label{
  display:block;
  font-size:var(--text-small);
  color:var(--text-dim);
  margin-top:var(--space-1);
}
.page-products__hero-visual{
  position:relative;
  z-index:1;
}
.page-products__hero-visual img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
  border:1px solid rgba(164,76,255,.3);
}

/* ===== 应用总览 ===== */
.page-products__overview{
  padding:var(--space-8) 0;
}
.page-products__overview-grid{
  display:grid;
  gap:var(--space-6);
}
.page-products__overview-card{
  position:relative;
  display:block;
  padding:var(--space-7);
  background:
    linear-gradient(135deg, rgba(18,20,29,.92), rgba(18,20,29,.7)),
    var(--bg-panel);
  border:1px solid rgba(164,76,255,.35);
  color:var(--text-main);
  text-decoration:none;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.page-products__overview-card::before,
.page-products__overview-card::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border-color:var(--accent-blue);
  border-style:solid;
}
.page-products__overview-card::before{
  top:-1px;
  left:-1px;
  border-width:2px 0 0 2px;
}
.page-products__overview-card::after{
  bottom:-1px;
  right:-1px;
  border-width:0 2px 2px 0;
}
.page-products__overview-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,212,255,.7);
  box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 30px rgba(164,76,255,.12);
}
.page-products__overview-card--member{
  border-color:rgba(0,212,255,.35);
}
.page-products__overview-card--member::before{
  border-color:var(--accent-purple);
}
.page-products__overview-card--member:hover{
  border-color:rgba(164,76,255,.7);
  box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 30px rgba(0,212,255,.12);
}
.page-products__overview-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:var(--space-5);
}
.page-products__overview-card-icon{
  display:block;
  color:var(--accent-purple);
}
.page-products__overview-card--member .page-products__overview-card-icon{
  color:var(--accent-blue);
}
.page-products__overview-card h3{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  margin:0 0 var(--space-3);
}
.page-products__overview-card > p{
  color:var(--text-dim);
  line-height:1.8;
  margin-bottom:var(--space-5);
}
.page-products__overview-card-stats{
  display:flex;
  gap:var(--space-5);
  margin:0 0 var(--space-6);
  padding:0;
}
.page-products__overview-card-stats div{
  border-left:1px solid rgba(138,147,166,.35);
  padding-left:var(--space-3);
}
.page-products__overview-card-stats dt{
  font-size:var(--text-small);
  color:var(--text-dim);
}
.page-products__overview-card-stats dd{
  font-family:var(--font-mono);
  font-size:var(--text-mono-lg);
  font-weight:700;
  margin:var(--space-1) 0 0;
  color:var(--accent-yellow);
}
.page-products__overview-card-link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--accent-blue);
  transition:color .3s ease, gap .3s ease;
}
.page-products__overview-card:hover .page-products__overview-card-link{
  color:var(--accent-yellow);
  gap:var(--space-4);
}
.page-products__overview-card-arrow{
  font-family:var(--font-mono);
}

/* ===== 应用详情标签 ===== */
.page-products__detail{
  position:relative;
}
.page-products__detail .container{
  position:relative;
}
.page-products__detail .vertical-note{
  top:var(--space-7);
  right:var(--container-pad);
}
.page-products__tab-shell{
  margin-top:var(--space-7);
  border:1px solid rgba(164,76,255,.25);
  background:rgba(10,11,16,.6);
}
.page-products__tab-nav{
  display:flex;
  overflow-x:auto;
  border-bottom:1px solid rgba(138,147,166,.25);
  background:rgba(18,20,29,.85);
}
.page-products .pane-tabs__tab{
  position:relative;
  flex:1 0 auto;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-5) var(--space-4);
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  font-family:var(--font-mono);
  font-size:.9rem;
  color:var(--text-dim);
  cursor:pointer;
  white-space:nowrap;
  transition:color .3s ease, background .3s ease, box-shadow .3s ease;
}
.page-products .pane-tabs__tab:hover{
  color:var(--text-main);
  background:rgba(164,76,255,.06);
}
.page-products .pane-tabs__tab[aria-selected="true"]{
  color:var(--text-main);
  border-bottom-color:var(--accent-purple);
  background:linear-gradient(180deg, rgba(164,76,255,.15), rgba(0,212,255,.04));
  box-shadow:0 0 24px rgba(164,76,255,.14);
}
.page-products .pane-tabs__tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:var(--gradient-accent);
  transform:skewX(-20deg);
  transform-origin:left;
}
.page-products__tab-index{
  font-size:.75rem;
  color:var(--accent-yellow);
}
.page-products .pane-tabs__tab[aria-selected="true"] .page-products__tab-index{
  color:var(--accent-blue);
}
.page-products__tab-panels{
  background:
    linear-gradient(rgba(0,212,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.035) 1px, transparent 1px),
    rgba(10,11,16,.5);
  background-size:32px 32px, 32px 32px, auto;
}
.page-products .pane-tabs__panel{
  display:block;
  padding:var(--space-6);
}
.page-products__detail-layout{
  display:grid;
  gap:var(--space-6);
}
.page-products__detail-copy h3{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  line-height:1.35;
  margin:var(--space-3) 0 var(--space-4);
}
.page-products__detail-kicker{
  font-family:var(--font-display);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-blue);
}
.page-products__detail-copy > p:not(.page-products__detail-kicker){
  color:var(--text-dim);
  line-height:1.8;
  margin-bottom:var(--space-5);
}
.page-products__feature-list{
  list-style:none;
  padding:0;
  border-top:1px solid rgba(138,147,166,.2);
  margin:0 0 var(--space-6);
}
.page-products__feature-list li{
  position:relative;
  padding:var(--space-4) 0 var(--space-4) var(--space-5);
  border-bottom:1px solid rgba(138,147,166,.2);
  color:var(--text-main);
  line-height:1.7;
}
.page-products__feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.3rem;
  width:8px;
  height:8px;
  background:var(--accent-purple);
  transform:rotate(45deg);
}
.page-products__feature-list li:nth-child(2)::before{
  background:var(--accent-blue);
}
.page-products__feature-list li:nth-child(3)::before{
  background:var(--accent-yellow);
}
.page-products__feature-list li:nth-child(4)::before{
  background:var(--success);
}
.page-products__detail-media{
  min-width:0;
}
.page-products__detail-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* ===== 开放API代码块 ===== */
.page-products__api-block{
  margin-top:var(--space-7);
  padding:var(--space-6);
  background:#0E1017;
  border:1px solid rgba(164,76,255,.25);
}
.page-products__api-block-title{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.14em;
  color:var(--accent-yellow);
  margin-bottom:var(--space-4);
}
.page-products__api-code{
  background:#090B12;
  border-left:3px solid var(--accent-purple);
  padding:var(--space-5);
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:.875rem;
  line-height:1.9;
  color:var(--success);
  margin:0 0 var(--space-4);
}
.page-products__api-note{
  color:var(--text-dim);
  font-size:var(--text-small);
  line-height:1.7;
  margin-bottom:var(--space-4);
}

/* ===== 帮助与支持 ===== */
.page-products__help{
  padding:var(--space-8) 0;
}
.page-products__help-grid{
  display:grid;
  gap:var(--space-6);
}
.page-products__help-card{
  padding:var(--space-6);
  background:var(--bg-panel);
  border:1px solid rgba(138,147,166,.25);
}
.page-products__help-card h3{
  margin:0 0 var(--space-3);
  font-family:var(--font-display);
  font-size:1.35rem;
}
.page-products__help-card p{
  color:var(--text-dim);
  line-height:1.7;
  margin-bottom:var(--space-4);
}
.page-products__help-card .btn{
  margin-top:var(--space-2);
}

/* ===== 动效克制 ===== */
@media (prefers-reduced-motion: reduce){
  .page-products .pane-tabs__tab,
  .page-products .pane-tabs__tab::after,
  .page-products__overview-card,
  .page-products__overview-card-link,
  .page-products__overview-card-arrow{
    animation:none !important;
    transition:none !important;
  }
}

/* ===== ≥768px ===== */
@media (min-width: 768px){
  .page-products__overview-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--space-6);
  }
  .page-products .pane-tabs__panel{
    padding:var(--space-7);
  }
  .page-products__help-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .page-products__tab-nav{
    overflow-x:visible;
  }
  .page-products .pane-tabs__tab{
    flex:1 1 auto;
  }
}

/* ===== ≥1024px ===== */
@media (min-width: 1024px){
  .page-products__hero-grid{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:var(--space-7);
    align-items:center;
    padding:var(--space-7) 0;
  }
  .page-products__hero-desc{
    margin-bottom:var(--space-5);
  }
  .page-products__hero-visual img{
    max-height:440px;
    width:100%;
  }
  .page-products__detail-layout{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:var(--space-7);
    align-items:center;
  }
  .page-products__detail-layout--reverse{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  }
  .page-products__api-block{
    padding:var(--space-7);
  }
}