/* MoonBytes shared UI fixes */
body{overflow-x:hidden;}
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
.mb-nav-links{
  /* Keep dropdowns visible (vertical overflow must remain visible on desktop). */
  overflow: visible !important;
  flex-wrap: wrap;
  /* Allow the navigation bar to scroll horizontally instead of clipping items. Without this
     change, long menus get truncated on smaller viewports and some links become inaccessible.
     The !important flag ensures this rule wins over inline styles defined in each page. */

  /* Hide the native scrollbar on supported browsers to preserve the clean look of the header. */
  -ms-overflow-style: none;
  scrollbar-width: none;

  /* Allow nav items to wrap when there isn't enough horizontal space. Without wrapping,
     some links may be truncated off-screen. Wrapping preserves the overall look while
     ensuring every link remains accessible. */
  flex-wrap: wrap;
  justify-content: center;
}

/* Hide scrollbar in WebKit-based browsers */
.mb-nav-links::-webkit-scrollbar{
  display: none;
}
.mb-nav-links .navlink{font-size:clamp(10px,1.05vw,14px);letter-spacing:.08em;padding:.35rem .45rem;white-space:nowrap}
.mb-search{min-width:0;width:clamp(140px,16vw,224px);}
@media (max-width:1100px){.mb-nav-links{gap:1rem!important}}
@media (max-width:980px){.mb-nav-links{gap:.75rem!important}}
@media (max-width:880px){.mb-nav-links .navlink{font-size:11px;letter-spacing:.06em;padding:.3rem .35rem}}
.navlink{font-weight:800;letter-spacing:.08em;font-size:.8rem;color:#fff;opacity:.9;white-space:nowrap}
.navlink:hover{opacity:1;color:#ff00ff}
.navlink.active{color:#ff00ff;opacity:1}

/* Logo neon hover + moon reveal */
.mb-logo{position:relative;display:inline-flex;align-items:center;gap:.45rem}
.mb-logo .mb-word{transition:filter .25s ease,text-shadow .25s ease,transform .25s ease}
.mb-logo:hover .mb-word{filter:brightness(1.25);text-shadow:0 0 10px rgba(255,0,255,.85),0 0 22px rgba(255,0,255,.55);transform:translateY(-1px)}
.mb-logo .mb-moon{width:22px;height:22px;opacity:0;transform:translateX(-6px) scale(.6);transition:opacity .35s ease,transform .35s ease,filter .35s ease;filter:drop-shadow(0 0 0 rgba(255,0,255,0))}
.mb-logo:hover .mb-moon{opacity:1;transform:translateX(0) scale(1);filter:drop-shadow(0 0 10px rgba(255,0,255,.85)) drop-shadow(0 0 20px rgba(255,0,255,.45))}
.mb-logo .mb-spark{position:absolute;width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 0 10px rgba(255,0,255,.9),0 0 20px rgba(255,0,255,.45);opacity:0}
.mb-logo:hover .mb-spark{animation:mbTwinkle .9s ease-in-out infinite;opacity:1}
.mb-logo .mb-s1{right:-10px;top:-6px;animation-delay:.05s}
.mb-logo .mb-s2{right:8px;top:-10px;animation-delay:.25s;width:3px;height:3px}
.mb-logo .mb-s3{right:-6px;top:14px;animation-delay:.4s;width:3px;height:3px}
@keyframes mbTwinkle{0%{transform:scale(.6);opacity:.15}50%{transform:scale(1.2);opacity:1}100%{transform:scale(.6);opacity:.25}}


/* --- Dropdown menus: stable hover (no layout shift) --- */
/*
  Some pages accidentally included BOTH `absolute` and `relative` utility classes on the
  dropdown panel, which can cause the dropdown to become part of the document flow and
  shove the header around on hover.

  These rules force the dropdown panel to be absolutely-positioned and clickable.
*/
.mb-dropdown{
  display:block;
  position:absolute !important;
  left:0;
  top:100%;
  margin-top:0 !important;     /* ignore `mt-2` if present */
  /* IMPORTANT:
     Do NOT visually offset the whole dropdown with translateY/margins.
     That creates a "dead zone" between trigger and menu and makes hover collapse.
     Instead, keep the dropdown box flush to the trigger and add extra top padding
     so the CONTENT sits lower while the hoverable area stays connected. */
  transform:none !important;
  padding-top:1rem !important;   /* p-2 (0.5rem) + 0.5rem visual gap */
  padding-right:.5rem !important;
  padding-bottom:.5rem !important;
  padding-left:.5rem !important;
  pointer-events:auto;
}

.mb-dropdown.hidden{ display:none !important; }
/* Ensure dropdowns render above the header and are not clipped */
nav, .mb-nav-links{ overflow: visible !important; }


/* Dropdown safety overrides */
.mb-nav-links{overflow:visible !important;}
.mb-dropdown{z-index:9999 !important;}


/* No hover bridge needed now (dropdown has no dead-zone gap). */

/* ------------------------------------------------------------------
   Mobile menu: force the hamburger button to be visible on phones.
   Some iOS layouts hide/push the original #mbNavBtn off-canvas.
   The JS will also inject #mbNavBtnFixed as a fallback.
-------------------------------------------------------------------*/
/* Default (desktop): hide mobile hamburger buttons.
   We do this in plain CSS so we don't depend on Tailwind's responsive
   utility classes being present. */
#mbNavBtn, #mbNavBtnFixed{ display: none !important; }

@media (max-width: 1024px){
  #mbNavBtn, #mbNavBtnFixed{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10000 !important;
  }
  /* Ensure the overlay menu is above content */
  #mbMobileMenu{ z-index: 9999 !important; }
}


/* MoonBytes topic/lang/menu fix */
.mb-dropdown{z-index:60}
@media (max-width:1024px){
  #mbMobileMenu.hidden{display:none !important;}
}


/* Mobile duplicate menu icon fix */
@media (max-width:768px){
  #mbNavBtn,
  #mbMobileMenu #mbNavBtn,
  #mbMobileMenu .menu-toggle,
  #mbMobileMenu .hamburger,
  #mbMobileMenu button[aria-label="Abrir menú"]{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #mbNavBtnFixed{
    display:inline-flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

/* Repair Bytes premium cards */
.mb-rb-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media (min-width:900px){
  .mb-rb-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.mb-rb-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:
    radial-gradient(circle at top left, rgba(255,0,255,.10), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding:28px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.mb-rb-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,0,255,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 30px rgba(255,0,255,.10);
}
.mb-rb-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(255,0,255,.22);
  background:rgba(255,0,255,.10);
  color:#ff4df0;
  padding:8px 14px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mb-rb-title{
  margin-top:18px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.02;
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:-.03em;
  color:#f4f4f5;
}
.mb-rb-divider{
  margin-top:20px;
  height:1px;
  background:linear-gradient(90deg, rgba(255,0,255,.55), rgba(255,255,255,0));
}
.mb-rb-text{
  margin-top:20px;
  font-size:18px;
  line-height:1.95;
  color:#d4d4d8;
}
.mb-rb-link{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ff4df0;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}


/* Guides hover animation inspired by editorial tech sites */
.mb-guides-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media (min-width:768px){
  .mb-guides-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1200px){
  .mb-guides-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.mb-guide-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding:26px;
  text-decoration:none;
  transform:translateY(0) scale(1);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.mb-guide-card:hover{
  transform:translateY(-5px) scale(1.01);
  border-color:rgba(255,0,255,.28);
  box-shadow:0 28px 70px rgba(0,0,0,.30), 0 0 40px rgba(255,0,255,.08);
}
.mb-guide-glow{
  position:absolute;
  inset:-20% auto auto -10%;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,0,255,.12), transparent 68%);
  filter:blur(8px);
  opacity:.7;
  pointer-events:none;
  transition:transform .45s ease, opacity .28s ease;
}
.mb-guide-card:hover .mb-guide-glow{
  transform:translate(14px, 10px) scale(1.15);
  opacity:1;
}
.mb-guide-topline{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.mb-guide-tag{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:8px 12px;
  color:#d4d4d8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mb-guide-source{
  color:#a1a1aa;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mb-guide-title{
  position:relative;
  z-index:1;
  margin:0;
  font-size:clamp(1.55rem,2.2vw,2rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.03em;
  color:#f4f4f5;
  transition:color .24s ease;
}
.mb-guide-card:hover .mb-guide-title{
  color:#ffffff;
}
.mb-guide-text{
  position:relative;
  z-index:1;
  margin:16px 0 0 0;
  color:#c4c4cc;
  font-size:16px;
  line-height:1.8;
}
.mb-guide-cta{
  position:relative;
  z-index:1;
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#ff4df0;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:gap .22s ease, transform .22s ease;
}
.mb-guide-card:hover .mb-guide-cta{
  gap:14px;
}
.mb-guide-card.microsoft{
  background:
    radial-gradient(circle at top left, rgba(255,0,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.mb-guide-card.ifixit{
  background:
    radial-gradient(circle at top left, rgba(0,153,255,.11), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.mb-guide-card.ifixit:hover{
  border-color:rgba(0,153,255,.35);
  box-shadow:0 28px 70px rgba(0,0,0,.30), 0 0 40px rgba(0,153,255,.10);
}
.mb-guide-card.ifixit .mb-guide-glow{
  background:radial-gradient(circle, rgba(0,153,255,.15), transparent 68%);
}


/* Mobile menu one-icon fix + no hidden overlay */
#mbMobileMenu.hidden{
  display:none !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
#mbMobileMenu.is-open{
  display:block !important;
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}
@media (max-width:768px){
  #mbNavBtn,
  #mbMobileMenu #mbNavBtn,
  #mbMobileMenu .menu-toggle,
  #mbMobileMenu .hamburger,
  #mbMobileMenu button[aria-label="Abrir menú"]{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #mbNavBtnFixed{
    display:inline-flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  #mbMobileMenu{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:76px !important;
    z-index:10040 !important;
    max-height:calc(100vh - 92px) !important;
    overflow:auto !important;
    background:rgba(10,10,14,0.98) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    border-radius:18px !important;
    box-shadow:0 18px 50px rgba(0,0,0,0.55) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }
}

/* Repair Bytes link clickability safeguard */
#tips-container, #tips-container *{ position:relative; }
#tips-container a{ pointer-events:auto !important; z-index:2; }


/* Repair Bytes smaller text */
.mb-rb-title{
  font-size:clamp(1.45rem,2.4vw,2.1rem) !important;
  line-height:1.08 !important;
}
.mb-rb-text{
  font-size:15px !important;
  line-height:1.75 !important;
}
.mb-rb-link{
  font-size:11px !important;
}
@media (max-width:640px){
  .mb-rb-title{
    font-size:clamp(1.25rem,6vw,1.7rem) !important;
  }
  .mb-rb-text{
    font-size:14px !important;
    line-height:1.65 !important;
  }
}


/* Desktop dropdown hard fix */
nav .mb-dropdown{
  z-index:10030 !important;
}
@media (min-width:769px){
  nav .mb-dropdown.hidden{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  nav .mb-dropdown:not(.hidden){
    display:block !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}


/* Desktop details dropdown real fix */
.mb-desktop-dd summary::-webkit-details-marker{ display:none; }
.mb-desktop-dd > summary{
  list-style:none;
}
@media (min-width:769px){
  .mb-desktop-dd{
    display:block !important;
    position:relative;
  }
  .mb-desktop-dd .mb-dropdown-panel{
    display:none;
    visibility:hidden;
    pointer-events:none;
  }
  .mb-desktop-dd[open] .mb-dropdown-panel{
    display:block !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .mb-desktop-dd[open] summary svg{
    transform:rotate(180deg);
  }
}



/* Desktop dropdown click/hover hard fix */
@media (min-width: 769px){
  #mbNavLinks .relative.group{
    position: relative !important;
  }
  #mbNavLinks .relative.group > button{
    position: relative;
    z-index: 10031;
  }
  #mbNavLinks .relative.group > button:focus{
    outline: none;
  }
  #mbNavLinks .relative.group > .mb-dropdown{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  #mbNavLinks .relative.group:hover > .mb-dropdown,
  #mbNavLinks .relative.group:focus-within > .mb-dropdown,
  #mbNavLinks .relative.group > button[aria-expanded="true"] + .mb-dropdown{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0);
    z-index: 10030 !important;
  }
}


/* Slightly larger MoonBytes Tech logo while preserving the existing neon hover animation */
.mb-logo{
  gap:.58rem;
}
.mb-logo .mb-word{
  font-size:1.08em;
  line-height:1;
}


.mb-logo .mb-moon{
  width:24px;
  height:24px;
}


/* Global readable typography bump */
html{
  font-size:17px;
}
body{
  font-size:1rem;
  line-height:1.6;
}
p, li{
  font-size:1.04rem;
}
small, .text-xs{
  font-size:.84rem !important;
}
.text-sm{
  font-size:.98rem !important;
}
.text-base{
  font-size:1.06rem !important;
}
.text-lg{
  font-size:1.16rem !important;
}
.text-xl{
  font-size:1.28rem !important;
}
.text-2xl{
  font-size:1.7rem !important;
}
.text-3xl{
  font-size:2rem !important;
}
input, textarea, select, button{
  font-size:1rem;
}
@media (max-width: 640px){
  html{
    font-size:16px;
  }
  p, li{
    font-size:1rem;
  }
}


/* MoonBytes Tech logo extension */
.mb-logo{
  gap:.7rem;
  align-items:flex-end;
  flex-wrap:nowrap;
}
.mb-logo .mb-word{
  display:inline-block;
  line-height:1;
  white-space:nowrap;
}


.mb-logo .mb-moon{
  width:24px;
  height:24px;
  flex:0 0 auto;
  margin-bottom:.1rem;
}
@media (max-width: 1200px){
  
}
@media (max-width: 760px){
  .mb-logo{gap:.45rem;}
  
  .mb-logo .mb-moon{width:20px;height:20px;}
}



/* About / MoonBytes intro hero */
.mb-about-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:3.5rem 1.5rem 2.25rem;
}
.mb-about-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:34px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,0,255,.18), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(168,85,247,.16), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow:0 20px 60px rgba(0,0,0,.34);
}
.mb-about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,0,255,.12), transparent 16%, transparent 84%, rgba(255,0,255,.08));
  pointer-events:none;
}
.mb-about-inner{
  position:relative;
  z-index:1;
  padding:2.25rem;
}
.mb-about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);
  gap:1.5rem;
  align-items:stretch;
}
.mb-about-copybox{
  min-width:0;
}
.mb-about-kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background:rgba(255,0,255,.1);
  border:1px solid rgba(255,0,255,.25);
  color:#ff00ff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mb-about-kicker::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:#ff00ff;
  box-shadow:0 0 12px rgba(255,0,255,.7);
}
.mb-about-title{
  margin:1rem 0 .8rem;
  font-size:clamp(2.2rem, 4.7vw, 3.5rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:900;
}
.mb-about-title .accent{
  color:#ff00ff;
  text-shadow:0 0 18px rgba(255,0,255,.2);
}
.mb-about-copy{
  max-width:820px;
  font-size:clamp(1.06rem, 1.35vw, 1.24rem);
  line-height:1.78;
  color:rgba(255,255,255,.88);
  margin:0;
}
.mb-about-side{
  display:grid;
  gap:1rem;
}
.mb-about-card{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  border-radius:24px;
  padding:1.15rem 1.1rem;
  backdrop-filter:blur(4px);
}
.mb-about-card strong{
  display:block;
  font-size:1.05rem;
  font-weight:900;
  margin:0 0 .3rem 0;
}
.mb-about-card span{
  display:block;
  color:rgba(255,255,255,.72);
  line-height:1.5;
  font-size:.96rem;
}
.mb-about-footer{
  margin-top:1.35rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.mb-about-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.72rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:.95rem;
  font-weight:700;
}
.mb-about-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff00ff;
  box-shadow:0 0 10px rgba(255,0,255,.7);
}
@media (max-width: 980px){
  .mb-about-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 760px){
  .mb-about-wrap{
    padding:2.25rem 1rem 1.4rem;
  }
  .mb-about-inner{
    padding:1.35rem;
  }
  .mb-about-card{
    padding:1rem;
  }
}

/* Restore original logo proportions */
.mb-logo .mb-word{
  display:inline-block !important;
}



/* FINAL FIX - restore original logo exactly */
.mb-logo .mb-word{
  display:inline-block;
  white-space:nowrap;
  line-height:1;
}



@media (max-width:1200px){
  
}


/* Logo cleanup: TECH is part of the main word now */
.mb-logo .mb-tech{ display:none !important; }
.mb-logo .mb-word{
  display:inline-block !important;
  white-space:nowrap;
  line-height:1;
}



/* Mobile nav + logo fixes */
@media (max-width: 768px){
  .mb-logo{
    font-size: clamp(1.9rem, 11vw, 2.8rem) !important;
    max-width: calc(100vw - 130px);
    min-width: 0;
  }
  .mb-logo .mb-word{
    display: inline-block !important;
    white-space: nowrap;
    line-height: .96;
  }
  .mb-logo .mb-moon{
    width: 18px !important;
    height: 18px !important;
  }
  #mbMobileMenu{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 86px;
    z-index: 10040;
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: 10px;
  }
  #mbMobileMenu > .container{
    max-height: none;
  }
  #mbMobileMenu.is-open{
    display: block !important;
  }
  #mbMobileMenu select,
  #mbMobileMenu button,
  #mbMobileMenu summary,
  #mbMobileMenu a{
    touch-action: manipulation;
  }
}





/* Stable mobile header/menu + logo sizing fix */
@media (max-width: 768px){
  nav .container.mx-auto{
    gap:.75rem !important;
    align-items:center !important;
  }

  .mb-logo{
    font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
    max-width: calc(100vw - 96px);
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center !important;
    gap: .22rem !important;
  }

  .mb-logo .mb-word{
    display:inline-block !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
    line-height: .96 !important;
    max-width: 100%;
  }

  .mb-logo .mb-moon{
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto;
  }

  #mbNavBtn{
    display:inline-flex !important;
    position:relative;
    z-index:10061;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }

  #mbMobileMenu{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 88px !important;
    z-index: 10060 !important;
    max-height: calc(100dvh - 104px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    display: none;
    pointer-events: none;
  }

  #mbMobileMenu.is-open{
    display:block !important;
    pointer-events:auto !important;
  }

  #mbMobileMenu > .container{
    padding: 12px !important;
    border-radius: 24px !important;
  }

  #mbMobileMenu .flex.items-center.gap-2.ml-auto.lg\:hidden.shrink-0{
    display:none !important;
  }
}


/* Real mobile header/menu fix */
@media (max-width: 768px){
  nav{
    overflow: visible !important;
  }
  nav .container.mx-auto{
    display:flex !important;
    align-items:center !important;
    gap:.75rem !important;
  }
  .mb-logo{
    font-size: clamp(1.25rem, 7.2vw, 2rem) !important;
    max-width: calc(100vw - 128px) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    gap: .18rem !important;
  }
  .mb-logo .mb-word{
    display:inline-block !important;
    white-space:nowrap !important;
    line-height:.96 !important;
    max-width:100% !important;
  }
  .mb-logo .mb-moon{
    width:14px !important;
    height:14px !important;
  }
  #mbNavBtn{
    display:inline-flex !important;
    flex:0 0 auto !important;
    position:relative !important;
    z-index:10061 !important;
  }
  #mbMobileMenu{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 88px !important;
    z-index: 10060 !important;
    max-height: calc(100dvh - 106px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    display: none !important;
    pointer-events: none !important;
  }
  #mbMobileMenu.is-open{
    display:block !important;
    pointer-events:auto !important;
  }
  #mbMobileMenu > .container{
    padding:12px !important;
    border-radius:24px !important;
  }
}



/* Definitive homepage mobile header fix */
@media (max-width: 768px){
  nav{
    overflow: visible !important;
  }
  nav .container.mx-auto{
    display:flex !important;
    align-items:center !important;
    gap:.65rem !important;
    min-height:56px;
  }

  .mb-logo{
    font-size: clamp(1.6rem, 8.5vw, 2.35rem) !important;
    max-width: calc(100vw - 108px) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .18rem !important;
  }

  .mb-logo .mb-word{
    display:inline-block !important;
    white-space:nowrap !important;
    line-height:.96 !important;
    max-width:100% !important;
  }

  /* Hide TECH only on small screens so the logo stops cutting off */
  .mb-logo .mb-word > .text-white{
    display:none !important;
  }

  .mb-logo .mb-moon{
    width:14px !important;
    height:14px !important;
  }

  #langMobile{
    position: relative !important;
    z-index: 10062 !important;
    flex: 0 0 auto !important;
  }

  #mbNavBtn{
    display:inline-flex !important;
    position: fixed !important;
    top: 84px !important;
    right: 12px !important;
    width: 46px !important;
    height: 46px !important;
    z-index: 10080 !important;
    border-radius: 16px !important;
    background: rgba(10,10,14,.94) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #mbMobileMenu{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 136px !important;
    z-index: 10070 !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    display: none !important;
    pointer-events: none !important;
  }

  #mbMobileMenu.is-open{
    display:block !important;
    pointer-events:auto !important;
  }

  #mbMobileMenu > .container{
    padding: 12px !important;
    border-radius: 24px !important;
  }
}


/* FINAL mobile header override: smaller logo + always-visible menu button */
@media (max-width: 768px){
  .mb-logo{
    font-size: clamp(1.4rem, 6.9vw, 2rem) !important;
    max-width: calc(100vw - 82px) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    gap: .16rem !important;
  }
  .mb-logo .mb-word{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  .mb-logo .mb-word > .text-white{
    display: none !important;
  }
  .mb-logo .mb-moon{
    width: 13px !important;
    height: 13px !important;
  }

  /* move language selector inside the menu on mobile, keep only button in header */
  #langMobile{
    display: none !important;
  }

  #mbNavBtn{
    display: inline-flex !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin-left: auto !important;
    z-index: 10081 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: rgba(10,10,14,.94) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.32) !important;
  }

  #mbMobileMenu{
    top: 76px !important;
    max-height: calc(100dvh - 90px) !important;
  }
}

/* FINAL FIX - keep TECH, just scale properly */
@media (max-width:768px){
  .mb-logo{
    font-size: clamp(1.2rem, 6vw, 1.8rem) !important;
    max-width: calc(100vw - 90px) !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
  .mb-logo .mb-word{
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .mb-logo .mb-word > .text-white{
    display: inline !important; /* keep TECH visible */
  }

  #mbNavBtn{
    display: inline-flex !important;
    position: absolute !important;
    right: 10px !important;
    top: 12px !important;
    z-index: 9999 !important;
    width: 40px !important;
    height: 40px !important;
  }

  #mbMobileMenu{
    top: 70px !important;
  }
}


/* Responsive menu fix for smaller desktop/tablet widths */
@media (max-width: 1024px){
  #mbNavLinks{
    display:none !important;
  }
  #mbNavBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    margin-left:auto !important;
    z-index:10090 !important;
  }
  #mbMobileMenu{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:84px !important;
    z-index:10080 !important;
    max-height:calc(100dvh - 100px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    display:none !important;
    pointer-events:none !important;
  }
  #mbMobileMenu.is-open{
    display:block !important;
    pointer-events:auto !important;
  }
}


/* Ensure support widget stays visible above homepage content */
#mbSupportFab, .mb-support-fab, [data-mb-support], #mbSupportLauncher{
  z-index: 100120 !important;
}

/* === LOGO RESPONSIVE FIX === */
.mb-logo {
  font-size: clamp(1.6rem, 2.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -1px;
  white-space: nowrap;
  flex-shrink: 1;
  max-width: 60%;
}

@media (min-width: 1400px) {
  .mb-logo { font-size: 2.6rem; }
}
@media (max-width: 1200px) {
  .mb-logo { font-size: 2.2rem; }
}
@media (max-width: 900px) {
  .mb-logo { font-size: 1.9rem; }
}
@media (max-width: 600px) {
  .mb-logo { font-size: 1.5rem; }
}


/* HARD FIX: smaller homepage/site logo across desktop and responsive */
.mb-logo{
  font-size: clamp(1.15rem, 1.9vw, 2.05rem) !important;
  max-width: min(46vw, 560px) !important;
  gap: .28rem !important;
}
.mb-logo .mb-word{
  white-space: nowrap !important;
  line-height: .94 !important;
}
.mb-logo .mb-moon{
  width: 16px !important;
  height: 16px !important;
}
@media (max-width: 1400px){
  .mb-logo{
    font-size: clamp(1.1rem, 1.75vw, 1.85rem) !important;
    max-width: 44vw !important;
  }
}
@media (max-width: 1100px){
  .mb-logo{
    font-size: clamp(1rem, 1.65vw, 1.55rem) !important;
    max-width: calc(100vw - 180px) !important;
  }
}
@media (max-width: 768px){
  .mb-logo{
    font-size: clamp(.92rem, 4.4vw, 1.3rem) !important;
    max-width: calc(100vw - 92px) !important;
  }
  .mb-logo .mb-moon{
    width: 12px !important;
    height: 12px !important;
  }
}


/* === MoonBytes clean mobile sticky nav fix === */
:root{ --mb-nav-height: 76px; }
@media (max-width: 1100px){
  body.mb-fixed-mobile-nav{
    padding-top: var(--mb-nav-height) !important;
  }
  body.mb-fixed-mobile-nav nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10040 !important;
  }
  body.mb-fixed-mobile-nav nav > .container.mx-auto,
  body.mb-fixed-mobile-nav nav .container.mx-auto.flex.items-center.gap-4{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
  }
  #mbNavLinks{ display:none !important; }
  .mb-logo{
    font-size: clamp(1.05rem, 5vw, 1.45rem) !important;
    max-width: calc(100vw - 118px) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    gap: .14rem !important;
  }
  .mb-logo .mb-word{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: .95 !important;
  }
  .mb-logo .mb-word > .text-white{ display:none !important; }
  .mb-logo .mb-moon{ width:12px !important; height:12px !important; }
  .mb-mobile-controls,
  nav .flex.items-center.gap-2.ml-auto.lg\:hidden.shrink-0{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
  #langMobile{
    display:block !important;
    width:auto !important;
    max-width:72px !important;
    padding:.55rem .65rem !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }
  #mbNavBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    flex:0 0 42px !important;
    z-index:10055 !important;
  }
  #mbMobileMenu{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:calc(var(--mb-nav-height) + 10px) !important;
    z-index:10050 !important;
    margin:0 !important;
    display:none !important;
    pointer-events:none !important;
    max-height:calc(100dvh - var(--mb-nav-height) - 22px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #mbMobileMenu.is-open{
    display:block !important;
    pointer-events:auto !important;
  }
  #mbMobileMenu > .container,
  #mbMobileMenu > div{
    background:rgba(10,10,14,.97) !important;
    border:1px solid rgba(63,63,70,.95) !important;
    border-radius:16px !important;
    box-shadow:0 18px 40px rgba(0,0,0,.42) !important;
  }
}

/* === FINAL mobile sticky nav override (March 2026) === */
:root{ --mb-nav-height: 76px; }
@media (max-width: 1100px){
  body.mb-has-public-nav.mb-mobile-nav-active{
    padding-top: calc(var(--mb-nav-height) + env(safe-area-inset-top, 0px)) !important;
    scroll-padding-top: calc(var(--mb-nav-height) + 12px) !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active nav.p-4.border-b-2.border-\[\#ff00ff\]{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10070 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active nav.p-4.border-b-2.border-\[\#ff00ff\] > .container.mx-auto,
  body.mb-has-public-nav.mb-mobile-nav-active nav.p-4.border-b-2.border-\[\#ff00ff\] .container.mx-auto.flex.items-center.gap-4{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-height: 56px !important;
    min-width: 0 !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active #mbNavLinks,
  body.mb-has-public-nav.mb-mobile-nav-active nav .hidden.lg\:flex.items-center.gap-3.shrink-0{
    display: none !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active .mb-logo{
    display: inline-flex !important;
    align-items: center !important;
    gap: .14rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 118px) !important;
    overflow: hidden !important;
    font-size: clamp(1.05rem, 5vw, 1.45rem) !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active .mb-logo .mb-word{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: .95 !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active .mb-logo .mb-moon{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 auto !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active .mb-mobile-controls,
  body.mb-has-public-nav.mb-mobile-nav-active nav .flex.items-center.gap-2.ml-auto.lg\:hidden.shrink-0{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active #langMobile{
    display: block !important;
    width: auto !important;
    max-width: 72px !important;
    min-width: 60px !important;
    padding: .5rem .6rem !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active #mbNavBtn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    flex: 0 0 42px !important;
    z-index: 10075 !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active #mbMobileMenu{
    position: fixed !important;
    top: calc(var(--mb-nav-height) + env(safe-area-inset-top, 0px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 10074 !important;
    margin: 0 !important;
    max-height: calc(100dvh - var(--mb-nav-height) - env(safe-area-inset-top, 0px) - 20px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: none !important;
    pointer-events: none !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active #mbMobileMenu.is-open{
    display: block !important;
    pointer-events: auto !important;
  }

  body.mb-has-public-nav.mb-mobile-nav-active #mbMobileMenu > .container,
  body.mb-has-public-nav.mb-mobile-nav-active #mbMobileMenu > div{
    background: rgba(10,10,14,.97) !important;
    border: 1px solid rgba(63,63,70,.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.42) !important;
  }
}

/* ===== Final public nav + mobile section sizing fix ===== */
body.mb-has-public-nav{
  overflow-x: hidden;
}

body.mb-has-public-nav nav{
  z-index: 1200 !important;
}

body.mb-has-public-nav .mb-mobile-controls{
  display: none;
}

body.mb-has-public-nav #mbMobileMenu.hidden{
  display: none !important;
}

@media (max-width: 1100px){
  body.mb-has-public-nav nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.9rem !important;
    background: rgba(0,0,0,.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  body.mb-has-public-nav nav > .container.mx-auto,
  body.mb-has-public-nav nav > .container{
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  body.mb-has-public-nav .mb-logo{
    display: inline-flex !important;
    align-items: center !important;
    gap: .18rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 138px) !important;
    font-size: clamp(1.25rem, 4.6vw, 1.8rem) !important;
    line-height: .92 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body.mb-has-public-nav .mb-logo .mb-word{
    line-height: .92 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 auto !important;
  }

  body.mb-has-public-nav .mb-mobile-controls,
  body.mb-has-public-nav nav .flex.lg\:hidden.items-center.gap-2.ml-auto.shrink-0,
  body.mb-has-public-nav nav .flex.items-center.gap-2.ml-auto.lg\:hidden.shrink-0,
  body.mb-has-public-nav nav .flex.items-center.gap-2.ml-auto.shrink-0{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.65rem !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body.mb-has-public-nav #langMobile,
  body.mb-has-public-nav .mb-mobile-controls #langMobile{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-width: 56px !important;
    max-width: 58px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
  }

  body.mb-has-public-nav #mbNavBtn,
  body.mb-has-public-nav .mb-mobile-controls #mbNavBtn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    flex: 0 0 42px !important;
    z-index: 1202 !important;
  }

  body.mb-has-public-nav #mbNavBtnFixed{
    display: none !important;
  }

  body.mb-has-public-nav #mbMobileMenu{
    position: fixed !important;
    top: calc(var(--mb-nav-height, 78px) + env(safe-area-inset-top, 0px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 1199 !important;
    margin: 0 !important;
    max-height: calc(100dvh - var(--mb-nav-height, 78px) - env(safe-area-inset-top, 0px) - 20px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: none !important;
    pointer-events: none !important;
  }

  body.mb-has-public-nav #mbMobileMenu.is-open{
    display: block !important;
    pointer-events: auto !important;
  }

  body.mb-has-public-nav #mbMobileMenu > .container,
  body.mb-has-public-nav #mbMobileMenu > div{
    background: rgba(10,10,14,.97) !important;
    border: 1px solid rgba(63,63,70,.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.42) !important;
  }

  body.mb-has-public-nav main,
  body.mb-has-public-nav section,
  body.mb-has-public-nav header,
  body.mb-has-public-nav .page-shell,
  body.mb-has-public-nav .content-shell{
    scroll-margin-top: calc(var(--mb-nav-height, 78px) + 16px) !important;
  }

  body.mb-has-public-nav h1.text-6xl.font-black,
  body.mb-has-public-nav .text-6xl.font-black.italic.uppercase,
  body.mb-has-public-nav .text-6xl.font-black.mb-10.italic.uppercase.border-l-8,
  body.mb-has-public-nav .text-6xl.font-black.mb-6.italic.uppercase.border-l-8,
  body.mb-has-public-nav .text-6xl.font-black.mb-3.italic.uppercase.border-l-8{
    font-size: clamp(2.25rem, 10vw, 3.3rem) !important;
    line-height: .94 !important;
    padding-left: .95rem !important;
    margin-bottom: 1.2rem !important;
    border-left-width: 6px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

@media (max-width: 640px){
  body.mb-has-public-nav .mb-logo{
    max-width: calc(100vw - 134px) !important;
    font-size: clamp(1.08rem, 4.4vw, 1.45rem) !important;
  }

  body.mb-has-public-nav h1.text-6xl.font-black,
  body.mb-has-public-nav .text-6xl.font-black.italic.uppercase,
  body.mb-has-public-nav .text-6xl.font-black.mb-10.italic.uppercase.border-l-8,
  body.mb-has-public-nav .text-6xl.font-black.mb-6.italic.uppercase.border-l-8,
  body.mb-has-public-nav .text-6xl.font-black.mb-3.italic.uppercase.border-l-8{
    font-size: clamp(2rem, 9vw, 2.85rem) !important;
    line-height: .96 !important;
    padding-left: .85rem !important;
    margin-bottom: 1rem !important;
  }
}


/* ===== MoonBytes mobile header + section title fixes ===== */
:root{--mb-nav-height:88px;}
body.mb-has-public-nav{padding-top:0;}

@media (max-width:1100px){
  body.mb-has-public-nav{
    padding-top:calc(var(--mb-nav-height) + env(safe-area-inset-top, 0px)) !important;
  }
  nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:10050 !important;
    background:rgba(0,0,0,.95) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }
  nav .container.mx-auto{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.75rem !important;
    min-width:0 !important;
  }
  .mb-logo{
    display:inline-flex !important;
    align-items:center !important;
    gap:.12rem !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:calc(100vw - 150px) !important;
    font-size:clamp(1.15rem,5vw,1.8rem) !important;
    line-height:.95 !important;
    overflow:hidden !important;
  }
  .mb-logo .mb-word{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    line-height:.95 !important;
  }
  .mb-logo .mb-moon{width:12px !important;height:12px !important;}
  .mb-mobile-controls{
    display:flex !important;
    align-items:center !important;
    gap:.65rem !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }
  #langMobile{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:74px !important;
    height:44px !important;
    padding:.45rem .85rem !important;
    margin:0 !important;
    position:static !important;
    z-index:auto !important;
    background:rgba(24,24,27,.92) !important;
    border:1px solid rgba(63,63,70,1) !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }
  #mbNavBtn,
  #mbNavBtnFixed{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:static !important;
    inset:auto !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    margin:0 !important;
    z-index:auto !important;
    background:rgba(24,24,27,.92) !important;
    border:1px solid rgba(63,63,70,1) !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }
  #mbNavBtnFixed{display:none !important;}
  #mbMobileMenu{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:calc(var(--mb-nav-height) + env(safe-area-inset-top, 0px) + 8px) !important;
    z-index:10040 !important;
    max-height:calc(100dvh - var(--mb-nav-height) - env(safe-area-inset-top, 0px) - 24px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    margin-top:0 !important;
  }
  #mbMobileMenu.hidden{display:none !important;}
  #mbMobileMenu.is-open{display:block !important;}
  #mbMobileMenu > .container.mx-auto{
    padding:1rem !important;
    border-radius:18px !important;
    box-shadow:0 16px 44px rgba(0,0,0,.42) !important;
  }
  main.container,
  section.container,
  .container.mx-auto.py-10,
  .container.mx-auto.py-12,
  .container.mx-auto.py-16{
    scroll-margin-top:calc(var(--mb-nav-height) + 16px) !important;
  }
  h1.text-6xl,
  h1.text-7xl,
  .text-6xl.font-black,
  .text-7xl.font-black{
    font-size:clamp(2.25rem,11vw,3.5rem) !important;
    line-height:.95 !important;
    margin-bottom:1.5rem !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:768px){
  nav{padding:.9rem 1rem !important;}
  body.mb-has-public-nav{padding-top:calc(var(--mb-nav-height) + env(safe-area-inset-top, 0px)) !important;}
  .mb-logo{max-width:calc(100vw - 138px) !important;font-size:clamp(1rem,4.7vw,1.55rem) !important;}
  .mb-logo .mb-word > .text-white{display:inline !important;}
  #langMobile{min-width:62px !important;padding:.4rem .7rem !important;font-size:1rem !important;}
  #mbNavBtn{width:42px !important;min-width:42px !important;height:42px !important;font-size:1.1rem !important;}
  h1.text-6xl,
  h1.text-7xl,
  .text-6xl.font-black,
  .text-7xl.font-black{
    font-size:clamp(2rem,10.5vw,3rem) !important;
    padding-left:1rem !important;
    border-left-width:6px !important;
  }
}

/* ===== FINAL MOBILE NAV RESCUE ===== */
@media (max-width:1100px){
  nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:10060 !important;
  }

  nav > .container.mx-auto,
  nav .container.mx-auto{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:.75rem !important;
    min-width:0 !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:calc(100vw - 156px) !important;
    overflow:hidden !important;
  }

  .mb-mobile-controls,
  body.mb-has-public-nav .mb-mobile-controls{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:.65rem !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  #langMobile,
  body.mb-has-public-nav #langMobile{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:static !important;
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:1 !important;
    margin:0 !important;
  }

  #mbNavBtn,
  body.mb-has-public-nav #mbNavBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:static !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:1 !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    margin:0 !important;
    flex:0 0 42px !important;
    z-index:10061 !important;
  }

  #mbNavBtnFixed,
  body.mb-has-public-nav #mbNavBtnFixed{
    display:none !important;
  }

  #mbMobileMenu,
  body.mb-has-public-nav #mbMobileMenu{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:calc(var(--mb-nav-height, 78px) + env(safe-area-inset-top, 0px) + 8px) !important;
    z-index:10055 !important;
    max-height:calc(100dvh - var(--mb-nav-height, 78px) - env(safe-area-inset-top, 0px) - 20px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #mbMobileMenu.hidden,
  body.mb-has-public-nav #mbMobileMenu.hidden{
    display:none !important;
  }

  #mbMobileMenu.is-open,
  body.mb-has-public-nav #mbMobileMenu.is-open{
    display:block !important;
  }
}

@media (max-width:768px){
  body.mb-has-public-nav{
    padding-top:calc(var(--mb-nav-height, 78px) + env(safe-area-inset-top, 0px)) !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    max-width:calc(100vw - 150px) !important;
    font-size:clamp(1rem, 4.7vw, 1.5rem) !important;
    gap:.12rem !important;
  }

  #langMobile,
  body.mb-has-public-nav #langMobile{
    min-width:62px !important;
    height:42px !important;
    padding:.4rem .7rem !important;
    font-size:1rem !important;
    border-radius:14px !important;
  }

  #mbNavBtn,
  body.mb-has-public-nav #mbNavBtn{
    font-size:1.15rem !important;
    border-radius:14px !important;
  }
}


/* === Final mobile logo moon/stars tweak === */
@keyframes mbMoonFloat{
  0%,100%{transform:translateX(0) translateY(0) scale(1);}
  50%{transform:translateX(0) translateY(-1.5px) scale(1.06);}
}
@media (max-width: 768px){
  .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width:18px !important;
    height:18px !important;
    opacity:1 !important;
    transform:translateX(0) scale(1) !important;
    filter:drop-shadow(0 0 10px rgba(255,0,255,.85)) drop-shadow(0 0 18px rgba(255,0,255,.38)) !important;
    animation:mbMoonFloat 2.8s ease-in-out infinite;
  }
  .mb-logo .mb-spark,
  body.mb-has-public-nav .mb-logo .mb-spark{
    opacity:1 !important;
    animation:mbTwinkle 1.35s ease-in-out infinite !important;
  }
  .mb-logo .mb-s1,
  body.mb-has-public-nav .mb-logo .mb-s1{right:-12px !important;top:-7px !important;width:5px !important;height:5px !important;}
  .mb-logo .mb-s2,
  body.mb-has-public-nav .mb-logo .mb-s2{right:9px !important;top:-11px !important;width:4px !important;height:4px !important;}
  .mb-logo .mb-s3,
  body.mb-has-public-nav .mb-logo .mb-s3{right:-7px !important;top:15px !important;width:4px !important;height:4px !important;}
}


/* === Premium moon logo size boost: desktop + mobile === */
@keyframes mbMoonFloatPremium{
  0%   { transform: translateX(0) translateY(0) scale(1.18) rotate(0deg); }
  50%  { transform: translateX(2px) translateY(-3px) scale(1.28) rotate(-4deg); }
  100% { transform: translateX(0) translateY(0) scale(1.18) rotate(0deg); }
}

body .mb-logo .mb-moon,
body.mb-has-public-nav .mb-logo .mb-moon{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  opacity: 1 !important;
  transform: translateX(0) scale(1.18) !important;
  transform-origin: center center !important;
  filter:
    drop-shadow(0 0 10px rgba(255, 0, 255, .95))
    drop-shadow(0 0 18px rgba(255, 0, 255, .70))
    drop-shadow(0 0 28px rgba(255, 0, 255, .38)) !important;
  animation: mbMoonFloatPremium 2.8s ease-in-out infinite !important;
  will-change: transform, filter;
}

body .mb-logo:hover .mb-moon,
body.mb-has-public-nav .mb-logo:hover .mb-moon{
  transform: translateX(2px) scale(1.34) !important;
  filter:
    drop-shadow(0 0 12px rgba(255, 0, 255, 1))
    drop-shadow(0 0 24px rgba(255, 0, 255, .82))
    drop-shadow(0 0 36px rgba(255, 0, 255, .48)) !important;
}

@media (min-width: 1024px){
  body .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    transform: translateX(0) scale(1.22) !important;
  }

  body .mb-logo:hover .mb-moon,
  body.mb-has-public-nav .mb-logo:hover .mb-moon{
    transform: translateX(3px) scale(1.42) !important;
  }
}

@media (max-width: 767px){
  body .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    transform: translateX(0) scale(1.10) !important;
    filter:
      drop-shadow(0 0 8px rgba(255, 0, 255, .95))
      drop-shadow(0 0 14px rgba(255, 0, 255, .62))
      drop-shadow(0 0 22px rgba(255, 0, 255, .32)) !important;
  }
}

@media (max-width: 480px){
  body .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}


/* === Responsive nav cleanup: no duplicate language selector, no wrapped desktop menu === */
:root{
  --mb-compact-breakpoint: 1380px;
}

/* Keep logo stable by default */
.mb-logo,
body.mb-has-public-nav .mb-logo{
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.mb-logo .mb-word,
body.mb-has-public-nav .mb-logo .mb-word{
  white-space: nowrap !important;
}

@media (min-width: 1381px){
  .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-nav{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 1.25rem !important;
    flex-wrap: nowrap !important;
  }

  .mb-desktop-tools,
  body.mb-has-public-nav .mb-desktop-tools{
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    flex: 0 0 auto !important;
  }

  .mb-mobile-controls,
  body.mb-has-public-nav .mb-mobile-controls,
  #mbMobileMenu{
    display: none !important;
  }

  nav > .container.mx-auto,
  nav .container.mx-auto{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    font-size: clamp(2rem, 2.3vw, 3rem) !important;
    margin-right: .75rem !important;
  }

  .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 34px !important;
    height: 34px !important;
  }

  #langMobile,
  #mbNavBtn{
    display:none !important;
  }
}

@media (max-width: 1380px){
  body,
  body.mb-has-public-nav{
    overflow-x: hidden !important;
  }

  nav{
    position: sticky !important;
    top: 0 !important;
  }

  nav > .container.mx-auto,
  nav .container.mx-auto{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: .85rem !important;
    min-width: 0 !important;
  }

  .mb-desktop-nav,
  .mb-desktop-tools,
  body.mb-has-public-nav .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-tools{
    display: none !important;
  }

  .mb-mobile-controls,
  body.mb-has-public-nav .mb-mobile-controls{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .65rem !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #lang{
    display:none !important;
  }

  #langMobile,
  body.mb-has-public-nav #langMobile{
    display: inline-flex !important;
    min-width: 72px !important;
    height: 46px !important;
    padding: .45rem .8rem !important;
    border-radius: 16px !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  #mbNavBtn,
  body.mb-has-public-nav #mbNavBtn{
    display: inline-flex !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    flex: 0 0 46px !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    flex: 1 1 auto !important;
    max-width: calc(100vw - 190px) !important;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem) !important;
    gap: .2rem !important;
    overflow: hidden !important;
  }

  .mb-logo .mb-word,
  body.mb-has-public-nav .mb-logo .mb-word{
    font-size: inherit !important;
    letter-spacing: -.03em !important;
    white-space: nowrap !important;
  }

  .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  #mbMobileMenu,
  body.mb-has-public-nav #mbMobileMenu{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(var(--mb-nav-height, 82px) + 8px) !important;
    z-index: 10055 !important;
    max-height: calc(100dvh - var(--mb-nav-height, 82px) - 20px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 820px){
  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    max-width: calc(100vw - 150px) !important;
    font-size: clamp(1.25rem, 5vw, 1.8rem) !important;
  }

  .mb-logo .mb-word > .text-white,
  body.mb-has-public-nav .mb-logo .mb-word > .text-white{
    display: inline !important;
  }

  .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  #langMobile,
  body.mb-has-public-nav #langMobile{
    min-width: 64px !important;
    height: 42px !important;
    padding: .4rem .7rem !important;
  }

  #mbNavBtn,
  body.mb-has-public-nav #mbNavBtn{
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }
}

/* === Admin tablet/mobile cleanup === */
@media (max-width: 980px){
  .tabbar{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    gap:8px !important;
  }
  .tabbar button{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
}


/* === Logo interaction upgrade: desktop hover / mobile tap === */
body .mb-logo,
body.mb-has-public-nav .mb-logo{
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body .mb-logo .mb-moon,
body.mb-has-public-nav .mb-logo .mb-moon{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(0) scale(.78) !important;
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .32s ease,
    filter .32s ease !important;
  pointer-events: none !important;
}

body .mb-logo::after,
body.mb-has-public-nav .mb-logo::after{
  content: "✦ ✦";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%) scale(.88);
  opacity: 0;
  visibility: hidden;
  color: rgba(255,255,255,.95);
  font-size: .78em;
  letter-spacing: .16em;
  text-shadow:
    0 0 10px rgba(255,255,255,.85),
    0 0 22px rgba(255,0,255,.45),
    0 0 36px rgba(255,0,255,.25);
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .32s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

@media (min-width: 1381px){
  body .mb-logo:hover .mb-moon,
  body.mb-has-public-nav .mb-logo:hover .mb-moon,
  body .mb-logo:focus-visible .mb-moon,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(2px) scale(1.28) !important;
    filter:
      drop-shadow(0 0 12px rgba(255,255,255,.92))
      drop-shadow(0 0 20px rgba(255,0,255,.78))
      drop-shadow(0 0 34px rgba(255,0,255,.42)) !important;
  }

  body .mb-logo:hover::after,
  body.mb-has-public-nav .mb-logo:hover::after,
  body .mb-logo:focus-visible::after,
  body.mb-has-public-nav .mb-logo:focus-visible::after{
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(8px) scale(1);
  }
}

@media (max-width: 1380px){
  body .mb-logo.logo-tapped,
  body.mb-has-public-nav .mb-logo.logo-tapped{
    filter:
      drop-shadow(0 0 8px rgba(255,0,255,.95))
      drop-shadow(0 0 18px rgba(255,0,255,.65))
      drop-shadow(0 0 30px rgba(255,0,255,.35)) !important;
  }

  body .mb-logo.logo-tapped .text-fuchsia-500,
  body.mb-has-public-nav .mb-logo.logo-tapped .text-fuchsia-500,
  body .mb-logo.logo-tapped .mb-word,
  body.mb-has-public-nav .mb-logo.logo-tapped .mb-word{
    text-shadow:
      0 0 10px rgba(255,0,255,.72),
      0 0 22px rgba(255,0,255,.42) !important;
  }

  body .mb-logo.logo-tapped .mb-moon,
  body.mb-has-public-nav .mb-logo.logo-tapped .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(2px) scale(1.12) !important;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.9))
      drop-shadow(0 0 18px rgba(255,0,255,.68))
      drop-shadow(0 0 28px rgba(255,0,255,.34)) !important;
  }

  body .mb-logo.logo-tapped::after,
  body.mb-has-public-nav .mb-logo.logo-tapped::after{
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(4px) scale(.96);
  }
}

@media (max-width: 820px){
  body .mb-logo::after,
  body.mb-has-public-nav .mb-logo::after{
    right: -6px;
    font-size: .68em;
    letter-spacing: .12em;
  }
}


/* === Smooth desktop moon reveal from behind logo === */
@media (min-width: 1381px){
  body .mb-logo,
  body.mb-has-public-nav .mb-logo{
    overflow: visible !important;
  }

  body .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-14px) scale(.62) rotate(-14deg) !important;
    transition:
      opacity .42s ease,
      visibility .42s ease,
      transform .52s cubic-bezier(.22,.61,.36,1),
      filter .42s ease !important;
  }

  body .mb-logo::after,
  body.mb-has-public-nav .mb-logo::after{
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-50%) translateX(-10px) scale(.75) !important;
    transition:
      opacity .34s ease,
      visibility .34s ease,
      transform .48s cubic-bezier(.22,.61,.36,1) .06s !important;
  }

  body .mb-logo:hover .mb-moon,
  body.mb-has-public-nav .mb-logo:hover .mb-moon,
  body .mb-logo:focus-visible .mb-moon,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(6px) scale(1.24) rotate(0deg) !important;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.95))
      drop-shadow(0 0 22px rgba(255,0,255,.82))
      drop-shadow(0 0 38px rgba(255,0,255,.46)) !important;
  }

  body .mb-logo:hover::after,
  body.mb-has-public-nav .mb-logo:hover::after,
  body .mb-logo:focus-visible::after,
  body.mb-has-public-nav .mb-logo:focus-visible::after{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(11px) scale(1.02) !important;
  }
}


/* === Restore desktop nav until tablet width + keep moon visible === */
:root{
  --mb-compact-breakpoint: 1024px;
}

/* Moon visible again */
body .mb-logo .mb-moon,
body.mb-has-public-nav .mb-logo .mb-moon{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) scale(1) rotate(0deg) !important;
  pointer-events: none !important;
}

/* Desktop + medium desktop: keep full menu, but tighten spacing so it does not break */
@media (min-width: 1025px){
  .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-nav{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: clamp(.65rem, 1.4vw, 1.25rem) !important;
    flex-wrap: nowrap !important;
  }

  .mb-desktop-nav > li,
  body.mb-has-public-nav .mb-desktop-nav > li{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .mb-desktop-nav a,
  .mb-desktop-nav button,
  body.mb-has-public-nav .mb-desktop-nav a,
  body.mb-has-public-nav .mb-desktop-nav button{
    font-size: clamp(.88rem, 1vw, 1rem) !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
  }

  .mb-desktop-tools,
  body.mb-has-public-nav .mb-desktop-tools{
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    flex: 0 0 auto !important;
  }

  .mb-mobile-controls,
  body.mb-has-public-nav .mb-mobile-controls,
  #mbMobileMenu{
    display: none !important;
  }

  nav > .container.mx-auto,
  nav .container.mx-auto{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: .8rem !important;
    min-width: 0 !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    flex: 0 1 auto !important;
    max-width: none !important;
    font-size: clamp(1.7rem, 2vw, 2.6rem) !important;
    margin-right: .25rem !important;
    white-space: nowrap !important;
  }

  .mb-logo .mb-word,
  body.mb-has-public-nav .mb-logo .mb-word{
    white-space: nowrap !important;
  }

  .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: clamp(24px, 2vw, 34px) !important;
    height: clamp(24px, 2vw, 34px) !important;
    min-width: clamp(24px, 2vw, 34px) !important;
    min-height: clamp(24px, 2vw, 34px) !important;
  }

  #langMobile,
  #mbNavBtn{
    display:none !important;
  }

  /* tighten search/lang on mid widths */
  .mb-desktop-tools input[type="search"],
  .mb-desktop-tools .search-input,
  body.mb-has-public-nav .mb-desktop-tools input[type="search"],
  body.mb-has-public-nav .mb-desktop-tools .search-input{
    width: clamp(170px, 16vw, 260px) !important;
    min-width: 170px !important;
  }

  .mb-desktop-tools select,
  body.mb-has-public-nav .mb-desktop-tools select{
    min-width: 72px !important;
  }
}

/* Tablet/mobile only: use hamburger here, not before */
@media (max-width: 1024px){
  body,
  body.mb-has-public-nav{
    overflow-x: hidden !important;
  }

  .mb-desktop-nav,
  .mb-desktop-tools,
  body.mb-has-public-nav .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-tools{
    display: none !important;
  }

  .mb-mobile-controls,
  body.mb-has-public-nav .mb-mobile-controls{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .65rem !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #lang{
    display:none !important;
  }

  #langMobile,
  body.mb-has-public-nav #langMobile{
    display: inline-flex !important;
    min-width: 72px !important;
    height: 46px !important;
    padding: .45rem .8rem !important;
    border-radius: 16px !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  #mbNavBtn,
  body.mb-has-public-nav #mbNavBtn{
    display: inline-flex !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    flex: 0 0 46px !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    flex: 1 1 auto !important;
    max-width: calc(100vw - 190px) !important;
    font-size: clamp(1.45rem, 4vw, 2.1rem) !important;
    gap: .18rem !important;
    overflow: hidden !important;
  }

  .mb-logo .mb-moon,
  body.mb-has-public-nav .mb-logo .mb-moon{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
}

/* Smaller desktop widths: shrink nav safely instead of wrapping into broken rows */
@media (min-width: 1025px) and (max-width: 1280px){
  .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-nav{
    gap: .55rem !important;
  }

  .mb-desktop-nav a,
  .mb-desktop-nav button,
  body.mb-has-public-nav .mb-desktop-nav a,
  body.mb-has-public-nav .mb-desktop-nav button{
    font-size: .82rem !important;
    letter-spacing: .02em !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    font-size: clamp(1.45rem, 1.7vw, 1.95rem) !important;
  }

  .mb-desktop-tools input[type="search"],
  .mb-desktop-tools .search-input,
  body.mb-has-public-nav .mb-desktop-tools input[type="search"],
  body.mb-has-public-nav .mb-desktop-tools .search-input{
    width: 155px !important;
    min-width: 155px !important;
  }
}

/* Keep hover effect but do not hide moon by default */
@media (min-width: 1025px){
  body .mb-logo:hover .mb-moon,
  body.mb-has-public-nav .mb-logo:hover .mb-moon,
  body .mb-logo:focus-visible .mb-moon,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(3px) scale(1.14) rotate(0deg) !important;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.95))
      drop-shadow(0 0 20px rgba(255,0,255,.74))
      drop-shadow(0 0 34px rgba(255,0,255,.36)) !important;
  }
}



/* === FIX hover moon + stars visibility === */

/* ensure moon is hidden by default */
.mb-logo .mb-moon{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-10px) scale(0.8) !important;
  transition: all .35s ease !important;
}

/* stars default hidden */
.mb-logo::after{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-50%) translateX(-10px) scale(.8) !important;
  transition: all .35s ease !important;
}

/* ON HOVER → SHOW */
@media (min-width: 1025px){
  .mb-logo:hover .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(6px) scale(1.2) !important;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.9))
            drop-shadow(0 0 20px rgba(255,0,255,.7));
  }

  .mb-logo:hover::after{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(10px) scale(1) !important;
  }
}


/* === Premium desktop nav + ultra smooth moon reveal === */

/* Stable premium desktop nav */
@media (min-width: 1025px){
  nav,
  body.mb-has-public-nav nav{
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  nav > .container.mx-auto,
  nav .container.mx-auto{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:clamp(.6rem, 1vw, 1rem) !important;
    min-width:0 !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    flex:0 1 auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
    font-size:clamp(1.75rem, 1.75vw, 2.45rem) !important;
    letter-spacing:-.04em !important;
    position:relative !important;
    overflow:visible !important;
  }

  .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:clamp(.5rem, .95vw, 1.1rem) !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
  }

  .mb-desktop-nav > li,
  body.mb-has-public-nav .mb-desktop-nav > li{
    flex:0 1 auto !important;
    min-width:0 !important;
    list-style:none !important;
  }

  .mb-desktop-nav a,
  .mb-desktop-nav button,
  body.mb-has-public-nav .mb-desktop-nav a,
  body.mb-has-public-nav .mb-desktop-nav button{
    white-space:nowrap !important;
    font-size:clamp(.82rem, .88vw, .98rem) !important;
    letter-spacing:.06em !important;
    padding:.55rem .55rem !important;
    border-radius:14px !important;
    transition:background-color .22s ease, color .22s ease, transform .22s ease !important;
  }

  .mb-desktop-nav a:hover,
  .mb-desktop-nav button:hover,
  body.mb-has-public-nav .mb-desktop-nav a:hover,
  body.mb-has-public-nav .mb-desktop-nav button:hover{
    background:rgba(255,255,255,.05) !important;
    transform:translateY(-1px) !important;
  }

  .mb-desktop-tools,
  body.mb-has-public-nav .mb-desktop-tools{
    display:flex !important;
    align-items:center !important;
    gap:.55rem !important;
    flex:0 0 auto !important;
    min-width:0 !important;
  }

  .mb-desktop-tools input[type="search"],
  .mb-desktop-tools .search-input,
  body.mb-has-public-nav .mb-desktop-tools input[type="search"],
  body.mb-has-public-nav .mb-desktop-tools .search-input{
    width:clamp(150px, 15vw, 240px) !important;
    min-width:150px !important;
    max-width:240px !important;
  }

  .mb-desktop-tools select,
  body.mb-has-public-nav .mb-desktop-tools select{
    min-width:70px !important;
  }

  /* real premium dropdown */
  .dropdown,
  .nav-item.dropdown{
    position:relative !important;
  }

  .dropdown-menu,
  .nav-item.dropdown .dropdown-menu{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:0 !important;
    display:block !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(8px) scale(.98) !important;
    min-width:220px !important;
    background:rgba(8,8,14,.96) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:18px !important;
    padding:10px !important;
    box-shadow:0 18px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    z-index:10050 !important;
    transition:opacity .22s ease, visibility .22s ease, transform .24s ease !important;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu,
  .nav-item.dropdown:hover .dropdown-menu,
  .nav-item.dropdown:focus-within .dropdown-menu{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) scale(1) !important;
  }

  .dropdown-menu li,
  .nav-item.dropdown .dropdown-menu li{
    list-style:none !important;
  }

  .dropdown-menu a,
  .nav-item.dropdown .dropdown-menu a{
    display:block !important;
    padding:.82rem .92rem !important;
    border-radius:14px !important;
    font-size:.92rem !important;
    letter-spacing:.02em !important;
    text-decoration:none !important;
    color:#fff !important;
    transition:background-color .18s ease, transform .18s ease, color .18s ease !important;
  }

  .dropdown-menu a:hover,
  .nav-item.dropdown .dropdown-menu a:hover{
    background:rgba(255,255,255,.06) !important;
    color:#ff6bff !important;
    transform:translateX(2px) !important;
  }

  .mb-mobile-controls,
  body.mb-has-public-nav .mb-mobile-controls,
  #mbMobileMenu,
  #langMobile,
  #mbNavBtn{
    display:none !important;
  }
}

/* keep desktop nav alive longer without breaking */
@media (min-width: 1025px) and (max-width: 1320px){
  .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-nav{
    gap:.42rem !important;
  }

  .mb-desktop-nav a,
  .mb-desktop-nav button,
  body.mb-has-public-nav .mb-desktop-nav a,
  body.mb-has-public-nav .mb-desktop-nav button{
    font-size:.78rem !important;
    padding:.48rem .42rem !important;
    letter-spacing:.035em !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    font-size:clamp(1.45rem, 1.55vw, 1.9rem) !important;
  }

  .mb-desktop-tools input[type="search"],
  .mb-desktop-tools .search-input,
  body.mb-has-public-nav .mb-desktop-tools input[type="search"],
  body.mb-has-public-nav .mb-desktop-tools .search-input{
    width:138px !important;
    min-width:138px !important;
  }
}

/* tablet/mobile stays clean */
@media (max-width: 1024px){
  .mb-desktop-nav,
  .mb-desktop-tools,
  body.mb-has-public-nav .mb-desktop-nav,
  body.mb-has-public-nav .mb-desktop-tools{
    display:none !important;
  }

  .mb-mobile-controls,
  body.mb-has-public-nav .mb-mobile-controls{
    display:inline-flex !important;
    align-items:center !important;
    gap:.65rem !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    max-width:calc(100vw - 165px) !important;
    font-size:clamp(1.35rem, 4.2vw, 2rem) !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  #langMobile,
  body.mb-has-public-nav #langMobile{
    display:inline-flex !important;
  }

  #mbNavBtn,
  body.mb-has-public-nav #mbNavBtn{
    display:inline-flex !important;
  }
}

/* Ultra smooth moon reveal from behind MOON word */
.mb-logo .mb-moon,
body.mb-has-public-nav .mb-logo .mb-moon{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateX(-18px) scale(.48) rotate(-18deg) !important;
  transform-origin:center center !important;
  transition:
    opacity .36s ease,
    visibility .36s ease,
    transform .62s cubic-bezier(.22,.61,.36,1),
    filter .44s ease !important;
  pointer-events:none !important;
}

.mb-logo::after,
body.mb-has-public-nav .mb-logo::after{
  content:"✦ ✦" !important;
  position:absolute !important;
  right:-10px !important;
  top:50% !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-50%) translateX(-18px) scale(.72) !important;
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .56s cubic-bezier(.22,.61,.36,1) .08s !important;
  color:rgba(255,255,255,.96) !important;
  font-size:.78em !important;
  letter-spacing:.18em !important;
  text-shadow:
    0 0 10px rgba(255,255,255,.88),
    0 0 22px rgba(255,0,255,.46),
    0 0 34px rgba(255,0,255,.24) !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  z-index:3 !important;
}

@media (min-width: 1025px){
  .mb-logo:hover .mb-moon,
  .mb-logo:focus-visible .mb-moon,
  body.mb-has-public-nav .mb-logo:hover .mb-moon,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-moon{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(7px) scale(1.18) rotate(0deg) !important;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.92))
      drop-shadow(0 0 22px rgba(255,0,255,.78))
      drop-shadow(0 0 38px rgba(255,0,255,.42)) !important;
  }

  .mb-logo:hover::after,
  .mb-logo:focus-visible::after,
  body.mb-has-public-nav .mb-logo:hover::after,
  body.mb-has-public-nav .mb-logo:focus-visible::after{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(-50%) translateX(11px) scale(1.02) !important;
  }
}

/* Mobile tap glow stays */
@media (max-width: 1024px){
  .mb-logo.logo-tapped,
  body.mb-has-public-nav .mb-logo.logo-tapped{
    filter:
      drop-shadow(0 0 8px rgba(255,0,255,.95))
      drop-shadow(0 0 18px rgba(255,0,255,.66))
      drop-shadow(0 0 30px rgba(255,0,255,.34)) !important;
  }

  .mb-logo.logo-tapped .mb-moon,
  body.mb-has-public-nav .mb-logo.logo-tapped .mb-moon{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(3px) scale(1.04) rotate(0deg) !important;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.92))
      drop-shadow(0 0 18px rgba(255,0,255,.66))
      drop-shadow(0 0 28px rgba(255,0,255,.34)) !important;
  }

  .mb-logo.logo-tapped::after,
  body.mb-has-public-nav .mb-logo.logo-tapped::after{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(-50%) translateX(6px) scale(.95) !important;
  }
}


/* === Auto fluid header: adapt to real available width, not hard breakpoints === */
:root{
  --mb-nav-gap: clamp(.38rem, .9vw, 1rem);
  --mb-nav-link-size: clamp(.78rem, .82vw, .97rem);
  --mb-logo-size-fluid: clamp(1.45rem, 1.65vw, 2.35rem);
  --mb-search-width: clamp(132px, 14vw, 240px);
}

/* base fluid behavior */
nav .container.mx-auto,
nav > .container.mx-auto{
  min-width: 0 !important;
  gap: var(--mb-nav-gap) !important;
}

.mb-logo,
body.mb-has-public-nav .mb-logo{
  font-size: var(--mb-logo-size-fluid) !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}

.mb-logo .mb-word,
body.mb-has-public-nav .mb-logo .mb-word{
  white-space: nowrap !important;
}

.mb-logo .mb-moon,
body.mb-has-public-nav .mb-logo .mb-moon{
  width: clamp(22px, 1.9vw, 34px) !important;
  height: clamp(22px, 1.9vw, 34px) !important;
  min-width: clamp(22px, 1.9vw, 34px) !important;
  min-height: clamp(22px, 1.9vw, 34px) !important;
}

.mb-desktop-nav,
body.mb-has-public-nav .mb-desktop-nav{
  min-width: 0 !important;
  gap: var(--mb-nav-gap) !important;
  overflow: visible !important;
}

.mb-desktop-nav > li,
body.mb-has-public-nav .mb-desktop-nav > li{
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.mb-desktop-nav a,
.mb-desktop-nav button,
body.mb-has-public-nav .mb-desktop-nav a,
body.mb-has-public-nav .mb-desktop-nav button{
  font-size: var(--mb-nav-link-size) !important;
  padding: clamp(.42rem, .7vw, .56rem) clamp(.36rem, .62vw, .58rem) !important;
  white-space: nowrap !important;
}

.mb-desktop-tools,
body.mb-has-public-nav .mb-desktop-tools{
  min-width: 0 !important;
  gap: clamp(.38rem, .6vw, .65rem) !important;
}

.mb-desktop-tools input[type="search"],
.mb-desktop-tools .search-input,
body.mb-has-public-nav .mb-desktop-tools input[type="search"],
body.mb-has-public-nav .mb-desktop-tools .search-input{
  width: var(--mb-search-width) !important;
  min-width: 124px !important;
  max-width: 240px !important;
}

/* compact desktop mode triggered by real overflow logic */
body.mb-fluid-compact{
  --mb-nav-gap: clamp(.24rem, .45vw, .52rem);
  --mb-nav-link-size: clamp(.72rem, .72vw, .86rem);
  --mb-logo-size-fluid: clamp(1.22rem, 1.2vw, 1.72rem);
  --mb-search-width: clamp(108px, 10vw, 168px);
}

body.mb-fluid-compact .mb-desktop-nav a,
body.mb-fluid-compact .mb-desktop-nav button,
body.mb-has-public-nav.mb-fluid-compact .mb-desktop-nav a,
body.mb-has-public-nav.mb-fluid-compact .mb-desktop-nav button{
  letter-spacing: .02em !important;
}

body.mb-fluid-compact .mb-logo,
body.mb-has-public-nav.mb-fluid-compact .mb-logo{
  margin-right: 0 !important;
}

body.mb-fluid-compact .mb-desktop-tools select,
body.mb-has-public-nav.mb-fluid-compact .mb-desktop-tools select{
  min-width: 62px !important;
}

/* if there truly is no room, then use the mobile controls */
body.mb-use-mobile-nav .mb-desktop-nav,
body.mb-use-mobile-nav .mb-desktop-tools,
body.mb-has-public-nav.mb-use-mobile-nav .mb-desktop-nav,
body.mb-has-public-nav.mb-use-mobile-nav .mb-desktop-tools{
  display: none !important;
}

body.mb-use-mobile-nav .mb-mobile-controls,
body.mb-has-public-nav.mb-use-mobile-nav .mb-mobile-controls{
  display: inline-flex !important;
  align-items: center !important;
  gap: .65rem !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

body.mb-use-mobile-nav #langMobile,
body.mb-use-mobile-nav #mbNavBtn,
body.mb-has-public-nav.mb-use-mobile-nav #langMobile,
body.mb-has-public-nav.mb-use-mobile-nav #mbNavBtn{
  display: inline-flex !important;
}

body:not(.mb-use-mobile-nav) .mb-mobile-controls,
body:not(.mb-use-mobile-nav) #mbMobileMenu,
body:not(.mb-use-mobile-nav) #langMobile,
body:not(.mb-use-mobile-nav) #mbNavBtn{
  display: none !important;
}

/* keep mobile layout clean when mobile mode is active */
@media (max-width: 900px){
  body .mb-logo,
  body.mb-has-public-nav .mb-logo{
    max-width: calc(100vw - 165px) !important;
  }
}

/* stronger hover so moon/stars always show on desktop */
@media (hover:hover) and (pointer:fine){
  body:not(.mb-use-mobile-nav) .mb-logo:hover .mb-moon,
  body.mb-has-public-nav:not(.mb-use-mobile-nav) .mb-logo:hover .mb-moon,
  body:not(.mb-use-mobile-nav) .mb-logo:focus-visible .mb-moon,
  body.mb-has-public-nav:not(.mb-use-mobile-nav) .mb-logo:focus-visible .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(7px) scale(1.18) rotate(0deg) !important;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.92))
      drop-shadow(0 0 22px rgba(255,0,255,.78))
      drop-shadow(0 0 38px rgba(255,0,255,.42)) !important;
  }

  body:not(.mb-use-mobile-nav) .mb-logo:hover::after,
  body.mb-has-public-nav:not(.mb-use-mobile-nav) .mb-logo:hover::after,
  body:not(.mb-use-mobile-nav) .mb-logo:focus-visible::after,
  body.mb-has-public-nav:not(.mb-use-mobile-nav) .mb-logo:focus-visible::after{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(-50%) translateX(11px) scale(1.02) !important;
  }
}


/* === Compact mobile/tablet dropdown panel fix === */
body.mb-use-mobile-nav #mbMobileMenu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu{
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: 360px !important;
  min-width: 260px !important;
  max-height: min(78dvh, 560px) !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(8, 8, 14, 0.96) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.03) inset !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  z-index: 10060 !important;
}

body.mb-use-mobile-nav nav,
body.mb-has-public-nav.mb-use-mobile-nav nav{
  overflow: visible !important;
}

body.mb-use-mobile-nav nav > .container.mx-auto,
body.mb-use-mobile-nav nav .container.mx-auto,
body.mb-has-public-nav.mb-use-mobile-nav nav > .container.mx-auto,
body.mb-has-public-nav.mb-use-mobile-nav nav .container.mx-auto{
  position: relative !important;
  overflow: visible !important;
}

body.mb-use-mobile-nav #mbMobileMenu .mb-mobile-links,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .mb-mobile-links{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.mb-use-mobile-nav #mbMobileMenu a,
body.mb-use-mobile-nav #mbMobileMenu button,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu a,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu button{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.mb-use-mobile-nav #mbMobileMenu a:hover,
body.mb-use-mobile-nav #mbMobileMenu button:hover,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu a:hover,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu button:hover{
  background: rgba(255,255,255,.05) !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown-menu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown-menu{
  position: static !important;
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 8px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown.open > .dropdown-menu,
body.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown.open > .dropdown-menu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown.open > .dropdown-menu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown.open > .dropdown-menu{
  display: block !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown-menu a,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown-menu a{
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 0 !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown > a::after,
body.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown > a::after,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown > a::after,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown > a::after{
  content: "▾" !important;
  margin-left: 12px !important;
  font-size: .9em !important;
  opacity: .8 !important;
}

@media (max-width: 640px){
  body.mb-use-mobile-nav #mbMobileMenu,
  body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu{
    right: 8px !important;
    width: min(320px, calc(100vw - 16px)) !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body.mb-use-mobile-nav #mbMobileMenu a,
  body.mb-use-mobile-nav #mbMobileMenu button,
  body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu a,
  body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu button{
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
}


/* === Floating premium popup menu === */
body.mb-use-mobile-nav #mbMobileMenu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu{
  position: fixed !important;
  top: calc(var(--mb-nav-height, 82px) + 10px) !important;
  right: 14px !important;
  left: auto !important;
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: 380px !important;
  min-width: 280px !important;
  max-height: min(78dvh, 620px) !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, rgba(255,0,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(12,12,18,.97), rgba(8,8,14,.96)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.48),
    0 10px 24px rgba(255,0,255,.12),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 10080 !important;
  animation: mbPopupIn .18s ease-out !important;
}

@keyframes mbPopupIn{
  from{ opacity:0; transform:translateY(-8px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

body.mb-use-mobile-nav #mbMobileMenu::before,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu::before{
  content:"";
  position:absolute;
  top:-8px;
  right:20px;
  width:14px;
  height:14px;
  transform:rotate(45deg);
  background:rgba(12,12,18,.98);
  border-left:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.01) inset;
}

body.mb-use-mobile-nav #mbMobileMenu .mb-mobile-links,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .mb-mobile-links{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body.mb-use-mobile-nav #mbMobileMenu a,
body.mb-use-mobile-nav #mbMobileMenu button,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu a,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-height:54px !important;
  padding:14px 16px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  color:#fff !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

body.mb-use-mobile-nav #mbMobileMenu a:hover,
body.mb-use-mobile-nav #mbMobileMenu button:hover,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu a:hover,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu button:hover{
  transform: translateY(-1px) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-color: rgba(255,0,255,.22) !important;
  box-shadow: 0 8px 24px rgba(255,0,255,.08) !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown-menu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown-menu{
  position:static !important;
  display:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  width:100% !important;
  margin-top:8px !important;
  padding:8px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.025) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:none !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown.open > .dropdown-menu,
body.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown.open > .dropdown-menu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown.open > .dropdown-menu,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown.open > .dropdown-menu{
  display:block !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown-menu a,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown-menu a{
  min-height:46px !important;
  padding:11px 13px !important;
  border-radius:13px !important;
  background:transparent !important;
  border:0 !important;
}

body.mb-use-mobile-nav #mbMobileMenu .dropdown > a::after,
body.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown > a::after,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .dropdown > a::after,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu .nav-item.dropdown > a::after{
  content:"▾" !important;
  margin-left:12px !important;
  font-size:.92em !important;
  opacity:.82 !important;
}

body.mb-use-mobile-nav #mbMobileMenu::-webkit-scrollbar,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu::-webkit-scrollbar{
  width:10px;
}
body.mb-use-mobile-nav #mbMobileMenu::-webkit-scrollbar-thumb,
body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

@media (max-width: 640px){
  body.mb-use-mobile-nav #mbMobileMenu,
  body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu{
    right:10px !important;
    width:min(340px, calc(100vw - 20px)) !important;
    min-width:0 !important;
    border-radius:20px !important;
    padding:12px !important;
  }

  body.mb-use-mobile-nav #mbMobileMenu a,
  body.mb-use-mobile-nav #mbMobileMenu button,
  body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu a,
  body.mb-has-public-nav.mb-use-mobile-nav #mbMobileMenu button{
    min-height:50px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
  }
}


/* === Hover cleanup: remove the 2 extra stars, keep moon visible on desktop hover === */

/* remove only the generated pair of stars that was covering the moon */
.mb-logo::after,
body.mb-has-public-nav .mb-logo::after{
  content: none !important;
  display: none !important;
}

/* on any real desktop/trackpad environment, moon should appear on hover even if the window is narrow */
@media (hover:hover) and (pointer:fine){
  .mb-logo:hover .mb-moon,
  .mb-logo:focus-visible .mb-moon,
  body.mb-has-public-nav .mb-logo:hover .mb-moon,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(7px) scale(1.16) rotate(0deg) !important;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.92))
      drop-shadow(0 0 22px rgba(255,0,255,.78))
      drop-shadow(0 0 38px rgba(255,0,255,.42)) !important;
  }
}


/* === Restore hover stars on small desktop windows, but keep them away from the moon === */
@media (hover:hover) and (pointer:fine){
  .mb-logo,
  body.mb-has-public-nav .mb-logo{
    overflow: visible !important;
  }

  .mb-logo::before,
  body.mb-has-public-nav .mb-logo::before{
    content: "✦" !important;
    position: absolute !important;
    top: 50% !important;
    right: -14px !important;
    transform: translateY(-60%) translateX(-4px) scale(.72) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    color: rgba(255,255,255,.96) !important;
    font-size: .62em !important;
    text-shadow:
      0 0 10px rgba(255,255,255,.90),
      0 0 18px rgba(255,0,255,.38),
      0 0 28px rgba(255,0,255,.20) !important;
    pointer-events: none !important;
    z-index: 4 !important;
    transition:
      opacity .22s ease,
      visibility .22s ease,
      transform .32s ease !important;
  }

  .mb-logo:hover::before,
  .mb-logo:focus-visible::before,
  body.mb-has-public-nav .mb-logo:hover::before,
  body.mb-has-public-nav .mb-logo:focus-visible::before{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-60%) translateX(2px) scale(.92) !important;
  }

  /* keep moon reveal strong on hover even when compact/mobile-nav class is active on desktop */
  .mb-logo:hover .mb-moon,
  .mb-logo:focus-visible .mb-moon,
  body.mb-has-public-nav .mb-logo:hover .mb-moon,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-moon{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(7px) scale(1.14) rotate(0deg) !important;
  }
}

/* slightly tighten star position on narrower desktop widths */
@media (hover:hover) and (pointer:fine) and (max-width: 1280px){
  .mb-logo::before,
  body.mb-has-public-nav .mb-logo::before{
    right: -10px !important;
    font-size: .56em !important;
  }
}



/* === Keep hover star hidden until actual hover/focus on desktop === */
.mb-logo::before,
body.mb-has-public-nav .mb-logo::before{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-60%) translateX(-8px) scale(.68) !important;
  pointer-events: none !important;
}

@media (hover:hover) and (pointer:fine){
  .mb-logo:not(:hover):not(:focus-visible)::before,
  body.mb-has-public-nav .mb-logo:not(:hover):not(:focus-visible)::before{
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-60%) translateX(-8px) scale(.68) !important;
  }

  .mb-logo:hover::before,
  .mb-logo:focus-visible::before,
  body.mb-has-public-nav .mb-logo:hover::before,
  body.mb-has-public-nav .mb-logo:focus-visible::before{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-60%) translateX(2px) scale(.92) !important;
  }
}

/* On touch/mobile/coarse pointers, never show the extra hover star */
@media (hover:none), (pointer:coarse){
  .mb-logo::before,
  body.mb-has-public-nav .mb-logo::before{
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}




/* === Fix touch/mobile spark stars: never show unless real desktop hover === */

/* Hide the actual spark elements by default, no matter what older CSS says */
.mb-logo .mb-spark,
body.mb-has-public-nav .mb-logo .mb-spark{
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}

/* Only show spark stars on real desktop hover/focus */
@media (hover:hover) and (pointer:fine){
  .mb-logo:hover .mb-spark,
  .mb-logo:focus-visible .mb-spark,
  body.mb-has-public-nav .mb-logo:hover .mb-spark,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-spark{
    opacity: 1 !important;
    visibility: visible !important;
    animation: mbTwinkle .9s ease-in-out infinite !important;
  }
}

/* On touch devices and narrow/mobile experiences, never show these sparks */
@media (hover:none), (pointer:coarse), (max-width: 1024px){
  .mb-logo .mb-spark,
  .mb-logo:hover .mb-spark,
  .mb-logo:focus-visible .mb-spark,
  body.mb-has-public-nav .mb-logo .mb-spark,
  body.mb-has-public-nav .mb-logo:hover .mb-spark,
  body.mb-has-public-nav .mb-logo:focus-visible .mb-spark{
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
    display: none !important;
  }
}



/* unified mobile menu panel sizing */
@media (max-width:1024px), (hover:none), (pointer:coarse){
  #mbMobileMenu > div{
    width:100% !important;
    max-width:none !important;
  }
  #mbMobileMenu details{
    width:100% !important;
  }
  #mbMobileMenu summary.navlink{
    width:100% !important;
  }
}