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

    html {
      scroll-behavior: smooth;
    }
    
    * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                min-height: 100vh;
                overflow-x: hidden;
                color: #e5e7eb;
                position: relative;
                font-weight: 900;
                font-family: Inter ,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            /* Fondo base con gradiente */
            .bg-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -3;
                background: linear-gradient(135deg, #0a0a0a 0%, #0c0c1b 25%, #0a0f1d 40%, #0b0b16 70%, #000000 100%);
            }

            /* Efectos de puntos brillantes */
            .bg-dots {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -2;
                opacity: 0.3;
                background-image:
                    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
                    radial-gradient(circle at 40% 70%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
                    radial-gradient(circle at 70% 30%, rgba(147, 51, 234, 0.3) 0%, transparent 50%);
            }

            /* Efecto de cuadrícula sutil */
            .grid-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                opacity: 0.03;
                background-image:
                    linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);
                background-size: 50px 50px;
            }

            /* Efecto de partículas flotantes - MUCHAS MÁS ESTRELLAS */
            .floating-particles {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                pointer-events: none;
            }

            .particle {
                position: absolute;
                border-radius: 50%;
                animation: float 8s infinite linear;
                box-shadow: 0 0 6px currentColor;
            }

            /* Diferentes tipos de estrellas */
            .particle.star-1 {
                width: 1px;
                height: 1px;
                background: rgba(139, 92, 246, 0.8);
                animation-duration: 6s;
            }

            .particle.star-2 {
                width: 2px;
                height: 2px;
                background: rgba(168, 85, 247, 0.7);
                animation-duration: 8s;
            }

            .particle.star-3 {
                width: 1.5px;
                height: 1.5px;
                background: rgba(99, 102, 241, 0.9);
                animation-duration: 5s;
            }

            .particle.star-4 {
                width: 3px;
                height: 3px;
                background: rgba(147, 51, 234, 0.6);
                animation-duration: 10s;
            }

            .particle.star-5 {
                width: 1px;
                height: 1px;
                background: rgba(236, 72, 153, 0.8);
                animation-duration: 7s;
            }

            .particle.star-6 {
                width: 2.5px;
                height: 2.5px;
                background: rgba(59, 130, 246, 0.7);
                animation-duration: 9s;
            }

            /* Estrellas más brillantes y grandes */
            .particle.star-bright {
                width: 4px;
                height: 4px;
                background: rgba(255, 255, 255, 0.9);
                animation-duration: 12s;
                box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
            }

            /* Animaciones más rápidas */
            @keyframes float {
                0% {
                    transform: translateY(100vh) translateX(0px) rotate(0deg);
                    opacity: 0;
                }
                5% {
                    opacity: 1;
                }
                95% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(-100px) translateX(50px) rotate(360deg);
                    opacity: 0;
                }
            }

            /* Animación de parpadeo para algunas estrellas */
            .particle.twinkle {
                animation: float 8s infinite linear, twinkle 2s infinite ease-in-out;
            }

            @keyframes twinkle {
                0%, 100% { opacity: 0.3; }
                50% { opacity: 1; }
            }

            /* Estrellas fugaces ocasionales */
            .shooting-star {
                position: absolute;
                width: 2px;
                height: 2px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 50%;
                animation: shoot 3s infinite linear;
                opacity: 0;
            }

            @keyframes shoot {
                0% {
                    transform: translateX(-100px) translateY(-100px);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), -20px -20px 10px rgba(255, 255, 255, 0.3);
                }
                90% {
                    opacity: 1;
                    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), -20px -20px 10px rgba(255, 255, 255, 0.3);
                }
                100% {
                    transform: translateX(100vw) translateY(100vh);
                    opacity: 0;
                }
            }

            /* Contenido de ejemplo */
            .content {
                position: relative;
                z-index: 1;
                padding: 4rem 4rem;
                text-align: center;
                max-width: 1200px;
                margin: 4rem auto;
            }

            .title {
                font-size: 3.5rem;
                font-weight: 900;
                margin-bottom: 0rem;
                font-family: Inter ,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background: linear-gradient(to right bottom, rgb(87, 78, 117), rgb(193, 131, 255), rgb(64, 2, 187));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                letter-spacing: -3px;
            }

            .subtitle {
                font-size: 2.5rem;
                font-weight: 900;
                font-family: Inter ,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background: linear-gradient(to right bottom, rgb(214, 214, 214), rgb(255, 255, 255), rgb(179, 179, 179));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
                text-shadow: 0 0 12px rgba(202, 179, 255, 0.6);
            }

            /* --- Download Card (AI-inspired) --- */
            :root{
              --dl-text-1:#E5E7EB;
              --dl-text-2:#9CA3AF;
              --dl-radius:18px;
              --dl-accent-1:#8B5CF6;
              --dl-accent-2:#06B6D4;
            }

            .dl-card{
              position:relative; display:grid; gap:.9rem; padding:1.25rem; border-radius:2.3rem;
              color:var(--dl-text-1);
              background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
              backdrop-filter: blur(5px) saturate(120%);
              box-shadow: 0 8px 30px rgba(2,8,23,.55);
              isolation:isolate; overflow:hidden;
              margin:2rem auto; max-width:560px;
              padding: 1.3rem 5rem;
              transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
              letter-spacing: -0.5px;
              font-size: 2rem;
              font-family: Inter ,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              font-weight: 900;
              text-shadow: 0 0 12px rgba(202, 179, 255, 0.4);
            }
            .dl-card::before{
              content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
              background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(6,182,212,.55));
              -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
            }
            .dl-card::after{
              content:""; position:absolute; inset:-40%;
              background: radial-gradient(60% 60% at 20% 10%, rgba(139,92,246,.18), transparent 60%),
                          radial-gradient(50% 50% at 90% 30%, rgba(6,182,212,.17), transparent 65%);
              filter: blur(20px); z-index:-1; pointer-events:none;
            }
            .dl-card:hover{ transform: scale(1.05); }

            .dl-card__meta{ display:flex; gap:.5rem; align-items:center; }

            @media (prefers-reduced-motion: reduce){
              .dl-card { transition: none !important; }
            }

            /* Responsive */
            @media (max-width: 768px) {
                .title {
                    font-size: 2rem;
                }
                .content {
                    padding: 2rem 1rem;
                }
            }

            #bee.wing-flap {
                animation: wing-flap 3.0s infinite ease-in-out;
            }

@keyframes wing-flap {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}