/* ============================================================
   header.css — CRM Xperts Premium Nav v3
   Logo → Nav links → Let's Talk CTA
   Dropdowns: Services (wide 3-col), Platforms (2 panels),
   Insights (2-col grid), Contact & About inline in nav.
   Full mobile slide-down panel.
   ============================================================ */

/* ── Nav shell ── */
.mega-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: all .4s cubic-bezier(0.4,0,0.2,1);
}
.mega-nav.scrolled {
  background: rgba(255,255,255,0.99);
  border-bottom-color: #E8EDF3;
  box-shadow: 0 1px 28px rgba(27,42,74,0.08);
}

.mn-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ── Logo ── */
.mn-logo-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.mn-logomark {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg,#2EC4B6,#4DA3E8);
  display: flex; align-items: center; justify-content: center;
  font-family: 'League Spartan',sans-serif;
  font-size: 13px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.mn-logotxt { display: flex; flex-direction: column; line-height: 1.1; }
.mn-logotxt strong {
  font-family: 'League Spartan',sans-serif;
  font-size: 15px; font-weight: 700;
  color: #1B2A4A; letter-spacing: -0.02em;
}
.mn-logotxt span {
  font-size: 9.5px; font-weight: 600;
  color: #7A8BA3; text-transform: uppercase; letter-spacing: 0.09em;
}
/* Fallback if using <img> logo */
.mn-logo { height: 36px; width: auto; }

/* ── Center nav links ── */
.mn-links { display: flex; align-items: center; gap: 1px; list-style: none; }
.mn-links > li { position: relative; }
.mn-links > li > a,
.mn-links > li > button {
  font-family: 'Mulish',sans-serif;
  font-size: 13.5px; font-weight: 500;
  color: #5A6B82;
  padding: 8px 13px;
  border-radius: 8px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  text-decoration: none;
  transition: color .2s, background .2s;
  white-space: nowrap; line-height: 1;
}
.mn-links > li > a:hover,
.mn-links > li > button:hover {
  color: #1B2A4A; background: #F4F7FA;
}
.mn-links > li.open > button {
  color: #1A9E92; background: rgba(46,196,182,0.07);
}
.mn-chev {
  width: 11px; height: 11px;
  flex-shrink: 0; color: #A8B5C8;
  transition: transform .28s cubic-bezier(0.4,0,0.2,1);
}
.mn-links > li.open .mn-chev { transform: rotate(180deg); color: #2EC4B6; }

/* ── Right CTA only ── */
.mn-right { display: flex; align-items: center; flex-shrink: 0; }
.mn-cta {
  font-family: 'Mulish',sans-serif;
  font-size: 13.5px; font-weight: 700;
  color: #fff;
  padding: 10px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg,#2EC4B6 0%,#4DA3E8 100%);
  border: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(46,196,182,0.32);
  transition: all .25s;
  text-decoration: none;
  position: relative; overflow: hidden;
}
.mn-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,#1A9E92,#3B8FD4);
  opacity: 0; transition: opacity .3s; border-radius: inherit;
}
.mn-cta:hover { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(46,196,182,0.44); }
.mn-cta:hover::before { opacity: 1; }
.mn-cta > * { position: relative; z-index: 1; }
.mn-cta-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  animation: ctapulse 2s infinite; flex-shrink: 0;
}
@keyframes ctapulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(1.5); }
}

/* ── Dropdown base ── */
.mega-drop,
.simple-drop,
.insights-drop {
  position: absolute;
  top: calc(100% + 10px); left: 0;
  background: #fff;
  border: 1px solid #E8EDF3;
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(27,42,74,0.13), 0 2px 8px rgba(27,42,74,0.05);
  opacity: 0; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .22s, transform .22s;
  z-index: 300;
}
.mn-links > li.open .mega-drop,
.mn-links > li.open .simple-drop,
.mn-links > li.open .insights-drop {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* ── Services mega drop — wide 3 col ── */
.mega-drop { min-width: 760px; padding: 20px; }

.mega-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 20px; margin-bottom: 16px; }

.mega-col-head {
  font-size: 10px; font-weight: 700;
  color: #A8B5C8; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0 0 8px;
  border-bottom: 1px solid #E8EDF3;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.mega-col-head::after { content: ''; flex: 1; height: 1px; background: #E8EDF3; }

.mega-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: #3A4A5C; font-size: 13.5px;
  text-decoration: none; transition: all .18s;
  cursor: pointer; width: 100%;
}
.mega-link:hover { background: #F0FAF9; color: #1B2A4A; }
.mega-link:hover .mega-link-ic {
  background: linear-gradient(135deg,#2EC4B6,#4DA3E8); color: #fff;
}
.mega-link-ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(46,196,182,0.07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .18s; color: #2EC4B6;
}
.mega-link-ic svg { width: 15px; height: 15px; }
.mega-link h4 {
  font-family: 'League Spartan',sans-serif;
  font-size: 13px; font-weight: 700; color: #1B2A4A;
  margin-bottom: 1px; text-transform: none;
}
.mega-link p { font-size: 11.5px; color: #7A8BA3; line-height: 1.3; }

.mega-foot {
  padding-top: 14px; border-top: 1px solid #F0F4F8;
  display: flex; justify-content: space-between; align-items: center;
}
.mega-foot a {
  font-size: 12.5px; font-weight: 700; color: #1A9E92;
  text-decoration: none; display: flex; align-items: center; gap: 4px;
  transition: gap .2s;
}
.mega-foot a:hover { gap: 8px; }
.mf-tag {
  font-size: 11px; color: #A8B5C8;
  background: #F4F7FA; padding: 3px 12px; border-radius: 20px;
}

/* ── Platforms drop — 2 panels ── */
.simple-drop { min-width: 500px; padding: 10px; }
.plat-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plat-panel { border-radius: 12px; border: 1px solid #E8EDF3; overflow: hidden; }

.plat-panel-head {
  padding: 14px 16px 12px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #F0F4F8;
  background: #FAFBFD;
  text-decoration: none;
  transition: background .2s;
}
.plat-panel-head:hover { background: #F0FAF9; }
.plat-panel-head-arrow { margin-left: auto; color: #A8B5C8; font-size: 14px; transition: transform .2s; }
.plat-panel-head:hover .plat-panel-head-arrow { transform: translateX(3px); color: #2EC4B6; }

.plat-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.plat-icon.sf { background: #E6F4FB; }
.plat-icon.zh { background: #FEF0F0; }
.plat-panel-head h4 {
  font-family: 'League Spartan',sans-serif;
  font-size: 14px; font-weight: 700; color: #1B2A4A;
  margin-bottom: 2px; text-transform: none;
}
.plat-panel-head p { font-size: 11.5px; color: #7A8BA3; }

.plat-items { padding: 8px 8px 10px; }
.plat-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  color: #5A6B82; font-size: 13px;
  text-decoration: none; transition: all .18s;
  font-family: 'Mulish',sans-serif;
}
.plat-link:hover { background: #F4F7FA; color: #1B2A4A; }
.pl-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #D1D9E4; flex-shrink: 0; transition: background .18s;
}
.plat-link:hover .pl-dot { background: #2EC4B6; }
.plat-sep { height: 1px; background: #F0F4F8; margin: 5px 10px; }
.pl-badge {
  font-size: 10px; font-weight: 600; color: #1A9E92;
  background: rgba(46,196,182,0.08); padding: 1px 8px;
  border-radius: 20px; margin-left: auto;
}

/* ── Insights drop — 2-col grid ── */
.insights-drop { min-width: 420px; padding: 12px; }
.insights-head {
  font-size: 10px; font-weight: 700;
  color: #A8B5C8; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 10px 10px; margin-bottom: 4px;
}
.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.insights-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: #3A4A5C; font-size: 13.5px;
  text-decoration: none; transition: all .18s;
}
.insights-link:hover { background: #F0FAF9; color: #1B2A4A; }
.insights-link:hover .insights-ic { background: linear-gradient(135deg,#2EC4B6,#4DA3E8); color: #fff; }
.insights-ic {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(46,196,182,0.07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .18s; color: #2EC4B6;
}
.insights-ic svg { width: 15px; height: 15px; }
.insights-link h4 {
  font-family: 'League Spartan',sans-serif;
  font-size: 13px; font-weight: 700; color: #1B2A4A;
  margin-bottom: 1px; text-transform: none;
  display: flex; align-items: center; gap: 6px;
}
.insights-link p { font-size: 11.5px; color: #7A8BA3; }
.ins-badge {
  font-size: 9px; font-weight: 700; color: #fff;
  background: #2EC4B6; padding: 1px 6px; border-radius: 20px;
}

/* ── Mobile toggle ── */
.mn-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px;
  cursor: pointer; border-radius: 8px; transition: background .2s;
}
.mn-toggle:hover { background: #F4F7FA; }
.mn-toggle span {
  width: 22px; height: 2px; background: #1B2A4A;
  border-radius: 2px; display: block;
  transition: all .3s cubic-bezier(0.4,0,0.2,1);
}
.mn-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mn-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mn-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile panel ── */
.mn-mobile {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 999;
  overflow-y: auto;
  padding: 16px 20px 48px;
  border-top: 1px solid #E8EDF3;
  animation: slideDown .28s cubic-bezier(0.4,0,0.2,1);
}
.mn-mobile.open { display: block; }
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.mm-section { margin-bottom: 22px; }
.mm-label {
  font-size: 10px; font-weight: 700;
  color: #A8B5C8; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0 0 8px; border-bottom: 1px solid #F0F4F8; margin-bottom: 8px;
}
.mn-mobile a:not(.mm-cta):not(.mm-cta-ghost) {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; color: #1B2A4A;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #F8FAFC;
  transition: color .2s;
  font-family: 'Mulish',sans-serif;
}
.mn-mobile a:not(.mm-cta):not(.mm-cta-ghost):hover { color: #1A9E92; }
.mn-mobile a svg { width: 15px; height: 15px; color: #2EC4B6; flex-shrink: 0; }

/* Mobile platform grid */
.mm-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mm-plat-box { border: 1px solid #E8EDF3; border-radius: 10px; padding: 12px; }
.mm-plat-name {
  font-size: 12px; font-weight: 700; color: #1B2A4A;
  margin-bottom: 8px;
  font-family: 'League Spartan',sans-serif;
}
.mm-plat-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #7A8BA3;
  padding: 4px 0; text-decoration: none;
  transition: color .2s; font-family: 'Mulish',sans-serif;
}
.mm-plat-item:hover { color: #1A9E92; }
.mm-plat-item::before {
  content: ''; width: 4px; height: 4px;
  border-radius: 50%; background: #D1D9E4; flex-shrink: 0;
}

/* Mobile CTAs */
.mm-cta-wrap {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px; padding-top: 20px;
  border-top: 1px solid #F0F4F8;
}
.mm-cta {
  display: flex !important; justify-content: center; align-items: center; gap: 8px;
  padding: 15px !important; border: none !important;
  background: linear-gradient(135deg,#2EC4B6,#4DA3E8) !important;
  color: #fff !important;
  border-radius: 50px; font-size: 15px; font-weight: 700;
  box-shadow: 0 4px 18px rgba(46,196,182,0.3);
  text-decoration: none;
}
.mm-cta-ghost {
  display: flex !important; justify-content: center; align-items: center;
  padding: 13px !important;
  border: 1.5px solid #E8EDF3 !important;
  color: #1B2A4A !important;
  border-radius: 50px; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: all .2s;
  background: #fff !important;
}
.mm-cta-ghost:hover { border-color: #2EC4B6 !important; color: #1A9E92 !important; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .mega-drop { min-width: 640px; }
  .simple-drop { min-width: 420px; }
  .insights-drop { min-width: 360px; }
  .mn-links > li > a, .mn-links > li > button { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 900px) {
  .mn-links { display: none; }
  .mn-right  { display: none; }
  .mn-toggle { display: flex; }
  .mn-wrap   { padding: 0 16px; height: 60px; }
  .mn-mobile { top: 60px; }
  .mn-logomark { width: 30px; height: 30px; font-size: 11px; }
  .mn-logotxt strong { font-size: 13px; }
  .mn-logotxt span   { display: none; }
  /* show CTA on mobile bar */
  .mn-mobile-cta-bar { display: flex !important; }
}
@media (max-width: 480px) {
  .mm-plat-grid { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
}