.page-contact {
  --contact-rule: 1px solid var(--c-line);
  --contact-pad: clamp(22px, 3.2vw, 40px);
}

/* ---------- 面包屑与首屏留白 ---------- */
.page-contact .contact-crumb {
  padding-top: clamp(96px, 13vw, 140px);
}

.page-contact .breadcrumb {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.page-contact .breadcrumb a {
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.page-contact .breadcrumb a:hover {
  color: var(--c-lime);
  border-bottom-color: var(--c-lime);
}

.page-contact .breadcrumb [aria-current="page"] {
  color: var(--c-white);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding-top: clamp(24px, 4vw, 48px);
}

.page-contact .contact-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.page-contact .contact-hero__head .eyebrow {
  margin-bottom: 16px;
}

.page-contact .contact-hero__lead {
  margin-top: 22px;
  max-width: 36em;
  color: var(--c-muted);
}

.page-contact .contact-hero__mark {
  margin: 0;
  justify-self: start;
  width: min(220px, 52vw);
  text-align: center;
}

.page-contact .contact-hero__mark img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  box-shadow: 0 0 0 8px rgba(16, 42, 66, .55);
}

.page-contact .contact-hero__mark figcaption {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--c-muted);
}

/* ---------- 三张资料卡 ---------- */
.page-contact .contact-channels {
  margin-top: clamp(40px, 6vw, 76px);
  border: var(--contact-rule);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26, 58, 84, .62), rgba(16, 42, 66, .42));
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

.page-contact .contact-chan {
  padding: var(--contact-pad);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.page-contact .contact-chan + .contact-chan {
  border-top: var(--contact-rule);
}

.page-contact .contact-chan__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-white);
  margin: 10px 0 14px;
}

.page-contact .contact-chan__value {
  font-family: var(--font-mono);
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.5;
  color: var(--c-lime);
  word-break: break-all;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-left: 2px solid var(--c-lime);
  background: rgba(200, 255, 61, .06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  user-select: all;
}

.page-contact .contact-chan__value--wide {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-white);
  border-left-color: var(--c-violet);
  background: rgba(124, 92, 255, .08);
}

.page-contact .contact-chan:nth-child(2) .contact-chan__value {
  color: var(--c-orange);
  border-left-color: var(--c-orange);
  background: rgba(255, 122, 47, .08);
}

.page-contact .contact-chan__desc {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
}

.page-contact .contact-chan__hint {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-muted);
  padding-top: 14px;
  border-top: 1px dashed rgba(39, 80, 110, .85);
  transition: color var(--dur) var(--ease-out);
}

.page-contact .contact-chan:hover,
.page-contact .contact-chan:focus-within {
  background: rgba(26, 58, 84, .9);
  box-shadow: inset 0 0 0 1px rgba(200, 255, 61, .45);
}

.page-contact .contact-chan:hover .contact-chan__hint,
.page-contact .contact-chan:focus-within .contact-chan__hint {
  color: var(--c-white);
}

/* ---------- 在线时段 ---------- */
.page-contact .contact-hours__panel {
  padding: var(--contact-pad);
}

.page-contact .contact-hours__panel .panel__head .display {
  margin-top: 10px;
}

.page-contact .contact-hours__body {
  margin-top: clamp(26px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
}

.page-contact .contact-timeline__rail {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(39, 80, 110, .5);
  overflow: hidden;
}

.page-contact .contact-timeline__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8%;
  width: 75%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-orange), var(--c-lime));
}

.page-contact .contact-timeline__marks {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--c-white);
  padding: 0 8% 0 8%;
}

.page-contact .contact-hours__note {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
}

.page-contact .contact-scope__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--c-white);
  margin: 0 0 20px;
}

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

.page-contact .contact-scope li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
}

.page-contact .contact-scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--c-lime);
}

.page-contact .contact-scope strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-white);
  margin-bottom: 4px;
}

/* ---------- 草原坐标地图 ---------- */
.page-contact .contact-map__panel {
  padding: var(--contact-pad);
}

.page-contact .contact-map__intro {
  margin-top: 16px;
  color: var(--c-muted);
}

.page-contact .contact-map__stage {
  position: relative;
  margin-top: clamp(26px, 4vw, 44px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--contact-rule);
}

.page-contact .contact-map__frame {
  margin: 0;
  border-radius: 0;
}

.page-contact .contact-map__frame .media-frame__media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .contact-map__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(200, 255, 61, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 61, .09) 1px, transparent 1px);
  background-size: 56px 56px;
}

.page-contact .contact-map__ping {
  position: absolute;
  left: 44%;
  top: 46%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--c-lime);
  box-shadow: 0 0 0 0 rgba(200, 255, 61, .55);
  animation: contact-ping 2.6s var(--ease-out) infinite;
}

.page-contact .contact-map__tag {
  position: absolute;
  left: 44%;
  top: 46%;
  transform: translate(18px, -50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-ink);
  background: var(--c-lime);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@keyframes contact-ping {
  0%   { box-shadow: 0 0 0 0 rgba(200, 255, 61, .55); }
  70%  { box-shadow: 0 0 0 22px rgba(200, 255, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 255, 61, 0); }
}

.page-contact .contact-map__facts {
  margin: clamp(24px, 3.4vw, 40px) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--contact-rule);
}

.page-contact .contact-fact {
  padding: 18px 0;
  border-bottom: var(--contact-rule);
}

.page-contact .contact-fact dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--c-muted);
  text-transform: uppercase;
}

.page-contact .contact-fact dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-white);
}

/* ---------- 合作与反馈 ---------- */
.page-contact .contact-partner__grid {
  align-items: stretch;
}

.page-contact .contact-compose,
.page-contact .contact-correct {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--contact-pad);
}

.page-contact .contact-compose .display,
.page-contact .contact-correct .display {
  margin: 0;
}

.page-contact .contact-compose .prose,
.page-contact .contact-correct .prose {
  color: var(--c-muted);
}

.page-contact .contact-tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-contact .contact-tags li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-teal);
  border: 1px solid rgba(53, 224, 200, .4);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.page-contact .contact-tags--orange li {
  color: var(--c-orange);
  border-color: rgba(255, 122, 47, .42);
}

.page-contact .contact-compose .btn,
.page-contact .contact-correct .btn {
  align-self: flex-start;
  margin-top: auto;
}

.page-contact .contact-next {
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 34px);
  border: var(--contact-rule);
  border-radius: var(--radius-lg);
  background: rgba(16, 42, 66, .5);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-contact .contact-next__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-white);
}

.page-contact .contact-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-contact .contact-map__facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-contact .contact-fact {
    padding: 20px 24px 20px 0;
  }
  .page-contact .contact-next {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero__inner {
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
  }

  .page-contact .contact-hero__mark {
    justify-self: end;
  }

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

  .page-contact .contact-chan + .contact-chan {
    border-top: 0;
    border-left: var(--contact-rule);
  }

  .page-contact .contact-hours__body {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .page-contact .contact-map__facts {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-contact .contact-map__grid {
    background-size: 72px 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-map__ping {
    animation: none;
    box-shadow: 0 0 0 10px rgba(200, 255, 61, .18);
  }
  .page-contact .contact-chan,
  .page-contact .breadcrumb a {
    transition: none;
  }
}
<<<END>>>

等等，我输出的时候是不是把结束标记给忘了？我得确保最后有 `<<<END>>>`……不对，按格式应该是 `` 和 `` 两个标记，每个只能出现一次。我确实用了这两个标记，但其实最后的结束标记说不要求，我就没加。那没问题。

不过我再检查一下：

1. `.page-contact .contact-map__frame { border-radius: 0; }` —— media-frame 可能自带圆角，所以把圆角归零是对的。

2. `.panel` 和 `.panel--card` 这些共享类应该已经定义了 padding，我又用 `.contact-hours__panel`、`.contact-map__panel` 加了一层 padding，没事。

3. 核对一下 CSS 里的变量引用——`--c-line`、`--c-muted`、`--c-white`、`--c-lime`、`--c-orange`、`--c-violet`、`--c-teal`、`--c-ink`、`--font-display`、`--font-mono`、`--font-body`、`--radius-pill`、`--radius-lg`、`--radius-md`、`--radius-sm`、`--dur`、`--ease-out`。这些在 site_kit 的 design_tokens 里都有，没问题。

4. HTML 里 `contact-chan__value--wide` 用到了，CSS 里定义了。

5. `contact-tags--orange` 也定义了。

6. `contact-fact`、`contact-map__facts`、`contact-map__stage`、`contact-map__grid`、`contact-map__ping`、`contact-map__tag`、`contact-map__frame`、`contact-map__intro`、`contact-map__panel`、`contact-hours__panel`、`contact-hours__body`、`contact-hours__left`、`contact-hours__right`、`contact-hours__note`、`contact-scope__title`、`contact-scope`、`contact-timeline`、`contact-timeline__rail`、`contact-timeline__fill`、`contact-timeline__marks`、`contact-partner__grid`、`contact-compose`、`contact-correct`、`contact-tags`、`contact-next`、`contact-next__text`、`contact-next__links`、`contact-crumb`、`contact-hero__inner`、`contact-hero__head`、`contact-hero__lead`、`contact-hero__mark`、`contact-channels`、`contact-chan__title`、`contact-chan__value`、`contact-chan__desc`、`contact-chan__hint`——全都对上了。

7. `breadcrumb` 是共享类，我在作用域内给它加样式，没问题。

8. 图片：首屏徽章用 `{zhanqunpic:h:800w:800}`，地图 `{zhanqunpic:h:800w:1200}`，满足至少 1 张、目标 2 张的要求。

9. 交互方面我用了 `data-reveal`，在 `.section` 元素上，没问题。

10. 数字都写成真实文本了：09:00、18:00、26、14、7、5、4、18,600、12、30、20、8、6——没有用 `data-count` 之类的。

11. 没有用 `:root` 或 `html/body` 那些选择器。

12. 手机端没有横向溢出问题——连接卡片用 `1fr`，可能宽的值用 `overflow-wrap: anywhere`。

13. 时间线那块我回头看了一下，`.contact-timeline__marks` 下面有两条线——上方一条，下方一条，这没问题。

14. `contact-map__tag` 定位在 `left: 44%; top: 46%`，和脉冲点一样。在窄屏上标签可能会溢出。我把字号设小一点并加 `white-space: nowrap`，如果容器够窄可能还是会跑出去。地图舞台有 `overflow: hidden`，所以溢出会被裁掉，不会导致页面横向滚动。但如果在手机上把地图标签切掉，看起来也会很怪。

我加一条移动端媒体查询来收一下标签。其实更简单：在移动端把标签相对 ping 的位置调一下，在基础样式里用 `left: 30%; top: 30%` 更稳妥，或者放在 44%/46% 但加 `max-width`。我把标签改成 `font-size: 11px; padding: 4px 8px;`，再设 `left: auto; right: 8px; top: 12px;`……不过那样就脱离 ping 了。

换个思路：直接让标签绝对定位到同样的偏移位置，但加个兜底——小屏幕上把它放到舞台左下角。加一段移动端媒体查询：

```css
@media (max-width: 759px) {
  .page-contact .contact-map__tag {
    left: 12px;
    bottom: 12px;
    top: auto;
    transform: none;
  }
}
```

这样简单。其实这样更好，因为标签在地图角落里读起来更像一个图例。

就这么办。不过 `left: 44%; top: 46%; transform: translate(18px, -50%)` 还是作为桌面端的基础样式保留。

我再加上这段媒体查询。

15. 底部的 `contact-next` 块没问题。

16. H1 里自然地把品牌名“BET赛场”带进去了。H1 本身是“账号、数据、合作，都能直接找到做这件事的人”——嗯，这里没提品牌。不过导语里确实写了“BET赛场”。要求说品牌名必须出现在正文里，导语是满足的，没问题。

其实再想一下，放 H1 里会不会更好？目前这样也可以接受。

17. 再看面包屑链接——`href="/"` 是有效的路由。`/culture/`、`/faqs/`、`/features/`、`/data-protection/` 也都有效。

现在把修补后的 CSS 片段加进最终答案里。

至于“数据工坊已积累跨越 4 个赛季、18,600 场赛事”——我写成了“跨过 4 个赛季，18,600 场赛事”，可以。

再检查一下“26 名成员分成三组：14 人做数据整理，7 人做前端与可视化，5 人做内容编辑”——对。

那个“本站”的词？没出现。

“口径”和“边界”也没出现。好。

“不做承诺”没有。好。

最后敲定，把地图标签的媒体查询加上。
<main id="main-content" class="page-contact">

  <div class="wrap contact-crumb">
    <nav class="breadcrumb" 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__inner">

        <header class="contact-hero__head">
          <p class="eyebrow">CONNECT / 联系品牌</p>
          <h1 class="display display--xl">账号、数据、合作，都能直接找到做这件事的人</h1>
          <p class="prose contact-hero__lead">
            BET赛场从 2019 年起专注中文足球赛事的数据整理，把每一次起脚变成看得懂的数字。
            你要是碰上账号登不进去、手机上射门统计刷不出来、电脑端对照表排不开，
            从这里说一声就行；想谈轮次前瞻的选题共建、想把战报图表引用到别处，也是同一批人在接。
          </p>
        </header>

        <figure class="contact-hero__mark">
          <img src="{zhanqunpic:h:800w:800}" width="800" height="800"
               alt="圆形徽记内是草原地平线与坐标十字的抽象组合">
          <figcaption>草原数据工坊 · 呼和浩特</figcaption>
        </figure>

      </div>

      <div class="contact-channels">

        <article class="contact-chan">
          <p class="eyebrow eyebrow--teal">01 / 邮件</p>
          <h2 class="contact-chan__title">客服邮箱</h2>
          <p class="contact-chan__value">kefu@bet-sports-lite.com.cn</p>
          <p class="contact-chan__desc">
            适合把前因后果一次说清楚的来信：账号进不去、关注列表少了几支球队、
            某一轮的射门数据看着跟印象里不一样。把版本、轮次和出错时间写进去，回信会快很多。
          </p>
          <p class="contact-chan__hint">附上截图和出问题的场次，我们照着你的步骤复现，能少来回两趟。</p>
        </article>

        <article class="contact-chan">
          <p class="eyebrow eyebrow--orange">02 / 电话</p>
          <h2 class="contact-chan__title">客服电话</h2>
          <p class="contact-chan__value">400-5525-3597</p>
          <p class="contact-chan__desc">
            开球前十分钟发现手机端统计打不开、电脑上对照表拉不出列，邮件来回太慢就直接拨。
            工作时间内有人接，线路优先留给访问类问题。
          </p>
          <p class="contact-chan__hint">赛前一小时是高峰，占线的话先发邮件，我们按顺序排。</p>
        </article>

        <article class="contact-chan">
          <p class="eyebrow eyebrow--violet">03 / 来信</p>
          <h2 class="contact-chan__title">数据工坊地址</h2>
          <p class="contact-chan__value contact-chan__value--wide">内蒙古省呼和浩特市赛罕区腾飞南路32号BET数据工坊</p>
          <p class="contact-chan__desc">
            谈内容共建、寄送社团资料、想聊聊轮次前瞻接下来做哪些主题，可以按这个地址联系我们。
            数据工坊驻在呼和浩特，团队就在这座城市里做整理和制图。
          </p>
          <p class="contact-chan__hint">寄件前先用邮箱打个招呼，好安排人对接。</p>
        </article>

      </div>
    </div>
  </section>

  <section class="section contact-hours" data-reveal>
    <div class="wrap">
      <div class="panel contact-hours__panel">

        <div class="panel__head">
          <p class="eyebrow eyebrow--orange">04 / 在线时段</p>
          <h2 class="display display--md">工作日九点到十八点，来问就有人答</h2>
        </div>

        <div class="contact-hours__body">

          <div class="contact-hours__left">
            <div class="contact-timeline" aria-hidden="true">
              <div class="contact-timeline__rail">
                <span class="contact-timeline__fill"></span>
              </div>
              <div class="contact-timeline__marks">
                <span>09:00</span>
                <span>18:00</span>
              </div>
            </div>
            <p class="contact-hours__note">
              时段之外发来的邮件我们照收，会在下一个工作日接着处理。周末和法定假日的电话线路不安排值守，
              急事请走邮箱，能看到完整的处理记录。
            </p>
          </div>

          <div class="contact-hours__right">
            <h3 class="contact-scope__title">这段时间里，我们处理这些事</h3>
            <ul class="contact-scope">
              <li>
                <strong>苹果版射门统计</strong>
                射正、射偏、被封堵、禁区内外起脚等 12 项维度里某一项不出数，
                或者比赛进行中指标刷新慢了，都可以报给我们。
              </li>
              <li>
                <strong>电脑端数据对照</strong>
                6 类数据源并排比对时列错位、锁定某一列做左右对照不生效、
                单屏 8 列指标超出显示区域，这类操作问题现场就能给到步骤。
              </li>
              <li>
                <strong>关注列表同步</strong>
                30 支球队、20 项赛事在手机和电脑之间没对上，
                或者按联赛、轮次、球队分好的组丢了，我们帮你找回。
              </li>
              <li>
                <strong>第一次进 V4 栏目</strong>
                不清楚该从关注列表开始还是先看前瞻，我们可以带你走一遍最短路径。
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </section>

  <section class="section contact-map" data-reveal>
    <div class="wrap wrap--wide">
      <div class="panel contact-map__panel">

        <div class="panel__head">
          <p class="eyebrow eyebrow--teal">05 / 草原坐标</p>
          <h2 class="display display--md">数据工坊在呼和浩特，把位置落在图上</h2>
          <p class="prose prose--tight contact-map__intro">
            26 名成员分成三组围着同一批赛事样本干活：14 人做数据整理，7 人做前端与可视化，
            5 人做内容编辑。跨过 4 个赛季，18,600 场赛事的射门样本就是这样一场一场攒下来的。
          </p>
        </div>

        <div class="contact-map__stage">
          <figure class="media-frame media-frame--plot contact-map__frame">
            <img class="media-frame__media" src="{zhanqunpic:h:800w:1200}" width="1200" height="800"
                 alt="内蒙古区域的抽象坐标地图，网格线上以青柠标记标出呼和浩特位置"
                 loading="lazy" decoding="async">
            <figcaption class="media-frame__label">内蒙古 · 呼和浩特</figcaption>
          </figure>
          <span class="contact-map__grid" aria-hidden="true"></span>
          <span class="contact-map__ping" aria-hidden="true"></span>
          <span class="contact-map__tag">腾飞南路32号</span>
        </div>

        <dl class="contact-map__facts">
          <div class="contact-fact">
            <dt>所在城市</dt>
            <dd>呼和浩特</dd>
          </div>
          <div class="contact-fact">
            <dt>所在区域</dt>
            <dd>赛罕区</dd>
          </div>
          <div class="contact-fact">
            <dt>详细地址</dt>
            <dd>腾飞南路32号</dd>
          </div>
          <div class="contact-fact">
            <dt>站点备案</dt>
            <dd>蒙ICP备79806174号</dd>
          </div>
        </dl>

      </div>
    </div>
  </section>

  <section class="section contact-partner" data-reveal>
    <div class="wrap">
      <div class="grid grid--2 contact-partner__grid">

        <article class="panel panel--card contact-compose">
          <p class="eyebrow eyebrow--violet">06 / 内容共建</p>
          <h2 class="display display--sm">和校园足球社团一起做选题</h2>
          <p class="prose prose--tight">
            我们已经和 12 家校园足球社团保持内容共建关系，一起定轮次前瞻看哪些角度、
            试新的图表样式、在业余比赛里验证射门分布图好不好读。社团、业余球队、
            做复盘的数据爱好者都可以来信，说说你们平时怎么看比赛数据、想看到什么。
          </p>
          <ul class="contact-tags">
            <li>轮次选题共创</li>
            <li>图表样式试用</li>
            <li>战报素材交换</li>
          </ul>
          <a class="btn btn--ghost btn--sm" href="/culture/">看看数据工坊</a>
        </article>

        <article class="panel panel--card contact-correct">
          <p class="eyebrow eyebrow--orange">07 / 反馈纠错</p>
          <h2 class="display display--sm">图表读着不对，直接告诉我们</h2>
          <p class="prose prose--tight">
            每篇战报都配有射门分布图与关键时间轴。要是你发现某个时间点的记录、
            某支球队的射门次数跟你看的比赛对不上，把轮次、球队和具体时间点写清楚发过来，
            编辑组会去核对原始记录，确认后更新那一期内容。
          </p>
          <ul class="contact-tags contact-tags--orange">
            <li>战报图表</li>
            <li>时间轴</li>
            <li>历史轮次</li>
          </ul>
          <a class="btn btn--ghost btn--sm" href="/faqs/">常见问答</a>
        </article>

      </div>

      <div class="contact-next">
        <p class="contact-next__text">不确定该找谁？先看看工具怎么用，再来问会更省事。</p>
        <div class="contact-next__links">
          <a class="btn btn--lime btn--sm" href="/features/">功能中心</a>
          <a class="btn btn--ghost btn--sm" href="/data-protection/">数据保护说明</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-contact {
  --contact-rule: 1px solid var(--c-line);
  --contact-pad: clamp(22px, 3.2vw, 40px);
}

/* ---------- 面包屑与首屏留白 ---------- */
.page-contact .contact-crumb {
  padding-top: clamp(96px, 13vw, 140px);
}

.page-contact .breadcrumb {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.page-contact .breadcrumb a {
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.page-contact .breadcrumb a:hover {
  color: var(--c-lime);
  border-bottom-color: var(--c-lime);
}

.page-contact .breadcrumb [aria-current="page"] {
  color: var(--c-white);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding-top: clamp(24px, 4vw, 48px);
}

.page-contact .contact-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.page-contact .contact-hero__head .eyebrow {
  margin-bottom: 16px;
}

.page-contact .contact-hero__lead {
  margin-top: 22px;
  max-width: 36em;
  color: var(--c-muted);
}

.page-contact .contact-hero__mark {
  margin: 0;
  justify-self: start;
  width: min(220px, 52vw);
  text-align: center;
}

.page-contact .contact-hero__mark img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  box-shadow: 0 0 0 8px rgba(16, 42, 66, .55);
}

.page-contact .contact-hero__mark figcaption {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--c-muted);
}

/* ---------- 三张资料卡 ---------- */
.page-contact .contact-channels {
  margin-top: clamp(40px, 6vw, 76px);
  border: var(--contact-rule);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26, 58, 84, .62), rgba(16, 42, 66, .42));
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

.page-contact .contact-chan {
  padding: var(--contact-pad);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.page-contact .contact-chan + .contact-chan {
  border-top: var(--contact-rule);
}

.page-contact .contact-chan__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-white);
  margin: 10px 0 14px;
}

.page-contact .contact-chan__value {
  font-family: var(--font-mono);
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.5;
  color: var(--c-lime);
  word-break: break-all;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-left: 2px solid var(--c-lime);
  background: rgba(200, 255, 61, .06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  user-select: all;
}

.page-contact .contact-chan__value--wide {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-white);
  border-left-color: var(--c-violet);
  background: rgba(124, 92, 255, .08);
}

.page-contact .contact-chan:nth-child(2) .contact-chan__value {
  color: var(--c-orange);
  border-left-color: var(--c-orange);
  background: rgba(255, 122, 47, .08);
}

.page-contact .contact-chan__desc {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
}

.page-contact .contact-chan__hint {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-muted);
  padding-top: 14px;
  border-top: 1px dashed rgba(39, 80, 110, .85);
  transition: color var(--dur) var(--ease-out);
}

.page-contact .contact-chan:hover,
.page-contact .contact-chan:focus-within {
  background: rgba(26, 58, 84, .9);
  box-shadow: inset 0 0 0 1px rgba(200, 255, 61, .45);
}

.page-contact .contact-chan:hover .contact-chan__hint,
.page-contact .contact-chan:focus-within .contact-chan__hint {
  color: var(--c-white);
}

/* ---------- 在线时段 ---------- */
.page-contact .contact-hours__panel {
  padding: var(--contact-pad);
}

.page-contact .contact-hours__panel .panel__head .display {
  margin-top: 10px;
}

.page-contact .contact-hours__body {
  margin-top: clamp(26px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
}

.page-contact .contact-timeline__rail {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(39, 80, 110, .5);
  overflow: hidden;
}

.page-contact .contact-timeline__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8%;
  width: 75%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-orange), var(--c-lime));
}

.page-contact .contact-timeline__marks {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--c-white);
  padding: 0 8%;
}

.page-contact .contact-hours__note {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
}

.page-contact .contact-scope__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--c-white);
  margin: 0 0 20px;
}

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

.page-contact .contact-scope li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
}

.page-contact .contact-scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--c-lime);
}

.page-contact .contact-scope strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-white);
  margin-bottom: 4px;
}

/* ---------- 草原坐标地图 ---------- */
.page-contact .contact-map__panel {
  padding: var(--contact-pad);
}

.page-contact .contact-map__intro {
  margin-top: 16px;
  color: var(--c-muted);
}

.page-contact .contact-map__stage {
  position: relative;
  margin-top: clamp(26px, 4vw, 44px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--contact-rule);
}

.page-contact .contact-map__frame {
  margin: 0;
  border-radius: 0;
}

.page-contact .contact-map__frame .media-frame__media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .contact-map__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(200, 255, 61, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 61, .09) 1px, transparent 1px);
  background-size: 56px 56px;
}

.page-contact .contact-map__ping {
  position: absolute;
  left: 44%;
  top: 46%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--c-lime);
  box-shadow: 0 0 0 0 rgba(200, 255, 61, .55);
  animation: contact-ping 2.6s var(--ease-out) infinite;
}

.page-contact .contact-map__tag {
  position: absolute;
  left: 44%;
  top: 46%;
  transform: translate(18px, -50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-ink);
  background: var(--c-lime);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@keyframes contact-ping {
  0%   { box-shadow: 0 0 0 0 rgba(200, 255, 61, .55); }
  70%  { box-shadow: 0 0 0 22px rgba(200, 255, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 255, 61, 0); }
}

.page-contact .contact-map__facts {
  margin: clamp(24px, 3.4vw, 40px) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--contact-rule);
}

.page-contact .contact-fact {
  padding: 18px 0;
  border-bottom: var(--contact-rule);
}

.page-contact .contact-fact dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--c-muted);
  text-transform: uppercase;
}

.page-contact .contact-fact dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-white);
}

/* ---------- 合作与反馈 ---------- */
.page-contact .contact-partner__grid {
  align-items: stretch;
}

.page-contact .contact-compose,
.page-contact .contact-correct {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--contact-pad);
}

.page-contact .contact-compose .display,
.page-contact .contact-correct .display {
  margin: 0;
}

.page-contact .contact-compose .prose,
.page-contact .contact-correct .prose {
  color: var(--c-muted);
}

.page-contact .contact-tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-contact .contact-tags li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-teal);
  border: 1px solid rgba(53, 224, 200, .4);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.page-contact .contact-tags--orange li {
  color: var(--c-orange);
  border-color: rgba(255, 122, 47, .42);
}

.page-contact .contact-compose .btn,
.page-contact .contact-correct .btn {
  align-self: flex-start;
  margin-top: auto;
}

.page-contact .contact-next {
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 34px);
  border: var(--contact-rule);
  border-radius: var(--radius-lg);
  background: rgba(16, 42, 66, .5);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-contact .contact-next__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-white);
}

.page-contact .contact-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 759px) {
  .page-contact .contact-map__tag {
    left: 12px;
    bottom: 12px;
    top: auto;
    transform: none;
  }
  .page-contact .contact-map__ping {
    left: 30%;
    top: 38%;
  }
}

@media (min-width: 760px) {
  .page-contact .contact-map__facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-contact .contact-fact {
    padding: 20px 24px 20px 0;
  }
  .page-contact .contact-next {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero__inner {
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
  }

  .page-contact .contact-hero__mark {
    justify-self: end;
  }

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

  .page-contact .contact-chan + .contact-chan {
    border-top: 0;
    border-left: var(--contact-rule);
  }

  .page-contact .contact-hours__body {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .page-contact .contact-map__facts {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-contact .contact-map__grid {
    background-size: 72px 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-map__ping {
    animation: none;
    box-shadow: 0 0 0 10px rgba(200, 255, 61, .18);
  }
  .page-contact .contact-chan,
  .page-contact .breadcrumb a {
    transition: none;
  }
}