@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  font-family: 'Poppins', sans-serif;
  color-scheme: light;

  /* Official Brand Colors extracted strictly from Logo */
  --color-brand-blue: #0066FF;
  --color-brand-blue-hover: #0052CC;
  --color-brand-navy: #0A192F;
  --color-accent-green: #10B981;
  --color-accent-green-hover: #059669;
}

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

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #0066FF;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #10B981;
}

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

/* Floating Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

/* Sound Wave Equalizer Keyframes */
@keyframes soundWave {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

.wave-bar-1 { animation: soundWave 0.8s infinite ease-in-out 0s; }
.wave-bar-2 { animation: soundWave 0.8s infinite ease-in-out 0.2s; }
.wave-bar-3 { animation: soundWave 0.8s infinite ease-in-out 0.4s; }
.wave-bar-4 { animation: soundWave 0.8s infinite ease-in-out 0.6s; }

/* Typing Dot Animation */
@keyframes typingDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.typing-dot-1 { animation: typingDot 1.2s infinite ease-in-out 0s; }
.typing-dot-2 { animation: typingDot 1.2s infinite ease-in-out 0.2s; }
.typing-dot-3 { animation: typingDot 1.2s infinite ease-in-out 0.4s; }

/* Light Theme Card & Shadow Classes - Tuned to Logo Palette */
.light-glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -5px rgba(0, 102, 255, 0.08);
}

.light-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-card-hover:hover {
  background: #ffffff;
  border-color: rgba(0, 102, 255, 0.4);
  box-shadow: 0 20px 40px -10px rgba(0, 102, 255, 0.15);
  transform: translateY(-4px);
}

.shadow-royal {
  box-shadow: 0 20px 50px -10px rgba(0, 102, 255, 0.22);
}

.shadow-emerald {
  box-shadow: 0 15px 35px -5px rgba(16, 185, 129, 0.22);
}