/* Wallet icon sizing for Connect Wallet menu */
.wallet-icon{ width:16px; height:16px; vertical-align:-2px; margin-right:6px; display:inline-block; }
:root{
  --accent: #4f46e5;
  --presale-blue: #1e90ff;
  --muted: #7b7f91;
  --glass: rgba(255,255,255,0.85);
  /* Neon palette from Baby AI badge */
  --neon-cyan: #00e5ff;
  --neon-blue: #00b3ff;
  --neon-purple: #8a2be2;
  --neon-pink: #ff2bd6;
  --neon-magenta: #ff00ff;
  /* Staking palette (promoted to global so buttons match across pages) */
  --bai-cyan: #00e5ff;
  --bai-pink: #ff3adf;
  --bai-violet: #9d5cff;
}

/* Force all text to white for maximum contrast across the site */
body, body * { color: #ffffff !important; }

/* Exceptions: force close/close-like buttons to use black glyphs for high-contrast X icons */
button[aria-label="Close"],
button[aria-label="Close picker"],
button[aria-label="Close game"],
.sensory-modal__close {
  color: #000 !important;
}

/* Removed legacy overrides targeting old inline Baby AI widget (#babyai-*) to avoid conflicts with the new React widget. */

/* reset-ish */
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;color:#0f1724;background:#0b1220}

/* Remove global rounding; only round explicit BabyAi logo images */

/* Ensure all instances of the BabyAi logo render perfectly round */
img[src*="/assets/images/baby-ai-logo-transparent.png"],
img[alt*="BabyAi" i],
img[alt*="Baby AI" i]{
  border-radius:50% !important;
  object-fit: cover !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Force-circle on specific wallet/app images to override any conflicting styles */
#babyai-logo,
#babyai-app-cta .babyai-app-cta-img{
  width: auto; height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: transparent !important;
  overflow: hidden;
}

/* Top-left header logo: show without ring styling */
header .neon-ring--logo{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  padding:0;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  animation: none !important;
}
header .neon-ring--logo img{
  width:100%; height:100%;
  object-fit: contain !important;
  transform: none !important;
  border-radius: 50%;
  background: transparent !important;
}
header .neon-ring--logo::before,
header .neon-ring--logo::after{ display:none !important; content:'' !important; }

/* Guardrail: ensure the new Baby AI logo asset is not overridden by other image rules */
img[src*="/assets/images/new-babyai.png"],
#babyai-app-cta .babyai-app-cta-img{
  object-fit: contain !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Explicit: make #babyai-app-cta > div > img round even without avatar wrapper */
#babyai-app-cta > div > img{
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: transparent !important;
  overflow: hidden;
}

/* Edge blending: hide anti-aliased white corners with inner ring */
#babyai-logo-avatar,
#babyai-app-cta .babyai-app-cta-avatar{
  position: relative;
  background: transparent !important;
  padding: 8px !important; border: 0 !important;
  border-radius: 50% !important; overflow: visible !important;
  box-shadow: none !important;
}

#babyai-logo-avatar::before,
#babyai-logo-avatar::after,
#babyai-app-cta .babyai-app-cta-avatar::before,
#babyai-app-cta .babyai-app-cta-avatar::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

#babyai-logo-avatar::before,
#babyai-app-cta .babyai-app-cta-avatar::before{
  inset: 0;
  border: 2px solid rgba(0,229,255,.72);
  box-shadow:
    0 0 12px rgba(0,229,255,.58),
    0 0 26px rgba(0,229,255,.34),
    0 0 34px rgba(255,43,214,.2);
}

#babyai-logo-avatar::after,
#babyai-app-cta .babyai-app-cta-avatar::after{
  inset: -6px;
  background:
    radial-gradient(circle, rgba(0,229,255,.22) 0%, rgba(0,229,255,.08) 45%, rgba(0,229,255,0) 72%),
    radial-gradient(circle at 72% 28%, rgba(255,43,214,.16), rgba(255,43,214,0) 48%);
  filter: blur(6px);
  z-index: 0;
}

#babyai-logo-avatar img,
#babyai-app-cta .babyai-app-cta-avatar img{
  position: relative;
  z-index: 1;
  display:block; width:100%; height:100%; object-fit:cover; background:transparent !important;
}

/* starfield container at the bottom half */
#starfield{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* bright stars layer */
#starfield .stars{
  width: 200%;
  height: 200%;
  position: absolute;
  left: -50%;
  top: -50%;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,1) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,0.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 15%, rgba(255,255,255,0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 20% 75%, rgba(255,255,255,1) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 80% 90%, rgba(255,255,255,0.95) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 120px 120px, 140px 140px, 160px 150px, 100px 120px, 140px 160px, 180px 160px, 120px 120px, 130px 140px, 160px 160px;
  opacity: 0.95;
  mix-blend-mode: screen;
  transform: translateZ(0);
}

/* Presale hero image: make it perfectly round (targets the exact selector provided) */
/* planets (replace shooting stars) */
.planet{
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6) inset, 0 6px 18px rgba(0,0,0,0.25);
  transform-origin: center;
  /* keep planets fully visible */
  opacity: 1 !important;
  /* allow subtle self-rotation for visual variety */
  will-change: transform;
}
.planet-1{
  width: 36px; height:36px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffd6a5 8%, #ff9f1c 35%, #e76f51 70%, #b33b19 100%);
  top: 25%; left: 110%; animation: planet-1-move 10s linear infinite;
}
.planet-2{
  width: 48px; height:48px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #d0f0fd 6%, #78c6ff 30%, #3aa0ff 60%, #1a6fb3 100%);
  top: 50%; left: 120%; animation: planet-2-move 14s linear infinite 2s;
}
.planet-3{
  width: 28px; height:28px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #e9ffd6 6%, #b6ff7a 30%, #6bd44a 60%, #2f8b2a 100%);
  top: 70%; left: 130%; animation: planet-3-move 12s linear infinite 4s;
}

.planet-4{ width: 60px; height:60px; background: radial-gradient(circle at 30% 30%, #fff 0%, #f0d6ff 6%, #d09bff 30%, #a553ff 60%, #6b2bb3 100%); top: 30%; left: 140%; animation: planet-4-move 18s linear infinite 1s; }
.planet-5{ width: 44px; height:44px; background: radial-gradient(circle at 30% 30%, #fff 0%, #ffd6e6 6%, #ff9ac4 30%, #ff5f8a 60%, #b33b5b 100%); top: 60%; left: 150%; animation: planet-5-move 13s linear infinite 3s; }
.planet-6{ width: 20px; height:20px; background: radial-gradient(circle at 30% 30%, #fff 0%, #e6fff1 6%, #9fffe0 30%, #3affb3 60%, #12a36f 100%); top: 80%; left: 160%; animation: planet-6-move 9s linear infinite 5s; }

/* Additional decorative planets */
.planet-7{ width: 52px; height:52px; background: radial-gradient(circle at 30% 30%, #fff 0%, #cfe6ff 6%, #8fb8ff 30%, #4d8cff 60%, #2a4f9e 100%); top: 18%; left: 140%; animation: planet-7-move 22s linear infinite 1.6s; transform: rotate(0deg); }
.planet-8{ width: 30px; height:30px; background: radial-gradient(circle at 30% 30%, #fff 0%, #ffe6d6 6%, #ffb88a 30%, #ff8a4d 60%, #9e4a2a 100%); top: 62%; left: 170%; animation: planet-8-move 16s linear infinite 3.2s; transform: rotate(0deg); }

@keyframes planet-4-move{ 0%{ transform: translateX(0) rotate(0deg); opacity:1 } 6%{ opacity:1 } 50%{ transform: translateX(-85vw) rotate(10deg); opacity:1 } 100%{ transform: translateX(-170vw) rotate(20deg); opacity:1 } }
@keyframes planet-5-move{ 0%{ transform: translateX(0) rotate(0deg); opacity:1 } 8%{ opacity:1 } 50%{ transform: translateX(-95vw) rotate(-12deg); opacity:1 } 100%{ transform: translateX(-190vw) rotate(-24deg); opacity:1 } }
@keyframes planet-6-move{ 0%{ transform: translateX(0) rotate(0deg); opacity:1 } 4%{ opacity:1 } 50%{ transform: translateX(-65vw) rotate(6deg); opacity:1 } 100%{ transform: translateX(-140vw) rotate(12deg); opacity:1 } }
@keyframes planet-7-move{ 0%{ transform: translateX(0) rotate(0deg); opacity:1 } 10%{ transform: translateX(-6vw) rotate(-8deg); opacity:1 } 50%{ transform: translateX(-60vw) rotate(-18deg); opacity:1 } 100%{ transform: translateX(-140vw) rotate(-36deg); opacity:1 } }
@keyframes planet-8-move{ 0%{ transform: translateX(0) rotate(0deg); opacity:1 } 12%{ transform: translateX(-8vw) rotate(-4deg); opacity:1 } 50%{ transform: translateX(-70vw) rotate(-10deg); opacity:1 } 100%{ transform: translateX(-156vw) rotate(-20deg); opacity:1 } }

/* meteors replaced by small glowing stars (pulse + gentle drift) */
.meteor{
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,1) 0%, rgba(255,245,210,0.95) 20%, rgba(180,210,255,0.6) 45%, rgba(180,210,255,0.08) 70%, transparent 100%);
  box-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 18px rgba(138,43,226,0.18), 0 0 36px rgba(0,150,255,0.12);
  opacity: 0;
  transform: translateZ(0);
  filter: drop-shadow(0 2px 6px rgba(255,255,255,0.12));
}
.meteor-1{ top: 10%; left: 120%; animation: meteor-1 8s ease-in-out infinite 0s; }
.meteor-2{ top: 35%; left: 140%; animation: meteor-2 9s ease-in-out infinite 1.2s; }
.meteor-3{ top: 55%; left: 130%; animation: meteor-3 7.2s ease-in-out infinite 2.4s; }
.meteor-4{ top: 80%; left: 150%; animation: meteor-4 10s ease-in-out infinite 3.6s; }

@keyframes meteor-1{
  0%{ transform: translateX(0) translateY(0) scale(0.8); opacity:0 }
  10%{ opacity:0.9; transform: translateX(-6vw) translateY(-1vh) scale(1) }
  50%{ opacity:0.95; transform: translateX(-10vw) translateY(-2.5vh) scale(1.08) }
  90%{ opacity:0.8; transform: translateX(-14vw) translateY(-4vh) scale(0.98) }
  100%{ opacity:0; transform: translateX(-18vw) translateY(-6vh) scale(0.85) }
}
@keyframes meteor-2{
  0%{ transform: translateX(0) translateY(0) scale(0.7); opacity:0 }
  12%{ opacity:0.85; transform: translateX(-4vw) translateY(-0.5vh) scale(1) }
  50%{ opacity:0.95; transform: translateX(-9vw) translateY(-2vh) scale(1.06) }
  100%{ opacity:0; transform: translateX(-16vw) translateY(-5vh) scale(0.9) }
}
@keyframes meteor-3{
  0%{ transform: translateX(0) translateY(0) scale(0.9); opacity:0 }
  8%{ opacity:0.9; transform: translateX(-5vw) translateY(-1.2vh) scale(1) }
  50%{ opacity:0.98; transform: translateX(-11vw) translateY(-3vh) scale(1.12) }
  100%{ opacity:0; transform: translateX(-20vw) translateY(-7vh) scale(0.85) }
}
@keyframes meteor-4{
  0%{ transform: translateX(0) translateY(0) scale(0.75); opacity:0 }
  15%{ opacity:0.9; transform: translateX(-7vw) translateY(-1.8vh) scale(1) }
  50%{ opacity:0.96; transform: translateX(-12vw) translateY(-3.8vh) scale(1.09) }
  100%{ opacity:0; transform: translateX(-22vw) translateY(-8vh) scale(0.8) }
}

/* UFOs: small saucers that cruise across the starfield */
.ufo{
  position: absolute;
  width: 84px;
  height: 36px;
  left: 110%;
  border-radius: 50% / 40%;
  pointer-events: none;
  transform: translateZ(0);
  /* Make UFOs fully visible throughout their animation */
  opacity: 1 !important;
}
.ufo::before{ /* saucer body */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 6px; bottom: 6px;
  border-radius: 50% / 40%;
  background: linear-gradient(180deg, #cfdcff 0%, #9fb4ff 45%, #6f8fff 100%);
  box-shadow: 0 8px 24px rgba(20,40,120,0.45), inset 0 -6px 16px rgba(255,255,255,0.12);
}
.ufo::after{ /* dome + lights */
  content: '';
  position: absolute;
  left: 26px; right: 26px; top: -6px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.95) 0%, rgba(180,210,255,0.9) 20%, rgba(120,160,255,0.5) 60%, transparent 100%);
  box-shadow: 0 6px 18px rgba(100,140,255,0.18);
}
.ufo .beam{ /* optional beam - hidden by default, small glow */
  display:block; position:absolute; left:36px; top:34px; width:12px; height:8px; border-radius:0 0 50% 50%; background:linear-gradient(180deg, rgba(255,255,200,0.06), rgba(255,255,200,0.02));
}

.ufo-1{ top: 20%; animation: ufo-1-fly 16s linear infinite 0s; }
.ufo-2{ top: 45%; width: 100px; height:40px; animation: ufo-2-fly 20s linear infinite 2.4s; }
.ufo-3{ top: 72%; width: 72px; height:32px; animation: ufo-3-fly 14s linear infinite 5s; }

@keyframes ufo-1-fly{
  0%{ left: 110%; transform: translateY(0) scale(0.9); opacity:1 }
  6%{ opacity:1 }
  50%{ left: 20%; transform: translateY(-2vh) scale(1); opacity:1 }
  100%{ left: -20%; transform: translateY(0) scale(0.9); opacity:1 }
}
@keyframes ufo-2-fly{
  0%{ left: 115%; transform: translateY(0) scale(0.95); opacity:1 }
  8%{ opacity:1 }
  30%{ transform: translateY(-3vh); opacity:1 }
  60%{ transform: translateY(2vh); opacity:1 }
  100%{ left: -25%; transform: translateY(0) scale(0.95); opacity:1 }
}
@keyframes ufo-3-fly{
  0%{ left: 120%; transform: translateY(0) scale(0.85); opacity:1 }
  10%{ opacity:1 }
  45%{ left: 18%; transform: translateY(-1.6vh); opacity:1 }
  100%{ left: -30%; transform: translateY(0) scale(0.85); opacity:1 }
}

@keyframes planet-1-move{
  0%{ transform: translateX(0) rotate(0deg); opacity: 1 }
  8%{ opacity: 1 }
  50%{ transform: translateX(-90vw) rotate(15deg); opacity: 1 }
  100%{ transform: translateX(-180vw) rotate(30deg); opacity: 1 }
}
@keyframes planet-2-move{
  0%{ transform: translateX(0) rotate(0deg); opacity: 1 }
  6%{ opacity: 1 }
  50%{ transform: translateX(-75vw) rotate(-8deg); opacity: 1 }
  100%{ transform: translateX(-160vw) rotate(-20deg); opacity: 1 }
}
@keyframes planet-3-move{
  0%{ transform: translateX(0) rotate(0deg); opacity: 1 }
  10%{ opacity: 1 }
  50%{ transform: translateX(-100vw) rotate(6deg); opacity: 1 }
  100%{ transform: translateX(-200vw) rotate(12deg); opacity: 1 }
}

/* Live prices flash styles (used by vendor/live-prices.js) */
.live-coin{ display:inline-block; padding:2px 6px; border-radius:6px; background:transparent; transition: background-color 0.25s ease, color 0.25s ease; }
.live-coin.price-up{ background: rgba(16,185,129,0.12); color: #10b981 !important; box-shadow: 0 6px 18px rgba(16,185,129,0.08); }
.live-coin.price-down{ background: rgba(239,68,68,0.10); color: #ef4444 !important; box-shadow: 0 6px 18px rgba(239,68,68,0.06); }

/* Countdown and glow-related styles removed as countdown UI is no longer used */



/* ensure main content sits above the starfield */
main, footer { position: relative; z-index: 3; }
/* Make header (and its dropdowns) sit above sticky banners and other content */
.site-header { position: relative; z-index: 20000; isolation: isolate; }
/* overlay removed */

/* header */
.site-header{
  /* Safari / WebKit prefix for backdrop-filter and a solid fallback for older browsers */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* Darker glass so neon pops; keep subtle, not opaque */
  background: linear-gradient(180deg, rgba(12,16,28,0.55), rgba(8,12,24,0.45));
  color: white;
  padding: 14px 20px;
}
.site-header h1, .site-header h2, .site-header h3, .site-header h4, .site-header h5, .site-header h6 { color: #fff; }
.logo{
  height:92px !important;
  width:auto !important;
  border-radius:50%;
  border:0;
  box-shadow:none;
  background: transparent;
}

/* header small label (subtitle) - force white with slight opacity */
.site-header .text-muted { color: #ffffff !important; opacity: 0.85 !important; }

/* nav links */
.site-header .nav-link{color:rgba(255,255,255,0.9); text-decoration:none; padding:6px 10px; border-radius:10px; text-shadow: 0 0 10px rgba(146,208,255,0.28);}
.site-header .nav-link:hover, .site-header .nav-link:focus{
  /* Slow animated neon gradient */
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  /* Ensure no fallback blue background leaks through */
  background-color: transparent !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30);
  border-radius:10px;
}
/* Highest-specificity path for direct child nav links (beats Bootstrap defaults) */
body > header > nav > a.nav-link:hover,
body > header > nav > a.nav-link:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-color: transparent !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite !important;
  color: #0f0f0f !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30) !important;
  border-radius:10px !important;
}
/* Apply the same Baby AI neon hover to any navbar on pages that don't use .site-header */
header .nav-link:hover,
header .nav-link:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
nav .nav-link:hover,
nav .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
a.nav-link:hover,
a.nav-link:focus,
.navbar-collapse .nav-link:hover,
.navbar-collapse .nav-link:focus,
.nav .nav-link:hover,
.nav .nav-link:focus,
.site-header .nav-link:focus-visible,
header .nav-link:focus-visible,
.navbar .nav-link:focus-visible{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-color: transparent !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30);
  border-radius:10px;
}

/* Active/Current nav state: neon pill + subtle underline */
.site-header .nav-link.active,
.site-header .nav-link[aria-current="page"]{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  color: #0b0b0b !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30);
}
.site-header .nav-link.active::after,
.site-header .nav-link[aria-current="page"]::after{
  content: '';
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  box-shadow: 0 0 10px rgba(0,179,255,.35), 0 0 18px rgba(255,43,214,.25);
}
/* remove underline for buttons/links in header (Home) */
.site-header .btn, .site-header .nav-link { text-decoration: none !important; }
/* Neon hover for any header button (primary or outline) */
.site-header .btn:hover, .site-header .btn:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30);
}

/* Navbar toggler (hamburger) neon treatment */
.site-header .navbar-toggler{
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.site-header .navbar-toggler:hover,
.site-header .navbar-toggler:focus{
  border-color: transparent !important;
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  color: #0b0b0b !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 28px rgba(255,43,214,.30) !important;
}

/* Make primary buttons neon by default in the navbar (e.g., Connect Wallet + split toggle) */
.site-header .btn-primary,
.site-header .btn-group .btn-primary,
.site-header .btn-primary.dropdown-toggle,
.site-header .btn-primary.dropdown-toggle-split{
  /* Force neon gradient regardless of Bootstrap defaults */
  --bs-btn-bg: transparent !important;
  --bs-btn-border-color: transparent !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-hover-border-color: transparent !important;
  --bs-btn-active-bg: transparent !important;
  --bs-btn-active-border-color: transparent !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: transparent !important;
  --bs-btn-color: #ffffff !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-active-color: #ffffff !important;
  background-image: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  background-color: transparent !important;
  background-size: 300% 300% !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(0,179,255,.5), 0 0 36px rgba(255,43,214,.35);
}

/* Keep neon on interactive states */
.site-header .btn-primary:hover,
.site-header .btn-primary:focus,
.site-header .btn-primary:active,
.site-header .btn-primary.show,
.site-header .btn-primary.dropdown-toggle.show,
.site-header .btn-primary.dropdown-toggle-split.show{
  background-image: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  background-color: transparent !important;
  animation: neonShift 10s linear infinite;
  color: #ffffff !important;
  border: none !important;
}

/* Max specificity on IDs as a final guard */
#connectBtn,
#walletDropdownToggle{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  background-color: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

/* dropdown items inside header */
.site-header .dropdown-menu .dropdown-item:hover,
.site-header .dropdown-menu .dropdown-item:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
}

/* Active state in dropdowns */
.site-header .dropdown-menu .dropdown-item.active,
.site-header .dropdown-menu .dropdown-item:active{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  color: #0b0b0b !important;
}

/* Dropdowns that are appended to <body> (e.g., wallet menu) */
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus,
#walletDropdownMenu.dropdown-menu .dropdown-item:hover,
#walletDropdownMenu.dropdown-menu .dropdown-item:focus,
.dropdown-menu.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu.dropdown-menu-dark .dropdown-item:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
}

/* Mobile hamburger menu wallet buttons (WalletConnect button removed) */
.collapse .nav-link{ color:#fff !important; }
.collapse .nav-link:hover,
.collapse .nav-link:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
  border-radius: 10px;
}

/* Position mobile hamburger at the top-right corner of the screen */
@media (max-width: 991.98px){
  .site-header{ position: relative; }
  .site-header > nav{ display:flex; width:100%; padding-right:48px; }
  .site-header .navbar-toggler{
    position: fixed;         /* pin to viewport corner on mobile */
    right: 6px;
    top: 4px;
    z-index: 30000;
    margin-left: 0 !important;
  }
  /* small visual nudge for bars icon inside button */
  .site-header .navbar-toggler > span > i{ position: relative; top: 1px; }
}

/* Mobile collapse panel: make it more see-through and avoid covering whole page */
#mobileNav .card{
  background: rgba(0,0,0,0.28) !important; /* lighter, glassier */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px;
  max-height: 58vh;              /* take even less height on mobile */
  overflow-y: auto;               /* scroll if content is tall */
  /* Baby AI glow */
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    0 0 22px rgba(0,179,255,0.18),
    0 0 36px rgba(255,43,214,0.14);
  /* Make the panel feel like a floating sheet rather than full-width */
  width: min(88vw, 480px);
  margin-left: auto;
  margin-right: auto;
  padding: 12px !important;      /* slightly tighter padding than default card */
}

/* ===== FAQ neon accordion (readable on dark) ===== */
/* If a page uses a #faq section, ensure high-contrast neon styling */
#faq .card{ background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.06); }
#faq .card h3{ color:#ffffff }

#faq .accordion .accordion-item{ background: rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.06) !important; border-radius: 12px; overflow: hidden; }
#faq .accordion .accordion-item + .accordion-item{ margin-top: 10px }

#faq .accordion-button{ color:#ffffff !important; background: rgba(255,255,255,0.06) !important; border:none !important; box-shadow: none !important; }
#faq .accordion-button:hover,
#faq .accordion-button:focus{ outline: none; box-shadow: 0 0 0 0.15rem rgba(0,229,255,0.2) !important; }

/* Expanded state: neon gradient header */
#faq .accordion-button:not(.collapsed){
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color:#0b0b0b !important;
  text-shadow: none !important;
}

#faq .accordion-button::after{ filter: invert(1) hue-rotate(180deg) saturate(120%); }

#faq .accordion-body{ background: rgba(0,0,0,0.35) !important; color: #e6eef8 !important; border-top: 1px solid rgba(255,255,255,0.06); }

/* Extra-high specificity to override Bootstrap and global white text */
section#faq .accordion .accordion-item{ background: rgba(15,23,42,0.6) !important; border:1px solid rgba(255,255,255,0.06) !important; }
section#faq .accordion .accordion-header .accordion-button{ 
  background: rgba(255,255,255,0.06) !important; 
  color:#ffffff !important; 
  border:none !important; 
  box-shadow:none !important; 
}
section#faq .accordion .accordion-header .accordion-button:not(.collapsed){
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color:#0b0b0b !important;
}
section#faq .accordion .accordion-header .accordion-button::after{ filter: invert(1) hue-rotate(180deg) saturate(120%); }
section#faq .accordion .accordion-collapse .accordion-body{ background: rgba(0,0,0,0.35) !important; color:#e6eef8 !important; }

/* Global dark neon accordion fallback (if a page uses .accordion without #faq wrapper) */
body .accordion .accordion-item{ background: rgba(15,23,42,0.55) !important; border:1px solid rgba(255,255,255,0.06) !important; border-radius:12px }
body .accordion .accordion-button{ background: rgba(255,255,255,0.06) !important; color:#ffffff !important; box-shadow:none !important; border:none !important }
body .accordion .accordion-button:not(.collapsed){
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color:#0b0b0b !important;
}
body .accordion .accordion-button::after{ filter: invert(1) hue-rotate(180deg) saturate(120%) }
body .accordion .accordion-body{ background: rgba(0,0,0,0.35) !important; color:#e6eef8 !important }

/* Bootstrap 5 accordion CSS variables override for dark theme */
body .accordion{
  --bs-accordion-bg: rgba(15,23,42,0.55);
  --bs-accordion-color: #e6eef8;
  --bs-accordion-border-color: rgba(255,255,255,0.06);
  --bs-accordion-btn-bg: rgba(255,255,255,0.06);
  --bs-accordion-btn-color: #ffffff;
  --bs-accordion-active-bg: #e8faff; /* used if gradient is not applied */
  --bs-accordion-active-color: #0b0b0b;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.15rem rgba(0,229,255,0.2);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b0b0b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
@media (max-width: 576px){
  #mobileNav .card{ max-height: 55vh; width: min(90vw, 460px); }
}
/* Compact anchored sheet on small/tablet: align the mobile panel to the right under header */
@media (max-width: 768px){
  /* Position the collapse container under the header bar, right-aligned */
  #mobileNav{
    position: absolute;
    right: 12px;
    left: auto;
    top: calc(100% + 8px);
    z-index: 23000; /* above content */
    width: auto;
  }
  /* Tighter floating sheet */
  #mobileNav .card{
    width: min(86vw, 420px) !important;
    max-height: 50vh !important;
    padding: 10px !important;
  }
}
/* Baby AI look for items inside the mobile panel */
#mobileNav .card a.nav-link,
#mobileNav .card a.btn{
  display: block;
  width: 100%;
}
#mobileNav .card a.nav-link{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0;
}
#mobileNav .card a.nav-link:hover,
#mobileNav .card a.nav-link:focus,
#mobileNav .card a.btn:hover,
#mobileNav .card a.btn:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite !important;
  color: #0b0b0b !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30) !important;
}

/* ===== Global tab styles (Bootstrap tabs/pills) ===== */
.nav-tabs, .nav-pills{ --bai-tab-border: rgba(255,255,255,0.12); }
.nav-tabs{ border-bottom: 1px solid var(--bai-tab-border) !important; }
.nav-tabs .nav-link,
.nav-pills .nav-link{
  color: #ffffff !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  margin-right: 6px;
  border-radius: 10px;
}
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover{
  /* Use the same Baby AI neon hover for tab/pill navs */
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  background-color: transparent !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30) !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color: #0b0b0b !important;
  border-color: transparent !important;
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30) !important;
}
.nav-tabs .nav-link.active::after{
  content: '';
  display: block;
  height: 2px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  box-shadow: 0 0 10px rgba(0,179,255,.35), 0 0 18px rgba(255,43,214,.25);
}

/* Neon underline accent for header (full width) */
.site-header::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #22ffd0, #52b4ff 58%, #b08aff);
  box-shadow: 0 0 18px rgba(82,180,255,.45), 0 0 28px rgba(176,138,255,.35);
  pointer-events: none;
  opacity: 0.85;
}

/* ===== Wallet cluster alignment fix (always keep status + connect buttons right) ===== */
/* Ensure header uses a single flex row on large screens with nav links on the left
   and wallet info + connect button group pinned to the far right without wrapping
   underneath other links. */
.site-header{ display:flex; align-items:center; }
.site-header > nav{ flex:1 1 auto; display:flex; align-items:center; flex-wrap:nowrap; }
/* Push the wallet info block to the right end; keep vertical stack */
.site-header > nav .wallet-info{ margin-left:auto; display:flex !important; flex-direction:column; text-align:right; }
/* Keep the connect wallet button group directly to the right of the balance */
.site-header > nav .wallet-fab{ margin-left:12px; }
/* Avoid nav wrapping that would push wallet components below links */
.site-header > nav > a.nav-link{ flex:0 0 auto; }
@media (max-width: 992px){
  /* Allow existing mobile behavior (links hidden via d-none d-lg-inline-block); keep cluster untouched */
  .site-header{ flex-direction:column; align-items:flex-start; }
  .site-header > nav{ width:100%; }
  .site-header > nav .wallet-info{ margin-left:0; align-self:flex-end; }
}
/* Wallet connect stack: stack Connect Wallet buttons above status text */
.site-header .wallet-connect-stack{ display:flex; flex-direction:column; align-items:flex-end; }
.site-header .wallet-connect-stack .wallet-fab{ order:1; }
.site-header .wallet-connect-stack .wallet-info, .site-header .wallet-connect-stack .wallet-status, .site-header .wallet-connect-stack .kid-wallet-panel, .site-header .wallet-connect-stack .wallet-info-panel{ order:2; margin-top:6px; margin-left:0 !important; }
.site-header .wallet-connect-stack .wallet-info.d-lg-flex,
.site-header .wallet-connect-stack .wallet-status.d-lg-block,
.site-header .wallet-connect-stack .kid-wallet-panel.d-lg-flex,
.site-header .wallet-connect-stack .wallet-info-panel.d-lg-flex{ display:flex !important; flex-direction:column; text-align:right; }

/* Mobile collapse buttons (outline variants) */
.collapse .btn-outline-primary:hover,
.collapse .btn-outline-primary:focus,
.collapse .btn-outline-light:hover,
.collapse .btn-outline-light:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #0b0b0b !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30) !important;
}

/* Hamburger toggler button */
.navbar-toggler:hover,
.navbar-toggler:focus{
  background: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple), var(--neon-cyan)
  ) !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color:#0b0b0b !important;
  border-color: transparent !important;
}
.navbar-toggler:hover i,
.navbar-toggler:focus i{ color:#0b0b0b !important; }
.collapse .btn-outline-primary{ border-color: rgba(255,255,255,0.18) !important; color:#fff !important; }

/* ===== Global BabyAi button styles (copied from Staking page, applied site-wide) ===== */
/* Primary/Success/Warning use the cyan→pink neon gradient with bold black text */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-warning{
  background: linear-gradient(90deg, var(--bai-cyan), var(--bai-pink)) !important;
  color: #0b0b0b !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 0 22px rgba(82,180,255,.45), 0 0 44px rgba(185,139,255,.38) !important;
}
.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-warning:hover{
  filter: brightness(1.07) !important;
  transform: translateY(-1px) scale(1.02) !important;
}
.btn.btn-primary:active,
.btn.btn-success:active,
.btn.btn-warning:active{
  transform: none !important;
  filter: brightness(1.0) !important;
}

/* Outline variants tuned for dark backgrounds (from staking) */
.btn.btn-outline-primary{
  color: #e9ddff !important;
  border-color: var(--bai-violet) !important;
  background: rgba(255,255,255,0.02) !important;
  box-shadow: inset 0 0 0 1px rgba(157,92,255,0.28) !important;
}
.btn.btn-outline-secondary{
  color: #eaf6ff !important;
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.04) !important;
}
.btn.btn-outline-light{
  color: #eaf6ff !important;
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.02) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
}

/* Respect reduced motion for button transitions */
@media (prefers-reduced-motion: reduce){
  .btn.btn-primary,
  .btn.btn-success,
  .btn.btn-warning{
    transition: none !important;
  }
}

/* Make the header dropdown (connect menu) dark and ensure it overlays everything */
.site-header .btn-group { position: relative; z-index: 21000; }
.site-header .dropdown-menu { background: rgba(0,0,0,0.78) !important; border: 1px solid rgba(255,255,255,0.04); position: absolute; z-index: 22000; }
.site-header .dropdown-menu.show { z-index: 22000; }
.site-header .dropdown-menu .dropdown-item { color: #ffffff !important; }

/* Global dark dropdown baseline so white-on-white doesn't happen when appended to <body> */
.dropdown-menu-dark,
#walletDropdownMenu.dropdown-menu{
  background: rgba(0,0,0,0.86) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.dropdown-menu-dark .dropdown-item,
#walletDropdownMenu.dropdown-menu .dropdown-item{ color:#ffffff !important; }
.dropdown-menu-dark .dropdown-divider{ border-top-color: rgba(255,255,255,0.08) !important; }

/* Small screens: wallet dropdown should not cover most of the page, and should be opaque */
@media (max-width: 576px){
  .dropdown-menu-dark,
  #walletDropdownMenu.dropdown-menu{
    background: #0b0b0b !important; /* opaque on mobile */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* constrain size */
    max-height: 48vh;
    overflow-y: auto;
    width: min(84vw, 320px);
    /* breathing room from viewport edges */
    margin: 8px !important;
    border-radius: 12px;
  }
  .dropdown-menu-dark .dropdown-item,
  #walletDropdownMenu.dropdown-menu .dropdown-item{
    padding: 8px 12px;
  }
}

/* WalletConnect dropdown hover styles removed */

/* hero */
.hero{
  min-height:72vh;
  /* Home hero background: exact provided image path with robust fallbacks */
  background-image: url("/images/home-presale-cosmic.jpg/home-presale-cosmic.jpg.png"), url("/bai.html/images/home-presale-cosmic.png"), url("/bai.html/images/staking-moon-robot.png"), url("/images/20250218_154147400_iOS.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #071129; /* fallback color while image loads */
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-overlay{
  position:absolute; inset:0; /* softened overlay: light veil instead of heavy darkness */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
}
.hero-content{position:relative; z-index:2; max-width:900px; padding:40px;}
.hero .display-5{color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,0.7);}

/* Neon gradient treatment for the hero title */
.hero-title-neon{
  position:relative;
  display:inline-block;
  color:#f8fdff;
  background:linear-gradient(120deg, rgba(0,229,255,0.9), rgba(255,94,247,0.9), rgba(255,246,102,0.85));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 18px rgba(0,229,255,0.45), 0 0 32px rgba(255,94,247,0.32);
  animation:heroNeonPulse 6s ease-in-out infinite;
}
.hero-title-neon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:32px;
  background:radial-gradient(circle at 40% 30%, rgba(0,229,255,0.35), transparent 65%),
             radial-gradient(circle at 70% 70%, rgba(255,94,247,0.35), transparent 70%);
  opacity:0.8;
  filter:blur(18px);
  z-index:-1;
  animation:heroNeonAura 10s ease-in-out infinite;
}
/* Reusable glassy readable hero lead (applied to home, presale, kids, staking) */
.hero-glass-lead{
  display:inline-block;
  padding:6px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.22));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color:#eaf6ff !important;
  text-shadow:0 2px 10px rgba(0,0,0,0.55);
}
/* Block variant for multi-paragraph missions */
.hero-glass-lead-block{
  display:block;
  max-width:960px;
  margin:0 auto 1.1rem;
  padding:14px 18px;
  line-height:1.5;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.26));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color:#eaf6ff !important;
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
}
/* Home hero Learn More button override */
#learnMoreBtn.btn-outline-light{
  color:#0b0b0b !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.55));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-color: rgba(255,255,255,0.65) !important;
  text-shadow:none;
}
#learnMoreBtn.btn-outline-light:hover,#learnMoreBtn.btn-outline-light:focus{
  filter:brightness(1.05);
}

/* Mobile nav card (extract from inline style) */
.mobile-nav-card{
  background:rgba(0,0,0,0.55) !important;
  border:none !important;
}

/* Force white nav link (replaces inline color style) */
.nav-link-white{ color:#ffffff !important; }

/* Connected panel initially hidden (avoid inline display:none) */
#connectedPanel.d-none{ display:none !important; }

@keyframes heroNeonPulse{
  0%,100%{text-shadow:0 0 18px rgba(0,229,255,0.4),0 0 34px rgba(255,94,247,0.28);}
  50%{text-shadow:0 0 26px rgba(0,229,255,0.55),0 0 42px rgba(255,94,247,0.4);}
}

@keyframes heroNeonAura{
  0%,100%{transform:scale(1); opacity:0.75;}
  50%{transform:scale(1.05); opacity:1;}
}

/* Make all headings white across the site */
h1, h2, h3, h4, h5, h6 { color: #ffffff; }

/* Force h6 to a dark color so smaller section subtitles remain readable on light boxes */
h6, .card h6, .bg-white h6, .bg-light h6, .mb-4 h6 {
  color: #0b1220 !important;
}

/* Make body copy white for readability */
/* Force paragraph text to white site-wide (use !important to override local classes) */
p { color: #ffffff !important; }

/* Make all elements with the utility class .mb-4 whiter and more legible
  This targets the common spacing utility used for many sections; it forces
  white text and a tiny soft shadow to improve legibility against images. */
.mb-4, .mb-4 * { color: #ffffff !important; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }

/* Remove underlines site-wide for anchors and header/nav buttons */
a, a:visited { text-decoration: none !important; }
.btn, button { text-decoration: none !important; }

/* connected card */
.connected-card{min-width:260px; border-radius:12px;}

/* main area */
.container{background:transparent; padding-bottom:40px;}
.card{border-radius:12px;background:rgba(255,255,255,0.06); color: #e6eef8; border: none}

/* about image */
.about-image{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 50%;
}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:12px}
.timeline-item{background:rgba(255,255,255,0.03); padding:14px;border-radius:10px}

/* roadmap anchors and icons */
.timeline-item h5 i{ color: var(--accent); width:18px; text-align:center }
.timeline-item{ scroll-margin-top:92px; }

/* ensure roadmap text is readable on dark backgrounds */
.timeline-item h5, .timeline-item p, .timeline-item li { color: #ffffff; }

/* People-first hiring note (roadmap) */
.hiring-note{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(125,155,255,0.6);
  background: linear-gradient(135deg,#0b1220 0%,#0a0f1a 35%,#101a30 70%,#0a0f1a 100%);
  color: #e8f1ff;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  margin: 12px 0 18px 0;
}
.hiring-note .note-icon{
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 102, 241, 0.18);
  border: 1px solid rgba(125,155,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.hiring-note .note-icon i {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0,229,255,0.5);
}

.neon-roadmap .hiring-note .note-icon{
  background: radial-gradient(circle at 30% 30%, rgba(0,229,255,0.85), rgba(0,132,255,0.45)) !important;
  border: 1px solid rgba(0,229,255,0.65) !important;
  box-shadow: 0 0 18px rgba(0,229,255,0.45), inset 0 0 12px rgba(255,43,214,0.28) !important;
}
.hiring-note .note-body { flex: 1 1 auto; min-width: 0; }
.hiring-note .note-title { font-weight: 700; letter-spacing: 0.2px; margin-bottom: 2px; }
.hiring-note .note-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }

/* updated badge */
.updated-badge{ display:inline-block; background:linear-gradient(90deg,var(--accent), #7c3aed); color:#fff; padding:6px 10px; border-radius:999px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.3); }

/* footer */
footer{color: #c9d1d9; margin-top:20px}
/* Ensure footer small/muted text is readable site-wide */
footer .text-muted,
footer small{
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
footer a{ color: rgba(255,255,255,0.9) !important; }

/* Smooth neon gradient motion keyframes */
@keyframes neonShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header .nav-link:hover,
  .site-header .nav-link:focus,
  .site-header .btn:hover,
  .site-header .btn:focus,
  .site-header .dropdown-menu .dropdown-item:hover,
  .site-header .dropdown-menu .dropdown-item:focus,
  .collapse .nav-link:hover,
  .collapse .nav-link:focus{
    animation: none !important;
  }
}


/* responsive tweaks */
@media (max-width: 768px){
  .site-header{flex-direction:column; gap:10px; align-items:flex-start}
  .hero{min-height:60vh}
  .hero h2{font-size:1.8rem}
}

/* Presale page specific styles */
.presale-page{ position:relative; min-height:100vh; color:#fff }
/* Presale background (single source to avoid double-layer artifacts) */
/* Use CSS variables so JS can swap in a 4K/modern asset when available */
.presale-bg-overlay{
  position:fixed; inset:0; z-index: 0; pointer-events: none;
  background-image: var(--presale-hero, url('/images/presale%20hero/presale%20hero.jpg')), var(--presale-hero-rel, url('/images/presale%20hero/presale%20hero.jpg'));
  background-size: cover; background-position: center center;
  filter: brightness(0.9) contrast(1.02);
}
/* Ensure only the overlay paints the image */
body.presale-page{ background-image: none !important; }
/* Position tweaks for extreme aspect ratios to keep subject centered */
@media (min-aspect-ratio: 16/9){ .presale-bg-overlay{ background-position: center 30%; } }
@media (max-aspect-ratio: 3/4){ .presale-bg-overlay{ background-position: center top; } }
.presale-page main, .presale-page header, .presale-page footer { color: #ffffff }
.presale-page .card{ background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.04); color:#fff }
.presale-page .btn-outline-light{ color:#fff; border-color: rgba(255,255,255,0.15) }
.presale-page .lead, .presale-page p, .presale-page h2, .presale-page h3, .presale-page h5, .presale-page li, .presale-page small { color:#ffffff }
.presale-page .progress { background: rgba(255,255,255,0.06) }
.presale-page .progress-bar{ color:#fff }

/* presale blue CTA and progress bar */
.presale-page .btn-success{ background: var(--presale-blue) !important; border-color: var(--presale-blue) !important; color: #fff !important; }
.presale-page .progress-bar#presale-progress{ background: var(--presale-blue) !important; }

/* Force presale page all-text white and tweak interactive elements for contrast */
.presale-page, .presale-page * {
  color: #ffffff !important;
}
.presale-page a, .presale-page a:visited { color: #ffffff !important; text-decoration: underline; }
.presale-page .btn { color: #ffffff !important; }
.presale-page .btn.btn-outline-light { color: #ffffff !important; border-color: rgba(255,255,255,0.35) !important; }
.presale-page .card { background: rgba(0,0,0,0.6) !important; }
.presale-page .small.text-muted { color: rgba(255,255,255,0.7) !important; }

/* Scoped advanced glowing countdown (kept minimal and isolated) */
#presale-countdown{ --pc-glow: #7c3aed; margin-top:18px; display:flex; justify-content:center; }
#presale-countdown .glow-frame{ position:relative; padding:14px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 6px 30px rgba(0,0,0,0.6); isolation:isolate; }
#presale-countdown::before{ content:''; position:absolute; left:-6px; right:-6px; top:-6px; bottom:-6px; border-radius:18px; z-index:-1; background: radial-gradient(circle at 30% 20%, rgba(124,58,237,0.18), transparent 20%), radial-gradient(circle at 70% 80%, rgba(59,130,246,0.08), transparent 30%); filter: blur(12px); opacity:0.95; }
#presale-countdown .count-inner{ display:flex; flex-direction:column; align-items:center; }
#presale-countdown .count-grid{ display:grid; grid-template-columns: repeat(4, auto); gap:10px; align-items:end; }
#presale-countdown .count-card{ min-width:72px; padding:10px 12px; border-radius:10px; background: rgba(255,255,255,0.03); text-align:center; }
#presale-countdown .count-value{ font-size:20px; font-weight:700; letter-spacing:0.6px; }
#presale-countdown .count-label{ font-size:12px; opacity:0.85; margin-top:6px; }
#presale-countdown .seconds-card{ position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; }
#presale-countdown .secs-ring{ position:absolute; width:56px; height:56px; transform: rotate(-90deg); top:6px; left:6px; }
#presale-countdown .secs-ring path{ fill:none; stroke: var(--pc-glow); stroke-width:1.6; stroke-opacity:0.95; stroke-linecap:round; transition: stroke 180ms linear, stroke-dashoffset 250ms linear; }

/* subtle breathing glow animation */
@keyframes pc-glow-breath{ 0%{ box-shadow: 0 8px 30px rgba(124,58,237,0.06) } 50%{ box-shadow: 0 18px 60px rgba(124,58,237,0.12) } 100%{ box-shadow: 0 8px 30px rgba(124,58,237,0.06) } }
#presale-countdown .glow-frame{ animation: pc-glow-breath 3.6s ease-in-out infinite; }

/* final-stage pulse (fast) */
#presale-countdown.final-pulse .glow-frame{ animation: pc-final-pulse 0.9s ease-in-out infinite; }
@keyframes pc-final-pulse{ 0%{ transform: scale(1) } 50%{ transform: scale(1.03); filter: drop-shadow(0 0 18px rgba(124,58,237,0.35)); } 100%{ transform: scale(1) } }

/* ensure ring stroke length conforms to our JS mapping */
#presale-countdown .secs-ring path{ stroke-dasharray:100; stroke-dashoffset:100 }


/* Secondary countdown variant (with robots) */
#presale-countdown-2{ --pc-glow: #06b6d4; margin-top:18px; display:flex; justify-content:center; position:relative; }
#presale-countdown-2 .glow-frame{ padding:12px; border-radius:12px; }
#presale-countdown-2 .count-card{ min-width:64px; padding:8px 10px; }
#presale-countdown-2 .count-value{ font-size:18px }
#presale-countdown-2 .secs-ring{ width:48px; height:48px; top:4px; left:4px }
#presale-countdown-2 .secs-ring path{ stroke: var(--pc-glow); stroke-width:1.4 }

/* Robots container */
.presale-robots{ position:absolute; right:-86px; top:6px; display:flex; flex-direction:column; gap:10px; pointer-events:none; z-index:0 }
.presale-robots .robot{ filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45)); transform-origin:center; }
.presale-robots .robot-1{ animation: robot-bob 4.8s ease-in-out infinite; }
.presale-robots .robot-2{ animation: robot-spin 6.2s linear infinite reverse; }

@keyframes robot-bob{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } 100%{ transform: translateY(0) } }
@keyframes robot-spin{ 0%{ transform: rotate(0deg) } 100%{ transform: rotate(360deg) } }

/* Ensure robots don't overflow on small screens */
@media (max-width:900px){ .presale-robots{ right:-56px; transform: scale(0.9); } }
@media (max-width:560px){ .presale-robots{ display:none } }


/* Stylish presale timer (new) */
.stylish-timer{ --st-accent:#ff6b6b; --st-accent-2:#7c3aed; --st-glow: 0 12px 40px rgba(124,58,237,0.12); display:flex; flex-direction:column; align-items:center; margin-top:20px; }
.stylish-timer .st-frame{ display:flex; gap:14px; align-items:center; padding:12px 16px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.04); box-shadow: var(--st-glow); }
.stylish-timer .st-left{ position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center; }
.stylish-timer .st-ring{ width:84px; height:84px; transform: rotate(-90deg); }
.stylish-timer .st-ring path{ fill:none; stroke: linear-gradient(90deg,var(--st-accent),var(--st-accent-2)); stroke:#ff6b6b; stroke-width:2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition: stroke-dashoffset 300ms linear; }
.stylish-timer .st-secs{ position:absolute; font-weight:800; font-size:18px; color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.stylish-timer .st-right{ display:flex; flex-direction:column; gap:6px; }
.stylish-timer .st-line{ display:flex; gap:12px; align-items:baseline; }
.stylish-timer .st-val{ font-size:20px; font-weight:800; color:#fff; }
.stylish-timer .st-label{ font-size:12px; color:rgba(255,255,255,0.85); }
.stylish-timer .st-note{ margin-top:8px; color:rgba(255,255,255,0.78); }

@media (max-width:560px){ .stylish-timer .st-frame{ flex-direction:row; gap:10px; padding:10px } .stylish-timer .st-right{ flex-direction:row; gap:8px } .stylish-timer .st-line{ flex-direction:column; align-items:center } }


/* Countdown and decorative UFO styles removed (countdown UI not used) */


/* Baby AI chat widget styles */
#babyai-widget{
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 9999;
  pointer-events: auto;
}

#babyai-button{
  background: transparent;
  color:#fff;
  border:none;
  padding:0;
  border-radius:999px;
  box-shadow:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position: relative; /* for badge/ping positioning */
}

#babyai-button .babyai-button-logo{ width:40px; height:40px; object-fit:cover; border-radius:50%; display:block }

/* Subtle pulsing halo on the widget button to draw attention */
#babyai-button .ai-ping{
  position:absolute; inset: -6px;
  border-radius:999px;
  pointer-events:none;
  box-shadow: 0 0 0 0 rgba(16,121,255,0.32);
  animation: babyai-ping 2.6s ease-out infinite;
}
@keyframes babyai-ping{
  0%{ box-shadow: 0 0 0 0 rgba(16,121,255,0.32); }
  70%{ box-shadow: 0 0 0 12px rgba(16,121,255,0.0); }
  100%{ box-shadow: 0 0 0 0 rgba(16,121,255,0.0); }
}

/* Tiny AI badge on the widget button */
#babyai-button .babyai-ai-badge{
  position:absolute;
  right:-2px; bottom:-2px;
  font-size:10px; line-height:1; font-weight:800;
  background: linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#fff; padding:3px 5px; border-radius:999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

#babyai-panel{
  width:320px;
  max-width:92vw;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), #fff);
  color: #07203a;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
  overflow:hidden;
  margin-bottom:8px;
  display:none;
  flex-direction:column;
}

.babyai-header{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.babyai-header .title{ font-weight:600; color:#07102a; }
.babyai-header img.babyai-logo{ width:36px; height:36px; border-radius:8px; }
/* Helper tag in header saying "AI chat helper" */
.babyai-header .babyai-helper-tag{
  margin-left:auto;
  font-size:11px; font-weight:700; letter-spacing:0.2px;
  color:#0b5ed7;
  background: rgba(13,110,253,0.10);
  border:1px solid rgba(13,110,253,0.18);
  padding:4px 8px; border-radius:999px;
}

#babyai-messages{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px; background: linear-gradient(180deg, rgba(250,250,255,0.6), rgba(245,245,255,0.4)); max-height:52vh; }

.msg{ display:flex; align-items:flex-end; gap:8px; max-width:100%; }
.msg .avatar{ width:34px; height:34px; border-radius:8px; overflow:hidden; flex:0 0 34px; }
.msg .avatar img{ width:100%; height:100%; object-fit:cover; }
.msg .bubble{ background:#f2f2f7; padding:10px 12px; border-radius:12px; max-width:76%; position:relative; font-size:13px; line-height:1.3; color:#07102a; }
.msg.user .bubble{ background:linear-gradient(135deg,#dff3ff,#bfe8ff); }
.msg.user{ justify-content:flex-end; }
.msg.bot{ justify-content:flex-start; }
.msg .meta{ display:block; font-size:10px; color:rgba(20,20,30,0.45); margin-top:6px; }

.msg.typing .typing-dots{ width:46px; height:24px; display:flex; align-items:center; gap:6px; }
.typing-dots span{ display:block; width:8px; height:8px; background: linear-gradient(180deg,#fff,#e6e6e6); border-radius:50%; opacity:0.85; animation:dot 1s infinite ease-in-out; }
.typing-dots span:nth-child(2){ animation-delay:0.12s; }
.typing-dots span:nth-child(3){ animation-delay:0.24s; }
@keyframes dot{ 0%{ transform:translateY(0); opacity:0.6 } 50%{ transform:translateY(-6px); opacity:1 } 100%{ transform:translateY(0); opacity:0.6 } }

#babyai-form{ display:flex; gap:8px; padding:10px; border-top:1px solid rgba(0,0,0,0.06); align-items:center; }
#babyai-input{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); font-size:14px; }
#babyai-form button{ background:linear-gradient(135deg,#6fc1ff,#2b9cff); color:#fff; border:none; padding:8px 10px; border-radius:8px; cursor:pointer; }

/* Suggestions: force a single-column stacked layout for clarity */
.babyai-suggestions{ display:flex; flex-direction:column; gap:8px; padding:10px; overflow:auto; border-bottom:1px solid rgba(0,0,0,0.04); }
.babyai-suggestions .sugg{ display:block; width:100%; text-align:left; background:transparent; border:1px solid rgba(0,0,0,0.06); padding:8px 10px; border-radius:10px; font-size:13px; cursor:pointer; white-space:normal; }
.babyai-suggestions .sugg:hover{ background:rgba(10,120,220,0.06); }

/* Horizontal navbar variant for quick suggestions (used by app.js when enabled) */
.babyai-suggestions-nav{
  display:flex;
  gap:8px;
  padding:8px 10px;
  overflow-x:auto;
  align-items:center;
  border-bottom:1px solid rgba(0,0,0,0.04);
  background: transparent;
}
.babyai-suggestions-nav .nav-item{
  flex: 0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.06);
  background: linear-gradient(135deg,#f6fbff,#eef6ff);
  color: #07102a;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.babyai-suggestions-nav .nav-item:focus,
.babyai-suggestions-nav .nav-item:hover{
  box-shadow: 0 8px 20px rgba(10,120,220,0.06);
  outline: none;
}
.babyai-suggestions-nav::-webkit-scrollbar{ height:8px }
.babyai-suggestions-nav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.06); border-radius:999px }

/* Tabs for Baby AI panel */
.babyai-tabs{ display:flex; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.04); background: transparent; }
.babyai-tab{ flex:1; padding:8px 10px; border-radius:8px; background: transparent; border:1px solid rgba(0,0,0,0.04); color: #07102a; font-weight:600; cursor:pointer; }
.babyai-tab.active{ background: linear-gradient(135deg,#eef6ff,#dff3ff); box-shadow: 0 6px 18px rgba(10,120,220,0.06); }
.babyai-tab:focus{ outline: 2px solid rgba(16,121,255,0.18); }
/* reflect aria-selected state for better contrast if JS sets aria-selected */
.babyai-tab[aria-selected="true"]{ background: linear-gradient(135deg,#eef6ff,#dff3ff); box-shadow: 0 6px 18px rgba(10,120,220,0.06); }
.babyai-tab[aria-selected="false"]{ opacity: 0.95; }

@media (max-width:420px){
  #babyai-panel{ width: 92vw }
  #babyai-button{ padding:8px 10px }
}

/* ===== Moving scene (replaces the old #starfield) ===== */
/* page-level moving scene (kept for backward compatibility) */
#moving-scene{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 4vh;
  height: 22vh;
  pointer-events: none;
  z-index: 1;
  display: block;
  overflow: visible;
}

.orbit-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12%;
  width: 220px;
  height: 220px;
  pointer-events: none;
}

.orbiting-baby{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border:3px solid rgba(0,229,255,0.6);
  box-shadow:
    0 0 16px rgba(0,229,255,0.35),
    0 0 28px rgba(255,43,214,0.22),
    0 10px 30px rgba(0,0,0,0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,229,255,0.02));
  animation: orbit-rotate 12s linear infinite, bob 3.6s ease-in-out infinite;
  will-change: transform;
}

/* subtle orbital rotation (the image itself rotates to give motion) */
@keyframes orbit-rotate{
  0%{ transform: translate(-50%,-50%) rotate(0deg) }
  100%{ transform: translate(-50%,-50%) rotate(360deg) }
}

/* gentle bobbing up and down */
@keyframes bob{
  0%{ transform: translate(-50%,-50%) translateY(0) }
  50%{ transform: translate(-50%,-50%) translateY(-8px) }
  100%{ transform: translate(-50%,-50%) translateY(0) }
}

/* floating decorative planets/orbs */
.floating-planet, .floating-orb{
  position: absolute;
  border-radius: 50%;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  opacity: 0.95;
}
.floating-planet{
  width: 46px; height:46px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffd6a5 8%, #ff9f1c 35%, #e76f51 70%, #b33b19 100%);
  bottom: 6%;
  left: 12%;
  animation: fp-1-move 18s linear infinite;
}
.floating-planet.fp-2{ width:36px; height:36px; background: radial-gradient(circle at 30% 30%, #fff 0%, #d0f0fd 6%, #78c6ff 30%, #3aa0ff 60%, #1a6fb3 100%); left: 86%; bottom: 18%; animation: fp-2-move 22s linear infinite; }
.floating-orb{ width:12px; height:12px; background: radial-gradient(circle at 40% 40%, #fff, #9fe6ff); bottom: 30%; left: 6%; animation: fo-1 9s ease-in-out infinite; opacity:0.85 }
.floating-orb.fo-2{ right:6%; left:auto; bottom:50%; width:14px; height:14px; background: radial-gradient(circle at 40% 40%, #fff, #ffd6f0); animation: fo-2 11s ease-in-out infinite; opacity:0.9 }

@keyframes fp-1-move{ 0%{ transform: translateX(0) translateY(0) } 25%{ transform: translateX(6vw) translateY(-3vh) } 50%{ transform: translateX(0) translateY(-6vh) } 75%{ transform: translateX(-8vw) translateY(-3vh) } 100%{ transform: translateX(0) translateY(0) } }
@keyframes fp-2-move{ 0%{ transform: translateX(0) translateY(0) } 20%{ transform: translateX(-6vw) translateY(-2vh) } 45%{ transform: translateX(4vw) translateY(-5vh) } 70%{ transform: translateX(8vw) translateY(-2vh) } 100%{ transform: translateX(0) translateY(0) } }
@keyframes fo-1{ 0%{ transform: translateY(0) scale(1) } 50%{ transform: translateY(-6px) scale(1.08) } 100%{ transform: translateY(0) scale(1) } }
@keyframes fo-2{ 0%{ transform: translateY(0) scale(1) } 40%{ transform: translateY(-10px) scale(1.12) } 100%{ transform: translateY(0) scale(1) } }

/* ensure moving scene sits behind header/content but above page bg */
main, footer { position: relative; z-index: 3; }
#moving-scene{ z-index: 1 }

/* Scoped variant: place the moving scene inside the presale card */
.presale-moving-scene{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  width: 380px;
  height: 140px;
  pointer-events: none;
  z-index: 0; /* sit behind the card content */
  overflow: visible;
}

/* Future Advance Baby AI demo widget */
#future-ai-demo{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); }
.future-ai-conversation{ max-height:140px; overflow:auto; padding:8px; background: transparent; border-radius:8px; }
.future-ai-msg{ padding:8px 10px; margin-bottom:6px; border-radius:8px; max-width:85%; box-shadow:none; font-size:0.95rem; }
.future-ai-msg.bot{ background: rgba(40,167,69,0.06); color:#dfffe8; align-self:flex-start; }
.future-ai-msg.user{ background: rgba(255,255,255,0.04); color:#fff; align-self:flex-end; margin-left:auto; }
.future-ai-conversation .future-ai-msg:first-child{ margin-top:4px; }

/* small responsive tweak */
@media (max-width:600px){ #future-ai-demo{ width:92%; } .future-ai-conversation{ max-height:120px } }
.presale-moving-scene .orbit-center{ bottom: 18px; width:160px; height:160px }
.presale-moving-scene .orbiting-baby{ width:68px; height:68px; box-shadow: 0 8px 22px rgba(0,0,0,0.36); animation: orbit-rotate 10s linear infinite, bob 3.2s ease-in-out infinite; }
.presale-moving-scene .floating-planet{ opacity:0.95 }

/* ensure card content is above the scene visuals */
.card.position-relative > * { position: relative; z-index: 2 }

/* Reduce motion preference respect */
@media (prefers-reduced-motion: reduce){
  .orbiting-baby, .floating-planet, .floating-orb{ animation: none !important; }
}

@media (max-width:768px){
  .orbit-center{ width:140px; height:140px; bottom:8%; }
  .orbiting-baby{ width:64px; height:64px }
}

/* Countdown styles removed */

/* Mobile wallet overlay: make wallet btn-group overlap on all pages */
@media (max-width: 768px){
  .wallet-fab{
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 2147481200 !important;
    gap: 0 !important;
  }
  .wallet-fab > #connectBtn.btn{
    border-radius: 999px 0 0 999px !important;
  }
  .wallet-fab > #walletDropdownToggle.btn{
    border-radius: 0 999px 999px 0 !important;
  }
  /* Ensure dropdown menu renders above content and keeps compact mobile sizing */
  #walletDropdownMenu.dropdown-menu{
    z-index: 2147481201 !important;
    max-height: 55vh;
    overflow: auto;
    background: #0b0b0b !important; /* opaque on mobile */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Token allocation styles */
.allocations {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.allocation-item {
  margin-bottom: 0.5rem;
}

.allocation-item .progress {
  height: 8px;
  margin-top: 0.5rem;
  background-color: rgba(255,255,255,0.08);
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,0.25);
  box-shadow: inset 0 0 12px rgba(0,229,255,0.12);
}

.allocation-item .progress-bar {
  transition: width 0.3s ease;
  border-radius: 999px;
}

/* Specific widths for each allocation */
.allocation-item:nth-child(1) .progress-bar { width: 30%; }
.allocation-item:nth-child(2) .progress-bar { width: 15%; }
.allocation-item:nth-child(3) .progress-bar { width: 20%; }
.allocation-item:nth-child(4) .progress-bar { width: 10%; }
.allocation-item:nth-child(5) .progress-bar { width: 10%; }
.allocation-item:nth-child(6) .progress-bar { width: 10%; }
.allocation-item:nth-child(7) .progress-bar { width: 5%; }

/* Neon roadmap styling */
.neon-roadmap{
  position: relative;
  z-index: 1;
}

.neon-roadmap::before{
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 18px;
  background: radial-gradient(circle at 10% 20%, rgba(0,229,255,0.24), transparent 60%),
              radial-gradient(circle at 90% 30%, rgba(255,43,214,0.18), transparent 62%),
              linear-gradient(135deg, rgba(6,12,32,0.85), rgba(3,8,24,0.9));
  opacity: 0.9;
  filter: blur(18px);
}

.neon-roadmap h3,
.neon-roadmap h4,
.neon-roadmap h5,
.neon-roadmap h6{
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 18px rgba(0,229,255,0.6), 0 0 32px rgba(255,43,214,0.35);
}

.neon-roadmap .timeline-item h5{
  color: var(--neon-pink) !important;
}

.neon-roadmap p,
.neon-roadmap li,
.neon-roadmap small{
  color: rgba(230,248,255,0.92) !important;
  text-shadow: 0 0 10px rgba(0,179,255,0.35);
}

.neon-roadmap .allocations .d-flex span{
  color: rgba(230,248,255,0.92) !important;
}

.neon-roadmap .neon-highlight{
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-magenta));
  background-size: 200% 200%;
  animation: neonShift 12s linear infinite;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none !important;
}

.neon-roadmap .neon-date{
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 16px rgba(0,229,255,0.6);
}

.neon-panel{
  background: rgba(9,16,36,0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,229,255,0.32) !important;
  box-shadow: 0 0 24px rgba(0,229,255,0.15), inset 0 0 20px rgba(255,43,214,0.12);
}

.neon-roadmap .timeline-item{
  background: linear-gradient(135deg, rgba(6,12,32,0.92), rgba(14,20,46,0.76)) !important;
}

.neon-roadmap .timeline-item h5 i{
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 12px rgba(0,229,255,0.45);
}

.neon-roadmap .hiring-note{
  background: linear-gradient(135deg, rgba(6,12,28,0.95), rgba(16,34,72,0.8)) !important;
}

.neon-roadmap .hiring-note .note-title{
  color: var(--neon-pink) !important;
  text-shadow: 0 0 16px rgba(255,43,214,0.55), 0 0 28px rgba(0,229,255,0.25);
}

.neon-roadmap .hiring-note .note-actions .btn{
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)) !important;
  border: none !important;
  color: #03121f !important;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0,229,255,0.28);
}

.neon-roadmap .hiring-note .note-actions .btn.btn-outline-primary{
  background: transparent !important;
  border: 1px solid rgba(0,229,255,0.6) !important;
  color: var(--neon-cyan) !important;
  box-shadow: 0 0 16px rgba(0,229,255,0.35);
}

.neon-roadmap .hiring-note .note-actions .btn:hover,
.neon-roadmap .hiring-note .note-actions .btn:focus{
  box-shadow: 0 14px 32px rgba(255,43,214,0.35), 0 0 22px rgba(0,229,255,0.45);
}

.neon-roadmap #staking-phase-banner{
  background: linear-gradient(135deg, rgba(0,73,122,0.92), rgba(3,118,180,0.78), rgba(7,226,180,0.68)) !important;
}

.neon-roadmap ul li::marker{
  color: var(--neon-pink);
}

.neon-caption{
  color: rgba(187,247,255,0.88) !important;
  text-shadow: 0 0 12px rgba(0,229,255,0.35);
}

.neon-caption-list{
  color: rgba(210,248,255,0.9) !important;
  text-shadow: 0 0 8px rgba(0,229,255,0.3);
}

.neon-card{
  background: linear-gradient(145deg, rgba(8,16,36,0.92), rgba(12,30,66,0.74)) !important;
  border: 1px solid rgba(0,229,255,0.28) !important;
  box-shadow: 0 18px 32px rgba(0,0,0,0.35), 0 0 24px rgba(0,229,255,0.18) !important;
}

.neon-stage-badge{
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)) !important;
  color: #031425 !important;
  box-shadow: 0 0 18px rgba(0,229,255,0.4), 0 0 28px rgba(255,43,214,0.32);
  border: none !important;
  font-weight: 800;
}

.neon-bar{
  box-shadow: 0 0 18px rgba(0,229,255,0.3), inset 0 0 8px rgba(255,255,255,0.25);
}
.neon-bar-1{ background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue)) !important; }
.neon-bar-2{ background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)) !important; }
.neon-bar-3{ background: linear-gradient(90deg, var(--neon-purple), var(--neon-magenta)) !important; }
.neon-bar-4{ background: linear-gradient(90deg, var(--neon-magenta), var(--neon-pink)) !important; }
.neon-bar-5{ background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple)) !important; }
.neon-bar-6{ background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan)) !important; }
.neon-bar-7{ background: linear-gradient(90deg, var(--neon-cyan), #7f5bff) !important; }

.neon-text{
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 16px rgba(0,229,255,0.55), 0 0 32px rgba(0,179,255,0.4);
}

.neon-heading{
  font-weight: 800;
  letter-spacing: 0.4px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-magenta));
  background-size: 180% 180%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: neonShift 14s linear infinite;
  text-shadow: none !important;
}

.neon-copy{
  color: rgba(220,246,255,0.9) !important;
  max-width: 780px;
  text-shadow: 0 0 12px rgba(0,179,255,0.28);
}

.neon-feature-card{
  position: relative;
  overflow: hidden;
}

.neon-feature-card::after{
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 20% 20%, rgba(0,229,255,0.16), transparent 60%),
              radial-gradient(circle at 80% 30%, rgba(255,43,214,0.12), transparent 58%),
              radial-gradient(circle at 50% 80%, rgba(0,179,255,0.14), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
  transform: translateZ(0);
}

.neon-label{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  letter-spacing: 0.6px;
}

.neon-bullet-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.neon-bullet-list li{
  position: relative;
  padding-left: 36px;
  color: rgba(224,248,255,0.94) !important;
}

.neon-bullet-list li::before{
  content: '⚡';
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1.1rem;
  color: var(--neon-cyan);
  text-shadow: 0 0 14px rgba(0,229,255,0.52);
}

.neon-bullet-title{
  display: block;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 12px rgba(0,229,255,0.45);
}

.neon-bullet-copy{
  display: block;
  font-size: 0.9rem;
  color: rgba(220,246,255,0.88) !important;
}

.neon-form-stack{
  position: relative;
  z-index: 1;
}

.neon-field-label{
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(210,248,255,0.85) !important;
  margin-bottom: 4px;
}

.neon-input{
  background: rgba(6,14,32,0.85) !important;
  border: 1px solid rgba(0,229,255,0.35) !important;
  color: #e6f8ff !important;
  box-shadow: inset 0 0 12px rgba(0,229,255,0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.neon-input:focus{
  border-color: rgba(255,43,214,0.55) !important;
  box-shadow: 0 0 20px rgba(0,229,255,0.28), inset 0 0 12px rgba(255,43,214,0.18);
}

.btn-neon{
  /* Match navbar neon gradient and motion */
  background-image: linear-gradient(90deg,
    var(--neon-cyan), var(--neon-blue), var(--neon-magenta), var(--neon-pink), var(--neon-purple)
  ) !important;
  background-color: transparent !important;
  background-size: 400% 400% !important;
  animation: neonShift 10s linear infinite;
  color: #ffffff !important; /* user requested white letters */
  text-shadow: 0 0 12px rgba(0,0,0,0.35), 0 0 18px rgba(0,0,0,0.25); /* improve contrast on bright gradient */
  font-weight: 800;
  border: none !important;
  box-shadow: 0 0 18px rgba(0,179,255,.45), 0 0 36px rgba(255,43,214,.30);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn-neon:hover,
.btn-neon:focus{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 36px rgba(0,229,255,0.42), 0 0 30px rgba(255,43,214,0.32);
}

.btn-neon:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0,229,255,0.28), 0 0 20px rgba(255,43,214,0.22);
}

.neon-faq-card{
  position: relative;
  overflow: hidden;
}

.neon-faq-card::after{
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 25% 15%, rgba(255,43,214,0.14), transparent 60%),
              radial-gradient(circle at 70% 80%, rgba(0,229,255,0.16), transparent 62%);
  pointer-events: none;
  opacity: 0.75;
}

.neon-faq-item{
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,229,255,0.18);
}

.neon-faq-item:last-of-type{
  border-bottom: none;
  padding-bottom: 0;
}

.neon-faq-question{
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--neon-pink) !important;
  text-shadow: 0 0 14px rgba(255,43,214,0.45);
  margin-bottom: 6px;
}

.neon-faq-answer{
  margin: 0;
  color: rgba(224,248,255,0.9) !important;
  text-shadow: 0 0 10px rgba(0,179,255,0.28);
}

.neon-link{
  color: var(--neon-cyan) !important;
  font-weight: 700;
  text-decoration: none !important;
  position: relative;
}

.neon-link::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  box-shadow: 0 0 12px rgba(0,229,255,0.35);
  border-radius: 999px;
  opacity: 0.8;
}

.neon-link:hover::after,
.neon-link:focus::after{
  opacity: 1;
}

.neon-footer{
  border-top: 1px solid rgba(0,229,255,0.22);
  box-shadow: 0 -12px 28px rgba(0,0,0,0.45);
}

.micro-label{
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: rgba(210,248,255,0.8) !important;
}

.countdown-card{
  position: relative;
  overflow: hidden;
  min-width: 320px;
  padding: 24px 28px !important;
  border-radius: 18px;
}

.countdown-card .launch-title{
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.countdown-card .neon-date{
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 18px rgba(0,229,255,0.52);
}

.countdown-grid{
  flex-wrap: wrap;
}

.countdown-unit{
  min-width: 72px;
}

.countdown-unit-label{
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  color: rgba(210,248,255,0.85) !important;
}

.countdown-progress{
  height: 10px;
  border-radius: 999px;
}

.countdown-progress .progress-bar{
  width: 0%;
}

.countdown-tminus{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.presale-meter-card{
  padding: 24px !important;
  border-radius: 18px;
  min-width: 320px;
  max-width: 560px;
}

.presale-stage-label{
  margin-top: 6px;
  font-weight: 700;
  color: var(--neon-pink) !important;
  text-shadow: 0 0 16px rgba(255,43,214,0.42);
}

.presale-stage-info{
  margin-top: 4px;
  font-size: 0.85rem;
  color: rgba(210,248,255,0.88) !important;
}

.legend-separator{
  margin: 0 6px;
  color: rgba(255,255,255,0.4);
}

.presale-price-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.35);
  color: rgba(224,248,255,0.92) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.presale-price-chip .label{
  opacity: 0.7;
}

.presale-price-chip .value{
  font-size: 0.95rem;
  letter-spacing: 0.4px;
}

.presale-live-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,43,214,0.14);
  border: 1px solid rgba(255,43,214,0.35);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,220,255,0.92) !important;
}

.presale-live-pill .status-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ff2bd6);
  box-shadow: 0 0 12px rgba(255,43,214,0.55);
  display: inline-block;
}

.presale-amount{
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 22px rgba(0,229,255,0.42);
}

.presale-progress-track{
  height: 20px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.28);
  box-shadow: inset 0 0 12px rgba(0,229,255,0.15);
}

.btn-neon-outline{
  background: transparent !important;
  border: 1px solid rgba(0,229,255,0.45) !important;
  color: var(--neon-cyan) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 0 18px rgba(0,229,255,0.3);
}

.btn-neon-outline:hover,
.btn-neon-outline:focus{
  background: rgba(0,229,255,0.12) !important;
  box-shadow: 0 0 24px rgba(0,229,255,0.38);
}

.meter-footer{
  margin-top: 12px;
}

.presale-hero{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 45%;
}

.neon-ring{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  overflow:visible;
}
.neon-ring::before,
.neon-ring::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:inherit;
  background:conic-gradient(from 0deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink), var(--neon-cyan));
  animation: neonRingSpin 6s linear infinite;
  pointer-events:none;
}
.neon-ring::before{
  z-index:-2;
}
.neon-ring::after{
  filter:blur(18px);
  opacity:0.55;
  z-index:-3;
}
.neon-ring img{
  position:relative;
  z-index:1;
  border-radius:inherit;
  display:block;
  width:auto;
  height:auto;
  transform: scale(0.97);
  transform-origin: 50% 50%;
  object-fit:cover;
  background: transparent;
  box-shadow: none;
  filter: none;
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.neon-ring--logo{
  width:56px;
  height:56px;
}
.neon-ring--logo img,
.neon-ring--about img,
.neon-ring--hero img{
  width:100%;
  height:100%;
}
.neon-ring--about,
.neon-ring--hero{
  width:min(320px, 100%);
  aspect-ratio:1/1;
}
.neon-ring--hero{
  max-width:340px;
}

@keyframes neonRingSpin{
  to{ transform: rotate(360deg); }
}

body.kid-wallpaper-body .kid-hero-title{
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-magenta));
  background-size: 240% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: neonShift 14s linear infinite;
  text-shadow: 0 0 24px rgba(0,229,255,0.28), 0 0 40px rgba(255,43,214,0.22);
  letter-spacing: 0.6px;
}

body.kid-wallpaper-body .kid-hero-lead{
  color: rgba(190,248,255,0.9) !important;
  text-shadow: 0 0 18px rgba(0,229,255,0.32), 0 0 30px rgba(255,43,214,0.18);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.kid-wallpaper-body .kid-hero-mission{
  color: rgba(199,252,255,0.92) !important;
  text-shadow: 0 0 16px rgba(0,229,255,0.28), 0 0 26px rgba(255,43,214,0.16);
  max-width: 760px;
  margin: 1.2rem auto 0;
  font-weight: 500;
}

body.kid-wallpaper-body .kid-mission-label{
  text-transform: uppercase;
  letter-spacing: 1.6px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

body.kid-wallpaper-body .kid-outline-btn{
  border: 1px solid rgba(0,229,255,0.6) !important;
  color: rgba(194,252,255,0.92) !important;
  text-shadow: 0 0 12px rgba(0,229,255,0.28);
  box-shadow: 0 0 30px rgba(0,229,255,0.24), inset 0 0 18px rgba(255,43,214,0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body.kid-wallpaper-body .kid-outline-btn:hover,
body.kid-wallpaper-body .kid-outline-btn:focus{
  background: linear-gradient(90deg, rgba(0,229,255,0.28), rgba(255,43,214,0.24));
  color: #0b0b0b !important;
  text-shadow: none;
  box-shadow: 0 0 36px rgba(0,229,255,0.32);
}

body.kid-wallpaper-body .kid-section-title{
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue), var(--neon-magenta));
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: neonShift 16s linear infinite;
  text-shadow: 0 0 28px rgba(0,229,255,0.22);
}

body.kid-wallpaper-body .kid-section-copy,
body.kid-wallpaper-body .kid-section-caption{
  color: rgba(208,250,255,0.88) !important;
  text-shadow: 0 0 14px rgba(0,229,255,0.22);
}

body.kid-wallpaper-body .kid-section-list{
  color: rgba(208,250,255,0.88) !important;
  text-shadow: 0 0 14px rgba(0,229,255,0.22);
  padding-left: 1.2rem;
}

body.kid-wallpaper-body .kid-section-list li::marker{
  color: var(--neon-pink);
}

body.kid-wallpaper-body .kid-neon-card{
  position: relative;
  border: 1px solid rgba(0,229,255,0.24) !important;
  background: linear-gradient(135deg, rgba(8,14,28,0.82), rgba(12,24,48,0.74)) !important;
  box-shadow: 0 0 30px rgba(0,229,255,0.16), inset 0 0 18px rgba(255,43,214,0.1);
  overflow: hidden;
}

body.kid-wallpaper-body .kid-neon-card::after{
  content: '';
  position: absolute;
  inset: -40% 10% 50% 10%;
  background: radial-gradient(circle at 50% 50%, rgba(0,229,255,0.18), rgba(0,229,255,0));
  opacity: 0.6;
  pointer-events: none;
}

body.kid-wallpaper-body .kid-card-title{
  color: rgba(206,244,255,0.94) !important;
  text-shadow: 0 0 16px rgba(0,229,255,0.28);
}

body.kid-wallpaper-body .kid-card-copy{
  color: rgba(188,240,255,0.86) !important;
}

body.kid-wallpaper-body .kid-card-btn{
  border-color: rgba(0,229,255,0.45) !important;
  color: rgba(204,250,255,0.9) !important;
}

body.kid-wallpaper-body .kid-card-btn:hover,
body.kid-wallpaper-body .kid-card-btn:focus{
  background: rgba(0,229,255,0.18) !important;
  color: #0b0b0b !important;
}

body.kid-wallpaper-body .kid-card-link{
  color: rgba(0,229,255,0.85) !important;
  font-weight: 600;
  text-decoration: none;
}

body.kid-wallpaper-body .kid-card-link:hover,
body.kid-wallpaper-body .kid-card-link:focus{
  text-decoration: underline;
}

body.kid-wallpaper-body .kid-support-card{
  position: relative;
  height: 100%;
  padding: 1.75rem;
  border-radius: 18px;
  border: 1px solid rgba(0,229,255,0.28);
  background: linear-gradient(150deg, rgba(6,18,30,0.92), rgba(12,30,62,0.74));
  box-shadow: 0 0 32px rgba(0,229,255,0.16), inset 0 0 18px rgba(255,43,214,0.12);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

body.kid-wallpaper-body .kid-support-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,229,255,0.35), rgba(255,43,214,0.28));
  box-shadow: 0 0 20px rgba(0,229,255,0.3);
  font-size: 1.4rem;
  color: rgba(12,16,28,0.92) !important;
}

body.kid-wallpaper-body .kid-support-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(0,229,255,0.16);
  color: rgba(197,251,255,0.9) !important;
  box-shadow: 0 0 12px rgba(0,229,255,0.18);
}

body.kid-wallpaper-body .kid-partner-card{
  position: relative;
  border-radius: 22px;
  padding: 2.25rem;
  border: 1px solid rgba(0,229,255,0.24);
  background: linear-gradient(120deg, rgba(8,16,34,0.94), rgba(12,26,52,0.78));
  box-shadow: 0 0 40px rgba(0,229,255,0.2), inset 0 0 22px rgba(255,43,214,0.1);
}

body.kid-wallpaper-body .kid-partner-ribbon{
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  color: #0b0b0b;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(0,229,255,0.25);
}

body.kid-wallpaper-body .kid-partner-body{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width:768px){
  body.kid-wallpaper-body .kid-partner-body{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

body.kid-wallpaper-body .kid-partner-brand{
  display: flex;
  align-items: center;
  gap: 1rem;
}

body.kid-wallpaper-body .kid-partner-logo{
  max-height: 64px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,229,255,0.18));
}

body.kid-wallpaper-body .kid-partner-logo-fallback{
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  background: rgba(0,229,255,0.18);
  border: 1px solid rgba(0,229,255,0.32);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(12,16,28,0.9) !important;
}

body.kid-wallpaper-body .kid-partner-name{
  font-weight: 700;
  font-size: 1.15rem;
  color: rgba(210,252,255,0.95) !important;
}

body.kid-wallpaper-body .kid-partner-note{
  color: rgba(198,244,255,0.84) !important;
  text-shadow: 0 0 12px rgba(0,229,255,0.18);
}

body.kid-wallpaper-body .kid-partner-cta{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

body.kid-wallpaper-body .kid-summary-card{
  position: relative;
  padding: 2.25rem;
  border-radius: 24px;
  border: 1px solid rgba(0,229,255,0.28);
  background: linear-gradient(135deg, rgba(6,14,28,0.9), rgba(10,24,48,0.78));
  box-shadow: 0 0 40px rgba(0,229,255,0.22), inset 0 0 20px rgba(255,43,214,0.12);
  overflow: hidden;
}

body.kid-wallpaper-body .kid-summary-glow{
  position: absolute;
  inset: -30% -10% 50% -10%;
  background: radial-gradient(circle at 50% 50%, rgba(0,229,255,0.18), rgba(0,229,255,0));
  opacity: 0.6;
  pointer-events: none;
}

body.kid-wallpaper-body .kid-contact-card{
  position: relative;
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid rgba(0,229,255,0.25);
  background: linear-gradient(160deg, rgba(8,18,36,0.92), rgba(12,28,54,0.78));
  box-shadow: 0 0 36px rgba(0,229,255,0.18);
  display: grid;
  gap: 1.5rem;
}

@media (min-width:992px){
  body.kid-wallpaper-body .kid-contact-card{
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
  }
}

body.kid-wallpaper-body .kid-contact-form .form-control{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,229,255,0.24);
  color: rgba(214,252,255,0.95);
  box-shadow: inset 0 0 12px rgba(0,229,255,0.12);
}

body.kid-wallpaper-body .kid-contact-form .form-control:focus{
  border-color: rgba(255,43,214,0.4);
  box-shadow: 0 0 0 0.2rem rgba(0,229,255,0.2);
}

body.kid-wallpaper-body .kid-contact-btn{
  padding-inline: 1.5rem;
}

body.kid-wallpaper-body .kid-support-intro{
  position: relative;
}


body.presale-page .presale-hero-title{
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-magenta));
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: neonShift 12s linear infinite;
  text-shadow: 0 0 18px rgba(0,229,255,0.35), 0 0 32px rgba(255,43,214,0.28);
  letter-spacing: 0.6px;
}

body.presale-page .presale-hero-tagline{
  color: rgba(184,245,255,0.9) !important;
  text-shadow: 0 0 14px rgba(0,229,255,0.35), 0 0 26px rgba(255,43,214,0.2);
  max-width: 720px;
  margin: 0 auto 1.5rem;
}

.wallet-status{
  min-width: 160px;
}

.mobile-nav-card{
  background: rgba(0,0,0,0.55) !important;
  border: none !important;
}

.purchase-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1200;
  align-items: center;
  justify-content: center;
}

.purchase-box{
  min-width: 320px;
  max-width: 720px;
  border-radius: 18px;
}

.oneclick-auth-message{
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 0.9rem;
  max-height: 320px;
  overflow: auto;
}

.presale-spinner{
  display: none;
}
.neon-donation{
  position: relative;
  overflow: hidden;
}

.neon-donation .callout-title{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 16px rgba(0,229,255,0.5), 0 0 28px rgba(255,43,214,0.28);
}

.neon-donation .callout-text{
  color: rgba(210,248,255,0.9) !important;
  text-shadow: 0 0 12px rgba(0,179,255,0.3);
}

.neon-donation .note-icon{
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(0,132,255,0.45)) !important;
  border: 1px solid rgba(0,229,255,0.6) !important;
  box-shadow: 0 0 20px rgba(0,229,255,0.45), inset 0 0 12px rgba(255,43,214,0.25) !important;
}

.neon-donation .note-icon i{
  color: var(--neon-pink) !important;
  text-shadow: 0 0 18px rgba(255,43,214,0.55);
}

.neon-donation::after{
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 10% 20%, rgba(255,43,214,0.18), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(0,229,255,0.16), transparent 62%);
  opacity: 0.65;
  pointer-events: none;
}

.neon-tiers-card{
  position: relative;
  overflow: hidden;
}

.neon-tiers-card::after{
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 18% 22%, rgba(0,229,255,0.2), transparent 60%),
              radial-gradient(circle at 70% 78%, rgba(255,43,214,0.14), transparent 58%);
  opacity: 0.7;
  pointer-events: none;
}

.neon-tier-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(8,16,40,0.92), rgba(12,28,60,0.8));
  border: 1px solid rgba(0,229,255,0.32);
  box-shadow: 0 12px 28px rgba(0,0,0,0.36), 0 0 22px rgba(0,229,255,0.18);
  position: relative;
  overflow: hidden;
}

.neon-tier-card::after{
  content: '';
  position: absolute;
  inset: -40% 0 0 40%;
  background: radial-gradient(circle at 40% 20%, rgba(255,43,214,0.16), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}

.neon-tier-card.highlighted{
  border-color: rgba(255,43,214,0.45);
  box-shadow: 0 18px 40px rgba(255,43,214,0.28), 0 0 28px rgba(0,229,255,0.22);
}

.neon-tier-card.highlighted::after{
  background: radial-gradient(circle at 40% 20%, rgba(255,43,214,0.22), transparent 58%),
              radial-gradient(circle at 70% 75%, rgba(0,229,255,0.18), transparent 60%);
}

.tier-header{
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 1.1rem;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 16px rgba(0,229,255,0.48);
}

.tier-bonus{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  color: #041424 !important;
  box-shadow: 0 0 18px rgba(0,229,255,0.32);
  width: fit-content;
}

.tier-copy{
  color: rgba(220,246,255,0.9) !important;
  font-size: 0.95rem;
  flex-grow: 1;
  text-shadow: 0 0 10px rgba(0,179,255,0.28);
}

.tier-price{
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--neon-pink) !important;
  text-shadow: 0 0 20px rgba(255,43,214,0.35);
}

.tier-price span{
  font-size: 1.6rem;
  letter-spacing: 0.4px;
}
.badge-neon{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  color: #051220 !important;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(0,229,255,0.35), 0 0 22px rgba(255,43,214,0.25);
}

.nav-badge{
  display: inline-flex;
  margin-left: 0;
  margin-top: 4px;
}

.nav-link .nav-badge{
  display: block;
}

@media (min-width: 768px) and (max-width: 1199px){
  body > header.site-header{
    position: relative !important;
  }

  body > header.site-header nav{
    position: static !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button,
  body > header.site-header nav .navbar-toggler.d-lg-none{
    display: inline-flex !important;
    position: absolute !important;
    top: max(0.7rem, calc(env(safe-area-inset-top) + 0.35rem)) !important;
    right: max(0.9rem, calc(env(safe-area-inset-right) + 0.55rem)) !important;
    z-index: 24000 !important;
    width: 54px !important;
    height: 44px !important;
    min-width: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    gap: 2px !important;
    border: 1px solid rgba(162, 231, 255, 0.3) !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg, rgba(11, 21, 39, 0.94), rgba(7, 11, 24, 0.985)),
      radial-gradient(130% 136% at 18% 12%, rgba(72, 219, 255, 0.1), transparent 52%),
      radial-gradient(136% 142% at 82% 88%, rgba(255, 90, 210, 0.045), transparent 58%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 0 1px rgba(255,255,255,0.035),
      inset 0 10px 18px rgba(56, 216, 255, 0.035),
      inset 0 -11px 18px rgba(2, 7, 18, 0.34),
      0 10px 18px rgba(0,0,0,0.24),
      0 0 0 1px rgba(72, 204, 255, 0.06),
      0 0 9px rgba(35, 220, 255, 0.05) !important;
    color: rgba(244, 250, 255, 0.96) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    -webkit-backdrop-filter: blur(14px) saturate(128%) !important;
    backdrop-filter: blur(14px) saturate(128%) !important;
    transform: translateY(0) !important;
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button::before,
  body > header.site-header > button.bbai-mobile-menu-button::after,
  body > header.site-header nav .navbar-toggler.d-lg-none::before{
    content: none !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button:hover,
  body > header.site-header > button.bbai-mobile-menu-button:focus-visible,
  body > header.site-header > button.bbai-mobile-menu-button:active,
  body > header.site-header > button.bbai-mobile-menu-button[aria-expanded="true"],
  body > header.site-header nav .navbar-toggler.d-lg-none:hover,
  body > header.site-header nav .navbar-toggler.d-lg-none:focus-visible,
  body > header.site-header nav .navbar-toggler.d-lg-none:active,
  body > header.site-header nav .navbar-toggler.d-lg-none[aria-expanded="true"]{
    transform: translateY(-1px) !important;
    border-color: rgba(177, 236, 255, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(13, 24, 44, 0.96), rgba(8, 12, 27, 0.992)),
      radial-gradient(140% 148% at 18% 14%, rgba(56, 218, 255, 0.12), transparent 52%),
      radial-gradient(135% 145% at 88% 88%, rgba(255, 78, 214, 0.06), transparent 58%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 0 0 1px rgba(255,255,255,0.04),
      inset 0 10px 20px rgba(56, 216, 255, 0.045),
      inset 0 -11px 18px rgba(3, 8, 20, 0.36),
      0 12px 22px rgba(0,0,0,0.26),
      0 0 0 1px rgba(72, 204, 255, 0.09),
      0 0 10px rgba(35, 220, 255, 0.07),
      0 0 8px rgba(255, 44, 214, 0.025) !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button .bbai-mobile-menu-icon{
    display: block !important;
    width: 18px !important;
    height: 2.8px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    line-height: 0 !important;
    transform: none !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(248, 253, 255, 0.99), rgba(231, 244, 255, 0.96)) !important;
    box-shadow:
      0 -5px 0 rgba(247, 253, 255, 0.98),
      0 5px 0 rgba(247, 253, 255, 0.98),
      0 0 8px rgba(118, 236, 255, 0.14) !important;
    flex: 0 0 auto !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button .bbai-mobile-menu-text{
    display: block !important;
    width: auto !important;
    min-height: 8px !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.65) !important;
    transform: none !important;
  }

  body > header.site-header nav .navbar-toggler.d-lg-none::after{
    content: "Menu";
    display: block !important;
    width: auto !important;
    min-height: 8px !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.65) !important;
  }

  body > header.site-header nav .navbar-toggler.d-lg-none .navbar-toggler-icon{
    display: block !important;
    width: 18px !important;
    height: 2.8px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    background-image: none !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(248, 253, 255, 0.99), rgba(231, 244, 255, 0.96)) !important;
    box-shadow:
      0 -5px 0 rgba(247, 253, 255, 0.98),
      0 5px 0 rgba(247, 253, 255, 0.98),
      0 0 8px rgba(118, 236, 255, 0.14) !important;
  }

  body > header.site-header nav .navbar-toggler.d-lg-none .navbar-toggler-icon::before,
  body > header.site-header nav .navbar-toggler.d-lg-none .navbar-toggler-icon::after{
    content: none !important;
  }

  body > header.site-header nav .navbar-toggler.d-lg-none .navbar-toggler-icon i{
    display: none !important;
  }
}

.site-header .bbai-mobile-menu-button {
  display: none !important;
}

/* Presale menu button sync across shared public pages */
@media (max-width: 991.98px) {
  body > header.site-header > button.bbai-mobile-menu-button ~ nav {
    display: none !important;
  }

  .site-header .bbai-mobile-menu-button {
    display: inline-flex !important;
    position: absolute !important;
    top: max(0.7rem, calc(env(safe-area-inset-top) + 0.35rem)) !important;
    right: max(0.9rem, calc(env(safe-area-inset-right) + 0.55rem)) !important;
    z-index: 24000 !important;
    width: 54px !important;
    height: 44px !important;
    min-width: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    gap: 2px !important;
    border: 1px solid rgba(162, 231, 255, 0.3) !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg, rgba(11, 21, 39, 0.94), rgba(7, 11, 24, 0.985)),
      radial-gradient(130% 136% at 18% 12%, rgba(72, 219, 255, 0.1), transparent 52%),
      radial-gradient(136% 142% at 82% 88%, rgba(255, 90, 210, 0.045), transparent 58%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 0 1px rgba(255,255,255,0.035),
      inset 0 10px 18px rgba(56, 216, 255, 0.035),
      inset 0 -11px 18px rgba(2, 7, 18, 0.34),
      0 10px 18px rgba(0,0,0,0.24),
      0 0 0 1px rgba(72, 204, 255, 0.06),
      0 0 9px rgba(35, 220, 255, 0.05) !important;
    color: rgba(244, 250, 255, 0.96) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    -webkit-backdrop-filter: blur(14px) saturate(128%) !important;
    backdrop-filter: blur(14px) saturate(128%) !important;
    transform: translateY(0) !important;
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease !important;
  }

  .site-header .bbai-mobile-menu-button::before,
  .site-header .bbai-mobile-menu-button::after {
    content: none !important;
  }

  .site-header .bbai-mobile-menu-button:hover,
  .site-header .bbai-mobile-menu-button:focus-visible,
  .site-header .bbai-mobile-menu-button:active,
  .site-header .bbai-mobile-menu-button[aria-expanded="true"] {
    transform: translateY(-1px) !important;
    border-color: rgba(177, 236, 255, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(13, 24, 44, 0.96), rgba(8, 12, 27, 0.992)),
      radial-gradient(140% 148% at 18% 14%, rgba(56, 218, 255, 0.12), transparent 52%),
      radial-gradient(135% 145% at 88% 88%, rgba(255, 78, 214, 0.06), transparent 58%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 0 0 1px rgba(255,255,255,0.04),
      inset 0 10px 20px rgba(56, 216, 255, 0.045),
      inset 0 -11px 18px rgba(3, 8, 20, 0.36),
      0 12px 22px rgba(0,0,0,0.26),
      0 0 0 1px rgba(72, 204, 255, 0.09),
      0 0 10px rgba(35, 220, 255, 0.07),
      0 0 8px rgba(255, 44, 214, 0.025) !important;
  }

  .site-header .bbai-mobile-menu-button .bbai-mobile-menu-icon {
    display: block !important;
    width: 18px !important;
    height: 2.8px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    line-height: 0 !important;
    transform: none !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(248, 253, 255, 0.99), rgba(231, 244, 255, 0.96)) !important;
    box-shadow:
      0 -5px 0 rgba(247, 253, 255, 0.98),
      0 5px 0 rgba(247, 253, 255, 0.98),
      0 0 8px rgba(118, 236, 255, 0.14) !important;
    flex: 0 0 auto !important;
  }

  .site-header .bbai-mobile-menu-button .bbai-mobile-menu-text {
    display: block !important;
    width: auto !important;
    min-height: 8px !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.65) !important;
    transform: none !important;
  }
}

@media (max-width: 575.98px) {
  .site-header .bbai-mobile-menu-button {
    width: 54px !important;
    height: 44px !important;
    min-width: 54px !important;
    right: 1rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body > header.site-header > button.bbai-mobile-menu-button,
  body > header.site-header nav .bbai-mobile-menu-button {
    display: inline-flex !important;
    position: absolute !important;
    top: max(0.7rem, calc(env(safe-area-inset-top) + 0.35rem)) !important;
    right: max(0.9rem, calc(env(safe-area-inset-right) + 0.55rem)) !important;
    z-index: 24000 !important;
    width: 54px !important;
    height: 44px !important;
    min-width: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    gap: 2px !important;
    border: 1px solid rgba(162, 231, 255, 0.3) !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg, rgba(11, 21, 39, 0.94), rgba(7, 11, 24, 0.985)),
      radial-gradient(130% 136% at 18% 12%, rgba(72, 219, 255, 0.1), transparent 52%),
      radial-gradient(136% 142% at 82% 88%, rgba(255, 90, 210, 0.045), transparent 58%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 0 1px rgba(255,255,255,0.035),
      inset 0 10px 18px rgba(56, 216, 255, 0.035),
      inset 0 -11px 18px rgba(2, 7, 18, 0.34),
      0 10px 18px rgba(0,0,0,0.24),
      0 0 0 1px rgba(72, 204, 255, 0.06),
      0 0 9px rgba(35, 220, 255, 0.05) !important;
    color: rgba(244, 250, 255, 0.96) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    -webkit-backdrop-filter: blur(14px) saturate(128%) !important;
    backdrop-filter: blur(14px) saturate(128%) !important;
    transform: translateY(0) !important;
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button::before,
  body > header.site-header > button.bbai-mobile-menu-button::after,
  body > header.site-header nav .bbai-mobile-menu-button::before,
  body > header.site-header nav .bbai-mobile-menu-button::after {
    content: none !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button:hover,
  body > header.site-header > button.bbai-mobile-menu-button:focus-visible,
  body > header.site-header > button.bbai-mobile-menu-button:active,
  body > header.site-header > button.bbai-mobile-menu-button[aria-expanded="true"],
  body > header.site-header nav .bbai-mobile-menu-button:hover,
  body > header.site-header nav .bbai-mobile-menu-button:focus-visible,
  body > header.site-header nav .bbai-mobile-menu-button:active,
  body > header.site-header nav .bbai-mobile-menu-button[aria-expanded="true"] {
    transform: translateY(-1px) !important;
    border-color: rgba(177, 236, 255, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(13, 24, 44, 0.96), rgba(8, 12, 27, 0.992)),
      radial-gradient(140% 148% at 18% 14%, rgba(56, 218, 255, 0.12), transparent 52%),
      radial-gradient(135% 145% at 88% 88%, rgba(255, 78, 214, 0.06), transparent 58%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 0 0 1px rgba(255,255,255,0.04),
      inset 0 10px 20px rgba(56, 216, 255, 0.045),
      inset 0 -11px 18px rgba(3, 8, 20, 0.36),
      0 12px 22px rgba(0,0,0,0.26),
      0 0 0 1px rgba(72, 204, 255, 0.09),
      0 0 10px rgba(35, 220, 255, 0.07),
      0 0 8px rgba(255, 44, 214, 0.025) !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button .bbai-mobile-menu-icon,
  body > header.site-header nav .bbai-mobile-menu-button .bbai-mobile-menu-icon {
    display: block !important;
    width: 18px !important;
    height: 2.8px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    line-height: 0 !important;
    transform: none !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(248, 253, 255, 0.99), rgba(231, 244, 255, 0.96)) !important;
    box-shadow:
      0 -5px 0 rgba(247, 253, 255, 0.98),
      0 5px 0 rgba(247, 253, 255, 0.98),
      0 0 8px rgba(118, 236, 255, 0.14) !important;
    flex: 0 0 auto !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button .bbai-mobile-menu-text,
  body > header.site-header nav .bbai-mobile-menu-button .bbai-mobile-menu-text {
    display: block !important;
    width: auto !important;
    min-height: 8px !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.65) !important;
    transform: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body > header.site-header {
    padding-right: max(5.5rem, calc(env(safe-area-inset-right) + 5.1rem)) !important;
  }

  body > header.site-header > nav {
    min-width: 0 !important;
  }

  body > header.site-header > nav .wallet-connect-stack,
  body > header.site-header nav .wallet-connect-stack {
    margin-right: max(4.5rem, calc(env(safe-area-inset-right) + 4rem)) !important;
  }

  body > header.site-header > button.bbai-mobile-menu-button,
  body > header.site-header nav .bbai-mobile-menu-button {
    z-index: 2147481203 !important;
  }
}