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

* {
  font-family: 'Inter', sans-serif;
}

/* Global mobile-safe layout fixes */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video {
  max-width: 100%;
  height: auto;
}
svg {
  max-width: 100%;
  height: auto;
}

.gradient-bg {
  /* Primary gradient: 270° #B03CD9 → #00B4E6 */
  background: linear-gradient(270deg, #B03CD9 0%, #00B4E6 100%);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pulse-animation {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

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

@keyframes floating {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.typing-animation {
  overflow: hidden;
  /* Accent cyan for caret */
  border-right: 2px solid #00E3FF;
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* On small screens, let long headings wrap and disable typing effect to prevent overflow */
@media (max-width: 640px) {
  .typing-animation {
    white-space: normal;
    border-right: 0;
    animation: none;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #00E3FF;
  }
}

/* Global text colors */
body {
  color: #555555; /* Body text */
}

h1, h2, h3, h4, h5, h6, .font-bold {
  color: #222222; /* Headers / bold text */
}

/* Footer theming */
footer {
  background-color: #111111 !important; /* Footer background */
  color: #CCCCCC !important;           /* Footer text */
}

footer a {
  color: #CCCCCC;
}

footer a:hover {
  color: #00B4E6; /* Footer hover */
}

/* Primary CTA button */
.btn-primary {
  background-color: #3AA0E4;
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: #2B8ED0;
}

/* Accent highlights (icons, stats) */
.accent {
  color: #00E3FF !important;
}

/* Mobile menu fixes */
#mobileMenuBtn {
  position: relative;
  z-index: 10002;
  pointer-events: auto;
  touch-action: manipulation;
}

#mobileMenu {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 10001;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Ensure mobile menu is always above other content */
@media (max-width: 767px) {
  #mobileMenu {
    position: fixed !important;
    top: 80px !important;
    z-index: 10001 !important;
  }
}