:root {
    --bg-color: #050505;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --accent: #ffffff;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Removed background-gradient entirely for a cleaner look */

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Left aligned for editorial look */
    padding: 2rem 10vw;
    /* Responsive padding */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

header {
    margin-bottom: 4rem;
}

h1 {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 15vw, 8rem);
    /* Massive typography */
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    line-height: 0.9;
    margin-left: -5px;
    /* Visual alignment */
}

h2 {
    font-family: var(--font-body);
    /* Switching to Inter for subhead for contrast */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    /* Reduced size */
    font-weight: 400;
    margin-bottom: 2rem;
    color: var(--text-secondary);
    max-width: 600px;
}

.questions {
    margin-bottom: 2rem;
    width: 100%;
}

.questions ul {
    list-style: disc;
    /* Revert to standard bullets */
    padding-left: 1.5rem;
    /* Standard padding */
    border-left: none;
    /* Remove vertical line */
}

/* Ensure bullets are visible and colored correctly if browser defaults are overridden by text color */
.questions ul li::marker {
    color: var(--text-secondary);
}

.questions li {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    /* Significantly reduced from 2.5rem max */
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: list-item;
    color: var(--text-primary);
    opacity: 1;
    transition: none;
    cursor: default;
    line-height: 1.3;
}

/* Removed hover effects */
.questions li:hover {
    opacity: 1;
    transform: none;
}

.questions .bullet {
    display: none;
}

.mission {
    margin-top: 0;
    /* Remove auto margin to bring it closer */
    padding-top: 1rem;
    width: 100%;
}

.mission p {
    font-size: 1.2rem;
    /* Increased from 1.1 */
    max-width: 600px;
    /* Slightly wider */
    color: var(--text-secondary);
    border-top: none;
    /* Remove separator line if desired, or keep it. User complained about whitespace, so keeping it simple might be better. Let's keep it but make it subtle? User didn't explicitly ask to remove the line, just whitespace. I'll remove the top border to clean it up based on 'gräsligt' feedback regarding lines. */
    padding-top: 0;
    line-height: 1.5;
}

footer {
    padding: 3rem 10vw 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.tagline {
    font-family: var(--font-body);
    color: var(--text-primary);
    /* Changed to primary for better readability */
    font-size: 0.9rem;
    /* Increased readability */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Slightly less tracking */
    opacity: 0.8;
    /* Slightly reduced but much more readable than before */
}

.contact a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
}

.contact a::after {
    display: none;
    /* Remove hover effect for simpler feel */
}

.contact a:hover {
    text-decoration: underline;
    /* Standard link behavior */
}

/* Animations - Speed up for snapper feel */
.fade-in-up {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease-out forwards;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

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

@media (max-width: 768px) {
    .container {
        padding: 1rem 1.5rem;
        /* Compact padding */
        justify-content: center;
        /* Center vertically for poster feel */
    }

    header {
        margin-bottom: 2rem;
    }

    h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }

    h2 {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        line-height: 1.3;
    }

    .questions {
        margin-bottom: 1.5rem;
    }

    .questions li {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .mission p {
        font-size: 1rem;
    }

    footer {
        padding: 1rem 1.5rem;
        gap: 0.5rem;
        /* Tighter footer */
    }

    .tagline,
    .contact a {
        font-size: 0.8rem;
    }
}