body{margin:0;background:#050505;color:#fff;font-family:Arial,sans-serif}
header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 6%;z-index:10}
header nav a{color:#fff;text-decoration:none;margin-left:24px}
.hero{height:88vh;background:url("assets/hero-banner.jpg") center center/cover no-repeat;display:flex;align-items:flex-end;position:relative;padding:0 6% 70px}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(to top,#050505 10%,rgba(0,0,0,.45),rgba(0,0,0,.2))}
.hero-content{position:relative;max-width:540px;z-index:2}
.eyebrow{color:#d4a45a;letter-spacing:.25em;font-size:.9rem}
.hero h1{font-size:clamp(3rem,5vw,5.2rem);line-height:.95;margin:.25em 0}
.hero h1 span{display:block;color:#d4a45a}
.hero p{font-size:1.05rem;line-height:1.8;color:#ddd}
.btn{display:inline-block;margin-top:18px;padding:16px 36px;border:1px solid #d4a45a;color:#d4a45a;text-decoration:none}
#features{padding:70px 6%}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card img{width:100%;height:240px;object-fit:cover;display:block}
.card{text-decoration:none;color:#fff;background:#111}
.card div{padding:18px}
@media(max-width:768px){
header{padding:18px 20px}
header nav{display:none}
.hero{height:82vh;padding:0 20px 42px;background-position:58% center}
.hero h1{font-size:3.4rem}
.hero p{font-size:1rem}
.grid{grid-template-columns:1fr}
.card img{height:200px}
}