/* =================================================
   Contact Page · Base
================================================= */
.contact-page{padding:24px 0 70px}

/* =================================================
   ① 页面标题区
================================================= */
.contact-h1{
  max-width:1360px;
  margin:10px auto 28px;
  padding:0 20px;
}
.contact-h1 h1{
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:1.3;
  color:#111827;
  letter-spacing:.3px;
}
.contact-h1 h1::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:10px;
  background:var(--brand);
  border-radius:2px;
}

/* =================================================
   ② 联系信息区 · 布局（固定版心 + 黄金比例）
================================================= */
.contact-main{
  display:flex;
  align-items:stretch;
  gap:24px;
  max-width:1360px;
  margin:18px auto 0;
  padding:0 20px 20px;
}
.contact-left{flex:0 0 38.2%;max-width:38.2%;min-width:0}
.contact-right{flex:0 0 61.8%;max-width:61.8%;min-width:0}

/* 通用卡片 */
.contact-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(17,24,39,.06);
}

/* ---------------- 左侧：联系信息卡 ---------------- */
.contact-info-card{
  position:relative;
  height:100%;
  padding:22px 22px 18px;
  overflow:hidden;
}
.contact-info-card::after{
  content:"";
  position:absolute;
  right:-80px;top:-80px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(46,49,146,.18) 0%,rgba(46,49,146,0) 62%);
  pointer-events:none;
}

/* 公司信息 */
.contact-company{margin-bottom:18px}
.company-name{
  font-size:20px;
  font-weight:700;
  color:#111827;
}
.company-desc{
  margin-top:8px;
  font-size:14px;
  line-height:1.6;
  color:rgba(17,24,39,.62);
}

/* 联系信息列表 */
.contact-info-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contact-info-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:4px 12px;
  border-radius:12px;
  background:rgba(17,24,39,.02);
  border:1px solid rgba(17,24,39,.06);
}
.contact-info-list li:hover{
  background:rgba(46,49,146,.04);
  border-color:rgba(46,49,146,.26);
}
.contact-info-list .label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:108px;
  font-size:14px;
  color:rgba(17,24,39,.72);
  white-space:nowrap;
}
.contact-info-list .value{
  flex:1;
  text-align:right;
  font-size:14px;
  color:#111827;
}
.contact-info-list .value a{color:inherit;text-decoration:none}
.contact-info-list .value a:hover{color:var(--brand)}

/* SVG 图标 */
/* 图标容器 */
.ci{
  width:26px;
  height:26px;
  flex:0 0 px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* 给一个非常轻的底，增强边界感 */
  background:rgba(46,49,146,.06);
}

/* SVG mask 图标本体 */
.ci::before{
  content:"";
  width:16px;              /* 原来 16px → 18px */
  height:16px;
  background:var(--brand);

  display:block;

  /* 强制像素对齐 + 抗锯齿 */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:18px 18px;

  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:18px 18px;

  /* 关键：增加“锐度感” */
  filter:drop-shadow(0 0 0 rgba(0,0,0,0.001));
}
/* hover 或正常态都生效 */
.contact-info-list li .ci{
  box-shadow:
    inset 0 0 0 1px rgba(46,49,146,.18);
}

/* 具体 icon（略，沿用你已有的 ci-hotline / phone / mail / addr） */

/* 1) 热线：耳机 */
.ci.ci-hotline::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7v-.5A5 5 0 0 1 12 6a5 5 0 0 1 5 4.5V11h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7v-.5A5 5 0 0 1 12 6a5 5 0 0 1 5 4.5V11h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8z'/%3E%3C/svg%3E");
}

/* 2) 电话：听筒 */
.ci.ci-phone::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 2.9 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1 .4 2.1.6 3.2.6.7 0 1.2.5 1.2 1.2V20c0 .7-.5 1.2-1.2 1.2C10.7 21.2 2.8 13.3 2.8 3.2 2.8 2.5 3.3 2 4 2h3.2c.7 0 1.2.5 1.2 1.2 0 1.1.2 2.2.6 3.2.1.4 0 .9-.2 1.2L6.6 10.8z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 2.9 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1 .4 2.1.6 3.2.6.7 0 1.2.5 1.2 1.2V20c0 .7-.5 1.2-1.2 1.2C10.7 21.2 2.8 13.3 2.8 3.2 2.8 2.5 3.3 2 4 2h3.2c.7 0 1.2.5 1.2 1.2 0 1.1.2 2.2.6 3.2.1.4 0 .9-.2 1.2L6.6 10.8z'/%3E%3C/svg%3E");
}

/* 3) 邮箱：信封 */
.ci.ci-mail::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm0 2 8 5 8-5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm0 2 8 5 8-5'/%3E%3C/svg%3E");
}

/* 4) 地址：定位 */
.ci.ci-addr::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-5.1 7-12a7 7 0 1 0-14 0c0 6.9 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-5.1 7-12a7 7 0 1 0-14 0c0 6.9 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* ===== 兜底：如果浏览器不支持 mask，就用 SVG 背景图（不会再是方块） ===== */
@supports not (-webkit-mask-image: url("")){
  .ci::before{
    background:transparent;
    -webkit-mask:none;
    mask:none;
    background-repeat:no-repeat;
    background-position:center;
    background-size:18px 18px;
  }

  .ci.ci-hotline::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232e3192' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7v-.5A5 5 0 0 1 12 6a5 5 0 0 1 5 4.5V11h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8z'/%3E%3C/svg%3E")}
  .ci.ci-phone::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232e3192' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 2.9 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1 .4 2.1.6 3.2.6.7 0 1.2.5 1.2 1.2V20c0 .7-.5 1.2-1.2 1.2C10.7 21.2 2.8 13.3 2.8 3.2 2.8 2.5 3.3 2 4 2h3.2c.7 0 1.2.5 1.2 1.2 0 1.1.2 2.2.6 3.2.1.4 0 .9-.2 1.2L6.6 10.8z'/%3E%3C/svg%3E")}
  .ci.ci-mail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232e3192' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm0 2 8 5 8-5'/%3E%3C/svg%3E")}
  .ci.ci-addr::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232e3192' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-5.1 7-12a7 7 0 1 0-14 0c0 6.9 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
}


/* 操作按钮 */
.contact-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.contact-actions .btn{
  height:38px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:14px;
  text-decoration:none;
}
.contact-actions .btn-primary{
  background:var(--brand);
  color:#fff;
}
.contact-actions .btn-ghost{
  background:#fff;
  color:rgba(17,24,39,.78);
  border:1px solid rgba(17,24,39,.14);
}
.contact-time{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(17,24,39,.14);
  font-size:13px;
  color:rgba(17,24,39,.55);
}

/* ---------------- 右侧：快速服务 + 二维码 ---------------- */
.quick-service-card{height:100%;padding:18px}
.quick-title{
  font-size:16px;
  font-weight:700;
  color:#111827;
  position:relative;
}
.quick-title::before{
  content:"";
  position:absolute;
  left:-12px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:14px;
  background:var(--brand);
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}
.quick-item{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(17,24,39,.02);
}
.quick-item:hover{background:rgba(46,49,146,.04)}
.quick-item-title{font-size:14px;font-weight:700}
.quick-item-desc{margin-top:6px;font-size:13px;color:rgba(17,24,39,.58)}

/* ===== QR：虚线分割 + 整体下移（覆盖） ===== */

/* 二维码模块整体往下压 */
.qr-zone-card{
  margin-top:45px;                 /* 比之前再下移一点 */
  padding-top:18px;
  border-top:1px dashed rgba(17,24,39,.18); /* 虚线分割，更轻 */
}

/* 网格不变 */
.qr-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
}

/* 保持清晰，不做任何“变白”处理 */
.qr-box{
  padding:0;
  text-align:center;
  border:none;
  background:transparent;
}
.qr-box img{
  width:100%;
  max-width:120px;
  height:auto;
  display:block;
  margin:0 auto;
  filter:none;
  opacity:1;
}

/* 不要解释词 */
/*.qr-label{display:none}*/
.qr-label{margin-top:6px;font-size:12px;line-height:1.4;
color:rgba(17,24,39,0.58);letter-spacing:.2px;text-align:center;user-select:none}

/* 轻微 hover，不影响识别 */
.qr-box:hover img{transform:scale(1.02)}

/* 移动端稍收 */
@media (max-width:576px){
  .qr-box img{max-width:96px}
}

/* ===============================
   Contact · Mobile Responsive
=============================== */
@media (max-width: 768px){

  /* 整体容器 */
  .contact-page{
    padding:16px 0 40px;
  }

  /* 左右改为上下 */
  .contact-main{
    flex-direction:column;
    gap:16px;
    padding:0 14px;           /* 移动端安全边距 */
  }

  .contact-left,
  .contact-right{
    flex:1 1 auto;
    max-width:100%;
  }

  /* 左侧联系卡：更紧凑 */
  .contact-info-card{
    padding:16px;
    border-radius:14px;
  }

  .company-name{
    font-size:18px;
  }
  .company-desc{
    font-size:13px;
  }

  /* 信息列表：左右改上下，方便阅读 */
  .contact-info-list li{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:10px 12px;
  }

  .contact-info-list .label{
    min-width:auto;
    font-size:13px;
  }

  .contact-info-list .value{
    width:100%;
    text-align:left;
    font-size:14px;
    word-break:break-all;
  }

  /* 操作按钮：一行一个，更好点 */
  .contact-actions{
    gap:10px;
  }
  .contact-actions .btn{
    width:100%;
    height:40px;
    font-size:15px;
  }

  /* 工作时间 */
  .contact-time{
    font-size:12px;
  }

  /* 右侧快速服务 */
  .quick-service-card{
    padding:16px;
    border-radius:14px;
  }

  .quick-title{
    font-size:15px;
  }

  /* 快速服务改为单列 */
  .quick-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .quick-item{
    padding:12px;
  }

  /* 二维码区：2 列更合理 */
  .qr-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    margin-top:14px;
  }

  .qr-box{
    padding:8px;
    border-radius:12px;
  }

  .qr-box img{
    border-radius:10px;
  }
}

/* =================================================
   留言区 · pd-message（产品页同款 + 宽度对齐联系区）
================================================= */


.pd-message{margin-top:60px}
.pd-message>.container{max-width:1360px;padding:0 20px}

/* 标题（同款） */
.pd-section-head{text-align:center;margin-bottom:35px}
.pd-section-title{
  margin:0;
  display:inline-block;
  font-size:18px;
  font-weight:700;
  color:#111827;
  position:relative;
}
.pd-section-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:var(--brand);
  border-radius:2px;
}

/* 表单：取消 860 限宽，跟联系区同宽 */
.pd-form{max-width:none;margin:0}

/* 栅格：更像产品页信息模块的密度 */
.pd-form-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px;
}
.pd-field{display:flex;flex-direction:column;gap:8px}
.pd-field-wide{grid-column:span 2}
.pd-field label{font-size:14px;color:#374151}

/* 输入控件：产品页同款（圆角 + 浅边框 + 轻阴影） */
.pd-field input,
.pd-field textarea,
.pd-verify-inline input{
  height:40px;
  padding:0 14px;
  font-size:14px;
  color:#111827;
  background:#fff;
  border:1px solid rgba(17,24,39,.14);
  border-radius:12px;
  outline:none;
  box-shadow:0 6px 18px rgba(17,24,39,.04);
}
.pd-field textarea{
  height:auto;
  padding:12px 14px;
  resize:vertical;
  min-height:160px;
}
.pd-field input::placeholder,
.pd-field textarea::placeholder,
.pd-verify-inline input::placeholder{color:rgba(17,24,39,.45)}

/* focus：品牌色更一致 */
.pd-field input:focus,
.pd-field textarea:focus,
.pd-verify-inline input:focus{
  border-color:rgba(46,49,146,.55);
  box-shadow:0 8px 22px rgba(46,49,146,.10);
}

/* 操作区：同款一行节奏 */
.pd-form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
}

/* 验证码：统一高度与圆角 */
.pd-verify-inline{display:flex;align-items:center;gap:10px}
.pd-verify-inline input{width:110px}
.pd-verify-inline img{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  cursor:pointer;
  display:block;
}

/* 提交按钮：同款按钮手感 */
.pd-btn-primary{
  height:40px;
  padding:0 22px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  border:none;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 10px 26px rgba(46,49,146,.22);
}
.pd-btn-primary:hover{filter:brightness(1.04)}

/* 电话提示 */
.pd-form-tip{
  font-size:14px;
  color:rgba(17,24,39,.58);
  text-decoration:none;
  white-space:nowrap;
}
.pd-form-tip:hover{color:var(--accent)}

/* 响应式 */
@media (max-width:768px){
  .pd-form-grid{grid-template-columns:1fr}
  .pd-field-wide{grid-column:span 1}
}

/* 表单内提示 */
.pd-form-msg{flex:1 1 100%;margin-top:10px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.6;display:none}
.pd-form-msg.is-show{display:block}
.pd-form-msg.is-ok{background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.25);color:rgba(6,95,70,.95)}
.pd-form-msg.is-err{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.25);color:rgba(153,27,27,.95)}

/* 无障碍隐藏蜜罐 */
.pd-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}
.is-invalid{border-color:rgba(239,68,68,.65)!important;box-shadow:0 8px 22px rgba(239,68,68,.10)!important}