.demo-modal {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

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

  padding: 30px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}


/* =====================================================
   OPEN
===================================================== */

.demo-modal.is-open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}


/* =====================================================
   BACKDROP
===================================================== */

.demo-modal-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.88);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}


/* =====================================================
   CONTAINER
===================================================== */

.demo-modal-container {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 1080px;

  max-height: 92vh;

  overflow-y: auto;

  background: #0a0a0a;

  border: 1px solid #242424;

  border-radius: 20px;

  color: #ffffff;

  transform: translateY(30px);

  transition:
    transform 0.4s cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );

}


.demo-modal.is-open
.demo-modal-container {

  transform: translateY(0);

}


/* =====================================================
   HEADER
===================================================== */

.demo-modal-header {

  height: 64px;

  padding: 0 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #242424;

}


.demo-modal-label {

  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.16em;

  color: #888888;

}


.demo-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #e60023;

}


/* =====================================================
   CLOSE
===================================================== */

.demo-close {

  position: relative;

  width: 38px;

  height: 38px;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

}


.demo-close span {

  position: absolute;

  left: 10px;

  top: 18px;

  width: 18px;

  height: 1px;

  background: #ffffff;

  transition:
    transform 0.25s ease;
}


.demo-close span:first-child {

  transform: rotate(45deg);

}


.demo-close span:last-child {

  transform: rotate(-45deg);

}


.demo-close:hover span:first-child {

  transform: rotate(0);

}


.demo-close:hover span:last-child {

  transform: rotate(0);

}


/* =====================================================
   VIDEO
===================================================== */

.demo-video-wrapper {

  width: 100%;

  background: #000000;

  border-bottom: 1px solid #242424;

}


.demo-video {

  display: block;

  width: 100%;

  height: auto;

  max-height: 600px;

  background: #000000;

  object-fit: contain;

}


/* =====================================================
   CONTENT
===================================================== */

.demo-modal-content {

  display: grid;

  grid-template-columns: 1.3fr 0.7fr;

  gap: 80px;

  padding: 55px 55px 45px;

  border-bottom: 1px solid #242424;

}


.demo-heading {

  min-width: 0;

}


.demo-index {

  display: block;

  margin-bottom: 18px;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.16em;

  color: #666666;

}


.demo-heading h2 {

  margin: 0;

  font-size: clamp(
    32px,
    4vw,
    56px
  );

  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -0.04em;

  color: #ffffff;

}


.demo-description {

  display: flex;

  align-items: flex-end;

}


.demo-description p {

  max-width: 330px;

  margin: 0;

  font-size: 14px;

  line-height: 1.7;

  color: #858585;

}


/* =====================================================
   ACCESS
===================================================== */

.demo-access {

  display: grid;

  grid-template-columns: 0.7fr 1.3fr;

  gap: 50px;

  padding: 34px 55px;

  border-bottom: 1px solid #242424;

}


.demo-access-copy span {

  display: block;

  margin-bottom: 7px;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.16em;

  color: #666666;

}


.demo-access-copy p {

  margin: 0;

  font-size: 13px;

  color: #ffffff;

}


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

.demo-access-form {

  display: flex;

  align-items: stretch;

  border-bottom: 1px solid #555555;

  transition:
    border-color 0.25s ease;
}


.demo-access-form:focus-within {

  border-color: #ffffff;

}


.demo-access-form input {

  flex: 1;

  min-width: 0;

  height: 52px;

  padding: 0;

  border: 0;

  outline: 0;

  background: transparent;

  color: #ffffff;

  font-family: inherit;

  font-size: 14px;

}


.demo-access-form input::placeholder {

  color: #555555;

}


.demo-access-form button {

  display: flex;

  align-items: center;

  gap: 15px;

  height: 52px;

  padding: 0 4px 0 20px;

  border: 0;

  background: transparent;

  color: #ffffff;

  font-family: inherit;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

}


.demo-arrow {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border: 1px solid #333333;

  border-radius: 50%;

  font-size: 16px;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.demo-access-form button:hover
.demo-arrow {

  background: #e60023;

  border-color: #e60023;

  transform: translate(2px, -2px);

}


/* =====================================================
   ERROR
===================================================== */

.demo-error {

  grid-column: 2;

  min-height: 18px;

  margin: -20px 0 0;

  font-size: 11px;

  color: #e60023;

}


/* =====================================================
   FOOTER
===================================================== */

.demo-modal-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 24px;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 0.15em;

  color: #454545;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .demo-modal {

    padding: 10px;

  }


  .demo-modal-container {

    max-height: 95vh;

  }


  .demo-modal-header {

    height: 56px;

    padding: 0 18px;

  }


  .demo-video {

    max-height: 250px;

  }


  .demo-modal-content {

    display: block;

    padding: 35px 24px;

  }


  .demo-heading h2 {

    font-size: 34px;

    line-height: 1;

  }


  .demo-description {

    margin-top: 28px;

  }


  .demo-description p {

    font-size: 13px;

  }


  .demo-access {

    display: block;

    padding: 28px 24px 32px;

  }


  .demo-access-copy {

    margin-bottom: 22px;

  }


  .demo-access-form {

    width: 100%;

  }


  .demo-error {

    margin: 8px 0 0;

  }


  .demo-modal-footer {

    padding: 15px 18px;

    font-size: 7px;

  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

  .demo-modal {

    padding: 0;

  }


  .demo-modal-container {

    width: 100%;

    max-height: 100vh;

    border: 0;

    border-radius: 0;

  }


  .demo-modal-header {

    padding: 0 16px;

  }


  .demo-video {

    max-height: 220px;

  }


  .demo-modal-content {

    padding: 30px 20px;

  }


  .demo-heading h2 {

    font-size: 30px;

  }


  .demo-access {

    padding: 25px 20px 30px;

  }

}