/* Add to the top of your existing index.css */

/* Critical above-the-fold optimizations */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Optimize font loading */
@font-face {
  font-family: 'Inter-fallback';
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  src: local('Arial');
}

body {
  font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif;
  /* Prevent layout shifts */
  overflow-x: hidden;
}

/* Optimize images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Content-visibility for off-screen content */
.lazy-load {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}


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

/* Import Inter and Inter Tight fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700&family=Inter:wght@400;500&display=swap');

/* Fidelya Brand Design System */

@layer base {
  :root {
    /* Fidelya Brand Colors - Enhanced Palette */
    --background: 0 0% 100%;        /* Pure white */
    --foreground: 15 23 42;     /* Dark text */

    --card: 0 0% 100%;              /* Pure white cards */
    --card-foreground: 15 23 42;

    --popover: 0 0% 100%;            /* Pure white popover */
    --popover-foreground: 15 23 42;

    /* Primary Purple Spectrum */
    --primary: 265 85% 50%;      /* #6D28D9 */
    --primary-dark: 275 85% 32%; /* #581C87 */
    --primary-light: 264 83% 57%; /* #7C3AED */
    --primary-lighter: 262 83% 78%; /* #A78BFA */
    --primary-lightest: 255 77% 91%; /* #DDD6FE */
    --primary-foreground: 0 0% 100%;

    /* Secondary Orange Spectrum */
    --secondary: 25 95% 52%;     /* #F97316 */
    --secondary-dark: 17 88% 32%; /* #9A3412 */
    --secondary-darker: 15 79% 48%; /* #EA580C */
    --secondary-light: 27 96% 61%; /* #FB923C */
    --secondary-lightest: 25 95% 84%; /* #FED7AA */
    --secondary-foreground: 0 0% 100%;

    /* Light Lavender surfaces */
    --muted: 270 100% 96%;       /* #F3E8FF */
    --muted-foreground: 64 12% 50%;

    /* Accent Colors */
    --accent: 275 85% 32%;       /* #581C87 */
    --accent-foreground: 0 0% 100%;

    /* Mission Section: Gradient */
    --mission: 25 95% 52%;
    --mission-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Enhanced Borders */
    --border: 255 77% 91%;       /* #DDD6FE */
    --input: 255 77% 91%;
    --ring: 265 85% 50%;

    /* Award-Winning Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(265 85% 50%) 0%, hsl(275 85% 32%) 25%, hsl(25 95% 52%) 75%, hsl(15 79% 48%) 100%);
    --gradient-card: linear-gradient(145deg, hsla(0, 0%, 100%, 0.9), hsla(255, 77%, 91%, 0.8));
    --gradient-glass: linear-gradient(145deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.05));
    --gradient-glow: radial-gradient(circle at center, hsla(265, 85%, 50%, 0.3), transparent 70%);
    --gradient-orange-glow: radial-gradient(circle at center, hsla(25, 95%, 52%, 0.3), transparent 70%);
    
    /* Sophisticated Shadows */
    --shadow-soft: 0 4px 20px -4px hsl(265 85% 50% / 0.1);
    --shadow-medium: 0 8px 32px -8px hsl(265 85% 50% / 0.15);
    --shadow-strong: 0 16px 64px -16px hsl(265 85% 50% / 0.25);
    --shadow-glow: 0 0 40px hsl(265 85% 50% / 0.4);
    --shadow-orange: 0 8px 32px -8px hsl(25 95% 52% / 0.2);
    --shadow-glass: 0 8px 32px hsla(0, 0%, 0%, 0.1);

    /* Typography */
    --font-heading: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Advanced Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --radius: 1.5rem; /* rounded-3xl for modern look */

    --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: 255 77% 91%;
    --sidebar-ring: 265 85% 50%;
  }

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

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

  body {
    @apply bg-background text-foreground font-body;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }

  /* Fluid Typography */
  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
  }

  h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    line-height: 1.3;
  }

  p {
    line-height: 1.6;
  }

  /* Smooth scroll behavior */
  html {
    scroll-behavior: smooth;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Award-Winning Button Styles */
  .btn-primary {
    @apply bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--secondary))] text-white hover:from-[hsl(var(--primary-dark))] hover:to-[hsl(var(--secondary-darker))] rounded-3xl px-6 sm:px-8 py-3 sm:py-4 font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
    box-shadow: var(--shadow-medium);
  }

  .btn-secondary {
    @apply border-2 border-[hsl(var(--primary))] bg-gradient-to-r from-transparent to-[hsl(var(--primary))/5%] text-[hsl(var(--primary))] hover:bg-[hsl(var(--primary))] hover:text-white rounded-3xl px-6 sm:px-8 py-3 sm:py-4 font-semibold transition-all duration-300 backdrop-blur-sm;
    box-shadow: var(--shadow-soft);
  }

  /* Glass Morphism Cards */
  .glass-card {
    @apply bg-white/20 backdrop-blur-xl border border-white/30 rounded-3xl p-6 sm:p-8 shadow-2xl;
    background: var(--gradient-glass);
    box-shadow: var(--shadow-glass);
  }

  /* Floating Elements */
  .floating {
    animation: float 6s ease-in-out infinite;
  }

  /* Glow Effects */
  .glow-purple {
    box-shadow: 0 0 60px hsl(var(--primary) / 0.3);
  }

  .glow-orange {
    box-shadow: 0 0 60px hsl(var(--secondary) / 0.3);
  }

  /* Text Gradients */
  .text-gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

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

/* Advanced Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes shape-float {
  0%, 100% { 
    transform: translate(-50%, 0px) rotate(0deg) scale(1); 
  }
  33% { 
    transform: translate(-50%, -15px) rotate(1deg) scale(1.02); 
  }
  66% { 
    transform: translate(-50%, -8px) rotate(-1deg) scale(0.98); 
  }
}

@keyframes shape-morph {
  0%, 100% { 
    border-radius: 50%;
    transform: translate(-50%, 0px) scale(1);
  }
  50% { 
    border-radius: 20px;
    transform: translate(-50%, -10px) scale(1.05);
  }
}

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

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

/* ========================================================================== */
/* MOBILE RESPONSIVE UTILITIES - ADDED FOR BETTER MOBILE EXPERIENCE */
/* ========================================================================== */

/* Mobile Responsive Utilities */
@media (max-width: 640px) {
  .text-5xl { font-size: 2.5rem !important; }
  .text-7xl { font-size: 3rem !important; }
  .text-8xl { font-size: 3.5rem !important; }
  .text-4xl { font-size: 2rem !important; }
  .text-6xl { font-size: 2.5rem !important; }
  
  .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .min-h-screen { min-height: 100vh !important; }
  
  /* Fix grid layouts for mobile */
  .grid-cols-2 { grid-template-columns: 1fr !important; }
  
  /* Improve spacing for mobile */
  .space-y-8 > * + * { margin-top: 1.5rem !important; }
  .space-y-16 > * + * { margin-top: 3rem !important; }
  
  /* Reduce padding on small screens */
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-16 { padding-left: 2rem !important; padding-right: 2rem !important; }
}

@media (max-width: 480px) {
  .text-5xl { font-size: 2rem !important; }
  .text-7xl { font-size: 2.5rem !important; }
  .text-8xl { font-size: 3rem !important; }
  .text-4xl { font-size: 1.75rem !important; }
  .text-6xl { font-size: 2.25rem !important; }
  
  /* Even smaller padding on very small screens */
  .px-8 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .px-16 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Ensure proper touch targets for mobile accessibility */
button, 
a {
  min-height: 44px;
  min-width: 44px;
}

/* Improve scrolling on mobile */
html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Prevent horizontal scroll and ensure proper viewport */
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Mobile-specific section container */
.mobile-section {
  @apply px-4 sm:px-6 py-8 sm:py-16;
}

/* Responsive text utilities */
.text-mobile-lg {
  @apply text-lg sm:text-xl;
}

.text-mobile-xl {
  @apply text-xl sm:text-2xl;
}

.text-mobile-2xl {
  @apply text-2xl sm:text-3xl;
}

.text-mobile-3xl {
  @apply text-3xl sm:text-4xl;
}

/* Mobile-first spacing utilities */
.mobile-py {
  @apply py-8 sm:py-16;
}

.mobile-my {
  @apply my-8 sm:my-16;
}

.mobile-mb {
  @apply mb-6 sm:mb-8;
}

.mobile-mt {
  @apply mt-6 sm:mt-8;
}

/* Hide elements on mobile, show on desktop */
.mobile-hidden {
  @apply hidden sm:block;
}

.mobile-only {
  @apply block sm:hidden;
}

/* Stack elements vertically on mobile */
.mobile-stack {
  @apply flex flex-col sm:flex-row;
}

.mobile-stack-reverse {
  @apply flex flex-col-reverse sm:flex-row;
}

/* Center content on mobile */
.mobile-center {
  @apply text-center sm:text-left;
}

.mobile-flex-center {
  @apply flex flex-col items-center sm:items-start;
}

/* Responsive gap utilities */
.gap-mobile {
  @apply gap-4 sm:gap-8;
}

.gap-mobile-lg {
  @apply gap-6 sm:gap-12;
}

/* Mobile-optimized images */
.responsive-image {
  @apply w-full h-auto max-w-full;
}

/* Touch-friendly interactive elements */
.touch-target {
  @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
}

/* Mobile-optimized form elements */
.mobile-input {
  @apply text-base px-4 py-3 rounded-lg;
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  .floating {
    animation-duration: 8s;
  }
  
  /* Simplify complex gradients on mobile */
  .glass-card {
    background: hsla(0, 0%, 100%, 0.1);
    backdrop-filter: blur(10px);
  }
  
  /* Reduce shadow intensity on mobile */
  .shadow-lg {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .shadow-xl {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

/* Print styles */
@media print {
  .floating,
  .glass-card,
  .shadow-lg,
  .shadow-xl {
    animation: none !important;
    box-shadow: none !important;
    background: white !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .glass-card {
    background: white;
    border: 2px solid black;
  }
  
  .text-gradient-primary,
  .text-gradient-reverse {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: black !important;
  }
}

/* Reduced motion support (enhanced) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .floating {
    animation: none !important;
  }
}

/* Dark mode mobile optimizations */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .glass-card {
    background: hsla(0, 0%, 100%, 0.05);
  }
}

/* Very small screen optimizations */
@media (max-width: 360px) {
  .section-container {
    @apply px-3;
  }
  
  .btn-primary,
  .btn-secondary {
    @apply px-4 py-2 text-sm;
  }
  
  .text-mobile-lg {
    @apply text-base;
  }
}