* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background: #060a10;
    color: #f5f7fb;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 16%,
            rgba(35,105,210,.22),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0b111b 0%,
            #070b11 55%,
            #05080d 100%
        );
}

.page {

    min-height: 100vh;

    display: grid;

    grid-template-rows:
        1fr auto;

    padding: 32px;
}

.hero {

    width: min(760px,100%);

    margin: auto;

    text-align: center;

    padding:
        50px
        24px;
}

.bcs-tag {

    color: #788da9;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .24em;

    margin-bottom: 22px;
}

.symbol {

    position: relative;

    width: 80px;
    height: 60px;

    margin:
        0 auto
        26px;
}

.symbol span {

    position: absolute;

    width: 58px;
    height: 10px;

    left: 9px;
    top: 20px;

    border-radius: 20px;

    transform: rotate(-32deg);

    background:
        linear-gradient(
            90deg,
            #268cff,
            #5bc5ff
        );

    box-shadow:
        0 0 32px
        rgba(54,155,255,.45);
}

.symbol i {

    position: absolute;

    width: 12px;
    height: 12px;

    right: 5px;
    bottom: 5px;

    border-radius: 50%;

    background: #f0d94c;

    box-shadow:
        0 0 18px
        rgba(240,217,76,.5);
}

h1 {

    margin: 0;

    font-size:
        clamp(
            58px,
            10vw,
            106px
        );

    line-height: .92;

    font-weight: 950;

    letter-spacing: .035em;
}

.tenant {

    margin-top: 20px;

    color: #f0d94c;

    font-size:
        clamp(
            18px,
            2.2vw,
            24px
        );

    font-weight: 900;

    letter-spacing: .19em;
}

.tenant.small {

    font-size: 14px;

    margin-top: 8px;
}

.line {

    width: 100px;

    height: 1px;

    margin:
        30px auto
        24px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #65758c,
            transparent
        );
}

.powered {

    color: #7d8ca0;

    font-size: 14px;

    margin-bottom: 34px;
}

.powered strong {

    margin-left: 5px;

    color: #d9e5f5;

    letter-spacing: .08em;
}

.enter {

    width: min(430px,100%);

    min-height: 60px;

    margin: auto;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    border:
        1px solid
        #438ddd;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #1768c5,
            #0c4688
        );

    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 950;

    letter-spacing: .08em;

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.3);

    transition:
        .16s ease;
}

.enter:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.1);
}

.enter b {

    font-size: 23px;
}

.secure {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: #718197;

    font-size: 12px;
}

.secure i {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #46d187;

    box-shadow:
        0 0 12px
        rgba(70,209,135,.55);
}

footer {

    width:
        min(
            1000px,
            100%
        );

    margin: auto;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(105,123,148,.18);

    display: flex;

    justify-content: space-between;

    gap: 16px;

    color: #536075;

    font-size: 11px;
}


/* LOGIN */

.login-card {

    width:
        min(
            430px,
            100%
        );

    margin: auto;

    padding:
        38px;

    border:
        1px solid
        #28394f;

    border-radius: 14px;

    background:
        rgba(
            11,
            18,
            28,
            .94
        );

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.35);
}

.login-card h2 {

    margin:
        10px
        0
        0;

    text-align: center;

    font-size: 46px;

    letter-spacing: .05em;
}

.login-card .tenant {

    text-align: center;
}

.login-title {

    text-align: center;

    color: #8e9db2;

    margin:
        32px
        0
        26px;
}

.login-card form {

    display: grid;

    gap: 18px;
}

.login-card label {

    display: grid;

    gap: 7px;

    color: #aeb9c9;

    font-size: 12px;

    font-weight: 800;
}

.login-card input {

    min-height: 48px;

    padding:
        0
        14px;

    border:
        1px solid
        #35465e;

    border-radius: 7px;

    background: #080e16;

    color: white;

    font-size: 15px;

    outline: none;
}

.login-card input:focus {

    border-color: #428fe5;
}

.login-button {

    min-height: 52px;

    border:
        1px solid
        #438ddd;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #1768c5,
            #0c4688
        );

    color: white;

    font-weight: 950;

    letter-spacing: .08em;

    cursor: pointer;
}

.auth-info {

    margin-top: 20px;

    padding: 12px;

    border:
        1px solid
        #383820;

    border-radius: 7px;

    background: #171609;

    color: #d8c64b;

    text-align: center;

    font-size: 10px;

    font-weight: 900;
}

.auth-info small {

    display: block;

    margin-top: 5px;

    color: #827d56;

    font-weight: 500;
}

.back {

    display: block;

    margin-top: 20px;

    color: #8091a8;

    text-decoration: none;

    font-size: 12px;
}

.login-powered {

    margin:
        28px
        0
        0;

    text-align: center;

    font-size: 11px;
}

@media(max-width:640px) {

    .page {
        padding: 20px;
    }

    .hero {
        padding:
            30px
            5px;
    }

    .login-card {
        padding:
            30px
            22px;
    }

    footer {

        flex-direction:
            column;

        text-align:
            center;

        align-items:
            center;
    }
}