.page-products {
  --tp-radius: 22px;
  --tp-shadow: 0 26px 60px -44px rgba(8, 40, 44, .9);
  background: var(--dj-bg);
}

.page-products .tp-head {
  max-width: 780px;
  margin-bottom: 40px;
}

.page-products .tp-head--invert .dj-index {
  color: var(--dj-orange);
}

/* ---------------- 首屏 ---------------- */

.page-products .tp-hero {
  position: relative;
  padding: 30px 0 58px;
  overflow: hidden;
  background:
    radial-gradient(120% 82% at 108% -6%, rgba(30, 111, 217, .11), transparent 62%),
    radial-gradient(90% 70% at -10% 110%, rgba(255, 106, 26, .08), transparent 60%),
    var(--dj-bg);
}

.page-products .tp-hero__grid {
  display: grid;
  gap: 36px;
  margin-top: 24px;
}

.page-products .tp-hero__copy .dj-display {
  margin: 12px 0 0;
}

.page-products .tp-hero__copy .dj-lead {
  margin-top: 18px;
}

.page-products .tp-hero__copy .dj-actions {
  margin-top: 26px;
}

.page-products .tp-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--dj-line);
}

.page-products .tp-hero__fact {
  min-width: 0;
}

.page-products .tp-hero__facts dt {
  font-family: var(--dj-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--dj-muted);
}

.page-products .tp-hero__facts dd {
  margin: 6px 0 0;
  font-family: var(--dj-font-mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--dj-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-products .tp-hero__visual {
  position: relative;
  min-height: 296px;
  border-radius: var(--tp-radius);
  overflow: hidden;
  background: linear-gradient(150deg, var(--dj-deep) 0%, var(--dj-deep-3) 58%, var(--dj-deep-2) 100%);
  box-shadow: var(--tp-shadow);
}

.page-products .tp-hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .065) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 62px);
}

.page-products .tp-hero__arc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 208px;
  height: 208px;
  margin: -104px 0 0 -104px;
  border: 1.5px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
}

.page-products .tp-hero__arc::after {
  content: "";
  position: absolute;
  inset: 36px;
  border: 1.5px solid rgba(255, 216, 191, .3);
  border-radius: 50%;
}

.page-products .tp-hero__pulse {
  position: absolute;
  top: 32px;
  right: 34px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dj-orange);
  box-shadow: 0 0 0 8px rgba(255, 106, 26, .18);
}

.page-products .tp-hero__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--dj-paper);
  box-shadow: 0 18px 40px -30px rgba(8, 40, 44, .95);
}

.page-products .tp-hero__card--a {
  top: 26px;
  left: 20px;
}

.page-products .tp-hero__card--b {
  right: 20px;
  bottom: 28px;
  border-left: 4px solid var(--dj-orange);
}

.page-products .tp-hero__card-k {
  font-family: var(--dj-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--dj-muted);
}

.page-products .tp-hero__card-v {
  font-size: 17px;
  font-weight: 800;
  color: var(--dj-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- 通用媒体 ---------------- */

.page-products .dj-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
}

.page-products .dj-media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- 功能 ---------------- */

.page-products .tp-func__body {
  display: grid;
  gap: 34px;
}

.page-products .tp-func__media {
  aspect-ratio: 16 / 10;
}

.page-products .tp-func__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tp-func;
}

.page-products .tp-func__item {
  counter-increment: tp-func;
  position: relative;
  padding: 22px 0 22px 54px;
  border-top: 1px solid var(--dj-line);
}

.page-products .tp-func__item:last-child {
  border-bottom: 1px solid var(--dj-line);
}

.page-products .tp-func__item::before {
  content: "0" counter(tp-func);
  position: absolute;
  top: 25px;
  left: 0;
  font-family: var(--dj-font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--dj-orange);
}

.page-products .tp-func__item h3 {
  margin: 0 0 8px;
}

.page-products .tp-func__item p {
  margin: 0;
  color: var(--dj-ink);
}

/* ---------------- 对比 ---------------- */

.page-products .tp-compare__figure {
  aspect-ratio: 16 / 10;
  margin: 0 0 34px;
}

.page-products .tp-compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  background: var(--dj-paper);
  box-shadow: var(--tp-shadow);
}

.page-products .tp-compare__table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-products .tp-compare__table thead th {
  padding: 16px 18px;
  text-align: left;
  background: var(--dj-deep);
  color: var(--dj-paper);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

.page-products .tp-compare__table thead th:last-child {
  text-align: right;
}

.page-products .tp-compare__row td {
  padding: 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--dj-line-soft);
  color: var(--dj-ink);
  line-height: 1.68;
}

.page-products .tp-compare__row:nth-child(even) td {
  background: var(--dj-blue-soft);
}

.page-products .tp-compare__row:last-child td {
  border-bottom: none;
}

.page-products .tp-compare__row td:first-child {
  font-weight: 800;
  color: var(--dj-deep);
  white-space: nowrap;
}

.page-products .tp-compare__score {
  text-align: right;
  white-space: nowrap;
}

.page-products .tp-compare__bar {
  display: block;
  width: 96px;
  height: 6px;
  margin: 4px 0 8px auto;
  border-radius: var(--dj-pill);
  background: rgba(14, 58, 63, .12);
  overflow: hidden;
}

.page-products .tp-compare__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dj-blue), var(--dj-deep-3));
}

.page-products .tp-compare__row:nth-child(1) .tp-compare__bar i { width: 98%; }
.page-products .tp-compare__row:nth-child(2) .tp-compare__bar i { width: 96%; }
.page-products .tp-compare__row:nth-child(3) .tp-compare__bar i { width: 92%; }
.page-products .tp-compare__row:nth-child(4) .tp-compare__bar i { width: 94%; }
.page-products .tp-compare__row:nth-child(5) .tp-compare__bar i { width: 96%; }
.page-products .tp-compare__row:nth-child(6) .tp-compare__bar i { width: 90%; }

.page-products .tp-compare__num {
  font-family: var(--dj-font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--dj-deep);
  font-variant-numeric: tabular-nums;
}

/* ---------------- 历史数据 ---------------- */

.page-products .tp-history__grid {
  display: grid;
  gap: 34px;
}

.page-products .tp-history__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-products .tp-history__list li {
  padding-left: 18px;
  border-left: 3px solid var(--dj-blue);
  color: var(--dj-ink);
  line-height: 1.72;
}

.page-products .tp-history__list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--dj-deep);
  font-size: 16px;
}

.page-products .tp-history__media {
  aspect-ratio: 12 / 7;
}

.page-products .tp-history__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px dashed var(--dj-line);
}

.page-products .tp-history__pager-label {
  font-family: var(--dj-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--dj-muted);
}

.page-products .tp-history__pager-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .tp-history__pager-list li {
  padding: 8px 16px;
  border-radius: var(--dj-pill);
  border: 1px solid var(--dj-line);
  background: var(--dj-paper);
  font-size: 14px;
  color: var(--dj-ink);
  white-space: nowrap;
}

.page-products .tp-history__pager-list .is-current {
  background: var(--dj-deep);
  border-color: var(--dj-deep);
  color: var(--dj-paper);
  font-weight: 700;
}

/* ---------------- 旧版专区 ---------------- */

.page-products .tp-legacy__grid {
  display: grid;
  gap: 20px;
}

.page-products .tp-legacy__panel {
  padding: 26px 24px;
  border-radius: var(--tp-radius);
  background: var(--dj-paper);
  border: 1px solid var(--dj-line);
  box-shadow: var(--tp-shadow);
}

.page-products .tp-legacy__panel--old {
  border-top: 5px solid var(--dj-moss);
}

.page-products .tp-legacy__panel--new {
  border-top: 5px solid var(--dj-orange);
}

.page-products .tp-legacy__panel h3 {
  margin: 0;
}

.page-products .tp-legacy__tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: var(--dj-pill);
  font-family: var(--dj-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  background: rgba(92, 122, 90, .15);
  color: #3F5A3D;
}

.page-products .tp-legacy__tag--orange {
  background: var(--dj-orange-soft);
  color: #8E3A12;
}

.page-products .tp-legacy__panel ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .tp-legacy__panel li {
  position: relative;
  padding-left: 20px;
  color: var(--dj-ink);
  line-height: 1.7;
}

.page-products .tp-legacy__panel li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dj-orange);
}

.page-products .tp-legacy__panel--old li::before {
  background: var(--dj-moss);
}

.page-products .tp-legacy__media {
  aspect-ratio: 16 / 10;
  margin-top: 34px;
}

/* ---------------- 下载 ---------------- */

.page-products .tp-download {
  background: linear-gradient(160deg, var(--dj-deep) 0%, var(--dj-deep-2) 100%);
  color: rgba(247, 244, 236, .86);
}

.page-products .tp-download .dj-h2 {
  color: var(--dj-paper);
}

.page-products .tp-download .dj-lead {
  color: rgba(247, 244, 236, .78);
}

.page-products .tp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-products .tp-steps__item {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 18px;
  background: rgba(247, 244, 236, .06);
  border: 1px solid rgba(247, 244, 236, .16);
}

.page-products .tp-steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--dj-orange);
  color: #FFFFFF;
  font-family: var(--dj-font-mono);
  font-size: 14px;
  font-weight: 700;
}

.page-products .tp-steps__item h3 {
  margin: 0 0 10px;
  color: var(--dj-paper);
}

.page-products .tp-steps__item p {
  margin: 0;
  color: rgba(247, 244, 236, .78);
}

.page-products .tp-download__figure {
  aspect-ratio: 2 / 1;
  margin-top: 42px;
}

.page-products .tp-download__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.page-products .tp-download .dj-btn--ghost {
  border-color: rgba(247, 244, 236, .42);
  color: var(--dj-paper);
}

/* ---------------- 适合谁用 ---------------- */

.page-products .tp-audience__grid {
  display: grid;
  gap: 18px;
}

.page-products .tp-audience__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px;
}

.page-products .tp-audience__card .dj-card__title {
  margin: 0;
}

.page-products .tp-audience__text {
  margin: 0;
  color: var(--dj-ink);
  line-height: 1.7;
}

.page-products .tp-audience__rec {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--dj-line);
  font-family: var(--dj-font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--blue, #1E6FD9);
}

/* ---------------- 延伸 ---------------- */

.page-products .tp-more__inner {
  display: grid;
  gap: 22px;
  padding: 32px 26px;
  border-radius: var(--tp-radius);
  background: linear-gradient(118deg, var(--dj-blue-soft) 0%, var(--dj-orange-soft) 100%);
}

.page-products .tp-more__text {
  margin: 0;
  color: var(--dj-deep);
  font-size: 17px;
  line-height: 1.72;
}

/* ---------------- 响应式 ---------------- */

@media (min-width: 640px) {
  .page-products .tp-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .tp-hero__facts dd {
    font-size: 22px;
  }

  .page-products .tp-audience__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-products .tp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }

  .page-products .tp-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 46px;
    right: -26px;
    width: 26px;
    height: 2px;
    background: rgba(255, 216, 191, .42);
  }

  .page-products .tp-legacy__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

@media (min-width: 960px) {
  .page-products .tp-hero {
    padding: 36px 0 72px;
  }

  .page-products .tp-hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 56px;
    align-items: center;
  }

  .page-products .tp-hero__visual {
    min-height: 420px;
  }

  .page-products .tp-func__body {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: 52px;
    align-items: start;
  }

  .page-products .tp-func__media {
    position: sticky;
    top: 122px;
    aspect-ratio: 4 / 5;
  }

  .page-products .tp-history__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
  }

  .page-products .tp-compare__figure {
    aspect-ratio: 21 / 9;
  }

  .page-products .tp-legacy__media {
    aspect-ratio: 21 / 9;
  }

  .page-products .tp-more__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 44px;
    padding: 38px 40px;
  }
}

@media (min-width: 1120px) {
  .page-products .tp-audience__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tp-hero__pulse {
    box-shadow: none;
  }
}