.page-home {
  background: var(--night);
  color: var(--score);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-home a {
  color: inherit;
}

.page-home .home-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 10px 0 0;
}

.page-home .home-h2--ink {
  color: var(--ink);
}

.page-home :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--warn);
  outline-offset: -2px;
}

/* ---------- 首屏 ---------- */
.page-home .home-open {
  padding: 26px 0 52px;
  background-color: var(--night);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(245, 241, 230, .055) 0 1px,
    transparent 1px 92px
  );
  border-bottom: 2px solid var(--line-dark);
}

.page-home .home-context {
  margin: 0 0 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--sage);
}

.page-home .home-context__sep {
  display: inline-block;
  width: 22px;
  height: 2px;
  margin: 0 10px 3px;
  background: var(--ref);
  vertical-align: middle;
}

.page-home .home-open__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.page-home .home-open__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 9.5vw, 78px);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 16px 0 0;
}

.page-home .home-open__intro {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(245, 241, 230, .82);
}

.page-home .home-dir {
  margin-top: 38px;
  border-top: 2px solid var(--line-dark);
}

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

.page-home .home-dir__item {
  border-bottom: 1px solid var(--line-dark);
}

.page-home .home-dir__link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num desc";
  column-gap: 14px;
  row-gap: 3px;
  padding: 14px 8px 14px 0;
  text-decoration: none;
  transition: background-color .16s ease, padding-left .16s ease, box-shadow .16s ease;
}

.page-home .home-dir__num {
  grid-area: num;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--sage);
  padding-top: 3px;
}

.page-home .home-dir__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.page-home .home-dir__desc {
  grid-area: desc;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 241, 230, .68);
}

.page-home .home-dir__link:hover,
.page-home .home-dir__link:focus-visible {
  background: rgba(201, 60, 54, .16);
  box-shadow: inset 3px 0 0 var(--ref);
  padding-left: 12px;
}

.page-home .home-dir__link:hover .home-dir__num,
.page-home .home-dir__link:focus-visible .home-dir__num {
  color: var(--warn);
}

.page-home .home-open__figure {
  position: relative;
  margin: 0;
  border: 2px solid var(--score);
  box-shadow: 10px 10px 0 var(--indigo);
  background: var(--pitch);
}

.page-home .home-open__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.page-home .home-open__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 12px;
  background: var(--night);
  border-top: 2px solid var(--score);
  border-right: 2px solid var(--score);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--warn);
}

.page-home .home-open__readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}

.page-home .home-open__readout > div {
  background: var(--night);
  padding: 10px 8px 11px;
}

.page-home .home-open__readout dt {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--sage);
}

.page-home .home-open__readout dd {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--warn);
}

/* ---------- 三条索引主线 ---------- */
.page-home .home-lanes {
  padding: 44px 0 48px;
  background: var(--pitch);
  border-bottom: 2px solid var(--line-dark);
}

.page-home .home-lanes__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 26px;
}

.page-home .home-lane {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 18px 22px;
  border: 2px solid rgba(245, 241, 230, .26);
  background: rgba(14, 27, 42, .86);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.page-home .home-lane:hover,
.page-home .home-lane:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ref);
  border-color: var(--score);
}

.page-home .home-lane__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--warn);
}

.page-home .home-lane__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sage);
}

.page-home .home-lane__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 4px;
}

.page-home .home-lane__desc {
  font-size: 14px;
  line-height: 1.72;
  color: rgba(245, 241, 230, .76);
}

/* ---------- 红黄牌卡片带 ---------- */
.page-home .home-cards {
  padding: 52px 0 44px;
  background: var(--night);
}

.page-home .home-cards__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-home .home-cards__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .7);
}

.page-home .home-cards__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 84%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 20px 22px;
  margin: 26px -20px 0;
}

.page-home .home-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(245, 241, 230, .3);
  background: linear-gradient(180deg, rgba(59, 47, 94, .45), rgba(14, 27, 42, .94));
  box-shadow: 6px 6px 0 rgba(59, 47, 94, .55);
}

.page-home .home-card--lead {
  padding: 0;
}

.page-home .home-card--lead img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 168px;
  object-fit: cover;
  border-bottom: 2px solid rgba(245, 241, 230, .3);
}

.page-home .home-card__body {
  padding: 17px 18px 18px;
}

.page-home .home-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 12px 0 0;
}

.page-home .home-card__text {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(245, 241, 230, .76);
}

.page-home .home-card__foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 241, 230, .16);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--sage);
}

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

/* ---------- V4 通道 ---------- */
.page-home .home-v4 {
  background: var(--score);
  color: var(--ink);
  padding: 52px 0;
  border-top: 8px solid var(--ink);
}

.page-home .home-v4__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}

.page-home .home-v4__lead {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-home .home-v4__steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-home .home-v4__steps li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-light);
}

.page-home .home-v4__v {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ref);
}

.page-home .home-v4__step {
  font-size: 14.5px;
  line-height: 1.7;
}

.page-home .home-v4__figure {
  margin: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  background: var(--pitch);
}

.page-home .home-v4__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .home-v4__cap {
  display: block;
  padding: 9px 12px;
  background: var(--night);
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--warn);
}

/* ---------- 回访与收藏 ---------- */
.page-home .home-return {
  background: var(--pitch);
  padding: 52px 0 56px;
}

.page-home .home-return__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.page-home .home-return__figure {
  margin: 0;
  border: 2px solid var(--score);
  box-shadow: 8px 8px 0 rgba(201, 60, 54, .75);
  background: var(--night);
}

.page-home .home-return__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page-home .home-return__lead {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(245, 241, 230, .8);
}

.page-home .home-return__list {
  list-style: none;
  margin: 24px 0 26px;
  padding: 0;
}

.page-home .home-return__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line-dark);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-home .home-return__list li:last-child {
  border-bottom: 1px solid var(--line-dark);
}

.page-home .home-return__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--grass);
}

/* ---------- 内容分区目录 ---------- */
.page-home .home-index {
  background: var(--score);
  color: var(--ink);
  padding: 52px 0 64px;
}

.page-home .home-index__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-home .home-index__item {
  border-bottom: 1px solid var(--line-light);
}

.page-home .home-index__item a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num desc";
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 6px 16px 0;
  text-decoration: none;
  transition: background-color .15s ease, padding-left .15s ease, box-shadow .15s ease;
}

.page-home .home-index__num {
  grid-area: num;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ref);
  padding-top: 4px;
}

.page-home .home-index__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.page-home .home-index__desc {
  grid-area: desc;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.page-home .home-index__go {
  display: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ref);
}

.page-home .home-index__item a:hover,
.page-home .home-index__item a:focus-visible {
  background: rgba(201, 60, 54, .1);
  box-shadow: inset 4px 0 0 var(--ref);
  padding-left: 12px;
}

/* ---------- 断点 ---------- */
@media (min-width: 760px) {
  .page-home .home-lanes__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-home .home-cards__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
  }

  .page-home .home-cards__track {
    grid-auto-columns: 320px;
    padding: 8px 24px 24px;
    margin: 28px -24px 0;
  }

  .page-home .home-index__item a {
    grid-template-columns: 64px 240px minmax(0, 1fr) 28px;
    grid-template-areas: "num name desc go";
    align-items: center;
    column-gap: 20px;
    padding: 18px 10px 18px 0;
  }

  .page-home .home-index__num {
    align-self: center;
    padding-top: 0;
  }

  .page-home .home-index__go {
    display: block;
  }
}

@media (min-width: 980px) {
  .page-home .home-open {
    padding: 36px 0 88px;
  }

  .page-home .home-open__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }

  .page-home .home-open__lead {
    grid-column: 1 / span 7;
  }

  .page-home .home-open__aside {
    grid-column: 9 / span 4;
    margin-top: 10px;
  }

  .page-home .home-open__intro {
    font-size: 17px;
  }

  .page-home .home-lanes {
    padding: 68px 0 76px;
  }

  .page-home .home-cards {
    padding: 76px 0 64px;
  }

  .page-home .home-v4 {
    padding: 88px 0;
  }

  .page-home .home-v4__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-home .home-return {
    padding: 84px 0 92px;
  }

  .page-home .home-return__grid {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    gap: 56px;
  }

  .page-home .home-index {
    padding: 84px 0 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-dir__link,
  .page-home .home-lane,
  .page-home .home-index__item a {
    transition: none;
  }

  .page-home .home-lane:hover,
  .page-home .home-lane:focus-visible {
    transform: none;
  }

  .page-home .home-cards__track {
    scroll-behavior: auto;
  }
}


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

  <section class="home-open" aria-labelledby="home-title">
    <div class="yb-container">
      <p class="home-context">首页 · V4 快速通道 <span class="home-context__sep" aria-hidden="true"></span> 英博体育官网入口</p>

      <div class="home-open__grid">
        <div class="home-open__lead">
          <p class="yb-kicker">国内赛事 · 标签索引与赛程数据</p>
          <h1 id="home-title" class="home-open__title">查国内赛事，<br>先定位，再细看</h1>
          <p class="home-open__intro">英博体育把联赛、杯赛、赛季阶段三条线索铺成一张索引网：赛程、对阵、红黄牌记录都能按标签一步找到。V4 版本重排了首页入口，常看的比赛从这一屏开始，基本两步就能进去。</p>

          <nav class="home-dir" aria-label="首页目录">
            <ul class="home-dir__list">
              <li class="home-dir__item">
                <a class="home-dir__link" href="/catalog/">
                  <span class="home-dir__num yb-mono">01</span>
                  <span class="home-dir__name">赛事标签索引</span>
                  <span class="home-dir__desc">按联赛、杯赛、赛季阶段找比赛，赛程、对阵和停赛记录集中在同一页。</span>
                </a>
              </li>
              <li class="home-dir__item">
                <a class="home-dir__link" href="/topics/">
                  <span class="home-dir__num yb-mono">02</span>
                  <span class="home-dir__name">赛场观察</span>
                  <span class="home-dir__desc">每周 6 至 8 篇专题，联赛阶段小结、杯赛路径与红黄牌场次解读。</span>
                </a>
              </li>
              <li class="home-dir__item">
                <a class="home-dir__link" href="/faq/">
                  <span class="home-dir__num yb-mono">03</span>
                  <span class="home-dir__name">使用问答</span>
                  <span class="home-dir__desc">36 条常见问题，账号登录、收藏管理、记录查看和刷新操作都有直接答案。</span>
                </a>
              </li>
              <li class="home-dir__item">
                <a class="home-dir__link" href="/about/">
                  <span class="home-dir__num yb-mono">04</span>
                  <span class="home-dir__name">品牌沿革</span>
                  <span class="home-dir__desc">近十年做国内赛事信息整理的来路，V1 到 V4 四次改版的过程。</span>
                </a>
              </li>
              <li class="home-dir__item">
                <a class="home-dir__link" href="/connect/">
                  <span class="home-dir__num yb-mono">05</span>
                  <span class="home-dir__name">联系通道</span>
                  <span class="home-dir__desc">赛事合作、数据反馈与客服咨询，重庆团队在工作日集中响应。</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>

        <div class="home-open__aside">
          <figure class="home-open__figure">
            <img src="{zhanqunpic:h:960w:720}" width="720" height="960" alt="夜场看台与记分牌的局部，灯光和人群沿对角线铺开">
            <figcaption class="home-open__cap">夜场 · 比赛周现场</figcaption>
          </figure>

          <dl class="home-open__readout">
            <div>
              <dt>赛程刷新</dt>
              <dd>15 秒</dd>
            </div>
            <div>
              <dt>记录留存</dt>
              <dd>5 个赛季</dd>
            </div>
            <div>
              <dt>一级标签</dt>
              <dd>42 个</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </section>

  <section class="home-lanes" id="lanes" aria-labelledby="lanes-title">
    <div class="yb-container">
      <div class="home-lanes__head">
        <p class="yb-kicker">本期索引</p>
        <h2 id="lanes-title" class="home-h2">三条主线，选一条切进去</h2>
      </div>

      <div class="home-lanes__rail">
        <a class="home-lane" href="/catalog/">
          <span class="home-lane__num yb-mono">01 / 联赛</span>
          <span class="home-lane__count yb-mono">18 个国内联赛</span>
          <span class="home-lane__title">按级别与赛区定位</span>
          <span class="home-lane__desc">整季赛程、每轮对阵和停赛名单跟着联赛走，赛季走到哪一步一目了然。</span>
        </a>
        <a class="home-lane" href="/catalog/">
          <span class="home-lane__num yb-mono">02 / 杯赛</span>
          <span class="home-lane__count yb-mono">12 项杯赛</span>
          <span class="home-lane__title">看签表也看晋级路</span>
          <span class="home-lane__desc">单场淘汰还是主客两回合，从抽签到决赛的路径按轮次拆开摆放。</span>
        </a>
        <a class="home-lane" href="/catalog/">
          <span class="home-lane__num yb-mono">03 / 时间轴</span>
          <span class="home-lane__count yb-mono">赛季阶段切片</span>
          <span class="home-lane__title">按阶段往回翻</span>
          <span class="home-lane__desc">常规赛、淘汰赛、收官轮各自成段，回看某个阶段的红黄牌密度很快。</span>
        </a>
      </div>
    </div>
  </section>

  <section class="home-cards" id="cards" aria-labelledby="cards-title">
    <div class="yb-container">
      <div class="home-cards__head">
        <div>
          <p class="yb-kicker">红黄牌记录</p>
          <h2 id="cards-title" class="home-h2">判罚记录，横向翻一遍</h2>
        </div>
        <p class="home-cards__note">先看卡片，需要细排就切表格视图。判罚类型、轮次和停赛场次都写在卡面上，左右滑动能扫完最近几个比赛周。</p>
      </div>
    </div>

    <div class="home-cards__track" tabindex="0" role="region" aria-label="红黄牌记录卡片带，可横向滚动">
      <article class="home-card home-card--lead">
        <img src="{zhanqunpic:h:540w:960}" width="960" height="540" alt="裁判举起黄牌的局部特写，背景虚化，强调判罚瞬间" loading="lazy" decoding="async">
        <div class="home-card__body">
          <span class="yb-tag yb-tag--warn">黄牌</span>
          <h3 class="home-card__title">累计黄牌停赛</h3>
          <p class="home-card__text">吃到第几张黄牌、在哪一轮停赛，卡面上直接标出来，不用自己数轮次。</p>
        </div>
      </article>

      <article class="home-card">
        <div class="home-card__body">
          <span class="yb-tag yb-tag--ref">红牌</span>
          <h3 class="home-card__title">直接红牌与后续缺阵</h3>
          <p class="home-card__text">红牌发生的时间点和之后缺少的场次单独成行，复盘一场球的转折很省事。</p>
          <p class="home-card__foot yb-mono">按轮次排序 · 可切表格</p>
        </div>
      </article>

      <article class="home-card">
        <div class="home-card__body">
          <span class="yb-tag yb-tag--warn">两黄换红</span>
          <h3 class="home-card__title">同场两黄的判罚</h3>
          <p class="home-card__text">一场比赛里两黄变红的情况单独归类，和直接红牌分开统计，看球队纪律状态更准。</p>
          <p class="home-card__foot yb-mono">按球队聚合 · 可按标签筛</p>
        </div>
      </article>

      <article class="home-card">
        <div class="home-card__body">
          <span class="yb-tag yb-tag--grass">归档</span>
          <h3 class="home-card__title">五个赛季并排看</h3>
          <p class="home-card__text">最近 5 个赛季的记录都留着，卡片视图和表格视图随时切换，换赛季只改一个筛选条件。</p>
          <p class="home-card__foot yb-mono">卡片 / 表格 双视图</p>
        </div>
      </article>
    </div>

    <div class="yb-container">
      <div class="home-cards__actions">
        <a class="yb-btn yb-btn--red" href="/catalog/">进入标签索引</a>
        <a class="yb-btn yb-btn--ghost" href="/topics/">看记录解读</a>
      </div>
    </div>
  </section>

  <section class="home-v4" id="v4" aria-labelledby="v4-title">
    <div class="yb-container">
      <div class="home-v4__grid">
        <div class="home-v4__body">
          <p class="yb-kicker yb-kicker--ink">V4 快速通道</p>
          <h2 id="v4-title" class="home-h2 home-h2--ink">入口重新排过，找一场球的路短了</h2>
          <p class="home-v4__lead">V4 版本把国内赛事分类标签按联赛、杯赛、时间轴重新排布，首页入口往前提了一层。以前要点开两级菜单才看到的标签，现在落在这一屏正下方。苹果设备上翻记录、切视图的手感也一起调顺了，iOS 15 及以上和 iPadOS 分屏都能正常用。</p>

          <ol class="home-v4__steps">
            <li>
              <span class="home-v4__v yb-mono">V1</span>
              <span class="home-v4__step">基础赛程展示，先把开赛时间、对阵和比赛状态摆清楚。</span>
            </li>
            <li>
              <span class="home-v4__v yb-mono">V2</span>
              <span class="home-v4__step">建立标签分类，联赛、杯赛、阶段各自归位。</span>
            </li>
            <li>
              <span class="home-v4__v yb-mono">V3</span>
              <span class="home-v4__step">打通跨端同步，账号在不同设备上认得出你的收藏。</span>
            </li>
            <li>
              <span class="home-v4__v yb-mono">V4</span>
              <span class="home-v4__step">标签索引与快速通道改版，一级标签压到 42 个，入口更集中。</span>
            </li>
          </ol>
        </div>

        <figure class="home-v4__figure">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="屏幕上的赛程表格与标签栏局部，数据密度高，带刷新状态标记" loading="lazy" decoding="async">
          <figcaption class="home-v4__cap yb-mono">赛程与标签同屏 · 刷新状态可见</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="home-return" id="returning" aria-labelledby="return-title">
    <div class="yb-container">
      <div class="home-return__grid">
        <figure class="home-return__figure">
          <img src="{zhanqunpic:h:720w:720}" width="720" height="720" alt="平板与手机并排显示赛程卡片和收藏标签，画面中不出现个人信息" loading="lazy" decoding="async">
        </figure>

        <div class="home-return__body">
          <p class="yb-kicker">回访路径</p>
          <h2 id="return-title" class="home-h2">换台设备接着看，筛选条件不用重建</h2>
          <p class="home-return__lead">注册用户在不同设备登录同一账号，栏目收藏和最近浏览会一并跟过来。想拿近几年数据比对，按赛季、联赛、球队、标签四个条件组合着筛，把本赛季和往季摆在一起，球队之间的起落直接看得见。</p>

          <ul class="home-return__list">
            <li>
              <span class="home-return__n yb-mono">01</span>
              <span>账号跨端同步，收藏与浏览轨迹跟着走。</span>
            </li>
            <li>
              <span class="home-return__n yb-mono">02</span>
              <span>四类条件组合筛选，赛季之间横向对照。</span>
            </li>
            <li>
              <span class="home-return__n yb-mono">03</span>
              <span>最多固定 20 个赛事或标签，顺序随手调整。</span>
            </li>
          </ul>

          <a class="yb-btn yb-btn--yellow" href="/faq/">查看操作说明</a>
        </div>
      </div>
    </div>
  </section>

  <section class="home-index" id="directory" aria-labelledby="directory-title">
    <div class="yb-container">
      <p class="yb-kicker yb-kicker--ink">内容分区</p>
      <h2 id="directory-title" class="home-h2 home-h2--ink">从哪一页进，看你要做什么</h2>

      <ul class="home-index__list">
        <li class="home-index__item">
          <a href="/catalog/">
            <span class="home-index__num yb-mono">01</span>
            <span class="home-index__name">赛事标签索引</span>
            <span class="home-index__desc">找比赛、切视图、比对记录，都从这一页起步。</span>
            <span class="home-index__go" aria-hidden="true">→</span>
          </a>
        </li>
        <li class="home-index__item">
          <a href="/topics/">
            <span class="home-index__num yb-mono">02</span>
            <span class="home-index__name">赛场观察</span>
            <span class="home-index__desc">阶段小结、杯赛路径和判罚场次解读，每周更新。</span>
            <span class="home-index__go" aria-hidden="true">→</span>
          </a>
        </li>
        <li class="home-index__item">
          <a href="/faq/">
            <span class="home-index__num yb-mono">03</span>
            <span class="home-index__name">使用问答</span>
            <span class="home-index__desc">登录、收藏、苹果设备上的操作问题，逐条给答案。</span>
            <span class="home-index__go" aria-hidden="true">→</span>
          </a>
        </li>
        <li class="home-index__item">
          <a href="/about/">
            <span class="home-index__num yb-mono">04</span>
            <span class="home-index__name">品牌沿革</span>
            <span class="home-index__desc">十八人团队怎么分工，数据编辑每天在做什么。</span>
            <span class="home-index__go" aria-hidden="true">→</span>
          </a>
        </li>
        <li class="home-index__item">
          <a href="/connect/">
            <span class="home-index__num yb-mono">05</span>
            <span class="home-index__name">联系通道</span>
            <span class="home-index__desc">赛事合作、数据反馈与客服，工作日 9:00-18:00 响应。</span>
            <span class="home-index__go" aria-hidden="true">→</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

</main>

.page-home {
  background: var(--night);
  color: var(--score);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-home a {
  color: inherit;
}

.page-home .home-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 10px 0 0;
}

.page-home .home-h2--ink {
  color: var(--ink);
}

.page-home :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--warn);
  outline-offset: -2px;
}

/* ---------- 首屏 ---------- */
.page-home .home-open {
  padding: 26px 0 52px;
  background-color: var(--night);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(245, 241, 230, .055) 0 1px,
    transparent 1px 92px
  );
  border-bottom: 2px solid var(--line-dark);
}

.page-home .home-context {
  margin: 0 0 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--sage);
}

.page-home .home-context__sep {
  display: inline-block;
  width: 22px;
  height: 2px;
  margin: 0 10px 3px;
  background: var(--ref);
  vertical-align: middle;
}

.page-home .home-open__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.page-home .home-open__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 9.5vw, 78px);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 16px 0 0;
}

.page-home .home-open__intro {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(245, 241, 230, .82);
}

.page-home .home-dir {
  margin-top: 38px;
  border-top: 2px solid var(--line-dark);
}

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

.page-home .home-dir__item {
  border-bottom: 1px solid var(--line-dark);
}

.page-home .home-dir__link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num desc";
  column-gap: 14px;
  row-gap: 3px;
  padding: 14px 8px 14px 0;
  text-decoration: none;
  transition: background-color .16s ease, padding-left .16s ease, box-shadow .16s ease;
}

.page-home .home-dir__num {
  grid-area: num;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--sage);
  padding-top: 3px;
}

.page-home .home-dir__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.page-home .home-dir__desc {
  grid-area: desc;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 241, 230, .68);
}

.page-home .home-dir__link:hover,
.page-home .home-dir__link:focus-visible {
  background: rgba(201, 60, 54, .16);
  box-shadow: inset 3px 0 0 var(--ref);
  padding-left: 12px;
}

.page-home .home-dir__link:hover .home-dir__num,
.page-home .home-dir__link:focus-visible .home-dir__num {
  color: var(--warn);
}

.page-home .home-open__figure {
  position: relative;
  margin: 0;
  border: 2px solid var(--score);
  box-shadow: 10px 10px 0 var(--indigo);
  background: var(--pitch);
}

.page-home .home-open__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.page-home .home-open__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 12px;
  background: var(--night);
  border-top: 2px solid var(--score);
  border-right: 2px solid var(--score);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--warn);
}

.page-home .home-open__readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}

.page-home .home-open__readout > div {
  background: var(--night);
  padding: 10px 8px 11px;
}

.page-home .home-open__readout dt {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--sage);
}

.page-home .home-open__readout dd {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--warn);
}

/* ---------- 三条索引主线 ---------- */
.page-home .home-lanes {
  padding: 44px 0 48px;
  background: var(--pitch);
  border-bottom: 2px solid var(--line-dark);
}

.page-home .home-lanes__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 26px;
}

.page-home .home-lane {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 18px 22px;
  border: 2px solid rgba(245, 241, 230, .26);
  background: rgba(14, 27, 42, .86);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.page-home .home-lane:hover,
.page-home .home-lane:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ref);
  border-color: var(--score);
}

.page-home .home-lane__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--warn);
}

.page-home .home-lane__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sage);
}

.page-home .home-lane__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 4px;
}

.page-home .home-lane__desc {
  font-size: 14px;
  line-height: 1.72;
  color: rgba(245, 241, 230, .76);
}

/* ---------- 红黄牌卡片带 ---------- */
.page-home .home-cards {
  padding: 52px 0 44px;
  background: var(--night);
}

.page-home .home-cards__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-home .home-cards__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .7);
}

.page-home .home-cards__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 84%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 20px 22px;
  margin: 26px -20px 0;
}

.page-home .home-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(245, 241, 230, .3);
  background: linear-gradient(180deg, rgba(59, 47, 94, .45), rgba(14, 27, 42, .94));
  box-shadow: 6px 6px 0 rgba(59, 47, 94, .55);
}

.page-home .home-card--lead {
  padding: 0;
}

.page-home .home-card--lead img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 168px;
  object-fit: cover;
  border-bottom: 2px solid rgba(245, 241, 230, .3);
}

.page-home .home-card__body {
  padding: 17px 18px 18px;
}

.page-home .home-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 12px 0 0;
}

.page-home .home-card__text {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(245, 241, 230, .76);
}

.page-home .home-card__foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 241, 230, .16);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--sage);
}

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

/* ---------- V4 通道 ---------- */
.page-home .home-v4 {
  background: var(--score);
  color: var(--ink);
  padding: 52px 0;
  border-top: 8px solid var(--ink);
}

.page-home .home-v4__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}

.page-home .home-v4__lead {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-home .home-v4__steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-home .home-v4__steps li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-light);
}

.page-home .home-v4__v {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ref);
}

.page-home .home-v4__step {
  font-size: 14.5px;
  line-height: 1.7;
}

.page-home .home-v4__figure {
  margin: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  background: var(--pitch);
}

.page-home .home-v4__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .home-v4__cap {
  display: block;
  padding: 9px 12px;
  background: var(--night);
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--warn);
}

/* ---------- 回访与收藏 ---------- */
.page-home .home-return {
  background: var(--pitch);
  padding: 52px 0 56px;
}

.page-home .home-return__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.page-home .home-return__figure {
  margin: 0;
  border: 2px solid var(--score);
  box-shadow: 8px 8px 0 rgba(201, 60, 54, .75);
  background: var(--night);
}

.page-home .home-return__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page-home .home-return__lead {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(245, 241, 230, .8);
}

.page-home .home-return__list {
  list-style: none;
  margin: 24px 0 26px;
  padding: 0;
}

.page-home .home-return__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line-dark);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-home .home-return__list li:last-child {
  border-bottom: 1px solid var(--line-dark);
}

.page-home .home-return__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--grass);
}

/* ---------- 内容分区目录 ---------- */
.page-home .home-index {
  background: var(--score);
  color: var(--ink);
  padding: 52px 0 64px;
}

.page-home .home-index__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-home .home-index__item {
  border-bottom: 1px solid var(--line-light);
}

.page-home .home-index__item a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num desc";
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 6px 16px 0;
  text-decoration: none;
  transition: background-color .15s ease, padding-left .15s ease, box-shadow .15s ease;
}

.page-home .home-index__num {
  grid-area: num;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ref);
  padding-top: 4px;
}

.page-home .home-index__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.page-home .home-index__desc {
  grid-area: desc;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.page-home .home-index__go {
  display: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ref);
}

.page-home .home-index__item a:hover,
.page-home .home-index__item a:focus-visible {
  background: rgba(201, 60, 54, .1);
  box-shadow: inset 4px 0 0 var(--ref);
  padding-left: 12px;
}

/* ---------- 断点 ---------- */
@media (min-width: 760px) {
  .page-home .home-lanes__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-home .home-cards__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
  }

  .page-home .home-cards__track {
    grid-auto-columns: 320px;
    padding: 8px 24px 24px;
    margin: 28px -24px 0;
  }

  .page-home .home-index__item a {
    grid-template-columns: 64px 240px minmax(0, 1fr) 28px;
    grid-template-areas: "num name desc go";
    align-items: center;
    column-gap: 20px;
    padding: 18px 10px 18px 0;
  }

  .page-home .home-index__num {
    align-self: center;
    padding-top: 0;
  }

  .page-home .home-index__go {
    display: block;
  }
}

@media (min-width: 980px) {
  .page-home .home-open {
    padding: 36px 0 88px;
  }

  .page-home .home-open__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }

  .page-home .home-open__lead {
    grid-column: 1 / span 7;
  }

  .page-home .home-open__aside {
    grid-column: 9 / span 4;
    margin-top: 10px;
  }

  .page-home .home-open__intro {
    font-size: 17px;
  }

  .page-home .home-lanes {
    padding: 68px 0 76px;
  }

  .page-home .home-cards {
    padding: 76px 0 64px;
  }

  .page-home .home-v4 {
    padding: 88px 0;
  }

  .page-home .home-v4__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-home .home-return {
    padding: 84px 0 92px;
  }

  .page-home .home-return__grid {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    gap: 56px;
  }

  .page-home .home-index {
    padding: 84px 0 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-dir__link,
  .page-home .home-lane,
  .page-home .home-index__item a {
    transition: none;
  }

  .page-home .home-lane:hover,
  .page-home .home-lane:focus-visible {
    transform: none;
  }

  .page-home .home-cards__track {
    scroll-behavior: auto;
  }
}