.home-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 118px 24px 72px;
    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(91, 33, 182, 0.08)
            transparent 32%
        ),
        radial-gradient(
            circle at 18% 28%,
            rgba(126, 34, 206, 0.055)
            transparent 34%
        ),
        #030306;
}

/* BACKGROUND */

.hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ==========================================================
   STAR FIELD
========================================================== */

.stars{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.stars::before{
    content:"";
    position:absolute;
    inset:-30%;
}

/* ---------- FAR STARS ---------- */

.stars-back::before{

    background-image:

        radial-gradient(circle,#fff .6px,transparent .9px),

        radial-gradient(circle,rgba(216,180,254,.65) .6px,transparent .9px);

    background-size:
        240px 240px,
        320px 320px;

    background-position:
        20px 40px,
        150px 80px;

    opacity:.18;

}

/* ---------- MID STARS ---------- */

.stars-mid::before{

    background-image:

        radial-gradient(circle,#fff 1px,transparent 1.3px),

        radial-gradient(circle,rgba(192,132,252,.85) .9px,transparent 1.3px);

    background-size:
        170px 170px,
        210px 210px;

    background-position:
        90px 18px,
        10px 100px;

    opacity:.24;

    animation:starBlink 10s ease-in-out infinite alternate;

}

/* ---------- FRONT STARS ---------- */

.stars-front::before{

    background-image:

        radial-gradient(circle,#fff 1.4px,transparent 1.8px);

    background-size:
        120px 120px;

    background-position:
        35px 65px;

    opacity:.30;

    animation:starBlink2 7s ease-in-out infinite alternate;

}

/* ==========================================================
   BIG STARS
========================================================== */

.star-accent{

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 22px rgba(192,132,252,.65);

    animation:
        starPulse 6s ease-in-out infinite;

}

/* позиции */

.star-accent-1{

    top:8%;

    left:14%;

}

.star-accent-2{

    top:18%;

    right:22%;

    animation-delay:-2s;

}

.star-accent-3{

    top:38%;

    left:8%;

    animation-delay:-4s;

}

.star-accent-4{

    top:54%;

    right:11%;

    animation-delay:-1s;

}

.star-accent-5{

    bottom:18%;

    left:22%;

    animation-delay:-5s;

}

.star-accent-6{

    bottom:12%;

    right:32%;

    animation-delay:-3s;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes starBlink{

    from{

        opacity:.16;

    }

    to{

        opacity:.34;

    }

}

@keyframes starBlink2{

    from{

        opacity:.22;

    }

    to{

        opacity:.46;

    }

}

@keyframes starPulse{

    0%{

        transform:scale(.9);

        opacity:.35;

    }

    40%{

        transform:scale(1.6);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.35;

    }

}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.065;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.95),
            transparent 88%
        );
}

.hero-noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.8) 0.5px,
            transparent 0.5px
        );
    background-size: 4px 4px;
    mix-blend-mode: soft-light;
}

.hero-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
    animation: auroraDrift 18s ease-in-out infinite alternate;
}

.hero-aurora-left {
    top: 80px;
    left: 5%;
    width: 560px;
    height: 560px;
    background:
        radial-gradient(
            circle,
            rgba(126, 34, 206, 0.17)
            transparent 68%
        );
}

.hero-aurora-right {
    right: 0;
    bottom: 80px;
    width: 520px;
    height: 520px;
    background:
        radial-gradient(
            circle,
            rgba(79, 70, 229, 0.11)
            transparent 68%
        );
    animation-delay: -8s;
}

/* LAYOUT */

.home-hero {
    position: relative;
    z-index: 2;
    width: min(1760px, calc(100% - 40px));
    margin: 0 auto;
}

.hero-layout {
    display: grid;
    grid-template-columns:
        minmax(620px, 0.92fr)
        minmax(560px, 1.08fr);
    align-items: center;
    gap: 42px;
    min-height: 650px;
}

.hero-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 790px;
    transform: translateY(-52px);
}

/* COPY */

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b775ff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.7px;
}

.hero-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #c084fc;
    box-shadow:
        0 0 8px #c084fc,
        0 0 18px rgba(168, 85, 247, 0.85);
}

.hero-title {
    width: 100%;
    max-width: 790px;
    margin: 28px 0 0;
    color: #ffffff;
    font-size: clamp(54px, 4.2vw, 70px);
    line-height: 1.06;
    letter-spacing: -3.4px;
    font-weight: 850;
    word-break: normal;
    overflow-wrap: normal;
}

.hero-title span {
    display: block;
    margin-top: 8px;
    background:
        linear-gradient(
            90deg,
            #e6c7ff 0%,
            #c778ff 38%,
            #8b3dff 72%,
            #6330f5 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-description {
    max-width: 690px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 18px;
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    padding: 0 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 750;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.hero-button svg {
    width: 18px;
    height: 18px;
}

.hero-button:hover {
    transform: translateY(-3px);
}

.hero-button-primary {
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            #ad4cff 0%,
            #6b24ff 100%
        );
    box-shadow:
        0 14px 44px rgba(116, 40, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero-button-primary:hover {
    box-shadow:
        0 24px 68px rgba(126, 34, 206, 0.48);
}

.hero-button-secondary {
    border-color: rgba(197, 142, 255, 0.36);
    background: rgba(10, 8, 20, 0.62);
    backdrop-filter: blur(18px);
}

.hero-button-secondary:hover {
    border-color: rgba(168, 85, 247, 0.55);
    background: rgba(168, 85, 247, 0.09);
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 13px;
}

.hero-note-line {
    width: 34px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(192, 132, 252, 0.75),
            transparent
        );
}

/* VISUAL */

.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 680px;
    transform: translate(20px, -70px);
}

.void-core {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 570px);
    aspect-ratio: 1;
    isolation: isolate;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(92, 32, 190, 0.22),
            rgba(7, 4, 18, 0.96) 58%,
            #020207 78%
        );
    box-shadow:
        0 0 0 1px rgba(192, 132, 252, 0.24),
        0 0 38px rgba(126, 34, 206, 0.34),
        0 0 105px rgba(91, 33, 182, 0.24),
        inset 0 0 72px rgba(76, 29, 149, 0.18);
}

.void-core-halo {
    position: absolute;
    inset: -9%;
    z-index: -2;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(168, 85, 247, 0.3) 0%,
            rgba(126, 34, 206, 0.18) 40%,
            rgba(76, 29, 149, 0.07) 64%,
            transparent 78%
        );
    filter: blur(62px);
    opacity: 0.9;
    animation: corePulse 5s ease-in-out infinite;
}

.void-core-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.void-core-orbit-a {
    inset: 3%;
    z-index: 2;
    border-radius: 50%;
    background:
        conic-gradient(
            from 208deg,
            transparent 0deg,
            transparent 102deg,
            rgba(115, 40, 255, 0.06) 132deg,
            #7c3aed 165deg,
            #e8c4ff 198deg,
            #8b3dff 226deg,
            rgba(124, 58, 237, 0.1) 260deg,
            transparent 300deg,
            transparent 360deg
        );
    padding: 3px;
    filter:
        drop-shadow(0 0 14px rgba(168, 85, 247, 0.75))
        drop-shadow(0 0 34px rgba(91, 33, 182, 0.55));
    animation: orbitSpin 22s linear infinite;
}

.void-core-orbit-a::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: #030208;
}

.void-core-orbit-a::before {
    content: "";
    position: absolute;
    top: 6%;
    left: 50%;
    z-index: 3;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f1ddff;
    box-shadow:
        0 0 10px #f1ddff,
        0 0 24px rgba(168, 85, 247, 0.95),
        0 0 42px rgba(124, 58, 237, 0.72);
}

.void-core-orbit-b {
    inset: 10%;
    z-index: 1;
    border: 1px dashed rgba(168, 85, 247, 0.18);
    animation: orbitSpinReverse 34s linear infinite;
}

.void-core-orbit-c {
    inset: 19%;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 0 48px rgba(126, 34, 206, 0.14);
    animation: orbitBreath 7s ease-in-out infinite;
}

.void-core-image-wrap {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 84%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    box-shadow:
        inset 0 0 55px rgba(8, 4, 20, 0.95),
        0 0 42px rgba(126, 34, 206, 0.22);
}

.void-core-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 50% 45%,
            transparent 48%,
            rgba(2, 2, 7, 0.52) 76%,
            rgba(2, 2, 7, 0.92) 100%
        );
    pointer-events: none;
}

.void-core-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter:
        saturate(1.32)
        contrast(1.12)
        brightness(0.98)
        drop-shadow(0 0 32px rgba(168, 85, 247, 0.42))
        drop-shadow(0 0 76px rgba(92, 32, 220, 0.34));
    animation: coreFloat 6s ease-in-out infinite;
}

.void-particle {
    position: absolute;
    z-index: 4;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 8px #ffffff,
        0 0 18px rgba(168, 85, 247, 0.85);
    opacity: 0.75;
}

.void-particle-1 {
    top: 15%;
    left: 20%;
    animation: particleFloat 7s ease-in-out infinite;
}

.void-particle-2 {
    top: 26%;
    right: 8%;
    animation: particleFloat 8s ease-in-out infinite -2s;
}

.void-particle-3 {
    right: 22%;
    bottom: 16%;
    animation: particleFloat 6s ease-in-out infinite -1s;
}

.void-particle-4 {
    bottom: 22%;
    left: 10%;
    animation: particleFloat 9s ease-in-out infinite -4s;
}

.void-particle-5 {
    top: 46%;
    left: 2%;
    animation: particleFloat 7.5s ease-in-out infinite -3s;
}

/* ANIMATIONS */

@keyframes auroraDrift {
    from {
        transform: translate3d(-20px, -10px, 0) scale(0.96);
    }

    to {
        transform: translate3d(30px, 18px, 0) scale(1.06);
    }
}

@keyframes coreFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.015);
    }
}

@keyframes corePulse {
    0%,
    100% {
        opacity: 0.58;
        transform: scale(0.94);
    }

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

@keyframes orbitSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbitSpinReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes orbitBreath {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.98);
    }

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

@keyframes particleFloat {
    0%,
    100% {
        opacity: 0.45;
        transform: translate3d(0, 0, 0);
    }

    50% {
        opacity: 1;
        transform: translate3d(6px, -14px, 0);
    }
}


/* SMALL DESKTOP */

@media (min-width: 1081px) and (max-width: 1350px) {
    .home-hero {
        width: min(1240px, 100%);
    }

    .hero-layout {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(390px, 0.85fr);
        gap: 28px;
    }

    .hero-title {
        font-size: clamp(46px, 4vw, 56px);
        letter-spacing: -2.5px;
    }

    .void-core {
        width: min(100%, 520px);
    }
}

/* TABLET */

@media (max-width: 1080px) {
    .home-page {
        padding-top: 108px;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: auto;
        text-align: center;
    }

    .hero-copy {
        max-width: 800px;
        margin: 0 auto;
        transform: none;
    }

    .hero-title,
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-note {
        justify-content: center;
    }

    .hero-visual {
        min-height: auto;
        transform: none;
    }

    .void-core {
        width: min(100%, 560px);
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .home-page {
        padding: 92px 18px 48px;
    }

    .home-hero {
        width: 100%;
    }

    .hero-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: 0;
        margin: 0;
    }

    .hero-copy {
        width: 100%;
        text-align: center;
    }

    .hero-eyebrow {
        font-size: 11px;
        letter-spacing: 0.8px;
    }

    .hero-title {
        max-width: 100%;
        margin-top: 24px;
        font-size: clamp(40px, 11vw, 52px);
        line-height: 1.02;
        letter-spacing: -2.2px;
    }

    .hero-title span {
        margin-top: 10px;
        white-space: normal;
    }

    .hero-description {
        max-width: 360px;
        margin-top: 24px;
        font-size: 16px;
        line-height: 1.65;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-top: 28px;
    }

    .hero-button {
        width: 100%;
        min-height: 58px;
        padding: 0 20px;
        border-radius: 16px;
        font-size: 15px;
    }

    .hero-note {
        justify-content: center;
        margin-top: 20px;
        font-size: 12px;
        line-height: 1.4;
    }

    /*
     * На телефоне скрываем тяжёлую сферу.
     * Так первый экран остаётся компактным и быстрым.
     */
    .hero-visual {
        display: none;
    }
}

/* ACCESSIBILITY */

/* ===== RANDOM SHOOTING STAR ===== */

.random-shooting-star {
    position: absolute;
    z-index: 2;
    top: var(--star-y);
    left: var(--star-x);
    width: var(--star-length);
    height: 2px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.12) 24%,
            rgba(216, 180, 254, 0.9) 72%,
            #ffffff 100%
        );

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.82),
        0 0 20px rgba(168, 85, 247, 0.5);

    transform-origin: right center;

    animation:
        randomShootingStar
        var(--star-duration)
        cubic-bezier(0.2, 0.7, 0.25, 1)
        forwards;
}

.random-shooting-star::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
    box-shadow:
        0 0 8px #ffffff,
        0 0 18px rgba(216, 180, 254, 0.9),
        0 0 30px rgba(168, 85, 247, 0.55);
}

@keyframes randomShootingStar {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 0, 0)
            rotate(var(--star-angle))
            scaleX(0.35);
    }

    12% {
        opacity: 1;
    }

    72% {
        opacity: 0.95;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--star-travel-x),
                var(--star-travel-y),
                0
            )
            rotate(var(--star-angle))
            scaleX(1);
    }
}

/* ==========================================================
   JS STAR FIELD
========================================================== */

.js-star-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.95),
            rgba(0, 0, 0, 0.72) 68%,
            transparent 100%
        );
}

.js-star {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.55);
    animation-name: jsStarTwinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.js-star-purple {
    background: rgba(216, 180, 254, 0.95);
    box-shadow:
        0 0 5px rgba(216, 180, 254, 0.72),
        0 0 12px rgba(168, 85, 247, 0.32);
}

.js-star-bright {
    box-shadow:
        0 0 7px rgba(255, 255, 255, 0.9),
        0 0 18px rgba(192, 132, 252, 0.58);
}

@keyframes jsStarTwinkle {
    0% {
        transform: scale(0.72);
        filter: brightness(0.8);
    }

    100% {
        transform: scale(1.22);
        filter: brightness(1.3);
    }
}

/* ==========================================================
   RANDOM METEOR
========================================================== */

.js-meteor {
    position: absolute;
    z-index: 5;
    top: var(--meteor-y);
    left: var(--meteor-x);
    width: var(--meteor-length);
    height: 2px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 18%,
            rgba(216, 180, 254, 0.56) 58%,
            rgba(255, 255, 255, 0.98) 100%
        );

    filter:
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 18px rgba(168, 85, 247, 0.58));

    transform-origin: right center;

    animation:
        jsMeteorFly
        var(--meteor-duration)
        cubic-bezier(0.2, 0.72, 0.25, 1)
        forwards;
}

/* ==========================================================
   METEOR VARIANTS
========================================================== */

/* Фиолетовая комета */

.js-meteor.js-meteor-purple {
    filter:
        drop-shadow(0 0 10px rgba(216,180,254,.95))
        drop-shadow(0 0 26px rgba(168,85,247,.9));
}

.js-meteor.js-meteor-purple::after {
    background: #E9D5FF;

    box-shadow:
        0 0 12px #E9D5FF,
        0 0 30px rgba(168,85,247,.95),
        0 0 50px rgba(126,34,206,.65);
}

/* Легендарная комета */

.js-meteor.js-meteor-legend {
    height: 3px;

    filter:
        drop-shadow(0 0 14px #fff)
        drop-shadow(0 0 36px rgba(192,132,252,1))
        drop-shadow(0 0 70px rgba(168,85,247,.8));
}

.js-meteor.js-meteor-legend::after {
    width: 8px;
    height: 8px;

    background: #ffffff;

    box-shadow:
        0 0 16px #ffffff,
        0 0 36px rgba(255,255,255,.95),
        0 0 60px rgba(216,180,254,.95);
}

.js-meteor::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
    box-shadow:
        0 0 8px #ffffff,
        0 0 18px rgba(216, 180, 254, 0.95),
        0 0 32px rgba(168, 85, 247, 0.72);
}

@keyframes jsMeteorFly {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 0, 0)
            rotate(var(--meteor-angle))
            scaleX(0.28);
    }

    10% {
        opacity: 1;
    }

    72% {
        opacity: 0.95;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--meteor-travel-x),
                var(--meteor-travel-y),
                0
            )
            rotate(var(--meteor-angle))
            scaleX(1);
    }
}

/* ==========================================================
   SPHERE REACTION
========================================================== */

.void-core {
    transition:
        filter 0.45s ease,
        box-shadow 0.45s ease;
}

.void-core.meteor-flash {
    filter: brightness(1.08) saturate(1.08);
    box-shadow:
        0 0 0 1px rgba(216, 180, 254, 0.34),
        0 0 54px rgba(168, 85, 247, 0.48),
        0 0 130px rgba(91, 33, 182, 0.34),
        inset 0 0 80px rgba(76, 29, 149, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .js-star,
    .js-meteor,
    .stars,
    .star-accent,
    .hero-aurora,
    .void-core-halo,
    .void-core-orbit,
    .void-core-image,
    .void-particle {
        animation: none !important;
    }

    .void-core,
    .hero-button,
    .nav-link,
    .nav-primary,
    .nav-login,
    .advantage-card,
    .home-metric,
    .download-tab,
    .download-primary {
        transition: none !important;
    }
}

/* ==========================================================
   SHOOTING STARS
========================================================== */

.shooting-star{

    position:absolute;

    width:160px;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(255,255,255,.95),
            rgba(192,132,252,.95),
            rgba(255,255,255,0)
        );

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.9))
        drop-shadow(0 0 24px rgba(168,85,247,.55));

    opacity:0;

    transform:
        rotate(-32deg)
        translateX(0);

    pointer-events:none;

}

/* ---------- POSITIONS ---------- */

.shooting-star-1{

    top:12%;
    left:12%;

    animation:
        shootingStar 28s linear infinite;

}

.shooting-star-2{

    top:34%;
    right:18%;

    animation:
        shootingStar 36s linear infinite;

    animation-delay:-12s;

}

.shooting-star-3{

    top:62%;
    left:42%;

    animation:
        shootingStar 42s linear infinite;

    animation-delay:-25s;

}

/* ==========================================================
   REGISTRATION SUCCESS HERO
========================================================== */

.hero-registration-success {
    position: relative;
    z-index: 4;
    max-width: 760px;
    animation:
        registrationHeroEnter
        0.7s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

.hero-registration-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 34px;
    padding: 0 13px;

    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;

    color: #86efac;
    background: rgba(34, 197, 94, 0.075);

    box-shadow:
        0 0 24px rgba(34, 197, 94, 0.08);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.hero-registration-badge svg {
    width: 16px;
    height: 16px;
}

.hero-registration-title {
    max-width: 760px;
    margin: 22px 0 0;

    color: #ffffff;

    font-size: clamp(56px, 7vw, 104px);
    font-weight: 850;
    line-height: 0.92;
    letter-spacing: -5px;
}

.hero-registration-title span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #f3e8ff,
            #c084fc 38%,
            #9333ea 72%,
            #6d28d9
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter:
        drop-shadow(
            0 0 24px
            rgba(168, 85, 247, 0.18)
        );
}

.hero-registration-text {
    max-width: 650px;
    margin: 24px 0 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 17px;
    line-height: 1.75;
}

.hero-registration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
}

.hero-registration-actions .hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero-registration-actions svg {
    width: 17px;
    height: 17px;
}

.hero-registration-progress {
    width: min(480px, 100%);
    height: 4px;

    margin-top: 34px;
    overflow: hidden;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.hero-registration-progress span {
    display: block;
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6d28d9,
            #a855f7,
            #d8b4fe
        );

    box-shadow:
        0 0 18px rgba(168, 85, 247, 0.55);

    animation:
        registrationProgress
        7s
        linear
        forwards;
}

.hero-registration-caption {
    display: block;
    margin-top: 11px;

    color: rgba(255, 255, 255, 0.28);

    font-size: 11px;
}

@keyframes registrationHeroEnter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes registrationProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .hero-registration-title {
        font-size: clamp(48px, 15vw, 72px);
        letter-spacing: -3px;
    }

    .hero-registration-text {
        font-size: 15px;
    }

    .hero-registration-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-registration-actions .hero-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-registration-success,
    .hero-registration-progress span {
        animation: none;
    }

    .hero-registration-progress span {
        width: 100%;
    }
}


/* ==========================================================
   REGISTRATION SUCCESS
========================================================== */

.registration-banner {
    display: flex;
    align-items: center;
    gap: 20px;

    width: 100%;
    max-width: 760px;

    margin-bottom: 34px;
    padding: 22px 26px;

    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 18, 24, 0.92),
            rgba(11, 11, 16, 0.94)
        );

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    animation:
        registrationBannerAppear
        0.5s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

.registration-banner.is-leaving {
    animation:
        registrationBannerLeave
        0.28s ease forwards;
}

.registration-banner-icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;
    flex: 0 0 58px;

    border-radius: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #a855f7
        );

    box-shadow:
        0 0 35px rgba(124, 58, 237, 0.35);
}

.registration-banner-icon svg {
    width: 28px;
    height: 28px;
}

.registration-banner-content {
    min-width: 0;
}

.registration-banner-label {
    display: block;
    margin-bottom: 6px;

    color: #b784ff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.registration-banner-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.registration-banner-content p {
    max-width: 520px;
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 15px;
    line-height: 1.6;
}

@keyframes registrationBannerAppear {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

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

@keyframes registrationBannerLeave {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

@media (max-width: 768px) {
    .registration-banner {
        align-items: flex-start;
        gap: 16px;

        padding: 18px;
    }

    .registration-banner-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .registration-banner-icon svg {
        width: 23px;
        height: 23px;
    }

    .registration-banner-content h3 {
        font-size: 20px;
    }

    .registration-banner-content p {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .registration-banner,
    .registration-banner.is-leaving {
        animation: none;
    }
}