.hero-containment {
    contain: style;
    transform: translateZ(0)
}

.gradient-background {
    pointer-events: none;
    position: absolute;
    transform: translateY(-12rem);
    z-index: 0;
    overflow: hidden;
    width: 100%;
    min-height: 100vh
}

.hero-grid {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-mask-image: linear-gradient(to bottom,transparent 0%,black 30%,black 80%,transparent 100%);
    mask-image: linear-gradient(to bottom,transparent 0%,black 30%,black 80%,transparent 100%)
}

@media(min-width: 1024px) {
    .hero-grid {
        top:-84px
    }
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8rem;
    color: var(--white0)
}

@media(min-width: 660px) {
    .hero {
        padding-top:0;
        min-height: 44rem;
        height: 100vh;
        max-height: 60rem
    }
}

.hero-stars {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%)
}

.hero-stars svg {
    max-width: 100%
}

@media(min-width: 1200px) {
    .hero-stars svg {
        max-width:none
    }
}

.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 2rem
}

.hero-text h1 {
    color: var(--white0);
    font-family: var(--font-heading);
    font-weight: 550;
    font-size: 2.25rem;
    letter-spacing: -.02em;
    text-align: center;
    line-height: .92;
    max-width: 16ch;
    margin: auto;
    margin-bottom: 2rem
}

.hero-text h2 {
    color: var(--white0);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    max-width: 45ch
}

.hero-text p {
    line-height: 1.4
}

@media(min-width: 660px) {
    .hero-text h1 {
        font-size:3.5rem
    }

    .hero-text h2 {
        font-size: 1.25rem
    }
}

@media(min-width: 1112px) {
    .hero-text h1 {
        font-size:4.625rem
    }
}

@media(min-width: 1200px) {
    .hero-text h1 {
        font-size:5.625rem
    }
}

.hero-latest {
    margin: 0 auto 2rem;
    width: fit-content
}

.hero-latest a {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-mono);
    font-size: .8125rem;
    background-color: rgba(0,0,0,.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: .5625rem .75rem;
    border-radius: .5rem;
    color: var(--white0);
    box-shadow: 0 0 0 1px rgba(255,255,255,5%);
    transition: all .3s ease-in-out
}

.hero-latest a:hover {
    box-shadow: 0 0 0 1px rgba(255,255,255,0);
    background-color: rgba(38,38,38,.7)
}

.hero-latest svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor
}

.blur-background {
    filter: blur(16vw);
    transform: translate3d(0,0,0);
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

@media(min-width: 768px) {
    .blur-background {
        filter:blur(8vw)
    }
}

@supports not (filter: blur(1px)) {
    .blur-background {
        display:none
    }
}

.gradient-feature {
    position: absolute;
    border-radius: 100%;
    background-color: #77a5ff;
    opacity: .4
}

.gradient-feature-1 {
    top: 312px;
    left: calc((100vw/2) - (Min(1200px,100vw)/2) - 200px);
    width: 500px;
    height: 650px
}

.gradient-feature-2 {
    top: 470px;
    left: calc((100vw/2) - (Min(1200px,100vw)/2) + 100px);
    width: 400px;
    height: 300px;
    background-color: #ba83ff
}

.gradient-feature-3 {
    top: 1900px;
    right: calc((100vw/2) - (Min(1200px,100vw)/2) - 400px);
    width: 900px;
    height: 750px;
    background: linear-gradient(-15deg,#77d656 45.57%,#77a5ff 73.7%)
}

.gradient-feature-4 {
    top: 200px;
    left: calc((100vw/2) - (Min(1200px,100vw)/2) - 50px);
    width: 668px;
    height: 590px;
    background: linear-gradient(115.38deg,rgba(186,131,255,.55) 23.67%,rgba(237,78,78,.55) 82.99%);
    filter: blur(100px);
    opacity: 1;
    z-index: -1
}

.gradient-shape {
    position: absolute;
    border-radius: var(--radius,100%);
    background-color: var(--color,#77A5FF);
    opacity: var(--opacity,.4);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.1,0,.9,1);
    animation-duration: 20s
}

.gradient-shape-1 {
    width: 60vw;
    height: 30vw;
    top: 15vw;
    left: -20vw;
    animation-name: gradient-shape-1
}

.gradient-shape-2 {
    width: 56vw;
    height: 36vw;
    top: -10px;
    left: -10vw;
    transform: rotate(30deg);
    animation-name: gradient-shape-2
}

.gradient-shape-3 {
    width: 44vw;
    height: 44vw;
    top: 33vw;
    left: 64vw;
    animation-direction: reverse;
    animation-name: gradient-shape-1;
    animation-duration: 18s
}

.gradient-shape-4 {
    transform: rotate(-30deg);
    width: 24vw;
    height: 44vw;
    top: 44vw;
    left: 88vw;
    --radius: 30px;
    animation-direction: reverse;
    animation-name: gradient-shape-3;
    animation-duration: 25s
}

.gradient-flip {
    scale: -1 1
}

@media(min-width: 760px) {
    .gradient-shape-1 {
        width:30vw;
        height: 15vw;
        top: 15vw;
        left: -16px
    }

    .gradient-shape-2 {
        width: 28vw;
        height: 18vw;
        top: -10px;
        left: 10vw
    }

    .gradient-shape-3 {
        width: 22vw;
        height: 22vw;
        top: 24vw;
        left: 54vw
    }

    .gradient-shape-4 {
        width: 12vw;
        height: 22vw;
        top: 32vw;
        left: 60vw
    }

    body:has(.product-hero) .gradient-shape-3 {
        top: 18vw;
        left: 57vh
    }

    body:has(.product-hero) .gradient-shape-4 {
        top: 27vw;
        left: 75vw
    }

    body:has(.contact) .gradient-shape-3 {
        top: 5vw;
        left: 57vh
    }

    body:has(.contact) .gradient-shape-4 {
        top: 10vw;
        left: 75vw
    }
}

@keyframes gradient-shape-1 {
    0% {
        transform: rotate(40deg)translateX(80%)translateY(30%)
    }

    25% {
        transform: skew(15deg,15deg)rotate(110deg)translateX(-25%)translateY(-10%)
    }

    50% {
        transform: rotate(210deg)translateX(-35%)translateY(25%)
    }

    75% {
        transform: skew(-15deg,-15deg)rotate(300deg)translateX(60%)translateY(50%)
    }

    100% {
        transform: rotate(400deg)translateX(80%)translateY(30%)
    }
}

@keyframes gradient-shape-2 {
    0% {
        transform: translateX(20%)translateY(30%)
    }

    20% {
        transform: translateX(40%)translateY(5%)
    }

    40% {
        transform: translateX(15%)translateY(15%)
    }

    60% {
        transform: translateX(30%)translateY(30%)
    }

    80% {
        transform: translateX(50%)translateY(65%)
    }

    100% {
        transform: translateX(20%)translateY(30%)
    }
}

@keyframes gradient-shape-3 {
    0% {
        transform: translateX(-15%)translateY(30%)
    }

    20% {
        transform: translateX(20%)translateY(5%)
    }

    40% {
        transform: translateX(-25%)translateY(15%)
    }

    60% {
        transform: translateX(30%)translateY(30%)
    }

    80% {
        transform: translateX(5%)translateY(65%)
    }

    100% {
        transform: translateX(-15%)translateY(30%)
    }
}

@keyframes spin {
    0% {
        transform: translateX(0%)translateY(-50%)rotate(0)
    }

    25% {
        transform: translateX(0%)translateY(-50%)rotate(90deg)skew(-15deg,-15deg)
    }

    75% {
        transform: translateX(0%)translateY(-50%)rotate(270deg)skew(15deg,15deg)
    }

    100% {
        transform: translateX(0%)translateY(-50%)rotate(360deg)
    }
}