/* =========================
   HEADER
========================= */

.header{
  position:fixed;
  top:20px;
  left:0;
  width:100%;
  z-index:var(--z-header);
}

.navbar{
  position:relative;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  border-radius:999px;
  pointer-events:auto;
  background:rgba(22,27,34,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  box-shadow:0 20px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
}

.navbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(139,92,246,.5),
    rgba(6,182,212,.4),
    transparent
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

.header.scrolled .navbar{
  background:rgba(15,17,23,.85);
  box-shadow:0 25px 60px rgba(0,0,0,.4);
}

/* =========================
   LOGO
========================= */

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
}

.logo-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-primary);
  box-shadow:
  0 0 25px rgba(139,92,246,.35),
  0 0 40px rgba(6,182,212,.15);
}

/* =========================
   DESKTOP NAV
========================= */

.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-links a{
  position:relative;
  padding:12px 18px;
  border-radius:14px;
  color:var(--text-secondary);
  font-size:.95rem;
  font-weight:500;
}

.nav-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

.nav-links a.active{
  color:#fff;
  background:rgba(255,255,255,.06);
  box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.04),
  0 0 20px rgba(139,92,246,.15);
}

/* =========================
   HIRE BUTTON
========================= */

.nav-btn{
  min-height:50px;
  padding-inline:26px;
}

/* =========================
   MENU TOGGLE
========================= */

.menu-toggle{
  width:52px;
  height:52px;
  display:none;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  transition:.3s ease;
}

.menu-toggle:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(139,92,246,.4);
  box-shadow:0 0 20px rgba(139,92,246,.15);
}

.menu-toggle span{
  position:absolute;
  width:22px;
  height:2px;
  border-radius:10px;
  background:#fff;
  transition:.35s ease;
}

.menu-toggle span:nth-child(1){
  transform:translateY(-7px);
}

.menu-toggle span:nth-child(3){
  transform:translateY(7px);
}

.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg);
}

/* =========================
   MOBILE MENU
========================= */

.mobile-menu{
  position:fixed;
  top:0;
  left:0;
  width:320px;
  max-width:85%;
  height:100vh;
  background:rgba(15,17,23,.95);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  padding:30px 24px;
  transform:translateX(-100%);
  transition:.4s ease;
  z-index:1001;
}

.mobile-menu.active{
  transform:translateX(0);
}

.mobile-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-nav a{
  display:flex;
  align-items:center;
  padding:16px 18px;
  border-radius:14px;
  color:var(--text-secondary);
  font-weight:500;
}

.mobile-nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

.mobile-nav a.active{
  color:#fff;
  background:rgba(255,255,255,.08);
}

/* =========================
   MOBILE CTA
========================= */

.mobile-cta{
  margin-top:30px;
}

.mobile-cta .btn{
  width:100%;
}

/* =========================
   MOBILE SOCIALS
========================= */

.mobile-social{
  margin-top:auto;
  display:flex;
  gap:12px;
}

.mobile-social a{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  transition:.3s ease;
}

.mobile-social a:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.08);
}

/* =========================
   OVERLAY
========================= */

.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
  z-index:1000;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

body.menu-open{
  overflow:hidden;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){
  .nav-btn{
    display:none;
  }
}

@media(max-width:768px){
  .header{
    top:12px;
  }

  .navbar{
    height:72px;
    padding:0 18px;
    border-radius:22px;
    display:flex;
        align-items:center;
        justify-content:space-between;
  }

  .nav-links{
    display:none;
  }

  .menu-toggle{
    display:flex;
    margin-left:auto;
    flex-shrink:0;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:auto;
    font-size:1.15rem;
    margin-right:auto;
  }

  .logo-icon{
    width:40px;
    height:40px;
  }
}

@media(max-width:480px){
  .mobile-menu{
    width:290px;
  }

  .navbar{
    padding-inline:14px;
  }
}

.mobile-header{
    margin-bottom:30px;
}

.mobile-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.mobile-brand h4{
    font-size:1.2rem;
    margin-bottom:2px;
}

.mobile-brand small{
    color:var(--text-muted);
}

.mobile-close{
    position:absolute;
    top:25px;
    right:20px;

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

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

    color:#fff;

    cursor:pointer;
}

.nav-links a.active{
  color:#fff;
  background:rgba(255,255,255,.06);
  box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.05),
  0 0 25px rgba(139,92,246,.15);
}

.nav-links a.active::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 12px var(--primary);
}

.mobile-nav a.active{
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.05);
}