.page-home {
  --home-cell: #131A1C;
  --home-cell-deep: #0E1517;
  --home-edge: rgba(174, 184, 182, 0.16);
  --home-edge-strong: rgba(174, 184, 182, 0.32);
  --home-gap: clamp(14px, 1.8vw, 22px);
  background: var(--ink);
  color: var(--mist);
  overflow-x: clip;
}

.page-home p { margin: 0; }

.page-home h1,
.page-home h2,
.page-home h3 {
  font-family: var(--font-display);
  line-height: 1.18;
}

.page-home h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.035em;
  color: var(--mist);
  margin: 0;
}

.page-home h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--mist);
}

.page-home img { max-width: 100%; }

/* ---------- 上下文条 ---------- */
.page-home .home-trail {
  border-bottom: 1px solid var(--home-edge);
  padding-block: 14px;
}

.page-home .trail-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--steel);
}

.page-home .trail-line .mono {
  color: var(--mint);
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* ---------- 首屏拼贴 ---------- */
.page-home .home-hero {
  padding-block: clamp(28px, 4vw, 52px) clamp(36px, 5vw, 68px);
}

.page-home .hero-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}

.page-home .hero-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 22px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
  overflow: hidden;
}

.page-home .hero-cell--lead {
  background: linear-gradient(155deg, #10463B 0%, #0B1B18 52%, #0B0F10 100%);
  border-color: rgba(40, 240, 184, 0.24);
  padding: clamp(24px, 3vw, 44px);
  gap: 18px;
}

.page-home .hero-cell--lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 246, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 246, 244, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.page-home .hero-cell--lead > * {
  position: relative;
  z-index: 1;
}

.page-home .hero-cell--lead h1 {
  font-size: clamp(27px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.12;
  margin: 0;
  color: var(--mist);
}

.page-home .hero-lead {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.8;
  color: var(--chalk);
  max-width: 46ch;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.page-home .hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--mint);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 240, 184, 0.45);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .hero-link:hover,
.page-home .hero-link:focus-visible {
  color: var(--mist);
  border-color: var(--mist);
}

/* 首屏：看台主图 */
.page-home .hero-cell--media {
  padding: 0;
  min-height: 280px;
  border-color: var(--home-edge-strong);
}

.page-home .hero-cell--media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.page-home .hero-cell--media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 20px 16px;
  background: linear-gradient(to top, rgba(11, 15, 16, 0.94), rgba(11, 15, 16, 0));
  color: var(--mist);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 首屏：比分入口 */
.page-home .hero-cell--score {
  padding: 0;
  justify-content: flex-end;
  min-height: 280px;
  background: var(--home-cell-deep);
}

.page-home .score-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0.5;
}

.page-home .hero-cell--score::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 16, 0.12) 0%, rgba(11, 15, 16, 0.82) 62%, rgba(11, 15, 16, 0.97) 100%);
  pointer-events: none;
}

.page-home .score-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}

.page-home .score-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--signal);
}

.page-home .score-body h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.03em;
}

.page-home .score-body p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

/* 首屏：联赛数量 */
.page-home .hero-cell--leagues {
  background: var(--deep);
  border-color: rgba(40, 240, 184, 0.28);
}

.page-home .hero-figure {
  font-size: clamp(54px, 7vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--mint);
}

.page-home .hero-cell--leagues h2 {
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: 0.03em;
}

.page-home .hero-cell--leagues p {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(243, 246, 244, 0.72);
}

/* 首屏：设备指引 */
.page-home .hero-cell--device {
  background: var(--home-cell-deep);
}

.page-home .hero-cell--device h2 {
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: 0.03em;
}

.page-home .hero-cell--device p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

/* ---------- 适配速览条 ---------- */
.page-home .home-ruler {
  padding-block: clamp(40px, 5vw, 72px);
  background: var(--home-cell-deep);
  border-top: 1px solid var(--home-edge);
  border-bottom: 1px solid var(--home-edge);
}

.page-home .ruler-head {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

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

.page-home .ruler-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 18px;
  background: var(--concrete);
  border-left: 3px solid var(--mint);
}

.page-home .ruler-item:nth-child(2) { border-left-color: var(--pulse); }
.page-home .ruler-item:nth-child(3) { border-left-color: var(--signal); }

.page-home .ruler-item .figure {
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mist);
}

.page-home .ruler-item .figure-label {
  font-size: 13px;
  line-height: 1.7;
  color: var(--chalk);
}

.page-home .ruler-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 240, 184, 0.5);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .ruler-link:hover,
.page-home .ruler-link:focus-visible {
  color: var(--mist);
  border-color: var(--mist);
}

/* ---------- 联赛订阅 ---------- */
.page-home .home-leagues {
  padding-block: clamp(44px, 6vw, 84px);
}

.page-home .league-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-home .section-lead {
  font-size: 14px;
  line-height: 1.85;
  color: var(--chalk);
  max-width: 62ch;
  margin-top: 12px;
}

.page-home .inline-link {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 240, 184, 0.45);
}

.page-home .inline-link:hover,
.page-home .inline-link:focus-visible {
  color: var(--mist);
  border-color: var(--mist);
}

.page-home .league-modes {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .league-modes li {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
}

.page-home .league-modes .mono {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mint);
  margin-bottom: 6px;
}

.page-home .league-modes p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--chalk);
}

.page-home .league-board {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-home .league-media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--home-cell);
  border: 1px solid var(--home-edge-strong);
}

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

.page-home .league-media figcaption {
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--steel);
  background: var(--home-cell-deep);
  border-top: 1px solid var(--home-edge);
}

.page-home .league-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.page-home .league-chips li {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--chalk);
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
  border-radius: 8px;
}

.page-home .league-chips li:nth-child(4n),
.page-home .league-chips li:nth-child(7n) {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
}

/* ---------- 城市看台 ---------- */
.page-home .home-stand {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
  background: linear-gradient(180deg, var(--ink) 0%, #0D1416 100%);
}

.page-home .stand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.page-home .stand-levels {
  list-style: none;
  margin: 24px 0 26px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-home .stand-levels li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--home-edge);
}

.page-home .stand-levels li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-home .stand-levels .mono {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--mint);
  border: 1px solid rgba(40, 240, 184, 0.38);
  border-radius: 10px;
  background: rgba(40, 240, 184, 0.06);
}

.page-home .stand-levels strong {
  display: block;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--mist);
  margin-bottom: 4px;
}

.page-home .stand-levels p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-home .stand-visual {
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 5%, rgba(40, 240, 184, 0.12), transparent 58%),
    var(--home-cell);
  border: 1px solid var(--home-edge-strong);
}

.page-home .stand-visual-cap {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--steel);
  margin-bottom: 14px;
}

.page-home .stair {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.page-home .stair li {
  height: 40px;
  display: flex;
  align-items: center;
  padding-inline-start: 14px;
  border-radius: 8px;
  background: var(--concrete);
  border-left: 3px solid transparent;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--steel);
}

.page-home .stair li:nth-child(1) { width: 44%; }
.page-home .stair li:nth-child(2) { width: 52%; }
.page-home .stair li:nth-child(3) { width: 60%; }
.page-home .stair li:nth-child(4) { width: 68%; }
.page-home .stair li:nth-child(5) { width: 78%; }

.page-home .stair li:nth-child(6) {
  width: 92%;
  background: var(--deep);
  border-left-color: var(--mint);
  color: var(--mist);
}

/* ---------- 设备指引 ---------- */
.page-home .home-device {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
}

.page-home .device-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-home .device-media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--home-cell);
  border: 1px solid var(--home-edge-strong);
}

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

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

.page-home .device-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
}

.page-home .device-steps .mono {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--mint);
  padding-top: 2px;
}

.page-home .device-steps h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.page-home .device-steps p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

/* ---------- 更新脉冲与专题 ---------- */
.page-home .home-pulse {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
  background: var(--home-cell-deep);
}

.page-home .pulse-head {
  max-width: 760px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

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

.page-home .pulse-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 20px 18px;
  border-radius: 18px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-home .pulse-item:hover,
.page-home .pulse-item:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(40, 240, 184, 0.45);
  background: #162022;
}

.page-home .pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.5);
  animation: homePulse 2.6s var(--ease) infinite;
}

@keyframes homePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 90, 60, 0); }
}

.page-home .pulse-item h3 {
  margin: 14px 0 8px;
  font-size: 17px;
}

.page-home .pulse-item p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-home .pulse-go {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  color: var(--mint);
}

/* ---------- 收藏与反馈 ---------- */
.page-home .home-collect {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
}

.page-home .collect-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 0%, rgba(40, 240, 184, 0.13), transparent 55%),
    linear-gradient(140deg, #12302A 0%, #0C1416 62%, #0B0F10 100%);
  border: 1px solid rgba(40, 240, 184, 0.22);
}

.page-home .collect-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-home .collect-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--steel);
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .ruler-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-home .hero-collage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
  }

  .page-home .hero-cell--lead    { grid-column: 1 / 8; min-height: 380px; }
  .page-home .hero-cell--media   { grid-column: 8 / 13; min-height: 380px; }
  .page-home .hero-cell--score   { grid-column: 1 / 5;  min-height: 300px; }
  .page-home .hero-cell--leagues { grid-column: 5 / 9;  min-height: 300px; }
  .page-home .hero-cell--device  { grid-column: 9 / 13; min-height: 300px; margin-top: 20px; }

  .page-home .league-shell {
    grid-template-columns: 1fr 1.05fr;
  }

  .page-home .stand-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .page-home .device-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .page-home .collect-card {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
  }
}

@media (min-width: 1080px) {
  .page-home .pulse-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .pulse-dot {
    animation: none;
  }

  .page-home .pulse-item {
    transition: none;
  }
}
<<<END>>>

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

  <div class="home-trail">
    <div class="container">
      <p class="trail-line"><span class="mono">01</span><span aria-hidden="true">/</span>首页 · 适配总览与主入口</p>
    </div>
  </div>

  <section class="home-hero" aria-labelledby="hero-title">
    <div class="container">
      <div class="hero-collage">

        <article class="hero-cell hero-cell--lead" data-reveal>
          <p class="eyebrow">2026 版 · 适配总览</p>
          <h1 id="hero-title">追比分、订联赛、找看台，2026 版把入口排成一条线</h1>
          <p class="hero-lead">LEYU体育把手机端比分、赛事订阅和看台设备指引收进同一套使用节奏。不论你今天只想扫一眼比分，还是第一次来找座位编号，都能从下面某一块顺下去。</p>
          <div class="hero-actions">
            <a class="btn btn--primary" href="/product/">查看适配清单</a>
            <a class="btn btn--ghost" href="/help-center/">打开设备指引</a>
          </div>
        </article>

        <figure class="hero-cell hero-cell--media" data-reveal>
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="夜间城市看台阶梯座位整齐排列，荧光指引线沿过道一路亮到看台深处">
          <figcaption>区、排、座三级编号，把看台入口变成可以顺藤摸瓜的位置</figcaption>
        </figure>

        <article class="hero-cell hero-cell--score" data-reveal>
          <img class="score-bg" src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机比分页面特写，列表中的刷新提示和关键事件标记以暖橙红脉冲显示" loading="lazy" decoding="async">
          <div class="score-body">
            <p class="mono score-tag">比分入口</p>
            <h2>手上的比分不会慢半拍</h2>
            <p>刷新、赛程提醒和关键事件标记在一屏里排开，切到别的页面也不会中断。</p>
            <a class="hero-link" href="/product/">进入追比分<span aria-hidden="true">→</span></a>
          </div>
        </article>

        <article class="hero-cell hero-cell--leagues" data-reveal>
          <p class="mono hero-figure">12</p>
          <h2>个联赛的订阅区间并排可看</h2>
          <p>联赛切换条把不同赛程阶段放在同一行，来回跳不用重新找入口。</p>
          <a class="hero-link" href="/product/">看订阅区间<span aria-hidden="true">→</span></a>
        </article>

        <article class="hero-cell hero-cell--device" data-reveal>
          <p class="eyebrow">导航第三项直达</p>
          <h2>iPhone 与 iPad 看台指引</h2>
          <p>设备检查、页面收藏、横屏查看，三步把看台放到手边。</p>
          <a class="hero-link" href="/help-center/">看图文步骤<span aria-hidden="true">→</span></a>
        </article>

      </div>
    </div>
  </section>

  <section class="home-ruler" aria-labelledby="ruler-title">
    <div class="container">
      <div class="ruler-head">
        <p class="eyebrow">适配拆开看</p>
        <h2 id="ruler-title">每一条适配，都对应一个你能用上的入口</h2>
      </div>
      <div class="ruler-grid">
        <div class="ruler-item" data-reveal>
          <span class="figure mono">14</span>
          <p class="figure-label">项适配条目，从比分刷新一路铺到设备提示</p>
        </div>
        <div class="ruler-item" data-reveal>
          <span class="figure mono">2</span>
          <p class="figure-label">个主栏目：手机追比分与赛事订阅</p>
        </div>
        <div class="ruler-item" data-reveal>
          <span class="figure mono">3</span>
          <p class="figure-label">类归档：追比分、订阅、设备指引</p>
        </div>
      </div>
      <a class="ruler-link" href="/product/">看完整清单<span aria-hidden="true">→</span></a>
    </div>
  </section>

  <section class="home-leagues" aria-labelledby="league-title">
    <div class="container league-shell">
      <div class="league-copy" data-reveal>
        <p class="eyebrow">订阅区间索引</p>
        <h2 id="league-title">12 个联赛，按你习惯的方式组合</h2>
        <p class="section-lead">你可以只订一个联赛的完整赛程，也可以按当前赛程阶段挑几场，再把常跟的球队单独加进来。联赛切换条始终留在同一行，切换后原来的订阅不会丢。</p>
        <ul class="league-modes">
          <li>
            <span class="mono">按联赛</span>
            <p>整季跟着一个联赛走，比分与赛程一次看好。</p>
          </li>
          <li>
            <span class="mono">按阶段</span>
            <p>只在关键赛程阶段打开提醒，其余时间保持安静。</p>
          </li>
          <li>
            <span class="mono">按球队</span>
            <p>把常跟的球队加进来，相关场次优先出现。</p>
          </li>
        </ul>
        <a class="btn btn--ghost" href="/product/">查看订阅说明</a>
      </div>
      <div class="league-board" data-reveal>
        <figure class="league-media">
          <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="多联赛切换条与等宽编号列表，当前联赛以荧光青绿高亮" loading="lazy" decoding="async">
          <figcaption>12 个联赛切换条，当前联赛保持高亮</figcaption>
        </figure>
        <ol class="league-chips" aria-label="12 个联赛编号">
          <li class="mono">01</li>
          <li class="mono">02</li>
          <li class="mono">03</li>
          <li class="mono">04</li>
          <li class="mono">05</li>
          <li class="mono">06</li>
          <li class="mono">07</li>
          <li class="mono">08</li>
          <li class="mono">09</li>
          <li class="mono">10</li>
          <li class="mono">11</li>
          <li class="mono">12</li>
        </ol>
      </div>
    </div>
  </section>

  <section class="home-stand" aria-labelledby="stand-title">
    <div class="container stand-grid">
      <div class="stand-copy" data-reveal>
        <p class="eyebrow">城市看台资料库</p>
        <h2 id="stand-title">36 个城市，按区、排、座三级编号往下找</h2>
        <p class="section-lead">先选城市，再进场馆，最后落到具体座位区块。常去的城市收藏之后，下次打开直接落在你上次停留的看台段落，不用从第一层重新点。</p>
        <ul class="stand-levels">
          <li>
            <span class="mono">区</span>
            <div>
              <strong>城市与场馆分区</strong>
              <p>先确认场地范围，避免同城几个场馆之间选错。</p>
            </div>
          </li>
          <li>
            <span class="mono">排</span>
            <div>
              <strong>看台排号与通道</strong>
              <p>入口、扶梯与通道方向和排号对齐，进场不绕路。</p>
            </div>
          </li>
          <li>
            <span class="mono">座</span>
            <div>
              <strong>具体座位区块</strong>
              <p>区块内的视角与相邻区块一并标出，落座心里有底。</p>
            </div>
          </li>
        </ul>
        <a class="btn btn--primary" href="/topics/">浏览看台专题</a>
      </div>
      <div class="stand-visual" data-reveal>
        <p class="stand-visual-cap">看台阶梯编号</p>
        <ol class="stair">
          <li><span class="mono">01</span></li>
          <li><span class="mono">02</span></li>
          <li><span class="mono">03</span></li>
          <li><span class="mono">04</span></li>
          <li><span class="mono">05</span></li>
          <li><span class="mono">06</span></li>
        </ol>
      </div>
    </div>
  </section>

  <section class="home-device" aria-labelledby="device-title">
    <div class="container device-grid">
      <figure class="device-media" data-reveal>
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="平板设备上显示看台指引步骤与通知设置选项，画面叠加荧光网格标注" loading="lazy" decoding="async">
      </figure>
      <div class="device-copy" data-reveal>
        <p class="eyebrow">看台放在手边</p>
        <h2 id="device-title">在 iPhone 和 iPad 上把看台指引走完</h2>
        <p class="section-lead">iOS 16 及以上、iPadOS 17 及以上可以完整使用这套步骤。第一次照着走一遍，之后收藏页面就能直接回到上次的位置。</p>
        <ol class="device-steps">
          <li>
            <span class="mono">01</span>
            <div>
              <h3>设备检查与通知权限</h3>
              <p>确认系统版本，再把通知摘要打开，比分提醒才不会漏在外面。</p>
            </div>
          </li>
          <li>
            <span class="mono">02</span>
            <div>
              <h3>页面收藏</h3>
              <p>把常看的看台与联赛页面收进来，更新摘要会集中出现。</p>
            </div>
          </li>
          <li>
            <span class="mono">03</span>
            <div>
              <h3>横屏查看</h3>
              <p>横屏下座位区块和通道标注更清楚，长列表也好读。</p>
            </div>
          </li>
        </ol>
        <a class="btn btn--primary" href="/help-center/">查看完整步骤</a>
      </div>
    </div>
  </section>

  <section class="home-pulse" aria-labelledby="pulse-title">
    <div class="container">
      <div class="pulse-head" data-reveal>
        <p class="eyebrow">版本与专题</p>
        <h2 id="pulse-title">每个赛季一次主版本，专题跟着更新走</h2>
        <p class="section-lead">版本以赛季为节奏推进，每季一次主版本、不少于两次功能更新。专题中心按四个系列组织内容，每月更新不少于 8 篇；想了解团队分工与内容维护方式，可以看<a class="inline-link" href="/profile/">品牌概况</a>。</p>
      </div>
      <div class="pulse-grid">
        <a class="pulse-item" href="/topics/" data-reveal>
          <span class="pulse-dot" aria-hidden="true"></span>
          <h3>版本适配</h3>
          <p>新版本上线后哪些入口变了、哪些保持不变，一篇说清。</p>
          <span class="pulse-go" aria-hidden="true">→</span>
        </a>
        <a class="pulse-item" href="/topics/" data-reveal>
          <span class="pulse-dot" aria-hidden="true"></span>
          <h3>联赛观察</h3>
          <p>多联赛并行时的赛程变化与关注重点，按阶段归类。</p>
          <span class="pulse-go" aria-hidden="true">→</span>
        </a>
        <a class="pulse-item" href="/topics/" data-reveal>
          <span class="pulse-dot" aria-hidden="true"></span>
          <h3>看台指引</h3>
          <p>城市、场馆与座位区块的读法与常见误读对照。</p>
          <span class="pulse-go" aria-hidden="true">→</span>
        </a>
        <a class="pulse-item" href="/topics/" data-reveal>
          <span class="pulse-dot" aria-hidden="true"></span>
          <h3>设备使用</h3>
          <p>手机、平板与桌面端的显示差异和设置建议。</p>
          <span class="pulse-go" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  <section class="home-collect" aria-labelledby="collect-title">
    <div class="container">
      <div class="collect-card" data-reveal>
        <div class="collect-copy">
          <p class="eyebrow">收藏与更新</p>
          <h2 id="collect-title">把常看的页面收进来，更新自己找上门</h2>
          <p class="section-lead">收藏常用页面后，更新记录与比分刷新提示会集中出现在收藏入口。使用中碰到的问题、想补充的城市或设备设置需求，也可以直接写给我们。</p>
        </div>
        <div class="collect-actions">
          <button class="btn btn--signal" type="button" data-utility="favorite" data-toast>收藏常用页面</button>
          <a class="btn btn--ghost" href="/feedback/">提交使用反馈</a>
          <p class="collect-note">首次反馈通常在一个工作日内收到回复。</p>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-cell: #131A1C;
  --home-cell-deep: #0E1517;
  --home-edge: rgba(174, 184, 182, 0.16);
  --home-edge-strong: rgba(174, 184, 182, 0.32);
  --home-gap: clamp(14px, 1.8vw, 22px);
  background: var(--ink);
  color: var(--mist);
  overflow-x: clip;
}

.page-home p { margin: 0; }

.page-home h1,
.page-home h2,
.page-home h3 {
  font-family: var(--font-display);
  line-height: 1.18;
}

.page-home h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.035em;
  color: var(--mist);
  margin: 0;
}

.page-home h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--mist);
}

.page-home img { max-width: 100%; }

/* ---------- 上下文条 ---------- */
.page-home .home-trail {
  border-bottom: 1px solid var(--home-edge);
  padding-block: 14px;
}

.page-home .trail-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--steel);
}

.page-home .trail-line .mono {
  color: var(--mint);
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* ---------- 首屏拼贴 ---------- */
.page-home .home-hero {
  padding-block: clamp(28px, 4vw, 52px) clamp(36px, 5vw, 68px);
}

.page-home .hero-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}

.page-home .hero-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 22px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
  overflow: hidden;
}

.page-home .hero-cell--lead {
  background: linear-gradient(155deg, #10463B 0%, #0B1B18 52%, #0B0F10 100%);
  border-color: rgba(40, 240, 184, 0.24);
  padding: clamp(24px, 3vw, 44px);
  gap: 18px;
}

.page-home .hero-cell--lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 246, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 246, 244, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.page-home .hero-cell--lead > * {
  position: relative;
  z-index: 1;
}

.page-home .hero-cell--lead h1 {
  font-size: clamp(27px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.12;
  margin: 0;
  color: var(--mist);
}

.page-home .hero-lead {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.8;
  color: var(--chalk);
  max-width: 46ch;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.page-home .hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--mint);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 240, 184, 0.45);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .hero-link:hover,
.page-home .hero-link:focus-visible {
  color: var(--mist);
  border-color: var(--mist);
}

/* 首屏：看台主图 */
.page-home .hero-cell--media {
  padding: 0;
  min-height: 280px;
  border-color: var(--home-edge-strong);
}

.page-home .hero-cell--media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.page-home .hero-cell--media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 20px 16px;
  background: linear-gradient(to top, rgba(11, 15, 16, 0.94), rgba(11, 15, 16, 0));
  color: var(--mist);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 首屏：比分入口 */
.page-home .hero-cell--score {
  padding: 0;
  justify-content: flex-end;
  min-height: 280px;
  background: var(--home-cell-deep);
}

.page-home .score-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0.5;
}

.page-home .hero-cell--score::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 16, 0.12) 0%, rgba(11, 15, 16, 0.82) 62%, rgba(11, 15, 16, 0.97) 100%);
  pointer-events: none;
}

.page-home .score-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}

.page-home .score-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--signal);
}

.page-home .score-body h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.03em;
}

.page-home .score-body p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

/* 首屏：联赛数量 */
.page-home .hero-cell--leagues {
  background: var(--deep);
  border-color: rgba(40, 240, 184, 0.28);
}

.page-home .hero-figure {
  font-size: clamp(54px, 7vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--mint);
}

.page-home .hero-cell--leagues h2 {
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: 0.03em;
}

.page-home .hero-cell--leagues p {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(243, 246, 244, 0.72);
}

/* 首屏：设备指引 */
.page-home .hero-cell--device {
  background: var(--home-cell-deep);
}

.page-home .hero-cell--device h2 {
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: 0.03em;
}

.page-home .hero-cell--device p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

/* ---------- 适配速览条 ---------- */
.page-home .home-ruler {
  padding-block: clamp(40px, 5vw, 72px);
  background: var(--home-cell-deep);
  border-top: 1px solid var(--home-edge);
  border-bottom: 1px solid var(--home-edge);
}

.page-home .ruler-head {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

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

.page-home .ruler-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 18px;
  background: var(--concrete);
  border-left: 3px solid var(--mint);
}

.page-home .ruler-item:nth-child(2) { border-left-color: var(--pulse); }
.page-home .ruler-item:nth-child(3) { border-left-color: var(--signal); }

.page-home .ruler-item .figure {
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mist);
}

.page-home .ruler-item .figure-label {
  font-size: 13px;
  line-height: 1.7;
  color: var(--chalk);
}

.page-home .ruler-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 240, 184, 0.5);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .ruler-link:hover,
.page-home .ruler-link:focus-visible {
  color: var(--mist);
  border-color: var(--mist);
}

/* ---------- 联赛订阅 ---------- */
.page-home .home-leagues {
  padding-block: clamp(44px, 6vw, 84px);
}

.page-home .league-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-home .section-lead {
  font-size: 14px;
  line-height: 1.85;
  color: var(--chalk);
  max-width: 62ch;
  margin-top: 12px;
}

.page-home .inline-link {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 240, 184, 0.45);
}

.page-home .inline-link:hover,
.page-home .inline-link:focus-visible {
  color: var(--mist);
  border-color: var(--mist);
}

.page-home .league-modes {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .league-modes li {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
}

.page-home .league-modes .mono {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mint);
  margin-bottom: 6px;
}

.page-home .league-modes p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--chalk);
}

.page-home .league-board {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-home .league-media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--home-cell);
  border: 1px solid var(--home-edge-strong);
}

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

.page-home .league-media figcaption {
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--steel);
  background: var(--home-cell-deep);
  border-top: 1px solid var(--home-edge);
}

.page-home .league-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.page-home .league-chips li {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--chalk);
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
  border-radius: 8px;
}

.page-home .league-chips li:nth-child(4n),
.page-home .league-chips li:nth-child(7n) {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
}

/* ---------- 城市看台 ---------- */
.page-home .home-stand {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
  background: linear-gradient(180deg, var(--ink) 0%, #0D1416 100%);
}

.page-home .stand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.page-home .stand-levels {
  list-style: none;
  margin: 24px 0 26px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-home .stand-levels li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--home-edge);
}

.page-home .stand-levels li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-home .stand-levels .mono {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--mint);
  border: 1px solid rgba(40, 240, 184, 0.38);
  border-radius: 10px;
  background: rgba(40, 240, 184, 0.06);
}

.page-home .stand-levels strong {
  display: block;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--mist);
  margin-bottom: 4px;
}

.page-home .stand-levels p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-home .stand-visual {
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 5%, rgba(40, 240, 184, 0.12), transparent 58%),
    var(--home-cell);
  border: 1px solid var(--home-edge-strong);
}

.page-home .stand-visual-cap {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--steel);
  margin-bottom: 14px;
}

.page-home .stair {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.page-home .stair li {
  height: 40px;
  display: flex;
  align-items: center;
  padding-inline-start: 14px;
  border-radius: 8px;
  background: var(--concrete);
  border-left: 3px solid transparent;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--steel);
}

.page-home .stair li:nth-child(1) { width: 44%; }
.page-home .stair li:nth-child(2) { width: 52%; }
.page-home .stair li:nth-child(3) { width: 60%; }
.page-home .stair li:nth-child(4) { width: 68%; }
.page-home .stair li:nth-child(5) { width: 78%; }

.page-home .stair li:nth-child(6) {
  width: 92%;
  background: var(--deep);
  border-left-color: var(--mint);
  color: var(--mist);
}

/* ---------- 设备指引 ---------- */
.page-home .home-device {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
}

.page-home .device-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-home .device-media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--home-cell);
  border: 1px solid var(--home-edge-strong);
}

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

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

.page-home .device-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
}

.page-home .device-steps .mono {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--mint);
  padding-top: 2px;
}

.page-home .device-steps h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.page-home .device-steps p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

/* ---------- 更新脉冲与专题 ---------- */
.page-home .home-pulse {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
  background: var(--home-cell-deep);
}

.page-home .pulse-head {
  max-width: 760px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

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

.page-home .pulse-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 20px 18px;
  border-radius: 18px;
  background: var(--home-cell);
  border: 1px solid var(--home-edge);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-home .pulse-item:hover,
.page-home .pulse-item:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(40, 240, 184, 0.45);
  background: #162022;
}

.page-home .pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.5);
  animation: homePulse 2.6s var(--ease) infinite;
}

@keyframes homePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 90, 60, 0); }
}

.page-home .pulse-item h3 {
  margin: 14px 0 8px;
  font-size: 17px;
}

.page-home .pulse-item p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-home .pulse-go {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  color: var(--mint);
}

/* ---------- 收藏与反馈 ---------- */
.page-home .home-collect {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--home-edge);
}

.page-home .collect-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 0%, rgba(40, 240, 184, 0.13), transparent 55%),
    linear-gradient(140deg, #12302A 0%, #0C1416 62%, #0B0F10 100%);
  border: 1px solid rgba(40, 240, 184, 0.22);
}

.page-home .collect-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-home .collect-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--steel);
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .ruler-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-home .hero-collage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
  }

  .page-home .hero-cell--lead    { grid-column: 1 / 8; min-height: 380px; }
  .page-home .hero-cell--media   { grid-column: 8 / 13; min-height: 380px; }
  .page-home .hero-cell--score   { grid-column: 1 / 5;  min-height: 300px; }
  .page-home .hero-cell--leagues { grid-column: 5 / 9;  min-height: 300px; }
  .page-home .hero-cell--device  { grid-column: 9 / 13; min-height: 300px; margin-top: 20px; }

  .page-home .league-shell {
    grid-template-columns: 1fr 1.05fr;
  }

  .page-home .stand-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .page-home .device-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .page-home .collect-card {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
  }
}

@media (min-width: 1080px) {
  .page-home .pulse-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .pulse-dot {
    animation: none;
  }

  .page-home .pulse-item {
    transition: none;
  }
}
<<<END>>>