.hero {
  width: 100%;
  min-height: 60vh;
  background-image: url("/assets/img/hero.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-overlay {
  background: rgba(0,0,0,0.35);
  padding: 40px 20px;
  border-radius: 12px;
}

.hero h1 {
  font-size: clamp(28px, 6vw, 56px);
  color: #fff;
  margin: 0;
}

.hero p {
  font-size: clamp(16px, 4vw, 24px);
  color: #ffd44d;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .hero {
    min-height: 45vh;
    background-position: center 20%;
  }
}