:root {
    --brand-success: #117A65;
    --brand-success-hover: #0F6A58;
    --brand-primary: #2C3E50;
    --brand-warning-fill: #F39C12;
    --brand-secondary-fill: #95A5A6;
    --brand-body: #212529;
    --brand-body-muted: rgba(33, 37, 41, 0.68);
    --brand-canvas: #FFFFFF;
    --brand-surface: #FFFFFF;
    --brand-surface-muted: #FAFAF9;
    --brand-border: #E1E0DC;
    --brand-border-soft: #D6D4CE;
    --brand-cta-bg: var(--brand-success);
    --brand-cta-border: var(--brand-success);
    --brand-cta-color: var(--brand-surface);
    --brand-cta-hover-bg: var(--brand-success-hover);
    --brand-cta-hover-border: var(--brand-success-hover);
    --brand-focus-ring: rgba(17, 122, 101, 0.16);
    color-scheme: light;
}

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

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--brand-body);
    background-color: var(--brand-canvas);
    font-family: "Inter", "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
}

.container {
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.logo {
    margin-bottom: 2rem;
}

.logo img {
    width: auto;
    height: 100px;
}

.logo-dark {
    display: none;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    padding: 0.4rem 1rem 0.4rem 0.75rem;
    color: var(--brand-body-muted);
    background: var(--brand-surface-muted);
    border: 1px solid var(--brand-border-soft);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.status-dot--success {
    background: var(--brand-success);
}

.status-dot--warning {
    background: var(--brand-warning-fill);
}

h1 {
    margin: 0 0 0.75rem;
    color: var(--brand-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.description {
    margin: 0 0 2.5rem;
    color: var(--brand-body-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.cta {
    display: inline-block;
    padding: 0.75rem 2rem;
    color: var(--brand-cta-color);
    background: var(--brand-cta-bg);
    border: 1px solid var(--brand-cta-border);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover,
.cta:focus-visible {
    color: var(--brand-cta-color);
    background: var(--brand-cta-hover-bg);
    border-color: var(--brand-cta-hover-border);
}

.cta:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--brand-focus-ring);
}

footer {
    padding: 1.25rem 2rem;
    color: var(--brand-secondary-fill);
    font-size: 0.8rem;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-success: #4FAD9C;
        --brand-success-hover: #58B6A5;
        --brand-warning-fill: #F8C471;
        --brand-body: #E5EAE7;
        --brand-body-muted: #AEB8B2;
        --brand-primary: #F7FAF8;
        --brand-canvas: #0D1110;
        --brand-surface: #111816;
        --brand-surface-muted: #18211E;
        --brand-border: rgba(205, 219, 212, 0.15);
        --brand-border-soft: rgba(205, 219, 212, 0.22);
        --brand-cta-bg: #117A65;
        --brand-cta-border: #117A65;
        --brand-cta-color: #FFFFFF;
        --brand-cta-hover-bg: #137F69;
        --brand-cta-hover-border: #137F69;
        --brand-focus-ring: rgba(79, 173, 156, 0.22);
        color-scheme: dark;
    }

    .logo-light {
        display: none;
    }

    .logo-dark {
        display: inline-block;
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

@media (max-width: 480px) {
    .logo img {
        height: 72px;
    }

    h1 {
        font-size: 1.4rem;
    }
}