:root {
    --primary-gold: #D4AF37;
    --secondary-gold: #FFD700;
    --deep-navy: #0A192F;
    --navy-light: #112240;
    --text-white: #E6F1FF;
    --text-muted: #8892B0;
    --glass-bg: rgba(17, 34, 64, 0.75);
    --gold-gradient: linear-gradient(135deg, #FFD700 0%, #D4AF37 50%, #B8860B 100%);
}

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

body {
    background-color: var(--deep-navy);
    color: var(--text-white);
    font-family: 'IBM Plex Sans Arabic', 'Outfit', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, #112240 0%, #0A192F 100%);
    z-index: -2;
}

.shimmer-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 45%, rgba(212, 175, 55, 0.05) 50%, transparent 55%);
    background-size: 200% 200%;
    animation: shimmer 15s linear infinite;
    z-index: -1;
}

@keyframes shimmer {
    0% {
        background-position: -200% -200%;
    }

    100% {
        background-position: 200% 200%;
    }
}

/* Stars Background */
.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
}

.layer-1 {
    box-shadow: 200px 300px #FFF, 500px 100px #FFF, 800px 400px #FFF, 100px 700px #FFF, 1200px 200px #FFF, 1500px 600px #FFF, 400px 900px #FFF, 1000px 500px #FFF;
    animation: twinkle 4s infinite ease-in-out;
}

.layer-2 {
    width: 1px;
    height: 1px;
    box-shadow: 300px 400px rgba(255, 255, 255, 0.7), 600px 200px rgba(255, 255, 255, 0.7), 900px 500px rgba(255, 255, 255, 0.7), 200px 800px rgba(255, 255, 255, 0.7), 1300px 300px rgba(255, 255, 255, 0.7), 1600px 700px rgba(255, 255, 255, 0.7), 500px 1000px rgba(255, 255, 255, 0.7), 1100px 600px rgba(255, 255, 255, 0.7);
    animation: twinkle 6s infinite ease-in-out -1s;
}

.layer-3 {
    width: 1px;
    height: 1px;
    box-shadow: 150px 250px rgba(255, 255, 255, 0.5), 450px 150px rgba(255, 255, 255, 0.5), 750px 350px rgba(255, 255, 255, 0.5), 50px 650px rgba(255, 255, 255, 0.5), 1150px 150px rgba(255, 255, 255, 0.5), 1450px 550px rgba(255, 255, 255, 0.5), 350px 850px rgba(255, 255, 255, 0.5), 950px 450px rgba(255, 255, 255, 0.5);
    animation: twinkle 8s infinite ease-in-out -2s;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

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

.container {
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.logo-section {
    margin-bottom: 3rem;
    animation: fadeInDown 1s ease-out;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
}

.logo {
    max-height: 140px;
    width: auto;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 1s ease-out 0.2s backwards;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    animation: fadeInUp 1s ease-out 0.4s backwards;
}

/* Countdown Styles */
.countdown-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

.countdown-item {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    min-width: 120px;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.countdown-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-gold);
}

.number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    color: var(--primary-gold);
    margin-bottom: 0.5rem;
}

.label {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
}

.countdown-separator {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.5;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(46, 213, 115, 0.1);
    color: #2ed573;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(46, 213, 115, 0.2);
    animation: fadeInUp 1s ease-out 0.8s backwards;
}

.pulse {
    width: 8px;
    height: 8px;
    background: #2ed573;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(46, 213, 115, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(46, 213, 115, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 213, 115, 0);
    }
}

footer {
    margin-top: 4rem;
    animation: fadeIn 1.5s ease-out 1s backwards;
}

.copyright {
    color: var(--text-muted);
    font-size: 0.85rem;
}

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

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

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .countdown-grid {
        gap: 0.5rem;
    }

    .countdown-item {
        min-width: 80px;
        padding: 1rem;
    }

    .number {
        font-size: 2rem;
    }

    .countdown-separator {
        font-size: 2rem;
    }

    .logo {
        max-height: 50px;
    }

    .logo-wrapper {
        gap: 1rem;
    }
}