.navbar{
  position:fixed;

  top:24px;
  left:50%;

  transform:translateX(-50%);

  width:calc(100% - 48px);
  max-width:1400px;

  height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 24px;

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(24px);

  box-shadow:
    0 10px 40px rgba(0,0,0,.35);

  z-index:9999;

  transition:
    .35s ease;
}

/* SCROLLED */

.navbar.scrolled{

  top:14px;

  height:64px;

  background:
    linear-gradient(
      135deg,
      rgba(5,8,22,.88),
      rgba(5,8,22,.68)
    );

  border-color:
    rgba(255,255,255,.06);

  box-shadow:
    0 12px 50px rgba(0,0,0,.45);
}

/* BRAND */

.navbar-brand{
  display:flex;
  align-items:center;
  gap:16px;

  text-decoration:none;
}

.navbar-logo{
  height:44px;
  width:220px;

  overflow:hidden;

  background:none;
  border:none;
}

.navbar-logo img{
  height:52px;

  width:auto;

  transform:scale(2.5);

  transform-origin:left center;
}

/* NAV LINKS */

.navbar-links{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-link{
  position:relative;

  padding:12px 18px;

  border-radius:14px;

  color:rgba(255,255,255,.7);

  text-decoration:none;

  font-size:14px;
  font-weight:600;

  transition:.25s ease;
}

.nav-link:hover{
  color:white;

  background:
    rgba(255,255,255,.06);
}

/* ACTIONS */

.navbar-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.status-pill{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 16px;

  border-radius:999px;

  background:
    rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.06);

  color:rgba(255,255,255,.7);

  font-size:13px;
}

.status-dot{
  width:10px;
  height:10px;

  border-radius:999px;

  background:#22c55e;

  box-shadow:
    0 0 16px #22c55e;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:50px;

  padding:0 22px;

  border-radius:18px;

  text-decoration:none;

  font-size:14px;
  font-weight:700;

  color:white;

  background:
    linear-gradient(
      135deg,
      #0ea5ff,
      #2563eb
    );

  box-shadow:
    0 10px 30px rgba(37,99,235,.35);

  transition:.3s ease;
}

.nav-btn:hover{
  transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:980px){

  .navbar{
    width:calc(100% - 24px);

    padding:0 18px;
  }

  .navbar-links{
    display:none;
  }

  .status-pill{
    display:none;
  }

}

@media(max-width:640px){

  .navbar{
    height:68px;
  }

  .navbar-title span{
    display:none;
  }

  .nav-btn{
    height:44px;

    padding:0 18px;

    font-size:13px;
  }

}