/* ===================== CASES — INTRO ===================== */
#cases-head {
  position: relative;
  padding: 170px 0 60px;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
}
#cases-head::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(123,45,255,.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,204,255,.06), transparent 70%);
  pointer-events: none;
}
#cases-head::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 44px);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, rgba(0,0,0,.6), transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, rgba(0,0,0,.6), transparent 80%);
  pointer-events: none;
}
.cs-head-inner {
  position: relative; z-index: 2;
  max-width: 820px; margin: 0 auto; padding: 0 32px;
}
.cs-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--purple);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(123,45,255,.06);
  border: 1px solid rgba(123,45,255,.2);
  margin-bottom: 24px;
  opacity: 0; animation: fade-up .7s var(--ease) .2s both;
}
.cs-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 8px rgba(123,45,255,.6);
  animation: pulse 1.8s ease-in-out infinite;
}
.cs-title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 300; line-height: 1.04;
  letter-spacing: -.025em;
  color: #fff; margin: 0 0 18px;
  opacity: 0; animation: fade-up .8s var(--ease) .5s both;
}
.cs-title .accent {
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-sub {
  font-size: 15px; font-weight: 300;
  color: #a9aebf; line-height: 1.7;
  max-width: 620px; margin: 0 auto 28px;
  opacity: 0; animation: fade-up .8s var(--ease) .9s both;
}
.cs-head-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: #aaa;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  transition: all .3s;
  opacity: 0; animation: fade-up .8s var(--ease) 1.1s both;
}
.cs-head-cta:hover {
  color: #fff;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  gap: 14px;
}
.cs-head-cta svg { transition: transform .3s; }
.cs-head-cta:hover svg { transform: translateY(2px); }

/* ===================== CASE CARDS ===================== */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.cs-card {
  position: relative;
  padding: 40px 36px 36px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .3s;
}
.cs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity .4s;
}
.cs-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,204,255,.2);
  box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 0 50px rgba(0,204,255,.06);
}
.cs-card:hover::before { opacity: 1; }

.cs-card.purple::before { background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.cs-card.purple:hover { border-color: rgba(123,45,255,.25); box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 0 50px rgba(123,45,255,.06); }

.cs-card.green::before { background: linear-gradient(90deg, transparent, #22c55e, transparent); }
.cs-card.green:hover { border-color: rgba(34,197,94,.25); box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 0 50px rgba(34,197,94,.06); }

.cs-client {
  font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}
.cs-card.purple .cs-client { color: var(--purple); }
.cs-card.green .cs-client { color: #22c55e; }

.cs-card h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400; color: #fff;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin-bottom: 22px;
}
.cs-metric {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 0;
  margin-bottom: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cs-metric-val {
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.cs-metric-label {
  font-size: 12.5px; font-weight: 300;
  color: #a9aebf; line-height: 1.5;
}
.cs-metric-label strong { color: #bbb; font-weight: 500; }

.cs-desc {
  font-size: 13.5px; font-weight: 300;
  color: #b3b8c8; line-height: 1.7;
  margin-bottom: 22px;
}
.cs-desc strong { color: #ddd; font-weight: 500; }

.cs-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,204,255,.06);
  border: 1px solid rgba(0,204,255,.18);
}
.cs-card.purple .cs-tag {
  color: var(--purple);
  background: rgba(123,45,255,.06);
  border-color: rgba(123,45,255,.18);
}
.cs-card.green .cs-tag {
  color: #22c55e;
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.18);
}

/* ===================== FEATURES ===================== */
.cs-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.cs-feature {
  padding: 28px 26px 24px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  transition: transform .4s var(--ease), border-color .3s;
}
.cs-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(0,204,255,.18);
}
.cs-feature-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  background: rgba(0,204,255,.08);
  border: 1px solid rgba(0,204,255,.2);
  margin-bottom: 18px;
  transition: transform .4s var(--ease);
}
.cs-feature:hover .cs-feature-ic {
  transform: rotate(-5deg) scale(1.05);
}
.cs-feature-ic.purple { color: var(--purple); background: rgba(123,45,255,.08); border-color: rgba(123,45,255,.2); }
.cs-feature-ic.green { color: #22c55e; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); }
.cs-feature-ic.blue { color: #6699ff; background: rgba(0,102,255,.08); border-color: rgba(0,102,255,.2); }

.cs-feature h3 {
  font-size: 15px; font-weight: 500;
  color: #ddd; margin-bottom: 10px;
  letter-spacing: -.005em;
  line-height: 1.35;
}
.cs-feature p {
  font-size: 12.5px; font-weight: 300;
  color: #9ea3b4; line-height: 1.65;
}

@media (max-width: 1024px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #cases-head { padding: 130px 0 40px; }
  .cs-head-inner { padding: 0 20px; }
  .cs-title { font-size: 40px; }
  .cs-card { padding: 32px 24px 28px; }
  .cs-features { grid-template-columns: 1fr; }
}