* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.72);
    --soft: rgba(255, 255, 255, 0.12);
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 18% 22%, rgba(202, 230, 240, 0.42), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(196, 193, 219, 0.34), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba(89, 134, 145, 0.42), transparent 36%),
    linear-gradient(135deg, #05080c 0%, #000000 42%, #130d1c 100%);
    background-size: 150% 150%, 140% 140%, 160% 160%, 220% 220%;
    animation: soft-gradient 5s ease-in-out infinite alternate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent 78%);
}

.rebuild-page {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6vw, 4rem) 1.25rem;
}

.rebuild-content {
    width: min(100%, 1100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(-2vh);
}

.brand-logo {
    width: min(80vw, 860px);
    height: auto;
    display: block;
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.24));
    animation: logo-fade-in 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.rebuild-copy {
    width: min(100%, 760px);
    margin-top: clamp(2rem, 5vh, 4rem);
}

.rebuild-copy h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rebuild-copy h2 {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: clamp(1.3rem, 2.8vw, 2.25rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.rebuild-copy .lead {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.3;
}

.contact {
    margin: 1.3rem auto 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.6;
}

.contact a {
    color: var(--text);
    text-decoration-color: var(--soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.contact a:hover,
.contact a:focus-visible {
    text-decoration-color: currentColor;
}

@keyframes soft-gradient {
    0% {
        background-position: 0% 45%, 100% 30%, 45% 100%, 0% 50%;
    }

    50% {
        background-position: 45% 20%, 70% 65%, 65% 75%, 70% 45%;
    }

    100% {
        background-position: 100% 55%, 20% 20%, 25% 55%, 100% 50%;
    }
}

@keyframes logo-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

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

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }

    .brand-logo {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .rebuild-page {
        padding-inline: 1rem;
    }

    .brand-logo {
        width: min(86vw, 520px);
    }

    .rebuild-content {
        transform: translateY(-1vh);
    }

    .contact {
        max-width: 20rem;
    }
}