.page-contact {
  --pc-gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--ink);
  color: var(--paper);
  overflow-x: clip;
}

.page-contact *,
.page-contact *::before,
.page-contact *::after {
  box-sizing: border-box;
}

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

/* ---------- 面包屑 ---------- */
.page-contact .pc-top {
  padding-block: 1.125rem .25rem;
}

.page-contact .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--muted);
}

.page-contact .breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.page-contact .breadcrumb-list li + li::before {
  content: "/";
  color: var(--muted-deep);
}

.page-contact .breadcrumb-list a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .breadcrumb-list a:hover,
.page-contact .breadcrumb-list a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 首屏 ---------- */
.page-contact .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.5rem, .9rem + 3vw, 3rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.page-contact .hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  filter: saturate(.55) contrast(1.08);
}

.page-contact .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(85% 70% at 15% 0%, rgba(200, 16, 46, .26), transparent 62%),
    radial-gradient(65% 60% at 92% 6%, rgba(14, 124, 147, .30), transparent 66%),
    linear-gradient(180deg, rgba(14, 17, 20, .25), var(--ink) 90%);
}

.page-contact .hero__head {
  max-width: 46rem;
}

.page-contact .eyebrow {
  display: inline-block;
  margin: 0 0 .75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .pc-h1 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--paper);
  text-wrap: balance;
}

.page-contact .pc-lede {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.78;
  color: var(--muted);
}

/* ---------- 三段式渠道画板 ---------- */
.page-contact .channel-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--hair-strong);
  border: 1px solid var(--hair);
}

.page-contact .channel {
  position: relative;
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  background: var(--panel-deep);
}

.page-contact .channel--mail {
  background:
    linear-gradient(198deg, #242b32 0%, var(--panel) 42%, var(--panel-deep) 100%);
}

.page-contact .channel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--hair-strong);
}

.page-contact .channel--mail::before {
  background: var(--red);
}

.page-contact .channel__label {
  margin: 0 0 .6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-contact .channel__tag {
  display: inline-block;
  margin-bottom: .875rem;
  padding: .2rem .55rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--cyan);
  background: var(--cyan-soft);
  border: 1px solid rgba(34, 211, 238, .34);
  clip-path: polygon(0 0, 100% 0, 100% 68%, calc(100% - 8px) 100%, 0 100%);
}

.page-contact .channel--mail .channel__tag {
  color: var(--lime);
  background: rgba(232, 255, 58, .1);
  border-color: rgba(232, 255, 58, .38);
}

.page-contact .channel__value {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 .875rem;
  padding-bottom: .2rem;
  font-family: var(--font-mono);
  font-size: clamp(.9375rem, .85rem + .55vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--paper);
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px solid var(--hair-strong);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .channel__value:hover,
.page-contact .channel__value:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-contact .channel__addr {
  margin: 0 0 .75rem;
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--muted);
  word-break: break-word;
}

.page-contact .channel__note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--muted-deep);
}

/* ---------- 章节骨架 ---------- */
.page-contact .sec {
  position: relative;
  padding-block: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
}

.page-contact .sec--slanted::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-strong) 18%, var(--hair-strong) 82%, transparent);
}

.page-contact .sec__head {
  max-width: 44rem;
}

.page-contact .h2 {
  margin: 0 0 .75rem;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--paper);
  text-wrap: balance;
}

.page-contact .sec__sub {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--muted);
}

/* ---------- 附件清单 ---------- */
.page-contact .mail-lists {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pc-gap);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.page-contact .mail-list {
  min-width: 0;
  padding: 1.125rem 1.25rem 1.375rem;
  border-left: 2px solid var(--hair-strong);
  background: linear-gradient(180deg, rgba(26, 31, 36, .74), rgba(21, 26, 30, .34));
}

.page-contact .mail-list:nth-child(1) {
  border-left-color: var(--red);
}

.page-contact .mail-list:nth-child(2) {
  border-left-color: var(--cyan);
}

.page-contact .mail-list:nth-child(3) {
  border-left-color: var(--teal);
}

.page-contact .mail-list h3 {
  margin: 0 0 .375rem;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .mail-list__lead {
  margin: 0 0 .875rem;
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--muted-deep);
}

.page-contact .mail-list ul,
.page-contact .tpl-aside ul,
.page-contact .coop__list,
.page-contact .outro-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .mail-list ul {
  display: grid;
  gap: .5rem;
}

.page-contact .mail-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--muted);
  word-break: break-word;
}

.page-contact .mail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .4rem;
  height: .4rem;
  background: var(--cyan);
  opacity: .8;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 62%);
}

.page-contact .mail-list:nth-child(1) li::before {
  background: var(--red-bright);
}

.page-contact .mail-list:nth-child(3) li::before {
  background: var(--teal);
}

/* ---------- 邮件写法 ---------- */
.page-contact .tpl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.page-contact .tpl-aside {
  min-width: 0;
}

.page-contact .tpl-aside__kicker {
  margin: 0 0 .75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--paper);
}

.page-contact .tpl-aside ul {
  display: grid;
  gap: .625rem;
  margin-bottom: 1.25rem;
}

.page-contact .tpl-aside li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--muted);
}

.page-contact .tpl-aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .55rem;
  height: .55rem;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}

.page-contact .tpl-hint {
  margin: 0;
  padding-top: .875rem;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-micro);
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--muted-deep);
}

.page-contact .tpl-main {
  min-width: 0;
}

.page-contact .tpl-code {
  margin: 0;
  padding: clamp(1rem, .8rem + .8vw, 1.75rem);
  background: var(--black);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--red);
  font-family: var(--font-mono);
  font-size: clamp(.8125rem, .77rem + .2vw, .9375rem);
  line-height: 1.95;
  color: var(--paper);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: auto;
  user-select: all;
  tab-size: 2;
}

.page-contact .tpl-figure {
  position: relative;
  margin: 1.25rem 0 0;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--panel-deep);
}

.page-contact .tpl-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 7;
  object-fit: cover;
}

.page-contact .tpl-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 9, 11, .1) 0%, rgba(7, 9, 11, .62) 58%, rgba(7, 9, 11, .92) 100%);
}

.page-contact .tpl-figure figcaption {
  position: relative;
  z-index: 1;
  margin-top: -3rem;
  padding: 0 1rem 1rem;
  font-size: var(--fs-micro);
  line-height: 1.66;
  letter-spacing: .02em;
  color: var(--muted);
}

/* ---------- 电话回访 ---------- */
.page-contact .callback {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: clamp(1.75rem, 1rem + 2.4vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .cb-step {
  position: relative;
  min-width: 0;
  padding-top: 1.625rem;
}

.page-contact .cb-step::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--ink);
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}

.page-contact .cb-step::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 16px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--hair-strong), transparent);
}

.page-contact .cb-step:last-child::after {
  display: none;
}

.page-contact .cb-step__no {
  display: block;
  margin-bottom: .375rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  color: var(--cyan);
}

.page-contact .cb-step__t {
  margin: 0 0 .375rem;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.32;
  color: var(--paper);
}

.page-contact .cb-step__d {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 合作与授权 ---------- */
.page-contact .coop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--hair-strong);
  border-block: 1px solid var(--hair);
}

.page-contact .coop__col {
  min-width: 0;
  padding: clamp(1.375rem, 1rem + 1.8vw, 2.25rem) clamp(1.125rem, .9rem + 1.4vw, 2rem);
  background: var(--ink);
}

.page-contact .coop__col:first-child {
  background: var(--panel-deep);
}

.page-contact .coop__t {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
  color: var(--paper);
}

.page-contact .coop__d {
  margin: 0 0 1rem;
  font-size: var(--fs-small);
  line-height: 1.74;
  color: var(--muted-deep);
}

.page-contact .coop__list {
  display: grid;
  gap: .5rem;
}

.page-contact .coop__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--muted);
}

.page-contact .coop__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -.05em;
  font-family: var(--font-mono);
  color: var(--cyan);
}

.page-contact .coop__note {
  margin: 1.25rem 0 0;
  max-width: 46rem;
  font-size: var(--fs-micro);
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--muted-deep);
}

/* ---------- 收尾 ---------- */
.page-contact .outro {
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.page-contact .outro__line {
  display: block;
  height: 1px;
  margin: 0 0 clamp(1.625rem, 1rem + 2vw, 2.5rem);
  background: linear-gradient(90deg, var(--hair-strong), var(--hair) 55%, transparent);
}

.page-contact .outro-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .625rem;
  margin-top: 1.25rem;
}

.page-contact .outro-links a {
  display: inline-block;
  padding: .15rem 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .outro-links a:hover,
.page-contact .outro-links a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 响应式 ---------- */
@media (min-width: 560px) {
  .page-contact .outro-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media (min-width: 760px) {
  .page-contact .callback {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 2rem;
  }
}

@media (min-width: 820px) {
  .page-contact .channel-board {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr);
  }

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

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

@media (min-width: 900px) {
  .page-contact .tpl-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel__value,
  .page-contact .breadcrumb-list a,
  .page-contact .outro-links a {
    transition: none;
  }
}
<<<END>>>