/* ============================================================
   yingxiaoxing-jianzhan.css 营销型网站建设
   Hero 变体：H1 左右分栏（文字左/图右），十字线交叉错位
   ============================================================ */

/* ---------- H1 Hero：左右分栏 ---------- */
.yx-hero{padding:60px 0 70px;background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%)}
.yx-h-vline{left:38%;height:78%;top:12%}
.yx-h-xline{top:44%}
.yx-h-blob{width:220px;height:220px;background:var(--green);right:6%;bottom:-60px}
.yx-h-in{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.yx-h-text h1{margin:18px 0 16px;font-size:clamp(30px,4vw,48px)}
.yx-h-text h1 em{font-style:normal;color:var(--blue-ink)}
.yx-h-text>p{color:var(--muted);max-width:560px}
.yx-h-cta{display:flex;gap:14px;margin:26px 0 24px;flex-wrap:wrap}
.yx-h-stats{display:flex;gap:30px;flex-wrap:wrap}
.yx-h-stats li b{display:block;font-size:26px;color:var(--blue-ink)}
.yx-h-stats li span{font-size:13.5px;color:var(--muted)}
.yx-h-media{position:relative;transform:translateY(26px)}
.yx-h-media .photo{aspect-ratio:16/11}
.yx-h-cap{
  position:absolute;left:22px;bottom:-18px;padding:9px 18px;border-radius:999px;
  background:var(--yellow);font-size:13.5px;font-weight:700;box-shadow:var(--shadow-sm);
}

/* ---------- 价值：纵向色条卡 ---------- */
.yx-value-list{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.yx-vcard{
  display:flex;gap:20px;background:#fff;border:2px solid var(--line);
  border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
.yx-vcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.yx-vbar{width:6px;border-radius:6px;background:var(--blue);flex:none;align-self:stretch}
.yx-vbar-g{background:var(--green-deep)}
.yx-vbar-y{background:var(--yellow-deep)}
.yx-vnum{font-size:14px;font-weight:800;color:var(--blue-deep);letter-spacing:.1em}
.yx-vbody h3{margin:6px 0 8px}
.yx-vbody p{color:var(--muted);font-size:15px}

/* ---------- 交付：两列编号清单 ---------- */
.yx-deliver{background:var(--cream)}
.yx-d-xline{top:30%;opacity:.35}
.yx-deliver-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.yx-deliver-col{counter-reset:none}
.yx-deliver-col li{display:flex;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)}
.yx-deliver-col li>b{
  width:38px;height:38px;border-radius:12px;background:var(--blue);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;
}
.yx-deliver-col li:nth-child(even)>b{background:var(--green)}
.yx-deliver-col h3{font-size:17px;margin-bottom:4px}
.yx-deliver-col p{color:var(--muted);font-size:14.5px}

/* ---------- 适用人群：图+标签云 ---------- */
.yx-fit{overflow:hidden}
.yx-f-vline{left:52%;opacity:.3}
.yx-fit-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center}
.yx-fit-media{position:relative;transform:translateY(-20px)}
.yx-fit-cap{
  position:absolute;right:20px;top:-16px;background:var(--blue);color:var(--ink);
  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;
}
.yx-fit-tags{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.yx-fit-tags a{
  background:#fff;border:2px solid var(--blue);color:var(--blue-ink);
  padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;
}
.yx-fit-tags a:hover{background:var(--blue)}
.yx-fit-note{color:var(--muted);font-size:15px;border-left:3px solid var(--yellow-deep);padding-left:14px}

/* ---------- 对照表 ---------- */
.yx-cmp{background:#fff}
.yx-cmp-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.yx-cmp-table{width:100%;border-collapse:collapse;min-width:640px;background:#fff}
.yx-cmp-table th,.yx-cmp-table td{padding:15px 20px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
.yx-cmp-table th{background:var(--bg);font-size:15.5px}
.yx-cmp-badge{background:var(--yellow);padding:4px 12px;border-radius:999px;font-size:13.5px;font-weight:800}
.yx-cmp-table tbody td:nth-child(2){font-weight:600;color:var(--blue-ink)}

/* ---------- 案例：三图横排 ---------- */
.yx-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.yx-case-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;display:block;
  border:2px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);
}
.yx-case-card img{aspect-ratio:16/10;width:100%;object-fit:cover;transition:transform .5s ease}
.yx-case-card:hover img{transform:scale(1.05)}
.yx-case-cap{
  position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(39,66,79,.82));color:#fff;
}
.yx-case-cap b{display:block;font-size:16px}
.yx-case-cap i{font-style:normal;font-size:13px;color:#D7ECF6}
.yx-case-more{text-align:center;margin-top:26px}

/* ---------- 价格黄带 ---------- */
.yx-price-band{
  position:relative;overflow:hidden;background:var(--yellow);border-radius:var(--r-lg);
  padding:46px 44px;box-shadow:var(--shadow);
}
.yx-price-blob{width:160px;height:160px;background:#fff;right:-40px;bottom:-60px}
.yx-price-band h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.yx-price-band p{max-width:720px;line-height:1.9}
.yx-price-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}

/* ---------- FAQ：左右分栏 ---------- */
.yx-faq{background:var(--cream)}
.yx-faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.yx-faq-text .sec-title{font-size:clamp(22px,2.6vw,30px)}
.yx-faq-contact{margin-top:22px;background:#fff;border:2px solid var(--blue);border-radius:var(--r-md);padding:16px 20px;display:inline-block}
.yx-faq-contact b{display:block;font-size:20px;color:var(--blue-ink)}
.yx-faq-contact span{font-size:13.5px;color:var(--muted)}
.yx-faq-item{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  padding:0 20px;margin-bottom:14px;overflow:hidden;
}
.yx-faq-item summary{
  cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.yx-faq-item summary::-webkit-details-marker{display:none}
.yx-faq-item summary::after{content:"+";font-size:22px;color:var(--blue-deep);flex:none}
.yx-faq-item[open] summary::after{transform:rotate(45deg)}
.yx-faq-item p{padding:0 0 16px;color:var(--muted);font-size:14.5px}

/* ---------- CTA ---------- */
.yx-cta-band{
  position:relative;text-align:center;background:var(--blue-ink);color:#fff;
  border-radius:var(--r-lg);padding:56px 30px;overflow:hidden;
}
.yx-cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.yx-cta-band p{max-width:620px;margin:0 auto;color:#D7ECF6}
.yx-cta-actions{display:flex;justify-content:center;gap:14px;margin:26px 0 14px;flex-wrap:wrap}
.yx-cta-meta{font-size:14px;color:#B6D6E6}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .yx-h-in,.yx-fit-in,.yx-faq-in{grid-template-columns:1fr;gap:34px}
  .yx-h-media{transform:none}
  .yx-value-list,.yx-deliver-grid,.yx-case-grid{grid-template-columns:1fr}
  .yx-fit-media{transform:none}
}