/* ============================================================
   zaixian-kefu.css —— 在线客服咨询（L8 圆润错位）
   大圆角容器、漂浮圆点弧线、图文上下错位叠放
   ============================================================ */

/* ---------- Hero：圆角大图 + 角标 ---------- */
.hero8{
  position:relative; padding:calc(var(--header-h) + 50px) 0 80px; overflow:hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(176,141,102,.16), transparent 34%),
    var(--cream-50);
}
.hero8__wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:center;
}
.hero8__pic{ position:relative; }
.hero8__pic img{
  border-radius:var(--radius-l); box-shadow:var(--shadow-lg); transform:rotate(1.2deg);
}
.hero8__badge{
  position:absolute; right:-18px; bottom:-22px; background:var(--green-900); color:var(--cream-50);
  border-radius:var(--radius-m); padding:16px 22px; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; transform:rotate(-3deg);
}
.hero8__badge span{ font-family:var(--font-serif); font-size:24px; }
.hero8__badge b{ font-size:12.5px; letter-spacing:.24em; font-weight:400; color:var(--brown-500); }
.hero8 .breadcrumb{ margin-bottom:18px; }
.hero8__eyebrow{ font-size:13px; letter-spacing:.34em; color:var(--brown-600); margin-bottom:16px; }
.hero8 h1{ margin-bottom:20px; }
.hero8__lead{ font-size:16.5px; margin-bottom:30px; max-width:520px; }
.hero8__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero8__blob{
  position:absolute; left:-70px; bottom:-90px; width:240px; height:240px; border-radius:50%;
  border:2px dashed rgba(176,141,102,.5);
}

/* ---------- 服务时间卡 ---------- */
.hours8__card{
  background:var(--white); border-radius:var(--radius-l); padding:clamp(26px,4vw,46px);
  box-shadow:var(--shadow-md); border:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1.2fr; gap:30px; align-items:center;
}
.hours8__main p{ margin-top:10px; }
.hours8__list{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.hours8__list li{
  display:flex; flex-direction:column; padding:16px 20px; border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hours8__list span{ font-size:13px; color:var(--muted); }
.hours8__list b{ font-family:var(--font-serif); font-size:19px; color:var(--green-800); margin-top:4px; }

/* ---------- 快速问答（左右两列圆角） ---------- */
.quick8__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quick8-item{
  background:var(--white); border-radius:22px; border:1px solid var(--line); overflow:hidden;
}
.quick8-item:nth-child(even){ transform:translateY(22px); }
.quick8-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center;
  padding:18px 22px; font-weight:600; color:var(--green-900); font-size:15px;
}
.quick8-item summary span{
  flex:none; width:24px; height:24px; border-radius:50%; background:rgba(44,74,58,.1); position:relative;
}
.quick8-item summary span::before,.quick8-item summary span::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--green-800);
}
.quick8-item summary span::before{ width:10px; height:1.6px; }
.quick8-item summary span::after{ width:1.6px; height:10px; transition:transform .3s; }
.quick8-item[open] summary span::after{ transform:rotate(90deg); }
.quick8-item p{ padding:0 22px 20px; font-size:14.5px; }
.quick8-item p a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 三通道圆角卡 ---------- */
.channels8__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:44px; }
.ch8{
  background:var(--white); border:1px solid var(--line); border-radius:28px; padding:32px 28px;
  transition:all .35s var(--ease);
}
.ch8:hover{ transform:translateY(-8px) rotate(-.5deg); box-shadow:var(--shadow-md); }
.ch8:nth-child(2){ margin-top:30px; }
.ch8__icon{
  width:60px; height:60px; border-radius:50%; background:rgba(176,141,102,.14); color:var(--brown-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.ch8__icon svg{ width:26px; height:26px; }
.ch8 h3{ margin-bottom:8px; }
.ch8 p{ font-size:14px; margin-bottom:16px; }
.ch8 em{ font-style:normal; color:var(--green-700); font-size:13.5px; letter-spacing:.05em; }
.channels8__pic{ max-width:560px; margin-left:auto; }
.channels8__pic img{ border-radius:28px; box-shadow:var(--shadow-md); }

/* ---------- 承诺（深底） ---------- */
.promise8__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pr8{
  border-radius:22px; padding:28px 22px; background:rgba(251,248,241,.06);
  border:1px solid rgba(251,248,241,.14);
}
.pr8 b{ font-family:var(--font-serif); font-size:20px; color:var(--cream-50); display:block; margin-bottom:10px; }
.pr8 p{ font-size:14px; color:rgba(251,248,241,.68); }

/* ---------- 留言表单 ---------- */
.leave8__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.leave8__copy{ padding-top:8px; }
.leave8__copy p{ margin:14px 0 20px; }
.leave8__tips li{
  position:relative; padding-left:22px; margin-bottom:12px; font-size:14.5px; color:var(--ink-soft);
}
.leave8__tips li::before{
  content:""; position:absolute; left:0; top:10px; width:10px; height:10px; border-radius:50%;
  background:var(--brown-500);
}
.leave8__tips a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }
.leave8__form{
  background:var(--cream-100); border-radius:32px; padding:clamp(26px,3.6vw,44px);
  border:1px solid var(--line);
}
.leave8__form .field{ margin-bottom:16px; }

/* ---------- CTA ---------- */
.cta8{ padding-top:20px; }
.cta8__inner{
  text-align:center; border-radius:var(--radius-l); padding:clamp(40px,6vw,70px) clamp(20px,5vw,80px);
  background:
    radial-gradient(circle at 15% 20%, rgba(176,141,102,.2), transparent 40%),
    var(--green-900);
}
.cta8__inner h2{ color:var(--cream-50); margin-bottom:12px; }
.cta8__inner p{ color:rgba(251,248,241,.72); max-width:560px; margin:0 auto 26px; }
.cta8__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta8__actions .btn-line{ border-color:var(--cream-50); color:var(--cream-50); }
.cta8__actions .btn-line:hover{ background:var(--cream-50); color:var(--green-900); }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero8__wrap{ grid-template-columns:1fr; }
  .hero8__badge{ right:10px; }
  .hours8__card{ grid-template-columns:1fr; }
  .quick8__grid{ grid-template-columns:1fr; }
  .quick8-item:nth-child(even){ transform:none; }
  .channels8__grid{ grid-template-columns:1fr; }
  .ch8:nth-child(2){ margin-top:0; }
  .promise8__grid{ grid-template-columns:1fr 1fr; }
  .leave8__grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hours8__list{ grid-template-columns:1fr; }
  .promise8__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   新增区块（只追加，不动上方既有样式）
   ============================================================ */

/* ---------- 新增：客服服务范围（能帮/不能帮双栏） ---------- */
.scope8__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.5vw,36px); }
.scope8__yes,.scope8__no{
  border-radius:26px; padding:clamp(26px,3.5vw,40px); border:1px solid var(--line); background:var(--white);
}
.scope8__yes{ border-top:3px solid var(--green-700); }
.scope8__no{ border-top:3px solid var(--brown-500); }
.scope8__yes h3,.scope8__no h3{ margin-bottom:18px; font-family:var(--font-serif); font-size:20px; color:var(--green-900); }
.scope8__no h3{ color:var(--brown-700); }
.scope8__yes li,.scope8__no li{
  position:relative; padding:11px 0 11px 26px; font-size:14.5px; color:var(--ink-soft); border-bottom:1px dashed var(--line);
}
.scope8__yes li:last-child,.scope8__no li:last-child{ border-bottom:0; }
.scope8__yes li::before{
  content:""; position:absolute; left:2px; top:18px; width:10px; height:10px; border-radius:50%;
  background:var(--green-700);
}
.scope8__no li::before{
  content:""; position:absolute; left:2px; top:16px; width:11px; height:11px;
  border:1.5px solid var(--brown-500); transform:rotate(45deg);
}

/* ---------- 新增：咨询话术示例（对话气泡） ---------- */
.talk8{ background:var(--white); }
.talk8__list{ display:grid; gap:22px; max-width:860px; margin-inline:auto; }
.talk8__row{ display:grid; gap:12px; }
.talk8__q,.talk8__a{ border-radius:20px; padding:16px 20px; font-size:14.5px; line-height:1.8; }
.talk8__q{ background:var(--cream-100); border:1px solid var(--line); border-bottom-right-radius:6px; }
.talk8__a{ background:rgba(44,74,58,.06); border:1px solid rgba(44,74,58,.16); border-bottom-left-radius:6px; margin-left:34px; }
.talk8__q span,.talk8__a span{
  display:block; font-size:12.5px; letter-spacing:.2em; margin-bottom:6px; color:var(--brown-600);
}
.talk8__a span{ color:var(--green-700); }
.talk8__note{
  max-width:860px; margin:26px auto 0; padding:16px 22px; border-left:3px solid var(--brown-500);
  background:var(--cream-50); font-size:14px; color:var(--ink-soft); line-height:1.8;
}

/* ---------- 新增：延伸阅读内链卡 ---------- */
.related8__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rl8{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:24px; padding:28px 26px;
  transition:all .35s var(--ease);
}
.rl8:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.rl8 h3{ font-family:var(--font-serif); font-size:19px; color:var(--green-900); margin-bottom:8px; }
.rl8 p{ font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.rl8 em{ font-style:normal; color:var(--green-700); font-size:13.5px; letter-spacing:.05em; }

@media (max-width:1024px){
  .scope8__grid{ grid-template-columns:1fr; }
  .related8__grid{ grid-template-columns:1fr; }
  .talk8__a{ margin-left:0; }
}