/* ═══════════════════════════════════════════════════════════════════════
   FUNDING MACHINE — FOUNDATIONS
   The single source of truth. Every page inherits from here.
   Version: 1.0.0 · 2026-09-07
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ══════════════════════════════════════════════════════════════════
     BRAND — Primitive scales (25 → 950)
     ══════════════════════════════════════════════════════════════════ */

  /* Brand blue (primary) */
  --brand-25:  #F5FAFF;
  --brand-50:  #EEF5FF;
  --brand-100: #DBE8FE;
  --brand-200: #BCD3FD;
  --brand-300: #91B6FB;
  --brand-400: #6A9AF9;
  --brand-500: #3C83F6;   /* PRIMARY */
  --brand-600: #2A6BE6;
  --brand-700: #1F55C4;
  --brand-800: #1B449E;
  --brand-900: #163878;
  --brand-950: #0F2452;

  /* Logo blue — deeper industrial */
  --logo-500: #177FC9;
  --logo-600: #1268A6;
  --logo-700: #0E5285;

  /* Navy — anchor dark surfaces */
  --navy-25:  #F1F5F9;
  --navy-50:  #E2EAF3;
  --navy-100: #C4D5E7;
  --navy-200: #8FADCE;
  --navy-300: #5A85B5;
  --navy-400: #2F5D91;
  --navy-500: #1E4879;
  --navy-600: #163C68;
  --navy-700: #0F3055;
  --navy-800: #0C4A6E;
  --navy-900: #082F49;
  --navy-950: #061F31;

  /* Neutrals — 0 (white) → 1000 (black) */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FCFCFD;
  --neutral-50:   #F9FAFB;
  --neutral-100:  #F1F5F9;
  --neutral-200:  #E1E7EF;
  --neutral-300:  #CBD3DE;
  --neutral-400:  #94A3B8;
  --neutral-500:  #65758B;
  --neutral-600:  #475569;
  --neutral-700:  #334155;
  --neutral-800:  #1E293B;
  --neutral-900:  #0F1729;
  --neutral-950:  #0A0F1E;
  --neutral-1000: #000000;

  /* Cyan — signal */
  --cyan-100: #CFFBF5;
  --cyan-300: #7DE3EE;
  --cyan-400: #21D5ED;    /* SIGNAL */
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;

  /* Violet — intelligence */
  --violet-100: #EDE5FE;
  --violet-300: #B99BF7;
  --violet-400: #A277F6;
  --violet-500: #8C5AF2;  /* AI */
  --violet-600: #7942E0;
  --violet-700: #6B2FC8;
  --violet-800: #5A24B0;

  /* Mint — funded / success */
  --mint-100:  #D1FAE5;
  --mint-300:  #6EE7B7;
  --mint-400:  #34D399;   /* FUNDED */
  --mint-500:  #10B981;
  --mint-600:  #059669;
  --mint-700:  #047857;

  /* Gold — awards / recognition */
  --gold-100:  #FEF3C7;
  --gold-300:  #FDE047;
  --gold-400:  #FACC15;   /* AWARD */
  --gold-500:  #EAB308;
  --gold-600:  #CA8A04;

  /* Red — alert */
  --red-100:  #FEE2E2;
  --red-300:  #FCA5A5;
  --red-400:  #F87171;
  --red-500:  #EF4444;
  --red-600:  #DC2626;    /* ALERT */
  --red-700:  #B91C1C;

  /* ══════════════════════════════════════════════════════════════════
     SEMANTIC — surface, text, border, action
     ══════════════════════════════════════════════════════════════════ */

  --surface-primary:      var(--neutral-50);
  --surface-secondary:    var(--neutral-100);
  --surface-elevated:     var(--neutral-0);
  --surface-inverse:      var(--navy-900);
  --surface-interactive:  var(--brand-25);
  --surface-highlight:    var(--brand-50);

  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-500);
  --text-inverse:    var(--neutral-0);
  --text-link:       var(--brand-600);
  --text-success:    var(--mint-600);
  --text-warning:    var(--gold-600);
  --text-critical:   var(--red-600);
  --text-ai:         var(--violet-600);

  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-400);
  --border-focus:    var(--brand-500);
  --border-ai:       var(--violet-300);

  --action-primary:         var(--brand-500);
  --action-primary-hover:   var(--brand-600);
  --action-primary-active:  var(--brand-700);
  --action-secondary:       var(--neutral-100);
  --action-destructive:     var(--red-600);
  --action-success:         var(--mint-500);

  /* ══════════════════════════════════════════════════════════════════
     FINTECH DOMAIN — Deal states, AI states
     ══════════════════════════════════════════════════════════════════ */

  --deal-new:        var(--neutral-500);
  --deal-review:     var(--brand-500);
  --deal-qualified:  var(--cyan-500);
  --deal-submitted:  var(--violet-500);
  --deal-offer:      var(--gold-500);
  --deal-funded:     var(--mint-500);
  --deal-declined:   var(--red-600);
  --deal-stalled:    var(--neutral-400);

  --ai-idle:        var(--neutral-400);
  --ai-processing:  var(--violet-500);
  --ai-complete:    var(--mint-500);
  --ai-warning:     var(--gold-500);

  /* ══════════════════════════════════════════════════════════════════
     CHART PALETTE — categorical + sequential
     ══════════════════════════════════════════════════════════════════ */

  --chart-1: var(--brand-500);
  --chart-2: var(--cyan-400);
  --chart-3: var(--violet-500);
  --chart-4: var(--mint-400);
  --chart-5: var(--gold-400);
  --chart-6: var(--navy-600);
  --chart-7: var(--brand-300);
  --chart-8: var(--violet-300);

  /* ══════════════════════════════════════════════════════════════════
     GRADIENTS
     ══════════════════════════════════════════════════════════════════ */

  --gradient-brand: linear-gradient(135deg, #3C83F6 0%, #21D5ED 50%, #8C5AF2 100%);
  --gradient-signal: linear-gradient(90deg, #3C83F6 0%, #21D5ED 100%);
  --gradient-funded: linear-gradient(135deg, #34D399 0%, #21D5ED 100%);
  --gradient-ai: linear-gradient(135deg, #8C5AF2 0%, #3C83F6 100%);
  --gradient-navy: linear-gradient(180deg, #082F49 0%, #061F31 100%);
  --gradient-hero-fade: linear-gradient(180deg, transparent 0%, rgba(60,131,246,0.03) 50%, transparent 100%);
  --gradient-mesh: radial-gradient(circle at 20% 0%, rgba(60,131,246,0.08), transparent 50%),
                    radial-gradient(circle at 80% 50%, rgba(33,213,237,0.06), transparent 50%),
                    radial-gradient(circle at 40% 100%, rgba(140,90,242,0.06), transparent 50%);

  /* ══════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════════════════════════ */

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Marketing display scale */
  --text-display-xl: clamp(3.5rem, 6.5vw, 6rem);       /* 56-96 */
  --text-display-l:  clamp(2.75rem, 5vw, 4.5rem);      /* 44-72 */
  --text-display-m:  clamp(2.25rem, 4vw, 3.5rem);      /* 36-56 */

  --text-h1: clamp(2rem, 3.5vw, 3rem);
  --text-h2: clamp(1.625rem, 2.5vw, 2.25rem);
  --text-h3: clamp(1.25rem, 1.75vw, 1.5rem);
  --text-h4: 1.125rem;

  --text-body-xl: 1.25rem;
  --text-body-l:  1.125rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;

  /* Product / dense scale */
  --text-metric-xl: 3rem;
  --text-metric-l:  2rem;
  --text-metric:    1.5rem;
  --text-page:      1.375rem;
  --text-section:   1.125rem;
  --text-card:      1rem;
  --text-table-h:   0.75rem;
  --text-table:     0.8125rem;
  --text-label:     0.75rem;
  --text-badge:     0.6875rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0em;
  --tracking-eyebrow: 0.08em;
  --tracking-caps:   0.14em;

  /* ══════════════════════════════════════════════════════════════════
     SPATIAL — 2px scale
     ══════════════════════════════════════════════════════════════════ */

  --s-0:   0;
  --s-1:   2px;
  --s-2:   4px;
  --s-3:   6px;
  --s-4:   8px;
  --s-5:   12px;
  --s-6:   16px;
  --s-7:   20px;
  --s-8:   24px;
  --s-9:   32px;
  --s-10:  40px;
  --s-11:  48px;
  --s-12:  64px;
  --s-13:  80px;
  --s-14:  96px;
  --s-15:  128px;
  --s-16:  160px;

  /* Layout maxes */
  --w-marketing: 1240px;
  --w-marketing-narrow: 880px;
  --w-app: 1600px;
  --w-app-content: 1440px;

  /* ══════════════════════════════════════════════════════════════════
     RADIUS
     ══════════════════════════════════════════════════════════════════ */

  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;    /* compact controls */
  --r-4: 10px;   /* inputs */
  --r-5: 12px;   /* cards */
  --r-6: 16px;   /* prominent surfaces */
  --r-7: 20px;
  --r-8: 24px;   /* marketing feature */
  --r-full: 999px;

  /* ══════════════════════════════════════════════════════════════════
     ELEVATION
     ══════════════════════════════════════════════════════════════════ */

  --e-0: none;
  --e-1: 0 1px 2px 0 rgb(15 23 41 / 0.05);
  --e-2: 0 1px 3px 0 rgb(15 23 41 / 0.08), 0 1px 2px 0 rgb(15 23 41 / 0.04);
  --e-3: 0 4px 12px -2px rgb(15 23 41 / 0.08), 0 2px 4px -1px rgb(15 23 41 / 0.04);
  --e-4: 0 12px 24px -6px rgb(15 23 41 / 0.10), 0 4px 8px -2px rgb(15 23 41 / 0.05);
  --e-5: 0 24px 48px -12px rgb(15 23 41 / 0.18), 0 8px 16px -4px rgb(15 23 41 / 0.08);
  --e-brand: 0 10px 30px -10px rgb(60 131 246 / 0.45);
  --e-ai: 0 10px 30px -10px rgb(140 90 242 / 0.35);
  --e-funded: 0 10px 30px -10px rgb(52 211 153 / 0.45);
  --e-ring-focus: 0 0 0 4px rgb(60 131 246 / 0.15);
  --e-ring-ai: 0 0 0 4px rgb(140 90 242 / 0.15);

  /* ══════════════════════════════════════════════════════════════════
     MOTION
     ══════════════════════════════════════════════════════════════════ */

  --dur-instant:    100ms;
  --dur-fast:       160ms;
  --dur-standard:   240ms;
  --dur-expressive: 400ms;
  --dur-narrative:  900ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring-soft:   cubic-bezier(0.5, 1.4, 0.6, 1);
  --ease-spring-snappy: cubic-bezier(0.4, 1.8, 0.4, 1);
  --ease-financial: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* Tabular numerals for financial values */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mono { font-family: var(--font-mono); }

/* ── Utility text ─────────────────────────────────────────────────── */
.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
}
.eyebrow-brand { color: var(--brand-600); }
.eyebrow-ai { color: var(--violet-600); }
.eyebrow-funded { color: var(--mint-600); }

/* ── Gradient text (accessible: paired with fallback color) ───────── */
.gradient-text {
  color: var(--brand-600); /* fallback for readers */
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-7);
  border-radius: var(--r-3);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--e-ring-focus); }

.btn-primary {
  background: var(--action-primary);
  color: var(--text-inverse);
  box-shadow: var(--e-2);
}
.btn-primary:hover { background: var(--action-primary-hover); box-shadow: var(--e-brand); }

.btn-secondary {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--e-1);
}
.btn-secondary:hover { border-color: var(--border-default); }

.btn-ghost {
  color: var(--text-primary);
  background: transparent;
}
.btn-ghost:hover { background: var(--surface-secondary); transform: none; }

.btn-lg { padding: var(--s-6) var(--s-8); font-size: var(--text-body); }
.btn-sm { padding: var(--s-3) var(--s-5); font-size: var(--text-caption); border-radius: var(--r-2); }

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-5);
  box-shadow: var(--e-1);
}

/* ── Chip / Badge ─────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-5);
  border-radius: var(--r-full);
  font-size: var(--text-badge);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--border-subtle);
}
.chip-brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.chip-ai { background: var(--violet-100); color: var(--violet-700); border-color: rgba(140,90,242,0.2); }
.chip-funded { background: var(--mint-100); color: var(--mint-700); border-color: rgba(52,211,153,0.25); }
.chip-warning { background: var(--gold-100); color: var(--gold-600); border-color: rgba(250,204,21,0.3); }
.chip-alert { background: var(--red-100); color: var(--red-700); border-color: rgba(220,38,38,0.2); }

.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip-dot-live { position: relative; }
.chip-dot-live::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: pulse-dot 2s var(--ease-standard) infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.6); opacity: 0; }
}

/* ── Signal trace (SVG animated stroke) ───────────────────────────── */
.signal-trace {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: trace 2.4s var(--ease-financial) forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }

/* ── Metric number reveal ─────────────────────────────────────────── */
.metric-count { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ── Focus outlines ───────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .signal-trace { stroke-dashoffset: 0; }
}

/* ── Section rhythm ───────────────────────────────────────────────── */
.section { padding: var(--s-14) var(--s-8); }
.container { max-width: var(--w-marketing); margin: 0 auto; }
.container-narrow { max-width: var(--w-marketing-narrow); margin: 0 auto; }
.container-app { max-width: var(--w-app); margin: 0 auto; }

/* ── Signal-grid background ───────────────────────────────────────── */
.bg-signal-grid {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 40%, transparent 100%);
}

/* ── Circuit motif (subtle SVG background) ────────────────────────── */
.bg-mesh {
  background-image: var(--gradient-mesh);
}