/* =========================================================
           ENTERPRISE NAVIGATION STYLES
        ========================================================== */
:root {
      --nav-height: 88px;
      --nav-height-compact: 72px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: Inter, sans-serif;
      background: #0c1324;
      color: #dce1fb;
    }

    body.menu-locked { overflow: hidden; }

    .material-symbols-outlined {
      font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    }

    .nav-shell {
      min-height: var(--nav-height);
      transition: min-height .28s ease, background-color .28s ease, box-shadow .28s ease;
    }

    .nav-shell.is-scrolled {
      min-height: var(--nav-height-compact);
      background: rgba(2, 6, 23, .94);
      box-shadow: 0 16px 55px rgba(0, 0, 0, .34);
    }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 42px;
      color: #bec8d2;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .005em;
      transition: color .2s ease;
      white-space: nowrap;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 2px;
      width: 0;
      height: 2px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, #0ea5e9, #22d3ee);
      box-shadow: 0 0 16px rgba(34, 211, 238, .7);
      transition: width .22s ease;
    }

    .nav-item:hover .nav-link,
    .nav-item.is-open .nav-link,
    .nav-link:focus-visible {
      color: #fff;
    }

    .nav-item:hover .nav-link::after,
    .nav-item.is-open .nav-link::after,
    .nav-link:focus-visible::after {
      width: 68%;
    }

    .nav-link .chevron {
      font-size: 17px;
      transition: transform .2s ease, color .2s ease;
    }

    .nav-item.is-open .nav-link .chevron {
      transform: rotate(180deg);
      color: #22d3ee;
    }

    .mega-layer {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--nav-height);
      z-index: 45;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility .2s ease;
    }

    .nav-shell.is-scrolled + .mega-layer,
    .nav-shell.is-scrolled ~ .mega-layer {
      top: var(--nav-height-compact);
    }

    .mega-layer.is-open {
      pointer-events: auto;
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .mega-backdrop {
      position: fixed;
      inset: var(--nav-height) 0 0;
      z-index: 35;
      background: rgba(0, 0, 0, .44);
      backdrop-filter: blur(4px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .2s ease, visibility .2s ease;
    }

    .mega-backdrop.is-open {
      opacity: 1;
      visibility: visible;
    }

    .mega-panel {
      display: none;
      width: min(1440px, calc(100% - 48px));
      margin: 0 auto;
      max-height: calc(100vh - 92px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(34,211,238,.28) transparent;
      border: 1px solid rgba(34, 211, 238, .16);
      border-top-color: rgba(34, 211, 238, .32);
      border-radius: 0 0 22px 22px;
      background:
        radial-gradient(circle at 15% 0%, rgba(14,165,233,.11), transparent 32%),
        radial-gradient(circle at 85% 100%, rgba(34,211,238,.07), transparent 28%),
        rgba(7, 13, 31, .985);
      box-shadow: 0 30px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(34,211,238,.04);
    }

    .mega-panel.is-active { display: block; }

    .mega-panel::-webkit-scrollbar { width: 8px; }
    .mega-panel::-webkit-scrollbar-track { background: transparent; }
    .mega-panel::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: rgba(34,211,238,.24);
      background-clip: padding-box;
    }

    .menu-column-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 15px;
      color: #89ceff;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .menu-column-title::before {
      content: "";
      width: 18px;
      height: 1px;
      background: #0ea5e9;
      box-shadow: 0 0 10px rgba(14,165,233,.9);
    }

    .mega-link {
      position: relative;
      display: flex;
      gap: 13px;
      min-height: 58px;
      padding: 10px 11px;
      border: 1px solid transparent;
      border-radius: 10px;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .mega-link:hover,
    .mega-link:focus-visible {
      outline: none;
      border-color: rgba(34,211,238,.13);
      background: rgba(255,255,255,.035);
      transform: translateX(3px);
    }

    .mega-link-icon {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(34,211,238,.14);
      border-radius: 9px;
      background: rgba(14,165,233,.08);
      color: #22d3ee;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .mega-link:hover .mega-link-icon {
      background: rgba(14,165,233,.15);
      border-color: rgba(34,211,238,.36);
      box-shadow: 0 0 22px rgba(14,165,233,.15);
    }

    .mega-link-title {
      display: block;
      color: #eef7ff;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
    }

    .mega-link-copy {
      display: block;
      margin-top: 3px;
      color: #88929b;
      font-size: 11px;
      line-height: 1.45;
    }

    .mega-feature {
      position: relative;
      overflow: hidden;
      height: 100%;
      min-height: 310px;
      border: 1px solid rgba(34,211,238,.17);
      border-radius: 16px;
      background:
        linear-gradient(155deg, rgba(14,165,233,.13), rgba(2,6,23,.55) 55%),
        rgba(21, 27, 45, .62);
    }

    .mega-feature::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(34,211,238,.13) 1px, transparent 1px);
      background-size: 22px 22px;
      mask-image: linear-gradient(to bottom, #000, transparent 78%);
      opacity: .52;
      pointer-events: none;
    }

    .feature-node {
      position: relative;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px;
      border: 1px solid rgba(34,211,238,.15);
      border-radius: 12px;
      background: rgba(2,6,23,.68);
      backdrop-filter: blur(10px);
    }

    .feature-line {
      width: 1px;
      height: 22px;
      margin: 0 auto;
      background: linear-gradient(to bottom, #0ea5e9, #22d3ee);
      box-shadow: 0 0 12px rgba(34,211,238,.55);
    }

    .mini-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 9px;
      border: 1px solid rgba(34,211,238,.16);
      border-radius: 999px;
      background: rgba(14,165,233,.07);
      color: #89ceff;
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
    }


    .primary-nav-button,
    .secondary-nav-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 42px;
      padding: 0 17px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .secondary-nav-button {
      border: 1px solid rgba(34,211,238,.23);
      background: rgba(255,255,255,.025);
      color: #89ceff;
    }

    .secondary-nav-button:hover {
      transform: translateY(-1px);
      border-color: rgba(34,211,238,.5);
      background: rgba(14,165,233,.08);
    }

    .primary-nav-button {
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #fff;
      box-shadow: 0 0 28px rgba(14,165,233,.20);
    }

    .primary-nav-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 34px rgba(14,165,233,.37);
    }

    .mobile-drawer {
      position: fixed;
      inset: 0 0 0 auto;
      z-index: 80;
      width: min(92vw, 430px);
      transform: translateX(104%);
      background:
        radial-gradient(circle at 100% 0%, rgba(14,165,233,.14), transparent 32%),
        #070d1f;
      border-left: 1px solid rgba(34,211,238,.16);
      box-shadow: -30px 0 80px rgba(0,0,0,.55);
      transition: transform .32s cubic-bezier(.2,.8,.2,1);
    }

    .mobile-drawer.is-open { transform: translateX(0); }

    .mobile-overlay {
      position: fixed;
      inset: 0;
      z-index: 75;
      background: rgba(0,0,0,.68);
      backdrop-filter: blur(5px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, visibility .25s ease;
    }

    .mobile-overlay.is-open {
      opacity: 1;
      visibility: visible;
    }

    .mobile-accordion-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .25s ease;
    }

    .mobile-accordion-content > div { overflow: hidden; }
    .mobile-accordion.is-open .mobile-accordion-content { grid-template-rows: 1fr; }
    .mobile-accordion.is-open .mobile-chevron { transform: rotate(180deg); color: #22d3ee; }

    .mobile-chevron { transition: transform .2s ease, color .2s ease; }

    .mobile-nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 15px 0;
      color: #edf7ff;
      font-size: 14px;
      font-weight: 600;
      text-align: left;
    }

    .mobile-sub-link {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 0 10px 10px;
      color: #aeb9c5;
      font-size: 12px;
      line-height: 1.4;
    }

    .mobile-sub-link::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: #0ea5e9;
      box-shadow: 0 0 9px rgba(14,165,233,.9);
    }

    .mobile-group-label {
      margin: 12px 0 4px;
      color: #89ceff;
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .logo-glow {
      filter: drop-shadow(0 0 14px rgba(14,165,233,.12));
    }

    .demo-grid {
      background-image: radial-gradient(rgba(34,211,238,.08) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    @media (max-width: 1279px) {
      .desktop-nav { display: none !important; }
      .desktop-actions { display: none !important; }
      .mobile-trigger { display: inline-flex !important; }
      .mega-layer, .mega-backdrop { display: none !important; }
    }

    @media (min-width: 1280px) {
      .mobile-trigger, .mobile-drawer, .mobile-overlay { display: none !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }
.shared-navbar-error{position:relative;z-index:100;padding:16px;background:#7f1d1d;color:#fff;text-align:center;font:600 13px Inter,sans-serif}