body{
  margin:0;
  font-family:Arial,sans-serif;
  color:white;
  height:100vh;
  background:url('background.jpg') no-repeat center/cover;
}
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
}
header,footer,main{position:relative;z-index:2}

header{
  display:flex;
  justify-content:space-between;
  padding:20px 60px;
}

.menu-btn{background:none;border:none;color:white;font-size:1.5rem}

.menu-list{
  display:none;
  position:absolute;
  right:0;
  background:rgba(0,0,0,.8);
  list-style:none;
  padding:10px;
  border-radius:8px;
}
.menu-list.show{display:block}

main{
  height:70vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.step{
  display:none;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(12px);
  padding:40px;
  width:320px;
  border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  animation:fade .4s ease;
}

.step.active{display:block}

input{
  width:100%;
  padding:12px;
  margin:10px 0;
  border:none;
  border-radius:6px;
}

button{
  width:100%;
  padding:12px;
  background:#e50914;
  color:white;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

button:hover{background:#f40612}

.card-row{display:flex;gap:10px}

.error{
  color:#ff4d4d;
  font-size:.85rem;
  min-height:18px;
}

footer{
  padding:20px;
  background:rgba(0,0,0,.5);
}

@keyframes fade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}


.logo {
  font-size: 24px;
  font-weight: 700;
  color: red;
  background: none;
}