/* ============================================================
   XINIX — shared chrome (header, footer, floating contact).

   Self-contained on purpose. products.html and parallel-bar.html
   are built on stage.css, and dropping the whole of works.css
   over them would restyle body, headings and links underneath a
   working catalogue. This file carries its own tokens and only
   touches the chrome, so those pages get the same header and
   footer as the rest of the site with nothing else disturbed.
   ============================================================ */

.nav, .foot, .float {
  --c-void:  #04070E;
  --c-raise: #17233F;
  --c-ink:   #F4F7FF;
  --c-ink-2: rgba(226,235,255,0.72);
  --c-ink-3: rgba(226,235,255,0.46);
  --c-line:  rgba(140,170,235,0.16);
  --c-line-2:rgba(140,170,235,0.30);
  --c-ember: #F5794E;
  --c-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --c-disp:  "Sora", system-ui, sans-serif;
  --c-gut:   clamp(20px, 5vw, 74px);
}

/* ── header ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 26px;
  padding: 16px var(--c-gut);
  background: rgba(4,7,14,0.74); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
  font-family: "Inter", system-ui, sans-serif;
}
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none;
              margin-right: auto; color: var(--c-ink); }
.nav .brand img { height: 30px; width: auto; display: block; }
.nav .brand b { font-family: var(--c-disp); font-weight: 700; letter-spacing: 0.17em; font-size: 15px; }
.nav .links { display: none; gap: 28px; }
.nav .links a { text-decoration: none; color: var(--c-ink-2); font-size: 14px; transition: color .14s; }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--c-ink); }
.nav .tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); }
.nav .tel svg { color: var(--c-ember); flex: none; }
.nav .tel span { display: flex; flex-direction: column; line-height: 1.14; }
.nav .tel i { font-family: var(--c-mono); font-style: normal; font-size: 9px;
              letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-3); }
.nav .tel b { font-family: var(--c-mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.nav .tel:hover b { color: var(--c-ember); }
.nav .wa {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: #12A854; color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 11px 18px; border-radius: 2px;
}
@media (min-width: 1000px) { .nav .links { display: flex; } }
@media (max-width: 719px) {
  .nav { gap: 12px; }
  .nav .tel i { display: none; }
  .nav .tel b { font-size: 13px; }
  .nav .wa span { display: none; }
  .nav .wa { padding: 11px 13px; }
}

/* ── footer ─────────────────────────────────────────────── */
.foot {
  background: var(--c-void); color: var(--c-ink-2);
  border-top: 1px solid var(--c-line);
  padding: 34px 0 44px;
  font-family: "Inter", system-ui, sans-serif;
}
.foot .wrap { max-width: 1560px; margin: 0 auto; padding: 0 var(--c-gut); }
.foot .r { display: flex; flex-wrap: wrap; gap: 14px 34px;
           justify-content: space-between; align-items: baseline; }
.foot a { color: var(--c-ink-3); text-decoration: none; font-size: 13.5px; }
.foot a:hover { color: var(--c-ember); }
.foot .tel { color: var(--c-ink); font-family: var(--c-mono); font-weight: 600; font-size: 14px; }
.foot .code { font-family: var(--c-mono); font-size: 10.5px; letter-spacing: 0.16em;
              text-transform: uppercase; color: var(--c-ink-3); }
.foot .sitemap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-line);
                 line-height: 2.1; font-size: 12.5px; }
.foot .sitemap a { font-size: 12.5px; }

/* ── floating contact ───────────────────────────────────── */
.float { position: fixed; right: 16px; bottom: 16px; z-index: 80;
         display: flex; flex-direction: column; gap: 10px; }
.float a { display: grid; place-content: center; width: 52px; height: 52px;
           border-radius: 50%; box-shadow: 0 10px 26px rgba(0,0,0,0.5);
           transition: transform .15s ease; text-decoration: none; }
.float a:hover { transform: translateY(-3px); }
.float .wa { background: #12A854; color: #fff; }
.float .tel { background: var(--c-raise); color: var(--c-ink); border: 1px solid var(--c-line-2); }

/* Full company name beside the mark — "XINIX INNOVATIONS" */
.nav .brand b, .st-nav .brand b { display: inline-flex; align-items: baseline; gap: .42em; white-space: nowrap; }

/* Header wordmark: full name stacked (matches works.css treatment). */
.nav .brand b.wm { display: flex; flex-direction: column; justify-content: center; line-height: 1; gap: 4px; }
.nav .brand b.wm span:first-child { font-size: 15px; letter-spacing: 0.17em; }
.nav .brand b.wm span:last-child {
  font-size: 8.5px; letter-spacing: 0.30em; font-weight: 600;
  text-transform: uppercase; color: var(--c-ink-2); }
@media (max-width: 420px) { .nav .brand b.wm span:last-child { display: none; } }