:root {
  --conversion-bg: #071424;
  --conversion-surface: #0b1c2f;
  --conversion-text: #f5f9ff;
  --conversion-muted: #a9b8ca;
  --conversion-cyan: #43d9ff;
  --conversion-yellow: #ffd34e;
  --conversion-yellow-hover: #ffe071;
  --conversion-yellow-text: #07111d;
}

.conversion-modal[hidden] {
  display: none;
}

.conversion-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.conversion-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 5 14 / 76%);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

.conversion-modal__dialog {
  position: relative;
  width: min(100%, 34rem);
  max-height: min(90vh, 48rem);
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 0.0625rem solid rgb(105 190 255 / 28%);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 90% 0%, rgb(67 217 255 / 14%), transparent 16rem),
    linear-gradient(145deg, #0b2038, #061321);
  box-shadow: 0 2rem 7rem rgb(0 0 0 / 52%);
  color: var(--conversion-text);
}

.conversion-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.conversion-modal__header p {
  margin: 0 0 0.5rem;
  color: var(--conversion-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.conversion-modal__header h2 {
  margin: 0;
  color: var(--conversion-text);
  font-size: clamp(1.65rem, 5vw, 2.4rem);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.conversion-modal__close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0.0625rem solid rgb(255 255 255 / 16%);
  border-radius: 999rem;
  background: rgb(255 255 255 / 6%);
  color: var(--conversion-text);
  font: inherit;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.conversion-modal__close:hover {
  border-color: rgb(67 217 255 / 48%);
  background: rgb(67 217 255 / 9%);
}

.conversion-modal__lead {
  margin: 1rem 0 0;
  color: var(--conversion-muted);
  line-height: 1.6;
}

.conversion-modal__form {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.conversion-field {
  display: grid;
  gap: 0.5rem;
  color: rgb(245 249 255 / 90%);
  font-size: 0.875rem;
  font-weight: 650;
}

.conversion-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.conversion-field__label small {
  color: rgb(169 184 202 / 72%);
  font-size: 0.75rem;
  font-weight: 500;
}

.conversion-field input,
.conversion-field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid rgb(169 184 202 / 38%);
  border-radius: 0.875rem;
  outline: 0;
  background: rgb(255 255 255 / 6%);
  color: var(--conversion-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.conversion-field textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.conversion-field input::placeholder,
.conversion-field textarea::placeholder {
  color: rgb(169 184 202 / 58%);
}

.conversion-field input:focus,
.conversion-field textarea:focus {
  border-color: var(--conversion-cyan);
  box-shadow: 0 0 0 0.1875rem rgb(67 217 255 / 14%);
}

.conversion-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.conversion-consent {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  color: rgb(169 184 202 / 88%);
  font-size: 0.75rem;
  line-height: 1.5;
  cursor: pointer;
}

.conversion-consent input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1rem 0 0;
  accent-color: var(--conversion-yellow);
}

.conversion-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 999rem;
  background: var(--conversion-yellow);
  color: var(--conversion-yellow-text);
  font: inherit;
  font-size: 0.925rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}

.conversion-submit:hover:not(:disabled) {
  background: var(--conversion-yellow-hover);
  box-shadow: 0 0.75rem 2rem rgb(255 211 78 / 18%);
}

.conversion-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.conversion-response-time,
.conversion-form-status {
  margin: 0;
  color: rgb(169 184 202 / 78%);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.conversion-form-status:empty {
  display: none;
}

.conversion-form-status.is-success {
  color: #9ef0bd;
}

.conversion-form-status.is-error {
  color: #ffb1b1;
}

.conversion-modal-open {
  overflow: hidden;
}

.conversion-case-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 999rem;
  background: var(--conversion-yellow);
  color: var(--conversion-yellow-text);
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.conversion-case-hero-cta:hover {
  background: var(--conversion-yellow-hover);
  color: var(--conversion-yellow-text);
}

.conversion-catalog-cta,
.conversion-empty-cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 0.0625rem solid rgb(67 217 255 / 26%);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 85% 15%, rgb(67 217 255 / 13%), transparent 15rem),
    linear-gradient(135deg, rgb(12 38 66 / 92%), rgb(5 20 36 / 98%));
  color: var(--conversion-text);
}

.conversion-catalog-cta {
  grid-column: 1 / -1;
}

.conversion-catalog-cta[hidden],
.conversion-empty-cta[hidden] {
  display: none;
}

.conversion-catalog-cta strong,
.conversion-empty-cta strong {
  display: block;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.15;
}

.conversion-catalog-cta p,
.conversion-empty-cta p {
  margin: 0.55rem 0 0;
  color: var(--conversion-muted);
}

.conversion-catalog-cta a,
.conversion-empty-cta a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.2rem;
  border-radius: 999rem;
  background: var(--conversion-yellow);
  color: var(--conversion-yellow-text);
  font-weight: 750;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.conversion-empty-cta {
  margin-top: 1.25rem;
}

.conversion-article-cta {
  margin-top: 2.5rem;
}

.conversion-sticky {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 1rem 1.25rem;
  border: 0.0625rem solid rgb(255 224 113 / 55%);
  border-radius: 999rem;
  background: var(--conversion-yellow);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 46%);
  color: var(--conversion-yellow-text);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

@media (max-width: 48rem) {
  .conversion-modal {
    align-items: end;
    padding: 0;
  }

  .conversion-modal__dialog {
    width: 100%;
    max-height: min(92svh, 50rem);
    border-width: 0.0625rem 0 0;
    border-radius: 1.5rem 1.5rem 0 0;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .conversion-catalog-cta,
  .conversion-empty-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .conversion-catalog-cta a,
  .conversion-empty-cta a {
    width: 100%;
  }

  .conversion-sticky {
    display: flex;
  }

  .conversion-sticky.is-visible {
    transform: translateY(0);
    opacity: 1;
  }

  body.has-conversion-sticky {
    padding-bottom: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-sticky {
    transition: none;
  }
}