.page-home {
  --home-tint-primary: color-mix(in srgb, var(--color-primary) 44%, transparent);
  --home-tint-accent: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --home-glass: color-mix(in srgb, var(--color-surface-deep) 74%, transparent);
  --home-heading-ink: var(--color-primary-ink);
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

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

.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--section-y-lg) + var(--space-6)) var(--section-y);
  background:
    radial-gradient(112% 84% at 88% 2%, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, transparent 58%),
    linear-gradient(168deg, var(--color-surface-alt) 0%, var(--color-surface) 48%);
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset-inline: -22% -10%;
  top: 10%;
  height: 64%;
  z-index: 0;
  background: linear-gradient(212deg, color-mix(in srgb, var(--color-primary) 56%, transparent) 0%, transparent 68%);
  clip-path: polygon(0 24%, 100% 0, 88% 100%, 12% 86%);
  opacity: 0.32;
  pointer-events: none;
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
}

.page-home .home-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 1.03;
  letter-spacing: var(--tracking-heading);
  color: var(--home-heading-ink);
  margin-block: var(--space-2) var(--space-3);
}

.page-home .home-hero__lead {
  max-width: var(--measure);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-home .home-hero__media {
  position: relative;
}

.page-home .home-hero__media .media-frame {
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--home-tint-primary);
  box-shadow: 0 0 42px color-mix(in srgb, var(--color-primary) 30%, transparent);
  overflow: hidden;
}

@media (min-width: 900px) {
  .page-home .home-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
  }

  .page-home .home-hero__media {
    transform: translateY(var(--space-4));
  }
}

/* ---------- 首屏时间轴 ---------- */

.page-home .home-axis {
  position: relative;
  z-index: 1;
  margin-top: var(--space-8);
}

.page-home .home-axis__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-home .home-axis__rail {
  flex: 1 1 auto;
  height: 2px;
  min-width: var(--space-4);
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 90%, transparent) 100%
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.page-home .home-axis__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .home-axis__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-2);
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.page-home .home-axis__stat .figure-num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  line-height: 1;
  color: var(--home-heading-ink);
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 62%, transparent);
}

.page-home .home-axis__stat .figure-num--accent {
  color: var(--color-accent);
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 58%, transparent);
}

.page-home .home-axis__stat .figure-caption {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

@media (min-width: 720px) {
  .page-home .home-axis__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* ---------- 通用小标题 ---------- */

.page-home .section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.page-home .section-head h2,
.page-home .home-pulse__copy h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--home-heading-ink);
  margin-block: var(--space-1) var(--space-2);
}

.page-home .section-head p,
.page-home .home-pulse__copy p {
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

/* ---------- 筛选条 ---------- */

.page-home .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.page-home .filter-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--color-line);
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.page-home .filter-btn:hover {
  color: var(--color-ink);
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.page-home .filter-btn[aria-pressed="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--home-heading-ink);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 38%, transparent);
}

/* ---------- 四大主题 ---------- */

.page-home .home-topics {
  position: relative;
  overflow: hidden;
}

.page-home .home-topics__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
}

.page-home .home-topics__wash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.3) contrast(1.1);
}

.page-home .home-topics__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-surface-alt) 0%,
    color-mix(in srgb, var(--color-surface-alt) 62%, transparent) 48%,
    var(--color-surface-alt) 100%
  );
}

.page-home .home-topics__inner {
  position: relative;
  z-index: 1;
}

.page-home .home-topics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.page-home .home-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-line);
  background: var(--home-glass);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-home .home-topic::before {
  content: "";
  position: absolute;
  inset-inline: var(--space-4);
  top: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), transparent 82%);
}

.page-home .home-topic:hover {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
  box-shadow: var(--shadow-1);
}

.page-home .home-topic[hidden] {
  display: none;
}

.page-home .home-topic__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0;
}

.page-home .home-topic__text {
  color: var(--color-ink-soft);
  margin: 0;
}

.page-home .home-topic__link {
  margin-top: var(--space-1);
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  padding-bottom: calc(var(--space-1) / 4);
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 48%, transparent);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-home .home-topic__link:hover {
  color: var(--color-focus);
  border-bottom-color: var(--color-focus);
}

@media (min-width: 880px) {
  .page-home .home-topics__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .page-home .home-topic--a { grid-column: 1 / span 7; }
  .page-home .home-topic--b { grid-column: 8 / span 5; margin-top: var(--space-6); }
  .page-home .home-topic--c { grid-column: 1 / span 5; }
  .page-home .home-topic--d { grid-column: 6 / span 7; }
}

/* ---------- 一年节奏 ---------- */

.page-home .home-pulse__inner {
  display: grid;
  gap: var(--space-6);
}

.page-home .home-pulse__media .media-frame {
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-home .home-pulse__track {
  margin-top: var(--space-8);
}

.page-home .home-pulse__nodes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-home .home-pulse__nodes::-webkit-scrollbar {
  height: 6px;
}

.page-home .home-pulse__nodes::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 42%, transparent);
  border-radius: var(--radius-pill);
}

.page-home .home-pulse__node {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 150px;
  padding: var(--space-2);
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 72%);
}

.page-home .home-pulse__node h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0;
}

.page-home .home-pulse__node p {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0;
}

@media (min-width: 900px) {
  .page-home .home-pulse__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* ---------- 三档服务 ---------- */

.page-home .home-tiers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.page-home .home-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-line);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-deep) 82%, transparent),
    color-mix(in srgb, var(--color-surface) 92%, transparent)
  );
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-home .home-tier:hover {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  box-shadow: var(--shadow-2);
}

.page-home .home-tier__num {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-accent);
  text-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.page-home .home-tier h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0;
}

.page-home .home-tier p {
  color: var(--color-ink-soft);
  margin: 0;
}

.page-home .home-tiers__foot {
  margin-top: var(--space-8);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

.page-home .home-tiers__foot a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.page-home .home-tiers__foot a:hover {
  color: var(--color-focus);
  border-bottom-color: var(--color-focus);
}

@media (min-width: 820px) {
  .page-home .home-tiers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .page-home .home-tier--b { margin-top: var(--space-4); }
  .page-home .home-tier--c { margin-top: var(--space-8); }
}

/* ---------- 使用场景 ---------- */

.page-home .home-scenes__inner {
  display: grid;
  gap: var(--space-6);
}

.page-home .home-scenes__media .media-frame {
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-home .home-scenes__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-scene {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .home-scene__num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1.15;
  min-width: 5ch;
  color: var(--color-accent);
}

.page-home .home-scene h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0 0 var(--space-1);
}

.page-home .home-scene p {
  color: var(--color-ink-soft);
  margin: 0;
}

@media (min-width: 880px) {
  .page-home .home-scenes__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: center;
  }
}

/* ---------- 收尾行动 ---------- */

.page-home .home-cta.section--contrast {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-home .home-cta__inner {
  max-width: var(--measure);
}

.page-home .home-cta__inner .eyebrow {
  color: var(--color-contrast-accent);
}

.page-home .home-cta__inner h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
  margin-block: var(--space-1) var(--space-2);
}

.page-home .home-cta__inner p {
  color: var(--color-contrast-ink);
  margin-bottom: var(--space-4);
}

.page-home .home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.page-home .home-cta .btn--primary {
  background: var(--color-contrast-accent);
  border-color: var(--color-contrast-accent);
  color: var(--color-contrast-surface);
  box-shadow: none;
}

.page-home .home-cta .btn--ghost {
  background: transparent;
  border-color: var(--color-contrast-line);
  color: var(--color-contrast-ink);
  box-shadow: none;
}

.page-home .home-cta .btn--ghost:hover {
  border-color: var(--color-contrast-accent);
  color: var(--color-contrast-accent);
}

.page-home .home-cta__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-contrast-ink);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}
<<<END>>>

等等——我加了个 `<<<END>>>`，但说明里说标记只能出现一次、按顺序来。还是别加额外标记比较好。


<main id="main-content" class="page-home">

  <section class="home-hero">
    <div class="container home-hero__inner">
      <div class="home-hero__copy">
        <p class="eyebrow">贝博艾弗森体育 · 1997 至今</p>
        <h1 class="home-hero__title">从 1997<br>到本赛季<br>一条轴看清楚</h1>
        <p class="lead home-hero__lead">贝博艾弗森体育从 1997 年起跟踪这 12 个联赛的球队资料。转会、租借、客场战绩与薪资支出放在同一套口径里对照，无论你是在做赛季选题、窗口期快报，还是内部的引援讨论，都能先看清本赛季最值得关注的变化。</p>
        <div class="home-hero__actions">
          <a class="btn btn--primary" href="/topics/">看赛季专题</a>
          <a class="btn btn--ghost" href="/pricing/">对一下档位范围</a>
        </div>
      </div>
      <div class="home-hero__media">
        <div class="media-frame media-frame--ratio-16-10">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="低角度拍摄的球场边线与泛光灯，整体做霓虹紫粉单色调叠色处理，画面中没有人物面部">
        </div>
      </div>
    </div>

    <div class="container home-axis" aria-label="从 1997 到本赛季的跟踪区间">
      <div class="home-axis__head">
        <span class="tag">1997</span>
        <span class="home-axis__rail" aria-hidden="true"></span>
        <span class="tag tag--accent">本赛季</span>
      </div>
      <ol class="home-axis__stats">
        <li class="home-axis__stat">
          <span class="figure-num">12</span>
          <span class="figure-caption">个联赛覆盖，欧洲 7 个、南美 5 个</span>
        </li>
        <li class="home-axis__stat">
          <span class="figure-num figure-num--accent">28</span>
          <span class="figure-caption">个赛季区间，所有对照都按区间表述</span>
        </li>
        <li class="home-axis__stat">
          <span class="figure-num">4</span>
          <span class="figure-caption">个数据主题：转会、租借、客场战绩、薪资支出</span>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--alt home-topics" id="topics" data-reveal>
    <div class="home-topics__wash" aria-hidden="true">
      <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="看台结构的重复几何线条，冷色单色调处理" loading="lazy" decoding="async">
    </div>
    <div class="container home-topics__inner">
      <div class="section-head">
        <p class="eyebrow">数据主题</p>
        <h2>四个方向，一眼选定入口</h2>
        <p>每个方向对应一类赛季问题。已经确定要看哪一块，直接点进去；还没想好，就顺着四条往下读一遍，两分钟能定下来。</p>
      </div>

      <div class="filter-bar" data-filter-bar data-filter-scope="#home-topic-grid">
        <button class="filter-btn" type="button" data-filter="all" aria-pressed="true">全部</button>
        <button class="filter-btn" type="button" data-filter="转会动态" aria-pressed="false">转会动态</button>
        <button class="filter-btn" type="button" data-filter="租借名单" aria-pressed="false">租借名单</button>
        <button class="filter-btn" type="button" data-filter="客场胜率" aria-pressed="false">客场胜率</button>
        <button class="filter-btn" type="button" data-filter="薪资结构" aria-pressed="false">薪资结构</button>
      </div>

      <div class="home-topics__grid" id="home-topic-grid">
        <article class="home-topic home-topic--a" data-tag="转会动态">
          <p class="eyebrow">主题 01</p>
          <h3 class="home-topic__title">转会动态</h3>
          <p class="home-topic__text">谁进来了、谁走了、这笔操作放在赛季里意味着什么。窗口期里被问得最多的几个问题，都能顺着赛季区间往上翻到前因。</p>
          <a class="home-topic__link" href="/topics/">进转会动态专题</a>
        </article>

        <article class="home-topic home-topic--b" data-tag="租借名单">
          <p class="eyebrow">主题 02</p>
          <h3 class="home-topic__title">租借名单</h3>
          <p class="home-topic__text">外租去哪了、租期多长、回来之后位置在哪。名单连着母队与接收方的赛季走向一起看，才判断得出这笔租借值不值。</p>
          <a class="home-topic__link" href="/topics/">进租借名单专题</a>
        </article>

        <article class="home-topic home-topic--c" data-tag="客场胜率">
          <p class="eyebrow">主题 03</p>
          <h3 class="home-topic__title">客场胜率</h3>
          <p class="home-topic__text">按赛季区间统计，顶级联赛与次级杯赛分成两类口径。客场比赛的稳定性往往比总积分更能说明一支球队在赛季里的真实位置。</p>
          <a class="home-topic__link" href="/tailored/">看客场胜率的统计口径</a>
        </article>

        <article class="home-topic home-topic--d" data-tag="薪资结构">
          <p class="eyebrow">主题 04</p>
          <h3 class="home-topic__title">薪资结构</h3>
          <p class="home-topic__text">按联赛、俱乐部、赛季三个维度交叉组织。想知道一支球队的钱花在哪条线上，从这三个切面进去比看总额更快。</p>
          <a class="home-topic__link" href="/pricing/">看薪资结构在哪一档</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section home-pulse" id="rhythm" data-reveal>
    <div class="container home-pulse__inner">
      <div class="home-pulse__copy">
        <p class="eyebrow">更新节奏</p>
        <h2>一年里的两个波峰</h2>
        <p>内容集中压在转会窗口和赛季节点上。窗口开启时，转会与租借的变化最快；赛季走到中段和末段，客场战绩与薪资口径才真正有可比性。一年六次例行更新，你不用天天回来刷。</p>
      </div>
      <div class="home-pulse__media">
        <div class="media-frame media-frame--tall">
          <img src="{zhanqunpic:h:1200w:1000}" width="1000" height="1200" alt="旧纸张纹理与球衣织物的局部特写，暖调扫描质感，画面中没有可辨认的文字" loading="lazy" decoding="async">
        </div>
      </div>
    </div>

    <div class="container home-pulse__track">
      <ol class="home-pulse__nodes">
        <li class="home-pulse__node">
          <span class="tag">01</span>
          <h3>夏窗开启</h3>
          <p>转会与租借的第一轮变化，名单每天都在动</p>
        </li>
        <li class="home-pulse__node">
          <span class="tag">02</span>
          <h3>夏窗关闭</h3>
          <p>名单落定，客场阵容口径同步跟上</p>
        </li>
        <li class="home-pulse__node">
          <span class="tag">03</span>
          <h3>赛季中期</h3>
          <p>半程客场表现与薪资支出开始有对照意义</p>
        </li>
        <li class="home-pulse__node">
          <span class="tag">04</span>
          <h3>冬窗开启</h3>
          <p>补强方向与租借去处集中更新一轮</p>
        </li>
        <li class="home-pulse__node">
          <span class="tag">05</span>
          <h3>冬窗关闭</h3>
          <p>下半程名单与阵容深度确认下来</p>
        </li>
        <li class="home-pulse__node">
          <span class="tag">06</span>
          <h3>赛季末</h3>
          <p>整季复盘，跨赛季对照这时候最完整</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--deep home-tiers" id="tiers" data-reveal>
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">服务档位</p>
        <h2>范围不同，口径相同</h2>
        <p>不管选哪一档，转会、租借、客场战绩和薪资支出用的都是同一条赛季口径。差别只在你需要看几个赛季，以及要不要按机构自己的方式讲出来。</p>
      </div>

      <div class="home-tiers__grid">
        <article class="home-tier home-tier--a">
          <span class="home-tier__num">4</span>
          <h3>赛季随行</h3>
          <p>围着当前赛季的四个主题走，适合每周都要出内容的个人创作者。随时能翻回上一轮的结论，不用从头再查一遍。</p>
          <span class="tag">当季四大主题</span>
        </article>

        <article class="home-tier home-tier--b">
          <span class="home-tier__num">2</span>
          <h3>双赛季对照</h3>
          <p>两个赛季区间放进同一张表，适合做赛季复盘、写对比稿或准备赛季总结的编辑。变化幅度和拐点一眼能看出来。</p>
          <span class="tag">两个赛季区间并排</span>
        </article>

        <article class="home-tier home-tier--c">
          <span class="home-tier__num">48</span>
          <h3>机构定制</h3>
          <p>按你的口径和场合单独出面板，48 小时内给出初版。适合俱乐部商务、经纪团队、赞助方市场团队这类需要对外讲清楚的场景。</p>
          <span class="tag">小时内交付初版</span>
        </article>
      </div>

      <p class="home-tiers__foot">拿不准选哪一档，可以先看 <a href="/pricing/">三档服务各自覆盖什么</a>，再对着 <a href="/pricing/compare/">档位对比</a> 一个维度一个维度地比过去。</p>
    </div>
  </section>

  <section class="section section--alt home-scenes" id="scenes" data-reveal>
    <div class="container home-scenes__inner">
      <div class="home-scenes__media">
        <div class="media-frame media-frame--ratio-4-3">
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="空旷的更衣室走廊，低角度透视，光线从走廊尽头射入，画面中没有人物" loading="lazy" decoding="async">
        </div>
      </div>

      <div class="home-scenes__body">
        <div class="section-head">
          <p class="eyebrow">使用场景</p>
          <h2>谁在用这些赛季简报</h2>
        </div>

        <ul class="home-scenes__list">
          <li class="home-scene">
            <span class="home-scene__num">1200+</span>
            <div>
              <h3>内容创作者的每周选题</h3>
              <p>一千二百多位创作者把这里的赛季变化当选题线索。周更之前先看四个主题有没有新变化，再决定这周写哪一条。</p>
            </div>
          </li>
          <li class="home-scene">
            <span class="home-scene__num">6</span>
            <div>
              <h3>媒体编辑的窗口期快报</h3>
              <p>一年六次例行更新，正好压在转会窗口与赛季节点上。窗口期要出快报，转会与租借的名单变化可以跟着一起出。</p>
            </div>
          </li>
          <li class="home-scene">
            <span class="home-scene__num">60+</span>
            <div>
              <h3>俱乐部商务的引援讨论</h3>
              <p>六十余家机构订阅方在内部讨论里用这些数据支撑判断。客场表现与薪资支出摆在一起看，比单看一项更有说服力。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section section--contrast home-cta" id="next-step" data-reveal>
    <div class="container home-cta__inner">
      <p class="eyebrow">下一步</p>
      <h2>带着一个具体问题来</h2>
      <p>把你要看的赛季区间、涉及哪个联赛、用在什么场合说清楚，回应会快很多。数据更正和合作请求也走同一个邮箱，我们会转给对应的人。</p>
      <div class="home-cta__actions">
        <a class="btn btn--primary" href="/contact/">把需求发到客服邮箱</a>
        <a class="btn btn--ghost" href="/about/">看我们的口径与团队</a>
      </div>
      <p class="home-cta__meta">info@legend-beibo.com.cn · 17583106490 · 重庆市渝中区解放碑民权路28号</p>
    </div>
  </section>

</main>

.page-home {
  --home-tint-primary: color-mix(in srgb, var(--color-primary) 44%, transparent);
  --home-glass: color-mix(in srgb, var(--color-surface-deep) 74%, transparent);
  --home-heading-ink: var(--color-primary-ink);
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

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

.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--section-y-lg) + var(--space-6)) var(--section-y);
  background:
    radial-gradient(112% 84% at 88% 2%, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, transparent 58%),
    linear-gradient(168deg, var(--color-surface-alt) 0%, var(--color-surface) 48%);
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset-inline: -22% -10%;
  top: 10%;
  height: 64%;
  z-index: 0;
  background: linear-gradient(212deg, color-mix(in srgb, var(--color-primary) 56%, transparent) 0%, transparent 68%);
  clip-path: polygon(0 24%, 100% 0, 88% 100%, 12% 86%);
  opacity: 0.32;
  pointer-events: none;
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
}

.page-home .home-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 1.03;
  letter-spacing: var(--tracking-heading);
  color: var(--home-heading-ink);
  margin-block: var(--space-2) var(--space-3);
}

.page-home .home-hero__lead {
  max-width: var(--measure);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-home .home-hero__media {
  position: relative;
}

.page-home .home-hero__media .media-frame {
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--home-tint-primary);
  box-shadow: 0 0 42px color-mix(in srgb, var(--color-primary) 30%, transparent);
  overflow: hidden;
}

@media (min-width: 900px) {
  .page-home .home-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
  }

  .page-home .home-hero__media {
    transform: translateY(var(--space-4));
  }
}

/* ---------- 首屏时间轴 ---------- */

.page-home .home-axis {
  position: relative;
  z-index: 1;
  margin-top: var(--space-8);
}

.page-home .home-axis__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-home .home-axis__rail {
  flex: 1 1 auto;
  height: 2px;
  min-width: var(--space-4);
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 90%, transparent) 100%
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.page-home .home-axis__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .home-axis__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-2);
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.page-home .home-axis__stat .figure-num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  line-height: 1;
  color: var(--home-heading-ink);
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 62%, transparent);
}

.page-home .home-axis__stat .figure-num--accent {
  color: var(--color-accent);
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 58%, transparent);
}

.page-home .home-axis__stat .figure-caption {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

@media (min-width: 720px) {
  .page-home .home-axis__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* ---------- 通用小标题 ---------- */

.page-home .section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.page-home .section-head h2,
.page-home .home-pulse__copy h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--home-heading-ink);
  margin-block: var(--space-1) var(--space-2);
}

.page-home .section-head p,
.page-home .home-pulse__copy p {
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

/* ---------- 筛选条 ---------- */

.page-home .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.page-home .filter-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--color-line);
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.page-home .filter-btn:hover {
  color: var(--color-ink);
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.page-home .filter-btn[aria-pressed="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--home-heading-ink);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 38%, transparent);
}

/* ---------- 四大主题 ---------- */

.page-home .home-topics {
  position: relative;
  overflow: hidden;
}

.page-home .home-topics__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
}

.page-home .home-topics__wash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.3) contrast(1.1);
}

.page-home .home-topics__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-surface-alt) 0%,
    color-mix(in srgb, var(--color-surface-alt) 62%, transparent) 48%,
    var(--color-surface-alt) 100%
  );
}

.page-home .home-topics__inner {
  position: relative;
  z-index: 1;
}

.page-home .home-topics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.page-home .home-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-line);
  background: var(--home-glass);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-home .home-topic::before {
  content: "";
  position: absolute;
  inset-inline: var(--space-4);
  top: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), transparent 82%);
}

.page-home .home-topic:hover {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
  box-shadow: var(--shadow-1);
}

.page-home .home-topic[hidden] {
  display: none;
}

.page-home .home-topic__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0;
}

.page-home .home-topic__text {
  color: var(--color-ink-soft);
  margin: 0;
}

.page-home .home-topic__link {
  margin-top: var(--space-1);
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  padding-bottom: calc(var(--space-1) / 4);
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 48%, transparent);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-home .home-topic__link:hover {
  color: var(--color-focus);
  border-bottom-color: var(--color-focus);
}

@media (min-width: 880px) {
  .page-home .home-topics__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .page-home .home-topic--a { grid-column: 1 / span 7; }
  .page-home .home-topic--b { grid-column: 8 / span 5; margin-top: var(--space-6); }
  .page-home .home-topic--c { grid-column: 1 / span 5; }
  .page-home .home-topic--d { grid-column: 6 / span 7; }
}

/* ---------- 一年节奏 ---------- */

.page-home .home-pulse__inner {
  display: grid;
  gap: var(--space-6);
}

.page-home .home-pulse__media .media-frame {
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-home .home-pulse__track {
  margin-top: var(--space-8);
}

.page-home .home-pulse__nodes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-home .home-pulse__nodes::-webkit-scrollbar {
  height: 6px;
}

.page-home .home-pulse__nodes::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 42%, transparent);
  border-radius: var(--radius-pill);
}

.page-home .home-pulse__node {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 150px;
  padding: var(--space-2);
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 72%);
}

.page-home .home-pulse__node h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0;
}

.page-home .home-pulse__node p {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0;
}

@media (min-width: 900px) {
  .page-home .home-pulse__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* ---------- 三档服务 ---------- */

.page-home .home-tiers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.page-home .home-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-line);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-deep) 82%, transparent),
    color-mix(in srgb, var(--color-surface) 92%, transparent)
  );
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-home .home-tier:hover {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  box-shadow: var(--shadow-2);
}

.page-home .home-tier__num {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-accent);
  text-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.page-home .home-tier h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0;
}

.page-home .home-tier p {
  color: var(--color-ink-soft);
  margin: 0;
}

.page-home .home-tiers__foot {
  margin-top: var(--space-8);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

.page-home .home-tiers__foot a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.page-home .home-tiers__foot a:hover {
  color: var(--color-focus);
  border-bottom-color: var(--color-focus);
}

@media (min-width: 820px) {
  .page-home .home-tiers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .page-home .home-tier--b { margin-top: var(--space-4); }
  .page-home .home-tier--c { margin-top: var(--space-8); }
}

/* ---------- 使用场景 ---------- */

.page-home .home-scenes__inner {
  display: grid;
  gap: var(--space-6);
}

.page-home .home-scenes__media .media-frame {
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-home .home-scenes__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-scene {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .home-scene__num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1.15;
  min-width: 5ch;
  color: var(--color-accent);
}

.page-home .home-scene h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--home-heading-ink);
  margin: 0 0 var(--space-1);
}

.page-home .home-scene p {
  color: var(--color-ink-soft);
  margin: 0;
}

@media (min-width: 880px) {
  .page-home .home-scenes__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: center;
  }
}

/* ---------- 收尾行动 ---------- */

.page-home .home-cta.section--contrast {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-home .home-cta__inner {
  max-width: var(--measure);
}

.page-home .home-cta__inner .eyebrow {
  color: var(--color-contrast-accent);
}

.page-home .home-cta__inner h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
  margin-block: var(--space-1) var(--space-2);
}

.page-home .home-cta__inner p {
  color: var(--color-contrast-ink);
  margin-bottom: var(--space-4);
}

.page-home .home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.page-home .home-cta .btn--primary {
  background: var(--color-contrast-accent);
  border-color: var(--color-contrast-accent);
  color: var(--color-contrast-surface);
  box-shadow: none;
}

.page-home .home-cta .btn--ghost {
  background: transparent;
  border-color: var(--color-contrast-line);
  color: var(--color-contrast-ink);
  box-shadow: none;
}

.page-home .home-cta .btn--ghost:hover {
  border-color: var(--color-contrast-accent);
  color: var(--color-contrast-accent);
}

.page-home .home-cta__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-contrast-ink);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}