.page-home {
  --home-cut: clamp(16px, 2.4vw, 30px);
  --home-line: rgba(143, 168, 184, 0.28);
  background: var(--ink);
  color: var(--mist);
}

.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 6vw, 76px) 0 clamp(34px, 5vw, 66px);
  border-bottom: 1px solid var(--grid);
}

.page-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
  filter: saturate(0.8) brightness(0.62);
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 107, 26, 0.22), transparent 32%),
    radial-gradient(circle at 82% 22%, rgba(61, 224, 174, 0.10), transparent 26%),
    linear-gradient(112deg, rgba(7, 22, 19, 0.97) 0%, rgba(7, 22, 19, 0.76) 54%, rgba(7, 22, 19, 0.94) 100%);
}

.page-home .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(143, 168, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 168, 184, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, black, transparent 88%);
}

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

.page-home .hero-crumb {
  margin-bottom: clamp(20px, 4vw, 42px);
  color: var(--slate);
}

.page-home .hero-grid {
  display: grid;
  gap: clamp(26px, 5vw, 54px);
  align-items: end;
}

.page-home .hero-main {
  min-width: 0;
}

.page-home .hero-version {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  margin-bottom: clamp(14px, 2vw, 22px);
}

.page-home .hero-version .data-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(72px, 14vw, 176px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: var(--orange);
  text-shadow: 0 0 36px rgba(255, 107, 26, 0.22);
}

.page-home .version-label {
  display: block;
  padding-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.page-home .hero-title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 6.6vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-home .hero-side {
  min-width: 0;
  padding-bottom: 4px;
}

.page-home .hero-copy {
  max-width: 44ch;
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mist);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-bottom: clamp(24px, 4vw, 38px);
}

.page-home .hero-actions .btn {
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-home .hero-actions .btn:hover {
  transform: translateX(4px);
}

.page-home .hero-secondary {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 122, 0.38);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .hero-secondary:hover {
  color: var(--paper);
  border-bottom-color: var(--orange);
}

.page-home .hero-stats {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--home-line);
}

.page-home .stat-block {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--grid);
}

.page-home .stat-num {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.page-home .stat-label {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.page-home .chapter-jump {
  position: sticky;
  top: var(--header-h);
  z-index: 15;
  border-bottom: 1px solid var(--grid);
  background: rgba(7, 22, 19, 0.93);
  backdrop-filter: blur(8px);
}

.page-home .jump-list {
  display: flex;
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
  padding: 11px 0;
  gap: 8px 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-home .jump-list::-webkit-scrollbar {
  display: none;
}

.page-home .jump-link {
  flex: 0 0 auto;
  padding: 5px 0 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .jump-link:hover {
  color: var(--orange-soft);
  border-bottom-color: var(--orange);
}

.page-home .jump-link:first-child {
  color: var(--paper);
  border-bottom-color: var(--mint);
}

.page-home .home-section {
  padding: clamp(46px, 7vw, 94px) 0;
}

.page-home .version-section {
  background:
    radial-gradient(circle at 86% 8%, rgba(61, 224, 174, 0.06), transparent 24%),
    var(--ink);
}

.page-home .flow-section {
  background: linear-gradient(180deg, var(--ink) 0%, #091b17 36%, var(--ink) 100%);
}

.page-home .trust-section {
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 107, 26, 0.08), transparent 30%),
    var(--ink);
}

.page-home .news-section {
  background: var(--panel);
}

.page-home .section-head {
  display: grid;
  gap: 12px 28px;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--grid);
}

.page-home .head-coord {
  min-width: 0;
}

.page-home .head-coord .chapter-coord {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: clamp(34px, 5.8vw, 76px);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: 0.03em;
  color: rgba(143, 168, 184, 0.28);
}

.page-home .section-lead {
  max-width: 62ch;
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--slate);
}

.page-home .version-layout {
  display: grid;
  gap: clamp(28px, 4vw, 50px);
  align-items: start;
}

.page-home .version-cards {
  min-width: 0;
}

.page-home .version-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(18px, 3vw, 26px) 0;
  border-top: 1px solid var(--grid);
}

.page-home .version-card:last-child {
  border-bottom: 1px solid var(--grid);
}

.page-home .card-index {
  padding-top: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.page-home .card-body {
  min-width: 0;
}

.page-home .version-card-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 1.28;
  color: var(--paper);
}

.page-home .version-card p {
  max-width: 62ch;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--slate);
}

.page-home .version-visual {
  min-width: 0;
  margin: 0;
  background: var(--pine);
  border: 1px solid var(--grid);
  clip-path: polygon(0 0, calc(100% - var(--home-cut)) 0, 100% var(--home-cut), 100% 100%, var(--home-cut) 100%, 0 calc(100% - var(--home-cut)));
  overflow: hidden;
}

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

.page-home .visual-caption {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(143, 168, 184, 0.22);
  background: rgba(14, 42, 36, 0.92);
  font-size: 13px;
  line-height: 1.65;
  color: var(--slate);
}

.page-home .flow-track {
  position: relative;
  display: grid;
  gap: 0;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.page-home .flow-step {
  position: relative;
  padding: 18px 0 18px 24px;
  border-left: 1px solid var(--grid);
}

.page-home .flow-step:first-child {
  border-top: 1px solid var(--grid);
}

.page-home .flow-step:last-child {
  border-bottom: 1px solid var(--grid);
}

.page-home .flow-step::before {
  content: "";
  position: absolute;
  top: 25px;
  left: -4px;
  width: 7px;
  height: 7px;
  background: var(--orange);
  transform: rotate(45deg);
}

.page-home .step-no {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mint);
}

.page-home .step-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--paper);
}

.page-home .flow-step p {
  max-width: 36ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-home .flow-visual {
  margin: 0;
  border: 1px solid var(--grid);
  clip-path: polygon(var(--home-cut) 0, 100% 0, 100% calc(100% - var(--home-cut)), calc(100% - var(--home-cut)) 100%, 0 100%, 0 var(--home-cut));
  overflow: hidden;
  background: var(--brown);
}

.page-home .flow-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.88;
}

.page-home .flow-actions,
.page-home .trust-actions,
.page-home .news-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 22px;
}

.page-home .text-link {
  display: inline-block;
  padding: 3px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 122, 0.4);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .text-link:hover {
  color: var(--paper);
  border-bottom-color: var(--mint);
}

.page-home .text-link--muted {
  color: var(--slate);
  border-bottom-color: rgba(143, 168, 184, 0.4);
}

.page-home .text-link--muted:hover {
  color: var(--mint);
  border-bottom-color: var(--mint);
}

.page-home .trust-layout {
  display: grid;
  gap: clamp(28px, 4vw, 50px);
  align-items: start;
}

.page-home .trust-visual {
  margin: 0;
  border: 1px solid var(--grid);
  background: var(--pine);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--home-cut)), calc(100% - var(--home-cut)) 100%, 0 100%);
  overflow: hidden;
}

.page-home .trust-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  opacity: 0.86;
}

.page-home .trust-copy {
  min-width: 0;
}

.page-home .trust-list {
  border-top: 1px solid var(--grid);
}

.page-home .trust-item {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--grid);
}

.page-home .trust-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

.page-home .trust-item p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--slate);
}

.page-home .news-list {
  border-top: 1px solid var(--grid);
}

.page-home .news-row {
  display: grid;
  gap: 7px;
  padding: 17px 0;
  border-bottom: 1px solid var(--grid);
  color: var(--mist);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.page-home .news-row:hover {
  background: rgba(23, 63, 53, 0.56);
  padding-left: 6px;
}

.page-home .news-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--mint);
}

.page-home .news-title {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--paper);
}

.page-home .news-arrow {
  justify-self: start;
  font-family: var(--font-mono);
  color: var(--orange);
  transition: transform var(--dur) var(--ease);
}

.page-home .news-row:hover .news-arrow {
  transform: translateX(4px);
}

.page-home .start-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: clamp(34px, 5vw, 58px);
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--grid);
  background:
    linear-gradient(100deg, rgba(23, 63, 53, 0.96), rgba(14, 42, 36, 0.96) 56%, rgba(90, 42, 18, 0.82));
  clip-path: polygon(0 0, calc(100% - var(--home-cut)) 0, 100% var(--home-cut), 100% 100%, var(--home-cut) 100%, 0 calc(100% - var(--home-cut)));
}

.page-home .band-copy {
  min-width: 0;
}

.page-home .band-kicker {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--orange-soft);
}

.page-home .band-title {
  max-width: 30ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--paper);
}

.page-home .news-section .start-band .btn {
  flex: 0 0 auto;
}

@media (min-width: 600px) {
  .page-home .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page-home .stat-block {
    padding-left: 16px;
  }

  .page-home .stat-block + .stat-block {
    border-left: 1px solid var(--grid);
  }

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

  .page-home .news-row {
    grid-template-columns: 94px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
  }

  .page-home .news-arrow {
    justify-self: end;
  }
}

@media (min-width: 820px) {
  .page-home .section-head {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

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

  .page-home .flow-step {
    padding: 30px 18px 22px;
    border-left: 0;
    border-top: 1px solid var(--grid);
  }

  .page-home .flow-step:first-child {
    border-top: 1px solid var(--orange);
  }

  .page-home .flow-step:last-child {
    border-bottom: 0;
  }

  .page-home .flow-step::before {
    top: -5px;
    left: 18px;
  }
}

@media (min-width: 960px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(30px, 5vw, 72px);
  }

  .page-home .version-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-home .version-visual {
    position: sticky;
    top: calc(var(--header-h) + 58px);
  }

  .page-home .trust-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-home .news-row {
    grid-template-columns: 112px minmax(0, 1fr) 28px;
    padding: 19px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-actions .btn,
  .page-home .news-row,
  .page-home .news-arrow,
  .page-home .jump-link,
  .page-home .text-link,
  .page-home .hero-secondary {
    transition: none;
  }

  .page-home .hero-actions .btn:hover,
  .page-home .news-row:hover,
  .page-home .news-row:hover .news-arrow {
    transform: none;
  }
}


<main id="main-content" class="page-home">
  <section class="home-hero" aria-labelledby="hero-title">
    <img class="hero-bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场俯拍，顶灯照亮看台轮廓与草皮边线">
    <div class="container hero-inner">
      <nav class="breadcrumbs hero-crumb" aria-label="面包屑">
        <span>首页</span>
        <span class="crumb-sep">/</span>
        <span aria-current="page">官方入口</span>
      </nav>
      <div class="hero-grid">
        <div class="hero-main">
          <div class="hero-version">
            <span class="version-label">桌面端当前版本</span>
            <span class="data-num" aria-label="版本 3.1">V3.1</span>
          </div>
          <h1 id="hero-title" class="hero-title">把周末的每一场，排进同一块屏幕</h1>
        </div>
        <div class="hero-side">
          <p class="hero-copy">澳客体育把赛程、赛事专区、收藏和赛后复盘串成一条顺手的使用路径。桌面端升到 V3.1 后，你标记过的专区页面会更稳地留在原处，周末连看也不必临时翻找入口。</p>
          <div class="hero-actions">
            <a class="btn btn-primary hero-cta" href="/experience/">进入体验中心</a>
            <a class="hero-secondary" href="/updates/">查看版本更新</a>
          </div>
          <div class="hero-stats">
            <div class="stat-block">
              <span class="stat-num data-num">96</span>
              <span class="stat-label">个联赛与杯赛专题</span>
            </div>
            <div class="stat-block">
              <span class="stat-num data-num">1200</span>
              <span class="stat-label">条每日更新赛程</span>
            </div>
            <div class="stat-block">
              <span class="stat-num data-num">62%</span>
              <span class="stat-label">周末观赛活跃占比</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <nav class="chapter-jump" aria-label="首页章节索引">
    <div class="jump-list">
      <a class="jump-link" href="#version">01 版本公告</a>
      <a class="jump-link" href="#flow">02 观赛路径</a>
      <a class="jump-link" href="#trust">03 入口与保障</a>
      <a class="jump-link" href="#news">04 近期更新</a>
    </div>
  </nav>

  <section id="version" class="home-section version-section" aria-labelledby="version-title">
    <div class="container">
      <div class="section-head">
        <div class="head-coord">
          <span class="eyebrow">版本公告</span>
          <span class="chapter-coord">CH.01 / 04</span>
        </div>
        <div>
          <h2 id="version-title" class="section-title">V3.1 先把三件小事做扎实</h2>
          <p class="section-lead">不换赛道，把周末看球最常碰到的几个拐点处理顺：收藏别丢、资讯更早、订阅更整。</p>
        </div>
      </div>
      <div class="version-layout">
        <div class="version-cards">
          <article class="version-card">
            <span class="card-index data-num">01</span>
            <div class="card-body">
              <h3 class="version-card-title">收藏稳稳存档，换设备也能接上</h3>
              <p>赛事专区页面收藏采用本地存档与账号同步两条通道。换一台电脑登录同一账号，之前标过的专区可以接着使用；单账户最多保存 300 个页面，常看的联赛和杯赛够放。</p>
            </div>
          </article>
          <article class="version-card">
            <span class="card-index data-num">02</span>
            <div class="card-body">
              <h3 class="version-card-title">测试版专区多了前瞻与球员数据</h3>
              <p>进入测试版专区，赛前前瞻和球员数据并排放在专区首页。想先看伤停、状态和对位，再决定要不要守直播，开球前就能把材料翻到。</p>
            </div>
          </article>
          <article class="version-card">
            <span class="card-index data-num">03</span>
            <div class="card-body">
              <h3 class="version-card-title">周末赛程按日期一次排好</h3>
              <p>周末连续观赛赛程订阅支持按日期调出，周六、周日的场次可以提前排进同一张表。订阅内容还能导出为日历文件，临时加看一场也不用来回翻列表。</p>
            </div>
          </article>
        </div>
        <figure class="version-visual">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="战术板线条与页面卡片标记的抽象示意" loading="lazy" decoding="async">
          <figcaption class="visual-caption">收藏、订阅与复盘沿同一条路径展开，常用专区更容易回到原处。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section id="flow" class="home-section flow-section" aria-labelledby="flow-title">
    <div class="container">
      <div class="section-head">
        <div class="head-coord">
          <span class="eyebrow">观赛路径</span>
          <span class="chapter-coord">CH.02 / 04</span>
        </div>
        <div>
          <h2 id="flow-title" class="section-title">从赛前翻到赛后，四步不断线</h2>
          <p class="section-lead">先把场次看准，再进专区做功课；周末集中观赛用订阅排好，赛后回到简版赛程看完整对阵。</p>
        </div>
      </div>
      <div class="flow-track">
        <article class="flow-step">
          <span class="step-no data-num">01</span>
          <h3 class="step-title">先查赛程</h3>
          <p>按日期和赛事类型快速扫一遍，锁定这个周末值得守的场次。</p>
        </article>
        <article class="flow-step">
          <span class="step-no data-num">02</span>
          <h3 class="step-title">进入赛事专区</h3>
          <p>看赛前前瞻、球员状态和过往对阵，把判断放在开球之前。</p>
        </article>
        <article class="flow-step">
          <span class="step-no data-num">03</span>
          <h3 class="step-title">订阅周末场次</h3>
          <p>按日期调出连续观赛安排，导出日历后跟着时间走。</p>
        </article>
        <article class="flow-step">
          <span class="step-no data-num">04</span>
          <h3 class="step-title">赛后复盘</h3>
          <p>用简版赛程两三步回到完整对阵，补看关键数据与复盘摘要。</p>
        </article>
      </div>
      <figure class="flow-visual">
        <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="观众席光影与球场边线，呈现周末连续观赛的现场氛围" loading="lazy" decoding="async">
      </figure>
      <div class="flow-actions">
        <a class="text-link" href="/experience/">进入体验中心，试着收藏一个专区</a>
        <a class="text-link text-link--muted" href="/support/">使用中遇到问题，查看支持中心</a>
      </div>
    </div>
  </section>

  <section id="trust" class="home-section trust-section" aria-labelledby="trust-title">
    <div class="container">
      <div class="section-head">
        <div class="head-coord">
          <span class="eyebrow">入口与保障</span>
          <span class="chapter-coord">CH.03 / 04</span>
        </div>
        <div>
          <h2 id="trust-title" class="section-title">认准入口，安心把周末交给赛程</h2>
          <p class="section-lead">从 2016 年开始做赛事内容，澳客体育更清楚观赛用户最怕什么：入口绕、信息慢、赛后找不到完整对阵。</p>
        </div>
      </div>
      <div class="trust-layout">
        <figure class="trust-visual">
          <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="低角度球员动态剪影与数据网格，传达赛后复盘的数据氛围" loading="lazy" decoding="async">
        </figure>
        <div class="trust-copy">
          <div class="trust-list">
            <div class="trust-item">
              <span class="trust-label">官方入口</span>
              <p>桌面端首页保持清晰直达，进入专区、收藏与订阅不必在多个页面之间来回跳。站点通过冀ICP备38298156号公示，服务河北地区用户。</p>
            </div>
            <div class="trust-item">
              <span class="trust-label">内容流程</span>
              <p>赛事内容经过编辑初校、数据复核和发布前审核三道流程；重要比赛日启动高峰保障，提高更新频次。</p>
            </div>
            <div class="trust-item">
              <span class="trust-label">服务时段</span>
              <p>工作日 9:00-18:00 客服在线。账号、收藏、订阅和数据方面的常见问题，可以先在帮助中心按分类找到处理办法。</p>
            </div>
            <div class="trust-item">
              <span class="trust-label">持续运营</span>
              <p>平台自 2016 年起提供赛事内容服务，2023 年获区域体育内容服务创新案例推荐，版本按双周与季度节奏持续更新。</p>
            </div>
          </div>
          <div class="trust-actions">
            <a class="text-link" href="/introduction/">了解平台与内容团队</a>
            <a class="text-link text-link--muted" href="/contact-us/">联系客服</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="news" class="home-section news-section" aria-labelledby="news-title">
    <div class="container">
      <div class="section-head">
        <div class="head-coord">
          <span class="eyebrow">近期更新</span>
          <span class="chapter-coord">CH.04 / 04</span>
        </div>
        <div>
          <h2 id="news-title" class="section-title">最近的更新，先看这几条</h2>
          <p class="section-lead">版本推送、栏目上新和服务保障按时间往前排，想追完整记录可以进入更新说明。</p>
        </div>
      </div>
      <div class="news-list">
        <a class="news-row" href="/updates/">
          <span class="news-time">本周</span>
          <span class="news-title">桌面端 V3.1 推送，收藏存档双通道生效</span>
          <span class="news-arrow" aria-hidden="true">→</span>
        </a>
        <a class="news-row" href="/updates/">
          <span class="news-time">上周</span>
          <span class="news-title">测试版专区上线赛前前瞻与球员数据栏目</span>
          <span class="news-arrow" aria-hidden="true">→</span>
        </a>
        <a class="news-row" href="/updates/">
          <span class="news-time">近两周</span>
          <span class="news-title">周末赛程订阅支持导出为日历文件</span>
          <span class="news-arrow" aria-hidden="true">→</span>
        </a>
        <a class="news-row" href="/updates/">
          <span class="news-time">本赛季</span>
          <span class="news-title">联赛与杯赛专题按赛季节奏持续更新</span>
          <span class="news-arrow" aria-hidden="true">→</span>
        </a>
        <a class="news-row" href="/updates/">
          <span class="news-time">上个月</span>
          <span class="news-title">夜间模式完成一轮配色升级</span>
          <span class="news-arrow" aria-hidden="true">→</span>
        </a>
        <a class="news-row" href="/updates/">
          <span class="news-time">本周</span>
          <span class="news-title">重要比赛日高峰保障机制已启动</span>
          <span class="news-arrow" aria-hidden="true">→</span>
        </a>
      </div>
      <div class="news-footer">
        <a class="text-link" href="/updates/">查看全部更新记录</a>
      </div>
      <div class="start-band">
        <div class="band-copy">
          <span class="band-kicker">NEXT STEP</span>
          <p class="band-title">从体验中心开始，把收藏、订阅和复盘一次排好。</p>
        </div>
        <a class="btn btn-ghost" href="/experience/">进入体验中心</a>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-cut: clamp(16px, 2.4vw, 30px);
  --home-line: rgba(143, 168, 184, 0.28);
  background: var(--ink);
  color: var(--mist);
}

.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 6vw, 76px) 0 clamp(34px, 5vw, 66px);
  border-bottom: 1px solid var(--grid);
}

.page-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
  filter: saturate(0.8) brightness(0.62);
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 107, 26, 0.22), transparent 32%),
    radial-gradient(circle at 82% 22%, rgba(61, 224, 174, 0.10), transparent 26%),
    linear-gradient(112deg, rgba(7, 22, 19, 0.97) 0%, rgba(7, 22, 19, 0.76) 54%, rgba(7, 22, 19, 0.94) 100%);
}

.page-home .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(143, 168, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 168, 184, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, #000, transparent 88%);
}

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

.page-home .hero-crumb {
  margin-bottom: clamp(20px, 4vw, 42px);
  color: var(--slate);
}

.page-home .hero-grid {
  display: grid;
  gap: clamp(26px, 5vw, 54px);
  align-items: end;
}

.page-home .hero-main {
  min-width: 0;
}

.page-home .hero-version {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  margin-bottom: clamp(14px, 2vw, 22px);
}

.page-home .hero-version .data-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(72px, 14vw, 176px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: var(--orange);
  text-shadow: 0 0 36px rgba(255, 107, 26, 0.22);
}

.page-home .version-label {
  display: block;
  padding-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.page-home .hero-title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 6.6vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-home .hero-side {
  min-width: 0;
  padding-bottom: 4px;
}

.page-home .hero-copy {
  max-width: 44ch;
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mist);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-bottom: clamp(24px, 4vw, 38px);
}

.page-home .hero-actions .btn {
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-home .hero-actions .btn:hover {
  transform: translateX(4px);
}

.page-home .hero-secondary {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 122, 0.38);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .hero-secondary:hover {
  color: var(--paper);
  border-bottom-color: var(--orange);
}

.page-home .hero-stats {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--home-line);
}

.page-home .stat-block {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--grid);
}

.page-home .stat-num {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.page-home .stat-label {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.page-home .chapter-jump {
  position: sticky;
  top: var(--header-h);
  z-index: 15;
  border-bottom: 1px solid var(--grid);
  background: rgba(7, 22, 19, 0.93);
  backdrop-filter: blur(8px);
}

.page-home .jump-list {
  display: flex;
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
  padding: 11px 0;
  gap: 8px 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-home .jump-list::-webkit-scrollbar {
  display: none;
}

.page-home .jump-link {
  flex: 0 0 auto;
  padding: 5px 0 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .jump-link:hover {
  color: var(--orange-soft);
  border-bottom-color: var(--orange);
}

.page-home .jump-link:first-child {
  color: var(--paper);
  border-bottom-color: var(--mint);
}

.page-home .home-section {
  padding: clamp(46px, 7vw, 94px) 0;
}

.page-home .version-section {
  background:
    radial-gradient(circle at 86% 8%, rgba(61, 224, 174, 0.06), transparent 24%),
    var(--ink);
}

.page-home .flow-section {
  background: linear-gradient(180deg, var(--ink) 0%, #091b17 36%, var(--ink) 100%);
}

.page-home .trust-section {
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 107, 26, 0.08), transparent 30%),
    var(--ink);
}

.page-home .news-section {
  background: var(--panel);
}

.page-home .section-head {
  display: grid;
  gap: 12px 28px;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--grid);
}

.page-home .head-coord {
  min-width: 0;
}

.page-home .head-coord .chapter-coord {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: clamp(34px, 5.8vw, 76px);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: 0.03em;
  color: rgba(143, 168, 184, 0.28);
}

.page-home .section-lead {
  max-width: 62ch;
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--slate);
}

.page-home .version-layout {
  display: grid;
  gap: clamp(28px, 4vw, 50px);
  align-items: start;
}

.page-home .version-cards {
  min-width: 0;
}

.page-home .version-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(18px, 3vw, 26px) 0;
  border-top: 1px solid var(--grid);
}

.page-home .version-card:last-child {
  border-bottom: 1px solid var(--grid);
}

.page-home .card-index {
  padding-top: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.page-home .card-body {
  min-width: 0;
}

.page-home .version-card-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 1.28;
  color: var(--paper);
}

.page-home .version-card p {
  max-width: 62ch;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--slate);
}

.page-home .version-visual {
  min-width: 0;
  margin: 0;
  background: var(--pine);
  border: 1px solid var(--grid);
  clip-path: polygon(0 0, calc(100% - var(--home-cut)) 0, 100% var(--home-cut), 100% 100%, var(--home-cut) 100%, 0 calc(100% - var(--home-cut)));
  overflow: hidden;
}

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

.page-home .visual-caption {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(143, 168, 184, 0.22);
  background: rgba(14, 42, 36, 0.92);
  font-size: 13px;
  line-height: 1.65;
  color: var(--slate);
}

.page-home .flow-track {
  position: relative;
  display: grid;
  gap: 0;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.page-home .flow-step {
  position: relative;
  padding: 18px 0 18px 24px;
  border-left: 1px solid var(--grid);
}

.page-home .flow-step:first-child {
  border-top: 1px solid var(--grid);
}

.page-home .flow-step:last-child {
  border-bottom: 1px solid var(--grid);
}

.page-home .flow-step::before {
  content: "";
  position: absolute;
  top: 25px;
  left: -4px;
  width: 7px;
  height: 7px;
  background: var(--orange);
  transform: rotate(45deg);
}

.page-home .step-no {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mint);
}

.page-home .step-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--paper);
}

.page-home .flow-step p {
  max-width: 36ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-home .flow-visual {
  margin: 0;
  border: 1px solid var(--grid);
  clip-path: polygon(var(--home-cut) 0, 100% 0, 100% calc(100% - var(--home-cut)), calc(100% - var(--home-cut)) 100%, 0 100%, 0 var(--home-cut));
  overflow: hidden;
  background: var(--brown);
}

.page-home .flow-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.88;
}

.page-home .flow-actions,
.page-home .trust-actions,
.page-home .news-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 22px;
}

.page-home .text-link {
  display: inline-block;
  padding: 3px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 122, 0.4);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .text-link:hover {
  color: var(--paper);
  border-bottom-color: var(--mint);
}

.page-home .text-link--muted {
  color: var(--slate);
  border-bottom-color: rgba(143, 168, 184, 0.4);
}

.page-home .text-link--muted:hover {
  color: var(--mint);
  border-bottom-color: var(--mint);
}

.page-home .trust-layout {
  display: grid;
  gap: clamp(28px, 4vw, 50px);
  align-items: start;
}

.page-home .trust-visual {
  margin: 0;
  border: 1px solid var(--grid);
  background: var(--pine);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--home-cut)), calc(100% - var(--home-cut)) 100%, 0 100%);
  overflow: hidden;
}

.page-home .trust-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  opacity: 0.86;
}

.page-home .trust-copy {
  min-width: 0;
}

.page-home .trust-list {
  border-top: 1px solid var(--grid);
}

.page-home .trust-item {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--grid);
}

.page-home .trust-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

.page-home .trust-item p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--slate);
}

.page-home .news-list {
  border-top: 1px solid var(--grid);
}

.page-home .news-row {
  display: grid;
  gap: 7px;
  padding: 17px 0;
  border-bottom: 1px solid var(--grid);
  color: var(--mist);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.page-home .news-row:hover {
  background: rgba(23, 63, 53, 0.56);
  padding-left: 6px;
}

.page-home .news-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--mint);
}

.page-home .news-title {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--paper);
}

.page-home .news-arrow {
  justify-self: start;
  font-family: var(--font-mono);
  color: var(--orange);
  transition: transform var(--dur) var(--ease);
}

.page-home .news-row:hover .news-arrow {
  transform: translateX(4px);
}

.page-home .start-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: clamp(34px, 5vw, 58px);
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--grid);
  background:
    linear-gradient(100deg, rgba(23, 63, 53, 0.96), rgba(14, 42, 36, 0.96) 56%, rgba(90, 42, 18, 0.82));
  clip-path: polygon(0 0, calc(100% - var(--home-cut)) 0, 100% var(--home-cut), 100% 100%, var(--home-cut) 100%, 0 calc(100% - var(--home-cut)));
}

.page-home .band-copy {
  min-width: 0;
}

.page-home .band-kicker {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--orange-soft);
}

.page-home .band-title {
  max-width: 30ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--paper);
}

.page-home .news-section .start-band .btn {
  flex: 0 0 auto;
}

@media (min-width: 600px) {
  .page-home .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page-home .stat-block {
    padding-left: 16px;
  }

  .page-home .stat-block + .stat-block {
    border-left: 1px solid var(--grid);
  }

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

  .page-home .news-row {
    grid-template-columns: 94px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
  }

  .page-home .news-arrow {
    justify-self: end;
  }
}

@media (min-width: 820px) {
  .page-home .section-head {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

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

  .page-home .flow-step {
    padding: 30px 18px 22px;
    border-left: 0;
    border-top: 1px solid var(--grid);
  }

  .page-home .flow-step:first-child {
    border-top: 1px solid var(--orange);
  }

  .page-home .flow-step:last-child {
    border-bottom: 0;
  }

  .page-home .flow-step::before {
    top: -5px;
    left: 18px;
  }
}

@media (min-width: 960px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(30px, 5vw, 72px);
  }

  .page-home .version-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-home .version-visual {
    position: sticky;
    top: calc(var(--header-h) + 58px);
  }

  .page-home .trust-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-home .news-row {
    grid-template-columns: 112px minmax(0, 1fr) 28px;
    padding: 19px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-actions .btn,
  .page-home .news-row,
  .page-home .news-arrow,
  .page-home .jump-link,
  .page-home .text-link,
  .page-home .hero-secondary {
    transition: none;
  }

  .page-home .hero-actions .btn:hover,
  .page-home .news-row:hover,
  .page-home .news-row:hover .news-arrow {
    transform: none;
  }
}