/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

body{

  min-height:100vh;

  background:#020817;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;

  position:relative;

  padding:20px;
}

/* Background glow */

body::before{

  content:"";

  position:fixed;

  width:450px;
  height:450px;

  background:
  radial-gradient(
    circle,
    rgba(0,191,255,.18),
    transparent 70%
  );

  top:-180px;
  right:-120px;

  filter:blur(120px);
}

body::after{

  content:"";

  position:fixed;

  width:400px;
  height:400px;

  background:
  radial-gradient(
    circle,
    rgba(0,102,255,.15),
    transparent 70%
  );

  bottom:-180px;
  left:-120px;

  filter:blur(120px);
}

/* pages */

.form-page,
.result-page{

  width:100%;
  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;

  position:relative;
  z-index:2;
}

.hidden{
  display:none;
}

/* form */

.form-box{

  width:420px;

  background:
  linear-gradient(
    180deg,
    #10192c,
    #050b18
  );

  border:1px solid rgba(0,191,255,.1);

  border-radius:36px;

  padding:38px;

  box-shadow:
  0 40px 120px rgba(0,0,0,.7);
}

.logo{
  width:90px;
  margin-bottom:24px;
}

.form-box h1{

  color:white;

  font-size:44px;

  font-weight:800;

  letter-spacing:-2px;

  margin-bottom:10px;
}

.form-box p{

  color:#8da4c7;

  margin-bottom:30px;
}

.form-box input{

  width:100%;

  padding:18px;

  margin-bottom:16px;

  border:none;
  outline:none;

  border-radius:18px;

  background:#111d31;

  border:1px solid rgba(255,255,255,.05);

  color:white;
}

.form-box button{

  width:100%;

  padding:18px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    45deg,
    #00bfff,
    #005eff
  );

  color:white;

  font-weight:700;

  cursor:pointer;
}

/* card */

.member-card{

  width:340px;

  border-radius:38px;

  overflow:hidden;

  position:relative;

  padding:30px;

  background:
  linear-gradient(
    rgba(5,10,25,.82),
    rgba(5,10,25,.92)
  ),
  url('prismax-bg.jpg');

  background-size:cover;
  background-position:center;

  border:1px solid rgba(0,191,255,.12);

  box-shadow:
  0 40px 120px rgba(0,0,0,.8);
}

/* overlay */

.overlay{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    180deg,
    rgba(0,0,0,.15),
    rgba(0,0,0,.5)
  );
}

/* top */

.card-top{

  display:flex;
  justify-content:space-between;
  align-items:center;

  position:relative;
  z-index:2;

  margin-bottom:28px;
}

.card-logo{
  width:58px;
}

.status{

  padding:8px 14px;

  border-radius:999px;

  background:rgba(255,255,255,.06);

  color:#7fd9ff;

  font-size:10px;

  font-weight:700;

  letter-spacing:1px;
}

/* image */

.image-wrap{

  display:flex;
  justify-content:center;

  position:relative;
  z-index:2;

  margin-bottom:28px;
}

.profile-img{

  width:180px;
  height:210px;

  object-fit:cover;

  border-radius:24px;

  border:3px solid rgba(0,191,255,.18);
}

/* content */

.card-content{

  text-align:center;

  position:relative;
  z-index:2;
}

.card-content h2{

  color:white;

  font-size:34px;

  font-weight:800;

  letter-spacing:-2px;

  margin-bottom:10px;
}

.role{

  color:#9fd7ff;

  font-size:15px;
}

/* button */

#download-btn{

  margin-top:24px;

  padding:16px 30px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    45deg,
    #00bfff,
    #005eff
  );

  color:white;

  font-weight:700;

  cursor:pointer;
}

/* mobile */

@media(max-width:480px){

  .form-box{
    width:100%;
  }

}