/* ════════════════════════════════════════════════════════════════
   NATIIV · shared shell — tokens, nav, neural substrate, buttons,
   reveal system. Used by the product pages (ContAIx, MetrAIx).
   Mirrors the homepage shell so every surface feels continuous.
   DM Serif Display (400 only) · DM Sans · JetBrains Mono
   ════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --bg:           #FFFFFF;
  --bg-panel:     #F6F6F7;
  --bg-elev:      #FFFFFF;
  --bg-deep:      #EEEEEF;
  /* lines */
  --line:         rgba(21,21,27,0.08);
  --line-strong:  rgba(21,21,27,0.18);
  /* ink */
  --ink:          #15151B;
  --ink-2:        #5C5C68;
  --ink-3:        #9A9AA6;
  /* accent — mineral cobalt */
  --accent:       #2C4470;
  --accent-2:     #3D5A94;
  --accent-dim:   rgba(44,68,112,0.5);
  --accent-bg:    rgba(44,68,112,0.07);
  --accent-glow:  rgba(44,68,112,0.18);
  /* warm bridge color */
  --warm:         #C28E4A;
  --warm-soft:    rgba(194,142,74,0.14);

  --serif:'DM Serif Display',Georgia,serif;
  --sans:'DM Sans','Google Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.6;
  overflow-x:hidden;
}

/* DM Serif Display ships at 400 only — never let it synthesize bold */
h1,h2,h3,h4,h5,h6{font-weight:400;}
.serif,.display{font-weight:400 !important;}

/* ── global canvas: the living neural substrate behind everything ── */
#neural-bg{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.92;}

/* faint engineering grid */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(21,21,27,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,21,27,0.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, black 20%, transparent 80%);
}

/* scroll progress rail */
#scroll-rail{
  position:fixed; top:0; left:0; height:2px; z-index:60; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--warm));
  transition:width 0.1s linear; box-shadow:0 0 12px var(--accent-glow);
}

/* ── TYPOGRAPHY ── */
.display{font-family:var(--serif); letter-spacing:-0.02em; line-height:1.04;}
.mono{font-family:var(--mono); letter-spacing:0.01em;}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3);}
.label{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);}

/* ── NAV ── */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color 0.4s, background 0.4s, padding 0.4s;
}
nav.scrolled{border-bottom-color:var(--line); padding:12px 40px; background:rgba(255,255,255,0.9);}
.logo{font-family:var(--serif); font-size:21px; letter-spacing:0.01em; color:var(--ink); display:flex; align-items:center; gap:2px; cursor:pointer; text-decoration:none;}
.logo .dot{color:var(--accent); display:inline-block; animation:logoPulse 3s ease-in-out infinite;}
@keyframes logoPulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; position:relative; transition:color 0.2s; padding:4px 0;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--accent); transition:width 0.3s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.current::after{width:100%;}
.nav-links a.current{color:var(--ink);}
.nav-cta{
  font-family:var(--sans) !important; font-weight:500;
  padding:9px 18px; border-radius:999px;
  background:var(--ink); color:var(--bg) !important;
  text-transform:none !important; letter-spacing:0 !important;
  font-size:13px !important; transition:background 0.25s, transform 0.25s; white-space:nowrap;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--accent); transform:translateY(-1px);}
@media (max-width:880px){.nav-links a:not(.nav-cta){display:none;}}

/* ── SECTION SHELL ── */
section{position:relative; z-index:2; padding:140px 40px; border-bottom:1px solid var(--line);}
.container{max-width:var(--maxw); margin:0 auto; position:relative;}
.section-num{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.18em; margin-bottom:48px; display:flex; align-items:center; gap:14px;}
.section-num::after{content:''; flex:1; height:1px; background:var(--line); max-width:140px;}
.section-num .blink{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:blink 1.4s steps(2) infinite;}
@keyframes blink{0%,50%{opacity:1;}51%,100%{opacity:0.15;}}

/* ════════ buttons ════════ */
.btn{font-family:var(--sans); font-size:14px; font-weight:500; padding:14px 24px; border-radius:999px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:1px solid transparent; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; white-space:nowrap;}
.btn .arrow{font-family:var(--mono); transition:transform 0.25s;}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{background:var(--ink); color:var(--bg);}
.btn-primary:hover{background:var(--accent); transform:translateY(-2px); box-shadow:0 12px 28px -12px var(--accent-glow);}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-secondary:hover{border-color:var(--ink); background:rgba(21,21,27,0.04);}
.btn-primary::before{content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); transition:left 0.5s ease;}
.btn-primary:hover::before{left:140%;}

/* ════════ reveal system ════════ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1);}
.reveal.is-visible{opacity:1; transform:none;}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal-stagger.is-visible > *{opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:0.05s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:0.12s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:0.19s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:0.26s;}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:0.33s;}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:0.40s;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:0.01ms !important;}
  .reveal,.reveal-stagger>*{opacity:1; transform:none;}
}