.modal-backdrop{
  position:fixed;
  inset:0;

  background:
    rgba(0,0,0,.6);

  backdrop-filter:blur(12px);

  opacity:0;
  visibility:hidden;

  transition:.3s ease;

  z-index:9998;
}

.modal-backdrop.show{
  opacity:1;
  visibility:visible;
}

/* MODAL */

.modal{
  position:fixed;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%)
    scale(.92);

  width:min(720px,calc(100% - 40px));

  max-height:80vh;

  overflow:auto;

  padding:34px;

  border-radius:32px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

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

  backdrop-filter:blur(24px);

  box-shadow:
    0 30px 120px rgba(0,0,0,.45);

  opacity:0;
  visibility:hidden;

  transition:.35s ease;

  z-index:9999;
}

.modal.show{
  opacity:1;
  visibility:visible;

  transform:
    translate(-50%,-50%)
    scale(1);
}

/* HEADER */

.modal-header{
  display:flex;

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

  margin-bottom:28px;
}

.modal-header h3{
  margin:0;

  color:white;

  font-size:30px;
}

/* CLOSE */

.modal-close{
  width:42px;
  height:42px;

  border:none;

  border-radius:14px;

  cursor:pointer;

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

  color:white;

  font-size:18px;

  transition:.25s ease;
}

.modal-close:hover{
  background:
    rgba(255,255,255,.12);
}

/* CONTENT */

.modal-content{
  color:
    rgba(255,255,255,.72);

  line-height:1.9;

  font-size:16px;
}

.modal-content p{
  margin-bottom:22px;
}

.modal-content a{
  color:#60a5fa;
}