.site-header{
  width:100%;
  background:#fff;
  border-bottom:1px solid #eef1f6;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* keep your exact wrap */
.header-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo img{ height:40px; display:block; }

.site-header a{
  text-decoration:none;
  color:inherit;
}

/* NAV same center look */
.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
}

.main-nav > a,
.main-nav > .nav-dd{ display:flex; align-items:center; }

.main-nav a,
.main-nav .nav-link{
  color:#6b7280;
  font-size:16px;
  font-weight:500;
  transition: color .2s ease;
}

.main-nav a:hover,
.main-nav .nav-link:hover{ color:#1f2a5a; }

.main-nav a.active,
.main-nav .nav-link.active{
  color:#1f2a5a;
  font-weight:600;
}

.header-cta .btn-contact{
  background:#1f2a5a;
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  transition: background .2s ease;
  white-space:nowrap;
}
.header-cta .btn-contact:hover{ background:#16204a; }

/* dropdown icon */
.dd-icon{
  font-size:12px;
  margin-left:6px;
  transform: translateY(1px);
  opacity:.9;
}

/* Backdrop */
.mega-backdrop{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.22);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 9000;
}
.site-header.mega-open .mega-backdrop{
  opacity:1;
  pointer-events:auto;
}

/* Mega menu FULL WIDTH just under header */
.nav-dd{ position: relative; }

.mega-menu{
  position: fixed;
  left: 0;
  right: 0;
  top: 73px; /* header height approx */
  background:#fff;
  border-top:1px solid #eef2f6;
  box-shadow: 0 24px 80px rgba(15,23,42,.18);
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 9500;
}

.mega-inner{
  max-width:1280px;
  margin:0 auto;
  padding:22px 24px 26px;
}

.mega-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:600;
  color:#0f172a;
  margin-bottom:18px;
}
.mega-arrow{ font-size:24px; line-height:1; }

.mega-grid{
  display:grid;
  gap:18px 22px;
}
.mega-grid-4{
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.mega-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:14px;
  border:1px solid #eef2f6;
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background:#fff;
}

.mega-card:hover{
  transform: translateY(-2px);
  border-color:#dbe6ff;
  box-shadow:0 18px 44px rgba(15,23,42,.08);
}

.mega-ico{
  width:34px;
  height:34px;
  flex:0 0 34px;
  object-fit:contain;
}

.mega-card span{ color:#0f172a; font-size:16px; font-weight:500; }

.mega-text{ display:flex; flex-direction:column; gap:6px; }
.mega-name{ font-size:16px; font-weight:500; color:#0f172a; }
.mega-sub{ font-size:14px; font-weight:500; color:#7c3aed; }

/* show state controlled by JS (desktop hover + mobile click) */
.nav-dd.open .mega-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* responsive */
@media(max-width:980px){
  .mega-grid-4{ grid-template-columns: repeat(2,1fr); }
  .main-nav{ gap:18px; }
}
@media(max-width:720px){
  .main-nav{ display:none; } /* if you already have hamburger, keep it */
}
/* FIX HEADER */
.site-header{
  width:100%;
  background:#fff;
  border-bottom:1px solid #eef1f6;

  position: fixed;   /* ✅ fixed */
  top: 0;
  left: 0;
  z-index: 9999;
}

/* SVG dropdown icon (bold) */
.dd-icon{
  display:inline-flex;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  transform: translateY(2px);
  color:#1f2a5a;
  opacity: .9;
}
.dd-svg{ width:100%; height:100%; }

/* Mega menu FULL WIDTH (top will be set by JS) */
.mega-menu{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h, 72px); /* ✅ JS sets this */

  background:#fff;
  border-top:1px solid #eef2f6;
  box-shadow: 0 24px 80px rgba(15,23,42,.18);

  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 9500;
}

/* show state */
.nav-dd.open .mega-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.mega-text{ display:flex; flex-direction:column; gap:2px; }
.mega-name{ font-family:"Inter",system-ui,sans-serif; font-size:16px; font-weight:500; color:#0f172a; }
.mega-sub{ font-family:"Inter",system-ui,sans-serif; font-size:14px; font-weight:500; color:#6d28d9; } /* purple like screenshot */