:root {
    color-scheme: light;
    --blue: #0a4784;
    --navy: #12324e;
    --muted: #4e6477;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    min-height: 100svh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: clamp(16px, 5vw, 64px);
    background: radial-gradient(ellipse at 84% 14%, #e0ecf9, transparent 62%), #f3f7fb;
    color: var(--navy);
}

.login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 960px);
    min-height: 484px;
    background: #fff;
    border: 1px solid #dbe6f0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 70px #10375424;
}

.intro, .signin { padding: clamp(30px, 5.2vw, 64px); }

.intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(150deg, #0d3961 0%, var(--blue) 78%, #135f9e 100%);
    color: #fff;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    font-size: 0.77rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #92cefb;
}

h1 {
    margin: 0 0 13px;
    font-size: clamp(3rem, 6vw, 4.4rem);
    font-weight: 760;
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.intro-copy {
    max-width: 23ch;
    margin: 0;
    color: #e2effa;
    font-size: 1.06rem;
    line-height: 1.6;
}

.art {
    position: absolute;
    z-index: -1;
    width: min(78%, 340px);
    right: -12px;
    bottom: -22px;
    stroke: #a7d8ff;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.4;
}

.signin { align-self: center; }

.logo { display: block; width: min(100%, 270px); height: auto; margin: 0 0 52px; }

h2 {
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 720;
    letter-spacing: -0.035em;
}

.description, .note { margin: 0; color: var(--muted); line-height: 1.55; }

.button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    gap: 20px;
    margin: 25px 0 15px;
    padding: 10px 17px;
    border-radius: 9px;
    background: var(--blue);
    color: #fff;
    font-weight: 660;
    text-decoration: none;
}

.button:hover { background: #063664; }
.button:focus-visible { outline: 3px solid #0a4784; outline-offset: 4px; }
.button span { font-size: 1.25rem; }
.note { font-size: 0.86rem; }

.message {
    margin: 18px 0 0;
    padding: 11px 14px;
    border-left: 3px solid #a34212;
    border-radius: 4px;
    background: #fdf4eb;
    color: #702f11;
    line-height: 1.5;
}

@media (max-width: 680px) {
    .login { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
    .intro, .signin { padding: 30px; }
    .art { width: 45%; right: -30px; bottom: -36px; opacity: 0.3; }
    .logo { margin-bottom: 30px; }
}