/* NasrTech shared site chrome: one header and one footer for every page.
   Self-contained (no dependency on blog.css or the Tailwind builds) and
   namespaced under .nt- so it can sit on the dark home page and the light
   blog/tool pages alike. Markup lives in each page; keep it identical. */
.nt-header,.nt-footer{
  --nt-bg:#0b0d12; --nt-line:#1c2230; --nt-ink:#eef2f8; --nt-dim:#9aa6b8; --nt-accent:#4aa8ff;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--nt-bg); color:var(--nt-ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-align:start;
}
.nt-header *,.nt-footer *{box-sizing:border-box}
.nt-header a,.nt-footer a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.nt-header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--nt-line)}
.nt-bar{max-width:1180px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:22px}
.nt-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.12rem;letter-spacing:-.01em;flex:none}
.nt-brand img{width:28px;height:28px;display:block}
.nt-brand b{color:var(--nt-accent);font-weight:800}
.nt-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap}
.nt-nav::-webkit-scrollbar{display:none}
.nt-nav a{padding:8px 12px;border-radius:9px;font-size:.92rem;font-weight:600;color:var(--nt-dim);flex:none;
  transition:color .15s,background .15s}
.nt-nav a:hover,.nt-nav a:focus-visible{color:var(--nt-ink);background:#161b26}
.nt-nav a[aria-current="page"]{color:var(--nt-ink)}
.nt-nav a.nt-cta{color:#06121f;background:var(--nt-accent);margin-inline-start:8px}
.nt-nav a.nt-cta:hover,.nt-nav a.nt-cta:focus-visible{background:#74bcff;color:#06121f}
.nt-header a:focus-visible,.nt-footer a:focus-visible{outline:2px solid var(--nt-accent);outline-offset:2px}
@media (max-width:720px){
  /* phones: brand on one row, every link visible on the next; the header scrolls away instead of eating the screen */
  .nt-header{position:static}
  .nt-bar{flex-wrap:wrap;height:auto;padding:10px 14px 6px;gap:4px 10px}
  .nt-brand{font-size:1.02rem}
  .nt-nav{flex:1 0 100%;margin:0 -6px;justify-content:space-between}
  .nt-nav a{padding:7px 6px;font-size:.86rem}
  .nt-nav a.nt-cta{margin-inline-start:0;padding:6px 10px}
}

/* ---------- footer ---------- */
.nt-footer{border-top:1px solid var(--nt-line);margin-top:0;padding:44px 0 26px;font-size:.92rem}
.nt-foot{max-width:1180px;margin:0 auto;padding:0 20px}
.nt-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
.nt-about p{color:var(--nt-dim);margin:.7rem 0 0;max-width:34ch}
.nt-about .nt-by{margin-top:.8rem;color:var(--nt-ink)}
.nt-about .nt-by a{color:var(--nt-accent)}
.nt-col h2{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--nt-dim);margin:0 0 .75rem;font-weight:700}
.nt-col a{display:block;padding:.26rem 0;color:#cfd6e2}
.nt-col a:hover{color:var(--nt-accent)}
.nt-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;justify-content:space-between;
  margin-top:32px;padding-top:18px;border-top:1px solid var(--nt-line);color:var(--nt-dim);font-size:.84rem}
.nt-legal nav{display:flex;flex-wrap:wrap;gap:.3rem 1.05rem}
.nt-legal a:hover{color:var(--nt-ink)}
@media (max-width:900px){.nt-cols{grid-template-columns:1fr 1fr 1fr}.nt-about{grid-column:1/-1}}
@media (max-width:560px){.nt-cols{grid-template-columns:1fr 1fr;gap:22px 18px}.nt-footer{padding:34px 0 22px}}

/* product pages keep their own sticky product nav: the site header scrolls away there */
.nt-header.nt-static{position:static}