:root {
    --navy: #101b83;
    --blue: #1747e8;
    --cyan: #13b9df;
    --green: #16c784;
    --ink: #172554;
    --muted: #71809d;
    --line: #dce5f5;
    --surface: #f5f8ff;
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter,Arial,sans-serif;
    color: var(--ink)
}

body {
    background: #f5f8ff;
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.page {
    width: min(1500px,100%);
    margin: auto;
    padding: 9px 1px 6px;
    flex: 1;
    display: flex;
    align-items: center
}

.login-shell {
    width: 100%;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(390px,.85fr);
    background: #fff;
    border: 1px solid #e8eef9;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(31,61,133,.11)
}
/* Promotional banner */
.promo {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    padding: 52px 48px;
    color: #fff;
    background: linear-gradient(135deg,#1328a8 0%,#214be0 48%,#087fc5 100%)
}

    .promo:before {
        content: "";
        position: absolute;
        width: 570px;
        height: 570px;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 50%;
        right: -175px;
        top: -220px;
        box-shadow: 0 0 0 38px rgba(255,255,255,.035),0 0 0 85px rgba(255,255,255,.025)
    }

    .promo:after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(23,199,132,.12);
        filter: blur(2px);
        left: -240px;
        bottom: -245px
    }

.promo-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column
}

.promo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.brand-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Poppins,sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .3px
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg,#fff,#bcecff);
    display: grid;
    place-items: center;
    color: #1747e8;
    font-size: 21px;
    box-shadow: 0 8px 24px rgba(0,0,0,.13)
}

.promo-tag {
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.11);
    border-radius: 30px;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase
}

.hero-copy {
    margin-top: 54px;
    max-width: 620px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ff4d0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase
}

    .eyebrow i {
        font-size: 10px
    }

.hero-copy h1 {
    font: 800 clamp(34px,4vw,54px)/1.13 Poppins,sans-serif;
    margin: 16px 0 15px;
    letter-spacing: -1.8px
}

    .hero-copy h1 span {
        color: #5cf0bc
    }

.hero-copy p {
    max-width: 490px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.8
}

.hero-visual {
    position: relative;
    min-height: 220px;
    margin: 28px 0 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.orbit {
    position: absolute;
    width: 270px;
    height: 190px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    transform: rotate(-18deg)
}

    .orbit:before, .orbit:after {
        content: "";
        position: absolute;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 50%;
        inset: 17px -22px;
        transform: rotate(36deg)
    }

    .orbit:after {
        inset: 35px -45px;
        transform: rotate(-25deg)
    }

.visual-card {
    position: relative;
    width: min(420px,90%);
    height: 190px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 22px;
    background: linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
    backdrop-filter: blur(12px);
    box-shadow: 0 25px 55px rgba(4,20,95,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px
}

.shield {
    width: 112px;
    height: 112px;
    border-radius: 30px;
    background: linear-gradient(145deg,#fff,#dffaff);
    display: grid;
    place-items: center;
    color: #1d55db;
    font-size: 58px;
    box-shadow: 0 12px 35px rgba(0,0,0,.16);
    transform: rotate(-7deg)
}

.visual-text {
    max-width: 185px
}

    .visual-text strong {
        display: block;
        font: 700 19px Poppins,sans-serif;
        line-height: 1.35
    }

    .visual-text small {
        display: block;
        margin-top: 9px;
        color: rgba(255,255,255,.8);
        font-size: 12px;
        line-height: 1.6
    }

.float-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 13px;
    background: #fff;
    color: #1747b8;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(4,20,95,.2)
}

    .float-chip i {
        color: #13b980;
        font-size: 15px
    }

.chip-one {
    top: 7px;
    right: 8%
}

.chip-two {
    bottom: 4px;
    left: 5%
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: auto
}

.contact-card {
    min-height: 88px;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.27);
    border-radius: 16px;
    background: rgba(5,24,115,.23);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .25s
}

    .contact-card:hover {
        background: rgba(255,255,255,.16);
        transform: translateY(-3px)
    }

.contact-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: rgba(255,255,255,.16);
    display: grid;
    place-items: center;
    color: #75f2d0;
    font-size: 18px
}

.contact-card small {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    margin-bottom: 6px
}

.contact-card strong {
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere
}
/* Login panel */
.login-panel {
    padding: 46px clamp(30px,4.2vw,66px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 36px
}

.brand-symbol {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    background: linear-gradient(140deg,#1239d8,#08b8cf 65%,#18c985);
    display: grid;
    place-items: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(24,78,211,.2);
    transform: rotate(-7deg)
}

.brand-name {
    font: 800 29px/1 Poppins,sans-serif;
    letter-spacing: -1.2px;
    background: linear-gradient(90deg,#1643d8,#0aa9c7,#13b879);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.brand-sub {
    margin-top: 6px;
    color: #72809b;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase
}

.welcome {
    text-align: center;
    margin-bottom: 33px
}

    .welcome .secure {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #0b9e76;
        background: #e9fbf4;
        border: 1px solid #d0f6e7;
        border-radius: 30px;
        padding: 7px 12px;
        font-size: 11px;
        font-weight: 700
    }

    .welcome h2 {
        font: 700 25px Poppins,sans-serif;
        margin: 15px 0 7px;
        color: #14245c
    }

    .welcome p {
        font-size: 13px;
        color: var(--muted);
        margin: 0
    }

.form-group {
    margin-bottom: 20px
}

    .form-group label {
        display: block;
        margin-bottom: 9px;
        color: #33456e;
        font-size: 13px;
        font-weight: 700
    }

.input-wrap {
    position: relative
}

    .input-wrap > i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #8a9abb;
        font-size: 15px
    }

    .input-wrap input {
        width: 100%;
        height: 52px;
        border: 1px solid #d8e2f2;
        border-radius: 11px;
        background: #fbfcff;
        padding: 0 48px 0 45px;
        font: 500 14px Inter,sans-serif;
        color: #1d2c56;
        outline: none;
        transition: .2s
    }

        .input-wrap input:focus {
            border-color: #3265ef;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(50,101,239,.1)
        }

.toggle-pass {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #8796b3;
    cursor: pointer;
    padding: 7px;
    font-size: 15px
}

    .toggle-pass:hover {
        color: #1747e8
    }

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 24px;
    font-size: 12px
}

.remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64728e;
    cursor: pointer
}

    .remember input {
        accent-color: #1747e8;
        width: 15px;
        height: 15px
    }

.form-options a {
    color: #2454d9;
    text-decoration: none;
    font-weight: 700
}

    .form-options a:hover {
        text-decoration: underline
    }

.login-btn {
    height: 53px;
    width: 100%;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(100deg,#1535d8,#1767ef 65%,#08a9c9);
    color: #fff;
    font: 700 15px Inter,sans-serif;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(30,75,218,.2);
    transition: .25s
}

    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 28px rgba(30,75,218,.28);
        filter: saturate(1.12)
    }

    .login-btn:active {
        transform: translateY(0)
    }

.form-message {
    margin-top: 13px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5
}

    .form-message.error {
        display: block;
        background: #fff0f0;
        color: #b42318;
        border: 1px solid #ffd8d8
    }

    .form-message.success {
        display: block;
        background: #ecfbf4;
        color: #087b54;
        border: 1px solid #c8f2df
    }

.login-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 27px;
    color: #8793aa;
    font-size: 11px
}

    .login-note i {
        color: #13a978
    }

footer {
    border-top: 1px solid #e4eaf4;
    background: #fff;
    padding: 19px 20px 16px;
    text-align: center
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 30px
}

    .footer-links a {
        color: #173d9d;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        transition: .2s
    }

        .footer-links a:hover {
            color: #10a77b
        }

.copyright {
    margin-top: 13px;
    color: #8995aa;
    font-size: 11px
}

/* Banner slider */
.banner-slider {
    position: relative;
    margin-top: 42px;
    min-height: 390px;
    display: flex;
    flex-direction: column
}

.banner-slides {
    position: relative;
    flex: 1;
    min-height: 335px
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(22px);
    transition: opacity .55s ease,transform .55s ease,visibility .55s;
    display: flex;
    flex-direction: column
}

    .banner-slide.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        z-index: 2
    }

    .banner-slide .hero-copy {
        margin: 0;
        min-height: 150px
    }

        .banner-slide .hero-copy h1 {
            font-size: clamp(31px,3.4vw,46px)
        }

    .banner-slide .hero-visual {
        margin: 13px 0 8px;
        min-height: 175px
    }

    .banner-slide .visual-card {
        height: 150px
    }

.slider-controls {
    position: absolute;
    right: 0;
    bottom: 7px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px
}

.slider-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    transition: .2s
}

    .slider-arrow:hover {
        background: #fff;
        color: #1747d8
    }

.slider-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px
}

.slider-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.48);
    cursor: pointer;
    transition: .25s
}

    .slider-dot.active {
        width: 22px;
        background: #5cf0bc
    }

.banner-slide .visual-card .shield {
    color: #1747d8
}

@media(max-width:800px) {
    .banner-slider {
        margin-top: 34px;
        min-height: 365px
    }

    .banner-slides {
        min-height: 315px
    }

    .banner-slide .hero-copy {
        min-height: 135px
    }

    .banner-slide .hero-visual {
        min-height: 155px
    }

    .banner-slide .visual-card {
        height: 140px
    }
}

@media(max-width:520px) {
    .banner-slider {
        margin-top: 29px;
        min-height: 350px
    }

    .banner-slides {
        min-height: 300px
    }

    .banner-slide .hero-copy {
        min-height: 145px
    }

        .banner-slide .hero-copy h1 {
            font-size: 31px
        }

    .banner-slide .hero-visual {
        min-height: 135px
    }

    .banner-slide .visual-card {
        height: 125px
    }

    .slider-controls {
        bottom: 0
    }
}

@media(max-width:1050px) {
    .page {
        padding: 18px
    }

    .login-shell {
        grid-template-columns: 1fr 390px
    }

    .promo {
        padding: 38px 30px
    }

    .hero-copy {
        margin-top: 42px
    }

        .hero-copy h1 {
            font-size: 39px
        }

    .login-panel {
        padding: 38px 28px
    }
}

@media(max-width:800px) {
    .page {
        padding: 14px
    }

    .login-shell {
        grid-template-columns: 1fr;
        border-radius: 23px
    }

    .promo {
        min-height: auto;
        padding: 30px 25px 25px
    }

    .hero-copy {
        margin-top: 35px
    }

        .hero-copy h1 {
            font-size: 38px
        }

    .hero-visual {
        margin: 25px 0 20px;
        min-height: 190px
    }

    .visual-card {
        height: 165px
    }

    .shield {
        width: 90px;
        height: 90px;
        font-size: 46px
    }

    .contact-grid {
        margin-top: 10px
    }

    .login-panel {
        padding: 38px 28px 34px
    }
}

@media(max-width:520px) {
    .page {
        padding: 0
    }

    .login-shell {
        border: 0;
        border-radius: 0;
        box-shadow: none
    }

    .promo {
        padding: 25px 20px 22px
    }

    .promo-tag {
        font-size: 9px;
        padding: 8px 10px
    }

    .hero-copy {
        margin-top: 31px
    }

        .hero-copy h1 {
            font-size: 33px;
            letter-spacing: -1px
        }

        .hero-copy p {
            font-size: 13px
        }

    .hero-visual {
        min-height: 160px;
        margin: 23px 0 18px
    }

    .visual-card {
        height: 145px;
        gap: 13px
    }

    .shield {
        width: 76px;
        height: 76px;
        border-radius: 22px;
        font-size: 39px
    }

    .visual-text {
        max-width: 150px
    }

        .visual-text strong {
            font-size: 15px
        }

        .visual-text small {
            font-size: 10px
        }

    .float-chip {
        font-size: 9px;
        padding: 8px 10px
    }

    .chip-one {
        right: 0
    }

    .chip-two {
        left: 0
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 9px
    }

    .contact-card {
        min-height: 72px;
        padding: 13px
    }

    .login-panel {
        padding: 35px 23px
    }

    .brand {
        margin-bottom: 29px
    }

    .brand-name {
        font-size: 25px
    }

    .welcome h2 {
        font-size: 22px
    }

    footer {
        padding: 18px 14px
    }

    .footer-links {
        gap: 12px 18px
    }
}

.errred {
    font-size: 11px;
    color: red;
}