 /*
         * Global Styles and Variables
         */
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

        :root {
            --color-primary: #00e0ff; /* Cyan/Light Blue */
            --color-secondary: #2563eb; /* Dark Blue */
            --color-accent: #fbbf24; /* Yellow/Gold */
            --color-text-light: #e5e7eb; /* Gray 200 */
            --color-dark-surface: rgba(0, 0, 0, 0.7);
            --star-size: 1px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000000;
            overflow: hidden;
            font-family: 'Orbitron', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    

        /* --- Main Content Layout --- */
        .content-container {
            position: relative;
            z-index: 10;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 1000px;
            transition: transform 0.1s ease-out;
            padding: 1rem; /* Base padding for small screens */
        }

        /* --- Main Information Card (.main-card replaces Tailwind utility classes) --- */
        .main-card {
            max-width: 800px;
            width: 100%;
            padding: 2rem; /* p-8 */
            text-align: center;
            background-color: var(--color-dark-surface);
            backdrop-filter: blur(5px);
            border-radius: 1.5rem; /* rounded-3xl */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); /* shadow-2xl */
            border: 1px solid rgba(75, 145, 255, 0.3); /* border border-blue-500/30 */
        }

        /* Responsive padding for larger screens */
        @media (min-width: 768px) {
            .main-card {
                padding: 3rem; /* md:p-12 */
            }
        }

        /* --- Logo and Title Styles --- */
        .bull-icon {
            display: inline-block;
            font-size: 4.375rem; /* text-7xl */
            margin-bottom: 1.5rem; /* mb-6 */
            animation: pulse-glow 2s infinite alternate, rotate-3d 8s linear infinite;
        }
        
        .title-h1 {
            font-size: 3.75rem; /* text-6xl */
            font-weight: 800; /* font-extrabold */
            margin-bottom: 1rem; /* mb-4 */
            letter-spacing: -0.05em; /* tracking-tighter */
            
            /* Gradient Text Effect */
            background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary));
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
        }
        
        .tagline-h2 {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 300; /* font-light */
            color: white;
            margin-bottom: 2rem; /* mb-8 */
            letter-spacing: 0.1em; /* tracking-wider */
            text-transform: uppercase;
        }

        /* Responsive Title/Icon size */
        @media (min-width: 768px) {
            .bull-icon {
                font-size: 5rem; /* md:text-8xl */
            }
            .title-h1 {
                font-size: 5rem; /* md:text-8xl */
            }
            .tagline-h2 {
                font-size: 2rem; /* md:text-5xl */
            }
        }

        /* --- Typing Cursor Animation --- */
        #typingEffect {
            display: inline-block;
            height: 2.5rem; /* h-10 */
            border-right: 4px solid white;
            vertical-align: middle;
        }
        @media (min-width: 768px) {
            #typingEffect {
                height: 3rem; /* md:h-12 */
            }
        }

        /* --- Countdown Styles --- */
        .countdown-container {
            display: flex;
            justify-content: center;
            gap: 1rem; /* space-x-4 */
            color: white;
            margin-bottom: 2.5rem; /* mb-10 */
            margin-top: 8rem;
        }
        @media (min-width: 768px) {
            .countdown-container {
                gap: 2rem; /* md:space-x-8 */
            }
        }

        .time-block {
            background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800/50 */
            padding: 1rem; /* p-4 */
            border-radius: 0.75rem; /* rounded-xl */
            backdrop-filter: blur(4px);
        }

        .time-value {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 700; /* font-bold */
            color: var(--color-accent); /* text-yellow-400 */
        }

        .time-label {
            font-size: 0.75rem; /* text-xs */
            text-transform: uppercase;
            letter-spacing: 0.1em; /* tracking-widest */
            margin-top: 0.25rem; /* mt-1 */
            color: #9ca3af; /* text-gray-400 */
        }
        @media (min-width: 768px) {
            .time-value {
                font-size: 3.75rem; /* md:text-6xl */
            }
            .time-label {
                font-size: 0.875rem; /* md:text-sm */
            }
        }

        /* --- Subscription Form Styles --- */
        .form-area {
            max-width: 28rem; /* max-w-md */
            margin-left: auto;
            margin-right: auto;
        }

        .form-text {
            color: #d1d5db; /* text-gray-300 */
            margin-bottom: 1rem; /* mb-4 */
            font-size: 1.125rem; /* text-lg */
        }

        .input-group {
            display: flex;
            flex-direction: column; /* flex-col */
            gap: 1rem; /* space-y-4 */
        }
        @media (min-width: 640px) {
            .input-group {
                flex-direction: row; /* sm:flex-row */
                gap: 1rem; /* sm:space-x-4 */
            }
        }

        .email-input {
            flex-grow: 1; /* flex-grow */
            padding: 0.75rem; /* p-3 */
            border-radius: 0.75rem; /* rounded-xl */
            border: 2px solid rgba(75, 145, 255, 0.5); /* border-2 border-blue-500/50 */
            background-color: rgba(17, 24, 39, 0.5); /* bg-gray-900/50 */
            color: white;
            padding-left: 1rem;
            
            /* Focus styles */
            outline: none;
            transition: all 0.2s ease-in-out;
        }

        .email-input::placeholder {
            color: #9ca3af; /* placeholder-gray-500 */
        }
        .email-input:focus {
            grid: 2px solid var(--color-primary);
            box-shadow: 0 0 0 2px var(--color-primary);
        }

        .notify-button {
            padding: 0.75rem 1.5rem; /* px-6 py-3 */
            border-radius: 0.75rem; /* rounded-xl */
            font-weight: 600; /* font-semibold */
            text-transform: uppercase;
            letter-spacing: 0.1em; /* tracking-wider */
            color: black;
            border: none;
            cursor: pointer;

            /* Gradient and transition */
            background-image: linear-gradient(to right, #fbbf24, #f97316); /* from-yellow-400 to-orange-500 */
            transition: all 300ms ease-in-out;
        }

        .notify-button:hover {
            background-image: linear-gradient(to right, #fcd34d, #f99049); /* hover:from-yellow-300 hover:to-orange-400 */
            box-shadow: 0 10px 15px -3px rgba(251, 191, 36, 0.5), 0 4px 6px -2px rgba(251, 191, 36, 0.5); /* hover:shadow-lg hover:shadow-yellow-500/50 */
            transform: scale(1.05);
        }

        /* --- Animation Keyframes for Logo --- */
        @keyframes pulse-glow {
            from {
                text-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary);
                transform: scale(1);
            }
            to {
                text-shadow: 0 0 15px var(--color-primary), 0 0 25px var(--color-primary), 0 0 40px var(--color-primary);
                transform: scale(1.05);
            }
        }

        @keyframes rotate-3d {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }