/* ---- CSS Reset (minimal) ---- */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
}

/* ---- Background: subtle light dotted grid ---- */
body {
    --dot-color: rgba(0, 0, 0, 0.08);
    --bg-color: #ffffff;
    background:
        radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0) 0 0/14px 14px,
        var(--bg-color);
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
}

/* ---- Main layout ---- */
.hero {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-wrapper {
    margin: 0;
}

.logo {
    width: clamp(100px, 7vw, 120px);
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
    animation: fade-in 900ms cubic-bezier(.4, 0, .2, 1);
}

.tagline {
    font-size: .8rem;
    letter-spacing: .2em;
    margin-top: 1.4rem;
    font-weight: 500;
    text-transform: none;
    color: #555;
    max-width: 480px;
    line-height: 1.4;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    animation: fade-in 1200ms cubic-bezier(.4, 0, .2, 1);
    opacity: .9;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
    body {
        --dot-color: rgba(255, 255, 255, 0.08);
        --bg-color: #0f1115;
        color: #e6e6e6;
    }

    .tagline {
        color: #c1c5cc;
    }

    .logo {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    }
}

/* ---- High DPI tweak for crisper dots ---- */
@media (min-resolution: 2dppx) {
    body {
        background-size: 16px 16px;
    }
}

/* ---- Accessibility prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {

    .logo,
    .tagline {
        animation: none;
    }
}