.page-contact {
  background: var(--sky);
  color: var(--snow);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding: 24px 0 56px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(106, 76, 166, 0.28) 0%, rgba(10, 23, 48, 0) 58%),
    linear-gradient(168deg, var(--mid) 0%, var(--sky) 68%);
  border-bottom: 2px solid var(--line);
}

.page-contact .contact-crumb-current {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mist);
  text-transform: uppercase;
}

.page-contact .contact-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 28px;
}

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

.page-contact .contact-rule {
  display: block;
  width: 88px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 22px;
}

.page-contact .contact-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 9vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--snow);
}

.page-contact .contact-lead {
  font-size: 17px;
  line-height: 1.75;
  max-width: 34em;
  color: var(--snow);
  margin: 0 0 14px;
}

.page-contact .contact-hint {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mist);
  margin: 0 0 26px;
}

.page-contact .contact-lines {
  display: grid;
  gap: 0;
}

.page-contact .contact-line {
  border-top: 2px solid var(--line);
  padding: 18px 0 20px;
  min-width: 0;
}

.page-contact .contact-line:last-child {
  border-bottom: 2px solid var(--line);
}

.page-contact .contact-line-label {
  display: block;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.page-contact .contact-line-value {
  display: block;
  font-family: var(--font-data);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--snow);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-contact .contact-line-value--mail {
  font-size: clamp(16px, 4.3vw, 30px);
  color: var(--gold-soft);
}

.page-contact .contact-line-value--tel {
  font-size: clamp(34px, 9.5vw, 72px);
  line-height: 1.02;
  color: var(--gold);
}

.page-contact .contact-line-value--addr {
  font-size: clamp(18px, 3.6vw, 28px);
  line-height: 1.4;
}

.page-contact .contact-line-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
  margin: 10px 0 0;
  max-width: 32em;
}

.page-contact .contact-hero-media {
  aspect-ratio: 16 / 10;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-hard);
  margin: 0;
}

.page-contact .contact-hero-media .media-frame-inner {
  width: 100%;
  height: 100%;
}

.page-contact .contact-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 时段与节奏 ---------- */
.page-contact .contact-pace {
  background: linear-gradient(180deg, var(--sky) 0%, var(--mid) 100%);
}

.page-contact .contact-pace .section-head {
  margin-bottom: 40px;
}

.page-contact .pace-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--line);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-hard);
}

.page-contact .pace-item {
  background: var(--mid);
  padding: 26px 22px 28px;
  min-width: 0;
}

.page-contact .pace-item .stat {
  display: block;
  margin-bottom: 12px;
}

.page-contact .pace-item .stat-value {
  display: block;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: clamp(26px, 5.5vw, 40px);
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.page-contact .pace-item .stat-label {
  display: block;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 8px;
}

.page-contact .pace-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--snow);
  margin: 0;
}

/* ---------- 反馈通道 ---------- */
.page-contact .contact-channels {
  background: var(--sky);
}

.page-contact .contact-channels .section-head {
  margin-bottom: 44px;
}

.page-contact .channels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

.page-contact .fb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  min-width: 0;
}

.page-contact .fb-card {
  position: relative;
  background: var(--card);
  border: 2px solid var(--line);
  border-top-width: 6px;
  box-shadow: var(--shadow-hard-sm);
  padding: 22px 20px 24px;
  min-width: 0;
}

.page-contact .fb-card--fix { border-top-color: var(--gold); }
.page-contact .fb-card--data { border-top-color: var(--violet); }
.page-contact .fb-card--bug { border-top-color: var(--mist); }
.page-contact .fb-card--coop { border-top-color: var(--green); }

.page-contact .fb-code {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sky);
  background: var(--gold-soft);
  padding: 3px 8px;
  margin-bottom: 14px;
}

.page-contact .fb-card--data .fb-code { background: var(--violet); color: var(--snow); }
.page-contact .fb-card--bug .fb-code { background: var(--mist); color: var(--sky); }
.page-contact .fb-card--coop .fb-code { background: var(--green); color: var(--snow); }

.page-contact .fb-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--snow);
  margin: 0 0 10px;
}

.page-contact .fb-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--snow);
  margin: 0 0 18px;
}

.page-contact .fb-attach {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.page-contact .fb-attach-label {
  display: block;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.page-contact .fb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-contact .fb-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
  margin-bottom: 6px;
}

.page-contact .fb-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

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

.page-contact .channels-media {
  aspect-ratio: 4 / 3;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-hard);
  margin: 0 0 20px;
}

.page-contact .channels-media .media-frame-inner {
  width: 100%;
  height: 100%;
}

.page-contact .channels-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.page-contact .contact-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-contact .contact-link:hover,
.page-contact .contact-link:focus-visible {
  color: var(--gold-soft);
  text-decoration-thickness: 2px;
}

/* ---------- 纠错提法 ---------- */
.page-contact .contact-correct {
  background: linear-gradient(180deg, var(--mid) 0%, var(--sky) 100%);
  border-top: 2px solid var(--line);
}

.page-contact .correct-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 38px;
}

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

.page-contact .correct-main .section-head {
  margin-bottom: 28px;
}

.page-contact .correct-steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 22px;
  padding: 0;
}

.page-contact .correct-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--snow);
}

.page-contact .correct-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  border-bottom: 2px solid var(--line);
  padding-bottom: 2px;
}

.page-contact .correct-steps strong {
  color: var(--gold-soft);
}

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

.page-contact .correct-card {
  background: var(--card);
  border: 2px solid var(--line);
  border-left: 8px solid var(--gold);
  box-shadow: var(--shadow-hard-sm);
  padding: 22px 20px;
}

.page-contact .correct-card-label {
  display: block;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 14px;
}

.page-contact .correct-card-sample {
  font-family: var(--font-data);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gold-soft);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  overflow-wrap: anywhere;
}

.page-contact .correct-card-sample:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.page-contact .correct-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
  margin: 18px 0 0;
}

/* ---------- 合作 ---------- */
.page-contact .contact-coop {
  background: var(--sky);
}

.page-contact .contact-coop .section-head {
  margin-bottom: 40px;
}

.page-contact .coop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-contact .coop-block {
  background: var(--mid);
  border: 2px solid var(--line);
  padding: 24px 22px;
  min-width: 0;
}

.page-contact .coop-block--wide {
  background: var(--card);
  border-left: 8px solid var(--violet);
}

.page-contact .coop-block-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--snow);
  margin: 0 0 16px;
}

.page-contact .coop-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-contact .coop-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--snow);
  margin-bottom: 8px;
}

.page-contact .coop-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--gold);
}

.page-contact .coop-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--snow);
  margin: 0;
}

.page-contact .contact-inline-data {
  font-family: var(--font-data);
  color: var(--gold-soft);
  overflow-wrap: anywhere;
}

/* ---------- 备案 ---------- */
.page-contact .contact-record {
  border-top: 2px solid var(--line);
  background: var(--sky);
}

.page-contact .record-title {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 16px;
}

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

.page-contact .record-line .contact-inline-data {
  color: var(--snow);
}

.page-contact .record-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--mist);
  margin: 0;
  max-width: 46em;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-contact .contact-hero {
    padding: 32px 0 72px;
  }

  .page-contact .contact-hero-media {
    aspect-ratio: 16 / 7;
  }

  .page-contact .pace-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .page-contact .coop-block--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 980px) {
  .page-contact .contact-hero-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 60px;
    align-items: start;
  }

  .page-contact .contact-hero-media {
    aspect-ratio: 4 / 5;
    margin-top: 46px;
  }

  .page-contact .contact-pace .section-head {
    margin-bottom: 52px;
  }

  .page-contact .channels-grid {
    grid-template-columns: 1.62fr 1fr;
    gap: 44px;
    align-items: start;
  }

  .page-contact .channels-media {
    aspect-ratio: 4 / 3;
  }

  .page-contact .correct-grid {
    grid-template-columns: 1.58fr 1fr;
    gap: 56px;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .page-contact .contact-hero {
    padding: 40px 0 88px;
  }

  .page-contact .contact-line {
    padding: 22px 0 24px;
  }
}