* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #FFD700;
    --secondary-color: #1a1a2e;
    --accent-color: #16213e;
    --text-color: #ffffff;
    --light-gray: #0f3460;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: var(--text-color);
    overflow-x: hidden;
    position: relative;
}

/* Animated Background */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.light-beam {
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: slide 8s infinite ease-in-out;
    opacity: 0.5;
}

.light-beam:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.light-beam:nth-child(2) {
    left: 50%;
    animation-delay: 2s;
}

.light-beam:nth-child(3) {
    left: 80%;
    animation-delay: 4s;
}

@keyframes slide {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(-100%);
    }
    50% {
        opacity: 0.8;
        transform: translateY(100%);
    }
}

/* Stars Background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 100px white, 200px 150px white, 300px 50px white,
        150px 300px white, 400px 200px white, 500px 100px white,
        250px 450px white, 350px 400px white, 450px 300px white,
        50px 200px white, 120px 80px white, 380px 120px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    box-shadow: 
        120px 120px white, 220px 170px white, 320px 70px white,
        170px 320px white, 420px 220px white, 520px 120px white,
        270px 470px white, 370px 420px white, 470px 320px white;
    animation-delay: 1.5s;
}

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

/* Main Container */
.container-fluid {
    position: relative;
    z-index: 10;
    padding: 20px;
}

.coming-soon-wrapper {
    max-width: 900px;
    width: 100%;
}

/* Logo Section */
.logo-container {
    margin-bottom: 30px;
    animation: fadeInDown 1s ease-out;
}

.logo-icon {
    font-size: 80px;
    color: var(--primary-color);
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
    }
}

.brand-name {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--primary-color), #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.tagline {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* Main Heading */
.main-heading {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.highlight {
    color: var(--primary-color);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    animation: fadeInUp 1s ease-out 0.8s both;
}

/* Countdown Timer */
.countdown-section {
    margin: 50px 0;
    animation: fadeInUp 1s ease-out 1s both;
}

.countdown-label {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.countdown-item {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 25px 20px;
    min-width: 100px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.countdown-item:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

.countdown-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.countdown-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-separator {
    font-size: 30px;
    color: var(--primary-color);
    font-weight: 700;
    opacity: 0.5;
}

/* Features Section */
.features-section {
    animation: fadeInUp 1s ease-out 1.2s both;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.feature-card:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2);
}

.feature-icon {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: rotate(20deg) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}

.feature-card h5 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-color);
}

.feature-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* CTA Section */
.cta-section {
    animation: fadeInUp 1s ease-out 1.4s both;
}

.cta-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.email-form {
    max-width: 500px;
    margin: 0 auto;
}

.email-form .input-group {
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.email-form .form-control {
    border: none;
    padding: 15px 25px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    backdrop-filter: blur(10px);
}

.email-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.email-form .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-color);
    box-shadow: none;
    color: var(--text-color);
}

.email-form .btn {
    background: linear-gradient(135deg, var(--primary-color), #FFA500);
    border: none;
    color: #000;
    font-weight: 600;
    padding: 15px 30px;
    transition: all 0.3s ease;
}

.email-form .btn:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4);
    color: #000;
}

/* Social Links */
.social-section {
    animation: fadeInUp 1s ease-out 1.6s both;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary-color);
    color: #000;
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .brand-name {
        font-size: 36px;
    }

    .main-heading {
        font-size: 28px;
    }

    .description {
        font-size: 16px;
    }

    .countdown-value {
        font-size: 32px;
    }

    .countdown-item {
        min-width: 80px;
        padding: 20px 15px;
    }

    .logo-icon {
        font-size: 60px;
    }

    .feature-card {
        padding: 25px 20px;
    }

    .feature-icon {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .brand-name {
        font-size: 28px;
    }

    .main-heading {
        font-size: 22px;
    }

    .description {
        font-size: 14px;
    }

    .countdown-timer {
        gap: 8px;
    }

    .countdown-value {
        font-size: 24px;
    }

    .countdown-item {
        min-width: 65px;
        padding: 15px 10px;
    }

    .countdown-text {
        font-size: 10px;
    }

    .countdown-separator {
        font-size: 20px;
    }

    .logo-icon {
        font-size: 50px;
    }

    .email-form .form-control,
    .email-form .btn {
        padding: 12px 15px;
        font-size: 14px;
    }

    .social-link {
        width: 45px;
        height: 45px;
        margin: 0 5px;
        font-size: 18px;
    }
}