.page-home {
  --home-grid-line: rgba(185, 196, 206, 0.04);
  --home-card: rgba(16, 42, 67, 0.72);
}

.page-home .section {
  padding: clamp(48px, 6.5vw, 88px) 0;
}

.page-home .section-head {
  margin-bottom: clamp(20px, 3vw, 32px);
  max-width: 720px;
}

.page-home .lead {
  margin-top: 14px;
  max-width: 38em;
}

/* ---------- 章节索引（宽屏右缘） ---------- */
.page-home .rail-index {
  display: none;
}

.page-home .rail-index .chapter-link__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--orange);
  opacity: 0.8;
}

@media (min-width: 1440px) {
  .page-home .rail-index {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 20;
    width: 116px;
  }

  .page-home .rail-index .chapter-link {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 6px 8px;
    border-left: 2px solid var(--silver-line);
    color: var(--silver-dim);
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .page-home .rail-index .chapter-link:hover {
    color: var(--ink);
    border-left-color: var(--silver);
  }

  .page-home .rail-index .chapter-link[aria-current="true"] {
    color: var(--orange);
    border-left-color: var(--orange);
  }
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  padding: 20px 0 clamp(40px, 6vw, 72px);
  background:
    repeating-linear-gradient(90deg, var(--home-grid-line) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, var(--home-grid-line) 0 1px, transparent 1px 96px),
    radial-gradient(120% 90% at 82% -10%, rgba(255, 107, 26, 0.16), transparent 58%),
    radial-gradient(90% 80% at 0% 100%, rgba(23, 192, 138, 0.08), transparent 60%),
    var(--deep);
  overflow: hidden;
}

.page-home .hero__grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

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

.page-home .hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 18px;
}

.page-home .hero__copy .lead {
  color: var(--silver-dim);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.85;
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 30px;
}

.page-home .path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--silver-line);
  padding-top: 20px;
}

.page-home .path__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.page-home .path__num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--orange);
  border: 1px solid rgba(255, 107, 26, 0.45);
  border-radius: var(--radius);
  padding: 2px 7px;
  flex: none;
  line-height: 1.6;
}

.page-home .path__item strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.page-home .path__item p {
  margin: 0;
  color: var(--silver-dim);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ---------- 记分牌 ---------- */
.page-home .hero__visual {
  display: grid;
  gap: 16px;
}

.page-home .board {
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  background: linear-gradient(158deg, var(--tactic), var(--deep) 82%);
  box-shadow: var(--shadow-float);
  padding: 16px;
}

.page-home .board__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--silver-dim);
  border-bottom: 1px solid var(--silver-line);
  padding-bottom: 12px;
}

.page-home .board__round {
  font-family: var(--font-mono);
  color: var(--silver);
}

.page-home .board__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jade);
}

.page-home .board__live .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 0 0 rgba(23, 192, 138, 0.5);
  animation: home-pulse 2.4s ease-out infinite;
}

@keyframes home-pulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 192, 138, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(23, 192, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 192, 138, 0); }
}

.page-home .board__body {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  padding: 18px 0 16px;
}

.page-home .board__ring {
  --pct: 72%;
  position: relative;
  width: 124px;
  height: 124px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--orange) 0 var(--pct), rgba(185, 196, 206, 0.16) var(--pct) 100%);
  display: grid;
  place-items: center;
}

.page-home .board__ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--tactic);
}

.page-home .board__ring-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  gap: 2px;
}

.page-home .board__ring-inner b {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.page-home .board__ring-inner small {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--silver-dim);
}

.page-home .board__meter {
  margin: 0;
  display: grid;
  gap: 10px;
  flex: 1 1 150px;
}

.page-home .board__meter > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px dashed var(--silver-line);
  padding-bottom: 8px;
}

.page-home .board__meter dt {
  font-size: 12px;
  color: var(--silver-dim);
  letter-spacing: 0.04em;
}

.page-home .board__meter dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.page-home .board__meter .stat__num {
  font-size: 1.15rem;
}

.page-home .board__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--silver-line);
  padding-top: 12px;
  font-size: 12px;
  color: var(--silver-dim);
}

.page-home .board__foot a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 107, 26, 0.4);
}

.page-home .board__foot a:hover {
  color: var(--orange-soft);
}

.page-home .hero__figure {
  margin: 0;
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tactic);
}

.page-home .hero__figure .figure__img {
  height: 180px;
  overflow: hidden;
}

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

.page-home .hero__figure .figure__caption {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--silver-dim);
  line-height: 1.6;
}

/* ---------- 赛程 ---------- */
.page-home .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.page-home .chip-row .chip {
  cursor: pointer;
  font-family: var(--font-sans);
  border: 1px solid rgba(22, 27, 34, 0.16);
  background: transparent;
  color: var(--graphite);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-home .chip-row .chip[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--deep);
  font-weight: 600;
}

.page-home .chip-row .chip:hover {
  border-color: var(--orange);
}

.page-home .fix-bento {
  display: grid;
  gap: 16px;
}

.page-home .fix-card {
  background: #FFFFFF;
  border: 1px solid rgba(22, 27, 34, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-home .fix-head {
  display: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grey);
  background: rgba(185, 196, 206, 0.22);
  border-bottom: 1px solid rgba(22, 27, 34, 0.1);
}

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

.page-home .fix-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(22, 27, 34, 0.08);
  font-size: 0.88rem;
  color: var(--graphite);
}

.page-home .fix-row:last-child {
  border-bottom: 0;
}

.page-home .fix-row__round {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lava);
  background: rgba(255, 107, 26, 0.12);
  border-radius: var(--radius);
  padding: 2px 6px;
  justify-self: start;
}

.page-home .fix-row__league {
  font-size: 12px;
  color: var(--grey);
  justify-self: end;
}

.page-home .fix-row__match {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--graphite);
}

.page-home .fix-row__match b {
  font-weight: 600;
}

.page-home .fix-row__score {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--deep);
  background: rgba(8, 19, 31, 0.06);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.page-home .fix-row__state {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--grey);
  border: 1px solid rgba(22, 27, 34, 0.14);
  border-radius: 999px;
  padding: 2px 9px;
}

.page-home .fix-row__state--live {
  color: #0C7A58;
  border-color: rgba(23, 192, 138, 0.5);
  background: rgba(23, 192, 138, 0.12);
}

.page-home .fix-row__state--done {
  color: var(--lava);
  border-color: rgba(194, 65, 12, 0.4);
  background: rgba(255, 107, 26, 0.1);
}

.page-home .fix-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(185, 196, 206, 0.15);
  font-size: 12px;
  color: var(--graphite);
  line-height: 1.6;
}

.page-home .fix-foot__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  flex: none;
}

.page-home .fix-aside {
  display: grid;
  gap: 14px;
  align-content: start;
  background: var(--mist);
  border: 1px solid rgba(22, 27, 34, 0.1);
  border-radius: var(--radius);
  padding: 14px;
}

.page-home .fix-aside__figure {
  margin: 0;
}

.page-home .fix-aside__figure .figure__img {
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius);
}

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

.page-home .fix-aside__figure .figure__caption {
  margin-top: 8px;
  font-size: 11px;
  color: var(--grey);
  line-height: 1.6;
}

.page-home .fix-aside__note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--graphite);
}

/* ---------- 战报 ---------- */
.page-home .reports {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  border-top: 1px solid var(--silver-line);
  border-bottom: 1px solid var(--silver-line);
}

.page-home .reports__bg {
  position: absolute;
  inset: 0;
  opacity: 0.22;
}

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

.page-home .reports__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 15% 20%, rgba(255, 107, 26, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(8, 19, 31, 0.75), rgba(8, 19, 31, 0.94));
}

.page-home .reports__grid {
  position: relative;
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

.page-home .reports__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  color: var(--ink);
  margin: 10px 0 16px;
}

.page-home .reports__copy > p {
  color: var(--silver-dim);
  line-height: 1.85;
  max-width: 36em;
  font-size: 0.95rem;
}

.page-home .timeline {
  list-style: none;
  margin: 26px 0 28px;
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--silver-line);
}

.page-home .timeline__item {
  display: flex;
  gap: 16px;
  padding: 0 0 18px 16px;
  position: relative;
}

.page-home .timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

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

.page-home .timeline__num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--orange);
  flex: none;
  min-width: 40px;
  font-variant-numeric: tabular-nums;
}

.page-home .timeline__item strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.page-home .timeline__item p {
  margin: 0;
  color: var(--silver-dim);
  font-size: 0.86rem;
  line-height: 1.7;
}

.page-home .reports__side {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  padding: 18px;
  background: rgba(16, 42, 67, 0.55);
}

.page-home .reports__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dashed var(--silver-line);
  padding-bottom: 12px;
}

.page-home .reports__stat .stat__num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--orange);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.page-home .reports__stat .stat__label {
  font-size: 12px;
  color: var(--silver-dim);
  line-height: 1.5;
}

.page-home .reports__hint {
  margin: 0;
  font-size: 12px;
  color: var(--cyan);
  line-height: 1.7;
}

/* ---------- 关注列表 ---------- */
.page-home .follow__bento {
  display: grid;
  gap: 18px;
}

.page-home .follow__main h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 10px 0 14px;
}

.page-home .follow__main > p {
  color: var(--silver-dim);
  font-size: 0.94rem;
  line-height: 1.85;
  max-width: 34em;
}

.page-home .follow__tags {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .follow__tags li {
  font-size: 12px;
  color: var(--ink);
  border: 1px solid var(--silver-line);
  background: rgba(30, 58, 95, 0.55);
  border-radius: 999px;
  padding: 6px 12px;
}

.page-home .follow__chart {
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.5), rgba(8, 19, 31, 0.6));
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-home .chart__title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--silver);
}

.page-home .chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.page-home .chart__base {
  stroke: var(--silver);
  stroke-width: 1;
  opacity: 0.55;
}

.page-home .chart__grid {
  stroke: var(--silver-line);
  stroke-width: 1;
}

.page-home .chart__line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-home .chart__dot {
  fill: var(--deep);
  stroke: var(--cyan);
  stroke-width: 2;
}

.page-home .chart__dot--end {
  fill: var(--orange);
  stroke: var(--orange);
}

.page-home .chart__caption {
  margin: 0;
  font-size: 11px;
  color: var(--silver-dim);
  line-height: 1.6;
}

/* ---------- 会员权益 ---------- */
.page-home .member__grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}

.page-home .member__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  color: var(--graphite);
  margin: 10px 0 14px;
}

.page-home .member__copy > p {
  color: var(--graphite);
  font-size: 0.94rem;
  line-height: 1.85;
  max-width: 34em;
  opacity: 0.86;
}

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

.page-home .steps__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.page-home .steps__num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--deep);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
}

.page-home .steps__item strong {
  display: block;
  color: var(--graphite);
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.page-home .steps__item p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--grey);
  line-height: 1.7;
}

.page-home .phone {
  justify-self: center;
  width: min(280px, 100%);
  border: 1px solid rgba(22, 27, 34, 0.18);
  border-radius: 22px;
  background: var(--deep);
  padding: 10px;
  box-shadow: var(--shadow-float);
}

.page-home .phone__screen {
  border-radius: 16px;
  background: linear-gradient(180deg, var(--tactic), var(--deep));
  padding: 14px 12px 16px;
  display: grid;
  gap: 12px;
}

.page-home .phone__bar {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--silver-dim);
  border-bottom: 1px solid var(--silver-line);
  padding-bottom: 10px;
}

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

.page-home .phone__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--silver-dim);
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  padding: 9px 10px;
}

.page-home .phone__row i {
  font-style: normal;
  color: var(--silver);
}

.page-home .phone__row--active {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 107, 26, 0.1);
}

.page-home .phone__row--active i {
  color: var(--orange);
}

.page-home .phone__panel {
  border: 1px dashed rgba(23, 192, 138, 0.4);
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  gap: 6px;
}

.page-home .phone__badge {
  justify-self: start;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--jade);
  border: 1px solid rgba(23, 192, 138, 0.45);
  border-radius: 999px;
  padding: 1px 8px;
}

.page-home .phone__panel p {
  margin: 0;
  font-size: 11.5px;
  color: var(--silver-dim);
  line-height: 1.65;
}

/* ---------- 栏目索引 ---------- */
.page-home .dir-grid {
  display: grid;
  gap: 12px;
}

.page-home .dir-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--silver-line);
  border-left: 2px solid var(--steel);
  border-radius: var(--radius);
  background: rgba(16, 42, 67, 0.5);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.page-home .dir-card:hover {
  border-left-color: var(--orange);
  background: rgba(30, 58, 95, 0.7);
  transform: translateY(-2px);
}

.page-home .dir-card__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 0.08em;
}

.page-home .dir-card strong {
  color: var(--ink);
  font-size: 1rem;
}

.page-home .dir-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--silver-dim);
  line-height: 1.7;
}

.page-home .qa {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--silver-line);
  padding-top: clamp(20px, 3vw, 30px);
}

.page-home .qa .module-title {
  color: var(--ink);
  margin-bottom: 16px;
}

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

.page-home .qa__item {
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: rgba(16, 42, 67, 0.4);
}

.page-home .qa__item strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  margin-bottom: 6px;
}

.page-home .qa__item p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--silver-dim);
  line-height: 1.75;
}

.page-home .qa__item a {
  font-size: 12px;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 107, 26, 0.4);
}

.page-home .qa__item a:hover {
  color: var(--orange-soft);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .fix-row {
    grid-template-columns: 62px 96px 1fr auto;
    align-items: center;
    gap: 12px;
  }

  .page-home .fix-row__round,
  .page-home .fix-row__league,
  .page-home .fix-row__state {
    justify-self: start;
  }

  .page-home .fix-row__match,
  .page-home .fix-row__state {
    grid-column: auto;
  }

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

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

  .page-home .hero__figure .figure__img {
    height: 220px;
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 40px;
  }

  .page-home .fix-bento {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-home .fix-head {
    display: grid;
    grid-template-columns: 62px 96px 1fr auto;
    gap: 12px;
    padding: 10px 16px;
  }

  .page-home .reports__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-home .follow__bento {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 28px;
    align-items: start;
  }

  .page-home .member__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-home .board__live .status-dot {
    animation: none;
  }

  .page-home .dir-card {
    transition: none;
  }

  .page-home .dir-card:hover {
    transform: none;
  }
}


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

  <nav class="chapter-index rail-index" aria-label="本页章节">
    <a class="chapter-link" href="#entry" data-chapter-link><span class="chapter-link__idx">01</span>入口路径</a>
    <a class="chapter-link" href="#fixtures" data-chapter-link><span class="chapter-link__idx">02</span>赛程双轴</a>
    <a class="chapter-link" href="#reports" data-chapter-link><span class="chapter-link__idx">03</span>战报接续</a>
    <a class="chapter-link" href="#follow" data-chapter-link><span class="chapter-link__idx">04</span>关注列表</a>
    <a class="chapter-link" href="#member" data-chapter-link><span class="chapter-link__idx">05</span>会员权益</a>
    <a class="chapter-link" href="#directory" data-chapter-link><span class="chapter-link__idx">06</span>栏目索引</a>
  </nav>

  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a href="/">入口中枢</a>
      <span class="breadcrumb__sep">/</span>
      <span aria-current="page">登录与赛程总览</span>
    </nav>
  </div>

  <section class="hero" id="entry" data-chapter-section aria-labelledby="hero-title">
    <div class="container hero__grid">
      <div class="hero__copy">
        <p class="eyebrow">2025 赛季 · 第 18 轮</p>
        <h1 class="display" id="hero-title">登录入口、赛程与战报，都收在同一个页面上</h1>
        <p class="lead">完美体育在线把登录、查赛程、看战报和查会员权益四条线拧成一条路。以前要在四五个标签页之间来回试探，现在从一个集中页出发，最多两次点击就能落到你要去的地方——不用记住哪个入口藏在哪个二级菜单里，也不用先注册再找路。</p>
        <div class="hero__actions">
          <a class="btn btn--primary" href="/app-download/">打开赛程页面</a>
          <a class="btn btn--ghost" href="/news/">看赛后战报</a>
        </div>
        <ol class="path">
          <li class="path__item">
            <span class="path__num">01</span>
            <div>
              <strong>任意栏目起步</strong>
              <p>首页、战报或球队资料，从哪一页进来都能看到同一个入口按钮，位置固定、不用翻找。</p>
            </div>
          </li>
          <li class="path__item">
            <span class="path__num">02</span>
            <div>
              <strong>两次点击抵达</strong>
              <p>从首页到登录最多两步；手机端查权益也止于个人中心第二栏，不用在设置里逐层下钻。</p>
            </div>
          </li>
        </ol>
      </div>

      <div class="hero__visual">
        <div class="board">
          <div class="board__top">
            <span class="board__round">2025 赛季 · 第 18 轮</span>
            <span class="board__live"><i class="status-dot"></i>数据在线</span>
          </div>
          <div class="board__body">
            <div class="board__ring" role="img" aria-label="本轮赛程已完成七成二">
              <span class="board__ring-inner">
                <b>72%</b>
                <small>本轮完赛</small>
              </span>
            </div>
            <dl class="board__meter">
              <div>
                <dt>覆盖联赛</dt>
                <dd><span class="stat__num" data-count-to="14">14</span> 个</dd>
              </div>
              <div>
                <dt>单季场次</dt>
                <dd><span class="stat__num" data-count-to="2300">2300</span>+</dd>
              </div>
              <div>
                <dt>赛果发布</dt>
                <dd><span class="stat__num" data-count-to="10">10</span> 分钟</dd>
              </div>
            </dl>
          </div>
          <div class="board__foot">
            <span>最近更新：本轮</span>
            <a href="#fixtures">看本轮全部对阵</a>
          </div>
        </div>

        <figure class="figure hero__figure">
          <div class="figure__img">
            <img src="{zhanqunpic:h:1500w:1200}" width="1200" height="1500" alt="赛场边线附近的冲刺瞬间，对角线构图并带运动模糊">
          </div>
          <figcaption class="figure__caption">边线附近的一刻，和记分牌上的数字同步发生。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--light" id="fixtures" data-chapter-section aria-labelledby="fixtures-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">赛程查询</p>
        <h2 class="display" id="fixtures-title">先挑联赛，再收窄到某个比赛日</h2>
        <p class="lead">十四项联赛横向铺开，比赛日纵向收窄，两个维度叠着用。想锁定一场具体比赛，通常两下就够；想纵览整轮，列表也能在一屏里铺满，不必来回切页。</p>
      </div>

      <div class="chip-row" role="group" aria-label="按联赛类别筛选">
        <button class="chip" type="button" aria-pressed="true">全部联赛</button>
        <button class="chip" type="button" aria-pressed="false">顶级组</button>
        <button class="chip" type="button" aria-pressed="false">次级组</button>
        <button class="chip" type="button" aria-pressed="false">杯赛</button>
        <button class="chip" type="button" aria-pressed="false">青年组</button>
      </div>

      <div class="bento fix-bento">
        <div class="fix-card">
          <div class="fix-head">
            <span>轮次</span>
            <span>赛事</span>
            <span>对阵</span>
            <span>状态</span>
          </div>
          <ul class="fix-list">
            <li class="fix-row">
              <span class="fix-row__round">本轮</span>
              <span class="fix-row__league">联赛 · 顶级</span>
              <span class="fix-row__match"><b>滨海队</b><em class="fix-row__score">2 : 1</em><b>北岭队</b></span>
              <span class="fix-row__state fix-row__state--done">战报已发</span>
            </li>
            <li class="fix-row">
              <span class="fix-row__round">本轮</span>
              <span class="fix-row__league">联赛 · 顶级</span>
              <span class="fix-row__match"><b>江城队</b><em class="fix-row__score">1 : 1</em><b>西关队</b></span>
              <span class="fix-row__state fix-row__state--live">进行中</span>
            </li>
            <li class="fix-row">
              <span class="fix-row__round">本轮</span>
              <span class="fix-row__league">联赛 · 次级</span>
              <span class="fix-row__match"><b>松岭队</b><em class="fix-row__score">待开球</em><b>东川队</b></span>
              <span class="fix-row__state">未开始</span>
            </li>
            <li class="fix-row">
              <span class="fix-row__round">下一轮</span>
              <span class="fix-row__league">联赛 · 顶级</span>
              <span class="fix-row__match"><b>北岭队</b><em class="fix-row__score">已排期</em><b>江城队</b></span>
              <span class="fix-row__state">未开始</span>
            </li>
            <li class="fix-row">
              <span class="fix-row__round">下一轮</span>
              <span class="fix-row__league">杯赛 · 淘汰</span>
              <span class="fix-row__match"><b>滨海队</b><em class="fix-row__score">首回合</em><b>松岭队</b></span>
              <span class="fix-row__state">未开始</span>
            </li>
          </ul>
          <div class="fix-foot">
            <span class="fix-foot__dot"></span>
            本轮与下一轮对阵均已排定，赛程数据同步至 2025 赛季第 18 轮，最近三个比赛日的变动都已反映在列表中。
          </div>
        </div>

        <aside class="fix-aside">
          <figure class="figure fix-aside__figure">
            <div class="figure__img">
              <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="低角度拍摄的球鞋与草皮特写，颗粒质感明显" loading="lazy" decoding="async">
            </div>
            <figcaption class="figure__caption">胜负常常决定在草皮这一小块地方。</figcaption>
          </figure>
          <p class="fix-aside__note">点开任意一场对阵，双方球队资料和已发布的战报会一起打开，不用回到列表重新找。</p>
          <a class="btn btn--quiet" href="/app-download/">用双轴筛选查比赛</a>
        </aside>
      </div>
    </div>
  </section>

  <section class="section reports" id="reports" data-chapter-section aria-labelledby="reports-title">
    <div class="reports__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="类似战术板的线条与圆圈标记纹理，抽象处理" loading="lazy" decoding="async">
    </div>
    <div class="container reports__grid">
      <div class="reports__copy">
        <p class="eyebrow">赛后接续</p>
        <h2 class="display" id="reports-title">终场哨响，比分先到，战报随后补上细节</h2>
        <p>比分落定后十分钟内先出赛果，半小时内给出第一版战报。点开战报里的任意一方，就能顺着看这支球队近五个赛季的战绩、主客场分布和常用阵型——从结果走到背景，一条线连着，不用另开搜索。</p>
        <ul class="timeline">
          <li class="timeline__item">
            <span class="timeline__num">10′</span>
            <div><strong>赛果与比分</strong><p>经双人复核后对外呈现，排名表随之变动。</p></div>
          </li>
          <li class="timeline__item">
            <span class="timeline__num">30′</span>
            <div><strong>战报初稿</strong><p>关键回合、比分走势与轮次变化一并给出。</p></div>
          </li>
          <li class="timeline__item">
            <span class="timeline__num">赛前</span>
            <div><strong>球队资料</strong><p>每赛季更新三百余份，随比赛随时调取。</p></div>
          </li>
        </ul>
        <a class="btn btn--primary" href="/news/">进入战报栏目</a>
      </div>
      <div class="reports__side">
        <div class="reports__stat">
          <span class="stat__num" data-count-to="300">300</span>
          <span class="stat__label">每赛季更新的球队资料份数</span>
        </div>
        <div class="reports__stat">
          <span class="stat__num" data-count-to="26">26</span>
          <span class="stat__label">编辑与数据团队人数</span>
        </div>
        <p class="reports__hint">从任意页面到战报，平均不超过一次跳转。</p>
      </div>
    </div>
  </section>

  <section class="section follow" id="follow" data-chapter-section aria-labelledby="follow-title">
    <div class="container">
      <div class="bento follow__bento">
        <div class="follow__main">
          <p class="eyebrow">电脑端</p>
          <h2 class="display" id="follow-title">八支球队、五个联赛，摆在同一张列表上</h2>
          <p>打开关注列表，常看的球队挨在一起；想看排名，一键就能在几个联赛之间切换视图，不用重开页面，也不用记住上次看到哪儿。网页端和客户端共用一套账号，换个设备继续看，列表还是原来那份。</p>
          <ul class="follow__tags" aria-label="关注列表能容纳的范围">
            <li>最多 8 支球队</li>
            <li>最多 5 个联赛</li>
            <li>排名视图一键切换</li>
            <li>两套入口实时同步</li>
          </ul>
          <a class="btn btn--ghost" href="/app-download/">设置我的关注列表</a>
        </div>
        <div class="follow__chart">
          <p class="chart__title">近三个赛季排名走势</p>
          <svg class="chart" viewBox="0 0 340 150" role="img" aria-label="折线显示一支球队近三个赛季的排名从第九位稳步上升到第三位">
            <line class="chart__base" x1="0" y1="132" x2="340" y2="132"></line>
            <line class="chart__grid" x1="0" y1="96" x2="340" y2="96"></line>
            <line class="chart__grid" x1="0" y1="60" x2="340" y2="60"></line>
            <line class="chart__grid" x1="0" y1="24" x2="340" y2="24"></line>
            <polyline class="chart__line" points="10,118 90,104 170,74 250,52 330,26"></polyline>
            <circle class="chart__dot" cx="10" cy="118" r="4"></circle>
            <circle class="chart__dot" cx="90" cy="104" r="4"></circle>
            <circle class="chart__dot" cx="170" cy="74" r="4"></circle>
            <circle class="chart__dot" cx="250" cy="52" r="4"></circle>
            <circle class="chart__dot chart__dot--end" cx="330" cy="26" r="5"></circle>
          </svg>
          <p class="chart__caption">越靠上排名越高 · 数据更新至 2025 赛季第 18 轮</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--light member" id="member" data-chapter-section aria-labelledby="member-title">
    <div class="container member__grid">
      <div class="member__copy">
        <p class="eyebrow">手机端</p>
        <h2 class="display" id="member-title">权益就在个人中心第二栏，两步翻到</h2>
        <p>会员中心分三栏：账号与安全、会员权益、通知设置。付费用户最常查的那一栏固定排在第二位，打开个人中心往下看一眼就能点进去，不必在设置里绕圈，也省掉了反复问客服的时间。</p>
        <ol class="steps">
          <li class="steps__item">
            <span class="steps__num">1</span>
            <div><strong>打开个人中心</strong><p>底部导航最右侧一栏，登录后即可进入。</p></div>
          </li>
          <li class="steps__item">
            <span class="steps__num">2</span>
            <div><strong>点第二栏「会员权益」</strong><p>权益范围、生效状态与到期提示都在同一页。</p></div>
          </li>
        </ol>
        <a class="btn btn--quiet" href="/faqs/">查看手机端操作说明</a>
      </div>

      <div class="phone" aria-hidden="true">
        <div class="phone__screen">
          <div class="phone__bar">个人中心</div>
          <ul class="phone__list">
            <li class="phone__row"><span>账号与安全</span><i>›</i></li>
            <li class="phone__row phone__row--active"><span>会员权益</span><i>›</i></li>
            <li class="phone__row"><span>通知设置</span><i>›</i></li>
          </ul>
          <div class="phone__panel">
            <span class="phone__badge">当前权益</span>
            <p>赛程订阅 · 战报提醒 · 多联赛排名视图</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section directory" id="directory" data-chapter-section aria-labelledby="directory-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">完美体育导航</p>
        <h2 class="display" id="directory-title">其余入口，一列排开</h2>
        <p class="lead">一时找不到想要的东西，就从这里挑一栏进去。每栏只解决一类事，点错也不至于绕远路。</p>
      </div>

      <div class="dir-grid">
        <a class="dir-card" href="/who-we-are/">
          <span class="dir-card__idx">01</span>
          <strong>谁在做这件事</strong>
          <p>二十六人的编辑与数据团队，双人复核的内容流程。</p>
        </a>
        <a class="dir-card" href="/app-download/">
          <span class="dir-card__idx">02</span>
          <strong>赛程页面与客户端</strong>
          <p>四个平台可用，当前版本 3.4，安装包 48MB。</p>
        </a>
        <a class="dir-card" href="/news/">
          <span class="dir-card__idx">03</span>
          <strong>战报与站点动态</strong>
          <p>每周三期的排名观察，版本更新与资料补充都在这里。</p>
        </a>
        <a class="dir-card" href="/faqs/">
          <span class="dir-card__idx">04</span>
          <strong>帮助中心</strong>
          <p>登录、同步、权益与客户端设置，逐条拆开讲。</p>
        </a>
        <a class="dir-card" href="/find-us/">
          <span class="dir-card__idx">05</span>
          <strong>联络我们</strong>
          <p>邮箱、电话与在线留言，工作日有人值守。</p>
        </a>
        <a class="dir-card" href="/terms-of-use/">
          <span class="dir-card__idx">06</span>
          <strong>使用条款</strong>
          <p>账号怎么用、内容怎么引用，写成短句讲明白。</p>
        </a>
      </div>

      <div class="qa">
        <h3 class="module-title">访客问得最多的几件事</h3>
        <ul class="qa__list">
          <li class="qa__item">
            <strong>手机上关注的球队，换电脑还看得到吗？</strong>
            <p>看得到。网页端和客户端共用一套账号，关注列表实时同步。</p>
            <a href="/faqs/">看详细说明</a>
          </li>
          <li class="qa__item">
            <strong>赛程多久刷新一次？</strong>
            <p>赛果在比赛结束后十分钟内更新，轮次与对阵变动同步调整。</p>
            <a href="/faqs/">看详细说明</a>
          </li>
          <li class="qa__item">
            <strong>会员权益到底在哪一栏？</strong>
            <p>个人中心第二栏，两步可达，权益状态与到期提示同页显示。</p>
            <a href="/faqs/">看详细说明</a>
          </li>
          <li class="qa__item">
            <strong>客户端该装哪个版本？</strong>
            <p>当前版本 3.4，iOS、Android、Windows、macOS 都能用。</p>
            <a href="/app-download/">去下载页</a>
          </li>
        </ul>
      </div>
    </div>
  </section>

</main>