*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
}
:root{
    --primary-color: #2563eb;
    --secondary-color: #10b981;
    --hover: #1d4ed8;
    --accent: #38bdf8;
    --background: #f8fafc;
    --dark: #0f172a;
    --cards: #ffffff;
    --text: #64748b;
    --border: #e2e8f0;
    --sections: #f1f5f9;
    --headers: #1e293b;
    --small-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    --medium-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    --large-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
    --border-buttons: 12px;
    --border-cards: 20px;
    --border-inputs: 14px;
    --hero-gradient: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
    --growth-gradient: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
    --premium-gradient: linear-gradient(90deg, #0f172a 0%, #2563eb 100%);
}
.blue{
    color: var(--primary-color);
}
.green{
    color: var(--secondary-color);
}
.accent{
    color: var(--accent);
}
h3{
    font-size: 32px;
}
p{
    font-size: 16px;
}
a{
    text-decoration: none;
    color: var(--accent);
}
a:hover{
    color: var(--hover);
}
body{
    display: flex;
    gap:10px;
    padding: 10px;
    min-height: 100vh;
    justify-content: center;
    background: var(--background);

}
button{
    padding: 10px 64px;
    gap: 10px;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    border: none;
    font-size: 16px;
    background: var(--primary-color);
    color: white;
    transition: all 0.3s ease-in-out;
}
button:hover{
    background: var(--hover);
    transition: all 0.3s ease-in-out;
}



/* left side */
.left{
    border-radius: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--cards);
    
}
.logo{
    display: flex;
    align-items: center;
}
.logo img{
    width: 64px;
    height: 64px;
}
form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 448px;
}
.input-group{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px
}
input{
    border-radius: 14px;
    padding: 10px;
    font-size: 14px;
    border: none;
    box-shadow: var(--small-shadow);

}
.passwords{
    width: 100%;
    display: flex;
    gap: 10px;
}
.terms{
    display: flex;
    gap: 10px;
}
.terms{
    justify-content: center;
}
.text{
    text-align: center
}
.sub{
    max-width: 464px;
    color: var(--text);
}
.input-field{
    display: flex;
    justify-content: center;
    gap: 10px;
}
.input-field input{
    width: 60px;
    height: 70px;
    text-align: center;
    font-size: 24px;
}
.input-field input::-webkit-inner-spin-button,
.input-field input::-webkit-outer-spin-button{
    display: none;
}



/* right side */
.right{
    border-radius: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--hero-gradient);
    padding: 10px;
}
.img{
    object-fit: contain;
}
.img img{
    max-width: 100%;
    height: auto;
    max-height: 400px;
}

.moto{
    background: var(--accent);
    padding: 16px;
    border-radius: 14px;
    color: var(--primary-color);
    text-align: center;
    width: 80%;
}




@media screen and (max-width: 768px){
    .right{
        display: none;
    }
    body{
        padding: 10px;
        justify-content: center;
        align-items: center;
    }
    .left{
        padding: 24px 16px;
        gap: 12px;
        max-width: 520px;
        margin: 0 auto;
    }
    .logo img{
        width: 48px;
        height: 48px;
    }
    h3{
        font-size: 22px;
    }
    p{
        font-size: 14px;
    }
    form{
        max-width: 420px;
        width: 100%;
    }
    .passwords{
        flex-direction: column;
    }
    .input-field input{
        width: 44px;
        height: 56px;
        font-size: 20px;
    }
    button{
        padding: 10px 24px;
    }
    .sub{
        width: 100%;
    }
}

@media screen and (max-width: 480px){
    body{
        padding: 6px;
    }
    .left{
        padding: 20px 12px;
        border-radius: 14px;
    }
    h3{
        font-size: 18px;
    }
    form{
        gap: 14px;
    }
}