.page-home {
  --home-gap: .75rem;
  --home-card-bg: linear-gradient(165deg, rgba(10,32,54,.92), rgba(5,18,31,.96));
}

.page-home .home-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding: 1rem 0 .5rem;
  font-size: var(--fs-100);
  letter-spacing: .04em;
  color: var(--mist);
}

.page-home .home-context__sep {
  color: var(--line);
}

.page-home .section {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.page-home .band-head {
  max-width: 62ch;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.page-home .band-head h2 {
  margin: .35rem 0 .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}

.page-home .band-head__note {
  margin: 0;
  font-size: var(--fs-300);
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 首屏拼贴 ---------- */
.page-home .collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}

.page-home .collage > * {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--home-card-bg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.page-home .collage > *:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-24);
}

.page-home .hero-main {
  display: flex;
  align-items: flex-end;
  min-height: 23rem;
  padding: 1.4rem;
  overflow: hidden;
  border-radius: var(--r-l);
}

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

.page-home .hero-main__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

.page-home .hero-main__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(47,227,214,.16), transparent 60%),
    linear-gradient(160deg, rgba(5,18,31,.35) 0%, rgba(5,18,31,.86) 58%, rgba(5,18,31,.98) 100%);
}

.page-home .hero-main__body {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.page-home .hero-main__body h1 {
  margin: .5rem 0 .75rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.15rem + 3.4vw, 3.05rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: .04em;
  color: var(--ink);
}

.page-home .hero-main__body .lead {
  margin: 0 0 1.15rem;
  font-size: var(--fs-300);
  line-height: 1.75;
  color: var(--mist);
}

.page-home .hero-main__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.page-home .hero-status,
.page-home .hero-leagues {
  padding: 1.15rem 1.1rem;
}

.page-home .hero-status__label,
.page-home .hero-leagues__label,
.page-home .hero-round__cap,
.page-home .hero-trend__cap {
  margin: 0 0 .75rem;
  font-size: var(--fs-100);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-home .hero-status__list,
.page-home .hero-leagues__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .hero-status__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
  font-size: var(--fs-200);
  color: var(--ink);
  border-bottom: 1px solid rgba(29,58,80,.5);
}

.page-home .hero-status__item:last-child {
  border-bottom: 0;
}

.page-home .hero-status__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(63,214,138,.16);
}

.page-home .hero-leagues__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  font-size: var(--fs-200);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(29,58,80,.5);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}

.page-home .hero-leagues__link:last-child,
.page-home .hero-leagues__list li:last-child .hero-leagues__link {
  border-bottom: 0;
}

.page-home .hero-leagues__link:hover,
.page-home .hero-leagues__link:focus-visible {
  color: var(--cyan);
  padding-left: .3rem;
}

.page-home .hero-leagues__meta {
  font-size: var(--fs-100);
  color: var(--mist);
}

.page-home .hero-round {
  padding: 1.25rem 1.1rem;
  background: linear-gradient(160deg, rgba(23,19,64,.9), rgba(10,32,54,.95));
}

.page-home .hero-round__num {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cyan);
}

.page-home .hero-round__unit {
  margin-left: .4rem;
  font-size: var(--fs-200);
  letter-spacing: .06em;
  color: var(--mist);
}

.page-home .hero-round .muted,
.page-home .hero-trend .muted {
  margin: 0;
  font-size: var(--fs-100);
  line-height: 1.7;
  color: var(--mist);
}

.page-home .hero-trend {
  padding: 1.25rem 1.1rem;
  background: linear-gradient(160deg, rgba(12,46,48,.9), rgba(5,18,31,.96));
}

.page-home .hero-trend__svg {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: .6rem;
}

/* ---------- 五大内容域 ---------- */
.page-home .zone-index {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}

.page-home .zone-item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.1rem;
  border-top: 1px solid var(--cyan-24);
  background: linear-gradient(180deg, rgba(10,32,54,.55), rgba(5,18,31,0));
  transition: background var(--t-mid) var(--ease);
}

.page-home .zone-item:hover {
  background: linear-gradient(180deg, rgba(12,46,48,.8), rgba(5,18,31,.2));
}

.page-home .zone-item__num {
  font-size: var(--fs-100);
  letter-spacing: .14em;
  color: var(--cyan);
}

.page-home .zone-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink);
}

.page-home .zone-item__desc {
  margin: 0;
  font-size: var(--fs-200);
  line-height: 1.72;
  color: var(--mist);
}

.page-home .zone-item .tag {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- 平板端 ---------- */
.page-home .tablet {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
}

.page-home .tablet__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-float);
}

.page-home .tablet__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .tablet__body h2 {
  margin: .35rem 0 .7rem;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}

.page-home .tablet__body .lead {
  margin: 0 0 1rem;
  font-size: var(--fs-300);
  line-height: 1.75;
  color: var(--mist);
}

.page-home .tablet__points {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}

.page-home .tablet__point {
  display: flex;
  gap: .6rem;
  font-size: var(--fs-200);
  line-height: 1.7;
  color: var(--ink);
}

.page-home .tablet__mark {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: .45rem;
  border: 1px solid var(--cyan);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ---------- 赛季轨道 ---------- */
.page-home .season-rail {
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(23,19,64,.55), rgba(5,18,31,.9)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(29,58,80,.35) 39px 40px);
}

.page-home .rail-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.1rem;
}

.page-home .rail-filter {
  padding: .3rem .8rem;
  font-size: var(--fs-100);
  letter-spacing: .06em;
  color: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.page-home .rail-filter--active {
  color: var(--deep);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-home .season-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.page-home .season-rail__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .35rem .9rem;
  padding: .85rem .9rem;
  border-left: 2px solid var(--cyan-24);
  background: rgba(5,18,31,.5);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}

.page-home .season-rail__item:hover {
  border-left-color: var(--lava);
  background: rgba(10,32,54,.8);
}

.page-home .season-rail__num {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cyan);
}

.page-home .season-rail__title {
  margin: 0 0 .2rem;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--ink);
}

.page-home .season-rail__text .muted {
  margin: 0;
  font-size: var(--fs-100);
  color: var(--mist);
}

.page-home .season-rail__link {
  grid-column: 2;
  justify-self: start;
  font-size: var(--fs-100);
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-24);
  transition: border-color var(--t-fast) var(--ease);
}

.page-home .season-rail__link:hover,
.page-home .season-rail__link:focus-visible {
  border-bottom-color: var(--cyan);
}

/* ---------- 通勤场景 ---------- */
.page-home .commute {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
}

.page-home .commute__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}

.page-home .commute__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .commute__body h2 {
  margin: .35rem 0 .9rem;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}

.page-home .commute__step {
  margin: 0 0 .7rem;
  padding-left: .95rem;
  font-size: var(--fs-200);
  line-height: 1.72;
  color: var(--ink);
  border-left: 1px solid var(--line);
}

.page-home .commute__time {
  display: inline-block;
  margin-right: .45rem;
  color: var(--lava);
  letter-spacing: .04em;
}

.page-home .commute__body .muted {
  margin: 1rem 0 0;
  font-size: var(--fs-200);
  line-height: 1.72;
  color: var(--mist);
}

/* ---------- 榜单与收藏 ---------- */
.page-home .board {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: linear-gradient(150deg, rgba(23,19,64,.85), rgba(12,46,48,.55) 70%, rgba(5,18,31,.95));
}

.page-home .board__body h2 {
  margin: .35rem 0 .7rem;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}

.page-home .board__body .lead {
  margin: 0 0 1rem;
  font-size: var(--fs-200);
  line-height: 1.78;
  color: var(--mist);
}

.page-home .board__list {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.page-home .board__list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: var(--fs-200);
  line-height: 1.7;
  color: var(--ink);
}

.page-home .board__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.page-home .board__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-float);
}

.page-home .board__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 规模 ---------- */
.page-home .stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}

.page-home .stat-cell {
  padding: 1rem .9rem;
  background: rgba(10,32,54,.92);
}

.page-home .stat-cell__num {
  margin: 0 0 .3rem;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--cyan);
}

.page-home .stat-cell__num span {
  margin-left: .15rem;
  font-size: var(--fs-100);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--mist);
}

.page-home .stat-cell__label {
  margin: 0;
  font-size: var(--fs-100);
  color: var(--mist);
}

.page-home .scale-note {
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
  padding: 1.15rem 1.1rem;
  border-left: 2px solid var(--zone-teal);
  background: linear-gradient(90deg, rgba(12,46,48,.55), rgba(5,18,31,0));
}

.page-home .scale-note p {
  margin: 0 0 .8rem;
  font-size: var(--fs-200);
  line-height: 1.8;
  color: var(--ink);
}

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

.page-home .scale-note .muted {
  color: var(--mist);
}

/* ---------- 开始使用 ---------- */
.page-home .start__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.page-home .start-card {
  display: grid;
  gap: .3rem;
  padding: 1.15rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--home-card-bg);
  text-decoration: none;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.page-home .start-card:hover,
.page-home .start-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--lava);
}

.page-home .start-card__label {
  font-size: var(--fs-100);
  letter-spacing: .14em;
  color: var(--lava);
}

.page-home .start-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}

.page-home .start-card__desc {
  font-size: var(--fs-200);
  line-height: 1.7;
  color: var(--mist);
}

.page-home .start-card__arrow {
  margin-top: .35rem;
  font-size: var(--fs-200);
  color: var(--cyan);
}

.page-home .start__folds {
  display: grid;
  gap: .55rem;
  max-width: 60rem;
}

.page-home .start__folds .fold {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: rgba(10,32,54,.55);
}

.page-home .start__folds .fold__body p {
  margin: 0 0 .6rem;
  font-size: var(--fs-200);
  line-height: 1.78;
  color: var(--mist);
}

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

.page-home .start__folds .fold__body a {
  color: var(--cyan);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-home .zone-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .page-home .season-rail__item {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .page-home .season-rail__link {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

@media (min-width: 900px) {
  .page-home .collage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .page-home .hero-main {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    min-height: 30rem;
    padding: 2rem;
  }

  .page-home .hero-status {
    grid-column: 8 / 13;
    grid-row: 1 / 2;
  }

  .page-home .hero-leagues {
    grid-column: 8 / 13;
    grid-row: 2 / 3;
  }

  .page-home .hero-round {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
  }

  .page-home .hero-trend {
    grid-column: 5 / 13;
    grid-row: 3 / 4;
  }

  .page-home .tablet,
  .page-home .commute {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }

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

  .page-home .zone-index {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .page-home .tablet {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-home .commute {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .collage > *,
  .page-home .zone-item,
  .page-home .season-rail__item,
  .page-home .start-card,
  .page-home .hero-leagues__link {
    transition: none;
  }

  .page-home .collage > *:hover,
  .page-home .start-card:hover,
  .page-home .start-card:focus-visible {
    transform: none;
  }
}
<<<END>>>