/* ============================================================
   xiangyingshi-jianzhan.css 响应式网站开发
   Hero 变体：H12 气泡装饰（居中文案 + 四周对话气泡）
   ============================================================ */

/* ---------- H12 Hero ---------- */
.xy-hero{position:relative;overflow:hidden;padding:80px 0 100px;background:var(--cream)}
.xy-h-xline{top:50%;opacity:.3}
.xy-h-in{position:relative;max-width:840px}
.xy-h-center h1{margin:18px 0 16px;font-size:clamp(30px,4.2vw,48px)}
.xy-h-center h1 em{font-style:normal;color:var(--blue-ink)}
.xy-h-center>p{color:var(--muted);max-width:620px;margin:0 auto}
.xy-h-cta{display:flex;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.xy-bubble{
  position:absolute;background:#fff;border:2px solid var(--blue);border-radius:18px;
  padding:10px 18px;font-size:14px;font-weight:700;box-shadow:var(--shadow-sm);
}
.xy-bubble::after{
  content:"";position:absolute;bottom:-10px;left:30px;width:16px;height:16px;
  background:#fff;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);
}
.xy-bubble-1{left:-6%;top:16%;transform:rotate(-3deg)}
.xy-bubble-2{right:-8%;top:24%;transform:rotate(2deg);border-color:var(--green-deep)}
.xy-bubble-3{left:6%;bottom:4%;transform:rotate(-2deg);border-color:var(--yellow-deep)}
@media (max-width:960px){.xy-bubble{position:static;display:inline-block;margin:8px;transform:none!important}}

/* ---------- 设备框三卡 ---------- */
.xy-dev-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.xy-devcard{background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm);text-align:center;transition:transform .3s ease}
.xy-devcard:hover{transform:translateY(-5px)}
.xy-devframe{margin:0 auto 16px;background:var(--bg);border:2px solid var(--line-strong);border-radius:10px;position:relative}
.xy-devframe span{position:absolute;inset:8px;border-radius:6px;background:linear-gradient(135deg,var(--blue),var(--green))}
.xy-dev-pc{width:90%;height:110px}
.xy-dev-pad{width:62%;height:110px}
.xy-dev-phone{width:42%;height:130px}
.xy-devcard h3{margin-bottom:8px}
.xy-devcard p{color:var(--muted);font-size:14.5px}

/* ---------- 为什么图文 ---------- */
.xy-why{background:#fff;overflow:hidden}
.xy-w-vline{left:50%;opacity:.3}
.xy-why-in{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}

/* ---------- 案例 ---------- */
.xy-case-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.xy-ccard{
  display:block;border-radius:var(--r-lg);overflow:hidden;border:2px solid var(--line);
  background:#fff;box-shadow:var(--shadow-sm);transition:transform .3s ease;
}
.xy-ccard:hover{transform:translateY(-5px)}
.xy-ccard img{aspect-ratio:16/10;width:100%;object-fit:cover}
.xy-ccard b{display:block;padding:14px 18px 2px;font-size:16px}
.xy-ccard i{display:block;padding:0 18px 14px;font-style:normal;color:var(--muted);font-size:13.5px}
.xy-case-more{text-align:center;margin-top:24px}

/* ---------- FAQ ---------- */
.xy-faq-wrap{max-width:840px}
.xy-faq-item{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  padding:0 22px;margin-bottom:14px;
}
.xy-faq-item summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;display:flex;justify-content:space-between;gap:12px;align-items:center}
.xy-faq-item summary::-webkit-details-marker{display:none}
.xy-faq-item summary::after{content:"+";font-size:22px;color:var(--blue-deep);flex:none}
.xy-faq-item[open] summary::after{transform:rotate(45deg)}
.xy-faq-item p{padding:0 0 16px;color:var(--muted);font-size:14.5px}

/* ---------- CTA ---------- */
.xy-cta-band{text-align:center;background:linear-gradient(120deg,var(--green),var(--blue));border-radius:var(--r-lg);padding:56px 30px}
.xy-cta-band h2{margin-bottom:14px;font-size:clamp(26px,3.4vw,40px)}
.xy-cta-band p{color:var(--ink);opacity:.85;max-width:600px;margin:0 auto}
.xy-cta-actions{display:flex;justify-content:center;gap:14px;margin:26px 0 14px;flex-wrap:wrap}
.xy-cta-meta{font-size:14px;color:var(--ink);opacity:.8}

@media (max-width:960px){
  .xy-dev-row,.xy-why-in,.xy-case-row{grid-template-columns:1fr}
}