.page-products {
  display: block;
  padding-bottom: clamp(48px, 8vw, 96px);
  color: var(--c-glass);
}

.page-products .breadcrumbs {
  margin-bottom: clamp(18px, 3vw, 30px);
  font-size: 13px;
  color: var(--c-mist);
}
.page-products .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .breadcrumbs a {
  color: var(--c-mist);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.page-products .breadcrumbs a:hover { color: var(--c-cyan); }
.page-products .breadcrumbs li[aria-current] { color: var(--c-glass); }

/* ---------- HERO ---------- */
.page-products .prod-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: clamp(24px, 5vw, 52px) 0 clamp(30px, 5vw, 58px);
  margin-bottom: clamp(30px, 5vw, 62px);
  border-bottom: 1px solid var(--c-edge);
}
.page-products .prod-hero__copy .eyebrow { display: block; }
.page-products .prod-hero__copy h1 {
  margin: 10px 0 0;
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--c-glass) 35%, var(--c-cyan) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-products .prod-hero__copy .lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--c-mist);
}
.page-products .prod-hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-products .prod-hero__stamp {
  position: relative;
  display: grid;
  place-content: center;
  padding: 26px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--c-edge);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(53, 242, 225, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(123, 91, 255, 0.18), rgba(16, 26, 61, 0.75) 70%);
  text-align: center;
  overflow: hidden;
}
.page-products .prod-hero__stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(232, 241, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: prod-sheen 9s linear infinite;
  pointer-events: none;
}
@keyframes prod-sheen {
  0%, 62% { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}
.page-products .prod-hero__v {
  display: block;
  font-size: clamp(76px, 15vw, 150px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.05em;
  background: linear-gradient(150deg, var(--c-cyan), var(--c-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-products .prod-hero__vlabel {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--c-cyan);
}
.page-products .prod-hero__vnote {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-mist);
}

/* ---------- OVERVIEW ---------- */
.page-products #overview .prod-overview { align-items: start; }
.page-products .prod-overview__visual .media { margin: 0; }
.page-products .prod-overview__facts {
  display: grid;
  gap: 14px;
}

/* ---------- FACT LIST ---------- */
.page-products .fact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.page-products .fact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--c-edge);
}
.page-products .fact-list li:last-child { border-bottom: none; }
.page-products .fact-list__k { color: var(--c-mist); font-size: 14px; }
.page-products .fact-list__v { color: var(--c-cyan); font-weight: 600; font-size: 15px; }

/* ---------- CATALOG ---------- */
.page-products .cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}
.page-products .cat-card {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-edge);
  background: linear-gradient(165deg, rgba(22, 34, 77, 0.92), rgba(16, 26, 61, 0.68));
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.page-products .cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 242, 225, 0.45);
  box-shadow: var(--glow-cyan);
}
.page-products .cat-card__idx {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 26px;
  font-weight: 700;
  color: rgba(123, 91, 255, 0.55);
  transition: color 0.25s var(--ease);
}
.page-products .cat-card:hover .cat-card__idx {
  color: var(--c-cyan);
}
.page-products .cat-card__name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.page-products .cat-card__meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--c-cyan);
}
.page-products .cat-card__text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-mist);
}
.page-products .cat-card.is-hidden { display: none; }

/* ---------- MATCH TABLE ---------- */
.page-products .match-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--c-edge);
  background: rgba(232, 241, 255, 0.03);
}
.page-products .match-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
.page-products .match-table__cap {
  caption-side: top;
  padding: 14px 18px 4px;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--c-mist);
}
.page-products .match-table th,
.page-products .match-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--c-edge);
  white-space: nowrap;
}
.page-products .match-table thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-mist);
  background: rgba(16, 26, 61, 0.7);
}
.page-products .match-table tbody tr {
  transition: background 0.22s var(--ease);
}
.page-products .match-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(53, 242, 225, 0.09), rgba(123, 91, 255, 0.06));
}
.page-products .match-table tbody tr:last-child td { border-bottom: none; }
.page-products .match-table td .dot {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.page-products .match-hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-mist);
}
.page-products .prod-match__visual .media { margin: 0; }

/* ---------- RESTORE ---------- */
.page-products .prod-restore__steps {
  display: grid;
  gap: 0;
}
.page-products .step {
  border-bottom: 1px solid var(--c-edge);
}
.page-products .step:last-child { border-bottom: none; }
.page-products .step > summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  transition: color 0.2s var(--ease);
}
.page-products .step > summary::-webkit-details-marker { display: none; }
.page-products .step > summary:hover { color: var(--c-cyan); }
.page-products .step__no {
  font-size: 14px;
  color: var(--c-violet);
}
.page-products .step[open] .step__no { color: var(--c-cyan); }
.page-products .step__body {
  padding: 0 4px 18px 4px;
}
.page-products .step__body p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-mist);
  max-width: 68ch;
}
.page-products .step__note {
  font-size: 13px;
  color: rgba(159, 176, 208, 0.8);
  padding-left: 12px;
  border-left: 2px solid rgba(53, 242, 225, 0.45);
}
.page-products .prod-restore__visual .media { margin: 0; }

/* ---------- SERVICES ---------- */
.page-products .prod-services__visual .media { margin: 0; }
.page-products .prod-services__panels {
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-products .service-panel {
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-edge);
  background: rgba(232, 241, 255, 0.04);
}
.page-products .service-panel--cyan {
  border-left: 3px solid var(--c-cyan);
}
.page-products .service-panel--violet {
  border-left: 3px solid var(--c-violet);
}
.page-products .service-panel__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}
.page-products .service-panel__text {
  margin: 8px 0 14px;
  font-size: 14px;
  color: var(--c-mist);
}
.page-products .service-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.page-products .service-panel__list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-glass);
}
.page-products .service-panel__list .mono {
  flex: 0 0 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(53, 242, 225, 0.12);
  color: var(--c-cyan);
}
.page-products .service-panel--violet .service-panel__list .mono {
  background: rgba(123, 91, 255, 0.16);
  color: var(--c-violet);
}
.page-products .services-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-mist);
}

/* ---------- RHYTHM / TIMELINE ---------- */
.page-products .prod-rhythm { align-items: start; }
.page-products .prod-rhythm__visual .media { margin: 0; }
.page-products .timeline {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
  position: relative;
}
.page-products .timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--c-cyan), var(--c-violet), transparent);
}
.page-products .timeline__item {
  position: relative;
  padding: 0 0 22px 4px;
}
.page-products .timeline__item:last-child { padding-bottom: 0; }
.page-products .timeline__item::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 0 4px rgba(53, 242, 225, 0.12);
}
.page-products .timeline__when {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-orange);
}
.page-products .timeline__what {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-mist);
}

/* ---------- FLOWBAR ---------- */
.page-products .flowbar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  counter-reset: flow;
}
.page-products .flowbar__item {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-edge);
  background: linear-gradient(150deg, rgba(16, 26, 61, 0.9), rgba(22, 34, 77, 0.55));
  overflow: hidden;
}
.page-products .flowbar__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-violet));
}
.page-products .flowbar__idx {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: rgba(53, 242, 225, 0.85);
}
.page-products .flowbar__title {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 800;
}
.page-products .flowbar__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-mist);
}

/* ---------- CTA BLOCK ---------- */
.page-products .prod-cta {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(22px, 4vw, 34px);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  background:
    radial-gradient(110% 130% at 90% 10%, rgba(255, 138, 61, 0.16), transparent 62%),
    linear-gradient(140deg, rgba(22, 34, 77, 0.95), rgba(16, 26, 61, 0.78));
  border: 1px solid var(--c-edge);
  box-shadow: var(--shadow-1);
}
.page-products .prod-cta__title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
}
.page-products .prod-cta__text p {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-mist);
}
.page-products .prod-cta__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: center;
}

/* ---------- MEDIA GUARD ---------- */
.page-products .media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--c-edge);
  background: linear-gradient(140deg, rgba(16, 26, 61, 0.95), rgba(7, 11, 31, 0.9));
}
.page-products .media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-products .media__caption {
  display: block;
  padding: 10px 16px 12px;
  font-size: 12px;
  color: var(--c-mist);
  border-top: 1px solid var(--c-edge);
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 640px) {
  .page-products .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .page-products .flowbar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .page-products .prod-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
    align-items: end;
    gap: 44px;
  }
  .page-products .prod-hero__stamp { padding: 34px 28px; }
  .page-products .prod-cta {
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
    align-items: center;
  }
  .page-products .prod-cta__act { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  .page-products .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .page-products .flowbar { grid-template-columns: repeat(4, 1fr); }
  .page-products .flowbar__item { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prod-hero__stamp::after { animation: none; display: none; }
  .page-products .cat-card { transition: none; }
  .page-products .step > summary { transition: none; }
}
<<<END>>>

等等——我漏掉了“安卓设备游戏平台切换指南”关键词。让我在匹配章节里确认一下。对，我确实把它放在 match 章节的 desc 里了：“安卓设备游戏平台切换指南更新到第 12 版后……”。好。

还有“金游世界”品牌——出现在 hero 导语里：“金游世界把适配安卓手机与平板的游戏整理成 12 个清晰品类……”。好。

现在我把整个内容正确组织一下。

其实，再想一下——`page-products` 里的 `.section` 类——`section` 是全局类，有它自己的样式。我只是用了它。好。

还有 `.section` 和 `.section__head` 的间距——由全局处理。好。

对，我现在把完整输出写出来。

再检查一下：`data-reveal` 属性用的是 `0`、`40`、`80` 这样的值——对，没问题。

还有 `data-filter-tag="热门 高清"`——空格分隔的标签。好。

还有 `data-filter="热门"` 等等。好。

还有 `aria-pressed` 的用法。好。

现在最终输出。
<main id="main-content" class="page-products">
  <div class="shell">

    <nav class="breadcrumbs" aria-label="页面位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">游戏库与服务</li>
      </ol>
    </nav>

    <header class="prod-hero">
      <div class="prod-hero__copy">
        <p class="eyebrow">第 12 版 · 游戏库与服务</p>
        <h1>860 余款安卓游戏条目，按你的机型分好档</h1>
        <p class="lede">金游世界把适配安卓手机与平板的游戏整理成 12 个清晰品类，再配上机型、系统版本与条目档位的对应关系。换新机、重装系统后，你不需要逐个去试，对上档位继续玩就行。</p>
        <div class="prod-hero__act">
          <a class="btn btn--primary" href="/guide/">开始换机恢复</a>
          <a class="btn btn--ghost" href="/updates/">看版本迭代</a>
        </div>
      </div>
      <div class="prod-hero__stamp">
        <span class="prod-hero__v mono">12</span>
        <span class="prod-hero__vlabel">第 12 版</span>
        <span class="prod-hero__vnote mono">860+ 条目 · 12 品类 · 1,200+ 机型</span>
      </div>
    </header>

    <section class="section" id="overview">
      <div class="section__head">
        <p class="eyebrow">版本总览</p>
        <h2 class="section__title">第 12 版收了什么、替了什么</h2>
        <p class="section__desc">这一版把适配范围拉宽到 Android 8.0 至 Android 15，条目按使用场景拆成 12 个品类，机型配置档补到 1,200 余款。相比上一版，最直接的变化是你找东西更快了，不太需要来回翻列表。</p>
      </div>

      <div class="grid grid--bento prod-overview">
        <div class="g-7 prod-overview__visual">
          <figure class="media media--wide">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="十二个品类分组环形矩阵，霓虹青与电光紫交替标注各品类条目数量">
            <figcaption class="media__caption">12 个品类按条目量排布，色阶区分使用侧重</figcaption>
          </figure>
        </div>
        <div class="g-5 prod-overview__facts">
          <div class="panel panel--solid">
            <h3 class="panel__title">本版关键规模</h3>
            <ul class="fact-list">
              <li><span class="fact-list__k">适配条目</span><span class="fact-list__v mono">860 余款</span></li>
              <li><span class="fact-list__k">品类分组</span><span class="fact-list__v mono">12 个</span></li>
              <li><span class="fact-list__k">机型配置档</span><span class="fact-list__v mono">1,200 余款</span></li>
              <li><span class="fact-list__k">系统版本范围</span><span class="fact-list__v mono">Android 8.0–15</span></li>
            </ul>
          </div>
          <div class="panel panel--violet">
            <h3 class="panel__title">这一版的重点变化</h3>
            <ul class="fact-list">
              <li><span class="fact-list__k">新增条目</span><span class="fact-list__v mono">42 款</span></li>
              <li><span class="fact-list__k">调整档位</span><span class="fact-list__v mono">87 款</span></li>
              <li><span class="fact-list__k">下线停更</span><span class="fact-list__v mono">19 款</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="catalog">
      <div class="section__head">
        <p class="eyebrow">品类分栏</p>
        <h2 class="section__title">照类型挑，挑完再对档位</h2>
        <p class="section__desc">每个品类都标注了主要适配档位分布和条目数量。先按自己喜欢的方向缩小范围，再去匹配表确认你的设备能不能带得动。</p>
      </div>

      <div data-filter-scope>
        <div class="chip-row" data-filter-group role="group" aria-label="按品类性质筛选">
          <button class="chip" type="button" data-filter="all" aria-pressed="true">全部品类</button>
          <button class="chip" type="button" data-filter="热门" aria-pressed="false">热门</button>
          <button class="chip" type="button" data-filter="新上架" aria-pressed="false">新上架</button>
          <button class="chip" type="button" data-filter="轻量" aria-pressed="false">低配友好</button>
          <button class="chip" type="button" data-filter="高清" aria-pressed="false">高清适配</button>
        </div>

        <div class="cat-grid" data-filter-list>
          <article class="cat-card" data-filter-tag="热门 高清" data-reveal="0">
            <span class="cat-card__idx mono">01</span>
            <h3 class="cat-card__name">动作竞技</h3>
            <p class="cat-card__meta mono">96 款</p>
            <p class="cat-card__text">强调连招手感与帧率稳定，高档位支持 120Hz 高刷，低档位自动降画质保响应。</p>
          </article>
          <article class="cat-card" data-filter-tag="热门 高清" data-reveal="40">
            <span class="cat-card__idx mono">02</span>
            <h3 class="cat-card__name">角色扮演</h3>
            <p class="cat-card__meta mono">88 款</p>
            <p class="cat-card__text">大世界与剧情线为主，缓存占用偏高，建议预留 4GB 以上存储空间再进。</p>
          </article>
          <article class="cat-card" data-filter-tag="热门 轻量" data-reveal="80">
            <span class="cat-card__idx mono">03</span>
            <h3 class="cat-card__name">休闲益智</h3>
            <p class="cat-card__meta mono">82 款</p>
            <p class="cat-card__text">随时开一局，入口小、加载快，入门机型也能顺畅跑到 60 帧。</p>
          </article>
          <article class="cat-card" data-filter-tag="高清" data-reveal="120">
            <span class="cat-card__idx mono">04</span>
            <h3 class="cat-card__name">射击生存</h3>
            <p class="cat-card__meta mono">74 款</p>
            <p class="cat-card__text">对延迟最敏感的一类。低延迟档位优先分配网络资源，配手柄体验更好。</p>
          </article>
          <article class="cat-card" data-filter-tag="热门 高清" data-reveal="160">
            <span class="cat-card__idx mono">05</span>
            <h3 class="cat-card__name">体育竞速</h3>
            <p class="cat-card__meta mono">68 款</p>
            <p class="cat-card__text">跟手感与触控采样率相关，旗舰与主流档位已分别做过专项复检。</p>
          </article>
          <article class="cat-card" data-filter-tag="轻量" data-reveal="200">
            <span class="cat-card__idx mono">06</span>
            <h3 class="cat-card__name">策略经营</h3>
            <p class="cat-card__meta mono">64 款</p>
            <p class="cat-card__text">长线规划类，对画质要求不高，但对后台保活有要求，建议关掉省电限制。</p>
          </article>
          <article class="cat-card" data-filter-tag="热门 轻量" data-reveal="240">
            <span class="cat-card__idx mono">07</span>
            <h3 class="cat-card__name">卡牌对战</h3>
            <p class="cat-card__meta mono">72 款</p>
            <p class="cat-card__text">回合决策为主，断线重连体验做过优化，切后台回来不会丢进度。</p>
          </article>
          <article class="cat-card" data-filter-tag="新上架 高清" data-reveal="280">
            <span class="cat-card__idx mono">08</span>
            <h3 class="cat-card__name">音乐节奏</h3>
            <p class="cat-card__meta mono">58 款</p>
            <p class="cat-card__text">节拍判定与触控采样直接挂钩，本版针对 12 款机型重新调过延迟校准。</p>
          </article>
          <article class="cat-card" data-filter-tag="轻量" data-reveal="320">
            <span class="cat-card__idx mono">09</span>
            <h3 class="cat-card__name">模拟养成</h3>
            <p class="cat-card__meta mono">66 款</p>
            <p class="cat-card__text">适合碎片时间，单次加载快、离线可玩比例高，通勤路上也能推一段。</p>
          </article>
          <article class="cat-card" data-filter-tag="新上架" data-reveal="360">
            <span class="cat-card__idx mono">10</span>
            <h3 class="cat-card__name">冒险解谜</h3>
            <p class="cat-card__meta mono">70 款</p>
            <p class="cat-card__text">探索与推理为主，本版新增了 9 款独立解谜条目，全部标注了通关时长参考。</p>
          </article>
          <article class="cat-card" data-filter-tag="新上架 高清" data-reveal="400">
            <span class="cat-card__idx mono">11</span>
            <h3 class="cat-card__name">沙盒建造</h3>
            <p class="cat-card__meta mono">62 款</p>
            <p class="cat-card__text">自由创造类，支持模组扩展，条目页会标出建议的运行内存下限。</p>
          </article>
          <article class="cat-card" data-filter-tag="新上架 轻量" data-reveal="440">
            <span class="cat-card__idx mono">12</span>
            <h3 class="cat-card__name">多人派对</h3>
            <p class="cat-card__meta mono">60 款</p>
            <p class="cat-card__text">聚齐几位好友就能开局，适配档位覆盖广，一台中端平板就足够。</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="match">
      <div class="section__head">
        <p class="eyebrow">设备匹配</p>
        <h2 class="section__title">你的机型能跑到哪一档</h2>
        <p class="section__desc">安卓设备游戏平台切换指南更新到第 12 版后，把机型、系统版本和条目档位对齐在一张表里，你照着设备所在的那一行对号入座就可以开始。</p>
      </div>

      <div class="grid grid--bento prod-match">
        <div class="g-7 prod-match__table">
          <div class="match-table-wrap">
            <table class="match-table">
              <caption class="match-table__cap">适配档位速查</caption>
              <thead>
                <tr>
                  <th scope="col">适配档位</th>
                  <th scope="col">适合机型</th>
                  <th scope="col">系统版本</th>
                  <th scope="col">当前状态</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="tag tag--cyan">高画质</span></td>
                  <td>旗舰机型 · 8 核 12GB 级</td>
                  <td class="mono">Android 12–15</td>
                  <td><span class="dot dot--ok" aria-hidden="true"></span>直接可玩</td>
                </tr>
                <tr>
                  <td><span class="tag tag--violet">均衡</span></td>
                  <td>主流机型 · 8 核 8GB 级</td>
                  <td class="mono">Android 10–14</td>
                  <td><span class="dot dot--ok" aria-hidden="true"></span>直接可玩</td>
                </tr>
                <tr>
                  <td><span class="tag tag--violet">流畅</span></td>
                  <td>轻旗舰 · 8 核 6GB 级</td>
                  <td class="mono">Android 8.0–13</td>
                  <td><span class="dot dot--ok" aria-hidden="true"></span>直接可玩</td>
                </tr>
                <tr>
                  <td><span class="tag tag--orange">基础</span></td>
                  <td>入门机型 · 6 核 4GB 级</td>
                  <td class="mono">Android 8.0–12</td>
                  <td><span class="dot dot--warn" aria-hidden="true"></span>建议切基础档</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p class="match-hint">同一档位内不同条目的占用差异较大，条目详情页都会标注建议的运行内存下限，按实际设备再确认一次更稳妥。</p>
        </div>
        <div class="g-5 prod-match__visual">
          <figure class="media media--tall">
            <img src="{zhanqunpic:h:800w:1100}" width="1100" height="800" alt="深色界面中的三方匹配表，行内显示机型、系统版本与适配状态" loading="lazy" decoding="async">
            <figcaption class="media__caption">机型、版本、档位三列对齐，逐行确认</figcaption>
          </figure>
        </div>
      </div>
    </section>

    <section class="section" id="restore">
      <div class="section__head">
        <p class="eyebrow">换机恢复</p>
        <h2 class="section__title">换机重装后，三步回到游戏里</h2>
        <p class="section__desc">从打开首页到进入第一个游戏，平均 3 步、约 2 次点击完成。步骤卡往下展开，每一步需要准备什么、会看到什么，都写在里面。</p>
      </div>

      <div class="grid grid--bento prod-restore">
        <div class="g-7 prod-restore__steps">
          <details class="step" open>
            <summary>
              <span class="step__no mono">01</span>
              <span class="step__label">从首页找到导航指引</span>
            </summary>
            <div class="step__body">
              <p>打开金游世界首页后，第一眼会看到主导航指引区。它按你的使用目的分成找回入口、查看适配、提交反馈几条线路，直接选“找回入口”这条就行。</p>
              <p class="step__note">如果首页已是最近一次打开的状态，导航指引会保持在同一个位置，不用重新找。</p>
            </div>
          </details>

          <details class="step">
            <summary>
              <span class="step__no mono">02</span>
              <span class="step__label">确认机型档位与系统版本</span>
            </summary>
            <div class="step__body">
              <p>在导航指引里填上设备型号和当前系统版本，页面会给出对应的适配档位。不确定版本号的话，设备设置里“关于手机”一栏就能看到。</p>
              <p class="step__note">新机开箱后先用这一步对档，能省掉后面因为档位不匹配来回折腾的时间。</p>
            </div>
          </details>

          <details class="step">
            <summary>
              <span class="step__no mono">03</span>
              <span class="step__label">按档位进入游戏</span>
            </summary>
            <div class="step__body">
              <p>档位确认后直接点进对应条目即可开始。原先的老机存档如果需要接着用，把账号与设备绑定的关系再核对一次就行。</p>
              <p class="step__note">整个流程走完平均 3 步，从打开首页算起约 2 次点击就能到你想玩的那个游戏。</p>
            </div>
          </details>
        </div>
        <div class="g-5 prod-restore__visual">
          <figure class="media media--wide">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="三步流程条与设备轮廓、光带箭头组成的换机恢复示意图" loading="lazy" decoding="async">
            <figcaption class="media__caption">导航指引 → 对档 → 进入游戏</figcaption>
          </figure>
        </div>
      </div>
    </section>

    <section class="section" id="services">
      <div class="section__head">
        <p class="eyebrow">配套服务</p>
        <h2 class="section__title">账号的事、操作的事，各有一个去处</h2>
        <p class="section__desc">会员中心和帮助中心在主导航里排在前两位。前者管账号与设备状态，后者收着 260 余条图文步骤说明，覆盖换机、栏目切换、收藏反馈与设备兼容问题。</p>
      </div>

      <div class="grid grid--bento prod-services">
        <div class="g-5 prod-services__visual">
          <figure class="media media--square">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="两组功能卡片并排界面示意，左侧为账号状态查询，右侧为图文步骤说明" loading="lazy" decoding="async">
            <figcaption class="media__caption">会员中心查状态，帮助中心找步骤</figcaption>
          </figure>
        </div>
        <div class="g-7 prod-services__panels">
          <div class="service-panel service-panel--cyan">
            <h3 class="service-panel__title">会员中心</h3>
            <p class="service-panel__text">三项自助查询，不用等人回复：</p>
            <ul class="service-panel__list">
              <li><span class="mono">A</span> 账号状态：登录情况、是否存在异常提示</li>
              <li><span class="mono">B</span> 设备绑定：当前账号关联了哪些设备</li>
              <li><span class="mono">C</span> 阅读记录：最近看过的栏目与条目</li>
            </ul>
          </div>
          <div class="service-panel service-panel--violet">
            <h3 class="service-panel__title">帮助中心</h3>
            <p class="service-panel__text">260 余条图文步骤说明，按问题类型分好组，常见的有：</p>
            <ul class="service-panel__list">
              <li><span class="mono">A</span> 换机重装后如何找回原入口</li>
              <li><span class="mono">B</span> 栏目切换找不到目标分类</li>
              <li><span class="mono">C</span> 收藏与反馈提交后没有回音</li>
              <li><span class="mono">D</span> 设备提示不兼容该从哪里查</li>
            </ul>
          </div>
          <p class="services-note">两处入口都能从主导航直接进，账号相关的问题先看会员中心，操作类的问题先看帮助中心，能省下不少来回沟通的时间。</p>
        </div>
      </div>
    </section>

    <section class="section" id="rhythm">
      <div class="section__head">
        <p class="eyebrow">复检节奏</p>
        <h2 class="section__title">第 12 版为什么敢说“保持适配”</h2>
        <p class="section__desc">条目上架只是起点。每两周执行一次适配复检，每季度发布一次版本更新说明，中间发现的问题会直接改到下一个小版本里，你用的档位不会突然变得不能跑。</p>
      </div>

      <div class="grid grid--bento prod-rhythm">
        <div class="g-6 prod-rhythm__visual">
          <figure class="media media--wide">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="手柄与折叠屏设备特写，叠加数据脉冲复检标记" loading="lazy" decoding="async">
            <figcaption class="media__caption">每两周一轮复检，逐档确认条目是否仍然正常</figcaption>
          </figure>
        </div>
        <div class="g-6 prod-rhythm__timeline">
          <ol class="timeline">
            <li class="timeline__item">
              <span class="timeline__when mono">每两周</span>
              <p class="timeline__what">对 860 余款条目执行一轮适配复检，覆盖 Android 8.0 至 Android 15 全部档位。</p>
            </li>
            <li class="timeline__item">
              <span class="timeline__when mono">每季度</span>
              <p class="timeline__what">汇总发布一次版本更新说明，讲清新增、调整和停更分别有哪些。</p>
            </li>
            <li class="timeline__item">
              <span class="timeline__when mono">系统大版本发布后</span>
              <p class="timeline__what">优先复检刚发布的新系统版本，避免升级后出现无法进入的情况。</p>
            </li>
            <li class="timeline__item">
              <span class="timeline__when mono">持续</span>
              <p class="timeline__what">与 30 余家安卓设备及配件服务商保持适配协作，新机上市前后同步配置档。</p>
            </li>
          </ol>
        </div>
      </div>
    </section>

    <section class="section" id="flow">
      <div class="section__head">
        <p class="eyebrow">全流程</p>
        <h2 class="section__title">从选机型到进入游戏，一共四个动作</h2>
        <p class="section__desc">把这四步走完，你就已经在自己设备最合适的档位上跑游戏了。中间任何一步卡住，都能从帮助中心或客服那里接着处理。</p>
      </div>

      <ol class="flowbar">
        <li class="flowbar__item">
          <span class="flowbar__idx mono">1</span>
          <h3 class="flowbar__title">选机型</h3>
          <p class="flowbar__text">从 1,200 余款机型配置档里找到你的设备型号。</p>
        </li>
        <li class="flowbar__item">
          <span class="flowbar__idx mono">2</span>
          <h3 class="flowbar__title">看匹配</h3>
          <p class="flowbar__text">对着匹配表确认系统版本与条目档位是否对齐。</p>
        </li>
        <li class="flowbar__item">
          <span class="flowbar__idx mono">3</span>
          <h3 class="flowbar__title">切栏目</h3>
          <p class="flowbar__text">在简体版栏目里按主题跳到游戏库或换机适配区。</p>
        </li>
        <li class="flowbar__item">
          <span class="flowbar__idx mono">4</span>
          <h3 class="flowbar__title">收藏反馈</h3>
          <p class="flowbar__text">一键收藏常用栏目，遇到问题直接提交反馈。</p>
        </li>
      </ol>

      <div class="prod-cta">
        <div class="prod-cta__text">
          <h3 class="prod-cta__title">还有什么没查到？</h3>
          <p>收藏反馈入口、栏目切换细节或具体机型的适配问题，都可以直接问客服。工作日 9:00-18:00 有轮值同事在线处理。</p>
        </div>
        <div class="prod-cta__act">
          <a class="btn btn--primary" href="/consult/">前往咨询与反馈</a>
          <a class="btn btn--ghost" href="/guide/">打开换机指南</a>
        </div>
      </div>
    </section>

  </div>
</main>

.page-products {
  display: block;
  padding-bottom: clamp(48px, 8vw, 96px);
  color: var(--c-glass);
}

.page-products .breadcrumbs {
  margin-bottom: clamp(18px, 3vw, 30px);
  font-size: 13px;
  color: var(--c-mist);
}
.page-products .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .breadcrumbs a {
  color: var(--c-mist);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.page-products .breadcrumbs a:hover { color: var(--c-cyan); }
.page-products .breadcrumbs li[aria-current] { color: var(--c-glass); }

/* HERO */
.page-products .prod-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: clamp(24px, 5vw, 52px) 0 clamp(30px, 5vw, 58px);
  margin-bottom: clamp(30px, 5vw, 62px);
  border-bottom: 1px solid var(--c-edge);
}
.page-products .prod-hero__copy .eyebrow { display: block; }
.page-products .prod-hero__copy h1 {
  margin: 10px 0 0;
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--c-glass) 35%, var(--c-cyan) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-products .prod-hero__copy .lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--c-mist);
}
.page-products .prod-hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-products .prod-hero__stamp {
  position: relative;
  display: grid;
  place-content: center;
  padding: 26px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--c-edge);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(53, 242, 225, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(123, 91, 255, 0.18), rgba(16, 26, 61, 0.75) 70%);
  text-align: center;
  overflow: hidden;
}
.page-products .prod-hero__stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(232, 241, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: prod-sheen 9s linear infinite;
  pointer-events: none;
}
@keyframes prod-sheen {
  0%, 62% { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}
.page-products .prod-hero__v {
  display: block;
  font-size: clamp(76px, 15vw, 150px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.05em;
  background: linear-gradient(150deg, var(--c-cyan), var(--c-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-products .prod-hero__vlabel {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--c-cyan);
}
.page-products .prod-hero__vnote {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-mist);
}

/* OVERVIEW */
.page-products #overview .prod-overview { align-items: start; }
.page-products .prod-overview__visual .media { margin: 0; }
.page-products .prod-overview__facts { display: grid; gap: 14px; }

/* FACT LIST */
.page-products .fact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.page-products .fact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--c-edge);
}
.page-products .fact-list li:last-child { border-bottom: none; }
.page-products .fact-list__k { color: var(--c-mist); font-size: 14px; }
.page-products .fact-list__v { color: var(--c-cyan); font-weight: 600; font-size: 15px; }

/* CATALOG */
.page-products .cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}
.page-products .cat-card {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-edge);
  background: linear-gradient(165deg, rgba(22, 34, 77, 0.92), rgba(16, 26, 61, 0.68));
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.page-products .cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 242, 225, 0.45);
  box-shadow: var(--glow-cyan);
}
.page-products .cat-card__idx {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 26px;
  font-weight: 700;
  color: rgba(123, 91, 255, 0.55);
  transition: color 0.25s var(--ease);
}
.page-products .cat-card:hover .cat-card__idx { color: var(--c-cyan); }
.page-products .cat-card__name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.page-products .cat-card__meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--c-cyan);
}
.page-products .cat-card__text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-mist);
}
.page-products .cat-card.is-hidden { display: none; }

/* MATCH TABLE */
.page-products .match-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--c-edge);
  background: rgba(232, 241, 255, 0.03);
}
.page-products .match-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
.page-products .match-table__cap {
  caption-side: top;
  padding: 14px 18px 4px;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--c-mist);
}
.page-products .match-table th,
.page-products .match-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--c-edge);
  white-space: nowrap;
}
.page-products .match-table thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-mist);
  background: rgba(16, 26, 61, 0.7);
}
.page-products .match-table tbody tr { transition: background 0.22s var(--ease); }
.page-products .match-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(53, 242, 225, 0.09), rgba(123, 91, 255, 0.06));
}
.page-products .match-table tbody tr:last-child td { border-bottom: none; }
.page-products .match-table td .dot {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.page-products .match-hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-mist);
}
.page-products .prod-match__visual .media { margin: 0; }

/* RESTORE / STEPS */
.page-products .prod-restore__steps { display: grid; gap: 0; }
.page-products .step { border-bottom: 1px solid var(--c-edge); }
.page-products .step:last-child { border-bottom: none; }
.page-products .step > summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  transition: color 0.2s var(--ease);
}
.page-products .step > summary::-webkit-details-marker { display: none; }
.page-products .step > summary:hover { color: var(--c-cyan); }
.page-products .step__no { font-size: 14px; color: var(--c-violet); }
.page-products .step[open] .step__no { color: var(--c-cyan); }
.page-products .step__body { padding: 0 4px 18px 4px; }
.page-products .step__body p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-mist);
  max-width: 68ch;
}
.page-products .step__note {
  font-size: 13px;
  color: rgba(159, 176, 208, 0.8);
  padding-left: 12px;
  border-left: 2px solid rgba(53, 242, 225, 0.45);
}
.page-products .prod-restore__visual .media { margin: 0; }

/* SERVICES */
.page-products .prod-services__visual .media { margin: 0; }
.page-products .prod-services__panels {
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-products .service-panel {
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-edge);
  background: rgba(232, 241, 255, 0.04);
}
.page-products .service-panel--cyan { border-left: 3px solid var(--c-cyan); }
.page-products .service-panel--violet { border-left: 3px solid var(--c-violet); }
.page-products .service-panel__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}
.page-products .service-panel__text {
  margin: 8px 0 14px;
  font-size: 14px;
  color: var(--c-mist);
}
.page-products .service-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.page-products .service-panel__list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-glass);
}
.page-products .service-panel__list .mono {
  flex: 0 0 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(53, 242, 225, 0.12);
  color: var(--c-cyan);
}
.page-products .service-panel--violet .service-panel__list .mono {
  background: rgba(123, 91, 255, 0.16);
  color: var(--c-violet);
}
.page-products .services-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-mist);
}

/* RHYTHM / TIMELINE */
.page-products .prod-rhythm { align-items: start; }
.page-products .prod-rhythm__visual .media { margin: 0; }
.page-products .timeline {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
  position: relative;
}
.page-products .timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--c-cyan), var(--c-violet), transparent);
}
.page-products .timeline__item {
  position: relative;
  padding: 0 0 22px 4px;
}
.page-products .timeline__item:last-child { padding-bottom: 0; }
.page-products .timeline__item::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 0 4px rgba(53, 242, 225, 0.12);
}
.page-products .timeline__when {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-orange);
}
.page-products .timeline__what {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-mist);
}

/* FLOWBAR */
.page-products .flowbar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.page-products .flowbar__item {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-edge);
  background: linear-gradient(150deg, rgba(16, 26, 61, 0.9), rgba(22, 34, 77, 0.55));
  overflow: hidden;
}
.page-products .flowbar__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-violet));
}
.page-products .flowbar__idx {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: rgba(53, 242, 225, 0.85);
}
.page-products .flowbar__title {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 800;
}
.page-products .flowbar__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-mist);
}

/* CTA */
.page-products .prod-cta {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(22px, 4vw, 34px);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  background:
    radial-gradient(110% 130% at 90% 10%, rgba(255, 138, 61, 0.16), transparent 62%),
    linear-gradient(140deg, rgba(22, 34, 77, 0.95), rgba(16, 26, 61, 0.78));
  border: 1px solid var(--c-edge);
  box-shadow: var(--shadow-1);
}
.page-products .prod-cta__title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
}
.page-products .prod-cta__text p {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-mist);
}
.page-products .prod-cta__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: center;
}

/* MEDIA GUARD */
.page-products .media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--c-edge);
  background: linear-gradient(140deg, rgba(16, 26, 61, 0.95), rgba(7, 11, 31, 0.9));
}
.page-products .media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-products .media__caption {
  display: block;
  padding: 10px 16px 12px;
  font-size: 12px;
  color: var(--c-mist);
  border-top: 1px solid var(--c-edge);
}

/* RESPONSIVE */
@media (min-width: 640px) {
  .page-products .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .page-products .flowbar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .page-products .prod-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
    align-items: end;
    gap: 44px;
  }
  .page-products .prod-hero__stamp { padding: 34px 28px; }
  .page-products .prod-cta {
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
    align-items: center;
  }
  .page-products .prod-cta__act { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  .page-products .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .page-products .flowbar { grid-template-columns: repeat(4, 1fr); }
  .page-products .flowbar__item { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prod-hero__stamp::after { animation: none; display: none; }
  .page-products .cat-card { transition: none; }
  .page-products .step > summary { transition: none; }
}