/* ==========================================================================
   page-xiangying.css — 响应式网站开发（指纹 F24 画框式）
   画框 hero / 设备图标行 / 左对齐时间线 / 竖分隔 FAQ / 月白 CTA
   ========================================================================== */

/* ===== ① 画框 hero ===== */
.xy-hero{
  padding-block:clamp(56px,8vw,96px);
  background:
    radial-gradient(600px 260px at 10% 0%,rgba(78,124,91,.08),transparent 60%),
    var(--moon-100);
}
.xy-hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:center;}
.xy-hero-text h1{font-size:clamp(34px,4.6vw,58px);margin-top:16px;}
.xy-hero-text .lead{margin-top:16px;max-width:480px;}
.xy-hero-cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;}
.xy-frame{
  position:relative;background:#fff;padding:18px;border-radius:6px;box-shadow:var(--shadow-lift);
}
.xy-frame::before{
  content:"";position:absolute;inset:-14px;border:1.5px solid var(--bamboo-500);
  border-radius:8px;pointer-events:none;
}
.xy-frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;}
.xy-frame-tag{
  position:absolute;right:24px;bottom:-14px;background:var(--cinnabar-500);color:#fff;
  font-size:12px;letter-spacing:.2em;padding:6px 16px;border-radius:3px;
  font-family:var(--serif);
}

/* ===== ② 定义区 ===== */
.xy-define{max-width:780px;}
.xy-define .section-desc{margin-top:14px;}
.xy-list{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;}
.xy-row{
  display:flex;gap:18px;padding:20px 0;border-bottom:1px dashed var(--line);align-items:flex-start;
}
.xy-row-ico{
  width:48px;height:48px;flex-shrink:0;background:var(--moon-200);color:var(--bamboo-700);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.xy-row-ico svg{width:24px;height:24px;}
.xy-row h3{font-size:16.5px;}
.xy-row p{font-size:14px;color:var(--ink-500);margin-top:4px;line-height:1.85;}

/* ===== ③ 适合谁 ===== */
.xy-who-bg{background:var(--moon-50);border-block:1px solid var(--line-soft);}
.xy-who{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.xy-who p{font-size:15.5px;line-height:2;color:var(--ink-700);}

/* ===== ④ 左对齐竖向流程 ===== */
.xy-flow{margin-top:36px;max-width:680px;}
.xy-flow li{display:flex;gap:22px;padding:16px 0;position:relative;}
.xy-flow li:not(:last-child)::before{
  content:"";position:absolute;left:31px;top:54px;bottom:0;width:1px;background:var(--moon-300);
}
.xy-flow li > span{
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--cinnabar-600);
  width:62px;flex-shrink:0;padding-top:3px;letter-spacing:.06em;
}
.xy-flow li h3{font-size:17px;}
.xy-flow li p{font-size:14px;color:var(--ink-500);margin-top:4px;line-height:1.8;}

/* ===== ⑤ 交付 ===== */
.xy-deliver-bg{background:var(--moon-200);}
.xy-deliver{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;align-items:center;}
.xy-deliver-cells{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.xy-deliver-cells > div{
  background:var(--moon-50);border-radius:var(--radius);padding:18px 20px;
  border-top:3px solid var(--bamboo-500);
}
.xy-deliver-cells strong{font-family:var(--serif);color:var(--bamboo-700);font-size:15px;}
.xy-deliver-cells p{font-size:13.5px;color:var(--ink-500);margin-top:6px;line-height:1.8;}

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

/* ===== ⑦ 相关服务 ===== */
.xy-relate-bg{background:var(--moon-50);border-top:1px solid var(--line-soft);}
.xy-relate{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;}
.xy-relate a{
  padding:10px 22px;background:#fff;border-radius:6px;border:1px solid var(--line-soft);
  font-size:14.5px;color:var(--bamboo-700);box-shadow:var(--shadow-soft);
}
.xy-relate a:hover{border-color:var(--bamboo-500);color:var(--bamboo-900);}

/* ===== ⑧ FAQ 竖分隔 ===== */
.xy-faq{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.xy-faq-item{
  padding:8px 26px;border-left:1px solid var(--line);
}
.xy-faq-item:first-child{padding-left:0;}
.xy-faq-item:last-child{border-right:1px solid var(--line);padding-right:0;}
.xy-faq-item h3{font-size:16px;line-height:1.6;}
.xy-faq-item p{font-size:14px;color:var(--ink-500);margin-top:12px;line-height:1.9;}

/* ===== ⑨ CTA 月白柔带 ===== */
.xy-cta{background:var(--moon-100);border-top:1px solid var(--line-soft);text-align:center;}
.xy-cta-inner{padding-block:clamp(48px,7vw,84px);}
.xy-cta h2{font-size:clamp(22px,2.8vw,32px);}
.xy-cta p{margin-top:10px;color:var(--ink-500);}
.xy-cta-btns{margin-top:24px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .xy-hero-grid{grid-template-columns:1fr;}
  .xy-list,.xy-who,.xy-deliver{grid-template-columns:1fr;}
  .xy-cases,.xy-faq{grid-template-columns:1fr;}
  .xy-faq-item{padding:20px 0;border-left:none;border-top:1px solid var(--line);}
  .xy-faq-item:first-child{border-top:none;}
  .xy-faq-item:last-child{border-right:none;}
  .xy-deliver-cells{grid-template-columns:1fr;}
}