/* ============================================================
   NeX3 Design System — single stylesheet for nex3.ai
   Merged from the NeX3 Design System tokens (the canonical
   gold-on-near-black brand) into one zero-build file that
   index.html (landing) links.

   Satoshi (Fontshare) + JetBrains Mono (Google) · gold #ffb800
   on near-black #0a0a0a · hairline cards · gold-glow ambience.
   ============================================================ */

/* ---- Webfonts ---------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

@font-face { font-family:"Satoshi"; font-weight:300; font-display:swap; font-style:normal;
  src:url("https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2") format("woff2"); }
@font-face { font-family:"Satoshi"; font-weight:400; font-display:swap; font-style:normal;
  src:url("https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2") format("woff2"); }
@font-face { font-family:"Satoshi"; font-weight:500; font-display:swap; font-style:normal;
  src:url("https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2") format("woff2"); }
@font-face { font-family:"Satoshi"; font-weight:700; font-display:swap; font-style:normal;
  src:url("https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2") format("woff2"); }
@font-face { font-family:"Satoshi"; font-weight:900; font-display:swap; font-style:normal;
  src:url("https://cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2") format("woff2"); }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Canvas / neutral ramp */
  --nx-black:#0a0a0a; --nx-bg-900:#0a0a0a; --nx-bg-800:#101010; --nx-bg-700:#151515;
  --nx-bg-600:#1a1a1a; --nx-bg-500:#222222; --nx-bg-400:#2a2a2a;
  --nx-panel-900:#0a0e14; --nx-panel-800:#0d1117; --nx-panel-700:#111820; --nx-panel-600:#16192a;

  /* Hairlines */
  --nx-border:#333333; --nx-border-soft:#2a2a2a; --nx-border-strong:#444444;

  /* Text ramp */
  --nx-white:#ffffff; --nx-text-100:#d1d1d1; --nx-text-200:#a3a3a3;
  --nx-text-300:#777777; --nx-text-400:#555555; --nx-text-500:#333333;

  /* Gold — the brand */
  --nx-gold:#ffb800; --nx-gold-bright:#ffc933; --nx-gold-hover:#e8a802;
  --nx-gold-active:#b68400; --nx-gold-deep:#d9a520; --nx-gold-dim:#7a5c12;
  --nx-gold-05:rgba(255,184,0,.05); --nx-gold-10:rgba(255,184,0,.10);
  --nx-gold-20:rgba(255,184,0,.20); --nx-gold-30:rgba(255,184,0,.30);

  /* Logo facets */
  --nx-navy:#2d4070; --nx-navy-deep:#1c2a4c; --nx-silver:#8899aa;

  /* Data-lane accents (technical contexts / charts only) */
  --nx-teal:#4ecdc4; --nx-cyan:#45b7d1; --nx-magenta:#e056a0;
  --nx-pink:#ff6b9d; --nx-purple:#9b88ff; --nx-violet:#7b68ee;

  /* Semantic */
  --nx-success:#4ecdc4; --nx-info:#45b7d1; --nx-warning:#ffb800; --nx-danger:#f0506e;

  /* Semantic aliases */
  --surface-page:var(--nx-bg-900); --surface-sunken:var(--nx-black);
  --surface-card:var(--nx-bg-700); --surface-raised:var(--nx-bg-600);
  --surface-overlay:var(--nx-bg-500); --surface-panel:var(--nx-panel-800);
  --text-heading:var(--nx-white); --text-body:var(--nx-text-100);
  --text-secondary:var(--nx-text-200); --text-muted:var(--nx-text-400);
  --text-faint:var(--nx-text-500); --text-accent:var(--nx-gold); --text-on-gold:#0a0a0a;
  --border-default:var(--nx-border); --border-soft:var(--nx-border-soft);
  --border-strong:var(--nx-border-strong); --border-accent:var(--nx-gold);
  --accent:var(--nx-gold); --accent-hover:var(--nx-gold-hover); --accent-active:var(--nx-gold-active);
  --focus-ring:var(--nx-gold); --selection-bg:var(--nx-gold-30);

  /* Type */
  --font-display:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-bold:700; --weight-black:900;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px;
  --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:64px;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tighter:-0.03em; --tracking-tight:-0.02em; --tracking-wide:0.04em;
  --tracking-wider:0.08em; --tracking-eyebrow:0.15em; --tracking-widest:0.22em;

  /* Spacing / layout */
  --container-max:1200px; --container-narrow:760px; --grid-cell:60px;

  /* Effects */
  --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  --radius-card:var(--radius-md);
  --border-hairline:1px solid var(--nx-border);
  --border-hairline-soft:1px solid var(--nx-border-soft);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6); --shadow-card:0 8px 30px rgba(0,0,0,.45);
  --glow-gold-sm:0 0 12px rgba(255,184,0,.18); --glow-gold-md:0 0 24px rgba(255,184,0,.22);
  --glow-gold-lg:0 0 60px rgba(255,184,0,.18); --glow-gold-text:0 0 20px rgba(217,165,30,.25);
  --glow-teal:0 0 20px rgba(78,205,196,.25);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,.03);
  --grid-line:rgba(255,184,0,.03);
  --orb-gold:radial-gradient(circle,rgba(255,184,0,.07) 0%,transparent 70%);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:0.18s; --dur-med:0.35s; --dur-slow:1s;
}

/* ---- Reset / base ------------------------------------------------------ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
::selection { background:var(--selection-bg); color:#fff; }
html { scroll-behavior:smooth; }
body {
  background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-weight:var(--weight-regular);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ---- Ambient background layers (particles / grid / orbs) --------------- */
.nx-particles { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.nx-grid-overlay {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-cell) var(--grid-cell);
}
.nx-orb { position:fixed; border-radius:50%; pointer-events:none; z-index:2; filter:blur(80px); }
.nx-orb-1 { width:420px; height:420px; top:-120px; right:-80px;
  background:radial-gradient(circle,rgba(255,184,0,.08) 0%,transparent 70%); animation:nxOrb1 25s ease-in-out infinite; }
.nx-orb-2 { width:360px; height:360px; bottom:-60px; left:-80px;
  background:radial-gradient(circle,rgba(255,184,0,.06) 0%,transparent 70%); animation:nxOrb2 30s ease-in-out infinite; }
.nx-orb-3 { width:280px; height:280px; top:42%; left:48%;
  background:radial-gradient(circle,rgba(255,184,0,.045) 0%,transparent 70%); animation:nxOrb3 22s ease-in-out infinite; }
@keyframes nxOrb1 { 0%,100%{transform:translate(0,0) scale(1);} 25%{transform:translate(-30px,40px) scale(1.05);} 50%{transform:translate(20px,-20px) scale(.95);} 75%{transform:translate(-10px,-30px) scale(1.02);} }
@keyframes nxOrb2 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(40px,-30px) scale(1.08);} 66%{transform:translate(-20px,20px) scale(.96);} }
@keyframes nxOrb3 { 0%,100%{transform:translate(-50%,0) scale(1);} 50%{transform:translate(calc(-50% - 30px),30px) scale(1.1);} }

/* ---- Brand text utilities --------------------------------------------- */
.nx-eyebrow {
  font-family:var(--font-mono); font-weight:var(--weight-medium);
  font-size:var(--text-xs); letter-spacing:var(--tracking-widest);
  text-transform:uppercase; color:var(--text-muted);
}
.nx-mono { font-family:var(--font-mono); font-weight:var(--weight-medium); letter-spacing:var(--tracking-tight); }
.nx-gold-text { color:var(--nx-gold); }

/* Wordmark: Ne·X·3 in white / gold / silver */
.nx-wordmark { font-family:var(--font-display); font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); line-height:1; }
.nx-wordmark .w { color:var(--nx-white); }
.nx-wordmark .x { color:var(--nx-gold-deep); }
.nx-wordmark .n { color:var(--nx-silver); }

.nx-rule { border:0; border-top:var(--border-hairline); }

/* ---- Badge ------------------------------------------------------------- */
.nx-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill);
  color:var(--nx-gold); border:1px solid var(--nx-gold-30); background:var(--nx-gold-05);
}
.nx-badge .dot { width:5px; height:5px; border-radius:50%; background:var(--nx-gold); }

/* ---- Buttons ----------------------------------------------------------- */
.nx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 26px; font-family:var(--font-body); font-weight:700;
  font-size:var(--text-base); letter-spacing:.01em; line-height:1; cursor:pointer;
  border-radius:var(--radius-sm); border:1px solid transparent; text-decoration:none;
  white-space:nowrap; user-select:none;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.nx-btn:active { transform:translateY(1px); }
.nx-btn.sm { height:36px; padding:0 16px; font-size:var(--text-sm); }
.nx-btn-primary { background:var(--nx-gold); color:var(--text-on-gold); }
.nx-btn-primary:hover { background:var(--nx-gold-hover); box-shadow:var(--glow-gold-md); }
.nx-btn-primary:active { background:var(--nx-gold-active); }
.nx-btn-secondary { background:transparent; color:var(--text-body); border-color:var(--nx-border-strong); }
.nx-btn-secondary:hover { background:var(--nx-gold-10); color:var(--nx-gold-bright); border-color:var(--nx-gold); }
.nx-btn-ghost { background:transparent; color:var(--text-secondary); }
.nx-btn-ghost:hover { background:var(--nx-bg-500); color:var(--text-heading); }

/* ---- Card -------------------------------------------------------------- */
.nx-card {
  background:var(--surface-card); border:var(--border-hairline);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card), var(--inset-hairline);
}
.nx-card.emphasis { border-color:var(--nx-gold); box-shadow:var(--shadow-card), var(--glow-gold-md); }

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nx-orb { animation:none; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
