/* ============================================================
   case-11.html 专属样式 —— 鹤壁力达液压 · 液压设备官网案例
   布局特征：全宽大图 Hero + 悬浮数据卡 / 痛点三卡 / 虚线目标清单 /
             左右栏目规划 / 标注式设计亮点 / 3×2 功能卡 / 成果条
   ============================================================ */

/* 面包屑留白 */
.c11-crumb{ padding-top:26px; }

/* ---------- ① Hero：左图右文 + 悬浮卡压图下缘 ---------- */
.c11-hero{ padding:34px 0 90px; position:relative; }
.c11-hero-inner{
  display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center;
  position:relative;
}
.c11-hero-photo{
  position:relative; border-radius:var(--r-l);
  border:3px dashed var(--pink-mid); padding:12px; background:var(--white);
  transform:rotate(-1.5deg);
  box-shadow:var(--shadow-m);
}
.c11-hero-photo img{ border-radius:calc(var(--r-l) - 8px); width:100%; }
.c11-hero-stamp{
  position:absolute; top:-16px; right:-12px;
  background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff;
  font-size:13px; font-weight:800; padding:7px 16px; border-radius:var(--r-full);
  transform:rotate(4deg); box-shadow:0 8px 20px rgba(111,191,115,.35);
}
.c11-hero-tag{ margin-bottom:16px; }
.c11-hero-text h1{ margin-bottom:18px; }
.c11-hero-sub{ font-size:16px; color:var(--body); max-width:460px; margin-bottom:26px; }
.c11-hero-btns{ display:flex; gap:14px; flex-wrap:wrap; }
/* 悬浮数据卡：压在 Hero 底部，跨图文 */
.c11-float-card{
  position:absolute; left:0; bottom:-56px; z-index:3;
  background:var(--white); border-radius:var(--r-m);
  border:2px dashed var(--yellow);
  box-shadow:var(--shadow-l);
  padding:18px 26px; text-align:center;
  min-width:170px;
}
.c11-float-card b{ font-size:34px; color:var(--yellow-deep); font-weight:800; line-height:1; }
.c11-float-card b span{ font-size:16px; margin-left:2px; }
.c11-float-card p{ font-size:13px; margin:8px 0 0; color:var(--body); }

/* ---------- ② 背景与痛点 ---------- */
.c11-bg{ padding:56px 0 20px; }
.c11-bg-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }
.c11-bg-text .tag{ margin-bottom:14px; }
.c11-bg-text h2{ margin-bottom:18px; }
.c11-pains{ display:flex; flex-direction:column; gap:16px; }
.c11-pain{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--white); border-radius:var(--r-m);
  padding:18px 20px; border:2px dashed transparent;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.c11-pain:hover{ transform:translateX(8px); border-color:var(--pink-mid); box-shadow:var(--shadow-m); }
.c11-pain-ic{
  flex:none; width:46px; height:46px; border-radius:14px;
  background:var(--pink-soft); color:var(--pink-deep);
  display:flex; align-items:center; justify-content:center;
}
.c11-pain-ic svg{ width:22px; height:22px; }
.c11-pain h3{ font-size:17px; margin-bottom:4px; }
.c11-pain p{ font-size:14px; margin:0; }

/* ---------- ③ 项目目标：虚线大框 ---------- */
.c11-goal{ padding:56px 0; }
.c11-goal-head{ margin-bottom:26px; }
.c11-goal-head h2{ margin-top:12px; }
.c11-goal-list{
  border:2px dashed var(--yellow); border-radius:var(--r-l);
  background:var(--cream-2); padding:30px 34px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px 34px;
}
.c11-goal-list li{ display:flex; gap:14px; align-items:flex-start; }
.c11-goal-no{
  flex:none; font-size:20px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  border-radius:12px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
}
.c11-goal-list p{ margin:0; font-size:15px; padding-top:8px; }

/* ---------- ④ 栏目规划：左右 ---------- */
.c11-map{ padding:56px 0; background:rgba(255,255,255,.55); border-radius:var(--r-xl); }
.c11-map-wrap{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center; }
.c11-map-head .tag{ margin-bottom:14px; }
.c11-map-head h2{ margin-bottom:16px; }
.c11-map-list{ counter-reset:c11; display:flex; flex-direction:column; gap:6px; }
.c11-map-list li{
  display:flex; gap:16px; align-items:baseline;
  padding:14px 18px; border-radius:var(--r-s);
  transition:background .2s ease, transform .2s ease;
}
.c11-map-list li:hover{ background:var(--yellow-soft); transform:translateX(6px); }
.c11-map-list b{
  flex:none; min-width:92px; color:var(--yellow-deep); font-size:17px;
  border-right:2px dashed var(--pink-mid); padding-right:14px;
}
.c11-map-list span{ font-size:14px; color:var(--body); }

/* ---------- ⑤ 设计亮点：标注式大图 ---------- */
.c11-shot{ padding:56px 0; }
.c11-shot-wrap{ display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
.c11-shot-img{ position:relative; }
.c11-shot-img img{ border-radius:var(--r-l); box-shadow:var(--shadow-l); }
.c11-note{
  position:absolute; background:var(--ink); color:#FFF3D6;
  font-size:13px; font-weight:700; padding:8px 14px; border-radius:var(--r-full);
  white-space:nowrap;
}
.c11-note-1{ top:14%; left:-26px; }
.c11-note-2{ bottom:12%; right:-20px; }
.c11-shot-text .tag{ margin-bottom:14px; }
.c11-shot-text h2{ margin-bottom:16px; }

/* ---------- ⑥ 功能清单 3×2 ---------- */
.c11-feat{ padding:56px 0; }
.c11-feat-head{ margin-bottom:28px; }
.c11-feat-head h2{ margin-top:12px; }
.c11-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.c11-feat-card{
  background:var(--white); border-radius:var(--r-m); padding:24px 22px;
  border:2px dashed transparent;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.c11-feat-card:hover{ transform:translateY(-6px) rotate(-.5deg); border-color:var(--green-mid); box-shadow:var(--shadow-l); }
.c11-feat-ic{
  width:52px; height:52px; border-radius:16px; background:var(--green-soft);
  color:var(--green-deep); display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.c11-feat-ic svg{ width:26px; height:26px; }
.c11-feat-card h3{ font-size:17px; margin-bottom:6px; }
.c11-feat-card p{ font-size:14px; margin:0; }

/* ---------- ⑦ 成果数据 ---------- */
.c11-res{ padding:56px 0; }
.c11-res-head{ margin-bottom:24px; }
.c11-res-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.c11-res-item{
  background:linear-gradient(160deg,var(--yellow-soft),#fff);
  border-radius:var(--r-m); padding:26px 20px; text-align:center;
  border:2px dashed var(--yellow);
}
.c11-res-item b{ font-size:38px; font-weight:800; color:var(--yellow-deep); line-height:1.1; }
.c11-res-item b span{ font-size:18px; }
.c11-res-item p{ font-size:14px; margin:8px 0 0; }
.c11-res-note{ text-align:center; font-size:13px; color:var(--body); margin-top:18px; }

/* ---------- ⑧ 客户评价 ---------- */
.c11-quote{ padding:30px 0 56px; }
.c11-quote-card{
  position:relative; background:var(--ink); color:#FFF3D6;
  border-radius:var(--r-l); padding:44px 48px; overflow:hidden;
}
.c11-quote-mark{
  position:absolute; top:6px; left:22px; font-size:90px; line-height:1;
  color:rgba(245,184,46,.35); font-family:Georgia,serif;
}
.c11-quote-card blockquote{ font-size:19px; line-height:1.9; margin:0 0 16px; position:relative; z-index:1; }
.c11-quote-card figcaption{ color:var(--pink-mid); font-weight:700; }

/* ---------- ⑨ 相关案例 ---------- */
.c11-rel{ padding:40px 0; }
.c11-rel-head{ margin-bottom:26px; }
.c11-rel-head h2{ margin-top:12px; }
.c11-rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.c11-rel-card{
  background:var(--white); border-radius:var(--r-m); padding:20px 22px;
  border:2px dashed var(--pink-mid);
  display:flex; flex-direction:column; gap:4px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.c11-rel-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); background:var(--pink-soft); }
.c11-rel-card b{ color:var(--ink); font-size:16px; }
.c11-rel-card span{ font-size:13px; color:var(--body); }

/* ---------- ⑩ 底部 CTA ---------- */
.c11-cta{ position:relative; margin-top:50px; border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden; }
.c11-cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.c11-cta::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,rgba(91,70,54,.82),rgba(224,90,138,.55));
}
.c11-cta-inner{ position:relative; z-index:2; text-align:center; padding:80px 20px; }
.c11-cta-inner h2{ color:#fff; margin-bottom:14px; }
.c11-cta-inner p{ color:#FFE9B8; margin-bottom:26px; }
.c11-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- 响应式 ---------- */
@media (max-width:991.98px){
  .c11-hero-inner{ grid-template-columns:1fr; gap:36px; }
  .c11-float-card{ position:static; margin:-30px auto 0; }
  .c11-bg-grid,.c11-map-wrap,.c11-shot-wrap{ grid-template-columns:1fr; gap:32px; }
  .c11-feat-grid{ grid-template-columns:1fr 1fr; }
  .c11-res-grid{ grid-template-columns:1fr 1fr; }
  .c11-rel-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:575.98px){
  .c11-goal-list{ grid-template-columns:1fr; padding:22px; }
  .c11-feat-grid{ grid-template-columns:1fr; }
  .c11-res-grid{ grid-template-columns:1fr 1fr; }
  .c11-rel-grid{ grid-template-columns:1fr; }
  .c11-note{ font-size:11px; padding:6px 10px; white-space:normal; }
  .c11-note-1{ left:8px; } .c11-note-2{ right:8px; }
  .c11-quote-card{ padding:32px 24px; }
  .c11-quote-card blockquote{ font-size:16px; }
}