main { display: flex; flex-direction: column; }
main > section { padding: clamp(40px, 7vh, 90px) clamp(20px, 5vw, 60px); }


.hero {
  min-height: calc(100dvh - 90px);
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  grid-template-areas: "intro solar" "info solar";
  align-items: center; gap: clamp(16px, 3vw, 40px);
  max-width: 1760px; margin-inline: auto; width: 100%; 
}
.hero-intro { grid-area: intro; }
.solar { grid-area: solar; justify-self: center; }
.planet-info { grid-area: info; }

.welcome {
  font-family: "Sora", sans-serif; font-weight: 500; letter-spacing: 0.04em;
  font-size: clamp(14px, 1.8vw, 17px); color: #cfe0ff; margin-bottom: 10px;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.welcome.show { opacity: 1; transform: none; }
.welcome b { background: linear-gradient(100deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }

.hero-title {
  font-family: "Sora", sans-serif; font-weight: 600; line-height: 1.05;
  font-size: clamp(30px, 5vw, 56px);
  background: linear-gradient(180deg, #fff, #cfe0ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title b { background: linear-gradient(100deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin-top: 14px; color: var(--muted); font-size: clamp(14px, 1.7vw, 18px); max-width: 46ch; line-height: 1.5; }


@media (min-width: 1900px) {
  .hero-title { font-size: 64px; }
  .hero-sub { font-size: 20px; max-width: 52ch; }
  .welcome { font-size: 18px; }
}
@media (min-width: 2400px) {
  .hero-title { font-size: 74px; }
  .hero-sub { font-size: 22px; }
}


@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "solar" "info";
    text-align: center; min-height: auto; gap: clamp(20px, 5vw, 36px);
  }
  .hero-sub { margin-left: auto; margin-right: auto; }
}