/* Lunar footer: the same cratered sphere with an orange glow as the end of the website.
   Used by the pricing page and the app's login / sign-up. */
.moon-footer {
  position: relative; height: 170px; margin-top: 24px; padding: 0; overflow: hidden; border: 0;
  /* the glow fades into the background at the top (no hard edge) */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.moon-footer::before {
  content: ""; position: absolute; left: 50%; top: 82px; width: max(170vw, 1400px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background:
    radial-gradient(ellipse 1.6% 0.45% at 41% 1.6%, rgb(7 10 23 / 0.6) 70%, transparent 74%),
    radial-gradient(ellipse 1% 0.3% at 47% 0.9%, rgb(7 10 23 / 0.55) 70%, transparent 74%),
    radial-gradient(ellipse 2.2% 0.6% at 57% 2.1%, rgb(7 10 23 / 0.55) 70%, transparent 74%),
    radial-gradient(ellipse 1.2% 0.35% at 63% 1.1%, rgb(7 10 23 / 0.5) 70%, transparent 74%),
    radial-gradient(ellipse 1.8% 0.5% at 35% 2.4%, rgb(7 10 23 / 0.5) 70%, transparent 74%),
    radial-gradient(circle at 50% 0%, #2a3160, #171c3c 9%, #0f1329 22%, #0b0f1a 40%);
  box-shadow: 0 -1px 0 #fde68a, 0 -8px 36px rgb(251 146 60 / 0.75), 0 -30px 90px rgb(236 72 153 / 0.42), 0 -70px 160px rgb(168 85 247 / 0.28);
}
.moon-footer .text {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 20px; text-align: center; font-size: 13px; color: rgb(224 231 255 / 0.5); text-shadow: 0 0 8px #0b0f1a;
}
.moon-footer .made { margin: 0; max-width: none; font-size: 14px; color: rgb(224 231 255 / 0.75); }
.moon-footer .heart { display: inline-block; color: #f472b6; animation: moon-beat 1.4s ease-in-out infinite; }
@keyframes moon-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1.05); } 45% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .moon-footer .heart { animation: none; } }
@media (max-width: 600px) { .moon-footer { height: 180px; } .moon-footer::before { top: 74px; } .moon-footer .made { font-size: 13px; } }