/* ========== Design Tokens (对齐 DESIGN.md) ========== */
    :root {
      --color-primary:        #0faeff;
      --color-primary-light:  #5ed4ff;
      --color-primary-dark:   #0090d9;
      --color-primary-deeper: #0077be;
      --color-primary-bg:     #e8f7ff;
      --color-orange:        #ff7849;
      --color-purple:        #7c5cfc;
      --color-amber:         #ffa940;
      --color-navy:         #1a1a2e;
      --color-text-primary:   #1a1a2e;
      --color-text-secondary: #444466;
      --color-text-muted:    #888899;
      --color-text-disabled: #bbbbcc;
      --color-border:        rgba(15,174,255,0.08);
      --color-border-strong: rgba(15,174,255,0.16);
      --color-bg-page:       #f4f8fb;
      --color-bg-card:       #ffffff;
      --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
      --space-4: 16px; --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
      --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
      --radius-sm: 8px;   --radius-md: 12px;
      --radius-lg: 16px;  --radius-xl: 20px;  --radius-2xl: 24px; --radius-full: 999px;
      --shadow-card:    0 2px 12px rgba(0,60,120,0.05);
      --shadow-hover:   0 12px 32px rgba(0,100,180,0.10);
      --font-family: 'PingFang SC', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }



    /* ========================================================
       PAGE HEADER — 客户案例页 Banner（居中画廊式，与新闻页完全不同）
       －全宽居中标题 + 数据指标行 + 3D透视案例卡展示墙
       ======================================================== */
    .cases-hero {
      position: relative;
      padding: 90px 0 70px;
      overflow: hidden;
      /* 浅蓝到白的柔和渐变 */
      background:
        linear-gradient(175deg, #e8f7ff 0%, #d6efff 15%, #f0f7ff 40%, #ffffff 75%),
        radial-gradient(ellipse 60% 50% at 50% 30%, rgba(15,174,255,0.06) 0%, transparent 70%);
    }

    /* 左侧装饰竖线 */
    .cases-hero::before {
      content: '';
      position: absolute;
      left: 40px; top: 120px; bottom: 80px;
      width: 2px;
      background: linear-gradient(to bottom, var(--color-green), rgba(15,174,255,0.15), transparent);
      border-radius: 1px;
    }
    /* 右侧装饰竖线 */
    .cases-hero::after {
      content: '';
      position: absolute;
      right: 40px; top: 100px; bottom: 100px;
      width: 2px;
      background: linear-gradient(to bottom, rgba(15,174,255,0.25), rgba(15,174,255,0.08), transparent);
      border-radius: 1px;
    }

    .ch-inner {
      position: relative; z-index: 3;
      max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* ===== 居中标题区 ===== */
    .ch-text { max-width: 680px; }
    .ch-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 800;
      color: var(--color-green-dark);
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 20px;
      padding: 7px 22px;
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(15,174,255,0.15);
      border-radius: var(--radius-full);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 2px 12px rgba(15,174,255,0.06);
    }
    .ch-eyebrow svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .ch-title {
      font-size: 42px; font-weight: 900;
      line-height: 1.2; letter-spacing: -0.03em;
      color: var(--color-text-primary);
      margin-bottom: 18px;
    }
    .ch-title em {
      font-style: normal;
      background: linear-gradient(135deg, var(--color-green), #0090d9, #0077be);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .ch-desc {
      font-size: 15px; color: var(--color-text-secondary);
      line-height: 1.75;
      margin-bottom: 36px;
    }

    /* ===== 数据指标行（横向紧凑排列） ===== */
    .ch-stats {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 48px;
      padding: 20px 32px;
      background: rgba(255,255,255,0.65);
      border: 1px solid rgba(15,174,255,0.10);
      border-radius: var(--radius-xl);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 4px 24px rgba(15,174,255,0.06);
    }
    .ch-stat {
      position: relative;
      padding: 0 32px;
    }
    .ch-stat:first-child { padding-left: 0; }
    .ch-stat:last-child { padding-right: 0; }
    .ch-stat::after {
      content: ''; position: absolute; right: 0; top: 50%;
      transform: translateY(-50%);
      width: 1px; height: 32px;
      background: linear-gradient(to bottom, rgba(15,174,255,0.25), transparent);
    }
    .ch-stat:last-child::after { display: none; }
    .ch-stat-num {
      font-size: 28px; font-weight: 900;
      letter-spacing: -0.02em; line-height: 1.15;
    }
    .ch-stat-num.c-green  { color: var(--color-green-dark); }
    .ch-stat-num.c-blue   { color: var(--color-primary-deeper); }
    .ch-stat-num.c-orange { color: var(--color-orange); }
    .ch-stat-label {
      font-size: 11px; color: var(--color-text-muted);
      margin-top: 3px; font-weight: 600;
    }

    /* ===== 案例展示画廊（横向3张卡，不同大小+轻微倾斜） ===== */
    .ch-gallery {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      perspective: 1000px;
      margin-top: 8px;
    }

    /* 画廊装饰背景 */
    .ch-gallery::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 680px; height: 260px;
      background: radial-gradient(ellipse, rgba(15,174,255,0.08), transparent 70%);
      border-radius: 200px;
      z-index: 0;
      pointer-events: none;
    }

    .gallery-card {
      position: relative;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 12px 40px rgba(0,60,120,0.08), 0 2px 8px rgba(0,60,120,0.04);
      overflow: hidden;
      transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      flex-shrink: 0;
      z-index: 1;
    }
    .gallery-card:hover {
      transform: translateY(-10px) scale(1.03) !important;
      box-shadow: 0 24px 56px rgba(15,174,255,0.14), 0 8px 24px rgba(0,60,120,0.08);
      z-index: 5 !important;
    }

    /* 中间主卡 — 最大 */
    .gallery-card.gc-main {
      width: 300px;
      transform: translateY(0) rotate(0deg);
      animation: gcMainFloat 6s ease-in-out infinite;
    }
    @keyframes gcMainFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(0.3deg); }
    }

    /* 两侧副卡 — 略小 + 微倾 */
    .gallery-card.gc-side {
      width: 220px;
      opacity: 0.85;
    }
    .gallery-card.gc-left {
      transform: translateY(12px) rotate(-3deg);
      animation: gcSideFloatL 6s ease-in-out infinite;
    }
    .gallery-card.gc-right {
      transform: translateY(12px) rotate(3deg);
      animation: gcSideFloatR 6s ease-in-out infinite 0.5s;
    }
    @keyframes gcSideFloatL {
      0%, 100% { transform: translateY(12px) rotate(-3deg); }
      50% { transform: translateY(4px) rotate(-2deg); }
    }
    @keyframes gcSideFloatR {
      0%, 100% { transform: translateY(12px) rotate(3deg); }
      50% { transform: translateY(4px) rotate(2deg); }
    }

    .gallery-card.gc-side:hover {
      opacity: 1;
    }

    /* 卡片封面 */
    .gc-cover {
      height: 130px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gc-cover.theme-green  { background: linear-gradient(135deg, #0faeff 0%, #5ed4ff 60%, #a8eeff 100%); }
    .gc-cover.theme-cyan   { background: linear-gradient(135deg, #0faeff 0%, #38bdf8 60%, #7dd3fc 100%); }
    .gc-cover.theme-orange { background: linear-gradient(135deg, #ff7849 0%, #ffa940 60%, #fbbf24 100%); }
    .gc-cover::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 55% 45%, rgba(255,255,255,0.20), transparent 60%);
    }
    .gc-cover-icon {
      position: relative; z-index: 2;
      width: 46px; height: 46px;
      background: rgba(255,255,255,0.22);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .gc-cover-icon svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .gc-badge {
      position: absolute;
      top: 10px; left: 10px;
      padding: 3px 10px;
      border-radius: var(--radius-full);
      font-size: 9px; font-weight: 800;
      letter-spacing: 0.04em;
      background: rgba(255,255,255,0.2);
      color: #fff;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 2;
    }

    /* 卡片内容 */
    .gc-body { padding: 14px 16px 16px; }
    .gc-industry {
      font-size: 10px; font-weight: 700;
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
    }
    .gc-title {
      font-size: 13px; font-weight: 800;
      color: var(--color-text-primary);
      line-height: 1.45;
      letter-spacing: -0.01em;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      margin-bottom: 10px;
    }
    .gc-metric-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding-top: 10px;
      border-top: 1px solid rgba(15,174,255,0.07);
    }
    .gc-metric-val {
      font-size: 18px; font-weight: 900;
      letter-spacing: -0.02em;
    }
    .gc-metric-val.c-green  { color: var(--color-green-dark); }
    .gc-metric-val.c-blue   { color: var(--color-primary-deeper); }
    .gc-metric-val.c-orange { color: var(--color-orange); }
    .gc-metric-label { font-size: 10px; color: var(--color-text-muted); font-weight: 500; }

    /* ===== 装饰元素（散布在画廊周围） ===== */
    .ch-deco {
      position: absolute; pointer-events: none; z-index: 0;
    }
    /* 装饰圆点 */
    .ch-deco-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--color-green);
      box-shadow: 0 0 12px rgba(15,174,255,0.4);
      animation: chDecoPulse 3s ease-in-out infinite;
    }
    .ch-deco-dot.cd-1 { top: 140px; left: 12%; animation-delay: 0s; }
    .ch-deco-dot.cd-2 { top: 180px; right: 14%; width: 6px; height: 6px; background: var(--color-primary); box-shadow: 0 0 10px rgba(15,174,255,0.4); animation-delay: 1s; }
    .ch-deco-dot.cd-3 { bottom: 100px; left: 18%; width: 10px; height: 10px; background: var(--color-purple); opacity: 0.5; box-shadow: 0 0 14px rgba(124,92,252,0.35); animation-delay: 2s; }
    @keyframes chDecoPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:0.5;} }

    /* 装饰虚线弧 */
    .ch-deco-arc {
      width: 120px; height: 60px;
      border: 1.5px dashed rgba(15,174,255,0.12);
      border-bottom: none;
      border-radius: 120px 120px 0 0;
      top: 70px; right: 8%;
      animation: chArcFade 5s ease-in-out infinite alternate;
    }
    @keyframes chArcFade { 0%{opacity:0.3} 100%{opacity:0.8;} }

    /* ===== Banner 底纹装饰系统 ===== */

    /* 网格底纹 */
    .ch-bg-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(15,174,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,174,255,0.045) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
      pointer-events: none;
      z-index: 1;
    }

    /* 大型光斑 */
    .ch-bg-glow {
      position: absolute;
      top: -180px; right: -120px;
      width: 650px; height: 650px;
      background:
        radial-gradient(circle, rgba(15,174,255,0.26) 0%, rgba(94,212,255,0.16) 35%, transparent 65%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: chGlow 8s ease-in-out infinite alternate;
    }
    @keyframes chGlow {
      0%   { transform: translate(0,0) scale(1);    opacity: 0.9; }
      50%  { transform: translate(-35px,25px) scale(1.1); opacity: 0.7; }
      100% { transform: translate(18px,-18px) scale(1.06); opacity: 0.95; }
    }

    /* 旋转虚线圆环 */
    .ch-ring {
      position: absolute;
      border-radius: 50%;
      border: 1.5px dashed rgba(15,174,255,0.16);
      pointer-events: none;
      z-index: 1;
    }
    .ch-ring.r1 {
      width: 240px; height: 240px;
      top: -30px; left: 3%;
      animation: ringSpin 26s linear infinite;
    }
    .ch-ring.r2 {
      width: 170px; height: 170px;
      bottom: -15px; right: 8%;
      border-color: rgba(124,92,252,0.13);
      animation: ringSpin 20s linear infinite reverse;
    }
    @keyframes ringSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* 补充浮动光点 */
    .ch-dot {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }
    .ch-dot.d4 {
      width: 5px; height: 5px;
      top: 90px; right: 22%;
      background: var(--color-primary-light);
      box-shadow: 0 0 8px rgba(15,174,255,0.3);
      animation: chDecoPulse 2.5s ease-in-out infinite 0.5s;
    }
    .ch-dot.d5 {
      width: 7px; height: 7px;
      bottom: 110px; right: 16%;
      background: var(--color-orange);
      opacity: 0.55;
      box-shadow: 0 0 10px rgba(255,120,73,0.3);
      animation: chDecoPulse 3.5s ease-in-out infinite 1.5s;
    }

    /* 装饰连接线 */
    .ch-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
    .ch-line {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, rgba(15,174,255,0.13), transparent);
    }
    .ch-line.l1 {
      width: 75px; top: 88px; left: 55px;
      transform: rotate(-12deg);
      animation: chLineGlow 4s ease-in-out infinite;
    }
    .ch-line.l2 {
      width: 55px; top: 245px; left: 75px;
      transform: rotate(7deg);
      background: linear-gradient(90deg, rgba(124,92,252,0.11), transparent);
      animation: chLineGlow 5s ease-in-out infinite 1s;
    }
    @keyframes chLineGlow {
      0%, 100% { opacity: 0.35; }
      50%       { opacity: 1; }
    }

    /* 底部渐变分隔 */
    .ch-sep {
      margin-top: 52px;
      width: 100%;
      max-width: 400px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(15,174,255,0.25), rgba(15,174,255,0.15), transparent);
      position: relative;
    }

    /* ========================================================
       HERO CASE — 第一个案例：全宽深度展示
       ======================================================== */
    .hero-case {
      position: relative;
      padding: 80px 0;
      background: #fff;
      overflow: hidden;
    }
    .hero-case::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(15,174,255,0.2), transparent);
    }

    .hc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    /* 左侧：视觉大图 */
    .hc-visual {
      position: relative;
      border-radius: var(--radius-2xl);
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,60,120,0.10);
    }
    .hc-cover-gradient {
      width: 100%; height: 420px;
      background: linear-gradient(135deg, #0faeff 0%, #0faeff 50%, #5ed4ff 100%);
      position: relative;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .hc-cover-gradient::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 30% 60%, rgba(255,255,255,0.18), transparent 60%);
    }
    .hc-cover-gradient::after {
      content: '';
      position: absolute;
      top: -20px; right: -20px;
      width: 180px; height: 180px;
      background: rgba(255,255,255,0.08);
      border-radius: 36px;
      transform: rotate(18deg);
    }
    .hc-cover-icon {
      position: relative; z-index: 2;
      width: 88px; height: 88px;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 28px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 12px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .hc-cover-icon svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    /* 悬浮指标卡（覆盖在图片左下） */
    .hc-float-metric {
      position: absolute;
      bottom: 20px; left: 20px;
      display: flex; gap: 20px;
      padding: 16px 22px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: var(--radius-xl);
      box-shadow: 0 12px 36px rgba(0,0,0,0.12);
      z-index: 3;
    }
    .hc-fm-item { text-align: center; }
    .hc-fm-num {
      font-size: 26px; font-weight: 900;
      letter-spacing: -0.02em; line-height: 1;
    }
    .hc-fm-num.c-reduce { color: var(--color-green-dark); }
    .hc-fm-num.c-improve { color: var(--color-primary-deeper); }
    .hc-fm-label { font-size: 10px; color: var(--color-text-muted); margin-top: 3px; font-weight: 500; }

    /* 右侧：案例正文 */
    .hc-content { padding: 16px 0; }
    .hc-industry {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 800;
      color: var(--color-green-dark);
      letter-spacing: 0.06em; text-transform: uppercase;
      margin-bottom: 14px;
      padding: 4px 14px;
      background: rgba(15,174,255,0.08);
      border-radius: var(--radius-full);
    }
    .hc-industry svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; }
    .hc-client-name {
      font-size: 13px; font-weight: 700; color: var(--color-text-muted);
      margin-bottom: 8px;
      display: flex; align-items: center; gap: 8px;
    }
    .hc-client-logo {
      width: 28px; height: 28px; border-radius: 8px;
      background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 800; color: #fff;
    }
    .hc-title {
      font-size: 30px; font-weight: 900;
      line-height: 1.3; letter-spacing: -0.02em;
      color: var(--color-text-primary);
      margin-bottom: 24px;
    }

    /* 案例结构：Challenge → Solution → Result */
    .hc-section { margin-bottom: 22px; }
    .hc-section-head {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
      margin-bottom: 10px;
    }
    .hc-section-head .hc-sh-dot {
      width: 8px; height: 8px; border-radius: 50%;
    }
    .hc-section.challenge .hc-section-head { color: #e74c3c; }
    .hc-section.challenge .hc-sh-dot { background: #e74c3c; }
    .hc-section.solution .hc-section-head { color: var(--color-green-dark); }
    .hc-section.solution .hc-sh-dot { background: var(--color-green); }
    .hc-section.result .hc-section-head { color: var(--color-primary-deeper); }
    .hc-section.result .hc-sh-dot { background: var(--color-primary); }
    .hc-section p {
      font-size: 14px; color: var(--color-text-secondary);
      line-height: 1.8;
    }

    /* 引言 pull-quote */
    .hc-quote {
      position: relative;
      padding: 20px 22px 18px 28px;
      margin: 24px 0;
      background: linear-gradient(135deg, rgba(15,174,255,0.05), rgba(15,174,255,0.04));
      border-left: 3px solid var(--color-green);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      font-size: 14px; font-weight: 600;
      color: var(--color-text-primary);
      line-height: 1.7;
      font-style: italic;
    }
    .hc-quote::before {
      content: '"';
      position: absolute;
      top: 8px; left: 12px;
      font-size: 32px; font-weight: 900;
      color: var(--color-green);
      opacity: 0.25;
      font-style: normal;
      line-height: 1;
    }
    .hc-quote-author {
      display: block;
      margin-top: 10px;
      font-size: 12px; font-weight: 700; color: var(--color-text-muted);
      font-style: normal;
    }

    .hc-cta {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 8px;
      padding: 12px 28px;
      background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
      color: #fff;
      border-radius: var(--radius-full);
      font-size: 14px; font-weight: 700;
      box-shadow: 0 6px 20px rgba(15,174,255,0.3);
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .hc-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,174,255,0.4); }
    .hc-cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; }
    .hc-cta:hover svg { transform: translateX(3px); }

    /* ========================================================
       FEATURED CASES — 案例 2 & 3：并排深度卡
       ======================================================== */
    .featured-cases {
      padding: 80px 0;
      background: var(--color-bg-page);
      position: relative;
      overflow: hidden;
    }
    .featured-cases::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(15,174,255,0.12), transparent);
    }

    .fc-head {
      text-align: center;
      margin-bottom: 48px;
    }
    .fc-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 800;
      color: var(--color-primary);
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 12px;
    }
    .fc-eyebrow svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; }
    .fc-title {
      font-size: 32px; font-weight: 900;
      line-height: 1.25; letter-spacing: -0.02em;
      color: var(--color-text-primary);
    }

    .fc-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
    }

    /* 深度案例卡 */
    .fc-card {
      background: #fff;
      border-radius: var(--radius-2xl);
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,60,120,0.06);
      transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }
    .fc-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 56px rgba(0,60,120,0.12);
    }

    .fc-cover {
      position: relative;
      height: 220px;
      overflow: hidden;
    }
    .fc-cover-gradient {
      width: 100%; height: 100%;
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .fc-cover-gradient.theme-purple { background: linear-gradient(135deg, #7c5cfc 0%, #a78bfa 50%, #c4b5fd 100%); }
    .fc-cover-gradient.theme-orange { background: linear-gradient(135deg, #ff7849 0%, #ffa940 50%, #ffd580 100%); }
    .fc-cover-gradient::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.18), transparent 60%);
    }
    .fc-cover-icon {
      position: relative; z-index: 2;
      width: 64px; height: 64px;
      background: rgba(255,255,255,0.22);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 20px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .fc-cover-icon svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .fc-badge {
      position: absolute;
      top: 14px; left: 14px;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.05em;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 2;
    }
    .fc-badge.tag-hotel   { background: rgba(255,120,73,0.88); color: #fff; }
    .fc-badge.tag-school  { background: rgba(124,92,252,0.88); color: #fff; }

    .fc-body { padding: 22px 24px 20px; }
    .fc-industry {
      font-size: 11px; font-weight: 700;
      color: var(--color-text-muted);
      margin-bottom: 6px;
    }
    .fc-title {
      font-size: 18px; font-weight: 800;
      color: var(--color-text-primary);
      line-height: 1.45;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .fc-card:hover .fc-title { color: var(--color-green-dark); }

    /* 案例小结：Challenge → Result 一行 */
    .fc-summary {
      display: flex; gap: 12px;
      margin-bottom: 14px;
    }
    .fc-summary-item {
      flex: 1;
      padding: 10px 12px;
      background: var(--color-bg-page);
      border-radius: var(--radius-md);
    }
    .fc-si-label {
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.04em; text-transform: uppercase;
      margin-bottom: 4px;
    }
    .fc-si-label.c-problem { color: #e74c3c; }
    .fc-si-label.c-result  { color: var(--color-green-dark); }
    .fc-si-text {
      font-size: 12px; color: var(--color-text-secondary);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 关键指标行 */
    .fc-metrics {
      display: flex; gap: 16px;
      padding: 14px 16px;
      background: rgba(15,174,255,0.04);
      border-radius: var(--radius-md);
      margin-bottom: 14px;
    }
    .fc-metric { display: flex; flex-direction: column; gap: 1px; }
    .fc-metric-num {
      font-size: 22px; font-weight: 900;
      letter-spacing: -0.02em; line-height: 1;
    }
    .fc-metric-num.c-green  { color: var(--color-green-dark); }
    .fc-metric-num.c-blue   { color: var(--color-primary-deeper); }
    .fc-metric-num.c-orange { color: var(--color-orange); }
    .fc-metric-label { font-size: 10px; color: var(--color-text-muted); font-weight: 500; }

    .fc-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 14px;
      border-top: 1px solid rgba(15,174,255,0.07);
    }
    .fc-client {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
    }
    .fc-client-logo {
      width: 24px; height: 24px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 800; color: #fff;
    }
    .fc-client-logo.cl-purple { background: linear-gradient(135deg, #7c5cfc, #5b3cf6); }
    .fc-client-logo.cl-orange { background: linear-gradient(135deg, #ff7849, #ff5a2a); }
    .fc-arrow {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 12px; font-weight: 700; color: var(--color-green-dark);
      transition: gap 0.25s;
    }
    .fc-arrow svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; }
    .fc-card:hover .fc-arrow { gap: 8px; }
    .fc-card:hover .fc-arrow svg { transform: translateX(3px); }

    /* ========================================================
       MORE CASES — 更多案例：横向滚动卡片行
       ======================================================== */
    .more-cases {
      padding: 80px 0;
      background: #fff;
      position: relative;
      overflow: hidden;
    }
    .more-cases::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(15,174,255,0.12), transparent);
    }

    .mc-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 36px;
    }
    .mc-head-left { }
    .mc-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 800;
      color: var(--color-text-muted);
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 10px;
    }
    .mc-title {
      font-size: 30px; font-weight: 900;
      line-height: 1.25; letter-spacing: -0.02em;
      color: var(--color-text-primary);
    }
    /* 左右滚动箭头 */
    .mc-scroll-arrows {
      display: flex; gap: 8px;
    }
    .mc-arrow-btn {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: #fff;
      border: 1.5px solid var(--color-border-strong);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.25s;
      box-shadow: 0 2px 8px rgba(0,60,120,0.04);
    }
    .mc-arrow-btn:hover {
      border-color: var(--color-green);
      background: var(--color-green);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(15,174,255,0.25);
    }
    .mc-arrow-btn svg { width: 16px; height: 16px; stroke: var(--color-text-secondary); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s; }
    .mc-arrow-btn:hover svg { stroke: #fff; }

    /* 横向滚动容器 */
    .mc-scroll-wrap {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .mc-scroll-wrap::-webkit-scrollbar { display: none; }

    .mc-scroll {
      display: flex;
      gap: 20px;
      padding: 8px 0 24px;
    }

    /* 简要案例卡（横向滚动用） */
    .mc-card {
      flex: 0 0 280px;
      background: var(--color-bg-page);
      border-radius: var(--radius-xl);
      overflow: hidden;
      scroll-snap-align: start;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      border: 1.5px solid transparent;
    }
    .mc-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0,60,120,0.10);
      border-color: rgba(15,174,255,0.12);
    }

    .mc-cover {
      height: 130px;
      position: relative;
      overflow: hidden;
    }
    .mc-cover-gradient {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .mc-cover-gradient.theme-navy   { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
    .mc-cover-gradient.theme-blue   { background: linear-gradient(135deg, #0faeff, #5ed4ff, #a8eeff); }
    .mc-cover-gradient.theme-green  { background: linear-gradient(135deg, #0faeff, #5ed4ff, #a8eeff); }
    .mc-cover-gradient.theme-amber  { background: linear-gradient(135deg, #ffa940, #ffd580, #ffe8b0); }
    .mc-cover-icon {
      width: 44px; height: 44px;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
    }
    .mc-cover-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .mc-badge {
      position: absolute;
      top: 10px; left: 10px;
      padding: 3px 10px;
      border-radius: var(--radius-full);
      font-size: 9px; font-weight: 800;
      letter-spacing: 0.04em;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .mc-badge.tag-factory   { background: rgba(15,174,255,0.88); color: #fff; }
    .mc-badge.tag-commercial{ background: rgba(255,169,64,0.88); color: #fff; }
    .mc-badge.tag-medical  { background: rgba(15,174,255,0.88); color: #fff; }
    .mc-badge.tag-gov       { background: rgba(124,92,252,0.88); color: #fff; }

    .mc-body { padding: 16px 18px 14px; }
    .mc-industry {
      font-size: 10px; font-weight: 700;
      color: var(--color-text-muted);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .mc-title {
      font-size: 14px; font-weight: 800;
      color: var(--color-text-primary);
      line-height: 1.45;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mc-card:hover .mc-title { color: var(--color-green-dark); }

    /* 简要指标 */
    .mc-metric {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 12px;
    }
    .mc-m-num {
      font-size: 20px; font-weight: 900;
      letter-spacing: -0.02em;
    }
    .mc-m-num.c-green  { color: var(--color-green-dark); }
    .mc-m-num.c-blue   { color: var(--color-primary-deeper); }
    .mc-m-num.c-orange { color: var(--color-orange); }
    .mc-m-label { font-size: 11px; color: var(--color-text-muted); font-weight: 500; }

    .mc-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid rgba(15,174,255,0.06);
    }
    .mc-client {
      font-size: 11px; font-weight: 600; color: var(--color-text-muted);
    }
    .mc-link {
      font-size: 11px; font-weight: 700; color: var(--color-green-dark);
      display: inline-flex; align-items: center; gap: 3px;
      transition: gap 0.2s;
    }
    .mc-link svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .mc-card:hover .mc-link { gap: 6px; }

    /* ========================================================
       CTA Section
       ======================================================== */
    .cta-section {
      padding: 80px 0;
      background: linear-gradient(162deg, #0e1a2f 0%, #162040 100%);
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .cta-section::before {
      content: '';
      position: absolute;
      top: -100px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(15,174,255,0.08), transparent 65%);
      border-radius: 50%;
      pointer-events: none;
    }
    .cta-title {
      font-size: 34px; font-weight: 900;
      color: #fff;
      line-height: 1.25;
      margin-bottom: 16px;
    }
    .cta-title em { font-style: normal; color: var(--color-green-light); }
    .cta-desc {
      font-size: 15px; color: rgba(255,255,255,0.55);
      margin-bottom: 32px;
      max-width: 500px;
      margin-left: auto; margin-right: auto;
    }
    .cta-btns { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
    .cta-btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 32px;
      background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
      color: #fff;
      border-radius: var(--radius-full);
      font-size: 15px; font-weight: 700;
      box-shadow: 0 8px 24px rgba(15,174,255,0.3);
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,174,255,0.4); }
    .cta-btn-primary svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; }
    .cta-btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 32px;
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.15);
      color: #fff;
      border-radius: var(--radius-full);
      font-size: 15px; font-weight: 700;
      backdrop-filter: blur(8px);
      transition: background 0.25s, border-color 0.25s;
    }
    .cta-btn-secondary:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }


    /* ========================================================
       Reveal Animation
       ======================================================== */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    /* ========================================================
       Responsive
       ======================================================== */
    @media (max-width: 900px) {
      .ch-gallery { gap: 14px; }
      .gallery-card.gc-main { width: 260px; }
      .gallery-card.gc-side { width: 190px; }
      .hc-grid { grid-template-columns: 1fr; }
      .hc-cover-gradient { height: 280px; }
      .fc-grid { grid-template-columns: 1fr; }
      .mc-card { flex: 0 0 240px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .ch-title, .hc-title, .fc-title, .cta-title { font-size: 28px; }
      .cases-hero::before, .cases-hero::after { display: none; }
    }
    @media (max-width: 700px) {
      .ch-stats { padding: 16px 20px; gap: 0; flex-wrap: wrap; justify-content: center; }
      .ch-stat { padding: 0 20px; }
      .ch-stat:nth-child(2)::after { display: none; }
      .gallery-card.gc-main { width: 220px; }
      .gallery-card.gc-side { display: none; }
      .ch-gallery { gap: 0; }
    }
    @media (max-width: 540px) {
      .cases-hero { padding: 72px 0 50px; }
      .ch-title { font-size: 26px; }
      .ch-stats { flex-direction: column; gap: 12px; align-items: stretch; }
      .ch-stat { padding: 10px 0; text-align: center; }
      .ch-stat::after { display: none !important; }
      .hc-float-metric { flex-direction: column; gap: 10px; }
      .fc-summary { flex-direction: column; }
      .mc-card { flex: 0 0 220px; }
      .footer-grid { grid-template-columns: 1fr; }
    }