.page-home {
  --home-cyan-line: rgba(53, 242, 208, 0.16);
  --home-glow: 0 0 0 1px var(--c-cyan), 0 18px 42px rgba(0, 0, 0, 0.5);
  --home-gap: clamp(24px, 4vw, 56px);
  display: block;
  background: var(--c-void);
  color: var(--c-paper);
  overflow-x: hidden;
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home .display {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.95rem, 7vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: 0.05em;
  margin: 0 0 18px;
}

.page-home .lede {
  color: var(--c-grey);
  font-size: 15px;
  line-height: 1.85;
  max-width: 56ch;
  margin: 0 0 22px;
}

.page-home .eyebrow {
  color: var(--c-cyan);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
}

.page-home .crumbs {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-grey);
  margin-bottom: clamp(20px, 4vw, 36px);
}

.page-home .crumbs__sep {
  margin: 0 8px;
  color: var(--c-line);
}

/* ---------- 首屏框景 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(26px, 5vw, 54px) clamp(44px, 7vw, 92px);
  border-bottom: 1px solid var(--c-line);
}

.page-home .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(0.72);
}

.page-home .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 6%, rgba(7, 17, 15, 0.55), rgba(7, 17, 15, 0.97) 68%),
    linear-gradient(180deg, rgba(7, 17, 15, 0.3), var(--c-void));
}

.page-home .hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--home-cyan-line);
  z-index: 1;
  pointer-events: none;
}

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

.page-home .hero__grid {
  display: grid;
  gap: var(--home-gap);
}

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

.page-home .hero__meta {
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--c-grey);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  max-width: 46ch;
}

.page-home .hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-home .stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  text-decoration: none;
  color: inherit;
  background: var(--c-glass);
  border: 1px solid var(--home-cyan-line);
  border-radius: var(--r-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.page-home .stat-card:hover,
.page-home .stat-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--c-cyan);
  box-shadow: var(--home-glow);
  outline: none;
}

.page-home .stat-card__num {
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  color: var(--c-cyan);
  line-height: 1.1;
}

.page-home .stat-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.page-home .stat-card__hint {
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-grey);
  margin-top: 6px;
}

/* ---------- 联赛目录 ---------- */
.page-home .league__grid {
  display: grid;
  gap: var(--home-gap);
}

.page-home .league h2,
.page-home .apps__head h2,
.page-home .version__head h2,
.page-home .scenes__head h2 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}

.page-home .league__figure {
  margin: 22px 0 0;
  border: 1px solid var(--c-line);
  background: linear-gradient(150deg, var(--c-turf), var(--c-void));
  position: relative;
}

.page-home .league__figure::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-top: 1px solid var(--home-cyan-line);
  border-left: 1px solid var(--home-cyan-line);
  pointer-events: none;
}

.page-home .league__figure img {
  width: 100%;
}

.page-home .league__cap {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-grey);
  padding: 10px 12px;
  border-top: 1px solid var(--c-line);
}

.page-home .chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}

.page-home .chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-paper);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.page-home .chip:hover,
.page-home .chip:focus-visible {
  color: var(--c-cyan);
  border-color: var(--c-cyan);
  background: rgba(53, 242, 208, 0.06);
  outline: none;
}

.page-home .chip__num {
  font-size: 11px;
  color: var(--c-cyan);
}

.page-home .league-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}

.page-home .league-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--t-base) var(--ease);
}

.page-home .league-row:target {
  background: rgba(53, 242, 208, 0.05);
  box-shadow: inset 2px 0 0 var(--c-cyan);
  padding-left: 12px;
}

.page-home .league-row__num {
  font-size: 12px;
  color: var(--c-grey);
}

.page-home .league-row__name {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0;
}

.page-home .league-row__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .league__more {
  margin: 22px 0 0;
}

/* ---------- 资料库预览 ---------- */
.page-home .apps__head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-home .apps__split {
  display: grid;
  gap: var(--home-gap);
}

.page-home .shot {
  margin: 0;
  border: 1px solid var(--c-line);
  background: var(--c-coal);
}

.page-home .shot img {
  width: 100%;
}

.page-home .shot__cap {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-grey);
  padding: 10px 12px;
  border-top: 1px solid var(--c-line);
}

.page-home .fields {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.page-home .fields__row {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-home .fields dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-paper);
}

.page-home .fields dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-grey);
}

.page-home .apps__entries {
  margin-top: clamp(22px, 4vw, 36px);
  border-top: 1px solid var(--c-line);
}

.page-home .entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base) var(--ease);
}

.page-home .entry__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: color var(--t-fast) var(--ease);
}

.page-home .entry__desc {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-grey);
}

.page-home .entry__arrow {
  font-family: var(--f-mono);
  color: var(--c-cyan);
  grid-row: 1;
  grid-column: 2;
}

.page-home .entry:hover,
.page-home .entry:focus-visible {
  border-color: var(--c-cyan);
  outline: none;
}

.page-home .entry:hover .entry__title,
.page-home .entry:focus-visible .entry__title {
  color: var(--c-cyan);
}

/* ---------- 版本带 ---------- */
.page-home .version {
  background: var(--c-coal);
  border-block: 1px solid var(--c-line);
}

.page-home .version__head {
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-home .version__list {
  display: grid;
  border-top: 1px solid var(--c-line);
}

.page-home .version__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-home .version__num {
  display: inline-block;
  font-size: 12px;
  color: var(--c-orange);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.page-home .version__title {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}

.page-home .version__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .version__note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .version__note a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 242, 208, 0.4);
}

.page-home .version__note a:hover,
.page-home .version__note a:focus-visible {
  border-bottom-color: var(--c-cyan);
  outline: none;
}

/* ---------- 场景 ---------- */
.page-home .scenes__head {
  margin-bottom: clamp(22px, 4vw, 38px);
}

.page-home .scenes__grid {
  display: grid;
  gap: clamp(22px, 3.5vw, 34px);
}

.page-home .scene {
  border-top: 2px solid var(--c-cyan);
  padding-top: 16px;
}

.page-home .scene:nth-child(2) {
  border-top-color: var(--c-orange);
}

.page-home .scene:nth-child(3) {
  border-top-color: var(--c-line);
}

.page-home .scene__num {
  font-size: 12px;
  color: var(--c-grey);
  letter-spacing: 0.1em;
}

.page-home .scene__title {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 8px 0 10px;
}

.page-home .scene__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-grey);
}

.page-home .scene__link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 3px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .scene__link:hover,
.page-home .scene__link:focus-visible {
  color: var(--c-cyan);
  border-bottom-color: var(--c-cyan);
  outline: none;
}

.page-home .scenes__foot {
  margin: clamp(22px, 4vw, 34px) 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .scenes__foot a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 242, 208, 0.4);
}

/* ---------- 底部数据带 ---------- */
.page-home .data-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  background: var(--c-void);
}

.page-home .data-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .data-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.page-home .data-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 15, 0.86), rgba(7, 17, 15, 0.97) 55%, var(--c-coal));
}

.page-home .data-band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-max);
  margin-inline: auto;
  padding: clamp(34px, 6vw, 68px) var(--gutter);
}

.page-home .data-band__kicker {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-peach);
  margin: 0 0 22px;
}

.page-home .band-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}

.page-home .band-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-home .band-stat__num {
  font-size: clamp(1.4rem, 4.6vw, 1.9rem);
  color: var(--c-paper);
  line-height: 1.1;
}

.page-home .band-stat__label {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-grey);
}

.page-home .data-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.page-home .back-top {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .back-top:hover,
.page-home .back-top:focus-visible {
  color: var(--c-cyan);
  border-bottom-color: var(--c-cyan);
  outline: none;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-home .lede {
    font-size: 16px;
  }

  .page-home .fields__row {
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }

  .page-home .league-row {
    grid-template-columns: 48px 116px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }

  .page-home .league-row__num {
    padding-top: 2px;
  }

  .page-home .scene {
    padding-top: 18px;
  }
}

@media (min-width: 860px) {
  .page-home .hero__stats {
    gap: 14px;
  }

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

  .page-home .version__item {
    padding: 22px 20px;
    border-bottom: 0;
    border-right: 1px solid var(--c-line);
  }

  .page-home .version__item:first-child {
    padding-left: 0;
  }

  .page-home .version__item:last-child {
    border-right: 0;
    padding-right: 0;
  }

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

  .page-home .band-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--c-line);
  }

  .page-home .band-stat {
    border-bottom: 0;
    border-right: 1px solid var(--c-line);
    padding: 20px 18px;
  }

  .page-home .band-stat:first-child {
    padding-left: 0;
  }

  .page-home .band-stat:last-child {
    border-right: 0;
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
  }

  .page-home .hero__stats {
    padding-top: 8px;
    margin-bottom: 30px;
  }

  .page-home .stat-card:nth-child(even) {
    transform: translateY(28px);
  }

  .page-home .stat-card:nth-child(even):hover,
  .page-home .stat-card:nth-child(even):focus-visible {
    transform: translateY(22px);
  }

  .page-home .league__grid {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    align-items: start;
  }

  .page-home .league__aside {
    position: sticky;
    top: 24px;
  }

  .page-home .apps__split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

@media (hover: hover) and (pointer: fine) {
  .page-home .stat-card__hint {
    opacity: 0.62;
    transition: opacity var(--t-base) var(--ease);
  }

  .page-home .stat-card:hover .stat-card__hint,
  .page-home .stat-card:focus-visible .stat-card__hint {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .stat-card,
  .page-home .stat-card__hint,
  .page-home .chip,
  .page-home .entry,
  .page-home .scene__link,
  .page-home .back-top {
    transition: none;
  }

  .page-home .stat-card:hover,
  .page-home .stat-card:focus-visible,
  .page-home .stat-card:nth-child(even),
  .page-home .stat-card:nth-child(even):hover,
  .page-home .stat-card:nth-child(even):focus-visible {
    transform: none;
  }
}


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

  <section class="hero" aria-labelledby="hero-title">
    <div class="hero__bg">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场俯拍，深墨绿与炭黑基调，边线延伸如数据刻度">
    </div>
    <svg class="hero__lines" viewBox="0 0 1200 620" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <g fill="none" stroke="currentColor" stroke-width="1" vector-effect="non-scaling-stroke">
        <path d="M0 120H1200M0 500H1200M240 0V620M960 0V620"/>
        <path d="M600 120v380M240 310h720"/>
        <circle cx="600" cy="310" r="118"/>
      </g>
    </svg>

    <div class="canvas hero__inner">
      <nav class="crumbs" aria-label="页面位置">
        <span>K体育站</span>
        <span class="crumbs__sep">/</span>
        <span aria-current="page">主队直达</span>
      </nav>

      <div class="hero__grid">
        <div class="hero__lead">
          <p class="eyebrow">版本 3.2 · 主队直达</p>
          <h1 id="hero-title" class="display">打开网页就进主队，<br>一场到整轮只差一次切换</h1>
          <p class="lede">K体育站是K体育中国官方网站的中文入口，网页端K体育打开后无需安装任何客户端，赛程、球队资料与历史对阵都在同一处。赛前查主队近况，赛后对整轮走势，两步就能到位。</p>

          <div class="hero__actions">
            <a class="btn btn--primary hero__cta" href="#league-directory">约K体育看多联赛赛事</a>
            <a class="btn btn--ghost" href="/help-center/">网页端打开方式</a>
          </div>

          <p class="hero__meta">足球 · 篮球 · 网球 · 排球 · 羽毛球 · 乒乓球　六类项目与十八项赛事在同一目录下</p>
        </div>

        <div class="hero__stats" data-reveal>
          <a class="stat-card" href="/press/">
            <span class="stat-card__num numeric">18</span>
            <span class="stat-card__label">联赛与杯赛</span>
            <span class="stat-card__hint">按项目、轮次与阶段归并，常用入口排在前列</span>
          </a>
          <a class="stat-card" href="/apps/">
            <span class="stat-card__num numeric">4200+</span>
            <span class="stat-card__label">支队伍档案</span>
            <span class="stat-card__hint">含赛季走势、主客场表现与近期状态</span>
          </a>
          <a class="stat-card" href="/apps/">
            <span class="stat-card__num numeric">38万条</span>
            <span class="stat-card__label">历史交锋记录</span>
            <span class="stat-card__hint">任选两队，比分分布与胜负趋势并列查看</span>
          </a>
          <a class="stat-card" href="/press/">
            <span class="stat-card__num numeric">2小时</span>
            <span class="stat-card__label">赛后补齐赛果</span>
            <span class="stat-card__hint">对阵页在赛前48小时更新，比分与关键数据同步到位</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="section league" id="league-directory" aria-labelledby="league-title">
    <div class="canvas league__grid">
      <div class="league__aside">
        <p class="eyebrow">01 · 联赛目录</p>
        <h2 id="league-title">先挑项目，再看轮次和阶段</h2>
        <p class="lede">分类栏按项目与轮次重新归并，常看的那几项被推到最前。你不必在长清单里从头翻到尾，选中项目之后，轮次与阶段跟着出来。</p>
        <figure class="league__figure">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="战术板线条与荧光青数据点，表现六个项目之间的切换路径" loading="lazy" decoding="async">
          <figcaption class="league__cap">六大项目的入口沿同一条目录展开，切换不打断浏览</figcaption>
        </figure>
      </div>

      <div class="league__main">
        <div class="chips" role="list">
          <a class="chip" role="listitem" href="#league-football"><span class="chip__num numeric">01</span>足球</a>
          <a class="chip" role="listitem" href="#league-basketball"><span class="chip__num numeric">02</span>篮球</a>
          <a class="chip" role="listitem" href="#league-tennis"><span class="chip__num numeric">03</span>网球</a>
          <a class="chip" role="listitem" href="#league-volleyball"><span class="chip__num numeric">04</span>排球</a>
          <a class="chip" role="listitem" href="#league-badminton"><span class="chip__num numeric">05</span>羽毛球</a>
          <a class="chip" role="listitem" href="#league-tabletennis"><span class="chip__num numeric">06</span>乒乓球</a>
        </div>

        <ol class="league-list">
          <li class="league-row" id="league-football">
            <span class="league-row__num numeric">01</span>
            <h3 class="league-row__name">足球</h3>
            <p class="league-row__text">联赛与杯赛共用一个入口，按轮次、小组赛与淘汰赛阶段排布。周末密集轮次单独标出，赶场看球不用来回找。</p>
          </li>
          <li class="league-row" id="league-basketball">
            <span class="league-row__num numeric">02</span>
            <h3 class="league-row__name">篮球</h3>
            <p class="league-row__text">常规赛与季后赛分组呈现，主客场的差异直接标在列表上，连着两天背靠背的比赛一眼能分清。</p>
          </li>
          <li class="league-row" id="league-tennis">
            <span class="league-row__num numeric">03</span>
            <h3 class="league-row__name">网球</h3>
            <p class="league-row__text">按赛事周推进，单打与双打分开查看，轮次越往后入口越靠前，追一站赛事不用逐天翻页。</p>
          </li>
          <li class="league-row" id="league-volleyball">
            <span class="league-row__num numeric">04</span>
            <h3 class="league-row__name">排球</h3>
            <p class="league-row__text">分阶段列出对阵，想接着看胜负走势，可以从队伍名直接进资料库对照整季表现。</p>
          </li>
          <li class="league-row" id="league-badminton">
            <span class="league-row__num numeric">05</span>
            <h3 class="league-row__name">羽毛球</h3>
            <p class="league-row__text">团体与单项分开列，赛程密集的周次用底色提示，提前知道哪天需要盯屏幕。</p>
          </li>
          <li class="league-row" id="league-tabletennis">
            <span class="league-row__num numeric">06</span>
            <h3 class="league-row__name">乒乓球</h3>
            <p class="league-row__text">轮次推进快，常用入口收在最前面，跟上一天之内的赛果不费力气。</p>
          </li>
        </ol>

        <p class="league__more">
          <a class="btn btn--ghost" href="/apps/">看各项目的资料字段</a>
        </p>
      </div>
    </div>
  </section>

  <section class="section apps-preview" aria-labelledby="apps-title">
    <div class="canvas">
      <header class="apps__head">
        <p class="eyebrow">02 · 资料库与交锋对比</p>
        <h2 id="apps-title">赛前二十分钟，把两队摆在一起看</h2>
        <p class="lede">PC端资料库提供Windows桌面版，长表格和多窗口对照更顺手；网页端打开也能查同一批字段。做赛前研究、给队员备课，都能直接对着数据讲。</p>
      </header>

      <div class="apps__split">
        <figure class="shot">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色桌面资料库界面示意，等宽数字表格与两支队伍的交锋曲线并列" loading="lazy" decoding="async">
          <figcaption class="shot__cap">队伍档案与交锋记录放在同一块桌面里，可开多窗口逐项对照</figcaption>
        </figure>

        <dl class="fields">
          <div class="fields__row">
            <dt>赛季走势</dt>
            <dd>一条线看完队伍整季起伏，找得出状态拐点。</dd>
          </div>
          <div class="fields__row">
            <dt>主客场表现</dt>
            <dd>分开看主客攻防效率，判断这场的分量。</dd>
          </div>
          <div class="fields__row">
            <dt>得分结构</dt>
            <dd>分布到节次与盘分，看清分数从哪儿来。</dd>
          </div>
          <div class="fields__row">
            <dt>近期状态</dt>
            <dd>最近若干轮的胜负与分差，比排名更直观。</dd>
          </div>
          <div class="fields__row">
            <dt>轮次战绩</dt>
            <dd>逐轮对照，判断一支队伍稳不稳。</dd>
          </div>
          <div class="fields__row">
            <dt>历史对阵</dt>
            <dd>任选两队，比分分布、胜负趋势与关键节点一起看。</dd>
          </div>
        </dl>
      </div>

      <div class="apps__entries">
        <a class="entry" href="/apps/">
          <span class="entry__title">PC端K体育资料库（Windows桌面版）</span>
          <span class="entry__desc">适合赛前研究与青训备课，长表格可切换行高，多窗口并排比对</span>
          <span class="entry__arrow" aria-hidden="true">→</span>
        </a>
        <a class="entry" href="/apps/">
          <span class="entry__title">两队交锋对比台</span>
          <span class="entry__desc">挑两支队伍，历史比分、胜负趋势与关键节点落在同一屏</span>
          <span class="entry__arrow" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  <section class="section version" aria-labelledby="version-title">
    <div class="canvas">
      <header class="version__head">
        <p class="eyebrow">03 · 版本 3.2</p>
        <h2 id="version-title">改版之后，切换联赛少走两步</h2>
      </header>

      <div class="version__list" data-reveal>
        <div class="version__item">
          <span class="version__num numeric">01</span>
          <h3 class="version__title">导航层级</h3>
          <p class="version__text">项目、轮次、阶段三层收拢，退回上一级不用重新从首页点起。</p>
        </div>
        <div class="version__item">
          <span class="version__num numeric">02</span>
          <h3 class="version__title">筛选记忆</h3>
          <p class="version__text">上次看的项目与轮次会被记住，下次打开直接接着看。</p>
        </div>
        <div class="version__item">
          <span class="version__num numeric">03</span>
          <h3 class="version__title">表格密度</h3>
          <p class="version__text">长表格可切成紧凑行高，同一屏多读几行数据。</p>
        </div>
        <div class="version__item">
          <span class="version__num numeric">04</span>
          <h3 class="version__title">移动端横滑</h3>
          <p class="version__text">手机上左右滑动换项目，表头保持可见，手指不打架。</p>
        </div>
      </div>

      <p class="version__note">产品按双周迭代，功能调整先在网页端上线。<a href="/press/">看版本日志与赛季观察</a></p>
    </div>
  </section>

  <section class="section scenes" aria-labelledby="scenes-title">
    <div class="canvas">
      <header class="scenes__head">
        <p class="eyebrow">04 · 适合谁用</p>
        <h2 id="scenes-title">从跟一场球，到带一支队</h2>
      </header>

      <div class="scenes__grid">
        <article class="scene">
          <span class="scene__num numeric">01</span>
          <h3 class="scene__title">跟主队的球迷</h3>
          <p class="scene__text">主队入口摆在首屏，赛前看对阵，赛后两小时内补齐赛果与关键数据。手机打开也能顺着项目一路往下看。</p>
          <a class="scene__link" href="/press/">读赛季复盘</a>
        </article>
        <article class="scene">
          <span class="scene__num numeric">02</span>
          <h3 class="scene__title">青训教练与校园社团</h3>
          <p class="scene__text">用赛季走势和主客场表现备课，把对手近几轮的变化讲清楚。桌面版开着几个窗口，训练前十几分钟足够。</p>
          <a class="scene__link" href="/apps/">进资料库</a>
        </article>
        <article class="scene">
          <span class="scene__num numeric">03</span>
          <h3 class="scene__title">内容合作与数据反馈</h3>
          <p class="scene__text">与青训机构、球迷协会和校园社团一起做内容，发现比分或档案有问题，写清楚页面与轮次就能反馈到编辑那边。</p>
          <a class="scene__link" href="/inquiry/">谈合作</a>
        </article>
      </div>

      <p class="scenes__foot">想先知道平台怎么运转、内容由谁来做，可以翻一翻<a href="/introduction/">平台档案</a>。</p>
    </div>
  </section>

  <section class="data-band" aria-labelledby="band-title">
    <div class="data-band__bg">
      <img src="{zhanqunpic:h:500w:1600}" width="1600" height="500" alt="球员动态剪影与信号橙光轨，暗调高对比，不出现可识别人物面部" loading="lazy" decoding="async">
    </div>
    <div class="data-band__inner">
      <h2 id="band-title" class="visually-hidden">平台服务概览</h2>
      <p class="data-band__kicker">乌鲁木齐、昌吉、喀什、伊犁等十四地州市的用户都用得上</p>

      <div class="band-stats">
        <div class="band-stat">
          <span class="band-stat__num numeric">2019</span>
          <span class="band-stat__label">上线并持续运营</span>
        </div>
        <div class="band-stat">
          <span class="band-stat__num numeric">12万+</span>
          <span class="band-stat__label">新疆本地访问用户</span>
        </div>
        <div class="band-stat">
          <span class="band-stat__num numeric">46人</span>
          <span class="band-stat__label">编辑、数据标注与运营</span>
        </div>
        <div class="band-stat">
          <span class="band-stat__num numeric">9家</span>
          <span class="band-stat__label">青训机构与球迷社团合作</span>
        </div>
        <div class="band-stat">
          <span class="band-stat__num numeric">60+</span>
          <span class="band-stat__label">每月赛前赛后与专题篇目</span>
        </div>
      </div>

      <div class="data-band__actions">
        <a class="btn btn--signal" href="/inquiry/">联系客服</a>
        <a class="btn btn--ghost" href="/help-center/">去帮助中心</a>
        <a class="back-top" href="#main-content">回到顶部 ↑</a>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-cyan-line: rgba(53, 242, 208, 0.16);
  --home-glow: 0 0 0 1px var(--c-cyan), 0 18px 42px rgba(0, 0, 0, 0.5);
  --home-gap: clamp(24px, 4vw, 56px);
  display: block;
  background: var(--c-void);
  color: var(--c-paper);
  overflow-x: hidden;
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home .display {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.95rem, 7vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: 0.05em;
  margin: 0 0 18px;
}

.page-home .lede {
  color: var(--c-grey);
  font-size: 15px;
  line-height: 1.85;
  max-width: 56ch;
  margin: 0 0 22px;
}

.page-home .eyebrow {
  color: var(--c-cyan);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
}

.page-home .crumbs {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-grey);
  margin-bottom: clamp(20px, 4vw, 36px);
}

.page-home .crumbs__sep {
  margin: 0 8px;
  color: var(--c-line);
}

/* ---------- 首屏框景 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(26px, 5vw, 54px) clamp(44px, 7vw, 92px);
  border-bottom: 1px solid var(--c-line);
}

.page-home .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(0.72);
}

.page-home .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 6%, rgba(7, 17, 15, 0.55), rgba(7, 17, 15, 0.97) 68%),
    linear-gradient(180deg, rgba(7, 17, 15, 0.3), var(--c-void));
}

.page-home .hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--home-cyan-line);
  z-index: 1;
  pointer-events: none;
}

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

.page-home .hero__grid {
  display: grid;
  gap: var(--home-gap);
}

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

.page-home .hero__meta {
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--c-grey);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  max-width: 46ch;
}

.page-home .hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-home .stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  text-decoration: none;
  color: inherit;
  background: var(--c-glass);
  border: 1px solid var(--home-cyan-line);
  border-radius: var(--r-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.page-home .stat-card:hover,
.page-home .stat-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--c-cyan);
  box-shadow: var(--home-glow);
  outline: none;
}

.page-home .stat-card__num {
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  color: var(--c-cyan);
  line-height: 1.1;
}

.page-home .stat-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.page-home .stat-card__hint {
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-grey);
  margin-top: 6px;
}

/* ---------- 联赛目录 ---------- */
.page-home .league__grid {
  display: grid;
  gap: var(--home-gap);
}

.page-home .league h2,
.page-home .apps__head h2,
.page-home .version__head h2,
.page-home .scenes__head h2 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}

.page-home .league__figure {
  margin: 22px 0 0;
  border: 1px solid var(--c-line);
  background: linear-gradient(150deg, var(--c-turf), var(--c-void));
  position: relative;
}

.page-home .league__figure::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-top: 1px solid var(--home-cyan-line);
  border-left: 1px solid var(--home-cyan-line);
  pointer-events: none;
}

.page-home .league__figure img {
  width: 100%;
}

.page-home .league__cap {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-grey);
  padding: 10px 12px;
  border-top: 1px solid var(--c-line);
}

.page-home .chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}

.page-home .chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-paper);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.page-home .chip:hover,
.page-home .chip:focus-visible {
  color: var(--c-cyan);
  border-color: var(--c-cyan);
  background: rgba(53, 242, 208, 0.06);
  outline: none;
}

.page-home .chip__num {
  font-size: 11px;
  color: var(--c-cyan);
}

.page-home .league-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}

.page-home .league-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--t-base) var(--ease);
}

.page-home .league-row:target {
  background: rgba(53, 242, 208, 0.05);
  box-shadow: inset 2px 0 0 var(--c-cyan);
  padding-left: 12px;
}

.page-home .league-row__num {
  font-size: 12px;
  color: var(--c-grey);
}

.page-home .league-row__name {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0;
}

.page-home .league-row__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .league__more {
  margin: 22px 0 0;
}

/* ---------- 资料库预览 ---------- */
.page-home .apps__head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-home .apps__split {
  display: grid;
  gap: var(--home-gap);
}

.page-home .shot {
  margin: 0;
  border: 1px solid var(--c-line);
  background: var(--c-coal);
}

.page-home .shot img {
  width: 100%;
}

.page-home .shot__cap {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-grey);
  padding: 10px 12px;
  border-top: 1px solid var(--c-line);
}

.page-home .fields {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.page-home .fields__row {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-home .fields dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-paper);
}

.page-home .fields dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-grey);
}

.page-home .apps__entries {
  margin-top: clamp(22px, 4vw, 36px);
  border-top: 1px solid var(--c-line);
}

.page-home .entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base) var(--ease);
}

.page-home .entry__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: color var(--t-fast) var(--ease);
}

.page-home .entry__desc {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-grey);
}

.page-home .entry__arrow {
  font-family: var(--f-mono);
  color: var(--c-cyan);
  grid-row: 1;
  grid-column: 2;
}

.page-home .entry:hover,
.page-home .entry:focus-visible {
  border-color: var(--c-cyan);
  outline: none;
}

.page-home .entry:hover .entry__title,
.page-home .entry:focus-visible .entry__title {
  color: var(--c-cyan);
}

/* ---------- 版本带 ---------- */
.page-home .version {
  background: var(--c-coal);
  border-block: 1px solid var(--c-line);
}

.page-home .version__head {
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-home .version__list {
  display: grid;
  border-top: 1px solid var(--c-line);
}

.page-home .version__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-home .version__num {
  display: inline-block;
  font-size: 12px;
  color: var(--c-orange);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.page-home .version__title {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}

.page-home .version__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .version__note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .version__note a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 242, 208, 0.4);
}

.page-home .version__note a:hover,
.page-home .version__note a:focus-visible {
  border-bottom-color: var(--c-cyan);
  outline: none;
}

/* ---------- 场景 ---------- */
.page-home .scenes__head {
  margin-bottom: clamp(22px, 4vw, 38px);
}

.page-home .scenes__grid {
  display: grid;
  gap: clamp(22px, 3.5vw, 34px);
}

.page-home .scene {
  border-top: 2px solid var(--c-cyan);
  padding-top: 16px;
}

.page-home .scene:nth-child(2) {
  border-top-color: var(--c-orange);
}

.page-home .scene:nth-child(3) {
  border-top-color: var(--c-line);
}

.page-home .scene__num {
  font-size: 12px;
  color: var(--c-grey);
  letter-spacing: 0.1em;
}

.page-home .scene__title {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 8px 0 10px;
}

.page-home .scene__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-grey);
}

.page-home .scene__link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 3px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .scene__link:hover,
.page-home .scene__link:focus-visible {
  color: var(--c-cyan);
  border-bottom-color: var(--c-cyan);
  outline: none;
}

.page-home .scenes__foot {
  margin: clamp(22px, 4vw, 34px) 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-grey);
}

.page-home .scenes__foot a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 242, 208, 0.4);
}

/* ---------- 底部数据带 ---------- */
.page-home .data-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  background: var(--c-void);
}

.page-home .data-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .data-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.page-home .data-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 15, 0.86), rgba(7, 17, 15, 0.97) 55%, var(--c-coal));
}

.page-home .data-band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-max);
  margin-inline: auto;
  padding: clamp(34px, 6vw, 68px) var(--gutter);
}

.page-home .data-band__kicker {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-peach);
  margin: 0 0 22px;
}

.page-home .band-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}

.page-home .band-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-home .band-stat__num {
  font-size: clamp(1.4rem, 4.6vw, 1.9rem);
  color: var(--c-paper);
  line-height: 1.1;
}

.page-home .band-stat__label {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-grey);
}

.page-home .data-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.page-home .back-top {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .back-top:hover,
.page-home .back-top:focus-visible {
  color: var(--c-cyan);
  border-bottom-color: var(--c-cyan);
  outline: none;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-home .lede {
    font-size: 16px;
  }

  .page-home .fields__row {
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }

  .page-home .league-row {
    grid-template-columns: 48px 116px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }

  .page-home .league-row__num {
    padding-top: 2px;
  }

  .page-home .scene {
    padding-top: 18px;
  }
}

@media (min-width: 860px) {
  .page-home .hero__stats {
    gap: 14px;
  }

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

  .page-home .version__item {
    padding: 22px 20px;
    border-bottom: 0;
    border-right: 1px solid var(--c-line);
  }

  .page-home .version__item:first-child {
    padding-left: 0;
  }

  .page-home .version__item:last-child {
    border-right: 0;
    padding-right: 0;
  }

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

  .page-home .band-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--c-line);
  }

  .page-home .band-stat {
    border-bottom: 0;
    border-right: 1px solid var(--c-line);
    padding: 20px 18px;
  }

  .page-home .band-stat:first-child {
    padding-left: 0;
  }

  .page-home .band-stat:last-child {
    border-right: 0;
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
  }

  .page-home .hero__stats {
    padding-top: 8px;
    margin-bottom: 30px;
  }

  .page-home .stat-card:nth-child(even) {
    transform: translateY(28px);
  }

  .page-home .stat-card:nth-child(even):hover,
  .page-home .stat-card:nth-child(even):focus-visible {
    transform: translateY(22px);
  }

  .page-home .league__grid {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    align-items: start;
  }

  .page-home .league__aside {
    position: sticky;
    top: 24px;
  }

  .page-home .apps__split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

@media (hover: hover) and (pointer: fine) {
  .page-home .stat-card__hint {
    opacity: 0.62;
    transition: opacity var(--t-base) var(--ease);
  }

  .page-home .stat-card:hover .stat-card__hint,
  .page-home .stat-card:focus-visible .stat-card__hint {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .stat-card,
  .page-home .stat-card__hint,
  .page-home .chip,
  .page-home .entry,
  .page-home .scene__link,
  .page-home .back-top {
    transition: none;
  }

  .page-home .stat-card:hover,
  .page-home .stat-card:focus-visible,
  .page-home .stat-card:nth-child(even),
  .page-home .stat-card:nth-child(even):hover,
  .page-home .stat-card:nth-child(even):focus-visible {
    transform: none;
  }
}