/* ===============================
   Download Popup
=================================*/

.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;

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

    background:rgba(7,13,25,.72);
    backdrop-filter:blur(10px);

    padding:20px;
}

.modal-content{

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

    background:linear-gradient(
        135deg,
        rgba(46,61,104,.96),
        rgba(32,43,68,.96)
    );

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

    border-radius:26px;

    padding:40px;

    color:#fff;

    position:relative;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

    animation:popup .28s ease;
}

@keyframes popup{

    from{
        opacity:0;
        transform:translateY(20px) scale(.95);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.close{

    position:absolute;

    top:22px;
    right:24px;

    width:40px;
    height:40px;

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

    border-radius:50%;

    font-size:30px;
    font-weight:300;

    color:#cbd5e1;

    cursor:pointer;

    transition:.25s;
}

.close:hover{

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

    color:#fff;

    transform:rotate(90deg);

}

.modal-content h2{

    font-size:34px;

    font-weight:800;

    line-height:1.25;

    margin-bottom:12px;

    padding-right:50px;
}

.modal-content p{

    color:#cbd5e1;

    font-size:16px;

    line-height:1.7;

    margin-bottom:30px;
}

.modal-content label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#e5e7eb;
}

.modal-content input{

    width:100%;

    height:58px;

    padding:0 18px;

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

    border-radius:14px;

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

    color:#fff;

    font-size:16px;

    transition:.25s;

    margin-bottom:20px;
}

.modal-content input::placeholder{

    color:#cbd5e1;

}

.modal-content input:focus{

    outline:none;

    border-color:#3b82f6;

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

    box-shadow:0 0 0 4px rgba(59,130,246,.18);

}

.modal-content button{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        0 12px 30px rgba(37,99,235,.35);
}

.modal-content button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(37,99,235,.45);
}

.modal-content button:active{

    transform:translateY(0);

}
.privacy-note{
    display:flex;
    align-items:flex-start;
    gap:14px;

    margin:12px 0 24px;

    padding:16px 18px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
}

.privacy-icon{
    width:40px;
    height:40px;
    min-width:40px;

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

    border-radius:50%;

    background:rgba(37,99,235,.15);

    font-size:18px;
}

.privacy-text{
    flex:1;
}

.privacy-text strong{
    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:16px;
    font-weight:700;

    text-align:left;
}

.privacy-text span{
    display:block;

    color:#cbd5e1;

    font-size:14px;
    line-height:1.55;

    text-align:left;
}