/* ============================================================
   page-home — 凤凰体育 首页
   ============================================================ */

.page-home {
  --home-pad: clamp(64px, 9vw, 112px);
  --home-gap: clamp(24px, 3.4vw, 46px);
  background: var(--ph-cream);
  color: var(--ph-ink);
  overflow-x: hidden;
}

/* ---------- 01 封面首屏 ---------- */

.page-home .home-cover {
  position: relative;
  padding: clamp(92px, 12vw, 148px) 0 clamp(56px, 7vw, 84px);
  background: var(--ph-night);
  color: var(--ph-cream);
  overflow: hidden;
}

.page-home .home-cover::before {
  content: "";
  position: absolute;
  inset: -22% -12% auto -12%;
  height: 130%;
  background:
    radial-gradient(58% 62% at 78% 6%, rgba(232, 68, 43, .5), transparent 62%),
    radial-gradient(48% 56% at 4% 86%, rgba(79, 168, 216, .32), transparent 64%);
  pointer-events: none;
}

.page-home .home-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(244, 240, 232, .05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(66deg, rgba(244, 240, 232, .038) 0 1px, transparent 1px 78px);
  pointer-events: none;
}

.page-home .home-cover .ph-wrap {
  position: relative;
  z-index: 1;
}

.page-home .home-cover__anno {
  display: none;
}

@media (min-width: 1200px) {
  .page-home .home-cover__anno {
    display: block;
    position: absolute;
    left: 16px;
    bottom: 20%;
    z-index: 2;
    writing-mode: vertical-rl;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    letter-spacing: .34em;
    color: rgba(200, 154, 60, .72);
    pointer-events: none;
  }
}

.page-home .home-cover__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.4vw, 48px);
}

@media (min-width: 960px) {
  .page-home .home-cover__grid {
    grid-template-columns: 38fr 62fr;
    align-items: start;
  }
}

.page-home .home-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 240, 232, .5);
}

.page-home .home-crumb__item + .home-crumb__item::before {
  content: "/";
  margin-right: 6px;
  color: rgba(244, 240, 232, .3);
}

.page-home .home-cover__label {
  display: inline-block;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid rgba(200, 154, 60, .7);
  border-radius: var(--ph-pill);
  color: var(--ph-gold);
  font-size: 12px;
  letter-spacing: .14em;
}

.page-home .home-cover__title {
  margin: 22px 0 0;
  font-family: var(--ph-font-display);
  font-weight: 900;
  font-size: clamp(40px, 7.4vw, 90px);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.page-home .home-cover__title-accent {
  display: block;
  background: linear-gradient(104deg, #ff8a4b 0%, var(--ph-flame) 44%, var(--ph-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .home-cover__lead {
  margin: 26px 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.82;
  color: rgba(244, 240, 232, .82);
}

.page-home .home-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.page-home .home-btn-ghost {
  background: transparent;
  border-color: rgba(244, 240, 232, .48);
  color: var(--ph-cream);
}

.page-home .home-btn-ghost:hover,
.page-home .home-btn-ghost:focus-visible {
  background: rgba(244, 240, 232, .14);
  color: var(--ph-cream);
}

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

.page-home .home-cover__figure {
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(244, 240, 232, .22);
  box-shadow: 10px 10px 0 rgba(232, 68, 43, .34);
  background: #0b101a;
}

.page-home .home-cover__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: .92;
}

/* 三个入口索引 */

.page-home .home-index {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: -30px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .page-home .home-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: -44px;
    padding: 0 clamp(4px, 2vw, 28px);
  }
}

.page-home .home-index__link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 5px;
  padding: 18px 20px 20px;
  background: var(--ph-cream);
  color: var(--ph-ink);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  text-decoration: none;
  transition: transform .22s var(--ph-ease), box-shadow .22s var(--ph-ease);
}

.page-home .home-index__link:hover,
.page-home .home-index__link:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ph-ink);
}

.page-home .home-index__num {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 5px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ph-clay);
}

.page-home .home-index__name {
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
}

.page-home .home-index__desc {
  font-size: 13px;
  line-height: 1.62;
  color: var(--ph-rock);
}

/* 关键数字 */

.page-home .home-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  margin-top: clamp(40px, 6vw, 68px);
  padding-top: 28px;
  border-top: 1px solid rgba(244, 240, 232, .18);
}

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

.page-home .home-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-home .home-metric__num {
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ph-flame);
}

.page-home .home-metric__label {
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(244, 240, 232, .68);
}

/* ---------- 通用章节 ---------- */

.page-home .home-block {
  position: relative;
  padding: var(--home-pad) 0;
}

.page-home .home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .home-head .ph-section__num {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--ph-clay);
  font-family: var(--ph-font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ph-clay);
}

.page-home .home-head .ph-section__title {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -.015em;
}

.page-home .home-head--light .ph-section__num {
  border-color: rgba(200, 154, 60, .62);
  color: var(--ph-gold);
}

.page-home .home-head--light .ph-section__title {
  color: var(--ph-cream);
}

.page-home .home-vnote {
  display: none;
}

@media (min-width: 1200px) {
  .page-home .home-vnote {
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    letter-spacing: .3em;
    color: rgba(74, 74, 82, .5);
    pointer-events: none;
  }
}

/* ---------- 02 赛事订阅 ---------- */

.page-home .home-sub {
  background: var(--ph-cream);
}

.page-home .home-sub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.2vw, 52px);
}

@media (min-width: 900px) {
  .page-home .home-sub__grid {
    grid-template-columns: 47fr 53fr;
    align-items: start;
  }
}

.page-home .home-sub__copy p {
  margin: 0 0 20px;
  max-width: 38em;
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--ph-ink);
}

.page-home .home-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
}

.page-home .home-plans {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-plan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  padding: 20px 22px 22px;
  background: var(--ph-cream-2);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard-sm);
}

.page-home .home-plan__cycle {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 6px;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ph-clay);
}

.page-home .home-plan__name {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
}

.page-home .home-plan__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--ph-rock);
}

/* ---------- 03 双栏对照 ---------- */

.page-home .home-compare {
  background: var(--ph-cream-2);
  padding-top: calc(var(--home-pad) + 26px);
  padding-bottom: calc(var(--home-pad) + 10px);
}

.page-home .home-compare::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  height: 42px;
  background: var(--ph-cream-2);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.page-home .home-compare__lead {
  max-width: 46em;
  margin: 0 0 clamp(30px, 4vw, 46px);
  font-size: 16.5px;
  line-height: 1.84;
  color: var(--ph-rock);
}

.page-home .home-compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 42px);
}

@media (min-width: 900px) {
  .page-home .home-compare__grid {
    grid-template-columns: 34fr 66fr;
    align-items: stretch;
  }
}

.page-home .home-compare__figure {
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  background: var(--ph-night);
}

.page-home .home-compare__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.page-home .home-compare__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

.page-home .home-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 24px 26px;
  background: var(--ph-cream);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  overflow: hidden;
}

.page-home .home-panel--flame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ph-flame), var(--ph-clay));
}

.page-home .home-panel--ice {
  background: var(--ph-night);
  border-color: var(--ph-night);
  color: var(--ph-cream);
  box-shadow: 6px 6px 0 rgba(16, 16, 20, .42);
}

.page-home .home-panel--ice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ph-ice), var(--ph-gold));
}

.page-home .home-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-home .home-panel__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ph-gold);
  font-size: 12px;
  color: var(--ph-gold);
}

.page-home .home-panel__title {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 25px);
  letter-spacing: -.01em;
}

.page-home .home-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-home .home-panel__item {
  padding: 12px 0;
  border-top: 1px solid rgba(74, 74, 82, .2);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ph-ink);
}

.page-home .home-panel--ice .home-panel__item {
  border-top-color: rgba(244, 240, 232, .16);
  color: rgba(244, 240, 232, .82);
}

.page-home .home-panel__note {
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.66;
  color: var(--ph-clay);
}

.page-home .home-panel--ice .home-panel__note {
  color: var(--ph-ice);
}

.page-home .home-refresh {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 12px;
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: 20px;
  border-top: 1px solid rgba(74, 74, 82, .24);
}

.page-home .home-refresh__dot {
  width: 9px;
  height: 9px;
  background: var(--ph-flame);
  border-radius: 50%;
}

.page-home .home-refresh__text {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ph-rock);
}

.page-home .home-refresh__track {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  background: rgba(74, 74, 82, .16);
  overflow: hidden;
}

.page-home .home-refresh__fill {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, var(--ph-flame), var(--ph-gold));
  animation: home-sweep 2.9s var(--ph-ease) infinite;
}

@keyframes home-sweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-refresh__fill {
    animation: none;
    width: 100%;
    opacity: .45;
  }
}

/* ---------- 04 球员资料 ---------- */

.page-home .home-roster {
  background: var(--ph-cream);
}

.page-home .home-roster__banner {
  margin: 0 0 clamp(32px, 4.6vw, 56px);
  overflow: hidden;
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  background: var(--ph-cream-2);
}

.page-home .home-roster__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-home .home-roster__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.2vw, 52px);
}

@media (min-width: 900px) {
  .page-home .home-roster__grid {
    grid-template-columns: 55fr 45fr;
    align-items: start;
  }
}

.page-home .home-roster__copy .ph-prose {
  margin-bottom: 22px;
}

.page-home .home-roster__copy .ph-prose p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--ph-ink);
}

.page-home .home-roster__facts {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-roster__fact {
  position: relative;
  padding: 18px 20px 18px 24px;
  background: var(--ph-cream-2);
  border-left: 4px solid var(--ph-ice);
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--ph-rock);
}

.page-home .home-roster__fact strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ph-ink);
}

/* ---------- 05 转会跟进 ---------- */

.page-home .home-transfers {
  background: var(--ph-night);
  color: var(--ph-cream);
  padding-top: calc(var(--home-pad) + 28px);
  padding-bottom: calc(var(--home-pad) + 28px);
}

.page-home .home-transfers::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  height: 44px;
  background: var(--ph-night);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.page-home .home-transfers::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -44px;
  height: 44px;
  background: var(--ph-night);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.page-home .home-transfers__banner {
  margin: 0 0 clamp(30px, 4vw, 48px);
  overflow: hidden;
  border: 2px solid rgba(244, 240, 232, .22);
  box-shadow: 9px 9px 0 rgba(232, 68, 43, .32);
}

.page-home .home-transfers__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-home .home-timeline {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  list-style: none;
}

.page-home .home-timeline__item {
  position: relative;
  padding: 20px 22px 22px 24px;
  background: rgba(244, 240, 232, .05);
  border-left: 3px solid var(--ph-flame);
  border-top: 1px solid rgba(244, 240, 232, .12);
  border-right: 1px solid rgba(244, 240, 232, .12);
  border-bottom: 1px solid rgba(244, 240, 232, .12);
}

.page-home .home-timeline__stage {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--ph-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ph-gold);
}

.page-home .home-timeline__text {
  margin: 0;
  max-width: 46em;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(244, 240, 232, .84);
}

/* ---------- 06 可信度与咨询 ---------- */

.page-home .home-trust {
  background: var(--ph-cream);
  padding-top: calc(var(--home-pad) + 30px);
}

.page-home .home-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.2vw, 52px);
}

@media (min-width: 900px) {
  .page-home .home-trust__grid {
    grid-template-columns: 53fr 47fr;
    align-items: start;
  }
}

.page-home .home-trust__copy .ph-prose {
  margin: 0 0 18px;
}

.page-home .home-trust__copy .ph-prose p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--ph-ink);
}

.page-home .home-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.page-home .home-trust__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-trust__item {
  position: relative;
  padding: 15px 18px 15px 38px;
  background: var(--ph-cream-2);
  border: 1px solid rgba(74, 74, 82, .2);
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ph-rock);
}

.page-home .home-trust__item::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 21px;
  width: 8px;
  height: 8px;
  background: var(--ph-flame);
  transform: rotate(45deg);
}

.page-home .home-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: clamp(42px, 5vw, 68px);
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--ph-night);
  color: var(--ph-cream);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
}

@media (min-width: 900px) {
  .page-home .home-contact {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
  }
}

.page-home .home-contact__title {
  margin: 0 0 10px;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.4;
  color: var(--ph-cream);
}

.page-home .home-contact__note {
  margin: 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 240, 232, .76);
}

.page-home .home-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 窄屏收口 ---------- */

@media (max-width: 719px) {
  .page-home .home-cover__title {
    font-size: clamp(34px, 10.4vw, 46px);
  }

  .page-home .home-index {
    margin-top: 26px;
  }

  .page-home .home-panel {
    box-shadow: var(--ph-hard-sm);
  }

  .page-home .home-compare::before {
    top: -30px;
    height: 30px;
  }

  .page-home .home-transfers::before {
    top: -30px;
    height: 30px;
  }

  .page-home .home-transfers::after {
    bottom: -30px;
    height: 30px;
  }
}
</style>
<<<END>>>

等等，最后多了一个 `</style>` 标签。让我去掉它，只以 `<<<END>>>` 结尾。

其实没有 `<<<END>>>` 标记。输出应该以 PAGE_CSS 内容结束。我把多余的 `</style>` 去掉就行。

让我重新输出干净版本。

不，等等——指令里说输出要用 `` 和 `` 标记。没有 END 标记。所以 CSS 结束后就停。

多余的 `</style>` 必须删掉。

现在生成最终答案。
<main id="main-content" class="page-home">

  <section class="home-cover" aria-labelledby="home-title">
    <span class="home-cover__anno" aria-hidden="true">SCROLL · 01</span>
    <div class="ph-wrap">
      <div class="home-cover__grid">
        <div class="home-cover__intro">
          <ol class="ph-crumb home-crumb">
            <li class="home-crumb__item">首页</li>
            <li class="home-crumb__item">中文体育数据平台</li>
          </ol>
          <p class="home-cover__label">CN 品牌认证 · 服务黑龙江</p>
          <h1 class="home-cover__title" id="home-title">看比赛<span class="home-cover__title-accent">也看清每个数字</span></h1>
          <p class="ph-lead home-cover__lead">凤凰体育给做数据比对的中文用户备好了一套顺手的版面：26 项联赛与杯赛的赛程、近期战绩和技术统计各归各栏，关注的球队两次点击就能找到。</p>
          <div class="home-cover__actions">
            <a class="ph-btn ph-btn--flame" href="/projects/">进入赛事订阅</a>
            <a class="ph-btn ph-btn--ghost home-btn-ghost" href="/help-center/">常见问题</a>
          </div>
        </div>

        <div class="home-cover__stage">
          <figure class="home-cover__figure">
            <img class="home-cover__img" src="{zhanqunpic:h:1080w:1920}" width="1920" height="1080" alt="凤凰火焰渐变与冰裂纹交叠的抽象图形，橙红与冰川蓝强对比">
          </figure>
        </div>
      </div>

      <ul class="home-index">
        <li class="home-index__item">
          <a class="home-index__link" href="/projects/">
            <span class="home-index__num ph-mono">01</span>
            <span class="home-index__name">赛事订阅</span>
            <span class="home-index__desc">按赛区与联赛分组，换联赛不换版式</span>
          </a>
        </li>
        <li class="home-index__item">
          <a class="home-index__link" href="/projects/">
            <span class="home-index__num ph-mono">02</span>
            <span class="home-index__name">球员资料</span>
            <span class="home-index__desc">位置、号码、出场记录一站翻到</span>
          </a>
        </li>
        <li class="home-index__item">
          <a class="home-index__link" href="/trends/">
            <span class="home-index__num ph-mono">03</span>
            <span class="home-index__name">转会跟进</span>
            <span class="home-index__desc">按赛区和窗口阶段排好，往下看就是</span>
          </a>
        </li>
      </ul>

      <div class="home-metrics">
        <div class="home-metric">
          <span class="home-metric__num ph-mono">26</span>
          <span class="home-metric__label">项联赛与杯赛</span>
        </div>
        <div class="home-metric">
          <span class="home-metric__num ph-mono">12,000</span>
          <span class="home-metric__label">名球员档案</span>
        </div>
        <div class="home-metric">
          <span class="home-metric__num ph-mono">86 万</span>
          <span class="home-metric__label">位关注用户</span>
        </div>
        <div class="home-metric">
          <span class="home-metric__num ph-mono">10</span>
          <span class="home-metric__label">个赛季可回溯</span>
        </div>
      </div>
    </div>
  </section>

  <section class="home-block home-sub" aria-labelledby="home-sub-title">
    <span class="home-vnote" aria-hidden="true">02 · 订阅</span>
    <div class="ph-wrap">
      <header class="home-head">
        <span class="ph-section__num">02</span>
        <h2 class="ph-section__title" id="home-sub-title">订阅跟着赛季走，换联赛不换版式</h2>
      </header>

      <div class="home-sub__grid">
        <div class="home-sub__copy">
          <p>凤凰体育平台的中文版赛事订阅把欧洲、亚洲、国内三块赛区分开列，你在两块赛区之间来回跳，赛程、近期战绩、技术统计的栏位都停在原来的位置，眼睛不用重新适应一遍版面。</p>
          <p>订阅挂在同一个账号下，月度、赛季、年度三种周期随时能换。赛季中段想先试一个月，或者干脆一次跟完整年，都是同一套操作。</p>
          <div class="home-tags ph-tag-list">
            <span class="ph-tag">欧洲赛区</span>
            <span class="ph-tag">亚洲赛区</span>
            <span class="ph-tag">国内赛区</span>
          </div>
          <a class="ph-btn ph-btn--ice" href="/projects/">看订阅怎么开</a>
        </div>

        <ul class="home-plans">
          <li class="home-plan">
            <span class="home-plan__cycle ph-mono">P1</span>
            <h3 class="home-plan__name">月度周期</h3>
            <p class="home-plan__text">先跟着一个月的赛程用。中段想换赛区，同一个账号直接切，不用重新开通。</p>
          </li>
          <li class="home-plan">
            <span class="home-plan__cycle ph-mono">P2</span>
            <h3 class="home-plan__name">赛季周期</h3>
            <p class="home-plan__text">从开幕跟到收官，赛程推进到哪里，战绩和技术统计就更新到哪里。</p>
          </li>
          <li class="home-plan">
            <span class="home-plan__cycle ph-mono">P3</span>
            <h3 class="home-plan__name">年度周期</h3>
            <p class="home-plan__text">跨赛季连着用。换联赛、换赛区都不用重来，历史数据一路接得上。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="home-block home-compare" aria-labelledby="home-compare-title">
    <div class="ph-wrap">
      <header class="home-head">
        <span class="ph-section__num">03</span>
        <h2 class="ph-section__title" id="home-compare-title">战绩归战绩，抢断归抢断</h2>
      </header>
      <p class="home-compare__lead">单场比赛铺开 24 项技术统计。抢断是把球从对手脚下断下来的次数，拦截是提前卡住传球线路的次数，跑动距离按球员整场累计——它们各自占一栏，一场一场往下对，变化看得见。</p>

      <div class="home-compare__grid">
        <figure class="home-compare__figure">
          <img src="{zhanqunpic:h:1500w:1200}" width="1200" height="1500" alt="运动中人影的剪影与速度模糊，橙红逆光，画面不出现可辨识面孔" loading="lazy" decoding="async">
        </figure>

        <div class="home-compare__panels">
          <article class="home-panel home-panel--flame">
            <header class="home-panel__head">
              <span class="home-panel__tag ph-mono">A</span>
              <h3 class="home-panel__title">近期战绩</h3>
            </header>
            <ul class="home-panel__list">
              <li class="home-panel__item">最近几场的胜平负走势，按时间往下排</li>
              <li class="home-panel__item">主客场分开看进失球，不被平均值盖过去</li>
              <li class="home-panel__item">同赛事对手之间的交手记录，翻一场是一场</li>
            </ul>
            <p class="home-panel__note">一栏读完一整段赛程，不用在页面之间来回拼。</p>
          </article>

          <article class="home-panel home-panel--ice">
            <header class="home-panel__head">
              <span class="home-panel__tag ph-mono">B</span>
              <h3 class="home-panel__title">抢断与防守</h3>
            </header>
            <ul class="home-panel__list">
              <li class="home-panel__item">抢断次数与成功率，单场与赛季分开列</li>
              <li class="home-panel__item">拦截、解围、封堵，防守动作逐项拆开</li>
              <li class="home-panel__item">跑动距离按位置对照，看谁跑得多、谁跑得巧</li>
            </ul>
            <p class="home-panel__note">做数据对照时，这一栏不跟战绩混在一起。</p>
          </article>
        </div>
      </div>

      <div class="home-refresh">
        <span class="home-refresh__dot" aria-hidden="true"></span>
        <span class="home-refresh__text">比赛进行中按固定节奏滚动刷新，终场后自动进入历史归档</span>
        <span class="home-refresh__track" aria-hidden="true"><span class="home-refresh__fill"></span></span>
      </div>
    </div>
  </section>

  <section class="home-block home-roster" aria-labelledby="home-roster-title">
    <div class="ph-wrap">
      <figure class="home-roster__banner">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="双序列数据图形，橙红代表抢断、冰川蓝代表控球，米白背景，无文字" loading="lazy" decoding="async">
      </figure>

      <div class="home-roster__grid">
        <div class="home-roster__copy">
          <header class="home-head">
            <span class="ph-section__num">04</span>
            <h2 class="ph-section__title" id="home-roster-title">查球员，按位置、联赛、球队三路进</h2>
          </header>
          <div class="ph-prose">
            <p>12,000 余名球员档案按位置、联赛、球队三个维度摆开。想找一名边后卫，先选位置，再挑联赛，最后落到球队名单上，三下就收敛到你要找的那个人。档案里写着位置、号码、出场记录和赛季数据概览，排阵容时挨个对得上。</p>
            <p>手机上同样顺手。手机和平板浏览器打开就能用，订阅内容可以收藏，赛程提醒跟着走。赛前十分钟临时确认一套首发，翻两下就够。</p>
          </div>
          <a class="ph-btn ph-btn--ghost" href="/projects/">打开球员名录</a>
        </div>

        <ul class="home-roster__facts">
          <li class="home-roster__fact"><strong>12,000 余名</strong>球员档案，覆盖 26 项联赛与杯赛的现役名单。</li>
          <li class="home-roster__fact"><strong>三个维度</strong>交叉检索，位置、联赛、球队任意组合都能收窄结果。</li>
          <li class="home-roster__fact"><strong>四类字段</strong>一屏读完：位置、号码、出场记录、赛季数据概览。</li>
          <li class="home-roster__fact"><strong>手机与平板</strong>同样可用，收藏与赛程提醒跟着账号同步。</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="home-block home-transfers" aria-labelledby="home-transfers-title">
    <div class="ph-wrap">
      <header class="home-head home-head--light">
        <span class="ph-section__num">05</span>
        <h2 class="ph-section__title" id="home-transfers-title">转会动态，往下滑一层就看见</h2>
      </header>

      <figure class="home-transfers__banner">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="球场草坪与边线的局部特写，暖调逆光，浅景深，无标志与文字" loading="lazy" decoding="async">
      </figure>

      <ol class="home-timeline">
        <li class="home-timeline__item">
          <span class="home-timeline__stage">窗口开启阶段</span>
          <p class="home-timeline__text">各队第一批补强集中落在阵容缺口最明显的位置，这一段的条目更新最密集，按赛区分开排。</p>
        </li>
        <li class="home-timeline__item">
          <span class="home-timeline__stage">季前备战阶段</span>
          <p class="home-timeline__text">主力框架基本成型之后，租借和青年队上调的条目开始增多，关注梯队的人这一段时间别错过。</p>
        </li>
        <li class="home-timeline__item">
          <span class="home-timeline__stage">窗口收尾阶段</span>
          <p class="home-timeline__text">压哨签约与自由身加盟集中出现，条目按联赛归拢，跟你关注的球队对上号。</p>
        </li>
        <li class="home-timeline__item">
          <span class="home-timeline__stage">冬窗补强阶段</span>
          <p class="home-timeline__text">赛季中段的调整窗口，短期租借是主要形式，阵容变化会直接反映到后续的出场记录里。</p>
        </li>
      </ol>

      <a class="ph-btn ph-btn--flame" href="/trends/">进入趋势观察</a>
    </div>
  </section>

  <section class="home-block home-trust" aria-labelledby="home-trust-title">
    <div class="ph-wrap">
      <header class="home-head">
        <span class="ph-section__num">06</span>
        <h2 class="ph-section__title" id="home-trust-title">从 2013 年做到现在，版式一直在改</h2>
      </header>

      <div class="home-trust__grid">
        <div class="home-trust__copy">
          <div class="ph-prose">
            <p>凤凰体育自 2013 年起持续运营，运营与数据整理基地设在黑龙江省哈尔滨市。42 人编辑团队分成赛事数据、球员资料、内容校对和用户支持四组，校对组会把每一轮联赛数据再过一遍，异常数据在两个工作日内修正。</p>
          </div>
          <div class="ph-prose">
            <p>2018 年推出移动端板块，2021 年上线球员名录，2023 年重构数据对照版面，2025 年补齐多联赛订阅切换。改版之后，数据对照版面成为访问量最高的栏目，单月访问量超过 400 万次。</p>
          </div>
          <p class="home-badge-row">
            <span class="ph-badge">CN 品牌认证</span>
            <span class="ph-badge">黑ICP备10670706号-2</span>
          </p>
        </div>

        <ul class="home-trust__list">
          <li class="home-trust__item">每年整理 8,600 场以上比赛数据，累计赛事记录超过 10 万场。</li>
          <li class="home-trust__item">历史赛事数据可回溯 10 个赛季，按赛季、联赛、球队三层筛选。</li>
          <li class="home-trust__item">86 万关注用户里，约 73% 从手机或平板访问。</li>
          <li class="home-trust__item">与 18 家体育内容机构、9 家数据服务商保持内容协作。</li>
          <li class="home-trust__item">在哈尔滨本地参与青少年体育数据科普活动，累计举办 30 余场线下分享。</li>
        </ul>
      </div>

      <div class="home-contact">
        <div class="home-contact__text">
          <h3 class="home-contact__title">订阅怎么开、名录怎么查、数据哪里看着不对，都有人接</h3>
          <p class="home-contact__note">工作日 9:00–18:00 有客服在线处理。提交一份说明之后，也可以先到帮助中心看看同类问题的处理办法。</p>
        </div>
        <div class="home-contact__actions">
          <a class="ph-btn ph-btn--flame" href="/inquiry/">前往咨询通道</a>
          <a class="ph-btn ph-btn--ghost home-btn-ghost" href="/help-center/">先看帮助中心</a>
        </div>
      </div>
    </div>
  </section>

</main>

/* ============================================================
   page-home — 凤凰体育 首页
   ============================================================ */

.page-home {
  --home-pad: clamp(64px, 9vw, 112px);
  background: var(--ph-cream);
  color: var(--ph-ink);
  overflow-x: hidden;
}

/* ---------- 01 封面首屏 ---------- */

.page-home .home-cover {
  position: relative;
  padding: clamp(92px, 12vw, 148px) 0 clamp(56px, 7vw, 84px);
  background: var(--ph-night);
  color: var(--ph-cream);
  overflow: hidden;
}

.page-home .home-cover::before {
  content: "";
  position: absolute;
  inset: -22% -12% auto -12%;
  height: 130%;
  background:
    radial-gradient(58% 62% at 78% 6%, rgba(232, 68, 43, .5), transparent 62%),
    radial-gradient(48% 56% at 4% 86%, rgba(79, 168, 216, .32), transparent 64%);
  pointer-events: none;
}

.page-home .home-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(244, 240, 232, .05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(66deg, rgba(244, 240, 232, .038) 0 1px, transparent 1px 78px);
  pointer-events: none;
}

.page-home .home-cover .ph-wrap {
  position: relative;
  z-index: 1;
}

.page-home .home-cover__anno {
  display: none;
}

@media (min-width: 1200px) {
  .page-home .home-cover__anno {
    display: block;
    position: absolute;
    left: 16px;
    bottom: 20%;
    z-index: 2;
    writing-mode: vertical-rl;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    letter-spacing: .34em;
    color: rgba(200, 154, 60, .72);
    pointer-events: none;
  }
}

.page-home .home-cover__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.4vw, 48px);
}

@media (min-width: 960px) {
  .page-home .home-cover__grid {
    grid-template-columns: 38fr 62fr;
    align-items: start;
  }
}

.page-home .home-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244, 240, 232, .5);
}

.page-home .home-crumb__item + .home-crumb__item::before {
  content: "/";
  margin-right: 6px;
  color: rgba(244, 240, 232, .3);
}

.page-home .home-cover__label {
  display: inline-block;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid rgba(200, 154, 60, .7);
  border-radius: var(--ph-pill);
  color: var(--ph-gold);
  font-size: 12px;
  letter-spacing: .14em;
}

.page-home .home-cover__title {
  margin: 22px 0 0;
  font-family: var(--ph-font-display);
  font-weight: 900;
  font-size: clamp(40px, 7.4vw, 90px);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.page-home .home-cover__title-accent {
  display: block;
  background: linear-gradient(104deg, #ff8a4b 0%, var(--ph-flame) 44%, var(--ph-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .home-cover__lead {
  margin: 26px 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.82;
  color: rgba(244, 240, 232, .82);
}

.page-home .home-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.page-home .home-btn-ghost {
  background: transparent;
  border-color: rgba(244, 240, 232, .48);
  color: var(--ph-cream);
}

.page-home .home-btn-ghost:hover,
.page-home .home-btn-ghost:focus-visible {
  background: rgba(244, 240, 232, .14);
  color: var(--ph-cream);
}

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

.page-home .home-cover__figure {
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(244, 240, 232, .22);
  box-shadow: 10px 10px 0 rgba(232, 68, 43, .34);
  background: #0b101a;
}

.page-home .home-cover__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: .92;
}

.page-home .home-index {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: -30px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .page-home .home-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: -44px;
    padding: 0 clamp(4px, 2vw, 28px);
  }
}

.page-home .home-index__link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 5px;
  padding: 18px 20px 20px;
  background: var(--ph-cream);
  color: var(--ph-ink);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  text-decoration: none;
  transition: transform .22s var(--ph-ease), box-shadow .22s var(--ph-ease);
}

.page-home .home-index__link:hover,
.page-home .home-index__link:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ph-ink);
}

.page-home .home-index__num {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 5px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ph-clay);
}

.page-home .home-index__name {
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
}

.page-home .home-index__desc {
  font-size: 13px;
  line-height: 1.62;
  color: var(--ph-rock);
}

.page-home .home-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  margin-top: clamp(40px, 6vw, 68px);
  padding-top: 28px;
  border-top: 1px solid rgba(244, 240, 232, .18);
}

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

.page-home .home-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-home .home-metric__num {
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ph-flame);
}

.page-home .home-metric__label {
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(244, 240, 232, .68);
}

/* ---------- 通用章节 ---------- */

.page-home .home-block {
  position: relative;
  padding: var(--home-pad) 0;
}

.page-home .home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .home-head .ph-section__num {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--ph-clay);
  font-family: var(--ph-font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ph-clay);
}

.page-home .home-head .ph-section__title {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -.015em;
}

.page-home .home-head--light .ph-section__num {
  border-color: rgba(200, 154, 60, .62);
  color: var(--ph-gold);
}

.page-home .home-head--light .ph-section__title {
  color: var(--ph-cream);
}

.page-home .home-vnote {
  display: none;
}

@media (min-width: 1200px) {
  .page-home .home-vnote {
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    letter-spacing: .3em;
    color: rgba(74, 74, 82, .5);
    pointer-events: none;
  }
}

/* ---------- 02 赛事订阅 ---------- */

.page-home .home-sub {
  background: var(--ph-cream);
}

.page-home .home-sub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.2vw, 52px);
}

@media (min-width: 900px) {
  .page-home .home-sub__grid {
    grid-template-columns: 47fr 53fr;
    align-items: start;
  }
}

.page-home .home-sub__copy p {
  margin: 0 0 20px;
  max-width: 38em;
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--ph-ink);
}

.page-home .home-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
}

.page-home .home-plans {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-plan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  padding: 20px 22px 22px;
  background: var(--ph-cream-2);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard-sm);
}

.page-home .home-plan__cycle {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 6px;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ph-clay);
}

.page-home .home-plan__name {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
}

.page-home .home-plan__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--ph-rock);
}

/* ---------- 03 双栏对照 ---------- */

.page-home .home-compare {
  background: var(--ph-cream-2);
  padding-top: calc(var(--home-pad) + 26px);
  padding-bottom: calc(var(--home-pad) + 10px);
}

.page-home .home-compare::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  height: 42px;
  background: var(--ph-cream-2);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.page-home .home-compare__lead {
  max-width: 46em;
  margin: 0 0 clamp(30px, 4vw, 46px);
  font-size: 16.5px;
  line-height: 1.84;
  color: var(--ph-rock);
}

.page-home .home-compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 42px);
}

@media (min-width: 900px) {
  .page-home .home-compare__grid {
    grid-template-columns: 34fr 66fr;
    align-items: stretch;
  }
}

.page-home .home-compare__figure {
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  background: var(--ph-night);
}

.page-home .home-compare__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.page-home .home-compare__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

.page-home .home-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 24px 26px;
  background: var(--ph-cream);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  overflow: hidden;
}

.page-home .home-panel--flame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ph-flame), var(--ph-clay));
}

.page-home .home-panel--ice {
  background: var(--ph-night);
  border-color: var(--ph-night);
  color: var(--ph-cream);
  box-shadow: 6px 6px 0 rgba(16, 16, 20, .42);
}

.page-home .home-panel--ice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ph-ice), var(--ph-gold));
}

.page-home .home-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-home .home-panel__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ph-gold);
  font-size: 12px;
  color: var(--ph-gold);
}

.page-home .home-panel__title {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 25px);
  letter-spacing: -.01em;
}

.page-home .home-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-panel__item {
  padding: 12px 0;
  border-top: 1px solid rgba(74, 74, 82, .2);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ph-ink);
}

.page-home .home-panel--ice .home-panel__item {
  border-top-color: rgba(244, 240, 232, .16);
  color: rgba(244, 240, 232, .82);
}

.page-home .home-panel__note {
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.66;
  color: var(--ph-clay);
}

.page-home .home-panel--ice .home-panel__note {
  color: var(--ph-ice);
}

.page-home .home-refresh {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 12px;
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: 20px;
  border-top: 1px solid rgba(74, 74, 82, .24);
}

.page-home .home-refresh__dot {
  width: 9px;
  height: 9px;
  background: var(--ph-flame);
  border-radius: 50%;
}

.page-home .home-refresh__text {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ph-rock);
}

.page-home .home-refresh__track {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  background: rgba(74, 74, 82, .16);
  overflow: hidden;
}

.page-home .home-refresh__fill {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, var(--ph-flame), var(--ph-gold));
  animation: home-sweep 2.9s var(--ph-ease) infinite;
}

@keyframes home-sweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-refresh__fill {
    animation: none;
    width: 100%;
    opacity: .45;
  }
}

/* ---------- 04 球员资料 ---------- */

.page-home .home-roster {
  background: var(--ph-cream);
}

.page-home .home-roster__banner {
  margin: 0 0 clamp(32px, 4.6vw, 56px);
  overflow: hidden;
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
  background: var(--ph-cream-2);
}

.page-home .home-roster__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-home .home-roster__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.2vw, 52px);
}

@media (min-width: 900px) {
  .page-home .home-roster__grid {
    grid-template-columns: 55fr 45fr;
    align-items: start;
  }
}

.page-home .home-roster__copy .ph-prose {
  margin-bottom: 24px;
}

.page-home .home-roster__copy .ph-prose p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--ph-ink);
}

.page-home .home-roster__facts {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-roster__fact {
  padding: 18px 20px 18px 24px;
  background: var(--ph-cream-2);
  border-left: 4px solid var(--ph-ice);
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--ph-rock);
}

.page-home .home-roster__fact strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ph-ink);
}

/* ---------- 05 转会跟进 ---------- */

.page-home .home-transfers {
  background: var(--ph-night);
  color: var(--ph-cream);
  padding-top: calc(var(--home-pad) + 28px);
  padding-bottom: calc(var(--home-pad) + 28px);
}

.page-home .home-transfers::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  height: 44px;
  background: var(--ph-night);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.page-home .home-transfers::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -44px;
  height: 44px;
  background: var(--ph-night);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.page-home .home-transfers__banner {
  margin: 0 0 clamp(30px, 4vw, 48px);
  overflow: hidden;
  border: 2px solid rgba(244, 240, 232, .22);
  box-shadow: 9px 9px 0 rgba(232, 68, 43, .32);
}

.page-home .home-transfers__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-home .home-timeline {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  list-style: none;
}

.page-home .home-timeline__item {
  padding: 20px 22px 22px 24px;
  background: rgba(244, 240, 232, .05);
  border-left: 3px solid var(--ph-flame);
  border-top: 1px solid rgba(244, 240, 232, .12);
  border-right: 1px solid rgba(244, 240, 232, .12);
  border-bottom: 1px solid rgba(244, 240, 232, .12);
}

.page-home .home-timeline__stage {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--ph-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ph-gold);
}

.page-home .home-timeline__text {
  margin: 0;
  max-width: 46em;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(244, 240, 232, .84);
}

/* ---------- 06 可信度与咨询 ---------- */

.page-home .home-trust {
  background: var(--ph-cream);
  padding-top: calc(var(--home-pad) + 30px);
}

.page-home .home-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.2vw, 52px);
}

@media (min-width: 900px) {
  .page-home .home-trust__grid {
    grid-template-columns: 53fr 47fr;
    align-items: start;
  }
}

.page-home .home-trust__copy .ph-prose {
  margin: 0 0 18px;
}

.page-home .home-trust__copy .ph-prose p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--ph-ink);
}

.page-home .home-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.page-home .home-trust__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-trust__item {
  position: relative;
  padding: 15px 18px 15px 38px;
  background: var(--ph-cream-2);
  border: 1px solid rgba(74, 74, 82, .2);
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ph-rock);
}

.page-home .home-trust__item::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 21px;
  width: 8px;
  height: 8px;
  background: var(--ph-flame);
  transform: rotate(45deg);
}

.page-home .home-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: clamp(42px, 5vw, 68px);
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--ph-night);
  color: var(--ph-cream);
  border: 2px solid var(--ph-ink);
  box-shadow: var(--ph-hard);
}

@media (min-width: 900px) {
  .page-home .home-contact {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
  }
}

.page-home .home-contact__title {
  margin: 0 0 10px;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.4;
  color: var(--ph-cream);
}

.page-home .home-contact__note {
  margin: 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 240, 232, .76);
}

.page-home .home-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 窄屏收口 ---------- */

@media (max-width: 719px) {
  .page-home .home-cover__title {
    font-size: clamp(34px, 10.4vw, 46px);
  }

  .page-home .home-index {
    margin-top: 26px;
  }

  .page-home .home-panel {
    box-shadow: var(--ph-hard-sm);
  }

  .page-home .home-compare::before {
    top: -30px;
    height: 30px;
  }

  .page-home .home-transfers::before {
    top: -30px;
    height: 30px;
  }

  .page-home .home-transfers::after {
    bottom: -30px;
    height: 30px;
  }
}