/* =========================================================
   PAGE
========================================================= */

body{

  background:#07070a;

  min-height:calc(100vh-40px);

  overflow-y:auto;

  position:relative;
}

/* BG */

.login-background{

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(124,58,237,0.25),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(91,33,182,0.20),
      transparent 30%
    );

  z-index:-1;
}

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

.login-page{

  min-height:calc(100vh-40px);

  display:grid;

  grid-template-columns:
    1fr
    460px;

  align-items:start;

  padding:40px 60px;
  gap: 60px;
  overflow-y:auto;
}

/* =========================================================
   LEFT
========================================================= */

.login-left{

  max-width:700px;
}

.login-brand{

  display:flex;
  align-items:center;

  gap:18px;

  margin-bottom:30px;
}

.login-logo{

  width:72px;
  height:72px;

  border-radius:22px;

  box-shadow:
    0 15px 40px rgba(124,58,237,0.45);
}

.login-brand h1{

  font-size:54px;
  font-weight:800;

  color:white;
}

.login-badge{

  display:inline-flex;

  padding:
    12px
    20px;

  border-radius:999px;

  background:
    rgba(124,58,237,0.15);

  color:#b794f4;

  font-weight:700;

  margin-bottom:26px;
}

.login-left h2{

  font-size:68px;

  line-height:1.02;

  margin-bottom:28px;

  color:white;
}

.login-left p{

  color:#b7b2cb;

  font-size:20px;

  line-height:1.9;

  max-width:620px;
}

/* FEATURES */

.login-features{

  margin-top:40px;

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:18px;
}

.feature-item{

  padding:18px;

  border-radius:18px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  color:white;

  font-weight:600;
}

/* =========================================================
   RIGHT
========================================================= */

.login-right{

  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:20px;
}

/* CARD */

.login-card{

  width:100%;

  padding:50px;

  border-radius:36px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.45);
}

.login-card h3{

  font-size:38px;

  color:white;

  margin-bottom:10px;
}

.login-subtitle{

  color:#b7b2cb;

  margin-bottom:34px;
}

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

.input-group{

  margin-bottom:24px;
}

.input-group label{

  display:block;

  margin-bottom:10px;

  color:white;

  font-weight:600;
}

.input-group input{

  width:100%;

  height:62px;

  padding:0 20px;

  border-radius:18px;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.04);

  color:white;

  font-size:16px;

  outline:none;

  transition:0.3s;
}

.input-group input:focus{

  border-color:#7c3aed;

  box-shadow:
    0 0 0 4px rgba(124,58,237,0.15);
}

/* BUTTON */

.login-button{

  width:100%;

  height:62px;

  border:none;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #5b21b6
    );

  color:white;

  font-size:17px;
  font-weight:700;

  cursor:pointer;

  transition:0.3s;

  margin-top:10px;

  box-shadow:
    0 15px 40px rgba(124,58,237,0.35);
}

.login-button:hover{

  transform:translateY(-3px);
}

/* OPTIONS */

.login-options{

  margin-top:26px;

  display:flex;
  justify-content:space-between;
}

.login-options a{

  color:#b794f4;

  font-weight:600;

  font-size:14px;
}

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

@media(max-width:1100px){

  .login-page{

    grid-template-columns:1fr;

    gap:60px;
  }

  .login-left{

    text-align:center;

    margin:auto;
  }

  .login-features{

    grid-template-columns:1fr;
  }
}

@media(max-width:700px){

  .login-page{

    padding:30px;
  }

  .login-left h2{

    font-size:42px;
  }

  .login-brand h1{

    font-size:40px;
  }

  .login-card{

    padding:34px;
  }
}