:root {
    color-scheme: dark;
}

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

body.brand-landing-page {
    display: grid;
    min-height: 100vh;
    overflow: hidden;
    place-items: center;
    background: #05070d;
    color: #f8fbff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brand-landing-shell {
    display: grid;
    width: min(100%, 1180px);
    min-height: 100vh;
    padding: 32px;
    place-items: center;
}

.brand-landing-name {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: clamp(48px, 12vw, 154px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: 0;
    color: transparent;
    background: linear-gradient(100deg, #f7fbff 0%, #8fb7ff 28%, #ffffff 48%, #75f2d4 66%, #f7fbff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 26px rgba(117, 242, 212, 0.24));
    animation: brand-name-shimmer 4.8s ease-in-out infinite, brand-name-glow 3.6s ease-in-out infinite;
}

@keyframes brand-name-shimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes brand-name-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 18px rgba(143, 183, 255, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 34px rgba(117, 242, 212, 0.32));
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-landing-name {
        animation: none;
        background-position: 50% 50%;
    }
}