.site-header{
  position: fixed;
  top: 0;
  width: 100%;
  height: 96px;
  background: #252525;
  z-index: 1000;

  transition:
    height .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

/* HEADER AO ROLAR */
.site-header.scrolled{
  height: 78px;
  background: rgba(37,37,37,.96);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.header-inner{
  width: 100%;
  max-width: 80%;
  height: 100%;
  margin: 0 auto;

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

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

.logo{
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.logo i{
  font-size: 20px;
  color: #0d6efd;
}

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

.main-nav{
  display: flex;
  gap: 34px;
  align-items: center;
}

.main-nav a{
  font-size: 15px;
  font-weight: 500;
  color: #e5e5e5;
  position: relative;
  transition: color .3s ease;
}

/* underline SOMENTE links normais */
.main-nav a:not(.btn-nav)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  background:#0d6efd;
  transition:.3s;
}

.main-nav a:not(.btn-nav):hover::after{
  width:100%;
}

.main-nav a:not(.btn-nav):hover{
  color:#fff;
}

/* ===============================
   BOTÃO CTA
================================ */

.btn-nav{
  padding: 14px 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0d6efd, #3d8bfd);
  color:#fff !important;
  font-weight:700;

  box-shadow:
    0 10px 30px rgba(13,110,253,.45),
    inset 0 0 0 1px rgba(255,255,255,.25);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

/* remove QUALQUER underline */
.btn-nav::after{
  display:none !important;
}

.btn-nav:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 45px rgba(13,110,253,.6),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

/* ===============================
   HAMBURGER
================================ */

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}

.menu-toggle span{
  width:26px;
  height:2px;
  background:#fff;
  transition:.3s;
}

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

@media(max-width:900px){

  .menu-toggle{
    display:flex;
  }

  .main-nav{
    position:fixed;
    top:96px;
    left:0;
    width:100%;
    height:calc(100vh - 96px);
    background:#252525;

    flex-direction:column;
    justify-content:center;
    gap:32px;

    transform:translateY(-120%);
    transition:transform .5s ease;
  }

  .site-header.scrolled + .main-nav{
    top:78px;
    height:calc(100vh - 78px);
  }

  .main-nav.active{
    transform:translateY(0);
  }
}