/* ============================================================
   Shared design system — SINGLE SOURCE OF TRUTH.
   Linked by index.html and every sector, workflow and user-guide
   page (before their page-specific CSS). Holds the design tokens
   and the truly global primitives so they are defined ONCE and
   never drift between pages.

   Pages may override the few things that legitimately differ
   (e.g. content pages use a looser body line-height). The header
   lives in header.css; fonts in fonts.css; viewer.html is a
   standalone app and intentionally does not use this file.
   ============================================================ */
:root{
  --bg:#07090c; --bg2:#0a0d12; --panel:#0d1117; --panel2:#11161e;
  --ink:#eef3f2; --muted:#8b95a3; --faint:#586173; --line:rgba(255,255,255,.08);
  --neon:#35ffa3; --neon2:#7bffc0; --neon-dim:#1fa673;
  --glow:0 0 40px rgba(53, 255, 163,.30);
  --maxw:1240px; --navh:70px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Manrope","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}

/* reset + base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--navh);font-size:17px;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.02em}

/* layout + utilities */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.neon{color:var(--neon)}
.mono{font-family:var(--mono)}

/* dotted grid background */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;mask:radial-gradient(120% 120% at 50% 0%,#000 30%,transparent 75%)}

/* labels */
.label{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--neon);display:inline-flex;align-items:center;gap:10px}
.label::before{display:none}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(30px);transition:.7s cubic-bezier(.16,.84,.44,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

/* buttons — angled corners; border drawn as a ring on ::before so it follows
   the diagonal cuts all the way around (a real border would be clipped off at
   the cut corners). */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;padding:14px 24px;cursor:pointer;border:none;background:transparent;transition:.22s;white-space:nowrap;
  --btn-clip:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);clip-path:var(--btn-clip)}
.btn::before{content:"";position:absolute;inset:0;pointer-events:none;transition:.22s;
  clip-path:polygon(evenodd,
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px, 8px 0,
    8.41px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 8.41px), calc(100% - 8.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px 8.41px, 8.41px 1px)}
.btn-neon{background:var(--neon);color:#0a0f04}
.btn-neon::before{background:var(--neon)}
.btn-neon:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost::before{background:var(--line)}
.btn-ghost:hover{color:var(--neon)}
.btn-ghost:hover::before{background:var(--neon)}