/* Beatpoly — Shared Navigation Styles */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap');

#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #E5E8ED; height: 60px;
  display: flex; align-items: center;
  font-family: 'Inter', sans-serif;
}
.bp-nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.bp-nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600;
  font-size: 14px; letter-spacing: 0.04em; color: #0F1117;
  text-decoration: none; flex-shrink: 0;
}
.bp-nav-mark {
  width: 30px; height: 30px; background: #1B6FF8; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
}
.bp-nav-links {
  display: flex; gap: 2px; list-style: none; align-items: center;
  margin: 0; padding: 0;
}
.bp-nav-links > li { position: relative; }
.bp-nav-links > li > a {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: #4B5563;
  text-decoration: none; padding: 7px 11px; border-radius: 6px;
  transition: color 0.15s, background 0.15s; white-space: nowrap; cursor: pointer;
}
.bp-nav-links > li > a:hover,
.bp-nav-links > li > a.bp-active { color: #0F1117; background: #F3F4F6; }
.bp-caret { font-size: 8px; transition: transform 0.2s; display: inline-block; }
.bp-nav-links > li:hover > a .bp-caret { transform: rotate(180deg); }

/* DROPDOWN */
.bp-dropdown {
  position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #fff; border: 1px solid #E5E8ED; border-radius: 14px;
  padding: 8px; width: 580px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10); z-index: 600;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.3s;
}
.bp-nav-links > li:hover .bp-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}
/* Bridge gap between nav item and dropdown so mouse can travel */
.bp-dropdown::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.bp-dd-section { padding: 8px; }
.bp-dd-heading {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #9CA3AF;
  display: block; margin-bottom: 6px; padding: 0 6px;
}
.bp-dd-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none; transition: background 0.12s;
}
.bp-dd-item:hover { background: #F9FAFB; }
.bp-dd-num {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: #9CA3AF; flex-shrink: 0; min-width: 20px; margin-top: 2px;
}
.bp-dd-text { display: flex; flex-direction: column; gap: 3px; }
.bp-dd-title { font-size: 13px; font-weight: 600; color: #0F1117; line-height: 1.3; display: block; }
.bp-dd-sub { font-size: 11px; color: #6B7280; line-height: 1.4; display: block; }
.bp-dd-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  border-radius: 3px; padding: 2px 6px; display: inline-block;
  letter-spacing: 0.04em; width: fit-content;
}
.bp-dd-badge.live { color: #1B6FF8; background: #EEF4FF; border: 1px solid rgba(27,111,248,0.2); }
.bp-dd-badge.soon { color: #9CA3AF; background: #F9FAFB; border: 1px solid #E5E8ED; }
.bp-dd-divider { grid-column: 1/-1; height: 1px; background: #F3F4F6; margin: 4px 8px; }
.bp-dd-footer { grid-column: 1/-1; padding: 6px 10px; display: flex; justify-content: space-between; }
.bp-dd-footer a { font-size: 12px; color: #1B6FF8; font-weight: 500; text-decoration: none; }
.bp-dd-footer a:hover { text-decoration: underline; }

/* SOCIAL ICONS */
.bp-nav-socials { display: flex; align-items: center; gap: 8px; }
.bp-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid #E5E8ED; color: #6B7280;
  transition: border-color 0.15s, color 0.15s; text-decoration: none;
}
.bp-social-icon:hover { border-color: #1B6FF8; color: #1B6FF8; }
.bp-social-icon svg { width: 15px; height: 15px; fill: currentColor; }

/* CTA BUTTON */
.bp-nav-cta {
  background: #1B6FF8; color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 7px; transition: opacity 0.15s;
  white-space: nowrap; text-decoration: none; letter-spacing: 0.01em; flex-shrink: 0;
}
.bp-nav-cta:hover { opacity: 0.88; }

/* MOBILE */
.bp-mob-toggle {
  display: none; background: none; border: 1px solid #E5E8ED;
  color: #6B7280; padding: 6px 11px; border-radius: 6px;
  cursor: pointer; font-size: 13px; font-family: 'Inter', sans-serif;
}
.bp-mob-menu {
  display: none; position: fixed; top: 60px; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid #E5E8ED; padding: 16px;
  z-index: 499; max-height: calc(100vh - 60px); overflow-y: auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
}
.bp-mob-menu.open { display: block; }
.bp-mob-section {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #9CA3AF;
  padding: 12px 8px 6px; display: block;
}
.bp-mob-link {
  display: block; padding: 10px 8px; font-size: 14px;
  font-weight: 500; color: #4B5563; border-radius: 6px; text-decoration: none;
}
.bp-mob-link:hover { color: #0F1117; background: #F9FAFB; }
.bp-mob-socials { display: flex; gap: 12px; padding: 10px 8px 6px; }
.bp-mob-social {
  font-size: 13px; color: #6B7280; text-decoration: none;
  display: flex; align-items: center; gap: 5px;
}
.bp-mob-social:hover { color: #1B6FF8; }
.bp-mob-cta {
  display: block; background: #1B6FF8; color: #fff; font-size: 14px;
  font-weight: 600; padding: 13px; border-radius: 8px;
  text-align: center; margin-top: 12px; text-decoration: none;
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .bp-nav-links { display: none; }
  .bp-nav-socials { display: none; }
  .bp-mob-toggle { display: block; }
}