:root {
    --page: #08080b;
    --ink: #f6f3ed;
    --gold-bright: #ffe1a0;
    --ring-size: clamp(11rem, 28vw, 20rem);
}

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

html {
    min-height: 100%;
    background: var(--page);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 50%,
            #17101c 0%,
            #0c0b12 42%,
            var(--page) 78%
        );
    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
}

.landing {
    position: relative;
    display: grid;
    min-height: 100svh;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
}

.ambient {
    position: absolute;
    z-index: -2;
    width: 52rem;
    height: 52rem;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(70px);
    pointer-events: none;
}

.ambient--one {
    top: -30rem;
    left: -25rem;
    background: #412d92;
    animation: drift-one 16s ease-in-out infinite alternate;
}

.ambient--two {
    right: -28rem;
    bottom: -31rem;
    background: #8e522d;
    animation: drift-two 19s ease-in-out infinite alternate;
}

.grain {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.identity {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 4vh, 3rem);
    padding: 2rem;
    text-align: center;
}

.mark {
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    transform: rotate(-10deg);
    filter: drop-shadow(0 0 3rem rgba(139, 99, 255, 0.18));
    animation: mark-float 8s ease-in-out infinite;
}

.mark__halo {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    opacity: 0.72;
    background:
        radial-gradient(
            circle,
            rgba(255, 219, 151, 0.19) 0%,
            rgba(133, 100, 255, 0.1) 28%,
            transparent 68%
        );
    filter: blur(18px);
    animation: halo-pulse 5s ease-in-out infinite;
}

.mark__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.ring--outer {
    border: clamp(0.5rem, 1.25vw, 0.85rem) solid transparent;
    background:
        linear-gradient(#0c0b10, #0c0b10) padding-box,
        conic-gradient(
            from 220deg,
            #725df4 0deg,
            #9b81ff 44deg,
            #f8d58d 106deg,
            #fff1c9 150deg,
            #d5a552 202deg,
            #6b5be2 282deg,
            #725df4 360deg
        ) border-box;
    box-shadow:
        inset 0 0 1.5rem rgba(255, 221, 160, 0.16),
        0 0 1.3rem rgba(144, 113, 255, 0.16),
        0 0 4rem rgba(231, 179, 92, 0.1);
}

.ring--inner {
    inset: 11%;
    border: 1px solid rgba(255, 237, 197, 0.3);
    box-shadow:
        inset 0 0 1.4rem rgba(127, 99, 246, 0.18),
        0 0 1.6rem rgba(255, 223, 161, 0.08);
}

.mark__axis {
    position: absolute;
    top: 7%;
    bottom: 7%;
    left: 50%;
    width: clamp(0.7rem, 1.55vw, 1.1rem);
    border-radius: 99px;
    transform: translateX(-50%);
    background:
        linear-gradient(
            90deg,
            #8065e6 0%,
            #bba1ff 18%,
            #fff7e4 48%,
            #e9be70 72%,
            #9265e2 100%
        );
    box-shadow:
        0 0 0.65rem rgba(255, 236, 190, 0.82),
        0 0 2rem rgba(156, 120, 255, 0.48),
        0 0 4rem rgba(235, 183, 91, 0.22);
}

.mark__axis::before,
.mark__axis::after {
    position: absolute;
    left: 50%;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
    background:
        radial-gradient(
            circle at 42% 35%,
            #fffef5 0%,
            #f4d58c 25%,
            #8c70e7 67%,
            #4b3799 100%
        );
    box-shadow:
        0 0 1.2rem rgba(255, 222, 150, 0.52),
        0 0 2.2rem rgba(129, 103, 247, 0.38);
}

.mark__axis::before {
    top: -0.25rem;
}

.mark__axis::after {
    bottom: -0.25rem;
}

.mark__core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            circle at 35% 28%,
            #fff7dc 0%,
            #f9d99a 19%,
            #bc94ff 48%,
            #37246d 78%,
            #170f2c 100%
        );
    box-shadow:
        0 0 1.2rem #f8d38a,
        0 0 2.8rem rgba(138, 109, 255, 0.83),
        0 0 5.5rem rgba(140, 94, 248, 0.42);
}

.mark__flare {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 1px;
    opacity: 0.65;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(130, 110, 255, 0.1) 17%,
            rgba(255, 230, 179, 0.85) 50%,
            rgba(130, 110, 255, 0.1) 83%,
            transparent
        );
    box-shadow: 0 0 0.9rem rgba(255, 222, 164, 0.8);
}

.domain {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1rem, 2.1vw, 1.35rem);
    font-weight: 300;
    letter-spacing: clamp(0.16em, 0.55vw, 0.35em);
    line-height: 1;
    text-transform: lowercase;
    text-shadow: 0 0 1.8rem rgba(236, 204, 142, 0.2);
    animation: domain-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.domain__dot {
    color: var(--gold-bright);
}

@keyframes mark-float {
    0%,
    100% {
        transform: rotate(-10deg) translateY(0);
    }

    50% {
        transform: rotate(-7deg) translateY(-0.75rem);
    }
}

@keyframes halo-pulse {
    0%,
    100% {
        opacity: 0.48;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.86;
        transform: scale(1.07);
    }
}

@keyframes drift-one {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(8rem, 6rem, 0);
    }
}

@keyframes drift-two {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-7rem, -5rem, 0);
    }
}

@keyframes domain-in {
    from {
        opacity: 0;
        transform: translateY(0.8rem);
        letter-spacing: 0.55em;
    }

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

@media (max-width: 420px) {
    .identity {
        gap: 2rem;
    }

    .domain {
        font-size: 0.9rem;
        letter-spacing: 0.14em;
    }
}

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

.starfield {
    position: absolute;
    z-index: -1;
    inset: -12%;
    overflow: hidden;
    opacity: 0.72;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 247, 222, 0.95) 0 1px, transparent 1.7px),
        radial-gradient(circle at 83% 15%, rgba(190, 211, 255, 0.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 68% 33%, rgba(255, 225, 165, 0.8) 0 1px, transparent 1.6px),
        radial-gradient(circle at 27% 42%, rgba(206, 190, 255, 0.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 91% 49%, rgba(255, 247, 222, 0.75) 0 1px, transparent 1.7px),
        radial-gradient(circle at 8% 61%, rgba(173, 205, 255, 0.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 49% 72%, rgba(255, 225, 165, 0.78) 0 1px, transparent 1.6px),
        radial-gradient(circle at 77% 84%, rgba(216, 202, 255, 0.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 18% 88%, rgba(255, 244, 208, 0.75) 0 1px, transparent 1.7px),
        radial-gradient(circle at 42% 11%, rgba(255, 255, 255, 0.72) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 58% 54%, rgba(255, 255, 255, 0.64) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 36% 80%, rgba(255, 255, 255, 0.62) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 95% 76%, rgba(255, 255, 255, 0.6) 0 0.8px, transparent 1.5px);
    animation: star-drift 40s linear infinite alternate;
}

@keyframes star-drift {
    from {
        transform: translate3d(-1%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(1.5%, 1%, 0) scale(1.03);
    }
}

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

/* Deep multi-layer starfield: later CSS overrides the earlier basic starfield. */
.starfield {
    position: absolute;
    z-index: -1;
    inset: -12%;
    overflow: hidden;
    opacity: 0.86;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 7% 12%, rgba(255,255,255,.95) 0 1.3px, transparent 2.3px),
        radial-gradient(circle at 16% 18%, rgba(255,239,194,.9) 0 1px, transparent 1.9px),
        radial-gradient(circle at 24% 9%, rgba(190,211,255,.85) 0 1px, transparent 1.8px),
        radial-gradient(circle at 34% 22%, rgba(255,255,255,.72) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 43% 7%, rgba(255,224,163,.9) 0 1.1px, transparent 2px),
        radial-gradient(circle at 51% 17%, rgba(216,202,255,.78) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 61% 10%, rgba(255,255,255,.85) 0 1px, transparent 1.8px),
        radial-gradient(circle at 73% 21%, rgba(183,211,255,.82) 0 1px, transparent 1.9px),
        radial-gradient(circle at 85% 8%, rgba(255,237,192,.85) 0 1px, transparent 1.8px),
        radial-gradient(circle at 94% 17%, rgba(255,255,255,.72) 0 .8px, transparent 1.5px),

        radial-gradient(circle at 5% 34%, rgba(198,220,255,.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 14% 43%, rgba(255,255,255,.7) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 22% 30%, rgba(255,225,165,.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 31% 48%, rgba(214,196,255,.76) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 40% 36%, rgba(255,255,255,.72) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 55% 28%, rgba(255,237,194,.85) 0 1px, transparent 1.9px),
        radial-gradient(circle at 63% 43%, rgba(190,215,255,.78) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 71% 32%, rgba(255,255,255,.72) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 81% 42%, rgba(240,217,255,.78) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 92% 31%, rgba(255,230,173,.84) 0 1px, transparent 1.8px),

        radial-gradient(circle at 9% 61%, rgba(255,255,255,.7) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 18% 73%, rgba(191,215,255,.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 28% 57%, rgba(255,228,171,.85) 0 1px, transparent 1.9px),
        radial-gradient(circle at 37% 69%, rgba(255,255,255,.72) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 47% 55%, rgba(216,201,255,.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 58% 74%, rgba(255,238,196,.88) 0 1px, transparent 1.9px),
        radial-gradient(circle at 67% 60%, rgba(255,255,255,.7) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 76% 70%, rgba(185,211,255,.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 86% 57%, rgba(246,221,255,.8) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 95% 72%, rgba(255,235,185,.84) 0 1px, transparent 1.8px),

        radial-gradient(circle at 6% 88%, rgba(255,255,255,.72) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 17% 94%, rgba(255,224,165,.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 29% 84%, rgba(194,216,255,.8) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 39% 96%, rgba(255,255,255,.68) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 49% 87%, rgba(224,205,255,.78) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 61% 93%, rgba(255,234,183,.86) 0 1px, transparent 1.8px),
        radial-gradient(circle at 71% 83%, rgba(255,255,255,.72) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 82% 95%, rgba(188,212,255,.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 91% 86%, rgba(255,224,170,.8) 0 .9px, transparent 1.7px),

        radial-gradient(ellipse at 16% 26%, rgba(137,105,255,.16) 0%, rgba(110,87,220,.08) 15%, transparent 36%),
        radial-gradient(ellipse at 82% 74%, rgba(230,171,90,.14) 0%, rgba(185,119,68,.07) 16%, transparent 38%),
        radial-gradient(ellipse at 77% 20%, rgba(119,168,255,.1) 0%, transparent 32%),
        radial-gradient(ellipse at 27% 79%, rgba(169,117,255,.1) 0%, transparent 31%);
    animation: star-drift 55s linear infinite alternate;
}

.starfield::before,
.starfield::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.starfield::before {
    opacity: 0.58;
    background-image:
        radial-gradient(circle at 14% 26%, rgba(255,255,255,.9) 0 1px, transparent 2px),
        radial-gradient(circle at 17% 29%, rgba(207,224,255,.78) 0 .8px, transparent 1.6px),
        radial-gradient(circle at 19% 24%, rgba(255,229,176,.8) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 21% 31%, rgba(255,255,255,.7) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 12% 32%, rgba(212,193,255,.74) 0 .8px, transparent 1.6px),

        radial-gradient(circle at 79% 72%, rgba(255,255,255,.88) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 69%, rgba(255,230,176,.82) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 84% 75%, rgba(196,218,255,.8) 0 .8px, transparent 1.6px),
        radial-gradient(circle at 77% 77%, rgba(255,255,255,.68) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 87% 71%, rgba(219,201,255,.76) 0 .8px, transparent 1.6px);
    filter: drop-shadow(0 0 5px rgba(183,155,255,.28));
    animation: star-twinkle 6s ease-in-out infinite alternate;
}

.starfield::after {
    opacity: 0.32;
    background-image:
        radial-gradient(circle at 15% 27%, rgba(255,237,198,.45) 0%, transparent 10%),
        radial-gradient(circle at 81% 73%, rgba(191,174,255,.36) 0%, transparent 11%),
        radial-gradient(circle at 75% 21%, rgba(147,188,255,.25) 0%, transparent 10%);
    filter: blur(12px);
}

@keyframes star-twinkle {
    from {
        opacity: 0.35;
        transform: scale(.98);
    }

    to {
        opacity: 0.78;
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .starfield,
    .starfield::before {
        animation: none;
    }
}

/* Dramatic deep-space override: dense star band, nebulae, and varied stars. */
.starfield {
    inset: -16%;
    opacity: 0.96;
    background-image:
        /* Bright hero stars */
        radial-gradient(circle at 11% 14%, rgba(255,255,255,1) 0 1.8px, rgba(210,226,255,.65) 2.4px, transparent 4px),
        radial-gradient(circle at 87% 17%, rgba(255,246,212,1) 0 1.7px, rgba(255,210,123,.58) 2.5px, transparent 4.2px),
        radial-gradient(circle at 74% 81%, rgba(220,230,255,1) 0 1.6px, rgba(152,183,255,.6) 2.5px, transparent 4.1px),
        radial-gradient(circle at 22% 75%, rgba(255,235,191,.96) 0 1.5px, rgba(236,169,102,.52) 2.3px, transparent 3.9px),
        radial-gradient(circle at 52% 23%, rgba(240,226,255,.96) 0 1.4px, rgba(184,132,255,.52) 2.2px, transparent 3.8px),

        /* Large / medium luminous stars */
        radial-gradient(circle at 5% 31%, rgba(255,255,255,.95) 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 18% 8%, rgba(196,220,255,.86) 0 1.1px, transparent 2px),
        radial-gradient(circle at 29% 19%, rgba(255,226,168,.9) 0 1.2px, transparent 2.1px),
        radial-gradient(circle at 38% 12%, rgba(255,255,255,.82) 0 1px, transparent 1.9px),
        radial-gradient(circle at 46% 34%, rgba(215,201,255,.9) 0 1.2px, transparent 2.1px),
        radial-gradient(circle at 61% 8%, rgba(255,246,214,.9) 0 1.1px, transparent 2px),
        radial-gradient(circle at 69% 28%, rgba(184,215,255,.9) 0 1.2px, transparent 2.1px),
        radial-gradient(circle at 81% 9%, rgba(255,255,255,.84) 0 1px, transparent 1.9px),
        radial-gradient(circle at 96% 35%, rgba(255,224,176,.88) 0 1.1px, transparent 2px),

        radial-gradient(circle at 7% 51%, rgba(204,224,255,.86) 0 1.1px, transparent 2px),
        radial-gradient(circle at 16% 44%, rgba(255,255,255,.84) 0 1px, transparent 1.9px),
        radial-gradient(circle at 26% 58%, rgba(255,227,174,.9) 0 1.1px, transparent 2px),
        radial-gradient(circle at 37% 47%, rgba(220,204,255,.9) 0 1.1px, transparent 2px),
        radial-gradient(circle at 48% 63%, rgba(255,255,255,.86) 0 1px, transparent 1.9px),
        radial-gradient(circle at 57% 44%, rgba(190,218,255,.88) 0 1.1px, transparent 2px),
        radial-gradient(circle at 65% 55%, rgba(255,232,184,.9) 0 1.2px, transparent 2.1px),
        radial-gradient(circle at 78% 46%, rgba(255,255,255,.84) 0 1px, transparent 1.9px),
        radial-gradient(circle at 89% 61%, rgba(217,202,255,.86) 0 1.1px, transparent 2px),

        radial-gradient(circle at 3% 82%, rgba(255,255,255,.82) 0 1px, transparent 1.9px),
        radial-gradient(circle at 13% 91%, rgba(255,225,171,.9) 0 1.1px, transparent 2px),
        radial-gradient(circle at 34% 86%, rgba(194,218,255,.88) 0 1.1px, transparent 2px),
        radial-gradient(circle at 43% 96%, rgba(255,255,255,.82) 0 1px, transparent 1.9px),
        radial-gradient(circle at 56% 88%, rgba(222,205,255,.88) 0 1.1px, transparent 2px),
        radial-gradient(circle at 64% 94%, rgba(255,230,177,.9) 0 1.1px, transparent 2px),
        radial-gradient(circle at 82% 91%, rgba(188,216,255,.9) 0 1.2px, transparent 2.1px),
        radial-gradient(circle at 94% 85%, rgba(255,255,255,.84) 0 1px, transparent 1.9px),

        /* Dense diagonal star band */
        radial-gradient(circle at 3% 68%, rgba(255,255,255,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 8% 64%, rgba(194,216,255,.7) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 12% 60%, rgba(255,226,173,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 16% 57%, rgba(255,255,255,.68) 0 .65px, transparent 1.35px),
        radial-gradient(circle at 20% 54%, rgba(207,193,255,.72) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 24% 51%, rgba(255,238,200,.72) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 28% 48%, rgba(255,255,255,.68) 0 .65px, transparent 1.35px),
        radial-gradient(circle at 32% 45%, rgba(186,215,255,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 36% 42%, rgba(255,227,177,.72) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 40% 39%, rgba(255,255,255,.7) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 44% 36%, rgba(216,198,255,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 48% 34%, rgba(255,236,196,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 52% 32%, rgba(255,255,255,.7) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 56% 30%, rgba(187,215,255,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 60% 28%, rgba(255,226,172,.72) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 64% 26%, rgba(255,255,255,.68) 0 .65px, transparent 1.35px),
        radial-gradient(circle at 68% 24%, rgba(218,201,255,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 72% 22%, rgba(255,236,196,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 76% 20%, rgba(255,255,255,.7) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 80% 18%, rgba(187,215,255,.74) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 84% 16%, rgba(255,227,177,.72) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 89% 14%, rgba(255,255,255,.68) 0 .65px, transparent 1.35px),
        radial-gradient(circle at 94% 12%, rgba(213,197,255,.74) 0 .75px, transparent 1.45px),

        /* Nebula clouds, placed chiefly around the outer space field */
        radial-gradient(ellipse at 14% 68%, rgba(87,117,255,.34) 0%, rgba(85,79,211,.19) 18%, rgba(55,34,128,.09) 37%, transparent 63%),
        radial-gradient(ellipse at 24% 56%, rgba(177,95,255,.21) 0%, rgba(103,72,219,.13) 23%, transparent 53%),
        radial-gradient(ellipse at 80% 21%, rgba(70,154,255,.29) 0%, rgba(64,93,221,.15) 22%, transparent 52%),
        radial-gradient(ellipse at 87% 68%, rgba(255,155,79,.24) 0%, rgba(203,93,72,.13) 22%, transparent 55%),
        radial-gradient(ellipse at 65% 84%, rgba(189,104,255,.19) 0%, rgba(105,61,187,.1) 26%, transparent 55%),
        radial-gradient(ellipse at 42% 18%, rgba(119,84,244,.13) 0%, transparent 48%);
    animation: star-drift 68s linear infinite alternate;
}

.starfield::before {
    opacity: 0.88;
    background-image:
        /* Upper-left dense cluster */
        radial-gradient(circle at 10% 62%, rgba(255,255,255,.92) 0 1px, transparent 1.8px),
        radial-gradient(circle at 13% 66%, rgba(197,220,255,.82) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 16% 62%, rgba(255,226,171,.86) 0 1px, transparent 1.8px),
        radial-gradient(circle at 19% 58%, rgba(255,255,255,.75) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 21% 55%, rgba(218,202,255,.82) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 7% 66%, rgba(255,238,202,.8) 0 .8px, transparent 1.55px),
        radial-gradient(circle at 18% 69%, rgba(183,213,255,.78) 0 .8px, transparent 1.55px),

        /* Upper-right blue cluster */
        radial-gradient(circle at 76% 23%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
        radial-gradient(circle at 79% 20%, rgba(185,216,255,.86) 0 .95px, transparent 1.75px),
        radial-gradient(circle at 82% 25%, rgba(255,226,174,.82) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 85% 18%, rgba(220,205,255,.78) 0 .8px, transparent 1.55px),
        radial-gradient(circle at 88% 23%, rgba(255,255,255,.72) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 73% 27%, rgba(190,218,255,.78) 0 .8px, transparent 1.55px),

        /* Lower-right warm cluster */
        radial-gradient(circle at 76% 75%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
        radial-gradient(circle at 80% 78%, rgba(255,220,159,.9) 0 .95px, transparent 1.75px),
        radial-gradient(circle at 84% 73%, rgba(199,219,255,.8) 0 .85px, transparent 1.6px),
        radial-gradient(circle at 88% 77%, rgba(255,245,211,.78) 0 .8px, transparent 1.55px),
        radial-gradient(circle at 91% 70%, rgba(220,200,255,.76) 0 .8px, transparent 1.55px),
        radial-gradient(circle at 73% 81%, rgba(255,229,179,.78) 0 .8px, transparent 1.55px);
    filter: drop-shadow(0 0 7px rgba(154,128,255,.38));
    animation: star-twinkle 5.5s ease-in-out infinite alternate;
}

.starfield::after {
    opacity: 0.62;
    background-image:
        radial-gradient(ellipse at 15% 63%, rgba(121,106,255,.44) 0%, rgba(68,73,201,.18) 24%, transparent 56%),
        radial-gradient(ellipse at 81% 21%, rgba(83,159,255,.34) 0%, rgba(61,83,207,.15) 25%, transparent 54%),
        radial-gradient(ellipse at 83% 75%, rgba(255,166,91,.3) 0%, rgba(194,86,79,.12) 26%, transparent 55%),
        radial-gradient(ellipse at 67% 84%, rgba(172,99,255,.22) 0%, transparent 52%);
    filter: blur(18px);
}

@media (prefers-reduced-motion: reduce) {
    .starfield,
    .starfield::before {
        animation: none;
    }
}