@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --primary: #6366f1;
}

/* Base */
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Hero */
.case-study-hero {
  background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(0,0,0,1) 100%);
}

/* Before/After */
.before-after-container {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.before-after-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.before-after-before {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.before-after-before img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.before-after-handle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255,255,255,0.9);
  cursor: ew-resize;
  z-index: 10;
}
.before-after-handle:after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Cards and panels */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-indigo-50 { background-color: rgba(99,102,241,0.06); }
.text-gray-600 { color: #4b5563; }
.text-gray-300 { color: #d1d5db; }
.text-indigo-600 { color: #4f46e5; }

/* Ripple effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(2.5); opacity: 0; } }

/* Dark theme overrides */
.dark body { background: #0b1220; color: #f3f4f6; }
.dark .case-study-hero { background: linear-gradient(135deg, rgba(79,70,229,0.18) 0%, rgba(0,0,0,1) 100%); }
.dark .bg-gray-50 { background-color: #111827; }
.dark .bg-gray-100 { background-color: #0f1724; }
.dark .text-gray-600, .dark .text-gray-300 { color: #9ca3af; }
.dark .before-after-handle { background: rgba(255,255,255,0.9); }

/* Small helpers */
.container { max-width: 1100px; margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .before-after-container { height: 320px; }
}