.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.navbar.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  z-index: 2;
}

.navbar-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar-menu li:not(.navbar-dropdown-wrap) {
  position: relative;
}

.navbar-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  color: var(--text);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.navbar-link:hover,
.navbar-link.is-active {
  background: var(--surface-alt);
  color: var(--secondary);
}

.navbar-link .chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}

.navbar-dropdown-wrap:hover .chevron {
  transform: rotate(180deg);
}

.navbar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  max-height: 60vh;
  overflow-y: auto;
}

.navbar-dropdown-wrap:hover .navbar-dropdown,
.navbar-dropdown-wrap:focus-within .navbar-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar-dropdown a:not(.feature-menu-item) {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.navbar-dropdown a:hover {
  background: var(--surface-alt);
  color: var(--secondary);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.navbar-actions .btn {
  padding: 11px 20px;
  font-size: var(--fs-small);
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.lang-switch-btn {
  border: none;
  background: transparent;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-switch-btn:hover {
  color: var(--text);
}

.lang-switch-btn.is-active {
  background: var(--secondary);
  color: #fff;
}

.navbar-mobile-panel .lang-switch {
  align-self: flex-start;
  margin: 4px 0 8px;
}

.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.navbar-toggle span {
  width: 22px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.navbar-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile panel is hidden by default on all screen sizes; only the
   @media (max-width: 900px) block below turns it on. Without this base
   rule, the panel had no styling at all above 900px and rendered inline
   as plain, unstyled links/buttons underneath the real navbar. */
.navbar-mobile-panel {
  display: none;
}

/* ===== MOBILE NAV ===== */
@media (max-width: 809px) {
  .navbar-menu,
  .navbar-actions {
    display: none;
  }

  .navbar-toggle {
    display: flex;
  }

  .navbar-mobile-panel {
    display: block;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background);
    padding: 24px var(--container-padding) 40px;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
    z-index: 1;
  }

  .navbar-mobile-panel.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--transition-base), visibility 0s linear;
  }

  .navbar-mobile-panel a {
    display: block;
    padding: 16px 4px;
    font-size: 1.125rem;
    font-weight: var(--fw-medium);
    border-bottom: 1px solid var(--border);
    color: var(--primary);
  }

  .navbar-mobile-panel .mobile-submenu {
    padding-left: 16px;
  }

  .navbar-mobile-panel .mobile-submenu a {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    border-bottom: none;
    padding: 10px 4px;
  }

  .navbar-mobile-panel .mobile-cta {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .navbar-mobile-panel .mobile-cta .btn {
    width: 100%;
  }
}

/* ===== CEFAT FEATURE MEGA MENU ===== */
.navbar-inner { position: relative; }
.navbar-dropdown-wrap { position: static; }
.navbar-dropdown {
  position:absolute; top:calc(100% + 10px); left:var(--container-padding); right:var(--container-padding); width:auto; min-width:0;
  box-sizing:border-box; padding:28px 30px 30px; border-radius:0 0 24px 24px;
  background:rgba(255,255,255,.985); border:1px solid rgba(16,24,40,.07);
  box-shadow:0 22px 55px rgba(16,24,40,.12); max-height:none; overflow:hidden;
}
.feature-menu-grid {
  width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:34px; row-gap:28px; align-items:start;
}
.feature-menu-item {
  min-width:0; width:100%; display:grid; grid-template-columns:48px minmax(0,1fr);
  align-items:start; gap:14px; padding:2px 0; color:var(--text); text-decoration:none;
  border-radius:14px; overflow:hidden;
}
.feature-menu-item:hover { color:var(--text); }
.feature-menu-icon {
  width:48px; height:48px; flex:0 0 48px; border-radius:14px; display:grid; place-items:center;
  background:var(--secondary); color:#fff; box-shadow:0 8px 18px rgba(47,128,237,.16);
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.feature-menu-item:hover .feature-menu-icon { transform:translateY(-2px); box-shadow:0 12px 24px rgba(47,128,237,.22); }
.feature-menu-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feature-menu-copy { min-width:0; max-width:100%; display:block; overflow:hidden; }
.feature-menu-copy strong { display:block; max-width:100%; font-size:17px; line-height:1.28; font-weight:700; color:#202020; letter-spacing:-.015em; overflow-wrap:anywhere; }
.feature-menu-copy > span { display:block; max-width:100%; margin-top:6px; font-size:13.5px; line-height:1.48; color:#8a8c94; font-weight:400; overflow-wrap:anywhere; }
@media (max-width:1100px) and (min-width:810px){
 .navbar-dropdown{padding:24px}.feature-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;row-gap:22px}
 .feature-menu-item{grid-template-columns:42px minmax(0,1fr);gap:12px}.feature-menu-icon{width:42px;height:42px;border-radius:12px}
 .feature-menu-copy strong{font-size:15px}.feature-menu-copy>span{font-size:12px}
}
@media (max-width:809px){
 .navbar-dropdown,.navbar-dropdown-wrap:hover .navbar-dropdown,.navbar-dropdown-wrap:focus-within .navbar-dropdown{display:none!important}
 .navbar-mobile-panel .feature-menu-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;width:100%;padding:10px 4px;border-bottom:none;overflow:hidden}
 .navbar-mobile-panel .feature-menu-icon{width:40px;height:40px;border-radius:11px}
 .navbar-mobile-panel .feature-menu-copy strong{font-size:15px}.navbar-mobile-panel .feature-menu-copy>span{font-size:12px;margin-top:3px}
 .feature-menu-grid{grid-template-columns:1fr;gap:0}
}
@media (min-width:810px){.navbar-inner{justify-content:flex-start}.navbar-menu{margin-left:18px}.navbar-actions{margin-left:auto}}

/* =========================================================
   FINAL MEGA MENU REBUILD — CEFAT
   Rail-aligned, stable 4-column layout, no text collisions.
   ========================================================= */
@media (min-width: 1101px) {
  .navbar-inner {
    justify-content: flex-start;
  }

  .navbar-menu {
    margin-left: 14px;
    gap: 2px;
  }

  .navbar-dropdown-wrap {
    position: static;
  }

  .navbar-dropdown-wrap > .navbar-link {
    white-space: nowrap;
  }

  .navbar-dropdown {
    left: var(--container-padding);
    right: var(--container-padding);
    width: auto;
    max-width: none;
    box-sizing: border-box;
    padding: 28px 30px 30px;
    border-radius: 0 0 24px 24px;
    overflow: visible;
    z-index: 20;
  }

  .feature-menu-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(94px, auto);
    column-gap: 38px;
    row-gap: 24px;
    align-items: start;
  }

  .feature-menu-item {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 14px;
    padding: 2px 0;
    overflow: visible;
  }

  .feature-menu-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  .feature-menu-copy {
    flex: 1 1 auto;
    min-width: 0;
    width: 0;
    max-width: none;
    overflow: visible;
  }

  .feature-menu-copy strong,
  .feature-menu-copy > span {
    width: 100%;
    max-width: none;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
  }

  .feature-menu-copy strong {
    font-size: 17px;
    line-height: 1.28;
  }

  .feature-menu-copy > span {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.48;
  }
}

@media (min-width: 810px) and (max-width: 1100px) {
  .navbar-inner {
    justify-content: flex-start;
  }

  .navbar-menu {
    margin-left: 12px;
  }

  .navbar-dropdown {
    left: var(--container-padding);
    right: var(--container-padding);
    width: auto;
    box-sizing: border-box;
    padding: 24px;
    overflow: visible;
  }

  .feature-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(86px, auto);
    column-gap: 24px;
    row-gap: 20px;
  }

  .feature-menu-item {
    display: flex;
    min-width: 0;
    gap: 12px;
    overflow: visible;
  }

  .feature-menu-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .feature-menu-copy {
    flex: 1 1 auto;
    min-width: 0;
    width: 0;
    overflow: visible;
  }

  .feature-menu-copy strong { font-size: 15px; }
  .feature-menu-copy > span { font-size: 12px; }
}

/* Keep the desktop mega menu completely out of the mobile layout. */
@media (max-width: 809px) {
  .navbar-dropdown {
    display: none !important;
  }
}

/* Click-open state mirrors hover/focus state. */
.navbar-dropdown-wrap.is-open .navbar-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navbar-dropdown-wrap.is-open .chevron {
  transform: rotate(180deg);
}