/* =====================================================
   MODAL OVERLAY
===================================================== */

.modal-overlay{

    position:fixed;
    inset:0;

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

    background:rgba(3,8,12,.72);

    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.modal-overlay.active{

    opacity:1;
    visibility:visible;

}


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

.form-modal{

    width:min(92%,720px);

    max-height:90vh;

    overflow-y:auto;

    background:linear-gradient(
        180deg,
        rgba(17,22,30,.96),
        rgba(10,14,20,.98)
    );

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

    border-radius:28px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 40px rgba(46,245,155,.08);

    padding:42px;

    position:relative;

    transform:translateY(40px) scale(.95);

    transition:.35s ease;

}

.modal-overlay.active .form-modal{

    transform:translateY(0) scale(1);

}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.modal-close{

    position:absolute;

    top:22px;
    right:22px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

}

.modal-close:hover{

    background:#2EF59B;

    color:#081018;

    transform:rotate(90deg);

}


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

.modal-placeholder{

    text-align:center;

    padding:70px 20px;

}

.modal-placeholder h2{

    font-size:38px;

    margin-bottom:18px;

    color:white;

}

.modal-placeholder p{

    color:#9EA8B4;

    line-height:1.8;

    max-width:520px;

    margin:auto;

}


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

@media(max-width:768px){

.form-modal{

    width:94%;

    padding:28px;

    border-radius:22px;

}

.modal-placeholder h2{

    font-size:28px;

}

}


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

.form-header{

text-align:center;

margin-bottom:32px;

}

.form-tag{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:rgba(46,245,155,.08);

color:#2EF59B;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:18px;

}

.form-header h2{

font-size:38px;

color:white;

margin-bottom:12px;

}

.form-header p{

color:#9EA8B4;

line-height:1.7;

}


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

.progress-wrapper{

margin-bottom:38px;

}

.progress-bar{

height:8px;

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

border-radius:999px;

overflow:hidden;

margin-bottom:10px;

}

.progress-fill{

height:100%;

background:linear-gradient(
90deg,
#2EF59B,
#49FFD0
);

}

.progress-wrapper span{

font-size:14px;

color:#9EA8B4;

}


/* =====================================================
   FORM
===================================================== */

.founding-form{

display:flex;

flex-direction:column;

gap:22px;

}

.form-group{

display:flex;

flex-direction:column;

gap:10px;

}

.form-group label{

font-size:14px;

font-weight:700;

color:white;

}

.form-group input{

height:58px;

padding:0 18px;

background:#171E27;

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

border-radius:16px;

color:white;

font-size:16px;

outline:none;

transition:.25s;

}

.form-group input:focus{

border-color:#2EF59B;

box-shadow:

0 0 0 4px rgba(46,245,155,.08);

}

.form-btn{

margin-top:10px;

height:60px;

border:none;

border-radius:999px;

font-size:17px;

font-weight:700;

cursor:pointer;

background:linear-gradient(

135deg,

#2EF59B,

#55FFD4

);

color:#071015;

transition:.25s;

}

.form-btn:hover{

transform:translateY(-2px);

box-shadow:

0 15px 40px rgba(46,245,155,.28);

}


.form-select{

    height:58px;

    padding:0 18px;

    background:#171E27;

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

    border-radius:16px;

    color:white;

    font-size:16px;

    outline:none;

    width:100%;

}

.form-select:focus{

    border-color:#2EF59B;

    box-shadow:0 0 0 4px rgba(46,245,155,.08);

}


.form-textarea{

    min-height:140px;

    padding:18px;

    resize:vertical;

    background:#171E27;

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

    border-radius:16px;

    color:white;

    font-size:16px;

    outline:none;

    width:100%;

    font-family:inherit;

}

.form-textarea:focus{

    border-color:#2EF59B;

    box-shadow:0 0 0 4px rgba(46,245,155,.08);

}


/* ==========================================
   FORM ACTIONS
========================================== */

.form-actions{

    display:flex;

    gap:16px;

    margin-top:12px;

}

.form-actions .form-btn{

    flex:1;

}

.secondary-btn{

    background:transparent;

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

    color:white;

}

.secondary-btn:hover{

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

    transform:translateY(-2px);

}


@media(max-width:768px){

.form-actions{

    flex-direction:column;

}

}