.page-products {
  --cat-gap: clamp(20px, 3vw, 34px);
  --cat-rail: 250px;
  --cat-soft-line: rgba(126, 150, 168, 0.26);
  --cat-paper: rgba(18, 50, 39, 0.55);
  --cat-cell: rgba(126, 150, 168, 0.1);

  background: var(--ink-950);
  color: var(--mist-100);
  padding-bottom: clamp(44px, 7vw, 96px);
}

.page-products .breadcrumb {
  padding-top: clamp(16px, 2.4vw, 26px);
}

/* ---------- 首屏拼贴 ---------- */
.page-products .cat-hero {
  display: grid;
  gap: var(--cat-gap);
  align-items: end;
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 5vw, 56px);
}

.page-products .cat-hero__title {
  margin: 14px 0 18px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(36px, 7.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--mist-100);
}

.page-products .cat-hero__title em {
  display: block;
  font-style: normal;
  background: linear-gradient(96deg, var(--lime-300) 8%, var(--orange-500) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-products .cat-hero .lede {
  max-width: 46ch;
  color: var(--slate-400);
  line-height: 1.75;
  margin: 0;
}

.page-products .cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .cat-hero__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(158deg, var(--pine-800), var(--ink-900) 72%);
  padding: clamp(20px, 3vw, 28px);
}

.page-products .cat-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(198, 255, 74, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 255, 74, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.7;
}

.page-products .cat-hero__panel-label {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.page-products .cat-metrics {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

.page-products .cat-metric__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1;
  color: var(--lime-300);
  font-variant-numeric: tabular-nums;
}

.page-products .cat-metric__num--accent {
  color: var(--orange-500);
}

.page-products .cat-metric__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate-400);
}

/* ---------- 索引 + 内容 ---------- */
.page-products .cat-layout {
  display: grid;
  gap: var(--cat-gap);
}

.page-products .cat-rail__inner {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cat-paper);
  padding: 16px;
}

.page-products .cat-rail__title {
  margin: 0 0 12px;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.page-products .cat-rail__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .cat-rail__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--slate-400);
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-products .cat-rail__link i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime-300);
  font-variant-numeric: tabular-nums;
}

.page-products .cat-rail__link:hover,
.page-products .cat-rail__link:focus-visible {
  color: var(--mist-100);
  background: var(--pine-700);
  transform: translateX(2px);
}

.page-products .cat-rail__cta {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ---------- 内容块 ---------- */
.page-products .cat-block {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--cat-gap);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(18, 50, 39, 0.92), rgba(11, 24, 18, 0.94));
  padding: clamp(22px, 3.4vw, 40px);
}

.page-products .cat-block:last-of-type {
  margin-bottom: 0;
}

.page-products .cat-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.page-products .cat-block__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime-300);
}

.page-products .cat-block__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(23px, 3.2vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--mist-100);
}

.page-products .cat-body p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--slate-400);
}

.page-products .cat-block__grid {
  display: grid;
  gap: 24px;
}

.page-products .cat-figure {
  margin: 18px 0 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--pine-800);
  overflow: hidden;
}

.page-products .cat-figure:first-child {
  margin-top: 0;
}

.page-products .cat-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .cat-figure--wide,
.page-products .cat-figure--band {
  margin: 20px 0;
}

/* 斜切分区 */
.page-products .cat-block--angle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -20%;
  right: -20%;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(198, 255, 74, 0.12), transparent);
  transform: skewY(-4deg);
  transform-origin: left top;
}

.page-products .cat-block--slate {
  background: linear-gradient(170deg, rgba(126, 150, 168, 0.18), rgba(11, 24, 18, 0.95) 62%);
  border-color: var(--ghost-line);
}

.page-products .cat-block--zone {
  background: linear-gradient(150deg, rgba(255, 106, 42, 0.16), rgba(11, 24, 18, 0.96) 58%);
  border-color: rgba(255, 106, 42, 0.32);
}

/* 比分条 */
.page-products .cat-scorebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 106, 42, 0.3);
  background: linear-gradient(100deg, rgba(255, 106, 42, 0.2), rgba(255, 106, 42, 0.04) 62%, transparent);
}

.page-products .cat-scorebar__badge {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--orange-500);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

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

.page-products .cat-scorebar__list li {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mist-100);
}

/* 胶囊标签 */
.page-products .cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.page-products .cat-chip {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--cat-soft-line);
  background: var(--cat-cell);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--mist-100);
}

.page-products .cat-chip--lime {
  border-color: var(--lime-300);
  color: var(--lime-300);
}

.page-products .cat-chip--orange {
  border-color: var(--orange-500);
  color: var(--orange-500);
}

/* 文字链 */
.page-products .cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lime-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .cat-link::after {
  content: "→";
  font-family: var(--font-mono);
}

.page-products .cat-link:hover,
.page-products .cat-link:focus-visible {
  gap: 13px;
  border-bottom-color: var(--lime-300);
}

/* 三级目录树 */
.page-products .cat-tree {
  margin: 22px 0;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--ghost-line);
  background: rgba(7, 17, 13, 0.45);
}

.page-products .cat-tree__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  list-style: none;
  transition: background 0.2s var(--ease);
}

.page-products .cat-tree__sum::-webkit-details-marker {
  display: none;
}

.page-products .cat-tree__sum::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--lime-300);
}

.page-products .cat-tree__node[open] > .cat-tree__sum::before {
  content: "−";
}

.page-products .cat-tree__sum:hover {
  background: rgba(198, 255, 74, 0.08);
}

.page-products .cat-tree__lvl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--slate-blue);
}

.page-products .cat-tree__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--mist-100);
}

.page-products .cat-tree__new {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--lime-300);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.page-products .cat-tree__children {
  margin: 2px 0 6px 14px;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}

.page-products .cat-tree__leaf {
  display: grid;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 0 0 0 22px;
  list-style: none;
}

.page-products .cat-tree__leaf li {
  position: relative;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-400);
}

.page-products .cat-tree__leaf li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--slate-blue);
}

/* 关注列表数据 */
.page-products .cat-watch {
  display: grid;
  gap: 14px;
  margin: 20px 0;
}

.page-products .cat-watch__cell {
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--ghost-line);
  background: var(--cat-cell);
}

.page-products .cat-watch__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(34px, 5.4vw, 48px);
  line-height: 1;
  color: var(--orange-500);
  font-variant-numeric: tabular-nums;
}

.page-products .cat-watch__cap {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate-400);
}

/* 品牌专区入口 */
.page-products .cat-zone {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.page-products .cat-zone__pill {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 106, 42, 0.3);
  background: rgba(7, 17, 13, 0.55);
  text-decoration: none;
  color: var(--mist-100);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-products .cat-zone__pill:hover,
.page-products .cat-zone__pill:focus-visible {
  transform: translateY(-2px);
  border-color: var(--orange-500);
  background: rgba(255, 106, 42, 0.12);
}

.page-products .cat-zone__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--orange-500);
}

.page-products .cat-zone__v {
  font-size: 16.5px;
  font-weight: 800;
}

.page-products .cat-zone__d {
  font-size: 12.5px;
  color: var(--slate-400);
}

/* 设备区块 */
.page-products .cat-device {
  display: grid;
  gap: 22px;
  margin: 20px 0;
}

.page-products .cat-acc {
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ghost-line);
  background: rgba(7, 17, 13, 0.5);
  overflow: hidden;
}

.page-products .cat-acc__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--mist-100);
}

.page-products .cat-acc__sum::-webkit-details-marker {
  display: none;
}

.page-products .cat-acc__sum::after {
  content: "＋";
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lime-300);
}

.page-products .cat-acc[open] > .cat-acc__sum {
  background: rgba(198, 255, 74, 0.07);
  border-bottom: 1px solid var(--ghost-line);
}

.page-products .cat-acc[open] > .cat-acc__sum::after {
  content: "－";
}

.page-products .cat-acc__body {
  padding: 14px 16px;
}

.page-products .cat-acc__body p {
  margin: 0;
  font-size: 14px;
}

.page-products .cat-cards {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-cards__item {
  padding: 4px 0 4px 16px;
  border-left: 1px solid var(--line-strong);
}

.page-products .cat-cards__item h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--mist-100);
}

.page-products .cat-cards__item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
}

/* 场景 */
.page-products .cat-scenes {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-scene {
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--cat-paper);
}

.page-products .cat-scene__tag {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime-300);
}

.page-products .cat-scene h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--mist-100);
}

.page-products .cat-scene p {
  margin: 0 0 12px;
  font-size: 14px;
}

/* 收尾 */
.page-products .cat-finale {
  display: grid;
  gap: 20px;
  margin-top: var(--cat-gap);
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(122deg, var(--pine-700), var(--ink-900) 72%);
}

.page-products .cat-finale h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  color: var(--mist-100);
}

.page-products .cat-finale p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(234, 244, 238, 0.78);
}

.page-products .cat-finale__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .cat-watch {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 720px) {
  .page-products .cat-block__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .cat-block__grid .cat-figure {
    margin-top: 0;
  }

  .page-products .cat-zone {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .cat-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-products .cat-device {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .cat-device .cat-figure {
    margin-top: 0;
  }

  .page-products .cat-scenes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .page-products .cat-hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .page-products .cat-finale {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
  }
}

@media (min-width: 1040px) {
  .page-products .cat-layout {
    grid-template-columns: var(--cat-rail) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 56px);
    align-items: start;
  }

  .page-products .cat-rail {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cat-rail__link,
  .page-products .cat-link,
  .page-products .cat-zone__pill,
  .page-products .cat-tree__sum {
    transition: none;
  }

  .page-products .cat-rail__link:hover,
  .page-products .cat-rail__link:focus-visible,
  .page-products .cat-zone__pill:hover,
  .page-products .cat-zone__pill:focus-visible {
    transform: none;
  }

  .page-products .cat-link:hover,
  .page-products .cat-link:focus-visible {
    gap: 8px;
  }
}


<main id="main-content" class="page-products">
  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">品牌首页</a></li>
        <li class="breadcrumb__item" aria-current="page">内容目录</li>
      </ol>
    </nav>

    <header class="cat-hero">
      <div class="cat-hero__lead">
        <p class="eyebrow">CATALOG / 内容目录</p>
        <h1 class="cat-hero__title">赛程、索引、关注，<em>一个入口走完</em></h1>
        <p class="lede">人生就是搏综合体育把当季赛程、栏目索引和你追的球队收进同一条路。选好项目，点开就知道下一场几点开打、比分怎么走、提醒什么时候来。</p>
        <div class="cat-hero__actions">
          <a class="btn btn--accent" href="#subscribe">看当季订阅</a>
          <a class="btn btn--ghost" href="#nav-v3">翻导航索引</a>
        </div>
      </div>
      <aside class="cat-hero__panel">
        <p class="cat-hero__panel-label">快速读数</p>
        <div class="cat-metrics">
          <div class="cat-metric">
            <span class="cat-metric__num">6</span>
            <span class="cat-metric__label">大项目</span>
          </div>
          <div class="cat-metric">
            <span class="cat-metric__num cat-metric__num--accent">14</span>
            <span class="cat-metric__label">联赛与杯赛</span>
          </div>
          <div class="cat-metric">
            <span class="cat-metric__num">18</span>
            <span class="cat-metric__label">主题簇</span>
          </div>
          <div class="cat-metric">
            <span class="cat-metric__num">3</span>
            <span class="cat-metric__label">次点击到目标</span>
          </div>
        </div>
      </aside>
    </header>
  </div>

  <div class="container cat-layout">
    <aside class="cat-rail">
      <div class="cat-rail__inner">
        <p class="cat-rail__title">目录索引</p>
        <ul class="cat-rail__list">
          <li><a class="cat-rail__link" href="#subscribe"><i>01</i>当季赛事订阅</a></li>
          <li><a class="cat-rail__link" href="#nav-v3"><i>02</i>导航第 3 版</a></li>
          <li><a class="cat-rail__link" href="#watchlist"><i>03</i>关注列表</a></li>
          <li><a class="cat-rail__link" href="#brand-zone"><i>04</i>品牌专区</a></li>
          <li><a class="cat-rail__link" href="#apple"><i>05</i>苹果设备访问</a></li>
          <li><a class="cat-rail__link" href="#scenarios"><i>06</i>适用场景</a></li>
        </ul>
        <a class="btn btn--lime cat-rail__cta" href="#brand-zone">直达品牌专区</a>
      </div>
    </aside>

    <div class="cat-body">
      <section class="cat-block" id="subscribe" data-reveal>
        <div class="cat-block__head">
          <span class="cat-block__no">01 / SUBSCRIBE</span>
          <h2 class="cat-block__title">当季赛事订阅，赛前赛后都接得上</h2>
        </div>
        <div class="cat-block__grid">
          <div class="cat-block__copy">
            <p>人生就是搏综合体育当季赛事订阅覆盖足球、篮球、网球、排球、田径和综合格斗六个大项，共 14 个联赛与杯赛。把你在意的项目和轮次勾上，赛程提醒提前送到，开赛提示跟着比分走，赛果摘要赛后自己找上门。</p>
            <div class="cat-scorebar">
              <span class="cat-scorebar__badge">当季 14 个联赛与杯赛</span>
              <ul class="cat-scorebar__list">
                <li>足球</li>
                <li>篮球</li>
                <li>网球</li>
                <li>排球</li>
                <li>田径</li>
                <li>综合格斗</li>
              </ul>
            </div>
            <p>提醒方式按你当天的处境挑：坐在电脑前用站内通知，手机一直拿在手上就开浏览器通知，怕漏场就再勾一封邮件。三种方式可以同时开，也可以随时关掉其中一种。</p>
            <ul class="cat-chips">
              <li class="cat-chip cat-chip--lime">站内通知</li>
              <li class="cat-chip">邮件提醒</li>
              <li class="cat-chip">浏览器通知</li>
            </ul>
            <a class="cat-link" href="/information/">看本季订阅更新了什么</a>
          </div>
          <figure class="media-frame cat-figure">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="夜间记分牌与赛程条局部，等宽数字排列的赛事提醒画面，深墨绿背景配橙色数字" loading="lazy" decoding="async">
          </figure>
        </div>
      </section>

      <section class="cat-block cat-block--angle" id="nav-v3" data-reveal="2">
        <div class="cat-block__head">
          <span class="cat-block__no">02 / NAVIGATION V3</span>
          <h2 class="cat-block__title">导航栏目更新到第 3 版，路径再短一截</h2>
        </div>
        <figure class="media-frame cat-figure cat-figure--band">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="多层目录卡片与索引刻度叠化的抽象画面，深墨绿与电光橙配色，用于展示导航第3版的三级结构" loading="lazy" decoding="async">
        </figure>
        <p>人生就是搏综合体育导航栏目更新把入口重排了一遍：18 个主题簇挂在三级索引下，先挑项目，再挑联赛，最后落到球队或专题。从首页点进目标赛事最多 3 次，不用一层层往回退。</p>
        <p>第 3 版新开了三个主题入口——本季焦点、球队档案、设备兼容。想看这段时间谁在打硬仗，进本季焦点；想查某支队的底细和交手记录，进球队档案；想先确认手上的设备用起来顺不顺，进设备兼容。</p>
        <div class="cat-tree">
          <details class="cat-tree__node" open>
            <summary class="cat-tree__sum">
              <span class="cat-tree__lvl">L1</span>
              <span class="cat-tree__name">本季焦点</span>
              <span class="cat-tree__new">NEW</span>
            </summary>
            <div class="cat-tree__children">
              <details class="cat-tree__node" open>
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">赛程与战报</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>当季赛程一览</li>
                  <li>焦点场次速览</li>
                  <li>赛后数据回顾</li>
                </ul>
              </details>
              <details class="cat-tree__node">
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">赛事专题</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>系列赛深度复盘</li>
                  <li>赛季阶段回顾</li>
                </ul>
              </details>
            </div>
          </details>
          <details class="cat-tree__node">
            <summary class="cat-tree__sum">
              <span class="cat-tree__lvl">L1</span>
              <span class="cat-tree__name">球队档案</span>
              <span class="cat-tree__new">NEW</span>
            </summary>
            <div class="cat-tree__children">
              <details class="cat-tree__node">
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">球队资料</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>阵容与赛季走向</li>
                  <li>近期状态走势</li>
                </ul>
              </details>
              <details class="cat-tree__node">
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">对阵历史</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>同联赛交手记录</li>
                  <li>跨赛事对阵参考</li>
                </ul>
              </details>
            </div>
          </details>
          <details class="cat-tree__node">
            <summary class="cat-tree__sum">
              <span class="cat-tree__lvl">L1</span>
              <span class="cat-tree__name">设备兼容</span>
              <span class="cat-tree__new">NEW</span>
            </summary>
            <div class="cat-tree__children">
              <details class="cat-tree__node">
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">iPhone 与 iPad</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>Safari 浏览体验</li>
                  <li>横屏看板视图</li>
                </ul>
              </details>
              <details class="cat-tree__node">
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">Mac Safari</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>桌面分栏阅读</li>
                  <li>通知开启方式</li>
                </ul>
              </details>
            </div>
          </details>
          <details class="cat-tree__node">
            <summary class="cat-tree__sum">
              <span class="cat-tree__lvl">L1</span>
              <span class="cat-tree__name">联赛与杯赛</span>
            </summary>
            <div class="cat-tree__children">
              <details class="cat-tree__node">
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">球类项目</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>足球与篮球</li>
                  <li>网球与排球</li>
                </ul>
              </details>
              <details class="cat-tree__node">
                <summary class="cat-tree__sum">
                  <span class="cat-tree__lvl">L2</span>
                  <span class="cat-tree__name">其他项目</span>
                </summary>
                <ul class="cat-tree__leaf">
                  <li>田径赛程</li>
                  <li>综合格斗赛程</li>
                </ul>
              </details>
            </div>
          </details>
        </div>
        <a class="cat-link" href="/help/">查导航使用的常见问题</a>
      </section>

      <section class="cat-block" id="watchlist" data-reveal>
        <div class="cat-block__head">
          <span class="cat-block__no">03 / WATCHLIST</span>
          <h2 class="cat-block__title">关注列表改版：一屏看全你在追的队</h2>
        </div>
        <p>六个项目最多能收 30 支球队或联赛，加进去之后不用再一页页翻。改版后同一屏可以并排摆 6 支球队的近期赛程，谁先开、谁冲突、哪场值得熬夜，一眼就分清。</p>
        <div class="cat-watch">
          <div class="cat-watch__cell">
            <span class="cat-watch__num">30</span>
            <span class="cat-watch__cap">支球队或联赛，跨 6 大项目一起加</span>
          </div>
          <div class="cat-watch__cell">
            <span class="cat-watch__num">6</span>
            <span class="cat-watch__cap">支球队同屏对比近期赛程</span>
          </div>
        </div>
        <figure class="media-frame cat-figure cat-figure--wide">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="移动端关注列表界面局部，多支球队赛程并排展示，深色背景配荧光青柠状态标记" loading="lazy" decoding="async">
        </figure>
        <p>换季的时候不必重新搭一遍，上赛季留下的关注还在原位，删掉不再跟的，补上今年新冒头的球队就行。</p>
        <a class="cat-link" href="/help/">看关注列表怎么管</a>
      </section>

      <section class="cat-block cat-block--zone" id="brand-zone" data-reveal="2">
        <div class="cat-block__head">
          <span class="cat-block__no">04 / BRAND ZONE</span>
          <h2 class="cat-block__title">品牌专区：三个入口摆在一起</h2>
        </div>
        <p>品牌专区把当季订阅、导航索引和关注列表收在同一个位置。它在首页、内容目录和帮助中心三处都有固定入口，从哪个方向进来都点得到，不用先记住路径再找回原处。</p>
        <div class="cat-zone">
          <a class="cat-zone__pill" href="#subscribe">
            <span class="cat-zone__k">SUBSCRIBE</span>
            <span class="cat-zone__v">当季订阅</span>
            <span class="cat-zone__d">赛程提醒与赛果摘要</span>
          </a>
          <a class="cat-zone__pill" href="#nav-v3">
            <span class="cat-zone__k">INDEX</span>
            <span class="cat-zone__v">导航索引</span>
            <span class="cat-zone__d">18 个主题簇三级直达</span>
          </a>
          <a class="cat-zone__pill" href="#watchlist">
            <span class="cat-zone__k">WATCHLIST</span>
            <span class="cat-zone__v">关注列表</span>
            <span class="cat-zone__d">最多 30 支，同屏比 6 支</span>
          </a>
        </div>
        <figure class="media-frame cat-figure">
          <img src="{zhanqunpic:h:500w:800}" width="800" height="500" alt="抽象数据纹理与胶囊按钮组合的画面，荧光青柠焦点环突出品牌专区的快速访问入口" loading="lazy" decoding="async">
        </figure>
      </section>

      <section class="cat-block cat-block--slate" id="apple" data-reveal>
        <div class="cat-block__head">
          <span class="cat-block__no">05 / APPLE</span>
          <h2 class="cat-block__title">用 iPhone、iPad 还是 Mac，看赛都顺</h2>
        </div>
        <p>赛事内容中心支持 iPhone、iPad 和 Mac 的 Safari 浏览器访问。内容按赛季、项目、联赛、球队四级归类，每场配一张信息卡，分赛中数据条、赛后摘要和下一场提醒三种。</p>
        <div class="cat-device">
          <figure class="media-frame cat-figure">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="平板横屏显示赛事数据看板，界面干净，深墨绿与灰蓝数据模块对比，无具名人物" loading="lazy" decoding="async">
          </figure>
          <div class="cat-device__panel">
            <details class="cat-acc" open>
              <summary class="cat-acc__sum">界面缩放</summary>
              <div class="cat-acc__body">
                <p>字号和数据块按屏幕宽度自动调整。手机上竖屏读摘要，把手机横过来就能看到更宽的赛程排布。</p>
              </div>
            </details>
            <details class="cat-acc">
              <summary class="cat-acc__sum">横屏看板</summary>
              <div class="cat-acc__body">
                <p>iPad 与 Mac 横屏时，比分条和球队赛程并排展开，几个联赛同时开着也不用来回切页。</p>
              </div>
            </details>
            <details class="cat-acc">
              <summary class="cat-acc__sum">通知设置</summary>
              <div class="cat-acc__body">
                <p>在 Safari 里打开通知授权，赛前提醒会直接弹到系统通知栏；关掉浏览器通知后，订阅本身不受影响。</p>
              </div>
            </details>
          </div>
        </div>
        <ul class="cat-cards">
          <li class="cat-cards__item">
            <h3>赛中数据条</h3>
            <p>比分和关键数据并排走，不看直播也知道场上节奏。</p>
          </li>
          <li class="cat-cards__item">
            <h3>赛后摘要</h3>
            <p>比赛结束几分钟内出概要，通勤路上刷完一场。</p>
          </li>
          <li class="cat-cards__item">
            <h3>下一场提醒</h3>
            <p>顺手把下一场存进日程，不靠临时想起来。</p>
          </li>
        </ul>
        <a class="cat-link" href="/help/">看苹果设备访问说明</a>
      </section>

      <section class="cat-block" id="scenarios" data-reveal="2">
        <div class="cat-block__head">
          <span class="cat-block__no">06 / SCENARIOS</span>
          <h2 class="cat-block__title">这些情况，基本都能对上号</h2>
        </div>
        <ul class="cat-scenes">
          <li class="cat-scene">
            <p class="cat-scene__tag">上班族与学生</p>
            <h3>开会前先知道几点开球</h3>
            <p>把赛季订阅设一次，赛前提醒推到站内或浏览器通知，散会回来接着看赛果摘要，不用一直盯着页面刷新。</p>
            <a class="cat-link" href="/help/">设置提醒</a>
          </li>
          <li class="cat-scene">
            <p class="cat-scene__tag">多联赛球迷</p>
            <h3>几个赛场同时开着也不乱</h3>
            <p>关注列表里放满 30 支球队，把常看的 6 支摆第一屏，哪场排在今晚、哪场在明早，一眼分得清。</p>
            <a class="cat-link" href="/information/">看关注列表改版说明</a>
          </li>
          <li class="cat-scene">
            <p class="cat-scene__tag">苹果设备用户</p>
            <h3>手机、平板、电脑接着看</h3>
            <p>三种设备都用 Safari 访问，登录同一个订阅和关注列表，在哪台设备上停下都接得回去。</p>
            <a class="cat-link" href="#apple">看适配说明</a>
          </li>
          <li class="cat-scene">
            <p class="cat-scene__tag">地方媒体与数据伙伴</p>
            <h3>赛事素材和专题一起做</h3>
            <p>平台与 12 家地方体育媒体、6 家赛事数据服务商保持内容合作，专题复盘和赛季数据卡可以一起排期推进。</p>
            <a class="cat-link" href="/feedback/">聊合作</a>
          </li>
        </ul>
      </section>

      <section class="cat-finale" data-reveal>
        <div class="cat-finale__lead">
          <h2>挑好方向，接着往里走</h2>
          <p>想看最近改了什么，去资讯中心；想弄清某个开关怎么拨，去帮助中心；想把当季订阅、索引和关注列表一次看全，回品牌专区。</p>
        </div>
        <div class="cat-finale__links">
          <a class="btn btn--accent" href="/information/">进资讯中心</a>
          <a class="btn btn--ghost" href="/story/">读品牌故事</a>
          <a class="btn btn--ghost" href="/feedback/">联系运营团队</a>
        </div>
      </section>
    </div>
  </div>
</main>

.page-products {
  --cat-gap: clamp(20px, 3vw, 34px);
  --cat-rail: 250px;
  --cat-soft-line: rgba(126, 150, 168, 0.26);
  --cat-paper: rgba(18, 50, 39, 0.55);
  --cat-cell: rgba(126, 150, 168, 0.1);

  background: var(--ink-950);
  color: var(--mist-100);
  padding-bottom: clamp(44px, 7vw, 96px);
}

.page-products .breadcrumb {
  padding-top: clamp(16px, 2.4vw, 26px);
}

.page-products .cat-hero {
  display: grid;
  gap: var(--cat-gap);
  align-items: end;
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 5vw, 56px);
}

.page-products .cat-hero__title {
  margin: 14px 0 18px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(36px, 7.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--mist-100);
}

.page-products .cat-hero__title em {
  display: block;
  font-style: normal;
  background: linear-gradient(96deg, var(--lime-300) 8%, var(--orange-500) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-products .cat-hero .lede {
  max-width: 46ch;
  margin: 0;
  color: var(--slate-400);
  line-height: 1.75;
}

.page-products .cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .cat-hero__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(158deg, var(--pine-800), var(--ink-900) 72%);
}

.page-products .cat-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(198, 255, 74, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 255, 74, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.page-products .cat-hero__panel-label {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.page-products .cat-metrics {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

.page-products .cat-metric__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1;
  color: var(--lime-300);
  font-variant-numeric: tabular-nums;
}

.page-products .cat-metric__num--accent {
  color: var(--orange-500);
}

.page-products .cat-metric__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate-400);
}

.page-products .cat-layout {
  display: grid;
  gap: var(--cat-gap);
}

.page-products .cat-rail__inner {
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--cat-paper);
}

.page-products .cat-rail__title {
  margin: 0 0 12px;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.page-products .cat-rail__list {
  display: grid;
  gap: 2px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.page-products .cat-rail__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--slate-400);
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-products .cat-rail__link i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime-300);
  font-variant-numeric: tabular-nums;
}

.page-products .cat-rail__link:hover,
.page-products .cat-rail__link:focus-visible {
  color: var(--mist-100);
  background: var(--pine-700);
  transform: translateX(2px);
}

.page-products .cat-rail__cta {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.page-products .cat-block {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--cat-gap);
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(18, 50, 39, 0.92), rgba(11, 24, 18, 0.94));
}

.page-products .cat-block:last-of-type {
  margin-bottom: 0;
}

.page-products .cat-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.page-products .cat-block__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime-300);
}

.page-products .cat-block__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(23px, 3.2vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--mist-100);
}

.page-products .cat-body p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--slate-400);
}

.page-products .cat-block__grid {
  display: grid;
  gap: 24px;
}

.page-products .cat-figure {
  margin: 18px 0 0;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--pine-800);
}

.page-products .cat-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .cat-figure--wide,
.page-products .cat-figure--band {
  margin: 20px 0;
}

.page-products .cat-block--angle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -20%;
  right: -20%;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(198, 255, 74, 0.12), transparent);
  transform: skewY(-4deg);
  transform-origin: left top;
}

.page-products .cat-block--slate {
  border-color: var(--ghost-line);
  background: linear-gradient(170deg, rgba(126, 150, 168, 0.18), rgba(11, 24, 18, 0.95) 62%);
}

.page-products .cat-block--zone {
  border-color: rgba(255, 106, 42, 0.32);
  background: linear-gradient(150deg, rgba(255, 106, 42, 0.16), rgba(11, 24, 18, 0.96) 58%);
}

.page-products .cat-scorebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 106, 42, 0.3);
  background: linear-gradient(100deg, rgba(255, 106, 42, 0.2), rgba(255, 106, 42, 0.04) 62%, transparent);
}

.page-products .cat-scorebar__badge {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--orange-500);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

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

.page-products .cat-scorebar__list li {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mist-100);
}

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

.page-products .cat-chip {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--cat-soft-line);
  background: var(--cat-cell);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--mist-100);
}

.page-products .cat-chip--lime {
  border-color: var(--lime-300);
  color: var(--lime-300);
}

.page-products .cat-chip--orange {
  border-color: var(--orange-500);
  color: var(--orange-500);
}

.page-products .cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lime-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .cat-link::after {
  content: "→";
  font-family: var(--font-mono);
}

.page-products .cat-link:hover,
.page-products .cat-link:focus-visible {
  gap: 13px;
  border-bottom-color: var(--lime-300);
}

.page-products .cat-tree {
  margin: 22px 0;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--ghost-line);
  background: rgba(7, 17, 13, 0.45);
}

.page-products .cat-tree__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  list-style: none;
  transition: background 0.2s var(--ease);
}

.page-products .cat-tree__sum::-webkit-details-marker {
  display: none;
}

.page-products .cat-tree__sum::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--lime-300);
}

.page-products .cat-tree__node[open] > .cat-tree__sum::before {
  content: "−";
}

.page-products .cat-tree__sum:hover {
  background: rgba(198, 255, 74, 0.08);
}

.page-products .cat-tree__lvl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--slate-blue);
}

.page-products .cat-tree__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--mist-100);
}

.page-products .cat-tree__new {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--lime-300);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.page-products .cat-tree__children {
  margin: 2px 0 6px 14px;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}

.page-products .cat-tree__leaf {
  display: grid;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 0 0 0 22px;
  list-style: none;
}

.page-products .cat-tree__leaf li {
  position: relative;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-400);
}

.page-products .cat-tree__leaf li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--slate-blue);
}

.page-products .cat-watch {
  display: grid;
  gap: 14px;
  margin: 20px 0;
}

.page-products .cat-watch__cell {
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--ghost-line);
  background: var(--cat-cell);
}

.page-products .cat-watch__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(34px, 5.4vw, 48px);
  line-height: 1;
  color: var(--orange-500);
  font-variant-numeric: tabular-nums;
}

.page-products .cat-watch__cap {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate-400);
}

.page-products .cat-zone {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.page-products .cat-zone__pill {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 106, 42, 0.3);
  background: rgba(7, 17, 13, 0.55);
  text-decoration: none;
  color: var(--mist-100);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-products .cat-zone__pill:hover,
.page-products .cat-zone__pill:focus-visible {
  transform: translateY(-2px);
  border-color: var(--orange-500);
  background: rgba(255, 106, 42, 0.12);
}

.page-products .cat-zone__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--orange-500);
}

.page-products .cat-zone__v {
  font-size: 16.5px;
  font-weight: 800;
}

.page-products .cat-zone__d {
  font-size: 12.5px;
  color: var(--slate-400);
}

.page-products .cat-device {
  display: grid;
  gap: 22px;
  margin: 20px 0;
}

.page-products .cat-acc {
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--ghost-line);
  background: rgba(7, 17, 13, 0.5);
}

.page-products .cat-acc__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--mist-100);
}

.page-products .cat-acc__sum::-webkit-details-marker {
  display: none;
}

.page-products .cat-acc__sum::after {
  content: "＋";
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lime-300);
}

.page-products .cat-acc[open] > .cat-acc__sum {
  background: rgba(198, 255, 74, 0.07);
  border-bottom: 1px solid var(--ghost-line);
}

.page-products .cat-acc[open] > .cat-acc__sum::after {
  content: "－";
}

.page-products .cat-acc__body {
  padding: 14px 16px;
}

.page-products .cat-acc__body p {
  margin: 0;
  font-size: 14px;
}

.page-products .cat-cards {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-cards__item {
  padding: 4px 0 4px 16px;
  border-left: 1px solid var(--line-strong);
}

.page-products .cat-cards__item h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--mist-100);
}

.page-products .cat-cards__item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
}

.page-products .cat-scenes {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-scene {
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--cat-paper);
}

.page-products .cat-scene__tag {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime-300);
}

.page-products .cat-scene h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--mist-100);
}

.page-products .cat-scene p {
  margin: 0 0 12px;
  font-size: 14px;
}

.page-products .cat-finale {
  display: grid;
  gap: 20px;
  margin-top: var(--cat-gap);
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(122deg, var(--pine-700), var(--ink-900) 72%);
}

.page-products .cat-finale h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  color: var(--mist-100);
}

.page-products .cat-finale p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(234, 244, 238, 0.78);
}

.page-products .cat-finale__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 640px) {
  .page-products .cat-watch {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 720px) {
  .page-products .cat-block__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .cat-block__grid .cat-figure {
    margin-top: 0;
  }

  .page-products .cat-zone {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .cat-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-products .cat-device {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .cat-device .cat-figure {
    margin-top: 0;
  }

  .page-products .cat-scenes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .page-products .cat-hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .page-products .cat-finale {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
  }
}

@media (min-width: 1040px) {
  .page-products .cat-layout {
    grid-template-columns: var(--cat-rail) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 56px);
    align-items: start;
  }

  .page-products .cat-rail {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cat-rail__link,
  .page-products .cat-link,
  .page-products .cat-zone__pill,
  .page-products .cat-tree__sum {
    transition: none;
  }

  .page-products .cat-rail__link:hover,
  .page-products .cat-rail__link:focus-visible,
  .page-products .cat-zone__pill:hover,
  .page-products .cat-zone__pill:focus-visible {
    transform: none;
  }

  .page-products .cat-link:hover,
  .page-products .cat-link:focus-visible {
    gap: 8px;
  }
}