/* Custom Styles and Theme Variables */
:root {
  --radius: 0.875rem;

  /* Theme Colors */
  --primary: #0EA5E9; /* oklch(0.7 0.15 230) */
  --primary-glow: #38BDF8; /* oklch(0.82 0.12 220) */
  --navy: #0F172A; /* oklch(0.24 0.06 255) */
  --navy-foreground: #F8FAFC;
  --secondary: #F8FAFC;
  --background: #FFFFFF;
  --foreground: #0F172A;
  --muted: #F1F5F9;
  --muted-foreground: #64748B;
  --accent: #E0F2FE;
  --accent-foreground: #0F172A;
  --border: #E2E8F0;
  --input: #E2E8F0;
  --ring: #0EA5E9;
  --whatsapp: #25D366;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Custom Gradients and Utilities */
.gradient-primary {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-glow) 100%);
}

.gradient-hero {
  background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(14, 165, 233, 0.7) 100%);
}

.text-gradient {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(14, 165, 233, 0.15);
}

/* Animations */
@keyframes float-ping {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fade-up 0.6s ease-out both;
}

.animate-float-ping {
  animation: float-ping 2s ease-in-out infinite;
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-elegant {
  transition: all 0.3s ease;
}
.hover-elegant:hover {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 25px 60px -20px rgba(15, 23, 42, 0.15);
}

.card-transform {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-transform:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15);
}

.hover-reveal .reveal-content {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.hover-reveal:hover .reveal-content {
  opacity: 1;
  transform: translateY(0);
}
.hover-reveal .reveal-bg {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-reveal:hover .reveal-bg {
  transform: scale(1.05);
}