.login-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: #080d1d;
    color: #0f172a;
}

.login-hero__image,
.login-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.login-hero__image {
    z-index: -3;
    object-fit: cover;
    object-position: 64% center;
}

.login-hero__shade {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(5, 9, 25, .98) 0%, rgba(6, 10, 27, .93) 32%, rgba(8, 13, 31, .58) 58%, rgba(8, 13, 31, .08) 82%),
        linear-gradient(0deg, rgba(4, 8, 22, .58), transparent 42%);
}

.login-hero__layout {
    display: grid;
    grid-template-areas:
        "brand brand"
        "card invitation"
        "trust trust";
    grid-template-columns: minmax(0, 480px) minmax(330px, 430px);
    align-content: center;
    align-items: stretch;
    justify-content: start;
    column-gap: clamp(24px, 3vw, 48px);
    width: min(100%, 1540px);
    min-height: inherit;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 76px);
}

.login-brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px 4px;
    color: #fff;
    font-size: 1.24rem;
    font-weight: 900;
    letter-spacing: -.035em;
    text-decoration: none;
}

.login-brand:hover { color: #fff; opacity: .9; }

.login-brand__mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    backdrop-filter: blur(14px);
}

.login-brand__mark img { width: 37px; height: 37px; object-fit: contain; }

.login-card {
    grid-area: card;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 30px;
    background: rgba(255, 255, 255, .95);
    padding: clamp(28px, 4vw, 42px);
    box-shadow: 0 32px 90px rgba(2, 6, 23, .38), 0 2px 0 rgba(255, 255, 255, .65) inset;
    backdrop-filter: blur(24px);
}

.login-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: #6d28d9;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.login-card__eyebrow .material-symbols-outlined { font-size: 17px; }

.login-card h1 {
    margin: 0;
    color: #080d1d;
    font-size: clamp(2.15rem, 4vw, 3rem);
    font-weight: 950;
    letter-spacing: -.055em;
    line-height: .98;
}

.login-card__intro { margin: 13px 0 0; color: #64748b; font-size: .96rem; line-height: 1.65; }
.login-alerts { display: grid; gap: 8px; margin-top: 22px; }

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #fecdd3;
    border-radius: 14px;
    background: #fff1f2;
    padding: 12px 14px;
    color: #9f1239;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
}

.login-alert .material-symbols-outlined { flex: 0 0 auto; font-size: 19px; }
.login-form { display: grid; gap: 18px; margin-top: 30px; }
.login-field { display: grid; gap: 8px; }
.login-field__label { color: #1e293b; font-size: .78rem; font-weight: 850; }
.login-field__control { position: relative; display: block; }

.login-field__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 12px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
    transform: translateY(-50%);
    pointer-events: none;
}

.login-field__icon svg { width: 19px; height: 19px; }

.login-card .login-field input {
    width: 100%;
    height: 54px;
    border: 1px solid #dbe2ea;
    border-radius: 15px;
    background: #fff;
    padding: 0 18px 0 56px !important;
    color: #0f172a;
    font-size: .94rem;
    outline: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.login-card .login-field input::placeholder { color: #94a3b8; }
.login-card .login-field input:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 4px rgba(124, 58, 237, .12), 0 6px 18px rgba(15, 23, 42, .06); }
.login-card .login-field input[aria-invalid="true"] { border-color: #fb7185; }
.login-field__errors { color: #be123c; font-size: .74rem; font-weight: 700; }
.login-form__recovery { margin-top: -5px; text-align: right; }

.login-form__recovery a,
.login-card__footer a { color: #6d28d9; font-weight: 850; text-decoration: none; }

.login-form__recovery a { font-size: .78rem; }
.login-form__recovery a:hover,
.login-card__footer a:hover { color: #4c1d95; text-decoration: underline; }

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    margin-top: 2px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 58%, #5b21b6 100%);
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
    box-shadow: 0 16px 30px rgba(109, 40, 217, .28);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.login-submit:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 20px 38px rgba(109, 40, 217, .35); }
.login-submit:active { transform: translateY(0); }
.login-submit:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.login-submit .material-symbols-outlined { font-size: 20px; }

.login-card__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 28px;
    border-top: 1px solid #e8edf3;
    padding-top: 24px;
    color: #64748b;
    font-size: .8rem;
}

.login-trust {
    grid-area: trust;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 22px 4px 0;
    color: rgba(255, 255, 255, .74);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.login-trust > span { display: inline-flex; align-items: center; gap: 6px; }
.login-trust .material-symbols-outlined { color: #c4b5fd; font-size: 16px; }

.login-invitation {
    grid-area: invitation;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 30px;
    background: rgba(5, 9, 25, .72);
    padding: clamp(32px, 3vw, 46px);
    color: #fff;
    box-shadow: 0 28px 70px rgba(2, 6, 23, .34);
    backdrop-filter: blur(18px);
}

.login-invitation__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #ddd6fe;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.login-invitation__eyebrow > span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #a78bfa;
    box-shadow: 0 0 0 5px rgba(167, 139, 250, .14);
}

.login-invitation h2 {
    margin: 17px 0 0;
    font-size: clamp(1.75rem, 2.5vw, 2.45rem);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.login-invitation > p {
    margin: 15px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    line-height: 1.7;
}

.login-invitation ul { display: grid; gap: 10px; margin: 21px 0 0; }
.login-invitation li { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .88); font-size: .76rem; font-weight: 750; }
.login-invitation li .material-symbols-outlined { color: #a7f3d0; font-size: 17px; font-weight: 800; }

.login-invitation > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    text-decoration: none;
}

.login-invitation > a:hover { color: #ddd6fe; }
.login-invitation > a .material-symbols-outlined { font-size: 18px; transition: transform .18s ease; }
.login-invitation > a:hover .material-symbols-outlined { transform: translateX(3px); }

@media (max-width: 1080px) {
    .login-hero__layout {
        grid-template-areas:
            "brand"
            "card"
            "trust";
        grid-template-columns: minmax(0, 480px);
        justify-content: start;
    }
    .login-invitation { display: none; }
}

@media (max-width: 720px) {
    .login-hero { overflow-y: auto; }
    .login-hero__image { object-position: 69% center; }
    .login-hero__shade { background: linear-gradient(90deg, rgba(5, 9, 25, .93), rgba(5, 9, 25, .72)), linear-gradient(0deg, rgba(4, 8, 22, .66), transparent 55%); }
    .login-hero__layout { align-items: start; padding: 24px 16px 32px; }
    .login-brand { margin-bottom: 20px; }
    .login-card { border-radius: 24px; padding: 28px 22px; }
    .login-card h1 { font-size: 2.25rem; }
    .login-trust { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .login-submit,
    .login-card .login-field input,
    .login-invitation > a .material-symbols-outlined { transition: none; }
}