body {
    position: relative;
    background: #090a09
}

.ambient,
.ambient-grid {
    position: fixed;
    inset: 0;
    pointer-events: none
}

.ambient {
    z-index: -3;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .08
}

.ambient-one {
    width: 520px;
    height: 520px;
    left: -180px;
    top: 16%;
    background: #00ff66;
    animation: ambient-drift-one 18s ease-in-out infinite alternate
}

.ambient-two {
    width: 430px;
    height: 430px;
    right: -120px;
    bottom: 8%;
    background: #0c542e;
    animation: ambient-drift-two 23s ease-in-out infinite alternate
}

.ambient-grid {
    z-index: -2;
    inset: -30%;
    opacity: .1;
    background-image: linear-gradient(rgba(184, 255, 79, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 255, 79, .12) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: perspective(600px) rotateX(60deg) translateY(-8%);
    animation: grid-drift 30s linear infinite
}

@keyframes ambient-drift-one {
    to {
        transform: translate(190px, 70px) scale(1.18)
    }
}

@keyframes ambient-drift-two {
    to {
        transform: translate(-160px, -90px) scale(1.13)
    }
}

@keyframes grid-drift {
    to {
        background-position: 0 144px, 144px 0
    }
}

.hero-visual {
    isolation: isolate
}

.tilt-card {
    transform-style: preserve-3d;
    will-change: transform
}

.tilt-card .card-top,
.tilt-card .crosshair,
.tilt-card .readout,
.tilt-card .hero-screenshot,
.tilt-card .card-footer {
    transform: translateZ(28px)
}

.js-tilt-glare {
    border-radius: 0
}

.js-tilt-glare .js-tilt-glare-inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 42%);
    mix-blend-mode: screen
}

.button-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.button-primary:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .5) 48%, transparent 70%);
    transform: translateX(-125%);
    transition: transform .65s ease
}

.button-primary:hover:before {
    transform: translateX(125%)
}

.button-primary span {
    position: relative
}

.float-element {
    animation: float-element 4.2s ease-in-out infinite
}

.readout-b {
    animation-delay: -2.1s
}

@keyframes float-element {

    0%,
    100% {
        transform: translateZ(28px) translateY(0)
    }

    50% {
        transform: translateZ(28px) translateY(-9px)
    }
}

@media(max-width:760px) {
    .ambient {
        filter: blur(80px);
        opacity: .07
    }

    .ambient-grid {
        background-size: 50px 50px;
        opacity: .07
    }

    .tilt-card .card-top,
    .tilt-card .crosshair,
    .tilt-card .readout,
    .tilt-card .hero-screenshot,
    .tilt-card .card-footer {
        transform: translateZ(18px)
    }
}