/* mobile fixed background v1: background does not scroll with content */
@media (max-width: 768px) {
    html,
    body {
        min-height: 100% !important;
        background: #040a22 !important;
        overflow-x: hidden !important;
    }

    body {
        position: relative !important;
    }

    body::before {
        content: "" !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background:
            radial-gradient(circle at 48% 34%, rgba(45, 130, 255, .34), transparent 34%),
            radial-gradient(circle at 88% 58%, rgba(105, 25, 205, .46), transparent 38%),
            radial-gradient(circle at 18% 82%, rgba(0, 220, 255, .10), transparent 36%),
            linear-gradient(120deg, #03091d 0%, #071640 48%, #210048 100%) !important;
        transform: translate3d(0,0,0) !important;
        backface-visibility: hidden !important;
    }

    #space,
    #floating-stars {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 1 !important;
        pointer-events: none !important;
        transform: translate3d(0,0,0) !important;
        backface-visibility: hidden !important;
    }

    .page {
        position: relative !important;
        z-index: 2 !important;
        background: transparent !important;
    }

    .hero,
    .status-panel,
    .cards,
    .footer {
        position: relative;
        z-index: 2;
    }
}