:root{

    --rm-bg:#080814;
    --rm-panel:#121127;

    --rm-primary:#8b5cf6;
    --rm-primary2:#6d3cf0;

    --rm-border:#43306e;

    --rm-text:#ffffff;
    --rm-text2:#b7b5c9;

}

.roadmap-wrapper{

    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

    padding:80px 30px;

    background:radial-gradient(circle at center,#17142d 0%,#090913 70%);

    overflow:hidden;

}

.roadmap-circle{

    position:relative;

    width:920px;
    height:920px;

    max-width:100%;

}

.roadmap-circle::before{

    content:"";

    position:absolute;

    inset:140px;

    border-radius:50%;

    border:1px solid rgba(139,92,246,.18);

}

.roadmap-circle::after{

    content:"";

    position:absolute;

    inset:65px;

    border-radius:50%;

    border:1px solid rgba(139,92,246,.08);

}

.roadmap-center{

    position:absolute;

    left:50%;
    top:50%;

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

    width:340px;
    height:340px;

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

    z-index:30;

}

.roadmap-center img{

    width:100%;
    filter:

        drop-shadow(0 20px 30px rgba(0,0,0,.5))
        drop-shadow(0 0 35px rgba(139,92,246,.35));

}

.roadmap-step{

    position:absolute;

    width:190px;

    text-align:center;

    z-index:40;

    color:white;

}

.step-number{

    font-size:42px;

    font-weight:700;

    color:#b46fff;

    margin-bottom:16px;

    letter-spacing:2px;

}

.step-circle{

    width:108px;
    height:108px;

    margin:auto;

    border-radius:50%;

    display:flex;

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

    position:relative;

    background:

        radial-gradient(circle at 30% 30%,
        rgba(139,92,246,.18),
        #14132a 70%);

    border:2px solid rgba(139,92,246,.30);

    backdrop-filter:blur(10px);

    transition:.4s;

}

.step-circle::before{

    content:"";

    position:absolute;

    inset:12px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

}

.step-icon{

    font-size:42px;

    filter:grayscale(100%);

    opacity:.8;

    transition:.4s;

}

.step-text{

    margin-top:18px;

}

.step-text strong{

    display:block;

    font-size:24px;

    line-height:1.2;

    color:white;

}

.step-text span{

    display:block;

    margin-top:6px;

    color:#b9b7c8;

    line-height:1.45;

    font-size:17px;

}

.roadmap-svg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:2;

    overflow:visible;

}

.roadmap-path{

    fill:none;

    stroke:#5b2dc7;

    stroke-width:2;

    opacity:.20;

}

.roadmap-progress{

    fill:none;

    stroke:#8b5cf6;

    stroke-width:5;

    stroke-linecap:round;

    filter:drop-shadow(0 0 12px #8b5cf6);

}

.roadmap-orb{

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#b56dff;

    box-shadow:

        0 0 15px #b56dff,
        0 0 30px #8b5cf6,
        0 0 60px #8b5cf6;

    z-index:100;

}

.step-circle:hover{

    border-color:#9d6eff;

    transform:scale(1.05);

    box-shadow:

        0 0 15px rgba(139,92,246,.35),
        0 0 35px rgba(139,92,246,.35);

}

.step-circle:hover .step-icon{

    opacity:1;

    transform:scale(1.08);

}

@media(max-width:980px){

    .roadmap-circle{

        width:760px;
        height:760px;

    }

    .roadmap-center{

        width:250px;
        height:250px;

    }

}

@media(max-width:700px){

    .roadmap-wrapper{

        transform:scale(.78);

        transform-origin:top center;

        padding-bottom:0;

    }

}


.roadmap-segments path{

    fill:none;

    stroke:#3f2b73;

    stroke-width:4;

    opacity:.25;

    transition:.4s;

}

.roadmap-segments path.active{

    stroke:#9d73ff;

    opacity:1;

    filter:url(#roadGlow);

}

.roadmap-dots circle{

    fill:#2d224d;

}

.roadmap-dots circle.active{

    fill:#9d73ff;

    filter:url(#roadGlow);

}

.roadmap-step.active .step-circle{

    border-color:#9d73ff;

    background:

    radial-gradient(circle,#7f5cff 0%,#201b3d 70%);

    box-shadow:

    0 0 15px rgba(157,115,255,.6),

    0 0 35px rgba(157,115,255,.5),

    0 0 70px rgba(157,115,255,.3);

}

.roadmap-step.active .step-icon{

    opacity:1;

    filter:none;

    transform:scale(1.12);

}

.roadmap-step.active .step-number{

    color:white;

}

.roadmap-step.active strong{

    color:white;

}