<!-- style.css -->
:root {
  --gold-primary: #FFD700;
  --gold-base: #C5A028;
  --gold-accent: #FFB90F;
  --copper-orange: #E97400;
  --red-fire: #B22222;
  --blue-electric: #0066FF;
  --indigo-night: #191970;
  --black-charcoal: #111111;
  --grey-warm: #D7D7D7;
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('landing-bg.png') no-repeat center center;
  background-size: contain; /* show full image without cutoff */
  background-color: #3d3d3d;   /* fill behind if aspect ratio doesn’t match */
  z-index: -1;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.grid img {
  width: 100%;
  border-radius: 8px;
  border: 2px solid var(--gold-primary);
  transition: transform 0.3s ease;
}

.grid img:hover {
  transform: scale(1.05);
}

footer {
  padding: 20px;
  font-size: 0.9em;
  background: var(--black-charcoal);
  color: var(--gold-base);
  text-align: center;
}