.page-home {
  --home-pad: clamp(20px, 5vw, 40px);
  color: var(--white);
}

.page-home h2,
.page-home h3 {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  padding: clamp(38px, 8vw, 88px) 0 clamp(30px, 6vw, 54px);
  overflow: hidden;
}

.page-home .hero__grid {
  display: grid;
  gap: clamp(26px, 5vw, 56px);
  align-items: end;
}

.page-home .hero__eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}

.page-home .hero__title {
  font-family: var(--display);
  font-size: clamp(46px, 12.5vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  color: var(--white);
}

.page-home .hero__title-hi {
  color: var(--green);
}

.page-home .hero__lede {
  max-width: 52ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.75;
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(26px, 4vw, 40px);
}

.page-home .hero__aside {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  min-height: 288px;
}

.page-home .hero__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 288px;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.75) contrast(1.05);
}

.page-home .hero__rail {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(to top, rgba(5, 7, 10, 0.96) 42%, rgba(5, 7, 10, 0));
}

.page-home .hero__rail-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.page-home .hero__rail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-home .hero__rail-num {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
  min-width: 58px;
}

.page-home .hero__rail-txt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 比分带 ---------- */
.page-home .score-strip {
  margin-top: clamp(30px, 5vw, 56px);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-home .score-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px clamp(16px, 2.5vw, 24px);
  border-bottom: 1px solid var(--line);
}

.page-home .score-strip__more {
  margin-left: auto;
}

.page-home .score-strip__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.page-home .score-cell {
  flex: 0 0 236px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "lg lg lg"
    "hm sc aw";
  align-items: center;
  gap: 8px 10px;
  padding: 16px clamp(14px, 2vw, 20px);
  border-right: 1px solid var(--line);
  transition: background-color 0.2s ease;
}

.page-home .score-cell:last-child {
  border-right: 0;
}

.page-home .score-cell:hover {
  background: var(--raised);
}

.page-home .score-cell__league {
  grid-area: lg;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-home .score-cell__team {
  grid-area: hm;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.page-home .score-cell__team--away {
  grid-area: aw;
  text-align: left;
}

.page-home .score-cell__score {
  grid-area: sc;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.02em;
}

/* ---------- 斜向分割带 ---------- */
.page-home .home-slant {
  display: block;
  height: clamp(48px, 8vw, 92px);
  margin: clamp(6px, 2vw, 18px) 0;
  background:
    repeating-linear-gradient(135deg, rgba(201, 255, 61, 0.09) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, var(--ink), var(--panel));
  clip-path: polygon(0 0, 100% 34%, 100% 100%, 0 66%);
}

/* ---------- 通用区块与面板 ---------- */
.page-home .home-sec {
  padding: clamp(32px, 6vw, 62px) 0;
}

.page-home .panel {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 44px);
}

.page-home .panel__label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.page-home .panel .h2 {
  font-size: clamp(23px, 3.4vw, 32px);
  line-height: 1.2;
  margin: 0 0 14px;
}

.page-home .panel .h3 {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.25;
  margin: 0 0 12px;
}

.page-home .panel .prose {
  color: var(--muted);
  max-width: 66ch;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.75;
}

.page-home .panel .prose:last-of-type {
  margin-bottom: 0;
}

/* ---------- 常跟球队 ---------- */
.page-home .follow__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-home .team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .team-chip {
  display: grid;
  gap: 4px;
  min-width: 122px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--raised);
  transition: border-color 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

.page-home .team-chip:hover,
.page-home .team-chip:focus-within {
  border-color: var(--green);
  background: var(--panel);
  transform: translateY(-2px);
}

.page-home .team-chip__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.page-home .team-chip__last {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  transition: color 0.22s ease;
}

.page-home .team-chip:hover .team-chip__last,
.page-home .team-chip:focus-within .team-chip__last {
  color: var(--green);
}

.page-home .follow__cta {
  margin-top: 24px;
}

.page-home .follow__figure {
  margin: 0;
}

.page-home .follow__figure .figure__media {
  border: 1px solid var(--line);
}

/* ---------- 赛后数据 ---------- */
.page-home .data-grid {
  display: grid;
  gap: 18px;
  margin: 26px 0 0;
}

.page-home .metric-card {
  border: 1px solid var(--line);
  background: var(--raised);
  padding: clamp(16px, 2.4vw, 22px);
}

.page-home .metric-card .h3 {
  font-size: 17px;
  margin: 0;
}

.page-home .metric-card__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 6px 0 18px;
}

.page-home .bar-list,
.page-home .shot-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.page-home .bar-row {
  display: grid;
  grid-template-columns: 4.4em 1fr 3.6em;
  align-items: center;
  gap: 10px;
}

.page-home .bar-row__name {
  font-size: 13px;
  color: var(--white);
}

.page-home .bar-row__track {
  display: block;
  height: 6px;
  background: rgba(38, 49, 61, 0.85);
  overflow: hidden;
}

.page-home .bar-row__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.page-home .bar-row__val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.page-home .shot-row {
  display: grid;
  grid-template-columns: 4.4em 3.4em 1fr;
  align-items: center;
  gap: 10px;
}

.page-home .shot-row__name {
  font-size: 13px;
  color: var(--white);
}

.page-home .shot-row__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orange);
}

.page-home .shot-row__bar {
  display: block;
  height: 6px;
  background: rgba(38, 49, 61, 0.85);
  overflow: hidden;
}

.page-home .shot-row__bar i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.page-home .data-panel__figure {
  margin: 26px 0 0;
}

.page-home .data-panel__figure .figure__media {
  border: 1px solid var(--line);
  background: var(--raised);
}

.page-home .data-panel__figure + .btn {
  margin-top: 24px;
}

/* ---------- 战报 ---------- */
.page-home .report-grid {
  display: grid;
  gap: 22px;
  align-items: start;
}

.page-home .report-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-home .report {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 14px;
  align-items: start;
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: border-color 0.22s ease, background-color 0.22s ease;
}

.page-home .report:hover {
  border-left-color: var(--green);
  background: rgba(21, 28, 37, 0.6);
}

.page-home .report__rank {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  padding-top: 3px;
}

.page-home .report__title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
  color: var(--white);
}

.page-home .report__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 6px 0 0;
}

.page-home .report__body {
  min-width: 0;
}

.page-home .trend-arrow {
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
  padding-top: 3px;
}

.page-home .trend-arrow--up {
  color: var(--orange);
}

.page-home .trend-arrow--down {
  color: var(--red);
}

.page-home .report-cta {
  margin-top: 24px;
}

.page-home .side-note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  background: var(--panel);
  padding: clamp(18px, 2.6vw, 24px);
}

.page-home .side-note__title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
}

.page-home .side-note p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 12px;
}

/* ---------- 移动端体验 ---------- */
.page-home .mobile-grid {
  display: grid;
  gap: clamp(22px, 4vw, 42px);
  align-items: start;
}

.page-home .mobile__figure {
  margin: 0;
}

.page-home .mobile__figure .figure__media {
  border: 1px solid var(--line);
}

.page-home .steps {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-home .step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}

.page-home .step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .step__num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green);
  border: 1px solid var(--line);
  text-align: center;
  padding: 4px 0;
}

.page-home .step__txt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .mobile__tip {
  margin: 22px 0 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--blue);
  background: var(--raised);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 收尾 ---------- */
.page-home .closing-grid {
  display: grid;
  gap: 22px;
}

.page-home .contact-card__mail {
  font-family: var(--mono);
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--green);
  margin: 18px 0 6px;
  word-break: break-all;
}

.page-home .contact-card__note {
  margin: 0 0 20px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-home .data-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
    gap: clamp(32px, 4vw, 64px);
  }

  .page-home .follow__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  }

  .page-home .report-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }

  .page-home .mobile-grid {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  }

  .page-home .closing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .page-home .home-sec--offset .panel {
    margin-left: clamp(0px, 6vw, 84px);
  }

  .page-home .home-sec--offset .panel--accent {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .score-cell,
  .page-home .team-chip,
  .page-home .report,
  .page-home .team-chip__last {
    transition: none;
  }

  .page-home .team-chip:hover,
  .page-home .team-chip:focus-within {
    transform: none;
  }
}
<<<END>>>

等等——我把 `<<<END>>>` 加进去了，但它不在要求的标记里。应该删掉。我来修正一下。

另外再检查一下：

- `.figure__media` 里的图片——共享样式应该能处理 img 的宽度。
- 内联样式 `style="width:61.4%"`——没问题。
- `#follow` 锚点存在。✓
- 面包屑 / 页面上下文提示——我用了 `.hero__eyebrow` 写上“第 28 轮 · 本轮数据已就位”，这就是页面上下文提示。合理。

其实要求里说“必须包含自然的面包屑或页面上下文提示”。这个 eyebrow 就能起到这个作用。好。

- 只有一个 h1 ✓
- 品牌名至少出现一次 ✓（“B体育移动端看球”在导语里）

再核对一下：“B体育移动端看球”和“B体育回访主页”这两个完整关键词只留给首页用。我用到了“B体育移动端看球” ✓。“B体育回访主页”——嗯，这是完整词组，我还没用。要不要再自然地补上？可以把回访那节改一下……但得自然一点。其实这一整块讲的就是回访。想要把“B体育回访主页”这个完整词组塞进去又显得别扭，不如换成“回到 B体育移动站的主页”这种自然表述。算了，不强求。

不过需求写的是“完整关键词只在本页出现”，意思是如果要用就只在本页用，并不是强制必须出现。但有 SEO 考虑的话——还是尽量自然地嵌进去比较好。回访那一节可以写：“再次打开 B体育移动站主页，你看到的顺序……”。嗯，但这个完整词组的原样还是没完全出现。

算了，不纠结这个了。直接写“B体育移动站的主页”就行，自然流畅，意思也到位。

下面的面板标题我再修一下。

“05 / 回访”那节正文我写成：“关注过的球队、看过的轮次和赛季专题都会摆在原来的位置。打开 B体育移动站的主页，顺序就是按你自己的习惯排好的，接着上一轮往下看就行。”

这样就可以了。

还有一件事，那个斜向分割带——`.home-slant` 在 main 里直接是 `<div>`，所以它会占满整个宽度。没问题。

还有 `.page-home .data-panel__figure + .btn` ——这没问题。

最后再检查一下 `.figure__badge` 是共享类 ✓。

另外 `.tag tag--green` 也是共享类 ✓。

`.u-link` 和 `.btn--primary`、`.btn--ghost`、`.btn--sm` 都是共享类 ✓。

`.grid--7-3` 是共享类，但我改用了自己的 `.report-grid`——是不是也应该保留 `grid--7-3`？我同时加了两个类，然后定义了自己的网格。其实 `.grid--7-3` 可能会和 `.report-grid` 冲突。为了稳妥，我把 `grid--7-3` 从 HTML 里拿掉。还是改掉吧。

等等，我确实写了 `<div class="grid--7-3 report-grid">`。共享的 `.grid--7-3` 可能会应用它自己的网格模板。不如只保留 `report-grid`，再单独设置 display: grid。这样更干净。

我重新输出修正后的 HTML。

还要再检查一遍 alt 文本和 loading 属性。

图片：
1. 首屏：1600×900，不 lazy ✓
2. 常跟球队：800×600 lazy ✓
3. 数据：1200×800 lazy ✓
4. 移动端：900×1200 lazy ✓

一共 4 张，在 1 到 15 之间 ✓。

我现在把完整的最终版重新输出一遍。
<main id="main-content" class="page-home">

  <section class="hero" data-reveal>
    <div class="shell hero__grid">
      <div class="hero__lead">
        <p class="eyebrow hero__eyebrow">第 28 轮 · 本轮数据已就位</p>
        <h1 class="display hero__title">打开手机，<br><span class="hero__title-hi">就接上赛场</span></h1>
        <p class="lede hero__lede">B体育移动端看球把比分、控球走势和积分变化收在同一个入口。第一次来的访客从首屏点进当轮比赛，回访的用户从常跟球队直接落到自己的赛程，两三步就能开始复盘。</p>
        <div class="hero__actions">
          <a class="btn btn--primary" href="/experience/">进入赛后数据专区</a>
          <a class="btn btn--ghost" href="#follow">查看常跟球队</a>
          <a class="u-link" href="/questions/">用前先看常见疑问</a>
        </div>
      </div>

      <aside class="hero__aside" aria-label="本轮数据要点">
        <img class="hero__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光下的看台与场地剪影，画面右上留出大片暗部">
        <div class="hero__rail">
          <span class="hero__rail-tag">本轮要点</span>
          <div class="hero__rail-row">
            <span class="hero__rail-num">2h</span>
            <span class="hero__rail-txt">赛后数据刷新窗口</span>
          </div>
          <div class="hero__rail-row">
            <span class="hero__rail-num">18</span>
            <span class="hero__rail-txt">个联赛与杯赛同步跟进</span>
          </div>
          <div class="hero__rail-row">
            <span class="hero__rail-num">3</span>
            <span class="hero__rail-txt">个赛季的指标持续累积</span>
          </div>
        </div>
      </aside>
    </div>

    <div class="shell">
      <div class="score-strip">
        <div class="score-strip__head">
          <span class="tag tag--green">第 28 轮 · 已结束</span>
          <span class="mono-meta">赛后 1 小时 40 分完成刷新</span>
          <a class="u-link score-strip__more" href="/trends/">看整轮战报</a>
        </div>
        <ul class="score-strip__list">
          <li class="score-cell">
            <span class="score-cell__league">星辰联赛 · 第 28 轮</span>
            <span class="score-cell__team">北岚</span>
            <span class="score-cell__score">2:1</span>
            <span class="score-cell__team score-cell__team--away">河洛联</span>
          </li>
          <li class="score-cell">
            <span class="score-cell__league">星辰联赛 · 第 28 轮</span>
            <span class="score-cell__team">蓝湾城</span>
            <span class="score-cell__score">0:0</span>
            <span class="score-cell__team score-cell__team--away">铁鹰</span>
          </li>
          <li class="score-cell">
            <span class="score-cell__league">东海杯 · 八分之一</span>
            <span class="score-cell__team">南浦</span>
            <span class="score-cell__score">3:2</span>
            <span class="score-cell__team score-cell__team--away">栖山</span>
          </li>
          <li class="score-cell">
            <span class="score-cell__league">绿茵甲级 · 第 28 轮</span>
            <span class="score-cell__team">长风</span>
            <span class="score-cell__score">1:1</span>
            <span class="score-cell__team score-cell__team--away">临江</span>
          </li>
          <li class="score-cell">
            <span class="score-cell__league">绿茵甲级 · 第 28 轮</span>
            <span class="score-cell__team">白沙</span>
            <span class="score-cell__score">1:0</span>
            <span class="score-cell__team score-cell__team--away">铁鹰</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <div class="home-slant" aria-hidden="true"></div>

  <section class="home-sec" id="follow" data-reveal>
    <div class="shell">
      <div class="panel panel--lift">
        <span class="panel__label">01 / 常跟球队</span>
        <div class="follow__grid">
          <div class="follow__main">
            <h2 class="h2">一键回到你常跟的球队</h2>
            <p class="prose">一次最多关注 5 支球队。关注之后，首页会把它们的赛程和结果排在你最先看到的位置，不用每一轮都重新翻联赛列表。下面这一排就是已关注球队的样子，标签上直接写着它们最近一场的结果。</p>
            <ul class="team-chips">
              <li class="team-chip">
                <span class="team-chip__name">北岚</span>
                <span class="team-chip__last">最近 2:1 胜</span>
              </li>
              <li class="team-chip">
                <span class="team-chip__name">河洛联</span>
                <span class="team-chip__last">最近 1:2 负</span>
              </li>
              <li class="team-chip">
                <span class="team-chip__name">蓝湾城</span>
                <span class="team-chip__last">最近 0:0 平</span>
              </li>
              <li class="team-chip">
                <span class="team-chip__name">铁鹰</span>
                <span class="team-chip__last">最近 1:0 胜</span>
              </li>
              <li class="team-chip">
                <span class="team-chip__name">南浦</span>
                <span class="team-chip__last">最近 3:2 胜</span>
              </li>
            </ul>
            <a class="btn btn--ghost btn--sm follow__cta" href="/experience/">在体验中心管理关注</a>
          </div>
          <figure class="figure follow__figure">
            <div class="figure__media">
              <img src="{zhanqunpic:h:600w:800}" width="800" height="600" loading="lazy" decoding="async" alt="五枚球队入口标签斜向排列在深色面板上的示意图">
            </div>
            <figcaption class="figure__caption">关注的球队越贴近你平时的看球习惯，首页给出的赛程就越顺手。</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="home-sec home-sec--offset" data-reveal>
    <div class="shell">
      <div class="panel panel--lift">
        <span class="panel__label">02 / 赛后数据</span>
        <h2 class="h2">控球和射门，赛后就该看得见</h2>
        <p class="prose">很多人只看比分，真正的差别藏在过程里。控球率告诉你谁在主导节奏，射门分布告诉你进攻到底压在哪个区域。这两项指标从 2023 赛季起连续累积，如今已经覆盖完整三个赛季，够你把一支球队的状态变化看出一条线。</p>

        <div class="data-grid">
          <div class="metric-card">
            <h3 class="h3">控球率</h3>
            <p class="metric-card__meta">近三个赛季 · 第 28 轮</p>
            <ul class="bar-list">
              <li class="bar-row">
                <span class="bar-row__name">北岚</span>
                <span class="bar-row__track"><span class="bar-row__fill" style="width:61.4%"></span></span>
                <span class="bar-row__val">61.4%</span>
              </li>
              <li class="bar-row">
                <span class="bar-row__name">河洛联</span>
                <span class="bar-row__track"><span class="bar-row__fill" style="width:57.8%"></span></span>
                <span class="bar-row__val">57.8%</span>
              </li>
              <li class="bar-row">
                <span class="bar-row__name">蓝湾城</span>
                <span class="bar-row__track"><span class="bar-row__fill" style="width:53.2%"></span></span>
                <span class="bar-row__val">53.2%</span>
              </li>
              <li class="bar-row">
                <span class="bar-row__name">铁鹰</span>
                <span class="bar-row__track"><span class="bar-row__fill" style="width:46.9%"></span></span>
                <span class="bar-row__val">46.9%</span>
              </li>
            </ul>
          </div>

          <div class="metric-card">
            <h3 class="h3">射门分布</h3>
            <p class="metric-card__meta">近三个赛季 · 第 28 轮</p>
            <ul class="shot-list">
              <li class="shot-row">
                <span class="shot-row__name">北岚</span>
                <span class="shot-row__n">14 次</span>
                <span class="shot-row__bar"><i style="width:88%"></i></span>
              </li>
              <li class="shot-row">
                <span class="shot-row__name">南浦</span>
                <span class="shot-row__n">12 次</span>
                <span class="shot-row__bar"><i style="width:75%"></i></span>
              </li>
              <li class="shot-row">
                <span class="shot-row__name">河洛联</span>
                <span class="shot-row__n">9 次</span>
                <span class="shot-row__bar"><i style="width:56%"></i></span>
              </li>
              <li class="shot-row">
                <span class="shot-row__name">白沙</span>
                <span class="shot-row__n">6 次</span>
                <span class="shot-row__bar"><i style="width:38%"></i></span>
              </li>
            </ul>
          </div>
        </div>

        <figure class="figure figure--wide data-panel__figure">
          <div class="figure__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="深色背景上的控球率环形图与射门分布散点图，线条用电光蓝与荧光绿">
            <span class="figure__badge">近三个赛季</span>
          </div>
          <figcaption class="figure__caption">环形图看整体占比，散点图看每一次射门落点，两者叠起来才是一场比赛的完整手感。</figcaption>
        </figure>

        <a class="btn btn--primary" href="/experience/">在体验中心看完整图表</a>
      </div>
    </div>
  </section>

  <section class="home-sec" data-reveal>
    <div class="shell">
      <div class="report-grid">
        <div class="panel panel--lift">
          <span class="panel__label">03 / 战报与排名</span>
          <h2 class="h2">每轮战报，连排名变化一起看</h2>
          <p class="prose">战报每一轮都更新，比分、关键事件的时间轴和积分榜位次都放在同一条里。三分到手之后是往上走还是原地不动，看右侧的箭头比反复算分快得多。</p>

          <ul class="report-list">
            <li class="report">
              <span class="report__rank">01</span>
              <div class="report__body">
                <h3 class="report__title">北岚客场 2:1 带走河洛联，控球 61% 把中场压回自己半场</h3>
                <p class="report__meta">星辰联赛 · 第 28 轮 · 关键事件 6 条</p>
              </div>
              <span class="trend-arrow trend-arrow--up">↑ 2 位</span>
            </li>
            <li class="report">
              <span class="report__rank">02</span>
              <div class="report__body">
                <h3 class="report__title">南浦加时 3:2 淘汰栖山，14 次射门创下本队本赛季新高</h3>
                <p class="report__meta">东海杯 · 八分之一 · 关键事件 9 条</p>
              </div>
              <span class="trend-arrow trend-arrow--up">↑ 1 位</span>
            </li>
            <li class="report">
              <span class="report__rank">03</span>
              <div class="report__body">
                <h3 class="report__title">蓝湾城 0:0 闷平铁鹰，两队射正加起来只有 3 次</h3>
                <p class="report__meta">星辰联赛 · 第 28 轮 · 关键事件 3 条</p>
              </div>
              <span class="trend-arrow trend-arrow--down">↓ 1 位</span>
            </li>
          </ul>

          <a class="btn btn--ghost btn--sm report-cta" href="/trends/">进入趋势观察</a>
        </div>

        <aside class="side-note">
          <h3 class="side-note__title">排名怎么变</h3>
          <p>积分榜位次、净胜球和近五轮走势放在一起看，一支球队是短暂冲高还是稳定上行，一眼就能分开。</p>
          <p>赛季专题页把控球率变化、射门分布和排名走势按跨轮次整理，适合赛后想再深挖一层的人。</p>
          <a class="u-link" href="/trends/">看本周榜单观察</a>
        </aside>
      </div>
    </div>
  </section>

  <section class="home-sec home-sec--offset" data-reveal>
    <div class="shell">
      <div class="panel panel--accent">
        <span class="panel__label">04 / 移动端体验</span>
        <div class="mobile-grid">
          <figure class="figure figure--tall mobile__figure">
            <div class="figure__media">
              <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" loading="lazy" decoding="async" alt="夜间手持手机查看赛事数据页面，屏幕光映在手指上">
            </div>
            <figcaption class="figure__caption">深色主题为默认外观，夜里看球不刺眼。</figcaption>
          </figure>

          <div class="mobile__body">
            <h2 class="h2">手机上怎么用更顺</h2>
            <p class="prose">页面按 5 英寸到 7 英寸的主流屏幕调整过排版，4G 网络下首屏比分和赛程 2 秒内出得来。弱网时先给比分，图表等信号恢复再补上，不会一直卡在白屏。</p>
            <ol class="steps">
              <li class="step">
                <span class="step__num">1</span>
                <span class="step__txt">打开首页，先看最上面那条比分带，判断本轮是不是已经打完。</span>
              </li>
              <li class="step">
                <span class="step__num">2</span>
                <span class="step__txt">点常跟球队里的任意一支，落到它的赛程，再挑一场进指标页。</span>
              </li>
              <li class="step">
                <span class="step__num">3</span>
                <span class="step__txt">进战报专栏核对排名变化，回到首页接着等下一轮。</span>
              </li>
            </ol>
            <p class="mobile__tip">长时间夜读的话，可以在设置里切到高对比模式，或者把正文字号调大一档。</p>
            <a class="u-link" href="/questions/">更多使用问题</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="home-sec" data-reveal>
    <div class="shell">
      <div class="closing-grid">
        <div class="panel panel--lift">
          <span class="panel__label">05 / 回访</span>
          <h2 class="h3">回访不用重新找路</h2>
          <p class="prose">关注过的球队、看过的轮次和赛季专题都会摆在原来的位置。打开 B体育移动站的主页，顺序就是按你自己的习惯排好的，接着上一轮往下看就行。</p>
          <p class="prose">站内已经归档 1200 余场赛事的数据页面，最早的记录可以回溯到 2022 赛季，想翻哪一轮的细节都还在。</p>
          <a class="u-link" href="/who-we-are/">了解我们的数据怎么来</a>
        </div>

        <div class="panel panel--lift">
          <span class="panel__label">06 / 联系</span>
          <h2 class="h3">有疑问，或者想谈合作</h2>
          <p class="prose">发现数据或战报有问题，写信说明轮次和对阵就可以，内容纠错类邮件平均 4 小时内给出首次回应。投放、内容合作一类的事，也走同一个邮箱。</p>
          <p class="contact-card__mail">info@quick-b.com.cn</p>
          <p class="mono-meta contact-card__note">该邮箱为站点客服邮箱，工作日 9:00-18:00 回复。</p>
          <a class="btn btn--primary" href="/contact-us/">进入联系我们</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-pad: clamp(20px, 5vw, 40px);
  color: var(--white);
}

.page-home h2,
.page-home h3 {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  padding: clamp(38px, 8vw, 88px) 0 clamp(30px, 6vw, 54px);
  overflow: hidden;
}

.page-home .hero__grid {
  display: grid;
  gap: clamp(26px, 5vw, 56px);
  align-items: end;
}

.page-home .hero__eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}

.page-home .hero__title {
  font-family: var(--display);
  font-size: clamp(46px, 12.5vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  color: var(--white);
}

.page-home .hero__title-hi {
  color: var(--green);
}

.page-home .hero__lede {
  max-width: 52ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.75;
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(26px, 4vw, 40px);
}

.page-home .hero__aside {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  min-height: 288px;
}

.page-home .hero__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 288px;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.75) contrast(1.05);
}

.page-home .hero__rail {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(to top, rgba(5, 7, 10, 0.96) 42%, rgba(5, 7, 10, 0));
}

.page-home .hero__rail-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.page-home .hero__rail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-home .hero__rail-num {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
  min-width: 58px;
}

.page-home .hero__rail-txt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 比分带 ---------- */
.page-home .score-strip {
  margin-top: clamp(30px, 5vw, 56px);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-home .score-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px clamp(16px, 2.5vw, 24px);
  border-bottom: 1px solid var(--line);
}

.page-home .score-strip__more {
  margin-left: auto;
}

.page-home .score-strip__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.page-home .score-cell {
  flex: 0 0 236px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "lg lg lg"
    "hm sc aw";
  align-items: center;
  gap: 8px 10px;
  padding: 16px clamp(14px, 2vw, 20px);
  border-right: 1px solid var(--line);
  transition: background-color 0.2s ease;
}

.page-home .score-cell:last-child {
  border-right: 0;
}

.page-home .score-cell:hover {
  background: var(--raised);
}

.page-home .score-cell__league {
  grid-area: lg;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-home .score-cell__team {
  grid-area: hm;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.page-home .score-cell__team--away {
  grid-area: aw;
  text-align: left;
}

.page-home .score-cell__score {
  grid-area: sc;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.02em;
}

/* ---------- 斜向分割带 ---------- */
.page-home .home-slant {
  display: block;
  height: clamp(48px, 8vw, 92px);
  margin: clamp(6px, 2vw, 18px) 0;
  background:
    repeating-linear-gradient(135deg, rgba(201, 255, 61, 0.09) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, var(--ink), var(--panel));
  clip-path: polygon(0 0, 100% 34%, 100% 100%, 0 66%);
}

/* ---------- 通用区块与面板 ---------- */
.page-home .home-sec {
  padding: clamp(32px, 6vw, 62px) 0;
}

.page-home .panel {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 44px);
}

.page-home .panel__label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.page-home .panel .h2 {
  font-size: clamp(23px, 3.4vw, 32px);
  line-height: 1.2;
  margin: 0 0 14px;
}

.page-home .panel .h3 {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.25;
  margin: 0 0 12px;
}

.page-home .panel .prose {
  color: var(--muted);
  max-width: 66ch;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.75;
}

.page-home .panel .prose:last-of-type {
  margin-bottom: 0;
}

/* ---------- 常跟球队 ---------- */
.page-home .follow__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-home .team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .team-chip {
  display: grid;
  gap: 4px;
  min-width: 122px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--raised);
  transition: border-color 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

.page-home .team-chip:hover,
.page-home .team-chip:focus-within {
  border-color: var(--green);
  background: var(--panel);
  transform: translateY(-2px);
}

.page-home .team-chip__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.page-home .team-chip__last {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  transition: color 0.22s ease;
}

.page-home .team-chip:hover .team-chip__last,
.page-home .team-chip:focus-within .team-chip__last {
  color: var(--green);
}

.page-home .follow__cta {
  margin-top: 24px;
}

.page-home .follow__figure {
  margin: 0;
}

.page-home .follow__figure .figure__media {
  border: 1px solid var(--line);
}

/* ---------- 赛后数据 ---------- */
.page-home .data-grid {
  display: grid;
  gap: 18px;
  margin: 26px 0 0;
}

.page-home .metric-card {
  border: 1px solid var(--line);
  background: var(--raised);
  padding: clamp(16px, 2.4vw, 22px);
}

.page-home .metric-card .h3 {
  font-size: 17px;
  margin: 0;
}

.page-home .metric-card__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 6px 0 18px;
}

.page-home .bar-list,
.page-home .shot-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.page-home .bar-row {
  display: grid;
  grid-template-columns: 4.4em 1fr 3.6em;
  align-items: center;
  gap: 10px;
}

.page-home .bar-row__name {
  font-size: 13px;
  color: var(--white);
}

.page-home .bar-row__track {
  display: block;
  height: 6px;
  background: rgba(38, 49, 61, 0.85);
  overflow: hidden;
}

.page-home .bar-row__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.page-home .bar-row__val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.page-home .shot-row {
  display: grid;
  grid-template-columns: 4.4em 3.4em 1fr;
  align-items: center;
  gap: 10px;
}

.page-home .shot-row__name {
  font-size: 13px;
  color: var(--white);
}

.page-home .shot-row__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orange);
}

.page-home .shot-row__bar {
  display: block;
  height: 6px;
  background: rgba(38, 49, 61, 0.85);
  overflow: hidden;
}

.page-home .shot-row__bar i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.page-home .data-panel__figure {
  margin: 26px 0 0;
}

.page-home .data-panel__figure .figure__media {
  border: 1px solid var(--line);
  background: var(--raised);
}

.page-home .data-panel__figure + .btn {
  margin-top: 24px;
}

/* ---------- 战报 ---------- */
.page-home .report-grid {
  display: grid;
  gap: 22px;
  align-items: start;
}

.page-home .report-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-home .report {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 14px;
  align-items: start;
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: border-color 0.22s ease, background-color 0.22s ease;
}

.page-home .report:hover {
  border-left-color: var(--green);
  background: rgba(21, 28, 37, 0.6);
}

.page-home .report__rank {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  padding-top: 3px;
}

.page-home .report__body {
  min-width: 0;
}

.page-home .report__title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
  color: var(--white);
}

.page-home .report__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 6px 0 0;
}

.page-home .trend-arrow {
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
  padding-top: 3px;
}

.page-home .trend-arrow--up {
  color: var(--orange);
}

.page-home .trend-arrow--down {
  color: var(--red);
}

.page-home .report-cta {
  margin-top: 24px;
}

.page-home .side-note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  background: var(--panel);
  padding: clamp(18px, 2.6vw, 24px);
}

.page-home .side-note__title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
}

.page-home .side-note p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 12px;
}

/* ---------- 移动端体验 ---------- */
.page-home .mobile-grid {
  display: grid;
  gap: clamp(22px, 4vw, 42px);
  align-items: start;
}

.page-home .mobile__figure {
  margin: 0;
}

.page-home .mobile__figure .figure__media {
  border: 1px solid var(--line);
}

.page-home .steps {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-home .step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}

.page-home .step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .step__num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green);
  border: 1px solid var(--line);
  text-align: center;
  padding: 4px 0;
}

.page-home .step__txt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .mobile__tip {
  margin: 22px 0 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--blue);
  background: var(--raised);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 收尾 ---------- */
.page-home .closing-grid {
  display: grid;
  gap: 22px;
}

.page-home .contact-card__mail {
  font-family: var(--mono);
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--green);
  margin: 18px 0 6px;
  word-break: break-all;
}

.page-home .contact-card__note {
  margin: 0 0 20px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-home .data-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
    gap: clamp(32px, 4vw, 64px);
  }

  .page-home .follow__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  }

  .page-home .report-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }

  .page-home .mobile-grid {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  }

  .page-home .closing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .page-home .home-sec--offset .panel {
    margin-left: clamp(0px, 6vw, 84px);
  }

  .page-home .home-sec--offset .panel--accent {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .score-cell,
  .page-home .team-chip,
  .page-home .report,
  .page-home .team-chip__last {
    transition: none;
  }

  .page-home .team-chip:hover,
  .page-home .team-chip:focus-within {
    transform: none;
  }
}