/* ════════════════════════════════════════════
   Blitz — shared site navigation
   Used by every page via nav.js. Relies on each
   page's :root tokens (with safe fallbacks).
   ════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px 40px;
  background: linear-gradient(180deg, rgba(5,5,6,0.92), rgba(5,5,6,0.55) 70%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: 'Satoshi', 'Inter', sans-serif;
  transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled { padding-top: 9px; padding-bottom: 9px;
  background: rgba(8,8,10,0.9); box-shadow: 0 14px 34px -18px rgba(0,0,0,0.7); }
.nav a { text-decoration: none; color: inherit; }

.nav__logo { justify-self: start; display: inline-flex; }
.nav__logo img { height: 44px; width: auto; display: block; transition: height .3s ease; }
.nav.is-scrolled .nav__logo img { height: 36px; }

/* ── center menu ── */
.nav__menu { justify-self: center; display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__item > a,
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 14px; font-weight: 300; letter-spacing: 0.3px;
  color: var(--muted, rgba(252,253,255,0.55)); background: none; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 9999px; position: relative; transition: color .25s ease, background .25s ease;
}
.nav__item > a:hover, .nav__trigger:hover,
.nav__item.is-active > a, .nav__item.is-active > .nav__trigger { color: var(--ink, #fcfdff); }
/* animated underline indicator */
.nav__item > a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--brand-bright, #A88BCC); box-shadow: 0 0 10px rgba(168,139,204,0.55);
  transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.nav__item > a:hover::after, .nav__item.is-active > a::after { transform: scaleX(1); }
@media (max-width: 980px) { .nav__item > a::after { display: none; } }
.nav__caret { transition: transform .25s ease; opacity: 0.7; }
.nav__item:hover .nav__caret, .nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* ── dropdown panel ── */
.nav__item.has-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* hover bridge */
.drop {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 320px; padding: 10px; border-radius: 16px;
  background: rgba(14,14,18,0.96); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(139,107,174,0.08);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .25s ease, transform .25s ease;
}
.drop--sm { min-width: 260px; }
.nav__item:hover .drop, .nav__item:focus-within .drop, .nav__item.is-open .drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.drop__item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; transition: background .2s ease; }
.drop__item:hover { background: rgba(139,107,174,0.14); }
.drop__t { font-size: 14px; color: var(--ink, #fcfdff); font-weight: 400; }
.drop__d { font-size: 12px; color: var(--faint, rgba(252,253,255,0.4)); }
.drop__sep { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 6px; }
.drop__more { display: block; padding: 11px 14px; font-size: 13px; color: var(--brand-bright, #A88BCC); transition: color .2s ease; }
.drop__more:hover { color: #fff; }

/* social rows (Support Us) */
.drop__head { padding: 8px 14px 6px; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint, rgba(252,253,255,0.4)); }
.drop__social { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; transition: background .2s ease; }
.drop__social:hover { background: rgba(139,107,174,0.14); }
.drop__social .ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline, rgba(255,255,255,0.1)); color: var(--ink, #fcfdff); transition: border-color .2s ease, color .2s ease; }
.drop__social:hover .ic { border-color: rgba(139,107,174,0.5); color: var(--brand-bright, #A88BCC); }
.drop__social .tx { display: flex; flex-direction: column; line-height: 1.25; }
.drop__social .tx b { font-size: 14px; font-weight: 400; color: var(--ink, #fcfdff); }
.drop__social .tx span { font-size: 12px; color: var(--faint, rgba(252,253,255,0.4)); }

/* footer social icons (shared) */
.footer__social { display: inline-flex; align-items: center; gap: 16px; }
.footer__social a { display: inline-flex; }

/* ════════════════════════════════════════════
   Shared site footer — logo left, links right
   ════════════════════════════════════════════ */
.site-footer { position: relative; border-top: 1px solid var(--hairline, rgba(255,255,255,0.08));
  background: transparent; padding: clamp(56px,8vw,80px) 40px 28px; font-family: 'Satoshi', 'Inter', sans-serif; }
.sf-inner { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; gap: 56px; flex-wrap: wrap; }
.sf-brand { max-width: 280px; }
.sf-brand img { height: 34px; width: auto; opacity: 0.92; }
.sf-brand p { color: var(--muted, rgba(252,253,255,0.5)); font-size: 13px; line-height: 1.65; margin: 16px 0 18px; }
.sf-social { display: flex; gap: 12px; }
.sf-social a { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline, rgba(255,255,255,0.08)); color: var(--muted, rgba(252,253,255,0.5));
  transition: color .25s ease, border-color .25s ease, transform .25s ease; }
.sf-social a:hover { color: var(--brand-bright, #A88BCC); border-color: rgba(139,107,174,0.5); transform: translateY(-2px); }
.sf-cols { display: flex; gap: clamp(36px,6vw,72px); flex-wrap: wrap; }
.sf-col h4 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint, rgba(252,253,255,0.4)); margin: 0 0 16px; font-weight: 600; }
.sf-col a { display: block; font-size: 14px; color: var(--muted, rgba(252,253,255,0.55)); margin-bottom: 12px; transition: color .2s ease; }
.sf-col a:hover { color: var(--ink, #fcfdff); }
.sf-bottom { max-width: 1120px; margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--hairline, rgba(255,255,255,0.08));
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 12px; color: var(--faint, rgba(252,253,255,0.4)); }
.sf-bottom a { color: var(--faint, rgba(252,253,255,0.4)); transition: color .2s ease; }
.sf-bottom a:hover { color: var(--ink, #fcfdff); }
@media (max-width: 760px) {
  .site-footer { padding: 48px 22px 24px; }
  .sf-inner { flex-direction: column; gap: 36px; }
  .sf-cols { gap: 32px; }
}

/* ── right actions ── */
.nav__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav__signin {
  font-size: 13px; letter-spacing: 0.5px; padding: 9px 22px; border-radius: 9999px;
  border: 1px solid var(--hairline, rgba(255,255,255,0.14)); color: var(--ink, #fcfdff);
  transition: background .3s ease, border-color .3s ease;
}
.nav__signin:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
.nav a.nav__demo {
  font-size: 13px; letter-spacing: 0.5px; padding: 10px 22px; border-radius: 9999px;
  background: var(--ink, #fcfdff); color: #000; font-weight: 500; transition: transform .3s ease, background .3s ease;
}
.nav a.nav__demo:hover { transform: translateY(-1px); background: #fff; color: #000; }

/* ── mobile toggle ── */
.nav__toggle {
  display: none; justify-self: end; background: none; border: 0; cursor: pointer;
  color: var(--ink, #fcfdff); padding: 8px;
}

/* ════════ MOBILE ════════ */
@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; padding: 12px 20px; row-gap: 6px; }
  .nav__toggle { display: inline-flex; }
  .nav__menu, .nav__actions { grid-column: 1 / -1; }
  .nav__menu { display: none; flex-direction: column; align-items: stretch; gap: 0; justify-self: stretch; margin-top: 8px; }
  .nav.is-open .nav__menu { display: flex; }
  .nav__item > a, .nav__trigger { width: 100%; justify-content: space-between; font-size: 16px; padding: 14px 8px; }
  .drop {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 8px 12px; display: none;
  }
  .nav__item.is-open .drop { display: block; }
  .drop__item { padding: 10px 8px; }
  .nav__actions { display: none; justify-self: stretch; gap: 10px; margin-top: 4px; padding-bottom: 8px; }
  .nav.is-open .nav__actions { display: flex; }
  .nav__signin, .nav__demo { flex: 1; text-align: center; }
}