/* style.css - place in same folder */
:root { --bg: #2d2f36; --accent:#00bcd4; }
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#fff}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{background:rgba(0,0,0,0.6);padding:12px 0}
.logo{display:inline-block;margin:0 20px;font-size:20px}
.nav{display:inline-block;float:right;margin-right:20px}
.nav a{color:#fff;text-decoration:none;margin-left:16px;font-weight:600}
.nav a.active{text-decoration:underline}
.hero{
  height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-image: url('background.webp');
  background-position:center;
  background-size:cover;
}
.hero-inner{background:rgba(0,0,0,0.45);padding:20px;border-radius:8px}
.site-footer{background:#111;padding:12px;text-align:center;color:#aaa}