/* =========================================
   HYBRIDE UNIVERSE ROADMAP
========================================= */


.roadmap {

    width:100%;
    max-width:1100px;

    margin:auto;

    display:flex;
    flex-direction:column;

    gap:50px;

}


/* =========================================
   HEADER
========================================= */


.roadmap-header {

    text-align:center;

}


.roadmap-header h2 {

    margin:0;

    font-size:var(--font-lg);

    color:var(--color-white);

}


.roadmap-header p {

    margin-top:15px;

    color:var(--color-silver);

    font-size:var(--font-sm);

}


/* =========================================
   PROGRESS
========================================= */


.roadmap-progress {

    margin:35px auto 0;

    width:80%;
    max-width:600px;

}


.progress-bar {

    height:12px;

    background:var(--color-marine);

    border-radius:50px;

    overflow:hidden;

    border:1px solid var(--color-shadow);

}


.progress-bar span {

    display:block;

    width:35%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        var(--color-indigo),
        var(--color-purple),
        var(--color-cyan)
    );

}


.roadmap-progress small {

    display:block;

    margin-top:10px;

    color:var(--color-gray);

}


/* =========================================
   PHASE
========================================= */


.roadmap-phase {

    position:relative;

}


.phase-header {

    text-align:center;

    margin-bottom:40px;

}


.phase-header h1 {

    margin:0;

    font-size:var(--font-md);

    color:var(--color-white);

}


.phase-header p {

    color:var(--color-gray);

}



/* =========================================
   TIMELINE
========================================= */


.timeline {

    position:relative;

    display:flex;

    flex-direction:column;

    gap:35px;

}


.timeline::before {

    content:"";

    position:absolute;

    left:24px;

    top:0;

    bottom:0;

    width:2px;

    background:

    linear-gradient(
        180deg,
        var(--color-purple),
        var(--color-cyan)
    );

}



/* =========================================
   ROADMAP ITEM
========================================= */


.roadmap-item {

    position:relative;

    padding-left:70px;

}



.timeline-dot {

    position:absolute;

    left:13px;

    top:35px;


    width:22px;

    height:22px;


    border-radius:50%;


    border:4px solid var(--color-night);


    z-index:2;

}



/* =========================================
   STATUS COLORS
========================================= */


.status-released {

    background:var(--color-success);

}


.status-confirmed {

    background:var(--color-info);

}


.status-planned {

    background:var(--color-lavender);

}


.status-delayed {

    background:var(--color-warning);

}


.status-cancelled {

    background:var(--color-error);

}



/* =========================================
   CARD
========================================= */


.roadmap-card {


    position:relative;


    display:flex;

    gap:25px;


    padding:25px;


    border-radius:20px;


    background:

    rgba(24,35,58,0.65);


    border:1px solid rgba(255,255,255,0.08);


    backdrop-filter:blur(12px);



}



/* =========================================
   ICON
========================================= */


.roadmap-icon {


    width:70px;

    height:70px;


    object-fit:contain;


    flex-shrink:0;


}



/* =========================================
   CONTENT
========================================= */


.roadmap-content {


    flex:1;

    display:flex;

    flex-direction:column;

    text-align:left;

    padding-right:110px;

}



.roadmap-status {


    position:absolute;

    top:25px;
    right:25px;


    display:inline-flex;


    padding:6px 14px;


    border-radius:50px;


    color:white;


    font-size:0.8rem;


    text-transform:uppercase;


    font-weight:bold;


}



.roadmap-content h3 {


    margin:0 0 8px;


    color:var(--color-white);


    font-size:var(--font-sm);


    text-align:left;


}



.roadmap-content p {


    margin:0 0 15px;

    text-align:left;


    color:var(--color-silver);


}



.roadmap-date {


    margin-top:auto;

    align-self:flex-start;

    text-align:left;


    color:var(--color-cyan);


    font-size:0.9rem;


}



/* =========================================
   BETA
========================================= */


.beta-phase {


    margin-top:20px;

}



.beta-card {


    padding:35px;


    text-align:center;


    border-radius:25px;


    background:

    rgba(13,19,34,0.8);


    border:

    1px solid var(--color-info);


}



.beta-card h2 {


    color:var(--color-white);


    margin:20px 0 10px;


}



.beta-card p {


    color:var(--color-silver);


}



.beta-card strong {


    display:block;


    margin-top:25px;


    color:var(--color-cyan);


    font-size:var(--font-md);


}

/* =========================================
   MOBILE RESPONSIVE
========================================= */


@media (max-width: 768px) {


    .roadmap {

        gap:35px;

    }



    .roadmap-header h2 {

        font-size:var(--font-md);

    }



    .roadmap-header p {

        font-size:0.95rem;

        padding:0 15px;

    }



    .roadmap-progress {

        width:100%;

    }



    /* Timeline kleiner */

    .timeline::before {

        left:14px;

    }



    .roadmap-item {

        padding-left:45px;

    }



    .timeline-dot {

        left:4px;

        width:20px;

        height:20px;

    }



    /* Karten */

    .roadmap-card {


        flex-direction:column;


        gap:15px;


        padding:20px;


    }



    .roadmap-content {

        padding-right:0;

        padding-top:35px;

    }



    .roadmap-icon {


        width:55px;

        height:55px;


    }



    .roadmap-content h3 {


        font-size:1.15rem;


    }



    .roadmap-content p {


        font-size:0.9rem;


    }



    .phase-header h1 {


        font-size:var(--font-md);


    }



    .beta-card {


        padding:25px 20px;


    }



    .beta-card strong {


        font-size:var(--font-sm);


    }


}



/* =========================================
   SMALL MOBILE
========================================= */


@media (max-width:420px) {


    .roadmap-card {


        padding:18px;


    }



    .roadmap-status {


        font-size:0.7rem;


        padding:5px 10px;


    }



    .roadmap-content h3 {


        font-size:1rem;


    }



    .roadmap-date {


        font-size:0.8rem;


    }


}