/* ============================================================
   Orbuculum — Redesigned sticky menu (header)

   Visual source of truth:
     Figma "Public Website | Orbuculum" (FNcRBpE9kZ7i79LaXASSwy)
     node 7199-48329 "SectionStickyMenu" — 1920x60, px:40,
     Container max-w:1400 / min-w:1100, justify-between.

   Behavior source of truth:
     main_experiments glass topbar — hide on scroll down / show on
     scroll up, transform .35s cubic-bezier(.32,.72,0,1),
     backdrop blur glass.

   Figma tokens used (fallback hex = exact Figma values):
     color/dark-gray-1  #4e5b76  arrow, Sign in       (= --color-gray)
     color/dark-gray-2  #393d53  menu item text       (= --color-alt-gray)
     color/dark-gray-3  #2d3141  Resources item
     logo text          #31374f                        (= --color-dark-gray)
     color/interactive/color-interactive-primary #2aa7ee (= --color-list-blue)
     radius/radius-full 999px
   ============================================================ */

:root {
  /* new bar is 60px (Figma), old header was 70px —
     keeps .main_container top offset in sync */
  --header-desktop-height: 60px;
}

/* ---------- Bar (glass + hide/show from main_experiments) ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;                          /* same layer as old .header; below modal overlay (1031) */
  box-sizing: border-box;
  height: 60px;                           /* Figma: SectionStickyMenu h=60 */
  padding: 0 40px;                        /* Figma: px-[40px] */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);   /* glass fallback (main_experiments) */
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.32, .72, 0, 1); /* easing from main_experiments */
  will-change: transform;
}
.topbar.is-hidden { transform: translateY(-100%); }

@supports (backdrop-filter: blur(20px)) {
  .topbar {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
  }
}

.topbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;         /* Figma: justify-between */
  flex: 1 0 0;
  max-width: 1400px;                      /* Figma: max-w-[1400px] */
  min-width: 1100px;                      /* Figma: min-w-[1100px] */
}

/* ---------- Logo (Figma: "logo" 190 x 34.463) ---------- */
.topbar__logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 190px;
  height: 34.463px;
  text-decoration: none;
  cursor: pointer;
}
.topbar__logo-orb {
  position: absolute;                     /* Figma inset: 12.12% _ 4.12% 0 */
  left: 0;
  top: 4.18px;
  width: 21.87px;                         /* svg: 21.8707 x 28.8656 */
  height: 28.87px;
  display: block;
}
.topbar__logo-text {
  position: absolute;
  left: 35.11px;                          /* Figma: inset left 18.48% of 190 */
  top: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;                       /* Montserrat Medium */
  font-size: 27.88px;
  line-height: normal;
  letter-spacing: -0.4182px;
  color: var(--color-dark-gray, #31374f);
  white-space: nowrap;
}

/* ---------- Main menu (Figma: "BlockMainMenu", gap 35) ---------- */
.topbar__menu {
  display: flex;
  align-items: flex-start;                /* Figma: items-start */
  gap: 35px;
}
.topbar__item {
  display: flex;
  align-items: flex-start;
  gap: 5px;                               /* Figma: Atom| Main Menu Item gap 5 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;                       /* Montserrat SemiBold */
  font-size: 13px;
  line-height: normal;
  color: var(--color-alt-gray, #393d53);  /* color/dark-gray-2 */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .4s cubic-bezier(.32, .72, 0, 1); /* hover easing from main_experiments */
}
.topbar__item:hover { color: #2d3141; }   /* hover state not in Figma node; darken to dark-gray-3 */
.topbar__item--dark { color: #2d3141; }   /* Figma: "Resources" uses color/dark-gray-3 */

.topbar__arrow {                          /* Figma: DropdownArrow 20x20 */
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topbar__arrow img {                      /* Figma: 5 x 8.75 vector, rotated 90deg */
  width: 5px;
  height: 8.75px;
  transform: rotate(90deg);
  display: block;
}

/* ---------- Buttons (Figma: "Buttons", gap 16) ---------- */
.topbar__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar__btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;                           /* Figma: h-[44px] */
  border-radius: 999px;                   /* radius/radius-full */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;                       /* Montserrat SemiBold */
  font-size: 16px;
  line-height: 1;                         /* Figma: leading-none */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .4s cubic-bezier(.32, .72, 0, 1),
              background .5s cubic-bezier(.32, .72, 0, 1);
}
.topbar__btn--primary {                   /* "Start free" */
  padding: 0 24px;                        /* Figma: px-[24px] */
  background: var(--color-list-blue, #2aa7ee); /* color/interactive/color-interactive-primary */
  color: #ffffff;                         /* color/real-white */
}
.topbar__btn--primary:hover { opacity: .9; }  /* hover not in Figma node */
.topbar__btn--secondary {                 /* "Sign in" */
  padding: 0 22px;                        /* 22px + 2px border = Figma inner 24px (stroke inside) */
  border: 2px solid var(--color-gray, #4e5b76); /* color/dark-gray-1 */
  color: var(--color-gray, #4e5b76);
  background: transparent;
}
.topbar__btn--secondary:hover { background: rgba(0, 0, 0, 0.03); } /* hover bg from main_experiments */

/* ---------- Fallback for narrow viewports (not in Figma node —
     node is desktop-only, min-w 1100; pattern from main_experiments) ---------- */
@media (max-width: 1279px) {
  .topbar__container { min-width: 0; }
  .topbar__menu { display: none; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 20px; }
  .topbar__logo-text { display: none; }
  .topbar__logo { width: 22px; }
}