/* Floating badge: logo version */
.floating-badge {
  /* Keep float and glow animations applied to the whole badge */
  animation: floatY var(--float-dur, 12s) ease-in-out infinite,
             glowPulse var(--glow-dur, 8s) ease-in-out infinite;
  /* Decorative only: don't block clicks to nav/content beneath */
  pointer-events: none;
}

.floating-badge .badge-logo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    0 0 0 6px rgba(255,193,7,0.06),
    0 0 24px rgba(163,208,255,0.18);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: driftX var(--drift-dur, 14s) ease-in-out infinite alternate,
             jiggle 6s ease-in-out infinite;
}

.floating-badge .badge-logo img {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
}
/* Galaxy background + starfield */
body.landing {
  /* Pure black backdrop */
  background: #000;
}

/* Ensure content sits above the starfield */
.landing .container-xxl,
.site-footer {
  position: relative;
  z-index: 1;
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #000; /* solid black base for starfield */
  pointer-events: none;
  overflow: hidden;
}

/* Base layer: fine stars */
.stars {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  /* Tile sizes for each sub-layer */
  background-size: 200px 200px, 300px 300px, 400px 400px, 500px 500px;
  /* Star dots inside each tile (non-grid pattern per tile) */
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 80px 140px, rgba(255,255,255,0.40) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 160px 10px, rgba(255,255,255,0.65) 50%, transparent 51%);
  animation: drift1 160s linear infinite, twinkle 8s ease-in-out infinite;
  opacity: 0.85;
}

/* Mid layer: sparse, slightly larger, tinted to brand colors */
.stars2 {
  background-size: 260px 260px, 360px 360px, 460px 460px, 560px 560px;
  background-image:
    radial-gradient(1.2px 1.2px at 40px 90px, rgba(255, 193, 7, 0.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 200px 40px, rgba(163, 208, 255, 0.50) 50%, transparent 51%),
    radial-gradient(1px 1px at 260px 200px, rgba(255,255,255,0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 120px 220px, rgba(255,255,255,0.5) 50%, transparent 51%);
  animation: drift2 260s linear infinite, twinkle 10s ease-in-out infinite;
  opacity: 0.7;
}

/* Far layer: biggest, slowest, very faint */
.stars3 {
  background-size: 320px 320px, 520px 520px, 640px 640px, 800px 800px;
  background-image:
    radial-gradient(2px 2px at 150px 60px, rgba(255,255,255,0.28) 50%, transparent 51%),
    radial-gradient(2px 2px at 300px 180px, rgba(130, 196, 255, 0.22) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 60px 250px, rgba(255, 193, 7, 0.18) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 220px 300px, rgba(255,255,255,0.20) 50%, transparent 51%);
  animation: drift3 400s linear infinite, twinkle 12s ease-in-out infinite;
  opacity: 0.55;
}

/* Foreground: dense, fast-moving stars */
.stars-fast {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 100px 100px, 140px 140px, 180px 180px, 220px 220px, 260px 260px;
  background-image:
    radial-gradient(1px 1px at 10px 20px, rgba(255,255,255,0.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 70px 40px, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 30px 90px, rgba(255,255,255,0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 110px 70px, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 200px 150px, rgba(255,255,255,0.8) 50%, transparent 51%);
  animation: driftFast 18s linear infinite, twinkleFast 4s ease-in-out infinite;
  opacity: 0.7;
}

/* Shooting stars (sporadic comets) */
.shooting-star {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  pointer-events: none;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--angle, -45deg));
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 0 12px rgba(163,208,255,0.6));
  animation: shoot var(--dur, 1.2s) ease-out var(--delay, 0s) forwards;
}
.shooting-star::before {
  content: "";
  display: block;
  width: var(--len, 180px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(163,208,255,0.8) 40%, rgba(255,255,255,0) 100%);
}

@keyframes shoot {
  0% { opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--angle, -45deg)); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--x, 0) + var(--dx, 800px)), calc(var(--y, 0) + var(--dy, 800px)), 0) rotate(var(--angle, -45deg)); }
}

/* Parallax drift (scroll background-position of each sub-layer differently) */
@keyframes drift1 {
  100% { background-position: -200px -120px, -300px -160px, -400px -220px, -500px -260px; }
}
@keyframes drift2 {
  100% { background-position: -100px -80px, -180px -120px, -260px -160px, -340px -200px; }
}
@keyframes drift3 {
  100% { background-position: -60px -40px, -120px -80px, -180px -120px, -240px -160px; }
}

/* Fast layer drift (covers greater distance for speed effect) */
@keyframes driftFast {
  100% {
    background-position:
      -480px -360px,
      -640px -480px,
      -800px -560px,
      -960px -720px,
      -1200px -900px;
  }
}

/* Gentle twinkle */
@keyframes twinkle {
  0%, 100% { filter: brightness(1); opacity: inherit; }
  45% { filter: brightness(1.25); }
  50% { filter: brightness(0.9); }
  55% { filter: brightness(1.2); }
}

@keyframes twinkleFast {
  0%, 100% { filter: brightness(1); }
  25% { filter: brightness(1.35); }
  50% { filter: brightness(0.85); }
  75% { filter: brightness(1.25); }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .stars, .stars2, .stars3, .stars-fast { animation: none; }
  .shooting-star { display: none !important; }
}
/* Landing page styles */
:root {
  /* Palette inspired by reference: navy, gold, bright blue */
  --bbp-navy-800: #073a59;       /* main background navy */
  --bbp-navy-900: #052c43;       /* darker navy for depth */
  --bbp-blue-500: #2e86de;       /* accent blue */
  --bbp-blue-300: #5aa6f1;       /* lighter accent */
  --bbp-blue-100: #e6f2fd;       /* very light blue for chips */
  --bbp-gold-500: #f2b705;       /* primary accent gold */
  --bbp-gold-600: #d39d05;       /* hover/darker gold */

  /* Derived tokens used by the page */
  --bbp-bg-start: var(--bbp-navy-800);
  --bbp-bg-end: var(--bbp-navy-900);
  --bbp-panel-bg: rgba(7, 58, 89, 0.55);
  --bbp-panel-border: rgba(255, 255, 255, 0.08);
  --bbp-white-90: rgba(255,255,255,0.92);
  --bbp-white-75: rgba(255,255,255,0.75);
}

.text-white-90{ color: var(--bbp-white-90) !important; }
.text-white-75{ color: var(--bbp-white-75) !important; }

body.landing{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(800px 400px at 110% 110%, rgba(255,255,255,0.06), transparent 50%),
    linear-gradient(135deg, var(--bbp-bg-start), var(--bbp-bg-end));
}

.hero-panel{
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) , var(--bbp-panel-bg);
  border: 1px solid var(--bbp-panel-border);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Dotted wave pattern on the right */
.dot-wave{
  position: absolute;
  right: 2rem;
  bottom: 2.5rem;
  width: min(620px, 55%);
  height: min(360px, 45vh);
  opacity: .6;
  background-image: radial-gradient(circle at 1px 1px, rgba(90,166,241,.85) 1px, transparent 1px);
  background-size: 12px 12px;
  transform: rotate(-6deg);
  /* fade edges into the background */
  mask-image: radial-gradient(80% 65% at 20% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 65% at 20% 50%, #000 35%, transparent 100%);
}

/* Floating badge */
.floating-badge{
  pointer-events: none;
  right: 4.5rem;
  top: 48%;
  width: 110px;

/* Prevent horizontal overflow from decorative layers */
.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.starfield .stars,
.starfield .stars2,
.starfield .stars3,
.starfield .stars-fast {
  width: 100%;
  height: 100%;
}

/* Contain floating badge and dotted wave inside the panel */
.hero-panel {
  overflow: hidden;
}

/* --- Floating badge positioning (prevents centering after build) --- */
.floating-badge {
  position: absolute;
  top: 50%;
  right: 0.75rem; /* keep inside the column to avoid overflow */
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  z-index: 3;
}
.floating-badge .badge-logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 992px) {
  .floating-badge { width: 180px; height: 180px; right: 1rem; }
}
@media (min-width: 1200px) {
  .floating-badge { width: 200px; height: 200px; right: 1.25rem; }
}

/* --- Mobile responsiveness enhancements --- */
@media (max-width: 575.98px) {
  .hero-panel {
    padding: 1.25rem !important;
  }
  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }
  .lead {
    font-size: 1rem;
  }
  .btn.btn-cta {
    width: 100%;
    justify-content: center;
  }
  .dot-wave {
    display: none !important; /* reduce clutter and improve small-screen focus */
  }
  .brand-logo {
    width: 40px;
    height: auto;
  }
  .container-xxl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .offcanvas .nav-link {
    padding: 0.75rem 0;
    font-size: 1.125rem;
  }
}

@media (max-width: 767.98px) {
  .hero-panel {
    padding: 1.5rem !important;
  }
  .hero-title {
    font-size: 2.25rem;
  }
  .lead {
    font-size: 1.05rem;
  }
}
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--bbp-blue-100), #cbe9fb);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  /* Animation vars (randomized by JS) */
  --float-amp: 8px;
  --float-dur: 7s;
  --glow-dur: 6s;
  animation: floatY var(--float-dur) ease-in-out infinite, glowPulse var(--glow-dur) ease-in-out infinite;
}

/* Globe inside badge */
.floating-badge .globe{
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(11,43,64,.25);
  /* X drift animation */
  --drift-amp: 10px;
  --drift-dur: 14s;
  animation: driftX var(--drift-dur) ease-in-out infinite alternate;
}
.floating-badge .globe-grid{
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: spin var(--spin-dur, 18s) linear infinite;
}
.floating-badge .globe-grid.reverse{ animation-direction: reverse; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatY {
  0%,100% { transform: translateY(calc(var(--float-amp) * -1)); }
  50% { transform: translateY(var(--float-amp)); }
}
@keyframes driftX {
  0% { transform: translateX(calc(var(--drift-amp) * -1)); }
  50% { transform: translateX(var(--drift-amp)); }
  100% { transform: translateX(calc(var(--drift-amp) * -1)); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 10px 20px rgba(0,0,0,0.15), inset 0 0 10px rgba(46,134,222,.15); }
  50% { box-shadow: 0 14px 26px rgba(0,0,0,0.22), inset 0 0 16px rgba(46,134,222,.25); }
}

/* Optional playful nudge; toggled by JS */
.floating-badge.nudge { animation: floatY var(--float-dur) ease-in-out infinite, glowPulse var(--glow-dur) ease-in-out infinite, jiggle 420ms ease-in-out 1; }
@keyframes jiggle {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-2px) rotate(-3deg); }
  60% { transform: translateY(3px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .floating-badge, .floating-badge .globe, .floating-badge .globe-grid{ animation: none !important; }
}

/* CTA enhancements */
.btn-cta{
  --bs-btn-bg: var(--bbp-gold-500);
  --bs-btn-border-color: var(--bbp-gold-500);
  --bs-btn-color: #0b2b40; /* navy text on gold */
  --bs-btn-hover-bg: var(--bbp-gold-600);
  --bs-btn-hover-border-color: var(--bbp-gold-600);
  --bs-btn-focus-shadow-rgb: 46,134,222; /* blue focus ring */
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
}
.btn-cta .icon-circle{
  width: 28px; height: 28px; border-radius: 999px; background: var(--bbp-blue-100);
}

/* Blue pill button (e.g., Signin) */
.btn-blue{
  --bs-btn-bg: var(--bbp-blue-500);
  --bs-btn-border-color: var(--bbp-blue-500);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #2473c7;
  --bs-btn-hover-border-color: #2473c7;
}

/* Feature cards */
.feature-card{ border-radius: 18px; border: 1px solid rgba(255,255,255,0.06); }
.feature-card .card-title{ font-weight: 600; }

/* Rating stars */
.rating-stars{ color: var(--bbp-gold-500); }

/* Tweaks to nav links over dark panel */
.nav-link{ color: var(--bbp-white-75); }
.nav-link:hover{ color: var(--bbp-gold-500); }

/* Justify hero lead paragraph without affecting other .lead texts site-wide */
.hero-panel .lead{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  /* Previously 0.625rem (2x smaller than Bootstrap's .lead). Increase size by 30% */
  font-size: 0.8125rem; /* 0.625rem * 1.3 */
}

@media (max-width: 991.98px){
  .floating-badge{ display: none !important; }
  .dot-wave{ right: 1rem; bottom: 1rem; width: 75%; height: 200px; }
}