body {
  margin: 0;
  background: #0b0c10;
  color: #e6e6e6;
  font-family: Arial, sans-serif;
}

.hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(180deg, #14161c, #0b0c10);
}

.hero h1 {
  font-size: 52px;
  letter-spacing: 3px;
  color: #dcdcff;
}

.hero p {
  font-size: 20px;
  color: #aaa;
}

.projects {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 40px 20px;
  gap: 40px;
}

.project {
  text-align: center;
  width: 280px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.project:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px #888);
}

.emblem {
  width: 260px;
  margin-bottom: 15px;
}

.project h2 {
  color: #cfcfff;
  margin-bottom: 10px;
}

.project p {
  color: #999;
  font-size: 15px;
}

.about {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  text-align: center;
}

.about h2 {
  color: #b8a0ff;
  margin-bottom: 20px;
}

footer {
  text-align: center;
  padding: 20px;
  color: #777;
  margin-top: 40px;
}