/* ────────────────────────────────────────────────────────────────────
   FLOWNIQ Dialekt — EDITORIAL
   Magazinhafte Anmutung. Großzügiges Whitespace. Großes ruhiges Display.
   Akzent (Cyan) nur als feines Detail. Cards lösen sich auf — Trennung
   geschieht durch Atemraum, nicht durch Linien.
   ──────────────────────────────────────────────────────────────────── */

body {
  --section-pad-y: 144px;
  --content-max: 1120px;
}

/* Maximalbreite für Lesetypografie */
.container { max-width: var(--content-max); }
.section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); }
.section-sm { padding-top: 96px; padding-bottom: 96px; }

/* ─── Header: minimaler, ohne Hintergrund-Blur ─── */
.site-header { background: transparent; backdrop-filter: none; border-bottom: 0; }
.site-header__inner { height: 96px; gap: var(--sp-9); }
.site-header__nav a, .site-header__nav button {
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: var(--fw-medium); padding: 8px 4px; border-radius: 0;
}
.site-header__nav a:hover, .site-header__nav button:hover { background: transparent; color: var(--brand); }
.site-header__nav a.is-active { background: transparent; color: var(--brand); border-bottom: 1.5px solid var(--brand); border-radius: 0; }
.site-header__cta .btn-primary {
  background: transparent; color: var(--fg-1); border: 1px solid var(--fg-1);
  border-radius: 0; padding: 14px 22px; letter-spacing: 0.02em;
}
.site-header__cta .btn-primary:hover { background: var(--fg-1); color: #fff; }

/* ─── Typography: bigger, lighter, looser ─── */
h1, .display { font-weight: 700; }
h2 { font-weight: 700; letter-spacing: -0.02em; font-size: 44px; line-height: 1.12; }
h3 { font-weight: 600; font-size: 26px; }
h4 { font-weight: 600; font-size: 20px; }
p { font-size: 17px; line-height: 1.7; }
.lead { font-size: 21px; line-height: 1.55; font-weight: 400; color: var(--fg-1); max-width: 640px; }
.overline { color: var(--brand); letter-spacing: 0.18em; font-size: 12px; }
.eyebrow {
  background: transparent; color: var(--brand);
  padding: 0; letter-spacing: 0.18em; font-size: 11px;
  border-radius: 0; gap: 12px;
}
.eyebrow::before { content: ""; display: inline-block; width: 32px; height: 1px; background: var(--brand); }
.eyebrow svg { display: none; }

/* Section heads — left-aligned in this dialect */
.section-head { text-align: left; margin: 0 0 80px; max-width: 720px; align-items: flex-start; gap: 24px; }
.section-head h2 { font-size: 56px; line-height: 1.05; letter-spacing: -0.025em; }
.section-head .lead { font-size: 21px; }

/* ─── HERO: asymmetric, single column on a wide stage, generous whitespace ─── */
.hero { padding: 144px 0 144px; }
.hero__grid { grid-template-columns: 1.5fr 1fr; gap: 96px; align-items: end; }
.hero__copy { gap: 36px; max-width: 720px; }
.hero__title {
  font-size: clamp(48px, 7vw, 88px) !important;
  line-height: 1.02 !important; letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}
.hero__title em { color: var(--fg-1); }
.hero__title em::after { background: var(--accent); height: 4px; bottom: 6px; }
.hero__sub { font-size: 21px !important; line-height: 1.55 !important; color: var(--fg-2); max-width: 560px; font-weight: 400; }
.hero__cta { gap: 32px; align-items: center; }
.hero__cta .btn { border-radius: 0; padding: 18px 28px; font-size: 14px; letter-spacing: 0.04em; }
.hero__cta .btn-primary { background: var(--fg-1); }
.hero__cta .btn-secondary { background: transparent; border-color: transparent; padding: 18px 0; }
.hero__cta .btn-secondary:hover { background: transparent; color: var(--brand); border-color: transparent; }
.hero__meta { font-size: 12px; letter-spacing: 0.04em; color: var(--fg-3); border-top: 1px solid var(--border-1); padding-top: 24px; margin-top: 16px; gap: 24px; }

/* Workflow visual: less prominent, cleaner */
.flow-visual { border: 0; box-shadow: none; padding: 0; background: transparent; }
.flow-visual__head { border-bottom: 1px solid var(--border-1); padding-bottom: 16px; }
.flow-node { border: 0; border-bottom: 1px solid var(--border-1); border-radius: 0; padding: 18px 0; background: transparent; }
.flow-node:hover { transform: none; border-color: var(--accent); }
.flow-arrow { display: none; }

/* ─── Cards: borderless by default; rely on whitespace ─── */
.card, .feature {
  border: 0; background: transparent; box-shadow: none; padding: 0;
}
.feature { padding: 0; gap: 20px; }
.feature__icon {
  width: 48px; height: 48px; background: transparent; color: var(--brand);
  border: 1px solid var(--border-1); border-radius: 0;
}
.feature__title { font-size: 22px; font-weight: 600; }
.feature__body { font-size: 16px; line-height: 1.65; }
.feature-grid { gap: 80px 64px; }

/* Re-enable cards that need a clear surface (forms, tables, modals) */
.card-lg, .table-wrap, .modal, .chart-card, .pricing, .accordion__item {
  background: var(--bg-surface); border: 1px solid var(--border-1); padding: var(--sp-7);
}
.pricing { padding: 48px 40px; border-radius: 0; }
.pricing.is-featured { border-color: var(--fg-1); }
.pricing__badge { border-radius: 0; background: var(--fg-1); }

/* Use-case cards — full-bleed image, no card frame */
.use-case-grid > a { border: 0 !important; box-shadow: none !important; padding: 0; }
.use-case-grid > a:hover { transform: none; }
.use-case-grid .card-image { aspect-ratio: 4/5; border-radius: 0; }

/* Logo wall: borderless, breathy */
.logo-wall { background: transparent; border: 0; gap: 32px; grid-template-columns: repeat(6,1fr); }
.logo-wall__cell { border: 0 !important; padding: 32px 16px; font-weight: 500; color: var(--fg-3); }
.logo-wall__cell:hover { background: transparent; color: var(--fg-1); }

/* Stats — large, restrained */
.stat__num { font-size: 88px; font-weight: 700; letter-spacing: -0.04em; }
.stat__label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 24px; }
.stat__sub { margin-top: 8px; }

/* Testimonial — pull-quote without container */
.testimonial { background: transparent; border: 0; padding: 64px 0; grid-template-columns: 1fr; gap: 48px; }
.testimonial__quote { font-size: 40px !important; line-height: 1.25 !important; font-weight: 400 !important; letter-spacing: -0.02em; }
.testimonial__quote::before { color: var(--brand); font-size: 96px; }
.testimonial__logo { display: none; }

/* CTA banner: airy, with white type only */
.cta-banner { padding: 144px 96px; border-radius: 0; }
.cta-banner h2 { font-size: 56px; letter-spacing: -0.025em; }
.cta-banner p { font-size: 21px; }
.cta-banner .btn { border-radius: 0; }

/* Buttons inherit the editorial squared form */
.btn { border-radius: 0; letter-spacing: 0.02em; }
.btn-primary { background: var(--fg-1); }
.btn-primary:hover { background: var(--brand); }

/* Page header — much bigger */
.page-header { padding: 144px 0 96px; background: transparent; border-bottom: 1px solid var(--border-1); }
.page-header__title { font-size: clamp(56px, 7vw, 96px) !important; letter-spacing: -0.035em !important; line-height: 1.02 !important; font-weight: 700 !important; }
.page-header__sub { font-size: 21px; }

/* Pricing grid more breath */
.pricing-grid { gap: 32px; }

/* Tabs more like a magazine TOC */
.tabs__list { background: transparent; border: 0; padding: 0; gap: 32px; }
.tabs__tab { border-radius: 0; padding: 8px 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.tabs__tab.is-active { background: transparent; box-shadow: none; border-bottom: 1.5px solid var(--fg-1); color: var(--fg-1); }

/* Anchor-nav very subtle */
.anchor-nav { background: transparent; border: 0; padding: 0; gap: 24px; border-bottom: 1px solid var(--border-1); border-radius: 0; padding-bottom: 16px; }
.anchor-nav a { padding: 4px 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.anchor-nav a:hover { background: transparent; color: var(--fg-1); }

/* Accordion: hairline only */
.accordion__item { border: 0; border-top: 1px solid var(--border-1); border-radius: 0; padding: 0; background: transparent; }
.accordion__item:last-child { border-bottom: 1px solid var(--border-1); }
.accordion__item.is-open { box-shadow: none; }
.accordion__head { padding: 32px 0; font-size: 22px; font-weight: 500; gap: 32px; }
.accordion__head:hover { background: transparent; color: var(--brand); }
.accordion__icon { background: transparent; border: 1px solid var(--border-1); border-radius: 0; }
.accordion__item.is-open .accordion__icon { background: var(--fg-1); border-color: var(--fg-1); }
.accordion__body { padding: 0 0 16px; }
.accordion__body-inner { font-size: 17px; line-height: 1.7; padding: 0 80px 32px 0; }

/* Section-head left-aligned tweak (forces alignment when class .left is missing) */
.section-head.left, .section-head { text-align: left; align-items: flex-start; }
.section .section-head:has(+ .feature-grid) { margin-bottom: 80px; }

/* Footer — quieter */
.site-footer { background: var(--fg-1); padding-top: 96px; padding-bottom: 32px; }

/* Disable section tint backgrounds (editorial prefers neutral page) */
.bg-tint { background: transparent; }
.bg-tint .section-head { border-top: 1px solid var(--border-1); padding-top: 64px; }