@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  font-weight: 400;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --c-brand-600: #2563eb;
  --radius-card: 20px;
  --radius-btn: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px -5px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 60px -10px rgba(0,0,0,0.12);
  --shadow-brand: 0 8px 30px -4px rgba(37,99,235,0.35);
  --shadow-brand-lg: 0 16px 50px -8px rgba(37,99,235,0.45);
  --transition-fast: 0.15s cubic-bezier(0.16,1,0.3,1);
  --transition-med: 0.25s cubic-bezier(0.16,1,0.3,1);
  --transition-slow: 0.4s cubic-bezier(0.16,1,0.3,1);
}

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
  .scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
  .scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
  .dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #374151; }
}

.text-gradient-brand {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-hero {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 40%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-green {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-eyebrow {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 0.75rem;
}
.dark .section-eyebrow { color: #60a5fa; }

.section-heading {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #0f172a;
}
.dark .section-heading { color: #f8fafc; }

.glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.5);
}
.dark .glass {
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(255,255,255,0.07);
}

.glass-card:not([class*="bg-gradient"]) {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
}
.dark .glass-card:not([class*="bg-gradient"]) {
  background: rgba(30,30,50,0.6);
  border: 1px solid rgba(99,102,241,0.15);
}

.card-premium {
  background: #ffffff;
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-fast);
}
.dark .card-premium {
  background: #111827;
  border-color: rgba(55,65,81,0.7);
  box-shadow: none;
}
.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(59,130,246,0.2);
}
.dark .card-premium:hover {
  border-color: rgba(59,130,246,0.25);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.35);
}

.hover-lift {
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-fast);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  border: none;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-brand);
  cursor: pointer;
  transition: all var(--transition-med);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%);
  box-shadow: var(--shadow-brand-lg);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1e293b;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-med);
  text-decoration: none;
  white-space: nowrap;
}
.dark .btn-secondary { color: #f1f5f9; background: #1f2937; border-color: #374151; }
.btn-secondary:hover { background: #f8fafc; border-color: #bfdbfe; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dark .btn-secondary:hover { background: #111827; border-color: #3b82f6; }

.btn-submit, form:not(#logout-form):not(.inline-logout-form) button[type="submit"] {
  background: linear-gradient(135deg, #1a3c6b 0%, #2563eb 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px 0 rgba(37,99,235,0.35);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.btn-submit:hover, form:not(#logout-form):not(.inline-logout-form) button[type="submit"]:hover {
  background: linear-gradient(135deg, #0f2748 0%, #1d4ed8 100%);
  box-shadow: 0 6px 20px 0 rgba(37,99,235,0.45);
  transform: translateY(-2px);
}

.icon-bubble {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-med);
}
.icon-bubble svg { width: 24px; height: 24px; }
.group:hover .icon-bubble { transform: scale(1.08); }

.icon-bubble-blue { background: linear-gradient(135deg,#dbeafe,#eff6ff); color: #2563eb; }
.icon-bubble-indigo { background: linear-gradient(135deg,#e0e7ff,#eef2ff); color: #4338ca; }
.icon-bubble-purple { background: linear-gradient(135deg,#ede9fe,#f5f3ff); color: #7c3aed; }
.icon-bubble-emerald { background: linear-gradient(135deg,#d1fae5,#ecfdf5); color: #059669; }
.icon-bubble-rose { background: linear-gradient(135deg,#fee2e2,#fff1f2); color: #dc2626; }
.icon-bubble-amber { background: linear-gradient(135deg,#fef3c7,#fffbeb); color: #d97706; }
.icon-bubble-teal { background: linear-gradient(135deg,#ccfbf1,#f0fdfa); color: #0d9488; }
.icon-bubble-orange { background: linear-gradient(135deg,#ffedd5,#fff7ed); color: #ea580c; }

.dark .icon-bubble-blue { background: rgba(37,99,235,0.15); color: #60a5fa; }
.dark .icon-bubble-indigo { background: rgba(67,56,202,0.15); color: #818cf8; }
.dark .icon-bubble-purple { background: rgba(124,58,237,0.15); color: #a78bfa; }
.dark .icon-bubble-emerald { background: rgba(5,150,105,0.15); color: #34d399; }
.dark .icon-bubble-rose { background: rgba(220,38,38,0.15); color: #f87171; }
.dark .icon-bubble-amber { background: rgba(217,119,6,0.15); color: #fbbf24; }
.dark .icon-bubble-teal { background: rgba(13,148,136,0.15); color: #2dd4bf; }
.dark .icon-bubble-orange { background: rgba(234,88,12,0.15); color: #fb923c; }

.metric-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.625rem;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: background var(--transition-fast);
}
.dark .metric-box { background: rgba(15,23,42,0.6); border-color: rgba(55,65,81,0.5); }
.metric-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 0.25rem; }
.metric-value { font-family: "Outfit", sans-serif; font-size: 0.875rem; font-weight: 800; color: #0f172a; }
.dark .metric-value { color: #f1f5f9; }

.sidebar-active { background: #f0f5ff !important; border-left: 4px solid #2563eb !important; box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.dark .sidebar-active { background: rgba(37,99,235,0.15) !important; border-left: 4px solid #3b82f6 !important; }
.sidebar-active h3, .sidebar-active span { color: #1a3c6b !important; font-weight: 700 !important; }
.dark .sidebar-active h3, .dark .sidebar-active span { color: #93c5fd !important; }

#mobileSidebarDrawer { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
#mobileSidebarDrawer.drawer-open { transform: translateX(0); }
#drawerOverlay { transition: opacity 0.3s ease; }

.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.badge-paid { background: #dcfce7; color: #166534; }
.badge-pending { background: #fef9c3; color: #854d0e; }
.badge-overdue { background: #fee2e2; color: #991b1b; }
.badge-draft { background: #f3f4f6; color: #374151; }
.dark .badge-paid { background: rgba(22,163,74,0.2); color: #86efac; }
.dark .badge-pending { background: rgba(202,138,4,0.2); color: #fde047; }
.dark .badge-overdue { background: rgba(220,38,38,0.2); color: #fca5a5; }
.dark .badge-draft { background: rgba(75,85,99,0.4); color: #d1d5db; }

.quick-actions { opacity: 0; transform: translateX(8px); transition: all 0.2s ease; pointer-events: none; }
tr:hover .quick-actions { opacity: 1; transform: translateX(0); pointer-events: auto; }
.kpi-card { transition: all 0.25s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.15); }
.sparkline-svg { overflow: visible; }

.acct-badge-system { background: #e5edff; color: #1a3c6b; }
.acct-badge-client { background: #dcfce7; color: #166534; }
.acct-badge-provider { background: #fef3c7; color: #92400e; }
.acct-badge-partner { background: #ede9fe; color: #5b21b6; }
.acct-badge-custom { background: #f3f4f6; color: #374151; }
.dark .acct-badge-system { background: rgba(37,99,235,0.2); color: #93c5fd; }
.dark .acct-badge-client { background: rgba(22,163,74,0.2); color: #86efac; }
.dark .acct-badge-provider { background: rgba(202,138,4,0.2); color: #fde047; }
.dark .acct-badge-partner { background: rgba(139,92,246,0.2); color: #c4b5fd; }
.dark .acct-badge-custom { background: rgba(75,85,99,0.3); color: #d1d5db; }

.group-header { cursor: pointer; user-select: none; }
.group-header:hover { background: rgba(37,99,235,0.05); }

.page-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
.page-btn:hover { background: #f0f5ff; border-color: #2563eb; color: #1a3c6b; }
.page-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
.dark .page-btn { border-color: #374151; color: #d1d5db; background: #1f2937; }
.dark .page-btn:hover { background: #1e3a8a; border-color: #3b82f6; color: #93c5fd; }
.dark .page-btn.active { background: #2563eb; color: white; }

.admin-header-gradient { background: linear-gradient(135deg, #1a3c6b 0%, #2563eb 100%); }

input, select, textarea {
  @apply rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-4 py-2.5 w-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 outline-none transition-all;
}

.reveal { opacity: 1; transform: translateY(0); }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.js .reveal-child:nth-child(1) { transition-delay: 0ms; }
.js .reveal-child:nth-child(2) { transition-delay: 80ms; }
.js .reveal-child:nth-child(3) { transition-delay: 160ms; }
.js .reveal-child:nth-child(4) { transition-delay: 240ms; }
.js .reveal-child:nth-child(5) { transition-delay: 320ms; }
.js .reveal-child:nth-child(6) { transition-delay: 400ms; }

.js .fade-in-up { opacity: 1; transform: translateY(0); transition: all 0.6s ease-out; will-change: opacity, transform; }
.fade-in-up.visible { opacity: 1 !important; transform: translateY(0) !important; }
.js .fade-in { opacity: 1; transition: opacity 0.5s ease-out; }
.fade-in.visible { opacity: 1 !important; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes grid-flow { 0% { transform: translateY(0) scale(1); opacity: 0.1; } 50% { transform: translateY(-20px) scale(1.05); opacity: 0.2; } 100% { transform: translateY(0) scale(1); opacity: 0.1; } }
@keyframes data-flow { 0% { transform: translateX(-10%) translateY(0); opacity: 0; } 20% { opacity: 0.4; } 80% { opacity: 0.4; } 100% { transform: translateX(110%) translateY(50px); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px rgba(59,130,246,0.2); } 50% { box-shadow: 0 0 24px rgba(59,130,246,0.45); } }
@keyframes gradient-slow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes gradient-xy { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes neural-pulse { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ai-breathe { 0%, 100% { transform: scale(1); opacity: 0.3; filter: blur(40px); } 50% { transform: scale(1.1); opacity: 0.5; filter: blur(60px); } }
@keyframes flow-line { 0% { stroke-dashoffset: 100; opacity: 0.3; } 50% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0.3; } }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }
@keyframes counter { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } }

.animate-grid-slow { animation: grid-flow 25s ease-in-out infinite; }
.animate-data-flow-slow { animation: data-flow 20s linear infinite; }
.animate-ai-breathe { animation: ai-breathe 10s ease-in-out infinite; }
.animate-gradient-slow { background-size: 400% 400%; animation: gradient-slow 30s ease infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-scale-in { animation: scale-in 0.3s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-fade-in { animation: fade-in 0.4s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-slide-in-right { animation: slide-in-right 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-breathe { animation: breathe 4s ease-in-out infinite; }
.animate-heartbeat { animation: heartbeat 3s ease-in-out infinite; }
.animate-neural { animation: neural-pulse 8s ease-in-out infinite; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-gradient-motion { background-size: 200% 200%; animation: gradient-xy 20s ease infinite; }
.animate-flow-line { stroke-dasharray: 20; animation: flow-line 3s linear infinite; }
.animate-grid { animation: grid-flow 20s linear infinite; }
.animate-data-flow { animation: data-flow 15s linear infinite; }
.fade-in { animation: fade-in 0.5s ease-out forwards; }
.toast-progress { animation: toastProgress linear forwards; }
.counter-animate { animation: counter 0.15s ease-out forwards; }

.glow-primary { box-shadow: 0 0 15px rgba(37,99,235,0.15); transition: box-shadow 0.3s ease; }
.glow-primary:hover { box-shadow: 0 0 25px rgba(37,99,235,0.3); }
.glow-secondary { box-shadow: 0 0 15px rgba(139,92,246,0.15); transition: box-shadow 0.3s ease; }
.glow-secondary:hover { box-shadow: 0 0 25px rgba(139,92,246,0.3); }
.glow-emerald { box-shadow: 0 0 15px rgba(16,185,129,0.15); transition: box-shadow 0.3s ease; }
.glow-emerald:hover { box-shadow: 0 0 25px rgba(16,185,129,0.3); }
.glow-rose { box-shadow: 0 0 15px rgba(239,68,68,0.15); transition: box-shadow 0.3s ease; }
.glow-rose:hover { box-shadow: 0 0 25px rgba(239,68,68,0.3); }
.glow-indigo { box-shadow: 0 0 15px rgba(99,102,241,0.15); transition: box-shadow 0.3s ease; }
.glow-indigo:hover { box-shadow: 0 0 25px rgba(99,102,241,0.3); }
.glow-amber { box-shadow: 0 0 15px rgba(245,158,11,0.15); transition: box-shadow 0.3s ease; }
.glow-amber:hover { box-shadow: 0 0 25px rgba(245,158,11,0.3); }

.progress-bar { height: 4px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.dark .progress-bar { background: #374151; }
.progress-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg,#2563eb,#3b82f6); transition: width 0.8s cubic-bezier(0.16,1,0.3,1); }

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  background: linear-gradient(135deg,#1d4ed8,#2563eb);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 9999px; background: #e2e8f0; outline: none; padding: 0; border: none; box-shadow: none; }
.dark input[type=range] { background: #374151; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 20px; width: 20px; border-radius: 50%;
  background: linear-gradient(135deg,#1d4ed8,#3b82f6);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15), 0 2px 8px rgba(37,99,235,0.4);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(59,130,246,0.2), 0 4px 12px rgba(37,99,235,0.5); }
.dark input[type=range]::-webkit-slider-thumb { background: linear-gradient(135deg,#2563eb,#3b82f6); box-shadow: 0 0 0 4px rgba(59,130,246,0.2), 0 2px 8px rgba(59,130,246,0.5); }

.faq-toggle-icon { width: 20px; height: 20px; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; opacity: 0; }
.faq-item.open .faq-answer { max-height: 400px; opacity: 1; }
.faq-item.open .faq-toggle-icon { transform: rotate(45deg); }

.skeleton-row td { background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; }
.dark .skeleton-row td { background: linear-gradient(90deg,#374151 25%,#4b5563 50%,#374151 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.text-transparent { color: transparent; }

.transition-colors { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }
.will-change-shadow { will-change: box-shadow; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important; animation-duration: 1ms !important;
    animation-iteration-count: 1 !important; background-attachment: initial !important;
    scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important;
  }
}

.hero-stat {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 0.75rem 1.25rem;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.dark .hero-stat { background: rgba(30,41,59,0.6); border-color: rgba(255,255,255,0.08); }

.pain-card {
  background: rgba(15,23,42,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px; padding: 2rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.pain-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -12px rgba(0,0,0,0.4); }
.pain-card.pain-rose:hover { border-color: rgba(239,68,68,0.5); }
.pain-card.pain-amber:hover { border-color: rgba(245,158,11,0.5); }
.pain-card.pain-blue:hover { border-color: rgba(59,130,246,0.5); }

.pillar-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.75rem; background: #f8fafc; border: 1px solid #f1f5f9;
  border-radius: 18px; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); cursor: default;
}
.dark .pillar-card { background: rgba(15,23,42,0.5); border-color: rgba(55,65,81,0.5); }
.pillar-card:hover { background: #ffffff; border-color: #bfdbfe; box-shadow: 0 12px 40px -8px rgba(37,99,235,0.12); transform: translateY(-3px); }
.dark .pillar-card:hover { background: rgba(30,41,59,0.7); border-color: rgba(59,130,246,0.3); box-shadow: 0 12px 40px -8px rgba(0,0,0,0.3); }

.ve-feature-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  background: #ffffff; border: 1px solid #f1f5f9; border-radius: 18px;
  padding: 1.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.dark .ve-feature-card { background: rgba(15,23,42,0.6); border-color: rgba(55,65,81,0.5); box-shadow: none; }
.ve-feature-card:hover { border-color: #bfdbfe; box-shadow: 0 16px 40px -8px rgba(37,99,235,0.12); transform: translateY(-4px); }
.dark .ve-feature-card:hover { border-color: rgba(59,130,246,0.3); box-shadow: 0 16px 40px -8px rgba(0,0,0,0.3); }

.employee-card {
  background: #ffffff; border-radius: 20px; border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06); overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.dark .employee-card { background: #111827; border-color: rgba(55,65,81,0.7); box-shadow: none; }
.employee-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px -12px rgba(0,0,0,0.12); }
.dark .employee-card:hover { box-shadow: 0 20px 60px -12px rgba(0,0,0,0.4); }
.employee-card.flagship { border-color: #2563eb; box-shadow: 0 4px 16px rgba(37,99,235,0.12); }
.dark .employee-card.flagship { border-color: #2563eb; box-shadow: 0 4px 16px rgba(37,99,235,0.2); }
.employee-card.flagship:hover { box-shadow: 0 20px 60px -12px rgba(37,99,235,0.2); }

.hire-step {
  display: flex; align-items: flex-start; gap: 1.25rem;
  background: #ffffff; border: 1px solid #f1f5f9; border-radius: 20px;
  padding: 1.75rem; position: relative; transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.dark .hire-step { background: rgba(15,23,42,0.5); border-color: rgba(55,65,81,0.5); }
.hire-step:hover { border-color: #dbeafe; box-shadow: 0 16px 40px -8px rgba(37,99,235,0.1); transform: translateY(-4px); }
.dark .hire-step:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 16px 40px -8px rgba(0,0,0,0.3); }

.capability-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.6);
  border-radius: 18px; padding: 1.75rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.dark .capability-card { background: rgba(15,23,42,0.6); border-color: rgba(255,255,255,0.06); }
.capability-card:hover { background: rgba(255,255,255,1); border-color: #bfdbfe; box-shadow: 0 16px 40px -8px rgba(37,99,235,0.12); transform: translateY(-4px); }
.dark .capability-card:hover { background: rgba(30,41,59,0.8); border-color: rgba(59,130,246,0.3); box-shadow: 0 16px 40px -8px rgba(0,0,0,0.3); }

.fit-card-for { background: linear-gradient(135deg,#f0fdf4,#ecfdf5); border: 1.5px solid #a7f3d0; border-radius: 20px; padding: 2rem; }
.dark .fit-card-for { background: rgba(5,150,105,0.08); border-color: rgba(52,211,153,0.2); }
.fit-card-not { background: linear-gradient(135deg,#fff1f2,#fef2f2); border: 1.5px solid #fecaca; border-radius: 20px; padding: 2rem; }
.dark .fit-card-not { background: rgba(220,38,38,0.08); border-color: rgba(252,165,165,0.2); }

.contact-card {
  background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 20px;
  padding: 2rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.dark .contact-card { background: rgba(15,23,42,0.6); border-color: rgba(55,65,81,0.5); box-shadow: none; }
.contact-card:hover { border-color: #bfdbfe; box-shadow: 0 12px 40px -8px rgba(37,99,235,0.15); transform: translateY(-4px); }
.dark .contact-card:hover { border-color: rgba(59,130,246,0.3); box-shadow: 0 12px 40px -8px rgba(0,0,0,0.35); }

.analytics-card {
  background: #ffffff; border: 1px solid #f1f5f9; border-radius: 20px;
  padding: 2rem; box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column;
}
.dark .analytics-card { background: rgba(15,23,42,0.5); border-color: rgba(55,65,81,0.5); box-shadow: none; }
.analytics-card:hover { border-color: #bfdbfe; box-shadow: 0 20px 50px -12px rgba(37,99,235,0.12); transform: translateY(-4px); }
.dark .analytics-card:hover { border-color: rgba(59,130,246,0.3); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.35); }

@layer components {
  .bg-primary-50 { @apply bg-blue-50 dark:bg-blue-900/20; }
  .bg-secondary-50 { @apply bg-purple-50 dark:bg-purple-900/20; }
  .text-primary-600 { @apply text-blue-600 dark:text-blue-400; }
  .border-primary-500 { @apply border-blue-500 dark:border-blue-400; }
}