/* Homepage hero presentation loaded after the shared theme. */
.hero-directory .hero-illustration {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-bottom: 1px solid rgba(103, 232, 249, 0.12) !important;
    box-shadow:
        0 -28px 90px rgba(0, 0, 0, 0.34),
        0 34px 85px rgba(0, 0, 0, 0.38) !important;
}

.hero-directory .hero-illustration::before {
    background:
        radial-gradient(circle at 73% 34%, rgba(103, 232, 249, 0.1), transparent 26%),
        linear-gradient(180deg, rgba(8, 11, 24, 0.13), transparent 28%, transparent 67%, rgba(5, 8, 20, 0.7)),
        linear-gradient(90deg, rgba(5, 8, 20, 0.38), transparent 23%, transparent 76%, rgba(5, 8, 20, 0.28));
}

.hero-directory .hero-illustration::after {
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 23, 0.62));
}

.hero-directory .hero-illustration img {
    height: clamp(430px, 42vw, 680px);
    object-position: center 30%;
    filter: saturate(1.05) contrast(1.04) brightness(0.96);
}

.hero-directory .hero-image-callout {
    background: rgba(7, 13, 28, 0.73);
    border-color: rgba(165, 243, 252, 0.2);
    box-shadow:
        0 20px 52px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

main > .stats-strip {
    max-width: 1080px;
    margin: -58px auto 58px;
    background: linear-gradient(145deg, rgba(18, 28, 48, 0.96), rgba(11, 19, 34, 0.97)) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 24px;
    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.45),
        0 0 48px rgba(34, 211, 238, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

main > .stats-strip div {
    padding-block: 31px;
    border-color: rgba(148, 163, 184, 0.13) !important;
}

@media (max-width: 1120px) {
    main > .stats-strip {
        width: calc(100% - 44px);
    }
}

@media (max-width: 850px) {
    .hero-directory .hero-illustration img {
        height: clamp(330px, 58vw, 470px);
        object-position: center 28%;
    }

    main > .stats-strip {
        margin-top: -42px;
    }
}

@media (max-width: 620px) {
    .hero-directory .hero-illustration img {
        height: clamp(260px, 76vw, 350px);
        object-position: 55% center;
    }

    main > .stats-strip {
        width: auto;
        margin: -28px 14px 34px;
        border-radius: 20px;
    }

    main > .stats-strip div {
        padding: 20px 16px;
    }
}