/* =========================================================
   case.html 成功案例页独有样式
   版式：印章式 hero + 静态胶囊 + 左右拉通大卡 + 口碑引号卡 + CSS 圆环图例 + 数字方卡
   ========================================================= */

/* ---------- 1. Hero：印章式 ---------- */
.case-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--topbar-h) + 56px) 0 90px;
  background:
    radial-gradient(circle at 15% 20%, rgba(238,209,145,.5) 0 24%, transparent 48%),
    linear-gradient(150deg, var(--green) 0%, var(--cream) 70%);
  overflow: hidden;
}
.case-hero-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.case-deco-a {
  width: 240px; height: 240px; left: -70px; bottom: -80px;
  background: rgba(238,209,145,.55);
}
.case-deco-b { width: 90px; height: 90px; right: 22%; top: 18%; background: rgba(255,255,255,.5); }
.case-hero-inner {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center;
  position: relative; z-index: 2;
}
.case-bread { margin-bottom: 18px; font-size: .88rem; color: var(--ink-3); }
.case-bread a { font-weight: 600; color: var(--ink-2); }
.case-bread span { margin: 0 8px; }
.case-bread em { font-style: normal; color: #3F5238; font-weight: 600; }
.case-kicker { font-size: .82rem; letter-spacing: 3px; color: var(--green-3); font-weight: 700; margin-bottom: 12px; }
.case-hero-copy h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin-bottom: 18px; }
.case-sub { max-width: 560px; margin-bottom: 26px; }
.case-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* 印章：倾斜的双层圆环章 */
.case-seal-wrap { display: flex; justify-content: center; }
.case-seal {
  position: relative;
  width: clamp(220px, 24vw, 300px); aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FDF6E4, var(--yellow-2));
  box-shadow: var(--clay-shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-8deg);
}
.case-seal-ring {
  position: absolute; inset: 14px;
  border: 3px dashed rgba(91,83,70,.35);
  border-radius: 50%;
}
.case-seal-text {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800;
  line-height: 1.25; text-align: center; color: var(--ink);
}
.case-seal-sub { font-size: .8rem; letter-spacing: 2px; color: var(--ink-3); margin-top: 8px; }

/* ---------- 2. 分类胶囊 ---------- */
.case-chip-sec { background: var(--cream); }
.case-chip-list {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.case-chip-list a {
  display: inline-block; padding: 10px 22px; border-radius: 999px;
  background: #FFFDF6; border: 2px solid var(--line);
  font-weight: 600; font-size: .94rem; color: var(--ink-2);
  box-shadow: var(--clay-shadow-sm);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s;
}
.case-chip-list a:hover {
  transform: translateY(-4px) rotate(-1.5deg);
  background: var(--green); border-color: var(--green-2); color: #3F5238;
}

/* ---------- 3. 案例大卡（图片+指标） ---------- */
.case-big-sec { background: var(--cream-2); }
.case-big {
  display: grid; grid-template-columns: 1.1fr 1fr;
  overflow: hidden; margin-bottom: 30px;
}
.case-big-reverse .case-big-img { order: 2; }
.case-big-img { position: relative; min-height: 280px; }
.case-big-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.case-big-tag {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  background: rgba(255,249,239,.92);
  padding: 6px 16px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; color: var(--ink);
}
.case-big-body { padding: clamp(26px, 4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.case-big-body h3 { margin-bottom: 12px; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.case-big-body p { font-size: .96rem; margin-bottom: 20px; }
.case-metrics {
  display: flex; gap: 26px; margin-bottom: 22px; flex-wrap: wrap;
}
.case-metrics li { display: flex; flex-direction: column; }
.case-metrics b { font-size: 1.5rem; color: var(--green-3); }
.case-metrics span { font-size: .82rem; color: var(--ink-3); }
.case-big-body .btn { align-self: flex-start; }

/* ---------- 4. 客户口碑 ---------- */
.case-voice-sec { background: var(--cream); }
.case-voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-voice { padding: 30px 28px; position: relative; }
.case-voice::before {
  content: "“";
  position: absolute; top: 6px; left: 18px;
  font-size: 3.4rem; color: var(--yellow-2); font-weight: 800;
}
.case-voice p { font-size: .98rem; color: var(--ink); margin-bottom: 16px; position: relative; z-index: 2; }
.case-voice footer { font-size: .88rem; color: var(--ink-3); font-weight: 600; }
.case-voice-note { text-align: center; font-size: .92rem; margin-top: 22px; }

/* ---------- 6b. 看案例提醒 ---------- */
.case-final-sec { background: var(--cream-2); }
.case-final-copy { max-width: 760px; margin: 0 auto; text-align: center; font-size: 1.02rem; line-height: 1.9; }

/* ---------- 6c. 项目回顾叙事 ---------- */
.case-story-sec { background: var(--cream); }
.case-story { padding: 34px 36px; }
.case-story p { font-size: .98rem; line-height: 2; margin-bottom: 14px; }
.case-story p:last-child { margin-bottom: 0; }

/* ---------- 5. 圆环图例 ---------- */
.case-district-sec { background: var(--cream-2); }
.case-donut-wrap {
  display: flex; align-items: center; gap: clamp(30px, 6vw, 80px);
  flex-wrap: wrap;
}
.case-donut {
  width: clamp(220px, 26vw, 300px); aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(
    var(--yellow-3) 0 32%,
    var(--green-3) 32% 52%,
    var(--green) 52% 70%,
    #E8D9B8 70% 82%,
    var(--yellow-2) 82% 92%,
    #D9E4D0 92% 100%
  );
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--clay-shadow);
}
.case-donut-center {
  width: 56%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 3px 8px rgba(91,83,70,.12);
}
.case-donut-center b { font-size: 1.6rem; color: var(--ink); }
.case-donut-center span { font-size: .84rem; color: var(--ink-3); }
.case-donut-legend { display: grid; gap: 12px; }
.case-donut-legend li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-2); }
.case-donut-legend .dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: var(--clay-shadow-sm); }
.dot-a { background: var(--yellow-3); }
.dot-b { background: var(--green-3); }
.dot-c { background: var(--green); }
.dot-d { background: #E8D9B8; }
.dot-e { background: var(--yellow-2); }
.dot-f { background: #D9E4D0; }

/* ---------- 6. 数字统计 ---------- */
.case-num-sec { background: var(--cream); }
.case-num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.case-num {
  padding: 34px 20px; text-align: center;
  border-radius: 36px;
}
.case-num b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--green-3); margin-bottom: 6px; }
.case-num span { color: var(--ink-2); font-weight: 600; font-size: .95rem; }

/* ---------- 7. CTA ---------- */
.case-cta-sec {
  background: linear-gradient(150deg, var(--green) 0%, var(--yellow) 130%);
  padding: clamp(56px, 8vw, 96px) 0;
}
.case-cta-inner { text-align: center; }
.case-cta-inner h2 { margin-bottom: 14px; }
.case-cta-inner p { margin-bottom: 26px; color: var(--ink); }
.case-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .case-hero-inner { grid-template-columns: 1fr; }
  .case-seal-wrap { order: -1; }
  .case-big { grid-template-columns: 1fr; }
  .case-big-reverse .case-big-img { order: 0; }
  .case-voice-grid { grid-template-columns: 1fr; }
  .case-num-grid { grid-template-columns: repeat(2, 1fr); }
}