/* =====================================================================
   MAWEB — "Nocturnal Intelligence" dark theme (bakery-AI redesign)
   Override layer, enqueued LAST. Restyles the site to the Stitch design
   without touching the original section CSS (easy rollback).
   ===================================================================== */

:root {
  --nih-bg: #0b0f2b;
  --nih-bg-2: #0e1330;
  --nih-surface: #111634;
  --nih-surface-2: #161b3d;
  --nih-border: rgba(255, 255, 255, 0.08);
  --nih-border-strong: rgba(255, 255, 255, 0.14);
  --nih-text: #eaecf5;
  --nih-muted: #a6abc8;
  --nih-accent: #a588ff;
  --nih-accent-soft: rgba(165, 136, 255, 0.14);
}

/* ---------- Base / page ---------- */
body {
  background: var(--nih-bg);
}
/* Geometry of the fixed header, in one place.

   `.maweb-header` is position:fixed but positions itself with margin-top rather
   than `top`, so it is laid out from the static position — which means the WP
   admin bar pushes it down by its own height for logged-in users. Anything that
   has to clear the header (anchor jumps, the full-screen hero) must account for
   that or it works logged out and breaks in the client's own browser.

   The bar shifts the document with `html { margin-top }`, so the header and the
   page content move down together — the two lengths below are measured from the
   document top and stay constant. Only the usable viewport height shrinks, which
   is what --nih-admin-h is for. */
body {
  --nih-admin-h: 0px;
  --nih-page-top: 155px;       /* .maweb-page padding-top */
  --nih-header-bottom: 100px;  /* .maweb-header margin-top + height */
}
@media (max-width: 767.98px) {
  body {
    --nih-page-top: 76px;
    --nih-header-bottom: 62px;
  }
}
body.admin-bar { --nih-admin-h: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --nih-admin-h: 46px; }
}

/* Any jump to an anchor (in-page skip buttons, the scroll-down chevron, #kontakt
   in the menu) parked the target's top under the header and clipped the first
   ~100px of the section. scroll-padding-top on the scroll container offsets every
   one at once — it applies to fragment navigation and to the scrollIntoView()
   call in components/shared/scrolldown.php alike. The :has() variant covers the
   admin bar; html can't read a variable set on body. */
html { scroll-padding-top: 116px; }
html:has(body.admin-bar) { scroll-padding-top: 148px; }
@media (max-width: 767.98px) {
  html { scroll-padding-top: 78px; }
  html:has(body.admin-bar) { scroll-padding-top: 124px; }
}
.maweb-page,
#mawebPageHome {
  background: var(--nih-bg);
  color: var(--nih-text);
}
/* aurora glow behind the page */
.maweb-home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vw 40vw at 80% -5%, rgba(165, 136, 255, 0.18), transparent 60%),
    radial-gradient(50vw 40vw at 0% 30%, rgba(0, 160, 210, 0.10), transparent 60%);
}

/* ---------- Client audit: narrower, more-contained page content ----------
   The original theme lets content run to a 1320px container (only 60px side
   margins on mid-size laptops). Cap the page content narrower for noticeably
   more breathing room on the sides. Scoped to `.maweb-page` so the header and
   footer keep their own full-width wrappers. */
/* A flat 1140px cap left 41% of a 1920 screen empty and 55% of a 2560 one, with
   no breakpoint above 1460px anywhere in the stylesheet — so type, padding and
   rhythm were frozen from ~1200px up. Scale the measure with the viewport
   instead, holding 1140 as the floor and 1560 as the ceiling. */
.maweb-page .maweb-wrapper {
  box-sizing: border-box;
  max-width: clamp(1140px, 82vw, 1560px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 767.98px) {
  .maweb-page .maweb-wrapper {
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* The home footer/contact block lives INSIDE .maweb-page (unlike every other
   page, where the footer renders outside it), so the narrowing above squeezed
   its left column and broke the "Sztuczna inteligencja…" heading mid-word.
   Restore the base full-width wrapper so the contact section matches all pages. */
.maweb-home-section-footer .maweb-wrapper {
  max-width: 1320px;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1460px) {
  .maweb-home-section-footer .maweb-wrapper {
    max-width: none;
    margin-left: 60px;
    margin-right: 60px;
  }
}
@media (max-width: 767.98px) {
  .maweb-home-section-footer .maweb-wrapper {
    margin-left: 12px;
    margin-right: 12px;
  }
}
/* never break the contact heading in the middle of a word (Polish long words) */
.maweb-footer-info-title,
.maweb-footer-info-title * {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* ---------- Header: glass, dark, site-wide ---------- */
.maweb-header-container,
#headerScroll .maweb-header-container,
#headerScroll.maweb-header-fixed .maweb-header-container,
#headerScroll.maweb-header-fixed .maweb-header-container--collapsed {
  background: rgba(17, 22, 52, 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--nih-border) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
/* nav links always light */
.maweb-header-nav-menu li .nav-link,
#headerScroll .maweb-header-nav-menu li .nav-link,
#headerScroll.maweb-header-fixed .maweb-header-nav-menu li .nav-link {
  color: var(--nih-text) !important;
}
.maweb-header-nav-menu li .nav-link::after {
  background: var(--nih-accent) !important;
}
/* always show the white logo (dark logo is invisible on dark glass) */
.maweb-header-logo--dark,
#headerScroll.maweb-header-fixed .maweb-header-logo--dark {
  display: none !important;
}
.maweb-header-logo--white,
#headerScroll.maweb-header-fixed .maweb-header-logo--white {
  display: block !important;
}
/* language selector */
.maweb-select-lang-btn,
#headerScroll .maweb-header-lang .maweb-select-lang-btn,
#headerScroll.maweb-header-fixed .maweb-header-lang .maweb-select-lang-btn {
  color: var(--nih-text) !important;
}
.maweb-select-lang-dropdown {
  background: var(--nih-surface);
  border: 1px solid var(--nih-border);
}
.maweb-select-lang-dropdown-item,
.maweb-select-lang-dropdown-item.active,
.maweb-select-lang-dropdown-item:active,
.maweb-select-lang-dropdown-item:focus,
.maweb-select-lang-dropdown-item:hover {
  color: var(--nih-text) !important;
}
.maweb-header-hamburger label span {
  background: var(--nih-text) !important;
}

/* group lang + CTA in the right cell */
.maweb-header-lang {
  display: flex !important;
  align-items: center;
  gap: 14px;
}
/* "Darmowa wycena" CTA pill */
.nih-cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--nih-accent);
  color: #14102b;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(165, 136, 255, 0.35);
  transition: transform 200ms ease, background 200ms ease;
}
.nih-cta:hover {
  background: #b9a2ff;
  transform: translateY(-1px);
}

/* ---------- Buttons on dark ---------- */
.maweb-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--nih-text) !important;
  border: 1px solid var(--nih-border-strong) !important;
  box-shadow: none !important;
}
.maweb-btn:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}
.maweb-btn--dark {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--nih-text) !important;
  border: 1px solid var(--nih-border-strong) !important;
}

/* =====================================================================
   HOMEPAGE
   ===================================================================== */

/* keep all home content above the aurora */
#mawebPageHome > * { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
/* The city footage stays (client requirement). `filter: brightness(0.7)` on its
   own just flattened the whole frame to grey instead of building contrast
   behind the text, so swap it for a real gradient scrim: the middle stays open
   enough to read as a city, the edges and the type area go dark. */
#mawebPageHome .maweb-home-video {
  filter: none;
}
#mawebPageHome .maweb-home-video video {
  opacity: 0.38;
}
#mawebPageHome .maweb-home-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 42%, rgba(11, 15, 43, 0.36) 0%, rgba(11, 15, 43, 0.78) 62%, rgba(11, 15, 43, 0.94) 100%),
    linear-gradient(180deg, rgba(11, 15, 43, 0.82) 0%, rgba(11, 15, 43, 0.28) 40%, rgba(11, 15, 43, 0.9) 100%);
}

#mawebPageHome .maweb-home-section-one-container {
  margin-top: 180px;
  margin-bottom: 140px;
}
#mawebPageHome .nih-hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 48px;
}
#mawebPageHome .nih-hero-text {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
#mawebPageHome .nih-hero-card {
  flex: 0 1 42%;
  display: flex;
  justify-content: flex-end;
}
#mawebPageHome .maweb-home-section-one-head-title,
#mawebPageHome .maweb-home-section-one-head-title-sm,
#mawebPageHome .maweb-home-section-one-description > p {
  text-align: center;
}
#mawebPageHome .maweb-home-section-one-control-container {
  align-self: center;
}
/* style.css:96 carries `.maweb-page h1 { font-size: clamp(46px,7vw,72px)
   !important; line-height: clamp(46px,7vw,83px) !important }`. This hero title
   is an <h1>, so the class-only rule that used to live here never applied —
   !important beats specificity. Restated with !important so the title can
   actually grow on wide screens. */
#mawebPageHome h1.maweb-home-section-one-head-title {
  font-size: clamp(40px, 4.9vw, 96px) !important;
  line-height: 1.04 !important;
  letter-spacing: -2px;
}
#mawebPageHome .maweb-home-section-one-head-title-sm {
  color: var(--nih-accent);
  font-size: clamp(30px, 3.7vw, 68px);
  line-height: 1.08;
  margin-top: 18px;
}

/* ---------- eyebrow + proof strip (A2 / A4) ---------- */
#mawebPageHome .nih-hero-eyebrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(165, 136, 255, 0.14);
  border: 1px solid rgba(165, 136, 255, 0.4);
  color: #d9ccff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
#mawebPageHome .nih-hero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nih-accent);
  box-shadow: 0 0 12px 2px rgba(165, 136, 255, 0.85);
}
#mawebPageHome .nih-hero-proof {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 30px;
}
#mawebPageHome .nih-hero-proof li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--nih-text);
  /* clamped rather than fixed: the German strings ("bis zu 60 %" /
     "weniger Retouren") are the longest of the four languages, and at a fixed
     size they push this row wider than the hero column on small laptops. */
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  letter-spacing: -0.1px;
  text-shadow: 0 1px 12px rgba(5, 8, 26, 0.7);
}
#mawebPageHome .nih-hero-proof li strong {
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #ffffff;
}
#mawebPageHome .nih-hero-proof li + li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 4px;
  bottom: 2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 575.98px) {
  #mawebPageHome .nih-hero-proof {
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }
  #mawebPageHome .nih-hero-proof li + li::before { content: none; }
}

/* stat card (glassmorphism) */
.nih-stat-card {
  background: linear-gradient(180deg, rgba(22, 27, 61, 0.9), rgba(17, 22, 52, 0.75));
  border: 1px solid var(--nih-border-strong);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(165, 136, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  min-width: 300px;
}
.nih-stat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--nih-muted);
  font-size: 14px;
  letter-spacing: -0.2px;
  margin-bottom: 18px;
}
.nih-stat-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7ef0c0;
  font-weight: 600;
}
.nih-stat-card__value {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -2px;
  color: #fff;
  line-height: 1;
  margin-bottom: 22px;
}
.nih-stat-card__value span { color: var(--nih-accent); }
.nih-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
}
.nih-bars i {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(165, 136, 255, 0.9), rgba(165, 136, 255, 0.25));
  display: block;
}
.nih-bars i:nth-child(1) { height: 100%; background: linear-gradient(180deg, #6b7280, #3a3f57); }
.nih-bars i:nth-child(2) { height: 78%; }
.nih-bars i:nth-child(3) { height: 60%; }
.nih-bars i:nth-child(4) { height: 46%; }
.nih-bars i:nth-child(5) { height: 40%; opacity: 0.9; }

@media (max-width: 991.98px) {
  #mawebPageHome .nih-hero-row { flex-direction: column; align-items: stretch; }
  #mawebPageHome .maweb-home-section-one-head-title,
  #mawebPageHome .maweb-home-section-one-head-title-sm,
  #mawebPageHome .maweb-home-section-one-description > p { text-align: center; }
  #mawebPageHome .maweb-home-section-one-control-container { align-self: center; }
  #mawebPageHome .nih-hero-card { justify-content: center; }
  .nih-stat-card { min-width: 0; }
}

/* ---------- §2 turnover -> centered AI-advantage statement (WHITE) ---------- */
#mawebPageHome .maweb-home-section-turnover {
  background: #ffffff !important;
}
#mawebPageHome .maweb-home-section-turnover-container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#mawebPageHome .maweb-home-section-turnover-head {
  color: #191a2c;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.15;
  letter-spacing: -1.5px;
}
/* --nih-accent (#a588ff) is tuned for the dark sections; on this white one it
   measures 2.78:1, failing AA (4.5:1) and even the large-text floor (3:1).
   #7c57e8 keeps the same hue at 4.79:1. */
#mawebPageHome .maweb-home-section-turnover-head .purple-accent { color: #7c57e8 !important; }
/* first paragraph = statement (big); following = muted body */
#mawebPageHome .maweb-home-section-turnover-head p:not(:first-of-type) {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: #565b78;
  margin-top: 26px;
}
/* hide the (broken) right-hand image + its column on the AI statement */
#mawebPageHome .maweb-home-section-turnover-img { display: none; }
#mawebPageHome .maweb-home-section-turnover .col-md-4 { display: none; }
#mawebPageHome .maweb-home-section-turnover .col-md-8 { flex: 0 0 100%; max-width: 100%; }
#mawebPageHome .maweb-home-section-turnover-circles-img { opacity: 0.25; }
/* center the "Zobacz więcej" button under the centered statement */
#mawebPageHome .maweb-home-section-turnover-button {
  margin-left: auto;
  margin-right: auto;
}
/* make the CTA pop on the white section (was near-invisible ghost button) */
#mawebPageHome .maweb-home-section-turnover-button .maweb-btn--dark {
  background: var(--nih-accent) !important;
  color: #14102b !important;
  border: none !important;
  font-weight: 600;
  padding: 14px 34px !important;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(165, 136, 255, 0.35);
}
#mawebPageHome .maweb-home-section-turnover-button .maweb-btn--dark:hover {
  background: #b9a2ff !important;
}

/* --- number ladder: 50 mln obrót -> 5 mln strat -> do 3 mln oszczędności -----
   The savings figure used to sit inside the muted body paragraph at 19px /
   weight 300, and was the lowest-contrast text in the section. Staging the
   three figures as a sequence makes it land as the conclusion instead. */
#mawebPageHome .nih-ladder {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  text-align: center;
}
#mawebPageHome .nih-ladder li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 18px;
  border-radius: 16px;
  background: #f7f6fb;
  border: 1px solid #e6e3f2;
}
#mawebPageHome .nih-ladder li strong {
  display: block;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #191a2c;
}
#mawebPageHome .nih-ladder li span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.1px;
  color: #565b78;
}
/* the payoff rung: dark ink on #f1ebff measures 14.7:1 */
#mawebPageHome .nih-ladder li.nih-ladder-result {
  flex: 1.3 1 0;
  background: #f1ebff;
  border-color: #ddd0ff;
  box-shadow: 0 12px 34px rgba(124, 87, 232, 0.16);
}
#mawebPageHome .nih-ladder li.nih-ladder-result strong {
  font-size: clamp(26px, 3.1vw, 40px);
  letter-spacing: -1.2px;
}
/* connector arrows sit in the flex gap */
#mawebPageHome .nih-ladder li + li::before {
  content: "→";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 30px;
  transform: translateY(-50%);
  font-size: 17px;
  line-height: 1;
  color: #837ba6; /* 3.93:1 on white — clears the 3:1 floor for non-text graphics */
}
@media (max-width: 767.98px) {
  #mawebPageHome .nih-ladder {
    flex-direction: column;
    gap: 30px;
    margin-top: 28px;
  }
  #mawebPageHome .nih-ladder li + li::before {
    content: "↓";
    left: 50%;
    top: -26px;
    width: auto;
    transform: translateX(-50%);
  }
}

/* "Nasza Propozycja" spacing.
   This block used to squeeze the section into a single viewport height, which
   left it reading as a cramped list rather than as the offer. The one-screen
   constraint belongs to the pilot-process block below, not here — this section
   is allowed to be taller than the fold. */
#mawebPageHome .maweb-home-section-two-container {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}
#mawebPageHome .maweb-home-section-two-body-title {
  margin-bottom: 52px !important;
}
#mawebPageHome .maweb-home-section-two-body-content-element {
  padding: 22px 24px;
  gap: 20px;
  margin-bottom: 14px !important;
}
#mawebPageHome .maweb-home-section-two-body-content-element-desc p {
  font-size: 15px;
  line-height: 1.55;
}
#mawebPageHome .maweb-home-hr-container {
  margin-top: 8px;
  margin-bottom: 8px;
}
@media (max-width: 767.98px) {
  #mawebPageHome .maweb-home-section-two-container {
    margin-top: 56px !important;
    margin-bottom: 56px !important;
  }
  #mawebPageHome .maweb-home-section-two-body-title {
    margin-bottom: 32px !important;
  }
}

/* --- "Jak zaczynamy współpracę?" pilot process (repurposed brand block) --- */
#mawebPageHome .maweb-home-section-three-head .purple-accent { color: var(--nih-accent) !important; }
#mawebPageHome .maweb-home-section-three-head .nih-section-three-intro {
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: normal;
  margin-top: 16px !important;
  color: var(--nih-muted);
}
/* tiles: dark-theme cards (links removed, so restyle as standalone steps) */
#mawebPageHome .maweb-home-section-three-body-container {
  background: var(--nih-surface);
  border: 1px solid var(--nih-border);
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 0;
  margin-bottom: 14px;
}
#mawebPageHome .maweb-home-section-three-body-container:hover,
#mawebPageHome .maweb-home-section-three-body-container--active {
  background: var(--nih-surface-2);
  border-color: var(--nih-border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
/* client asked for the step copy to carry more weight — these are facts about the
   pilot, not captions, so both lines read heavier and the body sits closer to the
   title tone than to --nih-muted. */
#mawebPageHome .maweb-home-section-three-body-element-title,
#mawebPageHome .maweb-home-section-three-body-element-title * {
  color: var(--nih-text) !important;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
#mawebPageHome .maweb-home-section-three-body-element-text,
#mawebPageHome .maweb-home-section-three-body-element-text * {
  color: #c9cde3 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
/* Below 1200px the theme stacks the tiles and puts a dashed purple border on the
   inner element — that now nests inside the card background above (double box).
   The card is the boundary, so drop the dashed one. */
@media (max-width: 1200px) {
  #mawebPageHome .maweb-home-section-three-body-element {
    border: none;
    border-radius: 0;
  }
}

/* ---------- §3 "Nasza Propozycja" -> dark glass tiles ---------- */
#mawebPageHome .maweb-home-section-two {
  background: var(--nih-bg-2) !important;
  color: var(--nih-text) !important;
}
#mawebPageHome .maweb-home-section-two-body-content-title,
#mawebPageHome .maweb-home-section-two-body-content-sub-title { color: var(--nih-text); }
#mawebPageHome .maweb-home-section-two-body-content-element {
  background: var(--nih-surface) !important;
  border: 1px solid var(--nih-border);
  border-radius: 14px;
  margin-bottom: 14px;
  color: var(--nih-text);
}
#mawebPageHome .maweb-home-section-two-body-content-element.active,
#mawebPageHome .maweb-home-section-two-body-content-element:hover {
  background: var(--nih-surface-2) !important;
  border-color: var(--nih-border-strong);
  box-shadow: 0 0 0 1px rgba(165, 136, 255, 0.18), 0 12px 40px rgba(0, 0, 0, 0.4);
}
#mawebPageHome .maweb-home-section-two-body-content-element p { color: var(--nih-text); }
#mawebPageHome .maweb-home-section-two-body-image-wrapper {
  background: var(--nih-surface);
  border: 1px solid var(--nih-border);
}
/* The card has to be as tall as the tile column beside it, but the charts are
   fixed-aspect SVGs (640x460) whose height is set by the card's width — at 1366px
   that is 363px of chart in a 750px box. Stretching or cropping the SVG is not an
   option, so the card is a flex column: chart at its natural aspect on top, and a
   key-figure block underneath that grows to swallow whatever height is left. Its
   min-height means that when the tiles are shorter than chart+figures (roughly
   >1700px viewports) the card drives the row height instead, so the figures are
   never clipped and the card is never a void. */

/* hidden by default (incl. the stacked mobile card); the tab script flips .active
   alongside the matching chart. The media query below turns it on from 992px up. */
#mawebPageHome .nih-chart-stats { display: none; }
#mawebPageHome .nih-chart-stats.active {
  width: 100%;
  flex-direction: column;
  padding: 0 10px;
  border-top: 1px solid var(--nih-border);
  margin-top: 16px;
}
/* the rows share the leftover height as equal bands rather than floating far
   apart in it, so the block reads the same whether it gets 150px or 400px */
#mawebPageHome .nih-chart-stat {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 8px 0;
  border-top: 1px solid var(--nih-border);
}
#mawebPageHome .nih-chart-stat:first-child { border-top: 0; }
#mawebPageHome .nih-chart-stat strong {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--nih-accent);
  white-space: nowrap;
}
#mawebPageHome .nih-chart-stat span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-align: right;
  color: var(--nih-muted);
}

@media (min-width: 992px) {
  #mawebPageHome .maweb-home-section-two-body-content-image { height: 100%; }
  #mawebPageHome .maweb-home-section-two-body-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    padding: 16px;
  }
  #mawebPageHome .maweb-home-section-two-body-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
  }
  #mawebPageHome .nih-chart-stats.active {
    display: flex;
    flex: 1 1 0;
    min-height: 150px;
  }
}
#mawebPageHome .maweb-home-hr { background: var(--nih-border); }
/* remove the colored-dot legend under the graph */
#mawebPageHome .maweb-home-section-two-body-image-icon-list { display: none; }
/* keep tile titles on a single line (e.g. "Mechanizm bezpieczeństwa") */
#mawebPageHome .maweb-home-section-two-body-content-element-title,
#mawebPageHome .maweb-home-section-two-body-content-element-title p {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
/* the tile headlines read as body text next to the description — brand purple
   (6.40:1 on --nih-surface) so they land as headlines. Weight 700 measures 232px
   against the 260px title column, so the nowrap below still holds in PL/EN/NL. */
#mawebPageHome .maweb-home-section-two-body-content-element-title p {
  color: var(--nih-accent);
  font-weight: 700;
}
@media (min-width: 768px) {
  #mawebPageHome .maweb-home-section-two-body-content-element {
    grid-template-columns: minmax(240px, 260px) 1fr;
  }
  #mawebPageHome .maweb-home-section-two-body-content-element-title p {
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
  }
}
/* Between 992 and 1199 that fixed 260px title track leaves the description barely
   137px wide, so it wraps to 15+ lines and the tile column runs past 1000px — far
   taller than any card beside it can be. Stack the tile there instead: the
   description gets the full width and the two columns come back into balance.
   Must sit after the 768px block above, which sets the same properties. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #mawebPageHome .maweb-home-section-two-body-content-element {
    grid-auto-flow: row;
    grid-template-columns: none;
    gap: 8px;
  }
  #mawebPageHome .maweb-home-section-two-body-content-element-title p {
    white-space: normal;
  }
}

/* ---------- §5 FAQ -> WHITE ---------- */
#mawebPageHome .maweb-home-section-five {
  background: #ffffff !important;
  color: #191a2c !important;
}
#mawebPageHome .maweb-home-section-five-head-title,
#mawebPageHome .maweb-home-section-five-head-desc { color: #191a2c; }
#mawebPageHome .maweb-home-section-five-head-title .purple-accent { color: var(--nih-accent) !important; }
#mawebPageHome .maweb-home-section-five-body-qa .maweb-home-section-five-accordion-item {
  background: #f6f7fb !important;
  border: 1px solid #e6e8f0;
}
#mawebPageHome .maweb-home-section-five-body-qa
  .maweb-home-section-five-accordion-item:has(.accordion-button[aria-expanded="true"]) {
  background: #eef0f8 !important;
  border-color: #d7dae8;
}
#mawebPageHome .maweb-home-section-five-body-qa .accordion-button,
#mawebPageHome .maweb-home-section-five-body-qa .accordion-button *,
#mawebPageHome .maweb-home-section-five-body-qa .accordion-button-title,
#mawebPageHome .maweb-home-section-five-body-qa .accordion-body { color: #191a2c !important; }

/* ---------- Footer ----------
   The info column is dark (light text); the contact column keeps its own
   light background, so its heading/inputs must stay dark. Only recolor the
   info side; do NOT force the contact side to light. */
.maweb-footer-info-title,
.maweb-footer-info-desc,
.mwaeb-footer-info-contact,
.maweb-footer-info-copyright,
.maweb-footer-info-social a {
  color: var(--nih-text);
}
/* make "Napisz do Nas!" stand out on the light contact panel */
.maweb-footer-contact-title { color: var(--primary-dark) !important; }

/* =====================================================================
   "Produkty" mega menu
   ===================================================================== */
.maweb-header-container { position: relative; }
.maweb-header-nav-menu li.nih-mega-parent { position: static; }

.nih-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding-top: 6px;               /* hover bridge — kept small to sit close to header */
  width: min(680px, calc(100vw - 40px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 50;
}
/* Transparent bridge extending up to the nav link so the mouse never
   crosses a dead zone between "Produkty" and the panel. */
.nih-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -34px;
  height: 40px;
}
/* Desktop-only: on touch, tapping the parent makes `:hover` stick, and this
   rule's `translateX(-50%)` (specificity 0,4,0) beat the mobile `transform:none`
   (0,1,0) — which slid the open sub-menu half its width off the left edge. */
@media (hover: hover) and (min-width: 768px) {
  .maweb-header-nav-menu li.nih-mega-parent:hover .nih-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}
.nih-mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
  background: rgba(17, 22, 52, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--nih-border-strong);
  border-radius: 16px;
  padding: 12px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.nih-mega-heading {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--nih-muted);
  text-align: center;
  padding: 0 10px 6px;
  border-bottom: 1px solid var(--nih-border);
  margin-bottom: 0;
}
/* the "Cyfrowy Marketing" heading doubles as a link to the Oferta hub */
a.nih-mega-heading {
  text-decoration: none;
  transition: color 160ms ease;
}
a.nih-mega-heading:hover { color: var(--nih-accent); }
.nih-mega-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  min-height: 40px;              /* uniform row height across both columns */
  padding: 5px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 180ms ease;
}
a.nih-mega-item:hover { background: var(--nih-accent-soft); }
.nih-mega-item--soon { opacity: 0.6; cursor: default; }
.nih-mega-item-title {
  color: var(--nih-text);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.nih-mega-item-desc { color: var(--nih-muted); font-size: 13px; }
.nih-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.nih-badge--flag { background: var(--nih-accent); color: #14102b; }
.nih-badge--soon { background: rgba(255, 255, 255, 0.1); color: var(--nih-muted); }

/* Sub-menu disclosure. Desktop opens the panel on hover and the link navigates,
   so the button is only ever needed on touch. */
.nih-mega-toggle { display: none; }

/* --- Mobile: render the panel as a plain indented sub-menu ---------------
   There is no hover on touch, so the panel is always expanded inside the
   burger menu. As a floating glass card it took 57% of the menu height and
   pushed "Case study"/"Kontakt" off-screen on a 667px phone. Strip the card
   chrome and the desktop-only descriptions so it reads as sub-items. */
@media (max-width: 767.98px) {
  /* The open nav is `height:100vh` but it STARTS ~61px down (below the header
     row), so its last 61px hung off-screen — and `overflow:hidden` meant the
     content could never be reached. Subtract the header so the box ends at the
     fold, then let it scroll internally when the menu is taller than that. */
  .maweb-header-nav.maweb-header-nav-mobile--open {
    height: calc(100vh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* breathing room so the last item isn't flush against the bottom edge */
  .maweb-header-nav.maweb-header-nav-mobile--open .maweb-header-nav-menu {
    padding-bottom: 28px;
  }
  /* Every menu <li> is `text-align:center`. Harmless while each li hugs its own
     text, but this one is full-width (the panel lives inside it), so "Produkty"
     was centred at x=130 while the other links sat at x=31 — the column looked
     broken. Force it back into the column. */
  .maweb-header-nav-menu li.nih-mega-parent {
    text-align: left;
    width: 100%;
    /* link and chevron share one row; the panel wraps onto its own line below */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .maweb-header-nav-menu li.nih-mega-parent > a { flex: 1 1 auto; }
  .maweb-header-nav-menu li.nih-mega-parent > .nih-mega { flex: 1 0 100%; }
  /* Collapsed until the chevron is tapped (no hover on touch) */
  .nih-mega {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: 100%;
    padding-top: 2px;
    display: none;
  }
  .maweb-header-nav-menu li.nih-mega-parent.nih-mega-open .nih-mega { display: block; }
  /* the chevron itself — 44px box for a comfortable touch target */
  .nih-mega-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-left: 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--nih-border);
    border-radius: 10px;
    cursor: pointer;
  }
  .nih-mega-toggle:focus-visible {
    outline: 2px solid var(--nih-accent);
    outline-offset: 2px;
  }
  .nih-mega-toggle-icon {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--nih-accent);
    border-bottom: 2px solid var(--nih-accent);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 200ms ease;
  }
  .nih-mega-parent.nih-mega-open .nih-mega-toggle {
    background: var(--nih-accent-soft);
    border-color: var(--nih-border-strong);
  }
  .nih-mega-parent.nih-mega-open .nih-mega-toggle-icon {
    transform: translateY(2px) rotate(-135deg);
  }
  /* Belt and braces: match the hover rule's specificity so a sticky :hover on
     touch can never re-apply the desktop centring transform. */
  .maweb-header-nav-menu li.nih-mega-parent:hover .nih-mega,
  .maweb-header-nav-menu li.nih-mega-parent.nih-mega-open .nih-mega {
    position: static;
    transform: none;
    left: auto;
  }
  /* NOTE: do NOT build a caret out of `.nav-link::after` — the theme uses that
     pseudo-element for the desktop underline (an absolutely positioned bar) and
     only disables it on mobile via `content:none`. Re-adding content revives the
     underline's inherited geometry, which renders as a broken rotated bar.
     The sub-menu sliding open is the affordance instead. */
  .nih-mega::before { content: none; }
  .nih-mega-inner {
    grid-template-columns: 1fr;
    gap: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-left: 2px solid var(--nih-border-strong);
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 2px 14px;
  }
  .nih-mega-heading {
    text-align: left;
    padding: 7px 0 1px;
    border-bottom: none;
  }
  .nih-mega-item {
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    min-height: 0;
    padding: 6px 0;
    gap: 0;
  }
  /* descriptions and not-yet-available entries are desktop niceties */
  .nih-mega-item-desc,
  .nih-mega-item--soon { display: none; }
}

/* =====================================================================
   O FIRMIE (About page)
   ===================================================================== */
.purple-accent { color: var(--nih-accent) !important; }

/* hero: purple block -> dark midnight, neuron video kept subtle */
.maweb-about-section-one { background-color: var(--nih-bg); padding-bottom: 120px; }
/* compact the oversized about hero title + keep it clear of the scroll-down icon */
.maweb-about-section-one-title {
  color: var(--nih-text);
  font-size: clamp(30px, 4.2vw, 50px) !important;
  line-height: 1.12 !important;
  letter-spacing: -1px !important;
}
.maweb-about-section-one-block { gap: 20px; }
/* center the hero buttons (text-align keeps the inline-grid intact; flex would squeeze it) */
.maweb-about-section-one-buttons-wrapper { text-align: center; }
/* desktop: nudge hero content down (clear of header) + center everything but the breadcrumb */
@media (min-width: 768px) {
  .maweb-about-section-one { padding-top: 130px; }
  .maweb-about-section-one-container .row { justify-content: center; }
  .maweb-about-section-one-block { text-align: center; align-items: center; }
  /* breadcrumb is a flex row — centre it with the rest of the hero */
  .maweb-about-breadcrumbs { justify-content: center; }
}
.maweb-about-section-one-video {
  background: linear-gradient(0deg, rgba(11, 15, 43, 0.9) 0%, rgba(11, 15, 43, 0.68) 100%);
}
/* video opacity + ::after scrim are shared with the Offer and Case study heroes
   — all three run the same neuron footage. See the OFERTA block. */
.maweb-about-section-one-desc h5 { color: var(--nih-text); }
/* The primary CTA here is the SECOND button ("Umów darmowy pilotaż"); the first
   is a scroll-down link. Make the solid one identical to the landing page's
   `.maweb-btn--primary` — purple with WHITE text. It previously used dark ink
   (#14102b), which was the one thing that still set this hero apart. */
.maweb-about-section-one-buttons .maweb-btn--dark {
  background: var(--nih-accent) !important;
  color: #ffffff !important;
  border: none !important;
}
.maweb-about-section-one-buttons .maweb-btn--dark:hover { background: #b9a2ff !important; }

/* description blocks: light text on dark, framed images */
.maweb-about-section-two-element-title,
.maweb-about-section-two-element-title * { color: var(--nih-text); }
.maweb-about-section-two-element-article { color: var(--nih-muted); }
.maweb-about-section-two-element-image img {
  border-radius: 16px;
  border: 1px solid var(--nih-border);
  background: var(--nih-surface);
}
.maweb-about-hr { border-color: var(--nih-border-strong); opacity: 0.5; }

/* banner CTA: flat purple -> dark gradient with purple glow */
.maweb-about-section-three {
  background: radial-gradient(120% 140% at 50% 0%, rgba(165, 136, 255, 0.18), transparent 60%),
    var(--nih-bg-2);
  border-top: 1px solid var(--nih-border);
  border-bottom: 1px solid var(--nih-border);
}
.maweb-about-section-three-title { color: var(--nih-text); }
.maweb-about-section-three-desc p { color: var(--nih-muted); }

/* =====================================================================
   SEO: section titles are now real <h1>/<h2> elements instead of <div>s.
   Neutralise the UA default heading margins so the layout is unchanged.
   ===================================================================== */
.maweb-about-section-one-title,
.maweb-about-section-two-element-title,
.maweb-about-section-three-title,
.maweb-offer-section-one-title,
.maweb-offer-section-two-title,
.maweb-offer-section-three-head-title,
.maweb-case-study-section-one-title,
.maweb-case-study-section-two-title {
  margin: 0;
}
/* style.css carries `.maweb-page h1 { color: var(--primary-dark);
   font-size: clamp(46px,7vw,72px) !important }`. Now that these hero titles are
   real <h1>s, that rule (0,1,1 + !important) outranks the class-only overrides —
   it turned the titles dark on the video and forced them back to 72px, pushing
   the hero past one screen. Restate at higher specificity. */
.maweb-page h1.maweb-about-section-one-title,
.maweb-page h1.maweb-offer-section-one-title,
.maweb-page h1.maweb-case-study-section-one-title {
  color: var(--nih-text) !important;
  /* scale with viewport HEIGHT as well as width, so the hero still fits
     one screen on short laptop displays */
  font-size: clamp(28px, min(3.7vw, 6.6vh), 56px) !important;
  line-height: 1.14 !important;
  letter-spacing: -1px !important;
  text-shadow: 0 2px 18px rgba(5, 8, 26, 0.55);
}
/* hero sub-line: brighten for legibility over the moving video */
.maweb-about-section-one-desc h5,
.maweb-offer-section-one-desc h5,
.maweb-case-study-section-one-desc h5 {
  color: var(--nih-text) !important;
  text-shadow: 0 1px 12px rgba(5, 8, 26, 0.6);
}
/* keep the hero within one screen on desktop — padding tracks viewport height
   so short laptop displays don't push the content past the fold */
@media (min-width: 768px) {
  .maweb-about-section-one,
  .maweb-offer-section-one,
  .maweb-case-study-section-one {
    padding-top: clamp(64px, 10vh, 96px);
    padding-bottom: clamp(56px, 9vh, 88px);
    /* Offer + Case study lacked align-items, so their content hugged the top
       and left a large gap above the scroll-down cue. About already had it. */
    align-items: center;
  }
  .maweb-about-section-one-block { gap: clamp(10px, 2vh, 20px); }
  .maweb-about-section-one-container { row-gap: clamp(12px, 2.4vh, 30px); }
  /* Offer + Case study carry `margin-bottom:100px` on the hero container (About
     does not). Inside a centred grid that margin counts as content, so it lifted
     the text ~50px above the optical centre. Drop it so all three heroes match. */
  .maweb-offer-section-one-container,
  .maweb-case-study-section-one-container {
    margin-bottom: 0;
  }
}
/* `min-height:100vh` ignores the admin bar, so for logged-in users the section
   runs 32px past the fold and clips the scroll-down cue. Subtract its height. */
body.admin-bar .maweb-about-section-one,
body.admin-bar .maweb-offer-section-one,
body.admin-bar .maweb-case-study-section-one {
  min-height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .maweb-about-section-one,
  body.admin-bar .maweb-offer-section-one,
  body.admin-bar .maweb-case-study-section-one {
    min-height: calc(100vh - 46px);
  }
}

/* =====================================================================
   CASE STUDY page — contrast fixes only (no content changes)
   The page kept the original light-theme colours: a cream hero overlay
   (#fff8e3cc) plus body text using --primary-dark / --primary-black, which
   became invisible once the global dark scheme landed. Hero is brought in
   line with the other page heroes; body text switched to the light palette.
   ===================================================================== */
/* hero: dark overlay over the neuron video. The video opacity and the ::after
   scrim are shared with the Offer hero — see the OFERTA block above; both run
   the same footage and should read identically. */
.maweb-case-study-section-one { background-color: var(--nih-bg); }
.maweb-case-study-section-one-video {
  background: linear-gradient(0deg, rgba(11, 15, 43, 0.9) 0%, rgba(11, 15, 43, 0.68) 100%) !important;
}
.maweb-case-study-section-one-title,
.maweb-case-study-section-one-title * { color: var(--nih-text); }
.maweb-case-study-section-one-title .purple-accent,
.maweb-case-study-section-one-title span { color: var(--nih-accent); }
.maweb-case-study-section-one-desc h5 { color: var(--nih-muted); }
.maweb-case-study-breadcrumbs,
.maweb-case-study-breadcrumbs * { color: var(--nih-text); }
/* Hero CTAs now match the landing-page hero: one solid accent button and one
   ghost button beside it. The earlier solid-accent override existed because a
   ghost button vanished against the old pale background — with the scrim above,
   the background is dark enough for the global `.maweb-btn--dark` treatment
   (translucent white + border) to read properly, so it is no longer needed. */
.maweb-case-study-section-one-buttons a { text-decoration: none; }
.maweb-case-study-section-one-buttons .maweb-btn--primary,
.maweb-case-study-section-one-buttons .maweb-btn--dark {
  padding: 18px 30px;
}

/* section two heading + list body */
.maweb-case-study-section-two-title,
.maweb-case-study-section-two-title * { color: var(--nih-text); }
.maweb-case-study-section-two-title .purple-accent { color: var(--nih-accent); }
.maweb-case-study-section-two-articles-category-text { color: var(--nih-muted); }
.maweb-case-study-section-two-articles-category-text.active,
.maweb-case-study-section-two-articles-category-text:hover { color: var(--nih-text); }

/* article cards: title, body, meta and share label were all dark-on-dark */
.maweb-case-study-section-two-article-post,
.maweb-case-study-section-two-article-post * { color: var(--nih-text); }
/* the theme's own `.…-article-post h4` is element-qualified, so it outranks the
   `*` rule above — restate it at equal specificity to win on source order */
.maweb-case-study-section-two-article-post h4 { color: var(--nih-text); }
.maweb-case-study-section-two-article-post-text,
.maweb-case-study-section-two-article-post-text *,
.maweb-case-study-section-two-article-post-text p,
.maweb-case-study-section-two-article-post-text li,
.maweb-case-study-section-two-article-post-text span { color: var(--nih-muted); }
.maweb-case-study-section-two-article-author-name,
.maweb-case-study-section-two-article-author-name strong,
.maweb-case-study-section-two-article-author-date,
.maweb-case-study-section-two-article-author-date strong { color: var(--nih-muted); }
.maweb-case-study-section-two-article-share-text { color: var(--nih-muted); }
/* "Przejdź do wpisu": pale text on the purple card read poorly — use the same
   solid-accent + dark-text treatment as the other CTAs across the site */
a.maweb-case-study-section-two-article-btn,
a.maweb-case-study-section-two-article-btn:hover {
  color: #14102b !important;
  background: var(--nih-accent) !important;
  border: none !important;
}

/* =====================================================================
   OFERTA / PRODUKTY hub page
   ===================================================================== */
/* hero: light lavender -> dark midnight */
.maweb-offer-section-one { background-color: var(--nih-bg); }
.maweb-offer-section-one-video {
  background: linear-gradient(0deg, rgba(11, 15, 43, 0.9) 0%, rgba(11, 15, 43, 0.68) 100%);
}
/* The gradient above sits BEHIND the video element, so it could only tint what
   showed through — the neuron footage still read too bright behind the copy.
   Drop the video a little and lay a scrim over the top of it instead: darkest at
   the edges, lighter through the middle so the animation is still legible.
   The About and Case study heroes run the same neuron footage, so all three
   share this treatment (see their blocks below). */
.maweb-offer-section-one-video video,
.maweb-about-section-one-video video,
.maweb-case-study-section-one-video video { opacity: 0.16; }
.maweb-offer-section-one-video::after,
.maweb-about-section-one-video::after,
.maweb-case-study-section-one-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(11, 15, 43, 0.42) 0%, rgba(11, 15, 43, 0.8) 62%, rgba(11, 15, 43, 0.95) 100%),
    linear-gradient(180deg, rgba(11, 15, 43, 0.72) 0%, rgba(11, 15, 43, 0.3) 45%, rgba(11, 15, 43, 0.9) 100%);
}
.maweb-offer-section-one-title,
.maweb-offer-section-one-title * { color: var(--nih-text); }
.maweb-offer-section-one-desc h5 { color: var(--nih-muted); }

/* Mobile hero: the base rule pins the content to the top (align-items:start,
   padding-top:90px, and a 100px bottom margin on the container that only gets
   zeroed from 768px up), leaving ~215px of dead space above the scroll cue.
   Centre it the same way the desktop hero already is, and keep the bottom
   padding clear of the absolutely-positioned chevron. */
@media (max-width: 767.98px) {
  .maweb-offer-section-one {
    align-items: center;
    padding-top: calc(var(--nih-header-bottom) + 16px);
    padding-bottom: 76px;
  }
  .maweb-offer-section-one-container { margin-bottom: 0; }
}

/* Zarządzanie kosztami teaser — the hub lists only its child pages, so the
   bakery products need their own block. Sits between the Predykcja flagship and
   the marketing catalogue so both modules read together. */
.nih-cost-teaser {
  margin: clamp(36px, 5vh, 64px) 0 clamp(28px, 4vh, 48px);
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--nih-border-strong);
  border-radius: 20px;
  background:
    radial-gradient(85% 150% at 100% 0%, rgba(165, 136, 255, 0.17), transparent 60%),
    var(--nih-surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}
.nih-cost-teaser-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border: 1px solid var(--nih-border-strong);
  border-radius: 999px;
  background: var(--nih-accent-soft);
  color: #d7c9ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.nih-cost-teaser-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nih-accent);
  box-shadow: 0 0 9px var(--nih-accent);
}
.maweb-page.maweb-offer h2.nih-cost-teaser-title {
  color: var(--nih-text);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1.1px;
  margin: 0 0 14px;
}
.maweb-page.maweb-offer h2.nih-cost-teaser-title .purple-accent { color: var(--nih-accent); }
.nih-cost-teaser-desc {
  max-width: 780px;
  margin: 0 0 26px;
  color: var(--nih-muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.68;
}
.nih-cost-teaser-points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.nih-cost-teaser-points li {
  padding: 18px 20px;
  border: 1px solid var(--nih-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.nih-cost-teaser-points strong {
  display: block;
  margin-bottom: 6px;
  color: var(--nih-accent);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
}
.nih-cost-teaser-points span {
  color: var(--nih-muted);
  font-size: 14px;
  line-height: 1.55;
}
.maweb-offer a.nih-cost-teaser-cta { display: inline-block; text-decoration: none; }
.maweb-offer a.nih-cost-teaser-cta .maweb-btn--primary {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 15px 30px;
}
@media (max-width: 575.98px) {
  .maweb-offer a.nih-cost-teaser-cta,
  .maweb-offer a.nih-cost-teaser-cta .maweb-btn--primary {
    width: 100%;
    justify-content: center;
  }
}

/* section two: flagship intro + services catalog */
.maweb-offer-section-two-title,
.maweb-offer-section-two-title * { color: var(--nih-text); }
.maweb-offer-section-two-desc p { color: var(--nih-muted); }
/* the neuron-net graphic is a right-hand accent on desktop; stacked on mobile it
   rendered full-bleed at 347px and dominated the flagship copy above it */
@media (max-width: 767.98px) {
  .maweb-offer .maweb-about-section-two-image {
    justify-content: center;
    margin-top: 8px;
  }
  .maweb-offer .maweb-about-section-two-image img {
    width: 100%;
    max-width: 190px;
    height: auto;
  }
}
.maweb-offer .maweb-about-section-two-image img {
  border-radius: 16px;
  border: 1px solid var(--nih-border);
  background: var(--nih-surface);
}
.maweb-offer-section-two-accordion-title {
  background-color: var(--nih-surface);
  color: var(--nih-text);
  border: 1px solid var(--nih-border);
}
.maweb-offer-section-two-panel {
  background: var(--nih-surface);
  border: 1px solid var(--nih-border);
  box-shadow: none;
}
.maweb-offer-section-two-panel-element,
.maweb-offer-section-two-panel-element p { color: var(--nih-text); }
.maweb-offer-section-two-panel-element:hover,
.maweb-offer-section-two-panel-element.active {
  background: var(--nih-accent-soft);
  border-color: var(--nih-accent);
}

/* section three FAQ + AJAX-loaded service accordion */
.maweb-offer-section-three-head-title,
.maweb-offer-section-three-title,
.maweb-offer-section-three-desc h4 { color: var(--nih-text); }
.maweb-offer-section-three-head-desc { color: var(--nih-muted); }
/* FAQ illustration: fill the column height next to the accordion (the portrait
   photo otherwise stopped ~124px short). Framed + cover so it always matches
   the accordion height, however many questions are open. */
@media (min-width: 992px) {
  .maweb-offer-section-three-body-image-wrapper {
    align-items: stretch;
    justify-items: stretch;
  }
  .maweb-offer-section-three-body-image {
    height: 100%;
    width: 100%;
  }
  .maweb-offer-section-three-body-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    border: 1px solid var(--nih-border);
  }
}
.maweb-offer .maweb-accordion-section-item,
.maweb-offer .maweb-accordion .accordion-item {
  background: var(--nih-surface) !important;
  border: 1px solid var(--nih-border) !important;
}
.maweb-offer .accordion-button,
.maweb-offer .accordion-button *,
.maweb-offer .accordion-button-title,
.maweb-offer .accordion-body,
.maweb-offer .accordion-body * { color: var(--nih-text) !important; }

/* breadcrumbs: brighten on dark (default variant is near-black) */
.maweb-breadcrumbs * { color: var(--nih-text); }

/* =====================================================================
   PREDYKCJA POPYTU (flagship product page)
   ===================================================================== */
.maweb-predykcja { overflow: hidden; }
/* reusable glass card */
.nih-card {
  background: var(--nih-surface);
  border: 1px solid var(--nih-border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.nih-pred-h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -1px; color: var(--nih-text); }
.nih-pred-h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: var(--nih-text); }
.nih-pred-muted { color: var(--nih-muted); font-size: 17px; line-height: 1.65; font-weight: 300; }

/* hero */
/* The hero sat ~345px down the page because two top paddings stacked:
   `.maweb-page` contributes 155px (maweb_page.css) and the hero added 190px
   of its own. Drop the page-level one here and let the hero own its spacing,
   balanced top/bottom so the content reads as vertically centred. */
.maweb-page.maweb-predykcja {
  padding-top: 0;
}
.nih-pred-hero {
  position: relative;
  /* min must stay clear of the overlaid glass header (its bottom edge ~100px) */
  padding: clamp(140px, 17vh, 168px) 0 clamp(80px, 11vh, 104px);
  text-align: center;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(165, 136, 255, 0.22), transparent 70%),
    var(--nih-bg);
}
.nih-pred-hero-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.nih-pred-hero-title { font-size: clamp(42px, 6vw, 78px); font-weight: 800; line-height: 1.05; letter-spacing: -2px; color: var(--nih-text); }
.nih-pred-hero-desc { color: var(--nih-muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; max-width: 680px; }
.nih-pred-hero .maweb-btn--primary { display: inline-flex; padding: 16px 30px; }

/* architektura / silnik */
.nih-pred-arch { padding: 30px 0 90px; }
.nih-pred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.nih-pred-arch-card p { margin: 16px 0 20px; }
.nih-pred-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.nih-pred-list li {
  position: relative; padding-left: 32px; color: var(--nih-text); font-size: 16px;
}
.nih-pred-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--nih-accent-soft); color: var(--nih-accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.nih-pred-engine h2 { margin-bottom: 18px; }

/* dashboard */
.nih-pred-dash { padding: 30px 0 90px; }
.nih-pred-dash-head { text-align: center; margin-bottom: 40px; }
.nih-pred-dash-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 16px; color: var(--nih-muted); font-size: 14px; }
.nih-pred-live { display: inline-flex; align-items: center; gap: 8px; color: #7ef0c0; font-weight: 600; }
.nih-pred-live i { width: 8px; height: 8px; border-radius: 50%; background: #7ef0c0; box-shadow: 0 0 0 4px rgba(126, 240, 192, 0.18); }
.nih-pred-dim { opacity: 0.7; }
.nih-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nih-dash-summary { grid-column: 1 / -1; }
.nih-dash-bakery-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.nih-dash-bakery-head h4 { font-size: 18px; font-weight: 600; color: var(--nih-text); }
.nih-dash-acc { text-align: right; }
.nih-dash-acc strong { display: block; font-size: 28px; font-weight: 800; color: var(--nih-accent); line-height: 1; }
.nih-dash-acc span { font-size: 12px; color: var(--nih-muted); }
.nih-dash-bars { height: 96px; }
.nih-dash-bars i {
  height: 55%;
  background: linear-gradient(180deg, rgba(165, 136, 255, 0.55), rgba(165, 136, 255, 0.18));
}
.nih-dash-bars i:nth-child(1) { height: 40%; }
.nih-dash-bars i:nth-child(2) { height: 62%; }
.nih-dash-bars i:nth-child(3) { height: 50%; }
.nih-dash-bars i:nth-child(4) { height: 85%; }
.nih-dash-bars i:nth-child(5) { height: 58%; }
.nih-dash-bars i:nth-child(6) { height: 72%; }
.nih-dash-bars i:nth-child(7) { height: 46%; }
.nih-dash-bars i.hl { background: linear-gradient(180deg, #b9a2ff, var(--nih-accent)); }
.nih-dash-summary h4 { font-size: 16px; color: var(--nih-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.nih-dash-stat { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--nih-border); }
.nih-dash-stat:last-child { border-bottom: none; }
.nih-dash-stat span { color: var(--nih-muted); font-size: 15px; }
.nih-dash-stat strong { font-size: 22px; font-weight: 800; color: var(--nih-text); }
.nih-dash-stat strong.nih-down { color: #7ef0c0; }

/* CTA */
/* case-study proof band — sits between the model dashboard and the closing CTA,
   so the accuracy figures are followed immediately by measured client results */
.nih-pred-case { padding: 20px 0 40px; }
.nih-pred-case-inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--nih-border-strong);
  border-radius: 24px;
  background:
    radial-gradient(90% 150% at 0% 0%, rgba(165, 136, 255, 0.16), transparent 62%),
    var(--nih-surface);
}
.nih-pred-case-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid var(--nih-border-strong);
  border-radius: 999px;
  background: var(--nih-accent-soft);
  color: #d7c9ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.nih-pred-case-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nih-accent);
  box-shadow: 0 0 9px var(--nih-accent);
}
.nih-pred-case-copy .nih-pred-h2 { margin: 0 0 12px; }
.nih-pred-case-copy .nih-pred-muted { margin: 0 0 24px; }
.maweb-predykcja a.nih-pred-case-cta { display: inline-block; text-decoration: none; }
.maweb-predykcja a.nih-pred-case-cta .maweb-btn--primary {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 15px 30px;
}
.nih-pred-case-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nih-pred-case-stats li {
  padding: 20px 22px;
  border: 1px solid var(--nih-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.nih-pred-case-stats strong {
  display: block;
  color: var(--nih-accent);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}
.nih-pred-case-stats span {
  display: block;
  margin-top: 6px;
  color: var(--nih-muted);
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .nih-pred-case-inner { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .maweb-predykcja a.nih-pred-case-cta,
  .maweb-predykcja a.nih-pred-case-cta .maweb-btn--primary {
    width: 100%;
    justify-content: center;
  }
}

.nih-pred-cta { padding: 20px 0 110px; }
.nih-pred-cta-inner {
  text-align: center; max-width: 780px; margin: 0 auto; padding: 60px 40px; border-radius: 24px;
  background: radial-gradient(120% 160% at 50% 0%, rgba(165, 136, 255, 0.2), transparent 60%), var(--nih-surface);
  border: 1px solid var(--nih-border-strong);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}

@media (max-width: 900px) {
  .nih-pred-grid { grid-template-columns: 1fr; gap: 24px; }
  .nih-dash-grid { grid-template-columns: 1fr; }
  .nih-pred-hero { padding-top: 150px; }
}

/* beat theme's .maweb-page h1/h3 (dark color + !important font) */
.maweb-predykcja .nih-pred-hero-title {
  color: var(--nih-text) !important;
  font-size: clamp(42px, 6vw, 78px) !important;
  line-height: 1.06 !important;
  letter-spacing: -2px !important;
}
.maweb-predykcja .nih-pred-h2,
.maweb-predykcja .nih-pred-h3 { color: var(--nih-text); }

/* =====================================================================
   LARGE SCREENS
   Nothing in the stylesheet responded above 1460px, so on 1920/2560
   displays the type and vertical rhythm stayed frozen at their ~1200px
   values while the measure widened. Scale the rhythm to match.
   ===================================================================== */
@media (min-width: 1600px) {
  #mawebPageHome .maweb-home-section-one-container {
    margin-top: 216px;
    margin-bottom: 168px;
  }
  #mawebPageHome .nih-hero-eyebrow {
    font-size: 14px;
    padding: 9px 20px;
    margin-bottom: 26px;
  }
  #mawebPageHome .nih-hero-proof { gap: 16px 40px; margin-top: 46px; }
  #mawebPageHome .nih-hero-proof li { font-size: 16px; }
  #mawebPageHome .nih-hero-proof li strong { font-size: 24px; }
  #mawebPageHome .nih-hero-proof li + li::before { left: -20px; }

  #mawebPageHome .maweb-home-section-turnover-container {
    max-width: 1040px;
    margin-top: 168px;
    margin-bottom: 104px;
  }
  #mawebPageHome .nih-ladder { gap: 34px; margin-top: 44px; }
  #mawebPageHome .nih-ladder li { padding: 24px 22px; }
  #mawebPageHome .nih-ladder li + li::before { left: -34px; width: 34px; }
  #mawebPageHome .nih-ladder li span { font-size: 15px; }

  #mawebPageHome .maweb-home-section-two-container {
    margin-top: 128px !important;
    margin-bottom: 128px !important;
  }
  #mawebPageHome .maweb-home-section-two-body-title { margin-bottom: 64px !important; }
  #mawebPageHome .maweb-home-section-two-body-content-element { padding: 26px 30px; }
  #mawebPageHome .maweb-home-section-two-body-content-element-desc p { font-size: 16px; }
}

/* =====================================================================
   PRODUCT SUBPAGES (templates/maweb-product.php)
   Hero + long-form prose body + closing CTA, on the dark palette.
   ===================================================================== */
.maweb-product .nih-product-hero {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(165, 136, 255, 0.16), transparent 62%),
    var(--nih-bg);
  padding: clamp(130px, 16vh, 170px) 0 clamp(52px, 7vh, 76px);
  border-bottom: 1px solid var(--nih-border);
}
.maweb-product .nih-product-crumbs { justify-content: center; margin-bottom: 26px; }
.maweb-product .nih-product-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.maweb-page.maweb-product h1.nih-product-title {
  color: var(--nih-text) !important;
  font-size: clamp(32px, 3.9vw, 60px) !important;
  line-height: 1.1 !important;
  font-weight: 800;
  letter-spacing: -1.6px;
  margin: 0 0 22px !important;
}
.maweb-product .nih-product-lead {
  color: var(--nih-muted);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
  margin: 0 0 32px;
}

/* --- long-form body --- */
.maweb-product .nih-product-body { padding: clamp(56px, 8vh, 88px) 0; }
.maweb-product .nih-prose {
  max-width: 860px;
  margin: 0 auto;
  color: var(--nih-muted);
  font-size: 17px;
  line-height: 1.72;
}
.maweb-product .nih-prose > *:first-child { margin-top: 0; }
.maweb-page.maweb-product .nih-prose h2 {
  color: var(--nih-text);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 54px 0 18px;
}
.maweb-page.maweb-product .nih-prose h3 {
  color: var(--nih-text);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  margin: 38px 0 14px;
}
.maweb-product .nih-prose p { margin: 0 0 18px; }
.maweb-product .nih-prose strong { color: var(--nih-text); font-weight: 700; }
.maweb-product .nih-prose ul,
.maweb-product .nih-prose ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.maweb-product .nih-prose ul > li,
.maweb-product .nih-prose ol > li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
}
.maweb-product .nih-prose ul > li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nih-accent);
}
.maweb-product .nih-prose ol { counter-reset: nih-step; }
.maweb-product .nih-prose ol > li { counter-increment: nih-step; }
.maweb-product .nih-prose ol > li::before {
  content: counter(nih-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nih-accent-soft);
  border: 1px solid var(--nih-accent);
  color: var(--nih-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* --- FAQ (native <details>, no JS) --- */
.maweb-product .nih-faq { margin: 8px 0 0; }
.maweb-product .nih-faq-item {
  border: 1px solid var(--nih-border);
  border-radius: 14px;
  background: var(--nih-surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.maweb-product .nih-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 22px;
  position: relative;
  color: var(--nih-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.maweb-product .nih-faq-item > summary::-webkit-details-marker { display: none; }
.maweb-product .nih-faq-item > summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--nih-accent);
  border-bottom: 2px solid var(--nih-accent);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.maweb-product .nih-faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}
.maweb-product .nih-faq-item > summary:hover { background: var(--nih-surface-2); }
.maweb-product .nih-faq-item > summary:focus-visible {
  outline: 2px solid var(--nih-accent);
  outline-offset: -2px;
}
.maweb-product .nih-faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--nih-muted);
}

/* --- closing CTA --- */
.maweb-product .nih-product-cta {
  background:
    radial-gradient(120% 140% at 50% 100%, rgba(165, 136, 255, 0.18), transparent 60%),
    var(--nih-bg-2);
  border-top: 1px solid var(--nih-border);
  padding: clamp(52px, 7vh, 78px) 0;
}
.maweb-product .nih-product-cta-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.maweb-product .nih-product-cta-text {
  color: var(--nih-text);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.8px;
  margin: 0 0 26px;
}

@media (max-width: 767.98px) {
  .maweb-product .nih-prose { font-size: 16px; }
  .maweb-product .nih-faq-item > summary { font-size: 16px; padding-right: 46px; }
}

/* reassurance microtext under the contact form */
.nih-form-note {
  margin: 14px 0 0;
  color: var(--nih-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Product pages: `.maweb-btn--primary` is `display:flex` in style.css, so the
   button stretched to fill its wrapper instead of sitting centred under the
   text. Same inline-flex treatment the Predykcja hero already uses. */
.maweb-product .nih-product-hero-inner a,
.maweb-product .nih-product-cta-inner a {
  display: inline-block;
  text-decoration: none;
}
.maweb-product .nih-product-hero-inner .maweb-btn--primary,
.maweb-product .nih-product-cta-inner .maweb-btn--primary {
  display: inline-flex;
  padding: 16px 32px;
  width: auto;
}
.maweb-product .nih-product-hero-inner,
.maweb-product .nih-product-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.maweb-product .nih-product-hero-inner > *,
.maweb-product .nih-product-cta-inner > * {
  max-width: 100%;
}

/* --- service catalogue: cards linking to the product subpages --- */
.nih-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.nih-service-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--nih-surface);
  border: 1px solid var(--nih-border);
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.nih-service-card:hover,
.nih-service-card:focus-visible {
  background: var(--nih-surface-2);
  border-color: var(--nih-accent);
  transform: translateY(-2px);
}
.nih-service-card-title {
  color: var(--nih-text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.4px;
}
.nih-service-card-title::after {
  content: " →";
  color: var(--nih-accent);
}
.nih-service-card-desc {
  color: var(--nih-muted);
  font-size: 15px;
  line-height: 1.55;
}

/* the free-pilot item carries the offer, so the label is bold too rather than
   just the figure */
#mawebPageHome .nih-hero-proof li.nih-hero-proof--strong {
  color: #ffffff;
  font-weight: 700;
}

/* =====================================================================
   ZARZĄDZANIE KOSZTAMI (templates/maweb-koszty.php)
   Long marketing page for the second bakery product. The template also
   carries `maweb-product`, so the hero, FAQ accordion and closing CTA come
   from that block above; only the sections unique to this page live here.

   Specificity note: assets/css/style.css sets `.maweb-page h3 { color:
   var(--primary-dark); font-size: 36px }` at (0,1,1), which would render
   dark-on-dark. Headings below are qualified with element + two classes so
   they outrank it.
   ===================================================================== */
.maweb-koszty { background: var(--nih-bg-2); }

/* --- hero: one full screen, content centred in the part you can actually see --
   `.maweb-page` pads its top by --nih-page-top to clear the header. Leaving that
   in place would start the hero's box ~55px BELOW the header, so centring inside
   it still reads top-heavy. Cancel the padding with a negative margin, take the
   whole viewport, then push the content down past the header with padding — now
   the free space above and below the content is genuinely equal.
   min-height (not height) lets a short viewport grow instead of clipping. */
.maweb-koszty .nih-product-hero {
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--nih-page-top));
  min-height: calc(100vh - var(--nih-admin-h));
  min-height: calc(100svh - var(--nih-admin-h));
  padding-top: calc(var(--nih-header-bottom) + clamp(16px, 3vh, 36px));
  padding-bottom: clamp(16px, 3vh, 36px);
}
/* .maweb-wrapper centres itself with auto margins, which stops a flex item from
   stretching — restate the width so the hero content still fills the row. */
.maweb-koszty .nih-product-hero > .maweb-wrapper { width: 100%; }

/* --- hero --- */
.nih-koszty-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 16px;
  border: 1px solid var(--nih-border-strong);
  border-radius: 999px;
  background: var(--nih-accent-soft);
  color: #d7c9ff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.3;
}
.nih-koszty-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nih-accent);
  box-shadow: 0 0 10px var(--nih-accent);
  flex: 0 0 auto;
}
.maweb-page.maweb-koszty h1.nih-product-title .purple-accent { color: var(--nih-accent); }
.nih-koszty-hero-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.maweb-koszty .nih-koszty-hero-btns .maweb-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  width: auto;
}

/* --- section shell + shared type --- */
.nih-koszty-section { padding: clamp(56px, 8vh, 96px) 0; }
.nih-koszty-section--alt {
  background: var(--nih-bg);
  border-top: 1px solid var(--nih-border);
  border-bottom: 1px solid var(--nih-border);
}
.maweb-page.maweb-koszty h2.nih-koszty-h2 {
  color: var(--nih-text);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1.2px;
  margin: 0 0 28px;
  text-align: center;
}
.maweb-page.maweb-koszty h3.nih-koszty-h3 {
  color: var(--nih-text);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin: 0 0 10px;
}
/* `.maweb-wrapper` is `display:flex; flex-direction:column`, and a flex item with
   an auto cross-axis margin does not stretch — it shrinks to fit-content. Every
   centred block below therefore needs an explicit width, or it collapses to the
   width of its contents instead of filling out to its max-width. */
.nih-koszty-narrow { width: 100%; max-width: 820px; margin: 0 auto; }
.nih-koszty-p {
  color: var(--nih-muted);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  margin: 0 0 18px;
}
.nih-koszty-muted {
  color: var(--nih-muted);
  font-size: 15.5px;
  line-height: 1.62;
  margin: 0;
}
.nih-koszty-label {
  color: var(--nih-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin: 30px 0 14px;
}
/* sits under a centred h2 as a standalone line, so it centres too — unlike the
   problem-section label, which introduces a left-aligned list */
.nih-koszty-label--center { text-align: center; margin-top: 0; }

/* The FAQ reads as a centred column on this page. Two separate things have to be
   centred, and the block is the one that shows:
   1. the column itself — `.maweb-product .nih-faq { margin: 8px 0 0 }` is (0,2,0)
      and beat `.nih-koszty-narrow`'s `margin: 0 auto`, pinning the 820px column to
      the left of the 1100px wrapper. Restate it above that specificity.
   2. the text in each summary — the chevron is absolutely positioned, so the
      padding has to be symmetric or the text sits visibly off-centre. */
.maweb-koszty .nih-faq.nih-koszty-narrow { margin: 8px auto 0; }
.maweb-koszty .nih-faq-item > summary {
  padding-left: 54px;
  text-align: center;
}
/* answers sat almost flush to the card edge (22px) under a centred question —
   give them room to read as a block rather than as overflow of the summary */
.maweb-koszty .nih-faq-item p {
  padding: 4px 44px 26px;
  line-height: 1.68;
}
@media (max-width: 767.98px) {
  /* the base mobile rule drops padding-right to 46px — match it so the text
     stays centred rather than drifting 8px left */
  .maweb-koszty .nih-faq-item > summary { padding-left: 46px; }
  .maweb-koszty .nih-faq-item p { padding: 4px 22px 22px; }
}

/* --- problem: the four mid-month questions --- */
.nih-koszty-qlist { list-style: none; margin: 0; padding: 0; }
.nih-koszty-qlist li {
  position: relative;
  padding: 14px 18px 14px 46px;
  margin-bottom: 10px;
  border: 1px solid var(--nih-border);
  border-radius: 12px;
  background: var(--nih-surface);
  color: var(--nih-text);
  font-size: 15.5px;
  line-height: 1.55;
}
.nih-koszty-qlist li::before {
  content: "?";
  position: absolute;
  left: 18px;
  top: 14px;
  color: var(--nih-accent);
  font-weight: 800;
  font-size: 17px;
}

/* --- how it works: three numbered cards --- */
.nih-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.nih-how-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nih-how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--nih-accent-soft);
  border: 1px solid var(--nih-border-strong);
  color: var(--nih-accent);
  font-size: 15px;
  font-weight: 800;
}

/* --- pull quotes --- */
.nih-pullquote {
  width: 100%;
  max-width: 820px;
  margin: 34px auto 0;
  padding: 24px 28px;
  border: 0;
  border-left: 3px solid var(--nih-accent);
  border-radius: 0 14px 14px 0;
  background: var(--nih-accent-soft);
  color: var(--nih-muted);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.66;
}
.nih-pullquote strong { color: var(--nih-text); font-weight: 700; }

/* --- ekosystem: the doc asks for a visually distinct full-width band --- */
.nih-eco {
  background:
    radial-gradient(100% 130% at 50% 0%, rgba(165, 136, 255, 0.16), transparent 62%),
    var(--nih-bg);
  border-top: 1px solid var(--nih-border-strong);
  border-bottom: 1px solid var(--nih-border-strong);
  padding: clamp(64px, 9vh, 112px) 0;
}
.nih-eco-label { text-align: center; margin-top: 40px; }
.nih-eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.nih-eco-rel {
  padding: 24px;
  border: 1px solid var(--nih-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.maweb-page.maweb-koszty h3.nih-eco-rel-title {
  color: var(--nih-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px;
}
.nih-pullquote--eco { background: rgba(255, 255, 255, 0.05); }
.nih-eco-means-head { text-align: center; margin-top: 46px !important; }
.nih-eco-means {
  list-style: none;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.nih-eco-means li {
  padding: 20px 22px;
  border: 1px solid var(--nih-border);
  border-radius: 14px;
  background: var(--nih-surface);
  color: var(--nih-muted);
  font-size: 15px;
  line-height: 1.6;
}
.nih-eco-means li strong {
  display: block;
  margin-bottom: 6px;
  color: var(--nih-text);
  font-weight: 700;
}

/* --- features --- */
.nih-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
/* flex column so the worked example is pushed to the card's bottom edge and
   still lines up when the grid stretches cards to equal height */
.nih-feature-card { display: flex; flex-direction: column; }
.nih-feature-example {
  margin-top: auto;
  padding-top: 16px;
  padding: 16px 18px;
  border: 1px dashed var(--nih-border-strong);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}
.nih-feature-example p {
  margin: 0 0 8px;
  color: var(--nih-muted);
  font-size: 14px;
  line-height: 1.55;
}
.nih-feature-example p:last-child { margin-bottom: 0; }
.nih-feature-example p:nth-child(2) { color: var(--nih-accent); font-weight: 700; }

/* --- audience --- */
.nih-audience {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.nih-audience li {
  padding: 24px;
  border: 1px solid var(--nih-border);
  border-left: 3px solid var(--nih-accent);
  border-radius: 0 14px 14px 0;
  background: var(--nih-surface);
}
.nih-audience li strong {
  display: block;
  margin-bottom: 8px;
  color: var(--nih-text);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
}
.nih-audience li span { color: var(--nih-muted); font-size: 15px; line-height: 1.6; }

/* --- implementation steps --- */
.nih-steps {
  list-style: none;
  counter-reset: nih-koszty-step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.nih-steps li {
  counter-increment: nih-koszty-step;
  padding: 26px 24px 24px;
  border: 1px solid var(--nih-border);
  border-radius: 16px;
  background: var(--nih-surface);
}
.nih-steps li::before {
  content: counter(nih-koszty-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--nih-accent);
  color: #14102b;
  font-size: 14px;
  font-weight: 800;
}

/* --- roadmap: must scroll inside its own box, never the page --- */
.nih-roadmap-scroll {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--nih-border);
  border-radius: 16px;
  background: var(--nih-surface);
}
.nih-roadmap {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}
.nih-roadmap th,
.nih-roadmap td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--nih-border);
}
.nih-roadmap tbody tr:last-child td { border-bottom: 0; }
.nih-roadmap th {
  color: var(--nih-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.nih-roadmap td strong {
  display: block;
  color: var(--nih-text);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.nih-roadmap td span { color: var(--nih-muted); font-size: 14px; line-height: 1.5; }
.nih-roadmap td:last-child {
  color: var(--nih-accent);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.nih-roadmap-note { max-width: 900px; margin: 20px auto 0 !important; text-align: center; }

/* the CTA heading sits above the inherited .nih-product-cta-text */
.maweb-koszty .nih-product-cta-inner .nih-koszty-h2 { margin-bottom: 18px; }

@media (max-width: 767.98px) {
  .nih-koszty-section { padding: 48px 0; }
  .nih-eco { padding: 56px 0; }
  .nih-koszty-eyebrow { font-size: 11.5px; letter-spacing: 0.4px; }
  .nih-koszty-hero-btns { flex-direction: column; align-items: stretch; }
  .maweb-koszty .nih-koszty-hero-btns .maweb-btn,
  .maweb-koszty .nih-koszty-hero-btns .maweb-btn--primary {
    width: 100%;
    justify-content: center;
  }
  .nih-roadmap td:last-child { white-space: normal; }
}

/* =====================================================================
   SINGLE CASE STUDY (single-case_study.php)
   This template never got a dark pass, so it still carried the original
   light theme: `color: var(--primary-dark)` on the wrapper, a 154px pale
   pink spacer bar at the top, and pink borders on inline images.
   ===================================================================== */
.maweb-case-study-single { color: var(--nih-text); }

/* The empty section-one exists only to clear the fixed header (the wrapper
   sets `padding: 0`, cancelling .maweb-page's own padding-top). It was 154px
   of #efd3d7 — a pink band on a midnight page — and section-two then added
   another 100px on top, so the article started ~254px down. Make it the
   header clearance and nothing more. */
.maweb-case-study-single-section-one {
  height: var(--nih-header-bottom);
  background: transparent;
}
.maweb-case-study-single-section-two {
  margin-top: clamp(24px, 4vh, 44px);
  margin-bottom: clamp(56px, 8vh, 100px);
}
@media (max-width: 767.98px) {
  /* section-one is display:none here, so the clearance has to come from the
     margin instead */
  .maweb-case-study-single-section-two {
    margin-top: calc(var(--nih-header-bottom) + 20px);
    margin-bottom: 64px;
  }
}

/* article head: the title is an <h3>, and assets/css/style.css sets
   `.maweb-page h3 { color: var(--primary-dark) }` at (0,1,1) — that is the grey
   that disappeared into the background. */
.maweb-page .maweb-case-study-single-section-two-article-title {
  color: var(--nih-text);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1.1px;
  margin-bottom: 22px;
}
.maweb-case-study-single-section-two-article-image img {
  border: 1px solid var(--nih-border);
  background: var(--nih-surface);
}
.maweb-case-study-single-section-two-article-content img[class*="wp-image-"] {
  border-color: var(--nih-border);
}

/* body copy */
.maweb-case-study-single-section-two-article-content {
  color: var(--nih-muted);
  font-size: 16.5px;
  line-height: 1.72;
}
.maweb-case-study-single-section-two-article-content p { margin: 0 0 18px; }
.maweb-page .maweb-case-study-single-section-two-article-content h3,
.maweb-page .maweb-case-study-single-section-two-article-content h4,
.maweb-page .maweb-case-study-single-section-two-article-content h5 {
  color: var(--nih-text);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin: 34px 0 12px;
}
.maweb-case-study-single-section-two-article-content strong { color: var(--nih-text); }
.maweb-case-study-single-section-two-article-content ul,
.maweb-case-study-single-section-two-article-content ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}
.maweb-case-study-single-section-two-article-content ul > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.maweb-case-study-single-section-two-article-content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nih-accent);
}
.maweb-page .maweb-case-study-single-section-two-article-content a { color: var(--nih-accent); }

/* author / date rail */
.maweb-case-study-single .maweb-case-study-section-two-article-author-name,
.maweb-case-study-single .maweb-case-study-section-two-article-author-name strong,
.maweb-case-study-single .maweb-case-study-section-two-article-author-date,
.maweb-case-study-single .maweb-case-study-section-two-article-author-date strong {
  color: var(--nih-muted);
}

/* =====================================================================
   TURNSTILE (footer contact form anti-spam)

   The widget is an iframe Cloudflare sizes itself, so this only handles
   placement and the error line beneath it. Sits between the message field
   and the submit row.
   ===================================================================== */
.nih-turnstile {
  margin: 18px 0 4px;
}

/* The mobile footer renders a second copy of the form; keep both centred the
   same way the submit button is. */
.footer-mobile .nih-turnstile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nih-turnstile .cf-turnstile {
  min-height: 65px;
}

.nih-turnstile-error {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #ff9d9d;
}

.nih-turnstile-error[hidden] {
  display: none;
}