/* ==========================================================================
   Nexsage layout — header, mega-menu, mobile nav, footer, floating CTA
   ========================================================================== */

.nx-main { min-height: 50vh; }

/* ---------- Header ---------- */
.nx-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--nx-z-header);
  height: var(--nx-header-h);
  transition: background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
  border-bottom: 1px solid transparent;
}
.nx-header__inner { display: flex; align-items: center; gap: var(--nx-s-4); height: 100%; }
.nx-header__brand { display: inline-flex; align-items: center; flex: none; }
.nx-logo { height: 38px; width: auto; }
.nx-logo--dark { display: none; }

/* Solid state (default on inner pages + scrolled home) */
.nx-header--solid, .nx-header.is-stuck {
  background: rgba(255,255,255,.92); backdrop-filter: saturate(150%) blur(10px);
  box-shadow: var(--nx-sh-sm); border-bottom-color: var(--nx-line);
}
/* Overlay (transparent) on home hero before scroll: white logo + light nav */
.nx-header--overlay:not(.is-stuck) { background: transparent; }
.nx-header--overlay:not(.is-stuck) .nx-logo--light { display: none; }
.nx-header--overlay:not(.is-stuck) .nx-logo--dark { display: block; }
.nx-header--overlay:not(.is-stuck) .nx-nav__link { color: #fff; }
.nx-header--overlay:not(.is-stuck) .nx-header__wa { color: #fff; }
.nx-header--overlay:not(.is-stuck) .nx-burger span { background: #fff; }

/* push content below fixed header on non-overlay pages */
body:not(.nx-home) .nx-main { padding-top: var(--nx-header-h); }

/* Nav */
.nx-nav { margin-inline: auto; }
.nx-nav__list { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.75rem); }
.nx-nav__item { position: static; }
.nx-nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: var(--nx-fw-med); font-size: .98rem; color: var(--nx-navy-ink);
  padding: .6rem .2rem; position: relative; background: none; cursor: pointer;
}
.nx-nav__link::after {
  content: ""; position: absolute; left: .2rem; right: .2rem; bottom: .35rem; height: 2px;
  background: var(--nx-blue); transform: scaleX(0); transform-origin: left; transition: transform var(--nx-dur) var(--nx-ease);
}
.nx-nav__link:hover::after, .nx-nav__item--mega:hover .nx-nav__trigger::after { transform: scaleX(1); }
.nx-header--overlay:not(.is-stuck) .nx-nav__link::after { background: var(--nx-teal); }
.nx-nav__caret { transition: transform var(--nx-dur-fast) var(--nx-ease); }
.nx-nav__item--mega:hover .nx-nav__caret { transform: rotate(180deg); }

/* Header actions */
.nx-header__actions { display: flex; align-items: center; gap: .85rem; flex: none; }
.nx-header__wa { display: inline-flex; align-items: center; gap: .4rem; font-weight: var(--nx-fw-med); font-size: .95rem; color: var(--nx-navy-ink); }
.nx-header__wa:hover { color: #25D366; }

/* ---------- Mega menu ---------- */
.nx-mega-wrap {
  position: absolute; left: 50%; top: calc(var(--nx-header-h) - 6px); transform: translateX(-50%) translateY(8px);
  width: min(var(--nx-container), calc(100vw - 2rem)); padding-top: 12px;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: var(--nx-z-mega);
  transition: opacity var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease), visibility var(--nx-dur);
}
.nx-nav__item--mega:hover .nx-mega-wrap,
.nx-nav__item--mega.is-open .nx-mega-wrap {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nx-mega {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--nx-s-4);
  background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-r-lg);
  box-shadow: var(--nx-sh-lg); padding: var(--nx-s-4);
}
.nx-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nx-mega__item { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem; border-radius: var(--nx-r); transition: background var(--nx-dur-fast) var(--nx-ease); }
.nx-mega__item:hover { background: var(--nx-mist); }
.nx-mega__icon { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--nx-blue-100); color: var(--nx-blue); }
.nx-mega__title { display: block; font-weight: var(--nx-fw-bold); color: var(--nx-navy-ink); margin-bottom: .15rem; }
.nx-mega__desc { display: block; font-size: .85rem; color: var(--nx-slate); line-height: 1.45; }
.nx-mega__feature { background: var(--nx-mist); border-radius: var(--nx-r); padding: var(--nx-s-4); display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.nx-mega__feature h4 { margin-top: .25rem; }
.nx-mega__feature p { font-size: .9rem; color: var(--nx-slate); }
.nx-mega__all { font-weight: var(--nx-fw-sem); color: var(--nx-blue); margin-top: auto; }

/* ---------- Burger / mobile ---------- */
.nx-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; }
.nx-burger span { width: 24px; height: 2px; background: var(--nx-navy-ink); border-radius: 2px; transition: transform var(--nx-dur) var(--nx-ease), opacity var(--nx-dur) var(--nx-ease); }

.nx-mobile { position: fixed; inset: 0; z-index: var(--nx-z-mobile); visibility: hidden; }
.nx-mobile.is-open { visibility: visible; }
.nx-mobile__backdrop { position: absolute; inset: 0; background: rgba(11,27,63,.45); opacity: 0; transition: opacity var(--nx-dur) var(--nx-ease); }
.nx-mobile.is-open .nx-mobile__backdrop { opacity: 1; }
.nx-mobile__panel {
  position: absolute; inset: 0 0 0 auto; width: min(420px, 88vw); background: #fff;
  display: flex; flex-direction: column; padding: var(--nx-s-4); transform: translateX(100%);
  transition: transform var(--nx-dur) var(--nx-ease-out); overflow-y: auto;
}
.nx-mobile.is-open .nx-mobile__panel { transform: translateX(0); }
.nx-mobile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nx-s-4); }
.nx-mobile__nav ul { display: flex; flex-direction: column; }
.nx-mobile__nav > ul > li > a, .nx-mobile__accbtn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1rem .25rem; font-size: 1.15rem; font-weight: var(--nx-fw-sem); color: var(--nx-navy-ink);
  border-bottom: 1px solid var(--nx-line);
}
.nx-mobile__sub { max-height: 0; overflow: hidden; transition: max-height var(--nx-dur) var(--nx-ease); }
.nx-mobile__acc.is-open .nx-mobile__sub { max-height: 460px; }
.nx-mobile__acc.is-open .nx-mobile__accbtn svg { transform: rotate(180deg); }
.nx-mobile__accbtn svg { transition: transform var(--nx-dur-fast) var(--nx-ease); }
.nx-mobile__sub li a { display: block; padding: .7rem 1rem; color: var(--nx-slate); font-size: 1rem; }
.nx-mobile__cta { margin-top: auto; padding-top: var(--nx-s-4); display: flex; flex-direction: column; gap: .75rem; position: sticky; bottom: 0; background: #fff; }

@media (max-width: 1024px) {
  .nx-nav, .nx-header__wa { display: none; }
  .nx-burger { display: flex; }
  .nx-header__actions .nx-btn--primary { display: none; }
}
@media (min-width: 1025px) {
  .nx-mobile { display: none; }
}

/* ---------- Floating WhatsApp ---------- */
.nx-wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: var(--nx-z-float);
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6);
  transition: transform var(--nx-dur) var(--nx-ease);
}
.nx-wa-float:hover { transform: scale(1.08); color: #fff; }

/* ---------- Footer ---------- */
.nx-footer { background: var(--nx-navy); color: var(--nx-on-dark); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.nx-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--nx-s-5); padding-bottom: var(--nx-s-5); border-bottom: 1px solid var(--nx-on-dark-line); }
.nx-footer__brand p { color: var(--nx-on-dark-muted); font-size: .95rem; margin: 1rem 0; max-width: 40ch; }
.nx-footer__contact { display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.nx-footer__contact a, .nx-footer__contact span { color: var(--nx-on-dark); display: inline-flex; align-items: center; gap: .5rem; }
.nx-footer__contact a:hover { color: var(--nx-teal); }
.nx-footer__social { display: flex; gap: 1rem; margin-top: 1rem; }
.nx-footer__social a { color: var(--nx-on-dark-muted); font-size: .9rem; }
.nx-footer__social a:hover { color: var(--nx-teal); }
.nx-footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.nx-footer__col ul { display: flex; flex-direction: column; gap: .65rem; }
.nx-footer__col a { color: var(--nx-on-dark-muted); font-size: .95rem; }
.nx-footer__col a:hover { color: var(--nx-teal); }
.nx-footer__cta p { color: var(--nx-on-dark-muted); font-size: .92rem; margin-bottom: 1rem; }
.nx-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; font-size: .85rem; color: var(--nx-on-dark-muted); }
.nx-footer__legal { display: flex; gap: 1.25rem; }
.nx-footer__legal a { color: var(--nx-on-dark-muted); }
.nx-footer__legal a:hover { color: var(--nx-teal); }
@media (max-width: 880px) {
  .nx-footer__top { grid-template-columns: 1fr 1fr; }
  .nx-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .nx-footer__top { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.nx-faq { max-width: 820px; }
.nx-faq__item { border-bottom: 1px solid var(--nx-line); }
.nx-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-weight: var(--nx-fw-sem); font-size: 1.1rem; color: var(--nx-navy-ink); cursor: pointer; list-style: none; }
.nx-faq__q::-webkit-details-marker { display: none; }
.nx-faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.nx-faq__icon::before, .nx-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--nx-blue); }
.nx-faq__icon::before { width: 14px; height: 2px; }
.nx-faq__icon::after { width: 2px; height: 14px; transition: transform var(--nx-dur) var(--nx-ease); }
.nx-faq__item[open] .nx-faq__icon::after { transform: translate(-50%,-50%) scaleY(0); }
.nx-faq__a { padding-bottom: 1.25rem; color: var(--nx-slate); }
.nx-faq__a p { max-width: none; }