:root {
    color-scheme: dark;
    --background: #071625;
    --background-deep: #030912;
    --foreground: #f7f8fb;
    --muted: rgba(247, 248, 251, 0.58);
    --subtle: rgba(247, 248, 251, 0.34);
    --gold: #d4ae6b;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--background-deep);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(20, 47, 72, 0.44), transparent 37rem),
        linear-gradient(145deg, var(--background) 0%, var(--background-deep) 78%);
    color: var(--foreground);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.page {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100svh;
    overflow: hidden;
}

.page::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.017) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.017) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, black, transparent 72%);
    opacity: 0.28;
}

.atmosphere {
    position: absolute;
    z-index: -2;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
}

.atmosphere--one {
    top: 7%;
    left: 17%;
    width: 30rem;
    height: 18rem;
    background: rgba(79, 114, 151, 0.10);
    transform: rotate(-18deg);
}

.atmosphere--two {
    right: 13%;
    bottom: 9%;
    width: 23rem;
    height: 15rem;
    background: rgba(212, 174, 107, 0.055);
    transform: rotate(14deg);
}

.hero {
    display: grid;
    place-items: center;
    padding: clamp(3rem, 9vw, 7rem) 1.5rem 2rem;
}

.brand {
    width: min(100%, 58rem);
    text-align: center;
    animation: brand-arrival 1.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.origin {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 auto clamp(1.75rem, 4vw, 3.25rem);
    display: grid;
    place-items: center;
}

.origin__halo,
.origin__point {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.origin__halo {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(212, 174, 107, 0.32);
    box-shadow:
        0 0 2.75rem rgba(212, 174, 107, 0.22),
        inset 0 0 1.5rem rgba(212, 174, 107, 0.05);
    animation: halo-breathe 4.4s ease-in-out infinite;
}

.origin__point {
    width: 0.42rem;
    height: 0.42rem;
    background: var(--gold);
    box-shadow:
        0 0 0.55rem rgba(212, 174, 107, 0.95),
        0 0 1.8rem rgba(212, 174, 107, 0.48);
    animation: point-breathe 4.4s ease-in-out infinite;
}

.brand__logo {
    display: block;
    width: min(100%, 51rem);
    height: auto;
    margin: 0 auto;
    filter:
        drop-shadow(0 0 1rem rgba(255, 255, 255, 0.08))
        drop-shadow(0 0 2.8rem rgba(140, 184, 220, 0.04));
}

.brand__statement {
    margin: clamp(1.6rem, 3.5vw, 2.6rem) 0 0;
    color: var(--foreground);
    font-size: clamp(1.05rem, 2.1vw, 1.45rem);
    font-weight: 400;
    letter-spacing: 0.06em;
}

.brand__note {
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: clamp(0.77rem, 1.5vw, 0.92rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.5rem 1.5rem 1.8rem;
    color: var(--subtle);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: footer-arrival 1.8s 0.45s ease both;
}

.footer__divider {
    width: 1px;
    height: 0.75rem;
    background: rgba(247, 248, 251, 0.18);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes brand-arrival {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        filter: blur(8px);
    }

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

@keyframes footer-arrival {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes halo-breathe {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes point-breathe {
    0%,
    100% {
        transform: scale(0.86);
    }

    50% {
        transform: scale(1.16);
    }
}

@media (max-width: 640px) {
    .hero {
        padding-inline: 1.1rem;
    }

    .brand__logo {
        width: min(100%, 28rem);
    }

    .brand__statement {
        max-width: 18rem;
        margin-inline: auto;
        line-height: 1.55;
    }

    .brand__note {
        letter-spacing: 0.13em;
    }

    .footer {
        gap: 0.6rem;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}