:root {
    /* Fonts */
    --font-body: 'Outfit', sans-serif;
    --font-display: 'Michroma', sans-serif;

    /* Colors */
    --color-bg: #000000;
    --color-text: #ffffff;
    --color-text-primary: rgba(255, 255, 255, 0.85);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-text-subtle: rgba(255, 255, 255, 0.55);
    --color-text-footer: rgba(255, 255, 255, 0.7);
    --color-link-border: rgba(255, 255, 255, 0.25);
    --color-link-border-hover: rgba(255, 255, 255, 0.6);
    --color-footer-bg: rgba(0, 0, 0, 0.35);
    --color-footer-border: rgba(255, 255, 255, 0.06);

    /* Background atmosphere positioning — horizon sits at ~80% of viewport height */
    --horizon-top: 78%;
    --horizon-height: 18%;
    --glow-top: 82%;
    --glow-height: 10%;

    /* Animation */
    --ease-standard: ease-out;
    --duration-fade: 1s;
    --transition-speed: 0.3s;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--color-text);
}

body {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-bg);
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        #000000 0%,
        #000205 20%,
        #01050e 40%,
        #020a1a 58%,
        #041228 68%,
        #071d3d 76%,
        #0c3060 82%,
        #1456a0 87%,
        #1a78cc 91%,
        #2090e0 100%
    );
}

.bg::after {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    top: var(--horizon-top);
    height: var(--horizon-height);
    background: radial-gradient(
        ellipse 120% 100% at 50% 50%,
        rgba(20, 100, 200, 0.2) 0%,
        rgba(30, 130, 220, 0.12) 40%,
        rgba(15, 70, 150, 0.06) 70%,
        transparent 100%
    );
    filter: blur(50px);
    pointer-events: none;
}

.atmosphere-glow {
    position: absolute;
    left: -10%;
    right: -10%;
    top: var(--glow-top);
    height: var(--glow-height);
    background: radial-gradient(
        ellipse 140% 100% at 50% 50%,
        rgba(30, 120, 210, 0.1) 0%,
        rgba(20, 80, 170, 0.05) 50%,
        transparent 100%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

#mesh-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Content sits below the canvas-rendered title */
.content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem 4rem;
    pointer-events: none;
}

/* Invisible spacer that reserves the same height as the canvas title */
.logo-spacer {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 8vw, 5.5rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    visibility: hidden;
    margin-bottom: 1.4rem;
}

.tagline {
    font-size: clamp(0.95rem, 2.2vw, 1.35rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--color-text-primary);
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    animation: fadeInUp var(--duration-fade) var(--ease-standard) 0.2s both;
    transform: translateX(-0.4em);
    pointer-events: auto;
}

.coming-soon {
    font-size: clamp(0.75rem, 1.6vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-bottom: 2rem;
    animation: fadeInUp var(--duration-fade) var(--ease-standard) 0.4s both;
}

.contact {
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    animation: fadeInUp var(--duration-fade) var(--ease-standard) 0.6s both;
    pointer-events: auto;
}

.contact a {
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-link-border);
    padding-bottom: 2px;
    transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.contact a:hover {
    color: var(--color-text);
    border-color: var(--color-link-border-hover);
}

/*
 * Using the `translate` property (not `transform`) so the animation composes
 * with any `transform` already set on the element (e.g. .tagline's translateX).
 * This lets a single keyframe work for both plain and offset elements.
 */
@keyframes fadeInUp {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}

.footer {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.9rem 1.5rem;
    text-align: center;
    font-size: clamp(0.6rem, 1.1vw, 0.72rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--color-text-footer);
    background: var(--color-footer-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-footer-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

@media (max-height: 600px) {
    .content { padding: 1rem 1rem 2.5rem; }
    .logo-spacer { margin-bottom: 0.8rem; }
    .tagline { margin-bottom: 1.5rem; }
    .coming-soon { margin-bottom: 1.2rem; }
}

@media (max-width: 480px) {
    .tagline { letter-spacing: 0.06em; }
}