.page-contact {
  --ch-line: rgba(28, 42, 69, 0.92);
  --ch-surface: rgba(18, 27, 46, 0.94);
  --ch-pad: 20px;
}

/* ---------- 面包屑 ---------- */
.page-contact .breadcrumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  padding-top: 16px;
}

.page-contact .breadcrumbs a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-contact .breadcrumbs a:hover,
.page-contact .breadcrumbs a:focus-visible {
  color: var(--neon);
  border-bottom-color: var(--neon);
}

.page-contact .breadcrumbs span[aria-current="page"] {
  color: var(--paper);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding-top: 30px;
  padding-bottom: 8px;
}

.page-contact .contact-hero__head {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.page-contact .contact-hero__lede {
  max-width: 60ch;
}

.page-contact .contact-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.page-contact .contact-hero__media {
  position: relative;
  margin: 30px 0 0;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.page-contact .contact-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 239, 228, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 239, 228, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
}

.page-contact .contact-hero__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 通道分流 ---------- */
.page-contact .channel-section {
  padding-top: 44px;
}

.page-contact .channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}

.page-contact .channel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px var(--ch-pad) 22px 26px;
  background: linear-gradient(180deg, var(--ch-surface), rgba(10, 16, 32, 0.96));
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}

.page-contact .channel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--neon);
}

.page-contact .channel--signal::before {
  background: var(--signal);
}

.page-contact .channel--blaze::before {
  background: var(--blaze);
}

.page-contact .channel:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 255, 143, 0.4);
}

.page-contact .channel--signal:hover {
  border-color: rgba(255, 194, 75, 0.42);
}

.page-contact .channel--blaze:hover {
  border-color: rgba(255, 90, 43, 0.45);
}

.page-contact .channel__tag {
  justify-self: start;
}

.page-contact .channel .h3 {
  margin: 0;
  color: var(--paper);
  font-size: 20px;
  line-height: 1.3;
}

.page-contact .channel .prose {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .channel__target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ch-line);
}

.page-contact .channel__target-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mist);
}

.page-contact .channel__target-val {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--neon);
  word-break: break-all;
}

.page-contact .channel--signal .channel__target-val {
  color: var(--signal);
}

.page-contact .channel--blaze .channel__target-val {
  color: var(--blaze);
}

/* ---------- 联系信息 ---------- */
.page-contact .info-section {
  padding-top: 48px;
}

.page-contact .info-list {
  margin: 24px 0 0;
  border-top: 1px solid var(--steel);
}

.page-contact .info-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--steel);
}

.page-contact .info-row__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mist);
}

.page-contact .info-row__main {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper);
  word-break: break-word;
}

.page-contact .info-row__note {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------- 提交清单 ---------- */
.page-contact .submit-section {
  padding-top: 48px;
}

.page-contact .submit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 26px;
}

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

.page-contact .field {
  display: grid;
  gap: 7px;
  padding: 15px 16px;
  background: rgba(10, 16, 32, 0.74);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}

.page-contact .field:hover,
.page-contact .field:focus-within {
  border-color: rgba(59, 255, 143, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 255, 143, 0.08);
  background: rgba(15, 59, 49, 0.28);
}

.page-contact .field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--signal);
}

.page-contact .field__value {
  font-size: 15px;
  line-height: 1.62;
  color: var(--paper);
}

.page-contact .submit-aside {
  padding: 22px var(--ch-pad);
  background: linear-gradient(160deg, rgba(15, 59, 49, 0.55), rgba(10, 16, 32, 0.9));
  border: 1px solid var(--ch-line);
  border-radius: var(--radius);
}

.page-contact .submit-aside__title {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--paper);
}

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

.page-contact .submit-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}

.page-contact .submit-step__num {
  font-size: 13px;
  color: var(--neon);
  padding-top: 2px;
}

.page-contact .submit-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 响应节奏 ---------- */
.page-contact .rhythm-section {
  padding-top: 48px;
}

.page-contact .rhythm-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--steel);
}

.page-contact .rhythm-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--steel);
}

.page-contact .rhythm-item__num {
  font-size: 12px;
  color: var(--neon);
  padding-top: 4px;
}

.page-contact .rhythm-item__body h3 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--paper);
}

.page-contact .rhythm-item__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--mist);
}

.page-contact .rhythm-item__time {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--blaze);
  border: 1px solid rgba(255, 90, 43, 0.4);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- 合作与建议 ---------- */
.page-contact .collab-section {
  padding-top: 48px;
}

.page-contact .collab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.page-contact .collab-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-contact .collab-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.74;
  color: var(--mist);
}

.page-contact .collab-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 2px;
  background: var(--neon);
}

.page-contact .collab-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.page-contact .collab-media {
  margin: 0;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.page-contact .collab-media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 备案信息 ---------- */
.page-contact .legal-section {
  padding-top: 52px;
  padding-bottom: 64px;
}

.page-contact .legal-list {
  margin: 24px 0 0;
  padding: 20px var(--ch-pad);
  border: 1px dashed var(--ch-line);
  border-radius: var(--radius);
  background: rgba(10, 16, 32, 0.6);
  display: grid;
  gap: 10px;
}

.page-contact .legal-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.page-contact .legal-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mist);
}

.page-contact .legal-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--paper);
  word-break: break-word;
}

.page-contact .legal-note {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 68ch;
}

.page-contact .legal-note a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 255, 143, 0.35);
  transition: border-color 180ms var(--ease);
}

.page-contact .legal-note a:hover,
.page-contact .legal-note a:focus-visible {
  border-bottom-color: var(--neon);
}

/* ---------- 断点 ---------- */
@media (max-width: 400px) {
  .page-contact .contact-hero__head .h-display {
    font-size: 34px;
  }

  .page-contact .channel {
    padding-left: 20px;
    padding-right: 16px;
  }
}

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

  .page-contact .channel:first-child {
    grid-column: span 2;
  }

  .page-contact .legal-row {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
  }
}

@media (min-width: 760px) {
  .page-contact .info-row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 26px;
    align-items: baseline;
    padding: 20px 0;
  }

  .page-contact .info-row__main {
    font-size: 18px;
  }

  .page-contact .rhythm-item {
    grid-template-columns: 44px minmax(0, 1fr) 130px;
    gap: 16px 20px;
    align-items: center;
  }

  .page-contact .rhythm-item__time {
    grid-column: 3;
    justify-self: end;
    margin-top: 0;
  }
}

@media (min-width: 900px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .channel:first-child {
    grid-column: span 1;
  }

  .page-contact .submit-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 34px;
    align-items: start;
  }
}

@media (min-width: 980px) {
  .page-contact .collab-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: center;
  }

  .page-contact .contact-hero__head {
    max-width: 820px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel,
  .page-contact .field,
  .page-contact .contact-hero__media::after {
    transition: none;
    animation: none;
  }

  .page-contact .channel:hover {
    transform: none;
  }
}
</style>
<<<END>>>

等等——我最后在 CSS 里不小心加了一个 `</style>` 标签。需要去掉。输出应该结束在 CSS 上，不需要任何额外的标签。

让我重新只输出 CSS 部分……不对，我需要一次性输出全部内容。让我修正一下。

实际上我需要把整个东西重新完整输出，并确保：1）HTML 部分正确，2）CSS 部分正确且不带 `</style>` 标签。

另外检查一下：我在 `hero` 的 `.h-display` 用了 `h-display` 这个类——共享的。没问题。

再看看 `.contact-hero__head .h-display` 这个选择器——`.h-display` 是共享类，作用域限定在 `.page-contact` 下面是可以的。

嗯，但在 `400px` 的媒体查询里写的是 `.page-contact .contact-hero__head .h-display` ——这没问题。

现在让我把所有内容正确地定稿。
<main id="main-content" class="page-contact">

  <div class="wrap">
    <nav class="breadcrumbs" aria-label="当前位置">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">联系我们</span>
    </nav>
  </div>

  <section class="section contact-hero" data-reveal>
    <div class="wrap">
      <div class="contact-hero__head">
        <p class="eyebrow">联系我们</p>
        <h1 class="h-display">找对人，<br>事情当天就有回音</h1>
        <p class="lede contact-hero__lede">
          完美体育赛事的每一个联系入口，都对应一类具体的事。比赛数据看着不对、关注球队想换、想引一段统计写进稿子，按下面的分类选一次，就能直接落到能处理它的同事手上，不用来回转述。
        </p>
        <div class="contact-hero__tags">
          <span class="tag tag--neon">工作时段内响应</span>
          <span class="tag tag--signal">数据疑问平均 4 小时给出结论</span>
        </div>
      </div>
      <figure class="media media--16x9 contact-hero__media">
        <img class="media__img" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="夜间赛场灯光下叠加数据网格与球场边线的示意图">
        <span class="media__frame" aria-hidden="true"></span>
      </figure>
    </div>
  </section>

  <section class="section channel-section" id="routes">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">先分流</p>
        <h2 class="h2">按事情的性质选一条通道</h2>
        <p class="prose">
          多数来信都落在三类里：面板上的数字和你看到的不一样、想用电话把话说清楚、以及长期合作与栏目建议。完美体育赛事问题反馈的主线走客服邮箱，合作类来信走站点邮箱，急事直接拨电话，选好之后处理速度会明显不一样。
        </p>
      </div>

      <div class="channel-grid">
        <article class="channel channel--neon" data-reveal>
          <span class="tag tag--neon channel__tag">平均 4 小时内给出复核结论</span>
          <h3 class="h3">面板数据与你看到的对不上</h3>
          <p class="prose">
            射门数、控球时长、传球成功率、轮次积分，任何一项和你手头记录不一致，都可以直接发邮件。把比赛轮次、对阵双方和具体指标写清楚，我们会调出同一场的记录逐项比对，结论连同依据一起回给你。
          </p>
          <p class="channel__target">
            <span class="channel__target-key">发往</span>
            <span class="channel__target-val">support@wonderful-play.com.cn</span>
          </p>
        </article>

        <article class="channel channel--signal" data-reveal>
          <span class="tag tag--signal channel__tag">工作时段内有人接听</span>
          <h3 class="h3">想直接说，不想打字</h3>
          <p class="prose">
            赛季密集的时候，一封邮件来回几轮不如一个电话。版面加载异常、订阅提醒收不到、检索筛出来的结果不对，拨过来把页面路径和现象说一下，当天就能定位。
          </p>
          <p class="channel__target">
            <span class="channel__target-key">拨打</span>
            <span class="channel__target-val">18761071305</span>
          </p>
        </article>

        <article class="channel channel--blaze" data-reveal>
          <span class="tag tag--blaze channel__tag">2 个工作日内回复</span>
          <h3 class="h3">引用、合作与栏目建议</h3>
          <p class="prose">
            媒体编辑要引数据、球迷社群想联合做一期专题、学校团队想拿统计口径做课堂材料、你希望我们新开某个联赛的观察栏目——这类来信请走站点邮箱，附上用途和大致时间，我们按内容排期回复。
          </p>
          <p class="channel__target">
            <span class="channel__target-key">发往</span>
            <span class="channel__target-val">info@wonderful-play.com.cn</span>
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="section info-section" id="channels">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">联系信息</p>
        <h2 class="h2">四个入口，各自管一段事</h2>
      </div>

      <dl class="info-list">
        <div class="info-row">
          <dt class="info-row__key">客服邮箱</dt>
          <dd class="info-row__val">
            <span class="info-row__main">support@wonderful-play.com.cn</span>
            <span class="info-row__note">数据疑问、订阅调整、提醒设置、站点使用障碍</span>
          </dd>
        </div>
        <div class="info-row">
          <dt class="info-row__key">站点邮箱</dt>
          <dd class="info-row__val">
            <span class="info-row__main">info@wonderful-play.com.cn</span>
            <span class="info-row__note">内容合作、数据引用、栏目建议、品牌相关事务</span>
          </dd>
        </div>
        <div class="info-row">
          <dt class="info-row__key">联系电话</dt>
          <dd class="info-row__val">
            <span class="info-row__main">18761071305</span>
            <span class="info-row__note">工作时段内接听，适合需要即时沟通的现场问题</span>
          </dd>
        </div>
        <div class="info-row">
          <dt class="info-row__key">办公地址</dt>
          <dd class="info-row__val">
            <span class="info-row__main">江西省南昌市红谷滩区金融大街1288号博能中心A座15层</span>
            <span class="info-row__note">如需寄送纸质材料，请先与站点邮箱确认收件安排</span>
          </dd>
        </div>
      </dl>
    </div>
  </section>

  <section class="section submit-section" id="submit">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">提交反馈</p>
        <h2 class="h2">把这几个字段写全，结论当天就能出来</h2>
        <p class="prose">
          同事拿到一封邮件后，第一步是还原你看到的那一场。你给的信息越具体，还原得越快。下面这几项按顺序写下来，基本就是我们需要的最少信息量。
        </p>
      </div>

      <div class="submit-grid">
        <ul class="field-list">
          <li class="field">
            <span class="field__label">比赛轮次与开赛时间</span>
            <span class="field__value">第 12 轮 · 08 月 17 日 20:00 场次</span>
          </li>
          <li class="field">
            <span class="field__label">对阵双方</span>
            <span class="field__value">主队名称与客队名称，写全称更稳妥</span>
          </li>
          <li class="field">
            <span class="field__label">有疑问的指标</span>
            <span class="field__value">射正次数 / 控球时长 / 传球成功率，一次只写一项更容易定位</span>
          </li>
          <li class="field">
            <span class="field__label">你记录到的数值</span>
            <span class="field__value">把另一处看到的数字原样写下，注明来源页面或截图时间</span>
          </li>
          <li class="field">
            <span class="field__label">你的称呼与回信邮箱</span>
            <span class="field__value">方便我们把结论直接回给你，不用你再找一遍</span>
          </li>
        </ul>

        <aside class="submit-aside" aria-label="提交之后会发生什么">
          <h3 class="h3 submit-aside__title">邮件发出去之后</h3>
          <ol class="submit-steps">
            <li class="submit-step">
              <span class="submit-step__num num">01</span>
              <p>系统回执带来一个受理编号，后续沟通带上它就行。</p>
            </li>
            <li class="submit-step">
              <span class="submit-step__num num">02</span>
              <p>同事调出同一场比赛的采集记录，与你写的数值逐项比对。</p>
            </li>
            <li class="submit-step">
              <span class="submit-step__num num">03</span>
              <p>回复里写清楚是哪一步出的偏差，以及页面上改了没有。</p>
            </li>
            <li class="submit-step">
              <span class="submit-step__num num">04</span>
              <p>同类问题反复出现时，我们会回头检查采集环节本身。</p>
            </li>
          </ol>
        </aside>
      </div>
    </div>
  </section>

  <section class="section rhythm-section" id="rhythm">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">响应节奏</p>
        <h2 class="h2">不同的来信，大概要等多久</h2>
        <p class="prose">
          工作时段内提交的来信当天进入队列，工作时段外提交的，会排到下一个工作时段的第一批。我们不承诺节假日值守，但每一封都会有人接手，不会石沉大海。
        </p>
      </div>

      <ol class="rhythm-list">
        <li class="rhythm-item" data-reveal>
          <span class="rhythm-item__num num">01</span>
          <div class="rhythm-item__body">
            <h3 class="h3">比赛数据疑问</h3>
            <p>工作时段内响应，平均 4 小时内给出复核结论；涉及多轮次交叉统计的，会先回一封进度说明。</p>
          </div>
          <span class="rhythm-item__time num">≈4 小时</span>
        </li>
        <li class="rhythm-item" data-reveal>
          <span class="rhythm-item__num num">02</span>
          <div class="rhythm-item__body">
            <h3 class="h3">订阅与提醒调整</h3>
            <p>换关注球队、改提醒频率、换接收渠道，一个工作日内处理完成，你会收到一条确认结果。</p>
          </div>
          <span class="rhythm-item__time num">1 个工作日</span>
        </li>
        <li class="rhythm-item" data-reveal>
          <span class="rhythm-item__num num">03</span>
          <div class="rhythm-item__body">
            <h3 class="h3">合作与内容建议</h3>
            <p>需要内部排期讨论，两个工作日内给出答复；如果涉及具体专题，我们会附上一份初步设想。</p>
          </div>
          <span class="rhythm-item__time num">2 个工作日</span>
        </li>
        <li class="rhythm-item" data-reveal>
          <span class="rhythm-item__num num">04</span>
          <div class="rhythm-item__body">
            <h3 class="h3">隐私与使用相关问询</h3>
            <p>涉及订阅信息、反馈记录的处理请求，按流程走完后答复，通常不超过三个工作日。</p>
          </div>
          <span class="rhythm-item__time num">3 个工作日</span>
        </li>
      </ol>
    </div>
  </section>

  <section class="section collab-section" id="collab">
    <div class="wrap collab-grid">
      <div class="collab-main">
        <p class="eyebrow">合作与内容建议</p>
        <h2 class="h2">写稿、做栏目、开新联赛，都可以谈</h2>
        <p class="prose">
          每年都有不少编辑、社群主理人和校园球队的读者来信，问能不能引用我们的统计、能不能一起做一期专题、能不能加上某个联赛的观察栏目。这些事我们很愿意聊，但需要你先说清楚用途。
        </p>
        <ul class="collab-list">
          <li>媒体引用：说明稿件主题、发布平台与需要的指标范围，我们会给出可直接使用的统计片段。</li>
          <li>联合专题：社群或校园团队提供观察视角，我们提供数据面板与复盘结构。</li>
          <li>栏目建议：想让我们长期跟踪某个联赛，写清楚你关注的球队和你想看到的指标。</li>
          <li>内容勘误：发现文章结论与面板数据不一致，同样走站点邮箱，我们优先处理。</li>
        </ul>
        <p class="collab-cta">
          <a class="btn btn--neon" href="/offerings/">了解数据服务</a>
          <a class="btn btn--ghost" href="/questions/">先看常见问题</a>
        </p>
      </div>
      <figure class="media media--4x3 collab-media" data-reveal>
        <img class="media__img" loading="lazy" decoding="async" src="{zhanqunpic:h:480w:720}" width="720" height="480" alt="球场中线与数据折线交织的抽象网格图形">
        <span class="media__frame" aria-hidden="true"></span>
      </figure>
    </div>
  </section>

  <section class="section legal-section" id="site-info">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">站点备案与基本信息</p>
        <h2 class="h2">归属与备案</h2>
      </div>

      <dl class="legal-list">
        <div class="legal-row">
          <dt>站点名称</dt>
          <dd>完美体育赛事</dd>
        </div>
        <div class="legal-row">
          <dt>访问域名</dt>
          <dd>wonderful-play.com.cn</dd>
        </div>
        <div class="legal-row">
          <dt>备案号</dt>
          <dd>赣ICP备64214920号-2</dd>
        </div>
      </dl>

      <p class="legal-note">
        与站点内容、数据使用、订阅提醒相关的约定，分别写在
        <a href="/privacy-center/">隐私中心</a> 与
        <a href="/disclaimer/">使用说明</a> 里，来信之前可以先看一眼。
        想找某一轮的专题与更新公告，直接去
        <a href="/column/">赛事专栏</a>。
      </p>
    </div>
  </section>

</main>

.page-contact {
  --ch-line: rgba(28, 42, 69, 0.92);
  --ch-surface: rgba(18, 27, 46, 0.94);
  --ch-pad: 20px;
}

/* ---------- 面包屑 ---------- */
.page-contact .breadcrumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  padding-top: 16px;
}

.page-contact .breadcrumbs a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-contact .breadcrumbs a:hover,
.page-contact .breadcrumbs a:focus-visible {
  color: var(--neon);
  border-bottom-color: var(--neon);
}

.page-contact .breadcrumbs span[aria-current="page"] {
  color: var(--paper);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding-top: 30px;
  padding-bottom: 8px;
}

.page-contact .contact-hero__head {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.page-contact .contact-hero__lede {
  max-width: 60ch;
}

.page-contact .contact-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.page-contact .contact-hero__media {
  position: relative;
  margin: 30px 0 0;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.page-contact .contact-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 239, 228, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 239, 228, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
}

.page-contact .contact-hero__media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 通道分流 ---------- */
.page-contact .channel-section {
  padding-top: 44px;
}

.page-contact .channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}

.page-contact .channel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px var(--ch-pad) 22px 26px;
  background: linear-gradient(180deg, var(--ch-surface), rgba(10, 16, 32, 0.96));
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}

.page-contact .channel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--neon);
}

.page-contact .channel--signal::before {
  background: var(--signal);
}

.page-contact .channel--blaze::before {
  background: var(--blaze);
}

.page-contact .channel:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 255, 143, 0.4);
}

.page-contact .channel--signal:hover {
  border-color: rgba(255, 194, 75, 0.42);
}

.page-contact .channel--blaze:hover {
  border-color: rgba(255, 90, 43, 0.45);
}

.page-contact .channel__tag {
  justify-self: start;
}

.page-contact .channel .h3 {
  margin: 0;
  color: var(--paper);
  font-size: 20px;
  line-height: 1.3;
}

.page-contact .channel .prose {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .channel__target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ch-line);
}

.page-contact .channel__target-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mist);
}

.page-contact .channel__target-val {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--neon);
  word-break: break-all;
}

.page-contact .channel--signal .channel__target-val {
  color: var(--signal);
}

.page-contact .channel--blaze .channel__target-val {
  color: var(--blaze);
}

/* ---------- 联系信息 ---------- */
.page-contact .info-section {
  padding-top: 48px;
}

.page-contact .info-list {
  margin: 24px 0 0;
  border-top: 1px solid var(--steel);
}

.page-contact .info-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--steel);
}

.page-contact .info-row__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mist);
}

.page-contact .info-row__main {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper);
  word-break: break-word;
}

.page-contact .info-row__note {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------- 提交清单 ---------- */
.page-contact .submit-section {
  padding-top: 48px;
}

.page-contact .submit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 26px;
}

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

.page-contact .field {
  display: grid;
  gap: 7px;
  padding: 15px 16px;
  background: rgba(10, 16, 32, 0.74);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}

.page-contact .field:hover,
.page-contact .field:focus-within {
  border-color: rgba(59, 255, 143, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 255, 143, 0.08);
  background: rgba(15, 59, 49, 0.28);
}

.page-contact .field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--signal);
}

.page-contact .field__value {
  font-size: 15px;
  line-height: 1.62;
  color: var(--paper);
}

.page-contact .submit-aside {
  padding: 22px var(--ch-pad);
  background: linear-gradient(160deg, rgba(15, 59, 49, 0.55), rgba(10, 16, 32, 0.9));
  border: 1px solid var(--ch-line);
  border-radius: var(--radius);
}

.page-contact .submit-aside__title {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--paper);
}

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

.page-contact .submit-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.page-contact .submit-step__num {
  font-size: 13px;
  color: var(--neon);
  padding-top: 2px;
}

.page-contact .submit-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 响应节奏 ---------- */
.page-contact .rhythm-section {
  padding-top: 48px;
}

.page-contact .rhythm-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--steel);
}

.page-contact .rhythm-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--steel);
}

.page-contact .rhythm-item__num {
  font-size: 12px;
  color: var(--neon);
  padding-top: 4px;
}

.page-contact .rhythm-item__body h3 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--paper);
}

.page-contact .rhythm-item__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--mist);
}

.page-contact .rhythm-item__time {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--blaze);
  border: 1px solid rgba(255, 90, 43, 0.4);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- 合作与建议 ---------- */
.page-contact .collab-section {
  padding-top: 48px;
}

.page-contact .collab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.page-contact .collab-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-contact .collab-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.74;
  color: var(--mist);
}

.page-contact .collab-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background: var(--neon);
}

.page-contact .collab-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.page-contact .collab-media {
  margin: 0;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.page-contact .collab-media .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 备案信息 ---------- */
.page-contact .legal-section {
  padding-top: 52px;
  padding-bottom: 64px;
}

.page-contact .legal-list {
  margin: 24px 0 0;
  padding: 20px var(--ch-pad);
  border: 1px dashed var(--ch-line);
  border-radius: var(--radius);
  background: rgba(10, 16, 32, 0.6);
  display: grid;
  gap: 12px;
}

.page-contact .legal-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.page-contact .legal-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mist);
}

.page-contact .legal-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--paper);
  word-break: break-word;
}

.page-contact .legal-note {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 68ch;
}

.page-contact .legal-note a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 255, 143, 0.35);
  transition: border-color 180ms var(--ease);
}

.page-contact .legal-note a:hover,
.page-contact .legal-note a:focus-visible {
  border-bottom-color: var(--neon);
}

/* ---------- 断点 ---------- */
@media (max-width: 400px) {
  .page-contact .contact-hero__head .h-display {
    font-size: 34px;
  }

  .page-contact .channel {
    padding-left: 20px;
    padding-right: 16px;
  }
}

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

  .page-contact .channel-grid > .channel:first-child {
    grid-column: span 2;
  }

  .page-contact .legal-row {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
  }
}

@media (min-width: 760px) {
  .page-contact .info-row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 26px;
    align-items: baseline;
    padding: 20px 0;
  }

  .page-contact .info-row__main {
    font-size: 18px;
  }

  .page-contact .rhythm-item {
    grid-template-columns: 44px minmax(0, 1fr) 140px;
    gap: 16px 20px;
    align-items: center;
  }

  .page-contact .rhythm-item__time {
    grid-column: 3;
    justify-self: end;
    margin-top: 0;
  }
}

@media (min-width: 900px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .channel-grid > .channel:first-child {
    grid-column: span 1;
  }

  .page-contact .submit-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 34px;
    align-items: start;
  }
}

@media (min-width: 980px) {
  .page-contact .collab-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: center;
  }

  .page-contact .contact-hero__head {
    max-width: 820px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel,
  .page-contact .field {
    transition: none;
    animation: none;
  }

  .page-contact .channel:hover {
    transform: none;
  }
}