/* =========================================================
   NX layer: Porsche-style header, mega menu, drawer and footer
   in the NAD forest-green theme. Loaded after style.min.css.
   ========================================================= */
:root {
  --nx-forest: #183A32;
  --nx-forest-deep: #0D211C;
  --nx-forest-ink: #0A1A16;
  --nx-glass: rgba(18, 46, 39, 0.66);
  --nx-panel: rgba(13, 33, 28, 0.95);
  --nx-line: rgba(255, 255, 255, 0.14);
  --nx-white-dim: rgba(255, 255, 255, 0.82);
}

/* ---------- Header shell ---------- */
.nx-header { padding-block-start: 0; }
.nx-notice {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  min-height: 34px; padding: 0 1rem;
  background: var(--nx-forest-deep); color: rgba(255,255,255,.9);
  font-size: .78rem; letter-spacing: .01em;
}
.nx-notice a { display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nx-notice .icon { width: 13px; height: 13px; }
[dir="rtl"] .nx-notice .icon { transform: scaleX(-1); }

.nx-toprow { padding-block: .9rem .6rem; min-height: 72px; }
.nx-menu-btn, .nx-tools { display: none; }

/* ---------- Desktop only (>= 961px) ---------- */
@media (min-width: 961px) {
  .nx-menu-btn {
    grid-column: 1; justify-self: start;
    display: inline-flex; align-items: center; gap: .6rem;
    background: transparent; border: 0; cursor: pointer;
    color: #fff; font: inherit; font-size: .95rem; font-weight: 500; padding: .35rem .2rem;
  }
  .nx-menu-btn .icon { width: 20px; height: 20px; }
  .nx-tools {
    grid-column: 3; justify-self: end;
    display: flex; align-items: center; gap: 1.1rem;
  }
  .nx-tool { display: inline-flex; color: #fff; padding: .3rem; }
  .nx-tool .icon { width: 20px; height: 20px; }
  .nx-lang { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: rgba(255,255,255,.7); }
  .nx-lang a { color: rgba(255,255,255,.7); font-weight: 500; }
  .nx-lang a.active { color: #fff; font-weight: 700; }
  .nx-quote { padding: .55rem 1.1rem; font-size: .84rem; white-space: nowrap; }
  .nx-header.is-scrolled .nx-menu-btn,
  .nx-header.is-scrolled .nx-tool { color: var(--nx-forest); }
  .nx-header.is-scrolled .nx-lang a { color: rgba(24,58,50,.65); }
  .nx-header.is-scrolled .nx-lang a.active { color: var(--nx-forest); }
  .nx-header.is-scrolled .nx-lang { color: rgba(24,58,50,.5); }
}
@media (max-width: 960px) {
  .nx-menu-btn, .nx-tools, .nx-navrow, .nx-drawer, .nx-overlay { display: none !important; }
  .nx-notice { font-size: .72rem; min-height: 30px; }
  .nx-notice span { display: none; }
}

/* ---------- Category pill ---------- */
.nx-navrow { position: relative; z-index: 6; padding-block-end: 1.25rem; }
.nx-pill {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: .15rem; min-height: 56px; padding: .35rem .75rem;
  background: var(--nx-glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
}
.nx-item { position: static; }
.nx-link {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .6rem 1rem; border-radius: 999px;
  color: rgba(255,255,255,.92); font-size: .92rem; font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
.nx-chev { width: 13px; height: 13px; transition: transform .2s ease; }
.nx-link:hover, .nx-link.active,
.nx-has-mega:hover > .nx-link, .nx-has-mega:focus-within > .nx-link, .nx-has-mega.is-open > .nx-link {
  background: rgba(255,255,255,.14); color: #fff;
}
.nx-has-mega:hover .nx-chev, .nx-has-mega.is-open .nx-chev { transform: rotate(180deg); }
@media (max-width: 1280px) { .nx-link { padding: .6rem .7rem; font-size: .86rem; } }

/* ---------- Mega panel ---------- */
.nx-mega {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 2.5rem;
  padding: 2.1rem 2.6rem 2.3rem;
  background: var(--nx-panel);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--nx-line); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .22s;
}
.nx-mega::before { content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; }
.nx-has-mega:hover > .nx-mega, .nx-has-mega:focus-within > .nx-mega, .nx-has-mega.is-open > .nx-mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.nx-mega-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.nx-col h3 { margin: 0 0 .85rem; font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: 0; text-transform: none; }
.nx-col ul { list-style: none; margin: 0; padding: 0; }
.nx-col li { margin: 0; }
.nx-col a { display: block; padding: .32rem 0; font-size: .9rem; line-height: 1.5; color: var(--nx-white-dim); transition: color .15s ease; }
.nx-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.nx-feature {
  position: relative; display: block; overflow: hidden; border-radius: 14px;
  min-height: 270px; background: #0b1a16; color: #fff;
}
.nx-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nx-feature:hover img { transform: scale(1.04); }
.nx-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }
.nx-feature-text { position: absolute; z-index: 2; inset-inline: 1.1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.nx-feature-text strong { font-size: 1.05rem; font-weight: 600; }
.nx-feature-text small { font-size: .8rem; opacity: .85; }
.nx-feature-go {
  position: absolute; z-index: 2; top: .9rem; inset-inline-end: .9rem; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nx-feature-go .icon { width: 16px; height: 16px; }
[dir="rtl"] .nx-feature-go .icon { transform: scaleX(-1); }
@media (max-width: 1200px) { .nx-mega { grid-template-columns: minmax(0,1fr) 220px; padding: 1.8rem 1.8rem 2rem; gap: 1.6rem; } }

/* ---------- Desktop two-column drawer ---------- */
.nx-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7, 18, 15, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.nx-overlay.is-open { opacity: 1; }
.nx-drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 201;
  width: min(926px, 100vw); display: grid; grid-template-columns: 50% 50%;
  background: #fff; color: #14201c; box-shadow: 0 0 60px rgba(0,0,0,.35);
  transform: translateX(-102%); transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .nx-drawer { transform: translateX(102%); }
.nx-drawer.is-open { transform: none; }
.nx-drawer[hidden], .nx-overlay[hidden] { display: none; }
.nx-d1, .nx-d2 { display: flex; flex-direction: column; padding: 4.6rem 1.5rem 1.6rem; overflow-y: auto; }
.nx-d2 { background: #F1F3EF; }
.nx-d1 ul, .nx-d2 ul { list-style: none; margin: 0; padding: 0; }
.nx-d1 li > a, .nx-d1 li > button, .nx-d2 li > a {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .85rem 1rem; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 1.05rem; color: #14201c; text-align: start; transition: background .15s ease;
}
.nx-d1 li > a:hover, .nx-d1 li > button:hover, .nx-d1 li > button.is-active, .nx-d2 li > a:hover { background: #F1F3EF; }
.nx-d2 li > a:hover { background: #fff; }
.nx-dchev { width: 14px; height: 14px; transform: rotate(-90deg); color: #6b7a74; }
[dir="rtl"] .nx-dchev { transform: rotate(90deg); }
.nx-d-quote { margin-top: auto; align-self: flex-start; }
.nx-dcard { margin-top: auto; background: #fff; border-radius: 18px; padding: .9rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.nx-dcard a { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; font-size: .9rem; color: #14201c; }
.nx-dcard a:hover { color: var(--nx-forest); text-decoration: underline; }
.nx-dcard .icon { width: 16px; height: 16px; flex: none; }
.nx-dclose {
  position: absolute; top: 1.4rem; inset-inline-start: calc(100% + 1.4rem);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nx-dclose .icon { width: 18px; height: 18px; }

/* ---------- Spacing and logo fixes for the taller header ---------- */
.nx-header.is-scrolled .brand-center .brand-logo { filter: none; }
.nx-header.is-scrolled .nav-toggle { color: var(--nx-forest); }
.hero-split { padding-block-start: clamp(10.5rem, 15vw + 1.5rem, 12.5rem); }
main > .section:first-child { padding-block-start: calc(clamp(3.5rem, 7vw, 6rem) + 9rem); }
@media (max-width: 960px) {
  .hero-split { padding-block-start: clamp(8.5rem, 24vw, 10rem); }
  main > .section:first-child { padding-block-start: calc(clamp(3.5rem, 7vw, 6rem) + 8rem); }
}
.nx-header .brand-center .brand-logo { height: 58px; width: auto; }
@media (max-width: 960px) { .nx-header .brand-center .brand-logo { height: 46px; } }