/* Neoteric Analytics - shared design system
   Tokens, base type, buttons, nav, reveal system, footer.
   Loaded by every page. Page-specific rules live alongside it. */

/* ============================================================
   NEOTERIC ANALYTICS — brand tokens
   Palette is fixed by the brand guide. Bright green #3EFE1D is an
   accent for small shapes, rules and fills only — never body copy
   on light ground. No gradients outside the 3D canvases.
   ============================================================ */
:root{
  --green:      #3EFE1D;
  --fir:        #2F5B44;
  --fir-deep:   #16281F;
  --ink:        #060B08;
  --white:      #FFFFFF;
  --paper:      #F4F4F2;
  --grey:       #6B6B6B;
  --grey-fill:  #E8E8E8;
  --mint:       #CFE0D8;

  --line-light: #E2E2DE;
  --line-dark:  rgba(207,224,216,.14);

  --shell: 1280px;
  --gut: clamp(22px, 5vw, 72px);
  --sec: clamp(88px, 11vw, 172px);

  --ease: cubic-bezier(.22,.8,.28,1);
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.03em; line-height:1.06; }
p{ margin:0; }
::selection{ background:var(--green); color:var(--ink); }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--gut); }
.sec{ position:relative; padding:var(--sec) 0; }

/* ---------- typographic system ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:.695rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--grey);
}
.eyebrow::before{
  content:''; width:6px; height:6px; background:var(--green);
  flex:none; transform:rotate(45deg);
}
.on-dark .eyebrow{ color:rgba(207,224,216,.62); }

.h-display{ font-size:clamp(2.55rem, 6.4vw, 5.1rem); letter-spacing:-.042em; line-height:1.0; }
.h-sec{ font-size:clamp(1.95rem, 4.1vw, 3.25rem); letter-spacing:-.034em; }
.lead{ font-size:clamp(1.02rem,1.35vw,1.14rem); line-height:1.62; color:var(--grey); }
.on-dark .lead{ color:var(--mint); }
.measure{ max-width:56ch; }

/* ---------- buttons ----------
   The two pill CTAs (fill/ghost) carry the arrow in its own circular badge
   at the trailing edge -- that badge is what reads as "rounded" here, not
   just the outer corner radius. btn-line is a different, plainer species
   (an underlined text link, e.g. "Browse all case studies") that happens to
   share the base .btn box model -- it explicitly opts back out of the pill
   treatment below so it doesn't inherit a badge or rounded corners it was
   never meant to have. */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--body); font-size:.9rem; font-weight:600; letter-spacing:-.005em;
  padding:6px 6px 6px 26px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn .arw{ transition:transform .34s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }
.btn-fill, .btn-ghost{ }
.btn-fill .arw, .btn-ghost .arw{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:50%;
  transition:transform .34s var(--ease), border-color .3s var(--ease);
}
.btn-fill{ background:var(--green); color:var(--ink); }
.btn-fill .arw{ background:var(--ink); color:var(--green); }
.btn-fill:hover{ background:var(--white); }
.btn-ghost{ border-color:rgba(207,224,216,.28); color:var(--white); }
.btn-ghost .arw{ background:transparent; border:1px solid rgba(207,224,216,.28); color:var(--white); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-ghost:hover .arw{ border-color:var(--green); color:var(--green); }
.btn-line{
  padding:14px 0; border-radius:0; border-bottom:1px solid var(--line-light); color:var(--fir);
}
.btn-line:hover{ border-color:var(--green); }

/* ---------- scroll progress ---------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:120;
  transform:scaleX(0); transform-origin:0 50%; background:var(--green);
  will-change:transform;
}

/* ---------- navigation ---------- */
#nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px var(--gut);
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.stuck{
  padding:12px var(--gut);
  background:rgba(6,11,8,.72); backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:rgba(207,224,216,.1);
}
.mark{ display:block; flex:none; line-height:0; }
.mark img{ height:27px; width:auto; transition:height .4s var(--ease); }
#nav.stuck .mark img{ height:23px; }
@media(max-width:520px){ .mark img{ height:21px; } }
.nav-links{ display:none; align-items:center; gap:34px; font-size:.855rem; color:rgba(207,224,216,.78); }
.nav-links a{ position:relative; padding:4px 0; transition:color .25s var(--ease); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .38s var(--ease);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ transform:scaleX(1); }
@media(min-width:900px){ .nav-links{ display:flex; } }
.nav-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.83rem; font-weight:500; color:var(--white);
  border:1px solid rgba(207,224,216,.28); border-radius:999px;
  padding:10px 20px; white-space:nowrap;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
/* Bare icons here, not badged -- unlike the hero buttons' circles, the
   reference shows this pill's own outline as the only rounding. */
.nav-cta .ico, .nav-cta .arw{ display:inline-flex; align-items:center; justify-content:center; flex:none; }
.nav-cta .arw{ transition:transform .34s var(--ease); }
.nav-cta:hover{ border-color:var(--green); color:var(--green); }
.nav-cta:hover .arw{ transform:translateX(3px); }

/* ---------- reveal system ---------- */
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].seen{ opacity:1; transform:none; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer{ background:var(--ink); color:var(--white); padding:clamp(80px,10vw,132px) 0 40px; }
.foot-cta{ display:grid; gap:38px; align-items:end; padding-bottom:clamp(56px,7vw,84px); border-bottom:1px solid var(--line-dark); }
@media(min-width:900px){ .foot-cta{ grid-template-columns:1.2fr .8fr; } }
.foot-cta h2{ font-size:clamp(2rem,4.4vw,3.35rem); letter-spacing:-.035em; max-width:16ch; }
.foot-cta p{ margin-top:20px; color:var(--mint); font-size:1.02rem; line-height:1.62; max-width:44ch; }
.foot-side{ display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
@media(min-width:900px){ .foot-side{ align-items:flex-end; } }
.foot-mail{ font-family:var(--display); font-size:clamp(1rem,1.7vw,1.26rem); font-weight:500; letter-spacing:-.025em; border-bottom:1px solid rgba(207,224,216,.28); padding-bottom:5px; transition:border-color .3s var(--ease), color .3s var(--ease); }
.foot-mail:hover{ color:var(--green); border-color:var(--green); }

.foot-cols{ display:grid; gap:36px; padding:clamp(44px,5vw,64px) 0; }
@media(min-width:720px){ .foot-cols{ grid-template-columns:repeat(4,1fr); } }
.foot-cols h4{ font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:rgba(207,224,216,.45); margin-bottom:16px; }
.foot-cols a, .foot-cols span{ display:block; font-size:.915rem; color:rgba(207,224,216,.78); padding:5px 0; transition:color .25s var(--ease); }
.foot-cols a:hover{ color:var(--green); }
.foot-mark{ height:20px; width:auto; opacity:.9; }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-top:26px; border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-size:.645rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(207,224,216,.4);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .lat-draw{ stroke-dashoffset:0 !important; }
  .lat-node,.lat-core{ opacity:1 !important; }
}