/* Hero — NSBS */
.hero { background: #0a0a0f; padding: 48px 0 56px 0; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #00d4ff, transparent); }
.hero .hero-content { position: relative; z-index: 1; max-width: 680px; }
.hero .hero-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; color: #00d4ff; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.hero .hero-label::before { content: ''; width: 24px; height: 1px; background: #00d4ff; }
.hero h1 { font-size: 32px; font-weight: 800; line-height: 1.1; color: #ffffff; letter-spacing: -0.5px; margin-bottom: 16px; }
.hero h1 span { color: #00d4ff; }
.hero .hero-text { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin-bottom: 24px; max-width: 560px; }
.hero .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #ff4757; color: #ffffff; font-size: 13px; font-weight: 800; padding: 14px 28px; border-radius: 6px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.8px; transition: background 0.2s, transform 0.15s; }
.hero .hero-cta:hover { background: #ff6b81; transform: translateY(-1px); color: #ffffff; }
/* Per-page hero backgrounds */
.hero-home { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-home.jpg') center/cover no-repeat; }
.hero-home::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
/* Sub-page hero — compact */
.hero-compact { padding: 36px 0 40px 0; position: relative; background: #0a0a0f; }
.hero-compact::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #00d4ff, transparent); }
.hero-compact .container { position: relative; z-index: 1; }
.hero-compact h1 { font-size: 28px; margin-bottom: 8px; }
.hero-compact .hero-text { font-size: 15px; color: rgba(255, 255, 255, 0.6); margin-bottom: 0; }
/* Per-page backgrounds — same overlay style as homepage */
.hero-football { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-football.jpg') center/cover no-repeat; }
.hero-football::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
.hero-horse-racing { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-horse-racing.jpg') center/cover no-repeat; }
.hero-horse-racing::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
.hero-esports { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-esports.jpg') center/cover no-repeat; }
.hero-esports::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
.hero-tennis { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-tennis.jpg') center/cover no-repeat; }
.hero-tennis::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
.hero-cricket { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-cricket.jpg') center/cover no-repeat; }
.hero-cricket::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
.hero-paypal { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-paypal.jpg') center/cover no-repeat; }
.hero-paypal::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
.hero-responsible { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-responsible.jpg') center/cover no-repeat; }
.hero-responsible::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
.hero-about { background: #0a0a0f url('/wp-content/uploads/2026/nsbs/hero-about.jpg') center/cover no-repeat; }
.hero-about::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 15, 0.55); pointer-events: none; }
@media (min-width: 768px) {
  .hero { padding: 64px 0 72px 0; }
  .hero h1 { font-size: 44px; }
  .hero .hero-text { font-size: 18px; }
  .hero-compact { padding: 48px 0 52px 0; }
  .hero-compact h1 { font-size: 36px; }
}
@media (min-width: 1024px) {
  .hero { padding: 80px 0 88px 0; }
  .hero h1 { font-size: 54px; letter-spacing: -1px; }
  .hero-compact h1 { font-size: 42px; }
}