/* =========================
   Theme (dark gradient + image)
========================= */
:root{
  --primary: #D70926;

  --bg1: #070b17;
  --bg2: #0b1020;

  --card: rgba(17,26,51,.92);
  --text: #e8eeff;
  --muted: rgba(232,238,255,.72);
  --border: rgba(255,255,255,.14);

  --container-width: 1100px;
  --header-height: 92px;

  /* Header controls */
  --header-radius: 18px;
  --header-margin-top: 20px;
  --header-margin-sides: 30px;
}

/* =========================
   Body Background
========================= */
body{
  background:
    linear-gradient(rgba(7,11,23,.85), rgba(11,16,32,.9)),
    url("images/bg.jpg") center / cover no-repeat fixed;

  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
}

/* =========================
   Layout Container
========================= */
.container{
  max-width: var(--container-width);
  margin: 40px auto;
  padding: 0 20px;
}

/* =========================
   Header
========================= */
.site-header{
  background: var(--primary);
  color:#fff;

  height: var(--header-height);

  margin-top: var(--header-margin-top);
  margin-left: var(--header-margin-sides);
  margin-right: var(--header-margin-sides);

  border-radius: var(--header-radius);

  display: flex;
  align-items: center;
  padding: 0 30px;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* =========================
   Mobile Menu (Light Grey)
========================= */
@media (max-width: 720px){
  .nav-menu{
    background: #f2f2f2 !important;
    color: #111 !important;
  }
  .nav-menu a{
    color:#111 !important;
  }
  .nav-menu a:hover{
    background: rgba(0,0,0,.06) !important;
  }
}

/* =========================
   Cards
========================= */
.card{
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
}

.muted{
  color: var(--muted);
  font-size: 13px;
}