/* ────────────────────────────────────────────────────────────────────
   FLOWNIQ Dialekt — TECHNICAL / ENGINEERING
   Schematisch. Diagrammlastig. Wie hochwertige Produkt-Doku.
   Monospace-Akzente, Grid-Overlays, Callouts, Datenpunkte überall.
   Akzent (Cyan) als technische Highlight-Farbe für „Daten".
   ──────────────────────────────────────────────────────────────────── */

body {
  background: #fbfbfc;
  background-image:
    linear-gradient(var(--flq-ink-100) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--flq-ink-100) 0.5px, transparent 0.5px);
  background-size: 32px 32px;
  background-position: -0.5px -0.5px;
}

/* Tabular nums everywhere */
* { font-variant-numeric: tabular-nums; }

/* ─── Typography — clean sans for body, mono accents ─── */
h1, .display, .hero__title, .page-header__title { font-weight: 600 !important; letter-spacing: -0.02em; }
h2 { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 19px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
p { font-size: 14px; line-height: 1.6; }
.lead { font-size: 16px; line-height: 1.6; }

/* Mono primary on labels/stats/code */
.overline, .field-label, .stat__label, .accordion__icon,
.code-block, .data-table th, .caption, .hero__meta,
.tag, .tabs__tab, .anchor-nav a, .breadcrumbs,
.pricing__name, .timeline__date, .stepper__sub,
.cell-meta {
  font-family: var(--font-mono) !important;
}

.overline {
  color: var(--flq-cyan-700); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.overline::before {
  content: "▸ ";
  color: var(--flq-cyan-500);
}

.eyebrow {
  background: var(--flq-cyan-100);
  color: var(--flq-cyan-700);
  border: 1px solid var(--flq-cyan-300);
  font-family: var(--font-mono);
  font-size: 10px; padding: 3px 8px; border-radius: 3px;
  letter-spacing: 0.02em; text-transform: uppercase;
  gap: 6px;
}
.eyebrow svg { width: 8px; height: 8px; color: var(--flq-cyan-600); }
.eyebrow::before { content: "[ "; color: var(--flq-cyan-600); }
.eyebrow::after { content: " ]"; color: var(--flq-cyan-600); }

/* ─── Page chrome ─── */
.section { padding-top: 72px; padding-bottom: 72px; }
.section-sm { padding-top: 48px; padding-bottom: 48px; }
.container { max-width: 1280px; }
.section-head { margin-bottom: 48px; }
.section-head h2 { font-size: 32px; line-height: 1.15; }

/* ─── Header — flat, with rule below ─── */
.site-header {
  background: #fff; backdrop-filter: none;
  border-bottom: 1px solid var(--border-1);
  box-shadow: 0 1px 0 var(--bg-page);
}
.site-header__inner { height: 60px; gap: var(--sp-5); }
.site-header__nav a, .site-header__nav button {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 500; padding: 6px 10px; border-radius: 3px;
}
.site-header__nav a.is-active {
  background: var(--flq-cyan-100); color: var(--flq-cyan-700);
}
.site-header__cta .btn-primary {
  border-radius: 3px; font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; padding: 6px 14px;
}
.site-header__cta .btn-ghost {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
}

/* ─── HERO — split, with schematic visual ─── */
.hero {
  padding: 48px 0 64px;
  background: #fff; border-bottom: 1px solid var(--border-1);
  position: relative;
}
.hero::before {
  /* coordinate marker tick at top-left */
  content: "01"; position: absolute; top: 16px; left: var(--sp-6);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.1em;
}
.hero::after {
  content: "/section/hero.tsx"; position: absolute; top: 16px; right: var(--sp-6);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
}
.hero__grid { gap: 56px; align-items: center; }
.hero__title {
  font-size: clamp(32px, 4.5vw, 52px) !important;
  line-height: 1.08 !important; letter-spacing: -0.025em !important;
  font-weight: 600 !important;
}
.hero__title em {
  background: var(--flq-cyan-100);
  color: var(--flq-cyan-700);
  font-style: normal;
  padding: 0 8px; border-radius: 4px;
  border: 1px dashed var(--flq-cyan-500);
}
.hero__title em::after { display: none; }
.hero__sub { font-size: 16px !important; line-height: 1.6 !important; }
.hero__cta { gap: 12px; }
.hero__cta .btn { border-radius: 3px; font-family: var(--font-mono); font-weight: 600; }
.hero__cta .btn-secondary {
  background: #fff; border-color: var(--border-2);
}
.hero__cta .btn-secondary::before { content: "$ "; color: var(--fg-3); }
.hero__cta .btn-primary::before { content: ""; }
.hero__meta {
  font-family: var(--font-mono); font-size: 11px;
  border-top: 1px dashed var(--border-1); padding-top: 16px; margin-top: 12px;
  gap: 16px;
}
.hero__meta strong { font-family: var(--font-mono); font-weight: 700; color: var(--flq-cyan-700); }
.hero__meta .dot { background: var(--flq-cyan-500); }

/* Workflow visual: blueprint frame */
.flow-visual {
  background: #fff;
  border: 1px solid var(--border-2); border-radius: 4px;
  box-shadow: var(--sh-2); position: relative; padding: 32px 24px 24px;
}
.flow-visual::before {
  content: "FIG.01 — workflow.runtime"; position: absolute; top: 8px; left: 16px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.04em;
}
.flow-visual::after {
  content: "v3.2.0"; position: absolute; top: 8px; right: 16px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
}
.flow-visual__head { display: none; }
.flow-node {
  background: #fff; border-color: var(--border-2);
  border-radius: 3px; position: relative;
}
.flow-node:hover { transform: none; border-color: var(--flq-cyan-500); }
.flow-node__t { font-family: var(--font-sans); font-weight: 600; }
.flow-node__s { font-family: var(--font-mono); }
.flow-node::before {
  content: ""; position: absolute; left: -8px; top: 50%;
  width: 4px; height: 4px; background: var(--flq-cyan-500); border-radius: 999px;
}
.flow-arrow {
  height: 12px; margin-left: 16px; background: transparent;
  border-left: 1px dashed var(--border-2); width: 0;
}
.flow-arrow::after { display: none; }

/* ─── Buttons: small radius, mono ─── */
.btn {
  border-radius: 3px; font-family: var(--font-mono);
  font-weight: 600; letter-spacing: 0;
}
.btn-lg { padding: 12px 22px; font-size: 13px; }
.btn-primary { background: var(--brand); }
.btn-primary:hover { background: var(--flq-cyan-700); }
.btn-secondary { background: #fff; border-color: var(--border-2); }

/* ─── Cards: blueprint style, header coordinates ─── */
.card, .card-lg {
  background: #fff; border: 1px solid var(--border-1);
  border-radius: 4px; box-shadow: none;
  position: relative;
}

.feature {
  padding: 20px; border-radius: 4px; background: #fff;
  position: relative; overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; top: 0; right: 0; width: 0;
  border-style: solid; border-width: 0 24px 24px 0;
  border-color: transparent var(--flq-cyan-100) transparent transparent;
}
.feature__icon {
  width: 36px; height: 36px; border-radius: 4px;
  background: var(--bg-page); color: var(--flq-cyan-700);
  border: 1px solid var(--flq-cyan-300);
}
.feature__title { font-size: 15px; font-weight: 600; }
.feature__title::before {
  content: counter(feat-counter, decimal-leading-zero) " · ";
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); font-weight: 500;
}
.feature-grid { counter-reset: feat-counter; }
.feature { counter-increment: feat-counter; }
.feature__body { font-size: 13px; color: var(--fg-2); }

/* Use-case cards */
.use-case-grid > a { border-radius: 4px; box-shadow: none; }
.use-case-grid > a:hover { transform: none; box-shadow: var(--sh-2); border-color: var(--flq-cyan-500); }

/* Logo wall — table-like */
.logo-wall { border-radius: 4px; background: #fff; }
.logo-wall__cell {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; padding: 24px 12px; color: var(--fg-2);
}

/* Stats — blueprint readout */
.stats { gap: var(--sp-4); }
.stats > div {
  background: #fff; border: 1px solid var(--border-1); border-radius: 4px;
  padding: 20px; position: relative;
}
.stats > div::before {
  content: "//"; position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-4);
}
.stat__num {
  font-family: var(--font-mono); font-size: 36px; font-weight: 700;
  color: var(--fg-1); line-height: 1; letter-spacing: -0.02em;
}
.stat__num .accent { color: var(--flq-cyan-700); }
.stat__label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-top: 10px; }
.stat__sub { font-size: 11px; color: var(--fg-3); }
.stats--inverse > div { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

/* Testimonial — block-quote inside a frame */
.testimonial {
  background: #fff; border: 1px solid var(--border-1); border-radius: 4px;
  padding: 48px; position: relative;
}
.testimonial::before {
  content: "// quote.testimony"; position: absolute; top: 14px; left: 24px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
}
.testimonial__quote {
  font-size: 22px !important; line-height: 1.5 !important;
  font-weight: 500 !important; font-style: normal; letter-spacing: -0.01em;
}
.testimonial__quote::before { display: none; }
.testimonial__role { font-family: var(--font-mono); font-size: 11px; }
.testimonial__logo {
  background: var(--bg-page); border: 1px dashed var(--border-2); border-radius: 4px;
}
.testimonial__logo .l { font-family: var(--font-mono); font-size: 18px; }

/* Pricing — comparison table feel */
.pricing {
  border-radius: 4px; padding: 24px; gap: 16px;
  border-width: 1px;
}
.pricing.is-featured { border-color: var(--flq-cyan-500); border-width: 2px; }
.pricing__name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pricing__desc { font-size: 12px; }
.pricing__price .amt { font-family: var(--font-mono); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.pricing__price .per { font-family: var(--font-mono); font-size: 12px; }
.pricing__list li { font-size: 12px; }
.pricing__list li::before {
  content: "[" attr(data-i) "]"; font-family: var(--font-mono);
  font-size: 9px; color: var(--fg-4); margin-right: 6px;
}
.pricing__badge {
  background: var(--flq-cyan-100); color: var(--flq-cyan-700);
  border: 1px solid var(--flq-cyan-500);
  font-family: var(--font-mono); font-size: 9px; padding: 2px 8px; border-radius: 3px;
  letter-spacing: 0.04em;
}

/* CTA banner — schematic dark with grid */
.cta-banner {
  background: var(--flq-navy-900); color: #fff; border-radius: 4px;
  padding: 56px 56px; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(63,176,206,0.12) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(63,176,206,0.12) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  pointer-events: none;
}
.cta-banner .watermark-dots { display: none; }
.cta-banner > div { position: relative; z-index: 1; }
.cta-banner h2 { font-size: 32px; }
.cta-banner p { font-size: 16px; }
.cta-banner .btn-primary { background: var(--accent); color: var(--flq-navy-900); font-weight: 700; }
.cta-banner .btn-secondary { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }

/* Page header — with coordinate markers */
.page-header {
  background: #fff; padding: 56px 0 48px;
  border-bottom: 1px solid var(--border-1);
  position: relative;
}
.page-header::before {
  content: "/page"; position: absolute; top: 16px; right: var(--sp-6);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
}
.page-header__title {
  font-size: clamp(32px, 4vw, 44px) !important;
  font-weight: 600 !important; letter-spacing: -0.025em !important;
}
.page-header__sub { font-size: 16px; }
.breadcrumbs { font-family: var(--font-mono); font-size: 11px; }
.breadcrumbs a:hover { color: var(--flq-cyan-700); }
.breadcrumbs .current { color: var(--fg-1); }

/* Anchor nav — like code tabs */
.anchor-nav {
  background: #fff; border-radius: 4px; padding: 4px;
  gap: 0;
}
.anchor-nav a {
  font-family: var(--font-mono); font-size: 11px; padding: 6px 12px;
  border-right: 1px solid var(--border-1); border-radius: 0; font-weight: 500;
}
.anchor-nav a:last-child { border-right: 0; }
.anchor-nav a:hover { background: var(--bg-page); color: var(--flq-cyan-700); }

/* Tabs */
.tabs__list { background: #fff; border-radius: 4px; padding: 3px; }
.tabs__tab { font-family: var(--font-mono); font-size: 12px; padding: 7px 14px; font-weight: 500; border-radius: 3px; }
.tabs__tab.is-active { background: var(--flq-navy-900); color: #fff; box-shadow: none; }

/* Accordion */
.accordion__item { border-radius: 4px; background: #fff; border-color: var(--border-1); }
.accordion__item.is-open { box-shadow: none; border-color: var(--flq-cyan-500); }
.accordion__head { font-size: 14px; font-weight: 600; padding: 14px 18px; gap: 12px; font-family: var(--font-sans); }
.accordion__head::before {
  content: "?  "; font-family: var(--font-mono); font-size: 11px;
  color: var(--flq-cyan-700); font-weight: 700;
}
.accordion__icon { border-radius: 3px; background: var(--bg-page); border: 1px solid var(--border-1); }
.accordion__item.is-open .accordion__icon { background: var(--flq-cyan-500); color: #fff; border-color: var(--flq-cyan-500); }
.accordion__body { padding: 0 18px; }
.accordion__body-inner { font-size: 13px; line-height: 1.6; padding-bottom: 16px; padding-left: 22px; border-left: 1px dashed var(--border-2); margin-left: 4px; }

/* Alerts — code-comment style */
.alert {
  border-radius: 3px; padding: 12px 16px; gap: 12px;
  border: 1px solid; background: #fff;
  font-family: var(--font-mono);
}
.alert-info { border-color: var(--flq-info-600); background: var(--flq-info-100); }
.alert-success { border-color: var(--flq-success-600); background: var(--flq-success-100); }
.alert-warning { border-color: var(--flq-warning-600); background: var(--flq-warning-100); }
.alert-danger { border-color: var(--flq-danger-600); background: var(--flq-danger-100); }
.alert__title { font-size: 12px; font-family: var(--font-mono); }
.alert__title::before { content: "// "; color: currentColor; opacity: 0.6; }
.alert__msg { font-size: 12px; font-family: var(--font-mono); line-height: 1.55; }

/* Badges — monospace tags */
.badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 2px; letter-spacing: 0; font-weight: 600; }
.tag { font-family: var(--font-mono); border-radius: 2px; }
.chip { border-radius: 3px; font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; font-weight: 500; }
.chip.is-active { background: var(--flq-navy-900); border-color: var(--flq-navy-900); }

/* Forms — schematic */
.input, .select, .textarea {
  border-radius: 3px; font-family: var(--font-mono);
  font-size: 13px; padding: 10px 12px;
  background: #fff;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--flq-cyan-500);
  box-shadow: 0 0 0 2px rgba(63,176,206,0.15);
}
.field-label { font-size: 11px; letter-spacing: 0.02em; font-weight: 600; font-family: var(--font-mono); }
.field-label::before { content: "▸ "; color: var(--flq-cyan-500); }
.field-help { font-family: var(--font-mono); font-size: 11px; }

/* Table — engineering readout */
.table-wrap { border-radius: 4px; }
.table-wrap::before {
  content: "// data.runtime.workflows"; display: block;
  padding: 6px 14px; font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); background: var(--bg-page); border-bottom: 1px solid var(--border-1);
}
.data-table { font-family: var(--font-mono); font-size: 12px; }
.data-table th { font-size: 10px; letter-spacing: 0.04em; }
.data-table td { padding: 10px 14px; }
.data-table .avatar { border-radius: 4px; font-family: var(--font-mono); }

/* Charts */
.chart-card { border-radius: 4px; }
.chart-card__title { font-size: 13px; font-weight: 600; }
.chart-card__sub { font-family: var(--font-mono); font-size: 11px; }
.bar-chart { border-bottom: 1px dashed var(--border-2); }
.bar-chart__bar { border-radius: 0; }

/* Timeline — annotated */
.timeline__row { padding-bottom: 24px; }
.timeline__date { font-family: var(--font-mono); }
.timeline__title { font-size: 15px; font-weight: 600; }
.timeline__body { font-size: 12px; }
.timeline__bullet { background: #fff; border: 2px solid var(--flq-cyan-500); box-shadow: 0 0 0 1px var(--flq-cyan-500); width: 10px; height: 10px; }
.timeline__row.is-accent .timeline__bullet { background: var(--flq-cyan-500); box-shadow: 0 0 0 1px var(--flq-cyan-500); }
.timeline__row:not(:last-child) .timeline__bullet::after { background: var(--border-2); }

/* Pagination */
.pagination .page, .pagination .step { border-radius: 3px; font-family: var(--font-mono); font-size: 12px; }
.pagination .page.is-active { background: var(--flq-cyan-700); border-color: var(--flq-cyan-700); }

/* Progress bar */
.progress__track { height: 4px; }
.progress__head { font-family: var(--font-mono); font-size: 11px; }

/* Stepper — labelled */
.stepper__num { font-family: var(--font-mono); border-radius: 3px; font-weight: 700; }
.stepper__label { font-size: 13px; font-weight: 600; }
.stepper__sub { font-size: 11px; }

/* Code block — already monospaced; just tweak */
.code-block { border-radius: 4px; font-size: 12px; }

/* Footer — schematic dark */
.site-footer { background: var(--flq-navy-900); padding-top: 56px; }
.site-footer__col h4 { font-family: var(--font-mono); font-size: 10px; }
.site-footer__col a { font-family: var(--font-mono); font-size: 12px; }
.site-footer__brand p { font-size: 13px; }
.site-footer__bottom { font-family: var(--font-mono); font-size: 11px; }

/* Blockquote — comment-style */
.blockquote {
  background: var(--flq-cyan-100); border-radius: 4px;
  border-left: 3px solid var(--flq-cyan-700);
  font-size: 16px; font-style: normal; line-height: 1.55;
  font-weight: 500; padding: 24px 28px;
}
.blockquote::before {
  content: "/* "; font-family: var(--font-mono); color: var(--flq-cyan-700);
}
.blockquote::after {
  content: " */"; font-family: var(--font-mono); color: var(--flq-cyan-700);
}
.blockquote cite { font-family: var(--font-mono); font-size: 11px; }

/* Section backgrounds: alternating subtle bands */
.bg-tint { background: #f6f8fb; }

/* Modal */
.modal { border-radius: 4px; }
.modal__head h3 { font-weight: 600; }
.modal__head h3::before { content: "// "; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); font-weight: 500; }

/* Pricing list — counter-style bullets */
.pricing__list li:nth-child(1)::before { content: "[01]"; }
.pricing__list li:nth-child(2)::before { content: "[02]"; }
.pricing__list li:nth-child(3)::before { content: "[03]"; }
.pricing__list li:nth-child(4)::before { content: "[04]"; }
.pricing__list li:nth-child(5)::before { content: "[05]"; }
.pricing__list li:nth-child(6)::before { content: "[06]"; }
.pricing__list li::before {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
  margin-right: 8px; flex-shrink: 0;
}
.pricing__list li .ic { display: none; }
.pricing__list li.is-out::before { color: var(--flq-danger-500); }

/* Pricing table comparison (rows) */
.pricing-rows__row { font-family: var(--font-mono); font-size: 12px; padding: 8px 16px; }
.pricing-rows__row.is-head { font-family: var(--font-mono); }

/* Map — coordinate marker */
.map { border-radius: 4px; }
.map__label { font-family: var(--font-mono); font-size: 11px; }