:root {
  --bg-dark: #161616;
  --text-white: #ffffff;
  --text-muted-light: #a9a9a9;
  --text-dark: #151515;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 16px;
  color: var(--text-dark);
  background: var(--bg-dark);
}

.wrap {
  max-width: 984px;
  margin: 0 auto;
  padding: 0 24px;
}

/* header */

.site-header {
  background: var(--bg-dark);
  padding: 24px 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f7f7f7;
  text-decoration: none;
}

/* hero */

.hero {
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.6) 100%),
    url("datadudes_hero2.png") center center / cover no-repeat,
    var(--bg-dark);
}

.hero-inner {
  max-width: 800px;
}

.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  color: var(--text-white);
  font-size: 40px;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

@media (min-width: 768px) {
  .hero h1 { font-size: 48px; }
}

/* footer */

.site-footer {
  background: var(--bg-dark);
  padding: 24px 0;
  text-align: center;
}

.site-footer span {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 12px;
  color: var(--text-muted-light);
}