:root{
    --bg:#07111d;
    --surface:#0d1a2a;
    --line:rgba(255,255,255,.09);
    --text:#f7fbff;
    --muted:#91a8be;
    --accent:#24d0d8;
    --accent2:#6240d7;
    --danger:#ff7a88;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
button,input{font:inherit}
button{cursor:pointer}

.login-body{min-height:100vh;overflow-x:hidden}
.login-experience{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,1.32fr) minmax(430px,.88fr);
    background:
        radial-gradient(circle at 88% 10%,rgba(98,64,215,.16),transparent 30%),
        linear-gradient(135deg,#07111d 0%,#06101b 52%,#081322 100%);
}
.login-story{
    min-width:0;
    min-height:100vh;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:38px clamp(44px,5.7vw,104px) 34px;
    border-right:1px solid rgba(255,255,255,.055);
    background:
        linear-gradient(90deg,rgba(4,12,21,.95) 0%,rgba(4,12,21,.82) 35%,rgba(4,12,21,.36) 73%,rgba(4,12,21,.17) 100%),
        linear-gradient(180deg,rgba(5,14,24,.14),rgba(3,9,16,.68)),
        url("../img/login-studio-bg.jpg") center center / cover no-repeat;
}
.login-story:before{
    content:"";
    position:absolute;
    width:470px;height:470px;
    left:-300px;top:-275px;
    z-index:-1;
    border:54px solid rgba(36,208,216,.08);
    border-radius:50%;
    box-shadow:0 0 0 52px rgba(98,64,215,.035),0 0 0 105px rgba(36,208,216,.025);
}
.login-story:after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    right:-250px;bottom:-175px;
    z-index:-1;
    border:40px solid rgba(36,208,216,.07);
    border-radius:50%;
    box-shadow:0 0 0 55px rgba(98,64,215,.04);
}
.login-brand{
    position:relative;z-index:2;display:flex;align-items:center;
    width:max-content;max-width:100%;overflow:hidden;
    padding:10px 16px 10px 0;margin:-10px -16px -10px 0;
}
.login-brand::after{
    content:"";position:absolute;top:-35%;bottom:-35%;left:-38%;width:22%;
    pointer-events:none;opacity:0;transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),rgba(36,208,216,.20),transparent);
    filter:blur(3px);
    animation:loginLogoShine 1.05s .55s cubic-bezier(.22,.61,.36,1) 1 both;
}
.login-brand-logo{
    display:block;width:min(355px,45vw);height:auto;max-height:118px;
    object-fit:contain;object-position:left center;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));
    transform-origin:left center;
    animation:loginLogoEnter .82s cubic-bezier(.16,1,.3,1) both;
    transition:transform .42s cubic-bezier(.22,1,.36,1),filter .42s ease;
}
.login-brand:hover .login-brand-logo{
    transform:translateX(7px) scale(1.015);
    filter:drop-shadow(0 13px 26px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(36,208,216,.16));
}
.login-brand:hover::after{animation:loginLogoHoverShine .9s cubic-bezier(.22,.61,.36,1) 1}
@keyframes loginLogoEnter{
    0%{opacity:0;transform:translateX(-24px) scale(.985);filter:blur(2px) drop-shadow(0 10px 24px rgba(0,0,0,.18))}
    58%{opacity:1;transform:translateX(4px) scale(1.006);filter:blur(0) drop-shadow(0 10px 24px rgba(0,0,0,.25))}
    100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0) drop-shadow(0 10px 24px rgba(0,0,0,.25))}
}
@keyframes loginLogoShine{0%{left:-38%;opacity:0}18%{opacity:.9}72%{opacity:.55}100%{left:116%;opacity:0}}
@keyframes loginLogoHoverShine{0%{left:-38%;opacity:0}18%{opacity:.75}100%{left:116%;opacity:0}}
@media (prefers-reduced-motion:reduce){
    .login-brand-logo,.login-brand::after{animation:none!important;transition:none!important}
    .login-brand:hover .login-brand-logo{transform:none}
}
.login-story-content{
    position:relative;z-index:2;
    width:min(700px,100%);
    margin:auto 0;
    padding:30px 0 22px;
}
.login-story h1{
    max-width:760px;
    margin:0 0 14px;
    color:#f7fbff;
    font-size:clamp(52px,4.95vw,78px);
    font-weight:950;
    line-height:.99;
    letter-spacing:-3px;
}
.login-story h1 span{
    background:linear-gradient(90deg,#24d0d8 0%,#26bde2 44%,#6240d7 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-story-lead{margin:0;color:#b5c9d9;font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.login-promises{display:grid;gap:13px;margin-top:29px}
.login-promise{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:13px}
.login-promise-icon{
    width:46px;height:46px;display:grid;place-items:center;
    border:1px solid rgba(36,208,216,.42);border-radius:14px;
    background:linear-gradient(145deg,rgba(36,208,216,.10),rgba(98,64,215,.08)),rgba(6,18,31,.72);
    color:#29d8e1;font-size:19px;font-weight:900;
}
.login-promise:nth-child(2) .login-promise-icon{color:#8c6eff;border-color:rgba(98,64,215,.38)}
.login-promise strong{display:block;color:#f0f6fb;font-size:14px;font-weight:900;line-height:1.3}
.login-promise p{margin:3px 0 0;color:#9ab0c3;font-size:12px;line-height:1.4}
.login-quote{
    position:relative;z-index:2;width:min(520px,100%);
    margin:0;padding-top:17px;border-top:1px solid rgba(162,190,214,.25);
    color:#829cb3;font-size:12px;line-height:1.5;font-style:italic;
}
.login-access{
    min-height:100vh;
    padding:32px clamp(28px,3.7vw,58px);
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
}
.login-access:before{
    content:"";position:absolute;width:560px;height:560px;top:-320px;right:-300px;
    border-radius:50%;background:radial-gradient(circle,rgba(98,64,215,.18),transparent 68%);
}
.login-card{
    width:min(500px,100%);
    padding:45px 40px 36px;
    position:relative;z-index:1;
    border:1px solid rgba(111,162,199,.38);
    border-radius:26px;
    background:linear-gradient(180deg,rgba(15,34,55,.88),rgba(8,26,43,.84));
    box-shadow:0 30px 78px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.03),0 0 45px rgba(36,208,216,.035);
    backdrop-filter:blur(20px);
}
.login-card-heading{margin-bottom:31px}
.login-card-heading h2{margin:0 0 9px;font-size:clamp(31px,2.65vw,39px);font-weight:900;line-height:1.08;letter-spacing:-1.3px}
.login-card-heading p{margin:0;color:#9cb2c5;font-size:14px;line-height:1.55}
.login-card form{display:grid;gap:19px}
.login-field{display:block;font-size:12px;font-weight:900}
.login-field>span{display:block;margin:0 0 8px;color:#f0f6fb}
.login-input-wrap{position:relative}
.login-input-icon{
    position:absolute;left:17px;top:50%;transform:translateY(-50%);z-index:2;
    width:22px;height:22px;display:grid;place-items:center;color:#8fb6d0;font-size:14px;pointer-events:none
}
.login-field input{
    width:100%;height:58px;margin:0;padding:0 17px 0 52px;
    border:1px solid rgba(131,173,203,.35);border-radius:15px;outline:none;
    background:rgba(5,18,31,.48);color:#f7fbff;font-size:14px;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-field input::placeholder{color:#758fa6}
.login-field input:focus{border-color:rgba(36,208,216,.72);background:rgba(5,18,31,.72);box-shadow:0 0 0 4px rgba(36,208,216,.08)}
.login-submit{
    width:100%;min-height:62px;margin-top:5px;padding:0 20px;
    display:flex;align-items:center;justify-content:center;gap:15px;
    border:0;border-radius:15px;color:#fff;font-size:16px;font-weight:900;
    background:linear-gradient(100deg,#24d0d8 0%,#2a9de0 48%,#6240d7 100%);
    box-shadow:0 15px 30px rgba(24,96,176,.24),0 0 30px rgba(36,208,216,.08);
    transition:transform .17s ease,filter .17s ease,box-shadow .17s ease;
}
.login-submit:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 19px 36px rgba(24,96,176,.27),0 0 35px rgba(36,208,216,.10)}
.login-submit b{font-size:20px;font-weight:500;line-height:1}
.login-error{margin:0 0 22px;padding:13px 15px;border:1px solid rgba(255,122,136,.20);border-radius:12px;background:rgba(255,122,136,.08);color:#ffadb5;font-size:13px;line-height:1.45}
.login-card-divider{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:30px 0 18px}
.login-card-divider span{height:1px;background:rgba(139,175,204,.24)}
.login-card-divider i{color:#86a9c2;font-style:normal;font-size:15px}
.login-card-note{margin:0;color:#849db2;font-size:12px;line-height:1.55;text-align:center}

@media(max-width:1050px){
    .login-experience{grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)}
    .login-story{padding-left:40px;padding-right:40px}
    .login-story h1{font-size:57px}
}
@media(max-width:900px){
    .login-experience{grid-template-columns:1fr}
    .login-story{min-height:auto;padding:28px 28px 40px;border-right:0;border-bottom:1px solid rgba(255,255,255,.06);background-position:center 58%}
    .login-brand-logo{width:min(310px,68vw);max-height:112px}
    .login-story-content{padding:45px 0 26px}
    .login-story h1{font-size:clamp(47px,9vw,66px)}
    .login-quote{display:none}
    .login-access{min-height:auto;padding:50px 24px 62px}
}
@media(max-width:600px){
    .login-story{padding:22px 18px 32px}
    .login-brand-logo{width:245px;max-width:78vw}
    .login-story-content{padding:36px 0 18px}
    .login-story h1{font-size:42px;letter-spacing:-2px}
    .login-story-lead{font-size:15px}
    .login-promises{margin-top:26px}
    .login-promise{grid-template-columns:44px 1fr}
    .login-promise-icon{width:44px;height:44px;border-radius:12px}
    .login-access{padding:36px 14px 50px}
    .login-card{padding:32px 22px 29px;border-radius:21px}
    .login-card-heading{margin-bottom:27px}
    .login-card-heading h2{font-size:31px}
}