.page-contact {
  --pc-gap: clamp(20px, 4vw, 44px);
  --pc-pad: clamp(16px, 2.6vw, 24px);
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, rgba(23, 70, 107, 0.32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 70, 107, 0.32) 1px, transparent 1px);
  background-size: 96px 96px;
  color: var(--mist);
  overflow-x: clip;
}

.page-contact img {
  max-width: 100%;
  height: auto;
}

.page-contact p {
  margin: 0 0 1em;
}

.page-contact .section {
  padding-block: clamp(44px, 7vw, 92px);
}

.page-contact h2 {
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0.25em 0 0.6em;
  max-width: 24ch;
}

.page-contact h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 0.55em;
}

.page-contact .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--lime);
  margin-bottom: 0.35em;
}

.page-contact .breadcrumb__link,
.page-contact .breadcrumb__item span {
  color: var(--cool);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.page-contact .breadcrumb__link:hover {
  color: var(--lime);
}

/* 首屏 */
.page-contact .pc-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(26px, 5vw, 52px) clamp(26px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.page-contact .pc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 94% 0%, rgba(46, 124, 246, 0.3), transparent 68%),
    radial-gradient(55% 80% at 2% 100%, rgba(200, 255, 61, 0.12), transparent 70%);
  pointer-events: none;
}

.page-contact .pc-hero h1 {
  font-size: clamp(2.2rem, 7.5vw, 4.4rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0.28em 0 0.4em;
}

.page-contact .pc-hero__lede {
  max-width: 62ch;
  color: var(--cool);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.85;
  margin-bottom: 0;
}

.page-contact .pc-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: clamp(22px, 3.4vw, 34px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.page-contact .pc-quick__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--cool);
  margin-right: 4px;
}

.page-contact .pc-quick__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--mist);
  text-decoration: none;
  padding: 0.5em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-contact .pc-quick__link:hover,
.page-contact .pc-quick__link:focus-visible {
  color: var(--ink);
  background: var(--lime);
  border-color: var(--lime);
  transform: translateY(-2px);
}

.page-contact .pc-quick__link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* 联系渠道 */
.page-contact .pc-channels__grid {
  display: grid;
  gap: var(--pc-gap);
}

.page-contact .pc-lead {
  color: var(--cool);
  max-width: 56ch;
  line-height: 1.8;
}

.page-contact .pc-direct {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.6vw, 26px);
}

.page-contact .pc-direct__item {
  padding-bottom: clamp(14px, 2.2vw, 22px);
  border-bottom: 1px solid var(--line);
}

.page-contact .pc-direct__key {
  margin: 0 0 0.4em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.page-contact .pc-direct__value {
  margin: 0 0 0.45em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.3rem, 4.8vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--white);
  overflow-wrap: anywhere;
}

.page-contact .pc-direct__value--mail {
  font-size: clamp(1rem, 3.4vw, 1.6rem);
}

.page-contact .pc-direct__value--sm {
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  color: var(--lime);
  letter-spacing: 0.02em;
}

.page-contact .pc-direct__note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--cool);
  max-width: 48ch;
}

.page-contact .pc-address {
  margin-top: clamp(20px, 3vw, 30px);
  padding: var(--pc-pad);
  background: linear-gradient(135deg, rgba(14, 51, 85, 0.92), rgba(11, 39, 66, 0.92));
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
}

.page-contact .pc-address .index-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin: 0 0 0.6em;
}

.page-contact .pc-address__text {
  margin: 0 0 0.6em;
  color: var(--white);
  font-size: 0.98rem;
  line-height: 1.65;
}

.page-contact .pc-address__note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--cool);
}

.page-contact .pc-privacy-note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--cool);
}

.page-contact .pc-privacy-note a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 斜切咨询清单 */
.page-contact .pc-slab {
  position: relative;
  padding: clamp(22px, 3.4vw, 36px);
  background:
    linear-gradient(180deg, rgba(6, 24, 44, 0.3), rgba(6, 24, 44, 0.48)),
    linear-gradient(155deg, #0e3355 0%, #164a7c 34%, #2e7cf6 66%, #ff6b2c 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
  border-radius: var(--radius);
}

.page-contact .pc-slab__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  background: var(--lime);
  padding: 0.35em 0.7em;
  margin: 0 0 0.9em;
}

.page-contact .pc-slab__title {
  font-size: clamp(1.2rem, 2.7vw, 1.5rem);
  font-weight: 500;
  color: var(--white);
  margin: 0 0 0.8em;
  max-width: none;
}

.page-contact .pc-slab__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .pc-slab__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
}

.page-contact .pc-slab__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--lime);
  transform: rotate(45deg);
}

.page-contact .pc-slab__list strong {
  color: var(--white);
}

.page-contact .pc-slab__figure {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-contact .pc-slab__figure img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* 问题分类 */
.page-contact .pc-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-contact .pc-head__lede {
  color: var(--cool);
  max-width: 64ch;
  line-height: 1.8;
  margin-bottom: 0;
}

.page-contact .pc-routes__grid {
  gap: clamp(12px, 2vw, 18px);
}

.page-contact .pc-route {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 28px);
  background: rgba(11, 39, 66, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.page-contact .pc-route:hover,
.page-contact .pc-route:focus-within {
  transform: translateY(-4px);
  border-color: var(--lime);
  background: var(--panel-2);
}

.page-contact .pc-route__no {
  margin: 0 0 0.7em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--orange);
}

.page-contact .pc-route p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--cool);
}

.page-contact .pc-route__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
}

.page-contact .pc-route__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-contact .pc-route__link:hover,
.page-contact .pc-route__link:focus-visible {
  color: var(--white);
  border-bottom-color: var(--lime);
}

/* 合作与长期跟赛 */
.page-contact .pc-partner__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-contact .pc-partner__body p {
  color: var(--cool);
  line-height: 1.8;
  max-width: 60ch;
}

.page-contact .pc-check {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .pc-check li {
  position: relative;
  padding-left: 22px;
  line-height: 1.75;
  color: var(--mist);
  font-size: 0.95rem;
}

.page-contact .pc-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--orange);
  transform: rotate(45deg);
}

.page-contact .pc-check strong {
  color: var(--white);
}

.page-contact .pc-check--tight {
  margin-bottom: 16px;
}

.page-contact .pc-check--tight li {
  font-size: 0.9rem;
}

.page-contact .pc-partner__figure {
  margin: 0;
}

.page-contact .pc-partner__figure img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* 技术反馈 */
.page-contact .pc-tech__grid {
  display: grid;
  gap: clamp(20px, 3.5vw, 36px);
}

.page-contact .pc-tech__col > p {
  color: var(--cool);
  line-height: 1.8;
  max-width: 58ch;
}

.page-contact .pc-tech__hint {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--mint);
  border-left: 2px solid var(--mint);
  padding-left: 12px;
  margin-bottom: 0;
}

.page-contact .pc-tech__panel {
  padding: clamp(20px, 3vw, 30px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
}

.page-contact .pc-tech__panel p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--cool);
}

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

.page-contact .pc-scope li {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--cool);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.page-contact .pc-scope span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--lime);
  margin-bottom: 3px;
}

/* 手风琴 */
.page-contact .pc-acc {
  display: grid;
  gap: 10px;
}

.page-contact .pc-acc__item {
  background: rgba(11, 39, 66, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.18s var(--ease);
}

.page-contact .pc-acc__item[open],
.page-contact .pc-acc__item:hover {
  border-color: rgba(200, 255, 61, 0.55);
}

.page-contact .pc-acc__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 24px);
  font-size: clamp(0.96rem, 2vw, 1.06rem);
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  list-style: none;
}

.page-contact .pc-acc__item summary::-webkit-details-marker {
  display: none;
}

.page-contact .pc-acc__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--lime);
  transition: transform 0.2s var(--ease);
}

.page-contact .pc-acc__item[open] summary::after {
  content: "–";
}

.page-contact .pc-acc__item summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.page-contact .pc-acc__body {
  padding: 0 clamp(16px, 2.4vw, 24px) clamp(14px, 2vw, 20px);
  color: var(--cool);
  font-size: 0.92rem;
  line-height: 1.8;
}

.page-contact .pc-acc__body p:last-child {
  margin-bottom: 0;
}

/* 页尾引导 */
.page-contact .pc-cta__inner {
  display: grid;
  gap: 20px;
  padding: clamp(24px, 4vw, 44px);
  background:
    linear-gradient(120deg, rgba(200, 255, 61, 0.14), rgba(46, 124, 246, 0.18)),
    rgba(11, 39, 66, 0.7);
  border: 1px solid var(--line);
  border-left: 4px solid var(--lime);
  border-radius: var(--radius);
}

.page-contact .pc-cta__text p {
  color: var(--cool);
  line-height: 1.8;
  max-width: 62ch;
  margin-bottom: 0;
}

.page-contact .pc-cta__text h2 {
  max-width: 26ch;
}

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

@media (min-width: 860px) {
  .page-contact .pc-tech__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-contact .pc-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .page-contact .pc-channels__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .page-contact .pc-slab {
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
  }

  .page-contact .pc-partner__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (max-width: 560px) {
  .page-contact .pc-hero h1 {
    font-size: clamp(2rem, 11vw, 2.6rem);
  }

  .page-contact .pc-quick__link {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .page-contact .pc-slab {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 0 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .pc-quick__link,
  .page-contact .pc-route,
  .page-contact .pc-acc__item,
  .page-contact .pc-route__link {
    transition: none;
  }

  .page-contact .pc-quick__link:hover,
  .page-contact .pc-route:hover,
  .page-contact .pc-route:focus-within {
    transform: none;
  }
}


<main id="main-content" class="page-contact">
  <section class="pc-hero">
    <div class="container">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
          <li class="breadcrumb__sep" aria-hidden="true">/</li>
          <li class="breadcrumb__item"><span aria-current="page">联系我们</span></li>
        </ol>
      </nav>
      <p class="eyebrow">联系与支持 · FB赛场</p>
      <h1>联系 FB赛场</h1>
      <p class="pc-hero__lede">赛程面板打不开、查不到某支球队上赛季的数据、想给俱乐部排一套完整赛季的跟赛栏目——这些事都有人接。工作日的 9:00 到 18:00，客服、数据运营和项目对接的同事在线，你把情况说清楚，我们把下一步告诉你。</p>
      <div class="pc-quick" aria-label="常用入口">
        <span class="pc-quick__label">常用入口</span>
        <a class="pc-quick__link" href="/app-download/">赛程与数据面板 <span aria-hidden="true">↗</span></a>
        <a class="pc-quick__link" href="/insights/">赛场观察 <span aria-hidden="true">↗</span></a>
        <a class="pc-quick__link" href="/questions/">问题解答 <span aria-hidden="true">↗</span></a>
        <a class="pc-quick__link" href="/about/">长期跟赛服务 <span aria-hidden="true">↗</span></a>
      </div>
    </div>
  </section>

  <section class="pc-channels section" id="channels" data-reveal>
    <div class="container pc-channels__grid">
      <div class="pc-channels__main">
        <p class="eyebrow">渠道 · 01</p>
        <h2>邮箱、电话与在线支持通道，直接对接到人</h2>
        <p class="pc-lead">第一次来问，多半是找不到入口或者页面没加载出来；跟了一段时间的用户，更多在问历史数据怎么筛、合作怎么排期。选一条渠道直接说，我们会按问题类型分给对应的小组。</p>
        <ul class="pc-direct">
          <li class="pc-direct__item">
            <p class="pc-direct__key">客服邮箱</p>
            <p class="pc-direct__value pc-direct__value--mail">kefu@fb-first-screen.com.cn</p>
            <p class="pc-direct__note">该邮箱为站点客服邮箱，工作日 9:00-18:00 内回复；紧急技术问题请通过页面右下角在线支持通道提交。</p>
          </li>
          <li class="pc-direct__item">
            <p class="pc-direct__key">客服电话</p>
            <p class="pc-direct__value">400-4349-2485</p>
            <p class="pc-direct__note">工作日 9:00-18:00 接听。电话占线时可以留言或直接发邮件，我们按收到的顺序回拨或回信。</p>
          </li>
          <li class="pc-direct__item">
            <p class="pc-direct__key">在线支持通道</p>
            <p class="pc-direct__value pc-direct__value--sm">页面右下角</p>
            <p class="pc-direct__note">影响赛程与数据入口的紧急问题从这里走最快。值班同事先响应，再把问题转给产品体验组或数据运营组跟进。</p>
          </li>
        </ul>
        <article class="pc-address">
          <p class="index-tag">联系地址</p>
          <p class="pc-address__text">湖北省武汉市洪山区光谷大道77号光谷金融港A座12层</p>
          <p class="pc-address__note">需要邮寄资料时，请先通过电话或邮件告知寄送内容与时间，我们安排接收。日常咨询用邮箱和电话更快。</p>
        </article>
        <p class="pc-privacy-note">沟通过程中产生的记录怎么保存、怎么使用，可以查看<a href="/privacy-policy/">隐私政策</a>。</p>
      </div>

      <aside class="pc-slab">
        <p class="pc-slab__tag">咨询前可准备</p>
        <h2 class="pc-slab__title">带上这四样，一轮沟通就说清</h2>
        <ul class="pc-slab__list">
          <li><strong>球队或赛事名称</strong>要查的是哪支队伍、哪个联赛或杯赛。</li>
          <li><strong>页面位置</strong>出问题的是栏目面板、历史数据还是收藏栏。</li>
          <li><strong>设备信息</strong>手机、平板还是电脑，系统与浏览器版本。</li>
          <li><strong>截图或录屏</strong>出错提示、空白面板、卡住那一屏的画面。</li>
        </ul>
        <figure class="pc-slab__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="客服工作台俯拍：耳机、显示数据面板的屏幕与手写便签，画面不含真实个人信息">
        </figure>
      </aside>
    </div>
  </section>

  <section class="pc-routes section" id="routes" data-reveal data-reveal-delay="100">
    <div class="container">
      <div class="pc-head">
        <p class="eyebrow">渠道 · 02</p>
        <h2>先分清是哪类问题，对接会更快</h2>
        <p class="pc-head__lede">三类咨询由不同小组接手：日常使用归客户支持，合作排期归项目对接，技术故障归产品体验组。把类型写在开头，后面就少几轮来回确认。</p>
      </div>
      <div class="grid grid--3 pc-routes__grid">
        <article class="card pc-route">
          <p class="pc-route__no">01</p>
          <h3>使用与操作</h3>
          <p>第一次访问不熟悉栏目面板、手机收藏怎么设、历史数据怎么按赛季翻页，都可以直接问，客服会带你走一遍。</p>
          <ul class="pc-route__tags">
            <li class="tag tag--lime">栏目设置</li>
            <li class="tag">收藏</li>
            <li class="tag">数据翻页</li>
          </ul>
          <a class="pc-route__link" href="/questions/">看问题解答 <span aria-hidden="true">→</span></a>
        </article>
        <article class="card pc-route">
          <p class="pc-route__no">02</p>
          <h3>合作与长期跟赛</h3>
          <p>俱乐部、球队、赛事运营方、体育媒体与内容机构，谈赛季追踪、栏目定制和数据包支持，都从一次需求沟通开始。</p>
          <ul class="pc-route__tags">
            <li class="tag tag--orange">球队档案</li>
            <li class="tag">栏目配置</li>
            <li class="tag">赛季周期</li>
          </ul>
          <a class="pc-route__link" href="/about/">了解跟赛服务 <span aria-hidden="true">→</span></a>
        </article>
        <article class="card pc-route">
          <p class="pc-route__no">03</p>
          <h3>技术故障</h3>
          <p>面板加载不出来、数据卡空白、收藏不同步，这类问题走在线支持通道响应最快，写清设备与现象即可。</p>
          <ul class="pc-route__tags">
            <li class="tag">加载异常</li>
            <li class="tag">数据显示</li>
            <li class="tag">同步</li>
          </ul>
          <a class="pc-route__link" href="#tech">看反馈格式 <span aria-hidden="true">→</span></a>
        </article>
      </div>
    </div>
  </section>

  <section class="pc-partner section" id="partner" data-reveal>
    <div class="container pc-partner__grid">
      <div class="pc-partner__body">
        <p class="eyebrow">渠道 · 03</p>
        <h2>给球队和赛事方，配一套跨赛季用下去的跟赛栏目</h2>
        <p>面向需要持续追踪的队伍与机构，长期跟赛服务覆盖俱乐部、球队、赛事运营方、体育媒体和内容机构。开谈之前把三件事说明白，方案基本就能定型。</p>
        <ul class="pc-check">
          <li><strong>合作目标</strong>是赛季曝光、内容分发，还是内部复盘要用的数据支持。</li>
          <li><strong>赛季周期</strong>是否覆盖完整赛季，要不要包含转会窗口与季后赛阶段。</li>
          <li><strong>栏目需求</strong>赛程卡、数据卡、集锦位与公告条怎么组合，移动端要不要单独配置。</li>
        </ul>
        <p>需求确认后按五步推进：球队档案建立、栏目配置、试运行、正式跟赛，每一步都有明确的交付物。目前已有 180 余家球队、俱乐部与赛事运营方在使用我们的内容与数据服务，其中 40 余家连续合作三个赛季以上；生态侧还连接着 60 余家赛事内容机构、数据服务商、场馆媒体与区域体育组织。</p>
        <a class="btn btn--primary" href="/about/">看服务流程</a>
      </div>
      <figure class="media-frame pc-partner__figure">
        <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深蓝背景上的消息气泡、邮件图标与赛程卡片组合，橙色高亮，表现合作沟通与赛程协作" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="pc-tech section" id="tech" data-reveal>
    <div class="container pc-tech__grid">
      <div class="pc-tech__col">
        <p class="eyebrow">渠道 · 04</p>
        <h2>技术问题这样报，不用来回追问</h2>
        <p>邮件主题写清楚，比正文写一大段更管用。按「[技术] 栏目名 + 设备 + 现象」的顺序写，比如「[技术] 栏目面板 + 安卓手机 + 数据卡空白」，客服一眼就能分到对应的小组。</p>
        <ul class="pc-check pc-check--tight">
          <li>当前版本号，栏目面板为 v3.2，页面底部可以看到。</li>
          <li>出问题的页面与操作步骤，越具体越好。</li>
          <li>设备型号、系统版本与浏览器。</li>
          <li>截图或录屏，并注明问题发生的时间。</li>
        </ul>
        <p class="pc-tech__hint">影响赛程与数据入口的紧急问题，直接走页面右下角的在线支持通道，比邮件更快进入处理队列。</p>
      </div>
      <div class="pc-tech__panel">
        <h3>服务范围与响应</h3>
        <p>我们受理栏目面板使用、赛程与数据入口异常、收藏与历史数据查询、长期跟赛合作这几类咨询，客服会按类型转给编辑、数据运营或产品体验组。</p>
        <ul class="pc-scope">
          <li><span>客服时间</span>工作日 9:00-18:00，邮件与电话同步受理。</li>
          <li><span>非客服时段</span>邮件顺延到下一个工作日优先处理，紧急技术问题仍可提交在线支持通道。</li>
          <li><span>跨组问题</span>涉及数据与产品逻辑的部分由客服转交对应小组，处理进展会回到你的邮箱。</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="pc-faq section" id="faq" data-reveal>
    <div class="container">
      <div class="pc-head">
        <p class="eyebrow">常见追问</p>
        <h2>联系之前，你可能还想确认</h2>
      </div>
      <div class="pc-acc">
        <details class="pc-acc__item" open>
          <summary>邮件发出去多久会有人回？</summary>
          <div class="pc-acc__body">
            <p>工作日 9:00-18:00 内回复。18:00 之后收到的邮件，会在下一个工作日优先排进处理队列。涉及数据异常的问题，客服会先确认赛事与页面，再转给数据运营组。</p>
          </div>
        </details>
        <details class="pc-acc__item">
          <summary>电话占线或者没人接怎么办？</summary>
          <div class="pc-acc__body">
            <p>高峰时段客服电话容易占线，可以发邮件，也可以在页面右下角的在线支持通道留言。留言时写清球队、赛事和页面，我们回拨或回信时能直接进入正题。</p>
          </div>
        </details>
        <details class="pc-acc__item">
          <summary>想谈长期跟赛合作，第一步找谁？</summary>
          <div class="pc-acc__body">
            <p>用客服邮箱或电话说明球队名称、目标赛季和想要的内容组合，我们会安排项目对接的同事跟进，先给一版栏目配置建议，再确认是否进入试运行。</p>
          </div>
        </details>
        <details class="pc-acc__item">
          <summary>手机上的收藏和赛程入口出问题，怎么反馈？</summary>
          <div class="pc-acc__body">
            <p>把手机型号、系统版本和出问题时的截图一并发来，注明是哪个栏目的收藏或赛程入口。这类问题多与设备和浏览器相关，信息齐全时定位会快很多。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="pc-cta section" data-reveal>
    <div class="container">
      <div class="pc-cta__inner">
        <div class="pc-cta__text">
          <p class="eyebrow">长期跟赛</p>
          <h2>把球队档案发过来，跟赛栏目就能排期</h2>
          <p>告诉我们要跟的球队、目标赛季和想要的栏目模块，我们先给配置建议，再安排试运行。近三个赛季的历史数据与 6500 条球队追踪条目可以直接接上，不用从零整理。</p>
        </div>
        <div class="pc-cta__actions">
          <a class="btn btn--primary" href="/about/">了解服务流程</a>
          <a class="btn btn--ghost" href="/app-download/">打开栏目面板</a>
        </div>
      </div>
    </div>
  </section>
</main>