.page-products {
  --pt-hair: rgba(58, 58, 69, 0.14);
  --pt-hair-dark: rgba(201, 203, 218, 0.2);
  --pt-cut: 16px;
  --pt-track: linear-gradient(180deg, var(--tt-neon), var(--tt-gold) 58%, var(--tt-coral));
}

/* ---------- hero ---------- */
.page-products .pt-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 56px) 0 clamp(34px, 6vw, 68px);
  border-bottom: 1px solid var(--pt-hair);
  background:
    radial-gradient(120% 82% at 88% 0%, rgba(75, 46, 131, 0.16), transparent 62%),
    radial-gradient(92% 62% at 2% 100%, rgba(37, 224, 208, 0.16), transparent 64%),
    var(--tt-cream);
}

.page-products .pt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(rgba(37, 224, 208, 0.55) 1.4px, transparent 1.6px),
    radial-gradient(rgba(242, 180, 65, 0.5) 1.2px, transparent 1.4px);
  background-size: 92px 92px, 148px 148px;
  background-position: 10% 22%, 72% 68%;
  -webkit-mask-image: linear-gradient(118deg, #000 0%, transparent 64%);
  mask-image: linear-gradient(118deg, #000 0%, transparent 64%);
}

.page-products .pt-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .pt-hero__kicker {
  margin: 0 0 12px;
}

.page-products .pt-hero h1 {
  margin: 0 0 18px;
  max-width: 17ch;
  font-family: var(--tt-font-display);
  font-size: clamp(34px, 7.4vw, 70px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--tt-night);
  text-shadow: 0 0 26px rgba(37, 224, 208, 0.24);
}

.page-products .pt-hero__lead {
  max-width: 52ch;
  margin: 0 0 26px;
  color: var(--tt-stone);
}

.page-products .pt-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pt-hero__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--pt-hair);
  max-width: 56ch;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(58, 58, 69, 0.78);
}

/* ---------- 通用小标题 ---------- */
.page-products .pt-h2 {
  margin: 10px 0 14px;
  font-family: var(--tt-font-display);
  font-size: clamp(26px, 4.6vw, 44px);
  font-weight: 900;
  line-height: 1.16;
  color: var(--tt-night);
  max-width: 22ch;
}

.page-products .pt-h2--light {
  color: var(--tt-cream);
  text-shadow: 0 0 30px rgba(37, 224, 208, 0.22);
}

.page-products .pt-sub {
  margin: 0 0 30px;
  max-width: 60ch;
  color: rgba(58, 58, 69, 0.86);
}

.page-products .pt-sub--light {
  color: var(--tt-silver);
}

.page-products .tt-section--night .pt-label,
.page-products .tt-section--purple .pt-label {
  color: var(--tt-neon);
}

/* ---------- 01 下载入口 ---------- */
.page-products .pt-entry {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
  margin-top: 26px;
}

.page-products .pt-entry__copy h2 {
  margin: 0 0 14px;
  font-family: var(--tt-font-display);
  font-size: clamp(24px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--tt-night);
}

.page-products .pt-entry__copy > p {
  margin: 0 0 22px;
  max-width: 50ch;
  color: var(--tt-stone);
}

.page-products .pt-specs {
  display: grid;
  gap: 1px;
  margin: 0 0 26px;
  border: 1px solid var(--pt-hair);
  background: var(--pt-hair);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  overflow: hidden;
}

.page-products .pt-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.86);
}

.page-products .pt-spec dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(58, 58, 69, 0.66);
}

.page-products .pt-spec dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--tt-night);
  text-align: right;
}

.page-products .pt-entry__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pt-entry__art {
  margin: 0;
}

/* ---------- 02 版本对照 ---------- */
.page-products .pt-clients {
  display: grid;
  gap: 18px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.page-products .pt-client {
  position: relative;
  padding: 22px 22px 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--pt-hair-dark);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: transform 0.32s var(--tt-ease), border-color 0.32s var(--tt-ease), background 0.32s var(--tt-ease);
}

.page-products .pt-client:hover {
  transform: translateY(-4px) rotate(-0.6deg);
  border-color: rgba(37, 224, 208, 0.55);
  background: rgba(37, 224, 208, 0.08);
}

.page-products .pt-client__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-products .pt-client__os {
  font-family: var(--tt-font-display);
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 900;
  color: var(--tt-cream);
  letter-spacing: 0.02em;
}

.page-products .pt-client__ver {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--tt-silver);
}

.page-products .pt-client__rows {
  margin: 0;
  display: grid;
  gap: 0;
}

.page-products .pt-client__rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 9px 0;
  border-top: 1px dashed var(--pt-hair-dark);
}

.page-products .pt-client__rows dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(201, 203, 218, 0.72);
}

.page-products .pt-client__rows dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-cream);
  text-align: right;
}

.page-products .pt-version-side {
  display: grid;
  gap: clamp(22px, 4vw, 36px);
  align-items: start;
}

.page-products .pt-version-art {
  margin: 0;
}

.page-products .pt-version-notes h3 {
  margin: 0 0 12px;
  font-family: var(--tt-font-display);
  font-size: clamp(19px, 3.2vw, 26px);
  font-weight: 900;
  color: var(--tt-cream);
}

.page-products .pt-dots {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.page-products .pt-dots li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tt-silver);
}

.page-products .pt-dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--tt-neon), var(--tt-gold));
}

/* ---------- 03 安装四步 ---------- */
.page-products .pt-steps {
  position: relative;
  margin: 30px 0 34px;
  padding: 0 0 0 54px;
  list-style: none;
  display: grid;
  gap: 20px;
}

.page-products .pt-steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--pt-track);
  opacity: 0.55;
}

.page-products .pt-step {
  position: relative;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--pt-hair);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform 0.3s var(--tt-ease), box-shadow 0.3s var(--tt-ease);
}

.page-products .pt-step:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: 0 20px 34px -26px rgba(27, 19, 48, 0.7);
}

.page-products .pt-step__no {
  position: absolute;
  left: -54px;
  top: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tt-night);
  border: 2px solid var(--tt-neon);
  color: var(--tt-gold);
  font-family: var(--tt-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.page-products .pt-step__body h3 {
  margin: 0 0 8px;
  font-family: var(--tt-font-display);
  font-size: clamp(18px, 3vw, 23px);
  font-weight: 900;
  color: var(--tt-night);
}

.page-products .pt-step__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--tt-stone);
}

.page-products .pt-step-art {
  margin: 0;
}

/* ---------- 04 系统要求 ---------- */
.page-products .pt-reqs {
  display: grid;
  gap: 16px;
  margin: 30px 0 32px;
}

.page-products .pt-req {
  padding: 22px 20px;
  background: rgba(27, 19, 48, 0.22);
  border: 1px solid var(--pt-hair-dark);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: transform 0.3s var(--tt-ease), border-color 0.3s var(--tt-ease);
}

.page-products .pt-req:hover {
  transform: translateY(-3px);
  border-color: rgba(242, 180, 65, 0.6);
}

.page-products .pt-req__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: var(--tt-neon);
  background: rgba(37, 224, 208, 0.12);
  border: 1px solid rgba(37, 224, 208, 0.4);
}

.page-products .pt-req h3 {
  margin: 0 0 8px;
  font-family: var(--tt-font-display);
  font-size: 19px;
  font-weight: 900;
  color: var(--tt-cream);
}

.page-products .pt-req p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(201, 203, 218, 0.9);
}

.page-products .pt-req-art {
  margin: 0;
}

/* ---------- 05 显示模式 ---------- */
.page-products .pt-modes {
  display: grid;
  gap: 18px;
  margin: 30px 0 32px;
}

.page-products .pt-mode {
  position: relative;
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--pt-hair);
  border-top: 5px solid var(--tt-moss);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform 0.3s var(--tt-ease), box-shadow 0.3s var(--tt-ease);
}

.page-products .pt-mode--wide {
  border-top-color: var(--tt-coral);
}

.page-products .pt-mode--big {
  border-top-color: var(--tt-gold);
  background:
    linear-gradient(160deg, rgba(75, 46, 131, 0.09), rgba(246, 241, 231, 0.92) 62%),
    rgba(255, 255, 255, 0.9);
}

.page-products .pt-mode:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 38px -28px rgba(27, 19, 48, 0.7);
}

.page-products .pt-mode__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--tt-night);
  background: rgba(110, 139, 90, 0.24);
}

.page-products .pt-mode--wide .pt-mode__badge {
  background: rgba(255, 107, 87, 0.24);
}

.page-products .pt-mode--big .pt-mode__badge {
  background: rgba(242, 180, 65, 0.34);
}

.page-products .pt-mode__size {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--tt-stone);
}

.page-products .pt-mode__size .tt-num {
  font-size: 1.7em;
  line-height: 1;
  color: var(--tt-moss);
}

.page-products .pt-mode--wide .pt-mode__size .tt-num {
  color: var(--tt-coral);
}

.page-products .pt-mode--big .pt-mode__size .tt-num {
  color: var(--tt-clay);
}

.page-products .pt-mode__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.page-products .pt-mode__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tt-stone);
}

.page-products .pt-mode__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.page-products .pt-mode-art {
  margin: 0;
}

/* ---------- 06 启动清单 ---------- */
.page-products .pt-check {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
  counter-reset: none;
}

.page-products .pt-check__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 20px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pt-hair-dark);
  border-left: 3px solid var(--tt-neon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: transform 0.3s var(--tt-ease), background 0.3s var(--tt-ease);
}

.page-products .pt-check__item:hover {
  transform: translateX(4px);
  background: rgba(37, 224, 208, 0.08);
}

.page-products .pt-check__no {
  font-family: var(--tt-font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tt-gold);
  padding-top: 4px;
}

.page-products .pt-check__item h3 {
  margin: 0 0 8px;
  font-family: var(--tt-font-display);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 900;
  color: var(--tt-cream);
}

.page-products .pt-check__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(201, 203, 218, 0.9);
}

/* ---------- 下一步 ---------- */
.page-products .pt-next {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

.page-products .pt-next__copy h2 {
  margin: 10px 0 14px;
  font-family: var(--tt-font-display);
  font-size: clamp(24px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.18;
  color: var(--tt-night);
  max-width: 20ch;
}

.page-products .pt-next__copy p {
  margin: 0;
  max-width: 48ch;
  color: var(--tt-stone);
}

.page-products .pt-next__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .pt-next__links a {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--pt-hair);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform 0.28s var(--tt-ease), border-color 0.28s var(--tt-ease), background 0.28s var(--tt-ease);
}

.page-products .pt-next__links a:hover,
.page-products .pt-next__links a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--tt-neon);
  background: rgba(37, 224, 208, 0.09);
}

.page-products .pt-next__links strong {
  font-family: var(--tt-font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--tt-night);
  letter-spacing: 0.01em;
}

.page-products .pt-next__links span {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(58, 58, 69, 0.8);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .pt-clients {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-products .pt-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

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

@media (min-width: 960px) {
  .page-products .pt-entry {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-products .pt-version-side {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-products .pt-reqs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pt-next {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-products .pt-steps {
    padding-left: 64px;
  }

  .page-products .pt-step__no {
    left: -64px;
  }

  .page-products .pt-hero h1 {
    max-width: 15ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pt-client,
  .page-products .pt-step,
  .page-products .pt-req,
  .page-products .pt-mode,
  .page-products .pt-check__item,
  .page-products .pt-next__links a {
    transition: none;
  }

  .page-products .pt-client:hover,
  .page-products .pt-step:hover,
  .page-products .pt-req:hover,
  .page-products .pt-mode:hover,
  .page-products .pt-check__item:hover,
  .page-products .pt-next__links a:hover,
  .page-products .pt-next__links a:focus-visible {
    transform: none;
  }
}
<<<END>>>

<main id="main-content" class="page-products">
  <div class="tt-shell">
    <nav class="tt-crumbs" aria-label="位置">
      <a href="/">大厅首页</a>
      <span class="tt-crumbs__sep" aria-hidden="true">›</span>
      <span aria-current="page">下载中心</span>
    </nav>
  </div>

  <section class="pt-hero">
    <div class="tt-shell pt-hero__inner">
      <p class="pt-hero__kicker tt-label tt-label--gold">下载中心 · 客户端获取</p>
      <h1>把天天娱乐大厅装进你的屏幕</h1>
      <p class="pt-hero__lead tt-lead">Windows 和 Android 各一份安装包，从拿到文件到第一次打开，四步能走完。屏幕越大，越建议启动后先调一次显示模式，再进大厅。</p>
      <div class="pt-hero__cta">
        <a class="tt-btn tt-btn--primary" href="#pt-download">看下载入口</a>
        <a class="tt-btn tt-btn--ghost" href="#pt-modes">显示模式怎么选</a>
      </div>
      <p class="pt-hero__note">安装包体积 78 MB 至 146 MB，视平台而定。更新节奏按周走，每月至少一次版本迭代说明。</p>
    </div>
  </section>

  <section class="tt-section tt-section--cream" id="pt-download">
    <div class="tt-shell">
      <p class="tt-label tt-label--gold">01 / 下载入口</p>
      <div class="pt-entry">
        <div class="pt-entry__copy">
          <h2>内地下载天天娱乐游戏大厅，从这一屏开始</h2>
          <p>帮助页第二屏集中放着客户端安装包与安装步骤，这里是同一批文件的展开说明。你在帮助页点到的那两个包，和下面写的是同一份。</p>
          <dl class="pt-specs">
            <div class="pt-spec">
              <dt>可选平台</dt>
              <dd>Windows 桌面端 · Android 移动端</dd>
            </div>
            <div class="pt-spec">
              <dt>当前版本</dt>
              <dd><span class="tt-num tt-num--gold">9.4</span></dd>
            </div>
            <div class="pt-spec">
              <dt>包体积区间</dt>
              <dd>78 MB – 146 MB</dd>
            </div>
            <div class="pt-spec">
              <dt>安装方式</dt>
              <dd>本地安装包直接运行，四步内完成</dd>
            </div>
          </dl>
          <div class="pt-entry__btns">
            <button type="button" class="tt-btn tt-btn--gold tt-copy" data-copy-value="天天娱乐大厅客户端 Windows 9.4（146 MB）｜Android 9.4（78 MB）｜安装包入口位于帮助页第二屏" data-copy-label="复制下载信息">复制下载信息</button>
            <a class="tt-btn tt-btn--line" href="/help-center/">去帮助页看入口</a>
          </div>
        </div>
        <figure class="pt-entry__art tt-frame tt-frame--wide">
          <img src="{zhanqunpic:h:760w:1200}" width="1200" height="760" alt="从帮助页第二屏进入客户端下载区域的第一视角操作路径示意" decoding="async">
          <figcaption class="tt-frame__label">从帮助页第二屏，两步点到安装包</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="tt-section tt-section--night" id="pt-versions">
    <div class="tt-shell">
      <p class="tt-label tt-label--neon">02 / 版本对照</p>
      <h2 class="pt-h2 pt-h2--light">两个平台，同一个版本号</h2>
      <p class="pt-sub pt-sub--light">大厅自 2016 年上线，至今完成 9 个大版本迭代，当前版本号 9.4。两端同步发布，配置要求差别主要在系统版本和内存。</p>

      <ul class="pt-clients">
        <li class="pt-client" data-reveal>
          <div class="pt-client__top">
            <span class="pt-client__os">Windows</span>
            <span class="tt-tag tt-tag--neon">桌面客户端</span>
          </div>
          <p class="pt-client__ver">版本 <span class="tt-num tt-num--gold">9.4</span></p>
          <dl class="pt-client__rows">
            <div><dt>安装包体积</dt><dd>146 MB</dd></div>
            <div><dt>操作系统</dt><dd>Windows 10 及以上，64 位</dd></div>
            <div><dt>建议内存</dt><dd>8 GB</dd></div>
            <div><dt>建议分辨率</dt><dd>1920 × 1080</dd></div>
          </dl>
        </li>
        <li class="pt-client" data-reveal>
          <div class="pt-client__top">
            <span class="pt-client__os">Android</span>
            <span class="tt-tag tt-tag--moss">移动客户端</span>
          </div>
          <p class="pt-client__ver">版本 <span class="tt-num tt-num--neon">9.4</span></p>
          <dl class="pt-client__rows">
            <div><dt>安装包体积</dt><dd>78 MB</dd></div>
            <div><dt>操作系统</dt><dd>Android 9 及以上</dd></div>
            <div><dt>建议运行内存</dt><dd>4 GB</dd></div>
            <div><dt>建议屏幕</dt><dd>6.1 英寸及以上</dd></div>
          </dl>
        </li>
      </ul>

      <div class="pt-version-side">
        <figure class="pt-version-art tt-frame tt-frame--square">
          <img src="{zhanqunpic:h:600w:600}" width="600" height="600" alt="手机端从官方入口获取安装包并完成安装的流程示意" loading="lazy" decoding="async">
          <figcaption class="tt-frame__label">移动端：拿到包，允许来源，点安装</figcaption>
        </figure>
        <div class="pt-version-notes">
          <h3>更新节奏，心里有个数</h3>
          <ul class="pt-dots">
            <li>更新记录按周发布，改动多的一周会有两到三条。</li>
            <li>每月至少一次版本迭代说明，写清哪一版动了什么。</li>
            <li>每季度出一份活动周期总览，方便提前安排时间。</li>
            <li>历史条目按版本迭代、活动周期、显示适配、下载引导四类归档，随时回看。</li>
          </ul>
          <a class="tt-btn tt-btn--gold tt-btn--sm" href="/notes/">打开更新手记</a>
        </div>
      </div>
    </div>
  </section>

  <section class="tt-section tt-section--cream" id="pt-steps">
    <div class="tt-shell">
      <p class="tt-label tt-label--gold">03 / 安装四步</p>
      <h2 class="pt-h2">照着这四步走，先装 Windows 端</h2>
      <p class="pt-sub">第一次装的人最容易卡在第二步的安装位置上。下面每一步都写了该看哪里，顺序不用记，跟着编号点就行。</p>

      <ol class="pt-steps">
        <li class="pt-step" data-reveal>
          <span class="pt-step__no" aria-hidden="true">01</span>
          <div class="pt-step__body">
            <h3>挑平台，拿安装包</h3>
            <p>在帮助页第二屏找到对应系统的安装包。Windows 端 146 MB，Android 端 78 MB，选错系统会提示无法打开。</p>
          </div>
        </li>
        <li class="pt-step" data-reveal>
          <span class="pt-step__no" aria-hidden="true">02</span>
          <div class="pt-step__body">
            <h3>双击运行，确认安装位置</h3>
            <p>默认装到系统盘，空间紧张就改到 D 盘或更大的分区。这一步只花十几秒。</p>
          </div>
        </li>
        <li class="pt-step" data-reveal>
          <span class="pt-step__no" aria-hidden="true">03</span>
          <div class="pt-step__body">
            <h3>等解压跑完，桌面出图标</h3>
            <p>进度条走完会自动收尾，桌面和开始菜单各留一个入口，哪个顺手用哪个。</p>
          </div>
        </li>
        <li class="pt-step" data-reveal>
          <span class="pt-step__no" aria-hidden="true">04</span>
          <div class="pt-step__body">
            <h3>首次启动，先调显示模式</h3>
            <p>打开客户端后别急着进大厅，先去右上角设置项里的显示模式切换，按屏幕尺寸选一档，后面会一直沿用。</p>
          </div>
        </li>
      </ol>

      <figure class="pt-step-art tt-frame tt-frame--wide">
        <img src="{zhanqunpic:h:540w:960}" width="960" height="540" alt="Windows 客户端安装四步示意，每步标注操作位置与简短说明" loading="lazy" decoding="async">
        <figcaption class="tt-frame__label">四个画面，对应上面四步</figcaption>
      </figure>
    </div>
  </section>

  <section class="tt-section tt-section--purple" id="pt-requirements">
    <div class="tt-shell">
      <p class="tt-label tt-label--neon">04 / 系统要求</p>
      <h2 class="pt-h2 pt-h2--light">先对一下环境，装的时候少绕路</h2>
      <p class="pt-sub pt-sub--light">下面这组配置是跑顺的底线。达不到也不必急，先升级系统版本，多数老机器升完就能装。</p>

      <div class="pt-reqs">
        <div class="pt-req" data-reveal>
          <span class="pt-req__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="3" y="4" width="18" height="12" rx="1.6"/><path d="M8 20h8M12 16v4"/></svg>
          </span>
          <h3>操作系统</h3>
          <p>Windows 10 及以上（64 位）；Android 9 及以上。低于这条线的环境需要先升级系统。</p>
        </div>
        <div class="pt-req" data-reveal>
          <span class="pt-req__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="5" y="7" width="14" height="10" rx="1.4"/><path d="M9 3v4M15 3v4M9 17v4M15 17v4"/></svg>
          </span>
          <h3>内存</h3>
          <p>Windows 建议 8 GB，Android 建议 4 GB 运行内存。开双窗口时留出余量会更稳。</p>
        </div>
        <div class="pt-req" data-reveal>
          <span class="pt-req__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="2.5" y="5" width="19" height="12" rx="1.6"/><path d="M8 21h8"/></svg>
          </span>
          <h3>分辨率</h3>
          <p>最低 1366 × 768，建议 1920 × 1080 起步。想用大屏模式，显示器要 27 英寸及以上。</p>
        </div>
        <div class="pt-req" data-reveal>
          <span class="pt-req__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 3v10"/><path d="M7 8l5 5 5-5"/><path d="M4 18h16"/></svg>
          </span>
          <h3>磁盘与网络</h3>
          <p>预留 600 MB 以上空间用于安装与后续更新。首次启动要联网拉取大厅内容。</p>
        </div>
      </div>

      <figure class="pt-req-art tt-frame tt-frame--wide">
        <img src="{zhanqunpic:h:400w:800}" width="800" height="400" alt="操作系统、内存与分辨率要求的图标组，标注对应数值" loading="lazy" decoding="async">
        <figcaption class="tt-frame__label">四项底线，对照一眼就清楚</figcaption>
      </figure>
    </div>
  </section>

  <section class="tt-section tt-section--cream" id="pt-modes">
    <div class="tt-shell">
      <p class="tt-label tt-label--gold">05 / 显示模式</p>
      <h2 class="pt-h2">大屏打开天天娱乐游戏大厅，先选对模式</h2>
      <p class="pt-sub">显示模式切换就在客户端右上角的设置项里，标准、宽屏、大屏三档。切换后的选择会保存在本地，下次打开自动沿用上一次的偏好，不用每次重设。</p>

      <div class="pt-modes">
        <article class="pt-mode" data-reveal>
          <span class="pt-mode__badge">标准</span>
          <p class="pt-mode__size"><span class="tt-num">21</span> 英寸及以下</p>
          <ul class="pt-mode__list">
            <li>缩放比例 100%</li>
            <li>单栏布局，信息按纵向排列</li>
            <li>笔记本和外接小屏的默认选择</li>
          </ul>
        </article>
        <article class="pt-mode pt-mode--wide" data-reveal>
          <span class="pt-mode__badge">宽屏</span>
          <p class="pt-mode__size"><span class="tt-num tt-num--coral">22</span>–<span class="tt-num tt-num--coral">26</span> 英寸</p>
          <ul class="pt-mode__list">
            <li>缩放比例 125%</li>
            <li>左右分栏，列表与详情同屏</li>
            <li>适合一边看更新记录一边逛大厅</li>
          </ul>
        </article>
        <article class="pt-mode pt-mode--big" data-reveal>
          <span class="pt-mode__badge">大屏</span>
          <p class="pt-mode__size"><span class="tt-num tt-num--gold">27</span> 英寸及以上</p>
          <ul class="pt-mode__list">
            <li>缩放比例 150%</li>
            <li>双栏与多窗并排，窗口可自由拖动</li>
            <li>为 2560 × 1440 及更高分辨率做了适配</li>
          </ul>
        </article>
      </div>

      <figure class="pt-mode-art tt-frame tt-frame--wide">
        <img src="{zhanqunpic:h:720w:1200}" width="1200" height="720" alt="标准、宽屏、大屏三种显示模式下的窗口布局对比，标注推荐分辨率与缩放比例" loading="lazy" decoding="async">
        <figcaption class="tt-frame__label">三档模式的窗口排布对比</figcaption>
      </figure>
    </div>
  </section>

  <section class="tt-section tt-section--night" id="pt-checklist">
    <div class="tt-shell">
      <p class="tt-label tt-label--neon">06 / 启动清单</p>
      <h2 class="pt-h2 pt-h2--light">打开之后，先把这三件事做完</h2>
      <p class="pt-sub pt-sub--light">装好只是开始。下面三件事花不到两分钟，能让后面每次进来都顺手。</p>

      <ol class="pt-check">
        <li class="pt-check__item" data-reveal>
          <span class="pt-check__no" aria-hidden="true">01</span>
          <div>
            <h3>切换显示模式</h3>
            <p>右上角设置项 → 显示模式切换，按显示器尺寸选标准、宽屏或大屏。设置存在本地，换回同一台机器不用再调。</p>
          </div>
        </li>
        <li class="pt-check__item" data-reveal>
          <span class="pt-check__no" aria-hidden="true">02</span>
          <div>
            <h3>打开更新记录</h3>
            <p>首页导航栏第三项就是更新记录，最近一轮活动周期已经排到 6 月底。先扫一遍，知道接下来有什么可玩。</p>
          </div>
        </li>
        <li class="pt-check__item" data-reveal>
          <span class="pt-check__no" aria-hidden="true">03</span>
          <div>
            <h3>确认会员中心位置</h3>
            <p>会员中心第一栏是注册额度说明，配套有八条常见问答。先认门，用得上时不用现找。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="tt-section tt-section--cream" id="pt-next">
    <div class="tt-shell">
      <div class="pt-next">
        <div class="pt-next__copy">
          <p class="tt-label tt-label--gold">接下来去哪</p>
          <h2>装完了还有问题，这几条路都能走</h2>
          <p>安装中途报错、显示看不对、额度不清楚，三条线各有各的答案。反馈渠道在工作日 9:00 至 21:00 有人值守。</p>
        </div>
        <ul class="pt-next__links">
          <li data-reveal><a href="/help-center/"><strong>帮助中心</strong><span>注册额度说明与大屏打开的常见问题</span></a></li>
          <li data-reveal><a href="/notes/"><strong>更新手记</strong><span>按周更新的记录与活动周期排期</span></a></li>
          <li data-reveal><a href="/usage/"><strong>使用说明</strong><span>账号与额度使用的规范边界</span></a></li>
          <li data-reveal><a href="/contact-us/"><strong>联系我们</strong><span>邮箱、电话与呼和浩特办公地址</span></a></li>
        </ul>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pt-hair: rgba(58, 58, 69, 0.14);
  --pt-hair-dark: rgba(201, 203, 218, 0.2);
  --pt-track: linear-gradient(180deg, var(--tt-neon), var(--tt-gold) 58%, var(--tt-coral));
}

/* ---------- hero ---------- */
.page-products .pt-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 56px) 0 clamp(34px, 6vw, 68px);
  border-bottom: 1px solid var(--pt-hair);
  background:
    radial-gradient(120% 82% at 88% 0%, rgba(75, 46, 131, 0.16), transparent 62%),
    radial-gradient(92% 62% at 2% 100%, rgba(37, 224, 208, 0.16), transparent 64%),
    var(--tt-cream);
}

.page-products .pt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(rgba(37, 224, 208, 0.55) 1.4px, transparent 1.6px),
    radial-gradient(rgba(242, 180, 65, 0.5) 1.2px, transparent 1.4px);
  background-size: 92px 92px, 148px 148px;
  background-position: 10% 22%, 72% 68%;
  -webkit-mask-image: linear-gradient(118deg, #000 0%, transparent 64%);
  mask-image: linear-gradient(118deg, #000 0%, transparent 64%);
}

.page-products .pt-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .pt-hero__kicker {
  margin: 0 0 12px;
}

.page-products .pt-hero h1 {
  margin: 0 0 18px;
  max-width: 17ch;
  font-family: var(--tt-font-display);
  font-size: clamp(34px, 7.4vw, 70px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--tt-night);
  text-shadow: 0 0 26px rgba(37, 224, 208, 0.24);
}

.page-products .pt-hero__lead {
  max-width: 52ch;
  margin: 0 0 26px;
  color: var(--tt-stone);
}

.page-products .pt-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pt-hero__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--pt-hair);
  max-width: 56ch;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(58, 58, 69, 0.78);
}

/* ---------- 通用小标题 ---------- */
.page-products .pt-h2 {
  margin: 10px 0 14px;
  font-family: var(--tt-font-display);
  font-size: clamp(26px, 4.6vw, 44px);
  font-weight: 900;
  line-height: 1.16;
  color: var(--tt-night);
  max-width: 22ch;
}

.page-products .pt-h2--light {
  color: var(--tt-cream);
  text-shadow: 0 0 30px rgba(37, 224, 208, 0.22);
}

.page-products .pt-sub {
  margin: 0 0 30px;
  max-width: 60ch;
  color: rgba(58, 58, 69, 0.86);
}

.page-products .pt-sub--light {
  color: var(--tt-silver);
}

.page-products .tt-section--night .pt-label,
.page-products .tt-section--purple .pt-label {
  color: var(--tt-neon);
}

/* ---------- 01 下载入口 ---------- */
.page-products .pt-entry {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
  margin-top: 26px;
}

.page-products .pt-entry__copy h2 {
  margin: 0 0 14px;
  font-family: var(--tt-font-display);
  font-size: clamp(24px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--tt-night);
}

.page-products .pt-entry__copy > p {
  margin: 0 0 22px;
  max-width: 50ch;
  color: var(--tt-stone);
}

.page-products .pt-specs {
  display: grid;
  gap: 1px;
  margin: 0 0 26px;
  border: 1px solid var(--pt-hair);
  background: var(--pt-hair);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  overflow: hidden;
}

.page-products .pt-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.86);
}

.page-products .pt-spec dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(58, 58, 69, 0.66);
}

.page-products .pt-spec dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--tt-night);
  text-align: right;
}

.page-products .pt-entry__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pt-entry__art {
  margin: 0;
}

/* ---------- 02 版本对照 ---------- */
.page-products .pt-clients {
  display: grid;
  gap: 18px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.page-products .pt-client {
  position: relative;
  padding: 22px 22px 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--pt-hair-dark);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: transform 0.32s var(--tt-ease), border-color 0.32s var(--tt-ease), background 0.32s var(--tt-ease);
}

.page-products .pt-client:hover {
  transform: translateY(-4px) rotate(-0.6deg);
  border-color: rgba(37, 224, 208, 0.55);
  background: rgba(37, 224, 208, 0.08);
}

.page-products .pt-client__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-products .pt-client__os {
  font-family: var(--tt-font-display);
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 900;
  color: var(--tt-cream);
  letter-spacing: 0.02em;
}

.page-products .pt-client__ver {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--tt-silver);
}

.page-products .pt-client__rows {
  margin: 0;
  display: grid;
}

.page-products .pt-client__rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 9px 0;
  border-top: 1px dashed var(--pt-hair-dark);
}

.page-products .pt-client__rows dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(201, 203, 218, 0.72);
}

.page-products .pt-client__rows dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-cream);
  text-align: right;
}

.page-products .pt-version-side {
  display: grid;
  gap: clamp(22px, 4vw, 36px);
  align-items: start;
}

.page-products .pt-version-art {
  margin: 0;
}

.page-products .pt-version-notes h3 {
  margin: 0 0 12px;
  font-family: var(--tt-font-display);
  font-size: clamp(19px, 3.2vw, 26px);
  font-weight: 900;
  color: var(--tt-cream);
}

.page-products .pt-dots {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.page-products .pt-dots li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tt-silver);
}

.page-products .pt-dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--tt-neon), var(--tt-gold));
}

/* ---------- 03 安装四步 ---------- */
.page-products .pt-steps {
  position: relative;
  margin: 30px 0 34px;
  padding: 0 0 0 54px;
  list-style: none;
  display: grid;
  gap: 20px;
}

.page-products .pt-steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--pt-track);
  opacity: 0.55;
}

.page-products .pt-step {
  position: relative;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--pt-hair);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform 0.3s var(--tt-ease), box-shadow 0.3s var(--tt-ease);
}

.page-products .pt-step:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: 0 20px 34px -26px rgba(27, 19, 48, 0.7);
}

.page-products .pt-step__no {
  position: absolute;
  left: -54px;
  top: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tt-night);
  border: 2px solid var(--tt-neon);
  color: var(--tt-gold);
  font-family: var(--tt-font-mono);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-products .pt-step__body h3 {
  margin: 0 0 8px;
  font-family: var(--tt-font-display);
  font-size: clamp(18px, 3vw, 23px);
  font-weight: 900;
  color: var(--tt-night);
}

.page-products .pt-step__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--tt-stone);
}

.page-products .pt-step-art {
  margin: 0;
}

/* ---------- 04 系统要求 ---------- */
.page-products .pt-reqs {
  display: grid;
  gap: 16px;
  margin: 30px 0 32px;
}

.page-products .pt-req {
  padding: 22px 20px;
  background: rgba(27, 19, 48, 0.22);
  border: 1px solid var(--pt-hair-dark);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: transform 0.3s var(--tt-ease), border-color 0.3s var(--tt-ease);
}

.page-products .pt-req:hover {
  transform: translateY(-3px);
  border-color: rgba(242, 180, 65, 0.6);
}

.page-products .pt-req__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: var(--tt-neon);
  background: rgba(37, 224, 208, 0.12);
  border: 1px solid rgba(37, 224, 208, 0.4);
}

.page-products .pt-req h3 {
  margin: 0 0 8px;
  font-family: var(--tt-font-display);
  font-size: 19px;
  font-weight: 900;
  color: var(--tt-cream);
}

.page-products .pt-req p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(201, 203, 218, 0.9);
}

.page-products .pt-req-art {
  margin: 0;
}

/* ---------- 05 显示模式 ---------- */
.page-products .pt-modes {
  display: grid;
  gap: 18px;
  margin: 30px 0 32px;
}

.page-products .pt-mode {
  position: relative;
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--pt-hair);
  border-top: 5px solid var(--tt-moss);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform 0.3s var(--tt-ease), box-shadow 0.3s var(--tt-ease);
}

.page-products .pt-mode--wide {
  border-top-color: var(--tt-coral);
}

.page-products .pt-mode--big {
  border-top-color: var(--tt-gold);
  background:
    linear-gradient(160deg, rgba(75, 46, 131, 0.09), rgba(246, 241, 231, 0.92) 62%),
    rgba(255, 255, 255, 0.9);
}

.page-products .pt-mode:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 38px -28px rgba(27, 19, 48, 0.7);
}

.page-products .pt-mode__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--tt-night);
  background: rgba(110, 139, 90, 0.24);
}

.page-products .pt-mode--wide .pt-mode__badge {
  background: rgba(255, 107, 87, 0.24);
}

.page-products .pt-mode--big .pt-mode__badge {
  background: rgba(242, 180, 65, 0.34);
}

.page-products .pt-mode__size {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--tt-stone);
}

.page-products .pt-mode__size .tt-num {
  font-size: 1.7em;
  line-height: 1;
  color: var(--tt-moss);
}

.page-products .pt-mode--wide .pt-mode__size .tt-num {
  color: var(--tt-coral);
}

.page-products .pt-mode--big .pt-mode__size .tt-num {
  color: var(--tt-clay);
}

.page-products .pt-mode__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.page-products .pt-mode__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tt-stone);
}

.page-products .pt-mode__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.page-products .pt-mode-art {
  margin: 0;
}

/* ---------- 06 启动清单 ---------- */
.page-products .pt-check {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.page-products .pt-check__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 20px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pt-hair-dark);
  border-left: 3px solid var(--tt-neon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: transform 0.3s var(--tt-ease), background 0.3s var(--tt-ease);
}

.page-products .pt-check__item:hover {
  transform: translateX(4px);
  background: rgba(37, 224, 208, 0.08);
}

.page-products .pt-check__no {
  font-family: var(--tt-font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tt-gold);
  padding-top: 4px;
}

.page-products .pt-check__item h3 {
  margin: 0 0 8px;
  font-family: var(--tt-font-display);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 900;
  color: var(--tt-cream);
}

.page-products .pt-check__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(201, 203, 218, 0.9);
}

/* ---------- 下一步 ---------- */
.page-products .pt-next {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

.page-products .pt-next__copy h2 {
  margin: 10px 0 14px;
  font-family: var(--tt-font-display);
  font-size: clamp(24px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.18;
  color: var(--tt-night);
  max-width: 20ch;
}

.page-products .pt-next__copy p {
  margin: 0;
  max-width: 48ch;
  color: var(--tt-stone);
}

.page-products .pt-next__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .pt-next__links a {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--pt-hair);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform 0.28s var(--tt-ease), border-color 0.28s var(--tt-ease), background 0.28s var(--tt-ease);
}

.page-products .pt-next__links a:hover,
.page-products .pt-next__links a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--tt-neon);
  background: rgba(37, 224, 208, 0.09);
}

.page-products .pt-next__links strong {
  font-family: var(--tt-font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--tt-night);
}

.page-products .pt-next__links span {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(58, 58, 69, 0.8);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .pt-clients {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-products .pt-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

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

@media (min-width: 960px) {
  .page-products .pt-entry {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-products .pt-version-side {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-products .pt-reqs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pt-next {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-products .pt-steps {
    padding-left: 64px;
  }

  .page-products .pt-step__no {
    left: -64px;
  }

  .page-products .pt-hero h1 {
    max-width: 15ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pt-client,
  .page-products .pt-step,
  .page-products .pt-req,
  .page-products .pt-mode,
  .page-products .pt-check__item,
  .page-products .pt-next__links a {
    transition: none;
  }

  .page-products .pt-client:hover,
  .page-products .pt-step:hover,
  .page-products .pt-req:hover,
  .page-products .pt-mode:hover,
  .page-products .pt-check__item:hover,
  .page-products .pt-next__links a:hover,
  .page-products .pt-next__links a:focus-visible {
    transform: none;
  }
}
<<<END>>>