


.main-content__generated-signatures.generation-locked .generated-signatures__list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 30em;
  z-index: 500;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(240, 248, 255, 0) 0%,
    rgba(240, 248, 255, 0.82) 58%,
    var(--color-bg, #f0f8ff) 100%
  );
  animation: genLockVeilIn 0.4s ease-out both;
}

@media (max-width: 800px) {
  .main-content__generated-signatures.generation-locked .generated-signatures__list::after {
    height: 44em; 
  }
}
@media (max-width: 500px) {
  .main-content__generated-signatures.generation-locked .generated-signatures__list::after {
    height: 86em; 
  }
}


.generation-lock-block.generation-lock-block--v2 {
  left: 50%;
  transform: translateX(-50%);
  width: min(96%, 720px);
  max-width: 720px;
  background: #fff;
  border: 1px solid rgba(72, 95, 199, 0.14);
  border-radius: 24px;
  box-shadow: 0 32px 84px rgba(20, 28, 80, 0.38);
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  overflow: hidden;
  z-index: 999;
  animation: genLockCardIn 0.42s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.generation-lock-block.generation-lock-block--v2::before {
  display: none;
}

.generation-lock-block--v2 .generation-lock-block__wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.2rem, 2.8vw, 1.6rem);
}


.generation-lock-block--v2 .lock-v2__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
}
.generation-lock-block--v2 .lock-v2__badge {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #485fc7, #6b7ef0);
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(72, 95, 199, 0.34);
}
.generation-lock-block--v2 .lock-v2__badge svg {
  width: auto;
  height: 30px;
  fill: currentColor;
}
.generation-lock-block--v2 .lock-v2__heading {
  display: flex;
  flex-direction: column;

  gap: 0.6rem;
  min-width: 0;
}

.generation-lock-block--v2 .wrapper__title {
  margin: 0;
  font-size: var(--font-size-3, clamp(2rem, 2.1vw, 2.4rem));
  font-weight: 800;
  color: #1c232f;
  line-height: 1.2;
  text-align: left;
  letter-spacing: -0.01em;
}
.generation-lock-block--v2 .wrapper__subtitle {
  margin: 0;
  font-size: var(--font-size-5, clamp(1.4rem, 1.4vw, 1.6rem));
  font-weight: 400;
  color: #5a6273;
  line-height: 1.45;
  text-align: left;
}


.generation-lock-block--v2 .socials {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.generation-lock-block--v2 .socials .socials__social {
  margin: 0;
}
.generation-lock-block--v2 .socials .socials__social .social__wrapper {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(30, 40, 90, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.generation-lock-block--v2 .socials .socials__social .social__wrapper::before {
  display: none;
}
.generation-lock-block--v2 .socials .socials__social .social__wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 11px 24px rgba(30, 40, 90, 0.28);
}
.generation-lock-block--v2 .socials .socials__social .social__wrapper svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}


.generation-lock-block--v2 .lock-v2__divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: #7a8294;

  font-size: var(--font-size-5-6, clamp(1.2rem, 1vw, 1.4rem));
  font-weight: 600;
}
.generation-lock-block--v2 .lock-v2__divider::before,
.generation-lock-block--v2 .lock-v2__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(72, 95, 199, 0.16);
}


.generation-lock-block--v2 .wrapper__pro-block {
  background: linear-gradient(135deg, #485fc7, #5b3fd1);
  padding: clamp(1.2rem, 3vw, 1.6rem) clamp(1.3rem, 3vw, 1.9rem);
  border-radius: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  flex-wrap: wrap;
  box-shadow: 0 16px 38px rgba(72, 95, 199, 0.36);
}
.generation-lock-block--v2 .wrapper__pro-block .pro-block__text {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  color: #fff;

  font-size: var(--font-size-5, clamp(1.4rem, 1.4vw, 1.6rem));
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}
.generation-lock-block--v2 .pro-block__crown {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  fill: #ffd76a;
}
.generation-lock-block--v2 .wrapper__pro-block .pro-block__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #3b3f8f;

  padding: 0.85em 1.8em;
  border-radius: 999px;
  font-size: var(--font-size-5, clamp(1.4rem, 1.4vw, 1.6rem));
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.generation-lock-block--v2 .wrapper__pro-block .pro-block__link::before {
  display: none;
}
.generation-lock-block--v2 .wrapper__pro-block .pro-block__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  filter: brightness(1.02);
}

@media (max-width: 560px) {
  .generation-lock-block.generation-lock-block--v2 {
    padding: clamp(1.3rem, 5vw, 1.7rem);
  }
  .generation-lock-block--v2 .lock-v2__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .generation-lock-block--v2 .wrapper__title,
  .generation-lock-block--v2 .wrapper__subtitle {
    text-align: center;
  }
  .generation-lock-block--v2 .socials .socials__social .social__wrapper {
    width: 48px;
    height: 48px;
  }
  .generation-lock-block--v2 .wrapper__pro-block {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .generation-lock-block--v2 .wrapper__pro-block .pro-block__text {
    justify-content: center;
    text-align: center;
  }
  .generation-lock-block--v2 .wrapper__pro-block .pro-block__link {
    width: 100%;
  }
}

@keyframes genLockCardIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes genLockVeilIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .generation-lock-block.generation-lock-block--v2,
  .generation-lock-block.generation-lock-block--v2::before,
  .main-content__generated-signatures.generation-locked .generated-signatures__list::after {
    animation: none;
  }
}
