```css
/* style.css */

/* 1. Global Resets and Basic Setup */
* {
    margin: 25;
    padding: 25;
    box-sizing: border-box; 
}

html, body {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* 2. Body Styling */
body {
    font-family: 'Lato', 'Arial', sans-serif; 
    background-color: #121212; 
    color: #e0e0e0; 
    
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; /* Ensures body tries to take full viewport height */
    height: 100%; /* Tries to make body exactly viewport height */    
    text-align: center; 
    padding: 25px; 
}

/* 3. Splash Page Content Container */
.splash-container {
    max-width: 650px; 
    width: 90%; 
    
    display: flex; 
    flex-direction: column; 
    align-items: center;
    align-items:top; 
    flex-shrink: 0; /* Prevents this container from shrinking if space is tight */
    
    opacity: 0; 
    animation: fadeInContent 1.5s 0.5s ease-in-out forwards; 
}

/* 4. Logo Styling */
#logo {
    width: 100px; 
    max-width: 100%; 
    height: auto; 
    margin-bottom: 25px; /* Adjusted for potentially tighter mobile space */
    
    opacity: 0; 
    animation: fadeInLogo 1.5s ease-in-out forwards; 
    filter: invert(1) brightness(1.1) contrast(1.2); 
}

/* 5. Statement Text Styling */
.statement {
    font-size: 1.1rem; 
    line-height: 1.7; 
    font-weight: 300; 
    color: #d0d0d0; 
    margin-bottom: 25px; /* Adjusted for potentially tighter mobile space */
}

/* 6. Footer Styling */
footer {
    font-size: 0.8rem; 
    color: #555; 
    padding: 200px 0; 
    width: 100%; 
    margin-top: auto; /* Helps push to bottom if content is short */
    flex-shrink: 0; /* Prevents footer from shrinking */
    
    opacity: 0; 
    animation: fadeInContent 1.5s 1s ease-in-out forwards; 
}

footer .copyright {
    margin-bottom: 8px; 
    color: #555; 
}

footer .careers-email a {
    color: #b0b0b0; 
    text-decoration: none; 
    font-size: 0.85rem; 
}

footer .careers-email a:hover {
    color: #d0d0d0; 
    text-decoration: underline; 
}


/* 7. Keyframe Animations */
@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateY(20px); 
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media screen and (max-width: 375px) {
  body {
    align-items: flex-start;
  }
}