/* ===== Base ===== */
:root{
  --bg:#111;
  --text:#ddd;
  --muted:#aaa;
  --black:#000;
  --gold:#d4af37;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Header / Nav ===== */
header{
  background:var(--black);
  color:#f5f5f5;
  padding:12px 16px;
  text-align:center;
  border-bottom:1px solid #222;
}
header h1{
  margin:0 0 6px 0;
  font-size:28px;
  letter-spacing:.5px;
}
header nav a{
  margin:0 14px;
  font-weight:700;
}

/* ===== Hero (with skyline) ===== */
.hero{
  /* CSS file is /css/style.css, image is /assets/skyline.png */
  background:url("../assets/skyline.png") center/cover no-repeat;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}
.hero__overlay{
  background:rgba(0,0,0,.55);
  padding:40px 28px;
  border-radius:10px;
  color:#fff;
  max-width:900px;
}
.hero__overlay h1{
  margin:0 0 8px 0;
  font-size:34px;
}

/* ===== Main content (optional generic spacing) ===== */
main{
  max-width:1000px;
  margin:32px auto;
  padding:0 20px;
}
main ul{margin:0;padding-left:18px}
main p, main li{color:#e0e0e0}

/* ===== Footer ===== */
footer{
  background:var(--black);
  color:var(--muted);
  text-align:center;
  padding:22px 16px;
  margin-top:40px;
  font-size:.95rem;
  border-top:1px solid #222;
}
footer p{margin:6px 0}
footer .compliance{
  font-size:.85rem;
  color:#888;
  margin-top:10px;
}

/* ===== Small screens ===== */
@media (max-width:640px){
  header h1{font-size:22px}
  header nav a{display:inline-block;margin:0 10px}
  .hero{min-height:320px}
  .hero__overlay{padding:28px 20px}
  .hero__overlay h1{font-size:26px}
}