.page-home {
  background: var(--gray-050);
  color: var(--text-900);
  overflow-x: hidden;
}

/* ---------- Hero ---------- */
.page-home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--gray-050);
  padding: clamp(30px, 7vw, 64px) 0 clamp(40px, 8vw, 88px);
}

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

.page-home .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
  opacity: 0.5;
  filter: saturate(0.85) contrast(1.06);
}

.page-home .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(11, 31, 26, 0.97) 0%, rgba(11, 31, 26, 0.86) 46%, rgba(18, 72, 59, 0.55) 74%, rgba(53, 240, 208, 0.16) 100%),
    radial-gradient(90% 70% at 88% 18%, rgba(53, 240, 208, 0.22), transparent 68%);
}

.page-home .hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 5vw, 44px);
  align-items: center;
}

.page-home .hero__strip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(11, 31, 26, 0.45);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--cyan-200);
}

.page-home .hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(53, 240, 208, 0.18);
}

.page-home .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
}

.page-home .hero-title em {
  font-style: normal;
  color: var(--cyan-400);
}

.page-home .hero__lede {
  max-width: 34ch;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.72;
  color: rgba(242, 245, 244, 0.82);
}

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

/* 悬浮玻璃订阅卡 */
.page-home .sub-card {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(18, 72, 59, 0.72), rgba(11, 31, 26, 0.66));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-1);
  transform: skewX(-1.2deg);
}

.page-home .sub-card > * {
  transform: skewX(1.2deg);
}

.page-home .sub-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}

.page-home .sub-card__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cyan-200);
}

.page-home .sub-card__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.25;
  color: #ffffff;
}

.page-home .sub-card__steps {
  display: grid;
  gap: 9px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: rgba(242, 245, 244, 0.9);
}

.page-home .sub-card__steps li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-home .sub-card__steps span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(53, 240, 208, 0.16);
  color: var(--cyan-400);
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-home .sub-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.page-home .sub-card__tags span {
  padding: 4px 10px;
  border: 1px solid rgba(155, 247, 230, 0.3);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--cyan-200);
}

.page-home .sub-card__cta {
  width: 100%;
  text-align: center;
}

.page-home .sub-card__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(242, 245, 244, 0.6);
}

/* ---------- 章节通用 ---------- */
.page-home .chapter {
  position: relative;
  padding: clamp(44px, 8vw, 86px) 0;
}

.page-home .chapter + .chapter {
  border-top: 1px solid var(--gray-300);
}

.page-home .chapter__inner {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

.page-home .chapter__main {
  position: relative;
  min-width: 0;
}

.page-home .chapter-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(56px, 13vw, 96px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--gray-300);
  margin-bottom: 10px;
  transition: color 0.5s var(--ease), -webkit-text-stroke-color 0.5s var(--ease);
}

.page-home .chapter-num.is-revealed {
  color: rgba(53, 240, 208, 0.16);
  -webkit-text-stroke-color: var(--cyan-400);
}

.page-home .kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--field-500);
}

.page-home .section-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

.page-home .serif-lede {
  margin: 0 0 16px;
  font-family: var(--font-editorial);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.7;
  color: var(--field-600);
}

.page-home .prose p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--text-muted);
}

.page-home .prose p:last-child {
  margin-bottom: 0;
}

.page-home .prose a {
  color: var(--field-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-home .prose a:hover {
  color: var(--orange-500);
}

.page-home .chapter__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.page-home .link-arrow {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 240, 208, 0.4);
  padding-bottom: 2px;
}

.page-home .link-arrow:hover {
  color: var(--cyan-200);
}

/* 深色章节 */
.page-home .chapter--ink {
  background: var(--ink-900);
  border-top: 0;
  color: var(--gray-050);
}

.page-home .chapter--ink .section-title {
  color: #ffffff;
}

.page-home .chapter--ink .kicker {
  color: var(--cyan-400);
}

.page-home .chapter--ink .serif-lede {
  color: var(--cyan-200);
}

.page-home .chapter--ink .prose p,
.page-home .chapter--ink .coverage-col__text,
.page-home .chapter--ink .notes-foot a {
  color: rgba(242, 245, 244, 0.78);
}

.page-home .chapter--ink .chapter-num {
  -webkit-text-stroke-color: rgba(155, 247, 230, 0.3);
}

/* ---------- 01 速度面板 ---------- */
.page-home .speed-panel {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-1);
}

.page-home .speed-panel__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.page-home .speed-panel__num {
  margin: 6px 0 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 4.6rem);
  line-height: 1;
  color: var(--field-600);
}

.page-home .speed-panel__num span {
  font-size: 0.34em;
  margin-left: 4px;
  color: var(--text-muted);
}

.page-home .speed-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--gray-300);
  overflow: hidden;
  margin-bottom: 20px;
}

.page-home .speed-bar span {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--field-500), var(--cyan-400));
}

.page-home .speed-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.page-home .speed-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-300);
}

.page-home .speed-list dt {
  font-size: 14px;
  color: var(--text-muted);
}

.page-home .speed-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--field-500);
}

/* ---------- 02 三步 ---------- */
.page-home .steps {
  display: grid;
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .steps__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(155, 247, 230, 0.18);
}

.page-home .steps__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .steps__idx {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(53, 240, 208, 0.45);
  color: var(--cyan-400);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
}

.page-home .steps__item h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  color: #ffffff;
}

.page-home .steps__item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(242, 245, 244, 0.75);
}

/* ---------- 03 战报 ---------- */
.page-home .notes-head {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(28px, 5vw, 46px);
}

.page-home .notes-head__media {
  order: -1;
}

.page-home .notes-head__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.page-home .notes-body {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
}

.page-home .timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
  display: grid;
  gap: 24px;
  border-left: 2px solid var(--gray-300);
}

.page-home .timeline__item {
  position: relative;
}

.page-home .timeline__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--field-500);
  box-shadow: 0 0 0 4px var(--gray-050), 0 0 0 5px var(--gray-300);
}

.page-home .timeline__time {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--orange-500);
}

.page-home .timeline__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--ink-900);
}

.page-home .timeline__body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.74;
  color: var(--text-muted);
}

.page-home .score-cards {
  display: grid;
  gap: 14px;
}

.page-home .score-card {
  padding: 18px 18px 16px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--field-500);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-left-color 0.28s var(--ease);
}

.page-home .score-card:hover,
.page-home .score-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-left-color: var(--orange-500);
}

.page-home .score-card__tag {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--field-500);
}

.page-home .score-card__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
}

.page-home .score-card__line em {
  font-style: normal;
  color: var(--red-500);
  font-size: 1.1rem;
}

.page-home .score-card__meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.page-home .notes-foot {
  margin: 30px 0 0;
}

/* ---------- 04 板块对照 ---------- */
.page-home .chapter--table {
  overflow: hidden;
}

.page-home .chapter__texture {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(53, 240, 208, 0.12) 0 1px, transparent 1px 46px),
    radial-gradient(70% 60% at 84% 20%, rgba(53, 240, 208, 0.16), transparent 70%);
  pointer-events: none;
}

.page-home .chapter--table .chapter__inner {
  position: relative;
  z-index: 1;
}

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

.page-home .board-stats .stat {
  padding: 14px 14px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(155, 247, 230, 0.22);
  background: rgba(18, 72, 59, 0.42);
}

.page-home .board-stats .stat__value {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--cyan-400);
}

.page-home .board-stats .stat__label {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: rgba(242, 245, 244, 0.7);
}

.page-home .board-figure {
  display: flex;
  align-items: center;
}

.page-home .board-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(155, 247, 230, 0.2);
  object-fit: cover;
}

/* ---------- 05 覆盖与保障 ---------- */
.page-home .coverage-grid {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.page-home .coverage-col {
  padding: 22px 20px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--gray-300);
}

.page-home .coverage-col--accent {
  background: var(--field-600);
  border-color: var(--field-600);
  color: var(--gray-050);
}

.page-home .coverage-col--accent .coverage-col__title {
  color: var(--cyan-200);
}

.page-home .coverage-col__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.04rem;
  letter-spacing: 0.01em;
  color: var(--field-600);
}

.page-home .coverage-col__big {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.4rem);
  line-height: 1;
  color: var(--cyan-400);
}

.page-home .coverage-col__big span {
  font-size: 0.4em;
  margin-left: 3px;
}

.page-home .coverage-col__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-muted);
}

.page-home .coverage-col--accent .coverage-col__text {
  color: rgba(242, 245, 244, 0.82);
}

.page-home .sport-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.page-home .sport-tags li {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(15, 92, 72, 0.08);
  border: 1px solid rgba(15, 92, 72, 0.18);
  font-size: 13px;
  color: var(--field-600);
}

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

.page-home .coverage-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-muted);
}

.page-home .coverage-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--orange-500);
}

/* ---------- 收口 ---------- */
.page-home .closer {
  background: var(--field-600);
  color: var(--gray-050);
  padding: clamp(40px, 7vw, 70px) 0;
}

.page-home .closer__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}

.page-home .closer__copy .section-title {
  color: #ffffff;
  margin-bottom: 10px;
}

.page-home .closer__copy p {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.74;
  color: rgba(242, 245, 244, 0.8);
}

.page-home .closer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .closer .btn--outline {
  border-color: rgba(155, 247, 230, 0.55);
  color: var(--cyan-200);
}

.page-home .closer .btn--outline:hover {
  background: rgba(155, 247, 230, 0.12);
}

/* ---------- 媒体框微调 ---------- */
.page-home .media-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.page-home .media-frame--slant img {
  border-radius: var(--radius) var(--radius-sm) var(--radius) var(--radius-sm);
}

.page-home .media-frame__caption {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(242, 245, 244, 0.6);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .score-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .score-cards .score-card:nth-child(2) {
    transform: translateY(18px);
  }

  .page-home .score-cards .score-card:nth-child(2):hover {
    transform: translateY(14px);
  }

  .page-home .score-cards .score-card:nth-child(3) {
    transform: translateY(6px);
  }

  .page-home .score-cards .score-card:nth-child(3):hover {
    transform: translateY(2px);
  }

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

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

  .page-home .closer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 900px) {
  .page-home .hero {
    padding: clamp(48px, 6vw, 76px) 0 clamp(72px, 8vw, 104px);
  }

  .page-home .hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: end;
  }

  .page-home .hero-title {
    font-size: clamp(3.4rem, 6.4vw, 5.4rem);
  }

  .page-home .sub-card {
    margin-bottom: 8px;
  }

  .page-home .chapter__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-home .chapter__inner--rev {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }

  .page-home .notes-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: end;
  }

  .page-home .notes-head__media {
    order: 0;
  }

  .page-home .notes-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: start;
  }

  .page-home .timeline {
    padding-left: 26px;
  }

  .page-home .chapter-num {
    font-size: 96px;
  }
}

@media (min-width: 1100px) {
  .page-home .hero__lede {
    font-size: 18px;
  }

  .page-home .prose p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .score-card,
  .page-home .chapter-num {
    transition: none;
  }

  .page-home .score-card:hover,
  .page-home .score-card:focus-within {
    transform: none;
  }

  .page-home .score-cards .score-card:nth-child(2),
  .page-home .score-cards .score-card:nth-child(3) {
    transform: none;
  }
}


<main id="main-content" class="page-home">
  <section class="hero" aria-labelledby="hero-title">
    <div class="hero__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="夜场球场灯光下的运动员冲刺剪影，背景可见虚化的比分牌光点">
    </div>
    <div class="shell hero__inner">
      <div class="hero__copy">
        <p class="hero__strip">
          <span class="hero__dot" aria-hidden="true"></span>
          当前入口 M4N9 · 订阅路径已缩短到三步
        </p>
        <h1 id="hero-title" class="hero-title">哨响之前<br><em>先站到入口上</em></h1>
        <p class="hero__lede">优博体育把赛程提醒、实时比分与赛后复盘收在同一个入口：首页 1.8 秒内打开，你追的那支球队，开赛前就先收到消息。</p>
        <div class="hero__actions">
          <a class="btn btn--primary" href="/tools/">去订阅</a>
          <a class="btn btn--ghost" href="/notes/">看战报</a>
        </div>
      </div>

      <aside class="sub-card" aria-labelledby="subcard-title">
        <p class="sub-card__head">
          <span class="chip chip--live">进行中</span>
          <span class="sub-card__code">M4N9</span>
        </p>
        <h2 id="subcard-title" class="sub-card__title">三步订好你的球队</h2>
        <ul class="sub-card__steps">
          <li><span>1</span>选联赛</li>
          <li><span>2</span>选球队</li>
          <li><span>3</span>选提醒渠道</li>
        </ul>
        <p class="sub-card__tags" aria-label="可订阅的联赛类型">
          <span>足球</span><span>篮球</span><span>网球</span><span>赛车</span><span>电子竞技</span>
        </p>
        <a class="btn btn--primary sub-card__cta" href="/tools/">开始订阅</a>
        <p class="sub-card__note">赛程提醒平均 3 秒内送达，赛季高峰到达率 99.2%。</p>
      </aside>
    </div>
  </section>

  <section class="chapter" id="speed" aria-labelledby="speed-title">
    <div class="shell chapter__inner">
      <div class="chapter__main">
        <span class="chapter-num" data-reveal aria-hidden="true">01</span>
        <p class="kicker">访问速度</p>
        <h2 id="speed-title" class="section-title">切联赛的间隙，页面已经换好了</h2>
        <p class="serif-lede">同时在追三四个联赛的人，最在意的是来回点开时会不会卡那一下。</p>
        <div class="prose">
          <p>首页在常规网络环境下 1.8 秒内完成加载，移动端首屏 1.2 秒即可点开赛程。三个城市部署服务节点，配合内容分发覆盖 28 个省级区域，赛季高峰期的集中访问也不会把页面拖成等待页。</p>
          <p>从首页点进赛程、比分、榜单或球队资料，切换过程不需要重新等待一次整页加载。对一天刷十几次比分的用户来说，省下的是每次两三秒的犹豫。</p>
          <p>偶发进不去、提醒没响这类情况，<a href="/questions/">问答中心</a>按现象分了条目，通常比反复刷新更快解决。</p>
        </div>
      </div>
      <div class="chapter__aside">
        <div class="speed-panel" data-reveal data-reveal-delay="120">
          <p class="speed-panel__label">首页加载耗时</p>
          <p class="speed-panel__num">1.8<span>s</span></p>
          <div class="speed-bar" role="img" aria-label="加载进度条示意：1.8 秒完成"><span></span></div>
          <dl class="speed-list">
            <div>
              <dt>移动端首屏可交互</dt>
              <dd>1.2 秒</dd>
            </div>
            <div>
              <dt>省级区域覆盖</dt>
              <dd>28 个</dd>
            </div>
            <div>
              <dt>服务节点城市</dt>
              <dd>3 座</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </section>

  <section class="chapter chapter--ink" id="subscribe" aria-labelledby="subscribe-title">
    <div class="shell chapter__inner chapter__inner--rev">
      <div class="chapter__aside">
        <div class="media-frame media-frame--tall media-frame--slant">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机界面中的订阅卡片，列出联赛标签、球队选择与提醒渠道开关" loading="lazy" decoding="async">
          <p class="media-frame__caption">订阅清单在手机与电脑之间自动同步</p>
        </div>
      </div>
      <div class="chapter__main">
        <span class="chapter-num" data-reveal aria-hidden="true">02</span>
        <p class="kicker">订阅路径</p>
        <h2 id="subscribe-title" class="section-title">三步订完，剩下的交给提醒</h2>
        <p class="serif-lede">优博体育M4N9 栏目入口调整后，原本五步的设置压缩成三步，中途不再来回跳转。</p>
        <ol class="steps">
          <li class="steps__item">
            <span class="steps__idx">1</span>
            <div>
              <h3>先圈定联赛</h3>
              <p>足球、篮球、网球、赛车、电子竞技等 12 个赛事品类，一次可以勾选多个。</p>
            </div>
          </li>
          <li class="steps__item">
            <span class="steps__idx">2</span>
            <div>
              <h3>再挑球队或单项赛事</h3>
              <p>单个账号最多同时订阅 20 支球队或赛事，清单在个人中心随时增删。</p>
            </div>
          </li>
          <li class="steps__item">
            <span class="steps__idx">3</span>
            <div>
              <h3>最后定提醒渠道</h3>
              <p>站内信、邮件、浏览器推送三种渠道任选；赛前 24 小时、赛前 1 小时与开赛三个时间点可单独关掉。</p>
            </div>
          </li>
        </ol>
        <div class="chapter__links">
          <a class="btn btn--primary" href="/tools/">打开订阅工具中心</a>
          <a class="link-arrow" href="/team/">看看数据是怎么校验的 →</a>
        </div>
      </div>
    </div>
  </section>

  <section class="chapter" id="notes-preview" aria-labelledby="notes-title">
    <div class="shell">
      <div class="notes-head">
        <div class="notes-head__copy">
          <span class="chapter-num" data-reveal aria-hidden="true">03</span>
          <p class="kicker">战报节奏</p>
          <h2 id="notes-title" class="section-title">终场哨响，复盘已经在路上</h2>
          <p class="serif-lede">比赛结束到读完一篇能看懂的复盘，中间不该隔一夜。</p>
        </div>
        <div class="media-frame media-frame--wide notes-head__media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛场边线视角的运动员背影与观众席灯光，画面偏暗调" loading="lazy" decoding="async">
        </div>
      </div>

      <div class="notes-body">
        <ol class="timeline">
          <li class="timeline__item" data-reveal>
            <span class="timeline__time">终场 0 分钟</span>
            <div class="timeline__body">
              <h3>比分与关键事件先落地</h3>
              <p>进球、红黄牌、换人与节次比分同步更新，正在通勤路上的人也能第一眼看到结果。</p>
            </div>
          </li>
          <li class="timeline__item" data-reveal data-reveal-delay="80">
            <span class="timeline__time">30 分钟内</span>
            <div class="timeline__body">
              <h3>首版战报发出</h3>
              <p>交代胜负走向与转折点，重要赛事都在这个时间窗里看到第一篇可以转述给朋友的稿子。</p>
            </div>
          </li>
          <li class="timeline__item" data-reveal data-reveal-delay="160">
            <span class="timeline__time">2 小时内</span>
            <div class="timeline__body">
              <h3>补上数据图表与回合拆解</h3>
              <p>控球、命中率、关键回合逐段展开，看得懂战术调整的一方为什么赢在第三节。</p>
            </div>
          </li>
          <li class="timeline__item" data-reveal data-reveal-delay="240">
            <span class="timeline__time">次日</span>
            <div class="timeline__body">
              <h3>长文复盘沉淀成系列</h3>
              <p>常规赛季每周更新 20 篇以上，上一年度共发布战报与复盘内容 3,600 余篇。</p>
            </div>
          </li>
        </ol>

        <div class="score-cards">
          <article class="score-card" data-reveal>
            <p class="score-card__tag">足球 · 联赛中段</p>
            <p class="score-card__line"><span>2</span><em>:</em><span>1</span></p>
            <p class="score-card__meta">赛前 1 小时提醒已送达 · 终场 26 分钟出稿</p>
          </article>
          <article class="score-card" data-reveal data-reveal-delay="80">
            <p class="score-card__tag">篮球 · 常规赛</p>
            <p class="score-card__line"><span>104</span><em>:</em><span>98</span></p>
            <p class="score-card__meta">分节比分同步 · 关键回合拆解已上线</p>
          </article>
          <article class="score-card" data-reveal data-reveal-delay="160">
            <p class="score-card__tag">网球 · 硬地赛季</p>
            <p class="score-card__line"><span>3</span><em>:</em><span>1</span></p>
            <p class="score-card__meta">发球局数据图表随首版战报一同发布</p>
          </article>
        </div>
      </div>

      <p class="notes-foot">
        <a class="btn btn--quiet" href="/notes/">进入战报笔记</a>
      </p>
    </div>
  </section>

  <section class="chapter chapter--ink chapter--table" id="board" aria-labelledby="board-title">
    <div class="chapter__texture" aria-hidden="true"></div>
    <div class="shell chapter__inner">
      <div class="chapter__main">
        <span class="chapter-num" data-reveal aria-hidden="true">04</span>
        <p class="kicker">板块对照</p>
        <h2 id="board-title" class="section-title">对照表翻到第几页，历史就回到哪一版</h2>
        <p class="serif-lede">同一板块前后几个版本摆在一起看，改动的地方一眼能认出来。</p>
        <div class="prose">
          <p>最新板块对照页已同步至 3 月版本，收录 14 个板块、230 条对照条目，支持按板块名、更新时间与关键词筛选，每页 20 条并可翻页。</p>
          <p>对照页保留近 6 个版本的历史记录，最早可追溯至 2023 年 9 月版本。赛季中段规则或分组调整时，对照着看比凭记忆更省事。</p>
        </div>
        <div class="board-stats">
          <div class="stat">
            <p class="stat__value">14</p>
            <p class="stat__label">个板块</p>
          </div>
          <div class="stat">
            <p class="stat__value">230</p>
            <p class="stat__label">条对照条目</p>
          </div>
          <div class="stat">
            <p class="stat__value">20</p>
            <p class="stat__label">条 / 页</p>
          </div>
          <div class="stat">
            <p class="stat__value">6</p>
            <p class="stat__label">个历史版本</p>
          </div>
        </div>
        <a class="btn btn--primary" href="/tools/">查看板块对照</a>
      </div>
      <div class="chapter__aside board-figure">
        <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="抽象的比分与数据网格纹理，荧光青线条在深墨绿底上斜向排布" loading="lazy" decoding="async">
      </div>
    </div>
  </section>

  <section class="chapter" id="coverage" aria-labelledby="coverage-title">
    <div class="shell">
      <span class="chapter-num" data-reveal aria-hidden="true">05</span>
      <p class="kicker">赛事覆盖与运行保障</p>
      <h2 id="coverage-title" class="section-title">一天刷十几次，也接得住</h2>
      <p class="serif-lede">高频使用的入口，靠的不是热闹，是提醒准时、页面打开、内容不断档。</p>

      <div class="coverage-grid">
        <div class="coverage-col">
          <h3 class="coverage-col__title">12 个赛事品类</h3>
          <ul class="sport-tags">
            <li>足球</li><li>篮球</li><li>网球</li><li>赛车</li><li>电子竞技</li><li>羽毛球</li>
            <li>乒乓球</li><li>排球</li><li>斯诺克</li><li>高尔夫</li><li>田径</li><li>搏击</li>
          </ul>
          <p class="coverage-col__text">赛季错开排布，全年都有可订阅的赛事，抓哪个都不至于空窗。</p>
        </div>
        <div class="coverage-col coverage-col--accent">
          <h3 class="coverage-col__title">提醒送达</h3>
          <p class="coverage-col__big">99.2<span>%</span></p>
          <p class="coverage-col__text">赛季高峰期推送到达率，平均送达延迟控制在 3 秒内。已累计为 68 万名订阅用户送出赛程提醒与战报。</p>
        </div>
        <div class="coverage-col">
          <h3 class="coverage-col__title">值班与支持</h3>
          <ul class="coverage-list">
            <li>全年无休更新，赛季高峰 7×24 内容与技术支持值班</li>
            <li>20 余家数据供应商接入，日处理赛事事件记录 120 万条</li>
            <li>比分或数据有误，提交后平均 4 小时内完成复核</li>
            <li>赛程日历支持导出 ICS，导入常用日历应用</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="closer" aria-labelledby="closer-title">
    <div class="shell closer__inner">
      <div class="closer__copy">
        <h2 id="closer-title" class="section-title">下一场开始前，把提醒订上</h2>
        <p>三步设置好联赛与球队，赛前 24 小时、赛前 1 小时与开赛三个节点自动提醒。订阅中遇到问题，联系通道上有人接。</p>
      </div>
      <div class="closer__actions">
        <a class="btn btn--primary" href="/tools/">去订阅</a>
        <a class="btn btn--outline" href="/connect/">联系通道</a>
      </div>
    </div>
  </section>
</main>

.page-home {
  background: var(--gray-050);
  color: var(--text-900);
  overflow-x: hidden;
}

.page-home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--gray-050);
  padding: clamp(30px, 7vw, 64px) 0 clamp(40px, 8vw, 88px);
}

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

.page-home .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
  opacity: 0.5;
  filter: saturate(0.85) contrast(1.06);
}

.page-home .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(11, 31, 26, 0.97) 0%, rgba(11, 31, 26, 0.86) 46%, rgba(18, 72, 59, 0.55) 74%, rgba(53, 240, 208, 0.16) 100%),
    radial-gradient(90% 70% at 88% 18%, rgba(53, 240, 208, 0.22), transparent 68%);
}

.page-home .hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 5vw, 44px);
  align-items: center;
}

.page-home .hero__strip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(11, 31, 26, 0.45);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--cyan-200);
}

.page-home .hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(53, 240, 208, 0.18);
}

.page-home .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
}

.page-home .hero-title em {
  font-style: normal;
  color: var(--cyan-400);
}

.page-home .hero__lede {
  max-width: 34ch;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.72;
  color: rgba(242, 245, 244, 0.82);
}

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

.page-home .sub-card {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(18, 72, 59, 0.72), rgba(11, 31, 26, 0.66));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-1);
  transform: skewX(-1.2deg);
}

.page-home .sub-card > * {
  transform: skewX(1.2deg);
}

.page-home .sub-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}

.page-home .sub-card__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cyan-200);
}

.page-home .sub-card__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.25;
  color: #ffffff;
}

.page-home .sub-card__steps {
  display: grid;
  gap: 9px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: rgba(242, 245, 244, 0.9);
}

.page-home .sub-card__steps li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-home .sub-card__steps span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(53, 240, 208, 0.16);
  color: var(--cyan-400);
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-home .sub-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.page-home .sub-card__tags span {
  padding: 4px 10px;
  border: 1px solid rgba(155, 247, 230, 0.3);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--cyan-200);
}

.page-home .sub-card__cta {
  width: 100%;
  text-align: center;
}

.page-home .sub-card__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(242, 245, 244, 0.6);
}

.page-home .chapter {
  position: relative;
  padding: clamp(44px, 8vw, 86px) 0;
}

.page-home .chapter + .chapter {
  border-top: 1px solid var(--gray-300);
}

.page-home .chapter__inner {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

.page-home .chapter__main {
  position: relative;
  min-width: 0;
}

.page-home .chapter-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(56px, 13vw, 96px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--gray-300);
  margin-bottom: 10px;
  transition: color 0.5s var(--ease), -webkit-text-stroke-color 0.5s var(--ease);
}

.page-home .chapter-num.is-revealed {
  color: rgba(53, 240, 208, 0.16);
  -webkit-text-stroke-color: var(--cyan-400);
}

.page-home .kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--field-500);
}

.page-home .section-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

.page-home .serif-lede {
  margin: 0 0 16px;
  font-family: var(--font-editorial);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.7;
  color: var(--field-600);
}

.page-home .prose p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--text-muted);
}

.page-home .prose p:last-child {
  margin-bottom: 0;
}

.page-home .prose a {
  color: var(--field-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-home .prose a:hover {
  color: var(--orange-500);
}

.page-home .chapter__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.page-home .link-arrow {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 240, 208, 0.4);
  padding-bottom: 2px;
}

.page-home .link-arrow:hover {
  color: var(--cyan-200);
}

.page-home .chapter--ink {
  background: var(--ink-900);
  border-top: 0;
  color: var(--gray-050);
}

.page-home .chapter--ink .section-title {
  color: #ffffff;
}

.page-home .chapter--ink .kicker {
  color: var(--cyan-400);
}

.page-home .chapter--ink .serif-lede {
  color: var(--cyan-200);
}

.page-home .chapter--ink .prose p,
.page-home .chapter--ink .coverage-col__text,
.page-home .chapter--ink .notes-foot a {
  color: rgba(242, 245, 244, 0.78);
}

.page-home .chapter--ink .chapter-num {
  -webkit-text-stroke-color: rgba(155, 247, 230, 0.3);
}

.page-home .speed-panel {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-1);
}

.page-home .speed-panel__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.page-home .speed-panel__num {
  margin: 6px 0 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 4.6rem);
  line-height: 1;
  color: var(--field-600);
}

.page-home .speed-panel__num span {
  font-size: 0.34em;
  margin-left: 4px;
  color: var(--text-muted);
}

.page-home .speed-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--gray-300);
  overflow: hidden;
  margin-bottom: 20px;
}

.page-home .speed-bar span {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--field-500), var(--cyan-400));
}

.page-home .speed-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.page-home .speed-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-300);
}

.page-home .speed-list dt {
  font-size: 14px;
  color: var(--text-muted);
}

.page-home .speed-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--field-500);
}

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

.page-home .steps__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(155, 247, 230, 0.18);
}

.page-home .steps__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .steps__idx {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(53, 240, 208, 0.45);
  color: var(--cyan-400);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
}

.page-home .steps__item h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  color: #ffffff;
}

.page-home .steps__item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(242, 245, 244, 0.75);
}

.page-home .notes-head {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(28px, 5vw, 46px);
}

.page-home .notes-head__media {
  order: -1;
  min-width: 0;
}

.page-home .notes-head__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.page-home .notes-body {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
}

.page-home .timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
  display: grid;
  gap: 24px;
  border-left: 2px solid var(--gray-300);
}

.page-home .timeline__item {
  position: relative;
}

.page-home .timeline__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--field-500);
  box-shadow: 0 0 0 4px var(--gray-050), 0 0 0 5px var(--gray-300);
}

.page-home .timeline__time {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--orange-500);
}

.page-home .timeline__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--ink-900);
}

.page-home .timeline__body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.74;
  color: var(--text-muted);
}

.page-home .score-cards {
  display: grid;
  gap: 14px;
}

.page-home .score-card {
  padding: 18px 18px 16px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--field-500);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-left-color 0.28s var(--ease);
}

.page-home .score-card:hover,
.page-home .score-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-left-color: var(--orange-500);
}

.page-home .score-card__tag {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--field-500);
}

.page-home .score-card__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
}

.page-home .score-card__line em {
  font-style: normal;
  color: var(--red-500);
  font-size: 1.1rem;
}

.page-home .score-card__meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.page-home .notes-foot {
  margin: 30px 0 0;
}

.page-home .chapter--table {
  overflow: hidden;
}

.page-home .chapter__texture {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(53, 240, 208, 0.12) 0 1px, transparent 1px 46px),
    radial-gradient(70% 60% at 84% 20%, rgba(53, 240, 208, 0.16), transparent 70%);
  pointer-events: none;
}

.page-home .chapter--table .chapter__inner {
  position: relative;
  z-index: 1;
}

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

.page-home .board-stats .stat {
  padding: 14px 14px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(155, 247, 230, 0.22);
  background: rgba(18, 72, 59, 0.42);
}

.page-home .board-stats .stat__value {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--cyan-400);
}

.page-home .board-stats .stat__label {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: rgba(242, 245, 244, 0.7);
}

.page-home .board-figure {
  display: flex;
  align-items: center;
  min-width: 0;
}

.page-home .board-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(155, 247, 230, 0.2);
  object-fit: cover;
}

.page-home .coverage-grid {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.page-home .coverage-col {
  padding: 22px 20px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--gray-300);
}

.page-home .coverage-col--accent {
  background: var(--field-600);
  border-color: var(--field-600);
  color: var(--gray-050);
}

.page-home .coverage-col--accent .coverage-col__title {
  color: var(--cyan-200);
}

.page-home .coverage-col__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.04rem;
  letter-spacing: 0.01em;
  color: var(--field-600);
}

.page-home .coverage-col__big {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.4rem);
  line-height: 1;
  color: var(--cyan-400);
}

.page-home .coverage-col__big span {
  font-size: 0.4em;
  margin-left: 3px;
}

.page-home .coverage-col__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-muted);
}

.page-home .coverage-col--accent .coverage-col__text {
  color: rgba(242, 245, 244, 0.82);
}

.page-home .sport-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.page-home .sport-tags li {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(15, 92, 72, 0.08);
  border: 1px solid rgba(15, 92, 72, 0.18);
  font-size: 13px;
  color: var(--field-600);
}

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

.page-home .coverage-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-muted);
}

.page-home .coverage-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--orange-500);
}

.page-home .closer {
  background: var(--field-600);
  color: var(--gray-050);
  padding: clamp(40px, 7vw, 70px) 0;
}

.page-home .closer__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}

.page-home .closer__copy .section-title {
  color: #ffffff;
  margin-bottom: 10px;
}

.page-home .closer__copy p {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.74;
  color: rgba(242, 245, 244, 0.8);
}

.page-home .closer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .closer .btn--outline {
  border-color: rgba(155, 247, 230, 0.55);
  color: var(--cyan-200);
}

.page-home .closer .btn--outline:hover {
  background: rgba(155, 247, 230, 0.12);
}

.page-home .media-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.page-home .media-frame--slant img {
  border-radius: var(--radius) var(--radius-sm) var(--radius) var(--radius-sm);
}

.page-home .media-frame__caption {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(242, 245, 244, 0.6);
}

@media (min-width: 720px) {
  .page-home .score-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .score-cards .score-card:nth-child(2) {
    transform: translateY(18px);
  }

  .page-home .score-cards .score-card:nth-child(2):hover {
    transform: translateY(14px);
  }

  .page-home .score-cards .score-card:nth-child(3) {
    transform: translateY(6px);
  }

  .page-home .score-cards .score-card:nth-child(3):hover {
    transform: translateY(2px);
  }

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

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

  .page-home .closer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 900px) {
  .page-home .hero {
    padding: clamp(48px, 6vw, 76px) 0 clamp(72px, 8vw, 104px);
  }

  .page-home .hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: end;
  }

  .page-home .hero-title {
    font-size: clamp(3.4rem, 6.4vw, 5.4rem);
  }

  .page-home .sub-card {
    margin-bottom: 8px;
  }

  .page-home .chapter__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-home .chapter__inner--rev {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }

  .page-home .notes-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: end;
  }

  .page-home .notes-head__media {
    order: 0;
  }

  .page-home .notes-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: start;
  }

  .page-home .timeline {
    padding-left: 26px;
  }

  .page-home .chapter-num {
    font-size: 96px;
  }
}

@media (min-width: 1100px) {
  .page-home .hero__lede {
    font-size: 18px;
  }

  .page-home .prose p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .score-card,
  .page-home .chapter-num {
    transition: none;
  }

  .page-home .score-card:hover,
  .page-home .score-card:focus-within {
    transform: none;
  }

  .page-home .score-cards .score-card:nth-child(2),
  .page-home .score-cards .score-card:nth-child(3) {
    transform: none;
  }
}