.page-home {
  --home-line: var(--line);
  --home-gap: 1.25rem;
  background:
    radial-gradient(circle at 82% 6%, rgba(53, 230, 224, 0.10), transparent 46%),
    linear-gradient(165deg, var(--ink-900) 0%, var(--ink-800) 52%, #0b2c44 100%);
  color: var(--white);
  overflow-x: hidden;
}

.page-home h1,
.page-home h2 {
  margin: 0;
}

.page-home p {
  margin: 0;
}

.page-home a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 1.75rem);
  padding-bottom: 3.5rem;
  border-bottom: 2px solid var(--home-line);
  isolation: isolate;
}

.page-home .home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  z-index: 0;
}

.page-home .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(4, 16, 26, 0.94) 0%, rgba(4, 16, 26, 0.66) 44%, rgba(4, 16, 26, 0.18) 82%);
  z-index: 1;
  pointer-events: none;
}

.page-home .home-hero__tick {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--cyan);
  z-index: 3;
  pointer-events: none;
  opacity: 0.75;
}

.page-home .home-hero__tick--tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.page-home .home-hero__tick--tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.page-home .home-hero__tick--bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.page-home .home-hero__tick--br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

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

.page-home .home-hero__eyebrow {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-home .home-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.15rem, 6.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-top: 0.75rem;
  max-width: 17ch;
  color: var(--white);
}

.page-home .home-hero__lead {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--mute);
  max-width: 44ch;
}

.page-home .home-hero__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  margin-top: 2.25rem;
}

/* 联赛切换器 */
.page-home .league-switch {
  position: relative;
  padding: 1.15rem 1.15rem 1.35rem;
  border: 2px solid var(--home-line);
  background: rgba(10, 34, 56, 0.78);
  box-shadow: var(--shadow-hard);
}

.page-home .league-switch__hint {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--mute);
  text-transform: uppercase;
}

.page-home .league-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .league-switch__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.8rem 0 1rem;
}

.page-home .league-switch__chip {
  cursor: pointer;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--home-line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--mute);
  background: transparent;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}

.page-home .league-switch__chip:hover {
  color: var(--white);
  border-color: var(--cyan);
}

.page-home #hl-csl:checked ~ .league-switch__chips label[for="hl-csl"],
.page-home #hl-ccl:checked ~ .league-switch__chips label[for="hl-ccl"],
.page-home #hl-cup:checked ~ .league-switch__chips label[for="hl-cup"],
.page-home #hl-wsl:checked ~ .league-switch__chips label[for="hl-wsl"] {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-home .league-switch__panel { display: none; }

.page-home #hl-csl:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-csl"],
.page-home #hl-ccl:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-ccl"],
.page-home #hl-cup:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-cup"],
.page-home #hl-wsl:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-wsl"] {
  display: block;
}

.page-home .league-switch__panel {
  padding-top: 0.85rem;
  border-top: 2px solid var(--home-line);
}

.page-home .league-switch__panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.page-home .league-switch__panel-text {
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--mute);
}

/* 前瞻摘要 */
.page-home .home-hero__feed {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.25rem;
  border: 2px solid var(--home-line);
  background: linear-gradient(155deg, rgba(13, 43, 69, 0.92), rgba(6, 21, 34, 0.94));
  box-shadow: var(--shadow-hard);
}

.page-home .home-hero__feed::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 3px;
  background: var(--coral);
}

.page-home .home-hero__feed-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--white);
}

.page-home .home-hero__feed-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--mute);
}

.page-home .home-hero__feed-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), color var(--dur);
}

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

.page-home .home-hero__feed .btn {
  margin-top: 0.35rem;
}

/* ---------- 联赛横向主题带 ---------- */
.page-home .league-band {
  position: relative;
  padding: 3rem 0;
  border-bottom: 2px solid var(--home-line);
  background: linear-gradient(110deg, var(--ink-800) 0%, var(--ink-900) 100%);
  overflow: hidden;
}

.page-home .league-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
}

.page-home .league-band__inner {
  position: relative;
  z-index: 1;
}

.page-home .league-band__head {
  max-width: 42rem;
}

.page-home .league-band__kicker,
.page-home .lookup__kicker,
.page-home .expert__kicker,
.page-home .versions__kicker,
.page-home .assure__kicker,
.page-home .weekend__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-home .league-band__title,
.page-home .lookup__title,
.page-home .expert__title,
.page-home .versions__title,
.page-home .assure__title,
.page-home .weekend__title {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.65rem, 4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--white);
}

.page-home .league-band__text,
.page-home .lookup__text,
.page-home .expert__text,
.page-home .versions__text,
.page-home .assure__text,
.page-home .weekend__text {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--mute);
}

.page-home .league-band__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.page-home .league-band__chip {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--home-line);
  background: rgba(6, 21, 34, 0.55);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--white);
  transition: border-color var(--dur), color var(--dur), background var(--dur), transform var(--dur);
}

.page-home .league-band__chip:hover {
  border-color: var(--cyan);
  color: var(--ink-900);
  background: var(--cyan);
  transform: translateY(-2px);
}

/* ---------- 球队资料速查 ---------- */
.page-home .lookup {
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
}

.page-home .lookup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.page-home .lookup__text {
  max-width: 46ch;
}

.page-home .lookup__ways {
  display: grid;
  gap: 0.7rem;
  margin: 1.6rem 0 1.9rem;
  padding: 0;
  list-style: none;
}

.page-home .lookup__way {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num name"
    "num desc";
  gap: 0.15rem 0.85rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--home-line);
  background: rgba(13, 43, 69, 0.45);
  transition: border-color var(--dur), background var(--dur);
}

.page-home .lookup__way:hover {
  border-color: var(--cyan);
  background: rgba(13, 43, 69, 0.8);
}

.page-home .lookup__way-num {
  grid-area: num;
  align-self: center;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 0.8rem;
}

.page-home .lookup__way-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}

.page-home .lookup__way-desc {
  grid-area: desc;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--mute);
}

.page-home .lookup__side {
  padding: 1.3rem;
  border: 2px solid var(--home-line);
  background: linear-gradient(160deg, rgba(53, 230, 224, 0.07), rgba(6, 21, 34, 0.6));
}

.page-home .lookup__side-title {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-home .lookup__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.page-home .lookup__item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--white);
}

.page-home .lookup__item-num {
  font-size: 0.74rem;
  color: var(--mute);
  flex: none;
}

.page-home .lookup__side-note {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--home-line);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-home .lookup__side-link {
  color: var(--cyan);
  border-bottom: 1px solid rgba(53, 230, 224, 0.45);
}

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

/* ---------- 专家专栏抽屉 ---------- */
.page-home .expert {
  position: relative;
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
  background: linear-gradient(200deg, rgba(10, 34, 56, 0.9), rgba(6, 21, 34, 0.9));
}

.page-home .expert__text {
  max-width: 62ch;
}

.page-home .expert-drawer {
  margin-top: 1.9rem;
  border: 2px solid var(--home-line);
  background: rgba(6, 21, 34, 0.7);
}

.page-home .expert-drawer__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur), border-color var(--dur);
}

.page-home .expert-drawer__trigger::-webkit-details-marker {
  display: none;
}

.page-home .expert-drawer__trigger:hover {
  background: rgba(53, 230, 224, 0.08);
}

.page-home .expert-drawer__trigger-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-home .expert-drawer__trigger-mark {
  font-size: 1.1rem;
  color: var(--coral);
}

.page-home .expert-drawer[open] .expert-drawer__trigger-mark {
  transform: rotate(45deg);
}

.page-home .expert-drawer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  padding: 0 1.15rem 1.25rem;
  border-top: 2px solid var(--home-line);
  padding-top: 1.15rem;
}

.page-home .expert-drawer__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid var(--home-line);
  aspect-ratio: 4 / 3;
}

.page-home .expert-drawer__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

.page-home .expert-drawer__lead {
  margin-top: 0.55rem;
  font-size: 0.93rem;
  line-height: 1.8;
  color: var(--mute);
}

.page-home .expert-drawer__list {
  margin: 1rem 0 1.15rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.page-home .expert-drawer__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--white);
}

.page-home .expert-drawer__dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.52rem;
  background: var(--cyan);
}

/* ---------- 版本公告 ---------- */
.page-home .versions {
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
}

.page-home .versions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.page-home .versions__img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
  border: 2px solid var(--home-line);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-home .ver-tabs {
  position: relative;
  border: 2px solid var(--home-line);
  background: rgba(10, 34, 56, 0.72);
  padding: 1.1rem;
}

.page-home .ver-tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .ver-tabs__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-home .ver-tabs__label {
  cursor: pointer;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--home-line);
  font-size: 0.82rem;
  color: var(--mute);
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}

.page-home .ver-tabs__label:hover {
  border-color: var(--coral);
  color: var(--white);
}

.page-home #ver-380:checked ~ .ver-tabs__labels label[for="ver-380"],
.page-home #ver-376:checked ~ .ver-tabs__labels label[for="ver-376"],
.page-home #ver-372:checked ~ .ver-tabs__labels label[for="ver-372"] {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink-900);
}

.page-home .ver-tabs__panels {
  margin-top: 1.1rem;
}

.page-home .ver-tabs__panel {
  display: none;
  padding-top: 0.2rem;
}

.page-home #ver-380:checked ~ .ver-tabs__panels .ver-tabs__panel[data-ver="ver-380"],
.page-home #ver-376:checked ~ .ver-tabs__panels .ver-tabs__panel[data-ver="ver-376"],
.page-home #ver-372:checked ~ .ver-tabs__panels .ver-tabs__panel[data-ver="ver-372"] {
  display: block;
}

.page-home .ver-tabs__state {
  display: inline-block;
}

.page-home .ver-tabs__panel-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--white);
}

.page-home .ver-tabs__list {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-home .ver-tabs__meta {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--mute);
}

.page-home .ver-tabs__foot {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 2px solid var(--home-line);
}

/* ---------- 品质认证 ---------- */
.page-home .assure {
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
  background: linear-gradient(160deg, rgba(11, 44, 68, 0.72), rgba(6, 21, 34, 0.9));
}

.page-home .assure__text {
  max-width: 60ch;
}

.page-home .assure__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 1.9rem 0 1.6rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-home .assure__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num name"
    "num desc";
  gap: 0.2rem 0.9rem;
  padding: 1rem;
  border-left: 3px solid var(--cyan);
  background: rgba(6, 21, 34, 0.6);
  transition: background var(--dur), border-color var(--dur);
}

.page-home .assure__item:hover {
  background: rgba(53, 230, 224, 0.09);
  border-left-color: var(--coral);
}

.page-home .assure__num {
  grid-area: num;
  align-self: start;
  font-size: 0.78rem;
  color: var(--cyan);
  padding-top: 0.2rem;
}

.page-home .assure__name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--white);
}

.page-home .assure__desc {
  grid-area: desc;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-home .assure__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--cyan);
  border-bottom: 1px solid rgba(53, 230, 224, 0.4);
  transition: border-color var(--dur);
}

.page-home .assure__link:hover {
  border-bottom-color: var(--cyan);
}

/* ---------- 周末路径 ---------- */
.page-home .weekend {
  padding: 3.25rem 0 4rem;
}

.page-home .weekend__text {
  max-width: 48ch;
}

.page-home .weekend__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}

.page-home .weekend__step {
  position: relative;
  padding: 1.25rem 1.15rem 1.35rem;
  border: 2px solid var(--home-line);
  background: rgba(10, 34, 56, 0.62);
  transition: border-color var(--dur), transform var(--dur);
}

.page-home .weekend__step:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
}

.page-home .weekend__step::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: var(--coral);
}

.page-home .weekend__step-num {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--coral);
  text-transform: uppercase;
}

.page-home .weekend__step-title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--white);
}

.page-home .weekend__step-text {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--mute);
}

.page-home .weekend__foot {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 2px solid var(--home-line);
}

.page-home .weekend__foot-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mute);
}

.page-home .weekend__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

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

  .page-home .lookup__way {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "name"
      "desc";
    gap: 0.45rem;
  }

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

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

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

@media (min-width: 960px) {
  .page-home .home-hero {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 4.5rem;
  }

  .page-home .home-hero__cols {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-home .league-band {
    padding: 4rem 0;
  }

  .page-home .lookup,
  .page-home .expert,
  .page-home .versions,
  .page-home .assure {
    padding: 4.25rem 0;
  }

  .page-home .weekend {
    padding: 4.25rem 0 5rem;
  }

  .page-home .lookup__grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: 2rem;
  }

  .page-home .expert-drawer__body {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }

  .page-home .expert-drawer__img {
    aspect-ratio: 4 / 5;
    height: 100%;
  }

  .page-home .versions__grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
    gap: 2.25rem;
  }

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

  .page-home .assure__item:nth-child(1),
  .page-home .assure__item:nth-child(2) {
    grid-column: span 1;
  }
}

@media (min-width: 1200px) {
  .page-home .assure__items {
    grid-template-columns: repeat(5, 1fr);
  }

  .page-home .assure__item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "name"
      "desc";
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .league-band__chip,
  .page-home .weekend__step {
    transition: none;
    transform: none;
  }
}
<<<END>>>

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

  <section class="home-hero" aria-labelledby="home-h1">
    <span class="home-hero__tick home-hero__tick--tl" aria-hidden="true"></span>
    <span class="home-hero__tick home-hero__tick--tr" aria-hidden="true"></span>
    <span class="home-hero__tick home-hero__tick--bl" aria-hidden="true"></span>
    <span class="home-hero__tick home-hero__tick--br" aria-hidden="true"></span>

    <img class="home-hero__bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="抽象海洋水波与赛场动线交织的深色数据舱背景，不出现真实人物与球队徽标">

    <div class="shell home-hero__inner">
      <nav class="breadcrumb" aria-label="页面位置">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><span class="breadcrumb__current">首页</span></li>
        </ol>
      </nav>

      <p class="home-hero__eyebrow mono">乐鱼赛场 · 官方入口</p>
      <h1 id="home-h1" class="home-hero__title">周末连看两场，从挑联赛到查球员都不绕路</h1>
      <p class="home-hero__lead">在乐鱼赛场，先挑联赛，再进球队资料或专家专栏；手机上装好 iOS 客户端，比分变化会自己找上门。新用户平均两步就抵达想看的栏目。</p>

      <div class="home-hero__cols">

        <div class="league-switch">
          <p class="league-switch__hint mono">当前聚焦联赛</p>

          <input class="league-switch__input" type="radio" name="home-league" id="hl-csl" checked>
          <input class="league-switch__input" type="radio" name="home-league" id="hl-ccl">
          <input class="league-switch__input" type="radio" name="home-league" id="hl-cup">
          <input class="league-switch__input" type="radio" name="home-league" id="hl-wsl">

          <div class="league-switch__chips">
            <label class="league-switch__chip" for="hl-csl">中超</label>
            <label class="league-switch__chip" for="hl-ccl">中甲</label>
            <label class="league-switch__chip" for="hl-cup">足协杯</label>
            <label class="league-switch__chip" for="hl-wsl">女超</label>
          </div>

          <div class="league-switch__panels">
            <div class="league-switch__panel" data-league="hl-csl">
              <p class="league-switch__panel-title">顶级联赛</p>
              <p class="league-switch__panel-text">按地区或拼音首字母进入球队资料，近期赛程、攻防指标与历史对阵集中在一页。</p>
            </div>
            <div class="league-switch__panel" data-league="hl-ccl">
              <p class="league-switch__panel-title">次级联赛</p>
              <p class="league-switch__panel-text">支持地区筛选，阵容概览与历史对阵一次读完，换队比翻页更快。</p>
            </div>
            <div class="league-switch__panel" data-league="hl-cup">
              <p class="league-switch__panel-title">杯赛</p>
              <p class="league-switch__panel-text">淘汰对阵与定位球数据放在一起，赛前半小时也能看完关键信息。</p>
            </div>
            <div class="league-switch__panel" data-league="hl-wsl">
              <p class="league-switch__panel-title">女子顶级联赛</p>
              <p class="league-switch__panel-text">关键球员状态与专题报告同步跟进，适合赛前深读。</p>
            </div>
          </div>
        </div>

        <div class="home-hero__feed">
          <p class="tag tag--coral">本周前瞻</p>
          <h2 class="home-hero__feed-title">两场重点前瞻，赛前半小时够用</h2>
          <p class="home-hero__feed-text">围绕阵型、攻防转换与关键球员状态展开，读完再回看比赛进程，判断更有抓手。</p>
          <a class="home-hero__feed-link" href="/reports/">看全部观察报告</a>
          <a class="btn btn--cyan btn--sm" href="#expert-zone">打开专家专栏</a>
        </div>

      </div>
    </div>
  </section>

  <section class="league-band" id="league-band" aria-labelledby="band-h">
    <img class="league-band__bg" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="低多边形球场动线与横向刻度线组成的联赛导航氛围图" loading="lazy" decoding="async">
    <div class="shell league-band__inner">
      <div class="league-band__head">
        <p class="league-band__kicker mono">联赛导航 / 01</p>
        <h2 id="band-h" class="league-band__title">16 个联赛，一条横向带铺开</h2>
        <p class="league-band__text">从国内顶级联赛、次级联赛到杯赛与青少年组别，按名称直接点进，球队资料与赛程跟着联赛一起走。</p>
      </div>
      <ul class="league-band__list">
        <li><a class="league-band__chip" href="#team-lookup">中超</a></li>
        <li><a class="league-band__chip" href="#team-lookup">中甲</a></li>
        <li><a class="league-band__chip" href="#team-lookup">中乙</a></li>
        <li><a class="league-band__chip" href="#team-lookup">足协杯</a></li>
        <li><a class="league-band__chip" href="#team-lookup">超级杯</a></li>
        <li><a class="league-band__chip" href="#team-lookup">女超</a></li>
        <li><a class="league-band__chip" href="#team-lookup">女甲</a></li>
        <li><a class="league-band__chip" href="#team-lookup">五人制超级联赛</a></li>
        <li><a class="league-band__chip" href="#team-lookup">五人制甲级联赛</a></li>
        <li><a class="league-band__chip" href="#team-lookup">沙滩足球联赛</a></li>
        <li><a class="league-band__chip" href="#team-lookup">U19 联赛</a></li>
        <li><a class="league-band__chip" href="#team-lookup">U17 联赛</a></li>
        <li><a class="league-band__chip" href="#team-lookup">U15 联赛</a></li>
        <li><a class="league-band__chip" href="#team-lookup">省港杯</a></li>
        <li><a class="league-band__chip" href="#team-lookup">城市联赛</a></li>
        <li><a class="league-band__chip" href="#team-lookup">大学生联赛</a></li>
      </ul>
    </div>
  </section>

  <section class="lookup" id="team-lookup" aria-labelledby="lookup-h">
    <div class="shell lookup__grid">
      <div class="lookup__main">
        <p class="lookup__kicker mono">球队资料速查 / 02</p>
        <h2 id="lookup-h" class="lookup__title">720 支球队，三种查法随你挑</h2>
        <p class="lookup__text">联赛名、所在地区、拼音首字母，任选一条路都能落到同一支球队的页面。换队查对手，不用重新回首页再走一遍。</p>

        <ul class="lookup__ways">
          <li class="lookup__way"><span class="lookup__way-num mono">A</span><span class="lookup__way-name">按联赛</span><span class="lookup__way-desc">先定赛事层级，再挑球队</span></li>
          <li class="lookup__way"><span class="lookup__way-num mono">B</span><span class="lookup__way-name">按地区</span><span class="lookup__way-desc">31 个省级地区，找本地球队最顺</span></li>
          <li class="lookup__way"><span class="lookup__way-num mono">C</span><span class="lookup__way-name">按拼音首字母</span><span class="lookup__way-desc">记得名字不记得联赛时最快</span></li>
        </ul>

        <a class="btn btn--coral" href="/download/">进入资料速查</a>
      </div>

      <aside class="lookup__side" aria-label="球队资料页信息构成">
        <p class="lookup__side-title mono">每支球队的资料页</p>
        <ol class="lookup__list">
          <li class="lookup__item"><span class="lookup__item-num mono">01</span>近期赛程与对手分布</li>
          <li class="lookup__item"><span class="lookup__item-num mono">02</span>阵容概览与位置构成</li>
          <li class="lookup__item"><span class="lookup__item-num mono">03</span>攻防指标与阶段走势</li>
          <li class="lookup__item"><span class="lookup__item-num mono">04</span>历史对阵与交锋记录</li>
        </ol>
        <p class="lookup__side-note">想先弄清怎么看这些信息？<a class="lookup__side-link" href="/questions/">常见问题里有说明</a></p>
      </aside>
    </div>
  </section>

  <section class="expert" id="expert-zone" aria-labelledby="expert-h">
    <div class="shell expert__inner">
      <div class="expert__head">
        <p class="expert__kicker mono">专家专栏 / 03</p>
        <h2 id="expert-h" class="expert__title">18 个分析小组轮值，赛前赛后都有得读</h2>
        <p class="expert__text">V4 赛前前瞻拆成阵型、攻防转换、定位球、体能节奏、历史对阵与关键球员状态六个方向；V3 球员数据覆盖 5600 名球员、42 项技术指标。展开下面这块，直接从抽屉里挑内容。</p>
      </div>

      <details class="expert-drawer">
        <summary class="expert-drawer__trigger">
          <span class="expert-drawer__trigger-text">打开专家专栏抽屉</span>
          <span class="expert-drawer__trigger-mark mono" aria-hidden="true">＋</span>
        </summary>

        <div class="expert-drawer__body">
          <img class="expert-drawer__img" src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="比分牌特写与数据雷达线条组成的专家专栏入口视觉，不出现真实人脸" loading="lazy" decoding="async">
          <div class="expert-drawer__content">
            <p class="expert-drawer__label mono">本次展开</p>
            <p class="expert-drawer__lead">赛前半小时想快速判断两队节奏？先看前瞻里的攻防转换与定位球段落，再回球员数据核对关键位置的状态曲线。</p>
            <ul class="expert-drawer__list">
              <li><span class="expert-drawer__dot" aria-hidden="true"></span>V4 赛前前瞻：6 个观察方向，逐场拆解</li>
              <li><span class="expert-drawer__dot" aria-hidden="true"></span>V3 球员数据：42 项指标配赛季趋势</li>
              <li><span class="expert-drawer__dot" aria-hidden="true"></span>专题报告：每个赛季 12 个深度选题</li>
            </ul>
            <a class="btn btn--cyan btn--sm" href="/reports/">进入观察报告</a>
          </div>
        </div>
      </details>
    </div>
  </section>

  <section class="versions" aria-labelledby="versions-h">
    <div class="shell versions__grid">
      <div class="versions__intro">
        <p class="versions__kicker mono">移动端公告 / 04</p>
        <h2 id="versions-h" class="versions__title">iOS 追比分，最近三个版本改了什么</h2>
        <p class="versions__text">版本号、影响范围与适用设备都写在卡片里，升级前先看清楚再动手。</p>
        <img class="versions__img" src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="版本卡片与进度刻度组成的抽象图形，体现最近三个版本的迭代" loading="lazy" decoding="async">
      </div>

      <div class="ver-tabs">
        <input class="ver-tabs__input" type="radio" name="home-version" id="ver-380" checked>
        <input class="ver-tabs__input" type="radio" name="home-version" id="ver-376">
        <input class="ver-tabs__input" type="radio" name="home-version" id="ver-372">

        <div class="ver-tabs__labels">
          <label class="ver-tabs__label mono" for="ver-380">3.8.0</label>
          <label class="ver-tabs__label mono" for="ver-376">3.7.6</label>
          <label class="ver-tabs__label mono" for="ver-372">3.7.2</label>
        </div>

        <div class="ver-tabs__panels">
          <div class="ver-tabs__panel" data-ver="ver-380">
            <p class="ver-tabs__state tag tag--coral">当前主版本</p>
            <p class="ver-tabs__panel-title">比分刷新与返回位置更稳</p>
            <ul class="ver-tabs__list">
              <li>下拉即可看到最新赛果，刷新节奏更跟手</li>
              <li>从资料页返回列表时保留原来的位置</li>
            </ul>
            <p class="ver-tabs__meta mono">适用设备：iOS 14 及以上</p>
          </div>
          <div class="ver-tabs__panel" data-ver="ver-376">
            <p class="ver-tabs__state tag">上一版本</p>
            <p class="ver-tabs__panel-title">长列表找队更快</p>
            <ul class="ver-tabs__list">
              <li>新增按拼音首字母跳转球队</li>
              <li>球队页首屏加载顺序做了调整</li>
            </ul>
            <p class="ver-tabs__meta mono">适用设备：iOS 13 及以上</p>
          </div>
          <div class="ver-tabs__panel" data-ver="ver-372">
            <p class="ver-tabs__state tag">维护版本</p>
            <p class="ver-tabs__panel-title">提醒样式统一</p>
            <ul class="ver-tabs__list">
              <li>赛前提醒与比分变化提示共用一套标签</li>
              <li>修复部分机型提示不弹出的情况</li>
            </ul>
            <p class="ver-tabs__meta mono">适用设备：iOS 13 及以上</p>
          </div>
        </div>

        <div class="ver-tabs__foot">
          <a class="btn btn--coral btn--sm" href="/download/">查看完整公告与安装流程</a>
        </div>
      </div>
    </div>
  </section>

  <section class="assure" aria-labelledby="assure-h">
    <div class="shell assure__inner">
      <div class="assure__head">
        <p class="assure__kicker mono">品质服务稳健认证 / 05</p>
        <h2 id="assure-h" class="assure__title">五项年度审核，托住每一次查询</h2>
        <p class="assure__text">可用性监测每天 24 小时轮值，人工客服邮箱在工作日 9:00 至 18:00 内回复。数据、内容、隐私与反馈各有一道关口，读者不必自己去猜信息新不新。</p>
      </div>

      <ul class="assure__items">
        <li class="assure__item"><span class="assure__num mono">01</span><span class="assure__name">可用性</span><span class="assure__desc">全天候轮值监测，页面打不开能被第一时间发现</span></li>
        <li class="assure__item"><span class="assure__num mono">02</span><span class="assure__name">数据更新</span><span class="assure__desc">比分与指标按既定节奏刷新，赛前不会看到过期数字</span></li>
        <li class="assure__item"><span class="assure__num mono">03</span><span class="assure__name">内容标注</span><span class="assure__desc">指标含义、更新时段与版本来源写在条目旁边</span></li>
        <li class="assure__item"><span class="assure__num mono">04</span><span class="assure__name">隐私保护</span><span class="assure__desc">账户与设备信息按最小必要原则处理</span></li>
        <li class="assure__item"><span class="assure__num mono">05</span><span class="assure__name">反馈响应</span><span class="assure__desc">站内反馈与客服邮箱双通道，问题能追到处理人</span></li>
      </ul>

      <a class="assure__link" href="/mission/">了解我们的服务原则与团队构成</a>
    </div>
  </section>

  <section class="weekend" aria-labelledby="weekend-h">
    <div class="shell weekend__inner">
      <div class="weekend__head">
        <p class="weekend__kicker mono">周末两场 / 06</p>
        <h2 id="weekend-h" class="weekend__title">连着看两场，这样安排不走回头路</h2>
        <p class="weekend__text">周末连着看两场的人，最怕在两个页面之间来回切。把赛前准备做在前面，开球之后心里就只剩看。</p>
      </div>

      <ol class="weekend__steps">
        <li class="weekend__step">
          <span class="weekend__step-num mono">第 1 步</span>
          <p class="weekend__step-title">先把两支队定下来</p>
          <p class="weekend__step-text">在首屏选中联赛，或者用球队资料速查按地区、拼音首字母定位，两支队的近期赛程与攻防指标一次看齐。</p>
        </li>
        <li class="weekend__step">
          <span class="weekend__step-num mono">第 2 步</span>
          <p class="weekend__step-title">再决定是读还是追</p>
          <p class="weekend__step-text">有时间就展开专家专栏读前瞻，没时间就打开 iOS 客户端盯比分。通勤路上、赛前半小时，场景不同走的路也不同。</p>
        </li>
      </ol>

      <div class="weekend__foot">
        <p class="weekend__foot-text">第一次使用遇到卡点，可以先去问答中心看看，或者直接找我们。</p>
        <div class="weekend__actions">
          <a class="btn btn--cyan btn--sm" href="/questions/">去问答中心</a>
          <a class="btn btn--ghost btn--sm" href="/connect/">联系服务团队</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-line: var(--line);
  --home-gap: 1.25rem;
  background:
    radial-gradient(circle at 82% 6%, rgba(53, 230, 224, 0.10), transparent 46%),
    linear-gradient(165deg, var(--ink-900) 0%, var(--ink-800) 52%, #0b2c44 100%);
  color: var(--white);
  overflow-x: hidden;
}

.page-home h1,
.page-home h2 {
  margin: 0;
}

.page-home p {
  margin: 0;
}

.page-home a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 1.75rem);
  padding-bottom: 3.5rem;
  border-bottom: 2px solid var(--home-line);
  isolation: isolate;
}

.page-home .home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  z-index: 0;
}

.page-home .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(4, 16, 26, 0.94) 0%, rgba(4, 16, 26, 0.66) 44%, rgba(4, 16, 26, 0.18) 82%);
  z-index: 1;
  pointer-events: none;
}

.page-home .home-hero__tick {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--cyan);
  z-index: 3;
  pointer-events: none;
  opacity: 0.75;
}

.page-home .home-hero__tick--tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.page-home .home-hero__tick--tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.page-home .home-hero__tick--bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.page-home .home-hero__tick--br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

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

.page-home .home-hero__eyebrow {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-home .home-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.15rem, 6.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-top: 0.75rem;
  max-width: 17ch;
  color: var(--white);
}

.page-home .home-hero__lead {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--mute);
  max-width: 44ch;
}

.page-home .home-hero__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  margin-top: 2.25rem;
}

/* 联赛切换器 */
.page-home .league-switch {
  position: relative;
  padding: 1.15rem 1.15rem 1.35rem;
  border: 2px solid var(--home-line);
  background: rgba(10, 34, 56, 0.78);
  box-shadow: var(--shadow-hard);
}

.page-home .league-switch__hint {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--mute);
  text-transform: uppercase;
}

.page-home .league-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .league-switch__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.8rem 0 1rem;
}

.page-home .league-switch__chip {
  cursor: pointer;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--home-line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--mute);
  background: transparent;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}

.page-home .league-switch__chip:hover {
  color: var(--white);
  border-color: var(--cyan);
}

.page-home #hl-csl:checked ~ .league-switch__chips label[for="hl-csl"],
.page-home #hl-ccl:checked ~ .league-switch__chips label[for="hl-ccl"],
.page-home #hl-cup:checked ~ .league-switch__chips label[for="hl-cup"],
.page-home #hl-wsl:checked ~ .league-switch__chips label[for="hl-wsl"] {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-home .league-switch__panel { display: none; }

.page-home #hl-csl:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-csl"],
.page-home #hl-ccl:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-ccl"],
.page-home #hl-cup:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-cup"],
.page-home #hl-wsl:checked ~ .league-switch__panels .league-switch__panel[data-league="hl-wsl"] {
  display: block;
}

.page-home .league-switch__panel {
  padding-top: 0.85rem;
  border-top: 2px solid var(--home-line);
}

.page-home .league-switch__panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.page-home .league-switch__panel-text {
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--mute);
}

/* 前瞻摘要 */
.page-home .home-hero__feed {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.25rem;
  border: 2px solid var(--home-line);
  background: linear-gradient(155deg, rgba(13, 43, 69, 0.92), rgba(6, 21, 34, 0.94));
  box-shadow: var(--shadow-hard);
}

.page-home .home-hero__feed::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 3px;
  background: var(--coral);
}

.page-home .home-hero__feed-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--white);
}

.page-home .home-hero__feed-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--mute);
}

.page-home .home-hero__feed-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), color var(--dur);
}

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

.page-home .home-hero__feed .btn {
  margin-top: 0.35rem;
}

/* ---------- 联赛横向主题带 ---------- */
.page-home .league-band {
  position: relative;
  padding: 3rem 0;
  border-bottom: 2px solid var(--home-line);
  background: linear-gradient(110deg, var(--ink-800) 0%, var(--ink-900) 100%);
  overflow: hidden;
}

.page-home .league-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
}

.page-home .league-band__inner {
  position: relative;
  z-index: 1;
}

.page-home .league-band__head {
  max-width: 42rem;
}

.page-home .league-band__kicker,
.page-home .lookup__kicker,
.page-home .expert__kicker,
.page-home .versions__kicker,
.page-home .assure__kicker,
.page-home .weekend__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-home .league-band__title,
.page-home .lookup__title,
.page-home .expert__title,
.page-home .versions__title,
.page-home .assure__title,
.page-home .weekend__title {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.65rem, 4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--white);
}

.page-home .league-band__text,
.page-home .lookup__text,
.page-home .expert__text,
.page-home .versions__text,
.page-home .assure__text,
.page-home .weekend__text {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--mute);
}

.page-home .league-band__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.page-home .league-band__chip {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--home-line);
  background: rgba(6, 21, 34, 0.55);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--white);
  transition: border-color var(--dur), color var(--dur), background var(--dur), transform var(--dur);
}

.page-home .league-band__chip:hover {
  border-color: var(--cyan);
  color: var(--ink-900);
  background: var(--cyan);
  transform: translateY(-2px);
}

/* ---------- 球队资料速查 ---------- */
.page-home .lookup {
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
}

.page-home .lookup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.page-home .lookup__text {
  max-width: 46ch;
}

.page-home .lookup__ways {
  display: grid;
  gap: 0.7rem;
  margin: 1.6rem 0 1.9rem;
  padding: 0;
  list-style: none;
}

.page-home .lookup__way {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num name"
    "num desc";
  gap: 0.15rem 0.85rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--home-line);
  background: rgba(13, 43, 69, 0.45);
  transition: border-color var(--dur), background var(--dur);
}

.page-home .lookup__way:hover {
  border-color: var(--cyan);
  background: rgba(13, 43, 69, 0.8);
}

.page-home .lookup__way-num {
  grid-area: num;
  align-self: center;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 0.8rem;
}

.page-home .lookup__way-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}

.page-home .lookup__way-desc {
  grid-area: desc;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--mute);
}

.page-home .lookup__side {
  padding: 1.3rem;
  border: 2px solid var(--home-line);
  background: linear-gradient(160deg, rgba(53, 230, 224, 0.07), rgba(6, 21, 34, 0.6));
}

.page-home .lookup__side-title {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-home .lookup__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.page-home .lookup__item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--white);
}

.page-home .lookup__item-num {
  font-size: 0.74rem;
  color: var(--mute);
  flex: none;
}

.page-home .lookup__side-note {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--home-line);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-home .lookup__side-link {
  color: var(--cyan);
  border-bottom: 1px solid rgba(53, 230, 224, 0.45);
}

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

/* ---------- 专家专栏抽屉 ---------- */
.page-home .expert {
  position: relative;
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
  background: linear-gradient(200deg, rgba(10, 34, 56, 0.9), rgba(6, 21, 34, 0.9));
}

.page-home .expert__text {
  max-width: 62ch;
}

.page-home .expert-drawer {
  margin-top: 1.9rem;
  border: 2px solid var(--home-line);
  background: rgba(6, 21, 34, 0.7);
}

.page-home .expert-drawer__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur), border-color var(--dur);
}

.page-home .expert-drawer__trigger::-webkit-details-marker {
  display: none;
}

.page-home .expert-drawer__trigger:hover {
  background: rgba(53, 230, 224, 0.08);
}

.page-home .expert-drawer__trigger-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-home .expert-drawer__trigger-mark {
  font-size: 1.1rem;
  color: var(--coral);
}

.page-home .expert-drawer[open] .expert-drawer__trigger-mark {
  transform: rotate(45deg);
}

.page-home .expert-drawer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  padding: 0 1.15rem 1.25rem;
  border-top: 2px solid var(--home-line);
  padding-top: 1.15rem;
}

.page-home .expert-drawer__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid var(--home-line);
  aspect-ratio: 4 / 3;
}

.page-home .expert-drawer__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

.page-home .expert-drawer__lead {
  margin-top: 0.55rem;
  font-size: 0.93rem;
  line-height: 1.8;
  color: var(--mute);
}

.page-home .expert-drawer__list {
  margin: 1rem 0 1.15rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.page-home .expert-drawer__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--white);
}

.page-home .expert-drawer__dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.52rem;
  background: var(--cyan);
}

/* ---------- 版本公告 ---------- */
.page-home .versions {
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
}

.page-home .versions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.page-home .versions__img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
  border: 2px solid var(--home-line);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-home .ver-tabs {
  position: relative;
  border: 2px solid var(--home-line);
  background: rgba(10, 34, 56, 0.72);
  padding: 1.1rem;
}

.page-home .ver-tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .ver-tabs__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-home .ver-tabs__label {
  cursor: pointer;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--home-line);
  font-size: 0.82rem;
  color: var(--mute);
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}

.page-home .ver-tabs__label:hover {
  border-color: var(--coral);
  color: var(--white);
}

.page-home #ver-380:checked ~ .ver-tabs__labels label[for="ver-380"],
.page-home #ver-376:checked ~ .ver-tabs__labels label[for="ver-376"],
.page-home #ver-372:checked ~ .ver-tabs__labels label[for="ver-372"] {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink-900);
}

.page-home .ver-tabs__panels {
  margin-top: 1.1rem;
}

.page-home .ver-tabs__panel {
  display: none;
  padding-top: 0.2rem;
}

.page-home #ver-380:checked ~ .ver-tabs__panels .ver-tabs__panel[data-ver="ver-380"],
.page-home #ver-376:checked ~ .ver-tabs__panels .ver-tabs__panel[data-ver="ver-376"],
.page-home #ver-372:checked ~ .ver-tabs__panels .ver-tabs__panel[data-ver="ver-372"] {
  display: block;
}

.page-home .ver-tabs__state {
  display: inline-block;
}

.page-home .ver-tabs__panel-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--white);
}

.page-home .ver-tabs__list {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-home .ver-tabs__meta {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--mute);
}

.page-home .ver-tabs__foot {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 2px solid var(--home-line);
}

/* ---------- 品质认证 ---------- */
.page-home .assure {
  padding: 3.25rem 0;
  border-bottom: 2px solid var(--home-line);
  background: linear-gradient(160deg, rgba(11, 44, 68, 0.72), rgba(6, 21, 34, 0.9));
}

.page-home .assure__text {
  max-width: 60ch;
}

.page-home .assure__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 1.9rem 0 1.6rem;
  padding: 0;
  list-style: none;
}

.page-home .assure__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num name"
    "num desc";
  gap: 0.2rem 0.9rem;
  padding: 1rem;
  border-left: 3px solid var(--cyan);
  background: rgba(6, 21, 34, 0.6);
  transition: background var(--dur), border-color var(--dur);
}

.page-home .assure__item:hover {
  background: rgba(53, 230, 224, 0.09);
  border-left-color: var(--coral);
}

.page-home .assure__num {
  grid-area: num;
  align-self: start;
  font-size: 0.78rem;
  color: var(--cyan);
  padding-top: 0.2rem;
}

.page-home .assure__name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--white);
}

.page-home .assure__desc {
  grid-area: desc;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-home .assure__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--cyan);
  border-bottom: 1px solid rgba(53, 230, 224, 0.4);
  transition: border-color var(--dur);
}

.page-home .assure__link:hover {
  border-bottom-color: var(--cyan);
}

/* ---------- 周末路径 ---------- */
.page-home .weekend {
  padding: 3.25rem 0 4rem;
}

.page-home .weekend__text {
  max-width: 48ch;
}

.page-home .weekend__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}

.page-home .weekend__step {
  position: relative;
  padding: 1.25rem 1.15rem 1.35rem;
  border: 2px solid var(--home-line);
  background: rgba(10, 34, 56, 0.62);
  transition: border-color var(--dur), transform var(--dur);
}

.page-home .weekend__step:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
}

.page-home .weekend__step::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: var(--coral);
}

.page-home .weekend__step-num {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--coral);
  text-transform: uppercase;
}

.page-home .weekend__step-title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--white);
}

.page-home .weekend__step-text {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--mute);
}

.page-home .weekend__foot {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 2px solid var(--home-line);
}

.page-home .weekend__foot-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mute);
}

.page-home .weekend__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

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

  .page-home .lookup__way {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "name"
      "desc";
    gap: 0.45rem;
  }

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

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

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

@media (min-width: 960px) {
  .page-home .home-hero {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 4.5rem;
  }

  .page-home .home-hero__cols {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-home .league-band {
    padding: 4rem 0;
  }

  .page-home .lookup,
  .page-home .expert,
  .page-home .versions,
  .page-home .assure {
    padding: 4.25rem 0;
  }

  .page-home .weekend {
    padding: 4.25rem 0 5rem;
  }

  .page-home .lookup__grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: 2rem;
  }

  .page-home .expert-drawer__body {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }

  .page-home .expert-drawer__img {
    aspect-ratio: 4 / 5;
    height: 100%;
  }

  .page-home .versions__grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
    gap: 2.25rem;
  }

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

@media (min-width: 1200px) {
  .page-home .assure__items {
    grid-template-columns: repeat(5, 1fr);
  }

  .page-home .assure__item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "name"
      "desc";
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .league-band__chip,
  .page-home .weekend__step {
    transition: none;
    transform: none;
  }
}