:root {--primary:#005cb9;--primary-dark:#004285;--headline:#020202;--text:#8893A5;--secondary:#1D1D1D;--white:#FFFFFF;--bg:#FFFFFF;--error:#FF5C5C;--border:#DDEAF3;}
* {margin:0;padding:0;box-sizing:border-box;text-decoration:none;font-family:system-ui;}
*::selection {background:var(--primary);color:white;}
body {font-size:16px;font-family:system-ui;height:100vh;padding:1rem;display:flex;justify-content:center;align-items:center;background:var(--bg);color:var(--text);}
.two-column-layout {display:flex;gap:0.5rem;background:var(--bg);width:100%;position:relative;align-items:center;height:100vh;}
.two-column-layout .left {display:flex;flex-direction:column;flex:1;}
.socials-row {display:flex;gap:1rem;}
.socials-row img {width:1.5rem;height:1.5rem;}
.footer {margin-top:auto;text-align:center;}
.socials-row>a {padding:0.5rem;border-radius:0.5rem;width:100%;min-height:3rem;display:flex;gap:0.75rem;justify-content:center;align-items:center;text-decoration:none;font-size:13px;color:var(--secondary);border:1px solid var(--border);background:var(--white);transition:all .3s;font-weight:500;}
.socials-row>a:hover {border:1px solid var(--primary);}
.login-welcome-row {margin-bottom:1rem;display:flex;flex-direction:column;gap:1rem;text-align:center;}
.login-welcome-row h1 {color:var(--headline);font-weight: 400;}
.welcome-message {max-width:24rem;}
.logo {height:5rem;margin:0 auto;}
.lines {margin:1rem 0;display:flex;gap:1rem;font-weight:bold;align-items:center;}
.line {height:2px;flex:1;background:var(--border);}
.text-field {display:flex;flex-direction:column;gap:0.5rem;}
.text-field input {color:var(--secondary);width:100%;border:1px solid var(--border);min-height:3rem;letter-spacing:.03rem;outline:none;background:var(--white);transition:.25s;border-radius:1rem;text-indent:1.25rem;}
.text-field label {color:var(--text);}
.text-field input:user-invalid {background:var(--white);color:var(--error);border:1px solid var(--error);}
.error-message {display:none;}
.text-field input:user-invalid~.error-message {display:block;margin-top:0.25rem;font-size:0.8rem;color:var(--error);}
.text-field input:focus {border:1px solid var(--primary);box-shadow:rgba(99,99,99,0.2) 0px 1px 4px 0px;}
.checkbox-field {display:flex;align-items:center;margin-top:1rem;gap:1rem;}
.checkbox-field input {width:1.3rem;height:1.3rem;}
.my-form {display:flex;flex-direction:column;margin:0 auto;position:relative;gap:1rem;background:var(--white);width:100%;max-width:32rem;padding:3rem 2rem;border-radius:2rem;border:1px solid var(--border);height:fit-content;}
.my-form__button {background:var(--primary);color:white;border:none;margin-top:1rem;line-height:3.125rem;outline:none;font-size:15px;font-weight:500;min-height:3.125rem;border-radius:0.5rem;}
.my-form__button:hover {background:var(--primary-dark);}
.my-form__actions {display:flex;flex-direction:column;text-align:center;justify-content:space-between;gap:1rem;margin-top:0.5rem;}
.my-form__actions a {color:var(--primary);font-weight:600;text-decoration:none;}
.my-form__actions a:hover {text-decoration:underline;}
.right {display:none;padding:1rem 0;flex:1;overflow:hidden;height:100%;}
.right .box {background:var(--primary);border-radius:2rem;width:100%;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#FCFCFE;text-align:left;}
.right .box h2 {max-width:30rem;font-size:1.75rem;}
.right .box p {font-size:1.25rem;margin:0.5rem 0 2rem;text-align: center;}
.mockup {margin:0 auto;object-fit:cover;margin-bottom:1rem;}
@media (min-width:960px) {.right {display:flex;justify-content:center;}}
.logos {display:flex;margin-left:1rem;gap:1rem;flex-direction:row;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1),rgba(0,0,0,0));-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:left;}
.logos img {max-width:5rem;width:100%;object-fit:contain;filter:brightness(0) invert(1);}
@media (max-width:1025px) {
    .right {display:none;}
    .my-form {max-width:100%;padding:15px;}
        .socials-row {gap:10px;}
   
}