:root{
  --bg:#0e0f10;
  --card:#14171a;
  --muted:#1d2226;
  --border:#2a2f34;
  --txt:#e9edf1;
  --sub:#b7c0c9;
  --accent:#7ad15a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:#d7c07a;text-decoration:none}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:rgba(0,0,0,.5);position:sticky;top:0;backdrop-filter:blur(6px)}
.brand{display:flex;gap:10px;align-items:center;font-weight:800}
.brand .dot{width:10px;height:10px;background:#3bd43b;border-radius:3px;box-shadow:0 0 10px #3bd43b}
.brand span{font-family:"Press Start 2P", monospace}
.nav a{margin-left:18px;color:#cfd6dd}
main{max-width:1100px;margin:20px auto;padding:0 16px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;margin-top:24px;margin-bottom:8px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 22px;margin:28px 0; box-shadow:0 2px 12px rgba(0,0,0,.25)}
.btn{background:#58d66b;border:none;color:#06250d;font-weight:800;border-radius:10px;padding:10px 14px;margin-right:10px;cursor:pointer}
.btn.secondary{background:transparent;color:var(--txt);border:1px solid var(--border)}
.status{background:var(--muted);border:1px solid var(--border);border-radius:12px;padding:10px 14px;color:#cfd6dd}
h1,h2{margin:0 0 14px 0}
h1{font-family:"Press Start 2P", monospace;font-size:42px;line-height:1.15}
h2{font-weight:800}
.sub{color:var(--sub)}
.gallery{position:relative}
.gallery img{border:3px solid var(--accent);width:100%;height:300px;object-fit:cover;border-radius:16px;display:block}
.gallery .legend{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);padding:10px 16px;border-radius:0 0 16px 16px}
.grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0}
.grid-2x2 .card{margin:0}
.faq .qa{padding:10px 0;border-top:1px dashed var(--border)}
.faq .qa:first-child{border-top:none}
.faq .q{font-weight:800}
.faq .a{color:#cfd6dd}
.staff{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.staff-card{background:var(--muted);border:1px solid var(--border);border-radius:12px;padding:12px}
.staff-card{ position:relative; overflow:hidden; }
.staff-card::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, var(--accent) 25%, transparent 25%),
    linear-gradient(-45deg, var(--accent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--accent) 75%),
    linear-gradient(-45deg, transparent 75%, var(--accent) 75%);
  background-size:14px 14px; background-position:0 0,0 7px,7px -7px,-7px 0;
  opacity:.10; pointer-events:none;
}
.staff-card .nick,.staff-card .role,.staff-card .bio{position:relative;z-index:1}
.staff-card .nick{font-weight:800}
.staff-card .role{color:#b9e7a8;font-size:12px;margin-bottom:4px}
.staff-card .bio{color:#dbe9d5}
.footer{display:flex;justify-content:center;align-items:center;background:#000;color:#cfd6dd;padding:18px 12px;border-top:none;margin-top:30px}
:root{
  --bg-image: url('assets/bg-pixabay-1106261.png');
  --bg-brightness: 1;
  --font-heading: "Press Start 2P", monospace;
  --font-base: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body{background-image: var(--bg-image);background-size: cover;background-position: center;background-attachment: fixed;}
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;filter:brightness(var(--bg-brightness))}
.hidden{display:none}
body.with-video{background-image:none !important}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .staff{grid-template-columns:1fr}
}

/* Forced static background image */
body{background-image:url('assets/bg-pixabay-1106261.png') !important;background-size:cover;background-position:center;background-attachment:fixed}


/* === FINAL OVERRIDES: ensure background image always visible (no video configured) === */
html{background-image:url('assets/bg-pixabay-1106261.png') !important;background-size:cover;background-position:center;background-attachment:fixed}
body{background-image:url('assets/bg-pixabay-1106261.png') !important;background-size:cover;background-position:center;background-attachment:fixed}
body.with-video{background-image:inherit !important}


/* === Staff name badge matches Copy IP green === */
.staff-card .nick{
  display:inline-block;
  background: var(--accent);
  color:#06250d;
  padding:4px 10px;
  border-radius:10px;
  line-height:1.2;
  margin-bottom:6px;
}


/* Ensure header is always above hero/gallery */
.header{ z-index: 1000; }
/* Optional: slight top padding to avoid visual clash if any */
main{ padding-top: 4px; }


/* Gallery controls + fade */
.gallery{ position:relative }
.gallery img{ transition: opacity 0.6s ease }
.gal-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.5); border:1px solid var(--border);
  border-radius:12px; width:40px; height:40px; line-height:36px;
  font-size:24px; color:#fff; cursor:pointer;
}
.gal-btn.prev{ left:10px }
.gal-btn.next{ right:10px }
.gal-btn:hover{ background:rgba(0,0,0,.7) }
.hidden{ display:none !important }


/* Dim global background for better contrast */
html, body{
  background-color: rgba(0,0,0,0.4); /* ~40% black overlay => ~60% brightness */
  background-blend-mode: multiply;
}


/* Keep footer at the bottom and match translucent header look */
html, body{ min-height:100%; }
body{ display:flex; flex-direction:column; }
main{ flex:1; }
.footer{
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
}


/* === Configurable background dim via --bg-dim (0–1) === */
:root{ --bg-dim: 0.6; } /* default demo value */
html, body{
  background-color: rgba(0,0,0,var(--bg-dim));
  background-blend-mode: multiply;
}