.page-products{
  --platform-index-width: 220px;
  --platform-console-bg: #0F1E2E;
  background:
    linear-gradient(180deg, rgba(0, 255, 136, 0.03), transparent 340px),
    var(--color-deep-space);
  color: var(--color-cloud);
}
.page-products .platform-layout{
  max-width: 1460px;
  margin-inline: auto;
  padding: 1.25rem 0.75rem 3rem;
}
.page-products .container{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.page-products .container-narrow{
  max-width: 980px;
}
.page-products .platform-content{
  min-width: 0;
}
.page-products .platform-content > section{
  margin-bottom: 4rem;
}
.page-products section[id]{
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.page-products .section-rule{
  margin-block: 3rem;
}
.page-products .breadcrumb{
  margin: 1.25rem 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.page-products .section-head{
  margin-bottom: 2rem;
  border-left: 3px solid var(--color-neon-green);
  padding-left: 1rem;
}
.page-products .section-index{
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-inferno-orange);
  letter-spacing: 0.06em;
}
.page-products .section-title{
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  color: var(--color-cloud);
}
.page-products .section-sub{
  max-width: 52em;
  margin: 0;
  color: var(--color-mist);
  line-height: 1.7;
}

/* 页面内章节索引 */
.page-index{
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 1rem;
  margin-bottom: 1.5rem;
  scrollbar-width: none;
}
.page-index::-webkit-scrollbar{ display: none; }
.page-index a{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-line);
  background: rgba(27, 38, 59, 0.7);
  color: var(--color-mist);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}
.page-index a span{
  color: var(--color-neon-green);
}
.page-index a:hover,
.page-index a:focus{
  color: var(--color-cloud);
  border-color: var(--color-neon-green);
  background: var(--color-slate);
}

/* 框景首屏控制台 */
.console-frame{
  position: relative;
  border: 1px solid var(--color-line);
  background:
    linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent 42%),
    var(--platform-console-bg);
  box-shadow: var(--shadow-soft);
  margin-bottom: 1rem;
  overflow: hidden;
}
.console-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(0, 255, 136, 0.05) 60px 61px),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(0, 255, 136, 0.04) 24px 25px);
}
.console-frame::after{
  content: "";
  display: block;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--color-neon-green) 0 2px, transparent 2px 14px);
  opacity: 0.55;
}
.console-frame__bar{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-line);
  background: rgba(13, 27, 42, 0.66);
}
.console-frame__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-inferno-orange);
}
.console-frame__dot:nth-child(2){ background: var(--color-amber); }
.console-frame__dot:nth-child(3){ background: var(--color-neon-green); }
.console-frame__url{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-mist);
}
.console-hero{
  position: relative;
  padding: 2rem 1.5rem 2.75rem;
}
.console-hero__kicker{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.console-hero h1{
  margin: 0 0 1rem;
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-cloud);
}
.console-hero h1::after{
  content: "";
  display: block;
  width: clamp(3rem, 10vw, 6rem);
  height: 4px;
  margin-top: 0.75rem;
  background: linear-gradient(90deg, var(--color-neon-green), transparent);
}
.console-hero__lead{
  max-width: 46em;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-mist);
}
.console-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.console-hero__stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 2.25rem 0 0;
  border: 1px solid var(--color-line);
  background: var(--color-line);
}
.console-hero__stats > div{
  background: rgba(13, 27, 42, 0.92);
  padding: 0.9rem 1rem;
}
.console-hero__stats dt{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mist);
}
.console-hero__stats dd{
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-neon-green);
}

/* 核心功能 */
.features-layout{
  display: grid;
  gap: 1.5rem;
}
.features-modules{
  display: grid;
  gap: 1rem;
}
.feature-card{
  position: relative;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 40%),
    var(--color-slate);
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.feature-card::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent var(--color-line) transparent transparent;
  transition: border-color var(--transition-fast);
}
.feature-card:hover,
.feature-card:focus-within{
  transform: translateY(-4px);
  border-color: var(--color-neon-green);
  box-shadow: var(--shadow-hover);
}
.feature-card:hover::after,
.feature-card:focus-within::after{
  border-color: transparent var(--color-inferno-orange) transparent transparent;
}
.feature-card__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.feature-card__code{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-neon-green);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 2px;
  padding: 0.15rem 0.45rem;
}
.feature-card__status{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-inferno-orange);
  box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.5);
  transition:
    transform var(--transition-fast),
    background var(--transition-fast);
}
.feature-card:hover .feature-card__status,
.feature-card:focus-within .feature-card__status{
  background: var(--color-neon-green);
  transform: scale(1.35);
}
.feature-card h3{
  margin: 0 0 0.5rem;
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-cloud);
}
.feature-card p{
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-mist);
}
.feature-more{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-inferno-orange);
  transition: color var(--transition-fast);
}
.feature-more::-webkit-details-marker{ display: none; }
.feature-more::before{
  content: "+";
  color: var(--color-neon-green);
  font-weight: 700;
}
.feature-card details[open] .feature-more::before{ content: "–"; }
.feature-meta{
  margin: 0.75rem 0 0;
  border-top: 1px dashed var(--color-line);
  padding: 0.75rem 0 0;
}
.feature-meta div{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}
.feature-meta dt{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-mist);
}
.feature-meta dd{
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-cloud);
  text-align: right;
}
.feature-meta dd a{
  color: var(--color-neon-green);
  text-decoration: none;
}
.features-visuals{
  display: grid;
  gap: 1rem;
  align-content: start;
}
.page-products .media-frame{
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-graphite);
}
.page-products .media-frame img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 版本下载 */
.download-panel{
  position: relative;
  display: grid;
  gap: 1.5rem;
  background:
    linear-gradient(135deg, rgba(255, 107, 53, 0.06), transparent 45%),
    var(--color-slate);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.75rem;
  overflow: hidden;
}
.download-panel::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 44px 44px 0;
  border-color: transparent var(--color-neon-green) transparent transparent;
  opacity: 0.6;
}
.dl-list{
  margin: 0;
}
.dl-list div{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.5rem;
  border-bottom: 1px dashed rgba(0, 255, 136, 0.15);
}
.dl-list dt{
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-mist);
}
.dl-list dd{
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-cloud);
  text-align: right;
}
.download-panel__action{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.download-qr summary{
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
.download-qr summary::-webkit-details-marker{ display: none; }
.download-qr__body{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-line);
  background: rgba(13, 27, 42, 0.75);
}
.download-qr__svg{
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border: 1px solid var(--color-line);
}
.download-qr__body p{
  margin: 0;
  max-width: 20em;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-mist);
}
.download-panel__links{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* 版本演进 */
.version-track{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 2rem 0 2.25rem;
  padding: 1.5rem 0;
  overflow-x: auto;
}
.version-track::before{
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 1.65rem;
  height: 2px;
  background: linear-gradient(90deg, var(--color-mist) 0%, var(--color-neon-green) 70%, var(--color-inferno-orange) 100%);
}
.version-track__node{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  background: var(--color-deep-space);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-mist);
}
.version-track__node::before{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-graphite);
  border: 2px solid var(--color-mist);
}
.version-track__node small{
  font-size: 0.6875rem;
  color: var(--color-mist);
  white-space: nowrap;
}
.version-track__node.is-now{
  color: var(--color-neon-green);
  font-weight: 700;
}
.version-track__node.is-now::before{
  width: 20px;
  height: 20px;
  background: var(--color-neon-green);
  border-color: var(--color-neon-green);
  box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.15);
}
.compare-grid{
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.compare-card{
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-slate);
}
.compare-card--now{
  border-top: 3px solid var(--color-neon-green);
  background:
    linear-gradient(160deg, rgba(0, 255, 136, 0.05), transparent 40%),
    var(--color-slate);
}
.compare-card--old{
  border-top: 3px solid var(--color-mist);
  opacity: 0.92;
}
.compare-card header{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.compare-card h3{
  margin: 0;
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-cloud);
}
.compare-card ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.compare-card li{
  position: relative;
  padding: 0.45rem 0 0.45rem 1.5rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 0.9375rem;
  color: var(--color-cloud);
}
.compare-card li::before{
  content: "+";
  position: absolute;
  left: 0;
  top: 0.45rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-neon-green);
}
.compare-card--old li::before{
  content: "—";
  color: var(--color-mist);
}
.compare-note{
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--color-mist);
}
.compare-note a{
  color: var(--color-neon-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}

/* 服务模式 */
.plan-wrap{
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.plan-card{
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(27, 38, 59, 0.8);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.plan-card--pro{
  background:
    linear-gradient(150deg, rgba(255, 107, 53, 0.08), transparent 50%),
    var(--color-slate);
  border-color: rgba(255, 107, 53, 0.4);
}
.plan-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.plan-card h3{
  margin: 0 0 0.25rem;
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--color-cloud);
}
.plan-card__tag{
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-inferno-orange);
}
.plan-card ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-card li{
  position: relative;
  padding: 0.4rem 0 0.4rem 1.35rem;
  border-bottom: 1px dashed rgba(0, 255, 136, 0.12);
  font-size: 0.9375rem;
  color: var(--color-cloud);
}
.plan-card li::before{
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-neon-green);
}
.plan-note{
  margin: 0 0 1.5rem;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  padding: 1rem;
}
.plan-note summary{
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-amber);
}
.plan-note summary::-webkit-details-marker{ display: none; }
.plan-note p{
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-mist);
}

/* 技术架构 */
.arch-layers{
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}
.arch-layer{
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(27, 38, 59, 0.85);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
}
.arch-layer:hover{
  transform: translateY(-2px);
  border-color: var(--color-neon-green);
}
.arch-layer__key{
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-inferno-orange);
  border: 1px solid rgba(255, 107, 53, 0.4);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
}
.arch-layer div strong{
  display: block;
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-cloud);
}
.arch-layer div small{
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--color-mist);
}
.arch-facts{
  display: grid;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 1.25rem;
  border-left: 3px solid var(--color-amber);
  background: rgba(255, 195, 0, 0.04);
  color: var(--color-mist);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.arch-facts p{ margin: 0; }

/* 页面导航 */
.guide-grid{
  display: grid;
  gap: 1rem;
}
.guide-tile{
  position: relative;
  display: block;
  padding: 1.25rem;
  background: var(--color-slate);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-cloud);
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}
.guide-tile::after{
  content: "→";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-neon-green);
  transition: right var(--transition-fast);
}
.guide-tile span{
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-mist);
}
.guide-tile:hover,
.guide-tile:focus{
  transform: translateY(-3px);
  border-color: var(--color-neon-green);
  background: rgba(0, 255, 136, 0.04);
}
.guide-tile:hover::after{ right: 0.75rem; }

@media (min-width: 760px){
  .console-hero{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .console-hero__content{ flex: 1 1 58%; }
  .console-hero__stats{
    flex: 0 1 38%;
    margin-top: 0;
  }
  .features-layout{
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .features-modules{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features-visuals{
    grid-template-columns: 1fr;
  }
  .download-panel{
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .compare-grid{
    grid-template-columns: 1fr 1fr;
  }
  .plan-wrap{
    grid-template-columns: 1fr 1fr;
  }
  .guide-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px){
  .arch-layers{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .arch-layer{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 150px;
  }
  .arch-layer:not(:last-child)::after{
    content: "→";
    position: absolute;
    right: -1.1rem;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--color-neon-green);
  }
}

@media (min-width: 1180px){
  .page-products .platform-layout{
    display: grid;
    grid-template-columns: var(--platform-index-width) minmax(0, 1fr);
    gap: 2.5rem;
    padding: 2.5rem 2rem 5rem;
  }
  .page-index{
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0;
    padding: 0.5rem;
    border-left: 2px solid var(--color-line);
    overflow: visible;
  }
  .page-index a{
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.625rem 0.75rem;
  }
  .page-index a::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-neon-green);
    opacity: 0.4;
    transition: opacity var(--transition-fast);
  }
  .page-index a:hover::before,
  .page-index a:focus::before{
    opacity: 1;
  }
}

@media (min-width: 1280px){
  .guide-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .features-visuals{
    grid-template-columns: 1fr;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}