/* =========================================================
   BOOSTPME — AI NETWORK
========================================================= */

.boost-network-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(82,108,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(255,82,154,.10),
            transparent 31%
        ),
        #f8f7f4;

    color: #17151c;
}


/*
 * Sécurité absolue :
 * aucune ancienne grande image
 * ne peut apparaître ici.
 */

.boost-network-section img {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}


.boost-network-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}

.boost-network-glow.glow-one {
    width: 420px;
    height: 420px;

    left: -190px;
    top: -150px;

    background:
        rgba(82,108,255,.15);
}

.boost-network-glow.glow-two {
    width: 450px;
    height: 450px;

    right: -210px;
    bottom: -180px;

    background:
        rgba(255,82,154,.12);
}


/* HEADING */

.boost-network-heading {
    position: relative;

    z-index: 5;

    max-width: 900px;

    margin-bottom: 70px;
}

.boost-network-heading > span {
    display: block;

    margin-bottom: 17px;

    color: #918a95;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.boost-network-heading h2 {
    margin: 0;

    font-size:
        clamp(
            50px,
            6vw,
            88px
        );

    line-height: .93;

    letter-spacing: -4px;

    font-weight: 500;
}

.boost-network-heading h2 em {
    display: block;

    font-style: normal;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #526eff,
            #965dff,
            #ff5c9d,
            #ff9750
        );

    -webkit-background-clip: text;

    background-clip: text;
}

.boost-network-heading p {
    max-width: 570px;

    margin-top: 22px;

    color: #756f79;

    line-height: 1.7;
}


/* MAP */

.boost-network-map {
    position: relative;

    z-index: 3;

    height: 520px;

    max-width: 1050px;

    margin: auto;

    overflow: hidden;

    border:
        1px solid
        rgba(30,25,40,.07);

    border-radius: 32px;

    background:
        radial-gradient(
            circle at center,
            rgba(116,84,255,.09),
            transparent 27%
        ),
        rgba(255,255,255,.72);

    box-shadow:
        0 40px 100px
        rgba(40,30,60,.07);
}


/* GRID */

.boost-network-map::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .30;

    background-image:
        linear-gradient(
            rgba(70,60,85,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(70,60,85,.05) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;
}


/* CORE */

.network-core {
    position: absolute;

    z-index: 6;

    left: 50%;
    top: 50%;

    width: 150px;
    height: 150px;

    transform:
        translate(-50%, -50%);
}

.network-core-content {
    position: absolute;

    inset: 27px;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #526eff,
            #955dff,
            #ff5c9d
        );

    box-shadow:
        0 25px 60px
        rgba(112,80,255,.30);
}

.network-core-content small {
    color:
        rgba(255,255,255,.57);

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1px;
}

.network-core-content strong {
    margin: 3px 0;

    color: #fff;

    font-size: 29px;
}

.network-core-content span {
    color: #d9ffb7;

    font-size: 5px;

    font-weight: 800;
}


/* RINGS */

.network-ring {
    position: absolute;

    border:
        1px solid
        rgba(124,90,255,.22);

    border-radius: 50%;

    animation:
        networkRing
        3.2s
        ease-in-out
        infinite;
}

.ring-1 {
    inset: 14px;
}

.ring-2 {
    inset: 0;

    animation-delay: .6s;
}

.ring-3 {
    inset: -14px;

    animation-delay: 1.2s;
}

@keyframes networkRing {

    0%,
    100% {
        opacity: .16;

        transform:
            scale(.94);
    }

    50% {
        opacity: .8;

        transform:
            scale(1.07);
    }

}


/* POINTS */

.network-point {
    position: absolute;

    z-index: 5;

    width: 155px;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px;

    border:
        1px solid
        rgba(30,25,40,.07);

    border-radius: 17px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 15px 38px
        rgba(40,32,60,.06);
}

.network-point > i {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #705eff;

    box-shadow:
        0 0 12px
        rgba(112,94,255,.45);
}

.network-point small {
    display: block;

    color: #a099a3;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1px;
}

.network-point strong {
    display: block;

    margin-top: 4px;

    color: #302c34;

    font-size: 11px;
}


.point-direction {
    left: 7%;
    top: 12%;
}

.point-operations {
    right: 7%;
    top: 12%;
}

.point-suppliers {
    left: 7%;
    bottom: 12%;
}

.point-stock {
    right: 7%;
    bottom: 12%;
}

.point-documents {
    left: 18%;
    top: 43%;
}

.point-workflow {
    right: 18%;
    top: 43%;
}


.point-operations > i {
    background: #00ab91;
}

.point-suppliers > i {
    background: #ff8853;
}

.point-stock > i {
    background: #ff5c9d;
}

.point-documents > i {
    background: #9b5eff;
}

.point-workflow > i {
    background: #5878ff;
}


/* CONNECTIONS */

.network-line {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(116,87,255,.40),
            rgba(116,87,255,.02)
        );
}

.line-1 {
    width: 375px;
    transform: rotate(-149deg);
}

.line-2 {
    width: 375px;
    transform: rotate(-31deg);
}

.line-3 {
    width: 375px;
    transform: rotate(149deg);
}

.line-4 {
    width: 375px;
    transform: rotate(31deg);
}

.line-5 {
    width: 255px;
    transform: rotate(180deg);
}

.line-6 {
    width: 255px;
}


/* SIGNALS */

.network-pulse {
    position: absolute;

    z-index: 7;

    width: 8px;
    height: 8px;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    background: #fff;

    border: 2px solid #795fff;

    box-shadow:
        0 0 14px
        rgba(121,95,255,.65);
}

.pulse-1 {
    animation:
        networkPulseOne
        4.8s
        infinite;
}

.pulse-2 {
    animation:
        networkPulseTwo
        5.4s
        1s
        infinite;
}

.pulse-3 {
    animation:
        networkPulseThree
        5.7s
        2s
        infinite;
}

@keyframes networkPulseOne {

    0% {
        opacity: 0;
        transform: translate(0,0);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(-340px,-175px);
    }

}

@keyframes networkPulseTwo {

    0% {
        opacity: 0;
        transform: translate(0,0);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(340px,175px);
    }

}

@keyframes networkPulseThree {

    0% {
        opacity: 0;
        transform: translate(0,0);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(250px,0);
    }

}


/* FLOW */

.network-flow {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;

    color: #99929c;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.network-flow i {
    color: #9461e3;

    font-style: normal;
}


@media(max-width:900px) {

    .boost-network-map {
        height: auto;

        display: grid;

        grid-template-columns:
            repeat(2,1fr);

        gap: 12px;

        padding: 25px;
    }

    .network-core {
        position: relative;

        left: auto;
        top: auto;

        grid-column:
            1 / 3;

        margin: 25px auto;

        transform: none;
    }

    .network-point {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: auto;
    }

    .network-line,
    .network-pulse {
        display: none;
    }

}


@media(max-width:600px) {

    .boost-network-section {
        padding: 85px 0;
    }

    .boost-network-map {
        grid-template-columns: 1fr;
    }

    .network-core {
        grid-column: 1;
    }

}