/* ============================================================
   message.css · 在线留言页
   Hero 骨架：H2 居中大标题
   母题落位：hero 横竖线交叉；表单区横线切割 + 左表单右说明象限错位
   ============================================================ */

/* ---------- 1. Hero（H2 居中） ---------- */
.msg-hero{background:var(--cream);padding:72px 0 90px}
.msg-hero-vline{top:0;bottom:0;left:18%;opacity:.28}
.msg-hero-xline{top:34%;opacity:.4}
.msg-hero-blob{width:180px;height:180px;background:var(--blue);top:-60px;right:8%}
.msg-hero-in{text-align:center}
.msg-hero-in .badge{margin-bottom:20px}
.msg-hero h1{max-width:880px;margin:0 auto 18px;font-weight:800}
.msg-hero h1 em{font-style:normal;color:var(--blue-ink)}
.msg-hero-sub{max-width:720px;margin:0 auto 26px;color:var(--muted);font-size:17px}
.msg-hero-tip{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:2px solid var(--green);border-radius:999px;
  padding:10px 22px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm);
}
.msg-hero-tip .ic{font-size:19px;color:var(--green-deep)}

/* ---------- 2. 三步流程（虚线串联横排） ---------- */
.msg-flow-sec{position:relative;padding:46px 0 30px}
.msg-flow-dots{top:52%;left:10%;right:10%;opacity:.35}
.msg-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:2}
.msg-flow-step{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px 26px;position:relative;box-shadow:var(--shadow-sm);
}
.msg-flow-step:nth-child(2){margin-top:34px;background:var(--cream)}
.msg-flow-step:nth-child(3){margin-top:0}
.msg-flow-num{
  position:absolute;top:-20px;left:24px;width:42px;height:42px;border-radius:50%;
  background:var(--yellow);color:var(--ink);font-weight:800;font-size:18px;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
  box-shadow:0 4px 10px rgba(39,66,79,.18);
}
.msg-flow-step:nth-child(2) .msg-flow-num{background:var(--blue)}
.msg-flow-step:nth-child(3) .msg-flow-num{background:var(--green)}
.msg-flow-step h3{margin:8px 0 8px}
.msg-flow-step p{color:var(--muted);font-size:14.5px}

/* ---------- 3. 表单大卡：左右象限错位 ---------- */
.msg-form-sec{position:relative}
.msg-form-xline{top:120px;opacity:.45}
.msg-form-wrap{
  display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:start;
}
.msg-form{
  background:#fff;border:2px solid var(--blue);border-radius:var(--r-lg);
  padding:36px 34px;box-shadow:var(--shadow);position:relative;
}
.msg-form::before{
  content:"";position:absolute;left:-2px;top:26px;bottom:26px;width:6px;border-radius:6px;
  background:linear-gradient(180deg,var(--yellow),var(--green));
}
.msg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.msg-submit{width:100%;margin-top:6px}
.msg-privacy-note{margin-top:14px;font-size:13px;color:var(--muted)}
.msg-privacy-note a{text-decoration:underline}

.msg-aside{position:relative}
.msg-aside-img{position:relative;margin-bottom:20px}
.msg-aside-sticker{
  position:absolute;right:-10px;bottom:-14px;background:var(--yellow);
  padding:8px 16px;border-radius:999px;font-weight:800;font-size:13px;
  border:2px solid #fff;box-shadow:var(--shadow-sm);
}
.msg-aside h3{margin-bottom:12px}
.msg-tips li{
  padding:11px 0 11px 30px;position:relative;font-size:14.5px;color:var(--ink);
  border-bottom:1px dashed var(--line);
}
.msg-tips li::before{
  content:"";position:absolute;left:4px;top:17px;width:10px;height:10px;border-radius:3px;
  background:var(--blue);transform:rotate(45deg);
}
.msg-tips b{color:var(--blue-ink)}
.msg-aside-time{
  display:flex;gap:12px;align-items:center;margin-top:18px;
  background:var(--bg);border-radius:var(--r-md);padding:14px 16px;
}
.msg-aside-time .ic{font-size:24px;color:var(--blue-ink)}
.msg-aside-time b{display:block;font-size:14.5px}
.msg-aside-time span{font-size:13px;color:var(--muted)}

/* ---------- 4. 联系信息三卡 ---------- */
.msg-contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.msg-contact-card{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.msg-contact-card:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:var(--shadow)}
.msg-contact-down{margin-top:30px;background:var(--cream)}
.msg-contact-ic{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.msg-contact-ic .ic{font-size:28px}
.msg-ic-blue{background:var(--blue)}
.msg-ic-green{background:var(--green)}
.msg-ic-yellow{background:var(--yellow)}
.msg-contact-card h3{font-size:16px}
.msg-contact-val{font-size:22px;font-weight:800;color:var(--blue-ink);margin:6px 0 8px}
.msg-contact-more{font-size:13px;color:var(--muted)}

/* ---------- 5. FAQ（纵向手风琴） ---------- */
.msg-faq-sec{position:relative;background:var(--cream)}
.msg-faq-vline{top:0;bottom:0;right:12%;opacity:.25}
.msg-faq-in{position:relative;z-index:2}
.msg-faq-list{max-width:860px}
.msg-q{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  margin-bottom:14px;overflow:hidden;
}
.msg-q summary{
  padding:16px 20px;font-weight:700;cursor:pointer;list-style:none;position:relative;
}
.msg-q summary::-webkit-details-marker{display:none}
.msg-q summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:20px;color:var(--blue-deep);font-weight:400;transition:transform .25s ease;
}
.msg-q[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.msg-q p{padding:0 20px 18px;color:var(--muted);font-size:14.5px}
.msg-q p a{text-decoration:underline}

/* ---------- 6. CTA 通栏 ---------- */
.msg-cta{
  background:linear-gradient(120deg,var(--blue-ink) 0%,#3A7DA6 100%);
  border-radius:var(--r-lg);padding:44px 46px;color:#fff;
  display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;
  position:relative;overflow:hidden;
}
.msg-cta::before{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:var(--yellow);opacity:.25;top:-90px;right:-60px;
}
.msg-cta-text h2{color:#fff;margin-bottom:10px}
.msg-cta-text em{font-style:normal;color:var(--yellow)}
.msg-cta-text p{color:#D6E9F4;font-size:15px}
.msg-cta-text a{color:var(--yellow);text-decoration:underline}
.msg-cta-side{display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
.msg-cta-tel{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.msg-cta-tel li{
  background:rgba(255,255,255,.12);border-radius:var(--r-sm);padding:10px 8px;
  text-align:center;font-size:12.5px;
}
.msg-cta-tel span{display:block;color:#B6D6E6;font-size:11.5px;margin-bottom:2px}
.msg-cta-tel a{color:#fff;font-weight:700}

/* ---------- 移动端 ---------- */
@media (max-width:960px){
  .msg-flow{grid-template-columns:1fr;gap:18px}
  .msg-flow-step:nth-child(2){margin-top:0}
  .msg-form-wrap{grid-template-columns:1fr}
  .msg-contact-cards{grid-template-columns:1fr;gap:18px}
  .msg-contact-down{margin-top:0}
  .msg-cta{grid-template-columns:1fr;padding:32px 26px}
  .msg-cta-tel{grid-template-columns:1fr;gap:8px}
}
@media (max-width:560px){
  .msg-form-grid{grid-template-columns:1fr}
  .msg-form{padding:28px 20px}
}

/* ===== 补充模块：留言后流程（十字分割装饰） ===== */
.xt-sec{position:relative;overflow:hidden;}
.xt-xline{position:absolute;top:42px;left:0;right:0;height:2px;background:var(--blue);opacity:.22;}
.xt-vline{position:absolute;top:70px;bottom:70px;right:36px;width:2px;background:var(--blue);opacity:.22;}
.xt-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
.xt-card{background:#fff;border:1px solid #e4edf4;border-radius:12px;padding:26px 22px;}
.xt-card h3{font-size:17px;margin-bottom:10px;}
.xt-card p{color:#60748a;font-size:14px;line-height:1.85;}
@media (max-width:992px){.xt-cols{grid-template-columns:1fr;}}