*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;


}

body{
  min-height:100vh;
  /*background:linear-gradient(100deg,#46A1DA,#d6280f,#000,#2b0c05);*/
    background:linear-gradient(100deg,#ffffff,#ffffff,#ffffff,#ffffff);
  overflow:hidden;
}

/* ================= WRAPPER ================= */
.login-split{
  width:200%;
  height:100vh;
  display:flex;
  transition:1s cubic-bezier(.68,-0.55,.27,1.55);
}

.login-split.signup-active{
  transform:translateX(-50%);
}

/* ================= LEFT PANEL ================= */
.panel{
  width:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ================= BRAND ================= */
.brand-side{
  padding:80px;
  color:black !important;
  max-width:520px;
}

.pill{
  border:2px solid rgba(7, 7, 7, 0.4) !important;
  padding:6px 18px;
  border-radius:30px;
  font-size:12px;
  margin-bottom:30px;
  display:inline-block;
}

.brand-side h1{
  font-size:clamp(3.5rem,6vw,6rem);
  font-weight:900;
  line-height:1;
}

.brand-side p{
  margin-top:20px;
  opacity:.85;
  max-width:420px;
}

/* ================= FORM SIDE ================= */
.form-side{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  perspective:1200px;
}

.form-card{
  width:420px;
  padding:50px 40px;
  border-radius:32px;
  backdrop-filter:blur(22px);
  background:rgba(255,255,255,.06);
  box-shadow:rgba(0,0,0,.35) 0 -50px 36px -28px inset;
  animation:fadeUp .8s ease;
}

.form-card h2{
  color:black !important;
  font-size:30px;
  font-weight:800;
}

.sub{
  margin:8px 0 35px;
  color: rgba(0, 0, 0, 0.8);
  font-size:14px;
}

/* ================= FORM ================= */
.login-form{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.input-group{
  position:relative;
}

.input-group input{
  width:100%;
  padding:14px 6px;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(0, 0, 0, 0.45);
  color:black;
}

.input-group label{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color: rgba(0, 0, 0, 0.7);
  transition:.3s;
  pointer-events:none;
}

.input-group input:focus,
.input-group input:valid{
  outline:none;
  border-color: #000000;
}

.input-group input:focus + label,
.input-group input:valid + label{
  top:-8px;
  font-size:11px;
}

/* ================= BUTTON ================= */
.login-btn{
  padding:15px;
  border:none;
  border-radius:28px;
  background:linear-gradient(90deg,#ff6a00,#46A1DA);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.login-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(255,70,0,.7);
}

/* ================= LINKS ================= */
.extras{
  display:flex;
  justify-content:space-between;
  font-size:12px;
}

.extras a{
  color:#fff;
  opacity:.7;
  text-decoration:none;
}

.extras a:hover{opacity:1}

/* ================= ANIMATION ================= */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* ================= MOBILE ================= */
@media(max-width:900px){

  body{
    overflow:auto;
  }

  .login-split{
    width:100%;
    transform:none !important;
    display:block;
  }

  .panel{
    width:100%;
    display:none;
  }

  /* DEFAULT: LOGIN SHOW */
  .panel:first-child{
    display:block;
  }

  /* WHEN SIGNUP ACTIVE */
  .signup-active .panel:first-child{
    display:none;
  }

  .signup-active .panel:last-child{
    display:block;
  }

  .brand-side{
    display:none;
  }

  .form-side{
    min-height:100vh;
  }
}