/* ----------------------------------------------------------------------------
   XecureLogic — shared site layer: design tokens + header / nav chrome.
   Single source of truth for the fixed header, nav links, burger, mobile menu,
   and the brand color tokens. Linked on every page AFTER the page's inline
   <style> (and after footer.css) so it is authoritative.

   Intentionally does NOT set `body` typography or headings — page-specific
   type/layout stays in each page (e.g. long-form article reading sizes).
   Footer styling lives in footer.css.
   ---------------------------------------------------------------------------- */

:root {
  --blue:#60a5fa;
  --gold:#F3A30F;
  --bg:rgb(5,8,18);
  --surface:rgba(20,28,48,0.4);
  --border:rgba(96,165,250,0.1);
  --muted:#9ca3af;
  /* Kataris product accents */
  --kacc:#818cf8;
  --kaccglow:rgba(129,140,248,0.35);
  --kred:#ef4444;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; }

/* ---- Fixed header + nav ---- */
header { position:fixed; top:0; width:100%; backdrop-filter:blur(20px); background:rgba(5,8,18,0.85); border-bottom:1px solid var(--border); padding:1.4rem 3rem; display:flex; justify-content:space-between; align-items:center; z-index:999; transition:all .3s; }
header.scrolled { padding:1rem 3rem; background:rgba(5,8,18,0.95); }

.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:var(--muted); text-decoration:none; font-weight:600; font-size:0.95rem; transition:color .2s; }
.nav-links a:hover { color:#fff; }
.nav-links a.active { color:#fff; }
.nav-cta { padding:9px 18px; background:var(--blue); color:#fff; border-radius:6px; font-weight:600; transition:background .2s; }
.nav-cta:hover { background:#3b82f6; color:#fff !important; }

/* ---- Burger + mobile menu ---- */
.burger { display:none; flex-direction:column; cursor:pointer; }
.burger div { width:25px; height:3px; background:#fff; margin:4px 0; transition:all .3s; border-radius:3px; }
.burger.active .line1 { transform:rotate(-45deg) translate(-5px,6px); }
.burger.active .line2 { opacity:0; }
.burger.active .line3 { transform:rotate(45deg) translate(-5px,-6px); }

.mobile-menu { position:fixed; top:0; right:-100%; width:80%; max-width:400px; height:100vh; background:rgba(5,8,18,0.98); backdrop-filter:blur(20px); border-left:1px solid var(--border); padding:8rem 3rem 3rem; transition:right .3s ease; z-index:998; overflow-y:auto; }
.mobile-menu.active { right:0; }
.mobile-menu a { display:block; color:#fff; font-size:1.3rem; font-weight:600; padding:1.2rem 0; border-bottom:1px solid var(--border); text-decoration:none; transition:color .2s; }
.mobile-menu a:hover { color:var(--blue); }

@media (max-width:1024px) {
  .nav-links { display:none; }
  .burger { display:flex; }
  header { padding:1.2rem 1.75rem; }
  header.scrolled { padding:1rem 1.75rem; }
}