/* =========================================================

   SECTION UPGRADES

========================================================= */



.section-upgrades{



    position:relative;



    overflow:hidden;



    background:#020817;



    padding:16px;



}



/* =========================================================

   CONTAINER

========================================================= */



.section-upgrades__container{



    display:grid;



    grid-template-columns:1.45fr 1fr;



    gap:14px;



    max-width:95%;



    margin:0 auto;



    align-items:start;



}



/* =========================================================

   LEFT / RIGHT

========================================================= */



.section-upgrades__left,

.section-upgrades__right{



    background:

        linear-gradient(

            180deg,

            rgba(6,18,48,0.96),

            rgba(4,13,35,0.98)

        );



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



    border-radius:16px;



    padding:14px;



    position:relative;



    overflow:hidden;



}



/* =========================================================

   TITLE

========================================================= */



.section-upgrades__title{



    color:#ffffff;



    font-size:14px;



    font-weight:700;



    margin-bottom:14px;



    line-height:1.3;



}



/* =========================================================

   GRID

========================================================= */



.section-upgrades__grid{



    display:grid;



    grid-template-columns:repeat(3,minmax(0,1fr));



    gap:12px;



}



/* =========================================================

   CARD

========================================================= */



.section-upgrades__card{



    min-height:118px;



    border-radius:14px;



    background:

        linear-gradient(

            180deg,

            rgba(8,24,60,0.95),

            rgba(5,17,45,0.98)

        );



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



    padding:14px;



    display:flex;



    align-items:flex-start;



    gap:12px;



    transition:0.2s ease;



}



.section-upgrades__card:hover{



    border-color:rgba(59,130,246,0.22);



    transform:translateY(-1px);



}



/* =========================================================

   CARD ICON

========================================================= */



.section-upgrades__card-icon{



    width:54px;

    height:54px;



    flex-shrink:0;



    display:flex;



    align-items:center;



    justify-content:center;



}



.section-upgrades__card-icon img{



    width:100%;



    height:auto;



    display:block;



    object-fit:contain;



}



/* =========================================================

   CARD CONTENT

========================================================= */



.section-upgrades__card-content{



    flex:1;



}



.section-upgrades__card-content h3{



    color:#ffffff;



    font-size:13px;



    line-height:1.45;



    font-weight:700;



    margin-bottom:8px;



}



.section-upgrades__card-content p{



    color:rgba(255,255,255,0.68);



    font-size:11px;



    line-height:1.9;



}



/* =========================================================

   STATUS LIST

========================================================= */



.section-upgrades__status-list{



    display:flex;



    flex-direction:column;



    gap:10px;



    margin-bottom:12px;



}



/* =========================================================

   STATUS ITEM

========================================================= */



.section-upgrades__status-item{



    border-radius:12px;



    background:

        linear-gradient(

            180deg,

            rgba(8,24,60,0.95),

            rgba(5,17,45,0.98)

        );



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



    padding:12px 14px;



    display:grid;



    grid-template-columns:165px 1fr 132px;



    gap:14px;



    align-items:center;



}



/* =========================================================

   STATUS LEFT

========================================================= */



.section-upgrades__status-left{



    display:flex;



    align-items:center;



    gap:12px;



}



.section-upgrades__status-icon{



    width:40px;

    height:40px;



    border-radius:10px;



    background:

        linear-gradient(

            180deg,

            rgba(37,99,235,0.22),

            rgba(37,99,235,0.08)

        );



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



}



.section-upgrades__status-icon svg{



    width:18px;

    height:18px;



    color:#3b82f6;



    stroke-width:2;



}



.section-upgrades__status-text strong{



    display:block;



    color:#ffffff;



    font-size:12px;



    font-weight:700;



    margin-bottom:3px;



}



.section-upgrades__status-text span{



    color:rgba(255,255,255,0.65);



    font-size:11px;



    line-height:1.5;



}



/* =========================================================

   STATUS CENTER

========================================================= */



.section-upgrades__status-label{



    display:flex;



    align-items:center;



    justify-content:space-between;



    margin-bottom:6px;



}



.section-upgrades__status-label span{



    color:rgba(255,255,255,0.70);



    font-size:11px;



}



.section-upgrades__status-label strong{



    color:#ffffff;



    font-size:11px;



    font-weight:700;



}



.section-upgrades__progress{



    width:100%;



    height:7px;



    border-radius:999px;



    overflow:hidden;



    background:rgba(255,255,255,0.08);



}



.section-upgrades__progress-bar{



    height:100%;



    border-radius:999px;



}



.section-upgrades__progress-bar--orange{



    background:

        linear-gradient(

            90deg,

            #ff9c3a,

            #ffb14b

        );



}



.section-upgrades__progress-bar--green{



    background:

        linear-gradient(

            90deg,

            #42d392,

            #67e8a5

        );



}



.section-upgrades__progress-bar--yellow{



    background:

        linear-gradient(

            90deg,

            #fbbf24,

            #f59e0b

        );



}



/* =========================================================

   STATUS RIGHT

========================================================= */



.section-upgrades__status-right{



    display:flex;



    flex-direction:column;



    gap:4px;



}



.section-upgrades__status-right strong{



    color:#4ade80;



    font-size:11px;



    font-weight:700;



    line-height:1.4;



}



.section-upgrades__status-warning{



    color:#fbbf24 !important;



}



.section-upgrades__status-right span{



    color:#dbeafe;



    font-size:11px;



    line-height:1.5;



}



/* =========================================================

   CTA

========================================================= */



.section-upgrades__cta{



    border-radius:14px;



    background:

        linear-gradient(

            90deg,

            rgba(11,30,78,1),

            rgba(16,48,126,1)

        );



    border:1px solid rgba(59,130,246,0.20);



    padding:14px;



    display:flex;



    align-items:center;



    justify-content:space-between;



    gap:18px;



}



.section-upgrades__cta-left{



    display:flex;



    align-items:center;



    gap:14px;



}



.section-upgrades__cta-icon{



    width:46px;

    height:46px;



    border-radius:999px;



    border:2px solid #4f7cff;



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



}



.section-upgrades__cta-icon svg{



    width:20px;

    height:20px;



    color:#ffffff;



}



.section-upgrades__cta-content strong{



    display:block;



    color:#ffffff;



    font-size:14px;



    font-weight:700;



    margin-bottom:4px;



}



.section-upgrades__cta-content p{



    color:rgba(255,255,255,0.72);



    font-size:11px;



    line-height:1.7;



    max-width:420px;



}



.section-upgrades__cta-button{



    height:42px;



    padding:0 18px;



    border-radius:10px;



    background:#2563eb;



    color:#ffffff;



    text-decoration:none;



    display:inline-flex;



    align-items:center;



    gap:10px;



    flex-shrink:0;



    font-size:12px;



    font-weight:600;



    transition:0.2s ease;



}



.section-upgrades__cta-button:hover{



    background:#3b82f6;



}



.section-upgrades__cta-button svg{



    width:16px;

    height:16px;



}



/* =========================================================

   RESPONSIVE

========================================================= */



@media(max-width:1200px){



    .section-upgrades__container{



        grid-template-columns:1fr;



    }



}



@media(max-width:900px){



    .section-upgrades__grid{



        grid-template-columns:1fr 1fr;



    }



    .section-upgrades__status-item{



        grid-template-columns:1fr;



    }



    .section-upgrades__cta{



        flex-direction:column;



        align-items:flex-start;



    }



}



@media(max-width:640px){



    .section-upgrades{



        padding:14px;



    }



    .section-upgrades__grid{



        grid-template-columns:1fr;



    }



    .section-upgrades__card{



        min-height:auto;



    }



}