html {
    background: #020617;
}

body {
    min-height: 100vh;
    background: transparent !important;
    color: #fff;
}

.space-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 68% 18%, rgba(37, 99, 235, 0.14), transparent 28%),
        radial-gradient(circle at 18% 24%, rgba(124, 58, 237, 0.12), transparent 30%),
        linear-gradient(180deg, #01030a 0%, #020617 44%, #08111f 100%);
}

body > *:not(.space-scene) {
    position: relative;
    z-index: 1;
}

.stars {
    position: absolute;
    inset: -20%;
}

.stars-a {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(147,197,253,0.75) 0 1px, transparent 1.4px);
    background-size: 92px 92px, 164px 164px;
    opacity: 0.62;
    animation: starsA 95s linear infinite;
}

.stars-b {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.52) 0 1px, transparent 1.5px);
    background-size: 260px 260px;
    opacity: 0.38;
    transform: rotate(18deg);
    animation: starsB 150s linear infinite;
}

.cosmic-haze {
    position: absolute;
    border-radius: 50%;
    filter: blur(62px);
    mix-blend-mode: screen;
    opacity: 0.34;
}

.haze-blue {
    width: 70vw;
    height: 46vh;
    left: 40%;
    top: -13%;
    background: radial-gradient(circle, rgba(14,165,233,0.34), transparent 70%);
    animation: hazePulse 9s ease-in-out infinite;
}

.haze-purple {
    width: 64vw;
    height: 48vh;
    left: -22%;
    top: 18%;
    background: radial-gradient(circle, rgba(124,58,237,0.28), transparent 72%);
    animation: hazePulse 13s ease-in-out infinite reverse;
}

/* Земля */
.earth-horizon {
    position: absolute;
    left: 50%;
    bottom: -38vh;
    width: 138vw;
    height: 76vh;
    transform: translateX(-50%);
}

.earth-light {
    position: absolute;
    left: 50%;
    top: -12%;
    width: 92vw;
    height: 31vh;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(253,224,71,0.58), rgba(56,189,248,0.25) 40%, rgba(30,64,175,0.13) 58%, transparent 78%);
    filter: blur(15px);
    animation: earthGlow 5.5s ease-in-out infinite;
}

.earth-line {
    position: absolute;
    left: 50%;
    top: 2.8%;
    width: 74vw;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.62), #ffffff, #fde047, rgba(56,189,248,0.78), transparent);
    box-shadow:
        0 0 28px rgba(250,204,21,0.95),
        0 0 78px rgba(56,189,248,0.72);
}

.earth-planet {
    position: absolute;
    inset: 0;
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(circle at 42% 27%, rgba(34,197,94,0.28), transparent 9%),
        radial-gradient(circle at 57% 32%, rgba(14,165,233,0.33), transparent 14%),
        radial-gradient(circle at 46% 19%, rgba(255,255,255,0.20), transparent 7%),
        linear-gradient(180deg, #2563eb 0%, #0e7490 34%, #083344 62%, #020617 100%);
    box-shadow:
        0 -26px 100px rgba(56,189,248,0.48),
        inset 0 34px 84px rgba(255,255,255,0.18),
        inset 0 -135px 180px rgba(0,0,0,0.88);
}

.earth-night {
    position: absolute;
    inset: 0;
    border-radius: 50% 50% 0 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.46), transparent 38%, rgba(0,0,0,0.28)),
        radial-gradient(circle at 50% 84%, rgba(0,0,0,0.78), transparent 54%);
}

/* Спутник */
.satellite-wrap {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

.satellite-wrap-main {
    width: clamp(460px, 46vw, 860px);
    top: 8%;
    left: -55vw;
    animation: realSatelliteFly 18s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.satellite-svg {
    display: block;
    width: 100%;
    height: auto;
    transform: perspective(1000px) rotateX(7deg) rotateY(-13deg);
    filter:
        drop-shadow(0 24px 28px rgba(0,0,0,0.62))
        drop-shadow(0 0 18px rgba(125,211,252,0.26));
}

.satellite-dot {
    position: absolute;
    width: 88px;
    height: 28px;
    top: 23%;
    left: -16vw;
    opacity: 0.48;
    filter: blur(0.2px) drop-shadow(0 0 9px rgba(147,197,253,0.45));
    animation: farSat 30s linear infinite;
    animation-delay: 6s;
}

.satellite-dot::before,
.satellite-dot::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 33px;
    height: 18px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.18) 1px, transparent 1px),
        linear-gradient(135deg, #1d4ed8, #020617);
    background-size: 7px 7px, 7px 7px, auto;
    border: 1px solid rgba(191,219,254,0.45);
}

.satellite-dot::before {
    left: 0;
    transform: skewY(-8deg);
}

.satellite-dot::after {
    right: 0;
    transform: skewY(8deg);
}

.satellite-dot {
    background:
        linear-gradient(135deg, transparent 0 35px, #f8fafc 35px 53px, transparent 53px);
}

.simple-card {
    background: rgba(15, 23, 42, 0.24) !important;
    backdrop-filter: blur(6px) !important;
}

@keyframes realSatelliteFly {
    0% {
        transform: translate3d(-14vw, 17vh, 0) scale(0.78) rotate(-9deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    46% {
        transform: translate3d(52vw, -3vh, 0) scale(1.02) rotate(2deg);
        opacity: 1;
    }
    83% {
        opacity: 1;
    }
    100% {
        transform: translate3d(152vw, 14vh, 0) scale(0.86) rotate(12deg);
        opacity: 0;
    }
}

@keyframes farSat {
    0% {
        transform: translate3d(-18vw, 5vh, 0) scale(0.76) rotate(-15deg);
        opacity: 0;
    }
    12% {
        opacity: 0.42;
    }
    100% {
        transform: translate3d(140vw, 18vh, 0) scale(0.76) rotate(16deg);
        opacity: 0;
    }
}

@keyframes earthGlow {
    0%, 100% {
        opacity: 0.78;
        transform: translateX(-50%) scale(0.98);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.04);
    }
}

@keyframes hazePulse {
    0%, 100% {
        opacity: 0.24;
        transform: scale(0.96);
    }
    50% {
        opacity: 0.42;
        transform: scale(1.05);
    }
}

@keyframes starsA {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-92px, 92px, 0);
    }
}

@keyframes starsB {
    from {
        transform: translate3d(0, 0, 0) rotate(18deg);
    }
    to {
        transform: translate3d(260px, 160px, 0) rotate(18deg);
    }
}

@media (max-width: 760px) {
    .satellite-wrap-main {
        width: 540px;
        top: 13%;
        animation-duration: 15s;
    }

    .earth-horizon {
        width: 155vw;
        bottom: -34vh;
    }
}