.page-home {
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
}

.page-home .home-shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.page-home .home-layout {
  display: block;
  padding-top: 1.25rem;
}

.page-home .home-toc-col {
  display: none;
}

.page-home .home-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  padding-bottom: 0.5rem;
}

.page-home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

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

.page-home .hero .h-display {
  margin: 0 0 0.9rem;
  color: var(--ink);
  max-width: 16em;
}

.page-home .hero-lead {
  margin: 0 0 1.4rem;
  max-width: 34em;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-3);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.page-home .hero-stats {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.page-home .hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.page-home .hero-stats .mono-num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.page-home .stat-label {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.page-home .hero-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 200px;
  background: linear-gradient(140deg, var(--ink-2) 0%, var(--indigo) 100%);
  clip-path: var(--clip-panel);
}

.page-home .hero-visual::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -14%;
  width: 62%;
  height: 62%;
  background: linear-gradient(45deg, transparent 0%, rgba(37, 216, 206, 0.45) 100%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.page-home .hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

/* ---------- 索引格 ---------- */
.page-home .index-wrap {
  margin-top: 2.25rem;
}

.page-home .index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.page-home .index-title {
  margin: 0;
  color: var(--ink);
}

.page-home .index-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.page-home .index-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 152px;
  padding: 0.95rem 0.95rem 1rem;
  background: var(--mist);
  color: var(--black);
  text-decoration: none;
  clip-path: var(--clip-panel);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.page-home .index-cell:hover,
.page-home .index-cell:focus-visible {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
  outline: none;
}

.page-home .index-cell:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cyan);
}

.page-home .index-num {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--green-deep);
}

.page-home .index-cell:hover .index-num,
.page-home .index-cell:focus-visible .index-num {
  color: var(--cyan);
}

.page-home .index-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.page-home .index-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.page-home .index-cell:hover .index-desc,
.page-home .index-cell:focus-visible .index-desc {
  color: rgba(248, 251, 250, 0.78);
}

.page-home .index-cell .status-tag {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 关注球队 ---------- */
.page-home .teams {
  margin: 2.5rem 0;
}

.page-home .teams-inner {
  padding: clamp(1.5rem, 4vw, 2.8rem);
  background: linear-gradient(130deg, var(--ink) 0%, var(--indigo) 100%);
  color: var(--paper);
  clip-path: var(--clip-panel);
}

.page-home .teams-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
}

.page-home .teams-copy .h-section {
  margin: 0.5rem 0 0.85rem;
  color: var(--paper);
}

.page-home .teams-copy p {
  margin: 0 0 1rem;
  max-width: 36em;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.86);
}

.page-home .teams-notes {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.page-home .teams-notes li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(248, 251, 250, 0.9);
}

.page-home .teams-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 2px;
  background: var(--green);
}

.page-home .team-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.page-home .favorite-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  cursor: pointer;
}

.page-home .favorite-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .favorite-input:checked ~ .favorite-btn {
  background: var(--cyan);
  color: var(--ink);
}

.page-home .favorite-input:focus-visible ~ .favorite-btn {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-home .favorite-hint {
  display: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cyan);
}

.page-home .favorite-input:checked ~ .favorite-hint {
  display: inline;
}

.page-home .teams-visual {
  position: relative;
  margin: 0;
}

.page-home .teams-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: var(--clip-panel);
}

.page-home .teams-visual .teams-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.9rem;
  z-index: 2;
}

/* ---------- 赛程主题带 ---------- */
.page-home .matchday {
  margin: 2.5rem 0;
}

.page-home .matchday-band {
  position: relative;
  overflow: hidden;
  padding: clamp(1.8rem, 5vw, 3.2rem) clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(120deg, var(--ink) 25%, var(--ink-2) 100%);
  color: var(--paper);
  clip-path: var(--clip-panel);
}

.page-home .matchday-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  pointer-events: none;
}

.page-home .matchday-inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.page-home .matchday-inner .h-section {
  margin: 0.5rem 0 0.85rem;
  color: var(--paper);
}

.page-home .matchday-inner p {
  margin: 0 0 1.3rem;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.88);
}

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

.page-home .matchday-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* ---------- 版本速览 ---------- */
.page-home .versions {
  margin: 2.5rem 0;
}

.page-home .versions-head {
  margin-bottom: 1.25rem;
}

.page-home .versions-head .h-section {
  margin: 0.5rem 0 0.7rem;
  color: var(--ink);
}

.page-home .versions-head p {
  margin: 0;
  max-width: 36em;
  line-height: 1.75;
  color: var(--ink-3);
}

.page-home .version-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  margin-top: 1rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  background: var(--mist);
  border-left: 4px solid var(--green);
  clip-path: var(--clip-panel);
}

.page-home .version-name {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
}

.page-home .version-name .mono-num {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--green-deep);
}

.page-home .version-panel-body p {
  margin: 0;
  line-height: 1.7;
  color: var(--ink-3);
}

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

.page-home .version-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--black);
}

.page-home .version-points li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -0.05em;
  font-family: var(--font-mono);
  color: var(--orange);
  font-weight: 700;
}

.page-home .versions-visual {
  margin: 1.25rem 0 0;
}

.page-home .versions-visual img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: var(--clip-panel);
}

/* ---------- 桌面端费用 ---------- */
.page-home .fees {
  margin: 2.5rem 0;
}

.page-home .fee-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.page-home .fee-card .h-section {
  margin: 0.5rem 0 0.8rem;
}

.page-home .fee-lead {
  margin: 0 0 1.2rem;
  max-width: 40em;
  line-height: 1.8;
  color: rgba(248, 251, 250, 0.86);
}

.page-home .fee-details {
  margin: 0 0 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-invert);
}

.page-home .fee-details summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--cyan);
}

.page-home .fee-details summary::-webkit-details-marker {
  display: none;
}

.page-home .fee-details summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--orange);
}

.page-home .fee-details[open] summary::before {
  content: "\2212";
}

.page-home .fee-details ul {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.88);
}

/* ---------- 团队 ---------- */
.page-home .team {
  margin: 2.5rem 0;
}

.page-home .team-copy .h-section {
  margin: 0.5rem 0 0.8rem;
  color: var(--ink);
}

.page-home .team-copy > p {
  margin: 0 0 1.2rem;
  max-width: 40em;
  line-height: 1.8;
  color: var(--ink-3);
}

.page-home .team-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.4rem;
}

.page-home .stat {
  padding: 0.85rem 0.9rem;
  background: var(--mist);
  clip-path: var(--clip-panel);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.page-home .stat .mono-num {
  font-family: var(--font-mono);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

/* ---------- 联系方式 ---------- */
.page-home .contact-strip {
  margin: 2.5rem 0 0;
  padding: clamp(1.8rem, 4.5vw, 2.8rem) 0;
  background: var(--ink);
  color: var(--paper);
  clip-path: var(--clip-panel);
}

.page-home .contact-inner {
  padding-inline: clamp(1.25rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.page-home .contact-lead .h-section {
  margin: 0.5rem 0 0.7rem;
  color: var(--paper);
}

.page-home .contact-lead p {
  margin: 0;
  max-width: 34em;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.84);
}

.page-home .contact-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.page-home .contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--green);
}

.page-home .contact-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.page-home .contact-legal {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(248, 251, 250, 0.62);
}

/* ---------- 响应式 ---------- */
@media (min-width: 600px) {
  .page-home .index-grid {
    gap: 0.9rem;
  }
  .page-home .contact-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home .team-stats {
    gap: 0.9rem;
  }
}

@media (min-width: 720px) {
  .page-home .index-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .page-home .index-grid > li:nth-child(4n + 1),
  .page-home .index-grid > li:nth-child(4n + 4) {
    transform: translateY(0.55rem);
  }
  .page-home .index-grid > li:nth-child(4n + 2),
  .page-home .index-grid > li:nth-child(4n + 3) {
    transform: translateY(-0.55rem);
  }
  .page-home .version-panel-body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 1.5rem;
  }
  .page-home .team-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 2rem;
  }
  .page-home .hero-visual {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }
  .page-home .teams-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2rem;
  }
  .page-home .contact-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2rem 2.5rem;
    align-items: start;
  }
  .page-home .contact-foot {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}

@media (min-width: 1080px) {
  .page-home .home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 2.5rem;
    align-items: start;
  }
  .page-home .home-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .page-home .home-toc-col {
    display: block;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
  .page-home .hero .h-display {
    max-width: 14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .index-cell,
  .page-home .favorite-btn {
    transition: none;
  }
  .page-home .index-cell:hover,
  .page-home .index-cell:focus-visible {
    transform: none;
  }
}
<<<END>>>

等等，我不能包含 `<<<END>>>`。输出格式规定只能有  和  两个标记。所以我应该只输出这两个之间的内容。

让我重新正确输出。实际上用户已经指定了确切的输出格式。我就按要求的格式输出。

让我把内容重新整理，确保它是正确的。

实际上，我在最后多加了 `<<<END>>>`。让我删除它，只输出要求的两个标记。
<main id="main-content" class="page-home">
  <div class="home-shell">
    <div class="home-layout">
      <aside class="home-toc-col">
        <nav class="toc" data-toc aria-label="本页目录">
          <ol>
            <li><a href="#teams">关注球队</a></li>
            <li><a href="#matchday">赛程与战报</a></li>
            <li><a href="#versions">版本速览</a></li>
            <li><a href="#fees">桌面端费用</a></li>
            <li><a href="#team">团队与节奏</a></li>
            <li><a href="#contact">联系方式</a></li>
          </ol>
        </nav>
      </aside>

      <div class="home-main">

        <p class="home-context">
          <span class="status-tag status-tag--live">官方站点</span>
          <span>小鸟体育赛事内容站</span>
          <span aria-hidden="true">·</span>
          <span>陕西运营</span>
          <span aria-hidden="true">·</span>
          <span>每日两次内容同步</span>
        </p>

        <section class="hero" aria-labelledby="hero-title">
          <div class="hero-grid">
            <div class="hero-text">
              <h1 id="hero-title" class="h-display">找到你的球队，跟上每天的赛程</h1>
              <p class="hero-lead">小鸟体育为中文体育爱好者整理每日赛程与对阵资料，每天两次更新战报。收藏喜欢的球队后，换个设备打开，列表还是原来的样子。</p>
              <div class="hero-actions">
                <a class="btn btn--primary" href="#teams">收藏我的球队</a>
                <a class="btn btn--light" href="/app-download/">下载客户端</a>
              </div>
              <ul class="hero-stats">
                <li><span class="mono-num">86万</span><span class="stat-label">注册用户</span></li>
                <li><span class="mono-num">11万</span><span class="stat-label">日均活跃</span></li>
                <li><span class="mono-num">9</span><span class="stat-label">家数据合作方</span></li>
              </ul>
            </div>
            <div class="hero-visual">
              <img class="hero-img" src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="抽象羽翼线条穿过发光数据网格的示意图">
            </div>
          </div>

          <div class="index-wrap">
            <div class="index-head">
              <h2 class="h-section index-title">从这里开始</h2>
              <span class="status-tag status-tag--sync">八个入口</span>
            </div>
            <ol class="index-grid">
              <li>
                <a class="index-cell" href="/app-download/">
                  <span class="index-num">01</span>
                  <span class="index-name">客户端下载</span>
                  <span class="index-desc">综合版、桌面端与测试版都在这一页</span>
                  <span class="status-tag status-tag--live">已上线</span>
                </a>
              </li>
              <li>
                <a class="index-cell" href="/reports/">
                  <span class="index-num">02</span>
                  <span class="index-name">观察报告</span>
                  <span class="index-desc">每日战报与对阵资料库更新</span>
                  <span class="status-tag status-tag--sync">每日两更</span>
                </a>
              </li>
              <li>
                <a class="index-cell" href="/knowledge/">
                  <span class="index-num">03</span>
                  <span class="index-name">知识中心</span>
                  <span class="index-desc">登录、换设备与收藏费用的常见问题</span>
                  <span class="status-tag status-tag--sync">持续补充</span>
                </a>
              </li>
              <li>
                <a class="index-cell" href="/culture/">
                  <span class="index-num">04</span>
                  <span class="index-name">品牌文化</span>
                  <span class="index-desc">编辑团队与内容背后的工作方法</span>
                  <span class="status-tag status-tag--muted">团队介绍</span>
                </a>
              </li>
              <li>
                <a class="index-cell" href="/inquiry/">
                  <span class="index-num">05</span>
                  <span class="index-name">咨询通道</span>
                  <span class="index-desc">客服邮箱、电话与合作联系</span>
                  <span class="status-tag status-tag--live">工作日回复</span>
                </a>
              </li>
              <li>
                <a class="index-cell" href="/privacy/">
                  <span class="index-num">06</span>
                  <span class="index-name">隐私政策</span>
                  <span class="index-desc">账号、收藏与同步数据怎么处理</span>
                  <span class="status-tag status-tag--muted">说明页</span>
                </a>
              </li>
              <li>
                <a class="index-cell" href="/notice/">
                  <span class="index-num">07</span>
                  <span class="index-name">网站声明</span>
                  <span class="index-desc">内容性质与版本说明</span>
                  <span class="status-tag status-tag--muted">说明页</span>
                </a>
              </li>
              <li>
                <a class="index-cell" href="#teams">
                  <span class="index-num">08</span>
                  <span class="index-name">关注球队</span>
                  <span class="index-desc">一键收藏，换设备同步</span>
                  <span class="status-tag status-tag--live">本月亮相</span>
                </a>
              </li>
            </ol>
          </div>
        </section>

        <section class="teams" id="teams" data-section data-reveal aria-labelledby="teams-title">
          <div class="teams-inner">
            <div class="teams-grid">
              <div class="teams-copy">
                <span class="eyebrow eyebrow--invert">关注球队入口</span>
                <h2 id="teams-title" class="h-section">点一下收藏，换设备也不丢</h2>
                <p>本月初刚完成入口梳理：进入任意球队页，点右上角的收藏键，球队就写进你的账号。手机上看完、回家用桌面端打开，同一个账号在 3 台设备内收藏保持一致。</p>
                <ul class="teams-notes">
                  <li>收藏状态在本机即时显示，不用刷新页面</li>
                  <li>换手机后重新登录，收藏列表自动拉回来</li>
                  <li>桌面端与移动端共用同一份关注列表</li>
                </ul>
                <div class="team-toggle-row">
                  <label class="favorite-toggle">
                    <input type="checkbox" class="favorite-input">
                    <span class="btn btn--primary favorite-btn">收藏我的主队</span>
                    <span class="favorite-hint">已收藏，换设备登录后仍在</span>
                  </label>
                </div>
              </div>
              <figure class="teams-visual">
                <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="低角度运动抓拍人物局部去色后与绿色轨迹叠加的画面" loading="lazy" decoding="async">
                <figcaption class="float-badge teams-badge">3 台设备内同步</figcaption>
              </figure>
            </div>
          </div>
        </section>

        <div class="wing-divider" aria-hidden="true"></div>

        <section class="matchday" id="matchday" data-section aria-labelledby="matchday-title">
          <div class="matchday-band">
            <img class="matchday-bg" src="{zhanqunpic:h:480w:1920}" width="1920" height="480" alt="俯视球场草皮与线条的低对比纹理" loading="lazy" decoding="async">
            <div class="matchday-inner">
              <span class="eyebrow eyebrow--invert">今日赛程与战报</span>
              <h2 id="matchday-title" class="h-section">早间 07:30、晚间 19:30，两次推送到你面前</h2>
              <p>对阵资料库覆盖 46 个联赛与杯赛，日程、对阵历史与基础统计放在一处。战报专栏跟着两个时间点走，每次补上新增战报与资料修订，早上出门前和晚饭后都能刷到最新一场。</p>
              <a class="btn btn--accent" href="/reports/">查看观察报告</a>
            </div>
            <div class="float-badge matchday-badge">46 个联赛与杯赛</div>
          </div>
        </section>

        <section class="versions" id="versions" data-section data-reveal aria-labelledby="versions-title">
          <div class="versions-head">
            <span class="eyebrow">两个版本速览</span>
            <h2 id="versions-title" class="h-section">先看清登录周期，再决定装哪个</h2>
            <p>综合版与测试版并行维护，共用同一套账号。切换下面的标签，就能看到两边的登录节奏差在哪。</p>
          </div>
          <div class="segmented" data-segmented>
            <div class="segmented-tabs" role="tablist" aria-label="版本切换">
              <button type="button" role="tab" class="segmented-tab" id="tab-v42" data-segment="v42" aria-controls="ver-v42" aria-selected="true">综合版 V4.2</button>
              <button type="button" role="tab" class="segmented-tab" id="tab-v43" data-segment="v43" aria-controls="ver-v43" aria-selected="false" tabindex="-1">测试版 V4.3-beta</button>
            </div>
            <div class="segmented-panel" role="tabpanel" data-segment-panel id="ver-v42" aria-labelledby="tab-v42">
              <div class="version-panel-body">
                <div>
                  <h3 class="version-name">综合版 <span class="mono-num">V4.2</span></h3>
                  <p>登录状态保持更久，适合每天固定看球的节奏。</p>
                </div>
                <ul class="version-points">
                  <li>登录周期更长，日常打开不用反复输入</li>
                  <li>关注球队与收藏记录在这里集中同步</li>
                  <li>桌面端与移动端共用同一个账号</li>
                  <li>重登记录与收藏费用可在同一视图里对照</li>
                </ul>
              </div>
            </div>
            <div class="segmented-panel" role="tabpanel" data-segment-panel id="ver-v43" aria-labelledby="tab-v43" hidden>
              <div class="version-panel-body">
                <div>
                  <h3 class="version-name">测试版 <span class="mono-num">V4.3-beta</span></h3>
                  <p>先一步验证新能力，登录周期比综合版短。</p>
                </div>
                <ul class="version-points">
                  <li>登录周期更短，适合愿意频繁确认登录状态的人</li>
                  <li>先一步试用还在打磨中的功能</li>
                  <li>与综合版并行维护，共用同一账号体系</li>
                  <li>换设备重登的耗时对照可在版本视图查看</li>
                </ul>
              </div>
            </div>
          </div>
          <figure class="versions-visual">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="控制台式数据面板展示两条版本时间线的示意图" loading="lazy" decoding="async">
          </figure>
        </section>

        <section class="fees" id="fees" data-section aria-labelledby="fees-title">
          <div class="panel panel--ink fee-card">
            <span class="eyebrow eyebrow--invert">桌面端收藏</span>
            <h2 id="fees-title" class="h-section">桌面端赛事收藏费用说明</h2>
            <p class="fee-lead">桌面端的赛事收藏单独列出费用说明，构成、计费周期与查询路径各占一块，进入客户端下载页就能逐项对照。</p>
            <details class="fee-details">
              <summary>展开费用构成与查询方式</summary>
              <ul>
                <li>费用构成：收藏位、同步范围与计费周期分项列出</li>
                <li>计费周期：按版本对照视图展示，综合版与桌面端分开看</li>
                <li>重登记录与收藏费用并排显示，方便对照两个版本的差异</li>
                <li>查询路径：客户端下载页单独成卡，进入后可直接查看</li>
              </ul>
            </details>
            <a class="btn btn--ghost" href="/app-download/">前往客户端下载页</a>
          </div>
        </section>

        <section class="team" id="team" data-section aria-labelledby="team-title">
          <div class="team-copy">
            <span class="eyebrow">团队与更新节奏</span>
            <h2 id="team-title" class="h-section">一支留在西安的内容队伍</h2>
            <p>西安的团队长期负责内容采集、数据标注与版本维护。每天两个时间点各同步一次，赛事编辑、数据标注、产品技术与运营支持分工明确，战报和资料库跟着这个节奏走。</p>
            <div class="team-stats">
              <div class="stat">
                <span class="mono-num">42</span>
                <span class="stat-label">位成员</span>
              </div>
              <div class="stat">
                <span class="mono-num">18</span>
                <span class="stat-label">位赛事编辑</span>
              </div>
              <div class="stat">
                <span class="mono-num">9</span>
                <span class="stat-label">位数据标注</span>
              </div>
              <div class="stat">
                <span class="mono-num">11</span>
                <span class="stat-label">位产品技术</span>
              </div>
            </div>
            <a class="btn btn--light" href="/culture/">认识编辑团队</a>
          </div>
        </section>

        <section class="contact-strip" id="contact" data-section aria-labelledby="contact-title">
          <div class="contact-inner">
            <div class="contact-lead">
              <span class="eyebrow eyebrow--invert">联系方式</span>
              <h2 id="contact-title" class="h-section">有问题，工作日直接找我们</h2>
              <p>客服邮箱在工作日 9:00-18:00 内回复。合作与媒体咨询请在邮件主题注明“合作”或“媒体”，便于分派给对应同事。</p>
            </div>
            <div class="contact-cols">
              <div class="contact-item">
                <span class="contact-key">客服邮箱</span>
                <a class="contact-val" href="mailto:email@birdiesports-xiaoniao.com.cn">email@birdiesports-xiaoniao.com.cn</a>
              </div>
              <div class="contact-item">
                <span class="contact-key">客服电话</span>
                <a class="contact-val" href="tel:13951810158">13951810158</a>
              </div>
              <div class="contact-item">
                <span class="contact-key">联系地址</span>
                <span class="contact-val contact-val--text">陕西省西安市雁塔区科技路38号</span>
              </div>
            </div>
            <div class="contact-foot">
              <a class="btn btn--accent" href="/inquiry/">前往咨询通道</a>
              <span class="contact-legal">陕ICP备95168724号</span>
            </div>
          </div>
        </section>

      </div>
    </div>
  </div>
</main>

.page-home {
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
}

.page-home .home-shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.page-home .home-layout {
  display: block;
  padding-top: 1.25rem;
}

.page-home .home-toc-col {
  display: none;
}

.page-home .home-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  padding-bottom: 0.5rem;
}

.page-home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

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

.page-home .hero .h-display {
  margin: 0 0 0.9rem;
  color: var(--ink);
  max-width: 16em;
}

.page-home .hero-lead {
  margin: 0 0 1.4rem;
  max-width: 34em;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-3);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.page-home .hero-stats {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.page-home .hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.page-home .hero-stats .mono-num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.page-home .stat-label {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.page-home .hero-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 200px;
  background: linear-gradient(140deg, var(--ink-2) 0%, var(--indigo) 100%);
  clip-path: var(--clip-panel);
}

.page-home .hero-visual::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -14%;
  width: 62%;
  height: 62%;
  background: linear-gradient(45deg, transparent 0%, rgba(37, 216, 206, 0.45) 100%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.page-home .hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

/* ---------- 索引格 ---------- */
.page-home .index-wrap {
  margin-top: 2.25rem;
}

.page-home .index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.page-home .index-title {
  margin: 0;
  color: var(--ink);
}

.page-home .index-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.page-home .index-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 152px;
  padding: 0.95rem 0.95rem 1rem;
  background: var(--mist);
  color: var(--black);
  text-decoration: none;
  clip-path: var(--clip-panel);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.page-home .index-cell:hover,
.page-home .index-cell:focus-visible {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
  outline: none;
}

.page-home .index-cell:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cyan);
}

.page-home .index-num {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--green-deep);
}

.page-home .index-cell:hover .index-num,
.page-home .index-cell:focus-visible .index-num {
  color: var(--cyan);
}

.page-home .index-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.page-home .index-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.page-home .index-cell:hover .index-desc,
.page-home .index-cell:focus-visible .index-desc {
  color: rgba(248, 251, 250, 0.78);
}

.page-home .index-cell .status-tag {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 关注球队 ---------- */
.page-home .teams {
  margin: 2.5rem 0;
}

.page-home .teams-inner {
  padding: clamp(1.5rem, 4vw, 2.8rem);
  background: linear-gradient(130deg, var(--ink) 0%, var(--indigo) 100%);
  color: var(--paper);
  clip-path: var(--clip-panel);
}

.page-home .teams-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
}

.page-home .teams-copy .h-section {
  margin: 0.5rem 0 0.85rem;
  color: var(--paper);
}

.page-home .teams-copy p {
  margin: 0 0 1rem;
  max-width: 36em;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.86);
}

.page-home .teams-notes {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.page-home .teams-notes li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(248, 251, 250, 0.9);
}

.page-home .teams-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 2px;
  background: var(--green);
}

.page-home .team-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.page-home .favorite-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  cursor: pointer;
}

.page-home .favorite-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .favorite-input:checked ~ .favorite-btn {
  background: var(--cyan);
  color: var(--ink);
}

.page-home .favorite-input:focus-visible ~ .favorite-btn {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-home .favorite-hint {
  display: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cyan);
}

.page-home .favorite-input:checked ~ .favorite-hint {
  display: inline;
}

.page-home .teams-visual {
  position: relative;
  margin: 0;
}

.page-home .teams-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: var(--clip-panel);
}

.page-home .teams-visual .teams-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.9rem;
  z-index: 2;
}

/* ---------- 赛程主题带 ---------- */
.page-home .matchday {
  margin: 2.5rem 0;
}

.page-home .matchday-band {
  position: relative;
  overflow: hidden;
  padding: clamp(1.8rem, 5vw, 3.2rem) clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(120deg, var(--ink) 25%, var(--ink-2) 100%);
  color: var(--paper);
  clip-path: var(--clip-panel);
}

.page-home .matchday-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  pointer-events: none;
}

.page-home .matchday-inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.page-home .matchday-inner .h-section {
  margin: 0.5rem 0 0.85rem;
  color: var(--paper);
}

.page-home .matchday-inner p {
  margin: 0 0 1.3rem;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.88);
}

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

.page-home .matchday-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* ---------- 版本速览 ---------- */
.page-home .versions {
  margin: 2.5rem 0;
}

.page-home .versions-head {
  margin-bottom: 1.25rem;
}

.page-home .versions-head .h-section {
  margin: 0.5rem 0 0.7rem;
  color: var(--ink);
}

.page-home .versions-head p {
  margin: 0;
  max-width: 36em;
  line-height: 1.75;
  color: var(--ink-3);
}

.page-home .version-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  margin-top: 1rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  background: var(--mist);
  border-left: 4px solid var(--green);
  clip-path: var(--clip-panel);
}

.page-home .version-name {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
}

.page-home .version-name .mono-num {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--green-deep);
}

.page-home .version-panel-body p {
  margin: 0;
  line-height: 1.7;
  color: var(--ink-3);
}

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

.page-home .version-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--black);
}

.page-home .version-points li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -0.05em;
  font-family: var(--font-mono);
  color: var(--orange);
  font-weight: 700;
}

.page-home .versions-visual {
  margin: 1.25rem 0 0;
}

.page-home .versions-visual img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: var(--clip-panel);
}

/* ---------- 桌面端费用 ---------- */
.page-home .fees {
  margin: 2.5rem 0;
}

.page-home .fee-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.page-home .fee-card .h-section {
  margin: 0.5rem 0 0.8rem;
}

.page-home .fee-lead {
  margin: 0 0 1.2rem;
  max-width: 40em;
  line-height: 1.8;
  color: rgba(248, 251, 250, 0.86);
}

.page-home .fee-details {
  margin: 0 0 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-invert);
}

.page-home .fee-details summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--cyan);
}

.page-home .fee-details summary::-webkit-details-marker {
  display: none;
}

.page-home .fee-details summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--orange);
}

.page-home .fee-details[open] summary::before {
  content: "−";
}

.page-home .fee-details ul {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.88);
}

/* ---------- 团队 ---------- */
.page-home .team {
  margin: 2.5rem 0;
}

.page-home .team-copy .h-section {
  margin: 0.5rem 0 0.8rem;
  color: var(--ink);
}

.page-home .team-copy > p {
  margin: 0 0 1.2rem;
  max-width: 40em;
  line-height: 1.8;
  color: var(--ink-3);
}

.page-home .team-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.4rem;
}

.page-home .stat {
  padding: 0.85rem 0.9rem;
  background: var(--mist);
  clip-path: var(--clip-panel);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.page-home .stat .mono-num {
  font-family: var(--font-mono);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

/* ---------- 联系方式 ---------- */
.page-home .contact-strip {
  margin: 2.5rem 0 0;
  padding: clamp(1.8rem, 4.5vw, 2.8rem) 0;
  background: var(--ink);
  color: var(--paper);
  clip-path: var(--clip-panel);
}

.page-home .contact-inner {
  padding-inline: clamp(1.25rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.page-home .contact-lead .h-section {
  margin: 0.5rem 0 0.7rem;
  color: var(--paper);
}

.page-home .contact-lead p {
  margin: 0;
  max-width: 34em;
  line-height: 1.75;
  color: rgba(248, 251, 250, 0.84);
}

.page-home .contact-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.page-home .contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--green);
}

.page-home .contact-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.page-home .contact-legal {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(248, 251, 250, 0.62);
}

/* ---------- 响应式 ---------- */
@media (min-width: 600px) {
  .page-home .index-grid {
    gap: 0.9rem;
  }
  .page-home .contact-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home .team-stats {
    gap: 0.9rem;
  }
}

@media (min-width: 720px) {
  .page-home .index-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .page-home .index-grid > li:nth-child(4n + 1),
  .page-home .index-grid > li:nth-child(4n + 4) {
    transform: translateY(0.55rem);
  }
  .page-home .index-grid > li:nth-child(4n + 2),
  .page-home .index-grid > li:nth-child(4n + 3) {
    transform: translateY(-0.55rem);
  }
  .page-home .version-panel-body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 1.5rem;
  }
  .page-home .team-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 2rem;
  }
  .page-home .hero-visual {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }
  .page-home .teams-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2rem;
  }
  .page-home .contact-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2rem 2.5rem;
    align-items: start;
  }
  .page-home .contact-foot {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}

@media (min-width: 1080px) {
  .page-home .home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 2.5rem;
    align-items: start;
  }
  .page-home .home-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .page-home .home-toc-col {
    display: block;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
  .page-home .hero .h-display {
    max-width: 14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .index-cell,
  .page-home .favorite-btn {
    transition: none;
  }
  .page-home .index-cell:hover,
  .page-home .index-cell:focus-visible {
    transform: none;
  }
}