body {
  background:
    radial-gradient(1100px 460px at 14% 6%, rgba(67, 211, 122, 0.14), transparent 46%),
    radial-gradient(920px 380px at 88% 2%, rgba(212, 148, 90, 0.22), transparent 44%),
    linear-gradient(180deg, #061936 0%, #07142c 100%);
}

.wrap {
  width: min(1040px, calc(100% - 28px));
  padding: 48px 0 64px;
}

.hero {
  gap: 16px;
  margin-bottom: 24px;
}

.hero img {
  width: min(440px, 92vw);
}

.hero p {
  max-width: 720px;
  font-size: 16px;
}

.card {
  border-radius: 24px;
  padding: clamp(22px, 3vw, 34px);
}

.actions {
  gap: 14px;
}

.btn {
  min-height: 48px;
  padding: 0 20px;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

@media (max-width: 640px) {
  .wrap {
    width: min(100%, calc(100% - 20px));
    padding: 32px 0 44px;
  }

  .card {
    border-radius: 18px;
    padding: 18px;
  }

  .actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}