/* ============================================
   header.css — Topbar, navbar, mega & mobile menu
   ============================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transition: box-shadow var(--t-med);
}

/* ---- Topbar ---- */
.topbar {
  height: var(--topbar-h);
  background: var(--km-secondary);
  color: #cfd4ea; font-size: .8rem;
  display: flex; align-items: center;
  overflow: hidden;
  transition: height var(--t-med) var(--ease-out), opacity var(--t-med);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar__group { display: flex; align-items: center; gap: 18px; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; color: #cfd4ea; transition: color var(--t-fast); }
.topbar a:hover { color: var(--km-primary); }
.topbar svg { width: 14px; height: 14px; color: var(--km-primary); }
.topbar__tag { font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.topbar__tag strong { color: var(--km-primary); }
.topbar .btn { padding: 8px 16px; font-size: .75rem; }

/* ---- Navbar ---- */
.navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231,233,238,.8);
  transition: box-shadow var(--t-med);
}
.navbar .container { display: flex; align-items: center; gap: 26px; height: var(--header-h); transition: height var(--t-med) var(--ease-out); }
.nav-logo { flex: 0 0 auto; width: 190px; transition: width var(--t-med) var(--ease-out); }
.nav-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .93rem; color: var(--km-secondary);
  position: relative; transition: color var(--t-fast);
}
.nav-link svg { width: 13px; height: 13px; transition: transform var(--t-fast); }
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2.5px;
  background: var(--km-gradient); border-radius: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--km-primary); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-cta { flex: 0 0 auto; }

/* Scrolled state */
.site-header.is-scrolled .topbar { height: 0; opacity: 0; }
.site-header.is-scrolled .navbar { box-shadow: var(--shadow-sm); }
.site-header.is-scrolled .navbar .container { height: 62px; }
.site-header.is-scrolled .nav-logo { width: 160px; }

/* ---- Mega menu ---- */
.has-mega { position: relative; }
.mega-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 14px);
  width: 640px;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover); border: 1px solid var(--km-border);
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility var(--t-med);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.has-mega:hover .nav-link svg, .has-mega:focus-within .nav-link svg { transform: rotate(180deg); }
.mega-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }

.mega-item {
  display: flex; gap: 14px; padding: 12px; border-radius: var(--radius);
  transition: background var(--t-fast);
}
.mega-item:hover { background: var(--km-light-bg); }
.mega-item .icon-disc { width: 44px; height: 44px; border-radius: 12px; }
.mega-item .icon-disc svg { width: 21px; height: 21px; }
.mega-item strong { display: block; font-size: .92rem; color: var(--km-secondary); font-weight: 700; }
.mega-item small { color: var(--km-text-light); font-size: .8rem; }
.mega-item:hover strong { color: var(--km-primary); }

/* ---- Hamburger & mobile menu ---- */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 10px; margin-left: auto;
}
.nav-toggle span {
  display: block; width: 24px; height: 2.4px; border-radius: 3px;
  background: var(--km-secondary);
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); background: var(--km-primary); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); background: var(--km-primary); }

.mobile-menu {
  position: fixed; inset: 0; z-index: calc(var(--z-header) - 1);
  background: var(--km-gradient-dark);
  padding: 120px 28px 40px;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .5s var(--ease-out), visibility .5s;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: none; visibility: visible; }
.mobile-menu .nav-link {
  color: #fff; font-size: 1.3rem; font-family: var(--font-head); font-weight: 700;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  width: 100%; justify-content: space-between;
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color var(--t-fast);
  transition-delay: calc(.06s * var(--i, 0));
}
.mobile-menu.is-open .nav-link { opacity: 1; transform: none; }
.mobile-menu .nav-link::after { display: none; }
.mobile-menu .nav-link.is-active { color: var(--km-primary); }
.mobile-sub {
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease-out);
  background: rgba(255,255,255,.04); border-radius: var(--radius);
}
.mobile-sub.is-open { max-height: 420px; }
.mobile-sub a { display: block; padding: 11px 18px; color: #B9BED6; font-size: .98rem; }
.mobile-sub a:hover { color: var(--km-primary); }
.mobile-menu .btn { margin-top: 26px; }
.mobile-menu__contact { margin-top: 18px; display: grid; gap: 10px; color: #9aa0c0; font-size: .9rem; }
.mobile-menu__contact a { display: flex; gap: 10px; align-items: center; }
.mobile-menu__contact svg { width: 16px; height: 16px; color: var(--km-primary); }

/* ---- Active page indicator ---- */
.nav-link.is-active { font-weight: 700; }