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

/* Growth Commerce SaaS Design System - Professional & Modern */

  /* Typography System */
  :root {
    /* Font stacks */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Cal Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Type scale with perfect ratios */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */ 
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */
    --text-8xl: 6rem;        /* 96px */
    
    /* Line heights for perfect vertical rhythm */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Letter spacing for display fonts */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    
    /* Vertical spacing system */
    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
  }

@layer base {
  :root {
    /* Base Colors */
    --background: 0 0% 100%;
    --foreground: 215 28% 17%;

    /* Card System */
    --card: 0 0% 100%;
    --card-foreground: 215 28% 17%;

    /* Popover & Modals */
    --popover: 0 0% 100%;
    --popover-foreground: 215 28% 17%;

    /* Primary Brand - Corporate Blue */
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 221 83% 45%;
    
    /* Insight Colors - Enhanced Blue */
    --insight-primary: 217 91% 60%;
    --insight-primary-foreground: 0 0% 100%;
    --insight-background: 217 91% 95%;

    /* Secondary - Light Gray */
    --secondary: 220 14% 96%;
    --secondary-foreground: 215 28% 17%;

    /* Muted Elements - Enhanced contrast for accessibility */
    --muted: 220 14% 96%;
    --muted-foreground: 215 28% 25%;

    /* Accent - Subtle Blue */
    --accent: 220 14% 96%;
    --accent-foreground: 221 83% 53%;

    /* Status Colors - Enhanced contrast for accessibility */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --success: 142 71% 25%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --info: 199 89% 48%;
    --info-foreground: 0 0% 100%;

    /* Borders & Inputs */
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 221 83% 53%;

    /* Module Colors */
    --module-onboarding: 259 100% 65%;
    --module-planning: 142 71% 45%;
    --module-commerce: 221 83% 53%;
    --module-ads: 0 84% 60%;
    --module-social: 280 100% 70%;
    --module-crm: 38 92% 50%;
    --module-aeo: 199 89% 48%;
    --module-cro: 14 100% 57%;
    --module-ux: 259 100% 65%;
    --module-retention: 142 71% 45%;
    --module-growth: 280 100% 70%;
    --module-data: 215 28% 17%;

    /* Gradients - Enhanced with more futuristic colors */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(221 83% 45%));
    --gradient-success: linear-gradient(135deg, hsl(var(--success)), hsl(142 71% 35%));
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)), hsl(280 100% 70%));
    --gradient-futuristic: linear-gradient(135deg, hsl(221 83% 53%), hsl(259 100% 65%), hsl(280 100% 70%));
    --gradient-insight: linear-gradient(135deg, hsl(var(--insight-primary)), hsl(217 91% 50%));
    --gradient-auth: linear-gradient(135deg, hsl(221 83% 53%), hsl(259 100% 65%));
    --gradient-auth-animated: linear-gradient(270deg, hsl(221 83% 53%), hsl(259 100% 65%), hsl(280 100% 70%), hsl(217 91% 60%));
    --gradient-auth-subtle: linear-gradient(135deg, hsl(var(--background)), hsl(220 14% 96%));
    --gradient-card: linear-gradient(135deg, hsl(var(--background)), hsl(220 14% 98%));
    --gradient-button: linear-gradient(135deg, hsl(var(--primary)), hsl(259 100% 50%));
    --gradient-chat: linear-gradient(135deg, hsl(259 100% 65%), hsl(221 83% 53%));
    --gradient-chat-animated: linear-gradient(45deg, hsl(259 100% 65%), hsl(221 83% 53%), hsl(280 100% 70%));
    
    /* Chat Widget Colors */
    --chat-text: 221 83% 53%;
    --chat-audio: 259 100% 65%;
    --chat-video: linear-gradient(135deg, hsl(259 100% 65%), hsl(221 83% 53%));
    
  /* Shadows - Enhanced for more depth */
  --shadow-sm: 0 1px 2px 0 hsl(220 43% 11% / 0.05);
  --shadow-md: 0 4px 6px -1px hsl(220 43% 11% / 0.1);
  --shadow-lg: 0 10px 15px -3px hsl(220 43% 11% / 0.1);
  --shadow-xl: 0 20px 25px -5px hsl(220 43% 11% / 0.1), 0 10px 10px -5px hsl(220 43% 11% / 0.04);
  --shadow-2xl: 0 25px 50px -12px hsl(220 43% 11% / 0.25);
  --shadow-3xl: 0 35px 60px -12px hsl(220 43% 11% / 0.35), 0 0 80px hsl(var(--primary) / 0.15);
  --shadow-glow: 0 0 0 3px hsl(var(--primary) / 0.1);
  --shadow-primary-glow: 0 0 50px hsl(var(--primary) / 0.3);

    --radius: 0.5rem;

    --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%;
}

/* Academy Netflix-style scrolling utilities */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

.smooth-scroll {
  scroll-behavior: smooth;
}

/* Line clamp utilities for text truncation */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

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

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

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --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: 212.7 26.8% 83.9%;
    --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%;
  }
}

/* Dark Theme Support */
@layer base {
  .theme-dark {
    /* Background & Surface Colors */
    --background: 222 47% 11%; /* #0F1629 - Dark Navy Blue */
    --foreground: 213 31% 91%; /* #E2E8F0 - Light Gray */
    
    /* Card System */
    --card: 222 84% 5%; /* #030712 - Very Dark */
    --card-foreground: 213 31% 91%; /* #E2E8F0 - Light Gray */
    
    /* Popover & Modals */
    --popover: 222 84% 5%; /* #030712 - Very Dark */
    --popover-foreground: 213 31% 91%; /* #E2E8F0 - Light Gray */
    
    /* Primary System (maintaining brand colors with slight adjustments) */
    --primary: 262 83% 58%; /* #6366F1 - Slightly muted for dark mode */
    --primary-foreground: 210 40% 98%; /* #F8FAFC - White */
    
    /* Secondary System */
    --secondary: 215 28% 17%; /* #1E293B - Slate 800 */
    --secondary-foreground: 210 40% 98%; /* #F8FAFC - White */
    
    /* Muted System */
    --muted: 215 28% 17%; /* #1E293B - Slate 800 */
    --muted-foreground: 215 20.2% 65.1%; /* #94A3B8 - Slate 400 */
    
    /* Accent System */
    --accent: 215 28% 17%; /* #1E293B - Slate 800 */
    --accent-foreground: 210 40% 98%; /* #F8FAFC - White */
    
    /* Status Colors */
    --destructive: 0 62.8% 30.6%; /* #DC2626 - Red 600 */
    --destructive-foreground: 210 40% 98%; /* #F8FAFC - White */
    
    --success: 142 76% 36%; /* #059669 - Emerald 600 */
    --success-foreground: 210 40% 98%; /* #F8FAFC - White */
    
    --warning: 32 95% 44%; /* #D97706 - Amber 600 */
    --warning-foreground: 210 40% 98%; /* #F8FAFC - White */
    
    --info: 221 83% 53%; /* #2563EB - Blue 600 */
    --info-foreground: 210 40% 98%; /* #F8FAFC - White */
    
    /* Border & Input */
    --border: 215 28% 25%; /* #334155 - Slate 700 */
    --input: 215 28% 25%; /* #334155 - Slate 700 */
    --ring: 262 83% 58%; /* #6366F1 - Primary color */
    
    /* Sidebar Dark Theme */
    --sidebar-background: 222 84% 5%; /* #030712 - Very Dark */
    --sidebar-foreground: 213 31% 91%; /* #E2E8F0 - Light Gray */
    --sidebar-primary: 262 83% 58%; /* #6366F1 - Brand color */
    --sidebar-primary-foreground: 210 40% 98%; /* #F8FAFC - White */
    --sidebar-accent: 215 28% 17%; /* #1E293B - Slate 800 */
    --sidebar-accent-foreground: 213 31% 91%; /* #E2E8F0 - Light Gray */
    --sidebar-border: 215 28% 25%; /* #334155 - Slate 700 */
    --sidebar-ring: 262 83% 58%; /* #6366F1 - Brand color */
    
    /* Module Colors Dark Variants */
    --module-planejamento: 262 83% 58%; /* Adjusted for dark */
    --module-inside-commerce: 142 76% 36%; /* Adjusted for dark */
    --module-social-consulting: 271 91% 50%; /* Adjusted for dark */
    --module-cro: 32 95% 44%; /* Adjusted for dark */
    --module-ux: 0 62.8% 40.6%; /* Adjusted for dark */
    --module-ads: 221 83% 53%; /* Adjusted for dark */
    --module-crm: 142 76% 36%; /* Adjusted for dark */
    --module-aeo: 32 95% 44%; /* Adjusted for dark */
    --module-fidelizacao: 271 91% 50%; /* Adjusted for dark */
    --module-growth-commerce: 0 62.8% 40.6%; /* Adjusted for dark */
    --module-data-science: 221 83% 53%; /* Adjusted for dark */
  }
  
  /* Theme Transition Classes */
  .theme-transition {
    transition: background-color 200ms ease-in-out, 
                border-color 200ms ease-in-out, 
                color 200ms ease-in-out, 
                fill 200ms ease-in-out, 
                stroke 200ms ease-in-out, 
                box-shadow 200ms ease-in-out;
  }
  
  /* Theme Toggle Button Enhancement */
  .theme-toggle {
    @apply theme-transition;
  }
  
  .theme-toggle:hover {
    @apply scale-105;
  }
  
  .theme-toggle .lucide {
    @apply theme-transition;
  }
  
  /* Enhanced Component Styling for Dark Mode */
  .theme-dark .bg-gradient-primary {
    background: linear-gradient(135deg, hsl(262, 83%, 55%), hsl(221, 83%, 50%));
  }
  
  .theme-dark .bg-muted\/20 {
    background: hsl(var(--muted) / 0.4);
  }
  
  /* Chart and Graph Enhancements for Dark Mode */
  .theme-dark .recharts-wrapper {
    color: hsl(var(--foreground));
  }
  
  .theme-dark .recharts-text {
    fill: hsl(var(--muted-foreground));
  }
  
  /* Enhanced Badge Contrast */
  .theme-dark .badge-primary-contrast {
    background: hsl(262, 83%, 45%);
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(262, 83%, 55%);
  }
  
  /* Status Badge Improvements for Dark Mode */
  .theme-dark .bg-success {
    background: hsl(142, 76%, 25%);
    color: hsl(var(--success-foreground));
  }
  
  .theme-dark .bg-warning {
    background: hsl(32, 95%, 35%);
    color: hsl(var(--warning-foreground));
  }
  
  .theme-dark .bg-destructive {
    background: hsl(0, 62.8%, 25%);
    color: hsl(var(--destructive-foreground));
  }
}

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

  html {
    @apply bg-background theme-transition;
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    font-variant-numeric: tabular-nums;
    scroll-behavior: smooth;
    line-height: var(--leading-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

  body {
    @apply bg-background text-foreground theme-transition;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    overflow-x: hidden; /* Prevent horizontal scroll */
    width: 100%;
    max-width: 100vw;
  }

  #root {
    @apply bg-background theme-transition;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* Typography Classes */
  .font-display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }

  .font-body {
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
  }

  /* Heading Hierarchy */
  .heading-1 {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 700;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-6);
  }

  .heading-2 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
  }

  .heading-3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    margin-bottom: var(--space-4);
  }

  /* Body Text */
  .body-large {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
  }

  .body-base {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
  }

  .body-small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-3);
  }

  /* Text Animation Classes */
  .text-reveal {
    opacity: 0;
    animation: text-reveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .text-reveal-delay-1 {
    animation-delay: 0.2s;
  }

  .text-reveal-delay-2 {
    animation-delay: 0.4s;
  }

  .text-reveal-delay-3 {
    animation-delay: 0.6s;
  }

  .fade-in-up {
    opacity: 0;
    animation: fade-in-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .fade-in-up-delay-1 {
    animation-delay: 0.3s;
  }

  .fade-in-up-delay-2 {
    animation-delay: 0.6s;
  }

  .bounce-in {
    opacity: 0;
    animation: bounce-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .bounce-in-delay-1 {
    animation-delay: 0.4s;
  }

  /* Typography Responsive Adjustments */
  @media (max-width: 768px) {
    .heading-1 {
      font-size: var(--text-4xl);
    }
    
    .heading-2 {
      font-size: var(--text-3xl);
    }
    
    .body-large {
      font-size: var(--text-lg);
    }
  }

  @media (max-width: 640px) {
    .heading-1 {
      font-size: var(--text-3xl);
    }
    
    .heading-2 {
      font-size: var(--text-2xl);
    }
  }
}

@layer utilities {
  /* Mobile Horizontal Scroll Prevention */
  .no-horizontal-scroll * {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .mobile-container {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .mobile-safe {
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  
  /* Animations and Effects */
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.3s ease-out forwards;
  }
  
  .animate-gradient-x {
    animation: gradientX 6s ease infinite;
    background-size: 400% 400%;
  }
  
  .animate-bounce-subtle {
    animation: bounceSubtle 0.8s ease-out forwards;
  }
  
  .animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
  }
  
  .animate-rocket-float {
    animation: rocketFloat 3s ease-in-out infinite;
  }
  
  .animate-icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
  }
  
  .animate-gradient-rotation {
    animation: gradientRotation 8s linear infinite;
    background-size: 400% 400%;
  }
  
  .animate-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
  }
  
  .bg-gradient-chat {
    background: var(--gradient-chat);
  }
  
  .bg-gradient-chat-animated {
    background: var(--gradient-chat-animated);
    background-size: 300% 300%;
  }
  
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }
  
  .hover-scale {
    transition: transform 0.2s ease-in-out;
  }
  
  .hover-scale:hover {
    transform: scale(1.02);
  }
  
  .hover-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .hover-glow:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px hsl(var(--primary) / 0.4), 0 0 60px hsl(var(--primary) / 0.2);
  }
  
  /* Enhanced Glassmorphism System */
  .glass-morphism {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  .glass-morphism:hover {
    backdrop-filter: blur(30px);
    box-shadow: 0 20px 50px 0 rgba(31, 38, 135, 0.5), 0 0 60px hsl(var(--primary) / 0.2);
    transform: translateY(-4px);
  }
  
  .glass-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  }

  .glass-card:hover {
    backdrop-filter: blur(35px);
    box-shadow: 0 35px 70px -12px rgba(0, 0, 0, 0.35), 0 0 60px rgba(59, 130, 246, 0.25);
    transform: translateY(-6px) scale(1.02);
  }

  /* Floating Glass Cards */
  .glass-float {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
      0 30px 60px -12px rgba(0, 0, 0, 0.3),
      0 18px 36px -18px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .glass-float:hover {
    backdrop-filter: blur(40px) saturate(200%);
    box-shadow: 
      0 50px 100px -20px rgba(0, 0, 0, 0.4),
      0 30px 60px -30px rgba(0, 0, 0, 0.3),
      0 0 80px hsl(var(--primary) / 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-8px) rotateX(5deg);
  }

  /* Bento Grid System */
  .bento-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: minmax(200px, auto);
  }

  .bento-item-sm {
    grid-column: span 1;
    grid-row: span 1;
  }

  .bento-item-md {
    grid-column: span 1;
    grid-row: span 2;
  }

  .bento-item-lg {
    grid-column: span 2;
    grid-row: span 1;
  }

  .bento-item-xl {
    grid-column: span 2;
    grid-row: span 2;
  }

  @media (max-width: 768px) {
    .bento-item-lg,
    .bento-item-xl {
      grid-column: span 1;
    }
  }

  /* Dynamic Depth Layers */
  .depth-layer-1 {
    z-index: 1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .depth-layer-1:hover {
    z-index: 10;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  .depth-layer-2 {
    z-index: 2;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .depth-layer-2:hover {
    z-index: 20;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(-4px);
  }

  .depth-layer-3 {
    z-index: 3;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .depth-layer-3:hover {
    z-index: 30;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    transform: translateY(-6px);
  }

  /* Interactive Shadow System */
  .shadow-interactive {
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  }

  .shadow-interactive:hover {
    box-shadow: var(--shadow-2xl), 0 0 50px hsl(var(--primary) / 0.2);
  }

  .shadow-interactive:active {
    box-shadow: var(--shadow-sm);
    transform: translateY(1px);
  }

  /* Glass Variants for Dark Mode */
  .dark .glass-morphism {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  }

  .dark .glass-card {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  }

  .dark .glass-float {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
      0 30px 60px -12px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .glass-chat-widget {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }
  
  .chat-option-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .chat-option-card:hover {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(108, 99, 255, 0.3);
    transform: translateY(-2px);
  }
  
  .text-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(280 100% 70%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .input-focus-glow {
    transition: all 0.3s ease;
  }
  
  .input-focus-glow:focus {
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.1), 0 0 20px hsl(var(--primary) / 0.3);
    border-color: hsl(var(--primary));
  }
  
  .button-futuristic {
    background: var(--gradient-button);
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .button-futuristic:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px hsl(var(--primary) / 0.4);
  }
  
  .button-futuristic:active {
    transform: translateY(0);
  }
  
  .floating-elements {
    animation: float 6s ease-in-out infinite;
  }
  
  .validation-success {
    border-color: hsl(var(--success));
    box-shadow: 0 0 0 3px hsl(var(--success) / 0.1);
  }
  
  .validation-error {
    border-color: hsl(var(--destructive));
    box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.1);
  }
  
  /* High Contrast Utilities for Accessibility */
  .badge-primary-contrast {
    background: hsl(221 83% 45%);
    color: hsl(0 0% 100%);
  }
  
  .text-muted-contrast {
    color: hsl(215 28% 12%);
  }
  
  /* Performance optimizations to reduce forced reflows */
  .contain-layout {
    contain: layout style paint;
  }
  
  .contain-strict {
    contain: strict;
  }
  
  /* Enhanced reflow prevention for vendor bundle operations */
  .hero-section, .product-section, .gallery-section {
    contain: layout style;
    will-change: auto;
  }
  
  /* Prevent reflows during intersection observer operations */
  [data-lazy-module] {
    contain: layout style;
  }
  
  /* Optimize elements commonly measured by vendor libraries */
  .card, .button, [role="button"] {
    contain: layout;
  }
  
  /* Animation containment to prevent cascade reflows */
  .animate-fade-in-up, .animate-pulse-glow, .hover-scale {
    contain: layout style;
    will-change: transform, opacity;
  }
  
  /* Transform-based animations to avoid layout thrashing */
  .hover-scale:hover {
    transform: scale(1.05);
  }
  
  .hover-lift:hover {
    transform: translateY(-2px);
  }
  
  /* Enhanced font loading optimization for LCP */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  
  /* Critical font optimization */
  html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-display: swap;
  }
  
  /* Enhanced image optimization for oversized assets */
  img {
    image-rendering: optimizeQuality;
    image-rendering: -webkit-optimize-contrast;
    contain: size layout;
  }
  
  /* Specific optimizations for logo images */
  img[src*="e45b8a27-b066-4a81-8c19-3089fd118f46"] {
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    /* Force hardware acceleration for smooth resizing */
    transform: translateZ(0);
    will-change: auto;
  }
  
  /* Optimize picture elements for faster loading */
  picture {
    display: contents;
  }
  
  picture img {
    /* Use browser's built-in image resizing optimization */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
  }
  
  /* LCP text optimization */
  .hero-title, .lcp-text, .lcp-badge {
    font-display: swap;
    contain: layout style;
    will-change: auto;
  }
  
  /* Optimize frequently measured elements */
  [data-rbd-droppable-id], [data-rbd-draggable-id] {
    contain: layout style;
    will-change: transform;
  }
  
  /* Chart container optimizations to prevent reflow during animations */
  .recharts-wrapper, .recharts-surface {
    contain: layout style paint;
    will-change: transform;
  }
  
  /* Dashboard grid optimizations */
  .grid, .flex {
    contain: layout;
  }
  
  /* Drag and Drop Mobile Utilities */
  .drag-active {
    overflow: hidden !important;
    touch-action: none !important;
    contain: strict;
  }
  
  .drag-active body {
    overflow: hidden !important;
    touch-action: none !important;
  }
  
  /* Drag and Drop Desktop Enhancements */
  .drag-item {
    cursor: grab;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
  }
  
  .drag-item:hover {
    transform: translateY(-1px);
  }
  
  .drag-item.dragging {
    cursor: grabbing !important;
    transform: scale(1.05) rotate(3deg) !important;
    transition: none !important;
    z-index: 1000;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  }
  
  .drag-placeholder {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--primary) / 0.05));
    border: 2px dashed hsl(var(--primary) / 0.3);
    border-radius: 12px;
    min-height: 120px;
    transition: all 0.15s ease;
  }
  
  .drag-drop-zone {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  
  .drag-drop-zone.drag-over {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.05), hsl(var(--primary) / 0.02));
    border: 1px solid hsl(var(--primary) / 0.2);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gradientX {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes bounceSubtle {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.2);
  }
  50% {
    box-shadow: 0 0 40px hsl(var(--primary) / 0.4);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-10px) translateX(5px);
  }
  50% {
    transform: translateY(0px) translateX(10px);
  }
  75% {
    transform: translateY(10px) translateX(5px);
  }
}

@keyframes rocketFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-2px) rotate(2deg);
  }
  66% {
    transform: translateY(2px) rotate(-2deg);
  }
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes gradientRotation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Animate Glow for Achievements */
.animate-glow {
  animation: achievementGlow 3s ease-in-out infinite;
}

@keyframes achievementGlow {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 3px hsl(var(--primary) / 0.3));
    transform: scale(1);
  }
  50% {
    filter: brightness(1.1) drop-shadow(0 0 8px hsl(var(--primary) / 0.5));
    transform: scale(1.02);
  }
}

/* Button Scroll Fix - Prevent Internal Scrollbars */
button, .btn, [role="button"] {
  overflow: hidden !important;
  white-space: nowrap;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  max-height: none !important;
  text-overflow: ellipsis;
}

/* Heading Scroll Fix - Prevent Internal Scrollbars in Titles */
h1, h2, h3, h4, h5, h6 {
  overflow: hidden !important;
  text-overflow: ellipsis;
}

/* Gradient text elements should not have scroll */
.bg-clip-text, [class*="bg-clip-text"] {
  overflow: hidden !important;
}

.button-container {
  overflow: visible !important;
}

/* Responsive Button Adjustments */
@media (max-width: 480px) {
  button, .btn, [role="button"] {
    font-size: 0.875rem;
    min-height: 2.5rem;
  }
  
  /* Specific mobile adjustments for landing page buttons */
  .btn-primary, button[class*="default"] {
    padding: 0.625rem 1rem !important;
  }
}

/* Academy Netflix-style scrolling utilities */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

.smooth-scroll {
  scroll-behavior: smooth;
}

/* Line clamp utilities for text truncation */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom Scrollbar for Chat - Modern & Elegant */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: hsl(var(--muted) / 0.3);
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary) / 0.7));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, hsl(var(--primary) / 0.9), hsl(var(--primary) / 0.6));
  background-clip: content-box;
}

/* Firefox scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--primary)) hsl(var(--muted) / 0.3);
}

/* Chat Message Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-slide-right {
  animation: slide-right 0.3s ease-out;
}

.animate-slide-left {
  animation: slide-left 0.3s ease-out;
}

/* Typing Indicator Animation */
@keyframes typing-dot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px);
  }
}

.typing-dot {
  animation: typing-dot 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Tiptap Rich Text Editor Styles */
.ProseMirror {
  outline: none;
  min-height: 200px;
  padding: 1rem;
}

.ProseMirror > * + * {
  margin-top: 0.75em;
}

.ProseMirror h1 {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.ProseMirror h2 {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.3;
  margin-top: 0.83em;
  margin-bottom: 0.5em;
}

.ProseMirror h3 {
  font-size: 1.17em;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

.ProseMirror p {
  line-height: 1.6;
}

.ProseMirror strong {
  font-weight: bold;
}

.ProseMirror em {
  font-style: italic;
}

.ProseMirror u {
  text-decoration: underline;
}

.ProseMirror ul,
.ProseMirror ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.ProseMirror ul {
  list-style-type: disc;
}

.ProseMirror ol {
  list-style-type: decimal;
}

.ProseMirror li {
  margin: 0.25rem 0;
}

.ProseMirror code {
  background-color: hsl(var(--muted));
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.9em;
}

.ProseMirror pre {
  background-color: hsl(var(--muted));
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.ProseMirror pre code {
  background-color: transparent;
  padding: 0;
}

.ProseMirror blockquote {
  border-left: 3px solid hsl(var(--primary));
  padding-left: 1rem;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

.ProseMirror[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  position: absolute;
}

/* Manual Dialog HTML Content Styles */
.prose h1 {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: hsl(var(--foreground));
}

.prose h2 {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.3;
  margin-top: 0.83em;
  margin-bottom: 0.5em;
  color: hsl(var(--foreground));
}

.prose h3 {
  font-size: 1.17em;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
  color: hsl(var(--foreground));
}

.prose p {
  line-height: 1.6;
  margin: 0.5em 0;
  color: hsl(var(--foreground));
}

.prose strong {
  font-weight: bold;
  color: hsl(var(--foreground));
}

.prose em {
  font-style: italic;
}

.prose u {
  text-decoration: underline;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
  color: hsl(var(--foreground));
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin: 0.25rem 0;
  line-height: 1.6;
}

.prose code {
  background-color: hsl(var(--muted));
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.9em;
}

.prose pre {
  background-color: hsl(var(--muted));
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.prose pre code {
  background-color: transparent;
  padding: 0;
}

.prose blockquote {
  border-left: 3px solid hsl(var(--primary));
  padding-left: 1rem;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

.prose hr {
  border: none;
  border-top: 1px solid hsl(var(--border));
  margin: 1.5em 0;
}

.prose br {
  display: block;
  content: "";
  margin: 0.5em 0;
}