
:root{
  --bg:#0e0e10;
  --panel:#161618;
  --text:#e8e8ea;
  --muted:#b7b7bd;
  --gold:#d4af37;
  --accent:#d4af37;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background:var(--bg); color:var(--text); line-height:1.6;
}
h1,h2,h3{font-family:'Playfair Display',serif; margin:0 0 .6rem}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:.4rem 0 1rem}
a{color:var(--gold); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding: clamp(16px,3vw,28px);}
.site-header{position:relative; overflow:hidden}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 20px; position:sticky; top:0; backdrop-filter:saturate(180%) blur(6px); background:rgba(14,14,16,.6); border-bottom:1px solid #222; z-index:10;}
.brand{font-weight:700; letter-spacing:.5px}
.menu{display:flex; gap:14px; list-style:none; margin:0; padding:0}
.menu a{padding:8px 10px; border-radius:6px}
.menu a:hover{background:#1e1e22}
.menu-btn{display:none; background:transparent; color:var(--text); border:1px solid #333; padding:6px 10px; border-radius:6px}
.btn{display:inline-block; padding:10px 16px; border-radius:8px; border:1px solid var(--accent)}
.btn-primary{background:var(--accent); color:#111; border-color:var(--accent); font-weight:700}
.btn-outline{border-color:#444; color:var(--text)}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:40px 20px 10px; background:linear-gradient(180deg,rgba(212,175,55,.08),transparent 30%);}
.hero-media img{width:100%; height:auto; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.35); filter:saturate(1.05) contrast(1.03)}
.tagline{color:var(--gold); font-weight:600; letter-spacing:.4px}
.sub{color:var(--muted)}
.section{padding:30px 0}
.section-alt{background:var(--panel)}
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start}
.media-stack{display:grid; gap:12px}
.media-stack img{width:100%; border-radius:12px}
.bullets{padding-left:18px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:10px}
.card{background:#1b1b1f; padding:16px; border:1px solid #26262b; border-radius:12px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.grid img{width:100%; height:100%; object-fit:cover; border-radius:12px}
.form{display:grid; gap:10px}
.form input,.form textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #333; background:#0f0f12; color:var(--text)}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.site-footer{border-top:1px solid #222}
.footer-content{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.social{display:flex; gap:14px; align-items:center}
.social a{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #2a2a2f; border-radius:10px; color:var(--text)}
.social a:hover{background:#1a1a1f}
.wa-float{position:fixed; right:16px; bottom:16px; font-size:22px; background:#25D366; color:#111; padding:12px 14px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.35); border:0; text-decoration:none;}
@media (max-width:900px){
  .hero,.two-col{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .menu{display:none; position:absolute; right:12px; top:56px; background:#141418; padding:10px; border:1px solid #222; border-radius:12px; flex-direction:column}
  .menu-btn{display:inline-block}
  .menu.open{display:flex}
}
