/*====================================================
            PLATFORM POPUP
====================================================*/

.platform-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.platform-modal.active{

    display:flex;

}

.platform-box{

    width:800px;

    max-width:92%;

    background:#101827;

    border-radius:18px;

    padding:30px;

    text-align:center;

    position:relative;

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

}

#platformClose{

    position:absolute;

    right:18px;

    top:12px;

    font-size:32px;

    color:white;

    cursor:pointer;

}

.platform-box h2{

    color:white;

    margin-bottom:20px;

}

.platform-box img{

    display:block;

    width:100%;

    height:auto;

    border-radius:12px;

    margin-bottom:20px;

}

.platform-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:#12344f;

    color:#22d3ee;

    font-weight:700;

    margin-bottom:20px;

}

.platform-box p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:25px;

}

.platform-highlights{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    margin-bottom:25px;

}

.platform-highlights span{

    background:#182334;

    color:white;

    padding:8px 14px;

    border-radius:30px;

}

.platform-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

}

.platform-modal{
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.platform-modal.active{
    opacity:1;
    visibility:visible;
}

.platform-box{
    transform:scale(.9);
    transition:.25s ease;
}

.platform-modal.active .platform-box{
    transform:scale(1);
}

.platform-box img{
    transition:.35s;
}

.platform-box img:hover{
    transform:scale(1.02);
}

.footer-bottom{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

    padding-top:18px;

    font-size:14px;

    color:#9fb3c8;

    text-align:center;

}

.footer-bottom strong{

    color:#ffffff;

    font-weight:700;

}

.footer-update-box{

    margin:20px 0 24px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.footer-update-box div{

    padding:12px 14px;

    background:#101a2a;

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

    border-radius:10px;

    color:#cbd5e1;

    font-size:14px;

    transition:.25s;

}

.footer-update-box div:hover{

    border-color:#22d3ee;

    transform:translateX(4px);

}