.page-home {
  --home-hair: var(--line);
  --home-panel: var(--ink-700);
  --home-deep: var(--ink-900);
  color: var(--text);
}

/* ---------- shared-ish page primitives ---------- */
.page-home .eyebrow {
  margin: 0 0 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold);
  text-transform: uppercase;
}

.page-home .section-head {
  margin-bottom: 32px;
}

.page-home .section-head__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--cream);
  max-width: 24em;
}

.page-home .section-head__meta {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 34em;
}

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

/* ---------- hero ---------- */
.page-home .hero {
  position: relative;
  padding: 28px 0 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(23, 176, 138, .13), transparent 58%),
    radial-gradient(circle at 6% 78%, rgba(226, 112, 58, .10), transparent 52%);
}

.page-home .hero__contour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

.page-home .hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--home-hair);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--steel);
}

.page-home .hero__status-txt {
  color: var(--text-dim);
}

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

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

.page-home .hero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-home .hero__lead h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--cream);
}

.page-home .hero__lede {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-home .hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--home-hair);
  list-style: none;
  font-size: 13px;
  color: var(--steel);
}

.page-home .hero__facts .num {
  font-family: var(--ff-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
}

.page-home .hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  overflow: hidden;
}

.page-home .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 222, 233, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 222, 233, .10) 1px, transparent 1px);
  background-size: 48px 48px;
}

.page-home .hero__media-cap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 8px 14px;
  background: rgba(10, 17, 32, .86);
  border-left: 1px solid var(--home-hair);
  border-bottom: 1px solid var(--home-hair);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--steel);
}

.page-home .hero__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 12px 16px;
  background: var(--home-deep);
  border-top: 1px solid var(--home-hair);
  border-right: 1px solid var(--home-hair);
}

.page-home .hero__badge-num {
  font-family: var(--ff-mono);
  font-size: 44px;
  line-height: .92;
  font-weight: 700;
  color: var(--clay);
}

.page-home .hero__badge-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--clay);
}

.page-home .hero__badge-label {
  font-size: 12px;
  color: var(--steel);
}

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

.page-home .entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px 20px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease;
}

.page-home .entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .18s ease;
}

.page-home .entry:hover,
.page-home .entry:focus-visible {
  border-color: var(--teal);
}

.page-home .entry:hover::before,
.page-home .entry:focus-visible::before {
  background: var(--teal);
}

.page-home .entry--accent::before {
  background: var(--clay);
}

.page-home .entry__k {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .entry__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .entry__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-home .entry__go {
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--teal);
}

/* ---------- services ---------- */
.page-home .services {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--home-hair);
  background: var(--home-deep);
}

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

.page-home .svc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
}

.page-home .svc--live {
  background: linear-gradient(180deg, rgba(23, 176, 138, .09), transparent 46%), var(--home-panel);
}

.page-home .svc__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--cream);
}

.page-home .svc__intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-home .svc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--home-hair);
}

.page-home .svc__list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--home-hair);
}

.page-home .svc__idx {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--gold);
  padding-top: 2px;
}

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

.page-home .svc__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .svc__meta {
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
}

.page-home .svc__stats {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--home-hair);
}

.page-home .svc__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--home-hair);
}

.page-home .svc__stat dt {
  font-size: 13px;
  color: var(--steel);
}

.page-home .svc__stat dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .svc__stat dd .num {
  font-family: var(--ff-mono);
  font-size: 18px;
  color: var(--teal);
}

.page-home .svc__hint {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--steel);
  text-align: right;
}

.page-home .svc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-home .svc .btn {
  align-self: flex-start;
}

.page-home .services__band {
  position: relative;
  margin: 44px 0 0;
  aspect-ratio: 3 / 1;
  border-top: 1px solid var(--home-hair);
  border-bottom: 1px solid var(--home-hair);
  overflow: hidden;
}

.page-home .services__band img {
  opacity: .6;
}

.page-home .services__band-cap {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--steel);
}

/* ---------- rounds waterfall ---------- */
.page-home .rounds {
  padding: 56px 0 8px;
}

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

.page-home .rcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
}

.page-home .rcard--data {
  border-left: 3px solid var(--teal);
}

.page-home .rcard--sched {
  background: rgba(226, 112, 58, .07);
}

.page-home .rcard--case {
  background: rgba(242, 193, 78, .07);
}

.page-home .rcard__tag {
  align-self: flex-start;
  margin: 0;
}

.page-home .rcard__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--cream);
}

.page-home .rcard__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-home .rcard__list {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--steel);
}

.page-home .rcard__list .num {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--teal);
}

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

.page-home .rcard__go {
  margin-top: auto;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}

.page-home .rcard__go:hover,
.page-home .rcard__go:focus-visible {
  border-bottom-color: var(--teal);
}

/* ---------- split preview ---------- */
.page-home .split {
  padding: 56px 0;
  background: var(--home-deep);
  border-top: 1px solid var(--home-hair);
  border-bottom: 1px solid var(--home-hair);
}

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

.page-home .split__media {
  position: relative;
  margin: 0;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.page-home .split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 222, 233, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 222, 233, .09) 1px, transparent 1px);
  background-size: 40px 40px;
}

.page-home .split__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 8px 14px;
  background: rgba(10, 17, 32, .88);
  border-top: 1px solid var(--home-hair);
  font-size: 12px;
  color: var(--steel);
}

.page-home .split__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-home .split .tablewrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--home-hair);
  background: var(--ink-800);
  -webkit-overflow-scrolling: touch;
}

.page-home .split .datatable {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.page-home .split .datatable th,
.page-home .split .datatable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--home-hair);
  text-align: right;
  white-space: nowrap;
}

.page-home .split .datatable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--home-deep);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 12px;
}

.page-home .split .datatable tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--text-dim);
}

.page-home .split .datatable thead th:first-child,
.page-home .split .datatable tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--home-panel);
  text-align: left;
}

.page-home .split .datatable thead th:first-child {
  z-index: 4;
  background: var(--home-deep);
}

.page-home .split .datatable tbody tr:hover td,
.page-home .split .datatable tbody tr:hover th {
  background: rgba(23, 176, 138, .10);
}

.page-home .split .datatable td {
  color: var(--text);
}

.page-home .val-up {
  color: var(--teal);
}

.page-home .val-down {
  color: var(--alert);
}

.page-home .split__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--steel);
}

.page-home .split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- flow ---------- */
.page-home .flow {
  padding: 56px 0;
}

.page-home .flow__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.page-home .flow__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--home-hair);
  counter-reset: step;
}

.page-home .step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--home-hair);
}

.page-home .step__k {
  grid-row: span 2;
  font-family: var(--ff-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--clay);
}

.page-home .step__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--cream);
}

.page-home .step__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-home .flow__media {
  position: relative;
  margin: 0;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.page-home .flow__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 14px;
  background: rgba(10, 17, 32, .86);
  border-top: 1px solid var(--home-hair);
  font-size: 12px;
  line-height: 1.6;
  color: var(--steel);
}

.page-home .flow__foot {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--home-hair);
  max-width: 46em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--steel);
}

/* ---------- feedback ---------- */
.page-home .feedback {
  padding: 56px 0 72px;
  background: var(--home-deep);
  border-top: 1px solid var(--home-hair);
}

.page-home .feedback__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-home .feedback__copy h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--cream);
}

.page-home .feedback__copy p {
  margin: 0 0 12px;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-dim);
}

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

.page-home .fcard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease;
}

.page-home .fcard:hover,
.page-home .fcard:focus-visible {
  border-color: var(--teal);
}

.page-home .fcard__k {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .fcard__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .fcard__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--steel);
}

.page-home .fcard__go {
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--teal);
}

/* ---------- stamps ---------- */
.page-home .stamp {
  position: relative;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--teal);
  color: var(--teal);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .04em;
  cursor: help;
  white-space: nowrap;
}

.page-home .stamp--gold {
  border-color: var(--gold);
  color: var(--gold);
}

.page-home .stamp__note {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  display: block;
  width: 250px;
  max-width: 74vw;
  padding: 10px 12px;
  border: 1px solid var(--home-hair);
  background: var(--home-deep);
  color: var(--text-dim);
  font-family: var(--ff-sans);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.page-home .stamp:hover .stamp__note,
.page-home .stamp:focus .stamp__note,
.page-home .stamp:focus-within .stamp__note {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------- reveal ---------- */
.page-home [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}

.page-home [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- breakpoints ---------- */
@media (min-width: 640px) {
  .page-home .hero__entries {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .feedback__links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .page-home .hero__lead h1 {
    font-size: 38px;
  }

  .page-home .services__cols {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .page-home .rounds__flow {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .flow__inner {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .page-home .hero {
    padding: 36px 0 16px;
  }

  .page-home .hero__lead h1 {
    font-size: 44px;
    letter-spacing: -1px;
  }

  .page-home .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
  }

  .page-home .hero__lead {
    grid-column: span 5;
  }

  .page-home .hero__media {
    grid-column: span 7;
  }

  .page-home .hero__entries {
    grid-column: span 12;
    grid-template-columns: 4fr 5fr 3fr;
    gap: 24px;
    margin-top: 8px;
  }

  .page-home .section-head__title {
    font-size: 28px;
  }

  .page-home .rounds__flow {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
  }

  .page-home .rcard--data {
    grid-column: 1 / span 5;
  }

  .page-home .rcard--sched {
    grid-column: 6 / span 4;
    margin-top: 44px;
  }

  .page-home .rcard--case {
    grid-column: 10 / span 3;
    margin-top: 92px;
  }

  .page-home .split__layout {
    grid-template-columns: 5fr 7fr;
    gap: 28px;
    align-items: start;
  }

  .page-home .split__media {
    position: sticky;
    top: 76px;
  }

  .page-home .flow__inner {
    grid-template-columns: 7fr 5fr;
    gap: 28px;
  }

  .page-home .feedback__inner {
    grid-template-columns: 7fr 5fr;
    gap: 32px;
  }

  .page-home .feedback__links {
    grid-template-columns: 1fr;
  }

  .page-home .feedback__copy h2 {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-home .stamp__note {
    transition: none;
  }
}


等等——我输出了两次 ``。让我修正。输出应该以其中一个 `` 块结束。让我重新正确地输出。

实际上，看我的输出，我在 CSS 开头和结尾都写了 ``。这违反了“每个标记只能出现一次”。我需要重新干净地输出整个内容。

让我重新仔细生成。
<main id="main-content" class="page-home">

  <section class="hero" aria-labelledby="hero-title">
    <svg class="hero__contour" viewBox="0 0 1200 640" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0 500 C 170 452 300 540 470 486 S 760 396 960 452 1120 414 1200 430" fill="none" stroke="rgba(23,176,138,.20)" stroke-width="1"/>
      <path d="M0 548 C 190 500 320 588 500 534 S 790 448 990 502 1140 464 1200 478" fill="none" stroke="rgba(23,176,138,.13)" stroke-width="1"/>
      <path d="M0 598 C 210 552 340 636 520 584 S 810 500 1010 552 1150 516 1200 528" fill="none" stroke="rgba(169,180,198,.12)" stroke-width="1"/>
      <path d="M0 452 C 150 410 290 490 450 440 S 720 356 920 408 1100 372 1200 386" fill="none" stroke="rgba(226,112,58,.14)" stroke-width="1"/>
      <g stroke="rgba(216,222,233,.06)" stroke-width="1">
        <line x1="0" y1="160" x2="1200" y2="160"/>
        <line x1="0" y1="320" x2="1200" y2="320"/>
        <line x1="240" y1="0" x2="240" y2="640"/>
        <line x1="600" y1="0" x2="600" y2="640"/>
        <line x1="960" y1="0" x2="960" y2="640"/>
      </g>
    </svg>

    <div class="shell hero__inner">
      <div class="hero__status">
        <span class="tag tag--teal">当季赛事进行中</span>
        <span class="hero__status-txt">本轮数据已补齐</span>
        <span class="hero__status-sep" aria-hidden="true">/</span>
        <span class="hero__status-txt">上一轮专题合集可下载</span>
      </div>

      <div class="hero__grid">
        <div class="hero__lead">
          <p class="eyebrow">赛后数据台 · 11 个赛季归档</p>
          <h1 id="hero-title">赛后两小时内，把刚结束的一轮摆上台面</h1>
          <p class="hero__lede">BEPLAY赛场把每一轮的球员表现、轮次安排与进失球区间整理成可以逐项对照的摘要。页面调整过一轮之后，从这一屏到你要的那张表只剩两步，哨响之后翻开就能对着看。</p>
          <div class="hero__actions">
            <a class="btn btn--primary" href="/notes/">看本轮赛事笔记</a>
            <a class="btn btn--line" href="/experience/">进分栏对照表</a>
          </div>
          <ul class="hero__facts">
            <li><span class="num">4,300</span> 余场进失球分布记录</li>
            <li><span class="num">12</span> 个竞技项目分类</li>
            <li><span class="num">96</span> 期轮次专题合集</li>
          </ul>
        </div>

        <figure class="hero__media">
          <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="记分牌局部特写叠加等高线网格，冷蓝色调的赛场分析画面">
          <figcaption class="hero__media-cap">记分牌与上一轮走势压在同一块底板上</figcaption>
          <div class="hero__badge">
            <span class="hero__badge-num num">2</span>
            <span class="hero__badge-unit">小时</span>
            <span class="hero__badge-label">每轮赛后补齐窗口</span>
            <span class="stamp" tabindex="0">本轮已补齐<span class="stamp__note">本轮 26 项球员指标与 9 类进失球区间已复核发布，标签时间即上线时刻</span></span>
          </div>
        </figure>

        <div class="hero__entries">
          <a class="entry" href="/notes/">
            <span class="entry__k num">01</span>
            <span class="entry__title">当季赛事与轮次安排</span>
            <span class="entry__desc">本轮对阵、上轮回顾与每轮专题，随赛季推进逐轮增补。</span>
            <span class="entry__go">进入赛事笔记 →</span>
          </a>
          <a class="entry entry--accent" href="/experience/">
            <span class="entry__k num">02</span>
            <span class="entry__title">会员权益与生效时间</span>
            <span class="entry__desc">六类权益按季度调整，最近一次生效日期就标在服务栏上。</span>
            <span class="entry__go">查看权益详情 →</span>
          </a>
          <a class="entry" href="/notes/">
            <span class="entry__k num">03</span>
            <span class="entry__title">轮次案例合集</span>
            <span class="entry__desc">连续 96 期，每期对应一轮，可直接取用摘要。</span>
            <span class="entry__go">翻看合集 →</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="services" data-reveal aria-labelledby="services-title">
    <div class="shell">
      <header class="section-head">
        <div class="section-head__group">
          <p class="eyebrow">服务栏</p>
          <h2 class="section-head__title" id="services-title">权益什么时候生效、这一轮打到哪了，一屏里同时看见</h2>
        </div>
        <span class="section-head__line" aria-hidden="true"></span>
        <p class="section-head__meta">会员权益更新时间与当季赛事资讯并列陈列，做完一轮复盘顺手就能把下轮安排排出来</p>
      </header>

      <div class="services__cols">
        <article class="card card--accent svc">
          <h3 class="svc__title">会员权益更新时间</h3>
          <p class="svc__intro">六类权益按季度调整一次，每次调整都在这里写明生效时间，续期前先看清哪一项先变。</p>
          <ul class="svc__list">
            <li>
              <span class="svc__idx num">01</span>
              <span class="svc__body">
                <span class="svc__name">轮次提醒</span>
                <span class="svc__meta">开赛后 10 分钟内推送补齐进度</span>
              </span>
            </li>
            <li>
              <span class="svc__idx num">02</span>
              <span class="svc__body">
                <span class="svc__name">历史回看</span>
                <span class="svc__meta">往季轮次与已发布合集随时翻查</span>
              </span>
            </li>
            <li>
              <span class="svc__idx num">03</span>
              <span class="svc__body">
                <span class="svc__name">案例合集下载</span>
                <span class="svc__meta">96 期专题按轮次归档，取用不挑设备</span>
              </span>
            </li>
            <li>
              <span class="svc__idx num">04</span>
              <span class="svc__body">
                <span class="svc__name">导出额度</span>
                <span class="svc__meta">单次最多导出 5 轮 CSV 摘要</span>
              </span>
            </li>
            <li>
              <span class="svc__idx num">05</span>
              <span class="svc__body">
                <span class="svc__name">对比视图</span>
                <span class="svc__meta">两轮指标并排，差异用双色标出</span>
              </span>
            </li>
            <li>
              <span class="svc__idx num">06</span>
              <span class="svc__body">
                <span class="svc__name">优先级反馈</span>
                <span class="svc__meta">数据疑问排在队列前列处理</span>
              </span>
            </li>
          </ul>
          <p class="svc__foot">最近一次生效：本季度首轮<span class="stamp stamp--gold" tabindex="0">已生效<span class="stamp__note">本次调整覆盖六类权益的额度与响应时段，生效后当轮即可使用</span></span></p>
          <a class="btn btn--line btn--sm" href="/experience/">查看权益详情</a>
        </article>

        <article class="card svc svc--live">
          <h3 class="svc__title">当季赛事资讯</h3>
          <p class="svc__intro">本赛季各项目的轮次在走，赛事资讯跟着轮次更新，隔一屏就能看到推进到哪。</p>
          <dl class="svc__stats">
            <div class="svc__stat">
              <dt>项目分类</dt>
              <dd><span class="num">12</span> 个<span class="svc__hint">足球、篮球、排球为主轴</span></dd>
            </div>
            <div class="svc__stat">
              <dt>进失球区间</dt>
              <dd><span class="num">9</span> 类<span class="svc__hint">按时间段切分，逐段对照</span></dd>
            </div>
            <div class="svc__stat">
              <dt>单轮指标</dt>
              <dd><span class="num">26</span> 项<span class="svc__hint">覆盖出场、对抗与推进</span></dd>
            </div>
          </dl>
          <p class="svc__foot">本轮专题已上线，上一轮的合集同时可下载<span class="stamp stamp--gold" tabindex="0">两小时<span class="stamp__note">从终场哨响到摘要发布，含录入与双人对照两步</span></span></p>
          <a class="btn btn--line btn--sm" href="/notes/">读本轮资讯</a>
        </article>
      </div>
    </div>

    <figure class="services__band">
      <img class="media__img" src="{zhanqunpic:h:400w:1200}" width="1200" height="400" alt="云南山地等高线与抽象折线构成的深蓝图形，无具象地标" loading="lazy" decoding="async">
      <figcaption class="services__band-cap">高原等高线与轮次折线共用一套网格</figcaption>
    </figure>
  </section>

  <section class="rounds" data-reveal aria-labelledby="rounds-title">
    <div class="shell">
      <header class="section-head">
        <div class="section-head__group">
          <p class="eyebrow">轮次摘要</p>
          <h2 class="section-head__title" id="rounds-title">按轮次摊开，三类内容各有各的入口</h2>
        </div>
        <span class="section-head__line" aria-hidden="true"></span>
        <p class="section-head__meta">球员数据、轮次安排、案例合集分开摆放，找准再点</p>
      </header>

      <div class="rounds__flow">
        <article class="rcard rcard--data">
          <p class="rcard__tag tag tag--teal">本轮 · 球员数据</p>
          <h3 class="rcard__title">26 项指标逐人列开</h3>
          <p class="rcard__desc">出场时间、对抗成功率、关键传球与推进距离都在一张表里，横向滑动时姓名列固定不动，换人对比不用反复找行。</p>
          <ul class="rcard__list">
            <li>单场指标覆盖 <span class="num">26</span> 项</li>
            <li>足球、篮球、排球等 <span class="num">12</span> 个分类统一结构</li>
            <li>发布前经双人对照，单轮差错率控制在 <span class="num">0.3%</span> 以内</li>
          </ul>
          <p class="rcard__status"><span class="stamp" tabindex="0">本轮已补齐<span class="stamp__note">终场后两小时内完成录入与复核，标签时间即发布时刻</span></span></p>
          <a class="rcard__go" href="/notes/">看本轮球员数据 →</a>
        </article>

        <article class="rcard rcard--sched">
          <p class="rcard__tag tag tag--clay">上一轮 · 轮次安排</p>
          <h3 class="rcard__title">轮次怎么排，一眼看全</h3>
          <p class="rcard__desc">本赛季各项目的轮次推进顺序集中在一处，哪一轮已经打完、下一轮接在哪天，顺着编号往下读就清楚。</p>
          <p class="rcard__status"><span class="stamp" tabindex="0">已归档<span class="stamp__note">上一轮对阵结构与进失球区间已随合集一并发布</span></span></p>
          <a class="rcard__go" href="/notes/">进入轮次列表 →</a>
        </article>

        <article class="rcard rcard--case">
          <p class="rcard__tag tag tag--gold">案例合集</p>
          <h3 class="rcard__title">96 期专题，期期对一轮</h3>
          <p class="rcard__desc">每期挑出当轮反差最大的一段区间展开，写清起因与走势，累计下载 21,000 余次。</p>
          <p class="rcard__status"><span class="stamp stamp--gold" tabindex="0">可下载<span class="stamp__note">合集按轮次归档，随机附对照摘要一页</span></span></p>
          <a class="rcard__go" href="/experience/">取用合集 →</a>
        </article>
      </div>
    </div>
  </section>

  <section class="split" data-reveal aria-labelledby="split-title">
    <div class="shell">
      <header class="section-head">
        <div class="section-head__group">
          <p class="eyebrow">进失球分栏</p>
          <h2 class="section-head__title" id="split-title">分栏一摆，哪一段掉队当场看见</h2>
        </div>
        <span class="section-head__line" aria-hidden="true"></span>
        <p class="section-head__meta">按时间段切开的区间分布，横向滑动比对两侧</p>
      </header>

      <div class="split__layout">
        <figure class="split__media">
          <img class="media__img" src="{zhanqunpic:h:540w:960}" width="960" height="540" alt="半透明网格叠层覆盖的分栏示意图，孔雀绿与彝绣橙区分两侧区间" loading="lazy" decoding="async">
          <figcaption>左侧孔雀绿为进球区间，右侧彝绣橙为失球区间</figcaption>
        </figure>

        <div class="split__panel">
          <div class="tablewrap">
            <table class="datatable">
              <caption class="visually-hidden">单场赛事按时间段划分的进失球区间分布</caption>
              <thead>
                <tr>
                  <th scope="col">时间区间</th>
                  <th scope="col">甲队</th>
                  <th scope="col">乙队</th>
                  <th scope="col">净差</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">0–15 分</th>
                  <td class="num">12</td>
                  <td class="num">8</td>
                  <td class="num val-up">+4</td>
                </tr>
                <tr>
                  <th scope="row">16–30 分</th>
                  <td class="num">18</td>
                  <td class="num">15</td>
                  <td class="num val-up">+3</td>
                </tr>
                <tr>
                  <th scope="row">31–45 分</th>
                  <td class="num">24</td>
                  <td class="num">11</td>
                  <td class="num val-up">+13</td>
                </tr>
                <tr>
                  <th scope="row">46–60 分</th>
                  <td class="num">9</td>
                  <td class="num">21</td>
                  <td class="num val-down">−12</td>
                </tr>
                <tr>
                  <th scope="row">61–75 分</th>
                  <td class="num">16</td>
                  <td class="num">19</td>
                  <td class="num val-down">−3</td>
                </tr>
                <tr>
                  <th scope="row">76–90 分</th>
                  <td class="num">21</td>
                  <td class="num">14</td>
                  <td class="num val-up">+7</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p class="split__note">队名列固定在最左，表头随滚动留在顶部；手机上左右滑动即可把六段区间看完，不必来回缩放。净差用孔雀绿标正向、深橙红标负向，扫一眼就知道哪一段掉了链子。</p>
          <div class="split__actions">
            <a class="btn btn--primary" href="/experience/">打开完整对照表</a>
            <a class="btn btn--line" href="/faqs/">表格怎么用</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="flow" data-reveal aria-labelledby="flow-title">
    <div class="shell">
      <header class="section-head">
        <div class="section-head__group">
          <p class="eyebrow">数据怎么来</p>
          <h2 class="section-head__title" id="flow-title">从终场哨响到你手里的那张表</h2>
        </div>
        <span class="section-head__line" aria-hidden="true"></span>
      </header>

      <div class="flow__inner">
        <ol class="flow__steps">
          <li class="step">
            <span class="step__k num">01</span>
            <h3 class="step__title">采集</h3>
            <p class="step__desc">赛事数据组按轮次录入原始指标与发生时间点，单轮平均落进 26 项球员数据与 9 类进失球区间。</p>
          </li>
          <li class="step">
            <span class="step__k num">02</span>
            <h3 class="step__title">复核</h3>
            <p class="step__desc">校对组两人分头对照同一轮，出入当场标出再回查；单轮差错率控制在 0.3% 以内才放行。</p>
          </li>
          <li class="step">
            <span class="step__k num">03</span>
            <h3 class="step__title">发布</h3>
            <p class="step__desc">案例整理组写出摘要与专题，两小时内上线，并在每处摘要旁标出补齐时间，取用的人知道这是哪一刻的版本。</p>
          </li>
        </ol>

        <figure class="flow__media">
          <img class="media__img" src="{zhanqunpic:h:480w:640}" width="640" height="480" alt="球场边线与球鞋局部特写，侧光浅景深，画面右下留出空白" loading="lazy" decoding="async">
          <figcaption>14 人的编辑团队分赛事数据、案例整理、校对三个小组轮值</figcaption>
        </figure>
      </div>

      <p class="flow__foot">团队另与 8 家省级体育数据服务团队保持资料互校，遇到口径不一的情况回到原始记录逐条比对；站点自 2019 年起按赛季运营，已完成 11 个赛季的轮次归档。</p>
    </div>
  </section>

  <section class="feedback" data-reveal aria-labelledby="feedback-title">
    <div class="shell feedback__inner">
      <div class="feedback__copy">
        <p class="eyebrow">使用支持</p>
        <h2 id="feedback-title">数字对不上，或者不知道去哪一页找</h2>
        <p>赛后自己在核统计的人最容易碰到两种状况：某一项指标和你看到的转播字幕不一致，或者清楚要什么却找不到入口。两种都可以直接说，工作日 9:00-18:00 内回复，附上截图能省掉一轮来回问。</p>
        <p>会员权益什么时候生效、导出额度怎么算、表格在手机上为什么滑不动，这类问题在常见问答里基本都有现成答案，翻一眼往往比等回复快。</p>
      </div>
      <div class="feedback__links">
        <a class="fcard" href="/feedback/">
          <span class="fcard__k num">A</span>
          <span class="fcard__title">提交数据更正</span>
          <span class="fcard__desc">带上轮次、项目与截图，核对完会回到同一处更新。</span>
          <span class="fcard__go">去反馈页 →</span>
        </a>
        <a class="fcard" href="/faqs/">
          <span class="fcard__k num">B</span>
          <span class="fcard__title">翻常见问答</span>
          <span class="fcard__desc">补齐时效、权益查询、表格操作，按问题类型分好了。</span>
          <span class="fcard__go">看问答 →</span>
        </a>
        <a class="fcard" href="/about/">
          <span class="fcard__k num">C</span>
          <span class="fcard__title">了解团队与流程</span>
          <span class="fcard__desc">谁在做、怎么复核、资料跟谁互校，都写在介绍页里。</span>
          <span class="fcard__go">读品牌介绍 →</span>
        </a>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-hair: var(--line);
  --home-panel: var(--ink-700);
  --home-deep: var(--ink-900);
  color: var(--text);
}

.page-home .eyebrow {
  margin: 0 0 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold);
}

.page-home .section-head {
  margin-bottom: 32px;
}

.page-home .section-head__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--cream);
  max-width: 24em;
}

.page-home .section-head__meta {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 34em;
}

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

.page-home .hero {
  position: relative;
  padding: 28px 0 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(23, 176, 138, .13), transparent 58%),
    radial-gradient(circle at 6% 78%, rgba(226, 112, 58, .10), transparent 52%);
}

.page-home .hero__contour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

.page-home .hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--home-hair);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--steel);
}

.page-home .hero__status-txt {
  color: var(--text-dim);
}

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

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

.page-home .hero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-home .hero__lead h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--cream);
}

.page-home .hero__lede {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-home .hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--home-hair);
  list-style: none;
  font-size: 13px;
  color: var(--steel);
}

.page-home .hero__facts .num {
  font-family: var(--ff-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
}

.page-home .hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  overflow: hidden;
}

.page-home .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 222, 233, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 222, 233, .10) 1px, transparent 1px);
  background-size: 48px 48px;
}

.page-home .hero__media-cap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 8px 14px;
  background: rgba(10, 17, 32, .86);
  border-left: 1px solid var(--home-hair);
  border-bottom: 1px solid var(--home-hair);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--steel);
}

.page-home .hero__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 12px 16px;
  background: var(--home-deep);
  border-top: 1px solid var(--home-hair);
  border-right: 1px solid var(--home-hair);
}

.page-home .hero__badge-num {
  font-family: var(--ff-mono);
  font-size: 44px;
  line-height: .92;
  font-weight: 700;
  color: var(--clay);
}

.page-home .hero__badge-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--clay);
}

.page-home .hero__badge-label {
  font-size: 12px;
  color: var(--steel);
}

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

.page-home .entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px 20px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease;
}

.page-home .entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .18s ease;
}

.page-home .entry:hover,
.page-home .entry:focus-visible {
  border-color: var(--teal);
}

.page-home .entry:hover::before,
.page-home .entry:focus-visible::before {
  background: var(--teal);
}

.page-home .entry--accent::before {
  background: var(--clay);
}

.page-home .entry__k {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .entry__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .entry__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-home .entry__go {
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--teal);
}

.page-home .services {
  margin-top: 56px;
  padding-top: 52px;
  border-top: 1px solid var(--home-hair);
  background: var(--home-deep);
}

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

.page-home .svc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
}

.page-home .svc--live {
  background: linear-gradient(180deg, rgba(23, 176, 138, .09), transparent 46%), var(--home-panel);
}

.page-home .svc__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--cream);
}

.page-home .svc__intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-home .svc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--home-hair);
}

.page-home .svc__list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--home-hair);
}

.page-home .svc__idx {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--gold);
  padding-top: 2px;
}

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

.page-home .svc__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .svc__meta {
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
}

.page-home .svc__stats {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--home-hair);
}

.page-home .svc__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--home-hair);
}

.page-home .svc__stat dt {
  font-size: 13px;
  color: var(--steel);
}

.page-home .svc__stat dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .svc__stat dd .num {
  font-family: var(--ff-mono);
  font-size: 18px;
  color: var(--teal);
}

.page-home .svc__hint {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--steel);
  text-align: right;
}

.page-home .svc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-home .svc .btn {
  align-self: flex-start;
}

.page-home .services__band {
  position: relative;
  margin: 44px 0 0;
  aspect-ratio: 3 / 1;
  border-top: 1px solid var(--home-hair);
  border-bottom: 1px solid var(--home-hair);
  overflow: hidden;
}

.page-home .services__band img {
  opacity: .6;
}

.page-home .services__band-cap {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--steel);
}

.page-home .rounds {
  padding: 56px 0 8px;
}

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

.page-home .rcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
}

.page-home .rcard--data {
  border-left: 3px solid var(--teal);
}

.page-home .rcard--sched {
  background: rgba(226, 112, 58, .07);
}

.page-home .rcard--case {
  background: rgba(242, 193, 78, .07);
}

.page-home .rcard__tag {
  align-self: flex-start;
  margin: 0;
}

.page-home .rcard__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--cream);
}

.page-home .rcard__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-home .rcard__list {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--steel);
}

.page-home .rcard__list .num {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--teal);
}

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

.page-home .rcard__go {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-home .rcard__go:hover,
.page-home .rcard__go:focus-visible {
  border-bottom-color: var(--teal);
}

.page-home .split {
  padding: 56px 0;
  background: var(--home-deep);
  border-top: 1px solid var(--home-hair);
  border-bottom: 1px solid var(--home-hair);
}

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

.page-home .split__media {
  position: relative;
  margin: 0;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.page-home .split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 222, 233, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 222, 233, .09) 1px, transparent 1px);
  background-size: 40px 40px;
}

.page-home .split__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 8px 14px;
  background: rgba(10, 17, 32, .88);
  border-top: 1px solid var(--home-hair);
  font-size: 12px;
  color: var(--steel);
}

.page-home .split__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-home .split .tablewrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--home-hair);
  background: var(--ink-800);
  -webkit-overflow-scrolling: touch;
}

.page-home .split .datatable {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.page-home .split .datatable th,
.page-home .split .datatable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--home-hair);
  text-align: right;
  white-space: nowrap;
}

.page-home .split .datatable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--home-deep);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 12px;
}

.page-home .split .datatable tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--text-dim);
}

.page-home .split .datatable thead th:first-child,
.page-home .split .datatable tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--home-panel);
  text-align: left;
}

.page-home .split .datatable thead th:first-child {
  z-index: 4;
  background: var(--home-deep);
}

.page-home .split .datatable tbody tr:hover td,
.page-home .split .datatable tbody tr:hover th {
  background: rgba(23, 176, 138, .10);
}

.page-home .split .datatable td {
  color: var(--text);
}

.page-home .val-up {
  color: var(--teal);
}

.page-home .val-down {
  color: var(--alert);
}

.page-home .split__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--steel);
}

.page-home .split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-home .flow {
  padding: 56px 0;
}

.page-home .flow__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.page-home .flow__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--home-hair);
}

.page-home .step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--home-hair);
}

.page-home .step__k {
  grid-row: span 2;
  font-family: var(--ff-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--clay);
}

.page-home .step__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--cream);
}

.page-home .step__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-home .flow__media {
  position: relative;
  margin: 0;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.page-home .flow__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 14px;
  background: rgba(10, 17, 32, .86);
  border-top: 1px solid var(--home-hair);
  font-size: 12px;
  line-height: 1.6;
  color: var(--steel);
}

.page-home .flow__foot {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--home-hair);
  max-width: 46em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--steel);
}

.page-home .feedback {
  padding: 56px 0 72px;
  background: var(--home-deep);
  border-top: 1px solid var(--home-hair);
}

.page-home .feedback__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-home .feedback__copy h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--cream);
}

.page-home .feedback__copy p {
  margin: 0 0 12px;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-dim);
}

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

.page-home .fcard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--home-hair);
  background: var(--home-panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease;
}

.page-home .fcard:hover,
.page-home .fcard:focus-visible {
  border-color: var(--teal);
}

.page-home .fcard__k {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .fcard__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
}

.page-home .fcard__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--steel);
}

.page-home .fcard__go {
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--teal);
}

.page-home .stamp {
  position: relative;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--teal);
  color: var(--teal);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .04em;
  cursor: help;
  white-space: nowrap;
}

.page-home .stamp--gold {
  border-color: var(--gold);
  color: var(--gold);
}

.page-home .stamp__note {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  display: block;
  width: 250px;
  max-width: 74vw;
  padding: 10px 12px;
  border: 1px solid var(--home-hair);
  background: var(--home-deep);
  color: var(--text-dim);
  font-family: var(--ff-sans);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.page-home .stamp:hover .stamp__note,
.page-home .stamp:focus .stamp__note,
.page-home .stamp:focus-within .stamp__note {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-home [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}

.page-home [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (min-width: 640px) {
  .page-home .hero__entries {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .feedback__links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .page-home .hero__lead h1 {
    font-size: 38px;
  }

  .page-home .services__cols {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .page-home .rounds__flow {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .flow__inner {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .page-home .hero {
    padding: 36px 0 16px;
  }

  .page-home .hero__lead h1 {
    font-size: 44px;
    letter-spacing: -1px;
  }

  .page-home .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
  }

  .page-home .hero__lead {
    grid-column: span 5;
  }

  .page-home .hero__media {
    grid-column: span 7;
  }

  .page-home .hero__entries {
    grid-column: span 12;
    grid-template-columns: 4fr 5fr 3fr;
    gap: 24px;
    margin-top: 8px;
  }

  .page-home .section-head__title {
    font-size: 28px;
  }

  .page-home .rounds__flow {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
  }

  .page-home .rcard--data {
    grid-column: 1 / span 5;
  }

  .page-home .rcard--sched {
    grid-column: 6 / span 4;
    margin-top: 44px;
  }

  .page-home .rcard--case {
    grid-column: 10 / span 3;
    margin-top: 92px;
  }

  .page-home .split__layout {
    grid-template-columns: 5fr 7fr;
    gap: 28px;
    align-items: start;
  }

  .page-home .split__media {
    position: sticky;
    top: 76px;
  }

  .page-home .flow__inner {
    grid-template-columns: 7fr 5fr;
    gap: 28px;
  }

  .page-home .feedback__inner {
    grid-template-columns: 7fr 5fr;
    gap: 32px;
  }

  .page-home .feedback__links {
    grid-template-columns: 1fr;
  }

  .page-home .feedback__copy h2 {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-home .stamp__note {
    transition: none;
  }
}