/* Site navigation: the desktop "Products" mega menu and the Reality Check link.
   Loaded on every page BEFORE the page's own stylesheet (home/home.css, product/product.css), so the
   mobile-breakpoint switches in those files win at equal specificity.
   Flag: html[data-rc-nav] (set by assets/site-flags.js). Without it (flag off or no JS) the previous
   nav shows: the four product links, no Products trigger, no Reality Check link. */

/* ---------- Flag switches (desktop; the burger breakpoints in home.css / product.css flip them back). */
.nav-products{display:none}
html:not([data-rc-nav]) #menu>a.nav-rc{display:none}
html[data-rc-nav] .nav-products{display:block}
html[data-rc-nav] #menu>a.nav-legacy{display:none}

/* ---------- Trigger: looks like the other nav links. */
.nav-products__trigger{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 0;border:0;background:none;font:inherit;font-size:13px;letter-spacing:.04em;color:var(--muted);cursor:pointer;transition:color .2s}
.nav-products__trigger:hover,.nav-products__trigger:focus-visible,.nav-products__trigger[aria-expanded=true]{color:var(--ink)}
.nav-products__trigger.is-current{color:var(--ink);box-shadow:inset 0 -1px 0 var(--accent,#9470f5)}
.nav-products__chev{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .18s ease}
.nav-products__trigger[aria-expanded=true] .nav-products__chev{transform:rotate(180deg)}

/* ---------- Panel: hangs from the fixed header (.nav is the containing block), centred on the page. */
.nav-products__panel{position:absolute;top:100%;left:50%;z-index:31;width:min(1120px,calc(100vw - 2*var(--gutter)));max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain;
  padding:14px;box-sizing:border-box;border:1px solid var(--line);border-radius:18px;background:rgba(6,10,22,.95);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset;
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.nav-products.is-open .nav-products__panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease,transform .18s ease,visibility 0s}
/* Pointer travel: an invisible bridge from the trigger down to the panel while it is open. */
.nav-products.is-open .nav-products__panel::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:22px}
@media (max-width:1179px){.nav-products__panel{width:min(740px,calc(100vw - 2*var(--gutter)))}}

.np-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
@media (max-width:1179px){.np-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.np-grid>li{opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
.nav-products.is-open .np-grid>li{opacity:1;transform:none}
.nav-products.is-open .np-grid>li:nth-child(2){transition-delay:40ms}
.nav-products.is-open .np-grid>li:nth-child(3){transition-delay:80ms}
.nav-products.is-open .np-grid>li:nth-child(4){transition-delay:120ms}

/* ---------- Cards. */
.np-card{--np:#9470f5;--np-soft:rgba(148,112,245,.14);position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:12px 16px 16px;border:1px solid var(--line);border-radius:14px;
  background:radial-gradient(120% 70% at 50% 0%,var(--np-soft),transparent 70%),rgba(255,255,255,.015);color:var(--ink);text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.np-card--imperium{--np:#eac557;--np-soft:rgba(234,197,87,.11)}
.np-card--otopia{--np:#a775d6;--np-soft:rgba(167,117,214,.15)}
.np-card--observatory{--np:#58dcf8;--np-soft:rgba(88,220,248,.10)}
.np-card--excapia{--np:#3b82f6;--np-soft:rgba(59,130,246,.14)}
.np-card:hover,.np-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--np) 55%,transparent);background-color:rgba(255,255,255,.03);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--np) 25%,transparent),0 18px 44px -16px color-mix(in srgb,var(--np) 55%,transparent)}
.np-card:focus-visible{outline:2px solid var(--np);outline-offset:3px;border-radius:14px}
.np-card[aria-current=page]{border-color:color-mix(in srgb,var(--np) 45%,transparent)}
.np-visual{display:block;height:72px;margin:0 -4px 10px}
.np-visual svg{display:block;width:100%;height:100%}
.np-name{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:400;letter-spacing:.01em;color:var(--ink)}
.np-name::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--np);box-shadow:0 0 10px var(--np);flex:none}
.np-here{margin-left:auto;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--np)}
.np-line{display:block;margin:6px 0 12px;font-size:13px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.np-more{display:block;margin-top:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--np)}
.np-more span{display:inline-block;transition:transform .2s ease}
.np-card:hover .np-more span,.np-card:focus-visible .np-more span{transform:translateX(3px)}

/* Card visuals (geometry from the homepage previews and the Excapia pillar). Static; one short move on hover. */
.np-ring{fill:none;stroke:rgba(234,197,87,.5);stroke-width:1}
.np-ipath{stroke:rgba(234,197,87,.28);stroke-width:1;stroke-dasharray:2 4}
.np-idot{fill:#fff3cf;filter:drop-shadow(0 0 4px #eac557);transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.np-card:hover .np-idot,.np-card:focus-visible .np-idot{transform:translateX(44px)}
.np-branch{fill:none;stroke:rgba(167,117,214,.6);stroke-width:1;stroke-dasharray:3 5;stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
.np-card:hover .np-branch,.np-card:focus-visible .np-branch{stroke-dashoffset:-24}
.np-grid-dots{fill:rgba(88,220,248,.35)}
.np-beam{fill:rgba(88,220,248,.18);transform-origin:80px 34px;transform:rotate(-4deg);transition:transform .9s ease}
.np-card:hover .np-beam,.np-card:focus-visible .np-beam{transform:rotate(14deg)}
.np-xpath{fill:none;stroke:#2563eb;stroke-width:1.6;stroke-dasharray:3 5;opacity:.8;stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
.np-card:hover .np-xpath,.np-card:focus-visible .np-xpath{stroke-dashoffset:-24}
.np-xdot{fill:#3b82f6}.np-xdot--mid{fill:#2563eb}
.np-xgoal,.np-xtick{fill:none;stroke:#4ade80;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Reality Check link + its "New" badge. */
#menu>a.nav-rc{display:inline-flex;align-items:center;gap:7px}
.nav-badge{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:999px;border:1px solid rgba(226,174,94,.5);background:rgba(226,174,94,.1);color:var(--gold,#e2ae5e);
  font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1;transition:background .2s,box-shadow .2s}
.nav-rc:hover .nav-badge,.nav-rc:focus-visible .nav-badge{background:rgba(226,174,94,.18);box-shadow:0 0 12px rgba(226,174,94,.35)}

/* The burger never shrinks below its 44px target in a crowded header. */
.menu-toggle{flex:none}

/* Mobile menu: background scroll lock while open (class set by assets/nav-products.js). */
html.nav-lock,html.nav-lock body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .nav-products__panel,.nav-products.is-open .nav-products__panel{transform:translate(-50%,0);transition:opacity .12s linear,visibility 0s linear .12s}
  .nav-products.is-open .nav-products__panel{transition:opacity .12s linear,visibility 0s}
  .np-grid>li,.nav-products.is-open .np-grid>li{opacity:1;transform:none;transition:none}
  .np-card,.np-card:hover,.np-card:focus-visible{transform:none;transition:none}
  .np-idot,.np-branch,.np-beam,.np-xpath,.np-more span,.nav-products__chev{transition:none}
  .np-card:hover .np-idot,.np-card:focus-visible .np-idot{transform:none}
  .np-card:hover .np-beam,.np-card:focus-visible .np-beam{transform:rotate(-4deg)}
  .np-card:hover .np-branch,.np-card:hover .np-xpath{stroke-dashoffset:0}
  .np-card:hover .np-more span{transform:none}
}

/* Mobile menu: one more item makes the panel taller, so page content behind it must not show
   through (the old .96/.97 tint let the hero headline read through the links). */
@media (max-width:980px){
  #menu.is-open{background:rgb(5,10,22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 48px rgba(0,0,0,.55)}
}