.page-contact {
  background: var(--ink);
  color: var(--porcelain);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */

.page-contact .c-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 28px);
}

.page-contact .c-hero__top {
  padding-top: 8px;
  padding-bottom: 52px;
}

.page-contact .c-hero__grid {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}

.page-contact .c-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6.6vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  color: var(--porcelain);
}

.page-contact .c-hero__lead {
  max-width: var(--measure);
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-contact .c-hero__actions .btn {
  text-decoration: none;
}

/* ---------- 首屏路线图 ---------- */

.page-contact .c-route {
  position: relative;
  background: var(--zone-teal);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-contact .c-route__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.page-contact .c-route__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.page-contact .c-route__inner {
  position: relative;
  z-index: 1;
  padding-top: 44px;
  padding-bottom: 48px;
}

.page-contact .c-route__caption {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .c-route__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-contact .c-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(6, 23, 38, 0.82);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}

.page-contact .c-node__dot {
  display: none;
}

.page-contact .c-node__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--porcelain);
}

.page-contact .c-node__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-node__more {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
}

@media (hover: hover) and (min-width: 900px) {
  .page-contact .c-node__more {
    max-height: 0;
    padding-top: 0;
    border-top-color: transparent;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s var(--ease), opacity 0.24s var(--ease), padding-top 0.24s var(--ease);
  }

  .page-contact .c-node:hover .c-node__more,
  .page-contact .c-node:focus-within .c-node__more {
    max-height: 160px;
    padding-top: 10px;
    border-top-color: var(--line);
    opacity: 1;
  }

  .page-contact .c-node:hover,
  .page-contact .c-node:focus-within {
    border-color: var(--line-cyan);
    transform: translateY(-4px);
  }
}

/* ---------- 通用章节头部 ---------- */

.page-contact .c-section-head {
  max-width: 760px;
}

.page-contact .c-section-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--porcelain);
}

.page-contact .c-section-lead {
  margin: 16px 0 0;
  max-width: var(--measure);
  font-size: 16px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-contact .c-link:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ---------- 合作方向 ---------- */

.page-contact .c-directions {
  background: var(--ink);
}

.page-contact .c-direction-grid {
  display: grid;
  gap: 18px;
  margin-top: 40px;
}

.page-contact .c-direction {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--zone-indigo);
  transition: border-color 0.24s var(--ease);
}

.page-contact .c-direction:hover {
  border-color: var(--line-cyan);
}

.page-contact .c-direction__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--porcelain);
}

.page-contact .c-direction__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

.page-contact .c-direction__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-contact .c-direction__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--porcelain);
}

.page-contact .c-direction__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.page-contact .c-direction .c-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13.5px;
  font-family: var(--font-mono);
}

/* ---------- 主题带 ---------- */

.page-contact .c-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-contact .c-band__inner {
  display: grid;
  gap: 10px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.page-contact .c-band__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-contact .c-band__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--porcelain);
}

/* ---------- 合作流程 ---------- */

.page-contact .c-process {
  background: var(--ink);
}

.page-contact .c-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-contact .c-step {
  display: grid;
  gap: 10px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .c-step__num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-contact .c-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-step__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

.page-contact .c-step__need {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(37, 242, 214, 0.07);
  border: 1px dashed var(--line-cyan);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 联系方式 ---------- */

.page-contact .c-contacts {
  position: relative;
}

.page-contact .c-contact-panels {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.page-contact .c-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
  border-radius: var(--r-lg);
  background: rgba(6, 23, 38, 0.62);
  border: 1px solid var(--line);
}

.page-contact .c-panel__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--amber);
}

.page-contact .c-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-panel__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.1vw, 21px);
  line-height: 1.5;
  color: var(--cyan);
  word-break: break-word;
}

.page-contact .c-panel__value--addr {
  font-size: 15px;
  color: var(--porcelain);
}

.page-contact .c-panel__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-icp-line {
  margin: 30px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

/* ---------- 咨询前准备 ---------- */

.page-contact .c-prepare {
  background: var(--ink);
}

.page-contact .c-prepare__grid {
  display: grid;
  gap: 34px;
}

.page-contact .c-prepare__text {
  margin: 16px 0 24px;
  max-width: var(--measure);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

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

.page-contact .c-checklist__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding: 20px 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--zone-teal);
  transition: border-color 0.24s var(--ease);
}

.page-contact .c-checklist__item:hover {
  border-color: var(--line-cyan);
}

.page-contact .c-checklist__mark {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--cyan);
  background: rgba(37, 242, 214, 0.1);
}

.page-contact .c-checklist__mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(40deg);
}

.page-contact .c-checklist__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-checklist__item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 服务覆盖与对接团队 ---------- */

.page-contact .c-coverage__grid {
  display: grid;
  gap: 34px;
}

.page-contact .c-coverage__text {
  margin: 16px 0 0;
  max-width: var(--measure);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding: 22px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(6, 23, 38, 0.55);
}

.page-contact .c-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-contact .c-stat__num {
  font-family: var(--font-mono);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cyan);
}

.page-contact .c-stat__unit {
  font-size: 12px;
  line-height: 1.4;
  color: var(--mist);
}

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

.page-contact .c-team-list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-team-list strong {
  display: inline-block;
  min-width: 108px;
  margin-right: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-coverage__link-line {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-coverage__figure {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(37, 242, 214, 0.12), rgba(20, 28, 63, 0.9));
  align-self: start;
}

.page-contact .c-coverage__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 结尾 ---------- */

.page-contact .c-cta {
  background: var(--zone-wine);
  border-top: 1px solid var(--line);
}

.page-contact .c-cta__inner {
  max-width: 860px;
}

.page-contact .c-cta__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--porcelain);
}

.page-contact .c-cta__text {
  margin: 18px 0 0;
  max-width: var(--measure);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-contact .c-cta__actions .btn {
  text-decoration: none;
}

.page-contact .c-cta__fine {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 平板 ---------- */

@media (min-width: 700px) {
  .page-contact .c-hero__top {
    padding-bottom: 64px;
  }

  .page-contact .c-direction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contact .c-contact-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contact .c-contact-panels .c-panel:first-child {
    grid-column: span 2;
  }

  .page-contact .c-band__inner {
    grid-template-columns: 160px 1fr;
    align-items: baseline;
    gap: 24px;
  }

  .page-contact .c-route__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 桌面 ---------- */

@media (min-width: 1000px) {
  .page-contact .c-hero {
    padding-top: calc(var(--header-h) + 56px);
  }

  .page-contact .c-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: end;
    margin-top: 26px;
  }

  .page-contact .c-hero__side {
    padding-bottom: 8px;
  }

  .page-contact .c-route__track {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-top: 40px;
  }

  .page-contact .c-route__track::before {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    top: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--orange), var(--cyan));
    opacity: 0.75;
  }

  .page-contact .c-node {
    padding-top: 26px;
  }

  .page-contact .c-node__dot {
    display: block;
    position: absolute;
    top: -28px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 5px rgba(37, 242, 214, 0.16);
    transition: transform 0.24s var(--ease), background-color 0.24s var(--ease);
  }

  .page-contact .c-node:hover .c-node__dot {
    transform: scale(1.25);
    background: var(--orange);
    box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.2);
  }

  .page-contact .c-step {
    grid-template-columns: 96px minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 34px;
    align-items: start;
    padding: 30px 0;
  }

  .page-contact .c-step__num {
    font-size: 40px;
  }

  .page-contact .c-step__need {
    align-self: center;
  }

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

  .page-contact .c-contact-panels .c-panel:first-child {
    grid-column: auto;
  }

  .page-contact .c-prepare__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 60px;
    align-items: start;
  }

  .page-contact .c-coverage__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 60px;
    align-items: start;
  }

  .page-contact .c-band__text {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .c-node,
  .page-contact .c-node__dot,
  .page-contact .c-direction,
  .page-contact .c-checklist__item {
    transition: none;
  }

  .page-contact .c-node:hover,
  .page-contact .c-node:focus-within,
  .page-contact .c-node:hover .c-node__dot {
    transform: none;
  }
}
</main>
<<<END>>>

Wait — I made an error. I put `</main>` before the CSS. Let me fix the ordering: MAIN_HTML block should contain only the main element, then PAGE_CSS. Let me re-output correctly.

Also I referenced `data-reveal` which is fine.

Let me redo the output properly.
<main id="main-content" class="page-contact">

  <section class="c-hero" data-hero>
    <div class="shell c-hero__top">
      <nav class="breadcrumbs" aria-label="当前位置">
        <ol class="breadcrumbs-list">
          <li class="breadcrumbs-item"><a href="/">首页</a></li>
          <li class="breadcrumbs-item" aria-current="page">商务合作</li>
        </ol>
      </nav>

      <div class="c-hero__grid">
        <div class="c-hero__main">
          <p class="eyebrow">商务合作</p>
          <h1 class="c-hero__title">让你们的赛场数据需求，<br>接上对口的那条通道</h1>
        </div>
        <div class="c-hero__side">
          <p class="c-hero__lead">华体育网常年为体育媒体、俱乐部、青训机构与赛事运营方提供赛事统计查询与数据接入。你要看哪些比赛、盯哪几项指标、多少人一起用，把这几件事说清楚，对接方式和周期就能很快定下来。</p>
          <div class="c-hero__actions">
            <a class="btn btn-primary" href="#contact-channels">联系商务合作</a>
            <a class="btn btn-ghost" href="/services/">先看服务与方案</a>
          </div>
        </div>
      </div>
    </div>

    <div class="c-route">
      <figure class="c-route__figure" aria-hidden="true">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="四条分支连线构成的数据通道示意图，暖橙路径连接不同节点" class="c-route__img">
      </figure>
      <div class="shell c-route__inner">
        <p class="c-route__caption">四条通道 · 按你的角色选入口</p>
        <ol class="c-route__track">
          <li class="c-node">
            <span class="c-node__dot" aria-hidden="true"></span>
            <span class="pill">通道 01 · 媒体</span>
            <h2 class="c-node__title">媒体数据引用</h2>
            <p class="c-node__text">赛后复盘稿、赛前前瞻、专栏数据图表要用的控球率与射门统计，按赛事日期直接调取，写稿时不用再翻录像逐帧数。</p>
            <p class="c-node__more">记者与编辑可核对同一场比赛的传球成功率、角球数与射正率，图表里的数字来自同一份记录。</p>
          </li>
          <li class="c-node">
            <span class="c-node__dot" aria-hidden="true"></span>
            <span class="pill">通道 02 · 球队</span>
            <h2 class="c-node__title">俱乐部与青训接入</h2>
            <p class="c-node__text">把你们整个赛季的比赛记录接进来，教练组按对手、按轮次回看技术面板，赛后复盘会直接对着数字讲。</p>
            <p class="c-node__more">青训基地可以按年龄段和赛事阶段筛选，用来跟踪一批球员在赛季里的变化走势。</p>
          </li>
          <li class="c-node">
            <span class="c-node__dot" aria-hidden="true"></span>
            <span class="pill">通道 03 · 赛事方</span>
            <h2 class="c-node__title">赛事统计合作</h2>
            <p class="c-node__text">赛事运营方需要对外发布技术统计，我们按你们技术台的节奏采集与复核，让每一轮比赛结束后都有成套数字可用。</p>
            <p class="c-node__more">现场采集终端与视频复核并行，覆盖足球、篮球、排球、乒乓球、羽毛球等项目。</p>
          </li>
          <li class="c-node">
            <span class="c-node__dot" aria-hidden="true"></span>
            <span class="pill">通道 04 · 机构</span>
            <h2 class="c-node__title">机构订阅与协同</h2>
            <p class="c-node__text">给整支团队开一批账号，编辑、教练与分析师共用同一份数据，谁查了什么、导出过哪一版都能对上。</p>
            <p class="c-node__more">支持赛季、季度与单场赛事包三种周期长度，具体权益可登录站内索引查看。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section c-directions" id="directions">
    <div class="shell">
      <header class="c-section-head">
        <p class="eyebrow">合作方向</p>
        <h2 class="c-section-title">今年最常被问到的四件事</h2>
        <p class="c-section-lead">合作大多从下面这四种需求起头。看看哪一种最接近你的处境，照着往下走就行。</p>
      </header>

      <div class="c-direction-grid">
        <article class="c-direction" data-reveal>
          <span class="tag">稿件与图表</span>
          <h3 class="c-direction__title">写稿、做图要一组站得住的数字</h3>
          <p class="c-direction__text">体育媒体和数据记者最怕数字对不上。我们把同一场比赛的控球率、射门次数、射正率、角球数、传球成功率放进一个面板，引用时直接照抄。</p>
          <ul class="c-direction__list">
            <li>按赛事日期检索，比赛结束后打开就能看到记录</li>
            <li>等宽字体呈现统计值，截图放进图表不串行</li>
            <li>赛后三分钟内完成一轮技术统计更新</li>
          </ul>
          <a class="c-link" href="/services/">看媒体引用怎么排周期</a>
        </article>

        <article class="c-direction" data-reveal>
          <span class="tag">赛季跟踪</span>
          <h3 class="c-direction__title">把一整季的比赛接进你们的训练室</h3>
          <p class="c-direction__text">俱乐部和青训机构关心的不是单场，是一整段走势。接入之后，教练组能按轮次、按对手把技术面板拉出来做对比。</p>
          <ul class="c-direction__list">
            <li>按赛事、球队、日期、统计项四条路径检索</li>
            <li>青训可按年龄段与赛事阶段筛选条目</li>
            <li>团队账号共用同一份记录，复盘会上不再各说各的</li>
          </ul>
          <a class="c-link" href="/services/">看团队协同方案</a>
        </article>

        <article class="c-direction" data-reveal>
          <span class="tag">对外发布</span>
          <h3 class="c-direction__title">让每一轮比赛都有成套数字可发</h3>
          <p class="c-direction__text">赛事运营方要的是稳定。技术台的数据怎么采、什么时候复核、什么时候能对外发，我们和你们的技术团队一起把节奏定下来。</p>
          <ul class="c-direction__list">
            <li>现场采集终端与视频复核两条通道并行</li>
            <li>赛季期间每日两次巡检，重要赛事追加即时复核</li>
            <li>覆盖足球、篮球、排球、乒乓球、羽毛球等项目</li>
          </ul>
          <a class="c-link" href="/team/">看我们的采集与校准流程</a>
        </article>

        <article class="c-direction" data-reveal>
          <span class="tag">整队使用</span>
          <h3 class="c-direction__title">一个部门一起用，账号权限分得清</h3>
          <p class="c-direction__text">机构订阅适合编辑部、教练组或数据分析岗同时在线。谁负责查、谁负责导出，权限按角色分，订阅记录也一目了然。</p>
          <ul class="c-direction__list">
            <li>登录站内索引后可查看费用说明与订阅记录</li>
            <li>周期可选赛季、季度与单场赛事包三种长度</li>
            <li>8 至 13 英寸平板横屏可同屏看时间轴与数据面板</li>
          </ul>
          <a class="c-link" href="/help-center/">去帮助中心看周期与报价</a>
        </article>
      </div>
    </div>
  </section>

  <div class="theme-band theme-band--indigo c-band">
    <div class="shell c-band__inner">
      <p class="c-band__label">对接节奏</p>
      <p class="c-band__text">从提交需求到账号开通，四步走完。每一步该由谁配合、要交什么材料，事先都会讲清楚。</p>
    </div>
  </div>

  <section class="section c-process" id="process">
    <div class="shell">
      <header class="c-section-head">
        <p class="eyebrow">合作流程</p>
        <h2 class="c-section-title">四步，从一次咨询到账号能用</h2>
        <p class="c-section-lead">流程不复杂，但每一步都需要你们出一点信息。提前知道要准备什么，来回沟通的次数会少很多。</p>
      </header>

      <ol class="c-steps">
        <li class="c-step" data-reveal>
          <span class="c-step__num">01</span>
          <div class="c-step__body">
            <h3 class="c-step__title">提交需求</h3>
            <p class="c-step__text">用客服邮箱或服务电话告诉我们你们是谁、想解决什么问题。媒体、俱乐部、赛事方、机构订阅四类需求，接到之后会转到对应的对接人。</p>
          </div>
          <p class="c-step__need">你们这边：一句话说清身份与主要用途。</p>
        </li>
        <li class="c-step" data-reveal>
          <span class="c-step__num">02</span>
          <div class="c-step__body">
            <h3 class="c-step__title">确认数据范围</h3>
            <p class="c-step__text">一起把项目、赛事、统计项和使用人数圈出来。需要哪些技术指标、覆盖哪几个联赛或杯赛、是否要团队账号，这一步定下来后面就不用改。</p>
          </div>
          <p class="c-step__need">你们这边：列出关注的赛事清单与需要的指标名称。</p>
        </li>
        <li class="c-step" data-reveal>
          <span class="c-step__num">03</span>
          <div class="c-step__body">
            <h3 class="c-step__title">安排服务周期</h3>
            <p class="c-step__text">按你们的使用节奏选周期长度，赛季、季度或围绕单场赛事都可以。费用与权益差异会指到登录后的站内索引和帮助中心第三节，你看完再决定。</p>
          </div>
          <p class="c-step__need">你们这边：确认使用起止时间与大致人数。</p>
        </li>
        <li class="c-step" data-reveal>
          <span class="c-step__num">04</span>
          <div class="c-step__body">
            <h3 class="c-step__title">开通账号并交付</h3>
            <p class="c-step__text">账号开好之后，客服支持组会带着你们走一遍速查与索引，把常用的检索路径存成习惯。后续有问题直接找对接人。</p>
          </div>
          <p class="c-step__need">你们这边：指定一位内部联系人，方便后续对接。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--teal c-contacts" id="contact-channels">
    <div class="shell">
      <header class="c-section-head">
        <p class="eyebrow">联系方式</p>
        <h2 class="c-section-title">三条线，按场景找对应入口</h2>
        <p class="c-section-lead">不用纠结先找谁。看你要办的事属于哪一类，走对应的那条线最快。</p>
      </header>

      <div class="c-contact-panels">
        <article class="c-panel" data-reveal>
          <p class="c-panel__kicker">使用咨询 · 数据合作</p>
          <h3 class="c-panel__title">客服邮箱</h3>
          <p class="c-panel__value">contact@e-huatiyu.com.cn</p>
          <p class="c-panel__note">适合写清楚背景的需求：合作方向、赛事范围、使用人数、期望周期，一并写进来，回复时能少问几轮。</p>
        </article>

        <article class="c-panel" data-reveal>
          <p class="c-panel__kicker">工作日 · 工作时间</p>
          <h3 class="c-panel__title">服务电话</h3>
          <p class="c-panel__value">400-4766-9888</p>
          <p class="c-panel__note">急着确认一场比赛的数字、或者想当场问清服务周期怎么选，打电话更快。复杂需求还是建议先发邮件。</p>
        </article>

        <article class="c-panel" data-reveal>
          <p class="c-panel__kicker">邮寄材料与约见沟通</p>
          <h3 class="c-panel__title">通信地址</h3>
          <p class="c-panel__value c-panel__value--addr">海南省海口市龙华区滨海大道105号<br>华体育数据大厦8层</p>
          <p class="c-panel__note">需要寄送材料或约线下沟通的，按这个地址寄送。来之前先电话约一下，免得对接人不在。</p>
        </article>
      </div>

      <p class="c-icp-line">琼ICP备85917896号-5</p>
    </div>
  </section>

  <section class="section c-prepare" id="prepare">
    <div class="shell c-prepare__grid">
      <div class="c-prepare__intro">
        <p class="eyebrow">咨询前准备</p>
        <h2 class="c-section-title">把这四件事想好，第一封邮件就能推进</h2>
        <p class="c-prepare__text">大部分来回沟通都耗在同一件事上：信息不全。下面四项提前理一遍，对接人第一次回复大概率就能给你具体方案，而不是再问一遍背景。</p>
        <a class="btn btn-ghost" href="/help-center/">先看看常见问题</a>
      </div>

      <ul class="c-checklist">
        <li class="c-checklist__item" data-reveal>
          <span class="c-checklist__mark" aria-hidden="true"></span>
          <div>
            <h3 class="c-checklist__title">赛事项目</h3>
            <p>主要跟哪几个项目？足球、篮球、排球、乒乓球、羽毛球，还是跨项目都要。</p>
          </div>
        </li>
        <li class="c-checklist__item" data-reveal>
          <span class="c-checklist__mark" aria-hidden="true"></span>
          <div>
            <h3 class="c-checklist__title">覆盖范围</h3>
            <p>关注哪几个联赛、杯赛或具体球队？整个赛季跟，还是只在某几个阶段用。</p>
          </div>
        </li>
        <li class="c-checklist__item" data-reveal>
          <span class="c-checklist__mark" aria-hidden="true"></span>
          <div>
            <h3 class="c-checklist__title">使用人数</h3>
            <p>几个人同时查？需不需要团队协同、数据导出和分角色权限。</p>
          </div>
        </li>
        <li class="c-checklist__item" data-reveal>
          <span class="c-checklist__mark" aria-hidden="true"></span>
          <div>
            <h3 class="c-checklist__title">预期周期</h3>
            <p>按赛季、按季度，还是围绕单场赛事？周期长度直接决定服务怎么排。</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <section class="section section--indigo c-coverage" id="coverage">
    <div class="shell c-coverage__grid">
      <div class="c-coverage__body">
        <p class="eyebrow">服务覆盖与对接团队</p>
        <h2 class="c-section-title">你签完之后，谁来接着跟</h2>
        <p class="c-coverage__text">数据采集、统计校准、产品研发、客户支持四个职能组一起支撑一条合作线。合作敲定后由客户支持组做日常对接，涉及数据范围的调整再拉采集与校准的同事进来。</p>

        <div class="c-stat-row">
          <div class="c-stat">
            <span class="c-stat__num">42000+</span>
            <span class="c-stat__unit">场比赛记录</span>
          </div>
          <div class="c-stat">
            <span class="c-stat__num">12</span>
            <span class="c-stat__unit">个运动项目</span>
          </div>
          <div class="c-stat">
            <span class="c-stat__num">30+</span>
            <span class="c-stat__unit">家长期合作机构</span>
          </div>
        </div>

        <ul class="c-team-list">
          <li><strong>数据采集组</strong>负责现场终端与赛事官方技术统计的对接。</li>
          <li><strong>统计校准组</strong>负责视频复核与指标口径的日常巡检。</li>
          <li><strong>产品研发组</strong>负责速查、索引与平板端的功能迭代。</li>
          <li><strong>客户支持组</strong>负责账号开通、使用带教与日常答疑。</li>
        </ul>

        <p class="c-coverage__link-line">想了解合作机构与赛季演进，可以看 <a class="c-link" href="/team/">品牌与团队</a>。</p>
      </div>

      <figure class="c-coverage__figure">
        <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="以网格城市与数据连线表现的抽象覆盖示意图，深蓝底配荧光青节点" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="section c-cta">
    <div class="shell c-cta__inner">
      <p class="eyebrow">下一步</p>
      <h2 class="c-cta__title">把需求发过来，我们从一场比赛开始对</h2>
      <p class="c-cta__text">写清赛事范围与需要的指标，或者直接打电话说。首次沟通不收费，也不绑定任何周期，先把你们的场景聊明白再说。</p>
      <div class="c-cta__actions">
        <a class="btn btn-primary" href="#contact-channels">查看联系方式</a>
        <a class="btn btn-ghost" href="/services/">浏览服务与方案</a>
      </div>
      <p class="c-cta__fine">账号信息的处理方式，见 <a class="c-link" href="/privacy-policy/">隐私政策</a>。</p>
    </div>
  </section>

</main>

.page-contact {
  background: var(--ink);
  color: var(--porcelain);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */

.page-contact .c-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 28px);
}

.page-contact .c-hero__top {
  padding-top: 8px;
  padding-bottom: 52px;
}

.page-contact .c-hero__grid {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}

.page-contact .c-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6.6vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  color: var(--porcelain);
}

.page-contact .c-hero__lead {
  max-width: var(--measure);
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-contact .c-hero__actions .btn {
  text-decoration: none;
}

/* ---------- 首屏路线图 ---------- */

.page-contact .c-route {
  position: relative;
  background: var(--zone-teal);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-contact .c-route__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.page-contact .c-route__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.page-contact .c-route__inner {
  position: relative;
  z-index: 1;
  padding-top: 44px;
  padding-bottom: 48px;
}

.page-contact .c-route__caption {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .c-route__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-contact .c-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(6, 23, 38, 0.82);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}

.page-contact .c-node__dot {
  display: none;
}

.page-contact .c-node__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--porcelain);
}

.page-contact .c-node__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-node__more {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
}

@media (hover: hover) and (min-width: 1000px) {
  .page-contact .c-node__more {
    max-height: 0;
    padding-top: 0;
    border-top-color: transparent;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s var(--ease), opacity 0.24s var(--ease), padding-top 0.24s var(--ease), border-color 0.24s var(--ease);
  }

  .page-contact .c-node:hover .c-node__more,
  .page-contact .c-node:focus-within .c-node__more {
    max-height: 160px;
    padding-top: 10px;
    border-top-color: var(--line);
    opacity: 1;
  }

  .page-contact .c-node:hover,
  .page-contact .c-node:focus-within {
    border-color: var(--line-cyan);
    transform: translateY(-4px);
  }
}

/* ---------- 通用章节头部 ---------- */

.page-contact .c-section-head {
  max-width: 760px;
}

.page-contact .c-section-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--porcelain);
}

.page-contact .c-section-lead {
  margin: 16px 0 0;
  max-width: var(--measure);
  font-size: 16px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-contact .c-link:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ---------- 合作方向 ---------- */

.page-contact .c-directions {
  background: var(--ink);
}

.page-contact .c-direction-grid {
  display: grid;
  gap: 18px;
  margin-top: 40px;
}

.page-contact .c-direction {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--zone-indigo);
  transition: border-color 0.24s var(--ease);
}

.page-contact .c-direction:hover {
  border-color: var(--line-cyan);
}

.page-contact .c-direction__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--porcelain);
}

.page-contact .c-direction__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

.page-contact .c-direction__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-contact .c-direction__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--porcelain);
}

.page-contact .c-direction__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.page-contact .c-direction .c-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13.5px;
  font-family: var(--font-mono);
}

/* ---------- 主题带 ---------- */

.page-contact .c-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-contact .c-band__inner {
  display: grid;
  gap: 10px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.page-contact .c-band__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-contact .c-band__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--porcelain);
}

/* ---------- 合作流程 ---------- */

.page-contact .c-process {
  background: var(--ink);
}

.page-contact .c-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-contact .c-step {
  display: grid;
  gap: 10px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .c-step__num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-contact .c-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-step__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

.page-contact .c-step__need {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(37, 242, 214, 0.07);
  border: 1px dashed var(--line-cyan);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 联系方式 ---------- */

.page-contact .c-contacts {
  position: relative;
}

.page-contact .c-contact-panels {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.page-contact .c-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
  border-radius: var(--r-lg);
  background: rgba(6, 23, 38, 0.62);
  border: 1px solid var(--line);
}

.page-contact .c-panel__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--amber);
}

.page-contact .c-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-panel__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.1vw, 21px);
  line-height: 1.5;
  color: var(--cyan);
  word-break: break-word;
}

.page-contact .c-panel__value--addr {
  font-size: 15px;
  color: var(--porcelain);
}

.page-contact .c-panel__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-icp-line {
  margin: 30px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

/* ---------- 咨询前准备 ---------- */

.page-contact .c-prepare {
  background: var(--ink);
}

.page-contact .c-prepare__grid {
  display: grid;
  gap: 34px;
}

.page-contact .c-prepare__text {
  margin: 16px 0 24px;
  max-width: var(--measure);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

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

.page-contact .c-checklist__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--zone-teal);
  transition: border-color 0.24s var(--ease);
}

.page-contact .c-checklist__item:hover {
  border-color: var(--line-cyan);
}

.page-contact .c-checklist__mark {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--cyan);
  background: rgba(37, 242, 214, 0.1);
}

.page-contact .c-checklist__mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(40deg);
}

.page-contact .c-checklist__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-checklist__item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 服务覆盖与对接团队 ---------- */

.page-contact .c-coverage__grid {
  display: grid;
  gap: 34px;
}

.page-contact .c-coverage__text {
  margin: 16px 0 0;
  max-width: var(--measure);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding: 22px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(6, 23, 38, 0.55);
}

.page-contact .c-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-contact .c-stat__num {
  font-family: var(--font-mono);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cyan);
}

.page-contact .c-stat__unit {
  font-size: 12px;
  line-height: 1.4;
  color: var(--mist);
}

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

.page-contact .c-team-list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-team-list strong {
  display: inline-block;
  min-width: 108px;
  margin-right: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--porcelain);
}

.page-contact .c-coverage__link-line {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .c-coverage__figure {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(37, 242, 214, 0.12), rgba(20, 28, 63, 0.9));
  align-self: start;
}

.page-contact .c-coverage__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 结尾 ---------- */

.page-contact .c-cta {
  background: var(--zone-wine);
  border-top: 1px solid var(--line);
}

.page-contact .c-cta__inner {
  max-width: 860px;
}

.page-contact .c-cta__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--porcelain);
}

.page-contact .c-cta__text {
  margin: 18px 0 0;
  max-width: var(--measure);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .c-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-contact .c-cta__actions .btn {
  text-decoration: none;
}

.page-contact .c-cta__fine {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 平板 ---------- */

@media (min-width: 700px) {
  .page-contact .c-hero__top {
    padding-bottom: 64px;
  }

  .page-contact .c-route__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contact .c-direction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contact .c-contact-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contact .c-contact-panels .c-panel:first-child {
    grid-column: span 2;
  }

  .page-contact .c-band__inner {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: baseline;
    gap: 24px;
  }
}

/* ---------- 桌面 ---------- */

@media (min-width: 1000px) {
  .page-contact .c-hero {
    padding-top: calc(var(--header-h) + 56px);
  }

  .page-contact .c-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: end;
    margin-top: 26px;
  }

  .page-contact .c-hero__side {
    padding-bottom: 8px;
  }

  .page-contact .c-route__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-top: 40px;
  }

  .page-contact .c-route__track::before {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    top: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--orange), var(--cyan));
    opacity: 0.75;
  }

  .page-contact .c-node {
    padding-top: 26px;
  }

  .page-contact .c-node__dot {
    display: block;
    position: absolute;
    top: -28px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 5px rgba(37, 242, 214, 0.16);
    transition: transform 0.24s var(--ease), background-color 0.24s var(--ease), box-shadow 0.24s var(--ease);
  }

  .page-contact .c-node:hover .c-node__dot {
    transform: scale(1.25);
    background: var(--orange);
    box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.2);
  }

  .page-contact .c-step {
    grid-template-columns: 96px minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 34px;
    align-items: start;
    padding: 30px 0;
  }

  .page-contact .c-step__num {
    font-size: 40px;
  }

  .page-contact .c-step__need {
    align-self: center;
  }

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

  .page-contact .c-contact-panels .c-panel:first-child {
    grid-column: auto;
  }

  .page-contact .c-prepare__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 60px;
    align-items: start;
  }

  .page-contact .c-coverage__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 60px;
    align-items: start;
  }

  .page-contact .c-band__text {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .c-node,
  .page-contact .c-node__dot,
  .page-contact .c-direction,
  .page-contact .c-checklist__item {
    transition: none;
  }

  .page-contact .c-node:hover,
  .page-contact .c-node:focus-within,
  .page-contact .c-node:hover .c-node__dot {
    transform: none;
  }
}