.page-contact {
  --contact-radius: 16px;
  --contact-gap: clamp(16px, 2.4vw, 26px);
  padding-block-start: clamp(20px, 3.4vw, 40px);
  padding-block-end: clamp(48px, 7vw, 96px);
  color: var(--paper);
}

.page-contact .wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  padding-block: clamp(8px, 2vw, 20px) clamp(36px, 6vw, 76px);
  background:
    radial-gradient(125% 130% at 86% -10%, rgba(61, 242, 219, 0.14) 0%, rgba(61, 242, 219, 0) 58%),
    linear-gradient(180deg, var(--deep) 0%, var(--abyss) 100%);
}

.page-contact .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

.page-contact .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}

.page-contact .contact-hero__lead h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(16px, 2.4vw, 22px);
  color: var(--paper);
}

.page-contact .lede {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.8;
  color: var(--mist);
  max-width: 46ch;
  margin: 0;
}

.page-contact .contact-hero__quick {
  margin-top: clamp(22px, 3vw, 32px);
  display: grid;
  gap: 10px;
  max-width: 540px;
}

.page-contact .quick-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 34, 60, 0.62);
  transition: border-color 0.22s var(--ease);
}

.page-contact .quick-line:hover {
  border-color: rgba(61, 242, 219, 0.45);
}

.page-contact .quick-line__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .quick-line__value {
  flex: 1 1 180px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .contact-hero__actions {
  margin-top: clamp(20px, 3vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-contact .contact-hero__figure {
  margin: 0;
}

.page-contact .contact-hero__figure .media {
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
}

/* ---------- 章节公共 ---------- */
.page-contact .contact-channels,
.page-contact .contact-time,
.page-contact .ticket-path,
.page-contact .scene-section,
.page-contact .range-section {
  padding-block: clamp(44px, 6vw, 84px);
}

.page-contact .section-head {
  display: grid;
  gap: clamp(10px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(24px, 4vw, 46px);
}

.page-contact .section-index {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: clamp(52px, 9vw, 116px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: rgba(61, 242, 219, 0.26);
}

.page-contact .section-head__body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.page-contact .section-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.6vw, 40px);
  line-height: 1.24;
  color: var(--paper);
}

.page-contact .section-note {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 62ch;
}

.page-contact .prose {
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
  margin: 0 0 16px;
}

/* ---------- 01 联络渠道 ---------- */
.page-contact .contact-channels__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: start;
}

.page-contact .contact-channels__main {
  display: grid;
  gap: var(--contact-gap);
  min-width: 0;
}

.page-contact .channel-card {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: linear-gradient(160deg, rgba(14, 34, 60, 0.94) 0%, rgba(8, 23, 43, 0.94) 100%);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-contact .channel-card:hover {
  border-color: rgba(61, 242, 219, 0.45);
  transform: translateY(-2px);
}

.page-contact .channel-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.page-contact .channel-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .channel-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .contact-item {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(5, 11, 20, 0.55);
}

.page-contact .contact-item__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-contact .contact-item__value {
  flex: 1 1 190px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--cyan-lt);
}

.page-contact .contact-item--plain .contact-item__value {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--paper);
}

.page-contact .contact-channels__aside {
  min-width: 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(255, 138, 61, 0.42);
  border-radius: var(--contact-radius);
  background: linear-gradient(165deg, rgba(255, 138, 61, 0.13) 0%, rgba(14, 34, 60, 0.92) 55%, rgba(8, 23, 43, 0.96) 100%);
}

.page-contact .contact-channels__aside-title {
  margin: 14px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .contact-channels__aside-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

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

.page-contact .contact-channels__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
}

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

.page-contact .contact-channels__aside-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mist);
  overflow-wrap: anywhere;
}

/* ---------- 02 服务时间 ---------- */
.page-contact .contact-time__band {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
}

.page-contact .contact-time__cell {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--panel);
  display: grid;
  gap: 8px;
  align-content: start;
}

.page-contact .contact-time__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .contact-time__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .contact-time__value .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--cyan-lt);
}

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

/* ---------- 03 工单路径 ---------- */
.page-contact .ticket-path__figure {
  margin: 0 0 clamp(24px, 3.4vw, 38px);
}

.page-contact .ticket-path__figure .media {
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
}

.page-contact .ticket-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .ticket-step {
  position: relative;
  padding: 26px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: rgba(14, 34, 60, 0.72);
  transition: border-color 0.22s var(--ease);
}

.page-contact .ticket-step::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(61, 242, 219, 0) 100%);
}

.page-contact .ticket-step:hover {
  border-color: rgba(61, 242, 219, 0.45);
}

.page-contact .ticket-step__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 10px;
}

.page-contact .ticket-step__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .ticket-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .ticket-board {
  margin-top: clamp(24px, 3.4vw, 38px);
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .ticket-board__status {
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: rgba(8, 23, 43, 0.85);
}

.page-contact .ticket-board__label,
.page-contact .ticket-template__label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-contact .ticket-board__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-contact .ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(61, 242, 219, 0.4);
  border-radius: 999px;
  font-size: 13px;
  color: var(--cyan-lt);
  background: rgba(61, 242, 219, 0.07);
}

.page-contact .ticket-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.page-contact .ticket-chip--done {
  border-color: var(--line);
  color: var(--mist);
  background: transparent;
}

.page-contact .ticket-chip--done::before {
  background: var(--mist);
}

.page-contact .ticket-template {
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: rgba(14, 34, 60, 0.7);
}

.page-contact .ticket-template__text {
  margin: 0 0 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--cyan-lt);
}

/* ---------- 04 常见场景 ---------- */
.page-contact .scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .scene-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(61, 242, 219, 0.55);
  border-radius: 4px var(--contact-radius) var(--contact-radius) 4px;
  background: rgba(8, 23, 43, 0.82);
  transition: border-left-color 0.22s var(--ease), background-color 0.22s var(--ease);
}

.page-contact .scene-card:hover {
  border-left-color: var(--cyan);
  background: rgba(14, 34, 60, 0.9);
}

.page-contact .scene-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.35;
  color: var(--paper);
}

.page-contact .scene-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .scene-card__link {
  justify-self: start;
  font-size: 13.5px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 242, 219, 0.35);
  padding-bottom: 2px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-contact .scene-card__link:hover {
  color: var(--cyan-lt);
  border-bottom-color: var(--cyan-lt);
}

/* ---------- 05 服务范围 ---------- */
.page-contact .range-layout {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.page-contact .range-copy {
  min-width: 0;
}

.page-contact .range-copy .section-title {
  margin-bottom: clamp(16px, 2.4vw, 22px);
}

.page-contact .range-list {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .range-list__item {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(35, 64, 95, 0.7);
}

.page-contact .range-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-contact .range-list__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .range-list__text {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .range-link {
  display: inline-block;
  font-size: 14px;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 138, 61, 0.45);
  padding-bottom: 3px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-contact .range-link:hover {
  color: var(--amber-lt);
  border-bottom-color: var(--amber-lt);
}

.page-contact .range-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
  background-color: rgba(8, 23, 43, 0.85);
  background-image:
    linear-gradient(rgba(35, 64, 95, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 64, 95, 0.5) 1px, transparent 1px);
  background-size: 54px 54px;
}

.page-contact .range-map__node {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(61, 242, 219, 0.09);
}

.page-contact .range-map__node--a {
  left: 62%;
  top: 56%;
  width: 12px;
  height: 12px;
  background: var(--amber);
  box-shadow: 0 0 0 8px rgba(255, 138, 61, 0.12);
}

.page-contact .range-map__node--a::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 61, 0.5);
  animation: contact-pulse 2.8s var(--ease) infinite;
}

.page-contact .range-map__node--b { left: 32%; top: 28%; }
.page-contact .range-map__node--c { left: 79%; top: 24%; }
.page-contact .range-map__node--d { left: 21%; top: 70%; }
.page-contact .range-map__node--e { left: 49%; top: 81%; }

.page-contact .range-map__caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist);
  opacity: 0.75;
}

@keyframes contact-pulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.page-contact .range-foot {
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
}

.page-contact .range-foot__item {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-contact .ticket-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 720px) {
  .page-contact .contact-time__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 860px) {
  .page-contact .section-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 2.4vw, 34px);
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }

  .page-contact .range-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

@media (min-width: 960px) {
  .page-contact .contact-channels__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-contact .contact-channels__aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }
}

@media (min-width: 1080px) {
  .page-contact .contact-time__band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-contact .range-map__node--a::after {
    animation: none;
  }

  .page-contact .channel-card,
  .page-contact .quick-line,
  .page-contact .scene-card,
  .page-contact .ticket-step {
    transition: none;
  }

  .page-contact .channel-card:hover,
  .page-contact .ticket-step:hover {
    transform: none;
  }
}

<main id="main-content" class="page-contact">

  <section class="contact-hero" aria-labelledby="contact-hero-title">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/reach-us/" aria-current="page">联系与工单</a></li>
        </ol>
      </nav>

      <div class="contact-hero__grid">
        <div class="contact-hero__lead">
          <p class="eyebrow">客服与工单</p>
          <h1 id="contact-hero-title">联系 PG游艺，让回复更快到你手上</h1>
          <p class="lede">登录卡住、换了手机要重新登录、活动入口翻不到——把情况说清楚，工作时间内就有人回你。邮箱、电话、工单三条路都通着，挑一条你觉得顺手的。</p>

          <div class="contact-hero__quick">
            <div class="quick-line">
              <span class="quick-line__label">邮箱</span>
              <span class="quick-line__value" data-copy-value>service@play-pg-gameplay.com.cn</span>
              <button class="copy-btn copy-btn--sm" type="button" data-copy>复制</button>
            </div>
            <div class="quick-line">
              <span class="quick-line__label">电话</span>
              <span class="quick-line__value" data-copy-value>17152855965</span>
              <button class="copy-btn copy-btn--sm" type="button" data-copy>复制</button>
            </div>
          </div>

          <div class="contact-hero__actions">
            <a class="btn btn--amber" href="/guide/">提交工单</a>
            <a class="btn btn--ghost" href="/apps/">看账户设置</a>
          </div>
        </div>

        <figure class="contact-hero__figure">
          <div class="media media--wide">
            <img class="media__img" src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="邮箱、电话与工单三个渠道图标由霓虹青线条连接，组成客服联络场景">
            <span class="media__badge">工作日 9:00–18:00 在线</span>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <section class="section contact-channels" id="channels" aria-labelledby="channels-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">01</span>
        <div class="section-head__body">
          <p class="section-kicker">联络渠道总览</p>
          <h2 class="section-title" id="channels-title">四条渠道，对应四种不同的着急程度</h2>
          <p class="section-note">邮箱适合把经过写清楚，电话适合一边操作一边说，工单适合卡住当天进度的问题，服务联络地址则留给需要递送材料的场合。</p>
        </div>
      </div>

      <div class="contact-channels__grid">
        <div class="contact-channels__main">

          <article class="channel-card">
            <div class="channel-card__head">
              <span class="tag tag--cyan">邮箱</span>
              <h3 class="channel-card__title">客服邮箱</h3>
            </div>
            <p class="channel-card__text">账户设置的截图、操作到哪一步、活动页面的地址，都可以一次写全。回复会直接回到你的发件邮箱，翻起来方便。</p>
            <div class="contact-item">
              <span class="contact-item__label">service@</span>
              <span class="contact-item__value" data-copy-value>service@play-pg-gameplay.com.cn</span>
              <button class="copy-btn copy-btn--sm" type="button" data-copy>复制</button>
            </div>
          </article>

          <article class="channel-card">
            <div class="channel-card__head">
              <span class="tag tag--cyan">电话</span>
              <h3 class="channel-card__title">服务电话</h3>
            </div>
            <p class="channel-card__text">对着设置页说不清楚的时候，打过来最快。工作时间内有人接听，可以边说边跟着改，改完当场确认有没有生效。</p>
            <div class="contact-item">
              <span class="contact-item__label">tel</span>
              <span class="contact-item__value" data-copy-value>17152855965</span>
              <button class="copy-btn copy-btn--sm" type="button" data-copy>复制</button>
            </div>
          </article>

          <article class="channel-card">
            <div class="channel-card__head">
              <span class="tag tag--cyan">地址</span>
              <h3 class="channel-card__title">服务联络地址</h3>
            </div>
            <p class="channel-card__text">需要递送纸质材料或对账凭证时使用这个地址。寄件前先在邮件或工单里说一声，方便有人接收转交。</p>
            <div class="contact-item contact-item--plain">
              <span class="contact-item__label">addr</span>
              <span class="contact-item__value" data-copy-value>广东省广州市天河区科韵路16号信息港大厦8层</span>
              <button class="copy-btn copy-btn--sm" type="button" data-copy>复制</button>
            </div>
          </article>

        </div>

        <aside class="contact-channels__aside" aria-labelledby="aside-title">
          <span class="tag tag--amber">优先处理</span>
          <h3 class="contact-channels__aside-title" id="aside-title">当天卡住的问题，走工单</h3>
          <p class="contact-channels__aside-text">登录不上、活动入口打不开这类影响当下使用的情况，提交工单比发邮件更快。工单里能看到处理到哪一步，也能随时补充说明。</p>
          <ul class="contact-channels__list">
            <li>在工单里补充截图和报错原文</li>
            <li>同一个问题在原工单跟进，不必重开</li>
            <li>进度停在处理中说明已在跟进</li>
          </ul>
          <a class="btn btn--amber btn--block" href="/guide/">去帮助中心提交工单</a>
          <p class="contact-channels__aside-note">service@play-pg-gameplay.com.cn 是站点的客服邮箱，工作日内回复。</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="section contact-time" id="time" aria-labelledby="time-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">02</span>
        <div class="section-head__body">
          <p class="section-kicker">服务时间与响应</p>
          <h2 class="section-title" id="time-title">什么时候发，什么时候能收到回音</h2>
          <p class="section-note">人工回复集中在工作日白天。晚上和周末发来的消息不会丢，会顺延到下一个工作日排进队列。</p>
        </div>
      </div>

      <div class="contact-time__band">
        <div class="contact-time__cell">
          <span class="contact-time__label">服务时间</span>
          <strong class="contact-time__value">工作日 9:00–18:00</strong>
          <p class="contact-time__text">周六、周日与法定节假日发来的邮件和工单，会在下一个工作日处理。</p>
        </div>
        <div class="contact-time__cell">
          <span class="contact-time__label">首次响应</span>
          <strong class="contact-time__value"><span class="mono">28</span> 分钟</strong>
          <p class="contact-time__text">工作时间内，工单首次响应的平均值。活动上线当天咨询集中，可能会稍慢一些。</p>
        </div>
        <div class="contact-time__cell">
          <span class="contact-time__label">紧急问题</span>
          <strong class="contact-time__value">工单优先</strong>
          <p class="contact-time__text">影响正常使用的问题，在工单里写明现象和设备，会排在日常咨询前面。</p>
        </div>
        <div class="contact-time__cell">
          <span class="contact-time__label">跟进方式</span>
          <strong class="contact-time__value">原文可查</strong>
          <p class="contact-time__text">工单回复留在原帖里，邮件回复回到你的邮箱。两种都会写明下一步怎么做。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section ticket-path" id="ticket" aria-labelledby="ticket-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">03</span>
        <div class="section-head__body">
          <p class="section-kicker">工单提交路径</p>
          <h2 class="section-title" id="ticket-title">从描述问题到看到回复，四步走完</h2>
          <p class="section-note">在帮助中心选场景、写清楚现象、提交、看状态。写得越具体，来回确认的次数越少。</p>
        </div>
      </div>

      <figure class="ticket-path__figure">
        <div class="media media--wide">
          <img class="media__img" src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="已提交、处理中、已回复、已关闭四个状态节点连成的时间线示意" loading="lazy" decoding="async">
          <figcaption class="media__caption">工单从提交到关闭的四个状态节点</figcaption>
        </div>
      </figure>

      <ol class="ticket-steps">
        <li class="ticket-step">
          <span class="ticket-step__num mono">01</span>
          <h3 class="ticket-step__title">选场景</h3>
          <p class="ticket-step__text">在帮助中心挑一个最贴近的场景，登录、设备切换、活动查看各有入口。选偏了也没关系，同事会转给对应的负责人。</p>
        </li>
        <li class="ticket-step">
          <span class="ticket-step__num mono">02</span>
          <h3 class="ticket-step__title">写清楚</h3>
          <p class="ticket-step__text">按顺序写下设备、页面、操作到哪一步、看到什么现象。有报错就把原文贴进去，有截图就附上。</p>
        </li>
        <li class="ticket-step">
          <span class="ticket-step__num mono">03</span>
          <h3 class="ticket-step__title">提交</h3>
          <p class="ticket-step__text">留一个能收信的邮箱，提交后会得到工单编号。后续补充信息直接回在原帖里，不用另开一张单。</p>
        </li>
        <li class="ticket-step">
          <span class="ticket-step__num mono">04</span>
          <h3 class="ticket-step__title">看状态</h3>
          <p class="ticket-step__text">进度在原文里能翻到。停在处理中说明已经有人在跟进，重复提交反而会让两条记录分散开来。</p>
        </li>
      </ol>

      <div class="ticket-board">
        <div class="ticket-board__status">
          <p class="ticket-board__label">工单会经历的四个状态</p>
          <ul class="ticket-board__chips">
            <li class="ticket-chip">已提交</li>
            <li class="ticket-chip">处理中</li>
            <li class="ticket-chip">已回复</li>
            <li class="ticket-chip ticket-chip--done">已关闭</li>
          </ul>
        </div>
        <div class="ticket-template">
          <p class="ticket-template__label">照着写，信息更全</p>
          <pre class="ticket-template__text mono" data-copy-value>问题类型：
使用设备：
操作到哪一步：
看到的提示：</pre>
          <button class="copy-btn copy-btn--sm" type="button" data-copy>复制模板</button>
        </div>
      </div>
    </div>
  </section>

  <section class="section scene-section" id="scenes" aria-labelledby="scene-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">04</span>
        <div class="section-head__body">
          <p class="section-kicker">常见联络场景</p>
          <h2 class="section-title" id="scene-title">这几类问题，每天问得最多</h2>
          <p class="section-note">先看看有没有现成的答案。帮助中心收了 260 多篇文档，大部分操作问题当场就能走通，不用等回复。</p>
        </div>
      </div>

      <ul class="scene-list">
        <li class="scene-card">
          <span class="tag tag--cyan">登录</span>
          <h3 class="scene-card__title">收不到验证、密码不对</h3>
          <p class="scene-card__text">换了号码收不到验证码，或者密码输入后页面跳回首页，先按登录指引自查一遍常见原因。</p>
          <a class="scene-card__link" href="/guide/">查看登录与密码指引</a>
        </li>
        <li class="scene-card">
          <span class="tag tag--cyan">账户设置</span>
          <h3 class="scene-card__title">找不到某一项设置</h3>
          <p class="scene-card__text">电脑版账户设置里的登录方式、通知偏好、安全验证、语言与显示，都在功能中心有对应入口说明。</p>
          <a class="scene-card__link" href="/apps/">打开功能中心</a>
        </li>
        <li class="scene-card">
          <span class="tag tag--cyan">设备切换</span>
          <h3 class="scene-card__title">换手机后要重新登录</h3>
          <p class="scene-card__text">新手机登录前，先在旧设备上把那台机器从已登录列表里移除，再按六个步骤在新机上走一遍。</p>
          <a class="scene-card__link" href="/apps/">看设备切换步骤</a>
        </li>
        <li class="scene-card">
          <span class="tag tag--cyan">活动查看</span>
          <h3 class="scene-card__title">活动入口在哪、什么时候上新</h3>
          <p class="scene-card__text">活动入口和分类入口分开放，位置不同。栏目每周更新 3 到 5 条，想追新的可以从站内动态翻起。</p>
          <a class="scene-card__link" href="/press/">查看站内动态</a>
        </li>
        <li class="scene-card">
          <span class="tag tag--cyan">分类导航</span>
          <h3 class="scene-card__title">想要的栏目找不到</h3>
          <p class="scene-card__text">首页 12 个分类覆盖新手入门、账户设置、活动资讯等场景，导航改版后入口位置也做了调整。</p>
          <a class="scene-card__link" href="/">回首页看分类</a>
        </li>
      </ul>
    </div>
  </section>

  <section class="section range-section" id="range" aria-labelledby="range-title">
    <div class="wrap">
      <div class="range-layout">
        <div class="range-copy">
          <p class="eyebrow">服务范围</p>
          <h2 class="section-title" id="range-title">以广东为核心，服务全国中文玩家</h2>
          <p class="prose">PG游艺从 2019 年上线至今，已经陪玩家走过 6 年。注册用户 52 万，每月活跃访客约 36 万，服务覆盖全国 31 个省级区域的中文用户，其中广东地区访问最集中。</p>
          <p class="prose">内容编辑与客服团队共 18 人，其中 6 位客服在工作日轮班，保证邮件和工单都有人接手。帮助中心每周更新 12 到 18 篇文档，活动资讯栏目每周更新 3 到 5 条，账号相关的步骤说明也会跟着版本一起改。</p>
          <ul class="range-list">
            <li class="range-list__item">
              <span class="range-list__label mono">地址</span>
              <span class="range-list__text">广东省广州市天河区科韵路16号信息港大厦8层，作为服务联络地址使用，寄件前请先在邮件或工单里说明。</span>
            </li>
            <li class="range-list__item">
              <span class="range-list__label mono">电话</span>
              <span class="range-list__text">17152855965，工作日 9:00–18:00 有人接听。</span>
            </li>
            <li class="range-list__item">
              <span class="range-list__label mono">邮箱</span>
              <span class="range-list__text">service@play-pg-gameplay.com.cn，工作日内回复；需要当天有回音的紧急问题，建议走帮助中心工单。</span>
            </li>
          </ul>
          <a class="range-link" href="/profile/">了解平台的服务承诺与改版脉络</a>
        </div>

        <div class="range-map" aria-hidden="true">
          <span class="range-map__node range-map__node--a"></span>
          <span class="range-map__node range-map__node--b"></span>
          <span class="range-map__node range-map__node--c"></span>
          <span class="range-map__node range-map__node--d"></span>
          <span class="range-map__node range-map__node--e"></span>
          <span class="range-map__caption mono">覆盖示意</span>
        </div>
      </div>

      <div class="range-foot">
        <span class="range-foot__item mono">客服 6 人 · 团队 18 人</span>
        <span class="range-foot__item mono">粤ICP备45610178号</span>
      </div>
    </div>
  </section>

</main>

.page-contact {
  --contact-radius: 16px;
  --contact-gap: clamp(16px, 2.4vw, 26px);
  padding-block-start: clamp(20px, 3.4vw, 40px);
  padding-block-end: clamp(48px, 7vw, 96px);
  color: var(--paper);
}

.page-contact .wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  padding-block: clamp(8px, 2vw, 20px) clamp(36px, 6vw, 76px);
  background:
    radial-gradient(125% 130% at 86% -10%, rgba(61, 242, 219, 0.14) 0%, rgba(61, 242, 219, 0) 58%),
    linear-gradient(180deg, var(--deep) 0%, var(--abyss) 100%);
}

.page-contact .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

.page-contact .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}

.page-contact .contact-hero__lead h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(16px, 2.4vw, 22px);
  color: var(--paper);
}

.page-contact .lede {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.8;
  color: var(--mist);
  max-width: 46ch;
  margin: 0;
}

.page-contact .contact-hero__quick {
  margin-top: clamp(22px, 3vw, 32px);
  display: grid;
  gap: 10px;
  max-width: 540px;
}

.page-contact .quick-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 34, 60, 0.62);
  transition: border-color 0.22s var(--ease);
}

.page-contact .quick-line:hover {
  border-color: rgba(61, 242, 219, 0.45);
}

.page-contact .quick-line__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .quick-line__value {
  flex: 1 1 180px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .contact-hero__actions {
  margin-top: clamp(20px, 3vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-contact .contact-hero__figure {
  margin: 0;
}

.page-contact .contact-hero__figure .media {
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
}

/* ---------- 章节公共 ---------- */
.page-contact .contact-channels,
.page-contact .contact-time,
.page-contact .ticket-path,
.page-contact .scene-section,
.page-contact .range-section {
  padding-block: clamp(44px, 6vw, 84px);
}

.page-contact .section-head {
  display: grid;
  gap: clamp(10px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(24px, 4vw, 46px);
}

.page-contact .section-index {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: clamp(52px, 9vw, 116px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: rgba(61, 242, 219, 0.26);
}

.page-contact .section-head__body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.page-contact .section-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.6vw, 40px);
  line-height: 1.24;
  color: var(--paper);
}

.page-contact .section-note {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 62ch;
}

.page-contact .prose {
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
  margin: 0 0 16px;
}

/* ---------- 01 联络渠道 ---------- */
.page-contact .contact-channels__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: start;
}

.page-contact .contact-channels__main {
  display: grid;
  gap: var(--contact-gap);
  min-width: 0;
}

.page-contact .channel-card {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: linear-gradient(160deg, rgba(14, 34, 60, 0.94) 0%, rgba(8, 23, 43, 0.94) 100%);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-contact .channel-card:hover {
  border-color: rgba(61, 242, 219, 0.45);
  transform: translateY(-2px);
}

.page-contact .channel-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.page-contact .channel-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .channel-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .contact-item {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(5, 11, 20, 0.55);
}

.page-contact .contact-item__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-contact .contact-item__value {
  flex: 1 1 190px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--cyan-lt);
}

.page-contact .contact-item--plain .contact-item__value {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--paper);
}

.page-contact .contact-channels__aside {
  min-width: 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(255, 138, 61, 0.42);
  border-radius: var(--contact-radius);
  background: linear-gradient(165deg, rgba(255, 138, 61, 0.13) 0%, rgba(14, 34, 60, 0.92) 55%, rgba(8, 23, 43, 0.96) 100%);
}

.page-contact .contact-channels__aside-title {
  margin: 14px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .contact-channels__aside-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

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

.page-contact .contact-channels__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
}

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

.page-contact .contact-channels__aside-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mist);
  overflow-wrap: anywhere;
}

/* ---------- 02 服务时间 ---------- */
.page-contact .contact-time__band {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
}

.page-contact .contact-time__cell {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--panel);
  display: grid;
  gap: 8px;
  align-content: start;
}

.page-contact .contact-time__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .contact-time__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .contact-time__value .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--cyan-lt);
}

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

/* ---------- 03 工单路径 ---------- */
.page-contact .ticket-path__figure {
  margin: 0 0 clamp(24px, 3.4vw, 38px);
}

.page-contact .ticket-path__figure .media {
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
}

.page-contact .ticket-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .ticket-step {
  position: relative;
  padding: 26px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: rgba(14, 34, 60, 0.72);
  transition: border-color 0.22s var(--ease);
}

.page-contact .ticket-step::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(61, 242, 219, 0) 100%);
}

.page-contact .ticket-step:hover {
  border-color: rgba(61, 242, 219, 0.45);
}

.page-contact .ticket-step__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 10px;
}

.page-contact .ticket-step__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .ticket-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .ticket-board {
  margin-top: clamp(24px, 3.4vw, 38px);
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .ticket-board__status {
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: rgba(8, 23, 43, 0.85);
}

.page-contact .ticket-board__label,
.page-contact .ticket-template__label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-contact .ticket-board__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-contact .ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(61, 242, 219, 0.4);
  border-radius: 999px;
  font-size: 13px;
  color: var(--cyan-lt);
  background: rgba(61, 242, 219, 0.07);
}

.page-contact .ticket-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.page-contact .ticket-chip--done {
  border-color: var(--line);
  color: var(--mist);
  background: transparent;
}

.page-contact .ticket-chip--done::before {
  background: var(--mist);
}

.page-contact .ticket-template {
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  background: rgba(14, 34, 60, 0.7);
}

.page-contact .ticket-template__text {
  margin: 0 0 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--cyan-lt);
}

/* ---------- 04 常见场景 ---------- */
.page-contact .scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .scene-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(61, 242, 219, 0.55);
  border-radius: 4px var(--contact-radius) var(--contact-radius) 4px;
  background: rgba(8, 23, 43, 0.82);
  transition: border-left-color 0.22s var(--ease), background-color 0.22s var(--ease);
}

.page-contact .scene-card:hover {
  border-left-color: var(--cyan);
  background: rgba(14, 34, 60, 0.9);
}

.page-contact .scene-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.35;
  color: var(--paper);
}

.page-contact .scene-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .scene-card__link {
  justify-self: start;
  font-size: 13.5px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 242, 219, 0.35);
  padding-bottom: 2px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-contact .scene-card__link:hover {
  color: var(--cyan-lt);
  border-bottom-color: var(--cyan-lt);
}

/* ---------- 05 服务范围 ---------- */
.page-contact .range-layout {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.page-contact .range-copy {
  min-width: 0;
}

.page-contact .range-copy .section-title {
  margin-bottom: clamp(16px, 2.4vw, 22px);
}

.page-contact .range-list {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .range-list__item {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(35, 64, 95, 0.7);
}

.page-contact .range-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-contact .range-list__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .range-list__text {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .range-link {
  display: inline-block;
  font-size: 14px;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 138, 61, 0.45);
  padding-bottom: 3px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-contact .range-link:hover {
  color: var(--amber-lt);
  border-bottom-color: var(--amber-lt);
}

.page-contact .range-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--contact-radius);
  overflow: hidden;
  background-color: rgba(8, 23, 43, 0.85);
  background-image:
    linear-gradient(rgba(35, 64, 95, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 64, 95, 0.5) 1px, transparent 1px);
  background-size: 54px 54px;
}

.page-contact .range-map__node {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(61, 242, 219, 0.09);
}

.page-contact .range-map__node--a {
  left: 62%;
  top: 56%;
  width: 12px;
  height: 12px;
  background: var(--amber);
  box-shadow: 0 0 0 8px rgba(255, 138, 61, 0.12);
}

.page-contact .range-map__node--a::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 61, 0.5);
  animation: contact-pulse 2.8s var(--ease) infinite;
}

.page-contact .range-map__node--b { left: 32%; top: 28%; }
.page-contact .range-map__node--c { left: 79%; top: 24%; }
.page-contact .range-map__node--d { left: 21%; top: 70%; }
.page-contact .range-map__node--e { left: 49%; top: 81%; }

.page-contact .range-map__caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist);
  opacity: 0.75;
}

@keyframes contact-pulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.page-contact .range-foot {
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
}

.page-contact .range-foot__item {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-contact .ticket-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 720px) {
  .page-contact .contact-time__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 860px) {
  .page-contact .section-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 2.4vw, 34px);
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }

  .page-contact .range-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

@media (min-width: 960px) {
  .page-contact .contact-channels__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-contact .contact-channels__aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }
}

@media (min-width: 1080px) {
  .page-contact .contact-time__band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-contact .range-map__node--a::after {
    animation: none;
  }

  .page-contact .channel-card,
  .page-contact .quick-line,
  .page-contact .scene-card,
  .page-contact .ticket-step {
    transition: none;
  }

  .page-contact .channel-card:hover,
  .page-contact .ticket-step:hover {
    transform: none;
  }
}