/* ============================================================
   contact.css — 联系我们页面专属样式
   ------------------------------------------------------------
   引入方式（加在 head 内，位于 jianjie.css 之后）：
   <link rel="stylesheet" href="{pboot:sitetplpath}/fontawesome-free-6.4.0-web/css/contact.css">
   所有类名统一 ct- 前缀，避免与全站样式冲突。
   ============================================================ */

:root{
  --ct-primary:#3b82f6;
  --ct-primary-dark:#2563eb;
  --ct-secondary:#8b5cf6;
  --ct-accent:#f97316;
  --ct-accent-hover:#ea580c;
  --ct-ink:#0f172a;
  --ct-muted:#64748b;
  --ct-light:#94a3b8;
  --ct-card:#ffffff;
  --ct-bg:#f8fafc;
  --ct-border:#e2e8f0;
  --ct-grad:linear-gradient(135deg,var(--ct-primary),var(--ct-secondary));
  --ct-radius:14px;
  --ct-shadow:0 10px 25px -5px rgba(59,130,246,.10),0 8px 10px -6px rgba(59,130,246,.05);
  --ct-shadow-hover:0 20px 28px -8px rgba(59,130,246,.20),0 10px 12px -8px rgba(59,130,246,.08);
  --ct-transition:all .3s ease;
}

/* ---------- 区块间距统一控制 ----------
   站点全局 section{padding:80px 0} 会作用到本页所有 section，
   这里显式覆盖，保证各区块之间留白一致、互不粘连。 */
.ct-contact{background:var(--ct-bg);padding:64px 0;}
.ct-services{background:var(--ct-card);padding:72px 0;}
.ct-loc{background:var(--ct-bg);padding:72px 0;}
.ct-faq{background:var(--ct-card);padding:72px 0;}
.ct-cta{background:var(--ct-grad);color:#fff;text-align:center;padding:72px 0;}
/* 各区块标题区统一留白，避免标题紧贴上方内容 */
.ct-services .section-head,
.ct-loc .section-head,
.ct-faq .section-head{margin-bottom:48px;}

/* ---------- 联系方式卡片 ---------- */
.ct-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:56px;
}
.ct-card{
  background:var(--ct-card);
  border:1px solid var(--ct-border);
  border-radius:var(--ct-radius);
  padding:30px 24px;
  text-align:center;
  transition:var(--ct-transition);
  position:relative;
  overflow:hidden;
}
.ct-card:before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:4px;
  background:var(--ct-grad);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s ease;
}
.ct-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--ct-shadow-hover);
  border-color:transparent;
}
.ct-card:hover:before{transform:scaleX(1);}
.ct-card .ct-ico{
  width:62px;height:62px;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.10);
  color:var(--ct-primary);
  font-size:25px;
  border-radius:50%;
  transition:var(--ct-transition);
}
.ct-card:hover .ct-ico{
  background:var(--ct-grad);
  color:#fff;
  transform:rotate(-8deg);
}
.ct-card h3{font-size:16px;margin:0 0 8px;font-weight:700;color:var(--ct-ink);}
.ct-card p{margin:0;font-size:14px;line-height:1.75;color:var(--ct-muted);word-break:break-word;}
.ct-card a{color:var(--ct-primary);font-weight:600;transition:var(--ct-transition);}
.ct-card a:hover{color:var(--ct-primary-dark);}

/* ---------- 主体：表单 + 信息 ---------- */
.ct-main{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:28px;
  align-items:stretch;
}
.ct-main > .ct-box{
  display:flex;
  flex-direction:column;
  height:100%;
}
/* 表单区：操作区（条款+按钮）吸底，两栏底部对齐 */
.ct-form{
  display:flex;
  flex-direction:column;
  flex:1;
}
.ct-form .ct-group.full:last-of-type{margin-bottom:0;}
.ct-form .ct-agree{margin-top:auto;}
.ct-box{
  background:var(--ct-card);
  border:1px solid var(--ct-border);
  border-radius:var(--ct-radius);
  padding:34px;
  box-shadow:var(--ct-shadow);
}
.ct-box > h2{
  font-size:23px;
  margin:0 0 6px;
  color:var(--ct-ink);
  display:flex;
  align-items:center;
  gap:10px;
}
.ct-box > h2 i{color:var(--ct-primary);font-size:20px;}
.ct-sub{font-size:14px;color:var(--ct-muted);margin:0 0 26px;line-height:1.7;}

/* 表单 */
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ct-group{margin-bottom:18px;}
.ct-group.full{grid-column:1 / -1;}
.ct-label{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--ct-ink);
  margin-bottom:7px;
}
.ct-label .ct-req{color:#ef4444;margin-left:2px;}
.ct-input,.ct-select,.ct-textarea{
  width:100%;
  border:1px solid var(--ct-border);
  border-radius:10px;
  padding:12px 14px;
  font-size:14px;
  color:var(--ct-ink);
  background:#fff;
  outline:none;
  font-family:inherit;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.ct-select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  padding-right:38px;
  cursor:pointer;
}
.ct-input::placeholder,.ct-textarea::placeholder{color:#a8b3c4;}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{
  border-color:var(--ct-primary);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}
.ct-textarea{min-height:132px;resize:vertical;line-height:1.75;}
.ct-group.invalid .ct-input,
.ct-group.invalid .ct-select,
.ct-group.invalid .ct-textarea{
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.10);
}
.ct-err{
  display:none;
  font-size:12.5px;
  color:#ef4444;
  margin-top:6px;
}
.ct-group.invalid .ct-err{display:block;}

/* 验证码 */
.ct-captcha{display:flex;align-items:center;gap:12px;}
.ct-captcha img{
  height:44px;width:130px;
  border:1px solid var(--ct-border);
  border-radius:10px;
  cursor:pointer;
  object-fit:cover;
  flex:0 0 auto;
  transition:var(--ct-transition);
}
.ct-captcha img:hover{border-color:var(--ct-primary);}
.ct-captcha .ct-input{flex:1;min-width:0;}

/* 同意条款 */
.ct-agree{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  color:var(--ct-muted);
  line-height:1.65;
  margin:4px 0 22px;
  cursor:pointer;
}
.ct-agree input{
  width:16px;height:16px;
  margin:2px 0 0;
  accent-color:var(--ct-primary);
  flex:0 0 auto;
  cursor:pointer;
}
.ct-agree.invalid{color:#ef4444;}

/* 提交按钮 */
.ct-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--ct-grad);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:14px 40px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:var(--ct-transition);
  box-shadow:0 6px 16px -4px rgba(59,130,246,.4);
}
.ct-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -6px rgba(59,130,246,.5);
}
.ct-submit:active{transform:translateY(0);}
.ct-submit:disabled{opacity:.65;cursor:not-allowed;transform:none;}
.ct-submit i{font-size:14px;}

/* 提交结果提示 */
.ct-tip{
  display:none;
  align-items:center;
  gap:9px;
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  margin-bottom:20px;
  line-height:1.6;
}
.ct-tip.show{display:flex;}
.ct-tip.ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;}
.ct-tip.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.ct-tip i{font-size:16px;flex:0 0 auto;}

/* ---------- 右栏：联系信息 ---------- */
.ct-list{list-style:none;margin:0 0 22px;padding:0;}
.ct-list li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-bottom:1px dashed var(--ct-border);
  font-size:14px;
  color:var(--ct-ink);
  line-height:1.7;
}
.ct-list li:last-child{border-bottom:none;}
.ct-list .ct-li-ico{
  width:40px;height:40px;
  flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.10);
  color:var(--ct-primary);
  border-radius:10px;
  font-size:16px;
  transition:var(--ct-transition);
}
.ct-list li:hover .ct-li-ico{background:var(--ct-grad);color:#fff;}
.ct-list a{color:var(--ct-ink);transition:var(--ct-transition);}
.ct-list a:hover{color:var(--ct-primary);}

.ct-qr{text-align:center;padding:20px 0 4px;border-top:1px solid var(--ct-border);}
.ct-qr img{
  width:152px;height:152px;
  margin:0 auto;
  border-radius:12px;
  border:1px solid var(--ct-border);
  display:block;
}
.ct-qr p{font-size:13px;color:var(--ct-muted);margin:12px 0 0;}

.ct-promise{
  background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(139,92,246,.08));
  border:1px solid rgba(59,130,246,.18);
  border-radius:12px;
  padding:18px;
  margin-top:22px;
  font-size:13.5px;
  color:var(--ct-muted);
  line-height:1.85;
}
.ct-promise strong{color:var(--ct-primary-dark);}
.ct-promise .ct-p-row{display:flex;gap:8px;align-items:flex-start;}
.ct-promise .ct-p-row i{color:var(--ct-primary);margin-top:5px;flex:0 0 auto;}

/* ---------- 服务项目快捷入口 ---------- */
.ct-serv-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.ct-serv{
  display:block;
  background:var(--ct-bg);
  border:1px solid var(--ct-border);
  border-radius:var(--ct-radius);
  padding:24px 20px;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition:var(--ct-transition);
  position:relative;
  overflow:hidden;
}
.ct-serv:before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:var(--ct-grad);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .35s ease;
}
.ct-serv:hover{
  transform:translateY(-5px);
  box-shadow:var(--ct-shadow-hover);
  border-color:transparent;
  background:#fff;
}
.ct-serv:hover:before{transform:scaleY(1);}
.ct-serv .ct-s-ico{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ct-grad);
  color:#fff;
  border-radius:12px;
  font-size:21px;
  margin-bottom:15px;
  transition:var(--ct-transition);
}
.ct-serv:hover .ct-s-ico{transform:rotate(-8deg) scale(1.05);}
.ct-serv h3{font-size:16.5px;margin:0 0 7px;color:var(--ct-ink);}
.ct-serv p{margin:0;font-size:13.5px;color:var(--ct-muted);line-height:1.7;}
.ct-serv .ct-s-go{
  display:inline-block;
  margin-top:13px;
  font-size:13px;
  font-weight:600;
  color:var(--ct-primary);
}
.ct-serv .ct-s-go i{transition:transform .3s ease;display:inline-block;}
.ct-serv:hover .ct-s-go i{transform:translateX(4px);}

/* ---------- FAQ ---------- */
.ct-faq-list{max-width:880px;margin:0 auto;}
.ct-faq-item{
  background:var(--ct-card);
  border:1px solid var(--ct-border);
  border-radius:12px;
  margin-bottom:14px;
  overflow:hidden;
  transition:var(--ct-transition);
}
.ct-faq-item.active{border-color:var(--ct-primary);box-shadow:var(--ct-shadow);}
.ct-faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:19px 24px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  color:var(--ct-ink);
  text-align:left;
  transition:var(--ct-transition);
}
.ct-faq-q:hover{color:var(--ct-primary);}
.ct-faq-q .ct-faq-ico{
  flex:0 0 28px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.10);
  color:var(--ct-primary);
  border-radius:50%;
  font-size:12px;
  transition:var(--ct-transition);
}
.ct-faq-item.active .ct-faq-q .ct-faq-ico{
  background:var(--ct-grad);
  color:#fff;
  transform:rotate(180deg);
}
.ct-faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.ct-faq-a-inner{
  padding:0 24px 20px;
  font-size:14.5px;
  color:var(--ct-muted);
  line-height:1.85;
  border-top:1px solid var(--ct-border);
  padding-top:16px;
  margin:0 24px;
  padding-left:0;
  padding-right:0;
}

/* ---------- 位置 / 地图 ---------- */
.ct-loc-grid{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:30px;
  align-items:stretch;
}
.ct-loc-info h3{
  font-size:21px;
  margin:0 0 14px;
  color:var(--ct-ink);
  display:flex;align-items:center;gap:10px;
}
.ct-loc-info h3 i{color:var(--ct-primary);}
.ct-loc-info p{margin:0 0 20px;font-size:14.5px;color:var(--ct-muted);line-height:1.8;}
.ct-nav-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ct-accent);
  color:#fff;
  padding:12px 26px;
  border-radius:10px;
  font-weight:600;
  font-size:14.5px;
  margin-bottom:24px;
  transition:var(--ct-transition);
  box-shadow:0 6px 16px -4px rgba(249,115,22,.4);
}
.ct-nav-btn:hover{
  background:var(--ct-accent-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 22px -6px rgba(249,115,22,.5);
}
.ct-transport{list-style:none;margin:0;padding:0;border-top:1px solid var(--ct-border);}
.ct-transport li{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px dashed var(--ct-border);
  font-size:14px;
  color:var(--ct-muted);
  line-height:1.7;
}
.ct-transport li:last-child{border-bottom:none;padding-bottom:0;}
.ct-transport i{
  color:var(--ct-primary);
  margin-top:4px;
  flex:0 0 auto;
  width:20px;
}
.ct-transport strong{color:var(--ct-ink);}

.ct-map{
  position:relative;
  width:100%;
  min-height:400px;
  border-radius:var(--ct-radius);
  overflow:hidden;
  border:1px solid var(--ct-border);
  background:#eef2f7;
}
.ct-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ct-map .ct-map-tag{
  position:absolute;
  left:16px;top:16px;
  z-index:3;
  background:rgba(255,255,255,.96);
  border-radius:12px;
  padding:12px 16px;
  box-shadow:0 4px 16px rgba(15,23,42,.12);
  pointer-events:none;
}
.ct-map .ct-map-tag strong{
  display:block;
  font-size:14.5px;
  color:var(--ct-ink);
  margin-bottom:3px;
}
.ct-map .ct-map-tag span{font-size:12.5px;color:var(--ct-muted);}
/* 静态地图图片缺失时的降级占位（JS 控制显示） */
.ct-map-ph{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:30px;
  text-align:center;
  background:
    linear-gradient(rgba(59,130,246,.05) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(59,130,246,.05) 1px,transparent 1px) 0 0/34px 100%,
    #f1f5f9;
}
.ct-map-ph.show{display:flex;}
.ct-map-ph .ct-ph-ico{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ct-grad);
  color:#fff;
  border-radius:50%;
  font-size:27px;
  box-shadow:0 8px 20px -6px rgba(59,130,246,.5);
}
.ct-map-ph p{margin:0;font-size:14.5px;color:var(--ct-muted);line-height:1.8;max-width:340px;}
.ct-map-ph p strong{color:var(--ct-ink);font-size:16px;display:block;margin-bottom:6px;}

/* ---------- CTA ---------- */
.ct-cta h2{color:#fff;margin:0 0 14px;font-size:clamp(1.6rem,3.6vw,2.3rem);}
.ct-cta p{color:rgba(255,255,255,.92);margin:0 auto 28px;max-width:620px;line-height:1.8;font-size:16px;}
.ct-cta-box{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.ct-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#fff;
  color:var(--ct-primary-dark);
  padding:14px 34px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  transition:var(--ct-transition);
  box-shadow:0 8px 20px -6px rgba(15,23,42,.3);
}
.ct-cta-btn:hover{transform:translateY(-3px);box-shadow:0 14px 26px -6px rgba(15,23,42,.35);}
.ct-cta-btn.ghost{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.6);
  box-shadow:none;
}
.ct-cta-btn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .ct-cards{grid-template-columns:repeat(2,1fr);gap:18px;}
  .ct-main{grid-template-columns:1fr;}
  .ct-loc-grid{grid-template-columns:1fr;}
  .ct-map{min-height:340px;}
  .ct-serv-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .ct-serv-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
}
@media (max-width:600px){
  .ct-cards{grid-template-columns:1fr;}
  .ct-row{grid-template-columns:1fr;}
  .ct-box{padding:24px 20px;}
  .ct-box > h2{font-size:20px;}
  .ct-sub{font-size:13.5px;}
  .ct-submit{width:100%;}
  .ct-captcha img{width:112px;height:42px;}
  .ct-faq-q{font-size:15px;padding:16px 18px;}
  .ct-faq-a-inner{margin:0 18px;padding-top:14px;}
  .ct-nav-btn{width:100%;justify-content:center;}
  .ct-map{min-height:260px;}
  .ct-cta-box{flex-direction:column;align-items:center;}
  .ct-cta-btn{width:100%;max-width:320px;justify-content:center;}
}