/* --- Global Styles & Resets --- */
:root {
    --primary-color: #00aeff; /* Vibrant blue for '10' */
    --accent-red: #ff3b3b;   /* NEW: Vibrant red for '20' */
    --text-color: #e0fbfc;
    --bg-dark-1: #0d1b2a;
    --bg-dark-2: #1b263b;
    --bg-dark-3: #415a77;
    --btn-hover-color: #00c6ff;
}

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

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background: linear-gradient(-45deg, var(--bg-dark-1), var(--bg-dark-2), var(--bg-dark-3), var(--bg-dark-1));
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Main Container --- */
.container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; max-width: 700px; gap: 3rem; }

/* --- Header & Logo --- */
.logo { font-size: clamp(2.5rem, 10vw, 5rem); font-weight: 700; letter-spacing: -2px; }
.logo .highlight { color: var(--primary-color); text-shadow: 0 0 15px rgba(0, 174, 255, 0.3); }

/* === UPDATED COLOR FOR '20' === */
.logo .dim {
    color: var(--accent-red);
    text-shadow: 0 0 10px rgba(255, 59, 59, 0.4);
}

.tagline { font-size: clamp(1rem, 4vw, 1.5rem); font-weight: 300; opacity: 0.9; margin-top: -0.5rem; }

/* --- Countdown Timer --- */
.countdown { display: flex; justify-content: center; gap: 1.5rem; }
.time-box { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 1rem 1.5rem; backdrop-filter: blur(5px); width: 100px; }
.time-box span { display: block; font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; line-height: 1; }
.time-box small { font-size: 0.8rem; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }

/* --- Contact Section --- */
.signup-section h2 { font-size: 1.8rem; font-weight: 500; margin-bottom: 0.5rem; }
.signup-section p { font-weight: 300; opacity: 0.9; margin-bottom: 1.5rem; max-width: 450px; margin-left: auto; margin-right: auto; }

/* === NEW STYLE FOR THE CONTACT BUTTON === */
.contact-button {
    display: inline-block;
    padding: 0.9rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--primary-color);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-button:hover {
    background-color: var(--btn-hover-color);
    transform: translateY(-2px);
}

/* --- Footer --- */
footer { opacity: 0.7; }
.social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.social-links a { color: var(--text-color); font-size: 1.2rem; transition: color 0.3s ease, transform 0.3s ease; }
.social-links a:hover { color: var(--primary-color); transform: translateY(-3px); }
.copyright { font-size: 0.8rem; font-weight: 300; }

/* --- Responsive Design --- */
@media (max-width: 600px) {
    .countdown { gap: 0.5rem; }
    .time-box { padding: 0.8rem; width: 70px; }
}