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

:root {
  --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: 188 100% 50%;
  --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: 188 100% 50%;
  --accent-foreground: 222.2 47.4% 11.2%;

  --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: 188 100% 50%;

  --radius: 0.75rem;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", "Poppins", sans-serif;
  min-height: 100vh;
  position: relative;
  /* Complex gradient background */
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1a1a2e 25%,
    #16213e 50%,
    #0f172a 75%,
    #1a1a2e 100%
  );
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(0, 184, 212, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(25, 118, 210, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: -1;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

/* Custom Component Classes (converted from Tailwind @apply) */
.glass-effect {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glow-effect {
  box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.2);
  transition: box-shadow 0.3s ease;
}

.glow-effect:hover {
  box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.4);
}

.button-glow {
  position: relative;
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.button-glow:hover {
  box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.5);
}

.button-glow:active {
  transform: scale(0.95);
}

.card-glass {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .card-glass {
    padding: 2rem;
  }
}

.card-glass:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(6, 182, 212, 0.3);
}

.gradient-text {
  background: linear-gradient(to right, #22d3ee, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-container {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, 0.5), transparent);
}

@media (min-width: 768px) {
  .section-container {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

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

@keyframes glow {
  0% { opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { opacity: 0.5; }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0; /* Start hidden */
}

/* Utilities not in Tailwind default or custom */
.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.bg-background {
  background-color: hsl(var(--background));
}

/* Mobile Menu hidden state */
#mobile-menu {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu.open {
  max-height: 300px;
  opacity: 1;
}