.page-contact {
  --ct-softline: rgba(159, 176, 200, 0.2);
  --ct-panel-a: rgba(27, 42, 74, 0.88);
  --ct-panel-b: rgba(14, 26, 48, 0.68);
  background: var(--ink-950);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-contact .shell {
  position: relative;
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 13vw, 132px) 0 clamp(48px, 7vw, 76px);
  background: var(--ink-950);
}

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

.page-contact .ct-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 28%;
  opacity: 0.42;
}

.page-contact .ct-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 72% at 86% 8%, rgba(62, 124, 123, 0.42), transparent 62%),
    linear-gradient(180deg, rgba(10, 20, 37, 0.62) 0%, rgba(10, 20, 37, 0.9) 56%, var(--ink-950) 100%);
}

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

.page-contact .ct-hero .crumbs li,
.page-contact .ct-hero .crumbs a {
  color: var(--mist);
}

.page-contact .ct-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 48px);
  margin-top: clamp(22px, 3vw, 34px);
}

.page-contact .ct-hero h1 {
  font-family: var(--font-head);
  font-weight: 200;
  font-size: clamp(2.3rem, 6.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 16px 0 22px;
  color: var(--white);
  overflow-wrap: break-word;
}

.page-contact .ct-hero h1 .u-heavy {
  display: block;
  font-weight: 800;
  color: var(--lime);
  letter-spacing: -0.02em;
}

.page-contact .ct-hero .lede {
  max-width: 34em;
  color: var(--mist);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.8;
  margin: 0;
}

/* 渠道面板 */
.page-contact .ct-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-contact .ct-ch {
  position: relative;
  padding: 16px 18px 16px 24px;
  border: 1px solid var(--ct-softline);
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(155deg, var(--ct-panel-a), var(--ct-panel-b));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-contact .ct-ch:hover {
  border-color: var(--line-lime);
  transform: translateY(-2px);
}

.page-contact .ct-ch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--teal);
}

.page-contact .ct-ch--tel::before {
  background: var(--lime);
}

.page-contact .ct-ch--addr::before {
  background: var(--clay);
}

.page-contact .ct-ch__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}

.page-contact .ct-ch__v {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-contact a.ct-ch__v:hover,
.page-contact a.ct-ch__v:focus-visible {
  color: var(--lime);
  border-color: var(--lime);
}

.page-contact .ct-ch--addr .ct-ch__v {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--white);
}

.page-contact .ct-ch__n {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------- 公共小节标题 ---------- */
.page-contact .ct-sec {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-contact .ct-sec h2 {
  font-family: var(--font-head);
  font-weight: 200;
  font-size: clamp(1.75rem, 4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 12px 0 16px;
  color: var(--indigo);
}

.page-contact .ct-sec h2 strong {
  font-weight: 800;
}

.page-contact .ct-sec p {
  max-width: 44em;
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.85;
  color: var(--rock);
}

/* ---------- 响应时段 ---------- */
.page-contact .ct-hours {
  background: var(--paper);
  color: var(--indigo);
  padding: clamp(52px, 8vw, 96px) 0;
  border-radius: 32px 32px 0 0;
}

.page-contact .ct-clock {
  margin: 0 0 clamp(24px, 4vw, 36px);
  padding: 20px 18px 14px;
  border: 1px solid var(--pale);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 22px 46px -38px rgba(27, 42, 74, 0.75);
}

.page-contact .ct-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 12px;
}

.page-contact .ct-track::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 20px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), rgba(62, 124, 123, 0.32));
}

.page-contact .ct-track__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.page-contact .ct-track__mark i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--teal);
  box-sizing: content-box;
}

.page-contact .ct-track__mark:first-child i {
  background: var(--lime);
}

.page-contact .ct-track__mark b {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rock);
}

.page-contact .ct-clock__note {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--rock);
  border-top: 1px dashed var(--pale);
  padding-top: 12px;
}

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

.page-contact .ct-sla li {
  padding: 20px 20px 22px;
  border: 1px solid var(--pale);
  border-top: 3px solid var(--teal);
  border-radius: 6px 18px 18px 18px;
  background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-contact .ct-sla li:nth-child(2) {
  border-top-color: var(--clay);
}

.page-contact .ct-sla li:nth-child(3) {
  border-top-color: var(--indigo);
}

.page-contact .ct-sla li:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -36px rgba(27, 42, 74, 0.8);
}

.page-contact .ct-sla__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rock);
  margin-bottom: 10px;
}

.page-contact .ct-sla__v {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--indigo);
}

.page-contact .ct-sla__n {
  display: block;
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--rock);
}

/* ---------- 留言要点 ---------- */
.page-contact .ct-write {
  background: linear-gradient(180deg, var(--indigo) 0%, #16233d 100%);
  color: var(--white);
  padding: clamp(52px, 8vw, 96px) 0;
}

.page-contact .ct-write__grid {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
}

.page-contact .ct-write .ct-sec h2 {
  color: var(--white);
}

.page-contact .ct-write .ct-sec h2 strong {
  color: var(--lime);
}

.page-contact .ct-write .ct-sec p {
  color: var(--mist);
}

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

.page-contact .ct-brief li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .ct-brief__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--lime);
  padding-top: 4px;
}

.page-contact .ct-brief h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--white);
}

.page-contact .ct-brief p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .ct-aside {
  padding: 24px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 20px 20px 20px 6px;
  background: rgba(14, 26, 48, 0.58);
}

.page-contact .ct-aside__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 12px 0 10px;
  color: var(--white);
}

.page-contact .ct-aside__note {
  margin: 0 0 18px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--mist);
}

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

.page-contact .ct-links__a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-contact .ct-links__a:hover,
.page-contact .ct-links__a:focus-visible {
  border-color: var(--line-lime);
  background: rgba(62, 124, 123, 0.24);
  transform: translateY(-2px);
}

.page-contact .ct-links__t {
  font-weight: 700;
}

.page-contact .ct-links__r {
  font-family: var(--font-mono);
  color: var(--lime);
  font-size: 0.8125rem;
}

.page-contact .ct-links__n {
  margin: 6px 0 0 2px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--mist);
}

/* ---------- 合作流程 ---------- */
.page-contact .ct-partner {
  background: var(--paper);
  color: var(--indigo);
  padding: clamp(52px, 8vw, 96px) 0;
}

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

.page-contact .ct-steps li {
  position: relative;
  padding: 20px 18px 22px;
  border: 1px solid var(--pale);
  border-radius: 16px 16px 16px 4px;
  background: var(--white);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-contact .ct-steps li:hover {
  transform: translateY(-2px);
  border-color: rgba(62, 124, 123, 0.5);
}

.page-contact .ct-steps__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--clay);
  margin-bottom: 10px;
}

.page-contact .ct-steps h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--indigo);
}

.page-contact .ct-steps p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--rock);
}

.page-contact .ct-cal {
  margin-top: clamp(24px, 4vw, 36px);
  padding: 24px 22px 26px;
  border-radius: 20px 20px 20px 6px;
  border-left: 4px solid var(--clay);
  background: var(--indigo);
  color: var(--white);
}

.page-contact .ct-cal__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--white);
}

.page-contact .ct-cal__lead {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-contact .ct-cal__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-contact .ct-cal__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--pale);
}

.page-contact .ct-cal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

.page-contact .ct-cal__note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 地址 ---------- */
.page-contact .ct-addr {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--white);
  padding: clamp(52px, 8vw, 104px) 0 clamp(56px, 9vw, 112px);
}

.page-contact .ct-addr::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -30%;
  width: 62vw;
  height: 62vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  border: 1px solid rgba(159, 176, 200, 0.14);
  box-shadow: 0 0 0 40px rgba(62, 124, 123, 0.06), 0 0 0 90px rgba(62, 124, 123, 0.04);
  pointer-events: none;
}

.page-contact .ct-addr__grid {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-contact .ct-addr .ct-sec h2 {
  color: var(--white);
}

.page-contact .ct-addr .ct-sec p {
  color: var(--mist);
}

.page-contact .ct-addr__pin {
  position: relative;
  margin: 0 0 24px;
  padding-left: 28px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 600;
  line-height: 1.7;
  color: var(--white);
}

.page-contact .ct-addr__pin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 6px rgba(224, 122, 79, 0.2);
}

.page-contact .ct-addr__meta {
  margin: 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.page-contact .ct-addr__meta dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 5px;
}

.page-contact .ct-addr__meta dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--pale);
}

.page-contact .ct-addr__media .figure {
  margin: 0;
}

.page-contact .ct-addr__media .figure__media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
}

.page-contact .ct-addr__media .figure__cap {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 断点 ---------- */
@media (min-width: 680px) {
  .page-contact .ct-sla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 920px) {
  .page-contact .ct-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .ct-write__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

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

  .page-contact .ct-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-contact .ct-addr__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-contact .ct-aside {
    position: sticky;
    top: 96px;
  }

  .page-contact .ct-brief li {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    padding: 22px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .ct-ch,
  .page-contact .ct-sla li,
  .page-contact .ct-steps li,
  .page-contact .ct-links__a {
    transition: none;
  }

  .page-contact .ct-ch:hover,
  .page-contact .ct-sla li:hover,
  .page-contact .ct-steps li:hover,
  .page-contact .ct-links__a:hover {
    transform: none;
  }
}
<<<END>>>

等等——输出格式要求里，标记只有 MAIN_HTML 和 PAGE_CSS 两个，我不该额外加 <<<END>>>。得去掉它，严格遵守“每个标记只能出现一次”的规则。最终的结尾就停在 CSS 的最后一行。
<main id="main-content" class="page-contact">
  <section class="ct-hero" aria-labelledby="ct-hero-title">
    <div class="ct-hero__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="贵州山地城市晨雾与层叠楼宇的抽象剪影，无具体地标与人物">
    </div>
    <div class="shell ct-hero__inner">
      <nav class="crumbs" aria-label="页面位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li><a href="/find-us/" aria-current="page">找到我们</a></li>
        </ol>
      </nav>

      <div class="ct-hero__grid">
        <div class="ct-hero__lead">
          <p class="eyebrow">CONTACT DESK · 服务台</p>
          <h1 id="ct-hero-title">把问题交给对的人，<span class="u-heavy">一个工作日见回音</span></h1>
          <p class="lede">不论你想弄清一组装备对比是怎么打分的，还是打算把球馆、装备门店或球友社群的资料放到千亿球友会上，对接人都在这里。按下面选一条渠道，写清来意，我们按事项分给对应的同事跟到底。</p>
        </div>

        <ul class="ct-channels">
          <li class="ct-ch ct-ch--mail">
            <span class="ct-ch__k">客服邮箱 / EMAIL</span>
            <a class="ct-ch__v" href="mailto:email@qy-fanbase.com.cn">email@qy-fanbase.com.cn</a>
            <span class="ct-ch__n">常规咨询、品牌合作、数据问题都从这里进，主题写清事项处理更快。</span>
          </li>
          <li class="ct-ch ct-ch--tel">
            <span class="ct-ch__k">客服电话 / TEL</span>
            <a class="ct-ch__v" href="tel:18223174171">18223174171</a>
            <span class="ct-ch__n">适合急着确认入口位置、页面打不开这类当场能说清的事。</span>
          </li>
          <li class="ct-ch ct-ch--addr">
            <span class="ct-ch__k">联系地址 / ADDRESS</span>
            <span class="ct-ch__v">贵州省贵阳市观山湖区长岭北路168号中天金融城A座12层</span>
            <span class="ct-ch__n">来访请先约时间，团队每月有 4 至 6 天在场馆和社群走访。</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="ct-hours" id="hours" aria-labelledby="ct-hours-title">
    <div class="shell">
      <header class="ct-sec">
        <p class="eyebrow">RESPONSE WINDOW</p>
        <h2 id="ct-hours-title">工作日九点到六点，<strong>信箱有人守着</strong></h2>
        <p>客服邮箱在 9:00 至 18:00（北京时间）之间处理来信。不同事项的回复节奏不一样，先看清下面三类，就知道该等多久、要不要再补一条电话。</p>
      </header>

      <div class="ct-clock" role="img" aria-label="工作日 09:00 至 18:00 的服务时段刻度示意">
        <div class="ct-track">
          <span class="ct-track__mark"><i></i><b>09:00</b></span>
          <span class="ct-track__mark"><i></i><b>12:00</b></span>
          <span class="ct-track__mark"><i></i><b>15:00</b></span>
          <span class="ct-track__mark"><i></i><b>18:00</b></span>
        </div>
        <p class="ct-clock__note">下班后收到的邮件进入次日队列，排在早上第一批处理。</p>
      </div>

      <ul class="ct-sla">
        <li>
          <span class="ct-sla__k">常规咨询</span>
          <span class="ct-sla__v">1 个工作日</span>
          <span class="ct-sla__n">使用问题、入口找不到、收藏夹怎么用，这类当天就能给出答复。</span>
        </li>
        <li>
          <span class="ct-sla__k">品牌合作 · 数据校准</span>
          <span class="ct-sla__v">2 个工作日</span>
          <span class="ct-sla__n">涉及内容范围、条款确认和评测条目复核，会先内部对一遍再回你。</span>
        </li>
        <li>
          <span class="ct-sla__k">合作机构资料上线</span>
          <span class="ct-sla__v">5 个工作日</span>
          <span class="ct-sla__n">资料确认后进入排期，具体日期在方案沟通环节告诉你。</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="ct-write" id="brief" aria-labelledby="ct-write-title">
    <div class="shell">
      <div class="ct-write__grid">
        <div>
          <header class="ct-sec">
            <p class="eyebrow">BEFORE YOU SEND</p>
            <h2 id="ct-write-title">把话说全，<strong>一次就能对上人</strong></h2>
            <p>一封信里写清下面四件事，第一轮回复就能带上答案，而不是先问你三个问题。</p>
          </header>

          <ol class="ct-brief">
            <li>
              <span class="ct-brief__num">01</span>
              <div>
                <h3>主题先点事项</h3>
                <p>“品牌合作”“数据校准”“资料上线”“使用问题”，挑一个写在最前面。品牌合作与数据校准的来信会走优先队列。</p>
              </div>
            </li>
            <li>
              <span class="ct-brief__num">02</span>
              <div>
                <h3>说清你的处境</h3>
                <p>哪一类运动装备、哪个场馆或社群、卡在对比数据看不懂还是入口点不进，具体一点，我们不用再猜。</p>
              </div>
            </li>
            <li>
              <span class="ct-brief__num">03</span>
              <div>
                <h3>留一条能回的路</h3>
                <p>邮箱或电话二选一写清，附上方便接听的时间段，省掉来回确认的那两天。</p>
              </div>
            </li>
            <li>
              <span class="ct-brief__num">04</span>
              <div>
                <h3>线索一并附上</h3>
                <p>评测的期次编号、页面名称、机构资料清单，能贴的贴上来，处理速度会明显不同。</p>
              </div>
            </li>
          </ol>
        </div>

        <aside class="ct-aside">
          <p class="eyebrow">SELF-SERVICE</p>
          <h3 class="ct-aside__title">有些问题，自己查更快</h3>
          <p class="ct-aside__note">通道入口在哪、收藏能存多少、对比清单怎么并排看，这些都有现成答案，不用等回信。</p>
          <ul class="ct-links">
            <li class="ct-links__item">
              <a class="ct-links__a" href="/knowledge/">
                <span class="ct-links__t">知识中心</span>
                <span class="ct-links__r" aria-hidden="true">→</span>
              </a>
              <p class="ct-links__n">68 条常见问题，覆盖通道使用、数据评测、收藏工具与合作服务</p>
            </li>
            <li class="ct-links__item">
              <a class="ct-links__a" href="/offerings/">
                <span class="ct-links__t">品牌服务板块</span>
                <span class="ct-links__r" aria-hidden="true">→</span>
              </a>
              <p class="ct-links__n">对比清单、收藏夹、快捷路径、周报订阅的具体用法</p>
            </li>
            <li class="ct-links__item">
              <a class="ct-links__a" href="/company/">
                <span class="ct-links__t">品牌档案</span>
                <span class="ct-links__r" aria-hidden="true">→</span>
              </a>
              <p class="ct-links__n">团队分工、内容生产流程、合作生态与区域服务案例</p>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </section>

  <section class="ct-partner" id="partner" aria-labelledby="ct-partner-title">
    <div class="shell">
      <header class="ct-sec">
        <p class="eyebrow">PARTNERSHIP</p>
        <h2 id="ct-partner-title">品牌合作走四步，<strong>每一步都有人跟</strong></h2>
        <p>球馆、装备零售和球友社群想把资料放到站上，按下面的顺序走一遍，中间不会出现找不到对接人的空档。</p>
      </header>

      <ol class="ct-steps">
        <li>
          <span class="ct-steps__num">STEP 01</span>
          <h3>需求登记</h3>
          <p>邮件里说明合作类型、希望上线的内容范围和大致的上线时间。</p>
        </li>
        <li>
          <span class="ct-steps__num">STEP 02</span>
          <h3>资料核验</h3>
          <p>我们核对机构信息、内容范围与授权情况，有缺口会一次性列清楚。</p>
        </li>
        <li>
          <span class="ct-steps__num">STEP 03</span>
          <h3>方案确认</h3>
          <p>确定呈现位置、更新频率和双方对接人，落到一份能照着执行的安排。</p>
        </li>
        <li>
          <span class="ct-steps__num">STEP 04</span>
          <h3>上线复盘</h3>
          <p>上线后一起看阅读数据和球友反馈，定下下一轮内容的节奏。</p>
        </li>
      </ol>

      <div class="ct-cal">
        <h3 class="ct-cal__title">数据校准，请把线索带全</h3>
        <p class="ct-cal__lead">觉得某组对比分数不对、某个参数过期，写信时请附上：</p>
        <ul class="ct-cal__list">
          <li>评测的期次编号与页面名称</li>
          <li>涉及的装备品类与具体条目</li>
          <li>你认为需要修正的地方，以及可参考的依据</li>
        </ul>
        <p class="ct-cal__note">数据团队每周三做一次全量校准，最近一次在 3 月 18 日。来信里的问题会排进当周或下一周的校准清单，提交后 48 小时内先给你一个处理反馈。</p>
      </div>
    </div>
  </section>

  <section class="ct-addr" id="address" aria-labelledby="ct-addr-title">
    <div class="shell">
      <div class="ct-addr__grid">
        <div>
          <header class="ct-sec">
            <p class="eyebrow">LOCATION</p>
            <h2 id="ct-addr-title">地址与到达</h2>
            <p>线下走访、资料签署、当面沟通评测细节，都可以约在这里。</p>
          </header>

          <p class="ct-addr__pin">贵州省贵阳市观山湖区长岭北路168号中天金融城A座12层</p>

          <dl class="ct-addr__meta">
            <div>
              <dt>服务时段</dt>
              <dd>工作日 9:00 - 18:00（北京时间）</dd>
            </div>
            <div>
              <dt>备案服务地区</dt>
              <dd>贵州</dd>
            </div>
            <div>
              <dt>来访提醒</dt>
              <dd>请提前通过邮箱或电话约定时间，团队每月有 4 至 6 天在运动场馆或球友社群走访。</dd>
            </div>
          </dl>
        </div>

        <div class="ct-addr__media">
          <figure class="figure figure--wide">
            <img class="figure__media" src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="抽象路线纹理连接刻度节点，冷底暖光，无文字" loading="lazy" decoding="async">
          </figure>
          <p class="figure__cap">从长岭北路方向进入中天金融城，A 座 12 层为对接区域；具体楼层与时间以邮件确认为准。</p>
        </div>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --ct-softline: rgba(159, 176, 200, 0.2);
  --ct-panel-a: rgba(27, 42, 74, 0.88);
  --ct-panel-b: rgba(14, 26, 48, 0.68);
  background: var(--ink-950);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-contact .shell {
  position: relative;
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 13vw, 132px) 0 clamp(48px, 7vw, 76px);
  background: var(--ink-950);
}

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

.page-contact .ct-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 28%;
  opacity: 0.42;
}

.page-contact .ct-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 72% at 86% 8%, rgba(62, 124, 123, 0.42), transparent 62%),
    linear-gradient(180deg, rgba(10, 20, 37, 0.62) 0%, rgba(10, 20, 37, 0.9) 56%, var(--ink-950) 100%);
}

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

.page-contact .ct-hero .crumbs li,
.page-contact .ct-hero .crumbs a {
  color: var(--mist);
}

.page-contact .ct-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 48px);
  margin-top: clamp(22px, 3vw, 34px);
}

.page-contact .ct-hero h1 {
  font-family: var(--font-head);
  font-weight: 200;
  font-size: clamp(2.3rem, 6.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 16px 0 22px;
  color: var(--white);
  overflow-wrap: break-word;
}

.page-contact .ct-hero h1 .u-heavy {
  display: block;
  font-weight: 800;
  color: var(--lime);
  letter-spacing: -0.02em;
}

.page-contact .ct-hero .lede {
  max-width: 34em;
  color: var(--mist);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.8;
  margin: 0;
}

/* 渠道面板 */
.page-contact .ct-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-contact .ct-ch {
  position: relative;
  padding: 16px 18px 16px 24px;
  border: 1px solid var(--ct-softline);
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(155deg, var(--ct-panel-a), var(--ct-panel-b));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-contact .ct-ch:hover {
  border-color: var(--line-lime);
  transform: translateY(-2px);
}

.page-contact .ct-ch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--teal);
}

.page-contact .ct-ch--tel::before {
  background: var(--lime);
}

.page-contact .ct-ch--addr::before {
  background: var(--clay);
}

.page-contact .ct-ch__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}

.page-contact .ct-ch__v {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-contact a.ct-ch__v:hover,
.page-contact a.ct-ch__v:focus-visible {
  color: var(--lime);
  border-color: var(--lime);
}

.page-contact .ct-ch--addr .ct-ch__v {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--white);
}

.page-contact .ct-ch__n {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------- 公共小节标题 ---------- */
.page-contact .ct-sec {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-contact .ct-sec h2 {
  font-family: var(--font-head);
  font-weight: 200;
  font-size: clamp(1.75rem, 4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 12px 0 16px;
  color: var(--indigo);
}

.page-contact .ct-sec h2 strong {
  font-weight: 800;
}

.page-contact .ct-sec p {
  max-width: 44em;
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.85;
  color: var(--rock);
}

/* ---------- 响应时段 ---------- */
.page-contact .ct-hours {
  background: var(--paper);
  color: var(--indigo);
  padding: clamp(52px, 8vw, 96px) 0;
  border-radius: 32px 32px 0 0;
}

.page-contact .ct-clock {
  margin: 0 0 clamp(24px, 4vw, 36px);
  padding: 20px 18px 14px;
  border: 1px solid var(--pale);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 22px 46px -38px rgba(27, 42, 74, 0.75);
}

.page-contact .ct-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 12px;
}

.page-contact .ct-track::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 20px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), rgba(62, 124, 123, 0.32));
}

.page-contact .ct-track__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.page-contact .ct-track__mark i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--teal);
  box-sizing: content-box;
}

.page-contact .ct-track__mark:first-child i {
  background: var(--lime);
}

.page-contact .ct-track__mark b {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rock);
}

.page-contact .ct-clock__note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--pale);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--rock);
}

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

.page-contact .ct-sla li {
  padding: 20px 20px 22px;
  border: 1px solid var(--pale);
  border-top: 3px solid var(--teal);
  border-radius: 6px 18px 18px 18px;
  background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-contact .ct-sla li:nth-child(2) {
  border-top-color: var(--clay);
}

.page-contact .ct-sla li:nth-child(3) {
  border-top-color: var(--indigo);
}

.page-contact .ct-sla li:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -36px rgba(27, 42, 74, 0.8);
}

.page-contact .ct-sla__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rock);
  margin-bottom: 10px;
}

.page-contact .ct-sla__v {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--indigo);
}

.page-contact .ct-sla__n {
  display: block;
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--rock);
}

/* ---------- 留言要点 ---------- */
.page-contact .ct-write {
  background: linear-gradient(180deg, var(--indigo) 0%, #16233d 100%);
  color: var(--white);
  padding: clamp(52px, 8vw, 96px) 0;
}

.page-contact .ct-write__grid {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
}

.page-contact .ct-write .ct-sec h2 {
  color: var(--white);
}

.page-contact .ct-write .ct-sec h2 strong {
  color: var(--lime);
}

.page-contact .ct-write .ct-sec p {
  color: var(--mist);
}

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

.page-contact .ct-brief li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .ct-brief__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--lime);
  padding-top: 4px;
}

.page-contact .ct-brief h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--white);
}

.page-contact .ct-brief p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .ct-aside {
  padding: 24px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 20px 20px 20px 6px;
  background: rgba(14, 26, 48, 0.58);
}

.page-contact .ct-aside__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 12px 0 10px;
  color: var(--white);
}

.page-contact .ct-aside__note {
  margin: 0 0 18px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--mist);
}

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

.page-contact .ct-links__a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-contact .ct-links__a:hover,
.page-contact .ct-links__a:focus-visible {
  border-color: var(--line-lime);
  background: rgba(62, 124, 123, 0.24);
  transform: translateY(-2px);
}

.page-contact .ct-links__t {
  font-weight: 700;
}

.page-contact .ct-links__r {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--lime);
}

.page-contact .ct-links__n {
  margin: 6px 0 0 2px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--mist);
}

/* ---------- 合作流程 ---------- */
.page-contact .ct-partner {
  background: var(--paper);
  color: var(--indigo);
  padding: clamp(52px, 8vw, 96px) 0;
}

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

.page-contact .ct-steps li {
  position: relative;
  padding: 20px 18px 22px;
  border: 1px solid var(--pale);
  border-radius: 16px 16px 16px 4px;
  background: var(--white);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-contact .ct-steps li:hover {
  transform: translateY(-2px);
  border-color: rgba(62, 124, 123, 0.5);
}

.page-contact .ct-steps__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--clay);
  margin-bottom: 10px;
}

.page-contact .ct-steps h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--indigo);
}

.page-contact .ct-steps p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--rock);
}

.page-contact .ct-cal {
  margin-top: clamp(24px, 4vw, 36px);
  padding: 24px 22px 26px;
  border-radius: 20px 20px 20px 6px;
  border-left: 4px solid var(--clay);
  background: var(--indigo);
  color: var(--white);
}

.page-contact .ct-cal__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--white);
}

.page-contact .ct-cal__lead {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-contact .ct-cal__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-contact .ct-cal__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--pale);
}

.page-contact .ct-cal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

.page-contact .ct-cal__note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 地址 ---------- */
.page-contact .ct-addr {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--white);
  padding: clamp(52px, 8vw, 104px) 0 clamp(56px, 9vw, 112px);
}

.page-contact .ct-addr::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -30%;
  width: 62vw;
  height: 62vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  border: 1px solid rgba(159, 176, 200, 0.14);
  box-shadow: 0 0 0 40px rgba(62, 124, 123, 0.06), 0 0 0 90px rgba(62, 124, 123, 0.04);
  pointer-events: none;
}

.page-contact .ct-addr__grid {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-contact .ct-addr .ct-sec h2 {
  color: var(--white);
}

.page-contact .ct-addr .ct-sec p {
  color: var(--mist);
}

.page-contact .ct-addr__pin {
  position: relative;
  margin: 0 0 24px;
  padding-left: 28px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 600;
  line-height: 1.7;
  color: var(--white);
}

.page-contact .ct-addr__pin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 6px rgba(224, 122, 79, 0.2);
}

.page-contact .ct-addr__meta {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}

.page-contact .ct-addr__meta dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 5px;
}

.page-contact .ct-addr__meta dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--pale);
}

.page-contact .ct-addr__media .figure {
  margin: 0;
}

.page-contact .ct-addr__media .figure__media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
}

.page-contact .ct-addr__media .figure__cap {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 断点 ---------- */
@media (min-width: 680px) {
  .page-contact .ct-sla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 920px) {
  .page-contact .ct-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .ct-write__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

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

  .page-contact .ct-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-contact .ct-addr__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .page-contact .ct-aside {
    position: sticky;
    top: 96px;
  }

  .page-contact .ct-brief li {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    padding: 22px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .ct-ch,
  .page-contact .ct-sla li,
  .page-contact .ct-steps li,
  .page-contact .ct-links__a {
    transition: none;
  }

  .page-contact .ct-ch:hover,
  .page-contact .ct-sla li:hover,
  .page-contact .ct-steps li:hover,
  .page-contact .ct-links__a:hover {
    transform: none;
  }
}