.page-home {
  --home-bite: calc(-1 * var(--space-6));
  --home-bite-sm: calc(-1 * var(--space-2));
}

/* ============ 首屏 ============ */
.page-home .hero {
  position: relative;
  overflow: hidden;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  padding: var(--space-6) 0 var(--space-8);
}

.page-home .hero__glow {
  position: absolute;
  inset: -25% -20% 15% 25%;
  background: radial-gradient(
    58% 62% at 42% 52%,
    color-mix(in srgb, var(--color-primary) 48%, transparent) 0%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

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

.page-home .hero__context {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-contrast-ink);
  opacity: 0.62;
  letter-spacing: 0.06em;
}

.page-home .hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 0.95;
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
  overflow-wrap: break-word;
}

.page-home .hero__title em {
  font-style: normal;
  color: var(--color-contrast-accent);
}

.page-home .hero__lede {
  margin: var(--space-4) 0 0;
  max-width: 58ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.86;
}

.page-home .hero__shot {
  position: relative;
  margin: var(--space-6) 0 0;
  z-index: 1;
}

.page-home .hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .hero__shot-cap {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-contrast-ink);
  opacity: 0.66;
}

.page-home .hero__bar {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-home .hero__nums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.page-home .hero__num-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-home .hero__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-contrast-ink);
}

.page-home .hero__num-label {
  font-size: var(--text-xs);
  color: var(--color-contrast-ink);
  opacity: 0.68;
  white-space: nowrap;
}

.page-home .hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ============ 本轮焦点 ============ */
.page-home .round__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-home .round__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .round__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .round__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: var(--border-thin) solid var(--color-line);
}

.page-home .round__item {
  position: relative;
  padding: 0 0 var(--space-8) var(--space-4);
}

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

.page-home .round__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--color-primary);
}

.page-home .flare__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.page-home .flare__meta {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .flare__line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-home .flare__score {
  display: inline-block;
  padding: 0 var(--space-2);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.page-home .flare__why {
  margin: var(--space-3) 0 0;
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .flare__toggle {
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color 140ms linear, color 140ms linear;
}

.page-home .flare__toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-home .flare__toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.page-home .flare__panel {
  margin-top: var(--space-3);
}

.page-home .flare__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-3) 0 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .flare__facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-home .flare__facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .flare__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.page-home .flare__up {
  color: var(--color-primary);
}

.page-home .round__wall {
  margin: var(--space-8) 0 0;
}

.page-home .round__wall img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-line);
}

.page-home .round__wall figcaption {
  margin-top: var(--space-2);
  max-width: 58ch;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ============ 三项服务 ============ */
.page-home .svc__head {
  margin-bottom: var(--space-6);
  max-width: 46ch;
}

.page-home .svc__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .svc__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-home .svc__crowd {
  margin: 0;
  position: relative;
  z-index: 1;
}

.page-home .svc__crowd img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-line);
}

.page-home .svc__crowd figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .svc {
  position: relative;
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-surface);
}

.page-home .svc--rank {
  z-index: 2;
}

.page-home .svc--report {
  z-index: 3;
  background: var(--color-primary-soft);
  border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
}

.page-home .svc--map {
  z-index: 4;
  background: var(--color-contrast-surface);
  border-color: var(--color-contrast-line);
  color: var(--color-contrast-ink);
}

.page-home .svc__tag {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
}

.page-home .svc--map .svc__tag {
  color: var(--color-contrast-ink);
  opacity: 0.62;
}

.page-home .svc__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .svc--map .svc__name {
  color: var(--color-contrast-ink);
}

.page-home .svc__body {
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .svc--map .svc__body {
  color: var(--color-contrast-ink);
  opacity: 0.84;
}

.page-home .svc__cta {
  margin: var(--space-4) 0 0;
}

/* ============ 主场地图 ============ */
.page-home .map__wrap {
  display: grid;
  gap: var(--space-6);
}

.page-home .map__lede {
  margin: var(--space-3) 0 0;
  max-width: 50ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .map__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .map__legend {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .map__legend li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.page-home .map__key {
  display: inline-block;
  width: 9px;
  height: 9px;
}

.page-home .map__key--up {
  background: var(--color-primary);
}

.page-home .map__key--down {
  background: var(--color-accent);
}

.page-home .map__key--flat {
  background: var(--color-ink-muted);
}

.page-home .map__visual {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-home .map__outline {
  position: absolute;
  inset: 8% 4%;
  width: 92%;
  height: 84%;
  fill: color-mix(in srgb, var(--color-primary) 12%, transparent);
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.page-home .spot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  white-space: nowrap;
  color: var(--color-ink);
  transform: translate(-50%, -50%);
  transition: border-color 140ms linear, box-shadow 140ms linear;
}

.page-home .spot__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

.page-home .spot__delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.page-home .spot__delta--up,
.page-home .map__table .is-num.spot__delta--up {
  color: var(--color-primary);
}

.page-home .spot__delta--down,
.page-home .map__table .is-num.spot__delta--down {
  color: var(--color-accent);
}

.page-home .spot__delta--flat,
.page-home .map__table .is-num.spot__delta--flat {
  color: var(--color-ink-muted);
}

.page-home .spot:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-highlight);
  z-index: 5;
}

.page-home .spot--a { left: 22%; top: 22%; }
.page-home .spot--b { left: 62%; top: 33%; }
.page-home .spot--c { left: 44%; top: 58%; }
.page-home .spot--d { left: 79%; top: 70%; }
.page-home .spot--e { left: 17%; top: 74%; }

.page-home .map__table {
  margin-top: var(--space-6);
}

.page-home .map__table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .map__foot {
  margin: var(--space-4) 0 0;
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .map__foot a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ 品牌年轮 ============ */
.page-home .origin {
  background: var(--color-surface-deep);
}

.page-home .origin__wrap {
  display: grid;
  gap: var(--space-6);
}

.page-home .origin__shot {
  margin: 0;
}

.page-home .origin__shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-line);
}

.page-home .origin__shot figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .origin__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .origin__lead {
  margin: var(--space-4) 0 0;
  color: var(--color-ink-soft);
}

.page-home .origin__line {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .origin__line li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-home .origin__year {
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.08em;
}

.page-home .origin__fact {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-home .origin__figure {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .origin__figure-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.page-home .origin__figure-label {
  margin: var(--space-2) 0 0;
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .origin__cta {
  margin: var(--space-6) 0 0;
}

/* ============ 下一步 ============ */
.page-home .next {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-home .next__title {
  margin: var(--space-3) 0 0;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
}

.page-home .next__lede {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.8;
}

.page-home .next__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.page-home .next__card {
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-contrast-line);
  background: color-mix(in srgb, var(--color-contrast-ink) 6%, transparent);
}

.page-home .next__role {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-contrast-accent);
  letter-spacing: 0.1em;
}

.page-home .next__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-contrast-ink);
}

.page-home .next__body {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.82;
}

.page-home .next__go {
  margin: var(--space-4) 0 0;
}

.page-home .next__foot {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.78;
}

.page-home .next__foot a {
  color: var(--color-contrast-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ 桌面端 ============ */
@media (min-width: 720px) {
  .page-home .flare__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .origin__line li {
    grid-template-columns: 8ch 1fr;
    align-items: baseline;
    gap: var(--space-3);
  }

  .page-home .next__grid {
    flex-direction: row;
    align-items: flex-start;
  }

  .page-home .next__card {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 960px) {
  .page-home .hero {
    padding: var(--space-8) 0 0;
    min-height: 88vh;
  }

  .page-home .hero__inner {
    padding-bottom: var(--space-6);
  }

  .page-home .hero__context,
  .page-home .hero__title,
  .page-home .hero__lede {
    max-width: 54%;
  }

  .page-home .hero__shot {
    position: absolute;
    top: 0;
    right: 0;
    width: 41%;
    height: 68%;
    margin: 0;
    overflow: hidden;
    z-index: 1;
  }

  .page-home .hero__shot img {
    width: 100%;
    height: 100%;
    border-top: 0;
    border-left: var(--border-thin) solid var(--color-contrast-line);
  }

  .page-home .hero__shot-cap {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-2);
    margin: 0;
    padding: 2px var(--space-1);
    background: color-mix(in srgb, var(--color-contrast-surface) 76%, transparent);
  }

  .page-home .hero__bar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .page-home .hero__num {
    font-size: var(--text-4xl);
  }

  .page-home .hero__pills {
    transform: rotate(-1.4deg) translateY(var(--home-bite-sm));
  }

  /* 服务拼贴：大小不一、互相咬合 */
  .page-home .svc__stage {
    display: block;
  }

  .page-home .svc__crowd {
    width: 42%;
    margin: 0 0 var(--home-bite) 0;
  }

  .page-home .svc--rank {
    width: 57%;
    margin: 0 0 0 auto;
  }

  .page-home .svc--report {
    width: 64%;
    margin: calc(-1 * var(--space-4)) 0 0 8%;
  }

  .page-home .svc--map {
    width: 54%;
    margin: calc(-1 * var(--space-4)) 0 0 6%;
  }

  /* 主场地图 */
  .page-home .map__wrap {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
    align-items: start;
  }

  /* 品牌年轮 */
  .page-home .origin__wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
  }

  .page-home .origin__shot {
    grid-column: 1 / 6;
    margin-top: var(--space-6);
  }

  .page-home .origin__copy {
    grid-column: 6 / 12;
    margin-top: calc(-1 * var(--space-6));
  }

  .page-home .origin__figure {
    margin-top: var(--space-8);
  }

  .page-home .next__card:nth-child(2) {
    margin-top: var(--space-6);
  }

  .page-home .next__card:nth-child(3) {
    margin-top: var(--space-2);
  }
}

@media (max-width: 719px) {
  .page-home .spot {
    padding: 1px 4px;
    font-size: var(--text-xs);
    transform: translate(-50%, -50%) scale(0.86);
  }

  .page-home .round__list {
    border-left: 0;
    padding-left: 0;
  }

  .page-home .round__item {
    padding-left: var(--space-3);
    border-left: var(--border-thin) solid var(--color-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .spot,
  .page-home .flare__toggle,
  .page-home .hero__pills {
    transition: none;
    transform: none;
  }
}


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

  <section class="hero" aria-labelledby="hero-title">
    <span class="hero__glow" aria-hidden="true"></span>
    <figure class="hero__shot">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光明亮的草皮与看台，广角低角度，画面右上叠有半透明的积分变化图层">
      <figcaption class="hero__shot-cap mono">申城 · 夜场 20:30 开球</figcaption>
    </figure>
    <div class="container hero__inner">
      <p class="hero__context mono">亚洲版体育会 · 首页 · 数据看板第 7 版</p>
      <h1 class="hero__title" id="hero-title">每轮赛后，先看<em>这三样</em></h1>
      <p class="hero__lede">比分告诉你谁赢了，积分告诉你位置挪到哪儿，草皮的位置告诉你这场球为什么值得记住。亚洲版体育会从 2003 年一块手写记分板做起，把这三件事放进同一屏，每周三交到你手上。</p>
      <div class="hero__bar">
        <ul class="hero__nums">
          <li class="hero__num-cell">
            <span class="hero__num num">48,000</span>
            <span class="hero__num-label">场战报已发布</span>
          </li>
          <li class="hero__num-cell">
            <span class="hero__num num">26</span>
            <span class="hero__num-label">项联赛杯赛在跟</span>
          </li>
          <li class="hero__num-cell">
            <span class="hero__num num">320</span>
            <span class="hero__num-label">家球迷组织在用</span>
          </li>
        </ul>
        <div class="hero__pills">
          <a class="pill-link" href="/rankings/">看积分榜</a>
          <a class="pill-link pill-link--accent" href="/rankings/">认领主场</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--paper round" id="round" aria-labelledby="round-title">
    <div class="container">
      <header class="round__head">
        <p class="eyebrow">本轮焦点</p>
        <h2 class="round__title" id="round-title">这一轮，三场值得回头看的球</h2>
        <p class="round__note mono">第 19 轮 · 每周三同步</p>
      </header>

      <ol class="round__list">
        <li class="round__item" data-reveal>
          <article class="flare">
            <header class="flare__head">
              <span class="tag tag--primary">城市联赛 · 甲组</span>
              <span class="flare__meta mono">周六 19:30 / 虹口北场</span>
            </header>
            <p class="flare__line">
              <span class="flare__team">杨浦铁闸</span>
              <span class="flare__score">2 : 1</span>
              <span class="flare__team">静安灰鸽</span>
            </p>
            <p class="flare__why">两队赛前只差 1 分，第 71 分钟那个角球把铁闸送进前三，也让灰鸽从第二掉到第五。</p>
            <button class="flare__toggle" type="button" data-collapse-trigger aria-expanded="true" aria-controls="flare-panel-1">半场、点球与积分变化</button>
            <div class="flare__panel" id="flare-panel-1">
              <dl class="flare__facts">
                <div>
                  <dt>半场比分</dt>
                  <dd>0 : 1</dd>
                </div>
                <div>
                  <dt>点球记录</dt>
                  <dd>1 罚 1 中</dd>
                </div>
                <div>
                  <dt>本轮积分</dt>
                  <dd class="flare__up">+3</dd>
                </div>
                <div>
                  <dt>联赛位次</dt>
                  <dd>第 5 → 第 3</dd>
                </div>
              </dl>
            </div>
          </article>
        </li>

        <li class="round__item" data-reveal>
          <article class="flare">
            <header class="flare__head">
              <span class="tag tag--primary">城市杯 · 八强</span>
              <span class="flare__meta mono">周日 15:00 / 浦东源深副场</span>
            </header>
            <p class="flare__line">
              <span class="flare__team">浦东联</span>
              <span class="flare__score">4 : 2</span>
              <span class="flare__team">闵行海鸥</span>
            </p>
            <p class="flare__why">90 分钟咬成平局，点球 5 罚 4 中才分出四强席位，海鸥的门将两次扑对方向都没拦住。</p>
            <button class="flare__toggle" type="button" data-collapse-trigger aria-expanded="true" aria-controls="flare-panel-2">半场、点球与积分变化</button>
            <div class="flare__panel" id="flare-panel-2">
              <dl class="flare__facts">
                <div>
                  <dt>半场比分</dt>
                  <dd>1 : 0</dd>
                </div>
                <div>
                  <dt>点球大战</dt>
                  <dd>4 : 2</dd>
                </div>
                <div>
                  <dt>晋级结果</dt>
                  <dd class="flare__up">进四强</dd>
                </div>
                <div>
                  <dt>联赛积分</dt>
                  <dd>本场不计</dd>
                </div>
              </dl>
            </div>
          </article>
        </li>

        <li class="round__item" data-reveal>
          <article class="flare">
            <header class="flare__head">
              <span class="tag tag--primary">球迷组织 · 友谊赛</span>
              <span class="flare__meta mono">周日 16:30 / 徐汇滨江十二号场</span>
            </header>
            <p class="flare__line">
              <span class="flare__team">徐汇老枪</span>
              <span class="flare__score">3 : 3</span>
              <span class="flare__team">长宁夜航</span>
            </p>
            <p class="flare__why">两边各换四人，下半场打成对攻，这场不进联赛积分，但会同步到两队的主场页面，下次约球直接对档期。</p>
            <button class="flare__toggle" type="button" data-collapse-trigger aria-expanded="true" aria-controls="flare-panel-3">半场、点球与积分变化</button>
            <div class="flare__panel" id="flare-panel-3">
              <dl class="flare__facts">
                <div>
                  <dt>半场比分</dt>
                  <dd>2 : 1</dd>
                </div>
                <div>
                  <dt>点球记录</dt>
                  <dd>本场无</dd>
                </div>
                <div>
                  <dt>下场排期</dt>
                  <dd class="flare__up">已排十一月</dd>
                </div>
                <div>
                  <dt>联赛积分</dt>
                  <dd>本场不计</dd>
                </div>
              </dl>
            </div>
          </article>
        </li>
      </ol>
    </div>

    <figure class="round__wall">
      <img src="{zhanqunpic:h:750w:1200}" width="1200" height="750" alt="暗房里一整面比分与积分显示屏，屏幕上等宽数字泛出荧光青色反光" loading="lazy" decoding="async">
      <figcaption class="mono">每轮结束后，数据组把五块看板推到第 7 版，从终场哨到同步落在同一天里。</figcaption>
    </figure>
  </section>

  <section class="section section--tint svc" id="services" aria-labelledby="svc-title">
    <div class="container">
      <header class="svc__head">
        <p class="eyebrow">三项服务</p>
        <h2 class="svc__title" id="svc-title">积分榜、战报、主场地图，各自解决什么</h2>
      </header>

      <div class="svc__stage">
        <figure class="svc__crowd">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="看台上背光的球迷剪影与围巾，暖色灯光从画面外打来" loading="lazy" decoding="async">
          <figcaption class="mono">看台是这一整套服务的起点。</figcaption>
        </figure>

        <article class="svc svc--rank">
          <p class="svc__tag mono">01 / 积分榜</p>
          <h3 class="svc__name">想知道主队是升了还是掉了</h3>
          <p class="svc__body">每轮结果当天落到位次，谁靠净胜球压过谁、哪两支同分并列，都摆在表里。适合每周只追一队、又懒得自己算净胜球的球迷。</p>
          <p class="svc__cta"><a class="btn btn--primary" href="/rankings/">看本轮位次变化</a></p>
        </article>

        <article class="svc svc--report">
          <p class="svc__tag mono">02 / 战报</p>
          <h3 class="svc__name">想搞清楚那 90 分钟到底发生了什么</h3>
          <p class="svc__body">半场比分、点球谁罚进了谁没进、换人在第几分钟，按时间轴一段段讲。适合看完球还想跟人复盘的队长、教练和守着文字直播的人。</p>
          <p class="svc__cta"><a class="btn btn--ghost" href="/process/">翻九场服务实录</a></p>
        </article>

        <article class="svc svc--map">
          <p class="svc__tag mono">03 / 主场地图</p>
          <h3 class="svc__name">想找到自己城市那块草皮</h3>
          <p class="svc__body">46 座主场落在 28 座城市，每座标着主队、球场名和这一轮的积分动态。适合要带人去看球、要认领主场办活动的组织负责人。</p>
          <p class="svc__cta"><a class="btn btn--accent" href="/product-center/">看主场地图怎么读</a></p>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--paper map" id="homeground" aria-labelledby="map-title">
    <div class="container">
      <div class="map__wrap">
        <div class="map__copy">
          <p class="eyebrow">主场地图</p>
          <h2 class="map__title" id="map-title">你的球队，在哪座城、哪块草皮上踢</h2>
          <p class="map__lede">地图上每个圆点是一座主场，点旁边那个带符号的数字是主队这一轮拿到的积分；把鼠标停在圆点上，城市名会一起带出球场名和当前位次。绿点是本轮上分，品红点是掉了分，灰点是轮空。</p>
          <ul class="map__legend">
            <li><span class="map__key map__key--up" aria-hidden="true"></span>本轮上分</li>
            <li><span class="map__key map__key--down" aria-hidden="true"></span>本轮掉分</li>
            <li><span class="map__key map__key--flat" aria-hidden="true"></span>本轮轮空</li>
          </ul>
        </div>

        <div class="map__visual">
          <svg class="map__outline" viewBox="0 0 600 400" preserveAspectRatio="none" aria-hidden="true" focusable="false">
            <path d="M118 62 L356 34 L520 98 L556 212 L468 330 L286 366 L130 318 L58 198 Z"></path>
          </svg>

          <span class="spot spot--a" title="沈阳 · 浑河北岸球场 · 铁西货车 · 第 1 位">
            <span class="spot__dot" aria-hidden="true"></span>
            <span class="spot__name">沈阳</span>
            <span class="spot__delta num spot__delta--up">+3</span>
          </span>
          <span class="spot spot--b" title="上海 · 虹口北场 · 杨浦铁闸 · 第 3 位">
            <span class="spot__dot" aria-hidden="true"></span>
            <span class="spot__name">上海</span>
            <span class="spot__delta num spot__delta--up">+3</span>
          </span>
          <span class="spot spot--c" title="武汉 · 汉阳江滩一号场 · 汉口火轮 · 第 7 位">
            <span class="spot__dot" aria-hidden="true"></span>
            <span class="spot__name">武汉</span>
            <span class="spot__delta num spot__delta--down">−1</span>
          </span>
          <span class="spot spot--d" title="广州 · 天河副场 · 越秀白鹇 · 第 11 位">
            <span class="spot__dot" aria-hidden="true"></span>
            <span class="spot__name">广州</span>
            <span class="spot__delta num spot__delta--down">−3</span>
          </span>
          <span class="spot spot--e" title="成都 · 锦江东看台球场 · 青羊镖旗 · 第 6 位">
            <span class="spot__dot" aria-hidden="true"></span>
            <span class="spot__name">成都</span>
            <span class="spot__delta num spot__delta--flat">轮空</span>
          </span>
        </div>
      </div>

      <div class="table-wrap map__table">
        <table class="table">
          <caption class="mono">本周几座主场与本会同步的位次</caption>
          <thead>
            <tr>
              <th scope="col">城市</th>
              <th scope="col">主场球场</th>
              <th scope="col">主队</th>
              <th scope="col">本轮积分</th>
              <th scope="col">联赛位次</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>上海</td>
              <td>虹口北场</td>
              <td>杨浦铁闸</td>
              <td class="is-num spot__delta--up">+3</td>
              <td class="is-num">3</td>
            </tr>
            <tr>
              <td>沈阳</td>
              <td>浑河北岸球场</td>
              <td>铁西货车</td>
              <td class="is-num spot__delta--up">+3</td>
              <td class="is-num">1</td>
            </tr>
            <tr>
              <td>武汉</td>
              <td>汉阳江滩一号场</td>
              <td>汉口火轮</td>
              <td class="is-num spot__delta--down">−1</td>
              <td class="is-num">7</td>
            </tr>
            <tr>
              <td>广州</td>
              <td>天河副场</td>
              <td>越秀白鹇</td>
              <td class="is-num spot__delta--down">−3</td>
              <td class="is-num">11</td>
            </tr>
            <tr>
              <td>成都</td>
              <td>锦江东看台球场</td>
              <td>青羊镖旗</td>
              <td class="is-num spot__delta--flat">轮空</td>
              <td class="is-num">6</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="map__foot">地图和积分榜同源，位次一挪两边一起挪。想把你的主场加进这张图，从<a href="/connect/">联系通道</a>说一声球场名和主队就够。</p>
    </div>
  </section>

  <section class="section section--lg origin" id="origin" aria-labelledby="origin-title">
    <div class="container origin__wrap">
      <figure class="origin__shot">
        <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="夜晚城市天际线与体育场罩棚轮廓叠合，冷光与暖光在画面中间交界" loading="lazy" decoding="async">
        <figcaption class="mono">城市和球场，一直是同一张照片。</figcaption>
      </figure>

      <div class="origin__copy">
        <p class="eyebrow">从哪来</p>
        <h2 class="origin__title" id="origin-title">2003 年，球场边的一块手写记分板</h2>
        <p class="origin__lead prose">那年没有比分页，也没人整理半场。一块白板支在看台角落，有人进球就上去改一个数字。二十多年过去，白板换成了第 7 版数据看板，看台上那批人还在，只是他们手里的比分现在能同步到 320 家球迷组织。</p>

        <ol class="origin__line">
          <li>
            <span class="origin__year mono">第 3 年</span>
            <span class="origin__fact">城市观察员网络铺开，最早的现场记录来自看台最后一排。</span>
          </li>
          <li>
            <span class="origin__year mono">第 9 年</span>
            <span class="origin__fact">积分榜服务上线，每轮结果当天落到位次。</span>
          </li>
          <li>
            <span class="origin__year mono">第 14 年</span>
            <span class="origin__fact">战报服务上线，半场比分与点球记录开始成篇。</span>
          </li>
          <li>
            <span class="origin__year mono">第 18 年</span>
            <span class="origin__fact">主场地图上线，46 座球馆有了自己的坐标。</span>
          </li>
          <li>
            <span class="origin__year mono">第 22 年</span>
            <span class="origin__fact">数据看板升到第 7 版，积分变化、半场比分、点球记录、主场位置、组织动态并成一屏。</span>
          </li>
        </ol>

        <div class="origin__figure">
          <p class="origin__figure-num num">18.6 万</p>
          <p class="origin__figure-label">位球迷已经在社区里注册，每月 260 万次访问落在这些看板和战报上。</p>
        </div>

        <p class="origin__cta"><a class="btn btn--ghost" href="/about/">二十年是怎么走过来的</a></p>
      </div>
    </div>
  </section>

  <section class="section section--lg next" id="next" aria-labelledby="next-title">
    <div class="container">
      <p class="eyebrow">下一步</p>
      <h2 class="next__title" id="next-title">把你的组织、赛程或者主场交给我们</h2>
      <p class="next__lede">不用先想清楚要什么，按你的身份挑一条路开始就行。</p>

      <div class="next__grid">
        <article class="next__card">
          <p class="next__role mono">球迷组织</p>
          <h3 class="next__name">先把主队认到自己城市</h3>
          <p class="next__body">从积分榜找到你的球队，看它在哪座球场、这一轮排第几，再把组织名和主场对上，之后每轮的积分变化和友谊赛档期都会跟过来。</p>
          <p class="next__go"><a class="btn btn--primary" href="/rankings/">从积分榜进</a></p>
        </article>

        <article class="next__card">
          <p class="next__role mono">赛事主办方</p>
          <h3 class="next__name">让每一轮都有人替你记录</h3>
          <p class="next__body">杯赛、业余联赛、友谊赛都能进来。从首场接触到长期同步一共八个环节，谁负责哪一段、比分对不上怎么改，写在同一页里。</p>
          <p class="next__go"><a class="btn btn--ghost" href="/quality-control/">看赛况把关的八个环节</a></p>
        </article>

        <article class="next__card">
          <p class="next__role mono">场馆与媒体</p>
          <h3 class="next__name">场地和内容都能接上</h3>
          <p class="next__body">场馆把球场坐标交过来，地图上就多一个点；媒体要引用战报和积分变化，说清用途即可。两条路都从联系通道开始。</p>
          <p class="next__go"><a class="btn btn--accent" href="/connect/">走联系通道</a></p>
        </article>
      </div>

      <p class="next__foot">想要一份完整的服务范围对照，翻<a href="/quotation/">合作口径</a>；想先看别人怎么落地的，读<a href="/getting-started/">上手指引</a>。每周三新一轮上线，赶得上就一起看。</p>
    </div>
  </section>

</main>


.page-home {
  --home-overlap: calc(-1 * var(--space-4));
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  padding: var(--space-6) 0 var(--space-8);
}

.page-home .hero__glow {
  position: absolute;
  inset: -20% -20% 10% 30%;
  background: radial-gradient(
    58% 62% at 40% 50%,
    color-mix(in srgb, var(--color-primary) 42%, transparent) 0%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

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

.page-home .hero__context {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-contrast-ink);
  opacity: 0.62;
}

.page-home .hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 0.95;
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
}

.page-home .hero__title em {
  font-style: normal;
  color: var(--color-contrast-accent);
}

.page-home .hero__lede {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.82;
}

.page-home .hero__shot {
  position: relative;
  margin: var(--space-6) 0 0;
  z-index: 1;
}

.page-home .hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .hero__shot-cap {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-contrast-ink);
  opacity: 0.66;
}

.page-home .hero__bar {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-home .hero__nums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.page-home .hero__num-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-home .hero__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-contrast-ink);
}

.page-home .hero__num-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-contrast-ink);
  opacity: 0.66;
}

.page-home .hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- 本轮焦点 ---------- */
.page-home .round__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-home .round__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .round__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .round__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: var(--border-thin) solid var(--color-line);
}

.page-home .round__item {
  position: relative;
  padding: 0 0 var(--space-8) var(--space-4);
}

.page-home .round__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--color-primary);
}

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

.page-home .flare__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.page-home .flare__meta {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .flare__line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.page-home .flare__team {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-home .flare__score {
  display: inline-block;
  padding: 0 var(--space-2);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.32;
  font-variant-numeric: tabular-nums;
}

.page-home .flare__why {
  margin: var(--space-3) 0 0;
  max-width: 60ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .flare__toggle {
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color 140ms linear, color 140ms linear;
}

.page-home .flare__toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-home .flare__toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.page-home .flare__panel {
  margin-top: var(--space-2);
}

.page-home .flare__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .flare__facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-home .flare__facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .flare__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.page-home .flare__up {
  color: var(--color-primary);
}

.page-home .round__wall {
  margin: var(--space-8) 0 0;
}

.page-home .round__wall img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-line);
}

.page-home .round__wall figcaption {
  margin-top: var(--space-2);
  max-width: 58ch;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ---------- 三项服务 ---------- */
.page-home .svc__head {
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.page-home .svc__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .svc__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-home .svc__crowd {
  margin: 0;
}

.page-home .svc__crowd img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-line);
}

.page-home .svc__crowd figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .svc {
  position: relative;
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-surface);
}

.page-home .svc--rank {
  z-index: 2;
}

.page-home .svc--report {
  z-index: 3;
  background: var(--color-primary-soft);
  border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
}

.page-home .svc--map {
  z-index: 4;
  background: var(--color-contrast-surface);
  border-color: var(--color-contrast-line);
  color: var(--color-contrast-ink);
}

.page-home .svc__tag {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

.page-home .svc__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .svc__body {
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .svc__cta {
  margin: var(--space-4) 0 0;
}

.page-home .svc--map .svc__tag {
  color: var(--color-contrast-ink);
  opacity: 0.62;
}

.page-home .svc--map .svc__name {
  color: var(--color-contrast-ink);
}

.page-home .svc--map .svc__body {
  color: var(--color-contrast-ink);
  opacity: 0.84;
}

/* ---------- 主场地图 ---------- */
.page-home .map__wrap {
  display: grid;
  gap: var(--space-6);
}

.page-home .map__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .map__lede {
  margin: var(--space-3) 0 0;
  max-width: 50ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .map__legend {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .map__legend li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.page-home .map__key {
  display: inline-block;
  width: 9px;
  height: 9px;
}

.page-home .map__key--up {
  background: var(--color-primary);
}

.page-home .map__key--down {
  background: var(--color-accent);
}

.page-home .map__key--flat {
  background: var(--color-ink-muted);
}

.page-home .map__visual {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-home .map__outline {
  position: absolute;
  inset: 8% 4%;
  width: 92%;
  height: 84%;
  fill: color-mix(in srgb, var(--color-primary) 12%, transparent);
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.page-home .spot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: border-color 140ms linear, box-shadow 140ms linear;
}

.page-home .spot__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

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

.page-home .spot__delta {
  font-variant-numeric: tabular-nums;
}

.page-home .spot__delta--up {
  color: var(--color-primary);
}

.page-home .spot__delta--down {
  color: var(--color-accent);
}

.page-home .spot__delta--flat {
  color: var(--color-ink-muted);
}

.page-home .spot:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-highlight);
  z-index: 5;
}

.page-home .spot--a { left: 22%; top: 22%; }
.page-home .spot--b { left: 62%; top: 34%; }
.page-home .spot--c { left: 44%; top: 58%; }
.page-home .spot--d { left: 79%; top: 70%; }
.page-home .spot--e { left: 17%; top: 74%; }

.page-home .map__table {
  margin-top: var(--space-6);
}

.page-home .map__table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .map__foot {
  margin: var(--space-4) 0 0;
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .map__foot a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 品牌年轮 ---------- */
.page-home .origin {
  background: var(--color-surface-deep);
}

.page-home .origin__wrap {
  display: grid;
  gap: var(--space-6);
}

.page-home .origin__shot {
  margin: 0;
}

.page-home .origin__shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-line);
}

.page-home .origin__shot figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .origin__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .origin__lead {
  margin: var(--space-4) 0 0;
  color: var(--color-ink-soft);
}

.page-home .origin__line {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .origin__line li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-home .origin__year {
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.06em;
}

.page-home .origin__fact {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-home .origin__figure {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .origin__figure-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.page-home .origin__figure-label {
  margin: var(--space-2) 0 0;
  max-width: 48ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .origin__cta {
  margin: var(--space-6) 0 0;
}

/* ---------- 下一步 ---------- */
.page-home .next {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-home .next__title {
  margin: var(--space-2) 0 0;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
}

.page-home .next__lede {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.8;
}

.page-home .next__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.page-home .next__card {
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-contrast-line);
  background: color-mix(in srgb, var(--color-contrast-ink) 6%, transparent);
}

.page-home .next__role {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-contrast-accent);
}

.page-home .next__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-contrast-ink);
}

.page-home .next__body {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.82;
}

.page-home .next__go {
  margin: var(--space-4) 0 0;
}

.page-home .next__foot {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
  opacity: 0.78;
}

.page-home .next__foot a {
  color: var(--color-contrast-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-home .hero__bar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .page-home .hero__num {
    font-size: var(--text-4xl);
  }

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

  .page-home .origin__line li {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
  }

  .page-home .origin__year {
    flex: 0 0 8ch;
  }

  .page-home .next__grid {
    flex-direction: row;
    align-items: flex-start;
  }

  .page-home .next__card {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 960px) {
  .page-home .hero {
    padding: var(--space-8) 0 0;
    min-height: 88vh;
  }

  .page-home .hero__inner {
    padding-bottom: var(--space-6);
  }

  .page-home .hero__context,
  .page-home .hero__title,
  .page-home .hero__lede {
    max-width: 54%;
  }

  .page-home .hero__shot {
    position: absolute;
    top: 0;
    right: 0;
    width: 41%;
    height: 70%;
    margin: 0;
    overflow: hidden;
    z-index: 1;
  }

  .page-home .hero__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top: 0;
    border-left: var(--border-thin) solid var(--color-contrast-line);
  }

  .page-home .hero__shot-cap {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-2);
    margin: 0;
    padding: 2px var(--space-1);
    background: color-mix(in srgb, var(--color-contrast-surface) 76%, transparent);
  }

  .page-home .hero__pills {
    transform: translateY(var(--home-overlap)) rotate(-1.4deg);
  }

  .page-home .svc__stage {
    display: block;
  }

  .page-home .svc__crowd {
    width: 42%;
    margin: 0 0 var(--home-overlap) 0;
  }

  .page-home .svc--rank {
    width: 57%;
    margin-left: auto;
    margin-right: 0;
  }

  .page-home .svc--report {
    width: 63%;
    margin-left: 8%;
    margin-top: var(--home-overlap);
  }

  .page-home .svc--map {
    width: 54%;
    margin-left: 22%;
    margin-top: var(--home-overlap);
  }

  .page-home .map__wrap {
    grid-template-columns: 6fr 6fr;
    gap: var(--space-8);
    align-items: center;
  }

  .page-home .origin__wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
  }

  .page-home .origin__shot {
    grid-column: 2 / 6;
    margin-top: var(--space-8);
  }

  .page-home .origin__copy {
    grid-column: 6 / 12;
    margin-top: calc(-1 * var(--space-6));
  }

  .page-home .origin__figure {
    margin-top: var(--space-8);
  }

  .page-home .next__card:nth-child(2) {
    margin-top: var(--space-6);
  }

  .page-home .next__card:nth-child(3) {
    margin-top: var(--space-3);
  }
}

@media (max-width: 719px) {
  .page-home .spot {
    padding: 1px 4px;
    transform: translate(-50%, -50%) scale(0.86);
  }

  .page-home .round__list {
    border-left: 0;
  }

  .page-home .round__item {
    padding-left: var(--space-3);
    border-left: var(--border-thin) solid var(--color-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .spot,
  .page-home .flare__toggle,
  .page-home .hero__pills {
    transition: none;
    transform: none;
  }

  .page-home .spot {
    transform: translate(-50%, -50%);
  }
}