/* =========================================================
   TOP BAR — CANONICAL (LAYOUT-DRIVEN)
========================================================= */

body {
  transform: none !important;
}

/* =========================================================
   BASE TOPBAR
========================================================= */

.topbar {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 72px;
  z-index: 1000;

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

  background: rgba(250, 250, 245, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.topbar.is-solid {
  background: #FAFAF5;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* =========================================================
   INNER CONTAINER
========================================================= */

.topbar-inner {
  width: 100%;
  max-width: 1216px;
  height: 100%;

  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;

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

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

.topbar-logo {
  display: flex;
  align-items: center;
}

.topbar-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

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

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 24px;

  padding: 16px 24px;
  background: #ffffff;
  border-radius: 20px;
}

.nav-item {
  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  line-height: 150%;
  font-weight: 400;
  color: #8987A1;
  text-decoration: none;
}

.nav-item.active {
  font-weight: 700;
  color: #252432;
}

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

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.topbar-cta {
  width: 132px;
  height: 40px;

  background: #00C896;
  border-radius: 10px;
  border: none;

  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;

  cursor: pointer;
}

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

.hamburger {
  display: none;
  width: 33px;
  height: 33px;
  background: transparent;
  border: none;
  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.hamburger span {
  width: 100%;
  border: 2.75px solid #364B47;
  border-radius: 2px;
}

/* =========================================================
   COLLAPSED STATE (JS SUPPORT)
========================================================= */

.topbar.is-collapsed .topbar-nav,
.topbar.is-collapsed .topbar-cta {
  display: none;
}

.topbar.is-collapsed .hamburger {
  display: flex;
}

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

.mobile-menu {
  position: fixed;
  top: 72px;
  left: 0;
  width: 100%;

  padding: 40px 40px;

  display: none;
  flex-direction: column;
  gap: 40px;

  background: rgba(250, 250, 245, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  z-index: 999;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.mobile-menu.open {
  display: flex;
}

.mobile-cta {
  margin-top: auto;
  height: 48px;
  width: 100%;

  background: #00C896;
  border-radius: 10px;
  border: none;

  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;

  cursor: pointer;
}

/* =========================================================
   COLLAPSE BELOW LAYOUT CAPACITY (1296px)
========================================================= */

@media (max-width: 1295px) {

  .topbar-nav,
  .topbar-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .topbar-logo img {
    height: 28px;
  }

}