.page-home {
  --home-pad: clamp(48px, 7vw, 96px);
  --home-shadow: 0 22px 44px -34px rgba(14, 34, 56, .55);
  background: var(--fx-paper);
  color: var(--fx-black);
}

.page-home .fx-section {
  padding-block: var(--home-pad);
}

.page-home .home-crumb {
  padding-top: 14px;
  background: var(--fx-paper);
}

.page-home .home-head {
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-home .home-head .fx-num {
  margin: 0 0 10px;
}

.page-home .home-head h2 {
  margin: 0 0 14px;
}

.page-home .home-head p {
  margin: 0;
  max-width: 36em;
}

.page-home .home-head--wide p {
  max-width: 44em;
}

/* 01 首屏分屏 */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding-block: 0;
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--fx-orange), var(--fx-wine));
}

.page-home .home-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  padding-block: clamp(30px, 5vw, 56px) clamp(38px, 6vw, 80px);
}

.page-home .home-hero__copy {
  max-width: 40rem;
}

.page-home .home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.page-home .home-hero__title {
  margin: 14px 0 18px;
  color: var(--fx-ink);
  letter-spacing: -.02em;
}

.page-home .home-hero__accent {
  display: block;
  color: var(--fx-orange);
}

.page-home .home-hero__lede {
  max-width: 33em;
  margin: 0;
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-home .home-hero__facts {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--fx-line);
  list-style: none;
}

.page-home .home-hero__facts li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fx-mist);
}

.page-home .home-hero__facts .fx-mono {
  display: block;
  margin-bottom: 2px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fx-ink);
}

.page-home .home-hero__jump {
  margin: 22px 0 0;
  font-size: 14px;
}

.page-home .home-hero__visual {
  position: relative;
  overflow: hidden;
  background: var(--fx-ink);
  border-radius: 2px 2px 44px 2px;
  box-shadow: var(--home-shadow);
}

.page-home .home-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: .58;
}

.page-home .home-hero__trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-home .home-hero__curve {
  stroke-dasharray: 880;
  stroke-dashoffset: 880;
  animation: home-draw 1.7s var(--fx-ease) .2s forwards;
}

@keyframes home-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.page-home .home-hero__caption {
  position: absolute;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  margin: 0;
  font-family: var(--fx-font-serif);
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(250, 246, 239, .74);
}

/* 02 运动项目分区 */
.page-home .home-sports {
  background: var(--fx-paper-2);
  border-block: 1px solid var(--fx-line);
}

.page-home .home-sports__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--fx-line);
  border-block: 1px solid var(--fx-line);
}

.page-home .home-sports__item {
  background: var(--fx-paper-3);
  padding: clamp(16px, 2.6vw, 24px);
  transition: background .2s var(--fx-ease);
}

.page-home .home-sports__item a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.page-home .home-sports__index {
  font-family: var(--fx-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--fx-orange);
}

.page-home .home-sports__name {
  margin: 6px 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--fx-ink);
}

.page-home .home-sports__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--fx-mist);
}

.page-home .home-sports__item:hover {
  background: #fff;
}

.page-home .home-sports__item:hover .home-sports__name {
  color: var(--fx-orange-deep);
}

/* 图片带 */
.page-home .home-band {
  margin: clamp(26px, 4vw, 46px) 0 0;
  display: grid;
  gap: 10px;
}

.page-home .home-band__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 2px 2px 28px 2px;
  background: var(--fx-paper-2);
}

.page-home .home-band__cap {
  font-family: var(--fx-font-serif);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .08em;
  color: var(--fx-mist);
}

/* 03 查询与战报 */
.page-home .home-query {
  background: var(--fx-ink);
  color: var(--fx-paper);
}

.page-home .home-query .fx-title,
.page-home .home-query .fx-num {
  color: var(--fx-paper);
}

.page-home .home-query .fx-num {
  color: var(--fx-orange-soft);
}

.page-home .home-query .fx-lede {
  color: var(--fx-on-dark);
}

.page-home .home-query__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-home .home-query__intro p {
  margin-block: 0 14px;
}

.page-home .home-query__note {
  font-family: var(--fx-font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--fx-orange-soft);
  padding-left: 14px;
  border-left: 2px solid var(--fx-teal);
}

.page-home .home-query__intro .fx-btn {
  margin-top: 8px;
}

.page-home .home-query__panel {
  display: grid;
  gap: 16px;
}

.page-home .home-query__box {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  background: rgba(250, 246, 239, .06);
  border: 1px solid rgba(250, 246, 239, .18);
}

.page-home .home-query__box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--fx-teal);
}

.page-home .home-query__box--alt::before {
  background: var(--fx-orange);
}

.page-home .home-query__box h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--fx-paper);
}

.page-home .home-query__box p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fx-on-dark);
}

.page-home .home-query__box .fx-btn--ghost {
  color: var(--fx-paper);
  border-color: rgba(250, 246, 239, .5);
}

.page-home .home-query__box .fx-btn--ghost:hover {
  border-color: var(--fx-paper);
}

/* 04 主客场双栏 */
.page-home .home-split {
  background: var(--fx-paper);
}

.page-home .home-split__grid {
  display: grid;
  gap: 1px;
  background: var(--fx-line-strong);
  border: 1px solid var(--fx-line-strong);
}

.page-home .home-split__col {
  background: var(--fx-paper-3);
  padding: clamp(20px, 3.4vw, 36px);
}

.page-home .home-split__col--home {
  border-top: 4px solid var(--fx-teal);
}

.page-home .home-split__col--away {
  border-top: 4px solid var(--fx-orange);
}

.page-home .home-split__label {
  margin: 0 0 6px;
  font-family: var(--fx-font-mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--fx-mist);
}

.page-home .home-split__title {
  margin: 0 0 18px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--fx-ink);
}

.page-home .home-split__list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-split__list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--fx-black);
}

.page-home .home-split__list .fx-mono {
  font-size: 12px;
  color: var(--fx-mist);
  padding-top: 3px;
}

/* 05 安装与设备切换 */
.page-home .home-install {
  background: var(--fx-paper-2);
  border-block: 1px solid var(--fx-line);
}

.page-home .home-install__grid {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}

.page-home .home-install__card {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  background: var(--fx-paper-3);
  border: 1px solid var(--fx-line);
  box-shadow: var(--home-shadow);
}

.page-home .home-install__card::after {
  content: "";
  position: absolute;
  inset: auto 14px -7px 14px;
  height: 7px;
  background: var(--fx-paper-2);
  border: 1px solid var(--fx-line);
  border-top: 0;
}

.page-home .home-install__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  font-family: var(--fx-font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--fx-paper);
  background: var(--fx-orange);
}

.page-home .home-install__tag--teal {
  background: var(--fx-teal);
}

.page-home .home-install__title {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.6vw, 25px);
  color: var(--fx-ink);
}

.page-home .home-install__text {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fx-black);
}

.page-home .home-install__text--muted {
  color: var(--fx-mist);
  font-size: 13.5px;
}

.page-home .home-install__spec {
  margin: 0 0 16px;
  padding: 14px 0;
  border-block: 1px dashed var(--fx-line-strong);
}

.page-home .home-install__spec-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
}

.page-home .home-install__spec-row dt {
  font-family: var(--fx-font-mono);
  color: var(--fx-ink);
  font-weight: 600;
}

.page-home .home-install__spec-row dd {
  margin: 0;
  color: var(--fx-mist);
}

.page-home .home-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.page-home .home-steps li {
  padding: 10px 0 0;
  border-top: 2px solid var(--fx-orange-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fx-ink);
}

.page-home .home-steps__n {
  display: block;
  margin-bottom: 3px;
  font-family: var(--fx-font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--fx-orange);
}

.page-home .home-band--device {
  margin-top: clamp(30px, 5vw, 52px);
}

/* 06 内容目录 */
.page-home .home-catalog {
  background: var(--fx-indigo);
  color: var(--fx-paper);
}

.page-home .home-catalog .fx-title {
  color: var(--fx-paper);
}

.page-home .home-catalog .fx-num {
  color: var(--fx-sand);
}

.page-home .home-catalog .fx-lede {
  color: var(--fx-on-dark);
}

.page-home .home-catalog__issues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: 0;
  list-style: none;
}

.page-home .home-catalog__issue {
  min-width: 48px;
  padding: 9px 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(250, 246, 239, .74);
  border: 1px solid rgba(250, 246, 239, .26);
}

.page-home .home-catalog__issue--current {
  background: var(--fx-orange);
  border-color: var(--fx-orange);
  color: var(--fx-paper);
  font-weight: 700;
}

.page-home .home-catalog__topics {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(250, 246, 239, .2);
  border: 1px solid rgba(250, 246, 239, .2);
}

.page-home .home-catalog__topic {
  background: rgba(250, 246, 239, .06);
  padding: clamp(16px, 2.4vw, 22px);
}

.page-home .home-catalog__topic-name {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--fx-paper);
}

.page-home .home-catalog__topic-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(250, 246, 239, .72);
}

.page-home .home-catalog__filter {
  margin: clamp(20px, 3vw, 28px) 0 20px;
  max-width: 40em;
  font-size: 14px;
  line-height: 1.78;
  color: var(--fx-on-dark);
}

/* 07 信任收束 */
.page-home .home-trust {
  background: var(--fx-wine);
  color: var(--fx-paper);
}

.page-home .home-trust .fx-title {
  color: var(--fx-paper);
}

.page-home .home-trust .fx-num {
  color: var(--fx-sand);
}

.page-home .home-trust .fx-lede {
  color: rgba(250, 246, 239, .82);
}

.page-home .home-trust__stats {
  display: grid;
  gap: 16px;
  margin: 0 0 clamp(26px, 4vw, 40px);
  padding: 22px 0;
  border-block: 1px solid rgba(250, 246, 239, .26);
}

.page-home .home-trust__stats .fx-stat__value {
  color: var(--fx-paper);
  font-family: var(--fx-font-mono);
}

.page-home .home-trust__stats .fx-stat__label {
  color: rgba(250, 246, 239, .72);
}

.page-home .home-trust__body p {
  margin: 0 0 16px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(250, 246, 239, .86);
}

.page-home .home-trust__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 246, 239, .26);
}

.page-home .home-trust__actions .fx-link {
  color: var(--fx-paper);
  border-bottom: 2px solid var(--fx-sand);
  padding-bottom: 2px;
}

/* 响应式 */
@media (min-width: 560px) {
  .page-home .home-hero__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .page-home .home-sports__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-home .home-trust__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 720px) {
  .page-home .home-query__panel {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .home-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .page-home .home-steps li {
    font-size: 11.5px;
    padding-right: 6px;
  }

  .page-home .home-catalog__topics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .page-home .home-hero__grid {
    grid-template-columns: 1.06fr .94fr;
    align-items: center;
  }

  .page-home .home-hero__visual {
    margin-right: calc(var(--fx-gutter) * -0.5);
  }

  .page-home .home-sports__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-home .home-install__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .page-home .home-install__card:nth-child(2) {
    margin-top: 28px;
  }
}

@media (min-width: 960px) {
  .page-home .home-query__grid {
    grid-template-columns: .92fr 1.08fr;
    align-items: start;
  }

  .page-home .home-split__grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .home-trust__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-hero__curve {
    animation: none;
    stroke-dashoffset: 0;
  }

  .page-home .home-sports__item {
    transition: none;
  }
}

已被使用。请勿重复。

实际上我需要在最后再核对一次：main_html 里用了 `fx-lede`、`fx-title`、`fx-num`、`fx-btn`、`fx-btn--primary`、`fx-btn--ghost`、`fx-link`、`fx-breadcrumb*`、`fx-section`、`fx-stat*`、`fx-container`、`fx-eyebrow`、`fx-mono`。所有页面专属类都在 CSS 中定义了：home-crumb, home-head, home-head--wide, home-hero, home-hero__grid, home-hero__copy, home-hero__eyebrow, home-hero__title, home-hero__accent, home-hero__lede, home-hero__actions, home-hero__facts, home-hero__jump, home-hero__visual, home-hero__trace, home-hero__curve, home-hero__caption, home-sports, home-sports__list, home-sports__item, home-sports__index, home-sports__name, home-sports__desc, home-band, home-band__img, home-band__cap, home-band--device, home-band--chart, home-query, home-query__grid, home-query__intro, home-query__note, home-query__panel, home-query__box, home-query__box--alt, home-split, home-split__grid, home-split__col, home-split__col--home, home-split__col--away, home-split__label, home-split__title, home-split__list, home-install, home-install__grid, home-install__card, home-install__tag, home-install__tag--teal, home-install__title, home-install__text, home-install__text--muted, home-install__spec, home-install__spec-row, home-steps, home-steps__n, home-catalog, home-catalog__issues, home-catalog__issue, home-catalog__issue--current, home-catalog__topics, home-catalog__topic, home-catalog__topic-name, home-catalog__topic-desc, home-catalog__filter, home-trust, home-trust__stats, home-trust__body, home-trust__actions.

home-band--chart 我没在 CSS 中定义！需要加上。我在 CSS 里只有 .home-band--device。加个 .home-band--chart 定义（比如不同圆角或宽度）。我需要在输出前补上。让我在 CSS 中加入：

.page-home .home-band--chart { margin-top: clamp(28px, 4vw, 44px); }
.page-home .home-band--chart .home-band__img { border-radius: 2px; }

好，我把这段加到 band--device 附近。同时确认 home-band--device 有定义（有）。

输出最终版本。注意 PAGE_CSS 标记只出现一次。我会把上面的重复标记问题避免掉。重新组织输出。
<main id="main-content" class="page-home">
  <nav class="fx-breadcrumb home-crumb" aria-label="页面位置">
    <div class="fx-container">
      <ol class="fx-breadcrumb__list">
        <li class="fx-breadcrumb__item"><a class="fx-breadcrumb__link" href="/">首页</a></li>
        <li class="fx-breadcrumb__item" aria-current="page">官方主站与移动端安装入口</li>
      </ol>
    </div>
  </nav>

  <section class="fx-section home-hero" aria-labelledby="hero-title">
    <div class="fx-container home-hero__grid">
      <div class="home-hero__copy">
        <p class="fx-eyebrow home-hero__eyebrow"><span class="fx-mono">01</span> 凤凰体育安装 · 官方主站</p>
        <h1 id="hero-title" class="fx-display home-hero__title">装好就开看，<span class="home-hero__accent">赛事和比分都在手边</span></h1>
        <p class="fx-lede home-hero__lede">凤凰体育面向华人球迷提供赛事资讯与移动端安装指引。扫码或到应用市场装好之后，首页按运动项目分区展开，主客场表现单独成栏，换台手机重新登录就能把关注的球队带回来。</p>
        <div class="home-hero__actions">
          <a class="fx-btn fx-btn--primary" href="/platform/">进入安装指引</a>
          <a class="fx-btn fx-btn--ghost" href="/articles/">看赛事战报</a>
        </div>
        <ul class="home-hero__facts">
          <li><span class="fx-mono">8</span>运动项目独立分区</li>
          <li><span class="fx-mono">3</span>扫码、应用市场、浏览器下载</li>
          <li><span class="fx-mono">9:00–18:00</span>工作日客服邮箱回复</li>
        </ul>
        <p class="home-hero__jump"><a class="fx-link" href="#query">跳过介绍，直接找赛事查询入口</a></p>
      </div>
      <div class="home-hero__visual">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="抽象球场线条与橙红运动轨迹构成的主视觉，画面中没有人脸">
        <svg class="home-hero__trace" viewBox="0 0 600 340" aria-hidden="true" focusable="false" role="presentation">
          <g fill="none" stroke="rgba(250,246,239,.22)" stroke-width="1.4">
            <rect x="42" y="42" width="516" height="256" rx="4"></rect>
            <path d="M42 170h516"></path>
            <circle cx="300" cy="170" r="66"></circle>
            <path d="M42 96h64v148H42"></path>
            <path d="M558 96h-64v148h64"></path>
          </g>
          <path class="home-hero__curve" d="M24 286C148 286 152 92 302 92s152 186 274 124" fill="none" stroke="var(--fx-orange)" stroke-width="3" stroke-linecap="round"></path>
          <circle cx="302" cy="92" r="6.5" fill="var(--fx-teal)"></circle>
          <circle cx="24" cy="286" r="5" fill="var(--fx-sand)"></circle>
        </svg>
        <p class="home-hero__caption">赛场轨迹 · 主客场数据 · 移动端界面</p>
      </div>
    </div>
  </section>

  <section class="fx-section home-sports" id="sports" aria-labelledby="sports-title" data-reveal>
    <div class="fx-container">
      <div class="home-head">
        <p class="fx-num">02</p>
        <h2 id="sports-title" class="fx-title">八个项目，各有各的分区</h2>
        <p class="fx-lede">进站先选项目，不用在信息流里翻找。每个分区固定收着战报、赛程和球队动态，关注哪一项就停在哪一项。</p>
      </div>
      <ul class="home-sports__list">
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">01</span>
            <p class="home-sports__name">足球</p>
            <p class="home-sports__desc">联赛、杯赛与国家队赛程分线呈现，主客场战绩分开统计。</p>
          </a>
        </li>
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">02</span>
            <p class="home-sports__name">篮球</p>
            <p class="home-sports__desc">常规赛与季后赛战报同步更新，伤停名单跟战报一起给出。</p>
          </a>
        </li>
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">03</span>
            <p class="home-sports__name">网球</p>
            <p class="home-sports__desc">单打双打签表与赛果对照排列，重点场次附技术统计。</p>
          </a>
        </li>
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">04</span>
            <p class="home-sports__name">羽毛球</p>
            <p class="home-sports__desc">巡回赛与团体赛赛程齐备，历史对阵记录按选手归档。</p>
          </a>
        </li>
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">05</span>
            <p class="home-sports__name">田径</p>
            <p class="home-sports__desc">分站赛成绩与纪录并排查看，短跑与中长跑分项排列。</p>
          </a>
        </li>
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">06</span>
            <p class="home-sports__name">赛车</p>
            <p class="home-sports__desc">排位与正赛结果分栏，车队积分随每个分站滚动更新。</p>
          </a>
        </li>
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">07</span>
            <p class="home-sports__name">搏击</p>
            <p class="home-sports__desc">对阵卡与回合结果完整记录，赛前称重信息同时到位。</p>
          </a>
        </li>
        <li class="home-sports__item">
          <a href="/articles/">
            <span class="home-sports__index">08</span>
            <p class="home-sports__name">排球</p>
            <p class="home-sports__desc">联赛与杯赛按轮次推演，主客场胜率单独成一栏。</p>
          </a>
        </li>
      </ul>
      <figure class="home-band">
        <img class="home-band__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="对角线构图的球场线条与奔跑剪影，背光拍摄，无可识别面孔" loading="lazy" decoding="async">
        <figcaption class="home-band__cap">赛事瞬间以动势取景，每场比赛的结果与过程分别归档</figcaption>
      </figure>
    </div>
  </section>

  <section class="fx-section home-query" id="query" aria-labelledby="query-title" data-reveal>
    <div class="fx-container home-query__grid">
      <div class="home-query__intro">
        <p class="fx-num">03</p>
        <h2 id="query-title" class="fx-title">开赛前，把该查的都查清</h2>
        <p class="fx-lede">想知道今晚几点开打、两队上一次碰面是什么结果、主力有没有伤停，从查询入口进去按项目或球队筛一遍就有答案。赛后回来还能看到完整战报。</p>
        <p class="home-query__note">赛事快讯 30 分钟内上线，战报在赛后 2 小时内更新。</p>
        <a class="fx-btn fx-btn--primary" href="/articles/">进入赛事专栏</a>
      </div>
      <div class="home-query__panel">
        <article class="home-query__box">
          <h3>赛事查询</h3>
          <p>按运动项目、球队或时间段筛选，锁定你关心的那一场，看清开赛时间、比赛地点与转播线索。</p>
          <a class="fx-btn fx-btn--ghost" href="/articles/">按条件筛选比赛</a>
        </article>
        <article class="home-query__box home-query__box--alt">
          <h3>战报速览</h3>
          <p>每日快讯与赛后战报集中投放，过程、比分与关键回合一次读完整，回看比赛不用再拼凑零散消息。</p>
          <a class="fx-btn fx-btn--ghost" href="/articles/">打开战报页</a>
        </article>
      </div>
    </div>
  </section>

  <section class="fx-section home-split" id="split" aria-labelledby="split-title" data-reveal>
    <div class="fx-container">
      <div class="home-head home-head--wide">
        <p class="fx-num">04</p>
        <h2 id="split-title" class="fx-title">同一个对手，主场和客场是两回事</h2>
        <p class="fx-lede">成绩单混着看容易判断失误。凤凰体育把主客场数据拆成两栏，赛前比较时一眼能看出差距在哪。</p>
      </div>
      <div class="home-split__grid">
        <div class="home-split__col home-split__col--home">
          <p class="home-split__label">HOME</p>
          <h3 class="home-split__title">主场视角</h3>
          <ul class="home-split__list">
            <li><span class="fx-mono">01</span><span>主场胜率走势，按赛季阶段分段呈现，看出状态起伏。</span></li>
            <li><span class="fx-mono">02</span><span>近期主场战绩连排，胜负与净胜分放在同一行里对照。</span></li>
            <li><span class="fx-mono">03</span><span>与该客队的交锋记录，历年结果按时间倒序排列。</span></li>
            <li><span class="fx-mono">04</span><span>主场赛程与开赛提醒，提前一天给出对阵与时间。</span></li>
          </ul>
        </div>
        <div class="home-split__col home-split__col--away">
          <p class="home-split__label">AWAY</p>
          <h3 class="home-split__title">客场视角</h3>
          <ul class="home-split__list">
            <li><span class="fx-mono">01</span><span>客场胜率走势与主场并列显示，客场疲软的项目一眼可见。</span></li>
            <li><span class="fx-mono">02</span><span>近期客场战绩附带比分，长途连战的疲劳程度可估。</span></li>
            <li><span class="fx-mono">03</span><span>对手伤停与轮换名单，主力缺阵情况单独提示。</span></li>
            <li><span class="fx-mono">04</span><span>客场赛程与转场间隔，密集作战的段落提前标出。</span></li>
          </ul>
        </div>
      </div>
      <figure class="home-band home-band--chart">
        <img class="home-band__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="主客场表现对照的抽象折线图与等宽数字标签，青绿与橙红区分两组数据" loading="lazy" decoding="async">
        <figcaption class="home-band__cap">青绿标注主场数据，橙红标注客场数据，两栏同屏比较</figcaption>
      </figure>
    </div>
  </section>

  <section class="fx-section home-install" id="install" aria-labelledby="install-title" data-reveal>
    <div class="fx-container">
      <div class="home-head">
        <p class="fx-num">05</p>
        <h2 id="install-title" class="fx-title">第一次装，或者刚换了手机</h2>
        <p class="fx-lede">移动端安装办法和新手切换设备步骤写在同一页里，新用户和换机用户各走一条路径，不用来回找说明。</p>
      </div>
      <div class="home-install__grid">
        <article class="home-install__card">
          <p class="home-install__tag">新用户</p>
          <h3 class="home-install__title">装到手机上</h3>
          <p class="home-install__text">扫码安装、应用市场搜索安装、浏览器下载安装三条路径任选一条，步骤控制在三屏之内，跟着走完即可。</p>
          <dl class="home-install__spec">
            <div class="home-install__spec-row">
              <dt>Android</dt>
              <dd>9 及以上版本</dd>
            </div>
            <div class="home-install__spec-row">
              <dt>iOS</dt>
              <dd>14 及以上版本</dd>
            </div>
            <div class="home-install__spec-row">
              <dt>HarmonyOS</dt>
              <dd>3 及以上版本</dd>
            </div>
          </dl>
          <p class="home-install__text home-install__text--muted">新用户完成安装与登录，平均用时 4 分 30 秒。</p>
          <a class="fx-btn fx-btn--primary" href="/platform/">查看安装办法</a>
        </article>
        <article class="home-install__card">
          <p class="home-install__tag home-install__tag--teal">换机用户</p>
          <h3 class="home-install__title">把关注球队搬过来</h3>
          <p class="home-install__text">新手机装好之后按五步走完，关注的球队、内容目录和通知偏好都会回到原来的样子。</p>
          <ol class="home-steps">
            <li><span class="home-steps__n">STEP 1</span>登录账号</li>
            <li><span class="home-steps__n">STEP 2</span>完成验证</li>
            <li><span class="home-steps__n">STEP 3</span>同步关注球队</li>
            <li><span class="home-steps__n">STEP 4</span>恢复内容目录</li>
            <li><span class="home-steps__n">STEP 5</span>检查通知设置</li>
          </ol>
          <a class="fx-btn fx-btn--ghost" href="/faq/">换机遇到问题</a>
        </article>
      </div>
      <figure class="home-band home-band--device">
        <img class="home-band__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="手机屏幕显示移动端安装步骤与设备系统版本信息，界面清爽" loading="lazy" decoding="async">
        <figcaption class="home-band__cap">安装页面按步骤逐屏推进，系统版本要求同步标注</figcaption>
      </figure>
    </div>
  </section>

  <section class="fx-section home-catalog" id="catalog" aria-labelledby="catalog-title" data-reveal>
    <div class="fx-container">
      <div class="home-head">
        <p class="fx-num">06</p>
        <h2 id="catalog-title" class="fx-title">双周更新的内容目录，已经出到第 12 期</h2>
        <p class="fx-lede">CN内容目录把当季值得追的线索整理成专题，涵盖八个运动项目。想系统看一支球队、一个赛段，从目录进比翻列表快。</p>
      </div>
      <ul class="home-catalog__issues" aria-label="内容目录期数">
        <li class="home-catalog__issue"><span class="fx-mono">01</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">02</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">03</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">04</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">05</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">06</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">07</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">08</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">09</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">10</span></li>
        <li class="home-catalog__issue"><span class="fx-mono">11</span></li>
        <li class="home-catalog__issue home-catalog__issue--current"><span class="fx-mono">12</span></li>
      </ul>
      <ul class="home-catalog__topics">
        <li class="home-catalog__topic">
          <p class="home-catalog__topic-name">赛季前瞻</p>
          <p class="home-catalog__topic-desc">新赛季各项目格局与看点梳理，开赛前先建立判断框架。</p>
        </li>
        <li class="home-catalog__topic">
          <p class="home-catalog__topic-name">主客场观察</p>
          <p class="home-catalog__topic-desc">把主场优势与客场短板拆开讲，附对照数据与场景说明。</p>
        </li>
        <li class="home-catalog__topic">
          <p class="home-catalog__topic-name">设备迁移指南</p>
          <p class="home-catalog__topic-desc">换机全流程拆成五步，含验证失败时该回退到哪一步。</p>
        </li>
        <li class="home-catalog__topic">
          <p class="home-catalog__topic-name">战报速览</p>
          <p class="home-catalog__topic-desc">一个周期内的重要比赛结果与关键回合，短篇幅读完。</p>
        </li>
        <li class="home-catalog__topic">
          <p class="home-catalog__topic-name">球队档案</p>
          <p class="home-catalog__topic-desc">阵容、近况与交锋史归档，关注一支队不用东拼西凑。</p>
        </li>
        <li class="home-catalog__topic">
          <p class="home-catalog__topic-name">安装答疑</p>
          <p class="home-catalog__topic-desc">安装失败、权限被拦、通知不响，按症状直接找对应做法。</p>
        </li>
      </ul>
      <p class="home-catalog__filter">目录支持按运动项目、球队、专题和期数筛选，找旧内容也是几次点击的事。</p>
      <a class="fx-btn fx-btn--primary" href="/articles/">浏览赛事专栏</a>
    </div>
  </section>

  <section class="fx-section home-trust" id="trust" aria-labelledby="trust-title" data-reveal>
    <div class="fx-container">
      <div class="home-head">
        <p class="fx-num">07</p>
        <h2 id="trust-title" class="fx-title">谁在写，写得多快，找得到人吗</h2>
        <p class="fx-lede">内容团队 38 人，其中赛事编辑 16 人、安装指引与帮助内容 9 人、数据标注 7 人、审核与校对 6 人。稿件走三审三校后才上线，赛事快讯 30 分钟内发布，战报 2 小时内更新。</p>
      </div>
      <div class="home-trust__stats">
        <div class="fx-stat">
          <p class="fx-stat__value">260 万</p>
          <p class="fx-stat__label">累计服务华人用户</p>
        </div>
        <div class="fx-stat">
          <p class="fx-stat__value">48 万</p>
          <p class="fx-stat__label">月活跃用户</p>
        </div>
        <div class="fx-stat">
          <p class="fx-stat__value">42 家</p>
          <p class="fx-stat__label">媒体与内容机构合作</p>
        </div>
        <div class="fx-stat">
          <p class="fx-stat__value">120 个</p>
          <p class="fx-stat__label">帮助中心常见问题</p>
        </div>
      </div>
      <div class="home-trust__body">
        <p>用户分布在 31 个省级行政区以及 18 个海外华人聚居城市。平台自 2018 年起持续运营中文体育内容栏目，累计发布赛事与安装类文章 4200 余篇，并与 12 家球队球迷社区保持内容合作，持有 6 项软件著作权和 3 项赛事数据可视化相关专利。2024 年完成第五代页面改版后，首屏加载时间缩短至 1.8 秒。</p>
        <p>帮助中心按安装、账号、设备、赛事查询四类归档，提供 7×12 小时在线帮助；客服邮箱在工作日 9:00–18:00 内回复，安装与设备切换问题附上设备型号与系统版本会更快。合作与媒体联络走同一个入口，我们会在一个工作日内给出回应。</p>
      </div>
      <div class="home-trust__actions">
        <a class="fx-link" href="/faq/">去帮助台找答案</a>
        <a class="fx-link" href="/cooperation/">谈内容与数据合作</a>
        <a class="fx-link" href="/story/">看品牌长卷与团队</a>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-pad: clamp(48px, 7vw, 96px);
  --home-shadow: 0 22px 44px -34px rgba(14, 34, 56, .55);
  background: var(--fx-paper);
  color: var(--fx-black);
}

.page-home .fx-section {
  padding-block: var(--home-pad);
}

.page-home .home-crumb {
  padding-top: 14px;
  background: var(--fx-paper);
}

.page-home .home-head {
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-home .home-head .fx-num {
  margin: 0 0 10px;
}

.page-home .home-head h2 {
  margin: 0 0 14px;
}

.page-home .home-head p {
  margin: 0;
  max-width: 36em;
}

.page-home .home-head--wide p {
  max-width: 44em;
}

/* 01 首屏分屏 */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding-block: 0;
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--fx-orange), var(--fx-wine));
}

.page-home .home-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  padding-block: clamp(30px, 5vw, 56px) clamp(38px, 6vw, 80px);
}

.page-home .home-hero__copy {
  max-width: 40rem;
}

.page-home .home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.page-home .home-hero__title {
  margin: 14px 0 18px;
  color: var(--fx-ink);
  letter-spacing: -.02em;
}

.page-home .home-hero__accent {
  display: block;
  color: var(--fx-orange);
}

.page-home .home-hero__lede {
  max-width: 33em;
  margin: 0;
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-home .home-hero__facts {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--fx-line);
  list-style: none;
}

.page-home .home-hero__facts li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fx-mist);
}

.page-home .home-hero__facts .fx-mono {
  display: block;
  margin-bottom: 2px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fx-ink);
}

.page-home .home-hero__jump {
  margin: 22px 0 0;
  font-size: 14px;
}

.page-home .home-hero__visual {
  position: relative;
  overflow: hidden;
  background: var(--fx-ink);
  border-radius: 2px 2px 44px 2px;
  box-shadow: var(--home-shadow);
}

.page-home .home-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: .58;
}

.page-home .home-hero__trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-home .home-hero__curve {
  stroke-dasharray: 880;
  stroke-dashoffset: 880;
  animation: home-draw 1.7s var(--fx-ease) .2s forwards;
}

@keyframes home-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.page-home .home-hero__caption {
  position: absolute;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  margin: 0;
  font-family: var(--fx-font-serif);
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(250, 246, 239, .74);
}

/* 02 运动项目分区 */
.page-home .home-sports {
  background: var(--fx-paper-2);
  border-block: 1px solid var(--fx-line);
}

.page-home .home-sports__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--fx-line);
  border-block: 1px solid var(--fx-line);
}

.page-home .home-sports__item {
  background: var(--fx-paper-3);
  padding: clamp(16px, 2.6vw, 24px);
  transition: background .2s var(--fx-ease);
}

.page-home .home-sports__item a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.page-home .home-sports__index {
  font-family: var(--fx-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--fx-orange);
}

.page-home .home-sports__name {
  margin: 6px 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--fx-ink);
}

.page-home .home-sports__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--fx-mist);
}

.page-home .home-sports__item:hover {
  background: #ffffff;
}

.page-home .home-sports__item:hover .home-sports__name {
  color: var(--fx-orange-deep);
}

/* 图片带 */
.page-home .home-band {
  margin: clamp(26px, 4vw, 46px) 0 0;
  display: grid;
  gap: 10px;
}

.page-home .home-band__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 2px 2px 28px 2px;
  background: var(--fx-paper-2);
}

.page-home .home-band__cap {
  font-family: var(--fx-font-serif);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .08em;
  color: var(--fx-mist);
}

.page-home .home-band--chart {
  margin-top: clamp(28px, 4vw, 44px);
}

.page-home .home-band--chart .home-band__img {
  border-radius: 2px;
}

.page-home .home-band--device {
  margin-top: clamp(30px, 5vw, 52px);
}

/* 03 查询与战报 */
.page-home .home-query {
  background: var(--fx-ink);
  color: var(--fx-paper);
}

.page-home .home-query .fx-title {
  color: var(--fx-paper);
}

.page-home .home-query .fx-num {
  color: var(--fx-orange-soft);
}

.page-home .home-query .fx-lede {
  color: var(--fx-on-dark);
}

.page-home .home-query__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-home .home-query__intro p {
  margin-block: 0 14px;
}

.page-home .home-query__note {
  font-family: var(--fx-font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--fx-orange-soft);
  padding-left: 14px;
  border-left: 2px solid var(--fx-teal);
}

.page-home .home-query__intro .fx-btn {
  margin-top: 8px;
}

.page-home .home-query__panel {
  display: grid;
  gap: 16px;
}

.page-home .home-query__box {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  background: rgba(250, 246, 239, .06);
  border: 1px solid rgba(250, 246, 239, .18);
}

.page-home .home-query__box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--fx-teal);
}

.page-home .home-query__box--alt::before {
  background: var(--fx-orange);
}

.page-home .home-query__box h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--fx-paper);
}

.page-home .home-query__box p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fx-on-dark);
}

.page-home .home-query__box .fx-btn--ghost {
  color: var(--fx-paper);
  border-color: rgba(250, 246, 239, .5);
}

.page-home .home-query__box .fx-btn--ghost:hover {
  border-color: var(--fx-paper);
}

/* 04 主客场双栏 */
.page-home .home-split {
  background: var(--fx-paper);
}

.page-home .home-split__grid {
  display: grid;
  gap: 1px;
  background: var(--fx-line-strong);
  border: 1px solid var(--fx-line-strong);
}

.page-home .home-split__col {
  background: var(--fx-paper-3);
  padding: clamp(20px, 3.4vw, 36px);
}

.page-home .home-split__col--home {
  border-top: 4px solid var(--fx-teal);
}

.page-home .home-split__col--away {
  border-top: 4px solid var(--fx-orange);
}

.page-home .home-split__label {
  margin: 0 0 6px;
  font-family: var(--fx-font-mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--fx-mist);
}

.page-home .home-split__title {
  margin: 0 0 18px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--fx-ink);
}

.page-home .home-split__list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-split__list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--fx-black);
}

.page-home .home-split__list .fx-mono {
  font-size: 12px;
  color: var(--fx-mist);
  padding-top: 3px;
}

/* 05 安装与设备切换 */
.page-home .home-install {
  background: var(--fx-paper-2);
  border-block: 1px solid var(--fx-line);
}

.page-home .home-install__grid {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}

.page-home .home-install__card {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  background: var(--fx-paper-3);
  border: 1px solid var(--fx-line);
  box-shadow: var(--home-shadow);
}

.page-home .home-install__card::after {
  content: "";
  position: absolute;
  inset: auto 14px -7px 14px;
  height: 7px;
  background: var(--fx-paper-2);
  border: 1px solid var(--fx-line);
  border-top: 0;
}

.page-home .home-install__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  font-family: var(--fx-font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--fx-paper);
  background: var(--fx-orange);
}

.page-home .home-install__tag--teal {
  background: var(--fx-teal);
}

.page-home .home-install__title {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.6vw, 25px);
  color: var(--fx-ink);
}

.page-home .home-install__text {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fx-black);
}

.page-home .home-install__text--muted {
  color: var(--fx-mist);
  font-size: 13.5px;
}

.page-home .home-install__spec {
  margin: 0 0 16px;
  padding: 14px 0;
  border-block: 1px dashed var(--fx-line-strong);
}

.page-home .home-install__spec-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
}

.page-home .home-install__spec-row dt {
  font-family: var(--fx-font-mono);
  font-weight: 600;
  color: var(--fx-ink);
}

.page-home .home-install__spec-row dd {
  margin: 0;
  color: var(--fx-mist);
}

.page-home .home-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.page-home .home-steps li {
  padding: 10px 0 0;
  border-top: 2px solid var(--fx-orange-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fx-ink);
}

.page-home .home-steps__n {
  display: block;
  margin-bottom: 3px;
  font-family: var(--fx-font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--fx-orange);
}

/* 06 内容目录 */
.page-home .home-catalog {
  background: var(--fx-indigo);
  color: var(--fx-paper);
}

.page-home .home-catalog .fx-title {
  color: var(--fx-paper);
}

.page-home .home-catalog .fx-num {
  color: var(--fx-sand);
}

.page-home .home-catalog .fx-lede {
  color: var(--fx-on-dark);
}

.page-home .home-catalog__issues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: 0;
  list-style: none;
}

.page-home .home-catalog__issue {
  min-width: 48px;
  padding: 9px 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(250, 246, 239, .74);
  border: 1px solid rgba(250, 246, 239, .26);
}

.page-home .home-catalog__issue--current {
  background: var(--fx-orange);
  border-color: var(--fx-orange);
  color: var(--fx-paper);
  font-weight: 700;
}

.page-home .home-catalog__topics {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(250, 246, 239, .2);
  border: 1px solid rgba(250, 246, 239, .2);
}

.page-home .home-catalog__topic {
  background: rgba(250, 246, 239, .06);
  padding: clamp(16px, 2.4vw, 22px);
}

.page-home .home-catalog__topic-name {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--fx-paper);
}

.page-home .home-catalog__topic-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(250, 246, 239, .72);
}

.page-home .home-catalog__filter {
  margin: clamp(20px, 3vw, 28px) 0 20px;
  max-width: 40em;
  font-size: 14px;
  line-height: 1.78;
  color: var(--fx-on-dark);
}

/* 07 信任收束 */
.page-home .home-trust {
  background: var(--fx-wine);
  color: var(--fx-paper);
}

.page-home .home-trust .fx-title {
  color: var(--fx-paper);
}

.page-home .home-trust .fx-num {
  color: var(--fx-sand);
}

.page-home .home-trust .fx-lede {
  color: rgba(250, 246, 239, .82);
}

.page-home .home-trust__stats {
  display: grid;
  gap: 16px;
  margin: 0 0 clamp(26px, 4vw, 40px);
  padding: 22px 0;
  border-block: 1px solid rgba(250, 246, 239, .26);
}

.page-home .home-trust__stats .fx-stat__value {
  font-family: var(--fx-font-mono);
  color: var(--fx-paper);
}

.page-home .home-trust__stats .fx-stat__label {
  color: rgba(250, 246, 239, .72);
}

.page-home .home-trust__body p {
  margin: 0 0 16px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(250, 246, 239, .86);
}

.page-home .home-trust__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 246, 239, .26);
}

.page-home .home-trust__actions .fx-link {
  color: var(--fx-paper);
  border-bottom: 2px solid var(--fx-sand);
  padding-bottom: 2px;
}

/* 响应式 */
@media (min-width: 560px) {
  .page-home .home-hero__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .page-home .home-sports__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-home .home-trust__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 720px) {
  .page-home .home-query__panel {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .home-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .page-home .home-steps li {
    padding-right: 6px;
    font-size: 11.5px;
  }

  .page-home .home-catalog__topics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .page-home .home-hero__grid {
    grid-template-columns: 1.06fr .94fr;
    align-items: center;
  }

  .page-home .home-hero__visual {
    margin-right: calc(var(--fx-gutter) * -0.5);
  }

  .page-home .home-sports__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-home .home-install__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .page-home .home-install__card:nth-child(2) {
    margin-top: 28px;
  }
}

@media (min-width: 960px) {
  .page-home .home-query__grid {
    grid-template-columns: .92fr 1.08fr;
    align-items: start;
  }

  .page-home .home-split__grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .home-trust__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-hero__curve {
    animation: none;
    stroke-dashoffset: 0;
  }

  .page-home .home-sports__item {
    transition: none;
  }
}