/* ===== 首页 page-home ===== */

.page-home {
  --home-grid-line: 120px;
  --home-unit: 14px;
  display: block;
}

/* --- 首屏 --- */
.page-home .hero {
  position: relative;
  padding: 1.25rem 0 0;
  overflow: hidden;
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-300) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-300) 1px, transparent 1px);
  background-size: var(--home-grid-line) var(--home-grid-line);
  opacity: 0.28;
  pointer-events: none;
}

.page-home .hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-home .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 1.25rem;
}

.page-home .hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.page-home .hero__kicker-num {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--sprint-orange);
  color: var(--ink-900);
  font-weight: 700;
  font-size: 0.8125rem;
}

.page-home .hero__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 6.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--ink-900);
}

.page-home .hero__intro {
  margin: 0 0 1.5rem;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.page-home .hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--line-ink);
  border-left: var(--line-ink);
}

.page-home .hero__stats .fact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border-right: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-50);
}

.page-home .hero__stats .fact__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
}

.page-home .hero__stats .fact__txt {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-700);
}

.page-home .hero__aside {
  display: grid;
  gap: 1.25rem;
}

/* 图片容器 */
.page-home .shot {
  margin: 0;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-200);
  overflow: hidden;
}

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

.page-home .shot--hero {
  aspect-ratio: 3 / 2;
}

.page-home .shot--hero img {
  height: 100%;
}

/* 比赛日速览面板 */
.page-home .live-panel {
  padding: 1rem 1.15rem 1.15rem;
}

.page-home .live-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--line-grid);
}

.page-home .live-panel__tick {
  font-size: 0.75rem;
  color: var(--field-green);
  font-weight: 700;
}

.page-home .live-panel__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .live-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: var(--line-grid);
}

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

.page-home .live-row__name {
  font-size: 0.875rem;
  color: var(--ink-700);
}

.page-home .live-row__val {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.page-home .live-panel__note {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: var(--line-grid);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* --- 章节索引 --- */
.page-home .chapter-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
  border-top: var(--line-ink);
  border-left: var(--line-ink);
}

.page-home .chapter-index__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem 1rem;
  border-right: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-50);
  color: var(--ink-900);
  text-decoration: none;
  transition: background 0.12s var(--ease), transform 0.12s var(--ease);
}

.page-home .chapter-index__item:hover,
.page-home .chapter-index__item:focus-visible {
  background: var(--green-tint);
}

.page-home .chapter-index__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sprint-orange);
  font-variant-numeric: tabular-nums;
}

.page-home .chapter-index__label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

/* --- 半场比分速查带 --- */
.page-home .band {
  position: relative;
  margin-top: 3rem;
  padding: 2.25rem 0 2.75rem;
  border-top: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-200);
  overflow: hidden;
}

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

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

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

.page-home .sec-head {
  margin-bottom: 1.5rem;
}

.page-home .band .sec-head__num,
.page-home .lineup .sec-head__num,
.page-home .goaldiff .sec-head__num,
.page-home .archive .sec-head__num,
.page-home .android .sec-head__num,
.page-home .strip-contact .sec-head__num {
  color: var(--sprint-orange);
}

.page-home .score-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.85rem;
  -webkit-overflow-scrolling: touch;
}

.page-home .score-strip > * {
  scroll-snap-align: start;
}

.page-home .score-card {
  display: flex;
  flex-direction: column;
  padding: 0.95rem 1rem 1.05rem;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-50);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.page-home .score-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}

.page-home .score-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: var(--line-grid);
}

.page-home .score-card__league {
  font-size: 0.75rem;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

.page-home .score-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.85rem 0 0.75rem;
  border-left: var(--line-grid);
}

.page-home .score-card__cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-right: var(--line-grid);
}

.page-home .score-card__k {
  font-size: 0.75rem;
  color: var(--ink-700);
}

.page-home .score-card__v {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.page-home .score-card__v.is-up {
  color: var(--field-green);
}

.page-home .score-card__v.is-down {
  color: var(--alert-red);
}

.page-home .score-card__v.is-flat {
  color: var(--ice-deep);
}

.page-home .score-card__turn {
  margin: 0;
  padding-top: 0.7rem;
  border-top: var(--line-grid);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* --- 阵容变动 --- */
.page-home .lineup {
  padding: 3rem 0 0;
}

.page-home .lineup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.page-home .shot--square {
  aspect-ratio: 1 / 1;
}

.page-home .shot--square img {
  height: 100%;
}

.page-home .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--line-ink);
}

.page-home .step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-bottom: var(--line-grid);
}

.page-home .step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--line-ink);
  background: var(--green-tint);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 0.9375rem;
}

.page-home .step__txt {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .lineup__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* --- 净胜球战报 --- */
.page-home .goaldiff {
  margin-top: 3rem;
  padding: 2.25rem 0 3rem;
  border-top: var(--line-ink);
  background: var(--paper-50);
}

.page-home .goaldiff__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.page-home .goal-chart {
  margin: 0;
  padding: 1.1rem 1rem 0.9rem;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-200);
}

.page-home .goal-chart__cap {
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}

.page-home .goal-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.page-home .goal-chart__tick {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-700);
}

.page-home .goal-chart__note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-700);
}

.page-home .goaldiff__side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.page-home .goaldiff .panel__title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink-900);
}

.page-home .goaldiff .panel__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: var(--line-ink);
  border-top: var(--line-ink);
}

.page-home .member-list__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-right: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-50);
}

.page-home .member-list__k {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ice-deep);
  font-variant-numeric: tabular-nums;
}

.page-home .member-list__v {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-900);
}

.page-home .goaldiff__btn {
  justify-self: start;
}

/* --- 历史回查 --- */
.page-home .archive {
  padding: 2.75rem 0 0;
}

.page-home .archive__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-home .archive-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-50);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.page-home .archive-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}

.page-home .archive-card__num {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--field-green);
  font-variant-numeric: tabular-nums;
}

.page-home .archive-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-900);
}

.page-home .archive-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .archive__foot {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--field-green);
  background: var(--green-tint);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-900);
}

/* --- Android 访问 --- */
.page-home .android {
  margin-top: 3rem;
  padding: 2.25rem 0 3rem;
  border-top: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--ink-900);
  color: var(--paper-50);
}

.page-home .android .sec-head__title {
  color: var(--paper-50);
}

.page-home .android .sec-head__meta {
  color: rgba(247, 243, 234, 0.72);
}

.page-home .android__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}

.page-home .android__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.page-home .android__item {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.18);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(247, 243, 234, 0.88);
}

.page-home .android__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--sprint-orange);
}

.page-home .android .shot {
  border-color: var(--paper-50);
  box-shadow: 8px 8px 0 var(--field-green);
}

.page-home .shot--device {
  aspect-ratio: 4 / 3;
}

.page-home .shot--device img {
  height: 100%;
}

/* --- 联系与备案 --- */
.page-home .strip-contact {
  padding: 2.75rem 0 3rem;
}

.page-home .strip-contact__list {
  margin: 0;
  border-top: var(--line-ink);
}

.page-home .strip-contact__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 0.95rem 0;
  border-bottom: var(--line-grid);
}

.page-home .strip-contact__k {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}

.page-home .strip-contact__v {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-900);
  word-break: break-word;
}

.page-home .strip-contact__foot {
  margin: 1.25rem 0 0;
  max-width: 68ch;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .strip-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--line-grid);
}

.page-home .strip-contact__links .op-link {
  color: var(--ice-deep);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.12s var(--ease);
}

.page-home .strip-contact__links .op-link:hover,
.page-home .strip-contact__links .op-link:focus-visible {
  border-bottom-color: var(--ice-deep);
}

/* --- 平板 --- */
@media (min-width: 720px) {
  .page-home .hero {
    padding-top: 1.75rem;
  }

  .page-home .hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .chapter-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .score-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .page-home .archive__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .strip-contact__row {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
  }
}

/* --- 桌面 --- */
@media (min-width: 960px) {
  .page-home .hero {
    padding-top: 2.25rem;
  }

  .page-home .hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.75rem;
  }

  .page-home .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .chapter-index {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .page-home .chapter-index__num {
    font-size: 2rem;
  }

  .page-home .band {
    margin-top: 4rem;
    padding: 3rem 0 3.5rem;
  }

  .page-home .score-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .lineup {
    padding-top: 4rem;
  }

  .page-home .lineup__grid {
    grid-template-columns: 5fr 7fr;
    gap: 2.75rem;
    align-items: start;
  }

  .page-home .goaldiff {
    margin-top: 4rem;
    padding: 3rem 0 3.75rem;
  }

  .page-home .goaldiff__grid {
    grid-template-columns: 7fr 5fr;
    gap: 2.25rem;
  }

  .page-home .archive {
    padding-top: 3.5rem;
  }

  .page-home .android {
    margin-top: 4rem;
    padding: 3rem 0 3.75rem;
  }

  .page-home .android__grid {
    grid-template-columns: 7fr 5fr;
    gap: 2.75rem;
  }

  .page-home .strip-contact {
    padding: 3.5rem 0 3.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .score-card,
  .page-home .archive-card,
  .page-home .chapter-index__item,
  .page-home .strip-contact__links .op-link {
    transition: none;
  }

  .page-home .score-card:hover,
  .page-home .archive-card:hover {
    transform: none;
  }
}
<<<END>>>

等等，我加了个 <<<END>>> 标记，但协议里没要求。我去掉它。

其实协议说每个标记只能出现一次，严格按给定顺序。我就以 PAGE_CSS 结尾，不加额外标记。让我重新输出。

另外再检查一下：`.page-home .sec-head__num` 这个覆盖——.sec-head__num 是共享类，在 .page-home 作用域下覆盖颜色是没问题的。

还有 `.page-home .panel__title`——panel__title 不是共享类，所以这里没问题。

还有 `.page-home .op-link`——op-link 是共享的，但只在 .strip-contact__links 下面写样式没关系。

让我再确认一下用了 .fact 但没定义…….fact、.fact__num、.fact__txt 都是共享类。我在 .page-home .hero__stats .fact 下面覆盖了样式。没问题。

嗯，但 .fact 在共享 CSS 里可能本来就有 border 之类的样式。我要不要在页面上重置一下？其实算了，就这么用吧。

其实再想想——共享的 .fact 估计本来就是个统计块，我这样覆盖可能更差。不过也还行。

那再看 .panel--paper——它是共享类，我应该不用重新定义吧？在 HTML 里用了 `<div class="panel panel--paper">`，共享样式应该能处理。

行。

好，现在输出最终版本，不要 END 标记。用户给的最后一行是 ，在“<<<END>>>”之前的部分就是结束位置。

等等，那个“<<<END>>>”是我自己加的。我把它去掉就行。

重新输出。
<main id="main-content" class="page-home">

  <section class="hero" aria-labelledby="hero-title">
    <div class="wrap">
      <nav class="crumbs" aria-label="当前页面">
        <a href="/">首页</a>
        <span class="crumbs__sep">/</span>
        <span aria-current="page">概览</span>
      </nav>

      <div class="hero__grid">
        <div class="hero__lead">
          <p class="hero__kicker"><span class="mono hero__kicker-num">2025</span> 简体中文赛事数据与战报</p>
          <h1 id="hero-title" class="hero__title">安卓体育网页版看半场比分，浏览器一开就是比赛日现场</h1>
          <p class="hero__intro">b体育网页版把半场比分、阵容变动、净胜球战报和近三个赛季的逐场记录放在同一条线上。手机浏览器直接进，不装客户端，比赛一吹停，上下半场怎么走的一目了然。</p>

          <div class="hero__actions">
            <a class="btn btn--cta" href="#matchday">打开比赛日速览</a>
            <a class="btn btn--ghost" href="/offerings/">阵容变动怎么查</a>
          </div>

          <div class="hero__stats">
            <div class="fact">
              <span class="fact__num mono">21</span>
              <span class="fact__txt">覆盖赛事（项）</span>
            </div>
            <div class="fact">
              <span class="fact__num mono">46,000</span>
              <span class="fact__txt">逐场记录（场以上）</span>
            </div>
            <div class="fact">
              <span class="fact__num mono">15</span>
              <span class="fact__txt">比分刷新（秒级）</span>
            </div>
            <div class="fact">
              <span class="fact__num mono">1.2</span>
              <span class="fact__txt">4G 首屏（秒）</span>
            </div>
          </div>
        </div>

        <div class="hero__aside">
          <figure class="shot shot--hero">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="黄昏时分的草原球场远景，跑道上的光影被拉得很长，画面中没有正面人物">
          </figure>

          <div class="panel panel--lift live-panel" id="matchday" data-reveal>
            <div class="live-panel__head">
              <span class="chip chip--dark">比赛日速览</span>
              <span class="mono live-panel__tick">15 秒级刷新</span>
            </div>
            <ul class="live-panel__rows">
              <li class="live-row">
                <span class="live-row__name">本比赛日已开赛</span>
                <span class="live-row__val mono">18</span>
              </li>
              <li class="live-row">
                <span class="live-row__name">半场结果已出</span>
                <span class="live-row__val mono">14</span>
              </li>
              <li class="live-row">
                <span class="live-row__name">阵容变动已上线</span>
                <span class="live-row__val mono">6</span>
              </li>
              <li class="live-row">
                <span class="live-row__name">阵容公布后上线耗时</span>
                <span class="live-row__val mono">3 分钟内</span>
              </li>
            </ul>
            <p class="live-panel__note">比分在比赛中持续跳动，你不用守着页面反复下拉，切出去看一眼再回来，数字已经跟上了。</p>
          </div>
        </div>
      </div>

      <nav class="chapter-index" aria-label="章节索引">
        <a class="chapter-index__item" href="#halftime">
          <span class="chapter-index__num mono">01</span>
          <span class="chapter-index__label">半场比分速查</span>
        </a>
        <a class="chapter-index__item" href="#lineup">
          <span class="chapter-index__num mono">02</span>
          <span class="chapter-index__label">阵容变动对照</span>
        </a>
        <a class="chapter-index__item" href="#goal-diff">
          <span class="chapter-index__num mono">03</span>
          <span class="chapter-index__label">净胜球战报</span>
        </a>
        <a class="chapter-index__item" href="#archive">
          <span class="chapter-index__num mono">04</span>
          <span class="chapter-index__label">历史逐场回查</span>
        </a>
        <a class="chapter-index__item" href="#android">
          <span class="chapter-index__num mono">05</span>
          <span class="chapter-index__label">安卓网页端体验</span>
        </a>
        <a class="chapter-index__item" href="/updates/">
          <span class="chapter-index__num mono">06</span>
          <span class="chapter-index__label">最新动态</span>
        </a>
        <a class="chapter-index__item" href="#contact">
          <span class="chapter-index__num mono">07</span>
          <span class="chapter-index__label">联系与备案</span>
        </a>
      </nav>
    </div>
  </section>

  <section class="band" id="halftime" aria-labelledby="halftime-title">
    <div class="band__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="运动员起跑瞬间的动态虚化剪影，画面里只保留腿部与跑鞋">
    </div>
    <div class="wrap band__inner">
      <header class="sec-head">
        <span class="sec-head__num mono">01</span>
        <h2 class="sec-head__title" id="halftime-title">半场比分先摆出来，转折点在哪一眼就看得到</h2>
        <p class="sec-head__meta">上、下半场分开记，净胜球单独标出来，赛后复盘从第一眼就有依据。</p>
      </header>

      <div class="score-strip">
        <article class="score-card" data-reveal>
          <header class="score-card__top">
            <span class="score-card__league mono">国内联赛 · 第 22 轮</span>
            <span class="chip chip--dark">已完赛</span>
          </header>
          <div class="score-card__grid">
            <div class="score-card__cell">
              <span class="score-card__k">半场</span>
              <strong class="score-card__v mono">1 : 0</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">全场</span>
              <strong class="score-card__v mono">2 : 1</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">净胜</span>
              <strong class="score-card__v mono is-up">+1</strong>
            </div>
          </div>
          <p class="score-card__turn">下半场第 71 分钟反超，半场领先一球到终场只守住一分差。</p>
        </article>

        <article class="score-card" data-reveal>
          <header class="score-card__top">
            <span class="score-card__league mono">欧洲联赛 · 第 9 轮</span>
            <span class="chip chip--dark">已完赛</span>
          </header>
          <div class="score-card__grid">
            <div class="score-card__cell">
              <span class="score-card__k">半场</span>
              <strong class="score-card__v mono">0 : 0</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">全场</span>
              <strong class="score-card__v mono">0 : 1</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">净胜</span>
              <strong class="score-card__v mono is-down">-1</strong>
            </div>
          </div>
          <p class="score-card__turn">全场唯一进球出现在第 88 分钟，上半场的零封被拖到了最后一刻。</p>
        </article>

        <article class="score-card" data-reveal>
          <header class="score-card__top">
            <span class="score-card__league mono">南美联赛 · 第 14 轮</span>
            <span class="chip chip--dark">已完赛</span>
          </header>
          <div class="score-card__grid">
            <div class="score-card__cell">
              <span class="score-card__k">半场</span>
              <strong class="score-card__v mono">2 : 0</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">全场</span>
              <strong class="score-card__v mono">3 : 0</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">净胜</span>
              <strong class="score-card__v mono is-up">+3</strong>
            </div>
          </div>
          <p class="score-card__turn">上半场两球定调，下半场第 59 分钟再补一球，净胜球一路拉开。</p>
        </article>

        <article class="score-card" data-reveal>
          <header class="score-card__top">
            <span class="score-card__league mono">亚洲杯赛 · 小组第 3 轮</span>
            <span class="chip chip--dark">已完赛</span>
          </header>
          <div class="score-card__grid">
            <div class="score-card__cell">
              <span class="score-card__k">半场</span>
              <strong class="score-card__v mono">0 : 1</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">全场</span>
              <strong class="score-card__v mono">1 : 1</strong>
            </div>
            <div class="score-card__cell">
              <span class="score-card__k">净胜</span>
              <strong class="score-card__v mono is-flat">0</strong>
            </div>
          </div>
          <p class="score-card__turn">第 63 分钟扳平，下半场的攻守节奏与上半场完全两副样子。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="lineup" id="lineup" aria-labelledby="lineup-title">
    <div class="wrap">
      <div class="lineup__grid">
        <figure class="shot shot--square">
          <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="球场边的战术板上排列着号码磁贴的特写，画面中没有可识别的人物" loading="lazy" decoding="async">
        </figure>

        <div class="lineup__body">
          <header class="sec-head">
            <span class="sec-head__num mono">02</span>
            <h2 class="sec-head__title" id="lineup-title">阵容改了谁、改在哪个位置，赛前赛后并排对</h2>
            <p class="sec-head__meta">入口固定在联赛导航第二栏，点开就是两个版本的逐位置对照。</p>
          </header>

          <ol class="steps">
            <li class="step">
              <span class="step__num mono">1</span>
              <p class="step__txt">在左栏打开联赛导航，第二栏就是「阵容变动」。21 项赛事按国内联赛、欧洲联赛、南美联赛、亚洲杯赛四个分组排好，你要找的那一项不用翻太久。</p>
            </li>
            <li class="step">
              <span class="step__num mono">2</span>
              <p class="step__txt">选定联赛和轮次，赛前公布版本与赛后实际版本同时展开。同一个位置的两个人上下对齐，谁被换下、谁顶上来，不用来回切换页面。</p>
            </li>
            <li class="step">
              <span class="step__num mono">3</span>
              <p class="step__txt">位置调整单独标色，改过的行会跳出来。做阵容研究的资深用户和体育自媒体，可以直接把这一屏当作选题素材。</p>
            </li>
          </ol>

          <div class="lineup__cta">
            <a class="btn btn--dark" href="/offerings/">看完整的阵容变动功能</a>
            <a class="btn btn--ghost" href="/faqs/">阵容提醒怎么开</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="goaldiff" id="goal-diff" aria-labelledby="goaldiff-title">
    <div class="wrap">
      <header class="sec-head">
        <span class="sec-head__num mono">03</span>
        <h2 class="sec-head__title" id="goaldiff-title">净胜球战报就在会员中心，每个比赛日的分布排得清清楚楚</h2>
        <p class="sec-head__meta">单场净胜球汇总成走势，谁在拉开差距、谁在原地踏步，一眼分明。</p>
      </header>

      <div class="goaldiff__grid">
        <figure class="goal-chart">
          <figcaption class="goal-chart__cap">近 5 轮净胜球走势</figcaption>
          <svg class="goal-chart__svg" viewBox="0 0 600 220" role="img" aria-label="近五轮净胜球走势折线图，依次为正二、负一、正三、正一、正四">
            <line x1="30" y1="40" x2="580" y2="40" stroke="var(--grid-300)" stroke-width="1"/>
            <line x1="30" y1="68" x2="580" y2="68" stroke="var(--grid-300)" stroke-width="1"/>
            <line x1="30" y1="96" x2="580" y2="96" stroke="var(--grid-300)" stroke-width="1"/>
            <line x1="30" y1="124" x2="580" y2="124" stroke="var(--grid-300)" stroke-width="1"/>
            <line x1="30" y1="152" x2="580" y2="152" stroke="var(--grid-300)" stroke-width="1"/>
            <line x1="30" y1="180" x2="580" y2="180" stroke="var(--ink-700)" stroke-width="1.5"/>
            <polyline points="40,96 170,180 300,68 430,124 560,40 560,180 40,180" fill="var(--green-tint)" stroke="none" opacity="0.6"/>
            <polyline points="40,96 170,180 300,68 430,124 560,40" fill="none" stroke="var(--field-green)" stroke-width="2" stroke-linejoin="round"/>
            <circle cx="40" cy="96" r="4.5" fill="var(--paper-50)" stroke="var(--field-green)" stroke-width="2"/>
            <circle cx="170" cy="180" r="4.5" fill="var(--alert-red)" stroke="var(--alert-red)" stroke-width="2"/>
            <circle cx="300" cy="68" r="4.5" fill="var(--paper-50)" stroke="var(--field-green)" stroke-width="2"/>
            <circle cx="430" cy="124" r="4.5" fill="var(--paper-50)" stroke="var(--field-green)" stroke-width="2"/>
            <circle cx="560" cy="40" r="4.5" fill="var(--sprint-orange)" stroke="var(--ink-900)" stroke-width="2"/>
            <text x="40" y="204" class="goal-chart__tick">R1</text>
            <text x="164" y="204" class="goal-chart__tick">R2</text>
            <text x="294" y="204" class="goal-chart__tick">R3</text>
            <text x="424" y="204" class="goal-chart__tick">R4</text>
            <text x="554" y="204" class="goal-chart__tick">R5</text>
            <text x="34" y="34" class="goal-chart__tick">+4</text>
            <text x="34" y="176" class="goal-chart__tick">-1</text>
          </svg>
          <p class="goal-chart__note">第 2 轮客场净负一球之后连追三轮，最近一轮净胜四球，把差距重新拉开。</p>
        </figure>

        <div class="goaldiff__side">
          <div class="panel panel--paper" data-reveal>
            <h3 class="panel__title">战报入口在哪</h3>
            <p class="panel__text">登录会员中心后，净胜球战报在功能列表里固定占一格。每个比赛日结束后自动汇总，按分组和轮次往下排，你不用自己一页页拼。</p>
          </div>

          <ul class="member-list">
            <li class="member-list__item">
              <span class="member-list__k mono">01</span>
              <span class="member-list__v">战报收藏</span>
            </li>
            <li class="member-list__item">
              <span class="member-list__k mono">02</span>
              <span class="member-list__v">回查记录</span>
            </li>
            <li class="member-list__item">
              <span class="member-list__k mono">03</span>
              <span class="member-list__v">关注球队</span>
            </li>
            <li class="member-list__item">
              <span class="member-list__k mono">04</span>
              <span class="member-list__v">阵容变动提醒</span>
            </li>
          </ul>

          <a class="btn btn--dark goaldiff__btn" href="/faqs/">净胜球战报入口怎么进</a>
        </div>
      </div>
    </div>
  </section>

  <section class="archive" id="archive" aria-labelledby="archive-title">
    <div class="wrap">
      <header class="sec-head">
        <span class="sec-head__num mono">04</span>
        <h2 class="sec-head__title" id="archive-title">往回翻三个赛季，46,000 场记录的纵深够你挖</h2>
        <p class="sec-head__meta">最早可以追到 2019 赛季，单场记录保留 32 项基础数据字段。</p>
      </header>

      <div class="archive__cards">
        <article class="archive-card" data-reveal>
          <span class="archive-card__num mono">46,000+</span>
          <h3 class="archive-card__title">逐场赛事记录</h3>
          <p class="archive-card__text">从 2019 赛季起累计保存，比分、阵容、关键节点都在里面。地方体育媒体和赛事运营团队做复盘时，翻到哪一场就是哪一场。</p>
        </article>

        <article class="archive-card" data-reveal>
          <span class="archive-card__num mono">32</span>
          <h3 class="archive-card__title">单场基础字段</h3>
          <p class="archive-card__text">一场比赛的记录拆成 32 项基础数据字段，分成得分、阵容、时间节点几组铺开，做深度复盘不用另外拼表格。</p>
        </article>

        <article class="archive-card" data-reveal>
          <span class="archive-card__num mono">3</span>
          <h3 class="archive-card__title">赛季逐场可回查</h3>
          <p class="archive-card__text">近三个赛季的比赛按轮次排成时间线，过去和当下对着看，球队状态的起落比只看一场清楚得多。</p>
        </article>
      </div>

      <p class="archive__foot">比分与阵容在页面里都标了更新时刻，历史页面保留当日的原始快照，对得上就是同一场。</p>
    </div>
  </section>

  <section class="android" id="android" aria-labelledby="android-title">
    <div class="wrap">
      <div class="android__grid">
        <div class="android__body">
          <header class="sec-head">
            <span class="sec-head__num mono">05</span>
            <h2 class="sec-head__title" id="android-title">Android 浏览器直接打开，4G 网络下 1.2 秒出首屏</h2>
            <p class="sec-head__meta">不用去应用商店，把地址存成书签，下次一点就进。</p>
          </header>

          <ul class="android__list">
            <li class="android__item">免安装，浏览器地址栏输进去就能用，换手机、换浏览器都不用重新折腾。</li>
            <li class="android__item">4G 网络下首屏加载控制在 1.2 秒以内，等电梯的功夫已经看完半场比分。</li>
            <li class="android__item">横屏看数据表更宽，竖屏刷战报更顺，两种握法都调过。</li>
            <li class="android__item">半场和全场之间的切换靠单指滑动，站在场边也能一只手操作。</li>
            <li class="android__item">注册用户 128 万，其中 63% 从 Android 网页端进来，这条路径是主力入口。</li>
          </ul>

          <a class="btn btn--cta" href="#matchday">回到比赛日速览</a>
        </div>

        <figure class="shot shot--device">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="夜间看台灯光下，一只手举着手机浏览比分网页的剪影" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="strip-contact" id="contact" aria-labelledby="contact-title">
    <div class="wrap">
      <header class="sec-head">
        <span class="sec-head__num mono">07</span>
        <h2 class="sec-head__title" id="contact-title">对不上、想合作、要反馈，直接找人</h2>
        <p class="sec-head__meta">工作日 9:00–18:00 之内回复邮件与来电。</p>
      </header>

      <dl class="strip-contact__list">
        <div class="strip-contact__row">
          <dt class="strip-contact__k">客服邮箱</dt>
          <dd class="strip-contact__v">
            <span class="mono">support@b-sportsweb.com.cn</span>
            <button class="btn btn--sm btn--ghost" type="button" data-copy-value="support@b-sportsweb.com.cn">复制邮箱</button>
            <span class="copy-fb" data-copy-fb role="status" aria-live="polite"></span>
          </dd>
        </div>

        <div class="strip-contact__row">
          <dt class="strip-contact__k">联系电话</dt>
          <dd class="strip-contact__v">
            <span class="mono">400-8523-5929</span>
            <button class="btn btn--sm btn--ghost" type="button" data-copy-value="400-8523-5929">复制电话</button>
            <span class="copy-fb" data-copy-fb role="status" aria-live="polite"></span>
          </dd>
        </div>

        <div class="strip-contact__row">
          <dt class="strip-contact__k">联系地址</dt>
          <dd class="strip-contact__v">
            <span>内蒙古省呼和浩特市新城区成吉思汗东街12号数字体育产业园A座5层</span>
          </dd>
        </div>

        <div class="strip-contact__row">
          <dt class="strip-contact__k">备案编号</dt>
          <dd class="strip-contact__v">
            <span class="mono">蒙ICP备60122045号</span>
            <button class="btn btn--sm btn--ghost" type="button" data-copy-value="蒙ICP备60122045号">复制备案号</button>
            <span class="copy-fb" data-copy-fb role="status" aria-live="polite"></span>
          </dd>
        </div>
      </dl>

      <p class="strip-contact__foot">商务合作、数据合作与内容纠错都走上面这两个渠道。发现比分或阵容有出入，把页面上的更新时刻一并带上，处理起来更快。</p>

      <div class="strip-contact__links">
        <a class="op-link" href="/connect/">更多联系方式</a>
        <a class="op-link" href="/mission/">平台与团队</a>
        <a class="op-link" href="/legal/">使用条款</a>
        <a class="op-link" href="/data-protection/">数据保护</a>
      </div>
    </div>
  </section>

</main>

/* ===== 首页 page-home ===== */

.page-home {
  --home-grid-line: 120px;
  display: block;
}

/* --- 首屏 --- */
.page-home .hero {
  position: relative;
  padding: 1.25rem 0 0;
  overflow: hidden;
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-300) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-300) 1px, transparent 1px);
  background-size: var(--home-grid-line) var(--home-grid-line);
  opacity: 0.28;
  pointer-events: none;
}

.page-home .hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-home .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 1.25rem;
}

.page-home .hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-700);
}

.page-home .hero__kicker-num {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--sprint-orange);
  color: var(--ink-900);
  font-weight: 700;
  font-size: 0.8125rem;
}

.page-home .hero__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 6.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--ink-900);
}

.page-home .hero__intro {
  margin: 0 0 1.5rem;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.page-home .hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--line-ink);
  border-left: var(--line-ink);
}

.page-home .hero__stats .fact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border-right: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-50);
}

.page-home .hero__stats .fact__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.page-home .hero__stats .fact__txt {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-700);
}

.page-home .hero__aside {
  display: grid;
  gap: 1.25rem;
}

/* 图片容器 */
.page-home .shot {
  margin: 0;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-200);
  overflow: hidden;
}

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

.page-home .shot--hero {
  aspect-ratio: 3 / 2;
}

.page-home .shot--hero img {
  height: 100%;
}

/* 比赛日速览面板 */
.page-home .live-panel {
  padding: 1rem 1.15rem 1.15rem;
}

.page-home .live-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: var(--line-grid);
}

.page-home .live-panel__tick {
  font-size: 0.75rem;
  color: var(--field-green);
  font-weight: 700;
}

.page-home .live-panel__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .live-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: var(--line-grid);
}

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

.page-home .live-row__name {
  font-size: 0.875rem;
  color: var(--ink-700);
}

.page-home .live-row__val {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-home .live-panel__note {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: var(--line-grid);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* --- 章节索引 --- */
.page-home .chapter-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
  border-top: var(--line-ink);
  border-left: var(--line-ink);
}

.page-home .chapter-index__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem 1rem;
  border-right: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-50);
  color: var(--ink-900);
  text-decoration: none;
  transition: background 0.12s var(--ease), transform 0.12s var(--ease);
}

.page-home .chapter-index__item:hover,
.page-home .chapter-index__item:focus-visible {
  background: var(--green-tint);
}

.page-home .chapter-index__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sprint-orange);
  font-variant-numeric: tabular-nums;
}

.page-home .chapter-index__label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

/* --- 章节头统一色 --- */
.page-home .band .sec-head__num,
.page-home .lineup .sec-head__num,
.page-home .goaldiff .sec-head__num,
.page-home .archive .sec-head__num,
.page-home .android .sec-head__num,
.page-home .strip-contact .sec-head__num {
  color: var(--sprint-orange);
}

/* --- 半场比分速查带 --- */
.page-home .band {
  position: relative;
  margin-top: 3rem;
  padding: 2.25rem 0 2.75rem;
  border-top: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-200);
  overflow: hidden;
}

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

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

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

.page-home .score-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.85rem;
  -webkit-overflow-scrolling: touch;
}

.page-home .score-strip > * {
  scroll-snap-align: start;
}

.page-home .score-card {
  display: flex;
  flex-direction: column;
  padding: 0.95rem 1rem 1.05rem;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-50);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.page-home .score-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}

.page-home .score-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: var(--line-grid);
}

.page-home .score-card__league {
  font-size: 0.75rem;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

.page-home .score-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.85rem 0 0.75rem;
  border-left: var(--line-grid);
}

.page-home .score-card__cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-right: var(--line-grid);
}

.page-home .score-card__k {
  font-size: 0.75rem;
  color: var(--ink-700);
}

.page-home .score-card__v {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-home .score-card__v.is-up {
  color: var(--field-green);
}

.page-home .score-card__v.is-down {
  color: var(--alert-red);
}

.page-home .score-card__v.is-flat {
  color: var(--ice-deep);
}

.page-home .score-card__turn {
  margin: 0;
  padding-top: 0.7rem;
  border-top: var(--line-grid);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* --- 阵容变动 --- */
.page-home .lineup {
  padding: 3rem 0 0;
}

.page-home .lineup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.page-home .shot--square {
  aspect-ratio: 1 / 1;
}

.page-home .shot--square img {
  height: 100%;
}

.page-home .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--line-ink);
}

.page-home .step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-bottom: var(--line-grid);
}

.page-home .step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--line-ink);
  background: var(--green-tint);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 0.9375rem;
}

.page-home .step__txt {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .lineup__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* --- 净胜球战报 --- */
.page-home .goaldiff {
  margin-top: 3rem;
  padding: 2.25rem 0 3rem;
  border-top: var(--line-ink);
  background: var(--paper-50);
}

.page-home .goaldiff__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.page-home .goal-chart {
  margin: 0;
  padding: 1.1rem 1rem 0.9rem;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-200);
}

.page-home .goal-chart__cap {
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}

.page-home .goal-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.page-home .goal-chart__tick {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-700);
}

.page-home .goal-chart__note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-700);
}

.page-home .goaldiff__side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.page-home .goaldiff .panel__title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink-900);
}

.page-home .goaldiff .panel__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: var(--line-ink);
  border-top: var(--line-ink);
}

.page-home .member-list__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-right: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--paper-50);
}

.page-home .member-list__k {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ice-deep);
  font-variant-numeric: tabular-nums;
}

.page-home .member-list__v {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-900);
}

.page-home .goaldiff__btn {
  justify-self: start;
}

/* --- 历史回查 --- */
.page-home .archive {
  padding: 2.75rem 0 0;
}

.page-home .archive__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-home .archive-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: var(--line-ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-50);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.page-home .archive-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}

.page-home .archive-card__num {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--field-green);
  font-variant-numeric: tabular-nums;
}

.page-home .archive-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-900);
}

.page-home .archive-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .archive__foot {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--field-green);
  background: var(--green-tint);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-900);
}

/* --- Android 访问 --- */
.page-home .android {
  margin-top: 3rem;
  padding: 2.25rem 0 3rem;
  border-top: var(--line-ink);
  border-bottom: var(--line-ink);
  background: var(--ink-900);
  color: var(--paper-50);
}

.page-home .android .sec-head__title {
  color: var(--paper-50);
}

.page-home .android .sec-head__meta {
  color: rgba(247, 243, 234, 0.72);
}

.page-home .android__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}

.page-home .android__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.page-home .android__item {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.18);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(247, 243, 234, 0.88);
}

.page-home .android__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--sprint-orange);
}

.page-home .android .shot {
  border-color: var(--paper-50);
  box-shadow: 8px 8px 0 var(--field-green);
}

.page-home .shot--device {
  aspect-ratio: 4 / 3;
}

.page-home .shot--device img {
  height: 100%;
}

/* --- 联系与备案 --- */
.page-home .strip-contact {
  padding: 2.75rem 0 3rem;
}

.page-home .strip-contact__list {
  margin: 0;
  border-top: var(--line-ink);
}

.page-home .strip-contact__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 0.95rem 0;
  border-bottom: var(--line-grid);
}

.page-home .strip-contact__k {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}

.page-home .strip-contact__v {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-900);
  word-break: break-word;
}

.page-home .strip-contact__foot {
  margin: 1.25rem 0 0;
  max-width: 68ch;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-home .strip-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--line-grid);
}

.page-home .strip-contact__links .op-link {
  color: var(--ice-deep);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.12s var(--ease);
}

.page-home .strip-contact__links .op-link:hover,
.page-home .strip-contact__links .op-link:focus-visible {
  border-bottom-color: var(--ice-deep);
}

/* --- 平板 --- */
@media (min-width: 720px) {
  .page-home .hero {
    padding-top: 1.75rem;
  }

  .page-home .hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .chapter-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .score-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .page-home .archive__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .strip-contact__row {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
  }
}

/* --- 桌面 --- */
@media (min-width: 960px) {
  .page-home .hero {
    padding-top: 2.25rem;
  }

  .page-home .hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.75rem;
  }

  .page-home .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .chapter-index {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .page-home .chapter-index__num {
    font-size: 2rem;
  }

  .page-home .band {
    margin-top: 4rem;
    padding: 3rem 0 3.5rem;
  }

  .page-home .score-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .lineup {
    padding-top: 4rem;
  }

  .page-home .lineup__grid {
    grid-template-columns: 5fr 7fr;
    gap: 2.75rem;
    align-items: start;
  }

  .page-home .goaldiff {
    margin-top: 4rem;
    padding: 3rem 0 3.75rem;
  }

  .page-home .goaldiff__grid {
    grid-template-columns: 7fr 5fr;
    gap: 2.25rem;
  }

  .page-home .archive {
    padding-top: 3.5rem;
  }

  .page-home .android {
    margin-top: 4rem;
    padding: 3rem 0 3.75rem;
  }

  .page-home .android__grid {
    grid-template-columns: 7fr 5fr;
    gap: 2.75rem;
  }

  .page-home .strip-contact {
    padding: 3.5rem 0 3.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .score-card,
  .page-home .archive-card,
  .page-home .chapter-index__item,
  .page-home .strip-contact__links .op-link {
    transition: none;
  }

  .page-home .score-card:hover,
  .page-home .archive-card:hover {
    transform: none;
  }
}