/* Nextoflow — design tokens (shared across all three directions) */
:root {
  /* Brand: keep exactly — black, signal blue, electric blue */
  --nf-bg: #0a0a0b;
  --nf-bg-soft: #111113;
  --nf-ink: #fafafa;
  --nf-ink-60: rgba(250, 250, 250, 0.6);
  --nf-ink-40: rgba(250, 250, 250, 0.4);
  --nf-ink-20: rgba(250, 250, 250, 0.2);
  --nf-ink-10: rgba(250, 250, 250, 0.1);
  --nf-ink-06: rgba(250, 250, 250, 0.06);
  --nf-line: rgba(250, 250, 250, 0.08);

  /* Signal blues — from logo */
  --nf-blue-deep: #1e3cc8;        /* chevron */
  --nf-blue-elec: #3b82f6;        /* dot */
  --nf-blue-sky: #5fa8ff;         /* highlight */
  --nf-blue-glow: rgba(59, 130, 246, 0.18);

  --nf-yellow: #f7d64a;           /* human accent (20%) */

  /* Type */
  --nf-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --nf-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --nf-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Rhythm */
  --nf-rad: 14px;
  --nf-rad-sm: 8px;
}

.nf-artboard {
  background: var(--nf-bg);
  color: var(--nf-ink);
  font-family: var(--nf-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow: hidden;
}
.nf-artboard * { box-sizing: border-box; }
.nf-mono { font-family: var(--nf-mono); }
.nf-display { font-family: var(--nf-display); letter-spacing: -0.03em; }
.nf-eyebrow {
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nf-ink-60);
}
.nf-blue { color: var(--nf-blue-elec); }
.nf-deepblue { color: var(--nf-blue-deep); }
.nf-rule { height: 1px; background: var(--nf-line); width: 100%; }

/* Logo mark rendered as inline SVG so it scales cleanly */
.nf-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nf-ink);
  font-family: var(--nf-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Scrollable artboard body (each artboard scrolls its own content) */
.nf-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--nf-ink-20) transparent;
}

/* Shared hover card */
.nf-card {
  background: var(--nf-bg-soft);
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-rad);
  transition: border-color .2s, background .2s, transform .2s;
}
.nf-card:hover {
  border-color: var(--nf-ink-20);
}

.nf-btn {
  font-family: var(--nf-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  transition: background .18s, transform .12s, color .18s;
}
.nf-btn-primary {
  background: var(--nf-blue-elec);
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 15px;
}
.nf-btn-primary:hover { background: var(--nf-blue-sky); }
.nf-btn-ghost {
  background: transparent;
  color: var(--nf-ink);
  border: 1px solid var(--nf-ink-20);
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 15px;
}
.nf-btn-ghost:hover { border-color: var(--nf-ink); }

/* AI dot pulse */
@keyframes nf-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.nf-pulse { animation: nf-pulse 2s ease-in-out infinite; }

@keyframes nf-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -20; }
}
.nf-flowline { stroke-dasharray: 4 6; animation: nf-flow 1.6s linear infinite; }

@keyframes nf-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes nf-spin {
  to { transform: rotate(360deg); }
}

@keyframes nf-cursor {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
.nf-cursor::after {
  content: '▍';
  color: var(--nf-blue-elec);
  animation: nf-cursor 1s steps(1) infinite;
  margin-left: 2px;
}

/* ─── Responsive utility classes ──────────────────────────────────── */
/* Breakpoints: mobile <768px · tablet 768–1023px · desktop ≥1024px    */

.nf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.nf-section {
  padding: 120px 40px;
}
.nf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.nf-grid-2-asym {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
}
.nf-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nf-stack-mobile {
  display: flex;
  flex-direction: row;
  gap: 14px;
}
.nf-hide-mobile { /* visible by default */ }
.nf-show-mobile { display: none !important; }
.nf-h1-fluid {
  font-size: 96px;
  line-height: 0.95;
}
.nf-tap-44 {
  min-height: 44px;
  min-width: 44px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .nf-container { padding: 0 32px; }
  .nf-section { padding: 80px 32px; }
  .nf-grid-2-asym { grid-template-columns: 1fr 1fr; gap: 40px; }
  .nf-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .nf-h1-fluid { font-size: clamp(56px, 8vw, 80px); }
}

@media (max-width: 767px) {
  .nf-container { padding: 0 16px; }
  .nf-section { padding: 56px 16px; }
  .nf-grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .nf-grid-2-asym { grid-template-columns: 1fr; gap: 24px; }
  .nf-grid-4 { grid-template-columns: 1fr; gap: 16px; }
  .nf-stack-mobile { flex-direction: column; align-items: stretch; }
  .nf-hide-mobile { display: none !important; }
  .nf-show-mobile { display: revert !important; }
  .nf-h1-fluid { font-size: clamp(40px, 10vw, 56px); line-height: 1.05; }
}