/* ============================================================
   EXPERT FLOW — BUSINESS NATIVE BRAND v2.1 (light / monochrome)
   Ground-truth: expertflow-ugyfelkezeles.vercel.app (computed styles)
   Geist (heading+body, weight 400) · IBM Plex Mono (labels, 500) ·
   cream #f5f4f1 · pure-black #000 ink · strict monochrome.
   ============================================================ */

:root {
  /* Typography — Business Native (Geist everywhere, mono labels) */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Color — Business Native light monochrome (computed-style exact) */
  --color-background: #f5f4f1;        /* cream page */
  --color-foreground: #000000;        /* pure black ink */
  --color-foreground-soft: rgba(0, 0, 0, 0.72);
  --color-foreground-muted: rgba(0, 0, 0, 0.64);   /* tone-subtle */
  --color-foreground-dim: rgba(0, 0, 0, 0.40);
  --color-border: rgba(0, 0, 0, 0.10);
  --color-border-strong: rgba(0, 0, 0, 0.20);
  --color-surface: #ffffff;
  --color-ink: #000000;
  --color-footer: #000000;            /* footer / dark blocks */
  --color-on-dark: #f4f4f6;

  /* Accents collapse to ink — strict monochrome */
  --color-accent-rose:   #000; --color-accent-violet: #000; --color-accent-sky: #000;
  --color-accent-mint:   #000; --color-accent-coral:  #000; --color-accent-cream: #000;

  /* Legacy compat */
  --bg-page: var(--color-background);
  --accent: var(--color-ink);
  --text: var(--color-foreground);
  --text-dim: var(--color-foreground-muted);
  --border-cell: var(--color-border-strong);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* TYPOGRAPHY UTILITY */
.font-display { font-family: var(--font-display); font-style: normal; }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

/* Headings — Business Native Geist 400 scale (airy, monochrome).
   h1 64/68 -0.0125em · h2 40/48 -0.04em · h3 28/34 -0.02em */
h1, .h1 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 4rem);   /* up to ~64px */
  line-height: 1.06;
  letter-spacing: -0.0125em;
  margin: 0 0 1.5rem;
  color: var(--color-foreground);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);  /* up to ~40px */
  line-height: 1.18;
  letter-spacing: -0.035em;
  margin: 3.5rem 0 1.25rem;
  color: var(--color-foreground);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 2.2rem 0 0.75rem;
  color: var(--color-foreground);
}

p { line-height: 1.55; color: var(--color-foreground-soft); margin: 0 0 1em; max-width: 70ch; }

strong { font-weight: 500; color: inherit; }
em     { font-style: italic; color: inherit; }

a { color: var(--color-foreground); text-decoration: none; border-bottom: 1px solid var(--color-border-strong); transition: border-color 0.2s, color 0.2s; }
a:hover { color: var(--color-foreground); border-color: var(--color-ink); }

/* EYEBROW / LABEL — IBM Plex Mono 500, uppercase, TIGHT tracking (0.063em) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33;
  text-transform: uppercase;
  letter-spacing: 0.063em;
  color: var(--color-foreground-muted);
}
.eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-ink);
}

/* EM accent spans — ink, no italic (monochrome) */
.em-rose, .em-violet, .em-sky, .em-mint, .em-coral, .em-cream {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
}

.bg-glow-violet, .bg-glow-rose, .bg-glow-sky, .bg-glow-mint, .bg-glow-cream { background: var(--color-surface); }

/* CELL-BORDERED GRID */
.cell-grid {
  display: grid; gap: 0;
  border-top: 1px solid var(--color-border-strong);
  border-left: 1px solid var(--color-border-strong);
}
.cell-grid > * {
  border-right: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  padding: 2.5rem;
  transition: background-color 0.2s;
}
.cell-grid > a:hover, .cell-grid > .cell:hover { background: rgba(0, 0, 0, 0.03); }

/* CTA — Business Native solid-ink pill (Geist 500, 16px, 2rem radius) */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--color-ink);
  color: var(--color-background);
  border: 1px solid var(--color-ink);
  border-radius: 2rem;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.cta:hover { background: #1c1c20; border-color: #1c1c20; transform: translateY(-1px); }
.cta-ghost { background: transparent; color: var(--color-foreground); border: 1px solid var(--color-border-strong); }
.cta-ghost:hover { background: rgba(0, 0, 0, 0.05); border-color: var(--color-ink); color: var(--color-ink); }

/* CALLOUT */
.callout {
  border-left: 2px solid var(--color-ink);
  background: rgba(0, 0, 0, 0.04);
  padding: 1rem 1.5rem; margin: 2rem 0;
  border-radius: 0 8px 8px 0;
}
.callout strong { color: var(--color-ink); }

/* BUSINESS NATIVE wordmark lockup — "expert · flow" (dot-matrix arrow) */
.bn-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.bn-logo .bn-arrow { height: 0.62em; width: auto; display: block; flex: none; }

/* KEYFRAMES */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in    { animation: 0.6s ease-out backwards fadeIn; }
.animate-fade-in-up { animation: 0.8s ease-out backwards fadeInUp; }
.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}
@media (prefers-reduced-motion: reduce) { .animate-fade-in, .animate-fade-in-up { animation: none; } }

/* HERO giant glyph (faint ink) */
.hero-stage { position: relative; overflow: hidden; padding: 4rem 2rem; }
.hero-glyph {
  position: absolute; inset: auto 0 -8% auto;
  font-family: var(--font-display); font-style: normal; font-weight: 500;
  font-size: clamp(12rem, 28vw, 28rem); line-height: 1;
  color: var(--color-ink); opacity: 0.035; pointer-events: none; user-select: none;
}

/* CONTAINER + SECTION rhythm (120px) */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.container-prose { max-width: 70ch; margin: 0 auto; padding: 0 1.5rem; }
section { padding: 7.5rem 0; }
@media (min-width: 1024px) { section { padding: 7.5rem 0; } }