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

/* ------------------------------
   BASE TYPOGRAPHY
------------------------------ */
html, body {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: #1a1a1a;
    background-color: #ffffff;
    line-height: 1.5;
}

/* ------------------------------
   CONTAINER
------------------------------ */
.container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* ------------------------------
   SPACING RHYTHM
------------------------------ */
section, header, footer {
    padding: 10px 0;
}

/* ------------------------------
   HERO SECTION
------------------------------ */
#hero {
    padding-top: 80px;
    padding-bottom: 40px;
}

    #hero .emblem {
        width: 260px; /* Large enough to feel important */
        max-width: 80%; /* Scales gracefully on mobile */
        height: auto;
        display: block;
        margin: 0 auto 30px; /* Space below emblem */
    }

    #hero .tagline {
        font-size: 1.8rem;
        font-weight: 500;
        color: #1a1a1a;
        margin-top: 10px;
    }

/* ------------------------------
   DIVIDER
------------------------------ */
#divider hr {
    border: none;
    border-top: 1px solid #d0d0d0; /* Soft, subtle line */
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ------------------------------
   LAUNCH MESSAGE
------------------------------ */
#launch-message h2 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-top: 20px;
}

/* ------------------------------
   FOOTER
------------------------------ */
footer {
    padding: 40px 0;
    background-color: #ffffff; /* Keep it clean and minimal */
}

    footer p {
        font-size: 0.9rem;
        color: #555555; /* Soft gray so it doesn’t compete */
        text-align: center;
        letter-spacing: 0.3px;
    }

/* ------------------------------
   FADE-IN ANIMATIONS
------------------------------ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

    .fade-in.delay-1 {
        animation-delay: 0.3s;
    }

    .fade-in.delay-2 {
        animation-delay: 0.6s;
    }

#hero .emblem {
    width: 260px;
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto 30px;
    /* Soft, diffused shadow */
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));
}

body {
    background: linear-gradient(to bottom, #eef5ff 0%, #ffffff 40%);
}