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

.page-home h1,
.page-home h2,
.page-home h3 {
  margin: 0;
  font-family: var(--font-display);
}

.page-home p {
  margin: 0;
}

.page-home ul,
.page-home ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home a {
  text-decoration: none;
}

.page-home .crumbs {
  padding: 20px 0 0;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-home .crumbs-sep {
  margin-right: 8px;
  color: var(--orange);
}

.page-home .eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lime-soft);
}

.page-home .section {
  padding: 56px 0;
}

.page-home .section--tight {
  padding: 46px 0;
}

/* ---------- 首屏海报 ---------- */
.page-home .hero-poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 0 56px;
}

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

.page-home .hero-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 62% at 12% 0%, rgba(198, 255, 61, 0.22), transparent 66%),
    radial-gradient(55% 60% at 96% 88%, rgba(255, 138, 42, 0.2), transparent 68%),
    linear-gradient(180deg, rgba(6, 30, 24, 0.2) 0%, rgba(6, 30, 24, 0.86) 72%, var(--ink) 100%);
}

.page-home .hero-inner {
  position: relative;
  z-index: 2;
}

.page-home .hero-inner h1 {
  margin-top: 14px;
  font-weight: 900;
  font-size: clamp(34px, 9vw, 104px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.page-home .hero-inner h1 .accent {
  color: var(--lime);
  font-style: normal;
}

.page-home .hero-inner .lede {
  max-width: 52ch;
  margin-top: 22px;
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1.8;
  color: var(--paper);
}

.page-home .score-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
  max-width: 820px;
}

.page-home .score-cell {
  padding: 14px 14px 16px;
  background: rgba(12, 46, 37, 0.74);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  backdrop-filter: blur(2px);
}

.page-home .score-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lime);
}

.page-home .score-key {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}

.page-home .score-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

.page-home .hero-dial {
  display: none;
  position: absolute;
  right: var(--pad);
  bottom: 26px;
  z-index: 2;
  width: 180px;
}

/* ---------- 四栏索引 ---------- */
.page-home .index-deck {
  padding: 40px 0 48px;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .deck-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 22px;
}

.page-home .deck-title {
  font-size: clamp(22px, 4.6vw, 30px);
  letter-spacing: -0.01em;
}

.page-home .deck-note {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--muted);
}

.page-home .deck-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-home .deck-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 152px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-home .deck-item:hover,
.page-home .deck-item:focus-visible {
  transform: translateY(-3px);
  border-color: var(--lime);
  background: var(--ink-3);
  outline: none;
}

.page-home .deck-num {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-home .deck-name {
  font-size: 19px;
  font-weight: 700;
}

.page-home .deck-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .deck-go {
  margin-top: auto;
  font-size: 13px;
  color: var(--lime);
}

/* ---------- 重点场次 ---------- */
.page-home .band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.page-home .band-title h2 {
  margin-top: 10px;
  font-size: clamp(25px, 4.8vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.page-home .league-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-home .pill:hover {
  border-color: var(--lime-soft);
  color: var(--paper);
}

.page-home .pill.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 700;
}

.page-home .pill.is-active:hover {
  color: var(--ink);
}

.page-home .match-list {
  display: grid;
  gap: 12px;
}

.page-home .match-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-home .match-card:hover,
.page-home .match-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--lime);
  background: var(--ink-3);
}

.page-home .match-media {
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}

.page-home .match-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .match-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-home .match-time {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--lime-soft);
}

.page-home .match-score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
}

.page-home .match-score .num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}

.page-home .match-score .team {
  font-size: 14px;
  color: var(--muted);
}

.page-home .match-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.page-home .match-action {
  justify-self: start;
}

.page-home .league-strip-note {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--muted);
}

/* ---------- 分栏：类别切换 + 双版本 ---------- */
.page-home .split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.page-home .split-main h2,
.page-home .review h2,
.page-home .cadence h2,
.page-home .path-strip h2 {
  margin: 10px 0 16px;
  font-size: clamp(25px, 4.6vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-home .split-main > p {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .switch-points {
  display: grid;
  gap: 12px;
  margin: 22px 0 26px;
}

.page-home .switch-points li {
  padding-left: 16px;
  border-left: 2px solid var(--ink-3);
  font-size: 15px;
  line-height: 1.75;
  color: var(--paper);
}

.page-home .switch-points li:nth-child(2) {
  border-left-color: var(--orange);
}

.page-home .switch-points li:nth-child(3) {
  border-left-color: var(--lime);
}

.page-home .switch-points strong {
  color: var(--lime-soft);
}

.page-home .media {
  margin: 0;
}

.page-home .media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.page-home .media-caption {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.page-home .split-side {
  padding: 26px 22px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2) 72%);
}

.page-home .split-side h3 {
  font-size: 22px;
  line-height: 1.28;
  margin-bottom: 12px;
}

.page-home .split-side > p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-home .version-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.page-home .version-facts {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}

.page-home .version-facts > div {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}

.page-home .version-facts dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-home .version-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
}

/* ---------- 复盘对照 ---------- */
.page-home .review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-home .review-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-home .review-copy > p {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .mirror {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--line);
}

.page-home .mirror-col {
  padding: 14px;
  background: var(--ink-2);
}

.page-home .mirror-col--away {
  background: var(--ink-3);
}

.page-home .mirror-team {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--lime-soft);
}

.page-home .mirror-col--away .mirror-team {
  color: var(--orange-soft);
}

.page-home .mirror-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.page-home .mirror-row .num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

/* ---------- 更新节奏 ---------- */
.page-home .cadence {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .cadence-track {
  display: grid;
  gap: 0;
  margin: 26px 0 28px;
}

.page-home .cadence-track li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 1px solid var(--line);
}

.page-home .cadence-track li:last-child {
  padding-bottom: 0;
}

.page-home .tick {
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
}

.page-home .cadence-track li:nth-child(2) .tick {
  background: var(--orange);
}

.page-home .cadence-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lime-soft);
}

.page-home .cadence-track p {
  margin-top: 6px;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-home .cadence-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

.page-home .cadence-foot p {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .cadence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 结尾路径条 ---------- */
.page-home .path-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 22px;
}

.page-home .path-line li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-2);
}

.page-home .path-line .num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--orange);
}

.page-home .path-line strong {
  font-size: 16px;
  font-weight: 700;
}

.page-home .path-line a {
  margin-top: auto;
  font-size: 14px;
  color: var(--lime);
}

.page-home .path-line a:hover,
.page-home .path-line a:focus-visible {
  text-decoration: underline;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-home .deck-list {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .score-board {
    gap: 12px;
  }
}

@media (min-width: 900px) {
  .page-home .section {
    padding: 84px 0;
  }

  .page-home .section--tight {
    padding: 58px 0;
  }

  .page-home .hero-poster {
    padding: 84px 0 72px;
  }

  .page-home .match-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 22px 26px;
  }

  .page-home .match-card--feature {
    grid-template-columns: 250px minmax(0, 1fr) auto;
    padding: 20px 26px;
  }

  .page-home .match-action {
    justify-self: end;
  }

  .page-home .cadence-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }

  .page-home .cadence-track li {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .page-home .tick {
    left: 0;
    top: -5px;
  }
}

@media (min-width: 960px) {
  .page-home .review-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 44px;
  }

  .page-home .path-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .page-home .hero-dial {
    display: block;
  }

  .page-home .deck-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .split-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }

  .page-home .split-side {
    position: sticky;
    top: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .deck-item,
  .page-home .match-card,
  .page-home .pill {
    transition: none;
  }

  .page-home .deck-item:hover,
  .page-home .match-card:hover {
    transform: none;
  }
}


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

  <div class="shell">
    <nav class="crumbs" aria-label="页面位置">
      <span class="crumbs-sep" aria-hidden="true">/</span>
      <span aria-current="page">首页</span>
    </nav>
  </div>

  <section class="hero-poster" aria-labelledby="hero-title">
    <img class="hero-bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光斜照草皮，看台与草皮交界处形成暗部，为文字留出叠层空间">
    <div class="hero-inner shell">
      <p class="eyebrow serif">爱游戏赛事 · 焕新版</p>
      <h1 id="hero-title">焕新归来<br><span class="accent">手机看赛事</span>更顺手</h1>
      <p class="lede">爱游戏赛事把赛前速览、即时比分和赛后复盘收进同一条顺手的动线。打开手机先选联赛，重点场次一张宽卡看清开赛时间与比分，终场后顺着复盘入口把数据对着看一遍。</p>
      <div class="score-board" role="list">
        <div class="score-cell" role="listitem">
          <span class="score-num num">5</span>
          <span class="score-key">赛事类别</span>
          <span class="score-sub">足球、篮球、网球、电竞与综合赛事</span>
        </div>
        <div class="score-cell" role="listitem">
          <span class="score-num num">18</span>
          <span class="score-key">联赛与杯赛</span>
          <span class="score-sub">顶栏一键切换，栏目路径不变</span>
        </div>
        <div class="score-cell" role="listitem">
          <span class="score-num num">86<span class="unit">万</span></span>
          <span class="score-key">移动端用户</span>
          <span class="score-sub">月活跃约 12.6 万</span>
        </div>
      </div>
    </div>
    <svg class="hero-dial" viewBox="0 0 200 60" aria-hidden="true" focusable="false">
      <g stroke="#C6FF3D" stroke-width="1.5" opacity=".7">
        <line x1="0" y1="30" x2="200" y2="30" opacity=".35"/>
        <line x1="10" y1="22" x2="10" y2="38"/>
        <line x1="50" y1="26" x2="50" y2="34"/>
        <line x1="90" y1="20" x2="90" y2="40"/>
        <line x1="130" y1="26" x2="130" y2="34"/>
        <line x1="170" y1="22" x2="170" y2="38"/>
      </g>
      <circle cx="90" cy="30" r="4" fill="#FF8A2A"/>
    </svg>
  </section>

  <section class="index-deck" aria-labelledby="deck-title">
    <div class="shell">
      <div class="deck-head">
        <h2 id="deck-title" class="deck-title">从哪一栏开始</h2>
        <p class="deck-note">按眼下的需要挑一条，直接走到要看的内容</p>
      </div>
      <ul class="deck-list">
        <li>
          <a class="deck-item" href="/projects/">
            <span class="deck-num serif">01</span>
            <span class="deck-name">赛事功能</span>
            <span class="deck-desc">焕新版怎么用、双版本怎么切、复盘对照在哪里打开，一次讲清。</span>
            <span class="deck-go">看功能说明 →</span>
          </a>
        </li>
        <li>
          <a class="deck-item" href="/articles/">
            <span class="deck-num serif">02</span>
            <span class="deck-name">内容专栏</span>
            <span class="deck-desc">赛前速览、赛后复盘、球队档案与版本公告，按分类筛出你要的那一条。</span>
            <span class="deck-go">翻内容专栏 →</span>
          </a>
        </li>
        <li>
          <a class="deck-item" href="/values/">
            <span class="deck-num serif">03</span>
            <span class="deck-name">品牌主张</span>
            <span class="deck-desc">比分怎么校、复盘怎么快，以及这几年一路迭代过来的取舍。</span>
            <span class="deck-go">读品牌故事 →</span>
          </a>
        </li>
        <li>
          <a class="deck-item" href="/reach-us/">
            <span class="deck-num serif">04</span>
            <span class="deck-name">服务联络</span>
            <span class="deck-desc">邮箱、电话与反馈格式都放在这儿，工作日内有人接手。</span>
            <span class="deck-go">找客服 →</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section class="section section--tight match-band" aria-labelledby="match-title">
    <div class="shell">
      <div class="band-head">
        <div class="band-title">
          <p class="eyebrow serif">最近 24 小时</p>
          <h2 id="match-title">重点场次，一张宽卡看清</h2>
        </div>
        <div class="league-pills" role="group" aria-label="按类别筛选重点场次">
          <button class="pill is-active" type="button" data-league="all" aria-pressed="true">全部</button>
          <button class="pill" type="button" data-league="football" aria-pressed="false">足球</button>
          <button class="pill" type="button" data-league="basketball" aria-pressed="false">篮球</button>
          <button class="pill" type="button" data-league="tennis" aria-pressed="false">网球</button>
          <button class="pill" type="button" data-league="esports" aria-pressed="false">电竞</button>
          <button class="pill" type="button" data-league="mixed" aria-pressed="false">综合</button>
        </div>
      </div>

      <ul class="match-list">
        <li class="match-card match-card--feature" data-league-item="football">
          <div class="match-media">
            <img src="{zhanqunpic:h:640w:1200}" width="1200" height="640" alt="球鞋踩在草皮上的近景，边线旁散着模糊的比分牌光斑" loading="lazy" decoding="async">
          </div>
          <div class="match-body">
            <div class="match-tags">
              <span class="tag tag--orange">重点场次</span>
              <span class="tag">足球 · 联赛焦点战</span>
            </div>
            <p class="match-time num">20:30</p>
            <div class="match-score">
              <span class="team">主队</span>
              <span class="num">2:1</span>
              <span class="team">客队</span>
            </div>
            <p class="match-meta">已终场 · 复盘要点已更新</p>
          </div>
          <div class="match-action">
            <a class="btn btn-ghost btn-sm" href="/articles/">看复盘对照</a>
          </div>
        </li>

        <li class="match-card" data-league-item="basketball">
          <div class="match-body">
            <div class="match-tags">
              <span class="tag tag--lime">进行中</span>
              <span class="tag">篮球 · 杯赛半决赛</span>
            </div>
            <p class="match-time num">21:00</p>
            <div class="match-score">
              <span class="team">主队</span>
              <span class="num">78:74</span>
              <span class="team">客队</span>
            </div>
            <p class="match-meta">第四节 · 分差 4 分</p>
          </div>
          <div class="match-action">
            <a class="btn btn-ghost btn-sm" href="/projects/">分栏看比分</a>
          </div>
        </li>

        <li class="match-card" data-league-item="tennis">
          <div class="match-body">
            <div class="match-tags">
              <span class="tag">网球 · 中心球场</span>
            </div>
            <p class="match-time num">15:00</p>
            <div class="match-score">
              <span class="team">未开赛</span>
              <span class="num">—:—</span>
            </div>
            <p class="match-meta">明日 · 开赛提醒已就位</p>
          </div>
          <div class="match-action">
            <a class="btn btn-ghost btn-sm" href="/troubleshooting/">提醒设置</a>
          </div>
        </li>

        <li class="match-card" data-league-item="esports">
          <div class="match-body">
            <div class="match-tags">
              <span class="tag tag--orange">重点场次</span>
              <span class="tag">电竞 · 季后赛席位战</span>
            </div>
            <p class="match-time num">19:00</p>
            <div class="match-score">
              <span class="team">主队</span>
              <span class="num">1:1</span>
              <span class="team">客队</span>
            </div>
            <p class="match-meta">决胜局 · 关键回合已标记</p>
          </div>
          <div class="match-action">
            <a class="btn btn-ghost btn-sm" href="/articles/">看复盘对照</a>
          </div>
        </li>

        <li class="match-card" data-league-item="mixed">
          <div class="match-body">
            <div class="match-tags">
              <span class="tag tag--lime">本周</span>
              <span class="tag">综合 · 多项目决赛日</span>
            </div>
            <p class="match-time num">全天</p>
            <div class="match-score">
              <span class="num">6</span>
              <span class="team">个项目</span>
            </div>
            <p class="match-meta">按项目分栏排定，逐项可查</p>
          </div>
          <div class="match-action">
            <a class="btn btn-ghost btn-sm" href="/projects/">看排期</a>
          </div>
        </li>
      </ul>

      <p class="league-strip-note" data-league-note>当前展示 5 场重点场次</p>
    </div>
  </section>

  <section class="section split" aria-labelledby="switch-title">
    <div class="shell split-grid">
      <div class="split-main">
        <p class="eyebrow serif">类别与联赛</p>
        <h2 id="switch-title">顶栏一划，整条赛事线跟着换</h2>
        <p>足球、篮球、网球、电竞和综合赛事五类摆在同一处，往下是 18 个联赛与杯赛。你正在看哪一栏就留在哪一栏，切换只换赛事内容，不会把你带离当前位置，也不必重新找入口。</p>
        <ul class="switch-points">
          <li><strong>只看重点场次：</strong>宽卡把状态、开赛时间与比分并排放，几秒扫完一轮，不用逐条点开。</li>
          <li><strong>长期跟一支队：</strong>从赛季开局追到收官，类别与联赛两级往下筛，位置和操作习惯都不用重学。</li>
          <li><strong>爱看数据复盘：</strong>终场后从同一张卡进入对照，主客队关键指标左右对应，来回切换不丢上下文。</li>
        </ul>
        <figure class="media media--wide">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="抽象记分牌几何图形与时间轴刻度，青柠与暖橙小面积点亮" loading="lazy" decoding="async">
          <figcaption class="media-caption">筛带与时间刻度共用一套位置：换类别只改内容，不改你落在页面里的位置。</figcaption>
        </figure>
      </div>

      <aside class="split-side" aria-labelledby="version-title">
        <h3 id="version-title">换版本，位置不变</h3>
        <p>赛事通道简体版每周更新一次，眼下这一版已经跟到本周。它跟焕新版的栏目位置、返回方式完全对齐，换过去不用重新认路。</p>
        <div class="version-pills">
          <span class="pill is-active">焕新版</span>
          <a class="pill" href="/projects/">赛事通道简体版</a>
        </div>
        <dl class="version-facts">
          <div>
            <dt>更新频率</dt>
            <dd>每周一次，已更新到本周</dd>
          </div>
          <div>
            <dt>栏目位置</dt>
            <dd>两版对齐，返回路径相同</dd>
          </div>
          <div>
            <dt>适合谁</dt>
            <dd>偏好简洁界面的球迷，或通勤路上只想快速扫一眼的用户</dd>
          </div>
        </dl>
        <a class="btn btn-primary btn-sm" href="/projects/">看功能与版本</a>
      </aside>
    </div>
  </section>

  <section class="section review" aria-labelledby="review-title">
    <div class="shell review-grid">
      <div class="review-visual">
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="左右镜像的战术板线条与数据块面，主客队信息对应排列" loading="lazy" decoding="async">
      </div>
      <div class="review-copy">
        <p class="eyebrow serif">内容中心 · 第二屏</p>
        <h2 id="review-title">追完比分，就着同一场看对照</h2>
        <p>复盘对照的入口放在内容中心第二屏，看完比分往下滑一步就到。要点版在终场后 30 分钟内出来，两小时内补齐对照数据，主客队的关键指标左右排开，不用在两处来回倒腾。</p>
        <div class="mirror" aria-label="主客队关键指标对照示意">
          <div class="mirror-col">
            <span class="mirror-team serif">主队</span>
            <p class="mirror-row"><span>控球</span><span class="num">58%</span></p>
            <p class="mirror-row"><span>射门</span><span class="num">14</span></p>
            <p class="mirror-row"><span>关键回合</span><span class="num">7</span></p>
          </div>
          <div class="mirror-col mirror-col--away">
            <span class="mirror-team serif">客队</span>
            <p class="mirror-row"><span>控球</span><span class="num">42%</span></p>
            <p class="mirror-row"><span>射门</span><span class="num">9</span></p>
            <p class="mirror-row"><span>关键回合</span><span class="num">5</span></p>
          </div>
        </div>
        <a class="btn btn-accent" href="/articles/">打开复盘对照</a>
      </div>
    </div>
  </section>

  <section class="section cadence" aria-labelledby="cadence-title">
    <div class="shell">
      <p class="eyebrow serif">更新与服务</p>
      <h2 id="cadence-title">每天三个时段，赛后半小时见复盘</h2>
      <ol class="cadence-track">
        <li>
          <span class="tick" aria-hidden="true"></span>
          <span class="cadence-key num">赛前</span>
          <p>速览、伤停与首发要点提前挂上，出门前刷一遍就够。</p>
        </li>
        <li>
          <span class="tick" aria-hidden="true"></span>
          <span class="cadence-key num">即时</span>
          <p>每天三个时段刷新赛前速览与比分摘要，重点场次整场跟进。</p>
        </li>
        <li>
          <span class="tick" aria-hidden="true"></span>
          <span class="cadence-key num">赛后</span>
          <p>终场 30 分钟内出要点版，两小时内补齐对照数据。</p>
        </li>
      </ol>
      <div class="cadence-foot">
        <p>比分不刷新、提醒收不到，或找不到复盘入口，先按设备与当前版本自查一遍；还没解决就写信到 support@handy-aiyouxi.com.cn，附上截图与设备型号，工作日内会收到回复。</p>
        <div class="cadence-actions">
          <a class="btn btn-primary btn-sm" href="/reach-us/">联系客服</a>
          <a class="btn btn-ghost btn-sm" href="/troubleshooting/">先自查</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--tight path-strip" aria-labelledby="path-title">
    <div class="shell">
      <h2 id="path-title">顺着往下走，三步到位</h2>
      <ol class="path-line">
        <li>
          <span class="num">01</span>
          <strong>选类别，看比分</strong>
          <a href="/projects/">进入赛事功能</a>
        </li>
        <li>
          <span class="num">02</span>
          <strong>终场后，看对照</strong>
          <a href="/articles/">进入内容专栏</a>
        </li>
        <li>
          <span class="num">03</span>
          <strong>有问题，找我们</strong>
          <a href="/reach-us/">进入服务联络</a>
        </li>
      </ol>
    </div>
  </section>

</main>

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

.page-home h1,
.page-home h2,
.page-home h3 {
  margin: 0;
  font-family: var(--font-display);
}

.page-home p {
  margin: 0;
}

.page-home ul,
.page-home ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home a {
  text-decoration: none;
}

.page-home .crumbs {
  padding: 20px 0 0;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-home .crumbs-sep {
  margin-right: 8px;
  color: var(--orange);
}

.page-home .eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lime-soft);
}

.page-home .section {
  padding: 56px 0;
}

.page-home .section--tight {
  padding: 46px 0;
}

/* ---------- 首屏海报 ---------- */
.page-home .hero-poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 0 56px;
}

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

.page-home .hero-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 62% at 12% 0%, rgba(198, 255, 61, 0.22), transparent 66%),
    radial-gradient(55% 60% at 96% 88%, rgba(255, 138, 42, 0.2), transparent 68%),
    linear-gradient(180deg, rgba(6, 30, 24, 0.2) 0%, rgba(6, 30, 24, 0.86) 72%, var(--ink) 100%);
}

.page-home .hero-inner {
  position: relative;
  z-index: 2;
}

.page-home .hero-inner h1 {
  margin-top: 14px;
  font-weight: 900;
  font-size: clamp(34px, 9vw, 104px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.page-home .hero-inner h1 .accent {
  color: var(--lime);
}

.page-home .hero-inner .lede {
  max-width: 52ch;
  margin-top: 22px;
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1.8;
  color: var(--paper);
}

.page-home .score-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
  max-width: 820px;
}

.page-home .score-cell {
  padding: 14px 14px 16px;
  background: rgba(12, 46, 37, 0.74);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.page-home .score-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lime);
}

.page-home .score-num .unit {
  font-size: 0.5em;
  margin-left: 2px;
}

.page-home .score-key {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}

.page-home .score-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

.page-home .hero-dial {
  display: none;
  position: absolute;
  right: var(--pad);
  bottom: 26px;
  z-index: 2;
  width: 180px;
}

/* ---------- 四栏索引 ---------- */
.page-home .index-deck {
  padding: 40px 0 48px;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .deck-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 22px;
}

.page-home .deck-title {
  font-size: clamp(22px, 4.6vw, 30px);
  letter-spacing: -0.01em;
}

.page-home .deck-note {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--muted);
}

.page-home .deck-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-home .deck-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 152px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-home .deck-item:hover,
.page-home .deck-item:focus-visible {
  transform: translateY(-3px);
  border-color: var(--lime);
  background: var(--ink-3);
  outline: none;
}

.page-home .deck-num {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-home .deck-name {
  font-size: 19px;
  font-weight: 700;
}

.page-home .deck-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-home .deck-go {
  margin-top: auto;
  font-size: 13px;
  color: var(--lime);
}

/* ---------- 重点场次 ---------- */
.page-home .band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.page-home .band-title h2 {
  margin-top: 10px;
  font-size: clamp(25px, 4.8vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.page-home .league-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-home .pill:hover {
  border-color: var(--lime-soft);
  color: var(--paper);
}

.page-home .pill.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 700;
}

.page-home .pill.is-active:hover {
  color: var(--ink);
}

.page-home .match-list {
  display: grid;
  gap: 12px;
}

.page-home .match-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-home .match-card:hover,
.page-home .match-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--lime);
  background: var(--ink-3);
}

.page-home .match-media {
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}

.page-home .match-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .match-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-home .match-time {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--lime-soft);
}

.page-home .match-score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
}

.page-home .match-score .num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}

.page-home .match-score .team {
  font-size: 14px;
  color: var(--muted);
}

.page-home .match-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.page-home .match-action {
  justify-self: start;
}

.page-home .league-strip-note {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--muted);
}

/* ---------- 分栏：类别切换 + 双版本 ---------- */
.page-home .split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.page-home .split-main h2,
.page-home .review h2,
.page-home .cadence h2,
.page-home .path-strip h2 {
  margin: 10px 0 16px;
  font-size: clamp(25px, 4.6vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-home .split-main > p {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .switch-points {
  display: grid;
  gap: 12px;
  margin: 22px 0 26px;
}

.page-home .switch-points li {
  padding-left: 16px;
  border-left: 2px solid var(--ink-3);
  font-size: 15px;
  line-height: 1.75;
  color: var(--paper);
}

.page-home .switch-points li:nth-child(2) {
  border-left-color: var(--orange);
}

.page-home .switch-points li:nth-child(3) {
  border-left-color: var(--lime);
}

.page-home .switch-points strong {
  color: var(--lime-soft);
}

.page-home .media {
  margin: 0;
}

.page-home .media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.page-home .media-caption {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.page-home .split-side {
  padding: 26px 22px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2) 72%);
}

.page-home .split-side h3 {
  font-size: 22px;
  line-height: 1.28;
  margin-bottom: 12px;
}

.page-home .split-side > p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-home .version-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.page-home .version-facts {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}

.page-home .version-facts > div {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}

.page-home .version-facts dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-home .version-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
}

/* ---------- 复盘对照 ---------- */
.page-home .review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-home .review-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-home .review-copy > p {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .mirror {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--line);
}

.page-home .mirror-col {
  padding: 14px;
  background: var(--ink-2);
}

.page-home .mirror-col--away {
  background: var(--ink-3);
}

.page-home .mirror-team {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--lime-soft);
}

.page-home .mirror-col--away .mirror-team {
  color: var(--orange-soft);
}

.page-home .mirror-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.page-home .mirror-row .num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

/* ---------- 更新节奏 ---------- */
.page-home .cadence {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .cadence-track {
  display: grid;
  gap: 0;
  margin: 26px 0 28px;
}

.page-home .cadence-track li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 1px solid var(--line);
}

.page-home .cadence-track li:last-child {
  padding-bottom: 0;
}

.page-home .tick {
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
}

.page-home .cadence-track li:nth-child(2) .tick {
  background: var(--orange);
}

.page-home .cadence-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lime-soft);
}

.page-home .cadence-track p {
  margin-top: 6px;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-home .cadence-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

.page-home .cadence-foot p {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .cadence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 结尾路径条 ---------- */
.page-home .path-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 22px;
}

.page-home .path-line li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-2);
}

.page-home .path-line .num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--orange);
}

.page-home .path-line strong {
  font-size: 16px;
  font-weight: 700;
}

.page-home .path-line a {
  margin-top: auto;
  font-size: 14px;
  color: var(--lime);
}

.page-home .path-line a:hover,
.page-home .path-line a:focus-visible {
  text-decoration: underline;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-home .deck-list {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .score-board {
    gap: 12px;
  }
}

@media (min-width: 900px) {
  .page-home .section {
    padding: 84px 0;
  }

  .page-home .section--tight {
    padding: 58px 0;
  }

  .page-home .hero-poster {
    padding: 84px 0 72px;
  }

  .page-home .match-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 22px 26px;
  }

  .page-home .match-card--feature {
    grid-template-columns: 250px minmax(0, 1fr) auto;
    padding: 20px 26px;
  }

  .page-home .match-action {
    justify-self: end;
  }

  .page-home .cadence-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }

  .page-home .cadence-track li {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .page-home .tick {
    left: 0;
    top: -5px;
  }
}

@media (min-width: 960px) {
  .page-home .review-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 44px;
  }

  .page-home .path-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .page-home .hero-dial {
    display: block;
  }

  .page-home .deck-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .split-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }

  .page-home .split-side {
    position: sticky;
    top: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .deck-item,
  .page-home .match-card,
  .page-home .pill {
    transition: none;
  }

  .page-home .deck-item:hover,
  .page-home .match-card:hover {
    transform: none;
  }
}
<<<END>>>