:root {
  --bg:#0a0a0a;
  --panel:#111;
  --text:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body {
  font-family: Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
header {
  background:var(--panel);
  padding:24px 20px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
header img { height:180px; }
nav {
  background:#000;
  padding:12px 10px;
  text-align:center;
  position:sticky;
  top:0; z-index:1000;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
nav a {
  color:var(--text);
  text-decoration:none;
  margin:0 18px;
  font-weight:700;
  letter-spacing:.2px;
}
section { padding:64px 22px; max-width:1080px; margin:auto; }
h1,h2,h3 { color:var(--text); margin:0 0 16px 0 }
h1{font-size:2.8rem} h2{font-size:2.2rem} h3{font-size:1.4rem; opacity:.9}
p{margin:0 0 14px 0}
ul{margin:10px 0 18px 22px}
li{margin:6px 0}
footer{
  background:var(--panel);
  padding:22px;
  text-align:center;
  font-size:0.95em;
  color:rgba(255,255,255,.7);
  margin-top:50px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.button {
  display:inline-block;
  background:#ffffff;
  color:#000000;
  padding:14px 28px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
}
.hero-center {
  text-align:center; display:flex; flex-direction:column;
  justify-content:center; align-items:center; height:100vh; gap:18px;
  padding:24px;
}
.hero-center img{ height:220px }
.hero-center p{ opacity:.9; max-width:800px }
img.responsive{ max-width:100%; height:auto; }

.hero-center img { height:300px !important; }
.hero-center h1 { font-size:2.6rem; }
.hero-center p { font-size:1.3rem; }