/*
=============================================================
  BLASTFM LIMITED - THEME STYLESHEET
  Version: 1.0
  
  TABLE OF CONTENTS:
  0.  Google Fonts Import
  1.  Design Tokens (CSS Variables)
  2.  Base & Reset
  3.  Typography
  4.  Navigation
  5.  Mobile Nav
  6.  Hero Section
  7.  Trust Bar
  8.  How It Works
  9.  Services Grid
  10. Testimonials
  11. Radio Station Banner
  12. Footer
  13. Standard Page Layout (non-homepage pages)
  14. E107 Content Resets
  15. Responsive Breakpoints
=============================================================
*/


/* ============================================================
   0. GOOGLE FONTS IMPORT
   Loads Syne (headings) and DM Sans (body) from Google Fonts.
   This MUST be at the very top of the file before anything else.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');


/* ============================================================
   1. DESIGN TOKENS
   Edit these variables to restyle the whole site.
   --gold     : primary accent, used ONLY on main CTAs
   --bg       : darkest background (page base)
   --bg-2     : slightly lighter, used for sections
   --bg-3     : card backgrounds
   --text     : primary text
   --text-muted : secondary text
============================================================ */
:root {
  --gold:        #F5BC2E;
  --gold-dark:   #C9960F;
  --bg:          #07090D;
  --bg-2:        #0C1017;
  --bg-3:        #121820;
  --bg-4:        #181F29;
  --bg-5:        #1E2633;
  --text:        #EEEAE5;
  --text-dim:    #B8C4D0;
  --text-muted:  #6E7F92;
  --border:      rgba(255,255,255,0.06);
  --border-md:   rgba(255,255,255,0.10);
  --font-head:   'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --radius:      10px;
  --radius-lg:   16px;
  --max-width:   1120px;
  --transition:  0.2s ease;
}


/* ============================================================
   2. BASE & RESET
   Scoped to .bfm-body to avoid conflicts with E107 core CSS.
============================================================ */

.bfm-body {
  font-family: var(--font-body);
  font-size: 16px; /* increased from 15px */
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  /*-webkit-font-smoothing: antialiased;*/
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.bfm-body *, .bfm-body *::before, .bfm-body *::after {
  box-sizing: border-box;
}

.bfm-body a { text-decoration: none; color: inherit; }
.bfm-body img { max-width: 100%; display: block; }
.bfm-body ul { list-style: none; margin: 0; padding: 0; }

/* Shared container */
.bfm-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section tag (gold label above headings) */
.bfm-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(245,188,46,0.08);
  border: 1px solid rgba(245,188,46,0.2);
  padding: 5px 12px;
  border-radius: 50px;
}

/* Remove the em dash line before tag */
.bfm-tag::before {
  display: none;
}


/* ============================================================
   3. TYPOGRAPHY
============================================================ */
.bfm-section-title {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; color: var(--text);
  margin: 0.65rem 0 0.85rem;
}

.bfm-section-sub {
  font-size: 0.9rem; color: var(--text-muted);
  max-width: 480px; line-height: 1.7;
}

.bfm-section-header { margin-bottom: 3rem; }


/* ============================================================
   4. NAVIGATION
   Sticky top bar. Same on every page.
   TO EDIT: update links, logo, CTA text in theme.php
============================================================ */
.bfm-nav {
  position: sticky; top: 0; z-index: 1000;
  height: 66px;
  background: rgba(7,9,13,0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
/*  -webkit-backdrop-filter: blur(12px);*/
  display: flex; align-items: center;
}

.bfm-nav-inner {
  max-width: var(--max-width); margin: 0 auto;
  padding: 0 2rem; width: 100%;
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem;
  font-size: 17px;
}

/* Logo */
.bfm-nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
  flex-shrink: 0;
}

.bfm-nav-logo-mark {
  width: 26px; height: 26px;
  background: var(--gold); border-radius: 6px;
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}

.bfm-nav-logo-mark svg { width: 13px; height: 13px; fill: #07090D; }
.bfm-nav-logo-accent { color: var(--gold); }

/* Nav links */
.bfm-nav-links {
  display: flex; align-items: center;
  gap: 0.25rem; list-style: none;
  font-size: 17px;
}

.bfm-nav-links a {
  display: block; padding: 0.4rem 0.85rem;
  font-size: 0.82rem; font-weight: 400;
  color: var(--text-muted); border-radius: 6px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.bfm-nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.04); }

/* Dropdown */
.bfm-nav-dropdown { position: relative; list-style: none; }

.bfm-nav-dropdown-toggle {
  display: flex; align-items: center; gap: 4px; cursor: default;
}

.bfm-chevron {
  font-size: 0.5rem; opacity: 0.5;
  margin-top: 1px; transition: transform var(--transition);
  display: inline-block;
}

.bfm-nav-dropdown:hover .bfm-chevron { transform: rotate(180deg); }

.bfm-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--bg-2); border: 1px solid var(--border-md);
  border-radius: var(--radius-lg); padding: 8px;
  min-width: 230px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}

.bfm-nav-dropdown:hover .bfm-dropdown-menu {
  opacity: 1; pointer-events: all; transform: translateY(0);
}

.bfm-dropdown-section-label {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); padding: 4px 10px 6px;
}

.bfm-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  font-size: 0.78rem; color: var(--text-dim);
  transition: background var(--transition), color var(--transition);
  cursor: default;
}

.bfm-dropdown-item:hover { background: var(--bg-3); color: var(--text); }
.bfm-dropdown-item.primary { color: var(--gold); }
.bfm-dropdown-item.primary:hover { background: rgba(245,188,46,0.08); }

.bfm-dropdown-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bg-5); flex-shrink: 0;
}

.bfm-dropdown-dot.gold { background: var(--gold); }

/* Nav primary CTA button */
.bfm-nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold); color: #07090D;
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 700;
  padding: 0.55rem 1.25rem; border-radius: 50px;
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--transition), box-shadow var(--transition);
}

.bfm-nav-cta:hover {
  background: #ffd060;
  box-shadow: 0 4px 20px rgba(245,188,46,0.3);
  color: #07090D;
}

/* Hamburger icon */
.bfm-nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 4px;
}

.bfm-nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all 0.3s ease;
}


/* ============================================================
   5. MOBILE NAV DRAWER
============================================================ */
.bfm-mobile-nav {
  display: none; flex-direction: column;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem; gap: 0.25rem;
}

.bfm-mobile-nav.open { display: flex; }

.bfm-mobile-nav a {
  font-size: 0.9rem; color: var(--text-muted);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  display: block; transition: color var(--transition);
}

.bfm-mobile-nav a:hover { color: var(--text); }
.bfm-mobile-nav a:last-child { border-bottom: none; }

.bfm-mobile-cta {
  margin-top: 0.75rem; text-align: center;
  background: var(--gold) !important; color: #07090D !important;
  font-weight: 700; padding: 0.75rem; border-radius: 50px;
  font-size: 0.9rem; border-bottom: none !important;
}


/* ============================================================
   6. HERO SECTION
   Full-width hero. Only shown on homepage.
============================================================ */
.bfm-hero {
  min-height: 600px; display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 5rem 0 4rem; background: var(--bg);
}

.bfm-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 75% 45%, rgba(245,188,46,0.055) 0%, transparent 55%),
    radial-gradient(ellipse 35% 40% at 15% 75%, rgba(56,120,200,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.bfm-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}

.bfm-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max-width); margin: 0 auto;
  padding: 0 2rem;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 5rem; align-items: center; width: 100%;
}

.bfm-hero-tag { margin-bottom: 1.4rem; }

.bfm-hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800; line-height: 1.06;
  letter-spacing: -0.035em; color: var(--text);
  margin-bottom: 1.25rem;
}

.bfm-hero-h1 em { font-style: normal; color: var(--gold); }

.bfm-hero-sub {
  font-size: 1.1rem; color: var(--text-muted);
  line-height: 1.72; max-width: 460px; margin-bottom: 0.5rem;
}

.bfm-hero-free {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-dim); margin-bottom: 2rem;
}

.bfm-hero-free-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3FBA6E; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(63,186,110,0.5);
}

.bfm-hero-ctas {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 2.75rem;
}

/* Primary button - GOLD - used for main CTA only */
.bfm-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: #07090D;
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 700;
  padding: 0.8rem 1.85rem; border-radius: 50px;
  white-space: nowrap; border: none; cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform 0.15s ease;
}

.bfm-btn-primary:hover {
  background: #ffd060; color: #07090D;
  box-shadow: 0 6px 28px rgba(245,188,46,0.32);
  transform: translateY(-1px);
}

/* Outline button - NOT gold - secondary CTAs */
.bfm-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--border-md);
  color: var(--text-dim); font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 400;
  padding: 0.8rem 1.85rem; border-radius: 50px;
  white-space: nowrap; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.bfm-btn-outline:hover {
  border-color: rgba(255,255,255,0.25); color: var(--text);
  background: rgba(255,255,255,0.03);
}

.bfm-hero-trust-chips {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}

.bfm-trust-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: var(--text-muted);
}

.bfm-trust-chip-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--bg-5); flex-shrink: 0;
}

/* Hero right column */
.bfm-hero-right {
  display: flex; flex-direction: column; gap: 1rem;
}

/* Now playing card */
.bfm-now-playing {
  background: var(--bg-3); border: 1px solid var(--border-md);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  position: relative; overflow: hidden;
}

.bfm-now-playing::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 60%);
}

.bfm-np-label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 6px;
}

.bfm-np-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: bfm-pulse 1.8s ease-in-out infinite;
}

@keyframes bfm-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

.bfm-waveform {
  display: flex; align-items: center; gap: 2.5px;
  height: 44px; margin-bottom: 1.1rem;
}

.bfm-wbar {
  flex: 1; max-width: 5px; background: var(--gold);
  border-radius: 3px; opacity: 0.7;
  animation: bfm-wave 1.3s ease-in-out infinite;
}

.bfm-wbar:nth-child(1)  { animation-delay: 0.00s; height: 25%; }
.bfm-wbar:nth-child(2)  { animation-delay: 0.08s; height: 60%; }
.bfm-wbar:nth-child(3)  { animation-delay: 0.16s; height: 80%; }
.bfm-wbar:nth-child(4)  { animation-delay: 0.24s; height: 45%; }
.bfm-wbar:nth-child(5)  { animation-delay: 0.32s; height: 90%; }
.bfm-wbar:nth-child(6)  { animation-delay: 0.40s; height: 65%; }
.bfm-wbar:nth-child(7)  { animation-delay: 0.48s; height: 40%; }
.bfm-wbar:nth-child(8)  { animation-delay: 0.56s; height: 75%; }
.bfm-wbar:nth-child(9)  { animation-delay: 0.64s; height: 55%; }
.bfm-wbar:nth-child(10) { animation-delay: 0.72s; height: 85%; }
.bfm-wbar:nth-child(11) { animation-delay: 0.80s; height: 50%; }
.bfm-wbar:nth-child(12) { animation-delay: 0.88s; height: 70%; }
.bfm-wbar:nth-child(13) { animation-delay: 0.96s; height: 35%; }
.bfm-wbar:nth-child(14) { animation-delay: 1.04s; height: 65%; }
.bfm-wbar:nth-child(15) { animation-delay: 1.12s; height: 45%; }
.bfm-wbar:nth-child(16) { animation-delay: 1.20s; height: 80%; }
.bfm-wbar:nth-child(17) { animation-delay: 1.28s; height: 30%; }
.bfm-wbar:nth-child(18) { animation-delay: 1.36s; height: 60%; }

@keyframes bfm-wave {
  0%, 100% { transform: scaleY(0.2); }
  50%       { transform: scaleY(1); }
}

.bfm-np-track { display: flex; align-items: center; gap: 10px; }

.bfm-np-thumb {
  width: 36px; height: 36px; border-radius: 7px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}

.bfm-np-info { flex: 1; min-width: 0; }

.bfm-np-title {
  font-family: var(--font-head);
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bfm-np-artist { font-size: 0.72rem; color: var(--text-muted); }

.bfm-np-play {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 0.65rem; flex-shrink: 0;
}

.bfm-hero-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}

.bfm-stat-card {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; text-align: center;
}

.bfm-stat-num {
  font-family: var(--font-head);
  font-size: 1.65rem; font-weight: 800;
  color: var(--text); line-height: 1; margin-bottom: 3px;
}

.bfm-stat-label {
  font-size: 0.68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}


/* ============================================================
   7. TRUST BAR
============================================================ */
.bfm-trust-bar {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0;
}

.bfm-trust-bar-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}

.bfm-tbar-stat { text-align: center; flex: 1; }

.bfm-tbar-num {
  font-family: var(--font-head);
  font-size: 1.65rem; font-weight: 800;
  color: var(--text); line-height: 1; margin-bottom: 4px;
}

.bfm-tbar-num sup { font-size: 0.9rem; color: var(--gold); }
.bfm-tbar-label { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; }

.bfm-tbar-divider { width: 1px; height: 36px; background: var(--border-md); flex-shrink: 0; }


/* ============================================================
   8. HOW IT WORKS
============================================================ */
.bfm-how { padding: 5.5rem 0; background: var(--bg); }

.bfm-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; position: relative;
}

.bfm-steps::before {
  content: ''; position: absolute;
  top: 44px; left: calc(16.66% + 1rem); right: calc(16.66% + 1rem);
  height: 1px;
  background: linear-gradient(90deg, var(--border-md), var(--border), var(--border-md));
  z-index: 0;
}

.bfm-step-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
  position: relative; z-index: 1;
  transition: border-color var(--transition), transform var(--transition);
}

.bfm-step-card:hover { border-color: var(--border-md); transform: translateY(-3px); }

.bfm-step-num-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }

.bfm-step-num {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 0.8rem;
  font-weight: 800; color: var(--text);
}

.bfm-step-icon-wrap {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--bg-4); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

.bfm-step-h { font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.bfm-step-p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }


/* ============================================================
   9. SERVICES GRID
============================================================ */
.bfm-services {
  padding: 5.5rem 0; background: var(--bg-2);
  border-top: 1px solid var(--border);
}

.bfm-services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem; margin-top: 3rem;
}

.bfm-svc-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  position: relative; overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
  cursor: default;
}

.bfm-svc-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: transparent; transition: background var(--transition);
}

.bfm-svc-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-3px); }
.bfm-svc-card:hover::after { background: linear-gradient(90deg, var(--gold), transparent 70%); }

.bfm-svc-card.featured {
  background: linear-gradient(145deg, rgba(245,188,46,0.06) 0%, var(--bg) 55%);
  border-color: rgba(245,188,46,0.2);
}

.bfm-svc-card.featured::after {
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
}

.bfm-svc-badge {
  display: inline-block; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 50px;
  background: rgba(245,188,46,0.12); color: var(--gold); margin-bottom: 1.1rem;
}

.bfm-svc-icon {
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 1.1rem;
}

.bfm-svc-card.featured .bfm-svc-icon {
  background: rgba(245,188,46,0.1); border-color: rgba(245,188,46,0.2);
}

.bfm-svc-h { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.bfm-svc-p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; }

.bfm-svc-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: gap var(--transition);
}

.bfm-svc-card:hover .bfm-svc-link { gap: 8px; }


/* ============================================================
   10. TESTIMONIALS
============================================================ */
.bfm-trust-section {
  padding: 5.5rem 0; background: var(--bg);
  border-top: 1px solid var(--border);
}

.bfm-testimonials {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-top: 3rem;
}

.bfm-testi-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.75rem;
}

.bfm-testi-quote-mark {
  font-family: Georgia, serif; font-size: 3rem;
  line-height: 1; color: var(--gold); opacity: 0.25; margin-bottom: 0.5rem;
}

.bfm-testi-text {
  font-size: 0.85rem; color: var(--text-dim);
  line-height: 1.7; font-style: italic; margin-bottom: 1.25rem;
}

.bfm-testi-author { display: flex; align-items: center; gap: 10px; }

.bfm-testi-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-4); border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}

.bfm-testi-name { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.bfm-testi-role { font-size: 0.7rem; color: var(--text-muted); }


/* ============================================================
   11. RADIO STATION BANNER
============================================================ */
.bfm-radio-banner {
  padding: 5rem 0; background: var(--bg-2);
  border-top: 1px solid var(--border);
}

.bfm-banner-inner {
  background: var(--bg-3); border: 1px solid var(--border-md);
  border-radius: 20px; padding: 3.5rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: 3rem;
  position: relative; overflow: hidden;
}

.bfm-banner-inner::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
}

.bfm-banner-glow {
  position: absolute; top: -60px; right: 80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,188,46,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.bfm-banner-left { flex: 1; min-width: 0; position: relative; z-index: 1; }
.bfm-banner-tag { margin-bottom: 1rem; }

.bfm-banner-h {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.15; color: var(--text); margin-bottom: 0.75rem;
}

.bfm-banner-p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; max-width: 440px; }
.bfm-banner-right { flex-shrink: 0; position: relative; z-index: 1; }

/* Banner CTA - deliberately NOT gold */
.bfm-btn-banner {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-4); border: 1px solid var(--border-md);
  color: var(--text); font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600;
  padding: 0.9rem 2rem; border-radius: 50px;
  white-space: nowrap; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.bfm-btn-banner:hover { border-color: rgba(255,255,255,0.2); background: var(--bg-5); color: var(--text); }


/* ============================================================
   12. FOOTER
   5 columns: Brand | About | Services | Tools | Legal
============================================================ */
.bfm-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 3.5rem 0 0;
}

.bfm-footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  padding: 0 2rem 3rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Brand column */
.bfm-footer-brand {
  display: flex;
  flex-direction: column;
}

.bfm-footer-logo-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 1rem;
  height: 48px; /* fixed height matches col title area height */
}

.bfm-footer-logo-mark {
  width: 24px; height: 24px; background: var(--gold);
  border-radius: 5px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}

.bfm-footer-logo-mark svg { width: 12px; height: 12px; fill: #07090D; }

.bfm-footer-logo-text {
  font-family: var(--font-head); font-size: 1rem; font-weight: 800;
  color: var(--text); letter-spacing: -0.02em;
}

.bfm-footer-logo-text span { color: var(--gold); }

.bfm-footer-desc {
  font-size: 0.78rem; color: var(--text-muted);
  line-height: 1.65; max-width: 200px;
  margin-bottom: 0;
}

/* Link columns */
.bfm-footer-col {
  display: flex;
  flex-direction: column;
}

.bfm-footer-col-title {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  /* Height matches brand logo-wrap height so all columns align */
  height: 48px;
  display: flex; align-items: flex-end;
  margin-bottom: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.bfm-footer-links { list-style: none; margin-top: 0.75rem; }
.bfm-footer-links li { margin-bottom: 0.65rem; }

.bfm-footer-links a {
  font-size: 0.78rem; color: var(--text-muted);
  transition: color var(--transition);
  line-height: 1.4;
}

.bfm-footer-links a:hover { color: var(--text); }

/* Bottom bar */
.bfm-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.25rem 2rem;
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}

.bfm-footer-copy { font-size: 0.72rem; color: var(--text-muted); }
.bfm-footer-reg  { font-size: 0.72rem; color: var(--bg-5); }


/* ============================================================
   13. STANDARD PAGE LAYOUT
   Clean layout for all pages that are NOT the homepage.
   No sidebars. Just nav + content area + footer.
============================================================ */
.bfm-page-content {
  background: var(--bg);
  padding: 3.5rem 0 5rem;
  min-height: 55vh;
}

/* Page title */
.bfm-page-title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--text); margin-bottom: 0.5rem;
  line-height: 1.15;
}

/* Breadcrumb bar */
.bfm-breadcrumb {
  display: none !important;
}

.bfm-breadcrumb-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 2rem;
  font-size: 0.75rem; color: var(--text-muted);
}

.bfm-breadcrumb-inner a { color: var(--text-muted); transition: color var(--transition); }
.bfm-breadcrumb-inner a:hover { color: var(--gold); }
.bfm-breadcrumb-inner span { margin: 0 6px; opacity: 0.4; }

/* Standard content typography */
.bfm-page-content h1,
.bfm-page-content h2,
.bfm-page-content h3,
.bfm-page-content h4 {
  font-family: var(--font-head); color: var(--text);
  letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.75rem;
}

.bfm-page-content h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.bfm-page-content h2 { font-size: 1.4rem; font-weight: 700; }
.bfm-page-content h3 { font-size: 1.1rem; font-weight: 700; }

.bfm-page-content p {
  font-size: 0.9rem; color: var(--text-muted);
  line-height: 1.75; margin-bottom: 1.25rem;
}

.bfm-page-content a { color: var(--gold); transition: opacity var(--transition); }
.bfm-page-content a:hover { opacity: 0.8; }

.bfm-page-content ul,
.bfm-page-content ol {
  padding-left: 1.5rem; margin-bottom: 1.25rem;
}

.bfm-page-content li {
  font-size: 0.9rem; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 0.4rem;
  list-style: disc;
}

.bfm-page-content ol li { list-style: decimal; }

.bfm-page-content strong { color: var(--text); font-weight: 600; }

.bfm-page-content hr {
  border: none; border-top: 1px solid var(--border); margin: 2rem 0;
}

.bfm-page-content img {
  border-radius: var(--radius); max-width: 100%;
}

.bfm-page-content table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.bfm-page-content th {
  background: var(--bg-3); color: var(--text);
  padding: 0.75rem 1rem; text-align: left; font-weight: 600;
  border-bottom: 1px solid var(--border-md);
}

.bfm-page-content td {
  padding: 0.75rem 1rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.bfm-page-content tr:last-child td { border-bottom: none; }


/* ============================================================
   14. E107 CONTENT RESETS
   Neutralise E107's own CSS that might interfere with our design.
   These target common E107 wrapper classes.
============================================================ */
.bfm-body #content,
.bfm-body .content,
.bfm-body #main,
.bfm-body .main-content,
.bfm-body .e107-content,
.bfm-body .page-content-wrap {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}

/* Remove E107 default table layouts */
.bfm-body table.content,
.bfm-body #wrapper,
.bfm-body #outer-wrapper {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

/* E107 admin bar - keep visible if logged in as admin */
.bfm-body #e107-admin-bar { z-index: 9999; }


/* ============================================================
   15. RESPONSIVE BREAKPOINTS

   1024px  Large tablet
    768px  Tablet portrait
    600px  Large mobile
    480px  Standard mobile
    360px  Small mobile
============================================================ */

/* 1024px */
@media (max-width: 1024px) {
  .bfm-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .bfm-hero-right { display: none; }
  .bfm-services-grid { grid-template-columns: repeat(2, 1fr); }
  .bfm-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}

/* 768px */
@media (max-width: 768px) {
  .bfm-nav-links { display: none; }
  .bfm-nav-hamburger { display: flex; }
  .bfm-nav-cta { font-size: 0.75rem; padding: 0.5rem 1rem; }
  .bfm-steps { grid-template-columns: 1fr; }
  .bfm-steps::before { display: none; }
  .bfm-testimonials { grid-template-columns: 1fr; }
  .bfm-banner-inner { flex-direction: column; padding: 2rem; gap: 2rem; }
  .bfm-banner-right { width: 100%; }
  .bfm-btn-banner { width: 100%; justify-content: center; }
  .bfm-trust-bar-inner { flex-wrap: wrap; gap: 1.5rem; }
  .bfm-tbar-stat { flex: 1 1 40%; }
  .bfm-tbar-divider { display: none; }
  .bfm-footer-inner { grid-template-columns: 1fr 1fr; }
}

/* 600px */
@media (max-width: 600px) {
  .bfm-how, .bfm-services, .bfm-trust-section, .bfm-radio-banner { padding: 4rem 0; }
  .bfm-services-grid { grid-template-columns: 1fr; }
  .bfm-hero-ctas { flex-direction: column; align-items: flex-start; }
  .bfm-btn-primary, .bfm-btn-outline { width: 100%; justify-content: center; }
}

/* 480px */
@media (max-width: 480px) {
  .bfm-container,
  .bfm-nav-inner,
  .bfm-trust-bar-inner,
  .bfm-footer-inner,
  .bfm-footer-bottom { padding-left: 1.25rem; padding-right: 1.25rem; }
  .bfm-hero { padding: 3.5rem 0 3rem; }
  .bfm-hero-inner { padding: 0 1.25rem; }
  .bfm-hero-trust-chips { gap: 0.75rem; }
  .bfm-footer-inner { grid-template-columns: 1fr; }
  .bfm-banner-inner { padding: 1.75rem; }
}

/* 360px */
@media (max-width: 360px) {
  .bfm-hero-h1 { font-size: 1.8rem; }
  .bfm-nav-cta { display: none; }
}


/* ============================================================
   PRICING PREVIEW SECTION
============================================================ */
.bfm-pricing-preview {
  padding: 5.5rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

.bfm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.bfm-price-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.bfm-price-card:hover {
  border-color: var(--border-md);
  transform: translateY(-3px);
}

/* Featured/popular card */
.bfm-price-card.featured {
  background: linear-gradient(145deg, rgba(245,188,46,0.07) 0%, var(--bg) 60%);
  border-color: rgba(245,188,46,0.3);
  transform: scale(1.03);
}

.bfm-price-card.featured:hover {
  transform: scale(1.03) translateY(-3px);
}

/* Gold top border on featured card */
.bfm-price-card.featured::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
}

.bfm-price-badge {
  display: inline-block;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 50px;
  background: rgba(245,188,46,0.12);
  color: var(--gold);
  margin-bottom: 1.25rem;
  width: fit-content;
}

.bfm-price-name {
  font-family: var(--font-head);
  font-size: 1.1rem; font-weight: 800;
  color: var(--text); margin-bottom: 1rem;
}

.bfm-price-amount {
  display: flex; align-items: flex-start; gap: 2px;
  margin-bottom: 0.25rem;
}

.bfm-price-currency {
  font-family: var(--font-head);
  font-size: 1.2rem; font-weight: 700;
  color: var(--text-muted);
  margin-top: 6px;
}

.bfm-price-num {
  font-family: var(--font-head);
  font-size: 3rem; font-weight: 800;
  color: var(--text); line-height: 1;
}

.bfm-price-card.featured .bfm-price-num { color: var(--gold); }

.bfm-price-period {
  font-size: 0.75rem; color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.bfm-price-features {
  list-style: none; flex: 1;
  margin-bottom: 2rem;
}

.bfm-price-features li {
  font-size: 0.82rem; color: var(--text-muted);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  line-height: 1.4;
}

.bfm-price-features li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700; flex-shrink: 0;
  font-size: 0.75rem;
}

.bfm-price-features li:last-child { border-bottom: none; }

.bfm-price-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}


/* ============================================================
   FINAL CTA SECTION
============================================================ */
.bfm-final-cta {
  padding: 5.5rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.bfm-final-cta-inner {
  background: var(--bg-3);
  border: 1px solid var(--border-md);
  border-radius: 20px;
  padding: 4rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bfm-final-cta-inner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.bfm-final-cta-glow {
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,188,46,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.bfm-final-cta-h {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 1rem;
  position: relative; z-index: 1;
}

.bfm-final-cta-p {
  font-size: 1rem; color: var(--text-muted);
  max-width: 480px; margin: 0 auto 2.5rem;
  line-height: 1.7; position: relative; z-index: 1;
}

.bfm-final-cta-btns {
  display: flex; align-items: center;
  justify-content: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
  position: relative; z-index: 1;
}

.bfm-btn-xl {
  font-size: 1rem;
  padding: 0.95rem 2.25rem;
}

.bfm-final-cta-note {
  font-size: 0.75rem; color: var(--text-muted);
  position: relative; z-index: 1;
}


/* ============================================================
   RESPONSIVE - PRICING & FINAL CTA
============================================================ */
@media (max-width: 1024px) {
  .bfm-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .bfm-price-card.featured { transform: scale(1); }
  .bfm-price-card.featured:hover { transform: translateY(-3px); }
}

@media (max-width: 768px) {
  .bfm-final-cta-inner { padding: 3rem 1.75rem; }
  .bfm-final-cta-btns { flex-direction: column; }
  .bfm-btn-xl { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .bfm-pricing-preview, .bfm-final-cta { padding: 4rem 0; }
}


/* ============================================================
   FONT SIZE & RESPONSIVE FIXES - ALL BREAKPOINTS
============================================================ */

/* 1024px - large tablet */
@media (max-width: 1024px) {
  .bfm-body { font-size: 16px; }
  .bfm-price-num { font-size: 2.5rem; }
}

/* 768px - tablet portrait */
@media (max-width: 768px) {
  .bfm-body { font-size: 15px; }
  .bfm-section-title { font-size: 1.7rem; }
  .bfm-hero-h1 { font-size: 2.2rem; }
  .bfm-hero-sub { font-size: 0.95rem; }
  .bfm-hero-free { font-size: 0.8rem; }
  .bfm-btn-primary, .bfm-btn-outline { font-size: 0.85rem; padding: 0.75rem 1.5rem; }
  .bfm-tbar-num { font-size: 1.4rem; }
  .bfm-tbar-label { font-size: 0.65rem; }
  .bfm-step-h { font-size: 0.9rem; }
  .bfm-step-p { font-size: 0.78rem; }
  .bfm-svc-h { font-size: 0.95rem; }
  .bfm-svc-p { font-size: 0.75rem; }
  .bfm-price-name { font-size: 1rem; }
  .bfm-price-num { font-size: 2.5rem; }
  .bfm-price-features li { font-size: 0.8rem; }
  .bfm-final-cta-h { font-size: 1.6rem; }
  .bfm-final-cta-p { font-size: 0.9rem; }
  .bfm-footer-col-title { font-size: 0.6rem; }
  .bfm-footer-links a { font-size: 0.75rem; }
  .bfm-footer-desc { font-size: 0.75rem; }
  .bfm-footer-logo-text { font-size: 0.9rem; }
}

/* 600px - large mobile */
@media (max-width: 600px) {
  .bfm-body { font-size: 15px; }
  .bfm-hero-h1 { font-size: 2rem; }
  .bfm-section-title { font-size: 1.5rem; }
  .bfm-hero-trust-chips { gap: 0.5rem; }
  .bfm-trust-chip { font-size: 0.7rem; }
  .bfm-np-title { font-size: 0.78rem; }
  .bfm-np-artist { font-size: 0.68rem; }
  .bfm-stat-num { font-size: 1.4rem; }
  .bfm-stat-label { font-size: 0.62rem; }
  .bfm-price-num { font-size: 2.2rem; }
  .bfm-final-cta-inner { padding: 2.5rem 1.5rem; }
  .bfm-final-cta-h { font-size: 1.4rem; }
  .bfm-footer-inner { grid-template-columns: 1fr 1fr; }
}

/* 480px - standard mobile */
@media (max-width: 480px) {
  .bfm-body { font-size: 14px; }
  .bfm-hero-h1 { font-size: 1.85rem; }
  .bfm-section-title { font-size: 1.35rem; }
  .bfm-hero-sub { font-size: 0.88rem; }
  .bfm-tbar-num { font-size: 1.25rem; }
  .bfm-step-num { width: 32px; height: 32px; font-size: 0.72rem; }
  .bfm-step-icon-wrap { width: 32px; height: 32px; font-size: 0.9rem; }
  .bfm-price-num { font-size: 2rem; }
  .bfm-price-name { font-size: 0.95rem; }
  .bfm-final-cta-h { font-size: 1.3rem; }
  .bfm-final-cta-p { font-size: 0.85rem; }
  .bfm-nav-logo img { height: 22px; }
}

/* 360px - small mobile */
@media (max-width: 360px) {
  .bfm-body { font-size: 13px; }
  .bfm-hero-h1 { font-size: 1.65rem; }
  .bfm-section-title { font-size: 1.25rem; }
  .bfm-hero-sub { font-size: 0.85rem; }
  .bfm-btn-primary, .bfm-btn-outline { font-size: 0.82rem; padding: 0.7rem 1.25rem; }
  .bfm-price-num { font-size: 1.8rem; }
  .bfm-final-cta-h { font-size: 1.2rem; }
  .bfm-tbar-num { font-size: 1.1rem; }
  .bfm-footer-inner { grid-template-columns: 1fr; }
}


/* ============================================================
   DESKTOP FONT SIZE OVERRIDES (from inspect review)
============================================================ */

/* Nav */
.bfm-nav-links a { font-size: 1.1rem !important; }
.bfm-nav-cta { font-size: 1rem !important; }

/* Section tag */
.bfm-tag { font-size: 1rem !important; padding: 8px 12px !important; }

/* Hero */
.bfm-hero-h1 { font-size: 4.2rem !important; }
.bfm-hero-sub { font-size: 1.4rem !important; }
.bfm-hero-free { font-size: 1rem !important; }

/* Buttons */
.bfm-btn-primary { font-size: 1rem !important; }
.bfm-btn-outline { font-size: 1rem !important; }

/* Remove underline on hover for all links */
a:hover { text-decoration: none !important; }

/* Stats */
.bfm-stat-card,
.bfm-tbar-stat { display: flex; flex-direction: column; gap: 0.4rem; }
.bfm-tbar-label { font-size: 0.9rem !important; }

/* How it works + Services */
.bfm-step-h, .bfm-svc-h { font-size: 1.5rem !important; }
.bfm-step-p, .bfm-svc-p { font-size: 1rem !important; }
.bfm-step-icon-wrap, .bfm-svc-icon { font-size: 1.2rem !important; }

/* Section subtitle */
.bfm-section-sub { font-size: 1.4rem !important; }

/* Testimonials */
.bfm-testi-text { font-size: 1.4rem !important; }
.bfm-testi-name { font-size: 1rem !important; }
.bfm-testi-role { font-size: 0.9rem !important; }
.bfm-testi-avatar { font-size: 1.1rem !important; }

/* Pricing */
.bfm-price-period { font-size: 1rem !important; }
.bfm-price-features li { font-size: 1.1rem !important; }

/* Final CTA */
.bfm-final-cta-note { font-size: 0.9rem !important; }

/* Footer */
.bfm-footer-desc { font-size: 0.9rem !important; padding: 0 !important; }
.bfm-footer-links a { font-size: 0.9rem !important; }
.bfm-footer-col-title { font-size: 1rem !important; }

/* Nav links reset */
.bfm-nav-links { padding: 0 !important; margin: 0 !important; }

/* Standard page content */
.bfm-page-content p { font-size: 1.1rem !important; color: #6E7F92 !important; }
.bfm-page-content h2 { font-size: 1.7rem !important; color: var(--text) !important; font-family: var(--font-head) !important; }
.bfm-page-content h3 { font-size: 1.4rem !important; color: var(--text) !important; font-family: var(--font-head) !important; }
.bfm-page-content table { font-size: 1rem !important; color: #6E7F92 !important; }
.bfm-page-content { color: #6E7F92 !important; font-family: var(--font-body) !important; }


/* ============================================================
   MOBILE NAV REDESIGN
   - Hide "Start Airplay Now" button from mobile nav bar
   - Full page slide-in drawer from left
   - Shows logo + hamburger in bar only
   - Drawer shows 3 links + CTA button
============================================================ */

/* Hide CTA button on mobile - only show logo + hamburger */
@media (max-width: 768px) {
  .bfm-nav-cta { display: none !important; }
  .bfm-nav-hamburger { display: flex !important; }
  .bfm-nav-links { display: none !important; }

  /* Full page overlay mobile nav */
  .bfm-mobile-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--bg-2) !important;
    z-index: 999 !important;
    display: none;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 3rem 2.5rem !important;
    gap: 0 !important;
  }

  .bfm-mobile-nav.open {
    display: flex !important;
  }

  /* Close button at top right */
  .bfm-mobile-nav::before {
    content: '✕';
    position: absolute;
    top: 1.5rem; right: 1.75rem;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
  }

  /* Nav links in drawer */
  .bfm-mobile-nav a {
    font-size: 2rem !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    padding: 0.85rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    width: 100% !important;
    letter-spacing: -0.02em !important;
  }

  .bfm-mobile-nav a:hover { color: var(--gold) !important; }
  .bfm-mobile-nav a:last-child { border-bottom: none !important; }

  /* CTA button inside drawer */
  .bfm-mobile-cta {
    margin-top: 2rem !important;
    background: var(--gold) !important;
    color: #07090D !important;
    font-size: 1rem !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    padding: 0.9rem 2rem !important;
    border-radius: 50px !important;
    text-align: center !important;
    width: auto !important;
    border-bottom: none !important;
    letter-spacing: 0 !important;
  }

  .bfm-mobile-cta:hover {
    background: #ffd060 !important;
    color: #07090D !important;
  }

  /* Nav bar height on mobile */
  .bfm-nav { height: 58px; }

  /* Keep hamburger visible above the overlay */
  .bfm-nav-hamburger { z-index: 1000; position: relative; }
}


/* ============================================================
   AIRPLAY PAGE STYLES
============================================================ */

/* Airplay Hero */
.bfm-airplay-hero {
  min-height: 520px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 5rem 0 4rem;
  background: var(--bg);
  text-align: center;
}

.bfm-airplay-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 40%, rgba(245,188,46,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(56,120,200,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.bfm-airplay-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}

.bfm-airplay-hero-inner {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
  padding: 0 2rem; width: 100%;
}

.bfm-airplay-hero-tag { margin-bottom: 1.5rem; }

.bfm-airplay-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800; line-height: 1.06;
  letter-spacing: -0.035em; color: var(--text);
  margin-bottom: 1.25rem;
}

.bfm-airplay-h1 em { font-style: normal; color: var(--gold); }

.bfm-airplay-sub {
  font-size: 1.15rem; color: var(--text-muted);
  line-height: 1.72; max-width: 540px;
  margin: 0 auto 0.75rem;
}

.bfm-airplay-free {
  display: inline-flex; align-items: center;
  justify-content: center; gap: 7px;
  font-size: 1rem; font-weight: 500;
  color: var(--text-dim); margin-bottom: 2.25rem;
}

.bfm-airplay-free-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3FBA6E; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(63,186,110,0.5);
}

.bfm-airplay-ctas {
  display: flex; align-items: center;
  justify-content: center; gap: 1rem;
  flex-wrap: wrap;
}

/* Airplay How It Works */
.bfm-airplay-how {
  padding: 5rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

/* Full pricing section on airplay page */
.bfm-airplay-pricing {
  padding: 5.5rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.bfm-airplay-pricing .bfm-pricing-grid {
  margin-top: 3rem;
}

/* Larger pricing cards on the airplay page */
.bfm-airplay-pricing .bfm-price-card {
  padding: 2.5rem 2rem;
}

.bfm-airplay-pricing .bfm-price-num {
  font-size: 3.5rem;
}

.bfm-airplay-pricing .bfm-price-name {
  font-size: 1.25rem;
}

.bfm-airplay-pricing .bfm-price-features li {
  padding: 0.65rem 0;
}

/* Airplay trust strip */
.bfm-airplay-trust {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0;
}

/* Airplay FAQ teaser */
.bfm-airplay-faq {
  padding: 5rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

.bfm-faq-list { margin-top: 2.5rem; }

.bfm-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.bfm-faq-item:first-child { border-top: 1px solid var(--border); }

.bfm-faq-q {
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}

.bfm-faq-a {
  font-size: 0.9rem; color: var(--text-muted); line-height: 1.7;
}

/* Airplay final CTA */
.bfm-airplay-final {
  padding: 5.5rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Responsive airplay page */
@media (max-width: 768px) {
  .bfm-airplay-h1 { font-size: 2.2rem; }
  .bfm-airplay-sub { font-size: 1rem; }
  .bfm-airplay-ctas { flex-direction: column; }
  .bfm-airplay-ctas .bfm-btn-primary,
  .bfm-airplay-ctas .bfm-btn-outline { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .bfm-airplay-h1 { font-size: 1.85rem; }
  .bfm-airplay-hero { padding: 3.5rem 0 3rem; }
}

/* Mobile hero min-height fix */
@media (max-width: 768px) {
  .bfm-hero { min-height: 400px !important; }
}


.bfm-footer-col-title { font-size: 0.8rem !important; }
.bfm-footer-links a { font-size: 0.7rem !important; }
.bfm-footer-desc { font-size: 0.8rem !important; }
.bfm-nav-cta { font-size: 0.8rem !important; color: #07090D !important; }
.bfm-btn-primary { color: #07090D !important; }
.bfm-nav-links a { font-size: 1rem !important; }

/* ============================================================
   E107 REGISTRATION / SIGNUP PAGE DARK STYLING
   Overrides E107 default white form with our dark theme
============================================================ */

/* Page wrapper */
body.bfm-body { background: var(--bg) !important; }

/* Registration form container */
.cpage_body, .cpage-body,
#signup, .signup-page,
.e107-signup { background: var(--bg) !important; color: var(--text) !important; }

/* Form labels */
.bfm-page-content label,
form label { color: var(--text-muted) !important; font-family: var(--font-body) !important; }

/* Form inputs */
.bfm-page-content input[type="text"],
.bfm-page-content input[type="email"],
.bfm-page-content input[type="password"],
.bfm-page-content input[type="number"],
.bfm-page-content textarea,
.bfm-page-content select,
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form textarea,
form select {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-md) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(245,188,46,0.15) !important;
}

/* Submit button */
.bfm-page-content input[type="submit"],
.bfm-page-content button[type="submit"],
form input[type="submit"],
form button[type="submit"] {
  background: var(--gold) !important;
  color: #07090D !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 0.75rem 2rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

form input[type="submit"]:hover,
form button[type="submit"]:hover {
  background: #ffd060 !important;
}

/* Page headings on forms */
.bfm-page-content h1,
.bfm-page-content h2,
.bfm-page-content h3 {
  color: var(--text) !important;
  font-family: var(--font-head) !important;
}

/* Tables inside forms */
.bfm-page-content table td,
.bfm-page-content table th {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* Captcha area */
.bfm-page-content .g-recaptcha,
form .g-recaptcha { margin: 1rem 0 !important; }

/* Error and success messages */
.bfm-page-content .alert,
.bfm-page-content .message,
.bfm-page-content .error {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-md) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius) !important;
  padding: 0.75rem 1rem !important;
}