/* ============================================================
   YOUSEE360 — NAVIGATION v2
   Glass nav + mega menu + CTA pill
   Loaded AFTER navigation.css to take precedence
   ============================================================ */

/* Reset old webflow nav internals that fight us */
.navigation-bar,
.navigation-bar.w-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100% !important;
  height: 80px !important;
  z-index: 99999 !important;
  background: rgba(8, 10, 14, 0.78) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 20px 40px -20px rgba(0,0,0,0.6);
  transition: height .3s cubic-bezier(0.16,1,0.3,1), background .3s ease;
  display: flex !important;
  align-items: center;
  padding: 0 !important;
}

.navigation-bar.scrolled {
  height: 64px !important;
  background: rgba(6, 7, 10, 0.85) !important;
}

.nav-cont,
.nav-cont.w-container {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 3vw, 40px) !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: var(--s-4) !important;
}

/* === LOGO === */
.logo, .f-logo, .nav-logo {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 100% !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.logo::before, .f-logo::before {
  content: none !important;
}
.logo::after, .f-logo::after {
  content: none !important;
}
/* === NAV MENU === */
.navigation-menu,
.navigation-menu.w-nav-menu {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  height: 100%;
  background: none !important;
}

.navigation-link,
.navigation-link.w-nav-link {
  position: relative;
  padding: 10px 16px !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.78) !important;
  letter-spacing: 0.005em;
  border-radius: 10px;
  background: none !important;
  transition: color .25s ease, background .25s ease;
  text-transform: none !important;
  white-space: nowrap;
  height: auto !important;
  line-height: 1.2 !important;
}
.navigation-link:hover,
.navigation-link.w-nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
}
.navigation-link.w--current,
.navigation-link[aria-current="page"] {
  color: var(--ys-green, #00ff88) !important;
}
.navigation-link.w--current::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 2px;
  background: var(--ys-green, #00ff88);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0,255,136,0.6);
}

/* === DROPDOWN MEGA MENU === */
.w-dropdown {
  position: static !important;  /* allows full-width mega menu */
}

.w-dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 16px !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.78) !important;
  border-radius: 10px;
  background: none !important;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
  height: auto !important;
  line-height: 1.2 !important;
}
.w-dropdown-toggle:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
}
.w-icon-dropdown-toggle {
  width: 10px !important; height: 10px !important;
  margin: 0 !important;
  position: static !important;
  transition: transform .25s ease;
}
.w-dropdown:hover .w-icon-dropdown-toggle,
.w-dropdown.w--open .w-icon-dropdown-toggle {
  transform: rotate(180deg);
}
.w-icon-dropdown-toggle::before {
  content: "▾";
  font-size: 12px;
  color: inherit;
}

.w-dropdown-list,
.w-dropdown-list.w--open {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-10px) !important;
  width: min(960px, calc(100vw - 40px)) !important;
  max-width: 960px !important;
  background: rgba(10, 12, 18, 0.96) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,255,136,0.04);
  transition: opacity .2s ease .15s, transform .2s ease .15s, visibility 0s linear .35s !important;
}
.w-dropdown:hover > .w-dropdown-list,
.w-dropdown.w--open > .w-dropdown-list,
.w-dropdown-list.w--open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  transition: opacity .2s ease, transform .2s ease, visibility 0s !important;
}

/* Invisible bridge to maintain hover state over the margin gap */
.w-dropdown-list::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: transparent;
}
.w-dropdown-link {
  display: flex !important;
  flex-direction: column;
  padding: 14px 16px !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  background: none !important;
  border: 1px solid transparent !important;
  transition: background .25s ease, border-color .25s ease, transform .2s ease !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
.w-dropdown-link:hover {
  background: rgba(0,255,136,0.06) !important;
  border-color: rgba(0,255,136,0.18) !important;
  color: #fff !important;
}
.w-dropdown-link::before {
  content: attr(data-desc);
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
  order: 2;
}
.w-dropdown-link {
  position: relative;
}
.w-dropdown-link[data-icon]::after {
  content: attr(data-icon);
  position: absolute;
  top: 14px; right: 16px;
  font-size: 1rem;
  color: var(--ys-green, #00ff88);
  opacity: 0.7;
}

/* === RIGHT SIDE: CTA + LANG === */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  background: linear-gradient(135deg, #00ff88 0%, #2dffa6 100%);
  color: #001a10 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px -6px rgba(0,255,136,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(0,255,136,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
  color: #001a10 !important;
}
.nav-cta::after {
  content: "→";
  transition: transform .25s ease;
}
.nav-cta:hover::after { transform: translateX(3px); }

.nav-lang-switch.navigation-link,
.nav-lang-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.75) !important;
  transition: background .25s ease, color .25s ease;
}
.nav-lang-switch:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.nav-lang-switch i { color: var(--ys-green, #00ff88); }

/* === HAMBURGER (MOBILE) === */
.hamburger-button,
.hamburger-button.w-nav-button {
  display: none !important;
  width: 44px; height: 44px;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.hamburger-button .icon,
.hamburger-button .w-icon-nav-menu {
  width: 22px; height: 16px;
  position: relative;
  display: block;
}
.hamburger-button .icon::before,
.hamburger-button .icon::after,
.hamburger-button .icon span {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 2px; background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
}
.hamburger-button .icon::before { top: 0; }
.hamburger-button .icon::after  { bottom: 0; }
.hamburger-button .icon span    { top: 7px; }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .navigation-link, .w-dropdown-toggle { padding: 8px 12px !important; font-size: 0.875rem !important; }
  .nav-cta { padding: 9px 16px; font-size: 0.875rem; }
}

@media (max-width: 980px) {
  .hamburger-button { display: flex !important; }
  .navigation-menu,
  .navigation-menu.w-nav-menu {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(6, 7, 10, 0.98) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 100px 24px 40px !important;
    gap: 4px !important;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(0.16,1,0.3,1);
  }
  .w-nav[data-nav-menu-open] .navigation-menu,
  .navigation-menu.w--nav-menu-open {
    transform: translateX(0) !important;
    display: flex !important;
  }
  .navigation-link, .w-dropdown-toggle {
    width: 100%;
    padding: 16px 20px !important;
    font-size: 1.125rem !important;
    border-radius: 12px;
    justify-content: space-between;
  }
  .w-dropdown { width: 100%; }
  .w-dropdown-list {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 4px !important;
    grid-template-columns: 1fr !important;
    background: rgba(255,255,255,0.03) !important;
    padding: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .w-dropdown.w--open .w-dropdown-list { display: grid !important; }
  .nav-right {
    margin-top: 24px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-cta { justify-content: center; }
}

/* === BODY PADDING — push content below fixed nav === */
body { padding-top: 0 !important; }
.section.section-hero:first-of-type,
section.hero:first-of-type {
  padding-top: clamp(120px, 14vh, 180px) !important;
}