.page-home {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 通用文本块 ---------- */
.page-home .band-head {
  max-width: 64ch;
}

.page-home .band-head__no {
  margin: 0 0 12px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--orange);
}

.page-home .band-head__title {
  margin: 0 0 14px;
  font-size: clamp(1.85rem, 5vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  font-weight: 800;
}

.page-home .band-head__lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: #3a464c;
  max-width: 58ch;
}

.page-home .band-head--onwine .band-head__no {
  color: var(--yellow);
}

.page-home .band-head--onwine .band-head__title {
  color: var(--paper);
}

.page-home .band-head--onwine .band-head__lead {
  color: rgba(247, 243, 234, 0.82);
}

.page-home .band-head--ondeep .band-head__no {
  color: var(--yellow);
}

.page-home .band-head--ondeep .band-head__title {
  color: var(--paper);
}

.page-home .band-head--ondeep .band-head__lead {
  color: rgba(247, 243, 234, 0.8);
}

.page-home .image-frame {
  margin: 0;
}

.page-home .btn--on-paper {
  color: var(--ink);
  border-color: rgba(26, 35, 40, 0.35);
}

.page-home .link-arrow {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: var(--paper);
  padding: calc(var(--header-h) + 30px) 0 0;
}

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

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

.page-home .home-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, rgba(11, 60, 74, 0.97) 0%, rgba(11, 60, 74, 0.86) 44%, rgba(18, 58, 90, 0.55) 100%);
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(30px, 6vw, 62px);
}

.page-home .home-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
}

.page-home .hero-steps {
  display: block;
  width: 108px;
  height: auto;
  margin-bottom: 18px;
}

.page-home .hero-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--yellow);
}

.page-home .hero-title {
  margin: 0 0 20px;
  font-size: clamp(2.45rem, 8.4vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  font-weight: 900;
}

.page-home .hero-sub {
  margin: 0 0 26px;
  max-width: 44ch;
  font-size: clamp(15px, 2.6vw, 17.5px);
  line-height: 1.85;
  color: rgba(247, 243, 234, 0.84);
}

/* 台阶目录 */
.page-home .terrace__title {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: rgba(247, 243, 234, 0.62);
}

.page-home .terrace__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(247, 243, 234, 0.24);
}

.page-home .terrace__item {
  border-bottom: 1px solid rgba(247, 243, 234, 0.24);
}

.page-home .terrace__item:nth-child(2) .terrace__link {
  padding-left: 12px;
}

.page-home .terrace__item:nth-child(3) .terrace__link {
  padding-left: 24px;
}

.page-home .terrace__item:nth-child(4) .terrace__link {
  padding-left: 36px;
}

.page-home .terrace__item:nth-child(5) .terrace__link {
  padding-left: 48px;
}

.page-home .terrace__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 12px;
  align-items: baseline;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.page-home .terrace__link:hover,
.page-home .terrace__link:focus-visible {
  background: rgba(232, 106, 51, 0.16);
}

.page-home .terrace__no {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--yellow);
}

.page-home .terrace__label {
  font-size: clamp(1rem, 2.6vw, 1.18rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-home .terrace__arrow {
  font-size: 14px;
  color: rgba(247, 243, 234, 0.6);
}

.page-home .terrace__desc {
  grid-column: 2 / -1;
  margin-top: 6px;
  max-height: none;
  opacity: 1;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.72);
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

/* ---------- 比分与数据 ---------- */
.page-home .home-matches {
  padding: clamp(46px, 7vw, 92px) 0;
  background: var(--paper);
}

.page-home .home-matches::before {
  content: "";
  display: block;
  height: 3px;
  width: 76px;
  margin: 0 auto clamp(30px, 5vw, 48px);
  background: linear-gradient(90deg, var(--yellow) 0 25%, var(--orange) 25% 50%, var(--turquoise) 50% 75%, var(--red) 75% 100%);
}

.page-home .matches__grid {
  display: grid;
  gap: 26px;
  margin-top: clamp(26px, 4vw, 40px);
}

.page-home .match {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: 0 14px 26px -22px rgba(10, 40, 52, 0.85);
}

.page-home .match + .match {
  margin-top: 14px;
}

.page-home .match__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 10px;
  padding: 16px 16px 14px;
}

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

.page-home .match__meta {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: #6b7a80;
}

.page-home .score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.page-home .score-row__team {
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  font-weight: 700;
}

.page-home .score-row__team--away {
  text-align: right;
}

.page-home .score-row__num {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  letter-spacing: 0.06em;
  color: var(--orange);
  white-space: nowrap;
}

.page-home .match__toggle {
  justify-self: start;
  font-size: 12px;
  color: #5c6b72;
  border-bottom: 1px dashed var(--line);
}

.page-home .match[open] .match__toggle {
  color: var(--orange);
  border-bottom-color: currentColor;
}

.page-home .match__body {
  padding: 12px 16px 18px;
  border-top: 1px dashed var(--line);
}

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

.page-home .stats li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: baseline;
  font-size: 14px;
}

.page-home .stats__k {
  color: #5c6b72;
}

.page-home .stats__v {
  font-family: var(--font-data);
  font-weight: 600;
  min-width: 3.4em;
  text-align: right;
}

.page-home .stats__v--home {
  color: var(--orange);
}

.page-home .matches__aside .image-frame {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-home .aside-note {
  margin-top: 18px;
  padding: 18px 18px 20px;
  background: var(--deep);
  color: var(--paper);
  border-radius: var(--radius);
}

.page-home .aside-note__t {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-home .aside-note__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.8);
}

.page-home .aside-note__list li {
  padding-left: 14px;
  position: relative;
}

.page-home .aside-note__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 2px;
  background: var(--orange);
}

/* ---------- 订阅 ---------- */
.page-home .home-sub {
  background: var(--wine);
  color: var(--paper);
  padding: clamp(46px, 7vw, 92px) 0;
}

.page-home .sub__grid {
  display: grid;
  gap: clamp(26px, 5vw, 44px);
}

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

.page-home .tier {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 15px 16px;
  background: rgba(247, 243, 234, 0.08);
  border: 1px solid rgba(247, 243, 234, 0.24);
  border-radius: var(--radius);
}

.page-home .tier__no {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--yellow);
  letter-spacing: 0.08em;
}

.page-home .tier__name {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.page-home .tier__text {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.75;
  color: rgba(247, 243, 234, 0.8);
}

.page-home .sub__foot {
  margin: 20px 0 22px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(247, 243, 234, 0.78);
}

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

.page-home .sub__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(247, 243, 234, 0.28);
  object-fit: cover;
}

.page-home .sub__figure figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.72);
}

/* ---------- 笔记 ---------- */
.page-home .home-notes {
  padding: clamp(46px, 7vw, 92px) 0;
}

.page-home .note-grid {
  display: grid;
  gap: 14px;
  margin-top: clamp(26px, 4vw, 38px);
}

.page-home .note-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--yellow);
  border-radius: var(--radius);
  padding: 18px;
}

.page-home .note-card:nth-child(2) {
  border-top-color: var(--red);
}

.page-home .note-card:nth-child(3) {
  border-top-color: var(--turquoise);
}

.page-home .note-card:nth-child(4) {
  border-top-color: var(--indigo);
}

.page-home .note-card__k {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.page-home .note-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #45535a;
}

.page-home .note-card__list li span {
  display: block;
  font-family: var(--font-data);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-bottom: 3px;
}

/* 导出卡 */
.page-home .export {
  margin-top: 22px;
  display: grid;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 34px -30px rgba(10, 40, 52, 0.9);
}

.page-home .export__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

.page-home .export__body {
  padding: 22px 20px 24px;
}

.page-home .export__title {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  line-height: 1.16;
  font-weight: 800;
}

.page-home .export__text {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.85;
  color: #3a464c;
}

.page-home .export__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #45535a;
}

.page-home .export__list li {
  padding-left: 14px;
  position: relative;
}

.page-home .export__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 2px;
  background: var(--turquoise);
}

/* ---------- 数字带 ---------- */
.page-home .home-numbers {
  background: var(--yellow);
  color: var(--ink);
  padding: clamp(32px, 5vw, 56px) 0;
}

.page-home .numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 18px;
}

.page-home .number {
  border-left: 2px solid rgba(26, 35, 40, 0.35);
  padding-left: 12px;
}

.page-home .number__v {
  display: block;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.8vw, 2rem);
  letter-spacing: 0.02em;
}

.page-home .number__l {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4a3a12;
}

/* ---------- 客户端说明 ---------- */
.page-home .home-client {
  background: var(--indigo);
  color: var(--paper);
  padding: clamp(46px, 7vw, 88px) 0;
}

.page-home .plates {
  display: grid;
  gap: 14px;
  margin-top: clamp(24px, 4vw, 34px);
}

.page-home .plate-x {
  padding: 16px 16px 18px;
  border: 1px solid rgba(247, 243, 234, 0.3);
  border-radius: var(--radius);
  background: rgba(247, 243, 234, 0.06);
}

.page-home .plate-x__t {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--yellow);
}

.page-home .plate-x__d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(247, 243, 234, 0.82);
}

.page-home .btn-row--center {
  margin-top: 26px;
}

/* ---------- 联系 ---------- */
.page-home .home-contact {
  padding: clamp(44px, 6vw, 78px) 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.page-home .contact__grid {
  display: grid;
  gap: 26px;
}

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

.page-home .contact__list li {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}

.page-home .contact__k {
  color: #6b7a80;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.page-home .contact__v {
  font-family: var(--font-data);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ---------- 断点 ---------- */
@media (min-width: 700px) {
  .page-home .note-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .page-home .export__media img {
    max-height: none;
    height: 100%;
  }
}

@media (min-width: 860px) {
  .page-home .home-hero {
    padding-top: calc(var(--header-h) + 48px);
  }

  .page-home .home-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
  }

  .page-home .terrace__desc {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
  }

  .page-home .terrace__link:hover .terrace__desc,
  .page-home .terrace__link:focus-visible .terrace__desc {
    max-height: 110px;
    opacity: 1;
    margin-top: 8px;
  }

  .page-home .export {
    grid-template-columns: 0.82fr 1.18fr;
  }

  .page-home .export__body {
    padding: 28px 26px 30px;
  }

  .page-home .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-home .matches__grid {
    grid-template-columns: 1.35fr 0.65fr;
    align-items: start;
  }

  .page-home .sub__grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
  }

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

@media (min-width: 1060px) {
  .page-home .numbers {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .terrace__link,
  .page-home .terrace__desc {
    transition: none;
  }

  .page-home .terrace__desc {
    max-height: none;
    opacity: 1;
    margin-top: 6px;
  }
}


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

  <section class="home-hero" data-hero>
    <div class="home-hero__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="雪山脚下的球场看台全景，围巾与旗帜在风里展开，画面中看不清任何面孔">
    </div>
    <div class="wrap home-hero__inner">
      <div class="home-hero__grid">
        <div class="home-hero__lede" data-reveal>
          <svg class="hero-steps" viewBox="0 0 120 28" aria-hidden="true" focusable="false">
            <rect x="0" y="20" width="20" height="8" fill="#F2C14E"></rect>
            <rect x="25" y="14" width="20" height="14" fill="#E86A33"></rect>
            <rect x="50" y="8" width="20" height="20" fill="#2A9D8F"></rect>
            <rect x="75" y="2" width="20" height="26" fill="#C44536"></rect>
          </svg>
          <p class="hero-kicker">看台视角 · 从高原出发</p>
          <h1 class="hero-title">坐进看台，<br>从赛前跟到赛后</h1>
          <p class="hero-sub">开心体育把一场球的来龙去脉摊开在你面前：开球前有观察，终场后有复盘，比分与数据对照随时翻得回来。你长期跟的那支球队，整个赛季都有人替你记着。</p>
          <div class="btn-row">
            <a class="btn btn--primary" href="/solutions/">看订阅方案</a>
            <a class="btn btn--ghost" href="/questions/">客户端常见说明</a>
          </div>
        </div>

        <nav class="terrace" aria-labelledby="terrace-title" data-reveal>
          <p class="terrace__title" id="terrace-title">从这里上台阶</p>
          <ol class="terrace__list">
            <li class="terrace__item">
              <a class="terrace__link" href="/solutions/">
                <span class="terrace__no">01</span>
                <span class="terrace__label">订阅与客户端</span>
                <span class="terrace__arrow" aria-hidden="true">→</span>
                <span class="terrace__desc">看台通行、球队跟队、赛季全览三档，按月或按赛季都行，手机和电脑同一份记录。</span>
              </a>
            </li>
            <li class="terrace__item">
              <a class="terrace__link" href="#matches">
                <span class="terrace__no">02</span>
                <span class="terrace__label">重点场次比分</span>
                <span class="terrace__arrow" aria-hidden="true">→</span>
                <span class="terrace__desc">比赛日按分钟刷新的比分条，点开就是整场六项数据对照。</span>
              </a>
            </li>
            <li class="terrace__item">
              <a class="terrace__link" href="/notes/">
                <span class="terrace__no">03</span>
                <span class="terrace__label">看台笔记</span>
                <span class="terrace__arrow" aria-hidden="true">→</span>
                <span class="terrace__desc">赛前观察、赛后复盘、数据笔记、客户端更新，四个栏目每赛季约 600 篇。</span>
              </a>
            </li>
            <li class="terrace__item">
              <a class="terrace__link" href="#export">
                <span class="terrace__no">04</span>
                <span class="terrace__label">长期跟队导出</span>
                <span class="terrace__arrow" aria-hidden="true">→</span>
                <span class="terrace__desc">按赛季和赛程往回翻，CSV 与 PDF 两种格式，个人留存或打印都方便。</span>
              </a>
            </li>
            <li class="terrace__item">
              <a class="terrace__link" href="/questions/">
                <span class="terrace__no">05</span>
                <span class="terrace__label">客户端常见说明</span>
                <span class="terrace__arrow" aria-hidden="true">→</span>
                <span class="terrace__desc">苹果设备上的订阅流程写在客户端常见说明第 3 条，两分钟就能对上号。</span>
              </a>
            </li>
          </ol>
        </nav>
      </div>
    </div>
  </section>

  <section class="home-matches" id="matches">
    <div class="wrap">
      <header class="band-head" data-reveal>
        <p class="band-head__no">01 / 比分与数据</p>
        <h2 class="band-head__title">重点场次，比分和数据摆在一块看</h2>
        <p class="band-head__lead">比赛日里比分按分钟更新，进球、控球、射门、角球、犯规、传球成功率六项指标在终场后 30 分钟内补齐。一场球看完就看完，不用在几个标签页之间来回找。</p>
      </header>

      <div class="matches__grid">
        <div class="matches__list">
          <details class="match" data-reveal>
            <summary class="match__summary">
              <span class="match__meta">联赛 · 第 22 轮</span>
              <span class="score-row">
                <span class="score-row__team">城关联队</span>
                <span class="score-row__num">2 : 1</span>
                <span class="score-row__team score-row__team--away">雪线队</span>
              </span>
              <span class="match__toggle">展开数据对照</span>
            </summary>
            <div class="match__body">
              <ul class="stats">
                <li><span class="stats__k">进球</span><span class="stats__v stats__v--home">2</span><span class="stats__v">1</span></li>
                <li><span class="stats__k">控球率</span><span class="stats__v stats__v--home">54%</span><span class="stats__v">46%</span></li>
                <li><span class="stats__k">射门</span><span class="stats__v stats__v--home">14</span><span class="stats__v">9</span></li>
                <li><span class="stats__k">角球</span><span class="stats__v stats__v--home">6</span><span class="stats__v">3</span></li>
                <li><span class="stats__k">犯规</span><span class="stats__v stats__v--home">11</span><span class="stats__v">14</span></li>
                <li><span class="stats__k">传球成功率</span><span class="stats__v stats__v--home">87%</span><span class="stats__v">81%</span></li>
              </ul>
            </div>
          </details>

          <details class="match" data-reveal>
            <summary class="match__summary">
              <span class="match__meta">杯赛 · 八强</span>
              <span class="score-row">
                <span class="score-row__team">河谷队</span>
                <span class="score-row__num">0 : 0</span>
                <span class="score-row__team score-row__team--away">城关联队</span>
              </span>
              <span class="match__toggle">展开数据对照</span>
            </summary>
            <div class="match__body">
              <ul class="stats">
                <li><span class="stats__k">进球</span><span class="stats__v stats__v--home">0</span><span class="stats__v">0</span></li>
                <li><span class="stats__k">控球率</span><span class="stats__v stats__v--home">41%</span><span class="stats__v">59%</span></li>
                <li><span class="stats__k">射门</span><span class="stats__v stats__v--home">7</span><span class="stats__v">16</span></li>
                <li><span class="stats__k">角球</span><span class="stats__v stats__v--home">2</span><span class="stats__v">8</span></li>
                <li><span class="stats__k">犯规</span><span class="stats__v stats__v--home">17</span><span class="stats__v">10</span></li>
                <li><span class="stats__k">传球成功率</span><span class="stats__v stats__v--home">76%</span><span class="stats__v">89%</span></li>
              </ul>
            </div>
          </details>

          <details class="match" data-reveal>
            <summary class="match__summary">
              <span class="match__meta">洲际赛事 · 小组赛</span>
              <span class="score-row">
                <span class="score-row__team">雪线队</span>
                <span class="score-row__num">3 : 2</span>
                <span class="score-row__team score-row__team--away">高原城队</span>
              </span>
              <span class="match__toggle">展开数据对照</span>
            </summary>
            <div class="match__body">
              <ul class="stats">
                <li><span class="stats__k">进球</span><span class="stats__v stats__v--home">3</span><span class="stats__v">2</span></li>
                <li><span class="stats__k">控球率</span><span class="stats__v stats__v--home">48%</span><span class="stats__v">52%</span></li>
                <li><span class="stats__k">射门</span><span class="stats__v stats__v--home">18</span><span class="stats__v">12</span></li>
                <li><span class="stats__k">角球</span><span class="stats__v stats__v--home">9</span><span class="stats__v">4</span></li>
                <li><span class="stats__k">犯规</span><span class="stats__v stats__v--home">13</span><span class="stats__v">15</span></li>
                <li><span class="stats__k">传球成功率</span><span class="stats__v stats__v--home">83%</span><span class="stats__v">85%</span></li>
              </ul>
            </div>
          </details>
        </div>

        <aside class="matches__aside" data-reveal>
          <figure class="image-frame image-frame--wide">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="半透明的比分条与球队数据图表叠在一起，关键数字用暖橙高亮" loading="lazy" decoding="async">
            <figcaption class="image-frame__caption">比分与数据同屏对照：左边是赛况，右边是六项指标。</figcaption>
          </figure>
          <div class="aside-note">
            <p class="aside-note__t">一场球看完，还差三件事</p>
            <ul class="aside-note__list">
              <li>赛前看阵型与伤停，知道该盯哪条边。</li>
              <li>赛中看控球与射门，判断走势有没有反转。</li>
              <li>赛后看传球成功率与犯规，复盘赢在哪、丢在哪。</li>
            </ul>
            <a class="link-arrow" href="/notes/">去读赛后复盘 →</a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="home-sub">
    <div class="wrap">
      <div class="sub__grid">
        <div data-reveal>
          <header class="band-head band-head--onwine">
            <p class="band-head__no">02 / 订阅与使用记录</p>
            <h2 class="band-head__title">订一次，下次回来不用重新找</h2>
            <p class="band-head__lead">你上次停在哪场球、哪篇笔记、哪个订阅内容，使用记录入口都留着，默认展示最近 30 天的浏览与订阅轨迹。换手机、换电脑，登进去还是那一份。</p>
          </header>

          <ul class="tiers">
            <li class="tier">
              <span class="tier__no">A</span>
              <div>
                <p class="tier__name">看台通行</p>
                <p class="tier__text">偶尔打开看看比分和笔记，按月订阅，轻量浏览不绑人。</p>
              </div>
            </li>
            <li class="tier">
              <span class="tier__no">B</span>
              <div>
                <p class="tier__name">球队跟队</p>
                <p class="tier__text">只跟一支队，整个赛季的赛程、数据对照和笔记按你的主队归拢好。</p>
              </div>
            </li>
            <li class="tier">
              <span class="tier__no">C</span>
              <div>
                <p class="tier__name">赛季全览</p>
                <p class="tier__text">多队同时看，做数据对照和赛程比对，适合社群组织者和重度球迷。</p>
              </div>
            </li>
          </ul>

          <p class="sub__foot">三档都可以按月或按赛季选择，先挑一条最贴近你观赛习惯的路。</p>
          <div class="btn-row">
            <a class="btn btn--solid" href="/solutions/">进入订阅与客户端</a>
            <a class="btn btn--ghost" href="/questions/">苹果设备订阅流程</a>
          </div>
        </div>

        <figure class="sub__figure" data-reveal>
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="看台上有人举起围巾助威的手部特写，背景是被风吹起的旗面，画面中看不清任何面孔" loading="lazy" decoding="async">
          <figcaption>一个赛季很长，把该记的都记下来，回来就有得翻。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="home-notes">
    <div class="wrap">
      <header class="band-head" data-reveal>
        <p class="band-head__no">03 / 看台笔记</p>
        <h2 class="band-head__title">每场球都留下点什么</h2>
        <p class="band-head__lead">四个栏目覆盖一场比赛的完整呼吸：开球前的判断、终场后的复盘、看得懂的数据拆解，以及客户端每次更新后值得留意的变化。内容库里已经攒下 3200 篇赛况与数据笔记，28 支球队各有长期档案。</p>
      </header>

      <div class="note-grid">
        <article class="note-card" data-reveal>
          <p class="note-card__k">赛前观察</p>
          <ul class="note-card__list">
            <li><span>开球前两日</span>阵型轮换与伤停名单的提前量</li>
            <li><span>开球前四小时</span>首发公布后，哪一侧会被反复冲击</li>
          </ul>
        </article>
        <article class="note-card" data-reveal>
          <p class="note-card__k">赛后复盘</p>
          <ul class="note-card__list">
            <li><span>终场当夜</span>比分之外，转折点出现在第几分钟</li>
            <li><span>次日</span>换人调整前后的数据变化</li>
          </ul>
        </article>
        <article class="note-card" data-reveal>
          <p class="note-card__k">数据笔记</p>
          <ul class="note-card__list">
            <li><span>每周固定</span>六项指标横向对照，找出被忽略的那一项</li>
            <li><span>阶段小结</span>连续几轮的传球成功率走势</li>
          </ul>
        </article>
        <article class="note-card" data-reveal>
          <p class="note-card__k">客户端更新</p>
          <ul class="note-card__list">
            <li><span>版本发布后</span>新增了什么，哪些入口换了位置</li>
            <li><span>发布一周内</span>常见问题的集中解答</li>
          </ul>
        </article>
      </div>

      <article class="export" id="export" data-reveal>
        <div class="export__media">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="按赛季排列的纸质文件夹与目录标签整齐摊开，纸面带颗粒质感" loading="lazy" decoding="async">
        </div>
        <div class="export__body">
          <p class="band-head__no">长期跟队</p>
          <h3 class="export__title">一整季的跟队记录，打包带走</h3>
          <p class="export__text">长期跟一支球队的球迷导出页面加了目录直达：按赛季、按赛程、按球队目录三种方式往回翻，把看过、订阅过、写过的内容挑出来，生成 CSV 或 PDF。赛后想打印贴在墙上，或者留作自己的赛季档案，都可以。</p>
          <ul class="export__list">
            <li>按赛季回溯：整个赛季的赛程与结果一条线排开</li>
            <li>按赛程回溯：单场比赛的比分、数据与相关笔记一起走</li>
            <li>按球队目录：一支队的历史记录集中在一个入口</li>
          </ul>
          <div class="btn-row">
            <a class="btn btn--primary" href="/solutions/">查看导出与订阅</a>
            <a class="btn btn--ghost btn--on-paper" href="/notes/">翻看台笔记</a>
          </div>
        </div>
      </article>
    </div>
  </section>

  <section class="home-numbers">
    <div class="wrap">
      <div class="numbers" data-reveal>
        <div class="number">
          <span class="number__v">52万</span>
          <span class="number__l">球迷用户一起看球</span>
        </div>
        <div class="number">
          <span class="number__v">6.8万</span>
          <span class="number__l">长期跟队用户</span>
        </div>
        <div class="number">
          <span class="number__v">3200</span>
          <span class="number__l">赛况与数据笔记</span>
        </div>
        <div class="number">
          <span class="number__v">28</span>
          <span class="number__l">支球队的长期档案</span>
        </div>
        <div class="number">
          <span class="number__v">120</span>
          <span class="number__l">家球迷社群内容合作</span>
        </div>
        <div class="number">
          <span class="number__v">18</span>
          <span class="number__l">个地方看台组织</span>
        </div>
      </div>
    </div>
  </section>

  <section class="home-client" id="client">
    <div class="wrap wrap--narrow">
      <header class="band-head band-head--ondeep" data-reveal>
        <p class="band-head__no">04 / 客户端说明</p>
        <h2 class="band-head__title">手机上卡住了，先看第 3 条</h2>
        <p class="band-head__lead">客户端常见说明一共 12 条，苹果设备打开开心体育之后的订阅流程就写在第 3 条。从登录到通知开关，从导出到兼容版本，多数问题在那儿能自己解决，不必等回复。</p>
      </header>

      <div class="plates">
        <div class="plate-x" data-reveal>
          <p class="plate-x__t">第 3 条</p>
          <p class="plate-x__d">苹果设备订阅流程：进入订阅页之后每一步该点什么，配着说明照着做就行。</p>
        </div>
        <div class="plate-x" data-reveal>
          <p class="plate-x__t">能跑起来的版本</p>
          <p class="plate-x__d">iOS 15 及以上、Android 10 及以上，桌面端支持主流浏览器最近两个大版本。</p>
        </div>
        <div class="plate-x" data-reveal>
          <p class="plate-x__t">找得到人</p>
          <p class="plate-x__d">工作日 10:00-18:00 通过邮箱和电话回复；订阅与客户端问题先翻第 3 条，通常更快。</p>
        </div>
      </div>

      <div class="btn-row btn-row--center">
        <a class="btn btn--solid" href="/questions/">打开客户端常见说明</a>
      </div>
    </div>
  </section>

  <section class="home-contact">
    <div class="wrap">
      <div class="contact__grid">
        <div data-reveal>
          <p class="band-head__no">05 / 找到看台</p>
          <h2 class="band-head__title">想聊合作，或者只想确认一件事</h2>
          <p class="band-head__lead">地方看台组织、球迷社群、内容合作，都可以直接找过来。客服在工作日 10:00-18:00 值班，邮件与电话都有人接。</p>
          <div class="btn-row">
            <a class="btn btn--primary" href="/find-us/">看联系方式</a>
            <a class="btn btn--ghost btn--on-paper" href="/introduction/">了解看台故事</a>
          </div>
        </div>
        <ul class="contact__list" data-reveal>
          <li><span class="contact__k">客服邮箱</span><span class="contact__v">info@cheer-kaixin.com.cn</span></li>
          <li><span class="contact__k">联系电话</span><span class="contact__v">15740986163</span></li>
          <li><span class="contact__k">回复时间</span><span class="contact__v">工作日 10:00-18:00</span></li>
          <li><span class="contact__k">运营地址</span><span class="contact__v">西藏省拉萨市城关区江苏路32号</span></li>
          <li><span class="contact__k">备案号</span><span class="contact__v">藏ICP备15524949号</span></li>
        </ul>
      </div>
    </div>
  </section>

</main>

.page-home {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 通用文本块 ---------- */
.page-home .band-head {
  max-width: 64ch;
}

.page-home .band-head__no {
  margin: 0 0 12px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--orange);
}

.page-home .band-head__title {
  margin: 0 0 14px;
  font-size: clamp(1.85rem, 5vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  font-weight: 800;
}

.page-home .band-head__lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: #3a464c;
  max-width: 58ch;
}

.page-home .band-head--onwine .band-head__no {
  color: var(--yellow);
}

.page-home .band-head--onwine .band-head__title {
  color: var(--paper);
}

.page-home .band-head--onwine .band-head__lead {
  color: rgba(247, 243, 234, 0.82);
}

.page-home .band-head--ondeep .band-head__no {
  color: var(--yellow);
}

.page-home .band-head--ondeep .band-head__title {
  color: var(--paper);
}

.page-home .band-head--ondeep .band-head__lead {
  color: rgba(247, 243, 234, 0.8);
}

.page-home .image-frame {
  margin: 0;
}

.page-home .btn--on-paper {
  color: var(--ink);
  border-color: rgba(26, 35, 40, 0.35);
}

.page-home .link-arrow {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: var(--paper);
  padding: calc(var(--header-h) + 30px) 0 0;
}

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

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

.page-home .home-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, rgba(11, 60, 74, 0.97) 0%, rgba(11, 60, 74, 0.86) 44%, rgba(18, 58, 90, 0.55) 100%);
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(30px, 6vw, 62px);
}

.page-home .home-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
}

.page-home .hero-steps {
  display: block;
  width: 108px;
  height: auto;
  margin-bottom: 18px;
}

.page-home .hero-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--yellow);
}

.page-home .hero-title {
  margin: 0 0 20px;
  font-size: clamp(2.45rem, 8.4vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  font-weight: 900;
}

.page-home .hero-sub {
  margin: 0 0 26px;
  max-width: 44ch;
  font-size: clamp(15px, 2.6vw, 17.5px);
  line-height: 1.85;
  color: rgba(247, 243, 234, 0.84);
}

/* 台阶目录 */
.page-home .terrace__title {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: rgba(247, 243, 234, 0.62);
}

.page-home .terrace__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(247, 243, 234, 0.24);
}

.page-home .terrace__item {
  border-bottom: 1px solid rgba(247, 243, 234, 0.24);
}

.page-home .terrace__item:nth-child(2) .terrace__link {
  padding-left: 12px;
}

.page-home .terrace__item:nth-child(3) .terrace__link {
  padding-left: 24px;
}

.page-home .terrace__item:nth-child(4) .terrace__link {
  padding-left: 36px;
}

.page-home .terrace__item:nth-child(5) .terrace__link {
  padding-left: 48px;
}

.page-home .terrace__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 12px;
  align-items: baseline;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.page-home .terrace__link:hover,
.page-home .terrace__link:focus-visible {
  background: rgba(232, 106, 51, 0.16);
}

.page-home .terrace__no {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--yellow);
}

.page-home .terrace__label {
  font-size: clamp(1rem, 2.6vw, 1.18rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-home .terrace__arrow {
  font-size: 14px;
  color: rgba(247, 243, 234, 0.6);
}

.page-home .terrace__desc {
  grid-column: 2 / -1;
  margin-top: 6px;
  max-height: none;
  opacity: 1;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.72);
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

/* ---------- 比分与数据 ---------- */
.page-home .home-matches {
  padding: clamp(46px, 7vw, 92px) 0;
  background: var(--paper);
}

.page-home .home-matches::before {
  content: "";
  display: block;
  height: 3px;
  width: 76px;
  margin: 0 auto clamp(30px, 5vw, 48px);
  background: linear-gradient(90deg, var(--yellow) 0 25%, var(--orange) 25% 50%, var(--turquoise) 50% 75%, var(--red) 75% 100%);
}

.page-home .matches__grid {
  display: grid;
  gap: 26px;
  margin-top: clamp(26px, 4vw, 40px);
}

.page-home .match {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: 0 14px 26px -22px rgba(10, 40, 52, 0.85);
}

.page-home .match + .match {
  margin-top: 14px;
}

.page-home .match__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 10px;
  padding: 16px 16px 14px;
}

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

.page-home .match__meta {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: #6b7a80;
}

.page-home .score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.page-home .score-row__team {
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  font-weight: 700;
}

.page-home .score-row__team--away {
  text-align: right;
}

.page-home .score-row__num {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  letter-spacing: 0.06em;
  color: var(--orange);
  white-space: nowrap;
}

.page-home .match__toggle {
  justify-self: start;
  font-size: 12px;
  color: #5c6b72;
  border-bottom: 1px dashed var(--line);
}

.page-home .match[open] .match__toggle {
  color: var(--orange);
  border-bottom-color: currentColor;
}

.page-home .match__body {
  padding: 12px 16px 18px;
  border-top: 1px dashed var(--line);
}

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

.page-home .stats li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: baseline;
  font-size: 14px;
}

.page-home .stats__k {
  color: #5c6b72;
}

.page-home .stats__v {
  font-family: var(--font-data);
  font-weight: 600;
  min-width: 3.4em;
  text-align: right;
}

.page-home .stats__v--home {
  color: var(--orange);
}

.page-home .matches__aside .image-frame {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-home .aside-note {
  margin-top: 18px;
  padding: 18px 18px 20px;
  background: var(--deep);
  color: var(--paper);
  border-radius: var(--radius);
}

.page-home .aside-note__t {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-home .aside-note__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.8);
}

.page-home .aside-note__list li {
  padding-left: 14px;
  position: relative;
}

.page-home .aside-note__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 2px;
  background: var(--orange);
}

/* ---------- 订阅 ---------- */
.page-home .home-sub {
  background: var(--wine);
  color: var(--paper);
  padding: clamp(46px, 7vw, 92px) 0;
}

.page-home .sub__grid {
  display: grid;
  gap: clamp(26px, 5vw, 44px);
}

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

.page-home .tier {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 15px 16px;
  background: rgba(247, 243, 234, 0.08);
  border: 1px solid rgba(247, 243, 234, 0.24);
  border-radius: var(--radius);
}

.page-home .tier__no {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--yellow);
  letter-spacing: 0.08em;
}

.page-home .tier__name {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.page-home .tier__text {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.75;
  color: rgba(247, 243, 234, 0.8);
}

.page-home .sub__foot {
  margin: 20px 0 22px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(247, 243, 234, 0.78);
}

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

.page-home .sub__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(247, 243, 234, 0.28);
  object-fit: cover;
}

.page-home .sub__figure figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.72);
}

/* ---------- 笔记 ---------- */
.page-home .home-notes {
  padding: clamp(46px, 7vw, 92px) 0;
}

.page-home .note-grid {
  display: grid;
  gap: 14px;
  margin-top: clamp(26px, 4vw, 38px);
}

.page-home .note-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--yellow);
  border-radius: var(--radius);
  padding: 18px;
}

.page-home .note-card:nth-child(2) {
  border-top-color: var(--red);
}

.page-home .note-card:nth-child(3) {
  border-top-color: var(--turquoise);
}

.page-home .note-card:nth-child(4) {
  border-top-color: var(--indigo);
}

.page-home .note-card__k {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.page-home .note-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #45535a;
}

.page-home .note-card__list li span {
  display: block;
  font-family: var(--font-data);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-bottom: 3px;
}

/* 导出卡 */
.page-home .export {
  margin-top: 22px;
  display: grid;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 34px -30px rgba(10, 40, 52, 0.9);
}

.page-home .export__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

.page-home .export__body {
  padding: 22px 20px 24px;
}

.page-home .export__title {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  line-height: 1.16;
  font-weight: 800;
}

.page-home .export__text {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.85;
  color: #3a464c;
}

.page-home .export__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #45535a;
}

.page-home .export__list li {
  padding-left: 14px;
  position: relative;
}

.page-home .export__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 2px;
  background: var(--turquoise);
}

/* ---------- 数字带 ---------- */
.page-home .home-numbers {
  background: var(--yellow);
  color: var(--ink);
  padding: clamp(32px, 5vw, 56px) 0;
}

.page-home .numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 18px;
}

.page-home .number {
  border-left: 2px solid rgba(26, 35, 40, 0.35);
  padding-left: 12px;
}

.page-home .number__v {
  display: block;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.8vw, 2rem);
  letter-spacing: 0.02em;
}

.page-home .number__l {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4a3a12;
}

/* ---------- 客户端说明 ---------- */
.page-home .home-client {
  background: var(--indigo);
  color: var(--paper);
  padding: clamp(46px, 7vw, 88px) 0;
}

.page-home .plates {
  display: grid;
  gap: 14px;
  margin-top: clamp(24px, 4vw, 34px);
}

.page-home .plate-x {
  padding: 16px 16px 18px;
  border: 1px solid rgba(247, 243, 234, 0.3);
  border-radius: var(--radius);
  background: rgba(247, 243, 234, 0.06);
}

.page-home .plate-x__t {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--yellow);
}

.page-home .plate-x__d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(247, 243, 234, 0.82);
}

.page-home .btn-row--center {
  margin-top: 26px;
}

/* ---------- 联系 ---------- */
.page-home .home-contact {
  padding: clamp(44px, 6vw, 78px) 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.page-home .contact__grid {
  display: grid;
  gap: 26px;
}

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

.page-home .contact__list li {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}

.page-home .contact__k {
  color: #6b7a80;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.page-home .contact__v {
  font-family: var(--font-data);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ---------- 断点 ---------- */
@media (min-width: 700px) {
  .page-home .note-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .page-home .export__media img {
    max-height: none;
    height: 100%;
  }
}

@media (min-width: 860px) {
  .page-home .home-hero {
    padding-top: calc(var(--header-h) + 48px);
  }

  .page-home .home-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
  }

  .page-home .terrace__desc {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
  }

  .page-home .terrace__link:hover .terrace__desc,
  .page-home .terrace__link:focus-visible .terrace__desc {
    max-height: 110px;
    opacity: 1;
    margin-top: 8px;
  }

  .page-home .export {
    grid-template-columns: 0.82fr 1.18fr;
  }

  .page-home .export__body {
    padding: 28px 26px 30px;
  }

  .page-home .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-home .matches__grid {
    grid-template-columns: 1.35fr 0.65fr;
    align-items: start;
  }

  .page-home .sub__grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
  }

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

@media (min-width: 1060px) {
  .page-home .numbers {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .terrace__link,
  .page-home .terrace__desc {
    transition: none;
  }

  .page-home .terrace__desc {
    max-height: none;
    opacity: 1;
    margin-top: 6px;
  }
}