/* =========================================
   1. GLOBAL RESET & VARIABLES
   ========================================= */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

:root {
  /* Backgrounds */
  --bg:          #07080F;
  --surface:     #0C0E1B;
  --surface-2:   #11142A;
  
  /* Premium Gold */
  --gold:        #D4AF37; 
  --gold-faint:  rgba(212, 175, 55, 0.07);
  --gold-border: rgba(212, 175, 55, 0.25);
  --gold-mid:    rgba(212, 175, 55, 0.45);
  
  /* Text Colors */
  --text:        #FFFFFF;
  --muted:       #E2E2EB;
  --dim:         #A8A8B8;
  --border:      #2A2B3D; 
  --red:         #E57373;
  
  /* Fonts */
  --ff:          'Poppins', sans-serif;
}

/* =========================================
   2. BASE TYPOGRAPHY & LAYOUT
   ========================================= */
html { 
  scroll-behavior: smooth; 
}

body {
  background: var(--bg);
  /* Added the subtle yellowish shine to the background */
  background-image: radial-gradient(circle at top center, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
  color: var(--text);
  font-family: var(--ff);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100dvh;
}

/* =========================================
   3. GLOBAL NAVIGATION HEADER (.hd)
   ========================================= */
.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky; 
  top: 0; 
  background: rgba(7, 8, 15, 0.92);
  backdrop-filter: blur(14px);
  z-index: 100;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}

.hd-tag {
  font-family: var(--ff);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Global Header Mobile Responsiveness */
@media (max-width: 820px) {
  .hd { 
    padding: 1.1rem 1.5rem; 
  }
  .hd-tag { 
    display: none; 
  }
}