/* General resets and futuristic look */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    height: 100%;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    background: radial-gradient(circle at center, #0d0d1a 0%, #05051a 100%);
    overflow-x: hidden;
}

/* --- Animations --- */
@keyframes starry-sky {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes glowing {
    0% { box-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14; }
    50% { box-shadow: 0 0 20px #39ff14, 0 0 40px #39ff14; }
    100% { box-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14; }
}

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

@keyframes pulse-glow {
    0% { text-shadow: 0 0 10px #0ff, 0 0 20px #0ff; }
    50% { text-shadow: 0 0 15px #0ff, 0 0 30px #0ff; }
    100% { text-shadow: 0 0 10px #0ff, 0 0 20px #0ff; }
}

@keyframes rocket-float {
    0% { transform: translate(0, 0) rotate(45deg); }
    50% { transform: translate(5px, -10px) rotate(45deg); }
    100% { transform: translate(0, 0) rotate(45deg); }
}

@keyframes rocket-fly {
    0% { left: -60px; top: 60%; }
    50% { left: 110%; top: 40%; }
    100% { left: -60px; top: 60%; }
}

@keyframes shooting-star {
    0%   { transform: translateX(0) rotate(-45deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateX(1800px) translateY(600px) rotate(-45deg); opacity: 0; }
}

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

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 200px white, 300px 500px white, 700px 120px white,
        900px 400px white, 1200px 800px white, 150px 900px white,
        400px 700px white, 800px 100px white, 1300px 600px white,
        600px 300px white, 1100px 200px white, 1400px 400px white;
    
    animation: starry-sky 240s linear infinite;
    z-index: 0;
}


.shooting-star {
    position: fixed;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent); 
    opacity: 0;
    transform: rotate(-45deg);
    animation: shooting-star 4s linear infinite;
}

/* Multiple stars at different places */
.shooting-star:nth-child(1) { top: 15%; left: -200px; animation-delay: 0s; }
.shooting-star:nth-child(2) { top: 35%; left: -200px; animation-delay: 3s; }
.shooting-star:nth-child(3) { top: 55%; left: -200px; animation-delay: 6s; }
.shooting-star:nth-child(4) { top: 75%; left: -200px; animation-delay: 9s; }

/* Starfield layer */
.stars {
  position: fixed;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 
    50px 100px white,
    120px 300px white,
    200px 80px white,
    400px 150px white,
    600px 400px white,
    900px 700px white,
    1200px 500px white,
    1400px 200px white,
    1600px 900px white,
    1800px 300px white,
    300px 600px white,
    700px 900px white,
    1000px 200px white,
    1300px 800px white,
    1700px 600px white;
  z-index: 0;
}

.stars-small {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: white;
  border-radius: 50%;
  opacity: 0.6;
  box-shadow: 
    80px 400px white,
    300px 200px white,
    700px 100px white,
    1500px 300px white,
    1700px 800px white,
    1900px 600px white;
}

.stars-big {
  position: fixed;
  top: 0; left: 0;
  width: 3px; height: 3px;
  background: white;
  border-radius: 50%;
  opacity: 0.9;
  box-shadow: 
    200px 300px white,
    600px 700px white,
    1000px 500px white,
    1400px 200px white,
    1800px 700px white;
}

.stars, .stars-small, .stars-big {
  animation: twinkle 3s infinite alternate ease-in-out;
}

/* --- Navbar --- */
.main-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    background: rgba(0,0,0,0.3);
    border-radius: 50px;
    padding: 10px 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

.nav__logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #92e6a7;
    text-decoration: none;
    letter-spacing: 1px;
}

.nav__links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav__links a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s ease;
}
.nav__links a::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0;
    width: 0; height: 2px;
    background-color: #0ff;
    transition: width 0.3s ease;
}
.nav__links a:hover { color: #0ff; }
.nav__links a:hover::after { width: 100%; }

.nav__checkbox {
  display: none;
}

/* Hamburger icon */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  z-index: 200;
}

.nav__toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #92e6a7;
  border-radius: 3px;
  transition: 0.3s;
}

/* --- Hero --- */
.hero {
    position: relative;
    z-index: 10;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    padding: 20px;
}

.hero__content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; 
    text-align: center;
    width: 90%;
    max-width: 800px;
}


/* Mars planet */
.planet-container {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: float 6s ease-in-out infinite;
}

.planet {
    width: clamp(200px, 40vw, 400px);
    height: clamp(200px, 40vw, 400px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff7043, #b3392b, #5c1a0f);
    box-shadow: 
        inset 12px 12px 25px rgba(0, 0, 0, 0.4), 
        inset -8px -8px 20px rgba(255, 255, 255, 0.08),
        0 0 100px rgba(255, 111, 60, 0.5);
    opacity: 0.95;
    position: relative;
    overflow: hidden;
    
    
    animation: float 6s ease-in-out infinite, rotate-mars 60s linear infinite;
}

/* Softer craters */
.planet span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,0.35), transparent 65%);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.6),
                inset -2px -2px 4px rgba(255,255,255,0.1);
    opacity: 0.8;
}

/* Crater placement */
.planet span:nth-child(1){ width: 14%; height: 14%; top: 28%; left: 22%; }
.planet span:nth-child(2){ width: 10%; height: 10%; top: 50%; left: 70%; }
.planet span:nth-child(3){ width: 12%; height: 12%; top: 65%; left: 40%; }
.planet span:nth-child(4){ width: 8%;  height: 8%;  top: 40%; left: 55%; }
.planet span:nth-child(5){ width: 16%; height: 16%; top: 75%; left: 20%; }

/* Dusty texture overlay */
.planet::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    background-image: 
        radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        radial-gradient(rgba(0,0,0,0.15) 1px, transparent 1px);
    background-size: 4px 4px, 6px 6px;
    mix-blend-mode: overlay;
    opacity: 0.4;
    pointer-events: none;
}

/* Rocket */
.rocket {
    position: absolute;
    width: 50px;
    height: auto;
    font-size: 50px;
    top: 50%;
    left: -20px; 
    transform: translateY(-50%) rotate(45deg);
    animation: rocket-float 3s ease-in-out infinite, rocket-fly 15s linear infinite alternate;
    z-index: 5;
}

.hero__content { position: relative; z-index: 10; }

.hero__headline {
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: bold;
    color: #92e6a7;
    text-transform: uppercase;
    text-shadow: 0 0 10px #92e6a7, 0 0 20px #92e6a7;
    margin-bottom: 20px;
    animation: pulse-glow 3s ease-in-out infinite;
}

.hero__subheadline {
    font-size: clamp(1rem, 3vw, 2rem);
    font-weight: 300;
    color: #e0e0e0;
    margin-bottom: 40px;
    max-width: 700px;
}

.hero__cta-button {
    padding: 15px 40px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #121212;
    background: #92e6a7;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px #92e6a7;
    animation: glowing 3s ease-in-out infinite;
}
.hero__cta-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 0 25px #92e6a7, 0 0 50px #92e6a7;
}

/* --- Services --- */
.services { padding: 80px 20px; text-align: center; background: #05051a; }
.services h2 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 60px; }
.services__container { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.service-card { background: rgba(255,255,255,0.05); border-radius: 15px; padding: 40px; max-width: 350px; transition: 0.3s; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,255,255,0.3); }
.service-card h3 { color: #0ff; margin-bottom: 15px; }

/* --- Pricing --- */
.pricing { padding: 80px 20px; text-align: center; background: #0d0d1a; }
.pricing h2 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 60px; }
.pricing__container { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.pricing-card { background: rgba(255,255,255,0.05); border-radius: 15px; padding: 40px; max-width: 300px; transition: 0.3s; }
.pricing-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(255,111,60,0.5); }
.pricing-card h3 { color: #ff6f3c; margin-bottom: 15px; }

/* --- Contact --- */
.contact { padding: 80px 20px; text-align: center; background: #05051a; }
.contact h2 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 40px; }
.contact__form { display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin: 0 auto; }
.contact__form input, .contact__form textarea { padding: 15px; border-radius: 10px; border: none; background: rgba(255,255,255,0.1); color: #fff; }
.contact__form button { padding: 15px; border-radius: 50px; border: none; font-size: 1.2rem; font-weight: bold; cursor: pointer; background: #39ff14; color: #121212; box-shadow: 0 0 20px #39ff14; transition: 0.3s; }
.contact__form button:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 0 30px #39ff14; }

/* --- Footer --- */
.main-footer { padding: 20px; text-align: center; background: #05051a; border-top: 1px solid rgba(255,255,255,0.1); }
.main-footer p { font-size: 0.9rem; color: #888; }


/* --- Responsive Design --- */
@media (max-width: 1024px) {
  .nav__links {
    gap: 20px;
  }

  .service-card,
  .pricing-card {
    max-width: 45%;
  }
}

@media (max-width: 768px) {
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: absolute;
    top: 100%;       /* right below navbar */
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 0 0 15px 15px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    display: none;
    z-index: 150;    /* above planet & rocket */
  }

  /* Show menu when checkbox checked */
  .nav__checkbox:checked ~ .nav__links {
    display: flex;
    animation: slideDown 0.3s ease forwards;
  }

  /* Animate hamburger → "X" */
  .nav__checkbox:checked + .nav__toggle span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
  }
  .nav__checkbox:checked + .nav__toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav__checkbox:checked + .nav__toggle span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
  }

  .hero {
    min-height: 100dvh;  /* ensures it matches the real visible screen */
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero__content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;   /* remove absolute centering */
    width: 90%;
    text-align: center;
  }

  .hero__headline {
    margin-top: 10px;
    font-size: 1.8rem;
  }

  .hero__subheadline {
    font-size: 1rem;
  }

  .hero__cta-button {
    padding: 12px 25px;
    font-size: 1rem;
  }

  .planet {
    width: 180px;
    height: 180px;
  }

  .rocket {
    width: 35px;
  }

  .services__container,
  .pricing__container {
    flex-direction: column;
    align-items: center;
  }

  .service-card,
  .pricing-card {
    max-width: 90%;
  }

  .contact__form {
    width: 100%;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .nav__logo {
    font-size: 1.2rem;
  }

  .hero__headline {
    font-size: 1.5rem;
  }

  .hero__subheadline {
    font-size: 0.9rem;
  }

  .hero__cta-button {
    font-size: 0.9rem;
    padding: 10px 20px;
  }

  .service-card,
  .pricing-card {
    padding: 20px;
  }

  .contact__form input,
  .contact__form textarea {
    font-size: 0.9rem;
    padding: 10px;
  }

  .contact__form button {
    font-size: 1rem;
    padding: 12px;
  }
}