:root {
  --navy: #0a1628;
  --navy-mid: #112240;
  --teal: #00bfa5;
  --teal-light: #1de9b6;
  --gold: #f5c842;
  --cream: #fdf6e3;
  --white: #ffffff;
  --muted: #8892a4;
  --card-bg: #0d1f3c;
  --border: rgba(0, 191, 165, 0.2);
  --text: #ccd6f6;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', sans-serif;
}

body{
    background:linear-gradient(135deg,var(--navy), var(--navy-mid));
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    overflow-x:hidden;
}

/* BACKGROUND GLOW */

body::before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(0,191,165,0.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
    filter:blur(40px);
}

body::after{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(245,200,66,0.08);
    border-radius:50%;
    bottom:-100px;
    right:-100px;
    filter:blur(40px);
}

/* CONTAINER */

.signup-container{
    width:100%;
    max-width:1200px;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:rgba(13,31,60,0.95);
    border:1px solid var(--border);
    border-radius:30px;
    overflow:hidden;
    backdrop-filter:blur(10px);
    box-shadow:0 20px 60px rgba(0,0,0,0.35);
    position:relative;
    z-index:2;
}

/* LEFT SIDE */

.left-side{
    padding:70px 60px;
    background:linear-gradient(160deg, rgba(0,191,165,0.08), transparent);
    position:relative;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:50px;
}

.logo-icon{
    width:60px;
    height:60px;
    background:rgba(0,191,165,0.12);
    border:1px solid var(--border);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--teal-light);
    font-size:24px;
}

.logo h1{
    color:var(--white);
    font-size:26px;
}

.logo p{
    color:var(--muted);
    margin-top:3px;
}

.left-side h2{
    color:var(--white);
    font-size:42px;
    line-height:1.2;
    margin-bottom:20px;
}

.left-side .desc{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:40px;
    font-size:15px;
}

/* FEATURES */

.features{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.feature-box{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    padding:18px;
    border-radius:18px;
}

.feature-icon{
    min-width:50px;
    height:50px;
    border-radius:14px;
    background:rgba(0,191,165,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--teal-light);
}

.feature-box h4{
    color:var(--white);
    margin-bottom:5px;
}

.feature-box p{
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

/* RIGHT SIDE */

.right-side{
    padding:60px;
    background:rgba(10,22,40,0.7);
}

.form-header{
    margin-bottom:35px;
}

.form-header h2{
    color:var(--white);
    font-size:32px;
    margin-bottom:10px;
}

.form-header p{
    color:var(--muted);
    line-height:1.7;
}

/* FORM */

.signup-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.input-group{
    display:flex;
    flex-direction:column;
}

.input-group.full{
    grid-column:span 2;
}

.input-group label{
    color:var(--text);
    margin-bottom:10px;
    font-size:14px;
    font-weight:500;
}

.input-box{
    position:relative;
}

.input-box i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
}

.input-box input,
.input-box select{
    width:100%;
    height:58px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:0 18px 0 50px;
    color:var(--white);
    outline:none;
    transition:0.3s;
    font-size:15px;
}


.input-box select{
    background: var(--card-bg) !important;
    color: var(--white) !important;
}

.input-box select option{
    background: var(--navy);
    color: var(--white);
}


.input-box input:focus,
.input-box select:focus{
    border-color:var(--teal);
    box-shadow:0 0 0 4px rgba(0,191,165,0.08);
}

.input-box input::placeholder{
    color:var(--muted);
}

/* PASSWORD TOGGLE */

.toggle-password{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:var(--muted);
}

/* CHECKBOX */

.checkbox-area{
    grid-column:span 2;
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:5px;
}

.checkbox-area a{
    text-decoration:none;
}

.checkbox-area input{
    margin-top:4px;
}

.checkbox-area p{
    color:var(--muted);
    line-height:1.6;
    font-size:14px;
}

.checkbox-area span{
    color:var(--teal-light);
    cursor:pointer;
}

/* BUTTON */

.signup-btn{
    grid-column:span 2;
    height:60px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,var(--teal), var(--teal-light));
    color:var(--navy);
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s;
    margin-top:10px;
}

.signup-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,191,165,0.25);
}

/* FOOTER */

.form-footer{
    margin-top:25px;
    text-align:center;
}

.form-footer p{
    color:var(--muted);
}

.form-footer a{
    color:var(--teal-light);
    text-decoration:none;
    font-weight:600;
}

/* RESPONSIVE */

@media(max-width:1000px){

    .signup-container{
        grid-template-columns:1fr;
    }

    .left-side{
        display:none;
    }

}

@media(max-width:700px){

    .right-side{
        padding:40px 25px;
    }

    .signup-form{
        grid-template-columns:1fr;
    }

    .input-group.full,
    .checkbox-area,
    .signup-btn{
        grid-column:span 1;
    }

    .form-header h2{
        font-size:28px;
    }

}