/* Basic Reset & Font */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- !!! ADJUST THIS VARIABLE TO SCALE EVERYTHING !!! --- */
:root {
    /* 1 = Size based on the small image example.
       Increase (e.g., 1.2 for 20% larger) or
       decrease (e.g., 0.8 for 20% smaller) */
    --base-scale: 1.5;

    /* Base units (adjust if needed, but scaling done via --base-scale) */
    --base-font-unit: 1rem; /* Approx 16px default */
    --base-spacing-unit: 1rem; /* Approx 16px default */
    --base-icon-size: 14px; /* Base icon size at scale 1 */
    --base-icon-stroke: 2.5px; /* Base icon stroke at scale 1 */
}
/* ---------------------------------------------------------- */


body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: #000000;
    line-height: 1.5;
    /* Base font size for 'rem' calculations */
    font-size: 16px;
}

/* Main Container Styling */
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Scaled padding */
    padding: calc(var(--base-spacing-unit) * 1 * var(--base-scale));
    position: relative;
}

.content-wrapper {
    width: 100%;
    /* Scaled max-width */
    max-width: calc(30rem * var(--base-scale));
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Logo */
.logo-container {
     /* Scaled margin */
    margin-bottom: calc(var(--base-spacing-unit) * 0.75 * var(--base-scale));
    width: 100%;
}

.logo {
    /* Scaled font-size */
    font-size: calc(var(--base-font-unit) * 2.25 * var(--base-scale));
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.01em;
    text-align: center;
}

/* Tagline */
.tagline {
    /* Scaled font-size and margin */
    font-size: calc(var(--base-font-unit) * 0.9 * var(--base-scale));
    color: #555555;
    margin-bottom: calc(var(--base-spacing-unit) * 1.75 * var(--base-scale));
    text-align: center;
    max-width: 100%;
    line-height: 1.4; /* Adjust line height for smaller fonts */
}

/* Countdown */
.countdown {
    display: flex;
    justify-content: center;
    /* Scaled gap and margin */
    gap: calc(var(--base-spacing-unit) * 1.25 * var(--base-scale));
    margin-bottom: calc(var(--base-spacing-unit) * 2 * var(--base-scale));
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.countdown-number {
    /* Scaled font-size */
    font-size: calc(var(--base-font-unit) * 1.5 * var(--base-scale));
    font-weight: 700;
    color: #000000;
}

.countdown-label {
    /* Scaled font-size and margin */
    font-size: calc(var(--base-font-unit) * 0.65 * var(--base-scale));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999999;
    margin-top: calc(var(--base-spacing-unit) * 0.1 * var(--base-scale));
}

/* Notify Button */
.notify-button {
    background-color: #000000;
    color: #ffffff;
    /* Scaled font-size, padding, radius */
    font-size: calc(var(--base-font-unit) * 0.8 * var(--base-scale));
    font-weight: 500;
    padding: calc(var(--base-spacing-unit) * 0.6 * var(--base-scale))
             calc(var(--base-spacing-unit) * 1.2 * var(--base-scale));
    border-radius: calc(4px * var(--base-scale)); /* Scale radius too */
    text-decoration: none;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.notify-button:hover {
    background-color: #333333;
}

.icon-mail {
    /* Scaled icon size, margin, stroke */
    width: calc(var(--base-icon-size) * var(--base-scale));
    height: calc(var(--base-icon-size) * var(--base-scale));
    margin-right: calc(var(--base-spacing-unit) * 0.4 * var(--base-scale));
    stroke-width: calc(var(--base-icon-stroke) / var(--base-scale)); /* Adjust stroke inversely */
     /* Ensure stroke remains visible when scaled down */
     min-width: 1px;
     min-height: 1px;
}


/* Footer */
.footer {
    position: absolute;
    /* Scaled position */
    bottom: calc(var(--base-spacing-unit) * 0.75 * var(--base-scale));
    width: 100%;
    text-align: center;
}

.footer p {
    /* Scaled font-size */
    font-size: calc(var(--base-font-unit) * 0.7 * var(--base-scale));
    color: #aaaaaa;
}

/* --- Responsive Adjustments --- */
/* Keep it simple: Adjust base scale slightly on larger screens if needed,
   or add specific overrides that ALSO use the scale factor */
@media (min-width: 640px) {
    /* Example: Slightly increase some elements relative to base scale */
     .logo {
        font-size: calc(var(--base-font-unit) * 2.5 * var(--base-scale)); /* Larger base multiplier */
    }
     .tagline {
        font-size: calc(var(--base-font-unit) * 1.0 * var(--base-scale));
        margin-bottom: calc(var(--base-spacing-unit) * 2.0 * var(--base-scale));
    }
    .countdown {
        gap: calc(var(--base-spacing-unit) * 1.5 * var(--base-scale));
        margin-bottom: calc(var(--base-spacing-unit) * 2.25 * var(--base-scale));
    }
     .countdown-number {
        font-size: calc(var(--base-font-unit) * 1.75 * var(--base-scale));
    }
     .notify-button {
        font-size: calc(var(--base-font-unit) * 0.85 * var(--base-scale));
         padding: calc(var(--base-spacing-unit) * 0.65 * var(--base-scale))
                 calc(var(--base-spacing-unit) * 1.3 * var(--base-scale));
    }
    .footer {
        bottom: calc(var(--base-spacing-unit) * 1 * var(--base-scale));
    }
}

/* You could add more breakpoints (md, lg) and adjust multipliers further if needed */