/* ==========================================================================
   VPNDM — contact.css
   联系页（zh-CN/service.html）专属样式：首屏排版 / 三条渠道卡 / 继续了解面板
   仅引用 :root 设计令牌，不新造颜色
   ========================================================================== */

/* ---------- 首屏 ---------- */
.contact-hero{
  padding-top:64px;
  padding-bottom:56px;
  text-align:center;
}
.contact-hero .wrap{position:relative;z-index:1}
.contact-hero .eyebrow{margin-bottom:18px}
.contact-hero h1{margin-top:4px}
.contact-hero .lede{
  max-width:680px;
  margin:18px auto 0;
  font-size:16px;
  line-height:1.8;
}
.contact-hero .fact-row{justify-content:center;margin-top:22px}
.contact-hero .decor-layer svg{width:100%;height:100%}

/* ---------- 三条渠道卡 ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.contact-grid > *{min-width:0}
.contact-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px 20px;
  box-shadow:var(--shadow-soft);
}
.contact-card.is-acc{
  border-color:var(--accent);
  box-shadow:var(--shadow-panel);
}
.contact-card.is-coral{
  border-color:var(--coral);
  box-shadow:0 18px 36px -14px var(--coral-glow),inset 0 1px 0 var(--hl);
}
.contact-card.is-ink{
  border-color:var(--ink-3);
  box-shadow:0 18px 36px -14px rgba(21,20,42,.16),inset 0 1px 0 var(--hl);
}
.contact-role{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--accent-dark);
}
.contact-card.is-coral .contact-role{color:var(--coral)}
.contact-card.is-ink .contact-role{color:var(--ink-3)}
.contact-card h3{margin-top:10px;font-size:18px}
.contact-text{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.contact-meta{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12.5px;
  color:var(--muted);
}
.contact-meta li{display:flex;align-items:flex-start;gap:9px}
.contact-meta b{
  flex-shrink:0;
  min-width:34px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  color:var(--ink);
  line-height:1.7;
}
.contact-meta span{min-width:0}
.contact-action{
  margin-top:auto;
  padding-top:20px;
  display:flex;
}
.contact-action .btn{
  flex:1 1 auto;
  flex-shrink:0;
  white-space:nowrap;
}

/* ---------- 继续了解面板 ---------- */
.next-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px 24px;
  box-shadow:var(--shadow-soft);
}
.next-copy{flex:1 1 340px;min-width:0}
.next-copy h2{font-size:clamp(19px,2.4vw,24px)}
.next-copy p{margin-top:8px;font-size:14px}
.next-links{display:flex;flex-wrap:wrap;gap:10px}
.next-links li{display:flex;min-width:0}
.next-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.next-links a:hover{
  border-color:var(--accent);
  background:var(--panel-3);
  color:var(--accent-dark);
}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}
@media (max-width:768px){
  .contact-hero{padding-top:48px;padding-bottom:44px}
  .contact-hero .lede{font-size:15px}
}
@media (max-width:640px){
  .contact-hero .fact-row{gap:8px 16px}
  .next-panel{padding:20px 18px}
  .next-links{width:100%}
  .next-links li{flex:1 1 46%}
  .next-links a{width:100%;justify-content:center}
}