/* ────────────────────────────────────────────────────────────────────
   FLOWNIQ Dialekt — BOLD
   Plakative Heros. Hoher Kontrast. Dunkle Sektionen wechseln mit hellen.
   Akzent-Cyan und Brand-Navy als fl\u00e4chige Setzungen — keine Restraint.
   Headlines extra-bold, Buttons gro\u00df, Cards mit kr\u00e4ftiger Pr\u00e4senz.
   ──────────────────────────────────────────────────────────────────── */

body { background: var(--bg-page); }

/* ─── Typography: extra-bold display ─── */
h1, .display, .hero__title, .page-header__title { font-weight: 800 !important; letter-spacing: -0.035em !important; }
h2 { font-weight: 800; letter-spacing: -0.025em; }
h3 { font-weight: 700; }
.overline { color: var(--accent-hover); font-weight: 700; letter-spacing: 0.1em; }
.eyebrow {
  background: var(--flq-navy-900); color: #fff;
  padding: 8px 16px; border-radius: 0; font-weight: 700; letter-spacing: 0.08em;
  border: 0; font-size: 12px;
}
.eyebrow svg { color: var(--accent); }

/* ─── Header: solid dark ─── */
.site-header {
  background: var(--flq-navy-900); backdrop-filter: none;
  border-bottom: 0;
}
.site-header__logo img { filter: brightness(0) invert(1); }
.site-header__nav a, .site-header__nav button { color: rgba(255,255,255,0.85); font-weight: 600; }
.site-header__nav a:hover, .site-header__nav button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.site-header__nav a.is-active { color: var(--accent); background: transparent; }
.site-header__cta .btn-ghost { color: #fff; }
.site-header__cta .btn-ghost:hover { background: rgba(255,255,255,0.1); }
.site-header__cta .btn-primary {
  background: var(--accent); color: var(--flq-navy-900);
  font-weight: 700;
}
.site-header__cta .btn-primary:hover { background: #fff; }
.site-header__hamburger { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.dropdown__menu { background: var(--flq-navy-800); border-color: rgba(255,255,255,0.1); }
.dropdown__menu a { color: rgba(255,255,255,0.85); }
.dropdown__menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dropdown__menu a .ic { color: var(--accent); }
.dropdown__menu a small { color: rgba(255,255,255,0.55); }

/* ─── HERO: full-bleed dark with massive type ─── */
.hero {
  background: var(--flq-navy-900); color: #fff;
  padding: 96px 0 96px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(63,176,206,.20) 0 6px, transparent 7px),
    radial-gradient(circle at 24% 26%, rgba(63,176,206,.16) 0 5px, transparent 6px),
    radial-gradient(circle at 32% 18%, rgba(63,176,206,.18) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 72%, rgba(63,176,206,.14) 0 7px, transparent 8px),
    radial-gradient(circle at 76% 78%, rgba(63,176,206,.12) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 64%, rgba(63,176,206,.16) 0 6px, transparent 7px);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__copy { color: #fff; }
.hero__title {
  font-size: clamp(48px, 7.5vw, 96px) !important;
  line-height: 1.16 !important; letter-spacing: -0.04em !important;
  font-weight: 900 !important; color: #fff !important;
  text-transform: none;
}
.hero__title em { color: var(--accent); white-space: nowrap; }
.hero__title em::after { background: var(--accent); opacity: 0.25; bottom: 4px; height: 12px; }
.hero__sub { font-size: 22px !important; color: rgba(255,255,255,0.80) !important; }
.hero__cta .btn-primary {
  background: var(--accent); color: var(--flq-navy-900); font-weight: 700;
  font-size: 16px; padding: 18px 30px;
}
.hero__cta .btn-primary:hover { background: #fff; }
.hero__cta .btn-secondary {
  background: transparent; border-color: rgba(255,255,255,0.3); color: #fff;
  font-size: 16px; padding: 18px 30px;
}
.hero__cta .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.hero__meta { color: rgba(255,255,255,0.6); }
.hero__meta strong, .hero__meta span { color: rgba(255,255,255,0.85) !important; }
.hero__meta .dot { background: rgba(255,255,255,0.25); }

/* Workflow visual on dark hero: glassy */
.flow-visual { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.flow-visual__head { border-bottom-color: rgba(255,255,255,0.12); }
.flow-visual__title { color: rgba(255,255,255,0.55); }
.flow-node {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12);
}
.flow-node__t { color: #fff; }
.flow-node__s { color: rgba(255,255,255,0.55); }

/* ─── Section heads — large, attention-grabbing ─── */
.section-head h2 { font-size: 48px; line-height: 1.22; }
.section-head .lead { font-size: 18px; color: var(--fg-2); }

/* ─── Buttons: bigger, bolder ─── */
.btn { font-weight: 700; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-primary { background: var(--brand); }
.btn-primary:hover { background: var(--accent); color: var(--flq-navy-900); }

/* ─── Feature grid: high-contrast cards w/ accent border on hover ─── */
.feature {
  border-width: 2px; padding: 32px;
  position: relative; overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 240ms var(--ease-out);
}
.feature:hover::before { transform: scaleY(1); }
.feature:hover { border-color: var(--brand); }
.feature__icon { background: var(--brand); color: #fff; width: 56px; height: 56px; border-radius: 0; }
.feature__title { font-size: 22px; font-weight: 700; }

/* Card hover: stronger shadow */
.card-link:hover { box-shadow: 0 24px 48px rgba(26,28,61,0.18); }

/* Use-case cards: brand colored covers */
.use-case-grid .card-image { aspect-ratio: 4/3; }
.use-case-grid .placeholder-mark { color: rgba(255,255,255,0.6); font-size: 32px; }

/* Logo wall — heavier */
.logo-wall { border-width: 2px; border-color: var(--fg-1); }
.logo-wall__cell { color: var(--fg-1); font-weight: 800; font-size: 18px; }

/* Stats — gigantic */
.stat__num { font-size: 80px; font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; }
.stat__label { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }

/* Stats section even bigger inverse */
.stats--inverse { padding: 16px 0; }

/* Testimonial — heavy framed */
.testimonial {
  border: 2px solid var(--fg-1); border-radius: 0;
  background: var(--bg-surface); padding: 64px;
}
.testimonial__quote { font-size: 30px !important; line-height: 1.32 !important; font-weight: 700 !important; }
.testimonial__quote::before { color: var(--accent); font-size: 100px; }
.testimonial__logo { background: var(--flq-navy-900); border-radius: 0; }
.testimonial__logo .l { color: #fff; font-weight: 800; font-size: 36px; }
.testimonial__logo .l-sub { color: rgba(255,255,255,0.5); }

/* Pricing — featured plan POPS */
.pricing { border-width: 2px; border-radius: 0; }
.pricing.is-featured {
  background: var(--flq-navy-900); color: #fff;
  border-color: var(--flq-navy-900);
}
.pricing.is-featured .pricing__name,
.pricing.is-featured .pricing__price .amt { color: #fff; }
.pricing.is-featured .pricing__desc { color: rgba(255,255,255,0.7); }
.pricing.is-featured .pricing__list li { color: rgba(255,255,255,0.88); }
.pricing.is-featured .pricing__list li strong { color: #fff; }
.pricing.is-featured .pricing__list li .ic { color: var(--accent); }
.pricing.is-featured .pricing__badge { background: var(--accent); color: var(--flq-navy-900); font-weight: 800; border-radius: 0; }
.pricing.is-featured .btn-primary { background: var(--accent); color: var(--flq-navy-900); }
.pricing.is-featured .btn-primary:hover { background: #fff; }

/* CTA banner — accent variant */
.cta-banner {
  background: var(--accent);
  color: var(--flq-navy-900);
  border-radius: 0; padding: 80px 64px;
}
.cta-banner h2 { color: var(--flq-navy-900) !important; font-size: 56px; line-height: 1.2; }
.cta-banner p { color: var(--flq-navy-900) !important; opacity: 0.78; font-size: 20px; }
.cta-banner .watermark-dots { display: none; }
.cta-banner .btn-primary { background: var(--flq-navy-900); color: #fff; }
.cta-banner .btn-primary:hover { background: #000; color: var(--accent); }
.cta-banner .btn-secondary { background: transparent; border-color: var(--flq-navy-900); color: var(--flq-navy-900); }
.cta-banner .btn-secondary:hover { background: var(--flq-navy-900); color: #fff; }

/* Page header: dark, plakativ */
.page-header {
  background: var(--flq-navy-900); color: #fff;
  border-bottom: 0; padding: 96px 0;
  position: relative; overflow: hidden;
}
.page-header::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 88% 30%, rgba(63,176,206,.16) 0 8px, transparent 9px),
    radial-gradient(circle at 96% 22%, rgba(63,176,206,.12) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 38%, rgba(63,176,206,.10) 0 6px, transparent 7px);
}
.page-header__inner { position: relative; z-index: 1; }
.page-header__title { color: #fff !important; font-weight: 900 !important; font-size: clamp(48px, 7vw, 80px) !important; }
.page-header__sub { color: rgba(255,255,255,0.78); }
.breadcrumbs, .breadcrumbs a, .breadcrumbs .sep { color: rgba(255,255,255,0.55); }
.breadcrumbs .current { color: var(--accent); }
.page-header .btn-primary { background: var(--accent); color: var(--flq-navy-900); font-weight: 700; }
.page-header .btn-primary:hover { background: #fff; }
.page-header .btn-secondary { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.page-header .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* Anchor nav: stronger */
.anchor-nav { background: var(--flq-navy-900); border-color: var(--flq-navy-900); }
.anchor-nav a { color: rgba(255,255,255,0.7); font-weight: 600; }
.anchor-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Tabs: pill-shaped, accent active */
.tabs__list { background: var(--flq-navy-900); border-color: var(--flq-navy-900); padding: 6px; }
.tabs__tab { color: rgba(255,255,255,0.7); font-weight: 600; }
.tabs__tab:hover { color: #fff; }
.tabs__tab.is-active { background: var(--accent); color: var(--flq-navy-900); box-shadow: none; }

/* Accordion: heavier */
.accordion__item { border-width: 2px; }
.accordion__item.is-open { border-color: var(--brand); }
.accordion__head { font-weight: 700; font-size: 18px; }
.accordion__icon { background: var(--brand); color: #fff; }
.accordion__item.is-open .accordion__icon { background: var(--accent); color: var(--flq-navy-900); }

/* Alerts: solid accent stripe */
.alert { border-width: 0; border-left: 4px solid; padding: 20px 24px; border-radius: 0; }
.alert-info { border-left-color: var(--flq-info-600); }
.alert-success { border-left-color: var(--flq-success-600); }
.alert-warning { border-left-color: var(--flq-warning-600); }
.alert-danger { border-left-color: var(--flq-danger-600); }

/* Badges & chips: stronger */
.badge { font-weight: 700; padding: 4px 10px; border-radius: 0; }
.chip { border-radius: 0; border-width: 1.5px; font-weight: 600; }
.chip.is-active { background: var(--flq-navy-900); border-color: var(--flq-navy-900); }

/* Section backgrounds — alternate solid dark */
.bg-tint { background: var(--flq-navy-900); color: #fff; }
.bg-tint h2, .bg-tint h3, .bg-tint .testimonial__name { color: #fff !important; }
.bg-tint p, .bg-tint .lead { color: rgba(255,255,255,0.78) !important; }
.bg-tint .overline { color: var(--accent); }
.bg-tint .testimonial { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.bg-tint .testimonial__role { color: rgba(255,255,255,0.55); }
.bg-tint .blockquote {
  background: transparent; border-color: var(--accent); color: #fff;
  border-left-width: 4px;
}
.bg-tint .blockquote cite { color: rgba(255,255,255,0.65); }
.bg-tint .timeline__bullet { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); border-color: var(--flq-navy-900); }
.bg-tint .timeline__date { color: rgba(255,255,255,0.55); }
.bg-tint .timeline__title { color: #fff; }
.bg-tint .timeline__body { color: rgba(255,255,255,0.7); }
.bg-tint .timeline__row:not(:last-child) .timeline__bullet::after { background: rgba(255,255,255,0.15); }

/* Form fields: heavier borders, square corners on inputs */
.input, .select, .textarea { border-width: 2px; border-radius: 0; padding: 14px 16px; font-weight: 500; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }

/* Buttons squarer in this dialect */
.btn { border-radius: 0; }

/* Modal: heavy frame */
.modal { border-width: 2px; border-radius: 0; }

/* Footer: deeper black, wider top divider */
.site-footer { padding-top: 80px; background: #000; }
.site-footer__top { padding-bottom: 56px; }