/* ==========================================================================
   page-yingxiao.css — 营销型网站建设（指纹 F7 左右镜像）
   左右交替图文 / 顶栏卡片网格 / 竖排编号流程 / 双列 FAQ / 朱砂 CTA
   ========================================================================== */

/* ===== ① hero ===== */
.yx-hero{
  padding-block:clamp(56px,8vw,100px);background:
    radial-gradient(700px 300px at 90% 0%,rgba(192,47,43,.08),transparent 60%),
    var(--moon-100);
}
.yx-hero .container{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;
}
.yx-hero h1{font-size:clamp(34px,4.6vw,58px);margin-top:16px;letter-spacing:.04em;}
.yx-hero .lead{margin-top:20px;max-width:520px;}
.yx-hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.yx-hero-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transform:rotate(1.2deg);}
.yx-hero-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}

/* ===== ② 镜像图文 ===== */
.yx-mirror{
  display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:center;
  margin-top:clamp(48px,7vw,90px);
}
.yx-mirror + .yx-mirror{margin-top:clamp(48px,7vw,90px);}
.yx-mirror-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);}
.yx-mirror-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.yx-mirror-text .section-desc{margin-top:16px;}
.yx-mirror-reverse .yx-mirror-img{order:2;}
.yx-mirror-reverse .yx-mirror-text{order:1;}

/* ===== ③ 卡片网格（顶部朱砂条） ===== */
.yx-list-bg{background:var(--moon-50);border-block:1px solid var(--line-soft);}
.yx-list{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.yx-card{
  background:#fff;border-radius:var(--radius);padding:28px 24px 24px;
  border-top:4px solid var(--cinnabar-500);box-shadow:var(--shadow-soft);
  transition:transform .28s ease,box-shadow .28s ease;
}
.yx-card:nth-child(2n){border-top-color:var(--bamboo-500);}
.yx-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);}
.yx-card h3{font-size:18px;margin-bottom:10px;}
.yx-card p{font-size:14.5px;color:var(--ink-500);line-height:1.85;}

/* ===== ④ 竖排编号流程 ===== */
.yx-flow{margin-top:40px;max-width:760px;position:relative;padding-left:0;}
.yx-flow::before{
  content:"";position:absolute;left:27px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(var(--bamboo-300),var(--bamboo-500));
}
.yx-flow li{display:flex;gap:24px;padding:18px 0 18px 0;position:relative;}
.yx-flow-no{
  width:56px;height:56px;flex-shrink:0;border-radius:50%;
  background:var(--moon-50);border:2px solid var(--bamboo-500);color:var(--bamboo-700);
  font-family:var(--serif);font-size:22px;font-weight:700;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
}
.yx-flow li h3{font-size:18px;}
.yx-flow li p{font-size:14.5px;color:var(--ink-500);margin-top:6px;line-height:1.85;max-width:560px;}

/* ===== ⑤ 交付 ===== */
.yx-deliver-bg{background:var(--moon-200);}
.yx-deliver{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center;}
.yx-deliver li{
  padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--ink-700);
}
.yx-deliver strong{
  display:inline-block;min-width:88px;color:var(--cinnabar-600);font-family:var(--serif);font-size:15px;
}

/* ===== ⑥ 案例 ===== */
.yx-cases{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.yx-case{
  display:block;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-soft);transition:transform .28s ease,box-shadow .28s ease;
}
.yx-case:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.yx-case img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.yx-case h3{font-size:16.5px;padding:16px 18px 0;}
.yx-case p{font-size:13.5px;color:var(--ink-500);padding:6px 18px 18px;}

/* ===== ⑦ 相关服务 ===== */
.yx-relate-bg{background:var(--bamboo-900);}
.yx-relate-bg .kicker{color:var(--cinnabar-400);}
.yx-relate-bg .kicker.center::before,.yx-relate-bg .kicker.center::after{background:var(--cinnabar-400);}
.yx-relate-bg .section-title{color:var(--moon-100);}
.yx-relate{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;}
.yx-relate a{
  padding:12px 22px;border:1px solid rgba(247,245,238,.35);border-radius:999px;
  color:var(--moon-100);font-size:14.5px;
}
.yx-relate a:hover{background:var(--cinnabar-500);border-color:var(--cinnabar-500);}
.yx-relate i{font-style:normal;margin-left:6px;}

/* ===== ⑧ FAQ 双列 ===== */
.yx-faq{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.yx-faq-item{
  padding:26px 22px;background:var(--moon-50);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);border-left:3px solid var(--bamboo-500);
}
.yx-faq-item h3{font-size:16.5px;line-height:1.6;}
.yx-faq-item p{font-size:14px;color:var(--ink-500);margin-top:12px;line-height:1.9;}

/* ===== ⑨ CTA 朱砂横幅 ===== */
.yx-cta{background:linear-gradient(100deg,var(--cinnabar-600),var(--cinnabar-500) 60%,var(--cinnabar-400));color:#FFF3EC;}
.yx-cta-inner{padding-block:clamp(44px,6vw,76px);text-align:center;}
.yx-cta h2{color:#FFF8F2;font-size:clamp(24px,3vw,36px);}
.yx-cta p{color:rgba(255,243,236,.85);margin-top:10px;}
.yx-cta .btn{margin-top:24px;background:#fff;color:var(--cinnabar-600);font-weight:700;}
.yx-cta .btn:hover{background:var(--moon-100);}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .yx-hero .container,.yx-mirror,.yx-deliver{grid-template-columns:1fr;}
  .yx-hero-img{transform:none;}
  .yx-mirror-reverse .yx-mirror-img{order:0;}
  .yx-list,.yx-cases,.yx-faq{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .yx-list,.yx-cases,.yx-faq{grid-template-columns:1fr;}
  .yx-flow::before{left:22px;}
  .yx-flow-no{width:44px;height:44px;font-size:18px;}
}