.page-contact{
  position:relative;
  overflow:hidden;
  --contact-pad:clamp(18px,3.2vw,40px);
  --contact-hair:rgba(201,214,232,.2);
  --contact-panel-hi:#112A50;
}

.page-contact::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(124,147,184,.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,147,184,.1) 1px, transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(130% 62% at 50% 0%, #000 0%, transparent 76%);
  mask-image:radial-gradient(130% 62% at 50% 0%, #000 0%, transparent 76%);
  opacity:.75;
}

.page-contact .contact-shell{
  position:relative;
  z-index:1;
  padding-block:24px 60px;
}

/* ---------- 首屏 ---------- */
.page-contact .contact-intro{
  max-width:770px;
  padding-block:16px 34px;
}

.page-contact h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,7.6vw,3.45rem);
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--c-snow);
  margin:12px 0 0;
  max-width:15em;
}

.page-contact .contact-lede{
  margin:16px 0 0;
  font-size:16.5px;
  line-height:1.78;
  color:var(--c-snow);
  max-width:38em;
}

.page-contact .contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* ---------- 主体双栏 ---------- */
.page-contact .contact-grid{
  display:grid;
  gap:30px;
}

.page-contact .contact-block .section-title{
  margin:0 0 10px;
}

.page-contact .contact-note{
  margin:0;
  font-size:14.5px;
  line-height:1.72;
  color:var(--c-steel);
}

/* ---------- 渠道卡片 ---------- */
.page-contact .channel-list{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}

.page-contact .channel-card{
  position:relative;
  background:var(--c-panel);
  border:1px solid var(--edge-soft);
  border-left:3px solid var(--c-cyan);
  border-radius:var(--radius);
  padding:18px 20px 20px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}

.page-contact .channel-card:hover,
.page-contact .channel-card:focus-within{
  border-left-color:var(--c-lime);
  border-color:var(--edge-mid);
  background:var(--contact-panel-hi);
  transform:translateY(-2px);
}

.page-contact .channel-label{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--c-cyan);
  border:1px solid rgba(0,229,255,.35);
  border-radius:2px;
  padding:3px 8px;
}

.page-contact .channel-value{
  font-family:var(--font-mono);
  font-weight:700;
  margin:12px 0 8px;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.25;
}

.page-contact .channel-value--mail{
  font-size:clamp(.95rem,4.4vw,1.24rem);
  color:var(--c-cyan);
}

.page-contact .channel-value--tel{
  font-size:clamp(1.65rem,8.4vw,2.5rem);
  letter-spacing:.01em;
  color:var(--c-lime);
}

.page-contact .channel-use{
  margin:0;
  font-size:14.5px;
  line-height:1.68;
  color:var(--c-steel);
}

/* ---------- 在线时段 ---------- */
.page-contact .contact-hours{
  margin:24px 0 0;
}

.page-contact .contact-hours img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:1px solid var(--edge-soft);
}

.page-contact .contact-hours figcaption{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--c-steel);
}

/* ---------- 反馈清单 ---------- */
.page-contact .contact-block--report{
  background:var(--glass);
  border:1px solid var(--edge-mid);
  border-radius:var(--radius);
  padding:24px var(--contact-pad) 26px;
}

.page-contact .checklist{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.page-contact .checklist li{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:12px 14px;
  border:1px dashed var(--edge-soft);
  border-radius:var(--radius);
  background:rgba(11,27,58,.5);
}

.page-contact .check-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:2px;
  border:1px solid var(--c-cyan);
  border-radius:2px;
}

.page-contact .check-box::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:9px;
  border-right:2px solid var(--c-lime);
  border-bottom:2px solid var(--c-lime);
  transform:rotate(42deg);
}

.page-contact .check-body{
  font-size:14.5px;
  line-height:1.66;
  color:var(--c-steel);
}

.page-contact .check-body strong{
  display:block;
  margin-bottom:2px;
  color:var(--c-snow);
  font-weight:600;
  font-size:15px;
}

.page-contact .report-foot{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--contact-hair);
  font-size:14px;
  line-height:1.72;
  color:var(--c-snow);
}

.page-contact .contact-report-fig{
  margin:20px 0 0;
}

.page-contact .contact-report-fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

/* ---------- 下半部分 ---------- */
.page-contact .contact-lower{
  display:grid;
  gap:22px;
  margin-top:36px;
}

.page-contact .info-card{
  border-radius:var(--radius);
  padding:26px var(--contact-pad) 28px;
}

.page-contact .info-card--coop{
  background:var(--c-panel);
  border:1px solid var(--edge-soft);
  border-top:3px solid var(--c-cyan);
}

.page-contact .info-card--addr{
  background:var(--glass);
  border:1px solid var(--edge-mid);
  border-top:3px solid var(--c-lime);
}

.page-contact .coop-mail{
  margin:16px 0 14px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(.95rem,4.4vw,1.2rem);
  color:var(--c-cyan);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.page-contact .coop-text{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.78;
  color:var(--c-snow);
  max-width:36em;
}

.page-contact .coop-text:last-child{
  margin-bottom:0;
}

.page-contact .addr-body{
  margin:16px 0 12px;
  font-style:normal;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.15rem,4.8vw,1.55rem);
  line-height:1.5;
  color:var(--c-snow);
}

.page-contact .addr-points{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}

.page-contact .addr-points li{
  position:relative;
  padding-left:16px;
  font-size:14px;
  line-height:1.66;
  color:var(--c-steel);
}

.page-contact .addr-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-cyan);
}

/* ---------- 归属行 ---------- */
.page-contact .contact-origin{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--contact-hair);
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:baseline;
  justify-content:space-between;
}

.page-contact .origin-line{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--c-steel);
}

.page-contact .origin-icp{
  font-family:var(--font-mono);
  color:var(--c-edge);
  letter-spacing:.02em;
}

.page-contact .contact-legal{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}

.page-contact .contact-legal a{
  font-size:13px;
  color:var(--c-steel);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}

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

/* ---------- 响应式 ---------- */
@media (min-width:720px){
  .page-contact .contact-lower{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }
}

@media (min-width:960px){
  .page-contact .contact-shell{
    padding-block:30px 78px;
  }
  .page-contact .contact-intro{
    padding-block:20px 46px;
  }
  .page-contact .contact-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:34px;
    align-items:start;
  }
  .page-contact .contact-block--report{
    padding:28px 30px 30px;
  }
  .page-contact .contact-lower{
    gap:26px;
    margin-top:46px;
  }
  .page-contact .channel-card{
    padding:20px 22px 22px;
  }
}

@media (min-width:1200px){
  .page-contact .contact-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-contact .channel-card,
  .page-contact .contact-legal a{
    transition:none;
  }
  .page-contact .channel-card:hover{
    transform:none;
  }
}