.page-home {
  --home-hair: rgba(243, 236, 222, 0.10);
  --home-hair-dusk: rgba(138, 204, 198, 0.13);
  --home-card-bg: #0E2237;
  --home-card-bg-hover: #112A42;
  background-color: var(--ink-950);
  color: var(--mist-300);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-home [id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-home .home-section {
  padding-block: clamp(44px, 6.5vw, 84px);
  border-bottom: 1px solid var(--ink-700);
}

.page-home .section-title {
  color: var(--white);
}

.page-home .section-kicker {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--mist-300);
  font-size: 15px;
  line-height: 1.75;
}

.page-home .eyebrow {
  margin-bottom: 12px;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(26px, 4.5vw, 54px));
  padding-bottom: clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--ink-700);
  background:
    radial-gradient(92% 72% at 84% -6%, rgba(63, 140, 138, 0.22), transparent 62%),
    radial-gradient(56% 48% at 6% 2%, rgba(255, 106, 42, 0.10), transparent 60%),
    linear-gradient(180deg, #07131F 0%, #07131F 74%, rgba(13, 32, 51, 0.72) 100%);
  overflow: hidden;
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--home-hair-dusk) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, var(--home-hair-dusk) 0 1px, transparent 1px 24px);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 72%);
}

.page-home .home-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.page-home .hero-copy h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-home .hero-copy .lead {
  max-width: 40ch;
  color: var(--mist-300);
  font-size: 16px;
  line-height: 1.8;
}

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

.page-home .hero-note {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--neon-500);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--dusk-300);
}

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

.page-home .hero-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-850);
  box-shadow: var(--shadow-soft);
}

.page-home .hero-frame img,
.page-home .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-home .hero-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .hero-card {
  position: relative;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(27, 51, 72, 0.6), rgba(13, 32, 51, 0.45));
  border: 1px solid var(--ink-700);
  border-left: 3px solid var(--dusk-500);
  border-radius: 3px;
  transition: border-left-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-home .hero-card:hover {
  border-left-color: var(--neon-500);
  transform: translateY(-2px);
}

.page-home .hero-card-num {
  display: block;
  font-size: 22px;
  line-height: 1;
  color: var(--neon-500);
  letter-spacing: 0.02em;
}

.page-home .hero-card-title {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
}

.page-home .hero-card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist-300);
}

/* ---------- 轮次轨道 ---------- */
.page-home .rounds-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(26px, 3.4vw, 40px);
}

.page-home .round-track {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-home .track-node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0 12px 22px;
  border-left: 1px solid var(--ink-700);
  color: var(--mist-300);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--dur) var(--ease), border-left-color var(--dur) var(--ease);
}

.page-home .track-node::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--ink-700);
  box-shadow: 0 0 0 3px #07131F;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-home .track-node .mono {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.page-home .track-label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist-300);
}

.page-home .track-node:hover,
.page-home .track-node:focus-visible {
  color: var(--white);
  border-left-color: var(--neon-500);
}

.page-home .track-node:hover::before,
.page-home .track-node:focus-visible::before {
  background: var(--neon-500);
  box-shadow: 0 0 0 3px #07131F, 0 0 0 7px rgba(255, 106, 42, 0.22);
}

.page-home .track-node.is-current {
  border-left-color: var(--neon-500);
}

.page-home .track-node.is-current .mono,
.page-home .track-node.is-current .track-label {
  color: var(--neon-500);
}

.page-home .track-node.is-current::before {
  background: var(--neon-500);
  box-shadow: 0 0 0 3px #07131F, 0 0 0 7px rgba(255, 106, 42, 0.28);
}

.page-home .round-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-home .round-card {
  position: relative;
  min-width: 0;
  padding: 20px 20px 18px;
  background: var(--home-card-bg);
  border: 1px solid var(--ink-700);
  border-left: 3px solid transparent;
  border-radius: 3px;
  outline: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-home .round-card:hover,
.page-home .round-card:focus,
.page-home .round-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--neon-500);
  border-left-color: var(--neon-500);
  background: var(--home-card-bg-hover);
}

.page-home .card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-home .card-time {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--dusk-300);
}

.page-home .card-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
}

.page-home .card-pair {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--neon-200);
}

.page-home .card-roster {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--ink-700);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--dusk-300);
}

.page-home .roster-detail {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist-300);
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin var(--dur) var(--ease);
}

.page-home .round-card:hover .roster-detail,
.page-home .round-card:focus .roster-detail,
.page-home .round-card:focus-within .roster-detail {
  max-height: 140px;
  margin-top: 10px;
  opacity: 1;
}

/* ---------- 两步路径 ---------- */
.page-home .home-path {
  background: linear-gradient(180deg, rgba(13, 32, 51, 0.55), rgba(7, 19, 31, 1));
}

.page-home .path-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .path-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px 22px 20px;
  background: rgba(27, 51, 72, 0.34);
  border: 1px solid var(--ink-700);
  border-radius: 3px;
}

.page-home .step-num {
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--neon-500);
}

.page-home .step-body h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--white);
}

.page-home .step-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist-300);
}

/* ---------- 复盘预览 ---------- */
.page-home .recap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(24px, 3vw, 36px);
  align-items: start;
}

.page-home .recap-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-home .recap-card {
  padding: 20px;
  background: var(--home-card-bg);
  border: 1px solid var(--ink-700);
  border-left: 3px solid var(--dusk-500);
  border-radius: 3px;
  transition: border-left-color var(--dur) var(--ease);
}

.page-home .recap-card:hover {
  border-left-color: var(--neon-500);
}

.page-home .recap-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-home .recap-points li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(27, 51, 72, 0.9);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist-300);
}

.page-home .recap-points .mono {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--dusk-300);
}

.page-home .recap-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--neon-200);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 177, 131, 0.4);
  transition: color var(--dur) var(--ease), border-bottom-color var(--dur) var(--ease);
}

.page-home .recap-link:hover,
.page-home .recap-link:focus-visible {
  color: var(--neon-500);
  border-bottom-color: var(--neon-500);
}

.page-home .recap-figure,
.page-home .client-figure,
.page-home .index-figure {
  margin: 0;
  min-width: 0;
}

.page-home .recap-figure .media-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
}

.page-home .media-frame-caption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mist-300);
  opacity: 0.85;
}

/* ---------- 客户端 ---------- */
.page-home .home-client {
  background:
    radial-gradient(70% 80% at 92% 20%, rgba(63, 140, 138, 0.16), transparent 62%),
    var(--ink-950);
}

.page-home .client-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 44px);
  align-items: center;
}

.page-home .client-copy p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist-300);
}

.page-home .client-copy .section-title {
  margin-bottom: 18px;
}

.page-home .platform-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 22px 0 18px;
  padding: 0;
  list-style: none;
}

.page-home .platform-chip {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 14px;
  background: rgba(13, 32, 51, 0.7);
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  font-size: 13px;
  color: var(--mist-300);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-home .platform-chip:hover {
  border-color: var(--dusk-500);
  transform: translateY(-2px);
}

.page-home .platform-chip .mono {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--dusk-300);
}

.page-home .client-note {
  font-size: 13px;
  color: var(--dusk-300);
}

.page-home .client-figure .media-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-850);
  box-shadow: var(--shadow-soft);
}

/* ---------- 数据带 ---------- */
.page-home .stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 2.6vw, 32px);
  background: var(--ink-700);
  border: 1px solid var(--ink-700);
}

.page-home .stat-item {
  display: grid;
  gap: 8px;
  padding: 22px 18px 20px;
  background: var(--ink-950);
}

.page-home .stat-num {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--neon-500);
}

.page-home .stat-label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist-300);
}

.page-home .stats-note {
  margin: 20px 0 0;
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mist-300);
  padding-left: 14px;
  border-left: 2px solid var(--dusk-500);
}

/* ---------- 日期索引 ---------- */
.page-home .index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(24px, 3vw, 36px);
  align-items: start;
}

.page-home .index-figure .media-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-850);
}

.page-home .archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-700);
}

.page-home .archive-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--ink-700);
  text-decoration: none;
  color: var(--mist-300);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease), border-bottom-color var(--dur) var(--ease);
}

.page-home .archive-row:hover,
.page-home .archive-row:focus-visible {
  color: var(--white);
  padding-left: 10px;
  border-bottom-color: var(--neon-500);
}

.page-home .archive-date {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--neon-200);
  white-space: nowrap;
}

.page-home .archive-text {
  font-size: 14px;
  line-height: 1.6;
}

.page-home .archive-go {
  font-size: 14px;
  color: var(--dusk-300);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-home .archive-row:hover .archive-go {
  color: var(--neon-500);
  transform: translateX(4px);
}

/* ---------- 使用场景 ---------- */
.page-home .home-audience {
  background: linear-gradient(180deg, rgba(13, 32, 51, 0.5), rgba(7, 19, 31, 1));
}

.page-home .audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(22px, 2.8vw, 34px);
}

.page-home .audience-card {
  padding: 22px 20px 20px;
  background: var(--home-card-bg);
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .audience-card:hover {
  transform: translateY(-2px);
  border-color: var(--dusk-500);
}

.page-home .audience-num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--dusk-300);
}

.page-home .audience-card h3 {
  margin: 12px 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
}

.page-home .audience-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist-300);
}

/* ---------- 收尾 ---------- */
.page-home .home-cta {
  padding-block: clamp(40px, 5.5vw, 72px);
}

.page-home .home-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 3px;
}

.page-home .home-cta-panel .eyebrow {
  color: #6B4A32;
}

.page-home .home-cta-panel .eyebrow::before {
  background: var(--clay-600);
}

.page-home .home-cta-panel h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.18;
  color: var(--ink-950);
}

.page-home .home-cta-panel p {
  margin: 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: #26313D;
}

.page-home .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
}

.page-home .cta-ghost {
  color: var(--ink-950);
  border-color: rgba(7, 19, 31, 0.35);
}

.page-home .cta-ghost:hover {
  color: var(--ink-950);
  border-color: var(--ink-950);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-home .hero-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .page-home .hero-cards > li:nth-child(2) {
    margin-top: 24px;
  }

  .page-home .hero-cards > li:nth-child(3) {
    margin-top: 48px;
  }

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

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

@media (min-width: 760px) {
  .page-home .round-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .page-home .round-card:nth-child(2) {
    margin-top: 24px;
  }

  .page-home .round-card:nth-child(3) {
    margin-top: 48px;
  }

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

  .page-home .home-cta-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-home .home-hero-grid {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: clamp(32px, 3.6vw, 52px);
  }

  .page-home .rounds-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .page-home .round-track {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }

  .page-home .recap-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

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

  .page-home .index-grid {
    grid-template-columns: 320px minmax(0, 1fr);
  }

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

  .page-home .recap-points li {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .round-card,
  .page-home .roster-detail,
  .page-home .hero-card,
  .page-home .audience-card,
  .page-home .platform-chip,
  .page-home .archive-row,
  .page-home .archive-go,
  .page-home .track-node,
  .page-home .track-node::before {
    transition: none;
  }

  .page-home .round-card:hover,
  .page-home .round-card:focus,
  .page-home .round-card:focus-within,
  .page-home .hero-card:hover,
  .page-home .audience-card:hover,
  .page-home .platform-chip:hover {
    transform: none;
  }

  .page-home .archive-row:hover,
  .page-home .archive-row:focus-visible {
    padding-left: 4px;
  }

  .page-home .archive-row:hover .archive-go {
    transform: none;
  }
}
<<<END>>>

等等，最后那个 <<<END>>> 是多余的？我需要在输出结尾加上吗？要求里说“严格按照以下标记顺序输出，每个标记只能出现一次”——所以要输出  ...  ...——没有 END 标记吧？前面示例里也没有，但“每个标记只能出现一次”，看起来只有 MAIN_HTML 和 PAGE_CSS 这两个标记。那我就只保留这两个就行。

不过等等，上一条消息末尾我还是留下了 `<<<END>>>` 这个标记的草稿。输出的时候应该去掉。

另外复查一下 `.page-home .home-cta-panel .eyebrow::before`——共享的 `.eyebrow` 里可能已经定义了 `::before` 的短线。我这样覆盖颜色是没问题的。

还有 `.page-home .hero-copy .lead`——`lead` 是共享类，没问题。

还有共享的 `.tag` 之类我用得也没问题。

关于 `.page-home .home-cta-panel h2`——`section-title` 我在这里没用，自己写了 `h2`，没问题。

有个点要注意：共享的 `.panel-cream` 会设置背景为奶油色和文字颜色，这个没问题。

再确认一下 `--clay-600` 在 `css_variables` 里存在，是的。

还有 `.eyebrow::before` 用的是霓虹橙？我改成了陶土色，换掉没问题。

最后再确认一下锚点：`#rounds`、`#recaps`、`#archive`、`#round-6`、`#round-7`、`#round-5` 都确实存在。✓

图片：一共 4 张，首屏那张没有 lazy，其余都加了 lazy 和 async，没问题。

`{zhanqunpic:h:720w:1200}` 对应的属性是 width="1200" height="720"，一致；`h:640w:960` 对应 width="960" height="640"，也一致；`h:800w:1200` 对应 width="1200" height="800"；`h:1080w:720` 对应 width="720" height="1080"。都对上了。

好，现在把 END 标记去掉，定稿。
<main id="main-content" class="page-home">
  <section class="home-hero">
    <div class="shell home-hero-grid">
      <div class="hero-copy">
        <p class="eyebrow">SEASON INDEX / 赛季索引</p>
        <h1>先看到当轮对阵，再回来看懂这一轮</h1>
        <p class="lead">安博电竞把轮次、阵容变动和赛后复盘串在同一条时间线上。周末连看两场，从首页点一次轮次，开赛时间、替补变动和上一轮的复盘重点就都在眼前。</p>
        <div class="hero-actions">
          <a class="btn btn-neon" href="#rounds">打开当轮对阵</a>
          <a class="btn btn-ghost" href="/product/">下载客户端</a>
        </div>
        <p class="hero-note mono">比赛日 09:00 前 · 本轮索引已更新</p>
      </div>

      <div class="hero-visual">
        <div class="media-frame media-frame--wide hero-frame">
          <img src="{zhanqunpic:h:720w:1200}" width="1200" height="720" alt="深墨蓝赛事控制台界面切片，荧光橙时间轴与细线光带交错，画面中没有人物">
        </div>
        <ul class="hero-cards">
          <li class="hero-card">
            <span class="hero-card-num mono">06</span>
            <p class="hero-card-title">本轮</p>
            <p class="hero-card-text">三场对阵，20:00 起依次开赛</p>
          </li>
          <li class="hero-card">
            <span class="hero-card-num mono">2×</span>
            <p class="hero-card-title">周末连看</p>
            <p class="hero-card-text">两场之间只隔一次点击</p>
          </li>
          <li class="hero-card">
            <span class="hero-card-num mono">90′</span>
            <p class="hero-card-title">复盘预览</p>
            <p class="hero-card-text">赛后 90 分钟挂出摘要</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="home-section home-rounds" id="rounds" aria-labelledby="rounds-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">ROUND TRACK / 轮次轨道</p>
        <h2 class="section-title" id="rounds-title">当轮对阵，顺着日期往下排</h2>
        <p class="section-kicker">左侧轨道标出本轮、下轮和刚打完的一轮，右侧卡片按开赛时间错开摆放。点轨道节点，或者直接扫一遍卡片，落到的都是同一组对阵。</p>
      </header>

      <div class="rounds-layout">
        <nav class="round-track" aria-label="轮次轨道">
          <a class="track-node is-current" href="#round-6">
            <span class="mono">第 6 轮</span>
            <span class="track-label">本轮</span>
          </a>
          <a class="track-node" href="#round-7">
            <span class="mono">第 7 轮</span>
            <span class="track-label">下轮</span>
          </a>
          <a class="track-node" href="#round-5">
            <span class="mono">第 5 轮</span>
            <span class="track-label">刚结束</span>
          </a>
        </nav>

        <div class="round-cards">
          <article class="round-card" id="round-6" tabindex="0">
            <div class="card-top">
              <span class="tag tag-neon">本轮</span>
              <span class="mono card-time">周六 20:00</span>
            </div>
            <h3 class="card-title">多人在线战术竞技 · 第 6 轮</h3>
            <p class="card-pair mono">一号种子 / 四号种子</p>
            <p class="card-roster">阵容变动标记已挂出</p>
            <p class="roster-detail">替补位调动在开赛前 60 分钟同步标注，标记会一并推到客户端的四端列表里。</p>
          </article>

          <article class="round-card" id="round-7" tabindex="0">
            <div class="card-top">
              <span class="tag tag-dusk">下轮</span>
              <span class="mono card-time">周日 19:30</span>
            </div>
            <h3 class="card-title">第一人称射击 · 第 7 轮</h3>
            <p class="card-pair mono">A 组头名 / B 组次席</p>
            <p class="card-roster">阵容锁定时间待公布</p>
            <p class="roster-detail">锁定后名单会出现在卡片下方，手机上滑一次即可看全。</p>
          </article>

          <article class="round-card" id="round-5" tabindex="0">
            <div class="card-top">
              <span class="tag">刚结束</span>
              <span class="mono card-time">已完赛</span>
            </div>
            <h3 class="card-title">战术竞技 · 第 5 轮</h3>
            <p class="card-pair mono">四号种子 / 二号种子</p>
            <p class="card-roster">复盘摘要已发布</p>
            <p class="roster-detail">关键回合与两处换人记录都在摘要里，完整复盘次日 12:00 前补齐。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="home-section home-path" aria-labelledby="path-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">TWO STEPS</p>
        <h2 class="section-title" id="path-title">两步就落到对阵表</h2>
      </header>

      <ol class="path-steps">
        <li class="path-step">
          <span class="step-num mono">01</span>
          <div class="step-body">
            <h3>点开「安博电竞轮次安排」</h3>
            <p>入口就在首层左侧轨道上方。选当轮，右侧卡片按开赛时间重新排一遍，不用退回到上一级再找。</p>
          </div>
        </li>
        <li class="path-step">
          <span class="step-num mono">02</span>
          <div class="step-body">
            <h3>落到对阵卡片</h3>
            <p>每张卡片给出项目、轮次、开赛时间与阵容变动。想连看两场，顺着往下扫，中间那点空档刚好够读完一条复盘摘要。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="home-section home-recaps" id="recaps" aria-labelledby="recaps-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">RECAP PREVIEW</p>
        <h2 class="section-title" id="recaps-title">赛后 90 分钟，先给你一版能读的摘要</h2>
        <p class="section-kicker">每轮结束我们先挂出观众预览：关键回合、阵容变化、下一轮看点各占一小段，完整复盘次日 12:00 前补齐。</p>
      </header>

      <div class="recap-grid">
        <div class="recap-list">
          <article class="recap-card">
            <div class="card-top">
              <span class="tag tag-dusk">第 5 轮</span>
              <span class="mono card-time">战术竞技</span>
            </div>
            <h3 class="card-title">决胜圈那次换位，把整局节奏翻了过来</h3>
            <ul class="recap-points">
              <li><span class="mono">关键回合</span>决赛圈三人分开站，逼对手先动</li>
              <li><span class="mono">阵容变化</span>替补在第三局登场，接管视野位</li>
              <li><span class="mono">下轮看点</span>首场对上小组第二，先手权说了算</li>
            </ul>
          </article>

          <article class="recap-card">
            <div class="card-top">
              <span class="tag tag-dusk">第 4 轮</span>
              <span class="mono card-time">多人在线战术竞技</span>
            </div>
            <h3 class="card-title">前期压线换来的两波资源差</h3>
            <ul class="recap-points">
              <li><span class="mono">关键回合</span>四分钟的双线推进换掉一层优势</li>
              <li><span class="mono">阵容变化</span>首发五人保持不变，轮换留到决胜局</li>
              <li><span class="mono">下轮看点</span>对手的防守习惯正在被针对</li>
            </ul>
          </article>

          <a class="recap-link" href="/blog/">按日期查看全部复盘 →</a>
        </div>

        <figure class="recap-figure">
          <div class="media-frame media-frame--square">
            <img src="{zhanqunpic:h:640w:960}" width="960" height="640" alt="奶油纸色摘要卡片与深色控制台背景交错，橙色标记标出关键回合" loading="lazy" decoding="async">
          </div>
          <figcaption class="media-frame-caption">摘要页把关键回合、阵容变化与下轮看点拆成三段，滑两屏就能读完一轮。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="home-section home-client" aria-labelledby="client-title">
    <div class="shell client-grid">
      <div class="client-copy">
        <p class="eyebrow">CLIENT v4.6</p>
        <h2 class="section-title" id="client-title">赛程和复盘，装进客户端跟着走</h2>
        <p>安博电竞客户端稳定版当前版本 v4.6，Windows、macOS、Android 与 iOS 四端同步。安装包 78MB，冷启动平均 1.8 秒，多端同步延迟低于 3 秒，换设备接着看不用重新找位置。</p>
        <ul class="platform-list">
          <li class="platform-chip"><span class="mono">Windows</span><span>赛程日历常驻任务栏</span></li>
          <li class="platform-chip"><span class="mono">macOS</span><span>复盘摘要分栏阅读</span></li>
          <li class="platform-chip"><span class="mono">Android</span><span>阵容变动即时标红</span></li>
          <li class="platform-chip"><span class="mono">iOS</span><span>离线缓存最近 7 天</span></li>
        </ul>
        <p class="client-note">地铁上没信号也能翻，离线缓存保留最近 7 天的赛程与复盘摘要。</p>
        <div class="hero-actions">
          <a class="btn btn-neon" href="/product/">查看客户端</a>
        </div>
      </div>

      <figure class="client-figure">
        <div class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面与移动设备轮廓中同步显示的赛程卡片，暮色青细线勾勒边界" loading="lazy" decoding="async">
        </div>
        <figcaption class="media-frame-caption">四端共用同一套轮次与阵容数据，在电脑上标下的关注，手机上同步亮起。</figcaption>
      </figure>
    </div>
  </section>

  <section class="home-section home-stats" aria-labelledby="stats-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">COVERAGE</p>
        <h2 class="section-title" id="stats-title">八个项目，一整个赛季都跟得上</h2>
      </header>

      <div class="stat-strip">
        <div class="stat-item">
          <span class="stat-num mono">8</span>
          <span class="stat-label">个电竞项目</span>
        </div>
        <div class="stat-item">
          <span class="stat-num mono">46</span>
          <span class="stat-label">项赛事 / 赛季</span>
        </div>
        <div class="stat-item">
          <span class="stat-num mono">1,800</span>
          <span class="stat-label">场对阵 / 赛季</span>
        </div>
        <div class="stat-item">
          <span class="stat-num mono">99.6%</span>
          <span class="stat-label">赛程字段准确率</span>
        </div>
      </div>

      <p class="stats-note">自 2016 年起跟踪 9 个赛季，赛程与阵容记录累计超过 12 万条。比赛日北京时间 09:00 前完成当轮索引更新，临场变动在开赛前 60 分钟标注。</p>
    </div>
  </section>

  <section class="home-section home-index" id="archive" aria-labelledby="index-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">DATE ARCHIVE</p>
        <h2 class="section-title" id="index-title">赛事资讯站内索引，按日期往回翻</h2>
        <p class="section-kicker">复盘目录按日期排开，收录 2023 年以来超过 9,600 条摘要。想找某一轮的阵容变动，从最近的日期往下走就行。</p>
      </header>

      <div class="index-grid">
        <figure class="index-figure">
          <div class="media-frame media-frame--portrait">
            <img src="{zhanqunpic:h:1080w:720}" width="720" height="1080" alt="纵向日期轨道示意图，等宽轮次数字与错落排列的对阵卡片" loading="lazy" decoding="async">
          </div>
          <figcaption class="media-frame-caption">日期节点竖着排，节点之间是对阵卡片，一眼能看出哪一轮还没补复盘。</figcaption>
        </figure>

        <ul class="archive-list">
          <li>
            <a class="archive-row" href="/blog/">
              <span class="archive-date mono">本轮</span>
              <span class="archive-text">三场摘要已更新，完整复盘陆续补齐</span>
              <span class="archive-go mono">→</span>
            </a>
          </li>
          <li>
            <a class="archive-row" href="/blog/">
              <span class="archive-date mono">上一轮</span>
              <span class="archive-text">关键回合与两处换人记录已归档</span>
              <span class="archive-go mono">→</span>
            </a>
          </li>
          <li>
            <a class="archive-row" href="/blog/">
              <span class="archive-date mono">上周末</span>
              <span class="archive-text">两场连看的分轮摘要，含下轮看点</span>
              <span class="archive-go mono">→</span>
            </a>
          </li>
          <li>
            <a class="archive-row" href="/overview/">
              <span class="archive-date mono">上赛季收官</span>
              <span class="archive-text">轮次与阵容归档，以及赛季覆盖范围</span>
              <span class="archive-go mono">→</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="home-section home-audience" aria-labelledby="audience-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">WHO IT'S FOR</p>
        <h2 class="section-title" id="audience-title">三种常见用法，各有各的顺手</h2>
      </header>

      <div class="audience-grid">
        <article class="audience-card">
          <span class="audience-num mono">01</span>
          <h3>周末连看两场</h3>
          <p>开赛前扫一遍轨道，两场之间的空档刚好够读完上一轮的摘要。点一次轮次就能定位，中间不用来回跳。</p>
        </article>
        <article class="audience-card">
          <span class="audience-num mono">02</span>
          <h3>俱乐部内容运营</h3>
          <p>按轮次取阵容变动节点，整理成赛前物料。变动时间点、替补名单和复盘摘要都能直接引用。</p>
        </article>
        <article class="audience-card">
          <span class="audience-num mono">03</span>
          <h3>赛事内容创作者</h3>
          <p>按日期回溯，把同一轮的关键回合和下一轮看点串起来，写赛前铺垫时素材就在手边。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="home-cta">
    <div class="shell">
      <div class="panel-cream home-cta-panel">
        <div class="cta-copy">
          <p class="eyebrow">START HERE</p>
          <h2>想先看一场，就从当轮开始</h2>
          <p>打开当轮对阵，或者把客户端装上。入口找不到、赛程对不上，都可以直接找我们，工作日 10:00-19:00 有人回复。</p>
        </div>
        <div class="cta-actions">
          <a class="btn btn-neon" href="#rounds">打开当轮对阵</a>
          <a class="btn btn-ghost cta-ghost" href="/feedback/">联系我们</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-hair: rgba(243, 236, 222, 0.10);
  --home-hair-dusk: rgba(138, 204, 198, 0.13);
  --home-card-bg: #0E2237;
  --home-card-bg-hover: #112A42;
  background-color: var(--ink-950);
  color: var(--mist-300);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-home [id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-home .home-section {
  padding-block: clamp(44px, 6.5vw, 84px);
  border-bottom: 1px solid var(--ink-700);
}

.page-home .section-title {
  color: var(--white);
}

.page-home .section-kicker {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--mist-300);
  font-size: 15px;
  line-height: 1.75;
}

.page-home .eyebrow {
  margin-bottom: 12px;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(26px, 4.5vw, 54px));
  padding-bottom: clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--ink-700);
  background:
    radial-gradient(92% 72% at 84% -6%, rgba(63, 140, 138, 0.22), transparent 62%),
    radial-gradient(56% 48% at 6% 2%, rgba(255, 106, 42, 0.10), transparent 60%),
    linear-gradient(180deg, #07131F 0%, #07131F 74%, rgba(13, 32, 51, 0.72) 100%);
  overflow: hidden;
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--home-hair-dusk) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, var(--home-hair-dusk) 0 1px, transparent 1px 24px);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 72%);
}

.page-home .home-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.page-home .hero-copy h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-home .hero-copy .lead {
  max-width: 40ch;
  color: var(--mist-300);
  font-size: 16px;
  line-height: 1.8;
}

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

.page-home .hero-note {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--neon-500);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--dusk-300);
}

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

.page-home .hero-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-850);
  box-shadow: var(--shadow-soft);
}

.page-home .hero-frame img,
.page-home .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-home .hero-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .hero-card {
  position: relative;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(27, 51, 72, 0.6), rgba(13, 32, 51, 0.45));
  border: 1px solid var(--ink-700);
  border-left: 3px solid var(--dusk-500);
  border-radius: 3px;
  transition: border-left-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-home .hero-card:hover {
  border-left-color: var(--neon-500);
  transform: translateY(-2px);
}

.page-home .hero-card-num {
  display: block;
  font-size: 22px;
  line-height: 1;
  color: var(--neon-500);
  letter-spacing: 0.02em;
}

.page-home .hero-card-title {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
}

.page-home .hero-card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist-300);
}

/* ---------- 轮次轨道 ---------- */
.page-home .rounds-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(26px, 3.4vw, 40px);
}

.page-home .round-track {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-home .track-node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0 12px 22px;
  border-left: 1px solid var(--ink-700);
  color: var(--mist-300);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--dur) var(--ease), border-left-color var(--dur) var(--ease);
}

.page-home .track-node::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--ink-700);
  box-shadow: 0 0 0 3px #07131F;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-home .track-node .mono {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.page-home .track-label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist-300);
}

.page-home .track-node:hover,
.page-home .track-node:focus-visible {
  color: var(--white);
  border-left-color: var(--neon-500);
}

.page-home .track-node:hover::before,
.page-home .track-node:focus-visible::before {
  background: var(--neon-500);
  box-shadow: 0 0 0 3px #07131F, 0 0 0 7px rgba(255, 106, 42, 0.22);
}

.page-home .track-node.is-current {
  border-left-color: var(--neon-500);
}

.page-home .track-node.is-current .mono,
.page-home .track-node.is-current .track-label {
  color: var(--neon-500);
}

.page-home .track-node.is-current::before {
  background: var(--neon-500);
  box-shadow: 0 0 0 3px #07131F, 0 0 0 7px rgba(255, 106, 42, 0.28);
}

.page-home .round-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-home .round-card {
  position: relative;
  min-width: 0;
  padding: 20px 20px 18px;
  background: var(--home-card-bg);
  border: 1px solid var(--ink-700);
  border-left: 3px solid transparent;
  border-radius: 3px;
  outline: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-home .round-card:hover,
.page-home .round-card:focus,
.page-home .round-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--neon-500);
  border-left-color: var(--neon-500);
  background: var(--home-card-bg-hover);
}

.page-home .card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-home .card-time {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--dusk-300);
}

.page-home .card-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
}

.page-home .card-pair {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--neon-200);
}

.page-home .card-roster {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--ink-700);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--dusk-300);
}

.page-home .roster-detail {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist-300);
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin var(--dur) var(--ease);
}

.page-home .round-card:hover .roster-detail,
.page-home .round-card:focus .roster-detail,
.page-home .round-card:focus-within .roster-detail {
  max-height: 140px;
  margin-top: 10px;
  opacity: 1;
}

/* ---------- 两步路径 ---------- */
.page-home .home-path {
  background: linear-gradient(180deg, rgba(13, 32, 51, 0.55), rgba(7, 19, 31, 1));
}

.page-home .path-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .path-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px 22px 20px;
  background: rgba(27, 51, 72, 0.34);
  border: 1px solid var(--ink-700);
  border-radius: 3px;
}

.page-home .step-num {
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--neon-500);
}

.page-home .step-body h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--white);
}

.page-home .step-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist-300);
}

/* ---------- 复盘预览 ---------- */
.page-home .recap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(24px, 3vw, 36px);
  align-items: start;
}

.page-home .recap-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-home .recap-card {
  padding: 20px;
  background: var(--home-card-bg);
  border: 1px solid var(--ink-700);
  border-left: 3px solid var(--dusk-500);
  border-radius: 3px;
  transition: border-left-color var(--dur) var(--ease);
}

.page-home .recap-card:hover {
  border-left-color: var(--neon-500);
}

.page-home .recap-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-home .recap-points li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(27, 51, 72, 0.9);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist-300);
}

.page-home .recap-points .mono {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--dusk-300);
}

.page-home .recap-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--neon-200);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 177, 131, 0.4);
  transition: color var(--dur) var(--ease), border-bottom-color var(--dur) var(--ease);
}

.page-home .recap-link:hover,
.page-home .recap-link:focus-visible {
  color: var(--neon-500);
  border-bottom-color: var(--neon-500);
}

.page-home .recap-figure,
.page-home .client-figure,
.page-home .index-figure {
  margin: 0;
  min-width: 0;
}

.page-home .recap-figure .media-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
}

.page-home .media-frame-caption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mist-300);
  opacity: 0.85;
}

/* ---------- 客户端 ---------- */
.page-home .home-client {
  background:
    radial-gradient(70% 80% at 92% 20%, rgba(63, 140, 138, 0.16), transparent 62%),
    var(--ink-950);
}

.page-home .client-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 44px);
  align-items: center;
}

.page-home .client-copy p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist-300);
}

.page-home .client-copy .section-title {
  margin-bottom: 18px;
}

.page-home .platform-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 22px 0 18px;
  padding: 0;
  list-style: none;
}

.page-home .platform-chip {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 14px;
  background: rgba(13, 32, 51, 0.7);
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  font-size: 13px;
  color: var(--mist-300);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-home .platform-chip:hover {
  border-color: var(--dusk-500);
  transform: translateY(-2px);
}

.page-home .platform-chip .mono {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--dusk-300);
}

.page-home .client-note {
  font-size: 13px;
  color: var(--dusk-300);
}

.page-home .client-figure .media-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-850);
  box-shadow: var(--shadow-soft);
}

/* ---------- 数据带 ---------- */
.page-home .stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 2.6vw, 32px);
  background: var(--ink-700);
  border: 1px solid var(--ink-700);
}

.page-home .stat-item {
  display: grid;
  gap: 8px;
  padding: 22px 18px 20px;
  background: var(--ink-950);
}

.page-home .stat-num {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--neon-500);
}

.page-home .stat-label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist-300);
}

.page-home .stats-note {
  margin: 20px 0 0;
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mist-300);
  padding-left: 14px;
  border-left: 2px solid var(--dusk-500);
}

/* ---------- 日期索引 ---------- */
.page-home .index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(24px, 3vw, 36px);
  align-items: start;
}

.page-home .index-figure .media-frame {
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-850);
}

.page-home .archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-700);
}

.page-home .archive-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--ink-700);
  text-decoration: none;
  color: var(--mist-300);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease), border-bottom-color var(--dur) var(--ease);
}

.page-home .archive-row:hover,
.page-home .archive-row:focus-visible {
  color: var(--white);
  padding-left: 10px;
  border-bottom-color: var(--neon-500);
}

.page-home .archive-date {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--neon-200);
  white-space: nowrap;
}

.page-home .archive-text {
  font-size: 14px;
  line-height: 1.6;
}

.page-home .archive-go {
  font-size: 14px;
  color: var(--dusk-300);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-home .archive-row:hover .archive-go {
  color: var(--neon-500);
  transform: translateX(4px);
}

/* ---------- 使用场景 ---------- */
.page-home .home-audience {
  background: linear-gradient(180deg, rgba(13, 32, 51, 0.5), rgba(7, 19, 31, 1));
}

.page-home .audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(22px, 2.8vw, 34px);
}

.page-home .audience-card {
  padding: 22px 20px 20px;
  background: var(--home-card-bg);
  border: 1px solid var(--ink-700);
  border-radius: 3px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .audience-card:hover {
  transform: translateY(-2px);
  border-color: var(--dusk-500);
}

.page-home .audience-num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--dusk-300);
}

.page-home .audience-card h3 {
  margin: 12px 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
}

.page-home .audience-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist-300);
}

/* ---------- 收尾 ---------- */
.page-home .home-cta {
  padding-block: clamp(40px, 5.5vw, 72px);
}

.page-home .home-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 3px;
}

.page-home .home-cta-panel .eyebrow {
  color: #6B4A32;
}

.page-home .home-cta-panel .eyebrow::before {
  background: var(--clay-600);
}

.page-home .home-cta-panel h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.18;
  color: var(--ink-950);
}

.page-home .home-cta-panel p {
  margin: 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: #26313D;
}

.page-home .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
}

.page-home .cta-ghost {
  color: var(--ink-950);
  border-color: rgba(7, 19, 31, 0.35);
}

.page-home .cta-ghost:hover {
  color: var(--ink-950);
  border-color: var(--ink-950);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-home .hero-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .page-home .hero-cards > li:nth-child(2) {
    margin-top: 24px;
  }

  .page-home .hero-cards > li:nth-child(3) {
    margin-top: 48px;
  }

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

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

@media (min-width: 760px) {
  .page-home .round-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .page-home .round-card:nth-child(2) {
    margin-top: 24px;
  }

  .page-home .round-card:nth-child(3) {
    margin-top: 48px;
  }

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

  .page-home .home-cta-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-home .home-hero-grid {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: clamp(32px, 3.6vw, 52px);
  }

  .page-home .rounds-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .page-home .round-track {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }

  .page-home .recap-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

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

  .page-home .index-grid {
    grid-template-columns: 320px minmax(0, 1fr);
  }

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

  .page-home .recap-points li {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .round-card,
  .page-home .roster-detail,
  .page-home .hero-card,
  .page-home .audience-card,
  .page-home .platform-chip,
  .page-home .archive-row,
  .page-home .archive-go,
  .page-home .track-node,
  .page-home .track-node::before {
    transition: none;
  }

  .page-home .round-card:hover,
  .page-home .round-card:focus,
  .page-home .round-card:focus-within,
  .page-home .hero-card:hover,
  .page-home .audience-card:hover,
  .page-home .platform-chip:hover {
    transform: none;
  }

  .page-home .archive-row:hover,
  .page-home .archive-row:focus-visible {
    padding-left: 4px;
  }

  .page-home .archive-row:hover .archive-go {
    transform: none;
  }
}