/* v5 header and footer for the pages on site.css (About, Contact,
   Privacy). Mirrors the home page's header and footer in styles.css; keep
   the two in step. Tokens live on .hdr/.ftr because site.css names its own
   tokens differently (its --ink is dark).
   Breakpoints: 1140px hides the header pill, 940px hides the header links. */
.hdr, .ftr {
  --c-bg: #0B1220; --c-card: #1E293B; --c-ink: #F8FAFC; --c-dim: #9CA3AF;
  --c-green: #34D399; --c-green-hi: #6EE7B7;
  --c-pad: clamp(18px, 4vw, 36px); --c-disp: Oxanium, system-ui, sans-serif;
  font-family: Inter, system-ui, sans-serif;
}
.hdr { position: sticky; top: 0; z-index: 30; background: rgba(11, 18, 32, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-card); transition: box-shadow .3s; }
.hdr.scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }
.hdr-in { max-width: 1240px; margin: 0 auto; padding: 14px var(--c-pad); display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; }
.hdr .brand, .ftr .brand { display: flex; align-items: center; gap: 10px; color: var(--c-ink); font-family: var(--c-disp); font-weight: 700; font-size: 20px; letter-spacing: .12em; white-space: nowrap; }
.hdr .brand:hover, .ftr .brand:hover { color: var(--c-ink); }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-green); }
.ftr .brand.small { font-size: 18px; } .brand.small .dot { width: 10px; height: 10px; }
.hdr .pill, .ftr .pill { flex: none; display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--c-green); color: var(--c-green); font-family: var(--c-disp); font-weight: 700; font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
.ftr .pill.small { padding: 5px 10px; font-size: 10.5px; }
.hdr .grow { flex: 1; }
.hdr-nav { display: flex; gap: 22px; white-space: nowrap; font-size: 14px; font-weight: 600; }
.hdr-nav a { color: var(--c-dim); }
.hdr-nav a:hover, .hdr-nav a[aria-current="page"] { color: var(--c-ink); }
.hdr-cta { flex: none; white-space: nowrap; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--c-green); color: var(--c-bg); display: flex; align-items: center; font-family: var(--c-disp); font-weight: 700; font-size: 14px; letter-spacing: .06em; transition: background .2s, transform .12s; }
.hdr-cta:hover { background: var(--c-green-hi); color: var(--c-bg); }
.hdr-cta:active { transform: scale(.96); }
@media (max-width: 1139px) { .hdr .hdr-pill { display: none; } }
@media (max-width: 939px) { .hdr .hdr-nav { display: none; } }

.ftr { max-width: 1240px; margin: 0 auto; padding: 40px var(--c-pad) 48px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.ftr-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ftr-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.ftr-links a { color: var(--c-dim); }
.ftr-links a:hover { color: var(--c-ink); }
.ftr-rule { border-top: 1px solid var(--line, #273449); }
@media (prefers-reduced-motion: reduce) { .hdr, .hdr-cta { transition: none; } .hdr-cta:active { transform: none; } .hdr.scrolled { box-shadow: none; } }
/* site.css padded these for its old fixed header; the sticky header takes its own space. */
.page { padding-top: 56px; }
.about-hero { padding-top: clamp(72px, 10vw, 128px); }
/* Primary buttons match the home page's green pill (styles.css .btn-green). */
.btn-primary { height: 56px; padding: 0 26px; border-radius: 999px; font-family: Oxanium, system-ui, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .06em; }
.btn-primary:active { transform: scale(.97); }