:root{
  --navy:#071f4a;
  --button:#315fa9;
  --page:#f2f2f2;
  --black:#111111;
  --line:#a6a6a6;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Arial, Helvetica, sans-serif;
  background:radial-gradient(circle at 42% 48%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 34%, rgba(255,255,255,0) 60%),
             linear-gradient(135deg, #fafafa 0%, #efefef 52%, #e9e9e9 100%);
  color:var(--navy);
  overflow:hidden;
}
.landing-shell{
  min-height:100vh;
  width:100%;
  position:relative;
  display:grid;
  grid-template-columns:58% 42%;
  align-items:center;
  padding:0 72px 0 92px;
  isolation:isolate;
  overflow:hidden;
}
.soft-o{
  position:absolute;
  left:-450px;
  top:50%;
  width:1500px;
  height:1500px;
  transform:translateY(-50%);
  background:url("../img/ostor-icon.png?v=1") center/contain no-repeat;
  opacity:.075;
  filter:grayscale(100%) brightness(1.28);
  z-index:-3;
  pointer-events:none;
}
.line{
  position:absolute;
  height:2px;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 22px rgba(255,255,255,.35);
  transform:rotate(35deg);
  transform-origin:left center;
  z-index:-2;
  pointer-events:none;
}
.brand-side{min-height:100vh;display:flex;align-items:center}
.brand-wrap{width:min(510px,86%);margin-left:18px;position:relative;z-index:2}
.main-logo{width:100%;height:auto;display:block;object-fit:contain;mix-blend-mode:multiply}
.login-side{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.login-card{
  width:390px;
  min-height:520px;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,246,246,.94) 100%);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 48px rgba(0,0,0,.13);
  padding:24px 18px 26px;
}
.login-card h1{
  margin:0;
  text-align:center;
  color:#1c3765;
  font-size:31px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
}
.login-title{margin:56px 0 14px;text-align:center;color:#182f58;font-size:16px;font-weight:800}
.field{
  width:100%;
  height:43px;
  border:1.6px solid var(--black);
  border-radius:7px;
  background:#fff;
  padding:0 12px;
  font-size:13px;
  color:#122c55;
  outline:none;
  margin-bottom:36px;
}
.field.password{border-color:#173463;margin-bottom:22px}
.field::placeholder{color:#173463;opacity:1}
.field:focus{border-color:#315fa9;box-shadow:0 0 0 3px rgba(49,95,169,.12)}
.login-links{display:flex;flex-direction:column;gap:13px;margin:0 0 62px 2px}
.login-links a{font-size:14px;color:#111;text-decoration:none;font-weight:500}
.login-links a:hover{text-decoration:underline}
.button-row{display:flex;justify-content:flex-end}
.next-btn{
  width:145px;
  height:40px;
  border:0;
  border-radius:6px;
  background:var(--button);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(49,95,169,.18);
}
.next-btn:hover{background:#254f94}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media(max-width:1050px){
  body{overflow:auto}
  .landing-shell{grid-template-columns:1fr;padding:38px 22px;gap:20px}
  .soft-o{left:50%;top:22px;width:720px;height:720px;transform:translateX(-50%)}
  .brand-side{min-height:230px;justify-content:center}
  .brand-wrap{margin-left:0;width:min(460px,92vw)}
  .login-side{min-height:auto;padding-bottom:42px}
  .login-card{width:min(390px,94vw)}
}
@media(max-width:520px){
  .login-card{min-height:auto;padding:22px 14px}
  .login-card h1{font-size:26px}
  .login-title{margin-top:38px}
  .login-links{margin-bottom:42px}
  .button-row{justify-content:stretch}
  .next-btn{width:100%}
}
/* Desktop design scale */
@media screen and (min-width:1051px){
  .landing-shell{
    width:142.857vw !important;
    height:142.857vh !important;
    min-height:142.857vh !important;
    transform:scale(0.70) !important;
    transform-origin:top left !important;
  }

  .brand-side,
  .login-side{
    min-height:142.857vh !important;
  }
}