/* =============================================================
   h5-marketing.html 专属样式 —— 左文+叠层手机屏首屏
   ============================================================= */

/* ---------- 首屏 ---------- */
.h5-hero{
  background:var(--paper-deep);
  padding:calc(var(--topbar-h) + var(--header-h) + 70px) 0 90px;
  overflow:hidden;
}
.h5-hero-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;
}
.h5-kicker{font-size:12.5px;letter-spacing:.45em;color:var(--earth-deep);margin-bottom:20px}
.h5-title{font-size:clamp(30px,4.2vw,48px);line-height:1.4;margin-bottom:22px}
.h5-title span{color:var(--earth-deep)}
.h5-sub{font-size:15.5px;line-height:2;color:var(--ink-soft);max-width:540px;margin-bottom:30px}
.h5-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.h5-hero-note{font-size:13.5px;color:var(--ink-faint)}
.h5-hero-note a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}

/* 叠层手机屏 */
.h5-hero-phones{position:relative;height:440px}
.h5-phone{
  position:absolute;width:200px;height:390px;background:var(--dark);
  border-radius:18px;padding:10px;box-shadow:var(--shadow);
}
.h5-screen{
  width:100%;height:100%;border-radius:10px;display:flex;flex-direction:column;
  justify-content:space-between;padding:22px 16px;text-align:center;
}
.h5-screen span{font-family:var(--font-serif);font-size:15px;color:#F7F2E9;line-height:1.5}
.h5-screen i{
  font-style:normal;font-size:11px;letter-spacing:.1em;padding:8px 0;
  background:var(--earth);color:#FBF7EF;
}
.h5-screen--a{background:linear-gradient(160deg,#8E6B36,#2A2620)}
.h5-screen--b{background:linear-gradient(160deg,#5F594F,#2A2620)}
.h5-screen--c{background:linear-gradient(160deg,#AE8749,#3A352C)}
.h5-phone{left:8%;top:10px;transform:rotate(-4deg)}
.h5-phone--mid{left:32%;top:34px;z-index:2;transform:rotate(1deg)}
.h5-phone--back{left:56%;top:0;transform:rotate(5deg);opacity:.92}

/* ---------- 场景卡 ---------- */
.h5-scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.h5-scene-card{
  background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease;
}
.h5-scene-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.h5-scene-card img{width:100%;height:210px;object-fit:cover}
.h5-scene-card h3{font-size:19px;margin:20px 24px 8px}
.h5-scene-card p{font-size:14px;color:var(--ink-soft);line-height:1.9;padding:0 24px 26px}

/* ---------- 一屏一诉求 ---------- */
.h5-one{margin-top:0}
.h5-one-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.h5-one-copy .lead{margin:14px 0 16px}
.h5-one-copy p{font-size:14.5px;color:var(--ink-soft);line-height:2;margin-bottom:12px}
.h5-one-flow{max-width:280px;margin:0 auto}
.h5-one-screen{
  background:var(--paper);border:1px solid var(--line);padding:18px 22px;
  display:flex;align-items:center;gap:14px;
}
.h5-one-no{
  font-family:var(--font-serif);color:var(--earth-deep);font-size:14px;flex:none;
  border:1px solid var(--earth);padding:4px 10px;
}
.h5-one-screen p{font-size:14px;color:var(--ink-soft)}
.h5-one-arrow{text-align:center;color:var(--earth);padding:6px 0;font-size:16px}

/* ---------- 表单设计 ---------- */
.h5-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 44px}
.h5-form-item{border-left:3px solid var(--earth);padding:6px 0 6px 22px}
.h5-form-item h3{font-size:18px;margin-bottom:8px}
.h5-form-item p{font-size:14px;color:var(--ink-soft);line-height:1.9}

/* ---------- 动效性能（深色） ---------- */
.h5-speed{margin-top:0}
.h5-speed-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.h5-speed-photo img{width:100%;box-shadow:var(--shadow)}
.h5-speed-copy p{font-size:14.5px;color:#B0A896;line-height:2;margin-bottom:14px}

/* ---------- 数据 ---------- */
.h5-data-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.h5-data-cols>div{
  padding:28px 26px;background:var(--paper-deep);border-top:3px solid var(--brown);
}
.h5-data-cols h3{font-size:18px;margin-bottom:10px}
.h5-data-cols p{font-size:14px;color:var(--ink-soft);line-height:1.9}
.h5-data-cols a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}

/* ---------- 案例 ---------- */
.h5-case{margin-top:0}
.h5-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.h5-case-card{background:var(--paper);border:1px solid var(--line);overflow:hidden;display:block}
.h5-case-card img{width:100%;height:230px;object-fit:cover}
.h5-case-body{padding:22px 26px 26px}
.h5-case-body h3{font-size:18px;margin:12px 0 8px}
.h5-case-body p{font-size:14px;color:var(--ink-soft);line-height:1.85}

/* ---------- 周期 ---------- */
.h5-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:860px;margin:0 auto}
.h5-steps>div{padding:30px 26px;border-right:1px dashed var(--line);text-align:center}
.h5-steps>div:last-child{border-right:none}
.h5-steps span{
  font-family:var(--font-serif);font-size:14px;color:var(--earth-light);letter-spacing:.15em;
}
.h5-steps h3{font-size:18px;margin:10px 0 8px}
.h5-steps p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- FAQ ---------- */
.h5-faq-wrap{max-width:860px}
.h5-faq .section-head{margin-bottom:34px}
.h5-faq .accordion-body a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}

/* ---------- CTA ---------- */
.h5-cta{
  background:var(--dark);color:#D8D2C6;padding:96px 0;text-align:center;
}
.h5-cta-inner h2{font-size:clamp(26px,3.4vw,38px);color:#EFE9DC;line-height:1.5;margin-bottom:30px}
.h5-cta-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.h5-cta-row a{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#E3DCCB}
.h5-cta-row svg{width:16px;height:16px;fill:var(--earth-light)}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .h5-hero-inner{grid-template-columns:1fr;gap:30px}
  .h5-hero-phones{height:auto;display:flex;justify-content:center;gap:14px}
  .h5-phone{position:relative;left:auto;top:auto;transform:none;flex:none}
  .h5-scene-grid{grid-template-columns:1fr}
  .h5-one-wrap,.h5-speed-wrap{grid-template-columns:1fr;gap:30px}
  .h5-form-grid{grid-template-columns:1fr}
  .h5-data-cols,.h5-steps{grid-template-columns:1fr}
  .h5-steps>div{border-right:none;border-bottom:1px dashed var(--line)}
  .h5-case-grid{grid-template-columns:1fr}
}