/* Frame — global header  (frame-navigation-v3.css)

   Renamed from nav.css so no proxy, CDN or browser cache can serve a stale
   copy. Pages load it with a ?v= query string for the same reason.

   The site-wide nav, brand lockup, hamburger, mobile menu, scroll progress bar
   and aurora background. Extracted verbatim from frame.css so that ALL pages —
   including About/Contact/Privacy/Terms, which do not load the generator
   stylesheet — share one source of truth for the header.

   Pair with /assets/nav.js, which drives the QR Tools dropdown and hamburger.
   SELF-CONTAINED: every style the header needs — logo, nav links, CTA,
   QR Tools button, chevron, dropdown panel, columns, headings, links, hover
   and focus states, open/closed states, hamburger, mobile accordion — lives in
   this one file. It depends on no other stylesheet.

   Design tokens carry fallbacks (the dark palette) so the header still renders
   correctly on a page that loads nothing but nav.css. */

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--gold, #E8B94E),var(--laser, #4EE8C3));z-index:300;box-shadow:0 0 12px var(--gold-glow, rgba(232,185,78,0.35));}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:120;}
.hamburger span{width:22px;height:2px;background:var(--ink, #F4F2EC);transition:all .3s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;background:rgba(8,9,11,0.97);backdrop-filter:blur(20px);z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu a{font-family:'Archivo',sans-serif;font-size:26px;font-weight:700;text-decoration:none;color:var(--ink, #F4F2EC);}
.mobile-menu-cta{font-family:'IBM Plex Mono',monospace!important;font-size:15px!important;font-weight:600!important;background:var(--gold, #E8B94E);color:#0A0B0D!important;padding:14px 28px;border-radius:8px;margin-top:12px;}
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.22;}
.aurora .a1{width:520px;height:520px;background:var(--gold, #E8B94E);top:-140px;left:-100px;animation:drift1 22s ease-in-out infinite;}
.aurora .a2{width:460px;height:460px;background:var(--laser, #4EE8C3);top:10%;right:-160px;animation:drift2 26s ease-in-out infinite;}
.aurora .a3{width:400px;height:400px;background:var(--gold, #E8B94E);bottom:-140px;left:30%;animation:drift3 24s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(80px,60px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-70px,50px);}}
@keyframes drift3{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,-40px);}}
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;max-width:1180px;margin:0 auto;border-bottom:1px solid transparent;transition:all .3s ease;}
.nav.scrolled{background:rgba(8,9,11,0.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-soft, rgba(255,255,255,0.05));padding:16px 32px;}
.brand{font-family:'Archivo',sans-serif;font-weight:900;font-size:21px;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;}
.brand-mark{width:19px;height:19px;border:2.2px solid var(--ink, #F4F2EC);position:relative;flex-shrink:0;transition:transform .4s ease;}
.brand-mark::after{content:'';position:absolute;top:3.5px;left:3.5px;right:3.5px;bottom:3.5px;background:var(--gold, #E8B94E);}
.brand:hover .brand-mark{transform:rotate(90deg);}
.nav-links{display:flex;gap:36px;font-size:14px;font-weight:500;}
.nav-links a{text-decoration:none;color:var(--ink-soft, #9B9B94);transition:color .2s;position:relative;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--gold, #E8B94E);transition:width .25s ease;}
.nav-links a:hover{color:var(--ink, #F4F2EC);}
.nav-links a:hover::after{width:100%;}
.nav-cta{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;background:var(--gold, #E8B94E);color:#0A0B0D;padding:10px 20px;text-decoration:none;border-radius:2px;transition:transform .25s ease, box-shadow .25s ease;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--gold-glow, rgba(232,185,78,0.35));}
@media (max-width:760px){.hamburger{display:flex;}}
@media (max-width:760px){.nav-links{display:none;}.nav-cta{display:none;}.nav{padding:18px 20px;}}

/* ============================================================
   QR Tools dropdown
   Custom markup — no native <select> anywhere in the header.
   Lives here, not in any page stylesheet, so the dropdown is styled
   wherever the header is rendered.
   ============================================================ */

.nav-drop{position:relative;display:inline-flex;align-items:center;}

/* matches .nav-links a exactly so the row stays evenly aligned */
.nav-drop-btn{background:transparent;border:0;box-shadow:none;border-radius:0;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding:0;margin:0;cursor:pointer;text-align:left;
  font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:500;line-height:inherit;
  color:var(--ink-soft, #9B9B94);display:inline-flex;align-items:center;gap:6px;
  transition:color .2s;position:relative;}
.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{color:var(--ink, #F4F2EC);}
.nav-drop-btn:focus-visible{outline:2px solid var(--gold, #E8B94E);outline-offset:4px;border-radius:3px;}

/* same animated underline the other nav items use */
.nav-drop-btn::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;
  background:var(--gold, #E8B94E);transition:width .28s ease;}
.nav-drop-btn:hover::after,.nav-drop.open .nav-drop-btn::after{width:100%;}

.nav-drop-btn .caret{font-size:9px;line-height:1;transition:transform .25s ease;color:var(--gold, #E8B94E);}
.nav-drop.open .nav-drop-btn .caret{transform:rotate(180deg);}

/* Hover bridge: the panel sits 14px below the trigger, so without this the
   pointer crosses dead space on its way down and the menu closes. */
.nav-drop::after{content:'';position:absolute;top:100%;left:-14px;right:-14px;height:18px;}

.nav-drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:#0E0F12;border:1px solid var(--border, rgba(255,255,255,0.09));border-radius:14px;
  padding:20px 24px;display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px 26px;
  opacity:0 !important;visibility:hidden !important;pointer-events:none !important;
  transition:opacity .2s ease,transform .22s ease,visibility .22s;
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02);
  z-index:300;   /* above .nav (100) and all page content */
}
.nav-drop.open > .nav-drop-menu,
.nav-drop:focus-within > .nav-drop-menu{
  opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
  transform:translateX(-50%) translateY(0);}
@media(hover:hover){
  .nav-drop:hover > .nav-drop-menu{
    opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    transform:translateX(-50%) translateY(0);}
}

.ndm-col b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-dim, #8B8C90);
  margin:0 0 10px;font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--border-soft, rgba(255,255,255,0.05));}
.ndm-col a{display:block;font-size:13.5px;color:var(--ink-soft, #9B9B94);text-decoration:none;
  padding:8px 10px;margin:0 -10px;border-radius:8px;white-space:nowrap;
  transition:color .16s ease,background .16s ease;}
.ndm-col a:hover{color:var(--ink, #F4F2EC);background:rgba(232,185,78,.09);}
.ndm-col a:focus-visible{outline:2px solid var(--gold, #E8B94E);outline-offset:-2px;}

/* Hide the desktop dropdown at exactly the width the rest of .nav-links
   collapses into the hamburger — otherwise QR Tools vanishes on tablets. */
@media (max-width:760px){.nav-drop{display:none;}}

/* ---------- mobile: QR Tools accordion inside the hamburger menu ----------
   The base .mobile-menu centres a few large links. With a 10-item submenu that
   overflows small screens, so this makes it top-aligned, scrollable and sized
   for comfortable touch targets. */
.mobile-menu{justify-content:flex-start;align-items:stretch;gap:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:86px 26px 40px;}
.mobile-menu > *{flex-shrink:0;}   /* or the expanded submenu gets squashed */
.mobile-menu > a{font-size:20px!important;padding:13px 0;text-align:left;}

.mm-toggle{background:none;border:0;cursor:pointer;width:100%;text-align:left;
  font-family:'Archivo',sans-serif;font-size:20px;font-weight:700;color:var(--ink, #F4F2EC);
  display:flex;align-items:center;justify-content:space-between;padding:13px 0;}
.mm-toggle .caret{font-size:13px;color:var(--gold, #E8B94E);transition:transform .3s ease;}
.mm-toggle[aria-expanded="true"] .caret{transform:rotate(180deg);}
.mm-toggle:focus-visible{outline:2px solid var(--gold, #E8B94E);outline-offset:3px;}

.mm-sub{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.mm-sub.open{max-height:660px;}
.mm-sub a{display:block;font-family:'IBM Plex Sans',sans-serif!important;
  font-size:15px!important;font-weight:500!important;color:var(--ink-soft, #9B9B94)!important;
  padding:12px 0 12px 16px;border-left:1px solid var(--border, rgba(255,255,255,0.09));
  text-decoration:none;min-height:44px;line-height:1.35;}
.mm-sub a:active,.mm-sub a:hover{color:var(--gold, #E8B94E)!important;}
.mobile-menu-cta{margin-top:20px;text-align:center;}