/* global navbar + mobile sidebar — injected by js/nav.js on every main page */
body { padding-top: 52px; }
.gnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
@supports (backdrop-filter: blur(8px)) { .gnav { background: transparent; backdrop-filter: blur(12px); } .gnav::before { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: .82; z-index: -1; } }
.gnav-inner { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 11px 24px; }
.gnav .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-primary); font-weight: 800; font-size: 19px; letter-spacing: -.3px; }
.gnav .mark { width: 24px; height: 24px; background: var(--text-primary); -webkit-mask: url("../assets/sun_logo.svg") center / contain no-repeat; mask: url("../assets/sun_logo.svg") center / contain no-repeat; }
.gnav .spacer { flex: 1; }
.gnav .menu { display: flex; align-items: center; gap: 4px; }
.gnav .item { position: relative; }
.gnav .top { background: none; border: none; font-family: inherit; font-size: 15px; color: var(--text-primary); padding: 8px 12px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.gnav .top:hover { background: var(--panel); }
.gnav .top .caret { font-size: 10px; opacity: .6; }
.gnav .dd { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 7px; box-shadow: 0 18px 44px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.gnav .item:hover .dd, .gnav .item:focus-within .dd { opacity: 1; visibility: visible; transform: none; }
.gnav .dd a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--text-primary); font-size: 14px; }
.gnav .dd a:hover { background: var(--bg); color: var(--consensus); }
.gnav .cta { background: var(--agency); color: #1D1D1F; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.gnav .cta:hover { box-shadow: 0 8px 24px rgba(255,200,61,.35); }
.gnav .burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px; }
.gnav .burger span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; margin: 4px 0; transition: transform .25s ease, opacity .25s ease; }

/* mobile sidebar */
.gnav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; z-index: 59; }
.gnav-scrim.open { opacity: 1; visibility: visible; }
.gnav-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 84%); background: var(--panel); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .3s var(--spring, cubic-bezier(.34,1.4,.5,1)); z-index: 60; padding: 14px 16px 24px; overflow-y: auto; }
.gnav-side.open { transform: none; }
.gnav-side .side-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gnav-side .side-close { background: none; border: none; color: var(--text-secondary); font-size: 22px; cursor: pointer; line-height: 1; padding: 6px; }
.gnav-side h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--consensus); margin: 15px 0 2px; }
.gnav-side a { display: block; padding: 9px 4px; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border); font-size: 15px; }
.gnav-side a:active { color: var(--consensus); }
/* CTAs sit apart from the concept links: a boxed group up top, distinct from the plain rows. */
.gnav-side .side-ctas { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.gnav-side .side-cta { display: block; text-align: center; background: var(--agency); color: #1D1D1F; padding: 12px; border-radius: 999px; font-weight: 700; border: none; font-size: 15px; }
.gnav-side .side-ctas .side-cta { margin-top: 0; }
/* App CTA is teal (distinct from the gold Preorder), so the app entry finally gets noticed. */
.gnav .cta.cta-app, .gnav-side .side-cta.cta-app { background: var(--consensus); color: #fff; }
.gnav .cta.cta-app:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--consensus) 40%, transparent); }
/* Floating "Open app" — appears after the hero, fades with scroll. */
.app-fab { position: fixed; right: 18px; bottom: 18px; z-index: 55; background: var(--consensus); color: #fff; padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--consensus) 45%, transparent); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.app-fab.show { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .app-fab { transition: none; } }

@media (max-width: 820px) {
  .gnav .menu { display: none; }
  .gnav .burger { display: block; }
}
@media (max-width: 560px) {
  .gnav-side { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gnav-side, .gnav-scrim, .gnav .dd { transition: none; }
}

/* injected footer nav (js/nav.js) */
.gfoot { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 22px 30px; padding: 8px 0 26px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.gfoot h5 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); margin: 0 0 10px; font-weight: 600; }
.gfoot a { display: block; font-size: 13.5px; color: var(--text-primary); text-decoration: none; padding: 4px 0; }
.gfoot a:hover { color: var(--consensus); }
.gfoot-legal { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-secondary); opacity: .8; max-width: 900px; margin: 0 0 18px; }