/* CSS Variables */
:root {
  /* Updated Colors - Based on v2 Logo */
  --color-primary-blue: #4A7BA7;
  --color-dark-blue: #3A5F7D;
  --color-light-blue: #5E8FB5;
  --color-accent-orange: #FF6B35;
  --color-warm-orange: #FF8A5B;
  --color-cosmic-cream: #FFF5E8;
  --color-deep-black: #1A1A1A;
  --color-space-dark: #2C394B;
  --color-background: #0D1117;
  
  /* Legacy colors for compatibility */
  --color-sunset-orange: #FF6B35;
  --color-space-navy: #3A5F7D;
  --color-golden-yellow: #FFD700;
  --color-mars-red: #C14242;
  --color-nebula-purple: #8B4B84;
  --color-teal-signal: #4A9B8E;
  --color-deep-space: #0D1117;
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: 'Space Grotesk', -apple-system, 'Helvetica Neue', sans-serif;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-1: 0 1px 3px rgba(26, 59, 92, 0.1);
  --shadow-2: 0 4px 6px rgba(26, 59, 92, 0.1);
  --shadow-3: 0 8px 15px rgba(26, 59, 92, 0.15);
  --shadow-4: 0 20px 25px rgba(26, 59, 92, 0.25);
  
  /* Transitions */
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base Styles */
body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-cosmic-cream);
  background-color: transparent;
  overflow: hidden;
  height: 100vh;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

/* Hero Section */
.hero {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  transform-origin: center center;
}

.hero-background {
  display: none; /* Removed to show night sky */
}

.pattern-overlay {
  display: none; /* Removed to show night sky */
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  max-width: 800px;
}

/* Logo with orbit animation */
.logo-container {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-2xl);
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border: 2px dashed rgba(245, 241, 232, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(60deg);
  animation: orbit-rotate 20s linear infinite;
}

@keyframes orbit-rotate {
  from { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg); }
}

.hero-logo {
  width: 320px;
  height: auto;
  margin-bottom: var(--space-xl);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.hero-title {
  font-size: 4rem;
  color: var(--color-sunset-orange);
  margin-bottom: var(--space-md);
  letter-spacing: 2px;
  text-shadow: 2px 2px 0px var(--color-golden-yellow);
}

.hero-tagline {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-cosmic-cream);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
}

.hero-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(245, 241, 232, 0.8);
  margin-bottom: var(--space-2xl);
  font-family: var(--font-primary);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}


/* Buttons */
.btn {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 32px;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
  display: inline-block;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-dark-blue) 100%);
  color: var(--color-cosmic-cream);
  box-shadow: 0 8px 32px rgba(74, 123, 167, 0.3);
  position: relative;
  overflow: hidden;
  font-size: 1.125rem;
  padding: 16px 48px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.btn-text {
  position: relative;
  z-index: 2;
}

.btn-stars {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  opacity: 0.7;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.btn-secondary {
  background: transparent;
  color: var(--color-cosmic-cream);
  border: 2px solid var(--color-cosmic-cream);
}

.btn-secondary:hover {
  background: var(--color-cosmic-cream);
  color: var(--color-space-navy);
  transform: scale(1.05);
}

/* Features Section */
.features {
  padding: var(--space-4xl) 0;
  background: var(--color-cosmic-cream);
  position: relative;
}

.features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,50 Q300,0 600,50 T1200,50 L1200,100 L0,100 Z' fill='%234A7BA7'/%3E%3C/svg%3E");
  background-size: cover;
  transform: translateY(-99%);
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  color: var(--color-space-navy);
  margin-bottom: var(--space-3xl);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.feature-card {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  transition: all 0.3s var(--ease-out);
  text-align: center;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

.feature-icon {
  margin-bottom: var(--space-lg);
}

.feature-title {
  font-size: 1.25rem;
  color: var(--color-space-navy);
  margin-bottom: var(--space-md);
}

.feature-description {
  color: var(--color-space-navy);
  opacity: 0.7;
  line-height: 1.5;
}

/* CTA Section */
.cta {
  padding: var(--space-4xl) 0;
  background: linear-gradient(135deg, var(--color-sunset-orange) 0%, var(--color-nebula-purple) 100%);
  position: relative;
  overflow: hidden;
}

.cta::before,
.cta::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0.1;
}

.cta::before {
  background: var(--color-golden-yellow);
  top: -150px;
  left: -150px;
}

.cta::after {
  background: var(--color-space-navy);
  bottom: -150px;
  right: -150px;
}

.cta-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: 2rem;
  color: var(--color-cosmic-cream);
  margin-bottom: var(--space-lg);
}

.cta-description {
  font-size: 1.125rem;
  color: var(--color-cosmic-cream);
  opacity: 0.9;
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer */
.footer {
  padding: var(--space-2xl) 0;
  background: var(--color-space-navy);
  color: var(--color-cosmic-cream);
  text-align: center;
}

.footer-text {
  margin-bottom: var(--space-sm);
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--color-cosmic-cream);
  opacity: 0.7;
}



@keyframes float-reverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(20px) rotate(180deg); }
}

/* Responsive Typography */
@media (max-width: 768px) {
  .hero-logo {
    width: 240px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-tagline {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
  }
  
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: var(--space-xl);
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .cta-title {
    font-size: 1.75rem;
  }
  
  /* Fix hero content spacing on mobile */
  .hero-content {
    padding: var(--space-xl);
    max-width: 90%;
  }
  
  /* Adjust logo container for mobile */
  .logo-container {
    margin-bottom: var(--space-lg);
  }
  
  /* Fix status button on mobile */
  .status-text {
    font-size: 1rem;
    padding: var(--space-xs) var(--space-lg);
    letter-spacing: 0.1em;
  }
  
  /* Ensure footer doesn't overlap content */
  .footer {
    position: fixed;
    padding: var(--space-xs) 0;
  }
  
  .footer-content {
    padding: var(--space-md) 0;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .shape,
  .feature-card {
    animation: none;
  }
  
  .feature-card:hover {
    transform: none;
  }
  
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Focus Styles */
:focus {
  outline: 3px solid var(--color-teal-signal);
  outline-offset: 2px;
}

.btn:focus {
  outline-offset: 4px;
}


/* Space View Background */
.space-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  background: radial-gradient(ellipse at top right, #0a0e27 0%, #050511 70%);
  overflow: hidden;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  transform-origin: center center;
}

/* Massive Planet Surface - Made smaller for depth */
.planet-surface {
  position: absolute;
  bottom: -85%;
  right: -30%;
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center top, #FF8A5B 0%, #FF6B35 25%, #4A7BA7 50%, #3A5F7D 80%, #0D1117 100%);
  border-radius: 50%;
  transform: rotate(15deg);
  box-shadow: 
    0 -10px 50px rgba(229, 90, 40, 0.2),
    inset 0 30px 150px rgba(0, 0, 0, 0.4);
  opacity: 0.9;
  z-index: -1;
}

/* Animated Star Layers */
.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
}

.stars-1 {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 40px 70px, #F5F1E8, transparent),
    radial-gradient(1px 1px at 50px 160px, white, transparent),
    radial-gradient(1px 1px at 130px 40px, #F5F1E8, transparent);
  background-size: 200px 200px;
  animation: twinkle 4s ease-in-out infinite;
}

.stars-2 {
  background-image: 
    radial-gradient(1px 1px at 75px 125px, white, transparent),
    radial-gradient(1px 1px at 115px 175px, #F5F1E8, transparent),
    radial-gradient(2px 2px at 180px 10px, white, transparent);
  background-size: 300px 300px;
  animation: twinkle 6s ease-in-out infinite;
  animation-delay: 1s;
}

.stars-3 {
  background-image: 
    radial-gradient(1px 1px at 90px 90px, white, transparent),
    radial-gradient(1px 1px at 150px 180px, #F5F1E8, transparent);
  background-size: 400px 400px;
  animation: twinkle 8s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Realistic Shooting Stars with Dynamic Tails */
.realistic-shooting-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
}

.shooting-star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 60%, transparent 100%);
  border-radius: 50%;
  opacity: 0;
}

/* Individual shooting stars with dynamic tails using box-shadow */
.star-1 {
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 1),
    0 0 40px rgba(255, 255, 255, 0.8),
    15px 8px 30px rgba(255, 255, 255, 0.6),
    30px 15px 20px rgba(255, 255, 255, 0.4),
    45px 23px 10px rgba(255, 255, 255, 0.2);
  animation: star-1-journey 3s linear infinite;
  animation-delay: 0s;
}

.star-2 {
  box-shadow: 
    0 0 25px rgba(255, 255, 255, 1),
    0 0 50px rgba(255, 255, 255, 0.9),
    -20px 12px 35px rgba(255, 255, 255, 0.7),
    -40px 24px 25px rgba(255, 255, 255, 0.5),
    -60px 36px 15px rgba(255, 255, 255, 0.3);
  animation: star-2-journey 2.5s linear infinite;
  animation-delay: 1s;
}

.star-3 {
  box-shadow: 
    0 0 15px rgba(255, 255, 255, 1),
    0 0 30px rgba(255, 255, 255, 0.8),
    12px -5px 25px rgba(255, 255, 255, 0.6),
    24px -10px 15px rgba(255, 255, 255, 0.4);
  animation: star-3-journey 2s linear infinite;
  animation-delay: 2s;
}

.star-4 {
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 1),
    0 0 40px rgba(255, 255, 255, 0.8),
    -15px -8px 30px rgba(255, 255, 255, 0.6),
    -30px -16px 20px rgba(255, 255, 255, 0.4);
  animation: star-4-journey 3.5s linear infinite;
  animation-delay: 0.5s;
}

.star-5 {
  box-shadow: 
    0 0 18px rgba(255, 255, 255, 1),
    0 0 35px rgba(255, 255, 255, 0.8),
    18px 10px 28px rgba(255, 255, 255, 0.6),
    36px 20px 18px rgba(255, 255, 255, 0.4);
  animation: star-5-journey 2.8s linear infinite;
  animation-delay: 3s;
}

.star-6 {
  box-shadow: 
    0 0 22px rgba(255, 255, 255, 1),
    0 0 45px rgba(255, 255, 255, 0.9),
    -25px 15px 35px rgba(255, 255, 255, 0.7),
    -50px 30px 25px rgba(255, 255, 255, 0.5);
  animation: star-6-journey 2.2s linear infinite;
  animation-delay: 1.8s;
}

.star-7 {
  box-shadow: 
    0 0 16px rgba(255, 255, 255, 1),
    0 0 32px rgba(255, 255, 255, 0.8),
    10px -12px 25px rgba(255, 255, 255, 0.6);
  animation: star-7-journey 1.8s linear infinite;
  animation-delay: 4s;
}

.star-8 {
  box-shadow: 
    0 0 24px rgba(255, 255, 255, 1),
    0 0 48px rgba(255, 255, 255, 0.9),
    -18px -10px 32px rgba(255, 255, 255, 0.7),
    -36px -20px 22px rgba(255, 255, 255, 0.5);
  animation: star-8-journey 2.6s linear infinite;
  animation-delay: 2.5s;
}

@keyframes star-1-journey {
  0% {
    top: 10%;
    left: -20px;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    top: 80%;
    left: calc(100% + 20px);
    opacity: 0;
  }
}

@keyframes star-2-journey {
  0% {
    top: 70%;
    right: -20px;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    top: 20%;
    right: calc(100% + 20px);
    opacity: 0;
  }
}

@keyframes star-3-journey {
  0% {
    top: 30%;
    left: -15px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 50%;
    left: calc(100% + 15px);
    opacity: 0;
  }
}

@keyframes star-4-journey {
  0% {
    top: 60%;
    right: -25px;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  100% {
    top: 40%;
    right: calc(100% + 25px);
    opacity: 0;
  }
}

@keyframes star-5-journey {
  0% {
    top: 20%;
    left: -18px;
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  100% {
    top: 75%;
    left: calc(100% + 18px);
    opacity: 0;
  }
}

@keyframes star-6-journey {
  0% {
    top: 85%;
    right: -22px;
    opacity: 0;
  }
  9% {
    opacity: 1;
  }
  91% {
    opacity: 1;
  }
  100% {
    top: 15%;
    right: calc(100% + 22px);
    opacity: 0;
  }
}

@keyframes star-7-journey {
  0% {
    top: 45%;
    left: -12px;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    top: 65%;
    left: calc(100% + 12px);
    opacity: 0;
  }
}

@keyframes star-8-journey {
  0% {
    top: 55%;
    right: -20px;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    top: 35%;
    right: calc(100% + 20px);
    opacity: 0;
  }
}

/* Realistic Comets with Dynamic Tails */
.realistic-comets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
}

.comet {
  position: absolute;
  width: 8px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
}

/* Individual comets with dynamic tails using box-shadow */
.comet-1 {
  background: radial-gradient(ellipse, #ffffff 0%, #e6f3ff 40%, #87ceeb 80%, transparent 100%);
  box-shadow: 
    0 0 25px rgba(255, 255, 255, 0.9),
    0 0 50px rgba(135, 206, 235, 0.7),
    20px 10px 60px rgba(135, 206, 235, 0.6),
    40px 20px 80px rgba(100, 149, 237, 0.5),
    60px 30px 100px rgba(70, 130, 180, 0.4),
    80px 40px 120px rgba(25, 25, 112, 0.3);
  animation: comet-1-journey 15s linear infinite;
  animation-delay: 2s;
}

.comet-2 {
  background: radial-gradient(ellipse, #ffffff 0%, #ffe4e1 40%, #ff69b4 80%, transparent 100%);
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.9),
    0 0 60px rgba(255, 182, 193, 0.8),
    -25px 15px 70px rgba(255, 182, 193, 0.7),
    -50px 30px 90px rgba(255, 105, 180, 0.6),
    -75px 45px 110px rgba(199, 21, 133, 0.5),
    -100px 60px 130px rgba(199, 21, 133, 0.3);
  animation: comet-2-journey 18s linear infinite;
  animation-delay: 8s;
}

.comet-3 {
  background: radial-gradient(ellipse, #ffffff 0%, #fff8dc 40%, #ffd700 80%, transparent 100%);
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 40px rgba(255, 215, 0, 0.8),
    15px -8px 50px rgba(255, 215, 0, 0.7),
    30px -16px 70px rgba(255, 165, 0, 0.6),
    45px -24px 90px rgba(255, 140, 0, 0.5);
  animation: comet-3-journey 12s linear infinite;
  animation-delay: 5s;
}

.comet-4 {
  background: radial-gradient(ellipse, #ffffff 0%, #f0e68c 40%, #9370db 80%, transparent 100%);
  box-shadow: 
    0 0 28px rgba(255, 255, 255, 0.9),
    0 0 55px rgba(147, 112, 219, 0.8),
    -18px -12px 65px rgba(147, 112, 219, 0.7),
    -36px -24px 85px rgba(138, 43, 226, 0.6),
    -54px -36px 105px rgba(128, 0, 128, 0.5);
  animation: comet-4-journey 20s linear infinite;
  animation-delay: 12s;
}

@keyframes comet-1-journey {
  0% {
    top: -5%;
    left: -10%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    top: 70%;
    left: 110%;
    opacity: 0;
  }
}

@keyframes comet-2-journey {
  0% {
    top: 110%;
    right: -10%;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  100% {
    top: 20%;
    right: 110%;
    opacity: 0;
  }
}

@keyframes comet-3-journey {
  0% {
    top: 25%;
    left: -8%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 55%;
    left: 108%;
    opacity: 0;
  }
}

@keyframes comet-4-journey {
  0% {
    top: 75%;
    right: -8%;
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  100% {
    top: 35%;
    right: 108%;
    opacity: 0;
  }
}

/* Random Space Objects */
.space-objects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}

.space-objects::before,
.space-objects::after {
  content: '';
  position: absolute;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 50%;
}

.space-objects::before {
  width: 6px;
  height: 6px;
  top: 40%;
  animation: space-object-1 20s linear infinite;
  animation-delay: 3s;
}

.space-objects::after {
  width: 3px;
  height: 3px;
  top: 70%;
  animation: space-object-2 25s linear infinite;
  animation-delay: 10s;
}

@keyframes space-object-1 {
  0% {
    transform: translateX(100vw) translateY(0);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-100px) translateY(100px);
    opacity: 0;
  }
}

@keyframes space-object-2 {
  0% {
    transform: translateX(-50px) translateY(100vh);
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(100vw) translateY(-100px);
    opacity: 0;
  }
}

/* Distant Planets */
.distant-planets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;
}

.planet {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(1px);
}

.planet-mars {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 30% 30%, #FF6B35, #D63B47);
  top: 20%;
  left: 20%;
  animation: orbit-mars 120s linear infinite;
}

.planet-jupiter {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #D2691E, #8B4513);
  top: 60%;
  right: 25%;
  animation: orbit-jupiter 200s linear infinite;
}

.planet-venus {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 30% 30%, #FFC649, #FFB347);
  bottom: 30%;
  left: 70%;
  animation: orbit-venus 80s linear infinite;
}

@keyframes orbit-mars {
  0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes orbit-jupiter {
  0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

@keyframes orbit-venus {
  0% { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

/* Additional Sparkle Effects */
.additional-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;
}

.sparkle-effect {
  position: absolute;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  animation: sparkle-twinkle 4s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.sparkle-1 {
  top: 10%;
  left: 30%;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 40%;
  right: 30%;
  animation-delay: 1s;
}

.sparkle-3 {
  bottom: 40%;
  left: 20%;
  animation-delay: 2s;
}

.sparkle-4 {
  top: 70%;
  left: 60%;
  animation-delay: 3s;
}

@keyframes sparkle-twinkle {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.3) rotate(180deg); 
  }
}

/* Logo Group */
.logo-group {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 15px;
}

.corner-logo {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.4));
}

.logo-v2 {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.text-logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-cosmic-cream);
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.1em;
}

/* Moon Scene */
.moon-scene {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 120px;
  height: 120px;
  z-index: 10;
}

.moon {
  filter: drop-shadow(0 0 20px rgba(229, 213, 184, 0.5));
}

/* Lander Animation */
.lander-container {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  animation: lander-journey 12s ease-in-out infinite;
}

.lander {
  filter: drop-shadow(0 0 10px rgba(26, 59, 92, 0.3));
}

/* Lander landing and takeoff animation */
@keyframes lander-journey {
  0% {
    /* Starting position - high above moon */
    transform: translateX(-50%) translateY(0) scale(0.8) rotate(0deg);
  }
  20% {
    /* Approaching moon */
    transform: translateX(-50%) translateY(25px) scale(0.9) rotate(-2deg);
  }
  40% {
    /* Landing on moon surface - top edge */
    transform: translateX(-50%) translateY(45px) scale(1) rotate(0deg);
  }
  45% {
    /* Landed - pause */
    transform: translateX(-50%) translateY(45px) scale(1) rotate(0deg);
  }
  50% {
    /* Landed - thruster activation */
    transform: translateX(-50%) translateY(45px) scale(1) rotate(0deg);
  }
  70% {
    /* Taking off */
    transform: translateX(-50%) translateY(25px) scale(0.9) rotate(2deg);
  }
  100% {
    /* Return to start */
    transform: translateX(-50%) translateY(0) scale(0.8) rotate(0deg);
  }
}

/* Thruster animation synced with landing */
.lander .thrusters {
  animation: thruster-fire 12s ease-in-out infinite;
  filter: blur(2px);
  transform-origin: center top;
}

@keyframes thruster-fire {
  0%, 15% {
    opacity: 0.9;
    transform: scaleY(1.5);
  }
  20%, 35% {
    opacity: 0.7;
    transform: scaleY(1);
  }
  40%, 45% {
    opacity: 0;
    transform: scaleY(0.5);
  }
  50%, 65% {
    opacity: 1;
    transform: scaleY(2);
  }
  70%, 85% {
    opacity: 0.8;
    transform: scaleY(1.2);
  }
  90%, 100% {
    opacity: 0;
    transform: scaleY(0.5);
  }
}

/* Exhaust smoke animation */
.lander .exhaust {
  animation: exhaust-smoke 12s ease-in-out infinite;
  filter: blur(4px);
  transform-origin: center top;
}

@keyframes exhaust-smoke {
  0%, 35% {
    opacity: 0;
    transform: scale(0.5) translateY(0);
  }
  38% {
    opacity: 0.6;
    transform: scale(1) translateY(5px);
  }
  42% {
    opacity: 0.4;
    transform: scale(1.5) translateY(10px);
  }
  45%, 48% {
    opacity: 0.2;
    transform: scale(2) translateY(15px);
  }
  50% {
    opacity: 0.8;
    transform: scale(1) translateY(0);
  }
  55%, 70% {
    opacity: 0.5;
    transform: scale(1.8) translateY(8px);
  }
  75%, 100% {
    opacity: 0;
    transform: scale(2.5) translateY(20px);
  }
}

/* Landing Dust Effect */
.landing-dust {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 80px;
  height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}

.dust-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #E8D5B7;
  border-radius: 50%;
  opacity: 0;
  animation: dust-kick 12s ease-in-out infinite;
  box-shadow: 0 0 3px rgba(232, 213, 183, 0.6);
}

/* Left leg dust */
.dust-1 {
  left: 20px;
  top: 0px;
  animation-delay: 0s;
  animation-name: dust-kick-left;
}

.dust-2 {
  left: 18px;
  top: 2px;
  animation-delay: 0.02s;
  animation-name: dust-kick-left;
}

.dust-3 {
  left: 22px;
  top: 1px;
  animation-delay: 0.04s;
  animation-name: dust-kick-left;
}

/* Center/down dust */
.dust-4 {
  left: 38px;
  top: 0px;
  animation-delay: 0.01s;
}

.dust-5 {
  left: 40px;
  top: 1px;
  animation-delay: 0.03s;
}

.dust-6 {
  left: 42px;
  top: 0px;
  animation-delay: 0.05s;
}

/* Right leg dust */
.dust-7 {
  right: 20px;
  top: 0px;
  animation-delay: 0.06s;
  animation-name: dust-kick-right;
}

.dust-8 {
  right: 18px;
  top: 1px;
  animation-delay: 0.07s;
  animation-name: dust-kick-right;
}

.dust-9 {
  right: 22px;
  top: 2px;
  animation-delay: 0.08s;
  animation-name: dust-kick-right;
}

/* Additional center dust */
.dust-10 {
  left: 36px;
  top: 1px;
  animation-delay: 0.09s;
}

.dust-11 {
  left: 44px;
  top: 0px;
  animation-delay: 0.1s;
}

.dust-12 {
  left: 39px;
  top: 2px;
  animation-delay: 0.11s;
}

@keyframes dust-kick {
  0%, 38% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.8);
  }
  40% {
    opacity: 0.9;
    transform: translateY(5px) translateX(0px) scale(1);
  }
  42% {
    opacity: 0.8;
    transform: translateY(12px) translateX(0px) scale(1.2);
  }
  45% {
    opacity: 0.6;
    transform: translateY(22px) translateX(0px) scale(1.5);
  }
  48% {
    opacity: 0.3;
    transform: translateY(35px) translateX(0px) scale(1.8);
  }
  52%, 100% {
    opacity: 0;
    transform: translateY(50px) translateX(0px) scale(2.2);
  }
}

@keyframes dust-kick-left {
  0%, 38% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.8);
  }
  40% {
    opacity: 0.9;
    transform: translateY(3px) translateX(-5px) scale(1);
  }
  42% {
    opacity: 0.8;
    transform: translateY(10px) translateX(-12px) scale(1.2);
  }
  45% {
    opacity: 0.6;
    transform: translateY(20px) translateX(-20px) scale(1.5);
  }
  48% {
    opacity: 0.3;
    transform: translateY(32px) translateX(-28px) scale(1.8);
  }
  52%, 100% {
    opacity: 0;
    transform: translateY(45px) translateX(-35px) scale(2.2);
  }
}

@keyframes dust-kick-right {
  0%, 38% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.8);
  }
  40% {
    opacity: 0.9;
    transform: translateY(3px) translateX(5px) scale(1);
  }
  42% {
    opacity: 0.8;
    transform: translateY(10px) translateX(12px) scale(1.2);
  }
  45% {
    opacity: 0.6;
    transform: translateY(20px) translateX(20px) scale(1.5);
  }
  48% {
    opacity: 0.3;
    transform: translateY(32px) translateX(28px) scale(1.8);
  }
  52%, 100% {
    opacity: 0;
    transform: translateY(45px) translateX(35px) scale(2.2);
  }
}

/* Landing legs extension */
.lander .landing-legs {
  transform-origin: center top;
  animation: legs-deploy 12s ease-in-out infinite;
}

@keyframes legs-deploy {
  0%, 20% {
    transform: scaleY(0.7); /* Retracted */
  }
  30%, 60% {
    transform: scaleY(1); /* Extended */
  }
  70%, 100% {
    transform: scaleY(0.7); /* Retracted again */
  }
}




/* Enhance existing elements for night theme */
.hero {
  background: transparent;
  color: var(--color-cosmic-cream);
}

.hero-background {
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.pattern-overlay {
  background-image: none;
}

/* Adjust hero content for better contrast */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--space-2xl);
  background: radial-gradient(
    circle at center,
    rgba(26, 59, 92, 0.1) 0%,
    transparent 70%
  );
  border-radius: var(--radius-xl);
}

.hero-tagline {
  color: var(--color-cosmic-cream);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* CTA Section */
.cta-section {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* TestFlight Button - Primary CTA */
.testflight-btn {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  background: linear-gradient(135deg, var(--color-golden-yellow) 0%, var(--color-sunset-orange) 100%);
  color: var(--color-deep-space);
  border-radius: var(--radius-full);
  box-shadow: 
    0 4px 20px rgba(255, 215, 0, 0.4),
    0 0 40px rgba(255, 107, 53, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transition: all 0.3s var(--ease-spring);
  position: relative;
  overflow: hidden;
  animation: pulse-glow 2s ease-in-out infinite;
}

.testflight-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: rotate(45deg);
  transition: transform 0.6s;
  transform: translateX(-100%) translateY(-100%);
}

.testflight-btn:hover::before {
  transform: translateX(100%) translateY(100%);
}

.testflight-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 8px 30px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 107, 53, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.btn-icon {
  font-size: 1.5rem;
  display: inline-block;
  animation: rocket-float 3s ease-in-out infinite;
}

.btn-text {
  position: relative;
  z-index: 1;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 
      0 4px 20px rgba(255, 215, 0, 0.4),
      0 0 40px rgba(255, 107, 53, 0.2),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 
      0 4px 30px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(255, 107, 53, 0.4),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }
}

@keyframes rocket-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(-5deg);
  }
  75% {
    transform: translateY(2px) rotate(5deg);
  }
}

/* CTA Note */
.cta-note {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: rgba(245, 241, 232, 0.7);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

/* Coming Soon Status - Now secondary */
.hero-status {
  margin-top: var(--space-lg);
}

.status-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(245, 241, 232, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: var(--space-xs) var(--space-lg);
  border: 2px solid rgba(245, 241, 232, 0.2);
  border-radius: var(--radius-full);
  display: inline-block;
  background: rgba(26, 59, 92, 0.15);
  backdrop-filter: blur(10px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.status-text:hover {
  background: rgba(245, 241, 232, 0.1);
  border-color: rgba(245, 241, 232, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Footer adjustments for night theme */
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(15, 20, 25, 0.9) 0%, transparent 100%);
  backdrop-filter: blur(5px);
  color: var(--color-cosmic-cream);
  z-index: 20;
  padding: var(--space-sm) 0;
}

.footer-content {
  padding: var(--space-xl) 0;
  text-align: center;
}

.footer-copyright {
  font-size: 0.875rem;
  opacity: 0.8;
  letter-spacing: 0.05em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .moon-scene {
    width: 60px;
    height: 60px;
    top: 2%;
    right: 5%;
  }
  
  .moon {
    width: 60px;
    height: 60px;
  }
  
  .lander-container {
    top: -45px;
  }
  
  .lander {
    width: 25px;
    height: 30px;
  }
  
  /* Override duplicate hero-tagline size */
  .hero-tagline {
    font-size: 1.8rem !important;
  }
  
  .hero-logo {
    width: 200px;
  }
  
  /* Adjust planet surface to prevent overlap */
  .planet-surface {
    bottom: -75%;
    opacity: 0.8;
  }
  
  /* Adjust orbit ring size on mobile */
  .orbit-ring {
    width: 110%;
    height: 110%;
  }
  
  /* Ensure hero content has proper z-index */
  .hero {
    padding: var(--space-lg) 0;
  }
  
  /* Responsive CTA adjustments */
  .testflight-btn {
    font-size: 1.25rem;
    padding: var(--space-sm) var(--space-lg);
  }
  
  .btn-icon {
    font-size: 1.25rem;
  }
  
  .cta-note {
    font-size: 0.8rem;
  }
  
  .status-text {
    font-size: 0.9rem;
    padding: var(--space-xs) var(--space-md);
  }
  
  /* Reduce animation distances on mobile */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
}

/* Accessibility - respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lander-container,
  .lander .thrusters,
  .lander .landing-legs {
    animation: none;
  }
  
  .orbit-ring {
    animation: none;
  }
}

/* Screenshots/Demos Page */
.screenshots-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-deep-space) 0%, var(--color-space-navy) 100%);
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 100;
  overflow-y: auto;
}

.screenshots-container {
  min-height: 100vh;
  padding: var(--space-xl);
  max-width: 1400px;
  margin: 0 auto;
}

.back-nav {
  margin-bottom: var(--space-2xl);
}

.back-btn {
  background: rgba(245, 241, 232, 0.1);
  border: 2px solid rgba(245, 241, 232, 0.3);
  color: var(--color-cosmic-cream);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  backdrop-filter: blur(10px);
}

.back-btn:hover {
  background: rgba(245, 241, 232, 0.2);
  border-color: rgba(245, 241, 232, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.screenshots-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--color-cosmic-cream);
}

.coming-soon-blurb {
  text-align: center;
  max-width: 600px;
  padding: var(--space-4xl);
  background: rgba(26, 59, 92, 0.2);
  border: 2px solid rgba(245, 241, 232, 0.15);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.coming-soon-blurb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(245, 241, 232, 0.03), transparent);
  pointer-events: none;
}

.blurb-icon {
  margin-bottom: var(--space-2xl);
  animation: float-gentle 6s ease-in-out infinite;
}

.blurb-icon svg {
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
}

.blurb-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: var(--space-xl);
  background: linear-gradient(135deg, var(--color-cosmic-cream) 0%, var(--color-golden-yellow) 70%, var(--color-sunset-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.blurb-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.decoration-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-golden-yellow);
  opacity: 0.6;
  animation: pulse-dot 3s ease-in-out infinite;
}

.decoration-dot:nth-child(2) {
  animation-delay: 1s;
}

.decoration-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-cosmic-cream), transparent);
  opacity: 0.4;
}

@keyframes float-gentle {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-8px); 
  }
}

@keyframes pulse-dot {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
}

.app-details {
  text-align: left;
  margin: var(--space-2xl) 0;
  display: grid;
  gap: var(--space-xl);
  max-width: 800px;
}

.detail-section {
  padding: var(--space-lg);
  background: rgba(74, 123, 167, 0.1);
  border: 1px solid rgba(245, 241, 232, 0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.detail-section:hover {
  background: rgba(74, 123, 167, 0.15);
  border-color: rgba(245, 241, 232, 0.2);
  transform: translateY(-2px);
}

.detail-section h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-cosmic-cream);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.detail-section p {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.9);
  margin: 0;
}

.launch-info {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

.launch-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-golden-yellow);
  margin: 0 0 var(--space-sm) 0;
}

.launch-subtitle {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: rgba(245, 241, 232, 0.7);
  margin: 0;
  font-style: italic;
}

/* Responsive for screenshots page */
@media (max-width: 768px) {
  .blurb-title {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  
  .coming-soon-blurb {
    padding: var(--space-xl);
    margin: 0 var(--space-sm);
    max-width: calc(100% - var(--space-lg));
  }
  
  .blurb-icon svg {
    width: 80px;
    height: 80px;
  }
  
  .screenshots-container {
    padding: var(--space-md);
    min-height: auto;
  }
  
  .screenshots-content {
    min-height: auto;
    padding: var(--space-lg) 0;
  }
  
  .app-details {
    gap: var(--space-md);
    margin: var(--space-xl) 0;
  }
  
  .detail-section {
    padding: var(--space-md);
  }
  
  .detail-section h3 {
    font-size: 1rem;
    gap: var(--space-xs);
  }
  
  .detail-section p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  
  .launch-info {
    padding: var(--space-md);
    margin-top: var(--space-lg);
  }
  
  .launch-text {
    font-size: 1rem;
  }
  
  .launch-subtitle {
    font-size: 0.875rem;
  }
  
  .back-btn {
    font-size: 0.875rem;
    padding: var(--space-xs) var(--space-md);
  }
}

/* Extra small devices (phones in portrait, < 480px) */
@media (max-width: 480px) {
  body {
    overflow-x: hidden;
  }
  
  .hero {
    min-height: 100vh;
    padding: var(--space-md) 0;
  }
  
  .hero-content {
    padding: var(--space-md);
    width: 95%;
    max-width: none;
  }
  
  .logo-container {
    margin-bottom: var(--space-md);
  }
  
  .hero-logo {
    width: 150px;
  }
  
  .orbit-ring {
    display: none; /* Hide orbit ring on very small screens */
  }
  
  .hero-tagline {
    font-size: 1.5rem !important;
    line-height: 1.2;
    margin-bottom: var(--space-xs);
  }
  
  .hero-subtitle {
    font-size: 0.875rem;
    margin-bottom: var(--space-lg);
  }
  
  .status-text {
    font-size: 0.875rem;
    padding: var(--space-xs) var(--space-md);
  }
  
  /* Reduce moon/lander size further */
  .moon-scene {
    width: 50px;
    height: 50px;
    top: 1%;
    right: 3%;
  }
  
  .moon {
    width: 50px;
    height: 50px;
  }
  
  .lander-container {
    top: -35px;
  }
  
  .lander {
    width: 20px;
    height: 25px;
  }
  
  /* Text logo adjustments */
  .logo-text {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
  }
  
  /* Adjust planet position for small screens */
  .planet-surface {
    bottom: -80%;
    right: -50%;
    width: 150%;
    height: 150%;
  }
  
  /* Footer adjustments */
  .footer-copyright {
    font-size: 0.75rem;
  }
  
  /* Screenshots page adjustments */
  .blurb-title {
    font-size: 1.5rem;
  }
  
  .blurb-icon svg {
    width: 60px;
    height: 60px;
  }
  
  .coming-soon-blurb {
    padding: var(--space-lg);
  }
  
  .detail-section h3 {
    font-size: 0.9rem;
  }
  
  .detail-section p {
    font-size: 0.8rem;
  }
  
  .screenshots-container {
    padding: var(--space-sm);
  }
}

/* Handle landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    padding: var(--space-sm) 0;
  }
  
  .hero-content {
    padding: var(--space-sm);
  }
  
  .logo-container {
    margin-bottom: var(--space-sm);
  }
  
  .hero-logo {
    width: 120px;
  }
  
  .hero-tagline {
    font-size: 1.5rem !important;
    margin-bottom: var(--space-xs);
  }
  
  .hero-subtitle {
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
  }
  
  .moon-scene {
    width: 40px;
    height: 40px;
  }
  
  .moon {
    width: 40px;
    height: 40px;
  }
}

/* Fix for very tall phones (aspect ratio > 2:1) */
@media (max-width: 480px) and (min-aspect-ratio: 2/1) {
  .hero-content {
    top: 45%;
  }
  
  .planet-surface {
    bottom: -85%;
  }
}