.page-home {
  --home-edge: rgba(99, 210, 214, 0.28);
  --home-warm-edge: rgba(233, 185, 73, 0.36);
}

/* ============ ① 首屏 ============ */
.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 0 0;
  background: var(--ice-deep);
  color: var(--text-on-dark);
}

.page-home .home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-home .home-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: saturate(0.85) contrast(1.05);
}

.page-home .home-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 4%, rgba(99, 210, 214, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(11, 27, 51, 0.5) 0%, rgba(11, 27, 51, 0.88) 58%, var(--ice-deep) 100%);
}

.page-home .home-hero__inner {
  padding-bottom: 28px;
}

.page-home .home-hero__crumb {
  margin-bottom: 26px;
}

.page-home .home-hero__crumb ol {
  color: var(--text-muted-dark);
}

.page-home .home-hero__crumb a {
  color: var(--text-muted-dark);
  text-decoration: none;
}

.page-home .home-hero__crumb a:hover {
  color: var(--frost);
}

.page-home .home-hero__eyebrow {
  margin-bottom: 18px;
}

.page-home .home-hero__title {
  margin: 0 0 22px;
  font-size: clamp(42px, 10vw, 118px);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-home .home-hero__title-strong {
  display: block;
  font-weight: 900;
  color: var(--ember);
  text-shadow: 4px 4px 0 rgba(11, 27, 51, 0.55);
}

.page-home .home-hero__lede {
  max-width: 34em;
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-on-dark);
}

/* 主场徽章 + 倒计时 */
.page-home .home-stand {
  position: relative;
  max-width: 560px;
  padding: 30px 24px 26px;
  border: 3px solid var(--line-dark);
  background:
    linear-gradient(160deg, rgba(19, 44, 78, 0.95), rgba(11, 27, 51, 0.95));
  box-shadow: var(--hard-shadow-ember);
}

.page-home .home-stand__crest {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 12px 18px;
  margin-bottom: 22px;
  border: 3px solid var(--gold);
  background: radial-gradient(120% 130% at 50% 0%, rgba(233, 185, 73, 0.16), transparent 68%);
}

.page-home .home-stand__crest-zh {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.24em;
  color: var(--paper);
}

.page-home .home-stand__crest-num {
  font-size: clamp(38px, 9vw, 62px);
  line-height: 1;
  color: var(--gold);
}

.page-home .home-stand__crest-cap {
  color: var(--frost);
}

.page-home .home-stand__kicker {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--ember-soft);
}

.page-home .home-countdown {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.page-home .home-countdown__unit {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.page-home .home-countdown__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 10vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
}

.page-home .home-countdown__cap {
  font-size: 14px;
  font-style: normal;
  color: var(--mist);
}

.page-home .home-stand__note {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted-dark);
}

/* 放射状赛程卡 */
.page-home .home-fixture-band {
  padding-bottom: 52px;
}

.page-home .home-fixture-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border-top: 1px solid var(--line-deep);
  padding-top: 30px;
}

.page-home .home-fixture {
  padding: 18px 16px 20px;
  border: 2px solid var(--line-dark);
  background: rgba(19, 44, 78, 0.72);
  transition: transform 220ms ease, border-color 220ms ease;
}

.page-home .home-fixture:hover {
  transform: translateY(-4px);
  border-color: var(--ember);
}

.page-home .home-fixture__league {
  margin: 0 0 12px;
  color: var(--crystal);
}

.page-home .home-fixture__pair {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
  color: var(--paper);
}

.page-home .home-fixture__time {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--gold);
}

.page-home .home-fixture__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted-dark);
}

/* ============ ② 关注球队看板 ============ */
.page-home .home-watch {
  border-top: 3px solid var(--line-deep);
}

.page-home .home-watch__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-home .home-watch__board {
  border: 2px solid var(--line-dark);
  background: rgba(11, 27, 51, 0.72);
}

.page-home .home-watch__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 18px 20px;
  border-bottom: 1px solid var(--line-deep);
}

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

.page-home .home-watch__row:hover {
  background: rgba(19, 44, 78, 0.6);
}

.page-home .home-watch__key {
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
}

.page-home .home-watch__val {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-on-dark);
}

.page-home .home-watch__media {
  margin: 0;
  border: 2px solid var(--line-dark);
}

.page-home .home-watch__footer {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-muted-dark);
}

.page-home .home-watch__footer a {
  color: var(--crystal);
  text-decoration: none;
  border-bottom: 1px solid var(--home-edge);
}

.page-home .home-watch__footer a:hover {
  color: var(--frost);
  border-color: var(--frost);
}

/* ============ ③ 赛季区间滑轨 ============ */
.page-home .home-season {
  color: var(--ink);
}

.page-home .home-season .home-season__rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-home .home-season__node {
  flex: 0 0 auto;
  min-width: 148px;
  display: grid;
  gap: 6px;
  padding: 18px 16px 16px;
  border: 2px solid var(--ink);
  background: var(--paper-old);
  scroll-snap-align: start;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.page-home .home-season__node:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 rgba(25, 20, 16, 0.18);
}

.page-home .home-season__node--now {
  background: var(--ember);
  border-color: var(--ink);
  color: var(--paper);
}

.page-home .home-season__node--now .index-label {
  color: var(--paper);
}

.page-home .home-season__node b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.page-home .home-season__cap {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: inherit;
  opacity: 0.75;
}

.page-home .home-season__hint {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: #4a4038;
}

/* ============ ④ 三处数据专区 ============ */
.page-home .home-zones {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-home .home-zones__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-home .home-zones__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

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

.page-home .home-zone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-home .home-zone {
  position: relative;
  display: block;
  padding: 26px 20px 24px;
  border: 3px solid var(--line-dark);
  background: rgba(11, 27, 51, 0.82);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.page-home .home-zone:hover,
.page-home .home-zone:focus-visible {
  transform: translateY(-6px);
  border-color: var(--ember);
  box-shadow: var(--hard-shadow-ember);
}

.page-home .home-zone--trends {
  border-top-color: var(--crystal);
}

.page-home .home-zone--answers {
  border-top-color: var(--gold);
}

.page-home .home-zone__idx {
  display: block;
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1;
  color: var(--ember);
}

.page-home .home-zone__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--paper);
}

.page-home .home-zone__desc {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-on-dark);
}

.page-home .home-zone__go {
  display: inline-block;
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--gold);
  border-bottom: 2px solid var(--home-warm-edge);
}

.page-home .home-zone:hover .home-zone__go {
  color: var(--ember-soft);
  border-color: var(--ember-soft);
}

/* ============ ⑤ 寒地主场故事带 ============ */
.page-home .home-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 74px 0 78px;
  background: var(--ice-deep);
  color: var(--text-on-dark);
}

.page-home .home-story__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-home .home-story__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
}

.page-home .home-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 27, 51, 0.94) 0%, rgba(11, 27, 51, 0.66) 62%, rgba(11, 27, 51, 0.34) 100%);
}

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

.page-home .home-story__title {
  margin: 14px 0 20px;
  font-weight: 200;
  color: var(--paper);
}

.page-home .home-story__lede {
  max-width: 46ch;
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-on-dark);
}

.page-home .home-story__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-home .home-story__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(19, 44, 78, 0.72);
}

.page-home .home-story__key {
  font-size: 15px;
  color: var(--gold);
  line-height: 1.6;
}

.page-home .home-story__list b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 900;
  color: var(--paper);
}

.page-home .home-story__list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted-dark);
}

/* ============ ⑥ 版本提示条 ============ */
.page-home .home-notice {
  background: var(--paper);
  color: var(--ink);
}

.page-home .home-notice__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  padding: 28px 22px;
  border: 3px solid var(--ink);
  background: var(--paper-old);
  box-shadow: 6px 6px 0 rgba(25, 20, 16, 0.16);
}

.page-home .home-notice__title {
  margin: 12px 0 14px;
  font-weight: 900;
  color: var(--ink);
}

.page-home .home-notice__desc {
  max-width: 54ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: #40382f;
}

.page-home .home-notice__foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #5a5045;
}

.page-home .home-notice__foot a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid rgba(225, 74, 43, 0.35);
}

.page-home .home-notice__foot a:hover {
  border-color: var(--ember);
}

/* ============ 响应式 ============ */
@media (min-width: 768px) {
  .page-home .home-hero {
    padding-top: 56px;
  }

  .page-home .home-hero__inner {
    padding-bottom: 40px;
  }

  .page-home .home-stand {
    max-width: 620px;
    padding: 34px 32px 30px;
  }

  .page-home .home-fixture-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 36px;
  }

  .page-home .home-fixture:nth-child(2) {
    transform: translateY(-22px);
  }

  .page-home .home-fixture:nth-child(2):hover {
    transform: translateY(-26px);
  }

  .page-home .home-fixture-band {
    padding-bottom: 68px;
  }

  .page-home .home-watch__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }

  .page-home .home-zone-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .page-home .home-zone--trends {
    transform: translateY(22px);
  }

  .page-home .home-zone--trends:hover,
  .page-home .home-zone--trends:focus-visible {
    transform: translateY(16px);
  }

  .page-home .home-story {
    padding: 92px 0 96px;
  }

  .page-home .home-notice__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    padding: 34px 32px;
  }
}

@media (min-width: 1024px) {
  .page-home .home-hero {
    padding-top: 68px;
  }

  .page-home .home-stand {
    max-width: 680px;
  }

  .page-home .home-watch__row {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }

  .page-home .home-season__node {
    min-width: 172px;
  }

  .page-home .home-story__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .page-home .home-story__list li {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 20px;
    border-left: 0;
    border-top: 3px solid var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-fixture,
  .page-home .home-season__node,
  .page-home .home-zone {
    transition: none;
  }

  .page-home .home-fixture:hover,
  .page-home .home-season__node:hover,
  .page-home .home-zone:hover,
  .page-home .home-zone:focus-visible,
  .page-home .home-zone--trends,
  .page-home .home-zone--trends:hover,
  .page-home .home-zone--trends:focus-visible,
  .page-home .home-fixture:nth-child(2),
  .page-home .home-fixture:nth-child(2):hover {
    transform: none;
  }
}
<<<END>>>

等等，我最后加了 `<<<END>>>` 这种标记，是不应该出现的。我应该只输出两个标记块，不能加额外的结束标记。让我把最后的 `<<<END>>>` 去掉。

实际上我看看我输出的内容——最后一行是 `<<<END>>>`，这是错的。应该直接以 CSS 内容结束。

让我更正一下，重新输出，不加末尾标记。
<main id="main-content" class="page-home">

  <!-- ① 首屏 · 走进主场看台 -->
  <section class="home-hero">
    <div class="home-hero__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:1080w:1920}" width="1920" height="1080" alt="低角度仰拍的冰面反光与看台人浪，冷蓝底色里透出橙红灯光">
    </div>
    <div class="home-hero__veil" aria-hidden="true"></div>

    <div class="wrap home-hero__inner">
      <nav class="breadcrumb home-hero__crumb" aria-label="页面位置">
        <ol>
          <li><a href="/">主场首页</a></li>
          <li aria-current="page">今晚看台</li>
        </ol>
      </nav>

      <p class="index-label index-label--gold home-hero__eyebrow">HOME STAND · 北纬 45° 冰城</p>

      <h1 class="display-xl home-hero__title">
        走进看台，
        <span class="home-hero__title-strong">每场都像回家</span>
      </h1>

      <p class="home-hero__lede">
        半岛体育把黑龙江的寒地主场放进你的手机：你关注哪支球队，赛程、首发与伤停就排在哪支球队，开球前看一眼这一屏就够了。
      </p>

      <div class="home-stand" data-reveal>
        <div class="home-stand__crest">
          <span class="home-stand__crest-zh">冰城主场</span>
          <span class="home-stand__crest-num num">45°N</span>
          <span class="index-label home-stand__crest-cap">HOME STAND</span>
        </div>

        <p class="home-stand__kicker">下一场 · 夜场开球</p>

        <div class="home-countdown" role="group" aria-label="距离下一场开球还有 1 天 8 小时 42 分">
          <span class="home-countdown__unit">
            <b class="home-countdown__num num">01</b>
            <em class="home-countdown__cap">天</em>
          </span>
          <span class="home-countdown__unit">
            <b class="home-countdown__num num">08</b>
            <em class="home-countdown__cap">时</em>
          </span>
          <span class="home-countdown__unit">
            <b class="home-countdown__num num">42</b>
            <em class="home-countdown__cap">分</em>
          </span>
        </div>

        <p class="home-stand__note">距开球不足两天，赛前首发与伤停名单会在这之前完成本轮更新。</p>
      </div>
    </div>

    <div class="wrap home-fixture-band">
      <div class="home-fixture-grid">
        <article class="home-fixture" data-reveal data-reveal-delay="0">
          <p class="index-label home-fixture__league">冰球 · 常规赛</p>
          <p class="home-fixture__pair">北纬主场</p>
          <p class="home-fixture__time num">19:30</p>
          <p class="home-fixture__note">夜场批次更新首发与伤停</p>
        </article>

        <article class="home-fixture" data-reveal data-reveal-delay="80">
          <p class="index-label home-fixture__league">篮球 · 杯赛</p>
          <p class="home-fixture__pair">冰城主场</p>
          <p class="home-fixture__time num">20:00</p>
          <p class="home-fixture__note">替补登场时段赛后即可查</p>
        </article>

        <article class="home-fixture" data-reveal data-reveal-delay="160">
          <p class="index-label home-fixture__league">足球 · 联赛</p>
          <p class="home-fixture__pair">客场作战</p>
          <p class="home-fixture__time num">次日 03:45</p>
          <p class="home-fixture__note">赛后两小时内补齐赛果</p>
        </article>
      </div>
    </div>
  </section>

  <!-- ② 关注球队看板 -->
  <section class="section section--night home-watch">
    <div class="wrap">
      <div class="section-head">
        <div class="section-head__text">
          <p class="index-label">关注球队 · FOLLOWING</p>
          <h2 class="display-m section-head__title">你关注的球队，永远停在最前面</h2>
        </div>
      </div>

      <div class="home-watch__grid">
        <div class="home-watch__board">
          <div class="home-watch__row">
            <span class="home-watch__key">赛程与比分</span>
            <span class="home-watch__val">赛后两小时内补齐比分与关键节点，第二天早上再翻也能一眼找到</span>
          </div>
          <div class="home-watch__row">
            <span class="home-watch__key">下一场时间</span>
            <span class="home-watch__val">固定在首屏顶部，通勤路上不用一层层点进去找</span>
          </div>
          <div class="home-watch__row">
            <span class="home-watch__key">首发与伤停</span>
            <span class="home-watch__val">开球前一小时给出最终名单，谁轮休、谁带伤，先看一眼再决定要不要熬夜</span>
          </div>
          <div class="home-watch__row">
            <span class="home-watch__key">换设备之后</span>
            <span class="home-watch__val">在新手机重新登录，同一组球队照样回到首屏，不用重新添加</span>
          </div>
        </div>

        <figure class="home-watch__media media-frame media-frame--1x1">
          <img src="{zhanqunpic:h:800w:800}" width="800" height="800" loading="lazy" decoding="async" alt="球员热身特写剪影，冰晶颗粒与寒雾质感">
        </figure>
      </div>

      <p class="home-watch__footer">
        想把这些内容长期留存下来，可以到<a href="/team/">品牌与团队</a>看看这套数据是怎么被日复一日整理出来的。
      </p>
    </div>
  </section>

  <!-- ③ 赛季区间滑轨 -->
  <section class="section section--paper home-season">
    <div class="wrap">
      <div class="section-head">
        <div class="section-head__text">
          <p class="index-label">赛季区间 · SEASON RANGE</p>
          <h2 class="display-m section-head__title">把近 5 个赛季铺成一条轨道</h2>
        </div>
        <a class="btn btn--paper btn--sm" href="/tools/">切换赛季区间</a>
      </div>

      <div class="home-season__rail" role="list">
        <div class="home-season__node home-season__node--now" role="listitem">
          <span class="index-label index-label--gold">进行中</span>
          <b class="num">2026</b>
          <span class="home-season__cap">当前赛季</span>
        </div>
        <div class="home-season__node" role="listitem">
          <span class="index-label">已收官</span>
          <b class="num">2025</b>
          <span class="home-season__cap">上一赛季</span>
        </div>
        <div class="home-season__node" role="listitem">
          <span class="index-label">已收官</span>
          <b class="num">2024</b>
          <span class="home-season__cap">往前两季</span>
        </div>
        <div class="home-season__node" role="listitem">
          <span class="index-label">已收官</span>
          <b class="num">2023</b>
          <span class="home-season__cap">往前三季</span>
        </div>
        <div class="home-season__node" role="listitem">
          <span class="index-label">已收官</span>
          <b class="num">2022</b>
          <span class="home-season__cap">往前四季</span>
        </div>
      </div>

      <p class="home-season__hint">
        轨道横向滑动即可回看更早的赛季，同一项赛事的积分走势、阵容轮换与阵容深度变化都能并排放在一起看。
      </p>
    </div>
  </section>

  <!-- ④ 三处数据专区入口 -->
  <section class="section section--night home-zones">
    <div class="home-zones__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" loading="lazy" decoding="async" alt="抽象数据热力图叠加冰面纹理，橙红与冰青形成对比">
    </div>

    <div class="wrap home-zones__inner">
      <div class="section-head">
        <div class="section-head__text">
          <p class="index-label index-label--gold">数据专区 · THREE DOORS</p>
          <h2 class="display-m section-head__title">三处入口，各管一类问题</h2>
        </div>
      </div>

      <div class="home-zone-grid">
        <a class="home-zone home-zone--tools" href="/tools/">
          <span class="home-zone__idx num">01</span>
          <h3 class="home-zone__title">想按联赛和赛季挑着看</h3>
          <p class="home-zone__desc">
            用联赛筛选把 42 项赛事的赛程、积分榜与阵容分开摆好，再沿赛季区间往前回看。冬天在被窝里换成手机，苹果端一样能筛、能切，关注的球队还是排在前面。
          </p>
          <span class="home-zone__go">打开数据工具台</span>
        </a>

        <a class="home-zone home-zone--trends" href="/trends/">
          <span class="home-zone__idx num">02</span>
          <h3 class="home-zone__title">想知道替补席到底发挥了什么作用</h3>
          <p class="home-zone__desc">
            替补贡献专区收录 1800 余名球员的替补出场次数、上场时段与关键贡献记录。主力轮休的那几场谁顶了上来，翻一页就有答案。
          </p>
          <span class="home-zone__go">进入赛况观察</span>
        </a>

        <a class="home-zone home-zone--answers" href="/answers/">
          <span class="home-zone__idx num">03</span>
          <h3 class="home-zone__title">想弄清一名球员伤了多久、什么时候回来</h3>
          <p class="home-zone__desc">
            6200 余条伤停记录按受伤部位、预计恢复周期与复出节点排成时间轴。冰雪赛季赛程密集，谁在养伤、谁已归队，一条竖线读到底。
          </p>
          <span class="home-zone__go">打开档案与答疑</span>
        </a>
      </div>
    </div>
  </section>

  <!-- ⑤ 寒地主场故事带 -->
  <section class="home-story">
    <div class="home-story__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" loading="lazy" decoding="async" alt="松花江畔夜色与远处场馆灯光的城市景观">
    </div>

    <div class="wrap home-story__inner">
      <p class="index-label index-label--gold">寒地主场 · HOME ICE</p>
      <h2 class="display-l home-story__title">冰城入夜，看台的灯先亮</h2>
      <p class="home-story__lede">
        松花江封冻的月份一到，夜里的比赛就密了起来。场地外的风刮得人脸生疼，看台里却是另一种温度——哨声、人浪、比分牌翻动的声音，隔着屏幕也能听见。我们从哈尔滨出发做这份内容，就是想让你无论在哪座城市，打开页面时都坐回同一片看台。
      </p>

      <ul class="home-story__list">
        <li>
          <span class="home-story__key num">01</span>
          <div>
            <b>冰雪赛季的夜场节奏</b>
            <p>冰雪赛季期间增加夜场更新批次，赛前与赛后两个时段各推一轮，熬夜看球的人不用等到第二天早上。</p>
          </div>
        </li>
        <li>
          <span class="home-story__key num">02</span>
          <div>
            <b>本地赛事的长期跟进</b>
            <p>与 12 家地方体育媒体、6 家青训与业余联赛机构保持内容合作，把本地赛事的赛程与档案一起维护起来。</p>
          </div>
        </li>
        <li>
          <span class="home-story__key num">03</span>
          <div>
            <b>冬天的访问高峰</b>
            <p>48 万注册用户里，黑龙江本地观众约占两成；冬季访问量约为其他季节的 1.6 倍，夜场时段最集中。</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <!-- ⑥ 设备与版本提示条 -->
  <section class="section section--tight home-notice">
    <div class="wrap">
      <div class="home-notice__inner">
        <div class="home-notice__text">
          <p class="index-label">版本提示 · 2026 版</p>
          <h2 class="display-m home-notice__title">换了手机，关注的球队还在原位</h2>
          <p class="home-notice__desc">
            2026 版本已经打开：换设备后重新登录即可进入，关注的球队自动回到首屏，联赛筛选可以按近 5 个赛季区间切换。苹果端也完成了适配，筛选与赛季切换在手机上同样顺手。
          </p>
        </div>
        <a class="btn" href="/tools/">查看 2026 版本说明</a>
      </div>

      <p class="home-notice__foot">
        版本、设备或筛选的具体问题，可以到<a href="/answers/">答疑中心</a>按步骤对照处理，也可以直接<a href="/contact-us/">联系我们</a>。
      </p>
    </div>
  </section>

</main>


.page-home {
  --home-edge: rgba(99, 210, 214, 0.28);
  --home-warm-edge: rgba(233, 185, 73, 0.36);
}

/* ============ ① 首屏 ============ */
.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 0 0;
  background: var(--ice-deep);
  color: var(--text-on-dark);
}

.page-home .home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-home .home-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: saturate(0.85) contrast(1.05);
}

.page-home .home-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 4%, rgba(99, 210, 214, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(11, 27, 51, 0.5) 0%, rgba(11, 27, 51, 0.88) 58%, var(--ice-deep) 100%);
}

.page-home .home-hero__inner {
  padding-bottom: 28px;
}

.page-home .home-hero__crumb {
  margin-bottom: 26px;
}

.page-home .home-hero__crumb ol {
  color: var(--text-muted-dark);
}

.page-home .home-hero__crumb a {
  color: var(--text-muted-dark);
  text-decoration: none;
}

.page-home .home-hero__crumb a:hover {
  color: var(--frost);
}

.page-home .home-hero__eyebrow {
  margin-bottom: 18px;
}

.page-home .home-hero__title {
  margin: 0 0 22px;
  font-size: clamp(42px, 10vw, 118px);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-home .home-hero__title-strong {
  display: block;
  font-weight: 900;
  color: var(--ember);
  text-shadow: 4px 4px 0 rgba(11, 27, 51, 0.55);
}

.page-home .home-hero__lede {
  max-width: 34em;
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-on-dark);
}

/* 主场徽章 + 倒计时 */
.page-home .home-stand {
  position: relative;
  max-width: 560px;
  padding: 30px 24px 26px;
  border: 3px solid var(--line-dark);
  background: linear-gradient(160deg, rgba(19, 44, 78, 0.95), rgba(11, 27, 51, 0.95));
  box-shadow: var(--hard-shadow-ember);
}

.page-home .home-stand__crest {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 12px 18px;
  margin-bottom: 22px;
  border: 3px solid var(--gold);
  background: radial-gradient(120% 130% at 50% 0%, rgba(233, 185, 73, 0.16), transparent 68%);
}

.page-home .home-stand__crest-zh {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.24em;
  color: var(--paper);
}

.page-home .home-stand__crest-num {
  font-size: clamp(38px, 9vw, 62px);
  line-height: 1;
  color: var(--gold);
}

.page-home .home-stand__crest-cap {
  color: var(--frost);
}

.page-home .home-stand__kicker {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--ember-soft);
}

.page-home .home-countdown {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.page-home .home-countdown__unit {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.page-home .home-countdown__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 10vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
}

.page-home .home-countdown__cap {
  font-size: 14px;
  font-style: normal;
  color: var(--mist);
}

.page-home .home-stand__note {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted-dark);
}

/* 放射状赛程卡 */
.page-home .home-fixture-band {
  padding-bottom: 52px;
}

.page-home .home-fixture-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border-top: 1px solid var(--line-deep);
  padding-top: 30px;
}

.page-home .home-fixture {
  padding: 18px 16px 20px;
  border: 2px solid var(--line-dark);
  background: rgba(19, 44, 78, 0.72);
  transition: transform 220ms ease, border-color 220ms ease;
}

.page-home .home-fixture:hover {
  transform: translateY(-4px);
  border-color: var(--ember);
}

.page-home .home-fixture__league {
  margin: 0 0 12px;
  color: var(--crystal);
}

.page-home .home-fixture__pair {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
  color: var(--paper);
}

.page-home .home-fixture__time {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--gold);
}

.page-home .home-fixture__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted-dark);
}

/* ============ ② 关注球队看板 ============ */
.page-home .home-watch {
  border-top: 3px solid var(--line-deep);
}

.page-home .home-watch__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-home .home-watch__board {
  border: 2px solid var(--line-dark);
  background: rgba(11, 27, 51, 0.72);
}

.page-home .home-watch__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 18px 20px;
  border-bottom: 1px solid var(--line-deep);
}

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

.page-home .home-watch__row:hover {
  background: rgba(19, 44, 78, 0.6);
}

.page-home .home-watch__key {
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
}

.page-home .home-watch__val {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-on-dark);
}

.page-home .home-watch__media {
  margin: 0;
  border: 2px solid var(--line-dark);
}

.page-home .home-watch__footer {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-muted-dark);
}

.page-home .home-watch__footer a {
  color: var(--crystal);
  text-decoration: none;
  border-bottom: 1px solid var(--home-edge);
}

.page-home .home-watch__footer a:hover {
  color: var(--frost);
  border-color: var(--frost);
}

/* ============ ③ 赛季区间滑轨 ============ */
.page-home .home-season {
  color: var(--ink);
}

.page-home .home-season__rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-home .home-season__node {
  flex: 0 0 auto;
  min-width: 148px;
  display: grid;
  gap: 6px;
  padding: 18px 16px 16px;
  border: 2px solid var(--ink);
  background: var(--paper-old);
  scroll-snap-align: start;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.page-home .home-season__node:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 rgba(25, 20, 16, 0.18);
}

.page-home .home-season__node--now {
  background: var(--ember);
  border-color: var(--ink);
  color: var(--paper);
}

.page-home .home-season__node--now .index-label {
  color: var(--paper);
}

.page-home .home-season__node b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.page-home .home-season__cap {
  font-size: 12px;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.page-home .home-season__hint {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: #4a4038;
}

/* ============ ④ 三处数据专区 ============ */
.page-home .home-zones {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-home .home-zones__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-home .home-zones__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

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

.page-home .home-zone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-home .home-zone {
  position: relative;
  display: block;
  padding: 26px 20px 24px;
  border: 3px solid var(--line-dark);
  background: rgba(11, 27, 51, 0.82);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.page-home .home-zone:hover,
.page-home .home-zone:focus-visible {
  transform: translateY(-6px);
  border-color: var(--ember);
  box-shadow: var(--hard-shadow-ember);
}

.page-home .home-zone--trends {
  border-top-color: var(--crystal);
}

.page-home .home-zone--answers {
  border-top-color: var(--gold);
}

.page-home .home-zone__idx {
  display: block;
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1;
  color: var(--ember);
}

.page-home .home-zone__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--paper);
}

.page-home .home-zone__desc {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-on-dark);
}

.page-home .home-zone__go {
  display: inline-block;
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--gold);
  border-bottom: 2px solid var(--home-warm-edge);
}

.page-home .home-zone:hover .home-zone__go {
  color: var(--ember-soft);
  border-color: var(--ember-soft);
}

/* ============ ⑤ 寒地主场故事带 ============ */
.page-home .home-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 74px 0 78px;
  background: var(--ice-deep);
  color: var(--text-on-dark);
}

.page-home .home-story__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-home .home-story__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
}

.page-home .home-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 27, 51, 0.94) 0%, rgba(11, 27, 51, 0.66) 62%, rgba(11, 27, 51, 0.34) 100%);
}

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

.page-home .home-story__title {
  margin: 14px 0 20px;
  font-weight: 200;
  color: var(--paper);
}

.page-home .home-story__lede {
  max-width: 46ch;
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-on-dark);
}

.page-home .home-story__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-home .home-story__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(19, 44, 78, 0.72);
}

.page-home .home-story__key {
  font-size: 15px;
  color: var(--gold);
  line-height: 1.6;
}

.page-home .home-story__list b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 900;
  color: var(--paper);
}

.page-home .home-story__list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted-dark);
}

/* ============ ⑥ 版本提示条 ============ */
.page-home .home-notice {
  background: var(--paper);
  color: var(--ink);
}

.page-home .home-notice__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  padding: 28px 22px;
  border: 3px solid var(--ink);
  background: var(--paper-old);
  box-shadow: 6px 6px 0 rgba(25, 20, 16, 0.16);
}

.page-home .home-notice__title {
  margin: 12px 0 14px;
  font-weight: 900;
  color: var(--ink);
}

.page-home .home-notice__desc {
  max-width: 54ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: #40382f;
}

.page-home .home-notice__foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #5a5045;
}

.page-home .home-notice__foot a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid rgba(225, 74, 43, 0.35);
}

.page-home .home-notice__foot a:hover {
  border-color: var(--ember);
}

/* ============ 响应式 ============ */
@media (min-width: 768px) {
  .page-home .home-hero {
    padding-top: 56px;
  }

  .page-home .home-hero__inner {
    padding-bottom: 40px;
  }

  .page-home .home-stand {
    max-width: 620px;
    padding: 34px 32px 30px;
  }

  .page-home .home-fixture-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 36px;
  }

  .page-home .home-fixture:nth-child(2) {
    transform: translateY(-22px);
  }

  .page-home .home-fixture:nth-child(2):hover {
    transform: translateY(-26px);
  }

  .page-home .home-fixture-band {
    padding-bottom: 68px;
  }

  .page-home .home-watch__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }

  .page-home .home-zone-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .page-home .home-zone--trends {
    transform: translateY(22px);
  }

  .page-home .home-zone--trends:hover,
  .page-home .home-zone--trends:focus-visible {
    transform: translateY(16px);
  }

  .page-home .home-story {
    padding: 92px 0 96px;
  }

  .page-home .home-notice__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    padding: 34px 32px;
  }
}

@media (min-width: 1024px) {
  .page-home .home-hero {
    padding-top: 68px;
  }

  .page-home .home-stand {
    max-width: 680px;
  }

  .page-home .home-watch__row {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }

  .page-home .home-season__node {
    min-width: 172px;
  }

  .page-home .home-story__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .page-home .home-story__list li {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 20px;
    border-left: 0;
    border-top: 3px solid var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-fixture,
  .page-home .home-season__node,
  .page-home .home-zone {
    transition: none;
  }

  .page-home .home-fixture:hover,
  .page-home .home-season__node:hover,
  .page-home .home-zone:hover,
  .page-home .home-zone:focus-visible,
  .page-home .home-zone--trends,
  .page-home .home-zone--trends:hover,
  .page-home .home-zone--trends:focus-visible,
  .page-home .home-fixture:nth-child(2),
  .page-home .home-fixture:nth-child(2):hover {
    transform: none;
  }
}