:root {
  --bg: #0a0015;
  --gradient: linear-gradient(to bottom, #0a0015, #000000);
  --text: #e0d4b3;
  --gold: #d4af37;
  --gold-glow: #ffd700;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: var(--gradient);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

header {
  padding: 20px 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  position: sticky; top:0; z-index: 100;
}
.logo { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--gold-glow); }
nav a { color: var(--text); margin-left: 30px; text-decoration: none; transition: 0.3s; }
nav a:hover { color: var(--gold); }

.hero {
  height: 90vh;
  min-height: 600px;
  background: url('../img/hero-bg.jpg') center/cover no-repeat fixed;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.hero-overlay {
  position: absolute; inset:0;
  background: linear-gradient(to bottom, rgba(10,0,21,0.7), rgba(0,0,0,0.9));
}
.hero-content { position: relative; z-index: 2; }
.hero h2 { font-family: 'Playfair Display', serif; font-size: 5rem; color: var(--gold-glow); margin-bottom: 20px; text-shadow: 0 0 20px rgba(212,175,55,0.5); }
.hero p { font-size: 1.8rem; margin-bottom: 40px; }
.btn-gold {
  background: var(--gold);
  color: #000;
  padding: 15px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
}
.btn-gold:hover { background: var(--gold-glow); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(212,175,55,0.4); }

.intro { padding: 80px 0; text-align: center; }
.intro h2 { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--gold); margin-bottom: 40px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card {
  background: rgba(10,0,21,0.6);
  border: 1px solid rgba(212,175,55,0.2);
  padding: 30px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: transform 0.3s;
}
.card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
.card h3 { color: var(--gold); margin-bottom: 15px; }
.card a { color: var(--gold); text-decoration: none; }

footer { text-align: center; padding: 40px 0; background: rgba(0,0,0,0.7); font-size: 0.9rem; }