/* Google Fonts will be loaded via preload in the head for better performance */

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

/* Design System v2 - Premium Typography & Colors */
@layer base {
  :root {
    /* Enhanced Color Palette */
    --color-text-primary: #333333;     /* Softer than pure black */
    --color-text-secondary: #666666;   /* For secondary text */
    --color-primary: #008080;          /* Teal for CTAs/links */
    --color-primary-dark: #006666;     /* Hover state */
    --color-primary-light: #00808015;  /* Very light teal backgrounds */
    --color-secondary: #D4AF37;        /* Gold accents */
    --color-success: #38A169;          /* For success states */
    --color-trust: #2B6CB0;            /* Trust badges */
    --color-surface: #FFFFFF;          /* Card/component backgrounds */
    --color-error: #EF4444;            /* Error states */
    
    /* Typography - Desktop Only (Mobile uses system) */
    --font-heading: 'Syne', -apple-system, sans-serif;
    --font-body: 'Lato', -apple-system, sans-serif;
    
    /* Font Sizes */
    --text-h1: 3.5rem;     /* 56px */
    --text-h2: 2.5rem;     /* 40px */
    --text-h3: 2rem;       /* 32px */
    --text-body: 1.125rem; /* 18px */
    --text-small: 0.875rem;/* 14px */
    
    /* Component Sizing */
    --btn-height: 3rem;        /* 48px */
    --btn-height-mobile: 3.5rem; /* 56px */
    --input-height: 3rem;      /* 48px */
    --touch-target: 48px;      /* Minimum touch size */
  }
}

/* Disable animations on mobile for better performance */
@media (max-width: 768px) {
  *, *::before, *::after {
    animation-duration: 0.1s !important;
    animation-delay: 0s !important;
    transition-duration: 0.1s !important;
    transition-delay: 0s !important;
  }
}

/* Hero button styles - Updated with teal primary */
.hero-btn {
  @apply px-6 py-3 font-semibold rounded-md transition-all duration-200;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: var(--btn-height);
}

@media (max-width: 768px) {
  .hero-btn {
    min-height: var(--btn-height-mobile);
  }
}

.hero-btn-primary {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: 2px solid var(--color-primary) !important;
}

.hero-btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 128, 128, 0.3);
}

.hero-btn-secondary {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--color-primary) !important;
  border: 2px solid #fff !important;
  backdrop-filter: blur(4px);
}

.hero-btn-secondary:hover {
  background-color: #fff !important;
  color: var(--color-primary-dark) !important;
}

/* Test class to detect if global CSS is loaded */
.tw-test-loaded {
  display: none !important;
}

/* Accessibility: Skip to main content link */
.skip-link {
  @apply absolute left-[-10000px] top-auto w-px h-px overflow-hidden;
  @apply focus:absolute focus:left-0 focus:top-0 focus:w-auto focus:h-auto focus:overflow-auto;
  @apply focus:z-[9999] focus:p-4 focus:bg-black focus:text-white focus:no-underline;
  @apply focus:rounded-br-lg focus:shadow-lg;
}

/* Enhanced focus indicators - Updated with teal */
@layer base {
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  
  /* Dark backgrounds need light focus */
  .dark-focus:focus-visible {
    @apply outline-white;
  }
  
  /* Custom button focus */
  button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    @apply ring-0;
  }
  
  /* Form input focus */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
    border-color: var(--color-primary);
    @apply ring-0;
  }
  
  /* Link focus */
  a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    @apply rounded;
  }
  
  /* Remove default browser outline */
  *:focus {
    outline: none;
  }
}

/* Reduced motion preferences */
@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;
  }
  
  .aos-animate {
    transition-property: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  button,
  .btn {
    border: 2px solid currentColor !important;
  }
  
  a {
    text-decoration: underline !important;
  }
}

/* Typography utility classes - Desktop only */
@media (min-width: 769px) {
  .font-heading {
    font-family: var(--font-heading) !important;
  }
  
  .font-body {
    font-family: var(--font-body) !important;
  }
  
  /* Apply heading font to all headings by default */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-primary);
  }
  
  /* Apply body font to paragraphs and other text */
  body, p, li, td, th, label, input, textarea, select {
    font-family: var(--font-body);
    color: var(--color-text-primary);
  }
}

/* Text color utilities */
.text-primary {
  color: var(--color-text-primary) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

.text-teal {
  color: var(--color-primary) !important;
}

.text-gold {
  color: var(--color-secondary) !important;
}

/* Mobile Navigation Padding & Overflow Protection */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
  }
  
  /* Ensure main content doesn't overflow */
  main {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

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

@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: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --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: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .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%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

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

  body {
    @apply bg-background;
    color: var(--color-text-primary);
    /* Updated font stack with Lato */
    font-family: var(--font-body);
    font-display: swap;
    
    /* Mobile-first font optimization */
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Mobile text size adjustment */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    /* Prevent overscroll blank spaces */
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
  }
  
  html {
    @apply overflow-x-hidden;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }

  #root {
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply leading-tight;
    /* Premium heading font */
    font-family: var(--font-heading);
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-text-primary);
  }
  
  @media (max-width: 768px) {
    /* Use system fonts on mobile for performance */
    h1, h2, h3, h4, h5, h6 {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
  }

  p, li, span {
    /* Optimal line height for reading on mobile */
    line-height: 1.6;
    /* Better word spacing for mobile */
    word-spacing: 0.05em;
  }

  /* Mobile-specific font sizes */
  @media (max-width: 768px) {
    h1 {
      @apply text-2xl;
      line-height: 1.1;
    }
    
    h2 {
      @apply text-xl;
      line-height: 1.2;
    }
    
    h3 {
      @apply text-lg;
      line-height: 1.3;
    }
    
    p, li, span {
      @apply text-base;
      line-height: 1.6;
    }
    
    small {
      @apply text-sm;
    }
  }
}

@layer components {
  .hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* Essential typography only */
  .hero-title-main {
    @apply text-6xl md:text-7xl font-bold leading-tight tracking-tight;
    -webkit-font-smoothing: antialiased;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .page-title {
    @apply text-3xl md:text-5xl font-light leading-tight;
    -webkit-font-smoothing: antialiased;
  }

  .section-title {
    @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-inter font-bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .artist-name {
    @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl font-inter font-light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .body-large {
    @apply text-base md:text-lg;
    line-height: 1.6;
  }

  .body-medium {
    @apply text-base sm:text-base md:text-lg font-inter;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
  }

  .body-regular {
    @apply text-sm md:text-base;
    line-height: 1.6;
  }

  .cta-button-text {
    @apply text-base md:text-lg font-bold tracking-wider uppercase;
  }

  .button-text {
    @apply text-sm md:text-base font-medium tracking-wide;
  }

  /* Mobile-optimized utility classes */
  .caption-text {
    @apply text-xs sm:text-sm text-gray-600 font-inter;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .small-text {
    @apply text-xs text-gray-500 font-inter;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .quote-text {
    @apply text-base sm:text-lg md:text-xl lg:text-2xl font-inter italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
  }

  .number-large {
    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-inter font-bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
  }

  /* Mobile Touch Target Sizes */
  .touch-target {
    @apply min-h-[44px] min-w-[44px];
  }

  .mobile-button {
    @apply min-h-[48px] min-w-[48px];
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* Mobile-Optimized Spacing */
  .section-padding {
    @apply py-12 sm:py-16 md:py-20 lg:py-24;
  }

  .container-padding {
    @apply px-4 sm:px-6 lg:px-8;
  }

  /* Typography controls for better text flow */
  .no-widows {
    orphans: 4;
    widows: 4;
    word-wrap: break-word;
    hyphens: none;
    text-wrap: pretty;
    hanging-punctuation: none;
    line-break: auto;
  }

  /* More aggressive widow prevention */
  .no-widows-strict {
    orphans: 5;
    widows: 5;
    word-wrap: break-word;
    hyphens: none;
    text-wrap: balance;
    text-rendering: optimizeLegibility;
    font-kerning: auto;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
  }

  /* Floating Widget Specific Overrides */
  .floating-widgets-container svg {
    width: inherit !important;
    height: inherit !important;
    color: inherit !important;
    fill: currentColor !important;
  }

  /* Ensure lucide icons are properly styled */
  .lucide {
    width: inherit !important;
    height: inherit !important;
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  /* WhatsApp main button specific overrides */
  .whatsapp-main-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    color: white !important;
    fill: white !important;
  }

  @media (min-width: 640px) {
    .whatsapp-main-icon {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
      min-height: 48px !important;
      max-width: 48px !important;
      max-height: 48px !important;
    }
  }

  /* Scroll to top arrow specific overrides */
  .scroll-arrow-icon {
    color: white !important;
    stroke: white !important;
    fill: none !important;
    stroke-width: 2.5 !important;
  }

  /* Ensure button contains the icons properly */
  button[aria-label*="WhatsApp"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  button[aria-label*="Back to top"],
  button[aria-label*="Volver al inicio"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 3D Flip Card Utilities */
  .perspective-1000 {
    perspective: 1000px;
  }

  .preserve-3d {
    transform-style: preserve-3d;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .rotate-y-180 {
    transform: rotateY(180deg);
  }

  /* Artist Card Flip Animation - Improved */
  .artist-card-flip {
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  .artist-card-flip:hover {
    transform: rotateY(180deg);
  }

  .artist-card-flip.flipped {
    transform: rotateY(180deg);
  }

  /* Line clamp utility for text truncation */
  .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;
  }

  /* Hide scrollbars for horizontal scrolling galleries */
  .hide-scrollbar {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  .hide-scrollbar::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }

  /* Essential decorative components only */
  .decorative-title-section {
    @apply text-center mb-8 md:mb-16;
  }

  .decorative-lines {
    @apply flex items-center justify-center mb-6;
  }

  .decorative-line {
    @apply w-12 h-px;
    background-color: var(--color-primary);
  }

  .decorative-diamond {
    @apply w-2 h-2 rotate-45 mx-4;
    background-color: var(--color-secondary);
  }

  .decorative-title {
    @apply text-3xl sm:text-4xl md:text-5xl font-inter font-light mb-3 uppercase tracking-wide;
    position: relative;
    padding-top: 2rem;
  }

  .decorative-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-primary) 20%, var(--color-primary) 80%, transparent);
  }

  .decorative-title::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-secondary);
  }

  .decorative-title-white {
    @apply text-3xl sm:text-4xl md:text-5xl font-inter font-light mb-3 uppercase tracking-wide text-white;
    position: relative;
    padding-top: 2rem;
  }

  .decorative-title-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, #fff 20%, #fff 80%, transparent);
  }

  .decorative-title-white::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #fff;
  }

  .decorative-subtitle {
    @apply text-lg sm:text-xl text-gray-600 font-light leading-relaxed mx-auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .decorative-subtitle-white {
    @apply text-base sm:text-lg md:text-xl text-gray-300 font-light leading-relaxed max-w-2xl sm:max-w-3xl md:max-w-4xl mx-auto px-4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Zoom-Safe Manifesto Section Typography */
  .manifesto-title {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 0.9 !important;
    letter-spacing: -0.02em;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    max-width: 100%;
    word-wrap: break-word;
    hyphens: none;
  }

  /* Override any Tailwind line-height classes */
  .manifesto-title.leading-tight,
  .manifesto-title.leading-normal,
  .manifesto-title.leading-relaxed {
    line-height: 0.9 !important;
  }

  .manifesto-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.4;
    letter-spacing: 0.025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .manifesto-description {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    max-width: 60ch;
  }

  .manifesto-button-text {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Additional zoom safety for manifesto section */
  @media (min-width: 1400px) {
    .manifesto-title {
      font-size: min(4rem, 8vw);
      line-height: 0.85 !important;
    }
    
    .manifesto-subtitle {
      font-size: min(1.5rem, 3vw);
    }
    
    .manifesto-description {
      font-size: min(1.125rem, 2.5vw);
    }
  }

  /* Prevent layout shifts during zoom */
  .manifesto-title,
  .manifesto-subtitle,
  .manifesto-description {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
  }

  /* Mobile-specific tight line height for manifesto title */
  @media (max-width: 768px) {
    .manifesto-title {
      line-height: 0.85 !important;
    }
  }

  @media (max-width: 480px) {
    .manifesto-title {
      line-height: 0.88 !important;
    }
  }

  /* Mobile-specific hover behavior */
  @media (max-width: 768px) {
    /* Disable hover effects on mobile */
    .hover-scale {
      @apply transform-none;
    }
    
    .parallax-disabled {
      transform: none !important;
    }
  }

  /* Elfsight Google Reviews Widget Styles */
  .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb iframe {
    width: 100% !important;
    height: auto !important;
  }

  @media (max-width: 768px) {
    .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb {
      padding: 0 16px !important;
    }
    
    .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb iframe {
      height: 400px !important;
    }
    
    .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb .eapps-google-reviews-review {
      font-size: 14px !important;
      line-height: 1.4 !important;
    }
  }

  @media (max-width: 480px) {
    .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb {
      padding: 0 12px !important;
    }
    
    .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb iframe {
      height: 350px !important;
    }
    
    .elfsight-app-dce00912-3469-43e5-a1b5-49ca2a4b38fb .eapps-google-reviews-review-text {
      font-size: 13px !important;
      line-height: 1.3 !important;
    }
  }

  /* Enhanced Mobile Hero Section Styles */
  .hero-section {
    @apply min-h-[100dvh] relative overflow-hidden;
    /* Improve text rendering on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Professional Hero Section - Enhanced */
  .hero-section-professional {
    @apply min-h-[100dvh] relative overflow-hidden;
    /* Professional visual enhancements */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Better mobile viewport handling */
    min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .hero-content {
    @apply relative z-10 text-center text-white max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }

  .hero-content-professional {
    @apply relative z-10 text-center text-white max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    /* Professional spacing */
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .hero-title-container {
    @apply mb-6 sm:mb-8 md:mb-10;
    /* Professional title spacing */
    margin-bottom: 2rem;
  }

  .hero-title-container-professional {
    @apply mb-2 sm:mb-3 md:mb-4;
  }

  .hero-subtitle-container {
    @apply mb-8 sm:mb-10 md:mb-12;
    margin-bottom: 2rem;
  }

  .hero-subtitle-container-professional {
    @apply mb-6 sm:mb-8 md:mb-10;
  }

  .hero-buttons-container {
    @apply flex flex-col sm:flex-row gap-4 sm:gap-6 items-center justify-center;
    margin-top: 1.5rem;
  }

  .hero-buttons-container-professional {
    @apply flex flex-col sm:flex-row gap-3 sm:gap-4 items-center justify-center;
    margin-top: 1.75rem;
  }

  .hero-button {
    @apply px-5 py-3 text-sm font-semibold rounded-md transition-all duration-200 shadow-lg;
    min-width: 160px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Professional button styling */
    border: 2px solid transparent;
  }

  .hero-button-wrapper {
    @apply flex flex-col sm:flex-row gap-4 sm:gap-6 items-center justify-center w-full;
    max-width: 600px;
    margin: 0 auto;
  }

  .hero-button-primary {
    @apply relative text-white border-2;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    @apply px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 md:py-3.5;
    @apply text-sm sm:text-base font-bold tracking-wide uppercase;
    @apply min-h-[44px] sm:min-h-[46px] md:min-h-[48px];
    min-width: 160px;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 128, 128, 0.3);
  }

  .hero-button-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.4);
  }

  .hero-button-secondary {
    @apply relative border-2 border-white bg-white/95;
    color: var(--color-primary);
    @apply px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 md:py-3.5;
    @apply text-sm sm:text-base font-bold tracking-wide uppercase;
    @apply min-h-[44px] sm:min-h-[46px] md:min-h-[48px];
    min-width: 160px;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .hero-button-secondary:hover {
    background-color: white;
    color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
  }

  .hero-button-content {
    @apply flex items-center justify-center gap-2;
    /* Professional button content */
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: center;
  }

  .hero-button-content-professional {
    @apply flex items-center justify-center gap-2;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: center;
    /* Professional typography */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-display: swap;
  }

  .hero-subtitle-professional {
    @apply text-xl sm:text-2xl md:text-xl lg:text-2xl font-light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    /* Professional subtitle styling */
    color: rgba(255,255,255,0.95);
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto;
  }

  .hero-title-large {
    @apply text-7xl sm:text-8xl md:text-9xl lg:text-9xl xl:text-9xl font-bold;
  }

  .hero-title-xl {
    @apply text-8xl sm:text-9xl md:text-9xl lg:text-9xl xl:text-9xl font-bold;
  }
  
  /* Tight spacing for hero titles */
  .hero-title-main br {
    display: block;
    content: "";
    margin: -0.5em 0;
  }
  
  .hero-title-xl br {
    display: block;
    content: "";
    margin: -0.8em 0;
  }

  .hero-title-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
  }

  .hero-title-accent {
    color: #9ca3af;
    font-weight: 700;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    opacity: 1;
    font-size: 1em;
    margin-top: -0.5rem;
    display: inline-block;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  /* Mobile-specific hero adjustments */
  @media (max-width: 768px) {
    .hero-title-main {
      @apply text-4xl sm:text-5xl;
      line-height: 1.1;
      letter-spacing: -0.01em;
    }

    .hero-title-accent {
      font-size: 1em;
      margin-top: -0.4rem;
    }

    .hero-subtitle {
      @apply text-lg sm:text-xl;
      line-height: 1.5;
    }

    .hero-subtitle-professional {
      @apply text-lg sm:text-xl;
      line-height: 1.5;
      font-weight: 300;
    }
  }

  @media (max-width: 480px) {
    .hero-title-main {
      @apply text-3xl sm:text-4xl;
      line-height: 1.1;
    }

    .hero-title-accent {
      font-size: 1em;
      margin-top: -0.3rem;
    }

    .hero-subtitle {
      @apply text-base sm:text-lg;
      line-height: 1.4;
    }

    .hero-subtitle-professional {
      @apply text-base sm:text-lg;
      line-height: 1.4;
    }
  }

  /* Mobile landscape mode optimizations */
  @media (max-width: 768px) and (orientation: landscape) {
    .hero-title-main {
      @apply text-3xl sm:text-4xl;
      line-height: 1.1;
      margin-bottom: 1rem;
    }

    .hero-subtitle {
      @apply text-base sm:text-lg;
      line-height: 1.4;
    }

    .hero-subtitle-professional {
      @apply text-base sm:text-lg;
      line-height: 1.4;
    }

    .hero-title-container {
      margin-bottom: 1rem;
    }

    .hero-title-container-professional {
      margin-bottom: 1.5rem;
    }

    .hero-subtitle-container {
      margin-bottom: 1.5rem;
    }

    .hero-subtitle-container-professional {
      margin-bottom: 1.5rem;
    }

    .hero-buttons-container {
      margin-top: 1.5rem;
      gap: 1rem;
    }

    .hero-buttons-container-professional {
      margin-top: 1.5rem;
      gap: 1rem;
    }

    .hero-button-primary,
    .hero-button-secondary {
      @apply px-4 py-2 text-sm;
      min-width: 150px;
    }
  }

  /* Tablet-specific optimizations */
  @media (min-width: 768px) and (max-width: 1023px) {
    .hero-title-main {
      @apply text-5xl sm:text-6xl;
      line-height: 1.15;
    }

    .hero-subtitle-professional {
      @apply text-xl sm:text-2xl;
      line-height: 1.5;
    }

    .hero-button-primary,
    .hero-button-secondary {
      @apply px-6 py-2.5 text-base;
      min-width: 170px;
    }
  }

  /* Large desktop optimizations */
  @media (min-width: 1440px) {
    .hero-content-professional {
      max-width: 1200px;
    }

    .hero-title-container-professional {
      margin-bottom: 3rem;
    }

    .hero-subtitle-container-professional {
      margin-bottom: 3rem;
    }

    .hero-buttons-container-professional {
      margin-top: 3rem;
      gap: 2rem;
    }

    .hero-button-primary,
    .hero-button-secondary {
      @apply px-7 py-3 text-lg;
      min-width: 180px;
    }
  }

  /* Hero title span styling for individual words */
  .hero-title-main span {
    display: inline-block;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
  }

  @media (min-width: 768px) {
    .hero-title-main span {
      animation: fadeInUp 0.8s ease-out forwards;
    }
  }

  @media (min-width: 1024px) {
    .hero-title-main span {
      animation: fadeInUp 1s ease-out forwards;
    }
  }
}

@layer utilities {
  /* Prevent overscroll blank spaces */
  .prevent-overscroll {
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
  }

  /* Text shadow utilities for better readability on images */
  .text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  }

  /* Essential mobile utilities only */
  .mobile-padding {
    @apply p-4 md:p-6;
  }

  /* Safe area utilities for mobile notches */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Legacy decorative elements - consolidated above */

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

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

.animate-slide-in {
  animation: slideIn 0.6s ease-out;
}

.animate-bounce-custom {
  animation: bounce 2s infinite;
}

/* Touch-friendly hover states */
@media (hover: none) and (pointer: coarse) {
  /* Override hover states for touch devices */
  .hover-override:hover {
    @apply transform-none;
  }
}

/* Fix image orientation issues - Respect EXIF data */
img {
  image-orientation: from-image;
}

/* Manual rotation utility classes for specific images if needed */
.rotate-fix-90 {
  transform: rotate(90deg);
}

.rotate-fix-180 {
  transform: rotate(180deg);
}

.rotate-fix-270 {
  transform: rotate(270deg);
}

.rotate-fix-neg-90 {
  transform: rotate(-90deg);
}

/* Performance: Hint browser to composite AOS animations */
[data-aos] {
  will-change: transform, opacity;
}