/* Voxetta Labs shared header + footer. Loaded on every page.
   Everything is prefixed .vx- so it never collides with page styles. */
.vx-header, .vx-footer {
  --vx-bg: #080a0e;
  --vx-panel: #13161d;
  --vx-line: rgba(255,255,255,0.08);
  --vx-text: #f4f5f7;
  --vx-soft: #a3aab6;      /* 7:1 on --vx-bg, passes AA for small text */
  --vx-gl: #0a84ff;
  --vx-jh: #f5c842;
  --vx-cl: #2dd4bf;
  --vx-display: 'DM Serif Display', Georgia, serif;
  --vx-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-family: var(--vx-body);
  color: var(--vx-text);
  -webkit-font-smoothing: antialiased;
}
.vx-header *, .vx-footer * { box-sizing: border-box; margin: 0; padding: 0; }
.vx-header a, .vx-footer a { color: inherit; text-decoration: none; }
.vx-header :focus-visible, .vx-footer :focus-visible { outline: 2px solid var(--vx-gl); outline-offset: 3px; border-radius: 6px; }

.vx-skip { position: absolute; left: 12px; top: -48px; z-index: 300; background: var(--vx-text); color: var(--vx-bg) !important; padding: 8px 14px; border-radius: 8px; font: 600 14px var(--vx-body); }
.vx-skip:focus { top: 12px; }

/* Header */
.vx-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(8,10,14,0.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vx-line);
}
.vx-bar { max-width: 1120px; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.vx-logo { padding: 10px 0; font-family: var(--vx-display); font-size: 20px; letter-spacing: 0.01em; white-space: nowrap; margin-right: auto; }
.vx-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.vx-link, .vx-apps-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  font: 500 14px var(--vx-body); color: var(--vx-soft); background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.vx-link:hover, .vx-apps-btn:hover, .vx-apps-btn[aria-expanded="true"] { color: var(--vx-text); background: rgba(255,255,255,0.05); }
.vx-link[aria-current="page"] { color: var(--vx-text); }
.vx-chev { width: 10px; height: 10px; transition: transform .15s; }
.vx-apps-btn[aria-expanded="true"] .vx-chev { transform: rotate(180deg); }

.vx-apps { position: relative; }
.vx-apps-menu {
  position: absolute; top: calc(100% + 10px); left: -8px; width: 300px; padding: 8px;
  background: var(--vx-panel); border: 1px solid var(--vx-line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45); list-style: none;
}
.vx-apps-menu[hidden] { display: none; }
.vx-app { display: grid; grid-template-columns: 10px 1fr; column-gap: 12px; padding: 10px 12px; border-radius: 10px; }
.vx-app:hover, .vx-app[aria-current="page"] { background: rgba(255,255,255,0.05); }
.vx-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; grid-row: span 2; }
.vx-app-name { font: 600 15px var(--vx-body); color: var(--vx-text); }
.vx-app-desc { font-size: 13px; color: var(--vx-soft); line-height: 1.4; }

.vx-cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  font: 600 14px var(--vx-body); color: #080a0e !important; white-space: nowrap;
}
.vx-cta:hover { filter: brightness(1.08); }

.vx-menu-btn { display: none; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--vx-text); cursor: pointer; }
.vx-menu-btn svg { width: 22px; height: 22px; }

.vx-mobile { border-top: 1px solid var(--vx-line); padding: 12px 24px 20px; }
.vx-mobile[hidden] { display: none; }
.vx-mobile-group { font-size: 13px; color: var(--vx-soft); padding: 12px 0 4px; }
.vx-mobile a { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--vx-line); }
.vx-mobile a:last-child { border-bottom: 0; }

@media (max-width: 760px) {
  .vx-bar { height: 58px; padding: 0 16px; gap: 10px; }
  .vx-links { display: none; }
  .vx-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .vx-cta { height: 34px; padding: 0 14px; font-size: 13px; }
}

/* Footer */
.vx-footer { background: var(--vx-bg); border-top: 1px solid var(--vx-line); margin-top: 96px; }
.vx-foot { max-width: 1120px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.vx-foot-logo { display: inline-block; padding: 6px 0; font-family: var(--vx-display); font-size: 22px; }
.vx-foot-tag { font-size: 14px; color: var(--vx-soft); line-height: 1.55; margin-top: 10px; max-width: 30ch; }
.vx-foot h2 { font: 600 14px var(--vx-body); color: var(--vx-text); margin-bottom: 14px; }
.vx-foot ul { list-style: none; display: grid; gap: 2px; }
.vx-foot li a { display: inline-block; padding: 7px 0; font-size: 14px; color: var(--vx-soft); }
.vx-foot li a:hover { color: var(--vx-text); }
.vx-legal { max-width: 1120px; margin: 0 auto; padding: 20px 24px 32px; border-top: 1px solid var(--vx-line); font-size: 13px; color: var(--vx-soft); }
@media (max-width: 760px) {
  .vx-foot { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 44px; }
  .vx-foot-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { .vx-chev { transition: none; } }