/* Sleek Engineering Minimalism - Inspired by Linear & Trail of Bits */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg-primary: #09090b;
  --surface-card: #18181b;
  --surface-card-hover: #202024;
  --surface-elevated: #27272a;
  --border-subtle: #27272a;
  --border-hover: #3f3f46;
  --text-primary: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-blue: #3b82f6;
  --accent-red: #ef4444;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Subtle Engineering Grid Background */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Engineering Border Cards */
.eng-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.eng-card:hover {
  border-color: var(--border-hover);
  background-color: var(--surface-card-hover);
}

/* Minimalist Pill */
.status-pill-emerald {
  background: rgba(16, 185, 129, 0.08);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.status-pill-amber {
  background: rgba(245, 158, 11, 0.08);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.status-pill-zinc {
  background: rgba(113, 113, 122, 0.12);
  color: #d4d4d8;
  border: 1px solid rgba(113, 113, 122, 0.3);
}

/* Interactive Filter Buttons */
.filter-btn {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: 0.375rem;
  background: #18181b;
  border: 1px solid #27272a;
  color: #a1a1aa;
  transition: all 0.15s ease;
}
.filter-btn:hover {
  color: #f4f4f5;
  border-color: #3f3f46;
}
.filter-btn.active {
  background: #27272a;
  color: #f4f4f5;
  border-color: #52525b;
}

/* Lightbox Modal */
.modal-backdrop {
  background-color: rgba(9, 9, 11, 0.88);
  backdrop-filter: blur(8px);
}

/* Timeline Track */
.timeline-track::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 0;
  left: 1.25rem;
  width: 1px;
  background: #27272a;
}

/* Subtle glow for flagship */
.flagship-glow {
  box-shadow: 0 0 0 1px #27272a, 0 8px 32px -8px rgba(0, 0, 0, 0.8);
}