:root{
  --bg:#000; --ink:#fff; --muted:#cfcfcf; --edge:#fff; --card:#0b0b0b;
  --glow:0 0 8px #fff, 0 0 18px #fff; --shadow:0 0 10px rgba(255,255,255,.55), inset 0 0 14px rgba(255,255,255,.2);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  color:var(--ink);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  position:relative;
  overflow-x:hidden;
}

/* ============================= */
/* GLOBAL BACKGROUND IMAGE LAYER */
/* ============================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url('assets/bg.png') center center / cover no-repeat fixed;
  opacity:1;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: radial-gradient(transparent, rgba(0,0,0,.45)),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6));
}

@media(max-width:900px){
  body::before, body::after{
    position:absolute;
  }
}

/* ============================= */
/* STANDARD SITE STYLING BELOW   */
/* ============================= */

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

.wrap{max-width:1100px;margin:0 auto;padding:16px}

header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0}

.logo{
  width:56px;height:56px;border:2px solid var(--edge);box-shadow:var(--shadow);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg,#0a0a0a,#111);
}

.brand h1{font-family:Orbitron,Inter,sans-serif;margin:0;letter-spacing:2px;text-shadow:var(--glow)}
.brand small{display:block;color:var(--muted);margin-top:2px}

nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn{background:#fff;color:#000;border:none;padding:10px 14px;font-weight:800}
.btn-outline{border:2px solid var(--edge);padding:8px 12px;box-shadow:var(--shadow);background:transparent;color:#fff}
.btn-outline:hover{box-shadow:0 0 22px rgba(255,255,255,.9)}

.section-title{font-family:Orbitron,Inter,sans-serif;text-shadow:var(--glow);margin:26px 0 10px}

.card-neon{background:var(--card);border:2px solid var(--edge);box-shadow:var(--shadow);padding:16px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center;margin-top:8px}
.hero h2{font-size:1.9rem;margin:0 0 8px 0;font-family:Orbitron}
.hero p{color:var(--muted)}

footer{margin-top:26px}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:24px;max-width:1100px;margin:0 auto 20px auto}
.footer-col{background:#0a0a0a;border:2px solid #fff;box-shadow:var(--shadow);padding:16px}
.footer-title{font-family:Orbitron,sans-serif;margin:0 0 10px 0;text-shadow:var(--glow)}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{column-count: 2; /* Displays list items in 2 columns */
  column-gap: 20px;margin:6px 0}
.footer-copy{text-align:center;margin-top:10px;color:#fff;text-shadow:0 0 6px #fff}

.divider{display:flex;justify-content:center;margin:12px 0}
.divider svg{width:48px;height:48px;filter:drop-shadow(0 0 6px #fff)}

.watermark{
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),
             radial-gradient(circle at 20% -10%, rgba(255,255,255,.18), transparent 40%);
  padding:10px;
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  nav{width:100%}
}

h1,h2,h3,h4{scroll-margin-top:70px}

/* Ad slots */
.ad-space{border:2px dashed rgba(255,255,255,.45);padding:10px;text-align:center;color:#cfcfcf;font-size:.9rem}

/* Image placeholders */
.ph{display:flex;align-items:center;justify-content:center;background:#111;border:2px solid #fff;box-shadow:var(--shadow);color:#cfcfcf;text-transform:uppercase;letter-spacing:.08em}
.ph-hero{height:280px;font-weight:800}
.ph-wide{height:200px}
.ph-rect{height:160px}
.ph-square{height:160px;aspect-ratio:1/1}

/* Forms */
input,textarea{width:100%;padding:10px;border:1px solid #333;background:#0d0d0d;color:#fff}

/* ===== Global header logo swap ===== */
.logo{
  /* keep your existing border/size/shadow from .logo */
  background: #000 url('assets/logo.png') center / contain no-repeat !important;
}

/* Hide the SVG strokes so only the image shows */
.logo rect,
.logo path { display:none; }