/* ===== Floating navbar ===== */
.floating-nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-120%);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1); backdrop-filter: blur(8px);
  display:flex; align-items:center; gap:20px; padding:10px 20px; z-index:9999; opacity:0;
  transition: transform .35s, opacity .35s, box-shadow .25s
}
.floating-nav.show{ transform:translateX(-50%) translateY(0); opacity:1 }
.floating-nav a{ color:var(--ink); font-weight:500; font-size:15px; text-decoration:none; padding:6px 0 }
.floating-nav a:hover{ color:var(--green) }
[data-theme="outage"] .floating-nav{ background:var(--bg-elev); border-color:#2a3a4f }

/* Burger menu button */
.burger-menu{
  position:fixed; top:16px; right:16px; z-index:10000;
  width:44px; height:44px; border-radius:12px;
  background:var(--bg-elev); border:1px solid var(--line);
  box-shadow:var(--shadow-1); cursor:pointer; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.burger-menu:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2) }
.burger-menu:active{ transform:scale(.96) }
.burger-line{
  width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.burger-menu[aria-expanded="true"] .burger-line:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger-menu[aria-expanded="true"] .burger-line:nth-child(2){ opacity:0 }
.burger-menu[aria-expanded="true"] .burger-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:680px){
  .burger-menu{ display:flex }
  .floating-nav{
    left:50%; right:auto; width:calc(100% - 20px); transform:translateX(-50%) translateY(-90%);
    border-radius:14px; padding:6px 10px; gap:10px; top:10px; justify-content:center;
    overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:720px
  }
  .floating-nav.show{ transform:translateX(-50%) translateY(0) }
  .floating-nav a{ white-space:nowrap; padding:6px 8px; font-size:14px }
  .floating-nav:not(.mobile-only){ display:none !important }
  #mobileNav{ display:block }
  .floating-nav.mobile-only{
    display:inline-flex; flex-direction:row; gap:8px; padding:10px 16px; width:fit-content;
    max-width:calc(100% - 40px);
    margin-inline:auto; justify-content:center; box-shadow:var(--shadow-2); border-radius:16px;
    position:fixed; left:50%; transform:translateX(-50%) translateY(-110%); top:70px; z-index:9999; opacity:0;
    transition: transform .35s ease, opacity .35s ease; pointer-events:none;
  }
  .floating-nav.mobile-only.show{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto }
  .floating-nav.mobile-only a{ padding:8px 12px; text-align:center; white-space:nowrap; border-radius:10px; transition:background .2s }
  .floating-nav.mobile-only a:hover{ background:rgba(0,180,131,.08) }
  .floating-nav.mobile-only .mobile-contact-btn{ display:inline-flex }

  /* Hide Contact button on smaller screens to prevent wrapping */
  @media (max-width:540px){
    .floating-nav.mobile-only .mobile-contact-btn{ display:none }
  }
}
@media (max-width:480px){
  .floating-nav{ overflow-x:hidden; justify-content:center; gap:8px; padding:6px 8px }
  .floating-nav a{ display:none }
  .floating-nav a[href="#usecases"],
  .floating-nav a[href="#services"],
  .floating-nav a[href*="about"],
  .floating-nav a[href="#products"],
  .floating-nav a.btn[href^="mailto"],
  .floating-nav a.btn[style]{ display:inline-flex }
}