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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 217 91% 60%;
    --primary-rgb: 59 130 246;
    --primary-foreground: 0 0% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 217 91% 60%;

    --success: 142 70% 45%;
    --success-foreground: 0 0% 98%;

    --radius: 0.75rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222 47% 8%;
    --foreground: 210 40% 98%;

    --card: 222 47% 8%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 217 91% 60%;
    --primary-rgb: 59 130 246;
    --primary-foreground: 210 40% 98%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 217 91% 60%;

    --success: 142 70% 45%;
    --success-foreground: 0 0% 98%;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    font-display: optional;
  }

  /* Performance optimizations to prevent forced reflows */
  #root {
    contain: style;
  }

  section {
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }

  /* Animated elements performance hints */
  [data-animate],
  [data-scroll],
  .animate-scroll,
  .animate-fade,
  .animate-slide {
    contain: layout;
    will-change: transform, opacity;
    transform: translateZ(0);
  }

  /* Prevent layout thrashing on images and media */
  img,
  video,
  iframe {
    content-visibility: auto;
  }

  /* Mobile-first typography for consistency */
  h1 { @apply font-heading text-4xl md:text-6xl font-extrabold leading-tight tracking-tight; }
  h2 { @apply font-heading text-3xl md:text-5xl font-bold leading-tight; }
  h3 { @apply font-heading text-2xl md:text-3xl font-semibold leading-snug; }
  p  { @apply text-base md:text-lg leading-relaxed; }
  h1, h2, h3 { @apply mb-4 md:mb-6; }
  p + p { @apply mt-2; }
}

/* Scoped theme for AI Websites product page */
.theme-ai-websites {
  --primary: 14 90% 58%;
  --ring: 14 90% 58%;
  --accent: 20 92% 50%;
  --secondary: 20 40% 96%;
  --secondary-foreground: 20 20% 20%;
}
.dark .theme-ai-websites {
  --primary: 14 90% 60%;
  --ring: 14 90% 60%;
  --accent: 20 92% 52%;
  --secondary: 20 32% 17%;
  --secondary-foreground: 20 40% 96%;
}

/* Mobile-only soft glow for cards */
@media (max-width: 767px) {
  .mobile-glow {
    position: relative;
    box-shadow: 0 0 0 1px hsl(var(--border));
  }
  .mobile-glow::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 10%;
    right: 10%;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, hsl(var(--primary) / 0.15), transparent 70%);
    filter: blur(8px);
    z-index: -1;
  }
}

/* Feature card glow for all devices - Subtle elevation */
.feature-card-glow {
  position: relative;
  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08), 0 1px 3px hsl(var(--foreground) / 0.16);
}

.feature-card-glow:hover {
  box-shadow: 0 4px 16px hsl(var(--foreground) / 0.12), 0 2px 6px hsl(var(--foreground) / 0.24);
}

.feature-card-glow::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 5%;
  right: 5%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, hsl(var(--primary) / 0.2), transparent 70%);
  filter: blur(12px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card-glow:hover::after {
  opacity: 1;
}

/* Card glow for mobile compatibility */
.card-glow {
  @apply feature-card-glow;
}

/* Neon utilities for icons and badges (design tokens) - DISABLED */
@layer utilities {
  /* Glass effect utilities */
  .glass {
    @apply backdrop-blur-md bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-gray-700/30;
  }
  
  .glass-strong {
    @apply backdrop-blur-lg bg-white/80 dark:bg-gray-900/80 border border-white/30 dark:border-gray-600/40;
  }
  
  .glass-subtle {
    @apply backdrop-blur-sm bg-white/50 dark:bg-gray-900/50 border border-white/10 dark:border-gray-800/20;
  }
  
  .glass-border {
    @apply border border-white/20 dark:border-gray-700/30;
  }

  /* Plan selection glow effects */
  .plan-selected-glow {
    @apply relative;
  }

  .plan-selected-glow::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.4) 60%, transparent 85%);
    border-radius: 2rem;
    z-index: -1;
    opacity: 0.9;
    filter: blur(20px);
    animation: pulse 2s infinite;
  }

  /* Onboarding input light effect */
  @keyframes onboarding-glow {
    0%, 100% { 
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 2px 8px rgba(255,255,255,0.05);
    }
    5% { 
      box-shadow: inset 0 2px 12px rgba(0,0,0,0.8), 0 2px 12px rgba(255,255,255,0.15), 0 0 20px rgba(255,255,255,0.3);
    }
  }

  .onboarding-input {
    animation: onboarding-glow 12s infinite;
  }

  /* Section dividers */
  .section-divider {
    @apply relative my-8;
  }

  .section-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  /* FAQ-style doctor selector colors */
  .faq-neomorphic-deep {
    @apply bg-gradient-to-br from-background via-background to-muted/20;
    box-shadow: 
      inset 8px 8px 16px rgba(0, 0, 0, 0.3),
      inset -8px -8px 16px rgba(255, 255, 255, 0.1),
      0 4px 20px rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.2);
  }

  .dark .faq-neomorphic-deep {
    @apply bg-gradient-to-br from-background via-background to-muted/10;
    box-shadow: 
      inset 8px 8px 16px rgba(0, 0, 0, 0.5),
      inset -8px -8px 16px rgba(255, 255, 255, 0.05),
      0 4px 20px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.3);
  }

  /* Nuevo estilo neumórfico con más fondo y glow adaptativo */
  .neomorphic {
    background: hsl(var(--background)) !important;
    box-shadow: 
      12px 12px 24px rgba(163, 177, 198, 0.2),
      -12px -12px 24px rgba(255, 255, 255, 0.8),
      inset 3px 3px 6px rgba(163, 177, 198, 0.12),
      inset -3px -3px 6px rgba(255, 255, 255, 0.9),
      0 0 50px rgba(255, 255, 255, 0.6);
    border: none;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .neomorphic:hover {
    background: hsl(calc(var(--background-h)), calc(var(--background-s)), calc(var(--background-l) + 3%));
    box-shadow: 
      15px 15px 30px rgba(163, 177, 198, 0.25),
      -15px -15px 30px rgba(255, 255, 255, 0.95),
      inset 4px 4px 8px rgba(163, 177, 198, 0.15),
      inset -4px -4px 8px rgba(255, 255, 255, 1),
      0 0 70px rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
  }

  .neomorphic-glow {
    background: hsl(var(--background)) !important;
    box-shadow: 
      15px 15px 30px rgba(163, 177, 198, 0.25),
      -15px -15px 30px rgba(255, 255, 255, 0.9),
      inset 4px 4px 8px rgba(163, 177, 198, 0.12),
      inset -4px -4px 8px rgba(255, 255, 255, 0.9),
      0 0 60px rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.9);
    transition: all 0.4s ease;
  }
  
  .neomorphic-glow:hover {
    box-shadow: 
      12px 12px 24px rgba(163, 177, 198, 0.3),
      -12px -12px 24px rgba(255, 255, 255, 0.95),
      inset 3px 3px 6px rgba(163, 177, 198, 0.15),
      inset -3px -3px 6px rgba(255, 255, 255, 0.95),
      0 0 80px rgba(255, 255, 255, 1);
    transform: translateY(-2px);
  }
  
  .neomorphic-glow-subtle {
    background: hsl(var(--background)) !important;
    box-shadow: 
      10px 10px 20px rgba(163, 177, 198, 0.18),
      -10px -10px 20px rgba(255, 255, 255, 0.85),
      inset 3px 3px 6px rgba(163, 177, 198, 0.1),
      inset -3px -3px 6px rgba(255, 255, 255, 0.9),
      0 0 40px rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }
  
  .neomorphic-glow-subtle:hover {
    box-shadow: 
      8px 8px 16px rgba(163, 177, 198, 0.22),
      -8px -8px 16px rgba(255, 255, 255, 0.9),
      inset 2px 2px 4px rgba(163, 177, 198, 0.12),
      inset -2px -2px 4px rgba(255, 255, 255, 0.95),
      0 0 60px rgba(255, 255, 255, 0.8);
  }
  
  .neomorphic-glow-strong {
    background: hsl(var(--background)) !important;
    box-shadow: 
      20px 20px 40px rgba(163, 177, 198, 0.5),
      -20px -20px 40px rgba(255, 255, 255, 0.95),
      inset 5px 5px 10px rgba(163, 177, 198, 0.18),
      inset -5px -5px 10px rgba(255, 255, 255, 0.98),
      0 0 80px rgba(255, 255, 255, 0.8),
      0 0 140px rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .neomorphic-glow-strong:hover {
    box-shadow: 
      35px 35px 70px rgba(163, 177, 198, 0.7),
      -35px -35px 70px rgba(255, 255, 255, 1),
      inset 10px 10px 20px rgba(163, 177, 198, 0.3),
      inset -10px -10px 20px rgba(255, 255, 255, 1),
      0 0 200px rgba(255, 255, 255, 1),
      0 0 600px rgba(255, 255, 255, 0.8);
    transform: translateY(-8px);
  }
  
  .neomorphic-inset {
    background: hsl(var(--background));
    box-shadow: 
      inset 10px 10px 20px rgba(163, 177, 198, 0.25),
      inset -10px -10px 20px rgba(255, 255, 255, 0.85),
      0 0 30px rgba(255, 255, 255, 0.4);
    border: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
  }
  
  .neomorphic-inset-glow {
    background: hsl(var(--background));
    box-shadow: 
      inset 12px 12px 24px rgba(163, 177, 198, 0.3),
      inset -12px -12px 24px rgba(255, 255, 255, 0.9),
      0 0 50px rgba(255, 255, 255, 0.6);
    border: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
  }
  
  .neomorphic-subtle {
    background: hsl(var(--background));
    box-shadow: 
      10px 10px 20px rgba(163, 177, 198, 0.18),
      -10px -10px 20px rgba(255, 255, 255, 0.9),
      inset 3px 3px 6px rgba(163, 177, 198, 0.1),
      inset -3px -3px 6px rgba(255, 255, 255, 0.95),
      0 0 40px rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
  }
  
  .neomorphic-subtle:hover {
    background: hsl(calc(var(--background-h)), calc(var(--background-s)), calc(var(--background-l) + 3%));
    box-shadow: 
      15px 15px 30px rgba(163, 177, 198, 0.25),
      -15px -15px 30px rgba(255, 255, 255, 1),
      inset 4px 4px 8px rgba(163, 177, 198, 0.15),
      inset -4px -4px 8px rgba(255, 255, 255, 1),
      0 0 60px rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
  }
  
  .neomorphic-button {
    background: hsl(var(--background));
    box-shadow: 
      10px 10px 20px rgba(163, 177, 198, 0.18),
      -10px -10px 20px rgba(255, 255, 255, 0.85),
      inset 3px 3px 6px rgba(163, 177, 198, 0.1),
      inset -3px -3px 6px rgba(255, 255, 255, 0.9),
      0 0 25px rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
  }
  
  .neomorphic-button:hover {
    box-shadow: 
      6px 6px 12px rgba(163, 177, 198, 0.22),
      -6px -6px 12px rgba(255, 255, 255, 0.9),
      inset 2px 2px 4px rgba(163, 177, 198, 0.12),
      inset -2px -2px 4px rgba(255, 255, 255, 0.95),
      0 0 35px rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
  }
  
  .neomorphic-button:active,
  .neomorphic-selected {
    box-shadow: 
      inset 10px 10px 20px rgba(163, 177, 198, 0.25),
      inset -10px -10px 20px rgba(255, 255, 255, 0.85),
      0 0 20px rgba(255, 255, 255, 0.3);
    transform: translateY(0px);
  }
  
  .neomorphic-button-glow {
    background: hsl(var(--background));
    box-shadow: 
      10px 10px 20px rgba(163, 177, 198, 0.18),
      -10px -10px 20px rgba(255, 255, 255, 0.85),
      inset 3px 3px 6px rgba(163, 177, 198, 0.1),
      inset -3px -3px 6px rgba(255, 255, 255, 0.9),
      0 0 30px rgba(255, 255, 255, 0.5),
      0 0 50px rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    will-change: box-shadow, transform;
    backdrop-filter: blur(10px);
  }
  
  .neomorphic-button-glow:hover {
    box-shadow: 
      6px 6px 12px rgba(163, 177, 198, 0.22),
      -6px -6px 12px rgba(255, 255, 255, 0.9),
      inset 2px 2px 4px rgba(163, 177, 198, 0.12),
      inset -2px -2px 4px rgba(255, 255, 255, 0.95),
      0 0 40px rgba(255, 255, 255, 0.7),
      0 0 70px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
  }
  
  .neomorphic-button-glow:active,
  .neomorphic-selected-glow {
    box-shadow: 
      inset 10px 10px 20px rgba(163, 177, 198, 0.25),
      inset -10px -10px 20px rgba(255, 255, 255, 0.85),
      0 0 25px rgba(255, 255, 255, 0.4);
    transform: translateY(0px);
  }

  /* Estilos para modo dark - glow azul oscuro */
  .dark .neomorphic {
    background: hsl(var(--background));
    box-shadow: 
      12px 12px 24px rgba(0, 0, 0, 0.5),
      -12px -12px 24px rgba(59, 130, 246, 0.05),
      inset 3px 3px 6px rgba(0, 0, 0, 0.4),
      inset -3px -3px 6px rgba(59, 130, 246, 0.08),
      0 0 50px rgba(59, 130, 246, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .dark .neomorphic:hover {
    background: hsl(calc(var(--background-h)), calc(var(--background-s)), calc(var(--background-l) + 5%));
    box-shadow: 
      15px 15px 30px rgba(0, 0, 0, 0.6),
      -15px -15px 30px rgba(59, 130, 246, 0.08),
      inset 4px 4px 8px rgba(0, 0, 0, 0.5),
      inset -4px -4px 8px rgba(59, 130, 246, 0.12),
      0 0 70px rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
  }

  .dark .neomorphic-glow {
    background: hsl(var(--background));
    box-shadow: 
      15px 15px 30px rgba(0, 0, 0, 0.5),
      -15px -15px 30px rgba(255, 255, 255, 0.03),
      inset 4px 4px 8px rgba(0, 0, 0, 0.4),
      inset -4px -4px 8px rgba(255, 255, 255, 0.08),
      0 0 60px rgba(30, 58, 138, 0.4),
      0 0 100px rgba(59, 130, 246, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
  }
  
  .dark .neomorphic-glow:hover {
    box-shadow: 
      12px 12px 24px rgba(0, 0, 0, 0.6),
      -12px -12px 24px rgba(255, 255, 255, 0.05),
      inset 3px 3px 6px rgba(0, 0, 0, 0.5),
      inset -3px -3px 6px rgba(255, 255, 255, 0.1),
      0 0 80px rgba(30, 58, 138, 0.6),
      0 0 120px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
  }

  .dark .neomorphic-glow-strong {
    background: hsl(var(--background)) !important;
    box-shadow: 
      25px 25px 50px rgba(15, 23, 42, 0.7),
      -25px -25px 50px rgba(59, 130, 246, 0.08),
      inset 6px 6px 12px rgba(15, 23, 42, 0.5),
      inset -6px -6px 12px rgba(59, 130, 246, 0.12),
      0 0 80px rgba(30, 58, 138, 0.5),
      0 0 150px rgba(30, 58, 138, 0.3);
    border: 2px solid rgba(59, 130, 246, 0.25);
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark .neomorphic-glow-strong:hover {
    box-shadow: 
      35px 35px 70px rgba(15, 23, 42, 0.9),
      -35px -35px 70px rgba(59, 130, 246, 0.1),
      inset 10px 10px 20px rgba(15, 23, 42, 0.8),
      inset -10px -10px 20px rgba(59, 130, 246, 0.2),
      0 0 200px rgba(30, 58, 138, 0.8),
      0 0 600px rgba(30, 58, 138, 0.4);
    transform: translateY(-8px);
  }

  .dark .neomorphic-glow-subtle,
  .dark .neomorphic-inset,
  .dark .neomorphic-inset-glow,
  .dark .neomorphic-subtle,
  .dark .neomorphic-button,
  .dark .neomorphic-button-glow {
    background: hsl(var(--background));
    box-shadow: 
      10px 10px 20px rgba(0, 0, 0, 0.5),
      -10px -10px 20px rgba(59, 130, 246, 0.04),
      inset 3px 3px 6px rgba(0, 0, 0, 0.4),
      inset -3px -3px 6px rgba(59, 130, 246, 0.08),
      0 0 40px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.15);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
  }

  .dark .neomorphic-subtle:hover,
  .dark .neomorphic-button:hover,
  .dark .neomorphic-button-glow:hover {
    background: hsl(calc(var(--background-h)), calc(var(--background-s)), calc(var(--background-l) + 5%));
    box-shadow: 
      15px 15px 30px rgba(0, 0, 0, 0.6),
      -15px -15px 30px rgba(59, 130, 246, 0.06),
      inset 4px 4px 8px rgba(0, 0, 0, 0.5),
      inset -4px -4px 8px rgba(59, 130, 246, 0.12),
      0 0 60px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
  }

  .dark .neomorphic-button-glow:hover {
    box-shadow: 
      6px 6px 12px rgba(0, 0, 0, 0.5),
      -6px -6px 12px rgba(255, 255, 255, 0.04),
      inset 2px 2px 4px rgba(0, 0, 0, 0.4),
      inset -2px -2px 4px rgba(255, 255, 255, 0.08),
      0 0 50px rgba(30, 58, 138, 0.4),
      0 0 80px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
  }
}

/* ULTRA PROMINENT Neumorphic Cards with Intense Glow */
.neo-card {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(145deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
  border: 1px solid hsl(var(--border) / 0.15);
  /* EXTREME neumorphic relief */
  box-shadow:
    /* Massive ambient shadow */
    0 30px 60px -12px hsl(var(--foreground) / 0.35),
    /* Strong directional shadow */
    20px 25px 50px hsl(var(--foreground) / 0.25),
    /* Contact shadow */
    0 10px 20px hsl(var(--foreground) / 0.15),
    /* Brilliant highlight */
    -15px -15px 30px hsl(var(--background) / 1.0),
    /* Inner highlight */
    inset 2px 2px 4px hsl(var(--background) / 0.8);
  overflow: visible;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* INSET Neumorphic Cards - Sunken Effect */
.neo-card-inset {
  border-radius: 21px;
  background: #ffffff;
  box-shadow: 
    inset 10px 10px 16px #8c8c8c,
    inset -10px -10px 16px #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Light mode blue glow for inset cards */
.neo-card-inset::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    rgba(59, 130, 246, 0.3), 
    rgba(59, 130, 246, 0.1),
    rgba(59, 130, 246, 0.3)
  );
  border-radius: 23px;
  z-index: -1;
  opacity: 0.6;
  filter: blur(4px);
}

/* Dark mode adjustments for inset cards - user's exact dramatic inset effect */
.dark .neo-card-inset {
  border-radius: 38px;
  background: #0f1419;
  box-shadow: inset 41px 41px 22px #080b0d,
              inset -41px -41px 22px #161d25;
}

/* Remove glow effect in dark mode for deep inset look */
.dark .neo-card-inset::after {
  display: none;
}

/* INTENSE under-glow - primary layer */
.neo-card::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -30px;
  height: 90px;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 1.0;
  z-index: -1;
  background: radial-gradient(70% 160% at 50% 50%,
    hsl(var(--primary) / 1.0) 0%,
    hsl(var(--primary) / 0.8) 35%,
    hsl(var(--primary) / 0.4) 65%,
    hsl(var(--primary) / 0.0) 100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Secondary glow layer for extra intensity */
.neo-card::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -20px;
  height: 50px;
  border-radius: 999px;
  filter: blur(30px);
  opacity: 0.9;
  z-index: -1;
  background: radial-gradient(80% 130% at 50% 50%,
    hsl(var(--primary) / 0.9) 0%,
    hsl(var(--primary) / 0.6) 50%,
    hsl(var(--primary) / 0.0) 100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blue glow variant - ULTRA INTENSE */
.neo-card[data-glow="blue"]::after {
  background: radial-gradient(70% 160% at 50% 50%,
    rgba(59, 130, 246, 1.0) 0%,
    rgba(37, 99, 235, 0.85) 35%,
    rgba(59, 130, 246, 0.45) 65%,
    rgba(37, 99, 235, 0.0) 100%);
}

.neo-card[data-glow="blue"]::before {
  background: radial-gradient(80% 130% at 50% 50%,
    rgba(96, 165, 250, 0.95) 0%,
    rgba(59, 130, 246, 0.65) 50%,
    rgba(59, 130, 246, 0.0) 100%);
}

/* Pink glow variant - ULTRA INTENSE */
.neo-card[data-glow="pink"]::after {
  background: radial-gradient(70% 160% at 50% 50%,
    rgba(236, 72, 153, 1.0) 0%,
    rgba(219, 39, 119, 0.85) 35%,
    rgba(236, 72, 153, 0.45) 65%,
    rgba(219, 39, 119, 0.0) 100%);
}

.neo-card[data-glow="pink"]::before {
  background: radial-gradient(80% 130% at 50% 50%,
    rgba(244, 114, 182, 0.95) 0%,
    rgba(236, 72, 153, 0.65) 50%,
    rgba(236, 72, 153, 0.0) 100%);
}

/* Green glow variant - ULTRA INTENSE */
.neo-card[data-glow="green"]::after {
  background: radial-gradient(70% 160% at 50% 50%,
    rgba(34, 197, 94, 1.0) 0%,
    rgba(22, 163, 74, 0.85) 35%,
    rgba(34, 197, 94, 0.45) 65%,
    rgba(22, 163, 74, 0.0) 100%);
}

.neo-card[data-glow="green"]::before {
  background: radial-gradient(80% 130% at 50% 50%,
    rgba(74, 222, 128, 0.95) 0%,
    rgba(34, 197, 94, 0.65) 50%,
    rgba(34, 197, 94, 0.0) 100%);
}

/* EXTREME hover effects */
.neo-card:hover {
  transform: translateY(-15px) scale(1.04) rotateX(3deg);
  box-shadow:
    /* Massive ambient shadow */
    0 60px 120px -12px hsl(var(--foreground) / 0.5),
    /* Enhanced directional shadow */
    30px 40px 80px hsl(var(--foreground) / 0.4),
    /* Strong contact shadow */
    0 20px 40px hsl(var(--foreground) / 0.3),
    /* Brilliant highlight */
    -25px -25px 50px hsl(var(--background) / 1.0),
    /* Enhanced inner highlight */
    inset 3px 3px 6px hsl(var(--background) / 0.9);
}

/* Elegant Border Glow System */
.elegant-border-glow {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted)/0.1));
  box-shadow: 
    /* Subtle elegant border glow */
    0 0 20px hsl(var(--border)/0.5),
    inset 0 1px 0 hsl(var(--background)/0.2),
    inset 0 -1px 0 hsl(var(--foreground)/0.05);
  border: 1px solid hsl(var(--border)/0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.elegant-border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: linear-gradient(135deg, 
    hsl(var(--primary)/0.3) 0%, 
    transparent 40%, 
    transparent 60%, 
    hsl(var(--primary)/0.3) 100%);
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* Hover Color Aura Effects */
.hover-color-aura {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-color-aura::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  background: radial-gradient(circle at center,
    var(--glow-color, hsl(var(--primary))) 0%,
    transparent 70%);
  opacity: 0;
  filter: blur(12px);
  z-index: -1;
  transition: all 0.4s ease;
}

.hover-color-aura:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 0 40px hsl(var(--border)/0.8),
    0 20px 40px hsl(var(--foreground)/0.1);
}

.hover-color-aura:hover::before {
  opacity: 1;
}

.hover-color-aura:hover::after {
  opacity: 0.4;
  inset: -16px;
  filter: blur(20px);
}

/* Color-specific aura variants */
.hover-color-aura[data-glow="blue"] {
  --glow-color: hsl(220 100% 60% / 0.6);
}

.hover-color-aura[data-glow="purple"] {
  --glow-color: hsl(270 100% 60% / 0.6);
}

.hover-color-aura[data-glow="green"] {
  --glow-color: hsl(120 100% 50% / 0.6);
}

.hover-color-aura[data-glow="orange"] {
  --glow-color: hsl(30 100% 60% / 0.6);
}

/* Deep Neumorphic Cards - No Glow */
.neomorphic-deep {
  background: linear-gradient(145deg, 
    hsl(var(--background)) 0%, 
    hsl(var(--muted)/0.4) 50%, 
    hsl(var(--background)) 100%);
  border-radius: 16px;
  border: 1px solid hsl(var(--border)/0.3);
  box-shadow: 
    /* Deep inset shadows for carved appearance */
    inset 8px 8px 16px hsl(var(--foreground)/0.1),
    inset -8px -8px 16px hsl(var(--background)/0.9),
    /* Subtle outer relief */
    4px 4px 12px hsl(var(--foreground)/0.05),
    -4px -4px 12px hsl(var(--background)/0.8);
  transition: all 0.2s ease;
}

.neomorphic-deep:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    /* Enhanced inset shadows on hover */
    inset 6px 6px 12px hsl(var(--foreground)/0.08),
    inset -6px -6px 12px hsl(var(--background)/0.95),
    /* Lifted outer shadows */
    6px 8px 16px hsl(var(--foreground)/0.08),
    -6px -6px 16px hsl(var(--background)/0.9);
}

/* Step Cards - Deep Neumorphic with Strong Relief */
.neomorphic-deep-steps {
  padding: 20px;
  background: linear-gradient(145deg, 
    hsl(var(--background)) 0%, 
    hsl(var(--muted)/0.6) 50%, 
    hsl(var(--background)) 100%);
  border-radius: 20px;
  border: 1px solid hsl(var(--border)/0.4);
  /* ULTRA DEEP carved effect */
  box-shadow: 
    /* Massive inset shadows for deep carved look */
    inset 15px 15px 30px hsl(var(--foreground)/0.15),
    inset -15px -15px 30px hsl(var(--background)/0.95),
    /* Strong outer relief */
    8px 8px 20px hsl(var(--foreground)/0.1),
    -8px -8px 20px hsl(var(--background)/0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neomorphic-deep-steps:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    /* Enhanced deep carved effect on hover */
    inset 12px 12px 24px hsl(var(--foreground)/0.12),
    inset -12px -12px 24px hsl(var(--background)),
    /* Dramatic lifted outer shadows */
    12px 15px 30px hsl(var(--foreground)/0.15),
    -12px -12px 30px hsl(var(--background)/0.95);
}

/* 🎨 ENHANCED PROMINENT Feature Cards */
.neo-card-ultra {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(145deg, 
    hsl(var(--background)) 0%, 
    hsl(var(--muted)/0.6) 50%, 
    hsl(var(--background)) 100%);
  border: 1px solid hsl(var(--border)/0.4);
  /* ENHANCED prominent neumorphic relief */
  box-shadow:
    /* Deep ambient shadow */
    0 20px 60px -12px hsl(var(--foreground) / 0.25),
    /* Strong directional shadows */
    16px 20px 40px hsl(var(--foreground) / 0.18),
    /* Enhanced contact shadow */
    0 8px 25px hsl(var(--foreground) / 0.15),
    /* Prominent highlight */
    -8px -8px 20px hsl(var(--background) / 0.9),
    /* Enhanced inner highlight */
    inset 2px 2px 6px hsl(var(--background) / 0.7);
  overflow: visible;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Subtle under-glow for feature cards */
.neo-card-ultra::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -15px;
  height: 40px;
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.4;
  z-index: -1;
  background: radial-gradient(60% 120% at 50% 50%,
    hsl(var(--primary) / 0.3) 0%,
    hsl(var(--primary) / 0.2) 40%,
    hsl(var(--primary) / 0.1) 70%,
    hsl(var(--primary) / 0.0) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Secondary subtle glow layer */
.neo-card-ultra::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -8px;
  height: 25px;
  border-radius: 999px;
  filter: blur(12px);
  opacity: 0.3;
  z-index: -1;
  background: radial-gradient(70% 120% at 50% 50%,
    hsl(var(--primary) / 0.25) 0%,
    hsl(var(--primary) / 0.15) 50%,
    hsl(var(--primary) / 0.0) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle blue glow variants */
.neo-card-ultra[data-glow="blue"]::after {
  background: radial-gradient(60% 120% at 50% 50%,
    rgba(59, 130, 246, 0.3) 0%,
    rgba(37, 99, 235, 0.2) 40%,
    rgba(59, 130, 246, 0.1) 70%,
    rgba(37, 99, 235, 0.0) 100%);
}

.neo-card-ultra[data-glow="blue"]::before {
  background: radial-gradient(70% 120% at 50% 50%,
    rgba(96, 165, 250, 0.25) 0%,
    rgba(59, 130, 246, 0.15) 50%,
    rgba(59, 130, 246, 0.0) 100%);
}

/* ENHANCED PROMINENT hover effects for feature cards */
.neo-card-ultra:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    /* ENHANCED dramatic ambient shadow */
    0 25px 80px -12px hsl(var(--foreground) / 0.3),
    /* Strong directional shadow */
    20px 25px 50px hsl(var(--foreground) / 0.22),
    /* Enhanced contact shadow */
    0 10px 30px hsl(var(--foreground) / 0.18),
    /* Prominent highlight */
    -10px -10px 25px hsl(var(--background) / 0.95),
    /* ENHANCED inner highlight */
    inset 3px 3px 8px hsl(var(--background) / 0.8);
}

.neo-card-ultra:hover::after {
  height: 50px;
  filter: blur(25px);
  opacity: 0.6;
  bottom: -20px;
}

.neo-card-ultra:hover::before {
  height: 35px;
  filter: blur(15px);
  opacity: 0.5;
  bottom: -12px;
}

/* Dark mode adjustments */
.dark .neomorphic-deep {
  background: linear-gradient(145deg, 
    hsl(var(--background)) 0%, 
    hsl(var(--muted)/0.2) 50%, 
    hsl(var(--background)) 100%);
  box-shadow: 
    inset 8px 8px 16px hsl(0 0% 0% / 0.3),
    inset -8px -8px 16px hsl(var(--background)/0.1),
    4px 4px 12px hsl(0 0% 0% / 0.2),
    -4px -4px 12px hsl(var(--background)/0.05);
}

.dark .neomorphic-deep:hover {
  box-shadow: 
    inset 6px 6px 12px hsl(0 0% 0% / 0.25),
    inset -6px -6px 12px hsl(var(--background)/0.15),
    6px 8px 16px hsl(0 0% 0% / 0.25),
    -6px -6px 16px hsl(var(--background)/0.1);
}

.dark .neomorphic-deep-steps {
  background: linear-gradient(145deg, 
    hsl(var(--background)) 0%, 
    hsl(var(--muted)/0.3) 50%, 
    hsl(var(--background)) 100%);
  box-shadow: 
    inset 15px 15px 30px hsl(0 0% 0% / 0.4),
    inset -15px -15px 30px hsl(var(--background)/0.15),
    8px 8px 20px hsl(0 0% 0% / 0.3),
    -8px -8px 20px hsl(var(--background)/0.1);
}

.dark .neomorphic-deep-steps:hover {
  box-shadow: 
    inset 12px 12px 24px hsl(0 0% 0% / 0.35),
    inset -12px -12px 24px hsl(var(--background)/0.2),
    12px 15px 30px hsl(0 0% 0% / 0.4),
    -12px -12px 30px hsl(var(--background)/0.15);
}

/* FAQ Deep Neomorphic Cards */
.faq-neomorphic-deep {
  border-radius: 13px;
  background: #e0e0e0;
  box-shadow: inset 5px 5px 7px #5e5e5e,
              inset -5px -5px 7px #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-neomorphic-deep:hover {
  transform: translateY(-1px);
  box-shadow: inset 6px 6px 8px #525252,
              inset -6px -6px 8px #ffffff;
}

.dark .faq-neomorphic-deep {
  background: hsl(222.2, 84%, 4.9%);
  box-shadow: inset 5px 5px 7px rgba(0, 0, 0, 0.8),
              inset -5px -5px 7px rgba(255, 255, 255, 0.1);
}

.dark .faq-neomorphic-deep:hover {
  box-shadow: inset 6px 6px 8px rgba(0, 0, 0, 0.9),
              inset -6px -6px 8px rgba(255, 255, 255, 0.12);
}

/* Feature Cards Neomorphic - Light mode original, Dark mode deep */
.feature-neomorphic-deep {
  border-radius: 21px;
  background: #ffffff;
  box-shadow: inset 10px 10px 16px #8c8c8c,
              inset -10px -10px 16px #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.feature-neomorphic-deep::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.05));
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-neomorphic-deep:hover::after {
  opacity: 1;
}

.feature-neomorphic-deep:hover {
  transform: translateY(-2px);
  box-shadow: inset 12px 12px 18px #7a7a7a,
              inset -12px -12px 18px #ffffff;
}

.dark .feature-neomorphic-deep {
  background: hsl(222.2, 84%, 4.9%);
  box-shadow: inset 5px 5px 7px rgba(0, 0, 0, 0.8),
              inset -5px -5px 7px rgba(255, 255, 255, 0.1);
  border-radius: 13px;
}

.dark .feature-neomorphic-deep::after {
  display: none;
}

.dark .feature-neomorphic-deep:hover {
  transform: translateY(-1px);
  box-shadow: inset 6px 6px 8px rgba(0, 0, 0, 0.9),
              inset -6px -6px 8px rgba(255, 255, 255, 0.12);
}

/* Feature Cards Light Neomorphic */
.feature-neomorphic-light {
  border-radius: 21px;
  background: #ffffff;
  box-shadow: inset 10px 10px 16px #8c8c8c,
              inset -10px -10px 16px #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-neomorphic-light:hover {
  transform: translateY(-2px);
  box-shadow: inset 12px 12px 18px #808080,
              inset -12px -12px 18px #ffffff;
}

.dark .feature-neomorphic-light {
  background: hsl(222.2, 84%, 4.9%);
  box-shadow: inset 10px 10px 16px rgba(0, 0, 0, 0.8),
              inset -10px -10px 16px rgba(255, 255, 255, 0.1);
}

.dark .feature-neomorphic-light:hover {
  box-shadow: inset 12px 12px 18px rgba(0, 0, 0, 0.9),
              inset -12px -12px 18px rgba(255, 255, 255, 0.12);
}

.neo-card:hover::after {
  filter: blur(90px);
  opacity: 1.0;
  height: 120px;
  bottom: -45px;
  transform: scale(1.3);
}

.neo-card:hover::before {
  filter: blur(45px);
  opacity: 1.0;
  height: 70px;
  bottom: -30px;
  transform: scale(1.2);
}

/* Dark mode - ENHANCED DRAMATIC EFFECTS */
.dark .neo-card {
  background: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(var(--muted)) 100%);
  border-color: hsl(var(--border) / 0.2);
  box-shadow:
    /* Massive dark ambient */
    0 35px 70px -12px rgba(0, 0, 0, 0.8),
    /* Strong directional */
    25px 30px 60px rgba(0, 0, 0, 0.6),
    /* Contact shadow */
    0 12px 25px rgba(0, 0, 0, 0.4),
    /* Card highlight */
    -18px -18px 35px hsl(var(--card) / 0.1);
}

.dark .neo-card::after {
  opacity: 0.9;
}

.dark .neo-card:hover {
  box-shadow:
    /* Ultra massive dark ambient */
    0 70px 140px -12px rgba(0, 0, 0, 0.9),
    /* Enhanced directional */
    35px 45px 90px rgba(0, 0, 0, 0.7),
    /* Strong contact */
    0 25px 50px rgba(0, 0, 0, 0.5),
    /* Enhanced highlight */
    -30px -30px 60px hsl(var(--card) / 0.15);
}

/* Default to blue glow in dark mode - INTENSE */
.dark .neo-card:not([data-glow])::after {
  background: radial-gradient(70% 160% at 50% 50%,
    rgba(59, 130, 246, 1.0) 0%,
    rgba(37, 99, 235, 0.85) 35%,
    rgba(59, 130, 246, 0.45) 65%,
    rgba(37, 99, 235, 0.0) 100%);
}

.dark .neo-card:not([data-glow])::before {
  background: radial-gradient(80% 130% at 50% 50%,
    rgba(96, 165, 250, 0.95) 0%,
    rgba(59, 130, 246, 0.65) 50%,
    rgba(59, 130, 246, 0.0) 100%);
}

@layer utilities {
  /* .neon-icon {
    color: hsl(var(--primary));
    filter: drop-shadow(0 0 12px hsl(var(--primary) / 0.8));
  }
  .neon-badge {
    box-shadow: inset 0 0 16px hsl(var(--primary) / 0.35), 0 0 24px hsl(var(--primary) / 0.25);
  }
  .neon-card {
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.35), 0 0 28px hsl(var(--primary) / 0.5), 0 0 56px hsl(var(--primary) / 0.35);
  } */

  /* Raised neomorphic cards for 4-step section */
  .neomorphic-popup-steps {
    padding: 20px;
    background: linear-gradient(145deg, hsl(var(--background)), hsl(var(--muted) / 0.1));
    border-radius: 16px;
    border: 1px solid hsl(var(--border) / 0.3);
    /* STRONG raised effect with pronounced shadows */
    box-shadow: 
      12px 12px 24px hsl(var(--foreground) / 0.15),
      -8px -8px 16px hsl(var(--background) / 0.9),
      0 4px 20px hsl(var(--foreground) / 0.1),
      inset 2px 2px 4px hsl(var(--background) / 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    transform: translateZ(0);
  }

  .neomorphic-popup-steps:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
      16px 16px 32px hsl(var(--foreground) / 0.2),
      -10px -10px 20px hsl(var(--background) / 0.95),
      0 8px 30px hsl(var(--foreground) / 0.15),
      0 0 25px rgba(59, 130, 246, 0.3),
      inset 3px 3px 6px hsl(var(--background) / 0.9);
  }

  /* Deep neomorphic menu styling */
  .neomorphic-deep-menu {
    background: hsl(var(--background));
    border-radius: 24px;
    border: 1px solid hsl(var(--border) / 0.3);
    /* Deep carved inset effect for menu */
    box-shadow: 
      inset 8px 8px 16px hsl(var(--foreground) / 0.08),
      inset -8px -8px 16px hsl(var(--background) / 0.9),
      0 4px 20px hsl(var(--foreground) / 0.05);
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
  }

  /* Dark mode for popup steps */
  .dark .neomorphic-popup-steps {
    background: linear-gradient(145deg, hsl(var(--card)), hsl(var(--background)));
    border: 1px solid hsl(var(--border) / 0.4);
    box-shadow: 
      12px 12px 24px rgba(0, 0, 0, 0.5),
      -8px -8px 16px rgba(255, 255, 255, 0.05),
      0 6px 30px rgba(0, 0, 0, 0.3),
      inset 2px 2px 4px rgba(255, 255, 255, 0.04);
  }

  .dark .neomorphic-popup-steps:hover {
    box-shadow: 
      16px 16px 32px rgba(0, 0, 0, 0.6),
      -10px -10px 20px rgba(255, 255, 255, 0.08),
      0 10px 40px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(59, 130, 246, 0.4),
      inset 3px 3px 6px rgba(255, 255, 255, 0.06);
  }

  /* Dark mode for deep neomorphic menu */
  .dark .neomorphic-deep-menu {
    background: hsl(var(--background));
    box-shadow: 
      inset 8px 8px 16px rgba(0, 0, 0, 0.4),
      inset -8px -8px 16px rgba(255, 255, 255, 0.03),
      0 6px 30px rgba(0, 0, 0, 0.2);
  }

  /* Deep neomorphic styling for Google Ads, Instagram, and Xpider elements */
  .neomorphic-deep-platform {
    background: linear-gradient(145deg, hsl(var(--background)), hsl(var(--muted) / 0.1));
    border-radius: 12px;
    border: 1px solid hsl(var(--border) / 0.3);
    /* Deep carved inset effect */
    box-shadow: 
      inset 6px 6px 12px hsl(var(--foreground) / 0.08),
      inset -6px -6px 12px hsl(var(--background) / 0.9),
      0 2px 8px hsl(var(--foreground) / 0.05);
    transition: all 0.3s ease;
    position: relative;
  }

  .neomorphic-deep-platform:hover {
    box-shadow: 
      inset 8px 8px 16px hsl(var(--foreground) / 0.1),
      inset -8px -8px 16px hsl(var(--background) / 0.95),
      0 4px 12px hsl(var(--foreground) / 0.08);
  }

  /* Dark mode for deep platform elements */
  .dark .neomorphic-deep-platform {
    background: linear-gradient(145deg, hsl(var(--card)), hsl(var(--background)));
    box-shadow: 
      inset 6px 6px 12px rgba(0, 0, 0, 0.3),
      inset -6px -6px 12px rgba(255, 255, 255, 0.04),
      0 3px 12px rgba(0, 0, 0, 0.2);
  }

  .dark .neomorphic-deep-platform:hover {
    box-shadow: 
      inset 8px 8px 16px rgba(0, 0, 0, 0.4),
      inset -8px -8px 16px rgba(255, 255, 255, 0.06),
      0 6px 18px rgba(0, 0, 0, 0.3);
  }

  .plan-selected-glow {
    box-shadow: 0 0 40px hsl(var(--primary) / 0.6), 0 0 80px hsl(var(--primary) / 0.3);
  }

  .plan-unselected {
    filter: brightness(0.7);
  }

  /* Shake animation for error state */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
  }

  .animate-shake {
    animation: shake 0.4s ease-in-out;
  }

  /* Shimmer animation for gold card */
  @keyframes shimmer {
    0% { transform: translateX(-200%) rotate(12deg); }
    50% { transform: translateX(200%) rotate(12deg); }
    100% { transform: translateX(200%) rotate(12deg); }
  }

  .animate-shimmer {
    animation: shimmer 3s ease-in-out infinite;
  }
}