/* ================================================================
   GLOBAL MLM SOFTWARE — UNIVERSAL NAVIGATION
   nav.css  |  v4.0
   Single nav markup — CSS controls desktop vs mobile display.
   SEO: ONE <nav> block, no duplicate links in the HTML.
   Namespace: .gnav-* (Global Nav)
   ================================================================ */

/* ----------------------------------------------------------------
   CSS VARIABLES
   ---------------------------------------------------------------- */
:root {
  --gnav-h:            70px;          /* header height */
  --gnav-bg:           #0c0f1a;       /* header background */
  --gnav-border:       rgba(255,255,255,0.07);
  --gnav-text:         rgba(255,255,255,0.82);
  --gnav-text-hover:   #ffffff;
  --gnav-accent:       #4f46e5;
  --gnav-accent2:      #7c3aed;
  --gnav-cyan:         #06b6d4;
  --gnav-gold:         #f59e0b;
  --gnav-gold-dark:    #d97706;
  --gnav-radius:       12px;
  --gnav-radius-sm:    8px;
  --gnav-shadow:       0 20px 60px rgba(0,0,0,0.45);
  --gnav-ease:         cubic-bezier(0.4,0,0.2,1);
  --gnav-grad:         linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#06b6d4 100%);
  --gnav-mega-bg:      #0f1422;
  --gnav-drop-bg:      #0f1422;
  --gnav-item-hover:   rgba(79,70,229,0.12);
  --gnav-divider:      rgba(255,255,255,0.07);
  --gnav-mob-bg:       #080b14;
  --gnav-mob-item:     rgba(255,255,255,0.04);
  --gnav-mob-border:   rgba(255,255,255,0.06);
  --gnav-z:            1000;
}

/* ================================================================
   ANNOUNCEMENT BAR
   ================================================================ */
.gnav-ann {
  background: linear-gradient(135deg,#2d1b69 0%,#4f46e5 50%,#06b6d4 100%);
  color: #fff;
  font-size: 0.875rem;
  padding: 0.55rem 2.5rem 0.55rem 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  z-index: calc(var(--gnav-z) + 2);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 500;
  overflow: hidden;
  transition: max-height 0.35s var(--gnav-ease), opacity 0.35s var(--gnav-ease);
}
.gnav-ann::before {
  content:'';
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 8px,
    rgba(255,255,255,0.03) 8px, rgba(255,255,255,0.03) 16px
  );
  pointer-events:none;
}
.gnav-ann a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}
.gnav-ann a:hover { opacity: 0.8; }
.gnav-ann-close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 0.7rem;
  transition: background 0.2s;
  flex-shrink: 0;
}
.gnav-ann-close:hover { background: rgba(255,255,255,0.28); }

/* ================================================================
   HEADER SHELL
   ================================================================ */
.gnav-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gnav-h);
  background: var(--gnav-bg);
  border-bottom: 1px solid var(--gnav-border);
  z-index: var(--gnav-z);
  transition: box-shadow 0.3s var(--gnav-ease), background 0.3s var(--gnav-ease);
}
.gnav-header.scrolled {
  background: rgba(8,11,20,0.97);
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ================================================================
   NAV INNER ROW
   ================================================================ */
.gnav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ================================================================
   LOGO
   ================================================================ */
.gnav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 0.75rem;
}
.gnav-logo-icon {
  width: 38px;
  height: 38px;
  background: var(--gnav-grad);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #fff;
  box-shadow: 0 0 18px rgba(79,70,229,0.45);
  flex-shrink: 0;
}
.gnav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.gnav-logo-main {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 0.98rem;
  font-weight: 700;
  background: var(--gnav-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gnav-logo-sub {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ================================================================
   DESKTOP NAV LIST
   ================================================================ */
.gnav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.1rem;
  flex: 1;
}

/* Top-level item */
.gnav-item {
  position: relative;
}

/* Top-level link / button */
.gnav-link,
.gnav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.845rem;
  font-weight: 500;
  color: var(--gnav-text);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--gnav-radius-sm);
  transition: color 0.2s var(--gnav-ease), background 0.2s var(--gnav-ease);
  white-space: nowrap;
  line-height: 1;
}
.gnav-link:hover,
.gnav-trigger:hover,
.gnav-item.open > .gnav-trigger,
.gnav-item.open > .gnav-link {
  color: var(--gnav-text-hover);
  background: var(--gnav-item-hover);
}

/* Item icon */
.gnav-item-icon {
  font-size: 0.72rem;
  opacity: 0.75;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* Chevron */
.gnav-chevron {
  font-size: 0.62rem;
  margin-left: 0.15rem;
  transition: transform 0.25s var(--gnav-ease);
  opacity: 0.6;
}
.gnav-item.open > .gnav-trigger .gnav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Active indicator */
.gnav-link[aria-current="page"],
.gnav-link.active {
  color: #fff;
  background: rgba(79,70,229,0.18);
}
.gnav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--gnav-grad);
  border-radius: 2px;
}

/* ================================================================
   DROPDOWN (simple list)
   ================================================================ */
.gnav-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 340px;
  background: var(--gnav-drop-bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--gnav-radius);
  padding: 0.5rem;
  box-shadow: var(--gnav-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.22s var(--gnav-ease),
    transform 0.22s var(--gnav-ease),
    visibility 0.22s;
  list-style: none;
  z-index: calc(var(--gnav-z) + 1);
}
.gnav-item.open > .gnav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown items */
.gnav-drop li a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.855rem;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-radius: var(--gnav-radius-sm);
  transition: background 0.18s, color 0.18s;
}
.gnav-drop li a:hover {
  background: var(--gnav-item-hover);
  color: #fff;
}
.gnav-drop li a i {
  width: 22px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--gnav-accent);
  flex-shrink: 0;
  opacity: 0.85;
}
.gnav-drop li a:hover i { opacity: 1; }

/* Drop divider */
.gnav-drop-divider {
  height: 1px;
  background: var(--gnav-divider);
  margin: 0.35rem 0.5rem;
}

/* ================================================================
   MEGA MENU
   ================================================================ */
.gnav-mega-wrap {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 1020px;
  max-width: 1260px;
  background: var(--gnav-mega-bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--gnav-radius);
  padding: 1.5rem;
  box-shadow: var(--gnav-shadow);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s var(--gnav-ease),
    transform 0.22s var(--gnav-ease),
    visibility 0.22s;
  z-index: calc(var(--gnav-z) + 1);
  display: grid;
  gap: 0;
}
.gnav-item.open > .gnav-mega-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Mega grid layouts */
.gnav-mega-wrap.cols-2 { grid-template-columns: repeat(2,1fr); }
.gnav-mega-wrap.cols-3 { grid-template-columns: repeat(3,1fr); }
.gnav-mega-wrap.cols-4 { grid-template-columns: repeat(4,1fr); }

/* Mega column */
.gnav-mega-col {
  padding: 0 1.25rem;
  border-right: 1px solid var(--gnav-divider);
}
.gnav-mega-col:first-child { padding-left: 0; }
.gnav-mega-col:last-child  { border-right: none; padding-right: 0; }

/* Mega heading */
.gnav-mega-heading {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gnav-accent);
  padding: 0 0.5rem 0.65rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--gnav-divider);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gnav-mega-heading i { opacity: 0.9; font-size: 0.78rem; }

/* Mega link */
.gnav-mega-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.845rem;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-radius: var(--gnav-radius-sm);
  transition: background 0.18s, color 0.18s, padding-left 0.18s;
}
.gnav-mega-link:hover {
  background: var(--gnav-item-hover);
  color: #fff;
  padding-left: 0.85rem;
}
.gnav-mega-link i {
  width: 22px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--gnav-accent);
  flex-shrink: 0;
  transition: color 0.18s;
}
.gnav-mega-link:hover i { color: #a78bfa; }

/* Mega bottom promo bar */
.gnav-mega-footer {
  grid-column: 1 / -1;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gnav-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.gnav-mega-promo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.gnav-mega-promo i { color: var(--gnav-gold); }
.gnav-mega-promo strong { color: rgba(255,255,255,0.85); }

/* ================================================================
   HEADER RIGHT ACTIONS
   ================================================================ */
.gnav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex-shrink: 0;
}

.gnav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: var(--gnav-radius-sm);
  transition: color 0.2s, background 0.2s;
}
.gnav-phone:hover { color: #fff; background: rgba(255,255,255,0.06); }
.gnav-phone i { font-size: 0.78rem; color: var(--gnav-cyan); }

/* Pricing button — sits beside Free Demo in nav actions */
.gnav-btn-pricing {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,255,255,0.25);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.gnav-btn-pricing:hover {
  color: #fff;
  border-color: rgba(99,102,241,0.7);
  background: rgba(99,102,241,0.15);
  transform: translateY(-1px);
}
.gnav-btn-pricing i { font-size: 0.78rem; color: var(--gnav-cyan, #06b6d4); }

.gnav-btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gnav-grad);
  color: #fff;
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(79,70,229,0.4);
  transition: box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  animation: demoPulse 2.5s ease-in-out infinite;
}
.gnav-btn-demo:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(79,70,229,0.6);
  animation: none;
}
@keyframes demoPulse {
  0%,100% { box-shadow: 0 0 20px rgba(79,70,229,0.4); }
  50%      { box-shadow: 0 0 32px rgba(124,58,237,0.6); }
}

/* ================================================================
   HAMBURGER BUTTON (mobile only — hidden on desktop)
   ================================================================ */
.gnav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--gnav-radius-sm);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s;
}
.gnav-hamburger:hover { background: rgba(255,255,255,0.12); }
.gnav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.3s var(--gnav-ease), opacity 0.3s, width 0.3s;
}
.gnav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gnav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.gnav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   MOBILE DRAWER
   (hidden on desktop via display:none on the panel)
   ================================================================ */
.gnav-mobile {
  display: none;
  position: fixed;
  top: var(--gnav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gnav-mob-bg);
  overflow-y: auto;
  z-index: calc(var(--gnav-z) - 1);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1rem 0 2rem;
  transform: translateX(-100%);
  transition: transform 0.35s var(--gnav-ease);
  scrollbar-width: thin;
  scrollbar-color: rgba(79,70,229,0.4) transparent;
}
.gnav-mobile.open {
  transform: translateX(0);
}

/* Mobile list */
.gnav-mob-list {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem;
}

/* Mobile top-level item */
.gnav-mob-item {
  border-bottom: 1px solid var(--gnav-mob-border);
}
.gnav-mob-item:last-child { border-bottom: none; }

/* Mobile link row */
.gnav-mob-link,
.gnav-mob-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  padding: 0.9rem 0.6rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--gnav-radius-sm);
  transition: background 0.18s, color 0.18s;
  text-align: left;
}
.gnav-mob-link:hover,
.gnav-mob-trigger:hover {
  background: var(--gnav-mob-item);
  color: #fff;
}
.gnav-mob-link i.mob-icon,
.gnav-mob-trigger i.mob-icon {
  width: 28px;
  height: 28px;
  background: rgba(79,70,229,0.18);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #818cf8;
  flex-shrink: 0;
}
.gnav-mob-trigger .mob-chevron {
  margin-left: auto;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  transition: transform 0.25s var(--gnav-ease);
  flex-shrink: 0;
}
.gnav-mob-trigger.open .mob-chevron { transform: rotate(180deg); }
.gnav-mob-trigger .mob-label { flex: 1; }

/* Mobile accordion panel */
.gnav-mob-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s var(--gnav-ease);
  background: rgba(255,255,255,0.025);
  border-radius: 0 0 var(--gnav-radius-sm) var(--gnav-radius-sm);
  margin: 0 0.25rem 0.25rem;
}

/* Mobile sub-links */
.gnav-mob-panel a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.845rem;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  border-radius: var(--gnav-radius-sm);
  transition: background 0.18s, color 0.18s;
}
.gnav-mob-panel a:hover {
  background: rgba(79,70,229,0.14);
  color: #fff;
}
.gnav-mob-panel a i {
  width: 20px;
  text-align: center;
  font-size: 0.78rem;
  color: #818cf8;
  flex-shrink: 0;
}

/* Mobile group label */
.gnav-mob-group {
  padding: 0.6rem 0.75rem 0.25rem 1rem;
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Mobile CTA strip */
.gnav-mob-cta {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0;
  flex-wrap: wrap;
}
.gnav-mob-cta a {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 9999px;
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.gnav-mob-cta a:hover { opacity: 0.88; transform: translateY(-1px); }
.gnav-mob-cta .mob-demo {
  background: var(--gnav-grad);
  color: #fff;
  box-shadow: 0 0 20px rgba(79,70,229,0.4);
}
.gnav-mob-cta .mob-call {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
}
.gnav-mob-cta .mob-pricing {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(99,102,241,0.35);
}
.gnav-mob-cta .mob-pricing i { color: var(--gnav-cyan, #06b6d4); }

/* Mobile contact row */
.gnav-mob-contact {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 0;
  flex-wrap: wrap;
}
.gnav-mob-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.gnav-mob-contact a:hover { color: rgba(255,255,255,0.85); }
.gnav-mob-contact a i { font-size: 0.72rem; color: var(--gnav-cyan); }

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── Large desktop (1280+): all nav items visible ── */
@media (min-width: 1280px) {
  .gnav-inner { gap: 0.5rem; }
  .gnav-link, .gnav-trigger { padding: 0.5rem 0.85rem; font-size: 0.875rem; }
  .gnav-btn-demo { font-size: 0.875rem; padding: 0.55rem 1.4rem; }
  .gnav-btn-pricing { font-size: 0.875rem; padding: 0.55rem 1.25rem; }
}

/* ── Medium desktop (1024–1279): slightly tighter ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .gnav-link, .gnav-trigger { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
  .gnav-phone { display: none; }
  .gnav-btn-pricing { font-size: 0.78rem; padding: 0.45rem 0.9rem; }
  .gnav-mega-wrap { min-width: 720px; }
}

/* ── Tablet / mobile (<= 1023px): hide desktop, show hamburger ── */
@media (max-width: 1023px) {
  .gnav-list    { display: none !important; }
  .gnav-phone   { display: none !important; }
  .gnav-hamburger { display: flex !important; }
  .gnav-mobile  { display: block; }

  /* Mega menu: reset positioning for mobile (never needed but safe) */
  .gnav-mega-wrap { display: none !important; }

  /* Adjust btn-demo and hide pricing on mobile (pricing is in mobile drawer footer) */
  .gnav-btn-demo {
    font-size: 0.78rem;
    padding: 0.45rem 1rem;
  }
  .gnav-btn-pricing { display: none !important; }
}

/* ── Very small screens ── */
@media (max-width: 380px) {
  .gnav-logo-sub { display: none; }
  .gnav-btn-demo span { display: none; }
  .gnav-btn-demo { padding: 0.45rem 0.75rem; }
}

/* ================================================================
   ICON COLOR HELPERS (used inside mega menu headings)
   ================================================================ */
.ic-indigo  { color: #818cf8; }
.ic-violet  { color: #c084fc; }
.ic-cyan    { color: #22d3ee; }
.ic-gold    { color: #fbbf24; }
.ic-green   { color: #34d399; }
.ic-pink    { color: #f472b6; }
.ic-teal    { color: #2dd4bf; }
.ic-orange  { color: #fb923c; }
.ic-red     { color: #f87171; }
.ic-blue    { color: #60a5fa; }

/* ================================================================
   UTILITY: body padding to account for sticky header
   (include this in the page if not already handled)
   ================================================================ */
body.has-gnav-header {
  padding-top: 0; /* sticky header is already in flow */
}
/* When ann-bar is visible, no extra padding needed since both are sticky */