.hero-section {
    background:
        radial-gradient(ellipse 58% 25% at 50% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .24) 35%, transparent 74%),
        radial-gradient(ellipse 65% 38% at 8% 78%, rgba(239, 23, 36, .23) 0%, transparent 72%),
        radial-gradient(ellipse 65% 38% at 92% 68%, rgba(239, 23, 36, .2) 0%, transparent 72%),
        radial-gradient(ellipse 90% 30% at 50% 100%, rgba(255, 255, 255, .42) 0%, rgba(239, 23, 36, .17) 38%, transparent 78%),
        linear-gradient(180deg, #181313 0%, #090808 18%, #030303 52%, #080506 78%, #1c080a 100%);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 28%, transparent 72%, rgba(0, 0, 0, .2)),
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%, transparent 76%, rgba(255, 255, 255, .08));
    z-index: 0;
}

.hero-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: min(1100px, 96vw);
    aspect-ratio: 3 / 2;
    transform: translateX(-50%);
    background: url('../images/black-gulio-logo.png') center / contain no-repeat;
    opacity: .055;
    filter: grayscale(.25) saturate(.8);
    pointer-events: none;
    z-index: 0;
}

.hero-section > .container,
.hero-section > .hero-grid,
.hero-section > .orb {
    z-index: 1;
}

.logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.brand-logo-img {
    display: block;
    width: 205px;
    height: auto;
    margin: -34px 0 -38px;
}

.logo-on-dark {
    background: transparent;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .2));
}

.logo-on-light .brand-logo-img {
    width: 235px;
    margin: -38px 0 -43px;
}

@media (max-width: 767px) {
    .brand-logo-img {
        width: 180px;
        margin: -30px 0 -34px;
    }

    .logo-on-light .brand-logo-img {
        width: 210px;
        margin: -34px 0 -39px;
    }
}