.page-home {
  display: block;
}

.page-home .crumbs {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
}

.page-home .crumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-home .crumbs-item a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .crumbs-item a:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-home .crumbs-item[aria-current="page"] {
  color: var(--white);
}

/* ---------- HERO ---------- */

.page-home .hero {
  position: relative;
  padding: 24px 0 0;
  overflow: hidden;
}

.page-home .hero-split {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--gutter) clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}

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

.page-home .hero-title {
  font-size: var(--fs-display);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 14px 0 20px;
  color: var(--white);
  max-width: 16ch;
}

.page-home .hero-title::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
  border-radius: 2px;
}

.page-home .hero-lead {
  color: var(--mist);
  max-width: 62ch;
  margin: 0 0 26px;
}

.page-home .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

.page-home .hero-round {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
}

.page-home .hero-round-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .hero-round-num {
  font-size: 1.15rem;
  color: var(--white);
}

.page-home .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.page-home .hero-trust {
  font-size: 13px;
  margin: 0;
}

.page-home .hero-visual {
  position: relative;
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--deep) 0%, var(--ink-deep) 100%);
  box-shadow: var(--shadow-card);
}

.page-home .hero-visual-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.page-home .hero-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.78) contrast(1.08);
}

.page-home .hero-visual-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 224, 214, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 224, 214, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}

.page-home .hero-visual-glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70%;
  height: 120%;
  background: radial-gradient(
    circle at 70% 30%,
    rgba(34, 224, 214, 0.28),
    transparent 62%
  );
  pointer-events: none;
  animation: page-home-pulse 12s ease-in-out infinite;
}

.page-home .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 23, 38, 0.15) 0%,
    rgba(6, 23, 38, 0.72) 100%
  );
  pointer-events: none;
}

.page-home .hero-visual-cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(6, 23, 38, 0.86);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--mist);
}

.page-home .hero-visual-note {
  line-height: 1.5;
}

@keyframes page-home-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 0.95; transform: translateX(-6%); }
}

/* ---------- SNAPSHOT ---------- */

.page-home .section {
  padding: clamp(48px, 7vw, 88px) 0;
}

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

.page-home .snapshot .section-head,
.page-home .navboard .section-head,
.page-home .latest .section-head {
  max-width: var(--shell);
  margin: 0 auto 32px;
  padding: 0 var(--gutter);
}

.page-home .snapshot-title,
.page-home .navboard-title,
.page-home .plans-title,
.page-home .route-title,
.page-home .latest-title {
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 900;
  color: var(--white);
  margin: 10px 0 0;
  max-width: 24ch;
}

.page-home .snapshot-hint,
.page-home .navboard-hint,
.page-home .route-hint {
  font-size: 13px;
  margin: 12px 0 0;
  max-width: 46ch;
}

.page-home .snapshot-filter {
  max-width: var(--shell);
  margin: 0 auto 26px;
  padding: 0 var(--gutter);
}

.page-home .snapshot-layout {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-home .snapshot-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-home .snap-card {
  position: relative;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: linear-gradient(165deg, rgba(14, 47, 74, 0.72) 0%, rgba(6, 23, 38, 0.85) 100%);
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .snap-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.page-home .snap-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 12px;
}

.page-home .snap-value {
  font-size: 1.4rem;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--white);
}

.page-home .snap-unit {
  font-size: 0.7em;
  margin-left: 2px;
}

.page-home .snap-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 12px;
}

.page-home .snap-bar {
  display: block;
  height: 6px;
}

.page-home .snap-bar--home,
.page-home .snap-bar--away,
.page-home .snap-bar--gold {
  transform-origin: left center;
  animation: page-home-grow 0.42s var(--ease) both;
}

.page-home .snap-bar--gold {
  background: linear-gradient(90deg, rgba(255, 200, 87, 0.35), var(--gold));
}

.page-home .snap-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist);
  margin: 0;
}

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

.page-home .snapshot-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--slate);
}

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

.page-home .snapshot-figure .media-cap {
  display: block;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mist);
  background: rgba(6, 23, 38, 0.7);
  border-top: 1px solid var(--line);
}

.page-home .snapshot-plaque {
  background: var(--slate);
  border: 1px solid var(--line);
}

.page-home .snapshot-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.24s var(--ease);
}

.page-home .snapshot-link:hover {
  border-color: var(--cyan);
}

@keyframes page-home-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- NAVBOARD ---------- */

.page-home .navboard {
  position: relative;
  background:
    radial-gradient(circle at 88% 8%, rgba(34, 224, 214, 0.1), transparent 52%),
    var(--ink-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .navboard-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-home .nav-card {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(14, 47, 74, 0.4);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .nav-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.page-home .nav-card--accent {
  background: linear-gradient(170deg, rgba(34, 224, 214, 0.1), rgba(14, 47, 74, 0.5));
  border-color: rgba(34, 224, 214, 0.35);
}

.page-home .nav-card-idx {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin: 0 0 10px;
}

.page-home .nav-card--accent .nav-card-idx {
  color: var(--gold);
}

.page-home .nav-card-title {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--white);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

.page-home .nav-card-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
  margin: 0 0 18px;
}

.page-home .nav-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.page-home .nav-card-list a {
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.24s var(--ease);
}

.page-home .nav-card-list a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transition: width 0.24s var(--ease);
}

.page-home .nav-card-list a:hover {
  color: var(--gold);
}

.page-home .nav-card-list a:hover::before {
  width: 22px;
}

/* ---------- PLANS ---------- */

.page-home .plans-split {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.page-home .plans-title {
  margin-bottom: 18px;
}

.page-home .plans-lead {
  color: var(--mist);
  margin: 0 0 26px;
}

.page-home .plans-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}

.page-home .plan-item {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.page-home .plan-tier {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  padding: 4px 0;
}

.page-home .plan-tier--accent {
  color: var(--orange);
}

.page-home .plan-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 6px;
}

.page-home .plan-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
  margin: 0;
}

.page-home .plans-note {
  font-size: 13px;
  margin: 0 0 20px;
}

.page-home .plans-visual {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--slate);
  box-shadow: var(--shadow-card);
}

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

.page-home .plans-visual .media-cap {
  display: block;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mist);
  background: rgba(6, 23, 38, 0.72);
  border-top: 1px solid var(--line);
}

/* ---------- ROUTE (paper) ---------- */

.page-home .route {
  position: relative;
  background: var(--paper);
  color: var(--ink);
}

.page-home .wrap-when-paper {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-home .section-head--paper {
  padding: 0;
  margin: 0 0 26px;
}

.page-home .eyebrow--paper {
  color: var(--orange);
}

.page-home .route-title {
  color: var(--ink);
}

.page-home .route-hint {
  color: rgba(6, 23, 38, 0.68);
}

.page-home .route-figure {
  margin: 0 0 40px;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--line-paper);
}

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

.page-home .route-figure .media-cap {
  display: block;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(6, 23, 38, 0.66);
  background: rgba(6, 23, 38, 0.05);
  border-top: 1px solid var(--line-paper);
}

.page-home .route-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 28px;
}

.page-home .route-steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 106, 43, 0.75),
    rgba(34, 224, 214, 0.6)
  );
}

.page-home .route-step {
  position: relative;
  padding-left: 30px;
}

.page-home .route-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 106, 43, 0.12);
}

.page-home .route-step:nth-child(2) .route-dot {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 224, 214, 0.18);
}

.page-home .route-step:nth-child(3) .route-dot {
  border-color: var(--deep);
  box-shadow: 0 0 0 4px rgba(14, 47, 74, 0.14);
}

.page-home .route-step-idx {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin: 0 0 8px;
}

.page-home .route-step:nth-child(2) .route-step-idx {
  color: #0b7c74;
}

.page-home .route-step:nth-child(3) .route-step-idx {
  color: var(--deep);
}

.page-home .route-step-title {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 8px;
}

.page-home .route-step-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(6, 23, 38, 0.78);
  margin: 0 0 12px;
  max-width: 62ch;
}

.page-home .route-step-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 47, 74, 0.35);
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.page-home .route-step-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* ---------- LATEST ---------- */

.page-home .latest-more {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.24s var(--ease);
}

.page-home .latest-more:hover {
  border-color: var(--cyan);
}

.page-home .latest-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-home .post-card {
  position: relative;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(20, 49, 61, 0.4);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .post-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.page-home .post-card--lead {
  background: linear-gradient(165deg, rgba(34, 224, 214, 0.1), rgba(6, 23, 38, 0.85));
  border-color: rgba(34, 224, 214, 0.32);
}

.page-home .post-card--quote {
  background: linear-gradient(165deg, rgba(255, 106, 43, 0.14), rgba(6, 23, 38, 0.85));
  border-color: rgba(255, 106, 43, 0.32);
}

.page-home .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.page-home .post-time {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-home .post-title {
  font-size: 1.12rem;
  line-height: 1.4;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 10px;
}

.page-home .post-excerpt {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--mist);
  margin: 0 0 18px;
  flex: 1;
}

.page-home .post-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  margin-top: auto;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color 0.24s var(--ease);
}

.page-home .post-link:hover {
  border-color: var(--cyan);
}

.page-home .post-quote {
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

.page-home .post-quote p {
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.page-home .post-source {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

/* ---------- RESPONSIVE ---------- */

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

  .page-home .snap-card--wide {
    grid-column: span 2;
  }

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

  .page-home .post-card--lead {
    grid-column: span 2;
  }
}

@media (min-width: 960px) {
  .page-home .hero-split {
    grid-template-columns: 5fr 7fr;
    gap: clamp(36px, 5vw, 72px);
  }

  .page-home .snapshot-layout {
    grid-template-columns: 7fr 3fr;
    gap: 28px;
    align-items: start;
  }

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

  .page-home .snap-card--wide {
    grid-column: span 2;
  }

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

  .page-home .plans-split {
    grid-template-columns: 7fr 5fr;
    gap: 44px;
  }

  .page-home .route-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .page-home .route-steps::before {
    left: 6px;
    right: 6px;
    top: 9px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(255, 106, 43, 0.75),
      rgba(34, 224, 214, 0.6)
    );
  }

  .page-home .route-step {
    padding-left: 0;
    padding-top: 30px;
  }

  .page-home .route-dot {
    top: 4px;
    left: 2px;
  }

  .page-home .route-step-body {
    max-width: 34ch;
  }

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

  .page-home .post-card--lead {
    grid-column: span 2;
  }
}

@media (min-width: 1180px) {
  .page-home .snapshot-layout {
    grid-template-columns: 8fr 4fr;
  }
}
<<<END>>>

等等——我漏掉了开头的 `<<<END>>>` 结束标记检查，并且需要确认格式。让我重新检查输出结构，应该是：
- ``
- main 内容
- ``
- CSS 内容

我在最后误写了一个 `<<<END>>>`，应该去掉。让我重新输出。</br>

实际上我发现我的输出末尾多写了 `<<<END>>>`，这违反了"每个标记只能出现一次"的要求。正确输出应该是到 CSS 结束为止，不含 `<<<END>>>`。

另外，输出的开头的 `<main>` 前，我应该没有 preamble（已经在开头给了正确的结构化输出）。让我重新组织一次。

现在我重新确认，本次应输出：

``
（main html）
``
（page css）

不能有 `<<<END>>>`。这是错误的。

让我重新输出完整答案：

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

  <nav class="crumbs page-home-crumbs" aria-label="面包屑">
    <ol class="crumbs-list">
      <li class="crumbs-item"><a href="/">赛事首页</a></li>
      <li class="crumbs-item" aria-current="page">当前：本季赛事速览</li>
    </ol>
  </nav>

  <section class="hero" id="hero">
    <div class="hero-split">
      <div class="hero-copy reveal" data-revealed>
        <p class="eyebrow">MATCHDAY · 本季进行中</p>
        <h1 class="hero-title">周末开球前，先把主客场摊开看</h1>
        <p class="lead hero-lead">
          斗鱼体育把足球、篮球两条线的赛程档案、主客场战绩和联赛订阅收在一处。想看谁能打客场、哪支队主场稳，
          翻到战绩页扫一眼趋势就能有数；想不错过开球，配一条联赛提醒，赛前半小时自然推到你面前。
        </p>

        <div class="hero-meta">
          <div class="hero-round">
            <span class="hero-round-label">CURRENT ROUND</span>
            <span class="num num--cyan hero-round-num">轮次 27</span>
          </div>
          <div class="hero-round">
            <span class="hero-round-label">NEXT KICKOFF</span>
            <span class="num hero-round-num">20:00</span>
          </div>
          <div class="hero-round">
            <span class="hero-round-label">COVERAGE</span>
            <span class="num hero-round-num">3200+</span>
          </div>
        </div>

        <div class="hero-cta">
          <a class="btn btn-primary" href="/offerings/">开通联赛订阅</a>
          <a class="btn btn-ghost" href="/articles/">看本季赛事观察</a>
        </div>

        <p class="hero-trust muted">数据在每轮结束后 30 分钟内更新，赛前阵容提前 45 分钟上线。</p>
      </div>

      <figure class="hero-visual" aria-hidden="false">
        <div class="hero-visual-frame">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="夜间足球场看台与灯光交织的竞技氛围画面" />
          <div class="hero-visual-grid" aria-hidden="true"></div>
          <div class="hero-visual-glow" aria-hidden="true"></div>
        </div>
        <figcaption class="hero-visual-cap">
          <span class="tag tag--orange">夜间球场</span>
          <span class="hero-visual-note">每场比赛结束后，主客场对比条自动刷新</span>
        </figcaption>
      </figure>
    </div>
  </section>

  <section class="snapshot section" id="snapshot">
    <header class="section-head">
      <div>
        <p class="eyebrow">HOME &amp; AWAY · 近五季</p>
        <h2 class="snapshot-title">查斗鱼体育足球主客场表现，五组指标一眼看清</h2>
      </div>
      <p class="muted snapshot-hint">近 5 个赛季区间筛选已在战绩页开放，切换主场 / 客场看差值。</p>
    </header>

    <div class="filter-bar snapshot-filter" data-filter-group data-filter-target="#snapshot .snap-card">
      <button class="filter-btn" data-filter="all" aria-pressed="true">全部指标</button>
      <button class="filter-btn" data-filter="主场" aria-pressed="false">主场</button>
      <button class="filter-btn" data-filter="客场" aria-pressed="false">客场</button>
      <button class="filter-btn" data-filter="趋势" aria-pressed="false">赛季趋势</button>
    </div>

    <div class="snapshot-layout">
      <div class="snapshot-cards">
        <article class="snap-card" data-tags="主场 客场">
          <p class="snap-tag">主客场胜率</p>
          <p class="num num--cyan snap-value">主场 64<span class="snap-unit">%</span></p>
          <p class="num num--orange snap-value">客场 41<span class="snap-unit">%</span></p>
          <div class="snap-bars">
            <span class="data-bar snap-bar snap-bar--home" style="--v:64"></span>
            <span class="data-bar snap-bar snap-bar--away" style="--v:41"></span>
          </div>
          <p class="snap-note">主场胜率普遍高出客场约二十个百分点，是排位判断里最稳的一项。</p>
        </article>

        <article class="snap-card" data-tags="主场 客场">
          <p class="snap-tag">场均进球</p>
          <p class="num num--cyan snap-value">主场 1.8</p>
          <p class="num num--orange snap-value">客场 1.2</p>
          <div class="snap-bars">
            <span class="data-bar snap-bar snap-bar--home" style="--v:72"></span>
            <span class="data-bar snap-bar snap-bar--away" style="--v:48"></span>
          </div>
          <p class="snap-note">看进攻火力时，主客场的场均差值比总进球更有参考意义。</p>
        </article>

        <article class="snap-card" data-tags="客场 趋势">
          <p class="snap-tag">场均失球</p>
          <p class="num num--cyan snap-value">主场 0.9</p>
          <p class="num num--orange snap-value">客场 1.5</p>
          <div class="snap-bars">
            <span class="data-bar snap-bar snap-bar--home" style="--v:36"></span>
            <span class="data-bar snap-bar snap-bar--away" style="--v:60"></span>
          </div>
          <p class="snap-note">失球在客场抬升明显，判断冷门场次时先看这一项。</p>
        </article>

        <article class="snap-card" data-tags="主场 趋势">
          <p class="snap-tag">零封场次</p>
          <p class="num num--cyan snap-value">主场 11<span class="snap-unit">场</span></p>
          <p class="num num--orange snap-value">客场 5<span class="snap-unit">场</span></p>
          <div class="snap-bars">
            <span class="data-bar snap-bar snap-bar--home" style="--v:55"></span>
            <span class="data-bar snap-bar snap-bar--away" style="--v:25"></span>
          </div>
          <p class="snap-note">防守密度高的球队，零封次数的主客场落差往往最直观。</p>
        </article>

        <article class="snap-card snap-card--wide" data-tags="客场 趋势">
          <p class="snap-tag">逆转场次</p>
          <p class="num num--gold snap-value">客场 6<span class="snap-unit">场</span></p>
          <div class="snap-bars">
            <span class="data-bar snap-bar snap-bar--gold" style="--v:30"></span>
          </div>
          <p class="snap-note">先丢球再翻盘的场次多出在客场，说明客队下半场的调整空间更大。</p>
        </article>
      </div>

      <aside class="snapshot-side">
        <figure class="snapshot-figure">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="主客场胜率对比的抽象柱状与折线图形" loading="lazy" decoding="async" />
          <figcaption class="media-cap">近 5 个赛季主客场胜率对比示意</figcaption>
        </figure>

        <div class="plaque snapshot-plaque">
          <p class="plaque-title">指标释义</p>
          <p class="plaque-body">主客场胜率按赛季区间统计，平局不计入分子；场均进球与失球按出场场次折算；零封与逆转以单场结果为准。</p>
          <a class="snapshot-link" href="/offerings/">看完整筛选方式 →</a>
        </div>
      </aside>
    </div>
  </section>

  <section class="navboard section" id="navboard">
    <header class="section-head">
      <div>
        <p class="eyebrow">INDEX · 赛事导航</p>
        <h2 class="navboard-title">体育赛事首页导航，三栏直达你想去的地方</h2>
      </div>
      <p class="muted navboard-hint">找不到入口时，从这三栏走，基本都能落在目标页。</p>
    </header>

    <div class="navboard-grid">
      <article class="nav-card">
        <p class="nav-card-idx num">01</p>
        <h3 class="nav-card-title">赛事速览</h3>
        <p class="nav-card-body">本季赛程、当前轮次与最近战报都从这里进。周末看球前想快速知道有哪些场次，先翻这一栏。</p>
        <ul class="nav-card-list">
          <li><a href="/">本季赛程与轮次</a></li>
          <li><a href="/offerings/">主客场战绩查询</a></li>
          <li><a href="/articles/">赛事观察文章</a></li>
        </ul>
      </article>

      <article class="nav-card nav-card--accent">
        <p class="nav-card-idx num">02</p>
        <h3 class="nav-card-title">资料与版本</h3>
        <p class="nav-card-body">旧版资料库仍保留 2018 年至今的 9 个数据页版本，字段调整历史可对照查看。2025 数据页下个版本预计 6 月上线。</p>
        <ul class="nav-card-list">
          <li><a href="/offerings/">数据页版本预告</a></li>
          <li><a href="/offerings/">历史版本资料库</a></li>
          <li><a href="/questions/">字段与指标变化说明</a></li>
        </ul>
      </article>

      <article class="nav-card">
        <p class="nav-card-idx num">03</p>
        <h3 class="nav-card-title">帮助与反馈</h3>
        <p class="nav-card-body">订阅配置、推送设置、数据纠错都走这里。反馈入口平均两个工作日内回复。</p>
        <ul class="nav-card-list">
          <li><a href="/questions/">常见问题解答</a></li>
          <li><a href="/find-us/">联系渠道与反馈</a></li>
          <li><a href="/profile/">团队与内容来源</a></li>
        </ul>
      </article>
    </div>
  </section>

  <section class="plans section" id="plans">
    <div class="plans-split">
      <div class="plans-copy">
        <p class="eyebrow">PUSH · 联赛粒度订阅</p>
        <h2 class="plans-title">提醒只推你在追的联赛，别让整晚叮个不停</h2>
        <p class="measure plans-lead">
          订阅按联赛粒度推送，可叠加球队与开赛时段两个条件。选三档里的哪一档，取决于你每周愿意花多少时间盯比赛。
        </p>

        <ol class="plans-list">
          <li class="plan-item">
            <span class="plan-tier">联赛级</span>
            <div>
              <p class="plan-name">跟着整个联赛走</p>
              <p class="plan-desc">适合每周固定追一整轮的人。整轮开球、比分变化与终场结果都会推。</p>
            </div>
          </li>
          <li class="plan-item">
            <span class="plan-tier plan-tier--accent">球队级</span>
            <div>
              <p class="plan-name">只盯一两支主队</p>
              <p class="plan-desc">适合有固定立场的球迷。赛前阵容、开球提醒和赛果只围绕所选球队。</p>
            </div>
          </li>
          <li class="plan-item">
            <span class="plan-tier">单场级</span>
            <div>
              <p class="plan-name">临时约一场看</p>
              <p class="plan-desc">朋友临时约球局、只想看某一场时用。开赛前一小时提醒一次，赛后推一份主客场对比。</p>
            </div>
          </li>
        </ol>

        <p class="plans-note muted">三档都可按整个赛季或按月开通，随时调整组合。</p>
        <a class="btn btn-primary" href="/offerings/">配置我的联赛订阅</a>
      </div>

      <figure class="plans-visual">
        <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="三层嵌套的抽象信息图，示意联赛、球队、单场三个订阅层级" loading="lazy" decoding="async" />
        <figcaption class="media-cap">三档订阅的分层结构：从整个联赛到单场比赛</figcaption>
      </figure>
    </div>
  </section>

  <section class="route section on-paper" id="route">
    <div class="wrap-when-paper">
      <header class="section-head section-head--paper">
        <div>
          <p class="eyebrow eyebrow--paper">MATCHDAY FLOW · 三步走</p>
          <h2 class="route-title">约个周末看球赛，赛前照着这三步走完</h2>
        </div>
        <p class="muted route-hint">第一次来也能直接照做，几分钟就能把当天的看点理清。</p>
      </header>

      <figure class="route-figure">
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="观众席剪影与球场光带交织的抽象画面" loading="lazy" decoding="async" />
        <figcaption class="media-cap">周末比赛日的看球节奏：先数据，后开球</figcaption>
      </figure>

      <ol class="route-steps">
        <li class="route-step">
          <span class="route-dot" aria-hidden="true"></span>
          <p class="route-step-idx num">STEP 01</p>
          <h3 class="route-step-title">先查主客场表现</h3>
          <p class="route-step-body">把当天对阵的双方丢进战绩页，看主客场胜率、场均失球和零封次数，判断哪边的场地优势更实在。</p>
          <a class="route-step-link" href="/offerings/">进入战绩页 →</a>
        </li>

        <li class="route-step">
          <span class="route-dot" aria-hidden="true"></span>
          <p class="route-step-idx num">STEP 02</p>
          <h3 class="route-step-title">再看近 5 赛季趋势</h3>
          <p class="route-step-body">单个赛季容易看走眼，用近 5 个赛季区间筛选把趋势拉开，主客场差异是常态还是偶发，一目了然。</p>
          <a class="route-step-link" href="/offerings/">按赛季区间对比 →</a>
        </li>

        <li class="route-step">
          <span class="route-dot" aria-hidden="true"></span>
          <p class="route-step-idx num">STEP 03</p>
          <h3 class="route-step-title">最后配好联赛提醒</h3>
          <p class="route-step-body">把你在追的联赛、常看的球队加进订阅，开赛前自动提醒一次。周末不用再一页页翻赛程表。</p>
          <a class="route-step-link" href="/questions/">了解订阅设置 →</a>
        </li>
      </ol>
    </div>
  </section>

  <section class="latest section" id="latest">
    <header class="section-head">
      <div>
        <p class="eyebrow">LATEST · 文章与版本</p>
        <h2 class="latest-title">编辑部这一周在看什么</h2>
      </div>
      <a class="latest-more" href="/articles">全部文章 →</a>
    </header>

    <div class="latest-grid">
      <article class="post-card post-card--lead">
        <p class="post-meta">
          <span class="tag">赛事观察</span>
          <span class="post-time num">上周 · 第 26 轮</span>
        </p>
        <h3 class="post-title">客场进攻效率为什么总在半程之后抬头</h3>
        <p class="post-excerpt">从近 5 赛季的主客场场均进球差切入，看联赛中段的战术调整如何改变客队打法。</p>
        <a class="post-link" href="/articles/">阅读全文 →</a>
      </article>

      <article class="post-card">
        <p class="post-meta">
          <span class="tag tag--gold">版本记录</span>
          <span class="post-time num">本季 · 05 版</span>
        </p>
        <h3 class="post-title">战绩页新增近 5 赛季区间筛选</h3>
        <p class="post-excerpt">常用对比项一次铺开，主客场胜率与进球分布可同屏查看，切换不再跳页。</p>
        <a class="post-link" href="/offerings/">看功能说明 →</a>
      </article>

      <article class="post-card">
        <p class="post-meta">
          <span class="tag">观赛指南</span>
          <span class="post-time num">本周 · 周末专栏</span>
        </p>
        <h3 class="post-title">联赛密集期的周末看球安排</h3>
        <p class="post-excerpt">同一时段多场开球时，怎么挑场次、怎么排提醒，编辑部给出一套顺序建议。</p>
        <a class="post-link" href="/articles/">阅读全文 →</a>
      </article>

      <article class="post-card">
        <p class="post-meta">
          <span class="tag">数据解读</span>
          <span class="post-time num">本季 · 第 3 期</span>
        </p>
        <h3 class="post-title">零封场次如何反映一支队的防守密度</h3>
        <p class="post-excerpt">把主客场零封次数拆到赛季区间里，看哪些队伍的防守表现被平均数据掩盖了。</p>
        <a class="post-link" href="/articles/">阅读全文 →</a>
      </article>

      <article class="post-card">
        <p class="post-meta">
          <span class="tag tag--gold">版本记录</span>
          <span class="post-time num">本季 · 04 版</span>
        </p>
        <h3 class="post-title">订阅组合条件调整上线</h3>
        <p class="post-excerpt">联赛、球队、开赛时段三个维度可自由组合，已有订阅自动沿用原设置。</p>
        <a class="post-link" href="/offerings/">看功能说明 →</a>
      </article>

      <article class="post-card post-card--quote">
        <blockquote class="post-quote">
          <p>“周末看球前先查一眼，比临开球翻赛程表省事得多。”</p>
        </blockquote>
        <p class="post-meta">
          <span class="post-source">来自球迷社区的使用反馈</span>
        </p>
        <a class="post-link" href="/profile/">看我们怎么维护赛程资料 →</a>
      </article>
    </div>
  </section>

</main>

.page-home {
  display: block;
}

.page-home .crumbs {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
}

.page-home .crumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-home .crumbs-item a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .crumbs-item a:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-home .crumbs-item[aria-current="page"] {
  color: var(--white);
}

.page-home .hero {
  position: relative;
  padding: 24px 0 0;
  overflow: hidden;
}

.page-home .hero-split {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--gutter) clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}

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

.page-home .hero-title {
  font-size: var(--fs-display);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 14px 0 20px;
  color: var(--white);
  max-width: 16ch;
}

.page-home .hero-title::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
  border-radius: 2px;
}

.page-home .hero-lead {
  color: var(--mist);
  max-width: 62ch;
  margin: 0 0 26px;
}

.page-home .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

.page-home .hero-round {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
}

.page-home .hero-round-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .hero-round-num {
  font-size: 1.15rem;
  color: var(--white);
}

.page-home .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.page-home .hero-trust {
  font-size: 13px;
  margin: 0;
}

.page-home .hero-visual {
  position: relative;
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--deep) 0%, var(--ink-deep) 100%);
  box-shadow: var(--shadow-card);
}

.page-home .hero-visual-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.page-home .hero-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.78) contrast(1.08);
}

.page-home .hero-visual-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 224, 214, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 224, 214, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}

.page-home .hero-visual-glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70%;
  height: 120%;
  background: radial-gradient(
    circle at 70% 30%,
    rgba(34, 224, 214, 0.28),
    transparent 62%
  );
  pointer-events: none;
  animation: page-home-pulse 12s ease-in-out infinite;
}

.page-home .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 23, 38, 0.15) 0%,
    rgba(6, 23, 38, 0.72) 100%
  );
  pointer-events: none;
}

.page-home .hero-visual-cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(6, 23, 38, 0.86);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--mist);
}

.page-home .hero-visual-note {
  line-height: 1.5;
}

@keyframes page-home-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 0.95; transform: translateX(-6%); }
}

.page-home .section {
  padding: clamp(48px, 7vw, 88px) 0;
}

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

.page-home .snapshot .section-head,
.page-home .navboard .section-head,
.page-home .latest .section-head {
  max-width: var(--shell);
  margin: 0 auto 32px;
  padding: 0 var(--gutter);
}

.page-home .snapshot-title,
.page-home .navboard-title,
.page-home .plans-title,
.page-home .route-title,
.page-home .latest-title {
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 900;
  color: var(--white);
  margin: 10px 0 0;
  max-width: 24ch;
}

.page-home .snapshot-hint,
.page-home .navboard-hint,
.page-home .route-hint {
  font-size: 13px;
  margin: 12px 0 0;
  max-width: 46ch;
}

.page-home .snapshot-filter {
  max-width: var(--shell);
  margin: 0 auto 26px;
  padding: 0 var(--gutter);
}

.page-home .snapshot-layout {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-home .snapshot-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-home .snap-card {
  position: relative;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: linear-gradient(165deg, rgba(14, 47, 74, 0.72) 0%, rgba(6, 23, 38, 0.85) 100%);
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .snap-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.page-home .snap-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 12px;
}

.page-home .snap-value {
  font-size: 1.4rem;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--white);
}

.page-home .snap-unit {
  font-size: 0.7em;
  margin-left: 2px;
}

.page-home .snap-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 12px;
}

.page-home .snap-bar {
  display: block;
  height: 6px;
}

.page-home .snap-bar--home,
.page-home .snap-bar--away,
.page-home .snap-bar--gold {
  transform-origin: left center;
  animation: page-home-grow 0.42s var(--ease) both;
}

.page-home .snap-bar--gold {
  background: linear-gradient(90deg, rgba(255, 200, 87, 0.35), var(--gold));
}

.page-home .snap-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist);
  margin: 0;
}

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

.page-home .snapshot-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--slate);
}

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

.page-home .snapshot-figure .media-cap {
  display: block;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mist);
  background: rgba(6, 23, 38, 0.7);
  border-top: 1px solid var(--line);
}

.page-home .snapshot-plaque {
  background: var(--slate);
  border: 1px solid var(--line);
}

.page-home .snapshot-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.24s var(--ease);
}

.page-home .snapshot-link:hover {
  border-color: var(--cyan);
}

@keyframes page-home-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.page-home .navboard {
  position: relative;
  background:
    radial-gradient(circle at 88% 8%, rgba(34, 224, 214, 0.1), transparent 52%),
    var(--ink-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .navboard-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-home .nav-card {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(14, 47, 74, 0.4);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .nav-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.page-home .nav-card--accent {
  background: linear-gradient(170deg, rgba(34, 224, 214, 0.1), rgba(14, 47, 74, 0.5));
  border-color: rgba(34, 224, 214, 0.35);
}

.page-home .nav-card-idx {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin: 0 0 10px;
}

.page-home .nav-card--accent .nav-card-idx {
  color: var(--gold);
}

.page-home .nav-card-title {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--white);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

.page-home .nav-card-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
  margin: 0 0 18px;
}

.page-home .nav-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.page-home .nav-card-list a {
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.24s var(--ease);
}

.page-home .nav-card-list a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transition: width 0.24s var(--ease);
}

.page-home .nav-card-list a:hover {
  color: var(--gold);
}

.page-home .nav-card-list a:hover::before {
  width: 22px;
}

.page-home .plans-split {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.page-home .plans-title {
  margin-bottom: 18px;
}

.page-home .plans-lead {
  color: var(--mist);
  margin: 0 0 26px;
}

.page-home .plans-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}

.page-home .plan-item {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.page-home .plan-tier {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  padding: 4px 0;
}

.page-home .plan-tier--accent {
  color: var(--orange);
}

.page-home .plan-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 6px;
}

.page-home .plan-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
  margin: 0;
}

.page-home .plans-note {
  font-size: 13px;
  margin: 0 0 20px;
}

.page-home .plans-visual {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--slate);
  box-shadow: var(--shadow-card);
}

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

.page-home .plans-visual .media-cap {
  display: block;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mist);
  background: rgba(6, 23, 38, 0.72);
  border-top: 1px solid var(--line);
}

.page-home .route {
  position: relative;
  background: var(--paper);
  color: var(--ink);
}

.page-home .wrap-when-paper {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-home .section-head--paper {
  padding: 0;
  margin: 0 0 26px;
}

.page-home .eyebrow--paper {
  color: var(--orange);
}

.page-home .route-title {
  color: var(--ink);
}

.page-home .route-hint {
  color: rgba(6, 23, 38, 0.68);
}

.page-home .route-figure {
  margin: 0 0 40px;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--line-paper);
}

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

.page-home .route-figure .media-cap {
  display: block;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(6, 23, 38, 0.66);
  background: rgba(6, 23, 38, 0.05);
  border-top: 1px solid var(--line-paper);
}

.page-home .route-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 28px;
}

.page-home .route-steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 106, 43, 0.75),
    rgba(34, 224, 214, 0.6)
  );
}

.page-home .route-step {
  position: relative;
  padding-left: 30px;
}

.page-home .route-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 106, 43, 0.12);
}

.page-home .route-step:nth-child(2) .route-dot {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 224, 214, 0.18);
}

.page-home .route-step:nth-child(3) .route-dot {
  border-color: var(--deep);
  box-shadow: 0 0 0 4px rgba(14, 47, 74, 0.14);
}

.page-home .route-step-idx {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin: 0 0 8px;
}

.page-home .route-step:nth-child(2) .route-step-idx {
  color: #0b7c74;
}

.page-home .route-step:nth-child(3) .route-step-idx {
  color: var(--deep);
}

.page-home .route-step-title {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 8px;
}

.page-home .route-step-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(6, 23, 38, 0.78);
  margin: 0 0 12px;
  max-width: 62ch;
}

.page-home .route-step-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 47, 74, 0.35);
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.page-home .route-step-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}

.page-home .latest-more {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.24s var(--ease);
}

.page-home .latest-more:hover {
  border-color: var(--cyan);
}

.page-home .latest-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-home .post-card {
  position: relative;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(20, 49, 61, 0.4);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .post-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.page-home .post-card--lead {
  background: linear-gradient(165deg, rgba(34, 224, 214, 0.1), rgba(6, 23, 38, 0.85));
  border-color: rgba(34, 224, 214, 0.32);
}

.page-home .post-card--quote {
  background: linear-gradient(165deg, rgba(255, 106, 43, 0.14), rgba(6, 23, 38, 0.85));
  border-color: rgba(255, 106, 43, 0.32);
}

.page-home .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.page-home .post-time {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-home .post-title {
  font-size: 1.12rem;
  line-height: 1.4;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 10px;
}

.page-home .post-excerpt {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--mist);
  margin: 0 0 18px;
  flex: 1;
}

.page-home .post-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  margin-top: auto;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color 0.24s var(--ease);
}

.page-home .post-link:hover {
  border-color: var(--cyan);
}

.page-home .post-quote {
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

.page-home .post-quote p {
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.page-home .post-source {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

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

  .page-home .snap-card--wide {
    grid-column: span 2;
  }

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

  .page-home .post-card--lead {
    grid-column: span 2;
  }
}

@media (min-width: 960px) {
  .page-home .hero-split {
    grid-template-columns: 5fr 7fr;
    gap: clamp(36px, 5vw, 72px);
  }

  .page-home .snapshot-layout {
    grid-template-columns: 7fr 3fr;
    gap: 28px;
    align-items: start;
  }

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

  .page-home .snap-card--wide {
    grid-column: span 2;
  }

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

  .page-home .plans-split {
    grid-template-columns: 7fr 5fr;
    gap: 44px;
  }

  .page-home .route-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .page-home .route-steps::before {
    left: 6px;
    right: 6px;
    top: 9px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(255, 106, 43, 0.75),
      rgba(34, 224, 214, 0.6)
    );
  }

  .page-home .route-step {
    padding-left: 0;
    padding-top: 30px;
  }

  .page-home .route-dot {
    top: 4px;
    left: 2px;
  }

  .page-home .route-step-body {
    max-width: 34ch;
  }

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

  .page-home .post-card--lead {
    grid-column: span 2;
  }
}

@media (min-width: 1180px) {
  .page-home .snapshot-layout {
    grid-template-columns: 8fr 4fr;
  }
}