/* =============================================
   contact.css - 联系我们页面专属样式（建站行业科技蓝主题）
   ============================================= */

/* ===== 主题变量覆盖 ===== */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #60a5fa;
  --accent: #2563eb;
  --bg-gray: #f5f7fb;
  --bg-alt: #eef2f8;
  --title-color: #0f172a;
  --body-color: #64748b;
  --border-light: #e2e8f0;
}
.container, .baichong-container { max-width: 1600px; }

/* ===== 粒子动画 ===== */
@keyframes contactFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: .35; }
  50% { transform: translateY(-26px) scale(1.3); opacity: .7; }
}

/* ===== Hero ===== */
.contact-hero {
  position: relative; padding: 170px 0 100px; text-align: center; color: #fff; overflow: hidden;
  background-color: #0f1724;
  background-image: linear-gradient(135deg, #0f1724 0%, #1e3a5f 50%, #2563eb 100%);
  background-size: cover; background-position: center;
}
.contact-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(9,19,42,.78) 0%, rgba(20,44,84,.6) 100%);
}
.contact-hero-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.contact-hero-particles span {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.14); animation: contactFloat 8s ease-in-out infinite;
}
.contact-hero-particles span:nth-child(1) { top: 18%; left: 12%; width: 8px; height: 8px; }
.contact-hero-particles span:nth-child(2) { top: 32%; right: 14%; width: 5px; height: 5px; animation-delay: 1.4s; background: rgba(96,165,250,.3); }
.contact-hero-particles span:nth-child(3) { top: 56%; left: 22%; width: 10px; height: 10px; animation-delay: 2.6s; }
.contact-hero-particles span:nth-child(4) { top: 72%; right: 26%; width: 6px; height: 6px; animation-delay: 3.8s; background: rgba(96,165,250,.25); }
.contact-hero-particles span:nth-child(5) { top: 42%; left: 48%; width: 4px; height: 4px; animation-delay: 5s; }
.contact-hero .container { position: relative; z-index: 3; }
.contact-hero-badge {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: 4px;
  color: #93c5fd; background: rgba(59,130,246,.16); border: 1px solid rgba(59,130,246,.3);
  padding: 6px 20px; border-radius: 50px; margin-bottom: 22px;
}
.contact-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1.25; margin: 0 0 16px; }
.contact-hero h1 span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.contact-hero p { font-size: 1.05rem; color: rgba(255,255,255,.75); line-height: 1.8; margin: 0 auto; max-width: 620px; }
.contact-hero .hero-actions { margin-top: 28px; }

/* ===== Hero 按钮（contact 模板专用类） ===== */
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 34px; font-size: 1rem; font-weight: 600;
  border-radius: 10px; text-decoration: none; transition: all .3s ease;
}
.cta-btn.primary { background: #fff; color: #151e2d; }
.cta-btn.primary:hover { background: #f1f5f9; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.cta-btn.outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.cta-btn.outline:hover { background: #fff; color: #151e2d; border-color: #fff; transform: translateY(-2px); }

/* ===== 主体内容 ===== */
.contact-main { padding: 90px 0 70px; background: var(--bg-gray); }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.contact-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: 16px;
  padding: 32px 28px; transition: all .35s ease;
}
.contact-card:hover {
  transform: translateY(-5px); box-shadow: 0 14px 36px rgba(15,23,42,.08);
  border-color: rgba(37,99,235,.28);
}
.contact-card-icon {
  width: 52px; height: 52px; margin: 0 0 18px; border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.contact-card-icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: .95rem; font-weight: 700; color: #334155; margin: 0 0 12px; letter-spacing: .5px; }
.contact-card-value {
  display: block; font-size: 1.1rem; font-weight: 800; color: var(--primary);
  text-decoration: none; margin-bottom: 8px; word-break: break-all;
}
.contact-card-value:hover { color: var(--primary-dark); }
.contact-card-value--text { color: var(--title-color); font-weight: 700; }
.contact-card-tip { font-size: .85rem; color: var(--body-color); margin: 0; }
.contact-wechat-row { display: flex; align-items: center; gap: 20px; }
.contact-wechat-qr {
  width: 120px; height: 120px; flex-shrink: 0; border-radius: 14px; object-fit: cover;
  box-shadow: 0 4px 14px rgba(15,23,42,.1);
}
.contact-wechat-id { font-size: .92rem; color: #475569; line-height: 1.6; }
.contact-wechat-id strong { color: var(--title-color); }

/* ===== 底部联系区域 ===== */
.contact-bottom { max-width: 560px; margin: 56px auto 0; text-align: center; }
.contact-bottom-divider { position: relative; margin-bottom: 30px; }
.contact-bottom-divider::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: var(--border-light);
}
.contact-bottom-divider span {
  position: relative; z-index: 1; background: var(--bg-gray);
  padding: 0 18px; font-size: .88rem; color: #94a3b8;
}
.contact-bottom-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.contact-bottom-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; font-size: .92rem; font-weight: 600;
  border-radius: 12px; text-decoration: none; transition: all .3s ease;
}
.contact-bottom-btn svg { width: 18px; height: 18px; }
.contact-bottom-btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
  box-shadow: 0 8px 22px rgba(37,99,235,.28);
}
.contact-bottom-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,99,235,.4); }
.contact-bottom-btn--secondary { background: #fff; color: #475569; border: 1px solid var(--border-light); }
.contact-bottom-btn--secondary:hover {
  color: var(--primary); border-color: rgba(37,99,235,.35);
  background: #eff6ff; transform: translateY(-2px);
}

/* ===== 响应式 ===== */
@media(max-width:1024px) {
  .contact-hero { padding: 150px 0 80px; }
  .contact-main { padding: 70px 0 60px; }
}
@media(max-width:768px) {
  .contact-hero { padding: 140px 0 70px; }
  .contact-main { padding: 56px 0 50px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-bottom { max-width: 100%; }
}
@media(max-width:480px) {
  .contact-bottom-btn { width: 100%; justify-content: center; }
  .contact-wechat-row { gap: 14px; }
  .contact-wechat-qr { width: 100px; height: 100px; }
}