:root{
  --brand-navy:#002E62;
  --brand-green:#76BC43;
  --brand-blue:#00AEEF;
  --bg:#ffffff;
  --muted:#64748b;
  --text:#0f172a;
  --line:rgba(15,23,42,.10);
  --shadow:0 18px 45px rgba(2,6,23,.10);
  --shadow2:0 10px 30px rgba(2,6,23,.12);
  --radius:18px;
  --font-heading:'Plus Jakarta Sans',sans-serif;
  --font-body:'Outfit',sans-serif;
  --transition:all .28s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--text);background:var(--bg)}
.container{max-width:1240px;margin:auto;padding:0 24px}

/* icon consistency */
i.fa-solid,i.fa-brands{display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* HEADER */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  transition: var(--transition);
}
.site-header.scrolled{
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.92);
}

/* TOP BAR */
.top-utility{
  background: linear-gradient(90deg, rgba(0,46,98,1), rgba(0,46,98,.92));
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.utility-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 0;
  gap: 12px;
}
.util-left, .util-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.util-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(118,188,67,.18);
  border: 1px solid rgba(118,188,67,.22);
  color:#d9ffd0;
  font-weight: 700;
}
.util-info{
  display:inline-flex;align-items:center;gap:10px;
  color: rgba(255,255,255,.88);
}

.util-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  color:#fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: var(--transition);
  font-weight: 700;
}
.util-pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.util-pill.wa{border-color: rgba(37,211,102,.25)}
.util-pill.wa i{color:#25D366}

/* NAV */
.navigation-bar{padding: 14px 0}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:18px}
.main-logo{height:58px;width:auto;display:block}

.primary-menu{list-style:none;display:flex;gap:28px;align-items:center}
.m-link{
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--brand-navy);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
  padding: 10px 2px;
  transition: var(--transition);
}
.m-link:hover{color: var(--brand-green)}
.m-link::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:2px;
  height:2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-blue));
  transform: scaleX(0);
  transform-origin:left;
  transition: var(--transition);
}
.m-link:hover::after{transform: scaleX(1)}
.m-link.active::after{transform: scaleX(1)}

.chev{font-size:12px;transform:translateY(1px);opacity:.85}

/* MEGA MENU (clean + stable hover) */
.dropdown-trigger{position:relative}

/* invisible bridge so hover doesn't break */
.dropdown-trigger::after{
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  top:100%;
  height:16px;
}

/* base menu */
.mega-menu{
  position:absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 640px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* open on hover or keyboard focus */
.dropdown-trigger:hover .mega-menu,
.dropdown-trigger:focus-within .mega-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mega-item{
  display:flex;gap:14px;
  padding: 14px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.08);
  background:#fff;
  transition: var(--transition);
}
.mega-item:hover{
  transform: translateY(-2px);
  border-color: rgba(118,188,67,.28);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}
.m-icon{
  width: 46px;height:46px;
  border-radius: 16px;
  display:grid;place-items:center;
  background: rgba(0,174,239,.10);
  border: 1px solid rgba(0,174,239,.16);
  color: var(--brand-blue);
  font-size: 20px;
  flex: 0 0 auto;
}
.m-content h6{
  font-family: var(--font-heading);
  color: var(--brand-navy);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 3px;
}
.m-content p{font-size: 12px;color: var(--muted);line-height:1.5}

/* CTAs */
.nav-cta-group{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.10);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-ghost{
  background: rgba(2,6,23,.03);
  color: var(--brand-navy);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(0,174,239,.25);color:var(--brand-blue)}
.btn-solid{
  background: linear-gradient(90deg, var(--brand-green), #a3e635);
  color:#0b1220;
  border-color: transparent;
}
.btn-solid:hover{transform:translateY(-2px);filter:brightness(1.03)}

/* MOBILE */
.mobile-toggler{
  display:none;
  flex-direction:column;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 10px;
  border-radius: 14px;
}
.mobile-toggler:hover{background:rgba(2,6,23,.04)}
.mobile-toggler span{
  width: 24px;
  height: 2.5px;
  background: var(--brand-navy);
  border-radius: 999px;
}

.mobile-overlay{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(2px);
  z-index: 1100;
  display:none;
}
.mobile-overlay.active{display:block}

.mobile-drawer{
  position:fixed;
  top: 12px;
  right: -110%;
  width: min(360px, calc(100% - 24px));
  height: calc(100% - 24px);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  z-index: 1101;
  box-shadow: var(--shadow);
  transition: var(--transition);
  padding: 18px;
  display:flex;
  flex-direction:column;
}
.mobile-drawer.active{right: 12px}

.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.drawer-logo{height: 44px;width:auto}
.drawer-close{
  width: 42px;height:42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.03);
  cursor:pointer;
}
.drawer-close:hover{background: rgba(2,6,23,.06)}

.drawer-links{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 14px 0;
}
.d-link{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  color: var(--brand-navy);
  background: rgba(2,6,23,.02);
  border: 1px solid rgba(15,23,42,.08);
  transition: var(--transition);
}
.d-link i{color: var(--brand-blue)}
.d-link:hover{transform:translateY(-2px);border-color:rgba(0,174,239,.22)}
.d-link.cta{
  background: linear-gradient(90deg, var(--brand-green), #a3e635);
  border-color: transparent;
  color:#0b1220;
}
.d-link.cta i{color:#0b1220}

.drawer-bottom{
  margin-top: auto;
  display:flex;
  gap: 10px;
}
.drawer-pill{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.03);
  color: var(--brand-navy);
  transition: var(--transition);
}
.drawer-pill:hover{transform:translateY(-2px)}
.drawer-pill.wa{
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.22);
}
.drawer-pill.wa i{color:#25D366}

@media (max-width: 992px){
  .main-nav-desktop{display:none;}
  .mobile-toggler{display:flex;}
  .util-left{display:none;}
  .util-right{justify-content:center;width:100%;}
}