.page-home {
  background: var(--ink-deep);
  color: var(--text);
  font-family: var(--font-sans);
}

.page-home .hx-crumb {
  padding-top: 14px;
}

.page-home h1,
.page-home h2,
.page-home h3 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.page-home h1 {
  font-size: clamp(30px, 6.6vw, 56px);
  line-height: 1.08;
  margin-top: 12px;
}

.page-home h2 {
  font-size: clamp(23px, 4vw, 34px);
  line-height: 1.16;
  margin-bottom: 12px;
}

.page-home h3 {
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
}

.page-home p {
  margin: 0 0 12px;
  line-height: 1.65;
  font-size: 15px;
}

.page-home .hx-inline-link {
  color: var(--acid);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 255, 60, 0.5);
  font-size: 14px;
}

/* ---------- HERO ---------- */
.page-home .hx-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 56px) 0 clamp(34px, 6vw, 72px);
  background:
    linear-gradient(158deg, #102E21 0%, var(--ink-deep) 48%, #07130D 100%);
}

.page-home .hx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(37, 56, 45, 0.55) 1px, transparent 1px),
    linear-gradient(rgba(37, 56, 45, 0.55) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.45;
  pointer-events: none;
}

.page-home .hx-hero::after {
  content: "";
  position: absolute;
  top: -34%;
  right: -14%;
  width: min(78%, 700px);
  aspect-ratio: 1;
  background: var(--acid);
  opacity: 0.055;
  clip-path: polygon(0 0, 100% 0, 54% 100%);
  pointer-events: none;
}

.page-home .hx-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
}

.page-home .hx-hero__deck {
  margin-top: 14px;
  max-width: 34em;
  color: var(--text);
  font-size: 16px;
}

.page-home .hx-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 26px;
}

.page-home .hx-hero__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  padding-top: 18px;
  border-top: 1px solid var(--grid-line);
}

.page-home .hx-num__v {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

.page-home .hx-num--main .hx-num__v {
  font-size: clamp(46px, 10vw, 84px);
  color: var(--acid);
}

.page-home .hx-num__k {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-hero__media {
  margin: 0;
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
}

.page-home .hx-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  filter: saturate(0.92) contrast(1.05);
}

.page-home .hx-hero__media .media__cap {
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
}

/* ---------- BOARD ---------- */
.page-home .hx-board {
  padding: clamp(34px, 6vw, 76px) 0;
}

.page-home .hx-board__head {
  max-width: 46em;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-home .hx-board__sub {
  color: var(--muted);
  font-size: 14.5px;
}

.page-home .hx-board__grid {
  display: grid;
  gap: clamp(16px, 2.6vw, 30px);
  align-items: start;
}

.page-home .hx-axis {
  border: 1px solid var(--grid-line);
  background: linear-gradient(180deg, #0D2118 0%, var(--ink-deep) 100%);
  padding: clamp(16px, 2.4vw, 24px);
}

.page-home .hx-axis__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--grid-line);
}

.page-home .hx-axis__more {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--acid);
  text-decoration: none;
}

.page-home .hx-days {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--grid-line);
}

.page-home .hx-day {
  position: relative;
  padding-bottom: 22px;
}

.page-home .hx-day:last-child {
  padding-bottom: 0;
}

.page-home .hx-day::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--carbon);
  border: 1px solid var(--grid-line);
}

.page-home .hx-day--now::before {
  background: var(--acid);
  border-color: var(--acid);
  box-shadow: 0 0 0 4px rgba(184, 255, 60, 0.14);
}

.page-home .hx-day__stamp {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.page-home .hx-day__d {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-home .hx-day--now .hx-day__d {
  color: var(--acid);
}

.page-home .hx-day__note {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-fix {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .hx-fix__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 12px;
  padding: 11px 0;
  border-top: 1px solid var(--grid-line);
}

.page-home .hx-fix__t {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--acid);
  padding-top: 2px;
}

.page-home .hx-fix__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.page-home .hx-fix__m {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-fix__o {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.page-home .hx-fix__row .tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
}

/* ---------- FEATURE ---------- */
.page-home .hx-feature {
  border: 1px solid var(--grid-line);
  background: #0C1F16;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.page-home .hx-feature__media {
  margin: 0;
}

.page-home .hx-feature__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 2 / 1;
  filter: saturate(0.9);
}

.page-home .hx-feature__body {
  padding: clamp(16px, 2.6vw, 28px);
}

.page-home .hx-feature__body p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 36em;
}

.page-home .hx-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 18px 0;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}

.page-home .hx-kv__item {
  background: var(--carbon);
  padding: 12px 14px;
}

.page-home .hx-kv dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.page-home .hx-kv dd {
  margin: 0;
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--text);
}

.page-home .hx-fold {
  border-top: 1px solid var(--grid-line);
  padding-top: 12px;
  margin-bottom: 16px;
}

.page-home .hx-fold summary {
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--acid);
  list-style: none;
}

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

.page-home .hx-fold summary::before {
  content: "+ ";
  font-family: var(--font-num);
}

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

.page-home .hx-fold p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.page-home .hx-chiprow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.page-home .hx-chip {
  display: inline-block;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--grid-line);
  background: rgba(255, 255, 255, 0.04);
}

.page-home .hx-chip:hover,
.page-home .hx-chip:focus-visible {
  border-color: var(--acid);
  color: var(--acid);
}

/* ---------- LINEUP ---------- */
.page-home .hx-lineup {
  padding: clamp(34px, 6vw, 76px) 0;
}

.page-home .hx-lineup__grid {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.page-home .hx-lineup__text p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 34em;
}

.page-home .hx-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  margin: 22px 0 20px;
}

.page-home .hx-slot {
  background: #0E2318;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-home .hx-slot__n {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--acid);
}

.page-home .hx-slot__k {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.page-home .hx-slot__d {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-home .hx-slot--warn .hx-slot__n {
  color: var(--whistle);
}

.page-home .hx-slot--red .hx-slot__n {
  color: var(--card-red);
}

.page-home .hx-notes {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.page-home .hx-notes li {
  margin-bottom: 6px;
}

.page-home .hx-lineup__media {
  margin: 0;
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}

.page-home .hx-lineup__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  filter: grayscale(0.15) contrast(1.08);
}

.page-home .hx-lineup__media .media__cap {
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
}

/* ---------- ARCHIVE ---------- */
.page-home .hx-archive {
  padding: clamp(34px, 6vw, 76px) 0;
  background: var(--carbon);
}

.page-home .hx-archive__head {
  max-width: 44em;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.page-home .hx-archive__head p {
  color: var(--muted);
  font-size: 14.5px;
}

.page-home .hx-shelf {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}

.page-home .hx-shelf__item {
  background: #0B1A13;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-home .hx-shelf__y {
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--acid);
  letter-spacing: 0.02em;
}

.page-home .hx-shelf__t {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-home .hx-archive__foot {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 52em;
}

/* ---------- POSSESSION ---------- */
.page-home .hx-pos {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 76px) 0;
  background: linear-gradient(120deg, #0B2419 0%, var(--ink-deep) 70%);
}

.page-home .hx-pos__bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  pointer-events: none;
}

.page-home .hx-pos__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(22px, 4vw, 48px);
  align-items: start;
}

.page-home .hx-pos__lead p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 32em;
  margin-bottom: 18px;
}

.page-home .hx-pos__stats {
  display: grid;
  gap: 18px;
}

.page-home .hx-pos__bar {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grid-line);
}

.page-home .hx-pos__num {
  font-family: var(--font-num);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.page-home .hx-pos__pct {
  font-size: 0.5em;
  color: var(--acid);
  margin-left: 2px;
}

.page-home .hx-pos__key {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-pos__track {
  display: block;
  height: 4px;
  background: var(--grid-line);
  margin-top: 4px;
}

.page-home .hx-pos__fill {
  display: block;
  height: 100%;
  width: var(--v);
  background: var(--acid);
}

.page-home .hx-pos__foot {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

/* ---------- VERSION ---------- */
.page-home .hx-ver {
  padding: clamp(34px, 6vw, 76px) 0;
}

.page-home .hx-ver__grid {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
}

.page-home .hx-ver__lead p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 30em;
}

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

.page-home .hx-ver__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--grid-line);
}

.page-home .hx-ver__i {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--acid);
  padding-top: 4px;
}

.page-home .hx-ver__item h3 {
  font-size: 17px;
  margin-bottom: 4px;
}

.page-home .hx-ver__item p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- CTA ---------- */
.page-home .hx-cta {
  padding: 0 0 clamp(36px, 6vw, 72px);
}

.page-home .hx-cta__bar {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--grid-line);
  border-left: 3px solid var(--acid);
  background: rgba(255, 255, 255, 0.04);
}

.page-home .hx-cta__text p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 44em;
}

.page-home .hx-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- MEDIA QUERIES ---------- */
@media (min-width: 720px) {
  .page-home .hx-lineup__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-home .hx-pos__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  }

  .page-home .hx-ver__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .page-home .hx-cta__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 960px) {
  .page-home .hx-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .page-home .hx-board__grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }

  .page-home .hx-fix__row {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: start;
  }

  .page-home .hx-fix__t {
    padding-top: 1px;
  }

  .page-home .hx-fix__row .tag {
    grid-column: 3;
    margin-top: 0;
    align-self: center;
  }

  .page-home .hx-pos__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: end;
  }

  .page-home .hx-pos__foot {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home * {
    transition: none !important;
    animation: none !important;
  }
}


<main id="main-content" class="page-home">
  <div class="wrap hx-crumb">
    <nav class="breadcrumbs" aria-label="页面位置">
      <ol>
        <li class="breadcrumbs__item" aria-current="page">首页</li>
      </ol>
    </nav>
  </div>

  <section class="hx-hero" aria-labelledby="hx-hero-title">
    <div class="wrap hx-hero__grid">
      <div class="hx-hero__lead">
        <p class="label">桌面端主场 · V3.1</p>
        <h1 id="hx-hero-title">开赛前十分钟，赛程、专题与首发一起摊在眼前</h1>
        <p class="hx-hero__deck">有球体育把当天的比赛安排、你追了多年的球队动态和临场名单放在同一块屏上。今天先看哪一场、谁上谁不上，扫一眼就有答案，不用在几个窗口之间来回切。</p>
        <div class="hx-hero__acts">
          <a class="btn btn--primary" href="#today-fixtures">进入今日赛程</a>
          <a class="btn btn--ghost" href="/projects/">关注我的球队</a>
        </div>
        <div class="hx-hero__nums">
          <div class="hx-num hx-num--main">
            <span class="hx-num__v">260</span>
            <span class="hx-num__k">今日更新赛程条目</span>
          </div>
          <div class="hx-num">
            <span class="hx-num__v">12</span>
            <span class="hx-num__k">联赛专题</span>
          </div>
          <div class="hx-num">
            <span class="hx-num__v">9</span>
            <span class="hx-num__k">赛季档案</span>
          </div>
        </div>
      </div>
      <figure class="hx-hero__media media media--wide">
        <div class="media__inner">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场俯拍，看台灯光与草皮亮度形成强烈明暗对比，画面带轻微颗粒">
        </div>
        <figcaption class="media__cap">夜场开灯后的第一眼：赛程、专题与名单同时就位。</figcaption>
      </figure>
    </div>
  </section>

  <section class="hx-board" id="today-fixtures" aria-labelledby="hx-board-title">
    <div class="wrap">
      <header class="hx-board__head">
        <p class="label">赛程日期轴</p>
        <h2 id="hx-board-title">从今天往后七天，比赛时间沿一条线排开</h2>
        <p class="hx-board__sub">左栏按日期往下走，开赛时间、赛事轮次和场上看点排在一条竖线上；右栏是你跟随球队的专题，两栏并排，赛前准备和赛季回溯一起做完。开赛前十分钟名单有变动，条目会直接亮起状态标记。</p>
      </header>

      <div class="hx-board__grid">
        <div class="hx-axis">
          <div class="hx-axis__top">
            <span class="label">未来七天</span>
            <a class="hx-axis__more" href="/articles/">赛前情报 →</a>
          </div>
          <ol class="hx-days">
            <li class="hx-day hx-day--now">
              <div class="hx-day__stamp">
                <span class="hx-day__d">今天</span>
                <span class="hx-day__note">2 场</span>
              </div>
              <ul class="hx-fix">
                <li class="hx-fix__row">
                  <span class="hx-fix__t">20:00</span>
                  <span class="hx-fix__body">
                    <span class="hx-fix__m">国内联赛 · 第 27 轮</span>
                    <span class="hx-fix__o">榜首对第三，主队近五轮不败</span>
                  </span>
                  <span class="tag tag--acid">名单已更新</span>
                </li>
                <li class="hx-fix__row">
                  <span class="hx-fix__t">22:30</span>
                  <span class="hx-fix__body">
                    <span class="hx-fix__m">欧洲联赛 · 第 31 轮</span>
                    <span class="hx-fix__o">争四关键场，客队连平三场</span>
                  </span>
                  <span class="tag tag--orange">伤停待定</span>
                </li>
              </ul>
            </li>
            <li class="hx-day">
              <div class="hx-day__stamp">
                <span class="hx-day__d">明天</span>
                <span class="hx-day__note">2 场</span>
              </div>
              <ul class="hx-fix">
                <li class="hx-fix__row">
                  <span class="hx-fix__t">19:35</span>
                  <span class="hx-fix__body">
                    <span class="hx-fix__m">国内联赛 · 第 27 轮</span>
                    <span class="hx-fix__o">保级六分战，两队积分相同</span>
                  </span>
                  <span class="tag">名单未出</span>
                </li>
                <li class="hx-fix__row">
                  <span class="hx-fix__t">03:00</span>
                  <span class="hx-fix__body">
                    <span class="hx-fix__m">洲际杯赛 · 八强首回合</span>
                    <span class="hx-fix__o">客场先打，主力中场停赛</span>
                  </span>
                  <span class="tag tag--red">停赛 1 人</span>
                </li>
              </ul>
            </li>
            <li class="hx-day">
              <div class="hx-day__stamp">
                <span class="hx-day__d">周日</span>
                <span class="hx-day__note">1 场</span>
              </div>
              <ul class="hx-fix">
                <li class="hx-fix__row">
                  <span class="hx-fix__t">21:00</span>
                  <span class="hx-fix__body">
                    <span class="hx-fix__m">欧洲联赛 · 第 31 轮</span>
                    <span class="hx-fix__o">榜尾对中游，主队只剩主场可抢</span>
                  </span>
                  <span class="tag">名单未出</span>
                </li>
              </ul>
            </li>
            <li class="hx-day">
              <div class="hx-day__stamp">
                <span class="hx-day__d">周一</span>
                <span class="hx-day__note">1 场</span>
              </div>
              <ul class="hx-fix">
                <li class="hx-fix__row">
                  <span class="hx-fix__t">02:45</span>
                  <span class="hx-fix__body">
                    <span class="hx-fix__m">洲际杯赛 · 八强首回合</span>
                    <span class="hx-fix__o">轮换阵型，替补深度吃紧</span>
                  </span>
                  <span class="tag tag--orange">轮换提示</span>
                </li>
              </ul>
            </li>
            <li class="hx-day">
              <div class="hx-day__stamp">
                <span class="hx-day__d">周三</span>
                <span class="hx-day__note">1 场</span>
              </div>
              <ul class="hx-fix">
                <li class="hx-fix__row">
                  <span class="hx-fix__t">20:00</span>
                  <span class="hx-fix__body">
                    <span class="hx-fix__m">国内联赛 · 第 28 轮</span>
                    <span class="hx-fix__o">同城对话，两队都在三天内连赛</span>
                  </span>
                  <span class="tag">名单未出</span>
                </li>
              </ul>
            </li>
          </ol>
        </div>

        <article class="hx-feature">
          <figure class="hx-feature__media media media--wide">
            <div class="media__inner">
              <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="夜灯下的球场边线与角旗特写，草地纹理清晰，画面为暗绿色调" loading="lazy" decoding="async">
            </div>
          </figure>
          <div class="hx-feature__body">
            <p class="label">球队专题 · 跟随视图</p>
            <h3>你跟随的球队，专题一路跟到赛季收官</h3>
            <p>桌面上可以把两支球队的专题并排放，谁在往上走、谁掉了链子，一眼就能比出来。每支球队的专题里，积分榜、赛程、球队档案与球员数据四个一级标签始终挂在顶部。</p>
            <dl class="hx-kv">
              <div class="hx-kv__item">
                <dt>最近 10 场</dt>
                <dd>6 胜 2 平 2 负</dd>
              </div>
              <div class="hx-kv__item">
                <dt>积分位置</dt>
                <dd>第 3 位 · 距榜首 4 分</dd>
              </div>
              <div class="hx-kv__item">
                <dt>进失球</dt>
                <dd>场均 1.7 进 / 0.9 失</dd>
              </div>
            </dl>
            <details class="hx-fold">
              <summary>专题里的长文与战术图解</summary>
              <p>球队跟踪页提供最近十场走势、进失球分布与控球率变化曲线；每个比赛轮次还会更新 8 至 12 篇战术板图解，跟着专题一起读，阵型为什么换、换完哪里松，都能对上画面。</p>
              <a class="hx-inline-link" href="/projects/">查看球队跟踪的完整维度 →</a>
            </details>
            <ul class="hx-chiprow">
              <li><a class="hx-chip" href="/projects/">积分榜</a></li>
              <li><a class="hx-chip" href="/projects/">赛程</a></li>
              <li><a class="hx-chip" href="/projects/">球队档案</a></li>
              <li><a class="hx-chip" href="/projects/">球员数据</a></li>
            </ul>
          </div>
        </article>
      </div>
    </div>
  </section>

  <div class="wrap"><hr class="tactic-line"></div>

  <section class="hx-lineup" id="lineup" aria-labelledby="hx-lineup-title">
    <div class="wrap hx-lineup__grid">
      <div class="hx-lineup__text">
        <p class="label">赛前十分钟</p>
        <h2 id="hx-lineup-title">首发、替补、伤停、停赛，压在同一块战术格里</h2>
        <p>名单是赛前最容易被翻来翻去的东西。阵容核对板把四类信息摊在一屏：常规时段大约 90 秒刷新一次，开赛前十分钟切进高频模式，谁临时换下、谁突发病情，格子里的数字跟着动。</p>
        <div class="hx-slots">
          <div class="hx-slot">
            <span class="hx-slot__n">11</span>
            <span class="hx-slot__k">首发</span>
            <span class="hx-slot__d">含位置与号码</span>
          </div>
          <div class="hx-slot">
            <span class="hx-slot__n">7</span>
            <span class="hx-slot__k">替补</span>
            <span class="hx-slot__d">标注惯用位置</span>
          </div>
          <div class="hx-slot hx-slot--warn">
            <span class="hx-slot__n">2</span>
            <span class="hx-slot__k">伤停</span>
            <span class="hx-slot__d">恢复进度可见</span>
          </div>
          <div class="hx-slot hx-slot--red">
            <span class="hx-slot__n">1</span>
            <span class="hx-slot__k">停赛</span>
            <span class="hx-slot__d">含累计与场次</span>
          </div>
        </div>
        <details class="hx-fold">
          <summary>展开替补与停赛的具体情况</summary>
          <ul class="hx-notes">
            <li>替补席上两名边路球员本赛季出场时间接近，临场换边是常见选择。</li>
            <li>停赛球员按杯赛与联赛分别累计，跨赛事不会互相抵消。</li>
            <li>名单公布后十五分钟内会补齐号码与站位，便于对着阵型图看。</li>
          </ul>
        </details>
      </div>
      <figure class="hx-lineup__media media media--tall">
        <div class="media__inner">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="边线附近的热身剪影，逆光下只见轮廓，无法辨认任何面部特征" loading="lazy" decoding="async">
        </div>
        <figcaption class="media__cap">开赛前十分钟，边线一侧的热身仍在继续，名单随时可能再改一次。</figcaption>
      </figure>
    </div>
  </section>

  <section class="hx-archive" id="archive" aria-labelledby="hx-archive-title">
    <div class="wrap">
      <header class="hx-archive__head">
        <p class="label">档案墙</p>
        <h2 id="hx-archive-title">往回翻到 2016-17，九个赛季的赛程都还立着</h2>
        <p>按赛季归档的档案墙，单赛季可以翻阅赛程、赛果与关键数据三类记录。跟队年头长的球迷想找一场旧仗，不必再去翻论坛和截图，赛季格点开就能读。</p>
      </header>
      <ol class="hx-shelf">
        <li class="hx-shelf__item"><span class="hx-shelf__y">2016-17</span><span class="hx-shelf__t">赛程 · 赛果</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2017-18</span><span class="hx-shelf__t">赛程 · 赛果</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2018-19</span><span class="hx-shelf__t">赛程 · 赛果 · 关键数据</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2019-20</span><span class="hx-shelf__t">赛程 · 赛果 · 关键数据</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2020-21</span><span class="hx-shelf__t">赛程 · 赛果 · 关键数据</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2021-22</span><span class="hx-shelf__t">赛程 · 赛果 · 关键数据</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2022-23</span><span class="hx-shelf__t">赛程 · 赛果 · 关键数据</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2023-24</span><span class="hx-shelf__t">赛程 · 赛果 · 关键数据</span></li>
        <li class="hx-shelf__item"><span class="hx-shelf__y">2024-25</span><span class="hx-shelf__t">赛程 · 赛果 · 关键数据</span></li>
      </ol>
      <p class="hx-archive__foot">档案与专题由 38 人团队分工维护，数据编辑 14 人、赛事实时值守 9 人；比赛日值守覆盖两个时段，赛程与球员数据的更新同源同步。<a class="hx-inline-link" href="/about-us/">看看团队与九年历程 →</a></p>
    </div>
  </section>

  <section class="hx-pos" id="possession" aria-labelledby="hx-pos-title">
    <img class="hx-pos__bgimg" src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="深绿底上的手绘战术板线条与箭头，表现跑位方向" loading="lazy" decoding="async">
    <div class="wrap hx-pos__grid">
      <div class="hx-pos__lead">
        <p class="label">球员页 · 控球率指标</p>
        <h2 id="hx-pos-title">控球率不是一个数字，是三个切面</h2>
        <p>同一名球员，换到客场、遇上强度更高的对手，控球占比会明显变形。球员页把控球率按赛季、主客场与对手强度拆成三段看，中场球员的赛季控球占比停在 58.7%，切到客场段落是 52.4%，差别往往就出在这里。</p>
        <a class="btn btn--ghost btn--sm" href="/answers/">指标怎么读 →</a>
      </div>
      <div class="hx-pos__stats">
        <div class="hx-pos__bar">
          <span class="hx-pos__num">58.7<span class="hx-pos__pct">%</span></span>
          <span class="hx-pos__key">赛季全程</span>
          <span class="hx-pos__track"><span class="hx-pos__fill" style="--v:58.7%"></span></span>
        </div>
        <div class="hx-pos__bar">
          <span class="hx-pos__num">61.2<span class="hx-pos__pct">%</span></span>
          <span class="hx-pos__key">主场段落</span>
          <span class="hx-pos__track"><span class="hx-pos__fill" style="--v:61.2%"></span></span>
        </div>
        <div class="hx-pos__bar">
          <span class="hx-pos__num">52.4<span class="hx-pos__pct">%</span></span>
          <span class="hx-pos__key">客场段落</span>
          <span class="hx-pos__track"><span class="hx-pos__fill" style="--v:52.4%"></span></span>
        </div>
        <p class="hx-pos__foot">对手强度分成高、中、低三档，切换后曲线与柱形一起重算。</p>
      </div>
    </div>
  </section>

  <section class="hx-ver" id="version" aria-labelledby="hx-ver-title">
    <div class="wrap hx-ver__grid">
      <div class="hx-ver__lead">
        <p class="label">版本 V3.1</p>
        <h2 id="hx-ver-title">这次升级，动的是赛前那段最紧张的时间</h2>
        <p>从最初的版本走到今天，站点经历了四个大版本。V3.1 把力气花在同一件事上：让你在开球前把该确认的东西一次确认完。</p>
      </div>
      <ol class="hx-ver__list">
        <li class="hx-ver__item">
          <span class="hx-ver__i">01</span>
          <div>
            <h3>内容中心拆成两栏</h3>
            <p>左侧日期轴排赛程资讯，右侧宽幅模块跟球队走，赛前准备和赛季回溯落在同一屏里。</p>
          </div>
        </li>
        <li class="hx-ver__item">
          <span class="hx-ver__i">02</span>
          <div>
            <h3>阵容核对成为常驻入口</h3>
            <p>开赛前十分钟的高频刷新被提到首屏附近，名单一有变化，状态标记立刻换色。</p>
          </div>
        </li>
        <li class="hx-ver__item">
          <span class="hx-ver__i">03</span>
          <div>
            <h3>历史数据翻得动了</h3>
            <p>九个赛季的赛程与赛果重做翻查方式，往回翻旧赛季不再一层层点进去。</p>
          </div>
        </li>
        <li class="hx-ver__item">
          <span class="hx-ver__i">04</span>
          <div>
            <h3>控球率进入球员页</h3>
            <p>CN 控球率指标落到具体球员，可按赛季、主客场与对手强度分段查看。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="hx-cta" id="support" aria-labelledby="hx-cta-title">
    <div class="wrap hx-cta__bar">
      <div class="hx-cta__text">
        <p class="label">服务与联络</p>
        <h2 id="hx-cta-title">赛季会员与球队专题订阅，两种方式都能开始</h2>
        <p>客服在工作日 09:00-18:00 处理邮箱与电话咨询，赛程与阵容类问题优先回复。地方赛事机构、青训机构与内容分发渠道有合作意向的，说明来意即可。</p>
      </div>
      <div class="hx-cta__acts">
        <a class="btn btn--primary" href="/reach-us/">联系客服</a>
        <a class="btn btn--ghost" href="/answers/">常见问题</a>
      </div>
    </div>
  </section>
</main>

.page-home {
  background: var(--ink-deep);
  color: var(--text);
  font-family: var(--font-sans);
}

.page-home .hx-crumb {
  padding-top: 14px;
}

.page-home h1,
.page-home h2,
.page-home h3 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.page-home h1 {
  font-size: clamp(30px, 6.6vw, 56px);
  line-height: 1.08;
  margin-top: 12px;
}

.page-home h2 {
  font-size: clamp(23px, 4vw, 34px);
  line-height: 1.16;
  margin-bottom: 12px;
}

.page-home h3 {
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
}

.page-home p {
  margin: 0 0 12px;
  line-height: 1.65;
  font-size: 15px;
}

.page-home .hx-inline-link {
  color: var(--acid);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 255, 60, 0.5);
  font-size: 14px;
}

/* HERO */
.page-home .hx-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 56px) 0 clamp(34px, 6vw, 72px);
  background: linear-gradient(158deg, #102E21 0%, var(--ink-deep) 48%, #07130D 100%);
}

.page-home .hx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(37, 56, 45, 0.55) 1px, transparent 1px),
    linear-gradient(rgba(37, 56, 45, 0.55) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.45;
  pointer-events: none;
}

.page-home .hx-hero::after {
  content: "";
  position: absolute;
  top: -34%;
  right: -14%;
  width: min(78%, 700px);
  aspect-ratio: 1;
  background: var(--acid);
  opacity: 0.055;
  clip-path: polygon(0 0, 100% 0, 54% 100%);
  pointer-events: none;
}

.page-home .hx-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
}

.page-home .hx-hero__deck {
  margin-top: 14px;
  max-width: 34em;
  color: var(--text);
  font-size: 16px;
}

.page-home .hx-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 26px;
}

.page-home .hx-hero__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  padding-top: 18px;
  border-top: 1px solid var(--grid-line);
}

.page-home .hx-num__v {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

.page-home .hx-num--main .hx-num__v {
  font-size: clamp(46px, 10vw, 84px);
  color: var(--acid);
}

.page-home .hx-num__k {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-hero__media {
  margin: 0;
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
}

.page-home .hx-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  filter: saturate(0.92) contrast(1.05);
}

.page-home .hx-hero__media .media__cap {
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
}

/* BOARD */
.page-home .hx-board {
  padding: clamp(34px, 6vw, 76px) 0;
}

.page-home .hx-board__head {
  max-width: 46em;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-home .hx-board__sub {
  color: var(--muted);
  font-size: 14.5px;
}

.page-home .hx-board__grid {
  display: grid;
  gap: clamp(16px, 2.6vw, 30px);
  align-items: start;
}

.page-home .hx-axis {
  border: 1px solid var(--grid-line);
  background: linear-gradient(180deg, #0D2118 0%, var(--ink-deep) 100%);
  padding: clamp(16px, 2.4vw, 24px);
}

.page-home .hx-axis__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--grid-line);
}

.page-home .hx-axis__more {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--acid);
  text-decoration: none;
}

.page-home .hx-days {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--grid-line);
}

.page-home .hx-day {
  position: relative;
  padding-bottom: 22px;
}

.page-home .hx-day:last-child {
  padding-bottom: 0;
}

.page-home .hx-day::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--carbon);
  border: 1px solid var(--grid-line);
}

.page-home .hx-day--now::before {
  background: var(--acid);
  border-color: var(--acid);
  box-shadow: 0 0 0 4px rgba(184, 255, 60, 0.14);
}

.page-home .hx-day__stamp {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.page-home .hx-day__d {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-home .hx-day--now .hx-day__d {
  color: var(--acid);
}

.page-home .hx-day__note {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-fix {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .hx-fix__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 12px;
  padding: 11px 0;
  border-top: 1px solid var(--grid-line);
}

.page-home .hx-fix__t {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--acid);
  padding-top: 2px;
}

.page-home .hx-fix__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.page-home .hx-fix__m {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-fix__o {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.page-home .hx-fix__row .tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
}

/* FEATURE */
.page-home .hx-feature {
  border: 1px solid var(--grid-line);
  background: #0C1F16;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.page-home .hx-feature__media {
  margin: 0;
}

.page-home .hx-feature__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 2 / 1;
  filter: saturate(0.9);
}

.page-home .hx-feature__body {
  padding: clamp(16px, 2.6vw, 28px);
}

.page-home .hx-feature__body p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 36em;
}

.page-home .hx-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 18px 0;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}

.page-home .hx-kv__item {
  background: var(--carbon);
  padding: 12px 14px;
}

.page-home .hx-kv dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.page-home .hx-kv dd {
  margin: 0;
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--text);
}

.page-home .hx-fold {
  border-top: 1px solid var(--grid-line);
  padding-top: 12px;
  margin-bottom: 16px;
}

.page-home .hx-fold summary {
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--acid);
  list-style: none;
}

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

.page-home .hx-fold summary::before {
  content: "+ ";
  font-family: var(--font-num);
}

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

.page-home .hx-fold p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.page-home .hx-chiprow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.page-home .hx-chip {
  display: inline-block;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--grid-line);
  background: rgba(255, 255, 255, 0.04);
}

.page-home .hx-chip:hover,
.page-home .hx-chip:focus-visible {
  border-color: var(--acid);
  color: var(--acid);
}

/* LINEUP */
.page-home .hx-lineup {
  padding: clamp(34px, 6vw, 76px) 0;
}

.page-home .hx-lineup__grid {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.page-home .hx-lineup__text p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 34em;
}

.page-home .hx-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  margin: 22px 0 20px;
}

.page-home .hx-slot {
  background: #0E2318;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-home .hx-slot__n {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--acid);
}

.page-home .hx-slot__k {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.page-home .hx-slot__d {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-home .hx-slot--warn .hx-slot__n {
  color: var(--whistle);
}

.page-home .hx-slot--red .hx-slot__n {
  color: var(--card-red);
}

.page-home .hx-notes {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.page-home .hx-notes li {
  margin-bottom: 6px;
}

.page-home .hx-lineup__media {
  margin: 0;
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}

.page-home .hx-lineup__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  filter: grayscale(0.15) contrast(1.08);
}

.page-home .hx-lineup__media .media__cap {
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
}

/* ARCHIVE */
.page-home .hx-archive {
  padding: clamp(34px, 6vw, 76px) 0;
  background: var(--carbon);
}

.page-home .hx-archive__head {
  max-width: 44em;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.page-home .hx-archive__head p {
  color: var(--muted);
  font-size: 14.5px;
}

.page-home .hx-shelf {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}

.page-home .hx-shelf__item {
  background: #0B1A13;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-home .hx-shelf__y {
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--acid);
  letter-spacing: 0.02em;
}

.page-home .hx-shelf__t {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-home .hx-archive__foot {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 52em;
}

/* POSSESSION */
.page-home .hx-pos {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 76px) 0;
  background: linear-gradient(120deg, #0B2419 0%, var(--ink-deep) 70%);
}

.page-home .hx-pos__bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  pointer-events: none;
}

.page-home .hx-pos__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(22px, 4vw, 48px);
  align-items: start;
}

.page-home .hx-pos__lead p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 32em;
  margin-bottom: 18px;
}

.page-home .hx-pos__stats {
  display: grid;
  gap: 18px;
}

.page-home .hx-pos__bar {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grid-line);
}

.page-home .hx-pos__num {
  font-family: var(--font-num);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.page-home .hx-pos__pct {
  font-size: 0.5em;
  color: var(--acid);
  margin-left: 2px;
}

.page-home .hx-pos__key {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .hx-pos__track {
  display: block;
  height: 4px;
  background: var(--grid-line);
  margin-top: 4px;
}

.page-home .hx-pos__fill {
  display: block;
  height: 100%;
  width: var(--v);
  background: var(--acid);
}

.page-home .hx-pos__foot {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

/* VERSION */
.page-home .hx-ver {
  padding: clamp(34px, 6vw, 76px) 0;
}

.page-home .hx-ver__grid {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
}

.page-home .hx-ver__lead p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 30em;
}

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

.page-home .hx-ver__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--grid-line);
}

.page-home .hx-ver__i {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--acid);
  padding-top: 4px;
}

.page-home .hx-ver__item h3 {
  font-size: 17px;
  margin-bottom: 4px;
}

.page-home .hx-ver__item p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* CTA */
.page-home .hx-cta {
  padding: 0 0 clamp(36px, 6vw, 72px);
}

.page-home .hx-cta__bar {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--grid-line);
  border-left: 3px solid var(--acid);
  background: rgba(255, 255, 255, 0.04);
}

.page-home .hx-cta__text p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 44em;
}

.page-home .hx-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* MEDIA QUERIES */
@media (min-width: 720px) {
  .page-home .hx-lineup__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-home .hx-pos__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  }

  .page-home .hx-ver__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .page-home .hx-cta__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 960px) {
  .page-home .hx-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .page-home .hx-board__grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }

  .page-home .hx-fix__row {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: start;
  }

  .page-home .hx-fix__t {
    padding-top: 1px;
  }

  .page-home .hx-fix__row .tag {
    grid-column: 3;
    margin-top: 0;
    align-self: center;
  }

  .page-home .hx-pos__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: end;
  }

  .page-home .hx-pos__foot {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home * {
    transition: none !important;
    animation: none !important;
  }
}