/* ===== Case Detail Page ===== */

/* Breadcrumb */
.cd-breadcrumb{padding:90px 0 0;background:var(--slate-50)}
.cd-breadcrumb .wrap{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--slate-400);padding-bottom:24px}
.cd-breadcrumb a{color:var(--slate-600);transition:color .2s}
.cd-breadcrumb a:hover{color:var(--blue-600)}
.cd-breadcrumb .current{color:var(--slate-800);font-weight:600}

/* Hero */
.cd-hero{padding:32px 0 64px;background:var(--slate-50);position:relative;overflow:hidden}
.cd-hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.06),transparent 70%);pointer-events:none}
.cd-hero-content{position:relative;z-index:1}
.cd-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.cd-hero-tags span{padding:6px 16px;border-radius:100px;font-size:.78rem;font-weight:600;background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100)}
.cd-hero-tags .cd-hero-ind{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.cd-hero-title{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--slate-900);margin-bottom:16px}
.cd-hero-desc{font-size:1.1rem;color:var(--slate-600);line-height:1.7;max-width:780px;margin-bottom:36px}
.cd-info-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px;background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--slate-200);box-shadow:var(--shadow)}
.cd-info-item{display:flex;align-items:center;gap:14px}
.cd-info-ico{width:44px;height:44px;border-radius:12px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cd-info-ico svg{width:22px;height:22px;color:var(--blue-600)}
.cd-info-label{font-size:.75rem;color:var(--slate-400);font-weight:500;margin-bottom:2px}
.cd-info-value{font-size:.95rem;color:var(--slate-900);font-weight:700}

/* Section */
.cd-section{padding:72px 0}
.cd-section.alt{background:var(--white)}
.cd-section-head{margin-bottom:48px}
.cd-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--blue-600);letter-spacing:.03em;margin-bottom:12px;text-transform:uppercase}
.cd-eyebrow::before{content:'';width:24px;height:2px;background:var(--blue-500);border-radius:1px}
.cd-section-head h2{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--slate-900);line-height:1.2}
.cd-section-head p{font-size:1rem;color:var(--slate-500);margin-top:10px;max-width:680px}

/* Challenge Bento */
.cd-challenge-bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:20px}
.cd-bento{padding:28px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--slate-200);transition:all .3s var(--ease)}
.cd-bento:hover{border-color:var(--blue-200);box-shadow:var(--shadow-md)}
.cd-bento-lg{grid-column:1;grid-row:1/3;padding:36px}
.cd-bento-lg h3{font-size:1.3rem;font-weight:700;color:var(--slate-900);margin-bottom:14px}
.cd-bento-lg p{font-size:.95rem;color:var(--slate-600);line-height:1.8}
.cd-bento-sm{display:flex;flex-direction:column;gap:10px}
.cd-bento-ico{width:40px;height:40px;border-radius:10px;background:var(--blue-50);display:flex;align-items:center;justify-content:center}
.cd-bento-ico svg{width:20px;height:20px;color:var(--blue-600)}
.cd-bento-sm h4{font-size:.95rem;font-weight:700;color:var(--slate-900)}
.cd-bento-sm p{font-size:.82rem;color:var(--slate-500);line-height:1.5}
.cd-bento-stat{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:linear-gradient(135deg,var(--blue-600),var(--blue-800));border-color:transparent}
.cd-bento-stat .num{font-size:2.2rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.cd-bento-stat .num span{font-size:1rem;font-weight:600;color:var(--blue-200)}
.cd-bento-stat .label{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:8px}

/* Solution */
.cd-solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.cd-solution-card{padding:32px 28px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--slate-200);transition:all .35s var(--ease);position:relative;overflow:hidden}
.cd-solution-card:hover{border-color:var(--blue-200);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.cd-sol-ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:var(--shadow-blue)}
.cd-sol-ico svg{width:26px;height:26px;color:#fff}
.cd-solution-card h3{font-size:1.15rem;font-weight:700;color:var(--slate-900);margin-bottom:10px;letter-spacing:-.01em}
.cd-solution-card>p{font-size:.9rem;color:var(--slate-500);line-height:1.6;margin-bottom:18px}
.cd-sol-features{display:flex;flex-direction:column;gap:8px}
.cd-sol-feature{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--slate-700);font-weight:500}
.cd-sol-feature svg{width:16px;height:16px;color:var(--blue-500);flex-shrink:0}

/* Architecture */
.cd-arch{padding:36px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--slate-900),var(--slate-800));position:relative;overflow:hidden}
.cd-arch::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue-500),var(--blue-300))}
.cd-arch h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:24px}
.cd-arch-layers{display:flex;flex-direction:column;gap:12px}
.cd-arch-layer{display:flex;align-items:center;gap:20px;padding:18px 24px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all .3s}
.cd-arch-layer:hover{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3)}
.cd-arch-layer-num{font-size:1.1rem;font-weight:800;color:var(--blue-400);width:36px;flex-shrink:0}
.cd-arch-layer-title{font-size:1rem;font-weight:700;color:#fff;min-width:80px;flex-shrink:0}
.cd-arch-layer-desc{font-size:.85rem;color:rgba(148,163,184,.9);line-height:1.5}

/* Comparison */
.cd-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cd-compare-side{padding:36px;border-radius:var(--radius-xl);position:relative;overflow:hidden}
.cd-compare-before{background:var(--slate-100);border:1px solid var(--slate-200)}
.cd-compare-after{background:var(--blue-50);border:1px solid var(--blue-100)}
.cd-compare-label{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:100px;font-size:.82rem;font-weight:600;margin-bottom:18px}
.cd-compare-before .cd-compare-label{background:var(--slate-200);color:var(--slate-600)}
.cd-compare-after .cd-compare-label{background:var(--blue-200);color:var(--blue-800)}
.cd-compare-label svg{width:16px;height:16px}
.cd-compare-side h3{font-size:1.15rem;font-weight:700;color:var(--slate-900);margin-bottom:18px}
.cd-compare-list{display:flex;flex-direction:column;gap:12px}
.cd-compare-item{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--slate-700);line-height:1.5}
.cd-compare-item svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.cd-compare-before .cd-compare-item svg{color:var(--slate-400)}
.cd-compare-after .cd-compare-item svg{color:var(--blue-600)}

/* Results */
.cd-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px}
.cd-result-card{padding:32px 24px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--slate-200);text-align:center;transition:all .35s var(--ease);position:relative;overflow:hidden}
.cd-result-card:hover{border-color:var(--blue-200);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.cd-result-icon{width:48px;height:48px;border-radius:12px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cd-result-icon svg{width:24px;height:24px;color:var(--blue-600)}
.cd-result-num{font-size:2.4rem;font-weight:800;color:var(--blue-600);letter-spacing:-.02em;line-height:1}
.cd-result-num span{font-size:1.2rem;font-weight:700}
.cd-result-label{font-size:.92rem;font-weight:600;color:var(--slate-800);margin-top:10px}
.cd-result-desc{font-size:.8rem;color:var(--slate-400);margin-top:4px}

/* Progress */
.cd-progress{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;padding:36px;border-radius:var(--radius-xl);background:var(--white);border:1px solid var(--slate-200)}
.cd-progress-item{display:grid;grid-template-columns:120px 1fr 50px;align-items:center;gap:16px}
.cd-progress-label{font-size:.88rem;font-weight:600;color:var(--slate-700)}
.cd-progress-track{height:8px;border-radius:4px;background:var(--slate-100);overflow:hidden}
.cd-progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue-500),var(--blue-400));transition:width 1.2s var(--ease-out)}
.cd-progress-value{font-size:.88rem;font-weight:700;color:var(--blue-600);text-align:right}

/* Tech */
.cd-tech{display:flex;flex-wrap:wrap;gap:12px}
.cd-tech-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;background:var(--white);border:1px solid var(--slate-200);font-size:.88rem;font-weight:600;color:var(--slate-700);transition:all .25s var(--ease)}
.cd-tech-badge:hover{border-color:var(--blue-300);color:var(--blue-600);background:var(--blue-50)}
.cd-tech-badge svg{width:18px;height:18px;color:var(--blue-500)}

/* Highlights */
.cd-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cd-highlight{padding:32px 28px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--slate-200);position:relative;overflow:hidden;transition:all .35s var(--ease)}
.cd-highlight:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--blue-200)}
.cd-highlight::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-500),var(--blue-300))}
.cd-highlight-num{font-size:2.4rem;font-weight:800;color:var(--blue-100);line-height:1;letter-spacing:-.02em;margin-bottom:12px}
.cd-highlight h3{font-size:1.1rem;font-weight:700;color:var(--slate-900);margin-bottom:8px}
.cd-highlight p{font-size:.88rem;color:var(--slate-500);line-height:1.6}

/* Timeline */
.cd-timeline{position:relative;padding-left:40px}
.cd-timeline::before{content:'';position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue-500),var(--blue-200))}
.cd-tl-item{position:relative;margin-bottom:32px}
.cd-tl-item:last-child{margin-bottom:0}
.cd-tl-dot{position:absolute;left:-33px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--blue-600);border:3px solid var(--white);box-shadow:0 0 0 3px var(--blue-100)}
.cd-tl-card{padding:24px 28px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--slate-200);transition:all .3s var(--ease)}
.cd-tl-card:hover{border-color:var(--blue-200);box-shadow:var(--shadow-md)}
.cd-tl-date{display:inline-block;font-size:.78rem;font-weight:700;color:var(--blue-600);padding:4px 12px;border-radius:6px;background:var(--blue-50);margin-bottom:10px}
.cd-tl-card h4{font-size:1.05rem;font-weight:700;color:var(--slate-900);margin-bottom:6px}
.cd-tl-card p{font-size:.88rem;color:var(--slate-500);line-height:1.6}

/* Scope */
.cd-scope{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cd-scope-item{padding:28px 24px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--slate-200);text-align:center;transition:all .3s var(--ease)}
.cd-scope-item:hover{border-color:var(--blue-200);box-shadow:var(--shadow-md)}
.cd-scope-ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--blue-50),var(--blue-100));display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cd-scope-ico svg{width:24px;height:24px;color:var(--blue-600)}
.cd-scope-text h4{font-size:.95rem;font-weight:700;color:var(--slate-900);margin-bottom:4px}
.cd-scope-text p{font-size:.82rem;color:var(--slate-500)}

/* Testimonial */
.cd-testimonial{max-width:820px;margin:0 auto;padding:48px 40px;border-radius:var(--radius-xl);background:var(--white);border:1px solid var(--slate-200);box-shadow:var(--shadow-md);text-align:center;position:relative}
.cd-testimonial::before{content:'"';position:absolute;top:16px;left:32px;font-size:5rem;font-weight:800;color:var(--blue-100);line-height:1;font-family:Georgia,serif}
.cd-testimonial-rating{display:flex;justify-content:center;gap:4px;margin-bottom:20px}
.cd-testimonial-rating svg{width:20px;height:20px;color:var(--amber);fill:var(--amber)}
.cd-testimonial-text{font-size:1.1rem;color:var(--slate-700);line-height:1.8;font-style:italic;margin-bottom:24px}
.cd-testimonial-author{display:flex;align-items:center;justify-content:center;gap:14px}
.cd-testimonial-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:700}
.cd-testimonial-info{text-align:left}
.cd-testimonial-info h4{font-size:1rem;font-weight:700;color:var(--slate-900)}
.cd-testimonial-info p{font-size:.85rem;color:var(--slate-500)}

/* Related */
.cd-related{padding:72px 0;background:var(--slate-50)}
.cd-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cd-related-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--slate-200);transition:all .35s var(--ease);display:block}
.cd-related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-200)}
.cd-related-img{height:160px;background-size:cover;background-position:center;position:relative}
.cd-related-img-label{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:100px;background:rgba(255,255,255,.9);font-size:.72rem;font-weight:600;color:var(--blue-700)}
.cd-related-body{padding:22px 20px}
.cd-related-body h3{font-size:1rem;font-weight:700;color:var(--slate-900);margin-bottom:6px;line-height:1.4}
.cd-related-body p{font-size:.85rem;color:var(--slate-500);margin-bottom:12px}
.cd-related-arrow{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--blue-600)}
.cd-related-arrow svg{width:14px;height:14px}

/* CTA Banner */
.cd-cta-banner{padding:48px 40px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--blue-600),var(--blue-800));text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-blue)}
.cd-cta-banner::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%)}
.cd-cta-banner h2{font-size:1.8rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:10px;position:relative;z-index:1}
.cd-cta-banner p{font-size:1rem;color:rgba(255,255,255,.75);margin-bottom:24px;position:relative;z-index:1}
.cd-cta-banner .btn-primary{position:relative;z-index:1}

/* Responsive */
@media(max-width:968px){
  .cd-hero-title{font-size:2.1rem}
  .cd-info-bar{grid-template-columns:repeat(2,1fr)}
  .cd-challenge-bento{grid-template-columns:1fr 1fr}
  .cd-bento-lg{grid-column:1/3;grid-row:1}
  .cd-solution-grid{grid-template-columns:1fr}
  .cd-compare{grid-template-columns:1fr}
  .cd-results-grid{grid-template-columns:repeat(2,1fr)}
  .cd-progress{grid-template-columns:1fr}
  .cd-highlights{grid-template-columns:1fr}
  .cd-scope{grid-template-columns:repeat(2,1fr)}
  .cd-related-grid{grid-template-columns:1fr 1fr}
  .cd-arch-layer{flex-wrap:wrap}
  .cd-arch-layer-desc{min-width:100%}
}
@media(max-width:640px){
  .cd-hero-title{font-size:1.7rem}
  .cd-hero-desc{font-size:.95rem}
  .cd-info-bar{grid-template-columns:1fr;gap:12px;padding:20px}
  .cd-section{padding:48px 0}
  .cd-section-head h2{font-size:1.5rem}
  .cd-challenge-bento{grid-template-columns:1fr}
  .cd-bento-lg{grid-column:1;grid-row:auto;padding:24px}
  .cd-results-grid{grid-template-columns:1fr}
  .cd-progress-item{grid-template-columns:1fr;gap:6px}
  .cd-progress-value{text-align:left}
  .cd-scope{grid-template-columns:1fr}
  .cd-related-grid{grid-template-columns:1fr}
  .cd-testimonial{padding:32px 24px}
  .cd-testimonial-text{font-size:.95rem}
  .cd-cta-banner{padding:36px 24px}
  .cd-cta-banner h2{font-size:1.4rem}
}