.genie-section {
    position: relative;
    overflow: hidden;
    background-color: var(--background-dark-blue, #082C5A);
    border-radius: 30px;
    padding: 70px 0;
    isolation: isolate;
}

.elementor-element-geniewrap.e-con {
    padding-inline: 40px;
}

/* Host pages with the old markup already add 10px of column padding; compensated here. */
.elementor-element-populated .elementor-element-geniewrap.e-con {
    padding-inline: 30px;
}

/* Placement follows the fill's imageTransform in Figma, not the node box: the visible crop is shifted. */
.genie-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--genie-bg, none);
    background-repeat: no-repeat;
    background-size: 325.37% auto;
    background-position: 55.92% 90.73%;
    filter: blur(1.42px);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

.genie-section__ellipse {
    position: absolute;
    left: 50%;
    top: -291px;
    /*
     * Visual box is 1260x570 with blur(168px) (Figma LAYER_BLUR 400, sigma ~0.42 of the radius).
     * WebKit (Safari, all iOS browsers) silently skips large blur radii (in device px, so worse on
     * DPR 3; iOS 16 fails even at 84px). Gaussian blur scales linearly: 1/8 box + blur(21px) +
     * scale(8) renders the same with a tiny radius.
     * margin-top keeps the center where the breakpoint's top puts it: (570 - 71.25) / 2.
     */
    width: 157.5px;
    height: 71.25px;
    margin-top: 249.375px;
    transform: translateX(-50%) scale(8);
    background: #33F8E9;
    opacity: 0.7;
    border-radius: 50%;
    filter: blur(21px);
    /* On 1440 the glow lies under the texture; on 768/375 above it. */
    z-index: -2;
    pointer-events: none;
}


.genie-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%);
    background-size: 30px 30px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 9px 9px, 18px 18px;
    background-position: 207px 127px, 206px 151px, 840px 217px, 76px 503px, 988px 520px, 95px 522px, 1089px 560px;
}

.genie-section__inner {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
}

.genie-section__head {
    display: flex;
    justify-content: center;
}

.genie-section__title {
    margin: 0;
    max-width: 633px;
    color: #fff;
    text-align: center;
    font-size: 28px;
    line-height: 30px;
    letter-spacing: -0.01em;
    font-weight: 400;
}

.genie-section__description {
    color: #E8EDF2;
    text-align: center;
}

.genie-section__stat {
    position: absolute;
    right: 51px;
    top: -47px;
    width: 266px;
    min-height: 217px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
}

.genie-section__stat-caption {
    font-size: 41px;
    line-height: 41px;
    letter-spacing: -0.02em;
    max-width: 213px;
}

.genie-section__stat-value {
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 0.01em;
    align-self: flex-end;
    opacity: 0.9;
}

.genie-section__stat--image {
    gap: 0;
}

.genie-section__stat-image {
    display: block;
    width: 266px;
    height: 217px;
    max-width: 100%;
}

.genie-section__items {
    list-style: none;
    margin: 60px 0 0;
    padding: 0 0 0 85px;
    display: grid;
    grid-template-columns: repeat(3, 330px);
    justify-content: start;
    column-gap: 100px;
    row-gap: 40px;
}

.genie-section__item {
    position: relative;
    width: 330px;
    height: 90px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

/* The theme indents every Elementor li by 40px; reset here. */
.genie-section__items > .genie-section__item {
    padding: 0;
    margin: 0;
}

/* The number is out of flow: the flow already fills the slot width exactly. */
.genie-section__number {
    position: absolute;
    left: -20px;
    top: -6px;
    width: 16px;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0.17em;
    color: var(--blue-light);
}

.genie-section__item-title {
    flex: none;
    width: 170px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.01em;
    font-weight: 400;
}

.genie-section__link-graphic {
    flex: none;
    width: 150px;
    max-width: none;
    height: 80px;
    opacity: 0.6;
    pointer-events: none;
}

.genie-section__inner > .genie-section__nav {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.genie-section__label {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.01em;
    color: #fff;
    max-width: 360px;
}

/* No button styles on purpose: the button is the shared theme component. */

@media (max-width: 1439px) {
    /* The manual line break of the title exists only in the 1440 layout. */
    .genie-section__title-br {
        display: none;
    }

    .elementor-element-geniewrap.e-con {
        padding-inline: 65px;
    }

    .elementor-element-populated .elementor-element-geniewrap.e-con {
        padding-inline: 55px;
    }

    .genie-section {
        padding: 60px 0;
    }

    .genie-section::after {
        background-image:
            radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%);
        background-size: 20px 21px, 36px 35px, 36px 35px, 36px 35px;
        background-position: 51px 30px, 95px 416px, 8px 762px, 555px 836px;
    }

    .genie-section__head {
        max-width: 638px;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        padding-left: 60px;
        padding-right: 30px;
    }

    .genie-section__head-text {
        flex: 0 1 257px;
    }

    .genie-section__title {
        max-width: 257px;
        text-align: left;
    }

    .genie-section__stat {
        position: static;
        flex: none;
        width: auto;
        min-height: 0;
        margin-top: 0;
    }

    .genie-section__head > .genie-section__stat--image {
        align-self: flex-start;
        margin-top: 24px;
    }

    .genie-section__items {
        margin-top: 60px;
        padding-left: 0;
        grid-template-columns: repeat(2, 239px);
        justify-content: center;
        column-gap: 40px;
        row-gap: 50px;
    }

    .genie-section__item {
        width: 239px;
        height: 160px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
    }

    .genie-section__number {
        left: -18px;
    }

    .genie-section__item-title {
        width: 239px;
    }

    .genie-section__link-graphic {
        order: -1;
    }

    .genie-section::before {
        background-size: 947.18% auto;
        background-position: 51.44% 92.83%;
    }

    .genie-section__ellipse {
        top: -439px;
        z-index: -1;
    }
}

@media (max-width: 767px) {
    .elementor-element-geniewrap.e-con {
        padding-inline: 40px;
    }

    .elementor-element-populated .elementor-element-geniewrap.e-con {
        padding-inline: 30px;
    }

    .genie-section {
        padding: 40px 0;
    }

    .genie-section::after {
        background-image:
            radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1) 96%, rgba(255, 255, 255, 0) 100%);
        background-size: 20px 21px, 20px 21px, 20px 21px;
        background-position: 230px 235px, 266px 289px, 256px 735px;
    }

    .genie-section__inner {
        padding-left: 30px;
        padding-right: 30px;
    }

    .genie-section__head {
        max-width: none;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding-left: 0;
        padding-right: 0;
    }

    .genie-section__head-text {
        flex: none;
        width: 100%;
    }

    .genie-section__title {
        max-width: none;
        text-align: center;
        font-size: 24px;
        line-height: 28px;
    }

    .genie-section__stat-caption {
        font-size: 32px;
        line-height: 34px;
    }

    .genie-section__stat--image {
        align-items: center;
    }

    .genie-section__head > .genie-section__stat--image {
        align-self: center;
        margin-top: 0;
    }

    .genie-section__stat-image {
        width: 235px;
        height: 191px;
    }

    /* No fixed slot wrappers on 375: the desktop and tablet widths don't fit. */
    .genie-section__items {
        grid-template-columns: 1fr;
        justify-content: stretch;
        column-gap: 0;
        row-gap: 60px;
        margin-top: 30px;
        padding-left: 0;
        margin-right: -4px;
    }

    .genie-section__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: auto;
        height: auto;
    }

    .genie-section__item + .genie-section__item::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -30px;
        border-top: 1px solid var(--grey-border);
        opacity: 0.1;
    }

    .genie-section__number {
        left: -18px;
        top: -10px;
    }

    .genie-section__item-title {
        position: static;
        top: auto;
        width: auto;
        font-size: 18px;
        line-height: 25px;
    }

    .genie-section__link-graphic {
        display: none;
    }

    .genie-section__inner > .genie-section__nav {
        margin-top: 40px;
        gap: 20px;
    }

    .genie-section__label {
        font-size: 18px;
        line-height: 25px;
    }

    .genie-section::before {
        background-size: 2394.62% auto;
        background-position: 47.98% 93.87%;
        filter: none;
    }

    .genie-section__ellipse {
        top: -351px;
    }
}