/* ============================================================
   anli.html · 服务案例（脱敏示例）
   题头④：大图卡片题头
   ============================================================ */

/* ---------- 题头：大图卡片 ---------- */
.al-hero{ padding:120px 0 30px; background:var(--bg-soft); }
.al-hero-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.al-hero-img{ width:100%; height:440px; object-fit:cover; }
.al-hero-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:48px; background:linear-gradient(180deg, rgba(15,31,23,.15) 0%, rgba(15,31,23,.82) 100%);
  color:#fff;
}
.al-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:rgba(255,255,255,.85); margin-bottom:14px; }
.al-crumbs a{ color:#fff; }
.al-crumbs a:hover{ color:var(--orange-2); }
.al-sep{ color:rgba(255,255,255,.5); }
.al-title{ font-size:46px; font-weight:800; letter-spacing:2px; }
.al-sub{ margin-top:12px; max-width:680px; color:rgba(255,255,255,.94); font-size:15.5px; line-height:1.9; }

/* ---------- 案例声明 ---------- */
.al-note{ background:var(--bg-soft); padding-bottom:20px; }
.note-wrap{
  background:var(--orange-soft); border-left:5px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0; padding:22px 28px;
}
.note-mark{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px;
  color:var(--orange-deep); margin-bottom:8px;
}
.note-text{ font-size:14.5px; color:var(--ink-2); line-height:1.9; }
.note-text b{ color:var(--ink); }

/* ---------- 案例卡 ---------- */
.al-cases{ background:var(--white); }
.al-case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.al-case{
  background:var(--bg-soft); border-radius:var(--radius-lg); padding:28px 24px;
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .28s ease, box-shadow .28s ease;
}
.al-case:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.al-tag{
  align-self:flex-start; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; margin-bottom:14px;
}
.al-tag.orange{ color:var(--orange-deep); background:var(--orange-soft); }
.al-tag.green{ color:var(--green-deep); background:var(--green-soft); }
.al-case h3{ font-size:18px; line-height:1.5; margin-bottom:8px; }
.al-who{ font-size:13px; color:var(--ink-3); margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed var(--line); }
.al-case p{ font-size:14px; color:var(--ink-2); line-height:1.9; }
.al-case p a{ color:var(--green-deep); font-weight:600; }

/* ---------- 服务过程拆解 ---------- */
.al-process{ background:var(--bg-green); }
.al-proc{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:24px; }
.al-proc li{ text-align:center; }
.al-proc-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; font-size:24px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-deep));
  box-shadow:0 10px 22px rgba(18,183,106,.3); margin-bottom:14px;
}
.al-proc li:nth-child(even) .al-proc-ic{
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 10px 22px rgba(255,122,28,.3);
}
.al-proc h3{ font-size:16px; margin-bottom:8px; }
.al-proc p{ font-size:13.5px; color:var(--ink-2); line-height:1.8; }
.al-proc p a{ color:var(--orange-deep); font-weight:600; }

/* ---------- 口碑引用 ---------- */
.al-words{ background:var(--white); }
.al-word-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.al-word{
  position:relative; background:var(--bg-orange); border-radius:var(--radius-lg);
  padding:28px 26px; border:1px solid #FFE3CC;
}
.al-word::before{
  content:"“"; position:absolute; top:6px; left:18px; font-size:56px; font-weight:800;
  color:var(--orange); opacity:.35; line-height:1;
}
.al-word p{ position:relative; font-size:14.5px; color:var(--ink); line-height:1.9; margin-top:18px; }
.al-word footer{ margin-top:16px; font-size:13px; color:var(--ink-3); font-weight:600; }

/* ---------- 底部行动带 ---------- */
.al-cta{
  background:linear-gradient(120deg,var(--orange) 0%, var(--orange-deep) 100%);
  padding:60px 0; color:#fff;
}
.al-cta-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.al-cta-copy h2{ font-size:28px; font-weight:800; }
.al-cta-copy p{ margin-top:10px; max-width:560px; color:rgba(255,255,255,.94); font-size:15px; line-height:1.85; }
.al-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .al-hero-img{ height:340px; }
  .al-title{ font-size:36px; }
  .al-case-grid{ grid-template-columns:1fr 1fr; }
  .al-proc{ grid-template-columns:repeat(2,1fr); gap:26px 18px; }
  .al-word-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .al-hero{ padding:104px 0 20px; }
  .al-hero-img{ height:420px; }
  .al-hero-overlay{ padding:24px; }
  .al-case-grid{ grid-template-columns:1fr; }
  .al-proc{ grid-template-columns:1fr; }
}