:root {
    color-scheme: dark;
    --bg: #07090f;
    --text: #f6f8ff;
    --muted: #aab4c6;
    --line: rgba(255,255,255,.12);
    --cyan: #42d8ff;
    --green: #5dffbd;
    --rose: #ff6f9f;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    overflow: hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), radial-gradient(circle at 50% 42%, rgba(66,216,255,.20), transparent 34%), radial-gradient(circle at 64% 62%, rgba(93,255,189,.10), transparent 28%), var(--bg);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

    body::before {
        content: "";
        position: fixed;
        inset: -30%;
        pointer-events: none;
        background: conic-gradient(from 180deg, transparent, rgba(66,216,255,.12), transparent, rgba(255,111,159,.10), transparent);
        animation: field-turn 18s linear infinite;
        opacity: .7;
    }

main {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 28px;
    text-align: center;
}

.dev-card {
    display: grid;
    justify-items: center;
    gap: 24px;
    width: min(620px, 100%);
}

.logo-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(154px, 25vw, 230px);
    aspect-ratio: 1;
    animation: stage-float 5s ease-in-out infinite;
}

    .logo-stage::before,
    .logo-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        pointer-events: none;
    }

    .logo-stage::before {
        padding: 1px;
        background: conic-gradient(from var(--angle), var(--cyan), var(--green), var(--rose), var(--cyan));
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        animation: ring-turn 6s linear infinite;
    }

    .logo-stage::after {
        inset: 16px;
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 0 42px rgba(66,216,255,.28), inset 0 0 34px rgba(93,255,189,.10);
        animation: ring-pulse 2.8s ease-in-out infinite;
    }

.logo {
    width: 58%;
    height: auto;
    filter: drop-shadow(0 20px 44px rgba(0,0,0,.48));
}

.brand {
    margin: 0;
    font-size: clamp(1.15rem, 3.6vw, 2.15rem);
    font-weight: 750;
    letter-spacing: .18em;
    line-height: 1.25;
    text-transform: uppercase;
}

.subtitle {
    max-width: 520px;
    margin: -12px 0 2px;
    color: var(--muted);
    font-size: clamp(.98rem, 2vw, 1.12rem);
    line-height: 1.65;
}

.home-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(16px);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

    .home-link:hover {
        transform: translateY(-2px);
        border-color: rgba(93,255,189,.45);
        background: rgba(255,255,255,.09);
    }

    .home-link span:last-child {
        color: var(--green);
    }

@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes ring-turn {
    to {
        --angle: 360deg;
    }
}

@keyframes ring-pulse {
    0%, 100% {
        transform: scale(.985);
        opacity: .62;
    }

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

@keyframes stage-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes field-turn {
    to {
        transform: rotate(360deg);
    }
}

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

@media (max-width: 520px) {
    body {
        overflow: auto;
    }

    .brand {
        letter-spacing: .11em;
    }
}