.hero {
  background: linear-gradient(135deg, #0d1117, #1b1f2e, #2a1f36, #422b1f, #1b1f2e);
  background-size: 400% 400%;
  color: #c9d1d9;
  padding: 220px 20px;
  text-align: center;
  animation: heroGradient 6s ease infinite;
}

.hero h1 span {
  color: #58a6ff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.hero p {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #c9d1d9;
  opacity: 0.9;
}

.hero-buttons {
  margin-top: 40px;
}

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

.btn {
  background: #21262d;
  color: #58a6ff;
  padding: 12px 25px;
  margin: 5px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(88,166,255,0.3);
}

.btn.secondary {
  background: transparent;
  border: 2px solid #58a6ff;
  color: #58a6ff;
}

.about-snapshot {
  background: linear-gradient(270deg, #0d1117, #422b1f, #21262d, #422b1f, #30363d, #422b1f);
  background-size: 400% 400%;
  color: #c9d1d9;
  animation: gradientMove 6s ease infinite;
}

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

.projects {
  background: linear-gradient(45deg, #12171d, #1e1a2b, #0d3d3d, #12171d);
  background-size: 300% 300%;
  color: #c9d1d9;
  animation: projectsGradient 8s ease-in-out infinite;
}

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

.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.project-card {
  flex: 1 1 250px;
  max-width: 300px;
  background: #1b1f24;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  color: #c9d1d9;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(88,166,255,0.2);
}

.skills {
  background: linear-gradient(180deg, #0d1117, #1a1033, #0d1117, #101a33);
  background-size: 100% 200%;
  color: #c9d1d9;
  animation: skillsGradient 6s ease-in-out infinite;
}

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

.skills ul {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none;
  margin-top: 20px;
  flex-wrap: wrap;
}

.skills li {
  background: #21262d;
  color: #58a6ff;
  padding: 10px 20px;
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skills li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(88,166,255,0.3);
}

.contact-cta {
  background: #21262d;
  color: #58a6ff;
  padding: 60px 20px;
  text-align: center;
  animation: ctaFlash 2s ease-in-out infinite;
}

@keyframes ctaFlash {
  0%, 100% {
    background-color: #21262d;
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.4);
  }
  50% {
    background-color: #2a313b;
    box-shadow: 0 0 25px rgba(88, 166, 255, 0.8);
  }
}