/* Google Fonts - Must be first */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

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

/* =================================================================
   AI Suite v5.0 - Premium MagicProject-Style Design System
   Modern SaaS Dashboard Aesthetic
   ================================================================= */

@layer base {
  :root {
    /* Banner offset for fixed headers */
    --banner-height: 0px;

    /* ============================================
       CORE COLORS - Light Theme
       ============================================ */
    --background: 0 0% 98%;
    --foreground: 224 71% 4%;

    --card: 0 0% 100%;
    --card-foreground: 224 71% 4%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71% 4%;

    /* Primary - Vibrant Violet */
    --primary: 262 80% 60%;
    --primary-foreground: 0 0% 100%;

    /* Secondary - Cyan/Teal */
    --secondary: 189 94% 43%;
    --secondary-foreground: 0 0% 100%;

    /* Muted - Soft grays */
    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;

    /* Accent - Pink/Magenta */
    --accent: 330 81% 60%;
    --accent-foreground: 0 0% 100%;

    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Success */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    /* Warning */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 0%;

    /* Info */
    --info: 199 89% 48%;
    --info-foreground: 0 0% 100%;

    /* Borders & Inputs */
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262 80% 60%;

    --radius: 0.75rem;

    /* ============================================
       AI DESIGN SYSTEM - Light Theme
       ============================================ */
    /* Gradients */
    --ai-primary: 262 80% 60%;
    --ai-primary-light: 262 80% 70%;
    --ai-primary-dark: 262 80% 50%;
    --ai-secondary: 189 94% 43%;
    --ai-tertiary: 330 81% 60%;
    --ai-glow: 262 80% 60%;

    /* Background layers */
    --ai-bg-base: 0 0% 98%;
    --ai-bg-elevated: 0 0% 100%;
    --ai-bg-overlay: 0 0% 98% / 0.8;

    /* Glass effect */
    --ai-glass-bg: 0 0% 100% / 0.8;
    --ai-glass-border: 0 0% 100% / 0.4;
    --ai-glass-shadow: 262 80% 60% / 0.1;

    /* Sidebar */
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 224 71% 4%;
    --sidebar-primary: 262 80% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 262 80% 97%;
    --sidebar-accent-foreground: 262 80% 40%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 262 80% 60%;
    --sidebar-muted: 220 14% 96%;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.2);
    --shadow-glow: 0 0 30px hsl(262 80% 60% / 0.25);
    --shadow-glow-lg: 0 0 50px hsl(262 80% 60% / 0.35);
    --shadow-glow-cyan: 0 0 30px hsl(189 94% 43% / 0.25);

    /* Animations */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Chart colors */
    --chart-1: 262 80% 60%;
    --chart-2: 189 94% 43%;
    --chart-3: 330 81% 60%;
    --chart-4: 142 76% 36%;
    --chart-5: 38 92% 50%;
  }

  .dark {
    /* ============================================
       CORE COLORS - Dark Theme (Premium)
       ============================================ */
    --background: 240 10% 4%;
    --foreground: 0 0% 98%;

    --card: 240 6% 7%;
    --card-foreground: 0 0% 98%;

    --popover: 240 6% 7%;
    --popover-foreground: 0 0% 98%;

    /* Primary - Vibrant Violet */
    --primary: 263 70% 58%;
    --primary-foreground: 0 0% 100%;

    /* Secondary - Cyan */
    --secondary: 189 94% 50%;
    --secondary-foreground: 0 0% 0%;

    /* Muted */
    --muted: 240 4% 14%;
    --muted-foreground: 240 5% 65%;

    /* Accent */
    --accent: 330 81% 65%;
    --accent-foreground: 0 0% 100%;

    /* Destructive */
    --destructive: 0 72% 50%;
    --destructive-foreground: 0 0% 100%;

    /* Success */
    --success: 142 76% 40%;
    --success-foreground: 0 0% 100%;

    /* Warning */
    --warning: 38 92% 55%;
    --warning-foreground: 0 0% 0%;

    /* Info */
    --info: 199 89% 55%;
    --info-foreground: 0 0% 100%;

    /* Borders & Inputs */
    --border: 240 4% 16%;
    --input: 240 4% 16%;
    --ring: 263 70% 58%;

    /* ============================================
       AI DESIGN SYSTEM - Dark Theme
       ============================================ */
    --ai-primary: 263 70% 58%;
    --ai-primary-light: 263 70% 68%;
    --ai-primary-dark: 263 70% 48%;
    --ai-secondary: 189 94% 50%;
    --ai-tertiary: 330 81% 65%;
    --ai-glow: 263 70% 58%;

    /* Background layers - Deep & Rich */
    --ai-bg-base: 240 10% 4%;
    --ai-bg-elevated: 240 6% 7%;
    --ai-bg-overlay: 240 10% 4% / 0.95;

    /* Glass effect - Dark theme specific */
    --ai-glass-bg: 240 6% 10% / 0.8;
    --ai-glass-border: 240 4% 20% / 0.6;
    --ai-glass-shadow: 263 70% 58% / 0.15;

    /* Sidebar - Darker for contrast */
    --sidebar-background: 240 8% 5%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 263 70% 58%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 263 70% 58% / 0.15;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 4% 12%;
    --sidebar-ring: 263 70% 58%;
    --sidebar-muted: 240 4% 14%;

    /* Shadows - Enhanced for dark mode */
    --shadow-glow: 0 0 40px hsl(263 70% 58% / 0.35);
    --shadow-glow-lg: 0 0 60px hsl(263 70% 58% / 0.45);
    --shadow-glow-cyan: 0 0 40px hsl(189 94% 50% / 0.35);

    /* Chart colors - Brighter for dark mode */
    --chart-1: 263 70% 65%;
    --chart-2: 189 94% 55%;
    --chart-3: 330 81% 70%;
    --chart-4: 142 76% 50%;
    --chart-5: 38 92% 60%;
  }
}

/* ============================================
   BASE STYLES
   ============================================ */
@layer base {
  * {
    @apply border-border;
  }

  html {
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    background:
      radial-gradient(ellipse 100% 100% at 50% -30%, hsl(var(--ai-primary) / 0.08), transparent 60%),
      radial-gradient(ellipse 80% 80% at 100% 0%, hsl(var(--ai-secondary) / 0.05), transparent 50%),
      radial-gradient(ellipse 80% 80% at 0% 100%, hsl(var(--ai-tertiary) / 0.05), transparent 50%),
      hsl(var(--background));
    background-attachment: fixed;
  }

  /* Selection */
  ::selection {
    background: hsl(var(--ai-primary) / 0.25);
    color: hsl(var(--foreground));
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.2);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.4);
  }

  /* Focus styles */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  /* Remove default focus outlines for Recharts elements */
  .recharts-wrapper,
  .recharts-surface,
  .recharts-pie,
  .recharts-area,
  .recharts-layer {
    outline: none !important;
  }

  .recharts-layer {
    border-color: transparent !important;
  }
}

/* ============================================
   COMPONENT STYLES
   ============================================ */
@layer components {

  /* ----- Premium Card ----- */
  .premium-card {
    @apply relative rounded-2xl border bg-card text-card-foreground overflow-hidden;
    background: linear-gradient(145deg,
        hsl(var(--card)) 0%,
        hsl(var(--card) / 0.9) 100%);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-slow);
  }

  .premium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        hsl(var(--ai-primary) / 0) 0%,
        hsl(var(--ai-primary) / 0.04) 100%);
    opacity: 0;
    transition: opacity var(--transition-slow);
  }

  .premium-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    border-color: hsl(var(--ai-primary) / 0.25);
  }

  .premium-card:hover::before {
    opacity: 1;
  }

  /* ----- Glass Card ----- */
  .glass-card {
    @apply rounded-2xl border;
    background: hsl(var(--ai-glass-bg));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-color: hsl(var(--ai-glass-border));
    box-shadow:
      0 8px 32px hsl(var(--ai-glass-shadow)),
      inset 0 0 0 1px hsl(var(--ai-glass-border));
  }

  /* ----- Dashboard Stats Card ----- */
  .dashboard-stat-card {
    @apply relative rounded-2xl p-5 overflow-hidden;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary)) 0%,
        hsl(var(--ai-secondary)) 100%);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
  }

  .dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
  }

  /* ----- Gradient Text ----- */
  .gradient-text {
    background: linear-gradient(135deg,
        hsl(var(--ai-primary)) 0%,
        hsl(var(--ai-secondary)) 50%,
        hsl(var(--ai-tertiary)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

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

  .gradient-text-subtle {
    background: linear-gradient(135deg,
        hsl(var(--foreground)) 0%,
        hsl(var(--muted-foreground)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ----- Gradient Border ----- */
  .gradient-border {
    position: relative;
    background: hsl(var(--card));
    border-radius: var(--radius);
  }

  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary)),
        hsl(var(--ai-secondary)),
        hsl(var(--ai-tertiary)));
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  /* ----- Premium Button ----- */
  .btn-premium {
    @apply relative inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold rounded-xl;
    @apply text-white overflow-hidden;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary)) 0%,
        hsl(var(--ai-secondary)) 100%);
    box-shadow:
      0 4px 20px hsl(var(--ai-primary) / 0.35),
      inset 0 1px 0 hsl(var(--ai-primary-light) / 0.3);
    transition: all var(--transition-base);
  }

  .btn-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary-light)) 0%,
        hsl(var(--ai-secondary)) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
  }

  .btn-premium:hover {
    transform: translateY(-2px);
    box-shadow:
      0 8px 30px hsl(var(--ai-primary) / 0.45),
      inset 0 1px 0 hsl(var(--ai-primary-light) / 0.4);
  }

  .btn-premium:hover::before {
    opacity: 1;
  }

  .btn-premium:active {
    transform: translateY(0);
  }

  .btn-premium>* {
    position: relative;
    z-index: 1;
  }

  /* ----- Glow Effect ----- */
  .glow {
    position: relative;
  }

  .glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary)),
        hsl(var(--ai-secondary)),
        hsl(var(--ai-tertiary)));
    border-radius: inherit;
    filter: blur(12px);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-slow);
  }

  .glow:hover::after {
    opacity: 0.5;
  }

  /* ----- Shimmer Effect ----- */
  .shimmer {
    position: relative;
    overflow: hidden;
  }

  .shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        hsl(var(--foreground) / 0.04) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: shimmer 2.5s infinite;
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  /* ----- Loading Skeleton ----- */
  .skeleton {
    @apply bg-muted rounded-md;
    animation: skeleton-pulse 2s ease-in-out infinite;
  }

  @keyframes skeleton-pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }
  }

  /* ----- Icon Container ----- */
  .icon-container {
    @apply flex items-center justify-center rounded-xl;
    @apply w-10 h-10 md:w-12 md:h-12;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary) / 0.15) 0%,
        hsl(var(--ai-secondary) / 0.1) 100%);
    transition: all var(--transition-base);
  }

  .icon-container:hover {
    background: linear-gradient(135deg,
        hsl(var(--ai-primary) / 0.25) 0%,
        hsl(var(--ai-secondary) / 0.2) 100%);
    transform: scale(1.05);
  }

  /* ----- Badge Styles ----- */
  .badge-premium {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary)) 0%,
        hsl(var(--ai-secondary)) 100%);
    color: white;
    box-shadow: 0 2px 10px hsl(var(--ai-primary) / 0.35);
  }

  .badge-new {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
  }

  /* ----- Feature Card ----- */
  .feature-card {
    @apply relative p-5 rounded-2xl border bg-card overflow-hidden;
    transition: all var(--transition-slow);
  }

  .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        hsl(var(--ai-primary)),
        hsl(var(--ai-secondary)),
        hsl(var(--ai-tertiary)));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
  }

  .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    border-color: hsl(var(--ai-primary) / 0.25);
  }

  .feature-card:hover::before {
    transform: scaleX(1);
  }

  /* ----- Stats Card ----- */
  .stats-card {
    @apply relative p-5 rounded-2xl overflow-hidden;
    background: linear-gradient(145deg,
        hsl(var(--card)) 0%,
        hsl(var(--muted)) 100%);
    border: 1px solid hsl(var(--border));
  }

  .stats-card-gradient {
    @apply relative p-5 rounded-2xl overflow-hidden text-white;
    background: linear-gradient(135deg,
        hsl(var(--ai-primary)) 0%,
        hsl(var(--ai-secondary)) 100%);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
  }

  /* ----- Sidebar Styles ----- */
  .sidebar-item {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium;
    @apply text-sidebar-foreground/70 transition-all;
  }

  .sidebar-item:hover {
    @apply bg-sidebar-accent text-sidebar-accent-foreground;
  }

  .sidebar-item.active {
    @apply bg-primary text-primary-foreground;
    box-shadow: 0 4px 15px hsl(var(--primary) / 0.3);
  }

  /* ----- Input Styles ----- */
  .input-premium {
    @apply w-full px-4 py-3 rounded-xl border bg-background text-foreground;
    @apply placeholder:text-muted-foreground;
    transition: all var(--transition-base);
  }

  .input-premium:focus {
    @apply outline-none border-primary;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
  }

  /* ----- Tool Card ----- */
  .tool-card {
    @apply relative group p-5 rounded-2xl border bg-card cursor-pointer overflow-hidden;
    transition: all var(--transition-slow);
  }

  .tool-card:hover {
    @apply border-primary/25;
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl), 0 0 25px hsl(var(--ai-primary) / 0.12);
  }

  .tool-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top,
        hsl(var(--ai-primary) / 0.04),
        transparent);
    opacity: 0;
    transition: opacity var(--transition-slow);
  }

  .tool-card:hover::after {
    opacity: 1;
  }

  /* ----- Dashboard Header ----- */
  .dashboard-header {
    @apply relative pb-6 mb-8;
  }

  .dashboard-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        hsl(var(--border)),
        transparent);
  }

  /* ----- Quick Action Button ----- */
  .quick-action-btn {
    @apply flex flex-col items-center justify-center gap-2 p-4 rounded-2xl border bg-card;
    @apply transition-all cursor-pointer;
  }

  .quick-action-btn:hover {
    @apply border-primary/30 bg-primary/5;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  /* ----- Section Title ----- */
  .section-title {
    @apply text-lg font-semibold mb-4 flex items-center gap-2;
  }

  .section-title-icon {
    @apply w-5 h-5 text-primary;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
@layer utilities {
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Background patterns */
  .bg-grid {
    background-image:
      linear-gradient(to right, hsl(var(--border) / 0.4) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--border) / 0.4) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .bg-dots {
    background-image: radial-gradient(hsl(var(--border) / 0.8) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Gradient backgrounds */
  .bg-gradient-radial {
    background: radial-gradient(ellipse at center,
        hsl(var(--ai-primary) / 0.12) 0%,
        transparent 70%);
  }

  .bg-gradient-conic {
    background: conic-gradient(from 180deg at 50% 50%,
        hsl(var(--ai-primary)) 0deg,
        hsl(var(--ai-secondary)) 120deg,
        hsl(var(--ai-tertiary)) 240deg,
        hsl(var(--ai-primary)) 360deg);
  }

  /* Text utilities */
  .text-balance {
    text-wrap: balance;
  }

  /* Animation utilities */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-8px);
    }
  }

  .animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }

  @keyframes gradient-shift {

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

    50% {
      background-position: 100% 50%;
    }
  }

  /* Backdrop blur levels */
  .backdrop-blur-xs {
    backdrop-filter: blur(2px);
  }

  /* Hide scrollbar */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Aspect ratios */
  .aspect-golden {
    aspect-ratio: 1.618 / 1;
  }

  /* Line clamp */
  .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;
  }

  /* Glow utilities */
  .glow-primary {
    box-shadow: var(--shadow-glow);
  }

  .glow-cyan {
    box-shadow: var(--shadow-glow-cyan);
  }

  /* Hover glow */
  .hover-glow:hover {
    box-shadow: var(--shadow-glow);
  }

  .hover-glow-cyan:hover {
    box-shadow: var(--shadow-glow-cyan);
  }
}

/* ============================================
   LANDING PAGE PREMIUM EFFECTS
   ============================================ */

/* Animated Glow Orb */
.landing-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: glow-float 8s ease-in-out infinite;
}

@keyframes glow-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  33% { transform: translate(30px, -20px) scale(1.1); opacity: 0.7; }
  66% { transform: translate(-20px, 15px) scale(0.95); opacity: 0.4; }
}

/* Waveform Equalizer Bar */
.waveform-bar {
  display: inline-block;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to top, hsl(var(--ai-primary)), hsl(var(--ai-secondary)));
  animation: waveform var(--waveform-duration, 1s) ease-in-out infinite;
  animation-delay: var(--waveform-delay, 0s);
}

@keyframes waveform {
  0%, 100% { height: var(--waveform-min, 8px); }
  50% { height: var(--waveform-max, 32px); }
}

/* Card Shine Sweep */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    hsl(var(--foreground) / 0.03) 45%,
    hsl(var(--foreground) / 0.06) 50%,
    hsl(var(--foreground) / 0.03) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
}

.card-shine:hover::after {
  animation: shine-sweep 0.8s ease forwards;
}

@keyframes shine-sweep {
  to { transform: translateX(100%); }
}

/* Marketing Metric Card */
.marketing-metric-card {
  @apply rounded-xl px-4 py-3 border;
  background: hsl(var(--ai-glass-bg));
  backdrop-filter: blur(16px);
  border-color: hsl(var(--ai-glass-border));
  box-shadow: 0 4px 24px hsl(var(--ai-glass-shadow));
  animation: metric-float 5s ease-in-out infinite;
}

@keyframes metric-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Gradient Mesh Background */
.gradient-mesh-bg {
  background:
    radial-gradient(at 20% 20%, hsl(var(--ai-primary) / 0.15) 0%, transparent 50%),
    radial-gradient(at 80% 20%, hsl(var(--ai-secondary) / 0.12) 0%, transparent 50%),
    radial-gradient(at 50% 80%, hsl(var(--ai-tertiary) / 0.1) 0%, transparent 50%),
    radial-gradient(at 80% 80%, hsl(var(--ai-primary) / 0.08) 0%, transparent 50%);
}

/* Section Divider Glow Line */
.section-divider-glow {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    hsl(var(--ai-primary) / 0.5),
    hsl(var(--ai-secondary) / 0.5),
    hsl(var(--ai-tertiary) / 0.5),
    transparent
  );
}

/* Pulsing Ring */
.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid hsl(var(--ai-primary) / 0.3);
  animation: pulse-ring-anim 2s ease-out infinite;
}

@keyframes pulse-ring-anim {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Marquee scroll for trusted-by logos */
.marquee-scroll {
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-subtle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* Entrance animations for dashboard */
.animate-in {
  animation: fade-in-up 0.5s ease-out forwards;
}

.animate-in-delay-1 {
  animation: fade-in-up 0.5s ease-out 0.1s forwards;
  opacity: 0;
}

.animate-in-delay-2 {
  animation: fade-in-up 0.5s ease-out 0.2s forwards;
  opacity: 0;
}

.animate-in-delay-3 {
  animation: fade-in-up 0.5s ease-out 0.3s forwards;
  opacity: 0;
}

.animate-in-delay-4 {
  animation: fade-in-up 0.5s ease-out 0.4s forwards;
  opacity: 0;
}