:root{
  --gold:#c6a85a;
  --bg:#0b0b0b;
  --card:#121212;
  --text:#f5f5f5;
  --muted:#b5b5b5;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
}

.container{width:92%;max-width:1200px;margin:auto}

header{
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #1a1a1a;
}

.logo{font-size:22px;font-weight:600;color:var(--gold);letter-spacing:2px}

nav{display:flex;flex-wrap:wrap;gap:15px}

nav a{
  color:var(--text);
  text-decoration:none;
  font-size:14px;
}

nav a:hover{color:var(--gold)}

.hero{text-align:center;padding:70px 15px}

.hero h1{font-size:32px;color:var(--gold);margin-bottom:15px}

.hero p{max-width:650px;margin:auto;color:var(--muted);font-size:15px}

section{padding:60px 0}

.section-title{text-align:center;margin-bottom:30px;font-size:24px;color:var(--gold)}

.services{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.card{
  background:var(--card);
  padding:20px;
  border:1px solid #1c1c1c;
}

.card h3{color:var(--gold);margin-bottom:8px;font-size:18px}

.card p{color:var(--muted);font-size:14px}

.btn{
  display:inline-block;
  margin-top:20px;
  padding:10px 22px;
  border:1px solid var(--gold);
  color:var(--gold);
  text-decoration:none;
  font-size:14px;
}

.btn:hover{background:var(--gold);color:#000}

footer{
  background:#050505;
  padding:25px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid #1a1a1a;
}

@media(min-width:768px){
  .hero h1{font-size:42px}
  .services{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1024px){
  .services{grid-template-columns:repeat(4,1fr)}
}