/* =========================================================================
   Exactum — assets/css/theme.css
   Motyw biura rachunkowego. Styl: jasny, minimalistyczny, profesjonalny,
   granat + niebieski. Mobile-first; breakpointy 640 / 768 / 880 / 1024.
   Spis: 1.Tokeny 2.Reset 3.Typografia 4.Utility 5.Przyciski 6.Nagłówek
   7.Hero 8.Sekcje 9.Karty 10.Callout 11.Statystyki/pasy 12.Checklist
   13.Kroki/cennik 14.Branże 15.Dwie kolumny 16.Kontakt+formularz
   17.Stopka 18.Logo 19.Reveal 20.Strony treści 21.Reduced-motion
   ========================================================================= */

/* ---------- 1. Tokeny ---------- */
:root {
  /* Granat */
  --ex-navy-900: #0a1626;
  --ex-navy: #0d1b34;       --ex-navy-rgb: 13 27 52;
  --ex-navy-800: #12233f;
  --ex-navy-700: #1e3a5f;

  /* Niebieski */
  --ex-accent: #2563b8;     --ex-accent-rgb: 37 99 184;
  --ex-accent-600: #1d4f99;
  --ex-blue: #3b82d6;
  --ex-blue-bright: #5b9ee6; --ex-blue-bright-rgb: 91 158 230;
  --ex-lavender: #cfe0f5;

  /* Neutralne */
  --ex-white: #ffffff;
  --ex-bg-soft: #f4f7fb;
  --ex-gray: #8294ad;
  --ex-slate: #44546a;
  --ex-slate-strong: #33445c;
  --ex-ink: #0d1b34;

  /* Linie */
  --ex-border: #e2e8f2;
  --ex-border-strong: #cdd8e8;
  --ex-border-dark: rgba(255,255,255,.13);

  /* Powierzchnie na granacie (kontrast) */
  --ex-surface-dark: rgba(255,255,255,.055);
  --ex-surface-dark-2: rgba(255,255,255,.07);
  --ex-highlight-top: inset 0 1px 0 rgba(255,255,255,.06);
  --ex-shadow-dark: 0 10px 30px -16px rgba(0,0,0,.55);

  /* Skala odstępów (rytm pionowy) + gutter poziomy */
  --ex-space-lg: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --ex-space-xl: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  --ex-space-2xl: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  --ex-gutter: clamp(1.25rem, 1rem + 1.2vw, 2rem);

  /* Cienie */
  --ex-shadow-sm: 0 1px 2px rgba(13,27,52,.04), 0 1px 3px rgba(13,27,52,.06);
  --ex-shadow-md: 0 6px 16px rgba(13,27,52,.07), 0 2px 5px rgba(13,27,52,.05);
  --ex-shadow-lg: 0 22px 48px -14px rgba(13,27,52,.20);

  /* Promienie / ruch / nagłówek */
  --ex-radius: 14px;
  --ex-radius-sm: 10px;
  --ex-radius-pill: 9999px;
  --ex-ease: cubic-bezier(.4,0,.2,1);
  --ex-header-h: 64px;
  --ex-logo-accent: #2f7fd1;

  /* Fonty */
  --ex-font-serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ex-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Skala typografii (fluid) */
  --ex-fs-display: clamp(1.95rem, 1.25rem + 3.2vw, 4rem);
  --ex-fs-h2: clamp(1.5rem, 1.15rem + 1.8vw, 2.7rem);
  --ex-fs-h3: clamp(1.1rem, 1.02rem + .45vw, 1.35rem);
  --ex-fs-stat: clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);
  --ex-fs-lead: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  --ex-fs-body: 1rem;
  --ex-fs-sm: .875rem;
  --ex-fs-eyebrow: .75rem;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
h1, h2, h3, h4 { overflow-wrap: break-word; word-wrap: break-word; }
body {
  margin: 0;
  background: var(--ex-white);
  color: var(--ex-slate);
  font-family: var(--ex-font-sans);
  font-size: var(--ex-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--ex-accent); text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
section[id] { scroll-margin-top: calc(var(--ex-header-h) + 16px); }
:focus-visible {
  outline: 2px solid var(--ex-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- 3. Typografia ---------- */
h1, h2, h3, .ex-stat__num, .ex-step__num { font-family: var(--ex-font-serif); }

/* ---------- 4. Utility ---------- */
.ex-skip-link {
  position: absolute; top: -100px; left: .5rem; z-index: 1000;
  background: var(--ex-accent); color: #fff; padding: .6rem 1rem;
  border-radius: var(--ex-radius-sm); font-weight: 600;
}
.ex-skip-link:focus { top: .5rem; }
.ex-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ex-accent { color: var(--ex-accent); }
.ex-section--navy .ex-accent { color: var(--ex-blue-bright); }

.ex-eyebrow {
  font-size: var(--ex-fs-eyebrow); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ex-accent); margin: 0 0 .75rem;
}
.ex-eyebrow--light { color: var(--ex-lavender); }

/* ---------- 5. Przyciski ---------- */
.ex-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ex-font-sans); font-weight: 600; line-height: 1;
  border: 1px solid transparent; border-radius: var(--ex-radius-sm);
  padding: .8rem 1.3rem; min-height: 44px; cursor: pointer;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ex-ease), border-color .2s var(--ex-ease),
    color .2s var(--ex-ease), box-shadow .2s var(--ex-ease), transform .2s var(--ex-ease);
}
.ex-btn--sm { padding: 0 1.05rem; min-height: 40px; font-size: .9rem; }
.ex-btn--lg { padding: 1rem 1.7rem; min-height: 52px; font-size: 1.05rem; }
.ex-btn--primary {
  background: var(--ex-accent); color: #fff;
  box-shadow: 0 6px 18px rgba(var(--ex-accent-rgb), .22);
}
.ex-btn--primary:hover { background: var(--ex-accent-600); box-shadow: 0 10px 24px rgba(var(--ex-accent-rgb), .3); transform: translateY(-2px); }
.ex-btn--ghost {
  background: transparent; color: var(--ex-accent);
  border-color: var(--ex-border-strong);
}
.ex-btn--ghost:hover { border-color: var(--ex-accent); background: rgba(var(--ex-accent-rgb), .06); transform: translateY(-2px); }
/* Warianty na ciemnym tle */
.ex-section--navy .ex-btn--ghost,
.ex-hero .ex-btn--ghost {
  color: #fff; border-color: rgba(var(--ex-blue-bright-rgb), .6);
}
.ex-section--navy .ex-btn--ghost:hover,
.ex-hero .ex-btn--ghost:hover { background: rgba(var(--ex-blue-bright-rgb), .14); border-color: var(--ex-blue-bright); }

/* ---------- 6. Nagłówek / nawigacja ---------- */
.ex-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--ex-header-h); transition: background-color .25s var(--ex-ease), box-shadow .25s var(--ex-ease), height .25s var(--ex-ease); }
/* Pasek admina WordPressa (tylko zalogowani — klasa .admin-bar). Stała
   nawigacja jest fixed/top:0, więc bez tego pasek admina (też fixed/top:0)
   przykrywałby ją i treść. Przesuwamy nagłówek i offset kotwic o wysokość
   paska admina (32px desktop, 46px ≤782px — tak jak robi to rdzeń WP).
   Niezalogowani nie mają tej klasy, więc dla nich nic się nie zmienia. */
body.admin-bar .ex-nav { top: 32px; }
body.admin-bar section[id] { scroll-margin-top: calc(var(--ex-header-h) + 32px + 16px); }
@media screen and (max-width: 782px) {
  body.admin-bar .ex-nav { top: 46px; }
  body.admin-bar section[id] { scroll-margin-top: calc(var(--ex-header-h) + 46px + 16px); }
}
/* Pasek postępu przewijania */
.ex-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 101; pointer-events: none; }
.ex-progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ex-accent), var(--ex-blue-bright)); }
.ex-nav__inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1rem; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem;
}
.ex-nav.is-scrolled {
  height: 56px;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 1px 0 var(--ex-border), var(--ex-shadow-sm);
}
.ex-nav__logo .ex-logo { transition: height .25s var(--ex-ease); }
.ex-nav.is-scrolled .ex-nav__logo .ex-logo { height: 26px; }
.ex-nav__logo { display: inline-flex; align-items: center; color: var(--ex-navy); }
.ex-nav__logo .ex-logo { height: 30px; }
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__logo { color: #fff; }

.ex-nav__desktop { display: none; justify-content: center; }
.ex-nav__list--desktop { display: flex; gap: 1.6rem; }
.ex-nav__link {
  position: relative; display: inline-block; padding: .4rem 0;
  font-size: .92rem; font-weight: 600; color: var(--ex-slate-strong);
  transition: color .2s var(--ex-ease);
}
.ex-nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--ex-accent); transition: width .2s var(--ex-ease);
}
.ex-nav__link:hover { color: var(--ex-accent); }
.ex-nav__link:hover::after,
.ex-nav__link.is-active::after,
.ex-nav__link[aria-current="page"]::after { width: 100%; }
.ex-nav__link.is-active,
.ex-nav__link[aria-current="page"] { color: var(--ex-accent); }
/* Linki białe nad hero, granat po przewinięciu */
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__link { color: rgba(255,255,255,.85); }
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__link:hover,
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__link.is-active { color: #fff; }
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__link::after { background: var(--ex-blue-bright); }

.ex-nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.ex-nav__phone { display: none; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--ex-slate-strong); }
.ex-nav__phone:hover { color: var(--ex-accent); }
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__phone { color: rgba(255,255,255,.9); }
.ex-nav__cta { display: none; }

/* Hamburger */
.ex-nav__hamburger { position: relative; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--ex-navy); }
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__hamburger { color: #fff; }
.ex-nav__hamburger-bar { position: absolute; left: 50%; width: 22px; height: 2px; margin-left: -11px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ex-ease), opacity .3s var(--ex-ease); }
.ex-nav__hamburger-bar:nth-child(1) { top: 15px; }
.ex-nav__hamburger-bar:nth-child(2) { top: 21px; }
.ex-nav__hamburger-bar:nth-child(3) { top: 27px; }
.ex-nav__hamburger[aria-expanded="true"] .ex-nav__hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ex-nav__hamburger[aria-expanded="true"] .ex-nav__hamburger-bar:nth-child(2) { opacity: 0; }
.ex-nav__hamburger[aria-expanded="true"] .ex-nav__hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Overlay mobilny */
.ex-nav__overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1.5rem; padding: 5rem 1.5rem 2rem;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .28s var(--ex-ease);
}
.ex-nav__overlay.is-open { opacity: 1; }
.ex-nav__overlay[hidden] { display: none; }
.ex-nav__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; background: transparent; border: 0; color: var(--ex-navy); cursor: pointer; }
.ex-nav__close svg { width: 24px; height: 24px; margin: 0 auto; }
.ex-nav__list--mobile { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ex-nav__list--mobile .ex-nav__link { font-family: var(--ex-font-serif); font-size: 1.5rem; color: var(--ex-navy); }
.ex-nav__list--mobile .ex-nav__link.is-active { color: var(--ex-accent); }
.ex-nav__overlay-cta { display: flex; flex-direction: column; gap: .75rem; width: 100%; max-width: 320px; }
.ex-nav__overlay-cta .ex-btn { width: 100%; }
html.is-nav-open, html.is-nav-open body { overflow: hidden; touch-action: none; }
.is-nav-open .ex-nav__hamburger { opacity: 0; pointer-events: none; }

@media (min-width: 920px) {
  .ex-nav__desktop { display: flex; }
  .ex-nav__cta { display: inline-flex; }
  .ex-nav__hamburger { display: none; }
}
@media (min-width: 1040px) {
  .ex-nav__phone { display: inline-flex; }
}

/* ---------- 7. Hero ---------- */
.ex-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--ex-header-h) + 2rem) var(--ex-gutter) 6rem;
  min-height: clamp(34rem, 80vh, 48rem);
  background: radial-gradient(120% 100% at 50% 0%, #1e3a5f 0%, #0d1b34 62%);
  color: #fff;
}
.ex-hero__motif { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  mask-image: radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
}
@media (prefers-reduced-motion: no-preference) {
  .ex-hero__motif { animation: ex-drift 32s linear infinite alternate; }
}
@keyframes ex-drift { from { background-position: 0 0; } to { background-position: 24px 18px; } }
.ex-hero__motif::after {
  content: ''; position: absolute; right: -4%; bottom: -6%; width: min(46vw, 460px); height: min(46vw, 460px);
  background:
    linear-gradient(to top, rgba(var(--ex-blue-bright-rgb), .12), transparent) bottom left / 18% 55% no-repeat,
    linear-gradient(to top, rgba(var(--ex-blue-bright-rgb), .14), transparent) 28% bottom / 18% 75% no-repeat,
    linear-gradient(to top, rgba(var(--ex-blue-bright-rgb), .16), transparent) 56% bottom / 18% 95% no-repeat,
    linear-gradient(to top, rgba(var(--ex-blue-bright-rgb), .10), transparent) 84% bottom / 18% 70% no-repeat;
}
.ex-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 52rem; display: flex; flex-direction: column; align-items: center; }
.ex-hero__logo { color: #fff; margin-bottom: 2rem; display: flex; justify-content: center; width: 100%; }
.ex-hero__logo .ex-logo { height: clamp(64px, 13vw, 108px); filter: drop-shadow(0 6px 22px rgba(0,0,0,.35)); }
/* Wymuszone białe — wyższa specyficzność niż ewentualne global-styles (theme.json) */
.ex-hero .ex-hero__title { font-weight: 700; font-size: var(--ex-fs-display); line-height: 1.08; letter-spacing: -.01em; max-width: min(18ch, 100%); color: #fff; }
.ex-hero__sub {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem;
  margin-top: 1.25rem; color: var(--ex-lavender); font-weight: 500; font-size: var(--ex-fs-lead);
}
.ex-hero__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ex-blue-bright); }
.ex-hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 2.25rem; }
.ex-hero__cta .ex-btn { flex: 1 1 auto; }
.ex-hero__scroll { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); pointer-events: none; }
.ex-hero__scroll-line { width: 1px; height: 30px; background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent); }
/* Schowaj wskazówkę przewijania na niskich oknach, by nie nachodziła na CTA */
@media (max-height: 760px) { .ex-hero__scroll { display: none; } }
@media (min-width: 560px) { .ex-hero__cta .ex-btn { flex: 0 0 auto; } }

/* ---------- 8. Sekcje ---------- */
.ex-section { padding: var(--ex-space-2xl) var(--ex-gutter); }
.ex-section--soft { background: var(--ex-bg-soft); }
.ex-section--navy { background: linear-gradient(160deg, var(--ex-navy), var(--ex-navy-700)); color: rgba(255,255,255,.9); }
.ex-section--navy .ex-section__title { color: #fff; }
.ex-section__container { width: 100%; max-width: 72rem; margin: 0 auto; }
.ex-section__head { width: 100%; max-width: 48rem; margin: 0 auto var(--ex-space-lg); text-align: center; }
.ex-section__title { font-weight: 700; font-size: var(--ex-fs-h2); line-height: 1.12; letter-spacing: -.01em; color: var(--ex-ink); }
.ex-section__lead { margin-top: 1rem; font-size: var(--ex-fs-lead); color: var(--ex-slate); }
.ex-section--navy .ex-section__lead { color: var(--ex-lavender); }
.ex-subhead { text-align: center; font-family: var(--ex-font-serif); font-weight: 600; font-size: var(--ex-fs-h3); color: var(--ex-ink); margin: var(--ex-space-xl) 0 1.5rem; }
.ex-subsection { margin-top: var(--ex-space-xl); }
.ex-subsection__title { font-family: var(--ex-font-serif); font-weight: 700; font-size: var(--ex-fs-h3); color: var(--ex-ink); text-align: center; margin-bottom: 1.75rem; }

/* ---------- 9. Karty / siatki / ikony ---------- */
.ex-icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: rgba(var(--ex-accent-rgb), .08); color: var(--ex-accent); flex: none;
}
.ex-icon-chip .ex-icon { width: 1.5rem; height: 1.5rem; }
.ex-icon-chip--muted { background: rgba(130,148,173,.14); color: var(--ex-slate); }
.ex-icon-chip--dark { background: rgba(var(--ex-blue-bright-rgb), .14); color: var(--ex-blue-bright); }
.ex-section--navy .ex-icon-chip { background: rgba(var(--ex-blue-bright-rgb), .14); color: var(--ex-blue-bright); }
.ex-icon { width: 1.5rem; height: 1.5rem; }
.ex-icon--sm { width: 1.1rem; height: 1.1rem; }

.ex-cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ex-cards { gap: 1.5rem; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .ex-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .ex-cards--4 { grid-template-columns: repeat(4, 1fr); }
}
.ex-card {
  background: var(--ex-white); border: 1px solid var(--ex-border-strong);
  border-radius: var(--ex-radius); padding: 1.5rem; box-shadow: var(--ex-shadow-sm);
  transition: transform .2s var(--ex-ease), box-shadow .2s var(--ex-ease), border-color .2s var(--ex-ease);
}
.ex-card__title { margin-top: 1.1rem; font-family: var(--ex-font-sans); font-weight: 600; font-size: var(--ex-fs-h3); color: var(--ex-ink); line-height: 1.3; }
.ex-card__body { margin-top: .6rem; font-size: var(--ex-fs-sm); color: var(--ex-slate); line-height: 1.6; }
.ex-card--accent { border-top: 3px solid var(--ex-accent); }
.ex-card--problem .ex-card__title { margin-top: .9rem; font-size: 1.05rem; }
.ex-section--navy .ex-card { background: var(--ex-surface-dark); border-color: var(--ex-border-dark); box-shadow: var(--ex-highlight-top), var(--ex-shadow-dark); }
.ex-section--navy .ex-card__title { color: #fff; }
.ex-section--navy .ex-card__body { color: rgba(255,255,255,.8); }
@media (hover: hover) {
  .ex-card:hover { transform: translateY(-3px); box-shadow: var(--ex-shadow-md); border-color: var(--ex-border); }
  .ex-section--navy .ex-card:hover { border-color: rgba(var(--ex-blue-bright-rgb), .45); box-shadow: var(--ex-highlight-top), 0 16px 36px -16px rgba(0,0,0,.6); }
}

/* ---------- 10. Callout (problemy → rozwiązanie) ---------- */
.ex-callout {
  margin: var(--ex-space-xl) 0 0; text-align: center;
  background: linear-gradient(160deg, var(--ex-navy), var(--ex-navy-700));
  color: #fff; border-radius: var(--ex-radius);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem) clamp(1rem, .7rem + 1.1vw, 1.75rem);
  box-shadow: var(--ex-shadow-lg);
}
.ex-callout__lead { max-width: 46rem; margin: 0 auto; font-weight: 500; color: var(--ex-lavender); font-size: var(--ex-fs-lead); }
.ex-callout__punch { max-width: 46rem; margin: .75rem auto 0; font-family: var(--ex-font-serif); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); line-height: 1.2; }

/* ---------- 11. Statystyki / pasy ---------- */
.ex-stats { display: grid; gap: 1.5rem; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 640px) {
  .ex-stats--2 { grid-template-columns: repeat(2, 1fr); }
  .ex-stats--3 { grid-template-columns: repeat(3, 1fr); }
}
.ex-stats--inset {
  max-width: 60rem; margin: 0 auto; padding: clamp(1.25rem, .95rem + 1.3vw, 1.9rem) clamp(1rem, .75rem + 1.1vw, 1.75rem);
  background: linear-gradient(160deg, var(--ex-navy), var(--ex-navy-700));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ex-radius); box-shadow: var(--ex-shadow-lg);
}
.ex-stats--inset .ex-stat + .ex-stat,
.ex-stats--3 .ex-stat { position: relative; }
@media (min-width: 640px) {
  .ex-stats--inset.ex-stats--2 .ex-stat:nth-child(2)::before {
    content: ''; position: absolute; left: -.75rem; top: 12%; bottom: 12%; width: 1px; background: var(--ex-border-dark);
  }
}
.ex-stat__num { font-weight: 700; font-size: var(--ex-fs-stat); line-height: 1; color: var(--ex-accent); }
.ex-stats--inset .ex-stat__num, .ex-band--navy .ex-stat__num { color: var(--ex-blue-bright); }
.ex-stat__label { margin-top: .5rem; font-weight: 600; font-size: .95rem; color: var(--ex-slate-strong); }
.ex-stats--inset .ex-stat__label, .ex-band--navy .ex-stat__label { color: #fff; }
.ex-stat__sub { font-size: var(--ex-fs-sm); color: var(--ex-gray); }
.ex-stats--inset .ex-stat__sub, .ex-band--navy .ex-stat__sub { color: var(--ex-lavender); }

/* Pas „Efekty" — pełna szerokość (osobna sekcja edge-to-edge) */
.ex-band--navy {
  background: linear-gradient(160deg, var(--ex-navy), var(--ex-navy-700));
  color: #fff; text-align: center;
}
.ex-band--bleed { padding-block: var(--ex-space-2xl); padding-inline: var(--ex-gutter); }
.ex-band--bleed .ex-band__inner { width: 100%; max-width: 72rem; margin-inline: auto; }
.ex-band__eyebrow { font-family: var(--ex-font-serif); font-weight: 600; font-size: var(--ex-fs-h3); margin-bottom: 1.75rem; }
.ex-band__note { max-width: 44rem; margin: 1.75rem auto 0; font-size: var(--ex-fs-sm); color: var(--ex-lavender); }

/* ---------- 12. Checklist ---------- */
.ex-checklist { display: grid; gap: .9rem; max-width: 60rem; margin: var(--ex-space-xl) auto 0; }
@media (min-width: 768px) { .ex-checklist { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.ex-checklist__item { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--ex-fs-sm); color: var(--ex-slate-strong); }
.ex-checklist__icon { display: inline-flex; color: var(--ex-accent); margin-top: .1rem; flex: none; }

/* ---------- 13. Kroki / cennik ---------- */
.ex-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); counter-reset: ex-step; margin-bottom: var(--ex-space-xl); }
.ex-step { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border: 1px solid var(--ex-border-dark); border-radius: var(--ex-radius-sm); background: var(--ex-surface-dark); box-shadow: var(--ex-highlight-top); transition: transform .2s var(--ex-ease), border-color .2s var(--ex-ease); }
.ex-step__num { font-weight: 700; font-size: 2rem; line-height: 1; color: rgba(var(--ex-blue-bright-rgb), .65); }
.ex-step__title { font-weight: 600; font-size: .98rem; color: #fff; }
@media (hover: hover) { .ex-step:hover { transform: translateY(-2px); border-color: rgba(var(--ex-blue-bright-rgb), .4); } }

.ex-pricing { max-width: 60rem; margin: 0 auto; background: var(--ex-surface-dark-2); border: 1px solid var(--ex-border-dark); border-radius: var(--ex-radius); padding: clamp(1.15rem, .85rem + 1.2vw, 1.75rem) clamp(1rem, .75rem + 1.1vw, 1.6rem); box-shadow: var(--ex-highlight-top), var(--ex-shadow-dark); }
.ex-pricing .ex-pricing__title { font-family: var(--ex-font-serif); font-weight: 600; font-size: var(--ex-fs-h3); color: #fff; text-align: center; margin-bottom: 1.5rem; }
.ex-pricing__list { display: grid; gap: .85rem; }
@media (min-width: 768px) { .ex-pricing__list { grid-template-columns: repeat(2, 1fr); gap: .85rem 1.75rem; } }
.ex-pricing__item { display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.88); font-size: .95rem; }
.ex-pricing__badge { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(var(--ex-blue-bright-rgb), .16); color: var(--ex-blue-bright); font-weight: 700; font-size: .85rem; flex: none; }

/* ---------- 14. Branże ---------- */
.ex-industries { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ex-industries { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ex-industries { grid-template-columns: repeat(4, 1fr); } }
.ex-industry {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center;
  background: var(--ex-white); border: 1px solid var(--ex-border); border-radius: var(--ex-radius-sm);
  padding: 1.5rem 1rem; transition: transform .2s var(--ex-ease), box-shadow .2s var(--ex-ease);
}
.ex-industry__label { font-weight: 600; font-size: .95rem; color: var(--ex-ink); }
@media (hover: hover) {
  .ex-industry:hover { transform: translateY(-2px); box-shadow: var(--ex-shadow-md); }
  .ex-industry:hover .ex-icon-chip { background: var(--ex-accent); color: #fff; }
}
.ex-icon-chip { transition: background-color .2s var(--ex-ease), color .2s var(--ex-ease); }

/* ---------- 15. Dwie kolumny ---------- */
.ex-two-col { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ex-two-col { grid-template-columns: 1fr 1fr; } }
.ex-list-card { background: var(--ex-white); border: 1px solid var(--ex-border-strong); border-radius: var(--ex-radius); padding: 1.75rem; box-shadow: var(--ex-shadow-sm); }
.ex-list-card__title { margin: 1rem 0 1rem; font-family: var(--ex-font-sans); font-weight: 700; font-size: var(--ex-fs-h3); color: var(--ex-ink); }
.ex-list { display: grid; gap: .7rem; }
.ex-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--ex-fs-sm); color: var(--ex-slate); }
.ex-list__check { color: var(--ex-accent); margin-top: .15rem; flex: none; }

/* ---------- 16. Kontakt + formularz ---------- */
.ex-contact__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ex-contact__grid { grid-template-columns: 1fr 1.05fr; gap: var(--ex-space-lg); align-items: start; } }
.ex-contact__details { display: grid; gap: 1.1rem; align-content: start; }
.ex-contact__row { display: flex; align-items: center; gap: 1rem; color: #fff; min-height: 44px; }
.ex-contact__row-text { display: flex; flex-direction: column; }
.ex-contact__row-label { font-size: .8rem; color: var(--ex-lavender); }
.ex-contact__row-value { font-weight: 600; font-size: 1.05rem; }
a.ex-contact__row:hover .ex-contact__row-value { color: var(--ex-blue-bright); }

.ex-form { background: var(--ex-surface-dark-2); border: 1px solid rgba(255,255,255,.16); border-radius: var(--ex-radius); padding: clamp(1rem, .75rem + 1.1vw, 1.6rem); display: grid; gap: 1.1rem; box-shadow: var(--ex-highlight-top), var(--ex-shadow-dark); }
.ex-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ex-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 520px) { .ex-form__row { grid-template-columns: 1fr 1fr; } }
.ex-form__field { display: grid; gap: .4rem; }
.ex-form__label { font-size: .85rem; font-weight: 600; color: var(--ex-lavender); }
.ex-form__req { color: var(--ex-blue-bright); }
.ex-form__input {
  width: 100%; font: inherit; color: #fff; background: var(--ex-navy-900);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--ex-radius-sm);
  padding: .75rem .9rem; box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
  transition: border-color .2s var(--ex-ease), box-shadow .2s var(--ex-ease);
}
.ex-form__input::placeholder { color: rgba(255,255,255,.4); }
.ex-form__input:focus { outline: none; border-color: var(--ex-blue-bright); box-shadow: inset 0 1px 2px rgba(0,0,0,.28), 0 0 0 3px rgba(var(--ex-blue-bright-rgb), .25); }
.ex-form__textarea { resize: vertical; min-height: 120px; }
.ex-form__consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .8rem; color: var(--ex-lavender); }
.ex-form__consent input { margin-top: .2rem; flex: none; accent-color: var(--ex-accent); width: 1.05rem; height: 1.05rem; }
.ex-form__consent a { color: var(--ex-blue-bright); text-decoration: underline; }
.ex-form__submit { width: 100%; margin-top: .25rem; }
.ex-form__status { padding: .85rem 1rem; border-radius: var(--ex-radius-sm); font-size: var(--ex-fs-sm); font-weight: 500; }
.ex-form__status--ok { background: rgba(91,158,230,.16); color: #eaf3fc; border: 1px solid rgba(var(--ex-blue-bright-rgb), .4); }
.ex-form__status--err { background: rgba(229,115,115,.16); color: #fde2e2; border: 1px solid rgba(229,115,115,.4); }

/* ---------- 17. Stopka ---------- */
.ex-footer {
  color: rgba(255,255,255,.72);
  padding: calc(var(--ex-space-2xl) - .5rem) var(--ex-gutter) 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(91,158,230,.05), transparent 120px), var(--ex-navy-900);
}
.ex-footer__inner { max-width: 72rem; margin: 0 auto; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ex-footer__inner { grid-template-columns: 1.3fr 1fr 1.2fr; gap: 2.5rem; align-items: start; } }
.ex-footer__logo { display: inline-flex; color: #fff; }
.ex-footer__logo .ex-logo { height: 32px; }
.ex-footer__tagline { margin-top: 1rem; font-size: var(--ex-fs-sm); color: var(--ex-gray); }
.ex-footer__nav { display: flex; flex-direction: column; gap: .6rem; }
.ex-footer__link { color: rgba(255,255,255,.7); font-size: .95rem; font-weight: 500; width: fit-content; }
.ex-footer__link:hover { color: #fff; }
.ex-footer__contact { display: grid; gap: .75rem; }
.ex-footer__contact-row { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.8); font-size: .95rem; }
.ex-footer__contact-row:hover { color: #fff; }
.ex-footer__contact-row .ex-icon, .ex-footer__address .ex-icon { color: var(--ex-blue-bright); flex: none; }
.ex-footer__address { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: rgba(255,255,255,.8); }
.ex-footer__bottom { max-width: 72rem; margin: clamp(2rem, 1.6rem + 1.5vw, 2.75rem) auto 0; padding-top: 1.5rem; border-top: 1px solid var(--ex-border-dark); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; font-size: var(--ex-fs-sm); color: var(--ex-gray); }
.ex-footer__nip { margin-left: .5rem; }
.ex-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.ex-footer__legal a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
.ex-footer__legal a:hover { color: #fff; }
.ex-footer__credit { color: var(--ex-gray); }

/* Social */
.ex-socials { display: flex; gap: .6rem; margin-top: .25rem; }
.ex-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: rgba(255,255,255,.65); background: rgba(255,255,255,.05); transition: color .2s var(--ex-ease), background-color .2s var(--ex-ease), transform .2s var(--ex-ease); }
.ex-social:hover { color: #fff; background: rgba(var(--ex-blue-bright-rgb), .2); transform: translateY(-1px); }
.ex-social__icon { width: 20px; height: 20px; }

/* ---------- 18. Logo ---------- */
.ex-logo { display: inline-flex; align-items: center; line-height: 0; }
.ex-logo svg { height: 100%; width: auto; }
.ex-logo__fallback { font-family: var(--ex-font-serif); font-weight: 700; font-size: 1.4rem; color: currentColor; }

/* Wgrane logo (obraz): wersja kolorowa (jasne tła) + biała (ciemne tła) */
.ex-logo--img { display: inline-flex; align-items: center; }
.ex-logo--img img { display: block; height: 100%; width: auto; }
.ex-logo__dark { display: none; }
/* Ciemne tła z wgraną białą wersją: pokaż białą zamiast kolorowej */
.ex-hero__logo .ex-logo--hasdark .ex-logo__light,
.ex-footer__logo .ex-logo--hasdark .ex-logo__light,
.ex-nav--over-hero:not(.is-scrolled) .ex-logo--hasdark .ex-logo__light { display: none; }
.ex-hero__logo .ex-logo--hasdark .ex-logo__dark,
.ex-footer__logo .ex-logo--hasdark .ex-logo__dark,
.ex-nav--over-hero:not(.is-scrolled) .ex-logo--hasdark .ex-logo__dark { display: block; }
/* Ciemne tła BEZ białej wersji: automatycznie wybiel kolorowe logo
   (wymaga przezroczystego tła pliku) — jeden plik działa wszędzie. */
.ex-hero__logo .ex-logo--img:not(.ex-logo--hasdark) .ex-logo__light,
.ex-footer__logo .ex-logo--img:not(.ex-logo--hasdark) .ex-logo__light,
.ex-nav--over-hero:not(.is-scrolled) .ex-logo--img:not(.ex-logo--hasdark) .ex-logo__light { filter: brightness(0) invert(1); }

/* Akcent logo jaśniejszy na ciemnym tle (dla inline-SVG) */
.ex-hero__logo, .ex-footer__logo,
.ex-nav--over-hero:not(.is-scrolled) .ex-nav__logo { --ex-logo-accent: #5b9ee6; }

/* ---------- 19. Reveal (tylko gdy JS aktywny — bez JS treść widoczna) ---------- */
.ex-js .ex-reveal { opacity: 0; transform: translateY(14px) scale(.995); transition: opacity .6s var(--ex-ease), transform .6s var(--ex-ease); transition-delay: calc(min(var(--i, 0), 6) * 60ms); }
.ex-js .ex-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 20. Strony treści (Polityka prywatności itp.) ---------- */
.ex-page { max-width: 760px; margin: 0 auto; padding: calc(var(--ex-header-h) + 3rem) var(--ex-gutter) 4rem; }
.ex-page__title { font-family: var(--ex-font-serif); font-weight: 700; font-size: var(--ex-fs-h2); color: var(--ex-ink); margin-bottom: 1.5rem; }
.ex-page__content h2 { font-family: var(--ex-font-serif); font-weight: 700; font-size: 1.5rem; color: var(--ex-ink); margin: 2rem 0 .75rem; }
.ex-page__content h3 { font-weight: 700; font-size: 1.15rem; color: var(--ex-ink); margin: 1.5rem 0 .5rem; }
.ex-page__content p, .ex-page__content li { color: var(--ex-slate); }
.ex-page__content ul, .ex-page__content ol { padding-left: 1.25rem; list-style: revert; margin: .75rem 0; display: grid; gap: .35rem; }
.ex-page__content a { text-decoration: underline; }
.ex-page__content > * + * { margin-top: .75rem; }

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ex-reveal { opacity: 1 !important; transform: none !important; }
  .ex-btn:hover, .ex-card:hover, .ex-industry:hover, .ex-step:hover { transform: none !important; }
  .ex-progress { display: none; }
  .ex-hero__motif { animation: none !important; }
}