.hero-background,
.hero-background-overlay {
    position: absolute;
    inset: 0;
}

.hero-background {
    z-index: 0;
    display: block;
}

.hero-background img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--hero-position-desktop, center center);
}

.hero-background-overlay {
    z-index: 1;
    pointer-events: none;
    background: rgba(4, 7, 16, var(--hero-overlay-strength, .34));
}

.hero-shade {
    display: none;
}

.hero-orb-approved {
    display: none;
}

.hero-slogan,
.composer,
.quick {
    z-index: 3;
}

@media (min-width: 981px) {
    .hero {
        min-height: clamp(630px, calc(100vh - 110px), 760px);
        background: #0b0d19;
    }

    .hero-orb-approved {
        position: absolute;
        z-index: 3;
        top: clamp(155px, calc(30vh - 75px), 170px);
        left: 50%;
        width: clamp(238px, 18vw, 276px);
        height: clamp(238px, 18vw, 276px);
        display: block;
        object-fit: contain;
        transform: translateX(-50%);
    }

    .hero-slogan {
        top: clamp(410px, 48vh, 455px);
        right: auto;
        bottom: auto;
        left: 50%;
        width: max-content;
        max-width: 86%;
        transform: translateX(-50%);
        font-size: clamp(22px, 1.7vw, 26px);
        font-weight: 650;
        line-height: 1.45;
        text-align: center;
        text-shadow: 0 3px 24px rgba(0, 0, 0, .78);
    }

    .composer {
        top: clamp(452px, 53vh, 500px);
        bottom: auto;
        height: 80px;
    }

    .quick {
        top: clamp(540px, 63vh, 590px);
        bottom: auto;
        gap: 12px;
    }

    .quick button {
        height: 44px;
        color: #e2deee;
        border-color: rgba(135, 151, 236, .34);
        background: linear-gradient(145deg, rgba(10, 24, 54, .84), rgba(7, 15, 37, .88));
        font-size: 11px;
    }
}

@media (min-width: 601px) and (max-width: 980px) {
    .hero {
        min-height: 640px;
    }

    .hero-background img {
        object-position: var(--hero-position-tablet, center center);
    }

    .hero-orb-approved {
        position: absolute;
        z-index: 3;
        top: 95px;
        left: 50%;
        width: 236px;
        height: 236px;
        display: block;
        object-fit: contain;
        transform: translateX(-50%);
    }

    .hero-slogan {
        top: 340px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: max-content;
        max-width: 88%;
        transform: translateX(-50%);
        text-align: center;
    }

    .composer {
        top: 385px;
        bottom: auto;
    }

    .quick {
        top: 471px;
        bottom: auto;
    }
}

@media (max-width: 600px) {
    .hero-background img {
        object-position: var(--hero-position-mobile, center center);
    }

    .hero-orb-approved {
        position: absolute;
        z-index: 3;
        top: 85px;
        left: 50%;
        width: 210px;
        height: 210px;
        display: block;
        object-fit: contain;
        transform: translateX(-50%);
    }

    .hero-slogan {
        top: 304px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: max-content;
        max-width: calc(100% - 32px);
        transform: translateX(-50%);
        text-align: center;
    }

    .composer {
        top: 350px;
        bottom: auto;
    }

    .quick {
        top: 426px;
        bottom: auto;
    }
}