:root {
  --bg: #0b0b0b;          /* near black background */
  --bg-soft: #131313;     /* softer dark for sections */
  --card: #1a1a1a;        /* card background */
  --text: #e6e6e6;        /* light gray text */
  --muted: #888888;       /* muted gray text */
  
  /* Accent colors (red survival tone) */
  --accent: #d92d2d;      /* blood red */
  --accent-2: #ff4d4d;    /* brighter red highlight */

  --shadow: 0 8px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:20px}

/* header */
.site-header{background:rgba(6,9,12,.6);backdrop-filter:blur(6px);border-bottom:1px solid #0f1a27}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:22px;color:var(--text);text-decoration:none}
.accent{color:var(--accent)}
.topnav a{color:var(--muted);margin-left:18px;text-decoration:none}
.topnav a:hover{color:var(--text)}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid #0f1a27}
.hero-img{width:100%;height:320px;object-fit:cover;display:block;filter:brightness(.55)}
.hero-overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text)}
.hero-overlay h1{font-size:56px;margin:0 0 6px;font-weight:800}
.hero-overlay .sub{color:var(--muted);margin:0 0 12px}
.hero-ctas{display:flex;gap:12px}

/* buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#081018;font-weight:700;text-decoration:none}
.btn-ghost{background:transparent;border:1px solid #203049;color:var(--text);padding:10px 14px;border-radius:10px}

/* main */
.main-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;padding:32px 0}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid #162235;box-shadow:var(--shadow)}
.server-kv{list-style:none;padding:0;margin:10px 0}
.server-kv li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.03)}
.status{margin-top:12px;padding:10px;background:linear-gradient(0deg, rgba(255,255,255,0.02), transparent);border-radius:8px}
.muted{color:var(--muted);font-size:13px}
.discord-iframe{margin-top:12px}

/* responsive */
@media (max-width:980px){
  .main-grid{grid-template-columns:1fr; padding:20px}
  .hero-img{height:220px}
  .hero-overlay h1{font-size:40px}
  .topnav{display:none}

  .shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem;
}

.shop-item {
  background: var(--card);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.2s ease;
}

.shop-item:hover {
  transform: translateY(-5px);
}

.shop-item h2 {
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.shop-item .price {
  display: block;
  font-size: 1.5rem;
  margin: 1rem 0;
  color: var(--accent-2);
  font-weight: bold;
}

}