body {
      font-family: "Raleway", sans-serif;
    }

    /* Custom Tailwind Config */
    :root {
      --primary-500: #A855F7;
      --primary-600: #9333EA;
      --secondary-500: #06B6D4;
      --background-primary: #1F2937;
      --background-secondary: #111827;
    }

    /* Custom backdrop blur for better browser support */
    .backdrop-blur-custom {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    /* Smooth transitions */
    .transition-all-smooth {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Dropdown animation */
    .dropdown-enter {
      opacity: 0;
      transform: translateY(-10px);
    }

    .dropdown-enter-active {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.2s ease-out;
    }
    /* Mobile menu animation - FIXED */
    .mobile-menu-hidden {
      transform: translateX(-100%);
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-menu-visible {
      transform: translateX(0);
      visibility: visible;
      opacity: 1;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Asegurar que el menú móvil tenga el z-index correcto */
    #mobile-menu {
      position: fixed;
      top: 80px; /* Empezar debajo del header (h-20 = 80px) */
      left: 0;
      width: 280px; /* Aumentado de w-64 (256px) a 280px */
      height: calc(100vh - 80px); /* Altura total menos el header */
      background: rgba(17, 24, 39, 0.98); /* bg-gray-900 con opacidad */
      backdrop-filter: blur(8px);
      border-right: 1px solid rgba(75, 85, 99, 0.5);
      box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3);
      z-index: 60; /* Debajo del header pero encima del contenido */
      overflow-y: auto; /* Permitir scroll si el contenido es muy largo */
    }

    /* Overlay del menú móvil */
    #mobile-menu-overlay {
      position: fixed;
      inset: 0;
      /* background: rgba(28, 36, 50, 0.3); */
      z-index: 9998; /* Justo debajo del menú */
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Header con z-index ajustado */
    header {
      z-index: 9997; /* Asegurar que esté debajo del menú móvil */
    }

    /* Asegurar que los links del menú móvil sean clickeables */
    #mobile-menu a, #mobile-menu button {
      position: relative;
      z-index: 1;
      width: 100%;
      text-align: left;
    }

    /* Mejorar el dropdown móvil */
    #mobile-dropdown-content {
      padding-left: 16px;
      padding-bottom: 8px;
      margin-top: 8px;
    }

    #mobile-dropdown-content a {
      padding: 8px 0;
      border-bottom: none;
    }


    /* Orion Logo SVG Styles */
    .orion-logo {
      width: 120px;
      height: auto;
    }

    /* Constellation icon styles for fallback */
    .constellation-icon {
      position: relative;
      width: 32px;
      height: 32px;
    }

    .star {
      position: absolute;
      width: 3px;
      height: 3px;
      background: #A855F7;
      border-radius: 50%;
      box-shadow: 0 0 6px #A855F7;
    }

    .star-1 {
      top: 2px;
      left: 8px;
    }

    .star-2 {
      top: 12px;
      left: 2px;
    }

    .star-3 {
      top: 20px;
      left: 14px;
    }

    .star-4 {
      top: 8px;
      left: 24px;
    }

    .star-5 {
      top: 24px;
      left: 28px;
    }

    .constellation-line {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, transparent, #A855F7, transparent);
    }

    .line-1 {
      top: 8px;
      left: 8px;
      width: 18px;
      transform: rotate(25deg);
    }

    .line-2 {
      top: 16px;
      left: 8px;
      width: 12px;
      transform: rotate(-45deg);
    }

    /* Starfield Animation */
    .starfield {
      position: absolute;
      width: 100%;
      height: 100%;
      background: transparent;
      overflow: hidden;
    }

    .star {
      position: absolute;
      background: white;
      border-radius: 50%;
      animation: twinkle 3s ease-in-out infinite alternate;
    }

    .star-1 {
      width: 1px;
      height: 1px;
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .star-2 {
      width: 2px;
      height: 2px;
      top: 80%;
      left: 20%;
      animation-delay: 1s;
    }

    .star-3 {
      width: 1px;
      height: 1px;
      top: 40%;
      left: 70%;
      animation-delay: 2s;
    }

    .star-4 {
      width: 2px;
      height: 2px;
      top: 60%;
      left: 80%;
      animation-delay: 0.5s;
    }

    .star-5 {
      width: 1px;
      height: 1px;
      top: 10%;
      left: 90%;
      animation-delay: 1.5s;
    }

    .star-6 {
      width: 2px;
      height: 2px;
      top: 70%;
      left: 5%;
      animation-delay: 2.5s;
    }

    .star-7 {
      width: 1px;
      height: 1px;
      top: 30%;
      left: 40%;
      animation-delay: 0.7s;
    }

    .star-8 {
      width: 1px;
      height: 1px;
      top: 85%;
      left: 60%;
      animation-delay: 1.8s;
    }

    .star-9 {
      width: 2px;
      height: 2px;
      top: 15%;
      left: 50%;
      animation-delay: 1.2s;
    }

    .star-10 {
      width: 1px;
      height: 1px;
      top: 50%;
      left: 15%;
      animation-delay: 2.2s;
    }

    @keyframes twinkle {
      0% {
        opacity: 0.3;
        transform: scale(1);
      }

      100% {
        opacity: 1;
        transform: scale(1.2);
      }
    }

    /* Purple stars with glow */
    .purple-star {
      background: #A855F7;
      box-shadow: 0 0 6px #A855F7, 0 0 12px #A855F7;
    }

    .purple-star-1 {
      width: 3px;
      height: 3px;
      top: 25%;
      left: 85%;
      animation-delay: 0.3s;
    }

    .purple-star-2 {
      width: 2px;
      height: 2px;
      top: 75%;
      left: 25%;
      animation-delay: 1.7s;
    }

    .purple-star-3 {
      width: 4px;
      height: 4px;
      top: 35%;
      left: 75%;
      animation-delay: 2.3s;
    }

    /* Digital Cloud Illustration */
    .digital-cloud {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 300px;
      margin: 0 auto;
    }

    .cloud-shape {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 180px;
      background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #06B6D4 100%);
      border-radius: 100px;
      opacity: 0.8;
      filter: blur(1px);
    }

    .cloud-shape::before {
      content: '';
      position: absolute;
      top: -40px;
      left: 50px;
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
      border-radius: 50%;
      opacity: 0.9;
    }

    .cloud-shape::after {
      content: '';
      position: absolute;
      top: -20px;
      right: 40px;
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
      border-radius: 50%;
      opacity: 0.8;
    }

    /* Circuit patterns in cloud */
    .circuit-line {
      position: absolute;
      background: linear-gradient(90deg, transparent, #06B6D4, transparent);
      height: 1px;
      opacity: 0.6;
      animation: circuit-pulse 2s ease-in-out infinite;
    }

    .circuit-1 {
      top: 60%;
      left: 20%;
      width: 60px;
      transform: rotate(15deg);
      animation-delay: 0s;
    }

    .circuit-2 {
      top: 40%;
      right: 25%;
      width: 80px;
      transform: rotate(-25deg);
      animation-delay: 0.7s;
    }

    .circuit-3 {
      bottom: 30%;
      left: 30%;
      width: 50px;
      transform: rotate(45deg);
      animation-delay: 1.4s;
    }

    @keyframes circuit-pulse {

      0%,
      100% {
        opacity: 0.3;
      }

      50% {
        opacity: 0.8;
      }
    }

    /* Connection nodes */
    .circuit-node {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #06B6D4;
      border-radius: 50%;
      box-shadow: 0 0 8px #06B6D4;
      animation: node-pulse 1.5s ease-in-out infinite;
    }

    .node-1 {
      top: 45%;
      left: 35%;
      animation-delay: 0.2s;
    }

    .node-2 {
      top: 55%;
      right: 30%;
      animation-delay: 0.9s;
    }

    .node-3 {
      bottom: 35%;
      left: 45%;
      animation-delay: 1.6s;
    }

    @keyframes node-pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.7;
      }

      50% {
        transform: scale(1.5);
        opacity: 1;
      }
    }

    /* Floating particles */
    .particle {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #A855F7;
      border-radius: 50%;
      opacity: 0.5;
      animation: float 4s ease-in-out infinite;
    }

    .particle-1 {
      top: 20%;
      left: 60%;
      animation-delay: 0s;
    }

    .particle-2 {
      top: 70%;
      left: 80%;
      animation-delay: 1s;
    }

    .particle-3 {
      top: 40%;
      left: 70%;
      animation-delay: 2s;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    /* Carousel functionality */
    .carousel-container {
      position: relative;
    }

    .carousel-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      min-height: 690px;
    }

    .carousel-slide.active {
      position: relative;
      opacity: 1;
      transform: translateX(0);
    }

    .carousel-slide.prev {
      transform: translateX(-100%);
    }

    .carousel-slide.next {
      transform: translateX(100%);
    }

    .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .carousel-dot.active {
      width: 24px;
      border-radius: 4px;
      background: #A855F7;
    }

    .carousel-dot:not(.active) {
      background: rgba(255, 255, 255, 0.3);
    }

    .carousel-dot:not(.active):hover {
      background: rgba(255, 255, 255, 0.5);
    }

    /* Fade-in animation for content */
    .fade-in-up {
      animation: fadeInUp 0.8s ease-out;
    }

    .fade-in-up-delay {
      animation: fadeInUp 0.8s ease-out 0.3s both;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Hero gradient with neon separator */
    .hero-gradient {
      background: linear-gradient(135deg, #111827 0%, #1F2937 50%, #581C87 100%);
      position: relative;
    }

    .hero-gradient::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        #8b5cf6 20%, 
        #a855f7 40%, 
        #c084fc 50%, 
        #a855f7 60%, 
        #8b5cf6 80%, 
        transparent 100%
      );
      box-shadow: 
        0 0 10px #8b5cf6,
        0 0 20px #8b5cf6,
        0 0 40px #8b5cf6;
      animation: neonPulse 2s ease-in-out infinite alternate;
    }

    @keyframes neonPulse {
      from {
        opacity: 0.8;
        box-shadow: 
          0 0 10px #8b5cf6,
          0 0 20px #8b5cf6,
          0 0 40px #8b5cf6;
      }
      to {
        opacity: 1;
        box-shadow: 
          0 0 15px #8b5cf6,
          0 0 30px #8b5cf6,
          0 0 60px #8b5cf6;
      }
    }

    /* AWS Logo and Partner Section Styles */
    .aws-glow {
      filter: drop-shadow(0 0 8px rgba(255, 153, 0, 0.3));
      transition: all 0.3s ease;
    }

    .aws-glow:hover {
      filter: drop-shadow(0 0 16px rgba(255, 153, 0, 0.5));
      transform: scale(1.02);
    }

    .aws-partner-badge {
      background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Intersection Observer animation */
    .fade-in-scroll {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease-out;
    }

    .fade-in-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Feature cards hover effects */
    .feature-card:hover {
      transform: translateY(-5px);
    }

    /* Gradient text utility */
    .gradient-text {
      background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }