/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* =========================================================
   BODY
========================================================= */

body{

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background:#07111f;

    color:white;

    overflow:hidden;
}


/* =========================================================
   LAYOUT
========================================================= */

.login-layout{

    width:100vw;

    height:100vh;

    display:grid;

    grid-template-columns:67% 33%;

    background:#07111f;
}


/* =========================================================
   VISUAL PANEL
========================================================= */

.visual-panel{

    position:relative;

    overflow:hidden;
}


/* =========================================================
   GIF / BACKGROUND
========================================================= */

.gif-wrapper{

    position:absolute;

    inset:0;

    overflow:hidden;
}





.hero-video{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.04);

    filter:
        contrast(1.03)
        saturate(1.04);
}


/* =========================================================
   OVERLAY
========================================================= */

.visual-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(7,17,31,.56),
            rgba(7,17,31,.18),
            rgba(7,17,31,.02)
        ),

        linear-gradient(
            180deg,
            rgba(7,17,31,.08),
            rgba(7,17,31,.22)
        );
}


/* =========================================================
   CONTENT
========================================================= */

.visual-content{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:54px 60px;
}


/* =========================================================
   BRAND
========================================================= */

.brand-block{

    display:flex;

    align-items:center;

    gap:18px;
}

.brand-accent{

    width:7px;

    height:62px;

    border-radius:20px;

    background:

        linear-gradient(
            180deg,
            #1fc3b3,
            #00b3d7
        );

    box-shadow:
        0 0 32px rgba(31,195,179,.38);
}

.brand-block h1{

    font-size:44px;

    font-weight:900;

    letter-spacing:.4px;

    text-shadow:
        0 14px 40px rgba(0,0,0,.40);
}

.brand-block span{

    display:block;

    margin-top:4px;

    color:#d9e3ec;

    font-size:15px;

    letter-spacing:.4px;
}


/* =========================================================
   HERO
========================================================= */

.hero-block{

    max-width:580px;

    margin-bottom:16px;
}

.hero-block h2{

    font-size:58px;

    line-height:1.02;

    font-weight:900;

    max-width:560px;

    text-shadow:
        0 16px 44px rgba(0,0,0,.42);
}

.hero-block p{

    margin-top:24px;

    max-width:520px;

    font-size:18px;

    line-height:1.75;

    color:#d7e1ea;

    text-shadow:
        0 10px 28px rgba(0,0,0,.32);
}


/* =========================================================
   TAGS
========================================================= */

.bottom-tags{

    margin-top:30px;

    display:flex;

    flex-wrap:wrap;

    gap:14px;
}

.tag-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

    border-radius:14px;

    background:
        rgba(7,17,31,.74);

    border:
        1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(14px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.tag-item span{

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#dce5ef;
}

.tag-bar{

    width:4px;

    height:20px;

    border-radius:10px;
}

.cyan{

    background:#1fc3b3;
}

.orange{

    background:#ed8b00;
}

.purple{

    background:#981d97;
}

.green{

    background:#97d700;
}


/* =========================================================
   INTERNAL LABEL
========================================================= */

.internal-label{

    margin-top:18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:10px 18px;

    border-radius:999px;

    background:
        rgba(152,29,151,.18);

    border:
        1px solid rgba(152,29,151,.34);

    color:#f1d7ff;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;

    backdrop-filter:blur(14px);
}


/* =========================================================
   LOGIN PANEL
========================================================= */

.login-panel{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:42px;

    border-left:
        1px solid rgba(255,255,255,.05);

    background:

        radial-gradient(
            circle at top,
            rgba(6,54,157,.22),
            transparent 26%
        ),

        radial-gradient(
            circle at bottom,
            rgba(31,195,179,.10),
            transparent 30%
        ),

        #07111f;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card{

    position:relative;

    width:100%;

    max-width:430px;

    padding:46px;

    border-radius:34px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

    box-shadow:
        0 28px 70px rgba(0,0,0,.42);
}


/* =========================================================
   GLOW
========================================================= */

.card-glow{

    position:absolute;

    top:-120px;

    right:-100px;

    width:240px;

    height:240px;

    border-radius:50%;

    background:
        rgba(31,195,179,.16);

    filter:blur(60px);
}


/* =========================================================
   HEADER
========================================================= */

.login-header{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:34px;
}

.login-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    background:

        linear-gradient(
            135deg,
            #06369d,
            #1fc3b3
        );

    box-shadow:
        0 0 35px rgba(31,195,179,.24);
}

.login-header h3{

    font-size:32px;

    font-weight:900;
}

.login-header p{

    margin-top:4px;

    color:#bebab9;

    font-size:14px;
}


/* =========================================================
   ERROR
========================================================= */

.login-error{

    margin-bottom:22px;

    padding:14px 16px;

    border-radius:14px;

    background:
        rgba(237,139,0,.14);

    border:
        1px solid rgba(237,139,0,.32);

    color:#ffd59e;

    font-size:14px;
}


/* =========================================================
   FORM
========================================================= */

.form-group{

    margin-bottom:22px;
}

.form-group label{

    display:block;

    margin-bottom:9px;

    font-size:14px;

    color:#e8edf4;

    font-weight:700;
}

.form-group input{

    width:100%;

    height:58px;

    border:none;

    outline:none;

    border-radius:18px;

    padding:0 18px;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.06);

    color:white;

    font-size:15px;

    transition:.25s ease;
}

.form-group input::placeholder{

    color:#8f99ab;
}

.form-group input:focus{

    border:
        1px solid #1fc3b3;

    background:
        rgba(255,255,255,.10);

    box-shadow:
        0 0 0 4px rgba(31,195,179,.10);
}


/* =========================================================
   BUTTON
========================================================= */

.btn-login{

    width:100%;

    height:58px;

    margin-top:12px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:

        linear-gradient(
            135deg,
            #06369d,
            #1fc3b3
        );

    color:white;

    font-size:16px;

    font-weight:900;

    letter-spacing:.3px;

    transition:.25s ease;

    box-shadow:
        0 18px 35px rgba(31,195,179,.16);
}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:
        0 24px 45px rgba(31,195,179,.24);
}


/* =========================================================
   FOOTER
========================================================= */

.login-footer{

    margin-top:28px;

    text-align:center;

    color:#8e98aa;

    font-size:13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1250px){

    .hero-block h2{

        font-size:50px;
    }
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:1080px){

    body{

        overflow:auto;
    }

    .login-layout{

        display:flex;

        flex-direction:column;

        width:100%;

        min-height:100vh;

        height:auto;
    }

    .visual-panel{

        width:100%;

        height:48vh;

        min-height:340px;
    }


.hero-video{

    object-position:center top;
}

 
    .visual-content{

        padding:28px;
    }

    .brand-block{

        gap:14px;
    }

    .brand-block h1{

        font-size:30px;
    }

    .brand-block span{

        font-size:12px;
    }

    .brand-accent{

        height:50px;
    }

    .hero-block h2{

        font-size:30px;

        max-width:420px;
    }

    .bottom-tags{

        margin-top:18px;

        gap:10px;
    }

    .tag-item{

        padding:10px 12px;
    }

    .tag-item span{

        font-size:10px;
    }

    .login-panel{

        width:100%;

        min-height:52vh;

        padding:28px 20px;
    }

    .login-card{

        max-width:100%;
    }
}


/* =========================================================
   MOBILE SMALL
========================================================= */

@media(max-width:640px){

    .visual-panel{

        height:42vh;

        min-height:300px;
    }

    .brand-block h1{

        font-size:26px;
    }

    .hero-block h2{

        font-size:24px;

        line-height:1.1;
    }

    .login-card{

        padding:34px 24px;

        border-radius:24px;
    }

    .login-header h3{

        font-size:26px;
    }
}