.page-contact {
  --pc-card: #FFFCF4;
  --pc-gap: clamp(18px, 2.6vw, 30px);
  padding-bottom: clamp(56px, 9vw, 104px);
}

.page-contact .breadcrumb {
  padding-top: clamp(14px, 2vw, 22px);
}

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

.page-contact .contact-hero {
  position: relative;
  margin-top: clamp(16px, 2.4vw, 26px);
  padding: clamp(26px, 4.4vw, 54px) clamp(20px, 3.8vw, 54px);
  border: var(--border);
  box-shadow: var(--shadow);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(216, 207, 188, 0.5) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(216, 207, 188, 0.5) 31px 32px),
    var(--paper);
  overflow: hidden;
}

.page-contact .contact-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--apricot);
}

.page-contact .contact-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(232, 135, 58, 0.34), rgba(232, 135, 58, 0) 68%);
  pointer-events: none;
}

.page-contact .contact-hero .eyebrow {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  border: 2px solid var(--green);
  background: var(--paper-2);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.page-contact h1 {
  position: relative;
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width: 20em;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(26px, 6.2vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--green);
}

.page-contact .contact-lead {
  position: relative;
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 2.1vw, 17.5px);
  line-height: 1.78;
  color: var(--ink);
}

.page-contact .contact-lead--sub {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 3px solid var(--verify);
  color: var(--green-2);
}

.page-contact a {
  color: var(--green-2);
  text-decoration: underline;
  text-decoration-color: var(--verify);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-contact a:hover {
  color: var(--apricot-deep);
  text-decoration-color: var(--apricot);
}

/* ---------- 标题与色签 ---------- */

.page-contact h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(21px, 3.1vw, 30px);
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--green);
}

.page-contact .rule-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-contact .rule-title::before {
  content: "";
  flex: 0 0 6px;
  align-self: stretch;
  min-height: 1.1em;
  background: var(--apricot);
}

/* ---------- 通道引言 + 实物图 ---------- */

.page-contact .contact-intro {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(28px, 4.4vw, 48px);
}

.page-contact .contact-intro-text p {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink);
}

.page-contact .contact-intro-media {
  margin: 0;
  padding: 10px;
  border: var(--border);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}

.page-contact .contact-intro-media img {
  display: block;
  width: 100%;
  height: clamp(180px, 30vw, 290px);
  object-fit: cover;
  filter: saturate(0.7) sepia(0.1);
}

/* ---------- 档案卡片 ---------- */

.page-contact .contact-cards {
  display: grid;
  gap: var(--pc-gap);
}

.page-contact .contact-card {
  position: relative;
  padding: clamp(24px, 3.2vw, 32px) clamp(20px, 2.6vw, 28px) clamp(26px, 3.2vw, 34px);
  border: var(--border);
  background: var(--pc-card);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-contact .contact-card::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-top: 32px solid var(--green-2);
  border-left: 32px solid transparent;
}

.page-contact .contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.page-contact .card-punch {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

.page-contact .contact-card .card-tab {
  display: inline-block;
  margin: 0;
  padding: 3px 11px;
  border: 2px solid var(--green);
  background: var(--paper-2);
  color: var(--green);
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.5;
  transform: rotate(-1.5deg);
}

.page-contact .contact-card h3 {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 24px);
  letter-spacing: -0.01em;
  color: var(--green);
}

.page-contact .contact-card .contact-value {
  display: inline-block;
  max-width: 100%;
  margin: 12px 0 0;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--amber);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(16px, 3.4vw, 21px);
  line-height: 1.42;
  color: var(--green-2);
  overflow-wrap: anywhere;
}

.page-contact .contact-card .contact-value--addr {
  font-size: clamp(14px, 2.6vw, 17px);
  letter-spacing: 0.01em;
}

.page-contact .contact-card p {
  margin: 13px 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink);
}

.page-contact .contact-card .note {
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--green-2);
  padding-left: 12px;
  border-left: 3px solid var(--amber);
}

/* 邮箱卡：深墨绿底 */

.page-contact .contact-card--mail {
  background: var(--green);
}

.page-contact .contact-card--mail::after {
  border-top-color: var(--apricot);
}

.page-contact .contact-card--mail .card-punch {
  background: var(--green);
  border-color: rgba(246, 241, 230, 0.45);
}

.page-contact .contact-card--mail .card-tab {
  background: var(--apricot);
  border-color: var(--apricot);
  color: var(--green-deep);
}

.page-contact .contact-card--mail h3 {
  color: var(--paper);
}

.page-contact .contact-card--mail .contact-value {
  color: var(--amber);
  border-bottom-color: rgba(242, 178, 62, 0.55);
}

.page-contact .contact-card--mail p {
  color: rgba(246, 241, 230, 0.86);
}

.page-contact .contact-card--mail .note {
  color: var(--amber);
  border-left-color: rgba(242, 178, 62, 0.6);
}

/* ---------- 双栏：提交要点 / 回复节奏 ---------- */

.page-contact .contact-split {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
}

.page-contact .contact-col {
  padding: clamp(22px, 3vw, 32px);
  border: var(--border);
  box-shadow: var(--shadow);
}

.page-contact .contact-col--left {
  background: var(--paper-2);
}

.page-contact .contact-col--right {
  background: var(--pc-card);
}

.page-contact .contact-col > p {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink);
}

.page-contact .check-list {
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 0;
  border-top: 2px solid var(--line);
}

.page-contact .check-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 12px 2px;
  border-bottom: 2px solid var(--line);
  font-size: 14.8px;
  line-height: 1.7;
  color: var(--ink);
}

.page-contact .check-list li::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 6px;
  border: 2px solid var(--green);
  background: var(--pc-card);
  box-shadow: 2px 2px 0 rgba(20, 52, 43, 0.22);
}

.page-contact .note-box {
  margin-top: clamp(16px, 2vw, 20px);
  padding: 14px 16px;
  background: var(--paper);
  border: 2px dashed var(--green-2);
}

.page-contact .note-box .note {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--green-2);
}

.page-contact .timeline {
  list-style: none;
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--line);
}

.page-contact .timeline li {
  position: relative;
  padding-bottom: clamp(16px, 2.2vw, 22px);
}

.page-contact .timeline li:last-child {
  padding-bottom: 0;
}

.page-contact .timeline li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--verify);
  border: 2px solid var(--green);
  transform: rotate(45deg);
}

.page-contact .timeline-time {
  display: inline-block;
  padding: 2px 9px;
  border: 2px solid var(--green-2);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--green-2);
}

.page-contact .timeline li p {
  margin: 9px 0 0;
  font-size: 14.8px;
  line-height: 1.72;
  color: var(--ink);
}

.page-contact .contact-col--right > .note {
  margin: clamp(16px, 2.2vw, 20px) 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--verify);
  background: var(--paper);
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--green-2);
}

.page-contact .contact-reply-media {
  margin: clamp(20px, 3vw, 28px) 0 0;
  border: var(--border);
  background: var(--paper-2);
  padding: 8px;
}

.page-contact .contact-reply-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.72) sepia(0.1);
}

.page-contact .contact-reply-media .img-caption {
  display: block;
  padding: 10px 4px 2px;
  font-family: var(--font-hand);
  font-size: 13px;
  line-height: 1.6;
  color: var(--green-2);
}

/* ---------- 合作与加入 ---------- */

.page-contact .contact-section-lead {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink);
}

.page-contact .contact-apply {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  margin-top: clamp(20px, 3vw, 30px);
}

.page-contact .apply-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(20px, 3vw, 30px);
  border: var(--border);
  background: var(--pc-card);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-contact .apply-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.page-contact .apply-index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
  color: var(--apricot);
  padding-right: clamp(12px, 1.6vw, 18px);
  border-right: 2px solid var(--line);
}

.page-contact .apply-body h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: -0.01em;
  color: var(--green);
}

.page-contact .apply-body > p {
  margin: 12px 0 0;
  font-size: 14.8px;
  line-height: 1.75;
  color: var(--ink);
}

.page-contact .apply-facts {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-contact .apply-facts li {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

.page-contact .apply-facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .apply-key {
  justify-self: start;
  padding: 1px 7px;
  border: 1px solid var(--green-2);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--green-2);
}

.page-contact .apply-body > p.apply-link-line {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--amber);
  font-size: 14px;
  color: var(--green-2);
}

/* ---------- 桌面端栅格 ---------- */

@media (min-width: 820px) {
  .page-contact .contact-intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }

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

  .page-contact .contact-card--phone {
    margin-top: 36px;
  }

  .page-contact .contact-card--address {
    margin-top: 72px;
  }
}

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

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

@media (max-width: 919px) {
  .page-contact .apply-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-contact .apply-index {
    padding-right: 0;
    padding-bottom: 10px;
    border-right: 0;
    border-bottom: 2px solid var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-card,
  .page-contact .apply-card {
    transition: none;
  }

  .page-contact .contact-card:hover,
  .page-contact .apply-card:hover {
    transform: none;
  }
}


<main id="main-content" class="page-contact">
  <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-current" aria-current="page">联系入口</li>
      </ol>
    </nav>

    <header class="contact-hero">
      <p class="eyebrow">工作日 9:00 – 18:00 · 人工处理</p>
      <h1 id="contact-title">联系杏运看台：客服邮箱、电话与资料对接要点</h1>
      <p class="contact-lead">某一场的投篮数和你记的不一样、想给机构的教练开一批青年联赛资料账号，或者想跟着一个赛区做满整个赛季——几条路各要带什么材料，下面都写清楚了。报了联赛和轮次，一封信能讲完的事，通常不用来回两三趟。</p>
      <p class="contact-lead contact-lead--sub">如果只是想弄清导出格式、订阅链接怎么生成，或者手机和电脑上看到的内容为什么有差别，<a href="/help-center/">帮助中心</a>里的说明往往比来信更快。</p>
    </header>

    <section class="section" aria-labelledby="channels-title">
      <div class="contact-intro">
        <div class="contact-intro-text">
          <h2 id="channels-title" class="rule-title">三条通道，按事由挑一条</h2>
          <p>邮箱适合带截图、带轮次、需要留底的事；电话留给几句话能说清的场景；地址与备案信息用于正式往来。选错通道不会丢件，只是绕远路。</p>
        </div>
        <figure class="contact-intro-media">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="俯拍桌面上的空白档案卡片与回形针，光线柔和均匀">
        </figure>
      </div>

      <div class="contact-cards">
        <article class="contact-card contact-card--mail">
          <span class="card-punch" aria-hidden="true"></span>
          <p class="card-tab">资料疑问首选</p>
          <h3>客服邮箱</h3>
          <p class="contact-value">info@xy-xingyun.com.cn</p>
          <p>数据有出入、内容需要更正、想申请合作或申请只读账号，都发这里。附件请带上页面截图和轮次，编辑会按轮次查一遍，再回信说明处理结果。</p>
          <p class="note">标题里写清联赛与轮次，分派会快一截。</p>
        </article>

        <article class="contact-card contact-card--phone">
          <span class="card-punch" aria-hidden="true"></span>
          <p class="card-tab">三五句话说清的事</p>
          <h3>客服电话</h3>
          <p class="contact-value">15826728871</p>
          <p>手机上某张表打不开、订阅链接失效、导出卡住这类问题，来电最快。通话时把联赛、轮次和你看的那个字段报出来，客服能直接翻到对应页面。</p>
          <p class="note">同一个号码，工作日 9:00 – 18:00 有人接。</p>
        </article>

        <article class="contact-card contact-card--address">
          <span class="card-punch" aria-hidden="true"></span>
          <p class="card-tab">正式往来</p>
          <h3>站点登记地址</h3>
          <p class="contact-value contact-value--addr">福建省福州市鼓楼区软件大道89号</p>
          <p>用于函件往来与备案信息查询。备案号 闽ICP备18506125号，站点主体位于福建。</p>
          <p class="note">地址用于函件与备案信息，日常沟通走邮箱和电话就行。</p>
        </article>
      </div>
    </section>

    <section class="section" aria-labelledby="howto-title">
      <div class="contact-split">
        <div class="contact-col contact-col--left">
          <h2 id="howto-title" class="rule-title">数据有出入时，这样提最省事</h2>
          <p>一封信来回来回问细节，大多只是少了其中一两项。把下面这几条写进正文或者截进图里，基本一次就能定位到具体那一格。</p>
          <ul class="check-list">
            <li>联赛名称与赛事类别：男子职业、女子职业、青年梯队或海外夏季联赛</li>
            <li>具体轮次，例如第 12 轮；查的是旧版本就注明第几轮的快照</li>
            <li>页面截图，或者你从哪个入口点进去的路径</li>
            <li>涉及的字段：赛程结果、投篮与篮板统计、失误分布、主客场差异</li>
            <li>你看到的数值，以及你认为应该是多少、依据是什么</li>
          </ul>
          <div class="note-box">
            <p class="note">第 1 到第 11 轮的旧快照同样受理，只要注明是哪一轮，回信里会一起说明。</p>
          </div>
        </div>

        <div class="contact-col contact-col--right">
          <h2 id="reply-title" class="rule-title">多久能收到回信</h2>
          <ol class="timeline">
            <li>
              <span class="timeline-time">09:00 – 12:00</span>
              <p>当日工作时段内处理，涉及最新一轮数据的会先看截图再回。</p>
            </li>
            <li>
              <span class="timeline-time">12:00 – 18:00</span>
              <p>当日下班前或次一个工作日上午回信，处理进展写在邮件正文里。</p>
            </li>
            <li>
              <span class="timeline-time">18:00 之后</span>
              <p>顺延到次一个工作日，与当天的其他信件一起排队处理。</p>
            </li>
            <li>
              <span class="timeline-time">周末与法定节假日</span>
              <p>假期结束后的首个工作日统一回复。订阅更新不受影响，比赛日之后照常送达。</p>
            </li>
          </ol>
          <p class="note">回信主题里带着联赛与轮次，按主题搜一下就能看到这条问题的进展；打电话跟进时报同样的信息即可。</p>
          <figure class="img-frame img-frame--wide contact-reply-media">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" loading="lazy" decoding="async" alt="电话听筒与便签本的局部特写，便签上有无法辨认的笔迹线条">
            <figcaption class="img-caption">接线时先把轮次与字段记在便签上，比来回确认快得多。</figcaption>
          </figure>
        </div>
      </div>
    </section>

    <section class="section" aria-labelledby="join-title">
      <h2 id="join-title" class="rule-title">想长期用资料，或者想一起来整理</h2>
      <p class="contact-section-lead">地方篮球培训机构和常写赛事稿的内容作者，是看台上两批很固定的访客。这两条通道各有一套比较清楚的对接方式。</p>

      <div class="contact-apply">
        <article class="apply-card">
          <span class="apply-index" aria-hidden="true">01</span>
          <div class="apply-body">
            <h3>机构合作与只读账号</h3>
            <p>目前有 6 家地方篮球培训机构在用青年联赛资料的只读账号，给课程顾问备课、给教练做阵容对比。申请时把这些信息一次写全：</p>
            <ul class="apply-facts">
              <li><span class="apply-key">机构信息</span><span>机构全称、所在城市、联系人称呼</span></li>
              <li><span class="apply-key">账号数量</span><span>预计开通几个，按教练与课程顾问人数估</span></li>
              <li><span class="apply-key">用途说明</span><span>课程备课、招生咨询或教研对比，写明主次</span></li>
              <li><span class="apply-key">覆盖范围</span><span>青年梯队资料中的哪些联赛、从第几轮开始看</span></li>
            </ul>
            <p>账号只开放查看，对照表与轮次快照可以随时翻。收到申请后我们先回一封确认信，再安排开通时间。</p>
            <p class="apply-link-line">想先看看字段范围，可以在<a href="/features/">功能中心</a>按联赛筛一遍，再决定申请哪几类资料。</p>
          </div>
        </article>

        <article class="apply-card">
          <span class="apply-index" aria-hidden="true">02</span>
          <div class="apply-body">
            <h3>赛季观察员申请</h3>
            <p>看台上有 14 名赛季观察员和 4 名编辑，观察员按赛区与联赛分工，每个比赛日结束后 4 小时内把当轮基础数据交上来。想加入的话，主要看这三件事：</p>
            <ul class="apply-facts">
              <li><span class="apply-key">赛区覆盖</span><span>能稳定跟完一个赛区的整个赛季，缺席提前打招呼</span></li>
              <li><span class="apply-key">交付节奏</span><span>比赛日结束后 4 小时内提交基础数据</span></li>
              <li><span class="apply-key">考核方式</span><span>先试跟一轮，编辑看过格式与节奏再定是否长期</span></li>
            </ul>
            <p>申请邮件发到客服邮箱，主题写“观察员申请＋赛区名称”，正文说清你能覆盖的联赛、每周大致可投入的时间，以及有没有做过类似的比赛记录。</p>
            <p class="apply-link-line">观察团队怎么分工、一个轮次的数据怎么落地，<a href="/culture/">品牌文化</a>里写得更细。</p>
          </div>
        </article>
      </div>
    </section>

  </div>
</main>

.page-contact {
  --pc-card: #FFFCF4;
  --pc-gap: clamp(18px, 2.6vw, 30px);
  padding-bottom: clamp(56px, 9vw, 104px);
}

.page-contact .breadcrumb {
  padding-top: clamp(14px, 2vw, 22px);
}

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

.page-contact .contact-hero {
  position: relative;
  margin-top: clamp(16px, 2.4vw, 26px);
  padding: clamp(26px, 4.4vw, 54px) clamp(20px, 3.8vw, 54px);
  border: var(--border);
  box-shadow: var(--shadow);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(216, 207, 188, 0.5) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(216, 207, 188, 0.5) 31px 32px),
    var(--paper);
  overflow: hidden;
}

.page-contact .contact-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--apricot);
}

.page-contact .contact-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(232, 135, 58, 0.34), rgba(232, 135, 58, 0) 68%);
  pointer-events: none;
}

.page-contact .contact-hero .eyebrow {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  border: 2px solid var(--green);
  background: var(--paper-2);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.page-contact h1 {
  position: relative;
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width: 20em;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(26px, 6.2vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--green);
}

.page-contact .contact-lead {
  position: relative;
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 2.1vw, 17.5px);
  line-height: 1.78;
  color: var(--ink);
}

.page-contact .contact-lead--sub {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 3px solid var(--verify);
  color: var(--green-2);
}

.page-contact a {
  color: var(--green-2);
  text-decoration: underline;
  text-decoration-color: var(--verify);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-contact a:hover {
  color: var(--apricot-deep);
  text-decoration-color: var(--apricot);
}

/* ---------- 标题与色签 ---------- */

.page-contact h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(21px, 3.1vw, 30px);
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--green);
}

.page-contact .rule-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-contact .rule-title::before {
  content: "";
  flex: 0 0 6px;
  align-self: stretch;
  min-height: 1.1em;
  background: var(--apricot);
}

/* ---------- 通道引言 + 实物图 ---------- */

.page-contact .contact-intro {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(28px, 4.4vw, 48px);
}

.page-contact .contact-intro-text p {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink);
}

.page-contact .contact-intro-media {
  margin: 0;
  padding: 10px;
  border: var(--border);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}

.page-contact .contact-intro-media img {
  display: block;
  width: 100%;
  height: clamp(180px, 30vw, 290px);
  object-fit: cover;
  filter: saturate(0.7) sepia(0.1);
}

/* ---------- 档案卡片 ---------- */

.page-contact .contact-cards {
  display: grid;
  gap: var(--pc-gap);
}

.page-contact .contact-card {
  position: relative;
  padding: clamp(24px, 3.2vw, 32px) clamp(20px, 2.6vw, 28px) clamp(26px, 3.2vw, 34px);
  border: var(--border);
  background: var(--pc-card);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-contact .contact-card::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-top: 32px solid var(--green-2);
  border-left: 32px solid transparent;
}

.page-contact .contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.page-contact .card-punch {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

.page-contact .contact-card .card-tab {
  display: inline-block;
  margin: 0;
  padding: 3px 11px;
  border: 2px solid var(--green);
  background: var(--paper-2);
  color: var(--green);
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.5;
  transform: rotate(-1.5deg);
}

.page-contact .contact-card h3 {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 24px);
  letter-spacing: -0.01em;
  color: var(--green);
}

.page-contact .contact-card .contact-value {
  display: inline-block;
  max-width: 100%;
  margin: 12px 0 0;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--amber);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(16px, 3.4vw, 21px);
  line-height: 1.42;
  color: var(--green-2);
  overflow-wrap: anywhere;
}

.page-contact .contact-card .contact-value--addr {
  font-size: clamp(14px, 2.6vw, 17px);
  letter-spacing: 0.01em;
}

.page-contact .contact-card p {
  margin: 13px 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink);
}

.page-contact .contact-card .note {
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--green-2);
  padding-left: 12px;
  border-left: 3px solid var(--amber);
}

/* 邮箱卡：深墨绿底 */

.page-contact .contact-card--mail {
  background: var(--green);
}

.page-contact .contact-card--mail::after {
  border-top-color: var(--apricot);
}

.page-contact .contact-card--mail .card-punch {
  background: var(--green);
  border-color: rgba(246, 241, 230, 0.45);
}

.page-contact .contact-card--mail .card-tab {
  background: var(--apricot);
  border-color: var(--apricot);
  color: var(--green-deep);
}

.page-contact .contact-card--mail h3 {
  color: var(--paper);
}

.page-contact .contact-card--mail .contact-value {
  color: var(--amber);
  border-bottom-color: rgba(242, 178, 62, 0.55);
}

.page-contact .contact-card--mail p {
  color: rgba(246, 241, 230, 0.86);
}

.page-contact .contact-card--mail .note {
  color: var(--amber);
  border-left-color: rgba(242, 178, 62, 0.6);
}

/* ---------- 双栏：提交要点 / 回复节奏 ---------- */

.page-contact .contact-split {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
}

.page-contact .contact-col {
  padding: clamp(22px, 3vw, 32px);
  border: var(--border);
  box-shadow: var(--shadow);
}

.page-contact .contact-col--left {
  background: var(--paper-2);
}

.page-contact .contact-col--right {
  background: var(--pc-card);
}

.page-contact .contact-col > p {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink);
}

.page-contact .check-list {
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 0;
  border-top: 2px solid var(--line);
}

.page-contact .check-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 12px 2px;
  border-bottom: 2px solid var(--line);
  font-size: 14.8px;
  line-height: 1.7;
  color: var(--ink);
}

.page-contact .check-list li::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 6px;
  border: 2px solid var(--green);
  background: var(--pc-card);
  box-shadow: 2px 2px 0 rgba(20, 52, 43, 0.22);
}

.page-contact .note-box {
  margin-top: clamp(16px, 2vw, 20px);
  padding: 14px 16px;
  background: var(--paper);
  border: 2px dashed var(--green-2);
}

.page-contact .note-box .note {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--green-2);
}

.page-contact .timeline {
  list-style: none;
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--line);
}

.page-contact .timeline li {
  position: relative;
  padding-bottom: clamp(16px, 2.2vw, 22px);
}

.page-contact .timeline li:last-child {
  padding-bottom: 0;
}

.page-contact .timeline li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--verify);
  border: 2px solid var(--green);
  transform: rotate(45deg);
}

.page-contact .timeline-time {
  display: inline-block;
  padding: 2px 9px;
  border: 2px solid var(--green-2);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--green-2);
}

.page-contact .timeline li p {
  margin: 9px 0 0;
  font-size: 14.8px;
  line-height: 1.72;
  color: var(--ink);
}

.page-contact .contact-col--right > .note {
  margin: clamp(16px, 2.2vw, 20px) 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--verify);
  background: var(--paper);
  font-family: var(--font-hand);
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--green-2);
}

.page-contact .contact-reply-media {
  margin: clamp(20px, 3vw, 28px) 0 0;
  border: var(--border);
  background: var(--paper-2);
  padding: 8px;
}

.page-contact .contact-reply-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.72) sepia(0.1);
}

.page-contact .contact-reply-media .img-caption {
  display: block;
  padding: 10px 4px 2px;
  font-family: var(--font-hand);
  font-size: 13px;
  line-height: 1.6;
  color: var(--green-2);
}

/* ---------- 合作与加入 ---------- */

.page-contact .contact-section-lead {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink);
}

.page-contact .contact-apply {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  margin-top: clamp(20px, 3vw, 30px);
}

.page-contact .apply-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(20px, 3vw, 30px);
  border: var(--border);
  background: var(--pc-card);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-contact .apply-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.page-contact .apply-index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
  color: var(--apricot);
  padding-right: clamp(12px, 1.6vw, 18px);
  border-right: 2px solid var(--line);
}

.page-contact .apply-body h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: -0.01em;
  color: var(--green);
}

.page-contact .apply-body > p {
  margin: 12px 0 0;
  font-size: 14.8px;
  line-height: 1.75;
  color: var(--ink);
}

.page-contact .apply-facts {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-contact .apply-facts li {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

.page-contact .apply-facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .apply-key {
  justify-self: start;
  padding: 1px 7px;
  border: 1px solid var(--green-2);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--green-2);
}

.page-contact .apply-body > p.apply-link-line {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--amber);
  font-size: 14px;
  color: var(--green-2);
}

/* ---------- 桌面端栅格 ---------- */

@media (min-width: 820px) {
  .page-contact .contact-intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }

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

  .page-contact .contact-card--phone {
    margin-top: 36px;
  }

  .page-contact .contact-card--address {
    margin-top: 72px;
  }
}

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

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

@media (max-width: 919px) {
  .page-contact .apply-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-contact .apply-index {
    padding-right: 0;
    padding-bottom: 10px;
    border-right: 0;
    border-bottom: 2px solid var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-card,
  .page-contact .apply-card {
    transition: none;
  }

  .page-contact .contact-card:hover,
  .page-contact .apply-card:hover {
    transform: none;
  }
}