@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("nunito-latin-600.woff2") format("woff2");
}

* { box-sizing: border-box; }

html { margin: 0; padding: 0; }

body {
  display: flow-root;
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  min-height: 100vh;
  color: #e5ebfa;
  background: radial-gradient(ellipse at 52% 35%, #252746 0%, #131c32 44%, #0b1223 100%);
  background-attachment: fixed;
}

#hero-image {
  padding: 34px 18px 0;
  margin: 0 auto;
  border: 0;
}

#hero-image .launch-scene {
  display: block;
  width: 1040px;
  max-width: 100%;
  max-height: 66vh;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.launch-brand {
  margin: 0 0 18px;
  font-family: "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-align: center;
  color: #a8b7d5;
}

h1 {
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 0 16px;
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1.25;
  font-weight: 600;
  color: #eef2ff;
  text-wrap: balance;
  text-align: center;
}

@media (max-width: 767px) {
  #hero-image { padding: 65px 0 25px; }
  #hero-image .launch-scene { max-width: 100%; }
  .launch-brand { margin-bottom: 14px; font-size: 10px; }
}

.rocket-flight { animation: rocket-lift 7s ease-in-out infinite; }
.rocket-rumble { animation: rocket-rumble 200ms ease-in-out infinite alternate; }
.rocket-exhaust { transform-box: fill-box; transform-origin: center top; animation: exhaust-flicker 350ms ease-in-out infinite alternate; }
.star-sparkle { animation: star-shimmer 4s ease-in-out infinite alternate; }
.star-sparkle.delayed { animation-delay: -2s; }
@keyframes rocket-lift { 0%, 100% { transform: translateY(0) rotate(-3deg); } 45%, 60% { transform: translateY(-58px) rotate(2deg); } }
.rocket-flight { transform-origin: 600px 350px; }
@keyframes rocket-rumble { from { transform: translateX(-0.5px); } to { transform: translateX(0.5px); } }
@keyframes exhaust-flicker { from { transform: scale(0.88, 0.85); opacity: 0.7; } to { transform: scale(1.05, 1.12); opacity: 1; } }
@keyframes star-shimmer { from { opacity: 0.25; } to { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
  .rocket-flight, .rocket-rumble, .rocket-exhaust, .star-sparkle { animation: none; }
}
