:root {
  --fj-black: #050505;
  --fj-red: #e11916;
  --fj-orange: #ff7800;
  --fj-gold: #ffb000;
  --fj-muted: #b9b9b9;
}

html { scroll-behavior: smooth; }
body {
  background: var(--fj-black);
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-nav {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 120, 0, 0.22);
}

.navbar-brand img { height: 44px; width: auto; }
.nav-link { color: rgba(255, 255, 255, .82); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .86rem; }
.nav-link:hover, .nav-link:focus { color: var(--fj-gold); }

.hero {
  min-height: 100vh;
  background-image: url('../img/hero-desktop-1920x1080.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.36) 70%, rgba(0,0,0,.9));
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 3rem;
}

.btn-fire {
  --bs-btn-color: #111;
  --bs-btn-bg: linear-gradient(135deg, var(--fj-gold), var(--fj-orange), var(--fj-red));
  background: linear-gradient(135deg, var(--fj-gold), var(--fj-orange), var(--fj-red));
  border: 0;
  color: #111;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 26px rgba(255, 93, 0, .38);
}
.btn-fire:hover { color: #000; filter: brightness(1.08); }
.btn-outline-fire {
  border: 1px solid rgba(255, 176, 0, .75);
  color: var(--fj-gold);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.btn-outline-fire:hover { background: var(--fj-gold); color: #111; }

.section-block {
  padding: 6rem 0;
  border-top: 1px solid rgba(255, 120, 0, .16);
  background:
    radial-gradient(circle at 20% 0%, rgba(225, 25, 22, .18), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(255, 120, 0, .16), transparent 26%),
    #070707;
}
.section-block.alt { background: #0d0d0d; }
.section-kicker {
  color: var(--fj-gold);
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.section-title {
  font-weight: 950;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.copy-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.spotify-frame {
  border: 1px solid rgba(255, 176, 0, .22);
  box-shadow: 0 24px 60px rgba(255, 72, 0, .12);
}
.email-link { color: var(--fj-gold); font-weight: 900; text-decoration: none; }
.email-link:hover { color: var(--fj-orange); }
.footer {
  background: #000;
  border-top: 1px solid rgba(255, 120, 0, .24);
  color: var(--fj-muted);
}

@media (max-width: 1399.98px) and (min-width: 768px) {
  .hero { background-image: url('../img/hero-tablet-1280x720.jpg'); }
}

@media (max-width: 767.98px) {
  .navbar-brand img { height: 38px; }
  .hero {
    min-height: 100svh;
    background-image: url('../img/hero-mobile-375x812.jpg');
    background-position: center top;
    align-items: flex-end;
  }
  .hero-content { padding-bottom: 1.25rem; }
  .hero-actions .btn { width: 100%; margin-bottom: .75rem; }
  .section-block { padding: 4rem 0; }
}