/* <!-- MODERN LANDING ENHANCEMENTS - Scoped to avoid conflicts --> */
/* ================================================================
   MODERN LANDING PAGE ENHANCEMENTS - CONFLICT-FREE
   Version: 2.0 - Scoped Implementation
   Description: Modern styles that work with existing CSS
   ================================================================ */

/* ===== SCOPED MODERN VARIABLES (No conflicts) ===== */
:root {
  /* Modern Landing Specific - Prefixed to avoid conflicts */
  --landing-gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --landing-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --landing-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --landing-gradient-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  
  /* Advanced shadows for modern elements */
  --landing-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
  --landing-shadow-modern: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --landing-shadow-large: 0 20px 50px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  --landing-shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);
  
  /* Modern backdrop blur */
  --landing-blur-sm: blur(8px);
  --landing-blur-md: blur(16px);
  --landing-blur-lg: blur(24px);
  
  /* Modern spacing for landing elements */
  --landing-space-xs: 0.125rem;
  --landing-space-sm: 0.375rem;
  --landing-space-md: 0.75rem;
  --landing-space-lg: 1.5rem;
  --landing-space-xl: 3rem;
  --landing-space-2xl: 6rem;
  
  /* Modern typography scale */
  --landing-text-xs: 0.625rem;
  --landing-text-sm: 0.875rem;
  --landing-text-base: 1rem;
  --landing-text-lg: 1.125rem;
  --landing-text-xl: 1.25rem;
  --landing-text-2xl: 1.5rem;
  --landing-text-3xl: 1.875rem;
  --landing-text-4xl: 2.25rem;
  --landing-text-5xl: 3rem;
  --landing-text-6xl: 3.75rem;
}

/* ===== MODERN HERO SECTIONS (Scoped) ===== */
.ultra-modern-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #f1f5f9 100%);
  padding: 120px 0 80px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.contact-hero-modern {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #f1f5f9 100%);
  padding: 120px 0 80px;
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ===== MODERN BADGES (Scoped) ===== */
.modern-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 50px;
  backdrop-filter: var(--landing-blur-md);
  -webkit-backdrop-filter: var(--landing-blur-md);
  box-shadow: var(--landing-shadow-modern);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--landing-shadow-large);
}

.badge-glow {
  position: absolute;
  inset: -1px;
  background: var(--landing-gradient-primary);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(8px);
  z-index: -1;
}

.modern-badge:hover .badge-glow {
  opacity: 0.3;
}

.badge-glow.success {
  background: var(--landing-gradient-success);
}

.badge-glow.warning {
  background: var(--landing-gradient-warning);
}

.badge-glow.primary {
  background: var(--landing-gradient-primary);
}

.badge-text {
  position: relative;
  z-index: 1;
  font-weight: 600;
  color: #4f46e5;
  font-size: 14px;
}

/* ===== MODERN BUTTONS (Scoped to avoid conflicts) ===== */
.btn-primary-modern {
  background: var(--landing-gradient-primary);
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-weight: 600;
  font-size: 16px;
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--landing-shadow-glow);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-primary-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-primary-modern:hover::before {
  opacity: 1;
}

.btn-primary-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
  color: white;
  text-decoration: none;
}

.btn-primary-modern span,
.btn-primary-modern i {
  position: relative;
  z-index: 1;
}

.btn-outline-modern {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(79, 70, 229, 0.2);
  border-radius: 12px;
  padding: 14px 30px;
  font-weight: 600;
  font-size: 16px;
  color: #4f46e5;
  backdrop-filter: var(--landing-blur-md);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-outline-modern:hover {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
  text-decoration: none;
}

/* ===== MODERN CARDS (Scoped) ===== */
.card-modern {
  background: var(--landing-gradient-soft);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  backdrop-filter: var(--landing-blur-lg);
  box-shadow: var(--landing-shadow-modern);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card-modern:hover {
  transform: translateY(-8px);
  box-shadow: var(--landing-shadow-large);
}

/* ===== MODERN FORMS (Scoped) ===== */
.contact-form-container {
  background: var(--landing-gradient-soft);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 48px;
  backdrop-filter: var(--landing-blur-lg);
  box-shadow: var(--landing-shadow-modern);
}

.form-control-modern {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  font-size: 16px;
  color: #111827;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.form-control-modern:focus {
  outline: none;
  border-color: #4f46e5;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.form-select-modern {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  font-size: 16px;
  color: #111827;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  cursor: pointer;
}

.form-select-modern:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

/* ===== GRADIENT TEXT (Scoped) ===== */
.gradient-text-primary {
  background: var(--landing-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-success {
  background: var(--landing-gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-warning {
  background: var(--landing-gradient-warning);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

@keyframes float-orb {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
  }
  33% { 
    transform: translateY(-30px) rotate(120deg); 
  }
  66% { 
    transform: translateY(15px) rotate(240deg); 
  }
}

@keyframes float-card-1 {
  0%, 100% { 
    transform: translateY(0px) rotate(-2deg); 
  }
  50% { 
    transform: translateY(-15px) rotate(2deg); 
  }
}

@keyframes float-card-2 {
  0%, 100% { 
    transform: translateY(0px) rotate(2deg); 
  }
  50% { 
    transform: translateY(-20px) rotate(-2deg); 
  }
}

@keyframes float-card-3 {
  0%, 100% { 
    transform: translateY(0px) rotate(-1deg); 
  }
  50% { 
    transform: translateY(-10px) rotate(1deg); 
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== UTILITY CLASSES (Landing specific to avoid conflicts) ===== */
.min-vh-75 {
  min-height: 75vh;
}

.min-vh-90 {
  min-height: 90vh;
}

.py-16 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-20 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

/* Background utilities for landing pages */
.bg-gradient-subtle {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}
.flash-messages-container {
        position: fixed; /* Position relative to the viewport */
        top: 80px;       /* Place it just below a standard navbar height */
        left: 50%;
        transform: translateX(-50%);
        z-index: 1050;   /* High z-index to appear on top of most content */
        width: 100%;
        max-width: 600px;
        padding: 0 1rem;
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .ultra-modern-hero,
  .contact-hero-modern {
    padding: 100px 0 60px;
    min-height: auto;
  }
  
  .contact-form-container {
    padding: 32px 24px;
  }
  
  .btn-primary-modern,
  .btn-outline-modern {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .contact-form-container {
    padding: 24px 20px;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .modern-badge,
  .btn-primary-modern,
  .btn-outline-modern,
  .card-modern {
    transition: none;
  }
  
  .floating-orbs *,
  .floating-cards-stack * {
    animation: none;
  }
}

/* Focus indicators for modern elements */
.btn-primary-modern:focus-visible,
.btn-outline-modern:focus-visible,
.form-control-modern:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}