*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',sans-serif;
  background:#000;
  color:#fff;
}
.hero{
  height:100vh;
  background:url('../images/hero.jpg') center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.85));
}
.hero-content{
  position:relative;
  max-width:700px;
  animation:fadeUp 1.5s ease;
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:3.2rem;
  margin-bottom:15px;
}
.hero p{
  opacity:.85;
  margin-bottom:30px;
}
.btn{
  padding:14px 36px;
  border:1px solid #fff;
  color:#fff;
  text-decoration:none;
  letter-spacing:1px;
  transition:.3s;
}
.btn:hover{
  background:#fff;
  color:#000;
}
.showcase{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:40px;
  padding:100px 8%;
}
.showcase img{
  width:100%;
  border-radius:16px;
  margin-bottom:20px;
}
.showcase h3{
  font-family:'Playfair Display',serif;
  margin-bottom:8px;
}
.cta{
  text-align:center;
  padding:120px 20px;
  background:#111;
}
footer{
  text-align:center;
  padding:30px;
  font-size:14px;
  opacity:.6;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}