.page-home {
  --home-line: rgba(242, 233, 216, 0.12);
  --home-line-soft: rgba(242, 233, 216, 0.08);
  --home-gap: clamp(14px, 3vw, 26px);
  background: var(--ink-800);
  color: var(--paper);
  overflow-x: hidden;
}

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

.page-home figure {
  margin: 0;
}

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

.page-home a {
  color: inherit;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 5vw, 40px) 0 clamp(34px, 6vw, 68px);
  background:
    radial-gradient(circle at 86% 6%, rgba(53, 242, 208, 0.13), transparent 54%),
    radial-gradient(circle at 6% 94%, rgba(184, 107, 75, 0.18), transparent 56%),
    linear-gradient(180deg, var(--ink-850) 0%, var(--ink-800) 100%);
  border-bottom: 1px solid var(--home-line);
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(242, 233, 216, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 233, 216, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.7;
  pointer-events: none;
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}

.page-home .home-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(30px, 7.2vw, 62px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.page-home .home-hero__lede {
  margin: 16px 0 0;
  max-width: 46em;
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.76);
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-home .home-hero__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.02em;
}

.page-home .home-hero__jump a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(53, 242, 208, 0.45);
  padding-bottom: 1px;
}

.page-home .home-hero__jump a:hover {
  border-bottom-style: solid;
}

.page-home .home-hero__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 18px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--home-line);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(242, 233, 216, 0.6);
}

.page-home .home-hero__meta .numeral {
  display: block;
  font-size: 22px;
  color: var(--amber);
  letter-spacing: 0;
}

.page-home .home-hero__stage {
  display: grid;
  gap: 16px;
}

.page-home .home-clock {
  border: 2px solid var(--line-strong);
  background: linear-gradient(155deg, var(--ink-700) 0%, var(--ink-900) 100%);
  box-shadow: var(--shadow-hard);
  padding: clamp(16px, 3.2vw, 24px);
}

.page-home .home-clock__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-home .home-clock__label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.page-home .home-clock__num {
  margin: 8px 0 6px;
  font-size: clamp(54px, 15vw, 104px);
  line-height: 0.88;
  color: var(--cyan);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.page-home .home-clock__hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(242, 233, 216, 0.7);
}

.page-home .home-clock__ver {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--home-line-soft);
  font-size: 12px;
  color: var(--stone);
}

.page-home .home-clock__ver .mono {
  letter-spacing: 0.1em;
}

.page-home .home-clock__ver .numeral {
  font-size: 20px;
  color: var(--amber);
}

.page-home .home-hero__media {
  box-shadow: var(--shadow-hard);
}

/* ---------- 章节通用 ---------- */
.page-home .home-sec {
  position: relative;
  padding: clamp(40px, 8vw, 86px) 0;
  border-bottom: 1px solid var(--home-line);
  scroll-margin-top: 90px;
}

.page-home .home-sec--deep {
  background:
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}

.page-home .home-sec--paper {
  background: var(--paper);
  color: var(--ink-900);
  border-bottom-color: rgba(6, 18, 15, 0.16);
}

.page-home .home-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(12px, 2.4vw, 26px);
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 42px);
}

.page-home .home-head__no {
  font-size: clamp(32px, 6vw, 58px);
  line-height: 0.9;
  color: var(--amber);
}

.page-home .home-head__body h2 {
  margin: 6px 0 0;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.2;
  font-weight: 800;
}

.page-home .home-head__body p {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(242, 233, 216, 0.72);
}

.page-home .home-sec--paper .home-head__body p {
  color: rgba(6, 18, 15, 0.74);
}

.page-home .home-sec--paper .home-head__no {
  color: var(--clay);
}

.page-home .home-sec--paper .eyebrow {
  color: var(--ink-700);
}

/* ---------- 常用栏 ---------- */
.page-home .home-rail {
  display: grid;
  gap: var(--home-gap);
  align-items: start;
}

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

.page-home .home-rail__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  padding: 14px 16px;
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  border-left: 3px solid var(--moss);
  box-shadow: 4px 4px 0 rgba(6, 18, 15, 0.7);
  transition: transform 0.18s ease, border-left-color 0.18s ease;
}

.page-home .home-rail__item:hover {
  transform: translateX(3px);
  border-left-color: var(--cyan);
}

.page-home .home-rail__item--pin {
  border-left-color: var(--cyan);
  background: linear-gradient(120deg, rgba(53, 242, 208, 0.11), var(--ink-700) 72%);
}

.page-home .home-rail__no {
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 22px;
  line-height: 1;
  color: var(--amber);
}

.page-home .home-rail__item h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.page-home .home-rail__item p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(242, 233, 216, 0.66);
}

.page-home .home-rail__figure {
  box-shadow: var(--shadow-hard);
}

.page-home .home-rail__stat {
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--amber);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--stone);
}

/* ---------- 联赛瀑布流 ---------- */
.page-home .home-league__banner {
  margin-bottom: clamp(20px, 3.4vw, 32px);
  box-shadow: var(--shadow-hard);
}

.page-home .home-league {
  display: grid;
  gap: var(--home-gap);
}

.page-home .home-league__card {
  display: grid;
  gap: 8px;
  padding: 16px 16px 18px;
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  border-top: 3px solid var(--clay);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, border-top-color 0.18s ease;
}

.page-home .home-league__card:hover {
  transform: translateY(-3px);
  border-top-color: var(--cyan);
}

.page-home .home-league__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-home .home-league__ver {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--home-line);
  color: var(--stone);
  opacity: 0.45;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-home .home-league__card:hover .home-league__ver,
.page-home .home-league__card:focus-within .home-league__ver {
  opacity: 1;
  color: var(--cyan);
  border-color: var(--line-strong);
}

.page-home .home-league__card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.page-home .home-league__card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(242, 233, 216, 0.68);
}

.page-home .home-league__meta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--moss);
}

.page-home .home-archives {
  display: grid;
  gap: var(--home-gap);
  margin-top: clamp(24px, 4vw, 38px);
}

.page-home .home-archive {
  padding: clamp(18px, 3vw, 24px);
  background: var(--ink-850);
  border: 1px solid var(--home-line);
  border-left: 4px solid var(--cyan);
}

.page-home .home-archive--amber {
  border-left-color: var(--amber);
}

.page-home .home-archive h3 {
  margin: 8px 0 0;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
}

.page-home .home-archive p {
  margin: 10px 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.7);
}

/* ---------- 面板预览 ---------- */
.page-home .home-panel {
  display: grid;
  gap: var(--home-gap);
  align-items: start;
}

.page-home .home-ver {
  padding: clamp(18px, 3vw, 26px);
  border: 2px solid var(--amber);
  background: linear-gradient(150deg, var(--ink-900) 0%, var(--ink-700) 100%);
  box-shadow: var(--shadow-hard);
}

.page-home .home-ver__num {
  margin: 10px 0 0;
  font-size: clamp(40px, 8vw, 66px);
  line-height: 0.9;
  color: var(--amber);
  letter-spacing: -0.02em;
}

.page-home .home-ver__cap {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(242, 233, 216, 0.72);
}

.page-home .home-ver__rows {
  display: grid;
  gap: 8px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--home-line-soft);
  padding-top: 16px;
}

.page-home .home-ver__row {
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(242, 233, 216, 0.74);
}

.page-home .home-ver__row .mono {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--moss);
}

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

.page-home .home-entry {
  padding: 14px 16px;
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  border-bottom: 2px solid var(--line);
  transition: border-bottom-color 0.18s ease, background 0.18s ease;
}

.page-home .home-entry:hover {
  border-bottom-color: var(--cyan);
  background: linear-gradient(120deg, rgba(53, 242, 208, 0.09), var(--ink-700) 75%);
}

.page-home .home-entry__no {
  font-size: 13px;
  color: var(--amber);
  letter-spacing: 0.06em;
}

.page-home .home-entry h3 {
  margin: 4px 0 0;
  font-size: 15.5px;
  font-weight: 700;
}

.page-home .home-entry p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(242, 233, 216, 0.64);
}

/* ---------- 赛前四步 ---------- */
.page-home .home-prematch {
  display: grid;
  gap: var(--home-gap);
  align-items: start;
}

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

.page-home .home-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(6, 18, 15, 0.14);
  box-shadow: 4px 4px 0 rgba(6, 18, 15, 0.12);
}

.page-home .home-step__no {
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 20px;
  line-height: 1;
  color: var(--clay);
}

.page-home .home-step h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-900);
}

.page-home .home-step p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(6, 18, 15, 0.74);
}

.page-home .home-prematch__figure {
  box-shadow: 6px 6px 0 rgba(6, 18, 15, 0.22);
}

.page-home .home-prematch__note {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--clay);
  background: rgba(6, 18, 15, 0.06);
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(6, 18, 15, 0.8);
}

/* ---------- 合作与服务 ---------- */
.page-home .home-links {
  display: grid;
  gap: var(--home-gap);
}

.page-home .home-link-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(18px, 3vw, 24px);
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.page-home .home-link-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.page-home .home-link-card h3 {
  margin: 0;
  font-size: clamp(17px, 2.3vw, 20px);
  line-height: 1.35;
  font-weight: 700;
}

.page-home .home-link-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: rgba(242, 233, 216, 0.68);
}

.page-home .home-link-card__more {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

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

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

@media (min-width: 780px) {
  .page-home .home-archives {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .page-home .home-ver__row {
    grid-template-columns: 92px 1fr;
    gap: 4px 12px;
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .page-home .home-hero__inner {
    grid-template-columns: 1.04fr 0.96fr;
    gap: clamp(32px, 4vw, 56px);
  }

  .page-home .home-hero__stage {
    position: sticky;
    top: 90px;
  }

  .page-home .home-rail {
    grid-template-columns: 1.12fr 0.88fr;
  }

  .page-home .home-panel {
    grid-template-columns: 0.86fr 1.14fr;
  }

  .page-home .home-prematch {
    grid-template-columns: 1.02fr 0.98fr;
  }
}

@media (min-width: 1080px) {
  .page-home .home-league {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-rail__item,
  .page-home .home-league__card,
  .page-home .home-entry,
  .page-home .home-link-card,
  .page-home .home-league__ver {
    transition: none;
  }

  .page-home .home-rail__item:hover,
  .page-home .home-league__card:hover,
  .page-home .home-link-card:hover {
    transform: none;
  }
}


<main id="main-content" class="page-home">
  <div class="home-hero">
    <div class="container home-hero__inner">
      <div class="home-hero__lead">
        <nav class="breadcrumb" aria-label="当前位置">
          <span>首页</span>
          <span class="breadcrumb__sep">/</span>
          <span aria-current="page">登录直通</span>
        </nav>
        <p class="eyebrow">01 / 赛前锚点</p>
        <h1>开赛前十分钟，两下点到阵容与交锋</h1>
        <p class="home-hero__lede">华体会体育资讯把联赛导航和回看集锦排在常用栏最前，位置常年不变，你每次打开都落在同一处。从登录直通进来，面板右上角就是本地版本号，赛前要确认的首发、伤停与过往战绩，不用再一层层翻菜单。</p>
        <div class="home-hero__actions">
          <a class="btn btn--primary" href="/news/">看赛事资讯</a>
          <a class="btn btn--ghost" href="/platform/">打开面板</a>
        </div>
        <p class="home-hero__jump">
          直接跳到：
          <a href="#common-rail">常用栏</a>
          <a href="#leagues">联赛分组</a>
          <a href="#panel">面板预览</a>
        </p>
        <ul class="home-hero__meta">
          <li><span class="numeral">1.8s</span>常规 4G 下移动端首屏加载目标</li>
          <li><span class="numeral">12</span>个联赛分组可在单页连续浏览</li>
          <li><span class="numeral">60</span>条每周赛前情报，覆盖八个项目</li>
        </ul>
      </div>

      <div class="home-hero__stage" data-reveal data-reveal-delay="120">
        <div class="home-clock">
          <div class="home-clock__top">
            <span class="mono home-clock__label">赛前确认窗口</span>
            <span class="tag tag--coral">即将开赛</span>
          </div>
          <p class="home-clock__num numeral">10:00</p>
          <p class="home-clock__hint">阵容、历史交锋、近期战绩在同一屏排开，两步之内全部看到。</p>
          <div class="home-clock__ver">
            <span class="mono">本地版本号</span>
            <strong class="numeral">v14</strong>
            <span>稳定版系列第 14 次迭代，位于面板右上角</span>
          </div>
        </div>
        <figure class="media-frame media-frame--16x9 home-hero__media">
          <img class="media-frame__img" src="{zhanqunpic:h:720w:1200}" width="1200" height="720" alt="俯视视角的赛场局部与战术板线条，画面叠加半透明版本号水印">
          <span class="media-frame__tag">华体会赛事 · 深夜指挥台</span>
          <span class="media-frame__mark numeral">v14</span>
        </figure>
      </div>
    </div>
  </div>

  <section class="home-sec" id="common-rail" aria-labelledby="rail-title">
    <div class="container">
      <header class="home-head" data-reveal>
        <span class="home-head__no numeral">02</span>
        <div class="home-head__body">
          <p class="eyebrow">常用栏 · 固定轨道</p>
          <h2 id="rail-title">常用的两格，一直排在最上面</h2>
          <p>移动端打开页面，最上面两格永远是联赛导航与回看集锦，往下才是历史交锋、版本与帮助。顺序不随页面变化，你记一次位置就够用，开赛前不必重新找入口。</p>
        </div>
      </header>

      <div class="home-rail">
        <ol class="home-rail__list" data-reveal>
          <li class="home-rail__item home-rail__item--pin">
            <span class="home-rail__no numeral">01</span>
            <h3>联赛导航</h3>
            <p>按项目与联赛分组横排，选中当前轮次就直接落到赛前情报列表。</p>
          </li>
          <li class="home-rail__item home-rail__item--pin">
            <span class="home-rail__no numeral">02</span>
            <h3>回看集锦</h3>
            <p>按联赛、轮次、球队三种维度归档，赛后可原地找到关键分片段。</p>
          </li>
          <li class="home-rail__item">
            <span class="home-rail__no numeral">03</span>
            <h3>历史交锋</h3>
            <p>六个赛季的对照结果，支持按主客场与近期状态筛选。</p>
          </li>
          <li class="home-rail__item">
            <span class="home-rail__no numeral">04</span>
            <h3>版本与帮助</h3>
            <p>右上角读本地版本号，遇到疑问顺着入口进入面板问答。</p>
          </li>
        </ol>

        <figure class="media-frame media-frame--4x3 home-rail__figure" data-reveal data-reveal-delay="140">
          <img class="media-frame__img" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="移动端常用栏界面示意，顶部依次排列联赛导航与回看集锦入口" loading="lazy" decoding="async">
          <span class="media-frame__tag">常用栏 · 前两位固定</span>
          <span class="media-frame__mark numeral">01</span>
        </figure>
      </div>

      <p class="home-rail__stat">常用栏承担了移动端 63% 的点击，这个排序经过 9 轮用户测试反复调整后定下来。</p>
    </div>
  </section>

  <section class="home-sec home-sec--deep" id="leagues" aria-labelledby="league-title">
    <div class="container">
      <header class="home-head" data-reveal>
        <span class="home-head__no numeral">03</span>
        <div class="home-head__body">
          <p class="eyebrow">联赛分组 · 资讯瀑布流</p>
          <h2 id="league-title">按联赛分组建卡，回看与交锋各占一栏</h2>
          <p>华体会面板按联赛分组排列，单页连续浏览 12 个分组；资讯卡片走主列，回看集锦与历史交锋固定占住下方两栏，赛前情报和赛后资料互不混淆。</p>
        </div>
      </header>

      <figure class="media-frame media-frame--16x9 home-league__banner" data-reveal>
        <img class="media-frame__img" src="{zhanqunpic:h:480w:1200}" width="1200" height="480" alt="按联赛分组的资讯卡片界面示意，下方并列回看集锦与历史交锋两栏" loading="lazy" decoding="async">
        <span class="media-frame__tag">12 个联赛分组 · 单页浏览</span>
        <span class="media-frame__mark numeral">03</span>
      </figure>

      <div class="home-league">
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--moss">足球</span><span class="home-league__ver mono">v14</span></div>
          <h3>甲级联赛组</h3>
          <p>每轮的首发与伤停更新集中在此，开赛前最后一次改动会标在卡片顶部。</p>
          <p class="home-league__meta mono">赛前情报 · 本周更新</p>
        </article>
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--moss">足球</span><span class="home-league__ver mono">v14</span></div>
          <h3>杯赛组</h3>
          <p>单场淘汰制的对阵表与主客场分布一并列出，整轮走势一屏看完。</p>
          <p class="home-league__meta mono">赛前情报 · 本周更新</p>
        </article>
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--amber">篮球</span><span class="home-league__ver mono">v14</span></div>
          <h3>常规赛组</h3>
          <p>首发确认、轮换变化与近期战绩并排显示，适合临场快速扫读。</p>
          <p class="home-league__meta mono">赛前情报 · 今日更新</p>
        </article>
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--amber">篮球</span><span class="home-league__ver mono">v14</span></div>
          <h3>季后赛组</h3>
          <p>系列赛比分与历次交手结果放在同一处，判断走势不必来回切换。</p>
          <p class="home-league__meta mono">赛前情报 · 今日更新</p>
        </article>
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--moss">网球</span><span class="home-league__ver mono">v14</span></div>
          <h3>巡回赛组</h3>
          <p>场地类型与过往交手场次分开归档，硬地与红土各自检索。</p>
          <p class="home-league__meta mono">赛前情报 · 本周更新</p>
        </article>
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--coral">电竞</span><span class="home-league__ver mono">v14</span></div>
          <h3>联赛季后组</h3>
          <p>版本更新后的阵容与战术变化单独标注，旧数据的参考范围一眼可辨。</p>
          <p class="home-league__meta mono">赛前情报 · 今日更新</p>
        </article>
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--moss">排球</span><span class="home-league__ver mono">v14</span></div>
          <h3>联赛组</h3>
          <p>局分、胜负场次与近期状态收在卡片右侧，阵容确认一步可查。</p>
          <p class="home-league__meta mono">赛前情报 · 本周更新</p>
        </article>
        <article class="home-league__card">
          <div class="home-league__top"><span class="tag tag--moss">羽毛球</span><span class="home-league__ver mono">v14</span></div>
          <h3>团体赛组</h3>
          <p>出场顺序与历史对阵合并展示，排阵变化即时反映在卡片上。</p>
          <p class="home-league__meta mono">赛前情报 · 本周更新</p>
        </article>
      </div>

      <div class="home-archives">
        <article class="home-archive" data-reveal>
          <p class="eyebrow">回看集锦</p>
          <h3>2400 余条片段，三种维度归档</h3>
          <p>按联赛、轮次与球队检索，关键分和转折回合都保留完整上下文，赛后复盘直接在原地播放。</p>
          <a class="btn btn--primary" href="/news/">进入集锦</a>
        </article>
        <article class="home-archive home-archive--amber" data-reveal data-reveal-delay="120">
          <p class="eyebrow">历史交锋</p>
          <h3>六个赛季的对照结果</h3>
          <p>支持按主客场与近期状态筛选，同一对阵的历次结果横向铺开，判断赛前形势不必另开页面。</p>
          <a class="btn btn--ghost" href="/platform/">查交锋</a>
        </article>
      </div>
    </div>
  </section>

  <section class="home-sec" id="panel" aria-labelledby="panel-title">
    <div class="container">
      <header class="home-head" data-reveal>
        <span class="home-head__no numeral">04</span>
        <div class="home-head__body">
          <p class="eyebrow">稳定版面板 · 同屏预览</p>
          <h2 id="panel-title">版本号与六类入口，落在同一屏</h2>
          <p>打开华体会稳定版面板，右上角的版本标识区直接写明本地版本号，六类查询项平铺在下方。找赛程、找阵容、找回看，从入口到结果通常一步，最多两步。</p>
        </div>
      </header>

      <div class="home-panel">
        <div class="home-ver" data-reveal>
          <p class="eyebrow">版本标识区</p>
          <p class="home-ver__num numeral">v14</p>
          <p class="home-ver__cap">稳定版系列已公开迭代 14 次</p>
          <ul class="home-ver__rows">
            <li class="home-ver__row"><span class="mono">位置</span><span>面板右上角，常驻可见</span></li>
            <li class="home-ver__row"><span class="mono">更新日志</span><span>围绕版本号、分类入口、回看栏三项组织</span></li>
            <li class="home-ver__row"><span class="mono">访问方式</span><span>网页端与移动端自适应，无需下载</span></li>
          </ul>
          <a class="btn btn--amber" href="/platform/">查看完整面板</a>
        </div>

        <div class="home-entries" data-reveal data-reveal-delay="140">
          <div class="home-entry"><span class="home-entry__no numeral">01</span><h3>联赛分组</h3><p>按项目进入，落到当前轮次的情报卡片。</p></div>
          <div class="home-entry"><span class="home-entry__no numeral">02</span><h3>赛程查询</h3><p>按日期与轮次筛选，开赛时间与场地并列。</p></div>
          <div class="home-entry"><span class="home-entry__no numeral">03</span><h3>回看检索</h3><p>三种维度定位片段，选中即播。</p></div>
          <div class="home-entry"><span class="home-entry__no numeral">04</span><h3>交锋对照</h3><p>主客场与近期状态双条件组合查看。</p></div>
          <div class="home-entry"><span class="home-entry__no numeral">05</span><h3>版本说明</h3><p>历次迭代的入口变化写在同一处。</p></div>
          <div class="home-entry"><span class="home-entry__no numeral">06</span><h3>使用帮助</h3><p>常用操作步骤与常见疑问速查。</p></div>
        </div>
      </div>
    </div>
  </section>

  <section class="home-sec home-sec--paper" id="prematch" aria-labelledby="prematch-title">
    <div class="container">
      <header class="home-head" data-reveal>
        <span class="home-head__no numeral">05</span>
        <div class="home-head__body">
          <p class="eyebrow">赛前十分钟 · 操作路径</p>
          <h2 id="prematch-title">开赛前十分钟，按这四步确认</h2>
          <p>时间紧的时候最怕找不到入口。把阵容、近期战绩与历史交锋压进一屏之后，赛前确认变成一条固定的动作链，照着走就行。</p>
        </div>
      </header>

      <div class="home-prematch">
        <ol class="home-steps" data-reveal>
          <li class="home-step">
            <span class="home-step__no numeral">1</span>
            <h3>点开常用栏第一格</h3>
            <p>在联赛导航里选好联赛与轮次，直接进入本轮情报列表。</p>
          </li>
          <li class="home-step">
            <span class="home-step__no numeral">2</span>
            <h3>看首发与伤停</h3>
            <p>赛前最后一次改动会标在卡片上，阵容变化不用另找来源。</p>
          </li>
          <li class="home-step">
            <span class="home-step__no numeral">3</span>
            <h3>对照历史交锋</h3>
            <p>同一对阵的历次结果就在右侧一栏，主客场差异一眼可辨。</p>
          </li>
          <li class="home-step">
            <span class="home-step__no numeral">4</span>
            <h3>留好回看入口</h3>
            <p>赛后从常用栏第二格找关键片段，联赛、轮次、球队任选其一。</p>
          </li>
        </ol>

        <figure class="media-frame media-frame--4x3 home-prematch__figure" data-reveal data-reveal-delay="140">
          <img class="media-frame__img" src="{zhanqunpic:h:640w:1000}" width="1000" height="640" alt="开赛前十分钟快捷视图示意，阵容、历史交锋与近期战绩在同一屏内并列" loading="lazy" decoding="async">
          <span class="media-frame__tag">赛前快捷视图 · 一屏确认</span>
          <span class="media-frame__mark numeral">10</span>
        </figure>
      </div>

      <p class="home-prematch__note">从常用栏第一格到阵容页只需两次点击，历史交锋同屏可读，赛前十分钟的节奏完全够用。</p>
    </div>
  </section>

  <section class="home-sec" id="services" aria-labelledby="services-title">
    <div class="container">
      <header class="home-head" data-reveal>
        <span class="home-head__no numeral">06</span>
        <div class="home-head__body">
          <p class="eyebrow">合作与服务入口</p>
          <h2 id="services-title">下一步从哪里开始</h2>
          <p>无论你想对接联赛内容、解决面板操作疑问，还是先了解团队做事的方式，都可以从下面三条入口出发，找到对应的对接人。</p>
        </div>
      </header>

      <div class="home-links">
        <a class="home-link-card" href="/cooperation/">
          <span class="tag tag--amber">内容合作</span>
          <h3>联赛内容与集锦归档对接</h3>
          <p>服务 26 个省级内容伙伴与 140 家业余联赛运营方，支持联赛分组内容对接、回看集锦归档和面板入口说明。</p>
          <span class="home-link-card__more mono">前往合作联系 →</span>
        </a>
        <a class="home-link-card" href="/questions/">
          <span class="tag tag--moss">面板问答</span>
          <h3>版本号与常用栏的用法</h3>
          <p>本地版本号怎么读、常用栏顺序为何固定、入口为何这样摆，操作步骤按问题拆开写清楚。</p>
          <span class="home-link-card__more mono">进入问答 →</span>
        </a>
        <a class="home-link-card" href="/story/">
          <span class="tag tag--coral">品牌故事</span>
          <h3>合肥团队与内容方法</h3>
          <p>46 人的内容运营与产品支持团队，编辑初审、数据复核、发布前抽检三级流程，是常用栏敢于固定的底气。</p>
          <span class="home-link-card__more mono">了解团队 →</span>
        </a>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-line: rgba(242, 233, 216, 0.12);
  --home-line-soft: rgba(242, 233, 216, 0.08);
  --home-gap: clamp(14px, 3vw, 26px);
  background: var(--ink-800);
  color: var(--paper);
  overflow-x: hidden;
}

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

.page-home figure {
  margin: 0;
}

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

.page-home a {
  color: inherit;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 5vw, 40px) 0 clamp(34px, 6vw, 68px);
  background:
    radial-gradient(circle at 86% 6%, rgba(53, 242, 208, 0.13), transparent 54%),
    radial-gradient(circle at 6% 94%, rgba(184, 107, 75, 0.18), transparent 56%),
    linear-gradient(180deg, var(--ink-850) 0%, var(--ink-800) 100%);
  border-bottom: 1px solid var(--home-line);
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(242, 233, 216, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 233, 216, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.7;
  pointer-events: none;
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}

.page-home .home-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(30px, 7.2vw, 62px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.page-home .home-hero__lede {
  margin: 16px 0 0;
  max-width: 46em;
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.76);
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-home .home-hero__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.02em;
}

.page-home .home-hero__jump a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(53, 242, 208, 0.45);
  padding-bottom: 1px;
}

.page-home .home-hero__jump a:hover {
  border-bottom-style: solid;
}

.page-home .home-hero__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 18px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--home-line);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(242, 233, 216, 0.6);
}

.page-home .home-hero__meta .numeral {
  display: block;
  font-size: 22px;
  color: var(--amber);
  letter-spacing: 0;
}

.page-home .home-hero__stage {
  display: grid;
  gap: 16px;
}

.page-home .home-clock {
  border: 2px solid var(--line-strong);
  background: linear-gradient(155deg, var(--ink-700) 0%, var(--ink-900) 100%);
  box-shadow: var(--shadow-hard);
  padding: clamp(16px, 3.2vw, 24px);
}

.page-home .home-clock__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-home .home-clock__label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.page-home .home-clock__num {
  margin: 8px 0 6px;
  font-size: clamp(54px, 15vw, 104px);
  line-height: 0.88;
  color: var(--cyan);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.page-home .home-clock__hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(242, 233, 216, 0.7);
}

.page-home .home-clock__ver {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--home-line-soft);
  font-size: 12px;
  color: var(--stone);
}

.page-home .home-clock__ver .mono {
  letter-spacing: 0.1em;
}

.page-home .home-clock__ver .numeral {
  font-size: 20px;
  color: var(--amber);
}

.page-home .home-hero__media {
  box-shadow: var(--shadow-hard);
}

/* ---------- 章节通用 ---------- */
.page-home .home-sec {
  position: relative;
  padding: clamp(40px, 8vw, 86px) 0;
  border-bottom: 1px solid var(--home-line);
  scroll-margin-top: 90px;
}

.page-home .home-sec--deep {
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}

.page-home .home-sec--paper {
  background: var(--paper);
  color: var(--ink-900);
  border-bottom-color: rgba(6, 18, 15, 0.16);
}

.page-home .home-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(12px, 2.4vw, 26px);
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 42px);
}

.page-home .home-head__no {
  font-size: clamp(32px, 6vw, 58px);
  line-height: 0.9;
  color: var(--amber);
}

.page-home .home-head__body h2 {
  margin: 6px 0 0;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.2;
  font-weight: 800;
}

.page-home .home-head__body p {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(242, 233, 216, 0.72);
}

.page-home .home-sec--paper .home-head__body p {
  color: rgba(6, 18, 15, 0.74);
}

.page-home .home-sec--paper .home-head__no {
  color: var(--clay);
}

.page-home .home-sec--paper .eyebrow {
  color: var(--ink-700);
}

/* ---------- 常用栏 ---------- */
.page-home .home-rail {
  display: grid;
  gap: var(--home-gap);
  align-items: start;
}

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

.page-home .home-rail__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  padding: 14px 16px;
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  border-left: 3px solid var(--moss);
  box-shadow: 4px 4px 0 rgba(6, 18, 15, 0.7);
  transition: transform 0.18s ease, border-left-color 0.18s ease;
}

.page-home .home-rail__item:hover {
  transform: translateX(3px);
  border-left-color: var(--cyan);
}

.page-home .home-rail__item--pin {
  border-left-color: var(--cyan);
  background: linear-gradient(120deg, rgba(53, 242, 208, 0.11), var(--ink-700) 72%);
}

.page-home .home-rail__no {
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 22px;
  line-height: 1;
  color: var(--amber);
}

.page-home .home-rail__item h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.page-home .home-rail__item p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(242, 233, 216, 0.66);
}

.page-home .home-rail__figure {
  box-shadow: var(--shadow-hard);
}

.page-home .home-rail__stat {
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--amber);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--stone);
}

/* ---------- 联赛瀑布流 ---------- */
.page-home .home-league__banner {
  margin-bottom: clamp(20px, 3.4vw, 32px);
  box-shadow: var(--shadow-hard);
}

.page-home .home-league {
  display: grid;
  gap: var(--home-gap);
}

.page-home .home-league__card {
  display: grid;
  gap: 8px;
  padding: 16px 16px 18px;
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  border-top: 3px solid var(--clay);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, border-top-color 0.18s ease;
}

.page-home .home-league__card:hover {
  transform: translateY(-3px);
  border-top-color: var(--cyan);
}

.page-home .home-league__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-home .home-league__ver {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--home-line);
  color: var(--stone);
  opacity: 0.45;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-home .home-league__card:hover .home-league__ver,
.page-home .home-league__card:focus-within .home-league__ver {
  opacity: 1;
  color: var(--cyan);
  border-color: var(--line-strong);
}

.page-home .home-league__card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.page-home .home-league__card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(242, 233, 216, 0.68);
}

.page-home .home-league__meta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--moss);
}

.page-home .home-archives {
  display: grid;
  gap: var(--home-gap);
  margin-top: clamp(24px, 4vw, 38px);
}

.page-home .home-archive {
  padding: clamp(18px, 3vw, 24px);
  background: var(--ink-850);
  border: 1px solid var(--home-line);
  border-left: 4px solid var(--cyan);
}

.page-home .home-archive--amber {
  border-left-color: var(--amber);
}

.page-home .home-archive h3 {
  margin: 8px 0 0;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
}

.page-home .home-archive p {
  margin: 10px 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.7);
}

/* ---------- 面板预览 ---------- */
.page-home .home-panel {
  display: grid;
  gap: var(--home-gap);
  align-items: start;
}

.page-home .home-ver {
  padding: clamp(18px, 3vw, 26px);
  border: 2px solid var(--amber);
  background: linear-gradient(150deg, var(--ink-900) 0%, var(--ink-700) 100%);
  box-shadow: var(--shadow-hard);
}

.page-home .home-ver__num {
  margin: 10px 0 0;
  font-size: clamp(40px, 8vw, 66px);
  line-height: 0.9;
  color: var(--amber);
  letter-spacing: -0.02em;
}

.page-home .home-ver__cap {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(242, 233, 216, 0.72);
}

.page-home .home-ver__rows {
  display: grid;
  gap: 8px;
  margin: 18px 0 22px;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--home-line-soft);
}

.page-home .home-ver__row {
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(242, 233, 216, 0.74);
}

.page-home .home-ver__row .mono {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--moss);
}

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

.page-home .home-entry {
  padding: 14px 16px;
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  border-bottom: 2px solid var(--line);
  transition: border-bottom-color 0.18s ease, background 0.18s ease;
}

.page-home .home-entry:hover {
  border-bottom-color: var(--cyan);
  background: linear-gradient(120deg, rgba(53, 242, 208, 0.09), var(--ink-700) 75%);
}

.page-home .home-entry__no {
  font-size: 13px;
  color: var(--amber);
  letter-spacing: 0.06em;
}

.page-home .home-entry h3 {
  margin: 4px 0 0;
  font-size: 15.5px;
  font-weight: 700;
}

.page-home .home-entry p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(242, 233, 216, 0.64);
}

/* ---------- 赛前四步 ---------- */
.page-home .home-prematch {
  display: grid;
  gap: var(--home-gap);
  align-items: start;
}

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

.page-home .home-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(6, 18, 15, 0.14);
  box-shadow: 4px 4px 0 rgba(6, 18, 15, 0.12);
}

.page-home .home-step__no {
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 20px;
  line-height: 1;
  color: var(--clay);
}

.page-home .home-step h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-900);
}

.page-home .home-step p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(6, 18, 15, 0.74);
}

.page-home .home-prematch__figure {
  box-shadow: 6px 6px 0 rgba(6, 18, 15, 0.22);
}

.page-home .home-prematch__note {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--clay);
  background: rgba(6, 18, 15, 0.06);
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(6, 18, 15, 0.8);
}

/* ---------- 合作与服务 ---------- */
.page-home .home-links {
  display: grid;
  gap: var(--home-gap);
}

.page-home .home-link-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(18px, 3vw, 24px);
  background: var(--ink-700);
  border: 1px solid var(--home-line);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.page-home .home-link-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.page-home .home-link-card h3 {
  margin: 0;
  font-size: clamp(17px, 2.3vw, 20px);
  line-height: 1.35;
  font-weight: 700;
}

.page-home .home-link-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: rgba(242, 233, 216, 0.68);
}

.page-home .home-link-card__more {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

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

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

@media (min-width: 780px) {
  .page-home .home-archives {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .page-home .home-ver__row {
    grid-template-columns: 92px 1fr;
    gap: 4px 12px;
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .page-home .home-hero__inner {
    grid-template-columns: 1.04fr 0.96fr;
    gap: clamp(32px, 4vw, 56px);
  }

  .page-home .home-hero__stage {
    position: sticky;
    top: 90px;
  }

  .page-home .home-rail {
    grid-template-columns: 1.12fr 0.88fr;
  }

  .page-home .home-panel {
    grid-template-columns: 0.86fr 1.14fr;
  }

  .page-home .home-prematch {
    grid-template-columns: 1.02fr 0.98fr;
  }
}

@media (min-width: 1080px) {
  .page-home .home-league {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-rail__item,
  .page-home .home-league__card,
  .page-home .home-entry,
  .page-home .home-link-card,
  .page-home .home-league__ver {
    transition: none;
  }

  .page-home .home-rail__item:hover,
  .page-home .home-league__card:hover,
  .page-home .home-link-card:hover {
    transform: none;
  }
}