/* =========================================================
   Bziom, motyw autorski
   Kierunek: Grafit i Zielen Butelkowa
   Mobile first. Wszystkie wartosci pochodza z DESIGN.md.
   ========================================================= */

/* ---------- 1. Kroje pisma, self-hosted ---------- */

@font-face {
  font-family: "Libre Bodoni";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/librebodoni-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Bodoni";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/librebodoni-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Bodoni";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/librebodoni-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Bodoni";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/librebodoni-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Tokeny ---------- */

:root {
  --bg: #F2F1EF;
  --surface: #FFFFFF;
  --graphite: #232629;
  --ink: #14161A;
  --muted: #6F747A;
  --line: #DDDCD8;
  --accent: #1F4A3D;
  --accent-soft: #E4E9E4;

  --font-display: "Libre Bodoni", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;

  --gutter: 16px;
  --wrap: 1240px;
  --section: clamp(64px, 9vw, 144px);
  --header-h: 78px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 100px; }
}

/* ---------- 3. Reset, neutralny wobec komponentow ---------- */

*, *::before, *::after { box-sizing: border-box; }

:where(html) {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

:where(body) {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(img, picture, svg, video) { display: block; max-width: 100%; height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(button) { background: none; border: 0; cursor: pointer; }
:where(blockquote, figure) { margin: 0; padding: 0; border: 0; }
:where(table) { border-collapse: collapse; width: 100%; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-graphite :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-pill);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

.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;
}

/* ---------- 4. Uklad ---------- */

.wrap {
  width: min(var(--wrap), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.62); }
.section--flush-top { padding-top: 0; }

.on-graphite {
  background: var(--graphite);
  color: var(--bg);
}
.on-graphite .lede, .on-graphite .muted { color: color-mix(in srgb, var(--bg) 62%, var(--graphite)); }

/* ---------- 5. Typografia ---------- */

.display, h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.t-hero {
  font-size: clamp(40px, 11.5vw, 92px);
  line-height: 0.98;
}
.t-h2 {
  font-size: clamp(30px, 6vw, 56px);
  line-height: 1.04;
}
.t-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.display em, .t-hero em, .t-h2 em {
  font-style: italic;
  font-weight: 600;
  line-height: 1.14;
  display: inline-block;
  padding-bottom: 0.04em;
}

.lede {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

.body-copy { max-width: 66ch; }
.body-copy p + p { margin-top: 1.1em; }

.muted { color: var(--muted); }

.label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-sm);
  margin-bottom: 24px;
}
.on-graphite .rule { background: color-mix(in srgb, var(--accent) 52%, var(--bg)); }

/* Duza liczba, sygnatura strony */
.num {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.92;
  letter-spacing: -0.012em;
  display: block;
}

/* ---------- 6. Przyciski ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }

.btn--ghost { border: 1px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

.on-graphite .btn--ghost { border-color: color-mix(in srgb, var(--bg) 45%, transparent); color: var(--bg); }
.on-graphite .btn--ghost:hover { background: var(--bg); color: var(--graphite); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--accent-soft); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-row .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .btn-row .btn { flex: 0 0 auto; } }

/* Link tekstowy z podkresleniem w akcencie */
.link-u {
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease);
}
.link-u:hover { color: var(--accent); }
.on-graphite .link-u { border-bottom-color: color-mix(in srgb, var(--accent) 52%, var(--bg)); }
.on-graphite .link-u:hover { color: color-mix(in srgb, var(--accent) 34%, var(--bg)); }

/* ---------- 7. Naglowek ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 241, 239, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.site-header__inner {
  transition: min-height 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img {
  height: 48px;
  width: auto;
  /* Plik logo jest bialy, wiec domyslnie przebarwiamy go na kolor tekstu. */
  filter: brightness(0) invert(0.08);
  transition: height 0.3s var(--ease), filter 0.3s var(--ease);
}
@media (min-width: 768px) {
  .brand img { height: 62px; }
  /* Naglowek osiada po przewinieciu, logo zmniejsza sie razem z nim. */
  .site-header.is-stuck .site-header__inner { min-height: 76px; }
  .site-header.is-stuck .brand img { height: 46px; }
}

.brand__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: 30px; }
  .nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    padding: 6px 0;
    position: relative;
  }
  .nav a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.28s var(--ease);
  }
  .nav a:hover::after,
  .nav .current-menu-item > a::after { transform: scaleX(1); }
}

.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; min-height: 46px; padding: 11px 24px; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-toggle__bars { display: block; width: 22px; height: 12px; position: relative; }
.nav-toggle__bars i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { bottom: 0; }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* Panel mobilny */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 55;
  background: var(--bg);
  padding: 8px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1024px) { .drawer { display: none; } }

.drawer a.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.01em;
}
.drawer a.drawer__link span { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.drawer__foot { margin-top: 32px; display: grid; gap: 12px; }

/* Pasek kontaktowy na mobile */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}
.callbar.is-visible { transform: none; }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px; padding: 8px 12px;
  font-size: 15px; font-weight: 600;
  background: var(--bg);
}
.callbar a.is-primary { background: var(--accent); color: #fff; }
.callbar svg { width: 17px; height: 17px; }
@media (min-width: 1024px) { .callbar { display: none; } }
body.has-callbar { padding-bottom: 0; }
@media (max-width: 1023px) { body.has-callbar { padding-bottom: 59px; } }

/* ---------- 8. Hero pelnoekranowe ---------- */

.hero { position: relative; }

.hero--cover {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 22%;
}

/* Przyciemnienie kierunkowe. Na mobile od dolu, na desktopie od lewej. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--graphite) 66%, transparent) 0%,
      color-mix(in srgb, var(--graphite) 24%, transparent) 14%,
      transparent 28%
    ),
    linear-gradient(
    to top,
    color-mix(in srgb, var(--graphite) 95%, transparent) 0%,
    color-mix(in srgb, var(--graphite) 86%, transparent) 26%,
    color-mix(in srgb, var(--graphite) 42%, transparent) 56%,
    color-mix(in srgb, var(--graphite) 22%, transparent) 78%,
    color-mix(in srgb, var(--graphite) 40%, transparent) 100%
    );
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(44px, 7vw, 96px);
}

.hero__content { max-width: 640px; }

.hero--cover .t-hero {
  font-size: clamp(32px, 5.6vw, 66px);
  line-height: 1.02;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.mark svg { width: 16px; height: 16px; }

/* Wersja powiekszona, do naglowka podstrony. */
.mark--lg {
  padding: 8px 19px 8px 14px;
  font-size: clamp(12.5px, 1.15vw, 14px);
  letter-spacing: 0.02em;
  gap: 10px;
}
.mark--lg svg { width: 17px; height: 17px; }
.mark--lg strong { font-weight: 700; letter-spacing: 0.06em; }

.hero__title { margin-bottom: clamp(18px, 2.4vw, 24px); }
.hero__lede { margin-bottom: clamp(26px, 3.4vw, 36px); max-width: 52ch; }

@media (min-width: 900px) {
  .hero--cover { align-items: center; }
  .hero__media img { object-position: 76% 24%; }
  .hero__media::after {
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--graphite) 62%, transparent) 0%,
        color-mix(in srgb, var(--graphite) 20%, transparent) 15%,
        transparent 30%
      ),
      linear-gradient(
      to right,
      color-mix(in srgb, var(--graphite) 94%, transparent) 0%,
      color-mix(in srgb, var(--graphite) 86%, transparent) 28%,
      color-mix(in srgb, var(--graphite) 46%, transparent) 52%,
      color-mix(in srgb, var(--graphite) 8%, transparent) 76%,
      transparent 100%
      );
  }
}

@media (min-width: 1280px) {
  .hero__content { max-width: 700px; }
}

/* Naglowek lezy na zdjeciu, dopoki strona nie zostanie przewinieta. */
.site-header--over:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  color: var(--bg);
}
.site-header--over:not(.is-stuck) .nav a,
.site-header--over:not(.is-stuck) .nav-toggle,
.site-header--over:not(.is-stuck) .brand__text { color: var(--bg); }
.site-header--over:not(.is-stuck) .nav-toggle__bars i { background: var(--bg); }
.site-header--over:not(.is-stuck) .brand img { filter: brightness(0) invert(1); }
/* W stopce tlo jest grafitowe, wiec biale logo zostaje bez zmian. */
.site-footer__brand img { filter: none; }
.site-header--over:not(.is-stuck) .nav a::after { background: var(--bg); }
/* ---------- 9. Pas liczb ---------- */

.stats { display: grid; gap: 0; }
.stats__item {
  padding-block: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stats__item:first-child { border-top: 0; padding-top: 0; }
.stats__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.stats .num { font-size: clamp(48px, 13vw, 74px); white-space: nowrap; }
.stats__caption { font-size: 15px; color: var(--muted); margin-top: -2px; }
.on-graphite .stats__caption { color: color-mix(in srgb, var(--bg) 62%, var(--graphite)); }
.stats .num--long { font-size: clamp(32px, 8.4vw, 50px); letter-spacing: -0.03em; }
.stats__text { font-size: 15.5px; color: var(--muted); max-width: 38ch; }

@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 3.4vw, 56px); }
  .stats__item {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--line);
    padding-left: clamp(22px, 2.4vw, 40px);
  }
  .stats__item:first-child { border-left: 0; padding-left: 0; }
  .stats .num { font-size: clamp(54px, 5vw, 76px); }
  .stats .num--long { font-size: clamp(34px, 3.1vw, 48px); }
}

.on-graphite .stats__item { border-color: color-mix(in srgb, var(--bg) 16%, transparent); }
.on-graphite .stats__text { color: color-mix(in srgb, var(--bg) 62%, var(--graphite)); }
.on-graphite .stats__eyebrow { color: color-mix(in srgb, var(--accent) 52%, var(--bg)); }
/* ---------- 10. Sekcja o mnie ---------- */

.about__grid { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: start; gap: clamp(48px, 6vw, 88px); }
}

.about__figure { position: relative; }
.about__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--line) 0%, color-mix(in srgb, var(--line) 72%, var(--graphite)) 100%);
}
@media (max-width: 767px) {
  .about__figure { width: 100vw; margin-left: calc(50% - 50vw); }
  .about__figure img { border-radius: 0; aspect-ratio: 1 / 1; }
}

.about__body { }
.about__body .t-h2 { margin-bottom: clamp(20px, 2.6vw, 28px); }
.about__sign {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.about__sign strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
}

/* ---------- 11. Segmenty klientow ---------- */

.segments { display: grid; gap: 0; }
.segment {
  padding-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
@media (min-width: 860px) {
  .segment {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
}
.segment__title { }
.segment__text { color: var(--muted); font-size: 16px; max-width: 60ch; }
.segments__foot { border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 38px); }

/* ---------- 12. Oferta ---------- */

.offer { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 860px) { .offer { grid-template-columns: repeat(2, 1fr); } }

.offer__item {
  background: var(--bg);
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.3s var(--ease);
}
.offer__item:hover { background: var(--surface); }
.offer__item .t-h3 { display: flex; align-items: baseline; gap: 12px; }
.offer__text { color: var(--muted); font-size: 16px; flex: 1 1 auto; }
.offer__more {
  font-size: 14px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 7px;
}
.offer__item:hover .offer__more svg { transform: translateX(3px); }
.offer__more svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }

/* ---------- 13. Zasady ---------- */

.principles { display: grid; gap: 0; counter-reset: none; }
.principle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 18px;
  border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.45;
}
.principle:first-child { border-top: 0; }
.principle svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 5px; color: color-mix(in srgb, var(--accent) 52%, var(--bg)); }
@media (min-width: 860px) {
  .principles { grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 4vw, 72px); }
  .principle:nth-child(2) { border-top: 0; }
}

/* ---------- 14. Opinie ---------- */

.reviews__head { display: grid; gap: 24px; margin-bottom: clamp(32px, 4vw, 52px); }
@media (min-width: 900px) {
  .reviews__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
}
.rating {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.rating__score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 42px;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.rating__meta { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.rating__stars { display: flex; gap: 2px; color: var(--accent); margin-bottom: 3px; }
.rating__stars svg { width: 14px; height: 14px; }

/* ---------- 15. Partnerzy ---------- */

.logos__row { display: grid; gap: clamp(24px, 3.4vw, 40px); }
.logos__head { padding-inline: var(--gutter); }
.logos__head .t-h2 { margin-bottom: 12px; }
.logos__head p { max-width: 32ch; font-size: 15.5px; color: var(--muted); }
.on-graphite .logos__head p { color: color-mix(in srgb, var(--bg) 62%, var(--graphite)); }

@media (min-width: 900px) {
  .logos__row {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(36px, 4vw, 72px);
    padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  }
  .logos__head { padding-inline: 0; }
}

.marquee {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; }
.marquee.is-dragging img { pointer-events: none; }

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  width: max-content;
  padding-block: 8px;
}

.marquee__track img {
  flex: 0 0 auto;
  height: clamp(94px, 10.5vw, 132px);
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.94;
  transition: opacity 0.3s var(--ease);
  -webkit-user-drag: none;
  user-select: none;
}
.marquee__track img:hover { opacity: 1; }

@media (max-width: 899px) {
  .marquee__track { padding-left: var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { cursor: default; }
}
/* ---------- 16. Pas zamykajacy ---------- */

.cta-band__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1024px) {
  .cta-band__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(48px, 6vw, 96px); }
}
.cta-band .t-h2 { margin-bottom: 18px; }
.cta-band__phone {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 6.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  border-bottom: 1px solid color-mix(in srgb, var(--bg) 35%, transparent);
  padding-bottom: 6px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.cta-band__phone:hover { color: color-mix(in srgb, var(--accent) 34%, var(--bg)); border-bottom-color: color-mix(in srgb, var(--accent) 52%, var(--bg)); }

/* ---------- 17. Stopka ---------- */

.site-footer { background: var(--graphite); color: var(--bg); }
.site-footer a { color: inherit; }
.site-footer__top {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  padding-block: clamp(48px, 6vw, 88px);
}
@media (min-width: 860px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
}
.site-footer__brand img { height: clamp(96px, 12vw, 150px); width: auto; margin-bottom: 28px; }
.site-footer p, .site-footer li { color: color-mix(in srgb, var(--bg) 62%, var(--graphite)); font-size: 15px; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); margin-bottom: 16px;
}
.site-footer ul { display: grid; gap: 10px; }
.site-footer ul a { transition: color 0.2s var(--ease); }
.site-footer ul a:hover { color: #fff; }
.site-footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: color-mix(in srgb, var(--bg) 48%, var(--graphite));
}

/* ---------- 18. Formularz ---------- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
}

/* ---------- 19. Tresc wpisu ---------- */

.prose { max-width: 68ch; font-size: 18px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; margin-top: 1.8em; }
.prose h3 { font-weight: 600; font-size: clamp(19px, 2.2vw, 23px); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.45em; }
.prose a { border-bottom: 1px solid var(--accent); font-weight: 500; }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 22px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.35;
}
.prose img { border-radius: var(--r-md); }

/* ---------- 20. Karty wpisow ---------- */

.posts { display: grid; gap: clamp(28px, 3.4vw, 48px); }
@media (min-width: 700px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .posts { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.post-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--line) 0%, color-mix(in srgb, var(--line) 72%, var(--graphite)) 100%);
}
.post-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__meta { font-size: 13px; color: var(--muted); }
.post-card .t-h3 { transition: color 0.25s var(--ease); }
.post-card:hover .t-h3 { color: var(--accent); }
.post-card p { font-size: 15.5px; color: var(--muted); }
/* ---------- 21. Naglowek podstrony ---------- */

.page-hero { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(32px, 4vw, 56px); }
.page-hero .t-hero { font-size: clamp(36px, 8.4vw, 76px); }
.breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: clamp(20px, 2.6vw, 28px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs svg { width: 11px; height: 11px; opacity: 0.6; }

/* ---------- 22. Ruch ---------- */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .partners__track { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- 23. Menu rozwijane ---------- */

@media (min-width: 1024px) {
  .nav__item { position: relative; }
  .nav__item--has-children > a { display: inline-flex; align-items: center; gap: 6px; }
  .nav__item--has-children > a svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform 0.25s var(--ease); }
  .nav__item--has-children:hover > a svg,
  .nav__item--has-children:focus-within > a svg { transform: rotate(-90deg); }

  .subnav {
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 300px;
    padding: 10px;
    margin-top: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 8px 28px rgba(20, 22, 26, 0.07);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  }
  .nav__item--has-children:hover .subnav,
  .nav__item--has-children:focus-within .subnav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .subnav a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    font-size: 15px;
    transition: background-color 0.2s var(--ease);
  }
  .subnav a::after { content: none; }
  .subnav a:hover { background: var(--accent-soft); color: var(--accent); }
}

.drawer__sub { padding: 4px 0 14px; display: grid; }
.drawer__sub a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
  font-size: 16px;
  color: var(--muted);
}
.drawer__sub a:hover { color: var(--accent); }

/* ---------- 24. Podstrona oferty ---------- */

.offer-hero__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1024px) {
  .offer-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(48px, 6vw, 88px); }
}
.offer-hero figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--line) 0%, color-mix(in srgb, var(--line) 72%, var(--graphite)) 100%);
}
@media (max-width: 1023px) {
  .offer-hero figure { width: 100vw; margin-left: calc(50% - 50vw); }
  .offer-hero figure img { border-radius: 0; }
}

.checklist { display: grid; gap: 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-block: 15px;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.5;
}
.checklist li:first-child { border-top: 0; }
.checklist svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
@media (min-width: 860px) {
  .checklist { grid-template-columns: repeat(2, 1fr); column-gap: clamp(28px, 4vw, 64px); }
  .checklist li:nth-child(2) { border-top: 0; }
}

.split { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
}

/* ---------- 25. FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span.faq__sign {
  flex: 0 0 auto;
  position: relative;
  width: 15px;
  height: 15px;
  margin-top: 5px;
}
.faq summary span.faq__sign::before,
.faq summary span.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq summary span.faq__sign::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.faq summary span.faq__sign::after { top: 0; bottom: 0; left: 6.75px; width: 1.5px; }
.faq details[open] summary span.faq__sign::after { transform: scaleY(0); opacity: 0; }
.faq__answer { padding-bottom: 24px; color: var(--muted); max-width: 66ch; }
.faq__answer p + p { margin-top: 0.9em; }

/* ---------- 26. Zespol ---------- */

.member { display: grid; gap: clamp(24px, 3vw, 44px); padding-block: clamp(36px, 4.4vw, 64px); border-top: 1px solid var(--line); }
.member:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .member { grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
  /* Odwrocony wiersz odwraca takze proporcje kolumn, zeby portret zachowal te sama szerokosc. */
  .member--flip { grid-template-columns: minmax(0, 0.64fr) minmax(0, 0.36fr); }
  .member--flip > figure { order: 2; }
}
.member figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--line) 0%, color-mix(in srgb, var(--line) 72%, var(--graphite)) 100%);
}
.member__role { font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block; }

/* ---------- 27. Kontakt ---------- */

.contact__grid { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 88px); align-items: start; }
}
.contact__list { display: grid; gap: 0; margin-top: clamp(24px, 3vw, 36px); }
.contact__list a, .contact__list div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
}
.contact__list svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }
.contact__list a:hover { color: var(--accent); }

/* Forminator w naszej skorze */
.form-card .forminator-ui { font-family: var(--font-body) !important; }
.form-card .forminator-input,
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card textarea {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  min-height: 50px;
  font-size: 16px !important;
  color: var(--ink) !important;
}
.form-card .forminator-input:focus,
.form-card textarea:focus { border-bottom-color: var(--accent) !important; box-shadow: none !important; }
.form-card .forminator-button-submit {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
  min-height: 52px !important;
  padding: 14px 30px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
/* ---------- 28. Ikony liniowe ---------- */

:where(svg[aria-hidden="true"]) {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.btn { white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* ---------- 29. Hero podstrony ---------- */

.hero--page { min-height: min(78svh, 780px); }
.hero--page .t-hero { font-size: clamp(30px, 4.8vw, 58px); }
.on-graphite .breadcrumbs { color: color-mix(in srgb, var(--bg) 60%, var(--graphite)); }
.on-graphite .breadcrumbs a:hover { color: var(--bg); }
.hero--cover .breadcrumbs { margin-bottom: clamp(16px, 2vw, 22px); }