/* Neith Systems — 2026 redesign
   Design tokens ------------------------------------------------------- */
:root{
  --ink:        #10181a;
  --ink-soft:   #2a3634;
  --paper:      #f1f4f1;
  --paper-raised:#ffffff;
  --line:       #dbe2dc;
  --muted:      #57635f;
  --signal:     #e8712c;   /* amber trace — primary accent */
  --signal-ink: #7a3a10;   /* accent on light, for text use */
  --teal:       #1b6e63;   /* deep signal-teal — secondary accent */
  --teal-soft:  #e4efec;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  --measure: 64ch;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 8px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--signal); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
h1{ font-size:clamp(2.1rem, 3vw + 1rem, 3.3rem); font-weight:500; max-width:16ch; }
h2{ font-size:clamp(1.7rem, 2vw + 1rem, 2.3rem); }
h3{ font-size:1.28rem; font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); max-width:var(--measure); }
.lede{ font-size:1.15rem; color:var(--ink-soft); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:1.4em; height:1px;
  background:var(--signal);
  display:inline-block;
}

.mono{ font-family:var(--font-mono); }
.tnum{ font-variant-numeric:tabular-nums; }

/* Layout shell ---------------------------------------------------------*/
.wrap{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
section{ padding-block:clamp(56px, 9vw, 108px); }
.section-head{ max-width:44rem; margin-bottom:clamp(28px,4vw,48px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* Signal trace: a thin ticked rule marking each section on wide screens */
.trace{
  position:fixed;
  top:0; bottom:0; left:14px;
  width:1px;
  background:repeating-linear-gradient(
    to bottom, var(--line) 0 6px, transparent 6px 14px
  );
  z-index:0;
  display:none;
}
@media (min-width:1280px){ .trace{ display:block; } }

/* Header -----------------------------------------------------------------*/
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
}
.brand{
  font-family:var(--font-display);
  font-size:1.28rem;
  font-weight:600;
  text-decoration:none;
  display:flex; align-items:baseline; gap:.35em;
}
.brand .dot{ color:var(--signal); }
.brand small{
  font-family:var(--font-mono); font-weight:400; font-size:.62rem;
  letter-spacing:.1em; color:var(--muted); text-transform:uppercase;
}
nav.primary ul{
  list-style:none; display:flex; gap:clamp(16px,2.4vw,34px);
  margin:0; padding:0;
}
nav.primary a{
  text-decoration:none; font-size:.92rem; color:var(--ink-soft);
  border-bottom:1px solid transparent; padding-bottom:2px;
}
nav.primary a:hover{ color:var(--ink); border-color:var(--signal); }
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:1.5px; background:var(--ink);
  position:relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
@media (max-width:840px){
  nav.primary{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper-raised); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  nav.primary.open{ max-height:360px; }
  nav.primary ul{ flex-direction:column; padding:20px var(--gutter) 28px; gap:16px; }
  .nav-toggle{ display:flex; }
}

/* Hero ---------------------------------------------------------------- */
.hero{ padding-top:clamp(56px,9vw,108px); }
.hero .grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,5vw,64px);
  align-items:start;
}
@media (max-width:900px){ .hero .grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:.4em; }
.hero h1 em{ font-style:italic; color:var(--teal); }
.hero .lede{ max-width:42ch; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.8rem; }
.btn{
  font-family:var(--font-mono); font-size:.86rem; letter-spacing:.02em;
  padding:.85em 1.4em; border-radius:var(--radius); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5em; border:1px solid transparent;
  transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-ghost{ border-color:var(--line); color:var(--ink); }

/* signal strip: real technical call-outs, mono, tape-like */
.signal-strip{
  border:1px solid var(--line); background:var(--paper-raised);
  border-radius:var(--radius); padding:18px 20px;
  font-family:var(--font-mono); font-size:.8rem; color:var(--muted);
}
.signal-strip .row{
  display:flex; justify-content:space-between; gap:12px;
  padding-block:.55em; border-bottom:1px dashed var(--line);
}
.signal-strip .row:last-child{ border-bottom:0; }
.signal-strip .row b{ color:var(--ink); font-weight:500; }
.signal-strip .tag{ color:var(--signal-ink); }

/* waveform divider, pure CSS bars */
.waveform{
  display:flex; align-items:flex-end; gap:3px; height:34px;
  margin-block:clamp(36px,6vw,64px);
}
.waveform span{
  width:3px; background:var(--line); border-radius:1px; flex:none;
}

/* About ------------------------------------------------------------- */
.about .grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); }
@media (max-width:900px){ .about .grid{ grid-template-columns:1fr; } }
ul.checks{ list-style:none; padding:0; margin:1.2em 0; display:grid; gap:.6em; }
ul.checks li{ display:flex; gap:.6em; color:var(--ink-soft); }
ul.checks li::before{ content:"—"; color:var(--signal); flex:none; }

/* Data / industries --------------------------------------------------- */
.data-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px;
}
.data-card{
  background:var(--paper-raised); padding:26px 24px; display:flex; flex-direction:column; gap:.5em;
  border:1px solid var(--line); border-radius:10px;
  box-shadow:0 1px 2px rgba(16,24,26,.04);
  transition:transform .18s ease, box-shadow .18s ease;
}
.data-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(16,24,26,.08); }
.data-card .domain{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); display:flex; align-items:center; gap:.5em;
}
.data-card .domain i{ color:var(--signal); }
.data-card .stat{
  font-family:var(--font-mono); font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1;
}
.data-card .sub{ font-size:.88rem; color:var(--muted); margin:0; }
.data-card .why{ font-size:.88rem; color:var(--ink-soft); margin:.4em 0 0; padding-top:.6em; border-top:1px dashed var(--line); }
.sources{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); margin-top:1.4rem; }

/* Services / product grids -------------------------------------------- */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(255px,1fr)); gap:18px;
}
.card{
  background:var(--paper-raised); padding:30px 26px; display:flex; flex-direction:column; gap:.7em;
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,26,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(16,24,26,.09); border-color:color-mix(in srgb, var(--signal) 35%, var(--line)); }
.card i.bi{
  font-size:1.25rem; color:var(--signal);
  width:2.6em; height:2.6em; display:flex; align-items:center; justify-content:center;
  background:var(--teal-soft); border-radius:50%;
}
.card h3{ margin-bottom:.1em; }
.card p{ font-size:.94rem; margin-bottom:.3em; }
.card ul{ margin:.2em 0 .5em; padding-left:1.1em; color:var(--ink-soft); font-size:.9rem; }
.card ul li{ margin-bottom:.25em; }
.card .foot{
  margin-top:auto; padding-top:.8em; font-family:var(--font-mono); font-size:.72rem;
  color:var(--muted); border-top:1px dashed var(--line);
}
.card a.more{
  font-family:var(--font-mono); font-size:.8rem; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4em; margin-top:auto; padding-top:.8em;
}
.card a.more:hover{ color:var(--signal); }

/* Contact --------------------------------------------------------------*/
.contact .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); }
@media (max-width:760px){ .contact .grid{ grid-template-columns:1fr; } }
.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.2em; }
.info-list li{ display:flex; gap:.9em; align-items:flex-start; }
.info-list i{ color:var(--signal); font-size:1.15rem; margin-top:.15em; }
.info-list h4{ margin:0 0 .15em; font-family:var(--font-body); font-weight:600; font-size:.98rem; }
.info-list p{ margin:0; color:var(--muted); font-size:.94rem; }
.contact-card{
  background:var(--ink); color:var(--paper); padding:34px 30px; border-radius:var(--radius);
}
.contact-card p{ color:color-mix(in srgb, var(--paper) 78%, transparent); }
.contact-card .btn-primary{ background:var(--signal); color:#1a0e05; }

/* Footer ---------------------------------------------------------------*/
footer.site-footer{ border-top:1px solid var(--line); padding-block:clamp(40px,6vw,64px); }
.footer-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 1em; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6em; }
footer a{ text-decoration:none; color:var(--ink-soft); font-size:.92rem; }
footer a:hover{ color:var(--signal); }
.footer-bottom{
  margin-top:clamp(28px,4vw,44px); padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--font-mono); font-size:.76rem; color:var(--muted);
}

.scroll-top{
  position:fixed; right:18px; bottom:18px; width:42px; height:42px;
  border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;
}
.scroll-top.show{ opacity:1; pointer-events:auto; }

/* Blog ------------------------------------------------------------------*/
.blog-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.blog-card{
  display:flex; flex-direction:column; gap:.5em; text-decoration:none; color:inherit;
  padding:28px 26px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper-raised); box-shadow:0 1px 2px rgba(16,24,26,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(16,24,26,.09); border-color:color-mix(in srgb, var(--signal) 35%, var(--line)); }
.blog-card .meta{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
.blog-card h3{ margin:.1em 0 .1em; }
.blog-card p{ font-size:.92rem; color:var(--ink-soft); margin:0; }

.article{ max-width:68ch; margin-inline:auto; }
.article-meta{ font-family:var(--font-mono); font-size:.8rem; color:var(--muted); margin-bottom:2rem; }
.article h2{ margin-top:1.8em; }
.article h3{ margin-top:1.4em; font-size:1.12rem; }
.article p, .article li{ max-width:none; }
.article ul, .article ol{ margin:0 0 1.2em; padding-left:1.3em; color:var(--ink-soft); }
.article li{ margin-bottom:.4em; }
.article code{
  font-family:var(--font-mono); background:var(--teal-soft); color:var(--teal);
  padding:.15em .45em; border-radius:4px; font-size:.86em;
}
.article blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.2em; border-left:2px solid var(--signal);
  color:var(--ink-soft); font-style:italic;
}