/* ===== Hero Banner ===== */
.hero-banner {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));
  min-height: 500px;
  overflow: hidden;
}

.hero-image-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-image-wrap:hover img {
  transform: scale(1.15);
}

.hero-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 60px 40px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: #fff;
}

.hero-overlay h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.hero-overlay p {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
}

@media (max-width: 768px) {
  .hero-banner {
    height: 60vh;
    min-height: 360px;
  }

  .hero-overlay {
    padding: 32px 20px;
  }

  .hero-overlay h1 { font-size: 1.8rem; }
  .hero-overlay p { font-size: 1rem; }
}