/* Modern Design System - State of the Art UI */

/* CSS Variables for Modern Theme */
:root {
  /* Modern Color Palette */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-dark: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
                   radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
                   radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
                   radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
                   radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
                   radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
                   radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --glass-blur: blur(12px);
  
  /* Neumorphism */
  --neu-bg: #e0e5ec;
  --neu-shadow-light: rgba(255, 255, 255, 0.7);
  --neu-shadow-dark: rgba(165, 165, 165, 0.25);
  
  /* Dark Mode Colors */
  --dark-bg: #0a0a0a;
  --dark-surface: #1a1a1a;
  --dark-text: #e5e5e7;
  --dark-text-secondary: #a1a1a6;
  
  /* Animation Timing */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Dark Mode Updates */
[data-theme="dark"] {
  --glass-bg: rgba(30, 30, 30, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --neu-bg: #2a2a2a;
  --neu-shadow-light: rgba(255, 255, 255, 0.05);
  --neu-shadow-dark: rgba(0, 0, 0, 0.3);
}



/* Hero Badge Styling */
.hero-badge {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.4);
}

.hero-badge span {
  color: #4a5bb8;
  font-weight: 600;
}

[data-theme="dark"] .hero-badge {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.4);
}

[data-theme="dark"] .hero-badge span {
  color: #8bb5ff;
}



/* Quick Action Buttons */
.quick-action-primary {
  border: 1px solid rgba(102, 126, 234, 0.5);
  background: rgba(102, 126, 234, 0.12);
  color: #4a5bb8;
  font-weight: 600;
}

.quick-action-secondary {
  border: 1px solid rgba(118, 75, 162, 0.5);
  background: rgba(118, 75, 162, 0.12);
  color: #6b4a8a;
  font-weight: 600;
}

.quick-action-tertiary {
  border: 1px solid rgba(240, 147, 251, 0.5);
  background: rgba(240, 147, 251, 0.12);
  color: #c4479b;
  font-weight: 600;
}

[data-theme="dark"] .quick-action-primary {
  border: 1px solid rgba(102, 126, 234, 0.4);
  background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .quick-action-secondary {
  border: 1px solid rgba(118, 75, 162, 0.4);
  background: rgba(118, 75, 162, 0.1);
}

[data-theme="dark"] .quick-action-tertiary {
  border: 1px solid rgba(240, 147, 251, 0.4);
  background: rgba(240, 147, 251, 0.1);
}

/* Feature Badge Styling for Better Contrast */
.feature-badge {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Service-specific feature badge colors for light mode */
.service-card[data-service="openai"] .feature-badge {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(102, 126, 234, 0.25)) !important;
  color: #4a5bb8 !important;
  border: 1px solid rgba(102, 126, 234, 0.4);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.service-card[data-service="vision"] .feature-badge {
  background: linear-gradient(135deg, rgba(240, 147, 251, 0.15), rgba(240, 147, 251, 0.25)) !important;
  color: #c4479b !important;
  border: 1px solid rgba(240, 147, 251, 0.4);
  box-shadow: 0 2px 4px rgba(240, 147, 251, 0.2);
}

.service-card[data-service="speech"] .feature-badge {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.15), rgba(79, 172, 254, 0.25)) !important;
  color: #2d7bc7 !important;
  border: 1px solid rgba(79, 172, 254, 0.4);
  box-shadow: 0 2px 4px rgba(79, 172, 254, 0.2);
}

.service-card[data-service="language"] .feature-badge {
  background: linear-gradient(135deg, rgba(250, 112, 154, 0.15), rgba(250, 112, 154, 0.25)) !important;
  color: #d63384 !important;
  border: 1px solid rgba(250, 112, 154, 0.4);
  box-shadow: 0 2px 4px rgba(250, 112, 154, 0.2);
}

.service-card[data-service="translator"] .feature-badge {
  background: linear-gradient(135deg, rgba(168, 237, 234, 0.15), rgba(168, 237, 234, 0.25)) !important;
  color: #0d7377 !important;
  border: 1px solid rgba(168, 237, 234, 0.4);
  box-shadow: 0 2px 4px rgba(168, 237, 234, 0.2);
}

.service-card[data-service="content-safety"] .feature-badge {
  background: linear-gradient(135deg, rgba(252, 182, 159, 0.15), rgba(252, 182, 159, 0.25)) !important;
  color: #d2691e !important;
  border: 1px solid rgba(252, 182, 159, 0.4);
  box-shadow: 0 2px 4px rgba(252, 182, 159, 0.2);
}

/* Explore Button Colors for Better Contrast */
.service-card[data-service="openai"] .explore-btn {
  color: #4a5bb8 !important;
}

.service-card[data-service="vision"] .explore-btn {
  color: #c4479b !important;
}

.service-card[data-service="speech"] .explore-btn {
  color: #2d7bc7 !important;
}

.service-card[data-service="language"] .explore-btn {
  color: #d63384 !important;
}

.service-card[data-service="translator"] .explore-btn {
  color: #0d7377 !important;
}

.service-card[data-service="content-safety"] .explore-btn {
  color: #d2691e !important;
}

/* Enhanced Service Card Icons with Unique Gradients */
.service-card[data-service="openai"] .service-card__icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.service-card[data-service="vision"] .service-card__icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
  box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4);
}

.service-card[data-service="speech"] .service-card__icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}

.service-card[data-service="language"] .service-card__icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
  box-shadow: 0 4px 12px rgba(250, 112, 154, 0.4);
}

.service-card[data-service="translator"] .service-card__icon {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  box-shadow: 0 4px 12px rgba(168, 237, 234, 0.4);
}

.service-card[data-service="content-safety"] .service-card__icon {
  background: linear-gradient(135deg, #fcb69f 0%, #ffecd2 100%) !important;
  box-shadow: 0 4px 12px rgba(252, 182, 159, 0.4);
}

/* Enhanced Service Card Hover Effects */
.service-card:hover .service-card__icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

/* Dark mode feature badge styles */
[data-theme="dark"] .service-card[data-service="openai"] .feature-badge {
  background: rgba(102, 126, 234, 0.2) !important;
  color: #8bb5ff !important;
  border: 1px solid rgba(102, 126, 234, 0.4);
}

[data-theme="dark"] .service-card[data-service="vision"] .feature-badge {
  background: rgba(240, 147, 251, 0.2) !important;
  color: #f093fb !important;
  border: 1px solid rgba(240, 147, 251, 0.4);
}

[data-theme="dark"] .service-card[data-service="speech"] .feature-badge {
  background: rgba(79, 172, 254, 0.2) !important;
  color: #4facfe !important;
  border: 1px solid rgba(79, 172, 254, 0.4);
}

[data-theme="dark"] .service-card[data-service="language"] .feature-badge {
  background: rgba(250, 112, 154, 0.2) !important;
  color: #fa709a !important;
  border: 1px solid rgba(250, 112, 154, 0.4);
}

[data-theme="dark"] .service-card[data-service="translator"] .feature-badge {
  background: rgba(168, 237, 234, 0.2) !important;
  color: #a8edea !important;
  border: 1px solid rgba(168, 237, 234, 0.4);
}

[data-theme="dark"] .service-card[data-service="content-safety"] .feature-badge {
  background: rgba(252, 182, 159, 0.2) !important;
  color: #fcb69f !important;
  border: 1px solid rgba(252, 182, 159, 0.4);
}

/* Animated Gradient Background */
.gradient-bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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



/* Glassmorphism Card */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s var(--transition-smooth);
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
}

/* Neumorphism Button */
.neu-button {
  background: var(--neu-bg);
  border-radius: 50px;
  padding: 15px 40px;
  border: none;
  box-shadow: 
    9px 9px 16px var(--neu-shadow-dark),
    -9px -9px 16px var(--neu-shadow-light);
  transition: all 0.3s var(--transition-smooth);
  cursor: pointer;
}

.neu-button:hover {
  box-shadow: 
    13px 13px 20px var(--neu-shadow-dark),
    -13px -13px 20px var(--neu-shadow-light);
}

.neu-button:active {
  box-shadow: 
    inset 5px 5px 10px var(--neu-shadow-dark),
    inset -5px -5px 10px var(--neu-shadow-light);
}

/* 3D Card Hover Effect */
.card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--transition-smooth);
  transform-origin: center;
}

.card-3d:hover {
  transform: rotateY(10deg) rotateX(-10deg) translateZ(50px);
}

.card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.1));
  border-radius: inherit;
  pointer-events: none;
}

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

.floating {
  animation: float 6s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Glow Effect */
.glow {
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.6),
              0 0 40px rgba(102, 126, 234, 0.4),
              0 0 60px rgba(102, 126, 234, 0.2);
  transition: box-shadow 0.3s ease;
}

.glow:hover {
  box-shadow: 0 0 30px rgba(102, 126, 234, 0.8),
              0 0 60px rgba(102, 126, 234, 0.6),
              0 0 90px rgba(102, 126, 234, 0.4);
}

/* Parallax Scroll Effect */
.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-element {
  will-change: transform;
  transition: transform 0.5s var(--transition-smooth);
}

/* Micro-interactions */
.micro-interaction {
  position: relative;
  overflow: hidden;
}

.micro-interaction::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.micro-interaction:active::after {
  width: 300px;
  height: 300px;
}

/* Skeleton Loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Modern Typography */
.heading-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Scroll Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s var(--transition-smooth);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}



/* Liquid Button */
.liquid-button {
  position: relative;
  padding: 20px 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  color: white;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

.liquid-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.liquid-button:hover::before {
  left: 100%;
}

/* Noise Texture Overlay */
.noise-overlay {
  position: relative;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);
  pointer-events: none;
  opacity: 0.5;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gradient-secondary);
}

/* Performance Optimizations */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Responsive Utilities */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}