.page-contact{
  --contact-bg-dark:#0A0A0A;
  --contact-bg-panel:#1A2E45;
  --contact-bg-soft:#101418;
  --contact-accent:#21E6A3;
  --contact-gold:#C9A227;
  --contact-line:#E0E0E0;
  --contact-dim:#8A8A8A;
  --contact-paper:#F5F6F8;
  --contact-border-w:4px;
  --contact-shadow:6px 6px 0 rgba(0,0,0,.55);
  --contact-radius:0;
  --contact-font-data:'Source Han Mono','Roboto Mono','Courier New',monospace;
  --contact-font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  font-family:var(--contact-font-data);
  background:var(--contact-bg-dark);
  color:var(--contact-paper);
  line-height:1.7;
}
.page-contact .container{
  width:min(1280px,100%);
  margin-inline:auto;
  padding-inline:24px;
}
.page-contact a{
  color:inherit;
  text-decoration:none;
}
.page-contact a:hover{
  color:var(--contact-accent);
}
.page-contact img{
  max-width:100%;
  height:auto;
  display:block;
}

/* 面包屑 */
.page-contact .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--contact-dim);
  text-transform:uppercase;
  margin-bottom:24px;
}
.page-contact .breadcrumb a{
  position:relative;
  padding-bottom:2px;
}
.page-contact .breadcrumb a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--contact-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .breadcrumb a:hover::after{
  transform:scaleX(1);
}
.page-contact .breadcrumb__sep{
  color:var(--contact-dim);
}

/* 首屏分屏 */
.page-contact .contact-hero{
  padding:64px 0 0;
}
.page-contact .contact-hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}
.page-contact .contact-hero__index{
  font-size:12px;
  letter-spacing:.28em;
  color:var(--contact-accent);
  margin:0 0 16px;
  text-transform:uppercase;
}
.page-contact .contact-hero__title{
  font-family:var(--contact-font-display);
  font-weight:900;
  font-size:clamp(32px,6vw,56px);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 20px;
}
.page-contact .contact-hero__title-accent{
  color:var(--contact-accent);
  display:inline-block;
}
.page-contact .contact-hero__lead{
  font-size:14px;
  line-height:1.8;
  color:var(--contact-dim);
  max-width:520px;
  margin:0 0 40px;
}
.page-contact .contact-channel-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:3px solid var(--contact-paper);
}
.page-contact .contact-channel-list__item{
  padding:20px 0;
  border-bottom:1px solid var(--contact-line);
  display:grid;
  gap:6px;
}
.page-contact .contact-channel-list__label{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--contact-dim);
  text-transform:uppercase;
}
.page-contact .contact-channel-list__value{
  font-size:clamp(16px,3vw,22px);
  font-weight:700;
  color:var(--contact-paper);
  transition:color 160ms cubic-bezier(.22,.61,.36,1);
  word-break:break-all;
}
.page-contact a.contact-channel-list__value:hover{
  color:var(--contact-accent);
  text-decoration:underline;
  text-underline-offset:4px;
}
.page-contact .contact-channel-list__value--email{
  font-size:clamp(18px,4vw,26px);
  letter-spacing:-.01em;
}
.page-contact .contact-channel-list__tip{
  font-size:12px;
  color:var(--contact-dim);
  letter-spacing:.04em;
}

/* 首屏视觉 */
.page-contact .contact-hero__visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.page-contact .contact-hero__figure{
  margin:0;
  position:relative;
  width:100%;
  max-width:420px;
  border:var(--contact-border-w) solid var(--contact-paper);
  box-shadow:var(--contact-shadow);
  background:var(--contact-bg-soft);
}
.page-contact .contact-hero__image{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:grayscale(1) contrast(1.1);
}
.page-contact .contact-hero__figcaption{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--contact-dim);
  background:var(--contact-bg-soft);
  padding:10px 14px;
  border-top:3px solid var(--contact-paper);
}
.page-contact .contact-hero__signal{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.page-contact .contact-hero__signal-ring{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--contact-accent);
  opacity:0;
}
.page-contact .contact-hero__signal-ring--one{
  inset:8%;
  border-width:1px;
  opacity:.3;
}
.page-contact .contact-hero__signal-ring--two{
  inset:2%;
  border-width:2px;
  border-style:dashed;
  opacity:.14;
}
.page-contact .contact-hero__signal-ring--three{
  inset:-6%;
  border-width:4px;
  border-color:var(--contact-panel);
  opacity:.5;
}

/* 提示条 */
.page-contact .contact-note-bar{
  background:var(--contact-accent);
  color:#0A0A0A;
  padding:20px 0;
  margin-top:64px;
  border-block:4px solid #0A0A0A;
}
.page-contact .contact-note-bar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.page-contact .contact-note-bar__title{
  font-size:15px;
  font-weight:700;
  margin:0;
  letter-spacing:.02em;
}
.page-contact .contact-note-bar__mail{
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(10,10,10,.5);
  transition:text-decoration-color 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .contact-note-bar__mail:hover{
  text-decoration-color:#0A0A0A;
  color:#0A0A0A;
}
.page-contact .contact-note-bar__badge{
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  background:#0A0A0A;
  color:var(--contact-accent);
  padding:6px 12px;
}

/* 服务时间 */
.page-contact .contact-service{
  background:var(--contact-bg-soft);
  padding:72px 0;
}
.page-contact .contact-service .section-heading{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:36px;
}
.page-contact .contact-service .section-heading__index{
  font-size:12px;
  letter-spacing:.2em;
  color:var(--contact-accent);
}
.page-contact .section-heading--speed{
  font-family:var(--contact-font-display);
  font-size:clamp(28px,4vw,44px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0;
  background-image:repeating-linear-gradient(115deg,transparent 0 24px,rgba(33,230,163,.14) 24px 26px,transparent 26px 48px);
}
.page-contact .contact-service__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.page-contact .contact-service__card{
  background:var(--contact-bg-panel);
  background-image:linear-gradient(145deg,var(--contact-bg-panel),#14202F);
  border:3px solid var(--contact-paper);
  box-shadow:var(--contact-shadow);
  padding:28px;
  transition:border-color 160ms cubic-bezier(.22,.61,.36,1), transform 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .contact-service__card:hover{
  border-color:var(--contact-accent);
  transform:translate(-2px,-2px);
}
.page-contact .contact-service__name{
  font-family:var(--contact-font-display);
  font-size:20px;
  font-weight:900;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.page-contact .contact-service__hours{
  font-size:14px;
  color:var(--contact-accent);
  font-weight:700;
  margin:0 0 12px;
  letter-spacing:.04em;
}
.page-contact .contact-service__desc{
  font-size:13px;
  color:var(--contact-dim);
  line-height:1.8;
  margin:0;
}

/* FAQ */
.page-contact .contact-faq{
  background:var(--contact-paper);
  color:var(--contact-bg-dark);
  padding:72px 0 64px;
}
.page-contact .contact-faq .section-heading{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:16px;
}
.page-contact .contact-faq .section-heading__index{
  font-size:12px;
  letter-spacing:.2em;
  color:var(--contact-bg-panel);
}
.page-contact .contact-faq .section-heading--speed{
  background-image:repeating-linear-gradient(115deg,transparent 0 24px,rgba(26,46,69,.12) 24px 26px,transparent 26px 48px);
}
.page-contact .contact-faq__intro{
  font-size:14px;
  color:var(--contact-dim);
  max-width:600px;
  margin:0 0 36px;
}
.page-contact .contact-faq__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.page-contact .contact-faq__visual{
  margin:0;
  position:relative;
  border:4px solid var(--contact-bg-dark);
  box-shadow:var(--contact-shadow);
}
.page-contact .contact-faq__image{
  width:100%;
  height:auto;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.page-contact .contact-faq__caption{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--contact-dim);
  background:var(--contact-bg-dark);
  color:var(--contact-paper);
  padding:8px 14px;
}
.page-contact .contact-faq__list{
  display:grid;
  gap:16px;
}
.page-contact .contact-faq__item{
  border:3px solid var(--contact-bg-dark);
  background:var(--contact-paper);
  transition:border-color 160ms cubic-bezier(.22,.61,.36,1), background-color 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .contact-faq__item:hover{
  border-color:var(--contact-gold);
}
.page-contact .contact-faq__item[open]{
  background:#FFFFFF;
  border-color:var(--contact-bg-panel);
}
.page-contact .contact-faq__question{
  font-family:var(--contact-font-display);
  font-weight:900;
  font-size:16px;
  line-height:1.4;
  padding:18px 52px 18px 20px;
  cursor:pointer;
  list-style:none;
  position:relative;
  letter-spacing:-.01em;
}
.page-contact .contact-faq__question::-webkit-details-marker{
  display:none;
}
.page-contact .contact-faq__question::after{
  content:"+";
  position:absolute;
  right:18px;
  top:18px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:700;
  border:2px solid var(--contact-bg-dark);
  line-height:1;
  transition:transform 160ms cubic-bezier(.22,.61,.36,1), background-color 160ms cubic-bezier(.22,.61,.36,1), color 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .contact-faq__item[open] .contact-faq__question::after{
  content:"−";
  transform:rotate(180deg);
  background:var(--contact-bg-dark);
  color:var(--contact-paper);
}
.page-contact .contact-faq__answer{
  font-size:14px;
  line-height:1.8;
  color:var(--contact-bg-soft);
  margin:0;
  padding:0 20px 20px 20px;
  max-width:640px;
}
.page-contact .contact-faq__more{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:40px;
  padding-top:28px;
  border-top:3px solid var(--contact-bg-dark);
}
.page-contact .tag{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:4px 10px;
}
.page-contact .tag--live{
  background:var(--contact-accent);
  color:#0A0A0A;
  border:2px solid #0A0A0A;
}
.page-contact .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--contact-font-data);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  padding:12px 24px;
  border-width:3px;
  border-style:solid;
  cursor:pointer;
  transition:background-color 160ms cubic-bezier(.22,.61,.36,1), color 160ms cubic-bezier(.22,.61,.36,1), box-shadow 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .btn--outline{
  border-color:var(--contact-bg-dark);
  color:var(--contact-bg-dark);
  background:transparent;
}
.page-contact .btn--outline:hover{
  background:var(--contact-bg-dark);
  color:var(--contact-paper);
}
.page-contact .btn--solid{
  border-color:var(--contact-accent);
  background:var(--contact-accent);
  color:#0A0A0A;
  box-shadow:4px 4px 0 #0A0A0A;
}
.page-contact .btn--solid:hover{
  background:#0A0A0A;
  color:var(--contact-accent);
  box-shadow:4px 4px 0 var(--contact-accent);
}
.page-contact .contact-faq__link{
  font-size:14px;
  font-weight:700;
  color:var(--contact-bg-panel);
  border-bottom:2px solid transparent;
  transition:border-color 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .contact-faq__link:hover{
  border-bottom-color:var(--contact-bg-panel);
  color:var(--contact-bg-panel);
}

/* 延伸信息 */
.page-contact .contact-extension{
  background:var(--contact-bg-panel);
  padding:72px 0;
  border-block:4px solid var(--contact-accent);
}
.page-contact .contact-extension__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
.page-contact .contact-extension__index{
  font-size:12px;
  letter-spacing:.24em;
  color:var(--contact-accent);
  text-transform:uppercase;
  margin:0 0 12px;
}
.page-contact .contact-extension__title{
  font-family:var(--contact-font-display);
  font-size:clamp(24px,3.6vw,36px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0 0 16px;
  color:var(--contact-paper);
}
.page-contact .contact-extension__desc{
  font-size:14px;
  line-height:1.8;
  color:rgba(245,246,248,.82);
  max-width:560px;
  margin:0 0 28px;
}
.page-contact .contact-extension__meta{
  display:flex;
  align-items:center;
}
.page-contact .contact-extension__facts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  width:100%;
}
.page-contact .contact-extension__fact{
  background:var(--contact-bg-soft);
  border:3px solid var(--contact-paper);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:4px 4px 0 rgba(0,0,0,.4);
  transition:border-color 160ms cubic-bezier(.22,.61,.36,1);
}
.page-contact .contact-extension__fact:hover{
  border-color:var(--contact-accent);
}
.page-contact .contact-extension__fact-num{
  font-family:var(--contact-font-display);
  font-size:clamp(24px,4vw,36px);
  font-weight:900;
  color:var(--contact-accent);
  letter-spacing:-.02em;
  line-height:1;
}
.page-contact .contact-extension__fact-label{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--contact-dim);
  text-transform:uppercase;
}

/* 返回 */
.page-contact .contact-return{
  background:var(--contact-bg-dark);
  padding:48px 0;
}
.page-contact .contact-return__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.page-contact .contact-return__note{
  font-size:13px;
  color:var(--contact-dim);
  margin:0;
  max-width:440px;
  line-height:1.7;
}

/* 桌面端 */
@media (min-width:900px){
  .page-contact .container{
    padding-inline:52px;
  }
  .page-contact .contact-hero{
    padding:80px 0 0;
  }
  .page-contact .contact-hero__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;
    gap:64px;
  }
  .page-contact .contact-hero__copy{
    padding-right:24px;
  }
  .page-contact .contact-hero__title{
    font-size:clamp(48px,5.4vw,72px);
  }
  .page-contact .contact-hero__lead{
    font-size:15px;
  }
  .page-contact .contact-hero__figure{
    max-width:520px;
  }
  .page-contact .contact-hero__signal-ring--one{
    inset:-10%;
  }
  .page-contact .contact-hero__signal-ring--two{
    inset:-18%;
  }
  .page-contact .contact-hero__signal-ring--three{
    inset:-26%;
  }
  .page-contact .contact-service__grid{
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .page-contact .contact-faq__grid{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:48px;
    align-items:start;
  }
  .page-contact .contact-extension__inner{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:64px;
    align-items:center;
  }
  .page-contact .contact-extension__facts{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (prefers-reduced-motion: reduce){
  .page-contact *{
    transition:none !important;
    animation:none !important;
  }
}

.page-contact {
  --contact-panel: currentColor;
}