/* =========================================================
   ORBITSUITE V10.4 — WHITE HEADER, APP DRAWER & FLOATING DEMO
   ========================================================= */

/* Main navigation: white surface creates clear separation from dark banners. */
.site-header{
  z-index:80;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e5eaf2;
  box-shadow:0 1px 0 rgba(18,31,55,.02);
  backdrop-filter:blur(18px) saturate(145%);
}
.site-header.scrolled{
  background:rgba(255,255,255,.985);
  border-bottom-color:#dce3ed;
  box-shadow:0 14px 38px rgba(22,37,64,.10);
}
.site-header .brand{color:#111a2d}
.site-header .brand small{color:#7b879b}
.site-header .desktop-nav a,
.site-header .text-cta{color:#5c687c}
.site-header .desktop-nav a:hover,
.site-header .desktop-nav a.active,
.site-header .text-cta:hover,
.site-header .text-cta.active{color:#111a2d}
.site-header .text-cta.active:after{background:linear-gradient(90deg,var(--purple),var(--cyan))}
.site-header .menu-toggle{
  border-color:#dce3ed;
  background:#f7f9fc;
  box-shadow:0 6px 18px rgba(25,41,72,.06);
}
.site-header .menu-toggle:hover{border-color:#cbd4e1;background:#f1f5fa}
.site-header .menu-toggle span{background:#18243a}

/* The backdrop exists only for the compact/mobile app drawer. */
.mobile-nav-backdrop{display:none}

/* Floating demo is intentionally reduced to one discoverable icon. */
.floating-demo{
  right:24px;
  bottom:24px;
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  min-width:60px;
  padding:0;
  border:4px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:linear-gradient(145deg,#7858fb 0%,#397ff5 52%,#17bdc8 100%);
  color:#fff;
  box-shadow:0 16px 38px rgba(31,55,112,.28),0 7px 17px rgba(23,37,70,.18);
  backdrop-filter:none;
  overflow:visible;
  isolation:isolate;
  animation:orbitDemoBounce 2.8s ease-in-out infinite;
  transition:box-shadow .22s ease,filter .22s ease;
}
.floating-demo:hover,
.floating-demo:focus-visible{
  filter:saturate(1.08) brightness(1.03);
  box-shadow:0 21px 48px rgba(31,55,112,.34),0 8px 20px rgba(23,37,70,.20);
  animation-play-state:paused;
  outline:none;
}
.floating-demo:focus-visible{box-shadow:0 0 0 4px rgba(121,87,255,.20),0 21px 48px rgba(31,55,112,.34)}
.floating-demo>.floating-demo-icon{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:transparent;
}
.floating-demo>.floating-demo-icon svg{width:24px;height:24px;stroke-width:1.9}
.floating-demo>div,
.floating-demo>.floating-arrow{display:none!important}
.floating-demo:before{
  content:"Book a Demo";
  position:absolute;
  z-index:-1;
  top:50%;
  right:calc(100% + 13px);
  transform:translate(10px,-50%);
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#0e1a2d;
  color:#fff;
  box-shadow:0 14px 34px rgba(8,18,35,.24);
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.05px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.floating-demo:after{
  content:"";
  position:absolute;
  top:50%;
  right:calc(100% + 7px);
  width:11px;
  height:11px;
  border-radius:2px;
  background:#0e1a2d;
  transform:translate(8px,-50%) rotate(45deg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
@media(hover:hover){
  .floating-demo:hover:before,
  .floating-demo:focus-visible:before{
    z-index:2;
    transform:translate(0,-50%);
    opacity:1;
    visibility:visible;
  }
  .floating-demo:hover:after,
  .floating-demo:focus-visible:after{
    z-index:1;
    transform:translate(0,-50%) rotate(45deg);
    opacity:1;
    visibility:visible;
  }
}
@keyframes orbitDemoBounce{
  0%,18%,48%,70%,100%{transform:translateY(0)}
  34%{transform:translateY(-8px)}
  58%{transform:translateY(-4px)}
}
.mobile-cta{display:none!important}

@media(max-width:1020px){
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Right-side app drawer with a dimmed page backdrop. */
  .mobile-nav-backdrop{
    position:fixed;
    z-index:94;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(6,14,27,.58);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    backdrop-filter:blur(3px);
    transition:opacity .28s ease,visibility .28s ease;
  }
  .mobile-nav-backdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .mobile-nav{
    position:fixed;
    z-index:95;
    top:0!important;
    right:0;
    bottom:0;
    left:auto;
    display:flex;
    flex-direction:column;
    gap:0;
    width:min(88vw,390px);
    height:100vh;
    height:100dvh;
    max-height:none;
    padding:0;
    overflow:hidden;
    overscroll-behavior:contain;
    background:#fff;
    color:#172238;
    box-shadow:-28px 0 72px rgba(6,15,31,.28);
    opacity:1;
    visibility:hidden;
    transform:translateX(104%);
    transition:transform .34s cubic-bezier(.22,.72,.23,1),visibility .34s ease;
  }
  .mobile-nav.open{
    max-height:none;
    padding:0;
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }
  .mobile-nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:82px;
    padding:16px 19px 15px 22px;
    border-bottom:1px solid #e7ebf2;
    background:#fff;
  }
  .mobile-nav-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#111a2d;
  }
  .mobile-nav-brand img{width:38px;height:38px}
  .mobile-nav-brand>span{display:grid;font-size:20px;font-weight:850;line-height:1;letter-spacing:-.45px}
  .mobile-nav-brand small{margin-top:5px;color:#7d899d;font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
  .mobile-nav-close{
    position:relative;
    flex:0 0 44px;
    width:44px;
    height:44px;
    border:1px solid #dfe5ee;
    border-radius:12px;
    background:#f6f8fb;
    color:#18243a;
  }
  .mobile-nav-close:hover{background:#edf2f8}
  .mobile-nav-close span{
    position:absolute;
    top:50%;
    left:50%;
    width:19px;
    height:2px;
    border-radius:2px;
    background:currentColor;
  }
  .mobile-nav-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
  .mobile-nav-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
  .mobile-nav-content{
    display:flex;
    flex:1;
    flex-direction:column;
    min-height:0;
    padding:24px 22px 20px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#d4dbe6 transparent;
  }
  .mobile-nav-eyebrow{
    display:block;
    margin:0 0 11px 4px;
    color:#8a96a8;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.15px;
  }
  .mobile-nav-links{display:grid;gap:5px}
  .mobile-nav-links>a:not(.btn){
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:0 42px 0 15px;
    border:1px solid transparent;
    border-radius:12px;
    color:#435168;
    font-size:14px;
    font-weight:720;
    line-height:1.25;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
  }
  .mobile-nav-links>a:not(.btn):after{
    content:"";
    position:absolute;
    right:17px;
    width:7px;
    height:7px;
    border-top:1.8px solid currentColor;
    border-right:1.8px solid currentColor;
    transform:rotate(45deg);
    opacity:.45;
  }
  .mobile-nav-links>a:not(.btn):hover{
    border-color:#e2e7ef;
    background:#f7f9fc;
    color:#18243a;
    transform:translateX(2px);
  }
  .mobile-nav-links>a.active:not(.btn){
    border-color:#dcd8ff;
    background:linear-gradient(90deg,rgba(121,87,255,.10),rgba(24,190,201,.07));
    color:#5d45d8;
    font-weight:820;
  }
  .mobile-nav-links>a.active:not(.btn):before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    bottom:11px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:linear-gradient(180deg,var(--purple),var(--cyan));
  }
  .mobile-nav-actions{
    display:grid;
    gap:10px;
    margin-top:auto;
    padding-top:24px;
  }
  .mobile-nav-contact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:0 15px;
    border:1px solid #dfe5ee;
    border-radius:12px;
    background:#fff;
    color:#26344b;
    font-size:13px;
    font-weight:780;
  }
  .mobile-nav-contact svg{width:16px;height:16px;color:#69778d}
  .mobile-nav-actions .btn{width:100%;min-height:51px}
  .mobile-nav-note{
    display:flex;
    align-items:center;
    gap:8px;
    margin:17px 3px 0;
    color:#7f8b9e;
    font-size:10.5px;
    line-height:1.45;
  }
  .mobile-nav-note span{
    flex:0 0 7px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#20c995;
    box-shadow:0 0 0 4px rgba(32,201,149,.11);
  }
  body.menu-open{touch-action:none}
}

@media(max-width:720px){
  .site-header .nav-wrap{min-height:70px}
  .site-header .brand img{width:35px;height:35px}
  .site-header .brand>span{font-size:18px}
  .site-header .brand small{font-size:7.5px}
  .site-header .menu-toggle{width:43px;height:43px}
  .mobile-nav{width:min(92vw,370px)}
  .mobile-nav-head{min-height:76px;padding:13px 16px 13px 19px}
  .mobile-nav-content{padding:21px 18px 18px}
  .mobile-nav-links>a:not(.btn){min-height:47px;font-size:13.5px}
  .floating-demo{
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
    min-width:54px;
    border-width:3px;
  }
  .floating-demo>.floating-demo-icon svg{width:22px;height:22px}
  .footer-bottom{padding-bottom:24px}
}

@media(max-width:430px){
  .mobile-nav{width:94vw}
  .mobile-nav-brand>span{font-size:18px}
  .mobile-nav-brand img{width:35px;height:35px}
}

@media(prefers-reduced-motion:reduce){
  .floating-demo{animation:none!important}
  .mobile-nav,
  .mobile-nav-backdrop{transition:none!important}
}