body {
    background-color: #0d1f33;
    position: relative;
}

.bg-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: #0d1f33;
    overflow: hidden;
    pointer-events: none;
}

.glass-shape {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    will-change: transform;
    mix-blend-mode: screen;
}

.glass-shape--1 {
    top: -5%;
    left: -15%;
    background: #72c7c2;
    opacity: 0.28;
    animation: move-shape-hero 35s infinite alternate ease-in-out;
}

.glass-shape--2 {
    top: 35%;
    right: -25%;
    background: #ffb9ad;
    opacity: 0.22;
    animation: move-shape-mid 50s infinite alternate-reverse ease-in-out;
}

.glass-shape--3 {
    top: 75%;
    left: -15%;
    width: 65vmax;
    height: 65vmax;
    background: #43a9a3;
    opacity: 0.18;
    animation: move-shape-bottom 60s infinite alternate ease-in-out;
}

.bg-stage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.15;
    background-image:
        url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M119 120h2M120 119v2' stroke='white' stroke-opacity='0.4' stroke-width='1'/%3E%3Ctext x='130' y='115' fill='white' font-size='8' font-family='sans-serif' opacity='0.3'%3E01.TECH_blueprint%3C/text%3E%3C/svg%3E");
    pointer-events: none;
}

.glass-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(120px);
    -webkit-backdrop-filter: blur(120px);
    z-index: 1;
    background: radial-gradient(circle at 50% 30%, rgba(13, 31, 51, 0.45) 0%, rgba(7, 18, 30, 0.6) 100%);
    pointer-events: none;
}

.bg-noise {
    position: fixed;
    inset: 0;
    z-index: 10;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
}

@keyframes move-shape-hero {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        transform: translate(10%, 8%) scale(1.2) rotate(15deg);
    }
}

@keyframes move-shape-mid {
    0% {
        transform: translate(0, 0) scale(1.1) rotate(0deg);
    }

    100% {
        transform: translate(-15%, 10%) scale(0.9) rotate(-10deg);
    }
}

@keyframes move-shape-bottom {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        transform: translate(12%, -8%) scale(1.1) rotate(25deg);
    }
}