:root {
    --ink:#1B0033;
    --purple-700:#340261;
    --purple-800:#2A014E;
    --purple-900:#20013F;
    --purple-050:#F5F1FA;
    --purple-200:#DACCEC;
    --orange-500:#FF6633;
    --orange-600:#E8551F;
    --grey-700:#4B4655;
    --grey-400:#96909F;
    --line:#E9E4EF;
}

* { box-sizing:border-box; }
html,body { height:100%; margin:0; }

body {
    min-height:100vh;
    font-family:'IBM Plex Sans', -apple-system, Helvetica, Arial, sans-serif;
    color:var(--ink);
    background:#ffffff;
    flex-direction:row;
}

.main-content {
    display:flex;
    padding: 0;
    margin: 0;
    background: #ffffff;
}

.form-col{
    position:relative;
    overflow:hidden;
    flex:1;
    padding: clamp(40px, 6vw, 76px) clamp(32px, 5vw, 72px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color: #FCFBFE;
}

.form-content{
    position:relative;
    z-index:1;
    width:100%;
    max-width: 380px;
}

.molecule-deco{
    position:absolute;
    left:-46px;
    bottom:-40px;
    width:300px;
    height:250px;
    z-index:0;
    pointer-events:none;
}

.portal-mark{
    width: clamp(190px, 17vw, 230px);
    height:auto;
    display:block;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.heading{
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight:600;
    line-height:1.3;
    margin: 0 0 clamp(36px, 5.5vw, 52px);
    color:var(--ink);
}

.field-group{
    width:100%;
    margin-bottom: 24px;
}
.field-group label{
    display:block;
    font-size:14px;
    font-weight:500;
    color:var(--grey-700);
    margin-bottom:8px;
}
.field-wrap{
    position:relative;
}
.field-wrap input{
    width:100%;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:15px;
    color:var(--ink);
    background:var(--purple-050);
    border:1.5px solid var(--purple-200);
    border-radius:6px;
    padding: 14px 16px 14px 42px;
    outline:none;
}

.field-wrap input.has-right-icon{
    padding-right:42px;
}

.field-wrap input::placeholder{
    color:var(--grey-400);
}
.field-wrap svg{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:var(--grey-400);
    pointer-events:none;
}
.field-wrap svg.icon-left{ left:14px; }
.field-wrap svg.icon-right{ right:14px; }

.login-btn{
    width:100%;
    margin-top:8px;
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:#FFFFFF;
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--orange-500) 100%);
    border:none;
    border-radius:8px;
    padding:16px 20px;
    cursor:pointer;
    transition: filter 150ms ease, box-shadow 150ms ease;
    box-shadow:0 4px 14px -4px rgba(52,2,97,0.35);
}
.login-btn:hover{ filter:brightness(1.06); box-shadow:0 8px 20px -6px rgba(52,2,97,0.45); }
.login-btn:active{ filter:brightness(0.97); }
.login-btn:focus-visible{ outline:2px solid var(--purple-700); outline-offset:3px; }

.logo-col{
    flex:1;
    min-width:0;
    border-left:1px solid var(--line);
    padding: clamp(40px, 6vw, 76px) clamp(32px, 5vw, 72px);
    display:flex;
    align-items:center;
}

.logo-col-inner{ width:100%; }

.hero-link{
    display:inline-block;
    transition: transform 180ms ease;
}
.hero-link:hover{ transform: scale(1.035); }
.hero-link:focus-visible{ outline:2px solid var(--purple-700); outline-offset:5px; border-radius:6px; }

.hero-mark{
    width: clamp(260px, 22vw, 320px);
    height:auto;
    display:block;
    margin-bottom: clamp(30px, 4.5vw, 44px);
}

.grid-divider{
    height:1px;
    background:var(--line);
    margin: 0 0 clamp(30px, 4.5vw, 44px);
}

.logo-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(30px, 4vw, 56px);
    row-gap: clamp(32px, 4.5vw, 50px);
}
.logo-cell{
    height: clamp(64px, 7.2vw, 84px);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-decoration:none;
    color:inherit;
    transition: transform 180ms ease, opacity 180ms ease;
}
.logo-cell:hover{ transform: scale(1.06); }
.logo-cell:focus-visible{ outline:2px solid var(--purple-700); outline-offset:4px; border-radius:6px; }
.logo-cell img{
    max-height:100%;
    max-width:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}

.tagline{
    margin: clamp(36px, 5vw, 52px) 0 0;
    padding-top: clamp(24px, 3.5vw, 34px);
    border-top:1px solid var(--line);
    font-size:14px;
    color:var(--grey-700);
    text-align:center;
}

.error {
    color: #ff0000;
    margin-bottom: 15px;
}

@media (max-width:1180px) {
    .logo-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width:900px) {
    body{ flex-direction:column; }
    .form-col{ width:100%; flex:none; padding-bottom: clamp(48px, 10vw, 64px); }
    .form-content{ max-width:none; }
    .molecule-deco{ display:none; }
    .logo-col{ width:100%; flex:none; border-left:none; border-top:1px solid var(--line); }
    .logo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logo-cell{ height: clamp(52px, 12vw, 66px); justify-content:center; }
    .hero-mark{ margin-left:auto; margin-right:auto; }
    .tagline{ text-align:left; }
}