/* eAi.OS — Design System v2 (May 2026)
 * Aesthetic: instrument-panel × editorial × premium framework
 * Ref: Linear (craft), Palantir (density), Anthropic (calm), Vercel (typography)
 *
 * v2 changes:
 *   — Warmer ink/paper neutrals (less generic-black)
 *   — Restrained signal palette (cyan = Control Plane only, amber = regulatory, kernel-green = live)
 *   — New HUD/console primitives (.hud, .ticker, .sysline, .console-row)
 *   — Editorial type scale + display weights
 *   — Hairline rules + sharp 0px-radius geometry
 */

:root {
  /* Ink surfaces — slightly warm, never pure black */
  --ink-0:    #000000;
  --ink:      #07080A;            /* primary dark surface */
  --ink-2:    #0C0E11;            /* card/elevated */
  --ink-3:    #14171B;            /* hover/active */
  --ink-4:    #1C2026;
  --ink-line: rgba(255, 255, 255, 0.075);
  --ink-line-2: rgba(255, 255, 255, 0.14);
  --ink-line-3: rgba(255, 255, 255, 0.24);

  --on-ink:   #F4F5F7;
  --on-ink-2: #B8BBC2;
  --on-ink-3: #74787F;
  --on-ink-4: #4C5057;

  /* Paper surfaces — warm bone, never blue-white */
  --paper:    #F5F3EE;            /* primary light surface */
  --paper-2:  #ECE9E1;            /* secondary band */
  --paper-3:  #DEDAD0;            /* elevated card line */
  --paper-line: rgba(10, 10, 12, 0.10);
  --paper-line-2: rgba(10, 10, 12, 0.18);
  --paper-line-3: rgba(10, 10, 12, 0.32);

  --on-paper:   #0A0B0D;
  --on-paper-2: #3A3D43;
  --on-paper-3: #6A6E76;
  --on-paper-4: #95989E;

  /* Signals — used SPARINGLY. Each carries semantic meaning. */
  --sig-kernel:  #67E8F9;         /* Control Plane only */
  --sig-live:    #00E08F;         /* live / healthy system status */
  --sig-amber:   #FFA64D;         /* regulatory / warning */
  --sig-magenta: #FF4D8F;         /* critical / breach */

  /* Layer chromatic codes — used only in framework legends */
  --layer-1: #00C8B4;             /* Data Fabric — teal */
  --layer-2: #67E8F9;             /* AI Platform — cyan */
  --layer-3: #B6A6FF;             /* Products & Agents — violet */
  --layer-4: #FFA64D;             /* Governance — amber */
  --layer-5: #00E08F;             /* Business Integration — green */

  /* Type */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Legacy aliases to keep existing pages compiling — point them at v2 */
  --black: var(--ink);
  --near-black: var(--ink-2);
  --ink-900: var(--ink-2);
  --ink-800: var(--ink-3);
  --ink-700: var(--ink-4);
  --rule-dark: var(--ink-line);
  --rule-dark-2: var(--ink-line-2);
  --fg-on-dark: var(--on-ink);
  --fg-on-dark-2: var(--on-ink-2);
  --fg-on-dark-3: var(--on-ink-3);
  --rule-light: var(--paper-line);
  --rule-light-2: var(--paper-line-2);
  --fg-on-light: var(--on-paper);
  --fg-on-light-2: var(--on-paper-2);
  --fg-on-light-3: var(--on-paper-3);
  --signal-cyan: var(--sig-kernel);
  --signal-orange: var(--sig-amber);
  --signal-emerald: var(--sig-live);
  --signal-teal: var(--layer-1);

  /* Density / rhythm */
  --gutter: 48px;
  --max: 1320px;
  --rail: 200px;                  /* label-rail width */
  --rail-gap: 48px;
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --rail: 0px; --rail-gap: 0px; }
}

/* ——————————————————————————————————————————————————————————————
 * BASE
 * —————————————————————————————————————————————————————————————— */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-feature-settings: "ss01", "cv11", "tnum"; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--on-ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
}

::selection { background: var(--sig-kernel); color: var(--ink); }

/* ——————————————————————————————————————————————————————————————
 * TYPE
 * —————————————————————————————————————————————————————————————— */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }
h1 {
  font-size: clamp(56px, 7.4vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.038em;
  font-weight: 560;
  text-wrap: balance;
}
h2 {
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 540;
  text-wrap: balance;
}
h3 {
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 540;
}
h4 {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-ink-3);
}
p {
  margin: 0;
  line-height: 1.55;
  color: var(--on-ink-2);
  font-size: 16px;
  text-wrap: pretty;
}
.lead {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.017em;
  color: var(--on-ink);
  max-width: 64ch;
  text-wrap: pretty;
}
.section.light p { color: var(--on-paper-2); }
.section.light .lead { color: var(--on-paper); }

/* Editorial display utility — used for chapter-style numbering */
.display-num {
  font: 460 clamp(72px, 9vw, 144px)/0.9 var(--font-display);
  letter-spacing: -0.05em;
}

/* Mono labels everywhere */
.eyebrow, .meta, .mono, .sysline {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--on-ink-3);
}
.eyebrow .tick {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--sig-kernel);
  box-shadow: 0 0 8px var(--sig-kernel);
  margin-right: 10px; transform: translateY(-1px);
}
.eyebrow .tick.live {
  background: var(--sig-live);
  box-shadow: 0 0 8px var(--sig-live);
  animation: pulseLive 2.2s ease-in-out infinite;
}
.eyebrow .tick.amber {
  background: var(--sig-amber);
  box-shadow: 0 0 8px var(--sig-amber);
  animation: pulseLive 2.2s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ——————————————————————————————————————————————————————————————
 * LAYOUT
 * —————————————————————————————————————————————————————————————— */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.section {
  position: relative;
  padding: 120px 0;
  border-top: 1px solid var(--ink-line);
}
.section:first-child { border-top: 0; }
.section > .wrap { position: relative; z-index: 1; }
.section.light {
  background: var(--paper);
  color: var(--on-paper);
  border-top-color: var(--paper-line);
}
.section.light .eyebrow, .section.light .meta, .section.light .mono { color: var(--on-paper-3); }
.section.light h4 { color: var(--on-paper-3); }
.section.light p { color: var(--on-paper-2); }

/* Section head with thin rail */
.section-head {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--rail-gap);
  margin-bottom: 64px;
  align-items: end;
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
}
.section-head .label-rail {
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  border-top: 1px solid var(--ink-line);
  padding-top: 14px;
}
.section.light .section-head .label-rail {
  color: var(--on-paper-3);
  border-top-color: var(--paper-line);
}

/* ——————————————————————————————————————————————————————————————
 * HUD — the system status strip that lives above the topbar
 * —————————————————————————————————————————————————————————————— */
.hud {
  position: relative;
  z-index: 60;
  background: var(--ink-0);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  overflow: hidden;
}
.hud-inner {
  display: flex; align-items: center;
  gap: 24px;
  padding: 9px var(--gutter);
  white-space: nowrap;
  overflow: hidden;
}
.hud-item { display: inline-flex; align-items: center; gap: 8px; }
.hud-item .k { color: var(--on-ink-4); }
.hud-item .v { color: var(--on-ink); }
.hud-item.live .v { color: var(--sig-live); }
.hud-item.amber .v { color: var(--sig-amber); }
.hud-item.kernel .v { color: var(--sig-kernel); }
.hud-item .dot { width: 5px; height: 5px; border-radius: 50%; }
.hud-item.live .dot { background: var(--sig-live); box-shadow: 0 0 6px var(--sig-live); animation: pulseLive 2.2s ease-in-out infinite; }
.hud-item.amber .dot { background: var(--sig-amber); box-shadow: 0 0 6px var(--sig-amber); animation: pulseLive 2.2s ease-in-out infinite; }
.hud-item.kernel .dot { background: var(--sig-kernel); box-shadow: 0 0 6px var(--sig-kernel); }
.hud-spacer { flex: 1; }
.hud-sep { color: var(--on-ink-4); }
@media (max-width: 900px) {
  .hud-inner { gap: 14px; font-size: 9.5px; padding: 8px 16px; }
  .hud-item.optional { display: none; }
}

/* ——————————————————————————————————————————————————————————————
 * TOPBAR
 * —————————————————————————————————————————————————————————————— */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--ink-line);
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 8, 10, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.topbar .brand {
  font: 600 17px/1 var(--font-display);
  letter-spacing: -0.03em;
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--on-ink);
  text-decoration: none;
}
.topbar .brand .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--ink-line-3);
  position: relative;
  background: var(--ink-2);
}
.topbar .brand .mark::before {
  content:""; position:absolute; inset: 4px;
  background: var(--sig-kernel);
  box-shadow: 0 0 12px var(--sig-kernel);
}
.topbar .brand .v {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--on-ink-3);
  margin-left: 6px;
  padding: 3px 6px;
  border: 1px solid var(--ink-line);
}
.topbar .nav { display: flex; gap: 0; }
.topbar .nav a {
  font: 450 13.5px/1 var(--font-sans);
  color: var(--on-ink-2);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 10px 14px;
  transition: color .15s ease;
}
.topbar .nav a:hover, .topbar .nav a.active { color: var(--on-ink); }
.topbar .topbar-cta { display: flex; gap: 10px; align-items: center; }

/* Mobile nav (CSS-only disclosure) */
.nav-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 4px;
  border: 1px solid var(--ink-line-2); background: transparent;
  cursor: pointer; flex-direction: column; gap: 4px;
}
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--on-ink-2); transition: transform .2s ease, opacity .2s ease; }
.nav-cb:checked ~ .topbar-cta .nav-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-cb:checked ~ .topbar-cta .nav-burger span:nth-child(2) { opacity: 0; }
.nav-cb:checked ~ .topbar-cta .nav-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .topbar .nav {
    display: none; order: 3; flex-basis: 100%;
    flex-direction: column; gap: 0;
    margin: 10px -16px -12px; padding: 6px 16px 10px;
    border-top: 1px solid var(--ink-line);
  }
  .nav-cb:checked ~ .nav { display: flex; }
  .topbar .nav a { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--ink-line); }
  .topbar .nav a:last-child { border-bottom: 0; }
  .nav-burger { display: inline-flex; }
  .topbar .topbar-cta .btn-ghost { display: none; }
}

/* Coming-soon disabled affordance */
.btn.soon, .pill.soon {
  cursor: default; pointer-events: none;
  opacity: 0.5; filter: saturate(0.4);
}
.btn.soon .arrow, .pill.soon .arrow { display: none; }

/* ——————————————————————————————————————————————————————————————
 * BUTTONS
 * —————————————————————————————————————————————————————————————— */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 2px;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.btn-sm { padding: 9px 14px; font-size: 12.5px; }
.btn-primary { background: var(--on-ink); color: var(--ink); }
.btn-primary:hover { background: #E8E9EB; }
.btn-ghost {
  background: transparent; color: var(--on-ink);
  border-color: var(--ink-line-2);
}
.btn-ghost:hover { border-color: var(--on-ink); }
.btn-kernel {
  background: var(--sig-kernel); color: var(--ink);
  box-shadow: 0 0 0 1px var(--sig-kernel), 0 8px 28px -10px rgba(103, 232, 249, 0.5);
}
.btn-kernel:hover { background: #8FF2FB; }

.section.light .btn-primary { background: var(--ink); color: var(--on-ink); }
.section.light .btn-primary:hover { background: var(--ink-3); }
.section.light .btn-ghost { color: var(--on-paper); border-color: var(--paper-line-2); }
.section.light .btn-ghost:hover { border-color: var(--on-paper); }

.btn .arrow { font-family: var(--font-mono); font-weight: 400; transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ——————————————————————————————————————————————————————————————
 * CHIP
 * —————————————————————————————————————————————————————————————— */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ink-line-2);
  border-radius: 2px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  background: rgba(255,255,255,0.02);
}
.section.light .chip { border-color: var(--paper-line-2); color: var(--on-paper-2); background: rgba(0,0,0,0.02); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--on-ink-3); }
.chip .dot.kernel { background: var(--sig-kernel); box-shadow: 0 0 6px var(--sig-kernel); }
.chip .dot.live   { background: var(--sig-live);   box-shadow: 0 0 6px var(--sig-live); }
.chip .dot.amber  { background: var(--sig-amber);  box-shadow: 0 0 6px var(--sig-amber); }
.chip .dot.l1 { background: var(--layer-1); }
.chip .dot.l2 { background: var(--layer-2); }
.chip .dot.l3 { background: var(--layer-3); }
.chip .dot.l4 { background: var(--layer-4); }
.chip .dot.l5 { background: var(--layer-5); }

/* ——————————————————————————————————————————————————————————————
 * GRIDS / CELLS / SYSLINES
 * —————————————————————————————————————————————————————————————— */
.grid {
  display: grid; gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.section.light .grid { background: var(--paper-line); border-color: var(--paper-line); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell { background: var(--ink); padding: 32px; }
.section.light .cell { background: var(--paper); }

@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .grid.cols-2 { grid-template-columns: 1fr; }
}

/* Stat */
.stat .num {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(72px, 10vw, 144px);
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.stat .num .unit {
  font-size: 0.42em;
  letter-spacing: -0.02em;
  margin-left: 4px;
  color: var(--on-ink-3);
  font-weight: 460;
}
.section.light .stat .num .unit { color: var(--on-paper-3); }
.stat .cap {
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-top: 28px;
  max-width: 38ch;
}
.section.light .stat .cap { color: var(--on-paper-3); }

/* Console row — incident-log row style */
.console-row {
  display: grid;
  grid-template-columns: 64px 100px 120px 1fr auto;
  gap: 24px;
  padding: 18px 24px;
  border-top: 1px solid var(--ink-line);
  font: 450 13px/1.45 var(--font-mono);
  letter-spacing: 0;
  align-items: baseline;
  color: var(--on-ink-2);
}
.console-row:last-child { border-bottom: 1px solid var(--ink-line); }
.console-row .ix { color: var(--on-ink-4); }
.console-row .sev { letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; font-size: 11px; padding-top: 2px; }
.console-row .sev.crit  { color: var(--sig-magenta); }
.console-row .sev.high  { color: var(--sig-amber); }
.console-row .sev.med   { color: var(--on-ink-2); }
.console-row .ts { color: var(--on-ink-4); font-size: 11px; letter-spacing: 0.08em; }
.console-row .msg { color: var(--on-ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.45; letter-spacing: -0.012em; }
.console-row .msg .n { font-family: var(--font-display); font-weight: 540; }
.console-row .src { color: var(--on-ink-3); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.section.light .console-row { border-top-color: var(--paper-line); color: var(--on-paper-2); }
.section.light .console-row:last-child { border-bottom-color: var(--paper-line); }
.section.light .console-row .ix { color: var(--on-paper-4); }
.section.light .console-row .ts { color: var(--on-paper-4); }
.section.light .console-row .msg { color: var(--on-paper); }
.section.light .console-row .src { color: var(--on-paper-3); }
.section.light .console-row .sev.med { color: var(--on-paper-2); }
@media (max-width: 900px) {
  .console-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
  .console-row .ix, .console-row .ts { display: none; }
}

/* ——————————————————————————————————————————————————————————————
 * TICKER (animated horizontal scroll)
 * —————————————————————————————————————————————————————————————— */
.ticker {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: tickerScroll 90s linear infinite;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; }
}

/* ——————————————————————————————————————————————————————————————
 * FOOTER
 * —————————————————————————————————————————————————————————————— */
.footer {
  border-top: 1px solid var(--ink-line);
  padding: 72px var(--gutter) 28px;
  background: var(--ink);
  color: var(--on-ink-2);
}
.footer .grid-foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  max-width: var(--max); margin: 0 auto 48px;
}
.footer h4 { margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a {
  color: var(--on-ink);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.footer a:hover { color: var(--on-ink-2); }
.footer .build-line {
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
}
@media (max-width: 900px) {
  .footer { padding: 48px 20px 24px; }
  .footer .grid-foot { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ——————————————————————————————————————————————————————————————
 * A11Y
 * —————————————————————————————————————————————————————————————— */
.skip-to-content {
  position: absolute; top: -100px; left: 12px;
  padding: 14px 22px; z-index: 200;
  background: var(--on-ink); color: var(--ink);
  font: 500 13px/1 var(--font-sans);
  text-decoration: none; border-radius: 2px;
  transition: top .15s ease;
}
.skip-to-content:focus { top: 12px; outline: 2px solid var(--sig-kernel); outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--sig-kernel); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible { outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .hud, .topbar, .footer, .skip-to-content, .tw-panel { display: none !important; }
  body { background: white !important; color: black !important; }
  .section, .section.light { background: white !important; color: black !important; padding: 24px !important; }
  a { color: black !important; text-decoration: underline; }
  [class*="bloom"], [class*="bg-grid"], canvas { display: none !important; }
}