.page-home {
  --home-cut: 58px;
  --home-hero-top: clamp(2.4rem, 7vw, 5rem);
  background: var(--night);
  color: var(--snow);
}

/* ---------- 首屏斜切拼贴 ---------- */
.page-home .hero-cut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--home-hero-top) clamp(2.2rem, 6vw, 4.2rem);
  background: var(--night);
}

.page-home .hero-cut__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.page-home .hero-cut__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 10% 6%, rgba(47, 211, 181, 0.18), transparent 62%),
    radial-gradient(90% 80% at 96% 92%, rgba(255, 122, 89, 0.14), transparent 58%),
    linear-gradient(112deg, rgba(10, 20, 40, 0.97) 0%, rgba(10, 20, 40, 0.86) 52%, rgba(10, 20, 40, 0.95) 100%);
}

.page-home .hero-cut__mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(34, 55, 92, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(34, 55, 92, 0.6) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
}

.page-home .hero-cut__inner {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  align-items: start;
}

.page-home .hero-cut__lead .display-title {
  margin-block: 0.6rem 0.9rem;
}

.page-home .hero-cut__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
}

.page-home .hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.75rem 1rem;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.page-home .hero-stats__item {
  display: grid;
  gap: 0.18rem;
}

.page-home .hero-stats dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .hero-stats dd {
  margin: 0;
  font-size: 13px;
  color: var(--mist);
  line-height: 1.5;
}

.page-home .hero-stats .stat-figure {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  margin-right: 0.2rem;
}

/* ---------- 浮动数据卡 ---------- */
.page-home .probe-card {
  position: relative;
  padding: clamp(1rem, 2.6vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(16, 31, 60, 0.97), rgba(10, 20, 40, 0.94));
  box-shadow: 0 26px 60px rgba(4, 10, 22, 0.55);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}

.page-home .probe-card:hover,
.page-home .probe-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--turquoise);
}

.page-home .probe-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.page-home .probe-card__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .probe-card__title {
  margin: 0.7rem 0 0.35rem;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.page-home .probe-card__title .num {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  vertical-align: -0.05em;
}

.page-home .probe-card__hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mist);
}

.page-home .probe-card__heat {
  display: block;
  width: 100%;
  height: auto;
  max-height: 232px;
  object-fit: cover;
  margin-block: 0.85rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.page-home .probe-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.page-home .probe-rows__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem 0.7rem;
  padding-block: 0.6rem;
  border-top: 1px solid rgba(34, 55, 92, 0.85);
}

.page-home .probe-rows__value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--snow);
  letter-spacing: 0.02em;
}

.page-home .probe-rows__value .num {
  color: var(--gold);
}

.page-home .probe-rows__note {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
}

.page-home .probe-card__link {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--turquoise);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 211, 181, 0.45);
  padding-bottom: 0.15rem;
}

.page-home .probe-card__link:hover {
  border-bottom-color: var(--turquoise);
}

@media (min-width: 900px) {
  .page-home .hero-cut__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(1.6rem, 3vw, 2.8rem);
  }

  .page-home .probe-card {
    clip-path: polygon(var(--home-cut) 0, 100% 0, 100% 100%, 0 100%);
    padding-left: calc(var(--home-cut) + 1.1rem);
  }

  .page-home .probe-rows__row {
    grid-template-columns: auto minmax(96px, auto) minmax(0, 1fr);
  }

  .page-home .probe-rows__note {
    grid-column: 3;
  }
}

/* ---------- 纵向栏目索引 ---------- */
.page-home .index-section {
  background: linear-gradient(180deg, var(--night) 0%, #08101f 100%);
}

.page-home .index-section__head {
  max-width: 46rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.page-home .index-rail {
  display: grid;
  gap: 0.5rem;
}

.page-home .index-rail__item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 0.85rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  color: var(--snow);
  text-decoration: none;
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-home .index-rail__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--turquoise);
}

.page-home .index-rail__name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.page-home .index-rail__scene {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mist);
}

.page-home .index-rail__go {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}

.page-home .index-rail__item:hover {
  border-color: var(--turquoise);
  background: rgba(47, 211, 181, 0.07);
}

.page-home .index-rail__item:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 2px;
}

.page-home .index-rail__item[aria-current="page"] {
  border-color: rgba(242, 193, 78, 0.6);
  background: rgba(242, 193, 78, 0.08);
}

.page-home .index-rail__item[aria-current="page"] .index-rail__no,
.page-home .index-rail__item[aria-current="page"] .index-rail__go {
  color: var(--gold);
}

@media (min-width: 860px) {
  .page-home .index-rail__item {
    grid-template-columns: 3.4rem minmax(0, 13rem) minmax(0, 1fr) auto;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 0.9rem 1.5rem;
  }

  .page-home .index-rail__scene {
    grid-column: 3;
  }

  .page-home .index-rail__item:hover {
    transform: translateX(5px);
  }
}

/* ---------- 横向收藏对照带 ---------- */
.page-home .compare {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.4rem, 6vw, 4rem);
  border-block: 1px solid var(--line);
  background: #0b1730;
}

.page-home .compare__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.page-home .compare::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.94), rgba(10, 20, 40, 0.72) 46%, rgba(10, 20, 40, 0.96));
}

.page-home .compare__head {
  max-width: 44rem;
}

.page-home .compare__lede {
  margin-top: 0.6rem;
  max-width: 38rem;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-home .compare__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(236px, 82%);
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1.2rem max(1rem, calc((100vw - 1180px) / 2)) 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--turquoise) transparent;
  overscroll-behavior-x: contain;
}

.page-home .compare__track:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: -3px;
  border-radius: var(--radius-card);
}

.page-home .compare__track::-webkit-scrollbar {
  height: 6px;
}

.page-home .compare__track::-webkit-scrollbar-thumb {
  background: rgba(47, 211, 181, 0.5);
  border-radius: 999px;
}

.page-home .match-card {
  scroll-snap-align: start;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(16, 31, 60, 0.96), rgba(10, 20, 40, 0.96));
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}

.page-home .match-card:hover {
  border-color: var(--coral);
  transform: translateY(-3px);
}

.page-home .match-card__teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.page-home .match-card__teams > span:last-child {
  text-align: right;
}

.page-home .match-card__score {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.page-home .match-card__heat {
  display: block;
  height: 40px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, var(--turf) 0%, #2a6b57 36%, var(--gold) 72%, var(--coral) 100%);
  opacity: 0.9;
}

.page-home .match-card__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
}

.page-home .compare__foot {
  margin-top: 1.1rem;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--mist);
}

@media (min-width: 720px) {
  .page-home .compare__track {
    grid-auto-columns: 306px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.6%, #000 98.4%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.6%, #000 98.4%, transparent 100%);
  }
}

/* ---------- 版本摘要条 ---------- */
.page-home .version-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.9rem, 5vw, 3rem);
  background: var(--panel);
}

.page-home .version-strip__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.page-home .version-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(16, 31, 60, 0.97) 18%, rgba(10, 20, 40, 0.78) 100%);
}

.page-home .version-strip__inner {
  display: grid;
  gap: 1.2rem;
  align-items: center;
}

.page-home .version-strip__badge {
  display: grid;
  gap: 0.2rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
}

.page-home .version-strip__label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .version-strip__no {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.page-home .version-strip__count {
  font-size: 12px;
  color: var(--mist);
}

.page-home .version-strip__count .num {
  font-family: var(--font-mono);
  color: var(--snow);
}

.page-home .version-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.page-home .version-strip__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--snow);
}

.page-home .version-strip__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--turquoise);
}

@media (min-width: 900px) {
  .page-home .version-strip__inner {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

/* ---------- 服务与联络 ---------- */
.page-home .contact-strip {
  background: linear-gradient(180deg, var(--night) 0%, #07101e 100%);
}

.page-home .contact-strip__inner {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.3rem, 3.2vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(255, 122, 89, 0.15), transparent 58%),
    var(--surface-soft);
}

.page-home .contact-strip__title {
  margin: 0.35rem 0 0.5rem;
  font-size: clamp(1.22rem, 2.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.page-home .contact-strip__text {
  margin: 0;
  max-width: 40rem;
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--mist);
}

.page-home .contact-strip__mail {
  font-family: var(--font-mono);
  font-size: 0.94rem;
  color: var(--turquoise);
  word-break: break-all;
}

.page-home .contact-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (min-width: 820px) {
  .page-home .contact-strip__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}


<main id="main-content" class="page-home">
  <section class="hero-cut">
    <img class="hero-cut__bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间高原体育场看台与灯光的抽象氛围图">
    <span class="hero-cut__veil" aria-hidden="true"></span>
    <span class="hero-cut__mesh" aria-hidden="true"></span>
    <div class="shell hero-cut__inner">
      <div class="hero-cut__lead">
        <p class="eyebrow">中文首页 · 数据面板 V3.1</p>
        <h1 class="display-title display-title--lg">赛前十分钟，<br>把场上攻防看得清清楚楚</h1>
        <p class="lede">你打开 5体育看台，最先要的往往不是长篇分析，而是一场球在哪个时间段进了、丢了、热在哪里。选好区间，六场比赛置顶并排，一支球队的攻防习惯就有了形状。</p>
        <div class="hero-cut__actions">
          <a class="btn btn--accent" href="/projects/">打开数据面板</a>
          <a class="btn btn--quiet" href="/tutorial/">先看怎么查</a>
        </div>
        <dl class="hero-stats">
          <div class="hero-stats__item">
            <dt>已整理赛事</dt>
            <dd><span class="num stat-figure">42,000</span> 场</dd>
          </div>
          <div class="hero-stats__item">
            <dt>联赛与杯赛</dt>
            <dd><span class="num stat-figure">38</span> 个</dd>
          </div>
          <div class="hero-stats__item">
            <dt>区间筛选响应</dt>
            <dd><span class="num stat-figure">1.2</span> 秒</dd>
          </div>
        </dl>
      </div>

      <article class="probe-card" aria-labelledby="probe-title">
        <div class="probe-card__head">
          <span class="chip chip--coral">区间筛选</span>
          <span class="probe-card__meta">城市联赛 · 第 6 轮</span>
        </div>
        <h2 class="probe-card__title" id="probe-title">北岭联 1–2 河湾竞技</h2>
        <p class="probe-card__hint">切换粒度，同一场比赛的攻防读法随之改变。</p>
        <img class="probe-card__heat" src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="球场分区与进失球热区色块示意图，暖金色标出密度较高的区域">
        <ul class="probe-rows">
          <li class="probe-rows__row">
            <span class="chip chip--gold">15 分钟区间</span>
            <span class="probe-rows__value">主 <span class="num">1</span> / 客 <span class="num">2</span></span>
            <span class="probe-rows__note">失球集中在 60–75 分钟</span>
          </li>
          <li class="probe-rows__row">
            <span class="chip">半场区间</span>
            <span class="probe-rows__value">上 <span class="num">1</span> / 下 <span class="num">2</span></span>
            <span class="probe-rows__note">下半场节奏明显加快</span>
          </li>
          <li class="probe-rows__row">
            <span class="chip">全场区间</span>
            <span class="probe-rows__value">合计 <span class="num">3</span> 球</span>
            <span class="probe-rows__note">禁区热区偏右路</span>
          </li>
        </ul>
        <a class="probe-card__link" href="/projects/">查看完整分布</a>
      </article>
    </div>
  </section>

  <section class="section index-section" id="entry-index">
    <div class="shell">
      <div class="index-section__head" data-reveal>
        <p class="eyebrow">按目的选择栏目</p>
        <h2 class="display-title">六个入口，按你眼下要做的事排开</h2>
        <p class="lede">不需要记住栏目名称，先想清楚这一次是要看数据、查操作，还是找人问一句。顺着对应的编号点进去，路径不超过两级。</p>
      </div>
      <nav class="index-rail" aria-label="栏目索引">
        <a class="index-rail__item" href="/" aria-current="page">
          <span class="index-rail__no">01</span>
          <span class="index-rail__name">首页</span>
          <span class="index-rail__scene">想先看看这个站点整体能提供什么，适合第一次来的人。</span>
          <span class="index-rail__go">当前</span>
        </a>
        <a class="index-rail__item" href="/culture/">
          <span class="index-rail__no">02</span>
          <span class="index-rail__name">看台文化</span>
          <span class="index-rail__scene">关心赛事资料由谁整理、校对怎么走，以及改版后栏目为什么这样分。</span>
          <span class="index-rail__go">了解</span>
        </a>
        <a class="index-rail__item" href="/projects/">
          <span class="index-rail__no">03</span>
          <span class="index-rail__name">数据工具台</span>
          <span class="index-rail__scene">要按区间看进失球、把多场比赛并排放在一起比对，或把结果导成图。</span>
          <span class="index-rail__go">开始查</span>
        </a>
        <a class="index-rail__item" href="/press/">
          <span class="index-rail__no">04</span>
          <span class="index-rail__name">版本动态</span>
          <span class="index-rail__scene">想确认这一版改了什么，原来的入口挪去了哪里，查询习惯要不要调整。</span>
          <span class="index-rail__go">查版本</span>
        </a>
        <a class="index-rail__item" href="/tutorial/">
          <span class="index-rail__no">05</span>
          <span class="index-rail__name">查询教程</span>
          <span class="index-rail__scene">操作卡住了：区间不知选哪个、收藏没出来、搜不到目标赛事。</span>
          <span class="index-rail__go">照做</span>
        </a>
        <a class="index-rail__item" href="/find-us/">
          <span class="index-rail__no">06</span>
          <span class="index-rail__name">找到我们</span>
          <span class="index-rail__scene">问题需要人工确认，或要谈媒体、组委会的内容合作。</span>
          <span class="index-rail__go">联系</span>
        </a>
      </nav>
    </div>
  </section>

  <section class="compare" id="compare-band">
    <img class="compare__bg" src="{zhanqunpic:h:400w:1200}" width="1200" height="400" alt="看台灯光拉出长轨迹的抽象纹理" loading="lazy" decoding="async">
    <div class="shell compare__head" data-reveal>
      <p class="eyebrow">赛事收藏对照</p>
      <h2 class="display-title">六场并排，横向拉一遍就够</h2>
      <p class="compare__lede">把这一轮要看的比赛先收藏起来，最多置顶六场。比分、区间与热区在同一条横轴上排开，队内会议投屏时不用来回切页。</p>
    </div>
    <div class="compare__track" tabindex="0" role="group" aria-label="收藏的六场赛事，可左右滚动查看">
      <article class="match-card">
        <span class="chip chip--coral">第 6 轮</span>
        <p class="match-card__teams"><span>北岭联</span><span class="match-card__score num">1–2</span><span>河湾竞技</span></p>
        <span class="match-card__heat" aria-hidden="true"></span>
        <p class="match-card__note">下半场连丢两球，右路两次被穿透</p>
      </article>
      <article class="match-card">
        <span class="chip">第 6 轮</span>
        <p class="match-card__teams"><span>西岭青年</span><span class="match-card__score num">3–0</span><span>南湖工人</span></p>
        <span class="match-card__heat" aria-hidden="true"></span>
        <p class="match-card__note">半场即建立优势，控球稳定</p>
      </article>
      <article class="match-card">
        <span class="chip chip--gold">第 7 轮</span>
        <p class="match-card__teams"><span>白杨街道</span><span class="match-card__score num">2–2</span><span>东川联</span></p>
        <span class="match-card__heat" aria-hidden="true"></span>
        <p class="match-card__note">四球全部出现在下半场</p>
      </article>
      <article class="match-card">
        <span class="chip">第 7 轮</span>
        <p class="match-card__teams"><span>柳荫竞技</span><span class="match-card__score num">0–1</span><span>河湾竞技</span></p>
        <span class="match-card__heat" aria-hidden="true"></span>
        <p class="match-card__note">唯一进球来自 78 分钟定位球</p>
      </article>
      <article class="match-card">
        <span class="chip chip--coral">第 8 轮</span>
        <p class="match-card__teams"><span>北岭联</span><span class="match-card__score num">2–0</span><span>南湖工人</span></p>
        <span class="match-card__heat" aria-hidden="true"></span>
        <p class="match-card__note">两球均在上半场前 30 分钟</p>
      </article>
      <article class="match-card">
        <span class="chip">第 8 轮</span>
        <p class="match-card__teams"><span>东川联</span><span class="match-card__score num">4–1</span><span>西岭青年</span></p>
        <span class="match-card__heat" aria-hidden="true"></span>
        <p class="match-card__note">禁区内四次射正全部转化</p>
      </article>
    </div>
    <p class="shell compare__foot">收藏在不同栏目之间保持一致，切页回来仍是这一组；结果可导出为长图，赛后复盘直接贴进群聊。</p>
  </section>

  <section class="version-strip" id="version-digest">
    <img class="version-strip__bg" src="{zhanqunpic:h:600w:1440}" width="1440" height="600" alt="球场草皮纹理上叠加半透明数据网格的底图" loading="lazy" decoding="async">
    <div class="shell version-strip__inner">
      <div class="version-strip__badge">
        <span class="version-strip__label">当前公开版本</span>
        <span class="version-strip__no">V3.1</span>
        <span class="version-strip__count">累计发布 <span class="num">14</span> 个版本</span>
      </div>
      <ul class="version-strip__list">
        <li>一级栏目由 11 类收敛为 6 类，任一入口两级可达</li>
        <li>进失球分布支持 15 分钟、半场、全场三档粒度切换</li>
        <li>收藏对照最多同时置顶 6 场，跨栏目保持同一组</li>
      </ul>
      <a class="btn btn--ghost" href="/press/">读完整变更记录</a>
    </div>
  </section>

  <section class="section section--tight contact-strip" id="reach-us">
    <div class="shell">
      <div class="contact-strip__inner">
        <div>
          <p class="eyebrow">遇到具体问题</p>
          <h2 class="contact-strip__title">一封邮件，把情况说清楚</h2>
          <p class="contact-strip__text">客服邮箱 <span class="contact-strip__mail">email@bet5-arena.com.cn</span>，工作日 9:30-18:30 在线。信里附上截图和版本号，回复会更快对上你的情况。指定服务地区为西藏。</p>
        </div>
        <div class="contact-strip__actions">
          <a class="btn btn--accent" href="/find-us/">联系方式与时段</a>
          <a class="btn btn--quiet" href="/usage/">引用与标注</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-cut: 58px;
  --home-hero-pad: clamp(2.6rem, 7vw, 5rem);
}

.page-home .hero-cut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--home-hero-pad) clamp(2.4rem, 6vw, 4.2rem);
  background: var(--night);
}

.page-home .hero-cut__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.page-home .hero-cut__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(47, 211, 181, 0.16), transparent 60%),
    radial-gradient(90% 90% at 92% 88%, rgba(255, 122, 89, 0.12), transparent 58%),
    linear-gradient(112deg, rgba(10, 20, 40, 0.97) 0%, rgba(10, 20, 40, 0.86) 52%, rgba(10, 20, 40, 0.95) 100%);
}

.page-home .hero-cut__mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(34, 55, 92, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(34, 55, 92, 0.55) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.12));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.12));
}

.page-home .hero-cut__inner {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  align-items: start;
}

.page-home .hero-cut__lead .display-title {
  margin-block: 0.6rem 0.9rem;
}

.page-home .hero-cut__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.page-home .hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.85rem 1rem;
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.page-home .hero-stats__item {
  display: grid;
  gap: 0.2rem;
}

.page-home .hero-stats dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .hero-stats dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}

.page-home .hero-stats .stat-figure {
  display: inline-block;
  margin-right: 0.2rem;
  font-family: var(--font-mono);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gold);
}

.page-home .probe-card {
  position: relative;
  padding: clamp(1rem, 2.6vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(16, 31, 60, 0.97), rgba(10, 20, 40, 0.94));
  box-shadow: 0 26px 60px rgba(4, 10, 22, 0.55);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}

.page-home .probe-card:hover,
.page-home .probe-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--turquoise);
}

.page-home .probe-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.page-home .probe-card__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .probe-card__title {
  margin: 0.7rem 0 0.35rem;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--snow);
}

.page-home .probe-card__hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mist);
}

.page-home .probe-card__heat {
  display: block;
  width: 100%;
  height: auto;
  max-height: 230px;
  margin-block: 0.9rem 0.5rem;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.page-home .probe-rows {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .probe-rows__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem 0.7rem;
  padding-block: 0.6rem;
  border-top: 1px solid rgba(34, 55, 92, 0.85);
}

.page-home .probe-rows__value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--snow);
}

.page-home .probe-rows__value .num {
  color: var(--gold);
}

.page-home .probe-rows__note {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
}

.page-home .probe-card__link {
  display: inline-block;
  margin-top: 0.95rem;
  padding-bottom: 0.15rem;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--turquoise);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 211, 181, 0.45);
}

.page-home .probe-card__link:hover,
.page-home .probe-card__link:focus-visible {
  border-bottom-color: var(--turquoise);
}

.page-home .probe-card__link:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .page-home .hero-cut__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(1.6rem, 3vw, 2.8rem);
  }

  .page-home .probe-card {
    clip-path: polygon(var(--home-cut) 0, 100% 0, 100% 100%, 0 100%);
    padding-left: calc(var(--home-cut) + 1.1rem);
  }

  .page-home .probe-rows__row {
    grid-template-columns: auto minmax(96px, auto) minmax(0, 1fr);
  }

  .page-home .probe-rows__note {
    grid-column: 3;
  }
}

.page-home .index-section {
  background: linear-gradient(180deg, var(--night) 0%, #08101f 100%);
}

.page-home .index-section__head {
  max-width: 46rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.page-home .index-rail {
  display: grid;
  gap: 0.5rem;
}

.page-home .index-rail__item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 0.85rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  color: var(--snow);
  text-decoration: none;
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-home .index-rail__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--turquoise);
}

.page-home .index-rail__name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.page-home .index-rail__scene {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mist);
}

.page-home .index-rail__go {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mist);
}

.page-home .index-rail__item:hover {
  border-color: var(--turquoise);
  background: rgba(47, 211, 181, 0.07);
}

.page-home .index-rail__item:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 2px;
}

.page-home .index-rail__item[aria-current="page"] {
  border-color: rgba(242, 193, 78, 0.6);
  background: rgba(242, 193, 78, 0.08);
}

.page-home .index-rail__item[aria-current="page"] .index-rail__no,
.page-home .index-rail__item[aria-current="page"] .index-rail__go {
  color: var(--gold);
}

@media (min-width: 860px) {
  .page-home .index-rail__item {
    grid-template-columns: 3.4rem minmax(0, 13rem) minmax(0, 1fr) auto;
    align-items: center;
    padding: 0.9rem 1.5rem;
    border-radius: var(--radius-pill);
  }

  .page-home .index-rail__scene {
    grid-column: 3;
  }

  .page-home .index-rail__item:hover {
    transform: translateX(5px);
  }
}

.page-home .compare {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.4rem, 6vw, 4rem);
  border-block: 1px solid var(--line);
  background: #0b1730;
}

.page-home .compare__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.page-home .compare::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.94), rgba(10, 20, 40, 0.7) 46%, rgba(10, 20, 40, 0.96));
}

.page-home .compare__head {
  max-width: 44rem;
}

.page-home .compare__lede {
  margin-top: 0.6rem;
  max-width: 38rem;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-home .compare__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(236px, 82%);
  gap: 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 1.2rem max(1rem, calc((100vw - 1180px) / 2)) 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--turquoise) transparent;
}

.page-home .compare__track:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: -3px;
  border-radius: var(--radius-card);
}

.page-home .compare__track::-webkit-scrollbar {
  height: 6px;
}

.page-home .compare__track::-webkit-scrollbar-thumb {
  background: rgba(47, 211, 181, 0.5);
  border-radius: var(--radius-pill);
}

.page-home .match-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(16, 31, 60, 0.96), rgba(10, 20, 40, 0.96));
  scroll-snap-align: start;
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease);
}

.page-home .match-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
}

.page-home .match-card__teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.page-home .match-card__teams > span:last-child {
  text-align: right;
}

.page-home .match-card__score {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.page-home .match-card__heat {
  display: block;
  height: 40px;
  border-radius: 12px;
  opacity: 0.9;
  background: linear-gradient(90deg, var(--turf) 0%, #2a6b57 36%, var(--gold) 72%, var(--coral) 100%);
}

.page-home .match-card__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
}

.page-home .compare__foot {
  margin-top: 1.1rem;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--mist);
}

@media (min-width: 720px) {
  .page-home .compare__track {
    grid-auto-columns: 306px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.6%, #000 98.4%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.6%, #000 98.4%, transparent 100%);
  }
}

.page-home .version-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.9rem, 5vw, 3rem);
  background: var(--panel);
}

.page-home .version-strip__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.page-home .version-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(16, 31, 60, 0.97) 18%, rgba(10, 20, 40, 0.78) 100%);
}

.page-home .version-strip__inner {
  display: grid;
  gap: 1.2rem;
  align-items: center;
}

.page-home .version-strip__badge {
  display: grid;
  gap: 0.2rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
}

.page-home .version-strip__label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .version-strip__no {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.page-home .version-strip__count {
  font-size: 12px;
  color: var(--mist);
}

.page-home .version-strip__count .num {
  font-family: var(--font-mono);
  color: var(--snow);
}

.page-home .version-strip__list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .version-strip__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--snow);
}

.page-home .version-strip__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--turquoise);
}

@media (min-width: 900px) {
  .page-home .version-strip__inner {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

.page-home .contact-strip {
  background: linear-gradient(180deg, var(--night) 0%, #07101e 100%);
}

.page-home .contact-strip__inner {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.3rem, 3.2vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(255, 122, 89, 0.15), transparent 58%),
    var(--surface-soft);
}

.page-home .contact-strip__title {
  margin: 0.35rem 0 0.5rem;
  font-size: clamp(1.22rem, 2.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.page-home .contact-strip__text {
  margin: 0;
  max-width: 40rem;
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--mist);
}

.page-home .contact-strip__mail {
  font-family: var(--font-mono);
  font-size: 0.94rem;
  color: var(--turquoise);
  word-break: break-all;
}

.page-home .contact-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (min-width: 820px) {
  .page-home .contact-strip__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}