.page-home {
  --home-rhythm: clamp(44px, 7vw, 88px);
  overflow-x: hidden;
}

/* ---------- 面包屑 ---------- */
.page-home .hero .crumbs {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-home .hero .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .hero .crumbs li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.page-home .hero .crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line);
}

.page-home .hero .crumbs a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .hero .crumbs a:hover,
.page-home .hero .crumbs a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(22px, 3.6vw, 38px) clamp(40px, 6vw, 78px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 96% at 90% 4%, rgba(53, 242, 208, 0.13), transparent 58%),
    radial-gradient(96% 78% at 4% 94%, rgba(77, 163, 255, 0.16), transparent 62%),
    var(--ink-900);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 14px);
  opacity: 0.5;
  pointer-events: none;
}

.page-home .hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 46px);
  align-items: start;
}

.page-home .hero-title {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--fog);
  text-wrap: balance;
}

.page-home .hero-lead {
  margin-top: clamp(16px, 2.2vw, 22px);
  max-width: 56ch;
  overflow-wrap: anywhere;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.8vw, 28px);
}

.page-home .hero-anchor {
  margin-top: clamp(26px, 4vw, 42px);
  padding-top: clamp(16px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
}

.page-home .anchor-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--steel);
}

.page-home .anchor-num {
  display: flex;
  align-items: baseline;
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(84px, 17vw, 152px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 48px rgba(53, 242, 208, 0.32);
}

.page-home .anchor-unit {
  font-size: 0.24em;
  margin-left: 0.14em;
  letter-spacing: 0;
  color: var(--fog);
}

.page-home .anchor-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--steel);
}

.page-home .anchor-note .status-dot {
  margin-top: 7px;
  flex: 0 0 auto;
}

.page-home .hero-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--ink-800);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.page-home .hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 540px;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.06);
}

.page-home .hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--silver);
  background: linear-gradient(to top, rgba(6, 18, 31, 0.94), rgba(6, 18, 31, 0));
}

/* ---------- 即时刷新证据带 ---------- */
.page-home .evidence {
  padding-block: clamp(34px, 5vw, 58px);
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}

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

.page-home .evidence-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .evidence-item {
  padding-top: clamp(10px, 1.6vw, 16px);
  border-top: 1px solid var(--line);
}

.page-home .evidence-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
}

.page-home .evidence-unit {
  margin-left: 0.22em;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--cyan);
}

.page-home .evidence-cap {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
}

.page-home .evidence-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

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

.page-home .evidence-caption {
  padding: 10px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--steel);
  border-top: 1px solid var(--line);
  background: rgba(6, 18, 31, 0.72);
}

/* ---------- 阶梯导航 ---------- */
.page-home .stairs-section {
  padding-block: var(--home-rhythm);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(86% 90% at 10% 0%, rgba(33, 26, 69, 0.92), transparent 64%),
    var(--ink-900);
}

.page-home .stairs-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 58ch;
}

.page-home .stairs {
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .stair {
  border: 1px solid var(--line);
  background: rgba(6, 18, 31, 0.62);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.page-home .stair:hover,
.page-home .stair:focus-within {
  border-color: rgba(53, 242, 208, 0.55);
  background: rgba(8, 42, 50, 0.9);
}

.page-home .stair-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
  padding: clamp(14px, 2.2vw, 22px) clamp(14px, 2.4vw, 26px);
  color: inherit;
  text-decoration: none;
}

.page-home .stair-no {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--orange);
  padding-top: 4px;
}

.page-home .stair-body {
  display: block;
  min-width: 0;
}

.page-home .stair-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fog);
}

.page-home .stair-desc {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel);
}

.page-home .stair-scene {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cyan);
  border: 1px solid rgba(53, 242, 208, 0.38);
  background: rgba(53, 242, 208, 0.07);
}

/* ---------- 内容目录样本 ---------- */
.page-home .catalog-section {
  padding-block: var(--home-rhythm);
  border-bottom: 1px solid var(--line);
  background: var(--ink-900);
}

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

.page-home .catalog-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 58ch;
}

.page-home .catalog-list {
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .catalog-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px);
  padding-block: clamp(16px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
}

.page-home .catalog-row:last-child {
  border-bottom: 1px solid var(--line);
}

.page-home .catalog-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
  padding-top: 6px;
}

.page-home .catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-home .catalog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--fog);
}

.page-home .catalog-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-home .catalog-note {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--silver);
  border-left: 3px solid var(--cyan);
  background: rgba(8, 42, 50, 0.6);
}

.page-home .catalog-figure {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-800);
}

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

.page-home .catalog-caption {
  padding: 10px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--steel);
  border-top: 1px solid var(--line);
}

/* ---------- 版本与修复 ---------- */
.page-home .release-section {
  padding-block: var(--home-rhythm);
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}

.page-home .release-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 60ch;
}

.page-home .release-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.2vw, 34px);
  margin-top: clamp(26px, 3.6vw, 40px);
  align-items: start;
}

.page-home .release-cards {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

.page-home .release-card {
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: rgba(6, 18, 31, 0.6);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.page-home .release-card:hover {
  background: rgba(6, 18, 31, 0.82);
}

.page-home .release-card--wine {
  border-left-color: var(--orange);
}

.page-home .release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-home .release-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--fog);
}

.page-home .release-text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-home .release-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 242, 208, 0.5);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .release-link:hover,
.page-home .release-link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.page-home .release-figure {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-900);
}

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

.page-home .release-caption {
  padding: 10px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--steel);
  border-top: 1px solid var(--line);
}

/* ---------- 信任与收束 ---------- */
.page-home .trust-section {
  padding-block: clamp(48px, 8vw, 104px);
  background:
    radial-gradient(76% 120% at 88% 12%, rgba(255, 122, 26, 0.14), transparent 58%),
    radial-gradient(70% 100% at 6% 100%, rgba(53, 242, 208, 0.1), transparent 62%),
    var(--ink-900);
}

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

.page-home .trust-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 58ch;
}

.page-home .trust-lead .mono {
  color: var(--fog);
  overflow-wrap: anywhere;
}

.page-home .trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.8vw, 28px);
}

.page-home .trust-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-home .trust-fact {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  padding-block: clamp(12px, 1.8vw, 18px);
  border-bottom: 1px solid var(--line);
}

.page-home .trust-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--steel);
  padding-top: 2px;
}

.page-home .trust-val {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fog);
}

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

@media (min-width: 900px) {
  .page-home .hero-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2.2vw, 34px);
  }

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

  .page-home .hero-figure {
    grid-column: 8 / span 5;
    align-self: stretch;
  }

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

  .page-home .evidence-inner {
    grid-template-columns: 1.18fr 0.82fr;
  }

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

  .page-home .trust-inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-home .stairs {
    max-width: 1000px;
  }

  .page-home .stair:nth-child(2) {
    margin-left: 5%;
  }

  .page-home .stair:nth-child(3) {
    margin-left: 10%;
  }

  .page-home .stair:nth-child(4) {
    margin-left: 15%;
  }

  .page-home .catalog-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 36px);
  }

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

  .page-home .catalog-figure {
    grid-column: 8 / span 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .stair,
  .page-home .release-card,
  .page-home .release-link,
  .page-home .hero .crumbs a {
    transition: none;
  }
}


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

  <section class="hero" aria-labelledby="hero-title">
    <div class="shell">
      <nav class="crumbs" aria-label="页面位置">
        <ol>
          <li><a href="/">看台首页</a></li>
          <li aria-current="page">数据中枢</li>
        </ol>
      </nav>

      <div class="hero-inner">
        <div class="hero-copy">
          <p class="eyebrow">联赛导航 · 即时刷新</p>
          <h1 id="hero-title" class="hero-title">哨声落下，<br>比分已经翻页</h1>
          <p class="lead hero-lead">奇博看台为球迷和数据查询用户做一件事：让赛程、即时比分、联赛排名和球员表现，在您想看的时候已经就位。足球、篮球、网球和电竞的每一场，都能从赛程节点直接走到完整数据页，不必来回翻找。</p>

          <div class="hero-actions">
            <a class="btn btn-primary" href="/download/">版本与下载</a>
            <a class="btn btn-ghost" href="/help/">遇到查询问题</a>
          </div>

          <div class="hero-anchor">
            <p class="anchor-label">终场后触发排名刷新</p>
            <p class="anchor-num"><span class="anchor-value">3</span><span class="anchor-unit">秒</span></p>
            <p class="anchor-note">
              <span class="status-dot" aria-hidden="true"></span>
              正常网络下 10 秒内看到新位次，前后名次的分差同步更新。
            </p>
          </div>
        </div>

        <figure class="hero-figure">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="低角度广角看台与发光记分牌，抽象比分数字在深色夜空中亮起">
          <figcaption class="hero-caption">看台第一排的记分牌，刷新从不等人</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="evidence" aria-labelledby="evidence-title">
    <div class="shell evidence-inner">
      <div class="evidence-main">
        <p class="eyebrow">看台数据中枢</p>
        <h2 id="evidence-title" class="section-title">刷新快不快，看这几个数</h2>
        <ul class="evidence-list">
          <li class="evidence-item">
            <span class="evidence-num">38<span class="evidence-unit">个</span></span>
            <p class="evidence-cap">联赛与杯赛，覆盖足球、篮球、网球和电竞赛事</p>
          </li>
          <li class="evidence-item">
            <span class="evidence-num">26<span class="evidence-unit">万场</span></span>
            <p class="evidence-cap">赛程中心累计归档的完整比赛数据页</p>
          </li>
          <li class="evidence-item">
            <span class="evidence-num">10<span class="evidence-unit">秒内</span></span>
            <p class="evidence-cap">排名刷新后，正常网络下可见新位次</p>
          </li>
          <li class="evidence-item">
            <span class="evidence-num">2<span class="evidence-unit">次点击</span></span>
            <p class="evidence-cap">手机端从进站到切到想看的那场比分</p>
          </li>
        </ul>
      </div>

      <figure class="evidence-figure">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" loading="lazy" decoding="async" alt="深色背景下数据流与荧光青刷新脉冲交织的抽象图形">
        <figcaption class="evidence-caption">每场结束后即时触发，排名与比分同时到位</figcaption>
      </figure>
    </div>
  </section>

  <section class="stairs-section" aria-labelledby="stairs-title">
    <div class="shell">
      <p class="eyebrow">从这里开始</p>
      <h2 id="stairs-title" class="section-title">四个入口，按您要查的东西排好</h2>
      <p class="lead stairs-lead">像看台一样一级一级往下走：只想看比分的，从第一级就够；要把一场比赛复盘透的，往下走三级。</p>

      <ol class="stairs">
        <li class="stair" data-reveal>
          <a class="stair-link" href="/download/">
            <span class="stair-no">01</span>
            <span class="stair-body">
              <span class="stair-title">赛程中心</span>
              <span class="stair-desc">按联赛和日期找比赛，点开任意一场就是完整数据页，赛程节点与数据页一一对应。</span>
              <span class="stair-scene">适合：今天有哪些比赛、下一轮什么时候开打</span>
            </span>
          </a>
        </li>
        <li class="stair" data-reveal>
          <a class="stair-link" href="/press/">
            <span class="stair-no">02</span>
            <span class="stair-body">
              <span class="stair-title">排名榜</span>
              <span class="stair-desc">每场结束后即时刷新，位次变动与前后名次分差同时呈现，不用隔天再来补看。</span>
              <span class="stair-scene">适合：盯着一支队的升降、算出线形势</span>
            </span>
          </a>
        </li>
        <li class="stair" data-reveal>
          <a class="stair-link" href="/download/">
            <span class="stair-no">03</span>
            <span class="stair-body">
              <span class="stair-title">内容目录</span>
              <span class="stair-desc">按场次列出球队近期战绩、当场球员数据、历史交锋和排名变化，四组内容固定顺序展开。</span>
              <span class="stair-scene">适合：看完比分还想知道赢在哪、谁在状态里</span>
            </span>
          </a>
        </li>
        <li class="stair" data-reveal>
          <a class="stair-link" href="/download/">
            <span class="stair-no">04</span>
            <span class="stair-body">
              <span class="stair-title">手机端测试版</span>
              <span class="stair-desc">在版本中心获取，支持 iOS 13 及以上、Android 9 及以上，覆盖 120 款主流设备。</span>
              <span class="stair-scene">适合：通勤路上、看台上举着手机查</span>
            </span>
          </a>
        </li>
      </ol>
    </div>
  </section>

  <section class="catalog-section" aria-labelledby="catalog-title">
    <div class="shell catalog-inner">
      <div class="catalog-main">
        <p class="eyebrow">内容目录</p>
        <h2 id="catalog-title" class="section-title">一场比赛，四个角度摊开看</h2>
        <p class="lead catalog-lead">点进任意一场比赛，内容按同一套顺序展开。桌面端一屏能读完，手机端上下滑动，也能和桌面版对照着看同一场的细节。</p>

        <ol class="catalog-list">
          <li class="catalog-row">
            <span class="catalog-no">01</span>
            <div class="catalog-body">
              <div class="catalog-head">
                <h3 class="catalog-title">球队近 10 场战绩</h3>
                <span class="tag tag--cyan">走势</span>
              </div>
              <p class="catalog-desc">胜负走势、主客场差异、场均得分或进球放在一起，一眼看出这段时间球队在往上走还是往下掉。</p>
            </div>
          </li>
          <li class="catalog-row">
            <span class="catalog-no">02</span>
            <div class="catalog-body">
              <div class="catalog-head">
                <h3 class="catalog-title">当场球员数据</h3>
                <span class="tag tag--orange">细节</span>
              </div>
              <p class="catalog-desc">出场时间与关键数据按位置分组，首发和替补分开列，谁在场上改变了节奏，翻两行就能看到。</p>
            </div>
          </li>
          <li class="catalog-row">
            <span class="catalog-no">03</span>
            <div class="catalog-body">
              <div class="catalog-head">
                <h3 class="catalog-title">历史交锋</h3>
                <span class="tag tag--amber">对位</span>
              </div>
              <p class="catalog-desc">近几次交手的结果与分差一并列出，主客轮换后的表现差异也保留，赛前判断多了个参照。</p>
            </div>
          </li>
          <li class="catalog-row">
            <span class="catalog-no">04</span>
            <div class="catalog-body">
              <div class="catalog-head">
                <h3 class="catalog-title">排名变化</h3>
                <span class="tag tag--cyan">位次</span>
              </div>
              <p class="catalog-desc">赛前赛后的位次差、与前后一名之间的分差逐项写清，一场冷门带来的连锁影响看得见。</p>
            </div>
          </li>
        </ol>

        <p class="catalog-note">看完数据想回赛程继续翻下一场，页尾的赛程节点直接带您过去，不用重新找。</p>
      </div>

      <figure class="catalog-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="按场次排列的战绩与球员数据信息图，抽象图表与数字并置">
        <figcaption class="catalog-caption">四组内容固定顺序，桌面与手机看到的顺序一致</figcaption>
      </figure>
    </div>
  </section>

  <section class="release-section" aria-labelledby="release-title">
    <div class="shell">
      <p class="eyebrow">版本与修复</p>
      <h2 id="release-title" class="section-title">最近的改动，都落在这三件事上</h2>
      <p class="lead release-lead">每周二、周五发版本说明，赛季高峰每天做一次数据巡检。您反馈的问题，多数在下一批说明里就能看到结果。</p>

      <div class="release-grid">
        <div class="release-cards">
          <article class="release-card" data-reveal>
            <div class="release-head">
              <h3 class="release-title">手机端测试版</h3>
              <span class="tag tag--cyan">新版本</span>
            </div>
            <p class="release-text">比分切换压缩到两次点击，iOS 13 及以上、Android 9 及以上可用，身边常见的 120 款主流设备都做过适配。</p>
            <a class="release-link" href="/download/">查看兼容范围</a>
          </article>

          <article class="release-card release-card--wine" data-reveal>
            <div class="release-head">
              <h3 class="release-title">导航栏目访问异常已处理</h3>
              <span class="tag tag--orange">已修复</span>
            </div>
            <p class="release-text">中国区导航栏目切换时的卡顿与白屏已经处理完，目前栏目切换成功率稳定在 99.6%。再遇到切不动，先按帮助页的排查步骤走一遍。</p>
            <a class="release-link" href="/help/">查看排查步骤</a>
          </article>

          <article class="release-card" data-reveal>
            <div class="release-head">
              <h3 class="release-title">联赛排名临时查询失败</h3>
              <span class="tag tag--wine">已修复</span>
            </div>
            <p class="release-text">排名查询失败已随最近一次更新修好。数据量突增时如果仍然读不出来，页面会给出自动重试提示，不必手动刷新页面。</p>
            <a class="release-link" href="/press/">看更新记录</a>
          </article>
        </div>

        <figure class="release-figure">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" loading="lazy" decoding="async" alt="手持设备的剪影上浮现比分切换界面的抽象画面，无人脸">
          <figcaption class="release-caption">手机端两次点击，从进站到看特定场次</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="trust-section" aria-labelledby="trust-title">
    <div class="shell trust-inner">
      <div class="trust-main">
        <p class="eyebrow">服务与联系</p>
        <h2 id="trust-title" class="section-title">数据看得见，人也找得到</h2>
        <p class="lead trust-lead">客服邮箱 <span class="mono">support@livescore-qibo.com.cn</span>，电话 <span class="mono">400-3366-6537</span>，工作日 9:00-18:00 有专人查看。反馈时附上截图、设备型号、系统版本、栏目名称和发生时间，定位会快很多。</p>

        <div class="trust-actions">
          <a class="btn btn-primary" href="/connect/">联系通道</a>
          <a class="btn btn-ghost" href="/who-we-are/">了解团队</a>
        </div>
      </div>

      <ul class="trust-facts">
        <li class="trust-fact">
          <span class="trust-key">上线时间</span>
          <span class="trust-val">2019 年，已连续运营到第 7 个赛季</span>
        </li>
        <li class="trust-fact">
          <span class="trust-key">团队规模</span>
          <span class="trust-val">32 人，其中数据工程 11 人</span>
        </li>
        <li class="trust-fact">
          <span class="trust-key">用户覆盖</span>
          <span class="trust-val">31 个省级区域，重庆地区用户占比较高</span>
        </li>
        <li class="trust-fact">
          <span class="trust-key">合作生态</span>
          <span class="trust-val">12 家数据服务商、18 个赛事内容伙伴</span>
        </li>
      </ul>
    </div>
  </section>

</main>

.page-home {
  --home-rhythm: clamp(44px, 7vw, 88px);
  overflow-x: hidden;
}

.page-home .hero .crumbs {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-home .hero .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .hero .crumbs li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.page-home .hero .crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line);
}

.page-home .hero .crumbs a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .hero .crumbs a:hover,
.page-home .hero .crumbs a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(22px, 3.6vw, 38px) clamp(40px, 6vw, 78px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 96% at 90% 4%, rgba(53, 242, 208, 0.13), transparent 58%),
    radial-gradient(96% 78% at 4% 94%, rgba(77, 163, 255, 0.16), transparent 62%),
    var(--ink-900);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 14px);
  opacity: 0.5;
  pointer-events: none;
}

.page-home .hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 46px);
  align-items: start;
}

.page-home .hero-title {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--fog);
  text-wrap: balance;
}

.page-home .hero-lead {
  margin-top: clamp(16px, 2.2vw, 22px);
  max-width: 56ch;
  overflow-wrap: anywhere;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.8vw, 28px);
}

.page-home .hero-anchor {
  margin-top: clamp(26px, 4vw, 42px);
  padding-top: clamp(16px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
}

.page-home .anchor-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--steel);
}

.page-home .anchor-num {
  display: flex;
  align-items: baseline;
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(84px, 17vw, 152px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 48px rgba(53, 242, 208, 0.32);
}

.page-home .anchor-unit {
  font-size: 0.24em;
  margin-left: 0.14em;
  letter-spacing: 0;
  color: var(--fog);
}

.page-home .anchor-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--steel);
}

.page-home .anchor-note .status-dot {
  margin-top: 7px;
  flex: 0 0 auto;
}

.page-home .hero-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--ink-800);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.page-home .hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 540px;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.06);
}

.page-home .hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--silver);
  background: linear-gradient(to top, rgba(6, 18, 31, 0.94), rgba(6, 18, 31, 0));
}

.page-home .evidence {
  padding-block: clamp(34px, 5vw, 58px);
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}

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

.page-home .evidence-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .evidence-item {
  padding-top: clamp(10px, 1.6vw, 16px);
  border-top: 1px solid var(--line);
}

.page-home .evidence-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
}

.page-home .evidence-unit {
  margin-left: 0.22em;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--cyan);
}

.page-home .evidence-cap {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
}

.page-home .evidence-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

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

.page-home .evidence-caption {
  padding: 10px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--steel);
  border-top: 1px solid var(--line);
  background: rgba(6, 18, 31, 0.72);
}

.page-home .stairs-section {
  padding-block: var(--home-rhythm);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(86% 90% at 10% 0%, rgba(33, 26, 69, 0.92), transparent 64%),
    var(--ink-900);
}

.page-home .stairs-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 58ch;
}

.page-home .stairs {
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .stair {
  border: 1px solid var(--line);
  background: rgba(6, 18, 31, 0.62);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.page-home .stair:hover,
.page-home .stair:focus-within {
  border-color: rgba(53, 242, 208, 0.55);
  background: rgba(8, 42, 50, 0.9);
}

.page-home .stair-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
  padding: clamp(14px, 2.2vw, 22px) clamp(14px, 2.4vw, 26px);
  color: inherit;
  text-decoration: none;
}

.page-home .stair-no {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--orange);
  padding-top: 4px;
}

.page-home .stair-body {
  display: block;
  min-width: 0;
}

.page-home .stair-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fog);
}

.page-home .stair-desc {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel);
}

.page-home .stair-scene {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cyan);
  border: 1px solid rgba(53, 242, 208, 0.38);
  background: rgba(53, 242, 208, 0.07);
}

.page-home .catalog-section {
  padding-block: var(--home-rhythm);
  border-bottom: 1px solid var(--line);
  background: var(--ink-900);
}

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

.page-home .catalog-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 58ch;
}

.page-home .catalog-list {
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .catalog-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px);
  padding-block: clamp(16px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
}

.page-home .catalog-row:last-child {
  border-bottom: 1px solid var(--line);
}

.page-home .catalog-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
  padding-top: 6px;
}

.page-home .catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-home .catalog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--fog);
}

.page-home .catalog-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-home .catalog-note {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--silver);
  border-left: 3px solid var(--cyan);
  background: rgba(8, 42, 50, 0.6);
}

.page-home .catalog-figure {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-800);
}

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

.page-home .catalog-caption {
  padding: 10px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--steel);
  border-top: 1px solid var(--line);
}

.page-home .release-section {
  padding-block: var(--home-rhythm);
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}

.page-home .release-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 60ch;
}

.page-home .release-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.2vw, 34px);
  margin-top: clamp(26px, 3.6vw, 40px);
  align-items: start;
}

.page-home .release-cards {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

.page-home .release-card {
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: rgba(6, 18, 31, 0.6);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.page-home .release-card:hover {
  background: rgba(6, 18, 31, 0.82);
}

.page-home .release-card--wine {
  border-left-color: var(--orange);
}

.page-home .release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-home .release-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--fog);
}

.page-home .release-text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-home .release-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 242, 208, 0.5);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .release-link:hover,
.page-home .release-link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.page-home .release-figure {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-900);
}

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

.page-home .release-caption {
  padding: 10px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--steel);
  border-top: 1px solid var(--line);
}

.page-home .trust-section {
  padding-block: clamp(48px, 8vw, 104px);
  background:
    radial-gradient(76% 120% at 88% 12%, rgba(255, 122, 26, 0.14), transparent 58%),
    radial-gradient(70% 100% at 6% 100%, rgba(53, 242, 208, 0.1), transparent 62%),
    var(--ink-900);
}

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

.page-home .trust-lead {
  margin-top: clamp(12px, 1.8vw, 18px);
  max-width: 58ch;
}

.page-home .trust-lead .mono {
  color: var(--fog);
  overflow-wrap: anywhere;
}

.page-home .trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.8vw, 28px);
}

.page-home .trust-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-home .trust-fact {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  padding-block: clamp(12px, 1.8vw, 18px);
  border-bottom: 1px solid var(--line);
}

.page-home .trust-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--steel);
  padding-top: 2px;
}

.page-home .trust-val {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fog);
}

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

@media (min-width: 900px) {
  .page-home .hero-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2.2vw, 34px);
  }

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

  .page-home .hero-figure {
    grid-column: 8 / span 5;
    align-self: stretch;
  }

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

  .page-home .evidence-inner {
    grid-template-columns: 1.18fr 0.82fr;
  }

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

  .page-home .trust-inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-home .stairs {
    max-width: 1000px;
  }

  .page-home .stair:nth-child(2) {
    margin-left: 5%;
  }

  .page-home .stair:nth-child(3) {
    margin-left: 10%;
  }

  .page-home .stair:nth-child(4) {
    margin-left: 15%;
  }

  .page-home .catalog-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 36px);
  }

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

  .page-home .catalog-figure {
    grid-column: 8 / span 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .stair,
  .page-home .release-card,
  .page-home .release-link,
  .page-home .hero .crumbs a {
    transition: none;
  }
}