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

.header {
  position: fixed;
  top: 16px;
  left: 0;
  width: 100%;
  z-index: 1000;
}

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

.headerWrap {
  position: relative;

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

  height: 68px;

  padding: 0 1.75rem;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.45);

  box-shadow:
    0 8px 30px rgba(15, 23, 42, 0.08),
    0 2px 8px rgba(15, 23, 42, 0.04);

  overflow: hidden;
}

/* Glass Highlight */

.headerWrap::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.05)
  );

  pointer-events: none;
}

.headerWrap::after {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: rgba(255, 255, 255, 0.75);
}

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

.logo {
  display: flex;

  flex-direction: column;

  justify-content: center;

  text-decoration: none;

  user-select: none;

  z-index: 2;
}

.logoTitle {
  font-family: var(--ff-heading);

  font-size: 1.55rem;

  font-weight: 800;

  line-height: 1;

  color: var(--clr-heading);

  transition: color 0.3s ease;
}

.logoSubtitle {
  margin-top: 0.22rem;

  font-family: var(--ff-body);

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  color: var(--clr-primary);

  transition: color 0.3s ease;
}

.logo:hover .logoTitle {
  color: var(--clr-primary);
}

/*==================================================
                NAVIGATION
==================================================*/

.nav {
  z-index: 2;
}

.menu {
  display: flex;

  align-items: center;

  gap: 0.45rem;

  margin: 0;

  padding: 0;

  list-style: none;
}

.menuItem {
  list-style: none;
}

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

.menuLink {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 40px;

  padding: 0 20px;

  border-radius: 999px;

  text-decoration: none;

  font-family: var(--ff-body);

  font-size: 0.95rem;

  font-weight: 600;

  color: #596273;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

/*==================================================
                    HOVER
==================================================*/

.menuLink:hover {
  color: var(--clr-primary);

  background: rgba(109, 40, 217, 0.045);

  transform: translateY(-1px);
}

/*==================================================
                ACTIVE
==================================================*/

.menuLink.active {
  color: var(--clr-primary);

  font-weight: 700;
}

/*==================================================
                UNDERLINE
==================================================*/

.menuLink::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 7px;

  width: 0;

  height: 2px;

  border-radius: 999px;

  transform: translateX(-50%);

  background: linear-gradient(90deg, #6d28d9 0%, #a855f7 40%, #f4b400 100%);

  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menuLink:hover::after {
  width: 62%;
}

.menuLink.active::after {
  width: 62%;
}

/*==================================================
                ACCESSIBILITY
==================================================*/

.menuLink:focus-visible {
  outline: none;

  color: var(--clr-primary);
}

.menuLink:focus-visible::after {
  width: 62%;
}

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

.menuToggle {
  display: none;
}

/*==================================================
                MICRO DETAILS
==================================================*/

.logo,
.menuLink {
  -webkit-tap-highlight-color: transparent;
}

.logo,
.logoTitle,
.logoSubtitle,
.menuLink {
  transition-duration: 0.3s;
}

/*==================================================
        TABLET + MOBILE (991px & BELOW)
==================================================*/

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

  .headerWrap {
    position: relative;

    height: 64px;

    padding: 0 1.25rem;

    border-radius: 20px;

    overflow: visible;
  }

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

  .logo {
    z-index: 10;
  }

  .logoTitle {
    font-size: 1.35rem;
  }

  .logoSubtitle {
    font-size: 0.68rem;

    letter-spacing: 0.12em;
  }

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

  .menuToggle {
    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    width: 46px;

    height: 46px;

    border: none;

    background: rgba(109, 40, 217, 0.05);

    border-radius: 50%;

    cursor: pointer;

    flex-shrink: 0;

    z-index: 1001;

    transition: 0.3s ease;
  }

  .menuToggle:hover {
    background: rgba(109, 40, 217, 0.08);
  }

  .menuToggle span {
    position: absolute;

    width: 20px;

    height: 2px;

    border-radius: 99px;

    background: var(--clrHeading);

    transition: 0.3s ease;
  }

  .menuToggle span:nth-child(1) {
    transform: translateY(-6px);
  }

  .menuToggle span:nth-child(2) {
    transform: translateY(0);
  }

  .menuToggle span:nth-child(3) {
    transform: translateY(6px);
  }

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

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

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

  /*==================================
            NAVIGATION
    ==================================*/

  .nav {
    position: absolute;

    top: calc(100% + 12px);

    left: 0;

    right: 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-12px);

    pointer-events: none;

    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0.3s ease;

    z-index: 999;
  }

  .nav.active {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }

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

  .menu {
    display: flex;

    flex-direction: column;

    gap: 0.35rem;

    margin: 0;

    padding: 1rem;

    list-style: none;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.45);

    box-shadow:
      0 20px 45px rgba(15, 23, 42, 0.1),
      0 5px 12px rgba(15, 23, 42, 0.05);
  }

  .menuItem {
    width: 100%;
  }

  .menuLink {
    width: 100%;

    height: 48px;

    justify-content: flex-start;

    padding: 0 1rem;

    border-radius: 12px;

    font-size: 0.95rem;
  }

  .menuLink::after {
    left: 1rem;

    bottom: 8px;

    transform: none;
  }

  .menuLink:hover {
    transform: none;
  }

  .menuLink:hover::after,
  .menuLink.active::after {
    width: 56px;
  }
}

/*==================================================
            MOBILE (767px & BELOW)
==================================================*/

@media (max-width: 767px) {
  .header {
    top: 10px;
  }

  .headerWrap {
    height: 60px;

    padding: 0 1rem;

    border-radius: 18px;
  }

  /*------------------------------
            Logo
    ------------------------------*/

  .logoTitle {
    font-size: 1.15rem;
  }

  .logoSubtitle {
    font-size: 0.62rem;

    letter-spacing: 0.1em;
  }

  /*------------------------------
        Hamburger
    ------------------------------*/

  .menuToggle {
    width: 44px;

    height: 44px;
  }

  .menuToggle span {
    width: 18px;
  }

  /*------------------------------
        Dropdown
    ------------------------------*/

  .nav {
    top: calc(100% + 10px);
  }

  .menu {
    padding: 0.85rem;

    border-radius: 18px;
  }

  .menuLink {
    height: 46px;

    padding: 0 0.95rem;

    font-size: 0.92rem;
  }

  .menuLink::after {
    left: 0.95rem;

    bottom: 8px;
  }
}

/*==================================================
        SMALL MOBILE (575px & BELOW)
==================================================*/

@media (max-width: 575px) {
  .header {
    top: 8px;
  }

  .headerWrap {
    height: 58px;

    padding: 0 0.85rem;

    border-radius: 16px;
  }

  /*------------------------------
            Logo
    ------------------------------*/

  .logoTitle {
    font-size: 1rem;
  }

  .logoSubtitle {
    font-size: 0.56rem;

    letter-spacing: 0.08em;
  }

  /*------------------------------
        Hamburger
    ------------------------------*/

  .menuToggle {
    width: 40px;

    height: 40px;
  }

  .menuToggle span {
    width: 17px;
  }

  /*------------------------------
        Dropdown
    ------------------------------*/

  .nav {
    top: calc(100% + 8px);
  }

  .menu {
    padding: 0.75rem;

    border-radius: 16px;
  }

  .menuLink {
    height: 44px;

    padding: 0 0.9rem;

    font-size: 0.9rem;

    border-radius: 10px;
  }

  .menuLink::after {
    left: 0.9rem;

    width: 0;
  }

  .menuLink:hover::after,
  .menuLink.active::after {
    width: 48px;
  }
}



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

.cta{

    max-width:720px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:var(--space20);

}

.ctaTag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.5rem 1rem;

    border-radius:var(--borderRadiusFull);

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

    color:var(--clrPrimary);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.ctaTitle{

    margin:0;

}

.ctaDescription{

    max-width:600px;

    margin:0;

}

.cta .btn{

    margin-top:var(--space16);

}

/*==================================================
                    FOOTER
==================================================*/

.footer{

    background:var(--clrHeading);

    color:#fff;

}

.footer .container{

    min-height:300px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:var(--space40);

    padding-block:var(--space48);

}

.footer .ctaTitle{

    color:#fff;

}

.footer .ctaDescription{

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

}