:root{
--bg:#0f0f10;
--panel:#181818;
--text:#f5f5f5;
--accent:#c7894c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif}
.container{width:min(1200px,92%);margin:auto}
header{position:sticky;top:0;background:rgba(15,15,16,.85);backdrop-filter:blur(10px)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.logo{font-size:2rem;font-style:italic;color:var(--accent)}
nav a{color:#fff;text-decoration:none;margin-left:24px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:85vh}
.eyebrow{letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
h1{font-size:4.5rem;line-height:.95;margin:.2em 0}
.hero p{font-size:1.1rem;max-width:500px}
.hero-image img{width:100%;max-height:700px;object-fit:contain}
.buttons{display:flex;gap:16px;margin-top:30px}
.btn{padding:14px 24px;border:1px solid var(--accent);color:#fff;text-decoration:none;border-radius:40px}
.secondary{background:var(--accent);color:#111}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 0 70px}
.card{background:var(--panel);padding:24px;border-radius:18px}
footer{border-top:1px solid #333;padding:30px 0;text-align:center;color:#aaa}
@media(max-width:900px){
.hero{grid-template-columns:1fr}
.cards{grid-template-columns:1fr 1fr}
h1{font-size:3rem}
}
@media(max-width:600px){
.cards{grid-template-columns:1fr}
nav{display:none}
}