/* ================= Header / Navigation ================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:transparent;
  transition:height var(--transition);
  /* NOTE: intentionally no backdrop-filter/transform/filter on this element —
     any of those create a new containing block for fixed-position
     descendants (like the mobile .main-nav), which traps it inside the
     header's own box instead of the viewport. The blur/tint lives on the
     ::before pseudo-element below instead. */
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(10,26,53,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled{ height:68px; }
.site-header.scrolled::before{
  background:var(--color-primary-dark);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--color-white);
}
.brand img{ width:42px; height:44px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{
  font-family:var(--font-heading);
  font-size:1.15rem;
  letter-spacing:.02em;
}
.brand-text span{
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-gold-300);
}

.main-nav{ display:flex; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:14px 16px;
  color:var(--color-white);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:8px;
  transition:color var(--transition), background var(--transition);
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.open > a{
  color:var(--color-gold-300);
  background:rgba(255,255,255,.06);
}
.main-nav .caret{
  width:8px; height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--transition);
  margin-top:-3px;
}
.main-nav li.open > a .caret{ transform:rotate(-135deg); margin-top:3px; }

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:250px;
  background:var(--color-white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.main-nav li.open .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{
  display:block;
  padding:11px 14px;
  border-radius:8px;
  font-size:.88rem;
  font-weight:500;
  color:var(--color-navy-900);
}
.dropdown a:hover{ background:var(--color-gray-50); color:var(--color-accent-dark); }

/* ---- Mega menu (Management / Social Security Scheme) ---- */
.mega-menu{
  min-width:460px;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:0;
  padding:0;
  overflow:hidden;
}
.mega-intro{
  background:linear-gradient(160deg, var(--color-navy-900), var(--color-navy-700));
  color:var(--color-white);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mega-eyebrow{ font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--color-gold-300); margin-bottom:8px; }
.mega-intro h4{ color:var(--color-white); font-size:1.02rem; margin-bottom:8px; }
.mega-intro p{ font-size:.78rem; color:rgba(255,255,255,.75); margin:0; line-height:1.5; }
.mega-links{ padding:14px; display:flex; flex-direction:column; }
.mega-links a{ display:flex; align-items:center; }
.mega-links a::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--color-gold-500);
  margin-right:10px;
  flex:none;
  opacity:.6;
  transition:opacity var(--transition), transform var(--transition);
}
.mega-links a:hover::before{ opacity:1; transform:scale(1.3); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn{ padding:11px 22px; font-size:.82rem; }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  border:none;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
}
.nav-toggle span{
  display:block;
  width:24px; height:2px;
  background:var(--color-white);
  transition:transform var(--transition), opacity var(--transition);
}
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }