*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: 'Segoe UI', system-ui, sans-serif;
  background:#0f0f12;
  color:#f5f5f5;
  line-height:1.6;
}
.wrap{
  max-width:1100px;
  margin:auto;
  padding:30px;
}
.top{
  background:#0f0f12;
  border-bottom:1px solid #1e1e24;
}
.logo{
  font-size:24px;
  font-weight:800;
  letter-spacing:1px;
}
.call{
  color:#c9a36a;
  text-decoration:none;
  font-weight:600;
}
.top .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.hero{
  background:linear-gradient(135deg,#15151a,#0f0f12);
  text-align:center;
  padding:90px 20px;
}
.hero h1{
  font-size:40px;
  margin-bottom:10px;
}
.hero p{
  color:#b5b5b5;
  margin-bottom:30px;
}
.buttons a{
  display:inline-block;
  margin:6px;
  padding:14px 26px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
}
.buttons a:first-child{
  background:#c9a36a;
  color:#0f0f12;
}
.buttons a:last-child{
  border:1px solid #c9a36a;
  color:#c9a36a;
}
.services{
  text-align:center;
}
.services h2{
  margin-bottom:30px;
  font-size:32px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}
.cards div{
  background:#15151a;
  padding:30px;
  border-radius:18px;
  border:1px solid #1f1f26;
}
.about{
  text-align:center;
}
.about h2{
  font-size:30px;
  margin-bottom:14px;
}
.about p{
  color:#b5b5b5;
}
footer{
  border-top:1px solid #1e1e24;
  text-align:center;
  padding:30px;
  color:#aaa;
  font-size:14px;
}
@media(max-width:768px){
  .hero h1{font-size:30px}
}