@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;400&display=swap');

.decor-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.star1 {
  position: absolute; left: 8vw; top: 12vh; z-index: 1; animation: twinkle 3s infinite alternate; }
.star2 {
  position: absolute; right: 10vw; top: 22vh; z-index: 1; animation: twinkle 2.2s infinite alternate; }
.planet {
  position: absolute; left: 4vw; bottom: 8vh; z-index: 1; }
.line-abstract {
  position: absolute; right: 0vw; bottom: 0vh; z-index: 1; }
@keyframes twinkle {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.15); }
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(120deg, #181c2b 0%, #232526 40%, #7f5af0 100%);
  background-size: 200% 200%;
  animation: bg-move 8s ease-in-out infinite alternate;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes bg-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.container {
  background: rgba(34, 40, 60, 0.22);
  border-radius: 36px;
  box-shadow: 0 8px 32px 0 #7f5af088, 0 1.5px 8px 0 #00eaff33;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  padding: 64px 36px 44px 36px;
  text-align: center;
  max-width: 440px;
  width: 94vw;
  position: relative;
  transition: box-shadow 0.3s, transform 0.3s;
  border: 2px solid rgba(127,90,240,0.18);
  overflow: hidden;
  z-index: 2;
}

.container:hover {
  box-shadow: 0 16px 48px 0 #7f5af0cc, 0 8px 32px 0 #00eaff44;
  transform: translateY(-4px) scale(1.01);
}

.animation {
  margin: 0 auto 32px auto;
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.circle {
  position: absolute;
  border: 6px solid #00eaff;
  opacity: 0.13;
  border-radius: 50%;
  animation: ripple 1.5s infinite linear;
}

.circle:nth-child(2) {
  animation-delay: 0.5s;
}

.circle:nth-child(3) {
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.7;
  }
  100% {
    width: 120px;
    height: 120px;
    opacity: 0;
  }
}

h1 {
  font-size: 4.2rem;
  margin: 0 0 8px 0;
  letter-spacing: 2px;
  font-weight: 700;
}

h2 {
  font-size: 1.6rem;
  color: #fff;
  margin: 0 0 16px 0;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #23252655;
}

p {
  color: #e0e0e0;
  margin-bottom: 32px;
}

.secondary-message {
  color: #b3aaff;
  background: rgba(127,90,240,0.10);
  border-radius: 16px;
  padding: 10px 18px;
  margin: 18px 0 28px 0;
  font-size: 1.08rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 8px #7f5af011;
}
.secondary-icon svg {
  display: block;
}

.glow {
  color: #fff;
  text-shadow: 0 0 24px #7f5af0, 0 0 48px #00eaff, 0 0 96px #00eaff;
  animation: glow-pulse 2s infinite alternate;
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 0 8px #7f5af0cc);
}

@keyframes glow-pulse {
  0% { text-shadow: 0 0 24px #7f5af0, 0 0 48px #00eaff, 0 0 96px #00eaff; }
  100% { text-shadow: 0 0 48px #00eaff, 0 0 96px #7f5af0, 0 0 192px #00eaff; }
}

.scan {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.scan::before {
  content: '';
  position: absolute;
  left: -60%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, rgba(0,234,255,0.0) 0%, rgba(127,90,240,0.5) 50%, rgba(0,234,255,0.0) 100%);
  transform: skewX(-20deg);
  animation: scan-move 2.5s infinite linear;
  z-index: 2;
}
@keyframes scan-move {
  0% { left: -60%; }
  100% { left: 120%; }
}

.fade-in {
  display: inline-block;
  opacity: 0;
  animation: fadeInUp 1.2s 0.5s forwards;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

#astronaut {
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 24px #7f5af0cc);
  transition: filter 0.3s, transform 0.3s;
  cursor: pointer;
  z-index: 2;
}
#astronaut:hover {
  filter: drop-shadow(0 0 48px #00eaffcc) brightness(1.2);
  transform: scale(1.09) rotate(-4deg);
}

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

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: linear-gradient(90deg, #7f5af0 0%, #00eaff 100%);
  color: #fff;
  border-radius: 28px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.08rem;
  box-shadow: 0 2px 24px #7f5af044, 0 2px 16px #00eaff22;
  border: none;
  outline: none;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.home-btn::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 100%);
  opacity: 0.7;
  pointer-events: none;
  border-radius: 28px;
  transition: opacity 0.3s;
}
.home-btn:hover::after {
  opacity: 1;
}
.home-btn .btn-icon {
  font-size: 1.2em;
  margin-right: 4px;
  display: flex;
  align-items: center;
}
.home-btn:hover {
  background: linear-gradient(90deg, #00eaff 0%, #7f5af0 100%);
  color: #232526;
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 4px 32px #00eaff55, 0 2px 24px #7f5af044;
}

@media (max-width: 600px) {
  .container {
    padding: 32px 8px;
    max-width: 99vw;
  }
  h1 {
    font-size: 2.2rem;
  }
  .animation {
    width: 80px;
    height: 80px;
  }
  .circle {
    border-width: 4px;
  }
  .planet {
    left: 0vw; bottom: 2vh; width: 40px; height: 40px;
  }
  .line-abstract {
    width: 60px; height: 20px;
  }
}