:root{
  --bg:#222;
  --panel:#1b1b1b;
  --card:#2a2a2a;
  --text:#fff;
  --muted:rgba(255,255,255,.78);
  --accent:#c58a3a;
  --border:#333;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.brand{color:var(--accent); font-weight:800; letter-spacing:.5px}
.nav{display:none; gap:18px}
.nav a{opacity:.9}
.nav a:hover{color:var(--accent)}
.phone{color:var(--accent); font-weight:700}
@media(min-width:900px){ .nav{display:flex} }

section{
  padding:70px 18px;
  max-width:1100px;
  margin:0 auto;
}
.hero{
  text-align:center;
  padding:80px 18px 50px;
  max-width:1100px; margin:0 auto;
}
.hero h1{margin:0 0 12px; font-size:44px; color:var(--accent)}
h2{font-size:30px; margin:0 0 18px; color:var(--accent)}
p{color:var(--muted)}
.buttons{margin-top:16px}

.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  background:var(--accent);
  color:#000;
}
footer{
  text-align:center;
  padding:40px 18px;
  background:var(--panel);
  border-top:1px solid var(--border);
  color:rgba(255,255,255,.75);
}