:root{
  --bg:#0d0d0f;
  --muted:#bfbfbf;
  --accent:#c69c2f; /* gold */
  --accent-dark:#a98122;
  --card:#141416;
  --max-width:1200px;
  --container-padding:24px;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#eee;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* HEADER / NAV */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(8,8,10,0.7), rgba(8,8,10,0.3));
  backdrop-filter: blur(6px);
  z-index:1000;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.nav-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:12px var(--container-padding);
  display:flex;
  align-items:center;
  gap:18px;
}
.brand img{height:36px}
.main-nav{display:flex;gap:14px;align-items:center;margin-left:auto}
.main-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:6px 8px;
  border-radius:4px;
  font-weight:600;
  font-size:0.95rem;
}
.main-nav a:hover{color:var(--accent); background:rgba(255,255,255,0.02)}
.mobile-toggle{display:none;background:none;border:0;color:var(--muted);font-size:1.25rem}

/* HERO */
.hero{
  height:78vh;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background-size:cover;
  background-position:center;
  margin-top:64px; /* header height */
  overflow:hidden;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,4,6,0.5), rgba(4,4,6,0.6));
}
.hero-inner{
  position:relative;
  text-align:center;
  z-index:2;
  padding: 0 24px;
}
.hero-logo{width:460px; max-width:80%; height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,0.6))}
.hero-tagline{
  margin-top:18px; font-size:1.25rem; color:var(--muted)
}
.hero-cta{margin-top:22px;display:flex;gap:12px;justify-content:center}
.btn{
  display:inline-block;padding:10px 18px;border-radius:6px;text-decoration:none;font-weight:700;
}
.btn.primary{background:var(--accent); color:#111}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.04)}

/* SECTIONS */
.section{padding:64px 0}
.centered .container{max-width:900px;margin:0 auto;padding:0 18px;text-align:center}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--container-padding)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.card{background:var(--card);padding:18px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.dark{background:linear-gradient(180deg, rgba(8,8,10,0.95), rgba(8,8,10,0.96));padding-top:48px;padding-bottom:48px}

/* god cards */
.god-card img{width:100%; height:160px; object-fit:cover; border-radius:6px}
.god-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px; text-align:center; border-radius:8px}

/* FOOTER */
.site-footer{border-top:1px solid rgba(255,255,255,0.03); padding:18px 0; margin-top:28px}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-mark{height:36px;margin-right:12px}

/* RESPONSIVE */
@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .main-nav{display:none}
  .mobile-toggle{display:block;margin-left:auto}
}
@media (max-width:520px){
  .hero{height:52vh}
  .hero-logo{width:85%}
}