/* ==========================================================================
   Aura Care B2B — arkusz stylów
   Zaimplementowany z projektu "Aura Care B2B.dc.html" (Claude Design).
   Tokeny, komponenty i responsywność (breakpointy 1080 / 860 / 600 px).
   ========================================================================== */

/* --- Tokeny ------------------------------------------------------------- */
:root {
  --bg:        #F4F1EB;
  --bg-sand:   #EAE5DB;
  --bg-white:  #FFFFFF;
  --ink:       #171614;
  --ink-soft:  #3D3934;
  --muted:     #5F5B54;
  --muted-2:   #6E6A63;
  --dim:       #8A8377;
  --line:      #E1DCD2;
  --line-2:    #D5CFC4;
  --line-3:    #CFC8BB;
  --hair:      #EFEBE3;

  --red:       #A82820;
  --red-ink:   #FDF6F2;
  --red-soft:  #F4CFC9;
  --red-dim:   #F0B7AF;
  --red-line:  #EFAFA6;

  --gold:      #D9A21B;
  --gold-soft: #F0C24A;   /* jasniejsze zloto — ikony na czerwonym tle */
  --sage:      #8FA98C;
  --clay:      #C9564B;
  --bronze:    #B39B7D;

  --dark:      #171614;
  --dark-card: #1D1B18;
  --dark-line: #33302B;
  --dark-line-2:#3D3934;
  --dark-text: #CFC8BB;
  --dark-mute: #A39B90;
  --dark-dim:  #7A736A;
  --dark-dim-2:#6D665E;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans:  'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap:  1240px;
  --pad:   40px;

  /* Wspolna skala duzych naglowkow (h1 w hero + naglowki sekcji) */
  --h-display: 70px;
  --h-contents: 52px;      /* "CO ZNAJDZIESZ W ŚRODKU?" — ustawiane inline przez var() */
  --h-related: 40px;       /* "Może zainteresować Cię również" */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: var(--red); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--ink); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; margin: 0; }

p { margin: 0; text-wrap: pretty; }

input, textarea, select, button { font-family: var(--sans); font-size: 16px; }
input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--ink) !important; }
::placeholder { color: var(--dim); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.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;
}

/* Poziomy scroll z dyskretnym paskiem */
.hscroll { -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { height: 4px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--line-3); }
.hscroll::-webkit-scrollbar-track { background: transparent; }

/* --- Typografia pomocnicza ---------------------------------------------- */
.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em;
  color: var(--red); text-transform: uppercase;
}
.label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--dim);
  text-transform: uppercase;
}
.mono {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--dim);
  text-transform: uppercase;
}
.lead { font-size: 17px; line-height: 1.6; color: var(--muted); }

/* --- Przyciski ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 18px 30px; transition: background .18s ease, color .18s ease, border-color .18s ease;
  text-align: center;
}
.btn--dark    { background: var(--ink); color: var(--bg); }
.btn--dark:hover    { background: var(--red); color: #FFF; }
.btn--red     { background: var(--red); color: #FFF; }
.btn--red:hover     { background: var(--ink); color: #FFF; }
.btn--ghost   { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover   { background: var(--ink); color: var(--bg); }
.btn--light   { background: var(--red-ink); color: var(--red); }
.btn--light:hover   { background: var(--ink); color: var(--red-ink); }
.btn--sm { padding: 14px 24px; font-size: 12px; }
.btn--block { width: 100%; }

/* Okrągłe strzałki nawigacji */
.nav-dot {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-3);
  background: transparent; cursor: pointer; font-size: 15px; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav-dot:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav-dot[disabled] { opacity: .3; cursor: default; }
.nav-dot[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--line-3); }

/* --- Pasek zapowiedzi --------------------------------------------------- */
.topbar { background: var(--dark); color: #E4DFD5; overflow: hidden; }
.topbar__inner { height: 42px; display: flex; align-items: center; }
.topbar__track { display: flex; flex: 1; min-width: 0; }
.topbar__set {
  display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 24px;
}
/* Drugi komplet jest potrzebny wylacznie do petli na mobile. */
.topbar__set[aria-hidden] { display: none; }
.topbar__item {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: .02em;
  white-space: nowrap;
}
.topbar__item i { font-style: normal; }
.topbar__item--star i { color: var(--gold); font-size: 11px; }
.topbar__item--spark i { color: var(--clay); font-size: 13px; }
.topbar__item--back i { color: var(--sage); font-size: 13px; }

/* --- Nagłówek ----------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 241, 235, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner { height: 76px; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand img { width: 46px; height: 46px; }
.brand__tag {
  font-size: 8.5px; letter-spacing: .34em; color: var(--dim);
  border-left: 1px solid #DDD7CB; padding-left: 12px; line-height: 1.7; max-width: 78px;
}
.nav { display: flex; gap: 30px; margin-left: 16px; }
.nav a { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; color: var(--ink); }
.nav a:hover { color: var(--red); }
.nav a.is-active { color: var(--red); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.phone { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.phone:hover { color: var(--red); }
.phone i {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; flex-shrink: 0;
  transition: background .18s ease;
}
.phone i svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.phone:hover i { background: var(--red); }
.back-link {
  margin-left: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; color: var(--ink);
}
.back-link:hover { color: var(--red); }
.burger {
  display: none; order: 3;                 /* odstep robi juz .header__actions */
  width: 42px; height: 42px; padding: 0; border: 1.5px solid var(--ink);
  border-radius: 50%; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: background .18s ease, border-color .18s ease;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.burger:hover { background: var(--ink); border-color: var(--ink); }
.burger:hover span { background: var(--bg); }
.burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.burger[aria-expanded="true"] span { background: var(--bg); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Przypięty pasek CTA (tylko mobile) -------------------------------- */
.sticky-cta { display: none; }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-top: 72px; }
.hero__grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 64px; align-items: center; }
.hero h1 { font-size: 70px; line-height: .98; margin: 26px 0; }
.hero__lead {
  font-size: 18px; line-height: 1.6; color: var(--muted); margin-bottom: 12px; max-width: 520px;
}
.hero__cta { display: flex; gap: 12px; margin: 38px 0; flex-wrap: wrap; }
.hero__usp {
  display: flex; gap: 26px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 26px;
}
.hero__usp div { font-size: 13.5px; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stats__cell { background: var(--bg); padding: 16px 16px 17px; }
.stats__num { font-family: var(--serif); font-size: 24px; line-height: 1; margin-bottom: 7px; }
.stats__row { display: flex; align-items: baseline; gap: 7px; margin-bottom: 7px; flex-wrap: wrap; }
.stats__stars { color: var(--gold); font-size: 10px; letter-spacing: .1em; }
.stats__cap { font-size: 12.5px; line-height: 1.45; color: var(--muted-2); }

/* Karuzela hero */
.hero__media { position: relative; height: 600px; overflow: hidden; background: var(--bg-sand); }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__bar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  background: linear-gradient(to top, rgba(23,22,20,.55), rgba(23,22,20,0));
}
.dots { display: flex; gap: 7px; flex-wrap: wrap; }
.dots button {
  width: 9px; height: 9px; border-radius: 999px; border: none; cursor: pointer; padding: 0;
  background: rgba(244,241,235,.45); transition: width .25s ease, background .25s ease;
}
.dots button.is-active { width: 26px; background: var(--bg); }
.hero__arrows { display: flex; gap: 8px; }
.hero__arrows button {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(244,241,235,.9); font-size: 15px; color: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: background .18s ease;
}
.hero__arrows button:hover { background: #FFF; }

/* --- Sekcje ------------------------------------------------------------- */
.section { padding-top: 88px; padding-bottom: 88px; }
.section--tight {
  /* 76 + 20px wlasnego paddingu railu = 96px widocznego odstepu nad boksem,
     czyli tyle samo co pod nim. Mobile ma wlasne wartosci w media query. */
  padding-top: 76px; padding-bottom: 96px;
}
.section--flush-bottom { padding-bottom: 0; }
.section h2 { font-size: 54px; line-height: 1.02; margin-bottom: 44px; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 44px;
}
.section__head h2 { font-size: 58px; line-height: 1; margin-bottom: 18px; }
.section__head p { max-width: 640px; }
.section__head-text { max-width: 700px; }

/* Filary "dlaczego" */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.pillar { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.pillar svg {
  width: 52px; height: 52px; fill: none; stroke: var(--bronze);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pillar__t { font-size: 13px; font-weight: 700; letter-spacing: .09em; margin-bottom: 10px; }
.pillar__d { font-size: 15px; line-height: 1.55; color: var(--muted-2); }

/* --- Katalog boxów ------------------------------------------------------ */
.rail {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 20px;
}
.card {
  flex: 0 0 286px; scroll-snap-align: start; background: var(--bg-white);
  border: 1px solid var(--line); display: flex; flex-direction: column;
  color: var(--ink); transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.card__img { width: 100%; height: 218px; object-fit: cover; }
.card__body { padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__name { font-size: 15px; font-weight: 700; letter-spacing: .07em; }
.card__for { font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; color: var(--muted-2);
  border: 1px solid var(--line); padding: 5px 9px; border-radius: 2px;
}
.card__foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card__price { font-size: 14px; font-weight: 600; color: var(--ink); }
.card__price small { display: block; font-size: 11px; font-weight: 500; color: var(--dim); }
.card__more { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--red); white-space: nowrap; }

/* Siatka boxów (strona produktu / powiązane) */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-3 .card { flex: 1 1 auto; }

/* Katalog /boksy — wszystkie boxy naraz, kafelkami zamiast karuzeli.
   auto-fill + minmax: liczba kolumn wynika z dostępnej szerokości,
   nie z osobnego breakpointu na każdy układ. */
.grid-boxes {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
}
.grid-boxes .card { flex: 1 1 auto; max-width: none; }

/* Nagłówek strony katalogu. */
/* Naglowek katalogu ma jeden, staly rytm: ten sam odstep miedzy "KATALOG"
   a h1, miedzy h1 a leadem i miedzy leadem a siatka kafelkow. Jedna zmienna,
   zeby te trzy przerwy nie rozjechaly sie przy kolejnej korekcie. */
.catalog-head { --catalog-gap: 20px; padding-top: 56px; padding-bottom: var(--catalog-gap); }
.catalog-head .eyebrow { display: block; margin-bottom: var(--catalog-gap); }
.catalog-head .lead { max-width: 640px; margin-top: var(--catalog-gap); }
/* Sekcja z siatka nie dokłada wlasnego paddingu — odstep daje .catalog-head. */
section.catalog-grid { padding-top: 0; }
.crumbs { font-size: 12px; letter-spacing: .04em; color: var(--dim); margin-bottom: 22px; }
.crumbs a { color: var(--muted-2); }
.crumbs a:hover { color: var(--red); }
.crumbs span[aria-hidden] { padding: 0 6px; color: var(--line-3); }

/* --- Podziekowanie po wyslaniu formularza -------------------------------- */
.thanks { padding-top: 96px; padding-bottom: 120px; max-width: 720px; }
.thanks .lead { margin-top: 20px; }
.thanks__note { margin-top: 18px; font-size: 15.5px; color: var(--muted-2); }
.thanks__note a { color: var(--red); font-weight: 600; }
.thanks__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* --- Regulamin / strony prawne ------------------------------------------ */
.legal { padding-top: 88px; padding-bottom: 120px; max-width: 860px; }
.legal .lead { margin-top: 20px; max-width: 680px; }

.legal__toc { margin-top: 48px; padding: 28px 30px; background: var(--bg-white); border: 1px solid var(--line); border-radius: 4px; }
.legal__toc .footer__col-t { color: var(--dim); margin-bottom: 14px; }
.legal__toc-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 32px; }
.legal__toc-links a { font-size: 15px; color: var(--ink-soft); line-height: 1.4; }
.legal__toc-links a:hover { color: var(--red); }
.legal__toc-links span { color: var(--dim); font-variant-numeric: tabular-nums; margin-right: 6px; }

.legal__sec { margin-top: 56px; scroll-margin-top: 96px; }
.legal__h {
  font-family: var(--serif); font-size: 28px; line-height: 1.2; letter-spacing: -.01em;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.legal__num { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; color: var(--red); margin-bottom: 8px; }

.legal__list { counter-reset: ust; list-style: none; margin-top: 22px; }
.legal__list > li {
  counter-increment: ust; position: relative; padding-left: 40px; margin-top: 18px;
  font-size: 16px; line-height: 1.68; color: var(--ink-soft);
}
.legal__list > li::before {
  content: counter(ust) "."; position: absolute; left: 0; top: 0;
  font-size: 13px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.legal__sub { counter-reset: pkt; list-style: none; margin-top: 12px; }
.legal__sub > li {
  counter-increment: pkt; position: relative; padding-left: 32px; margin-top: 10px;
  font-size: 15.5px; color: var(--muted);
}
.legal__sub > li::before {
  content: counter(pkt, lower-alpha) ")"; position: absolute; left: 0; top: 0;
  font-size: 13px; font-weight: 600; color: var(--dim);
}

.legal__intro { margin-top: 22px; font-size: 16px; line-height: 1.68; color: var(--ink-soft); }
.legal__intro + .legal__list { margin-top: 14px; }

.legal__group { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.legal__group:first-of-type { border-top: 0; }
.legal__g-h { font-size: 17px; font-weight: 600; line-height: 1.4; display: flex; gap: 12px; align-items: baseline; }
.legal__g-h span {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: var(--red-ink);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(2px);
}
.legal__dl { margin-top: 12px; padding-left: 36px; }
.legal__row { display: grid; grid-template-columns: 190px 1fr; gap: 4px 20px; margin-top: 8px; }
.legal__row dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); padding-top: 4px; }
.legal__row dd { font-size: 15.5px; line-height: 1.62; color: var(--muted); }

.legal__related { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.legal__related a { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.legal__contact { margin-top: 64px; padding: 26px 30px; background: var(--bg-sand); border-radius: 4px; }
.legal__contact-t { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--dim); margin-bottom: 12px; }
.legal__contact p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.legal__contact a { font-weight: 600; }

/* --- Pasek doradcy ------------------------------------------------------ */
.advisor {
  background: var(--bg-sand); padding: 56px 40px;   /* naglowek ma 70px — 36px bylo za ciasne */
  display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.advisor__text { max-width: 560px; }
.advisor__title { font-family: var(--serif); font-size: 32px; margin-bottom: 10px; letter-spacing: -.01em; }
.advisor__text p { font-size: 16px; line-height: 1.55; color: var(--muted); margin-bottom: 22px; }
.advisor__card {
  flex-shrink: 0; background: var(--bg-white); border: 1px solid var(--line);
  padding: 16px; display: flex; align-items: center; gap: 20px; border-radius: 4px;
}
.advisor__photo {
  width: 104px; height: 118px; object-fit: cover; object-position: center;
  border-radius: 3px; background: var(--bg-sand); flex-shrink: 0;
}
.advisor__name { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.advisor__role { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--dim); margin-bottom: 16px; }
.advisor__btn {
  display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--bg);
  padding: 12px 16px; border-radius: 3px; font-size: 13px; font-weight: 600;
  white-space: nowrap;                      /* etykieta ma zostac w jednej linii */
  transition: background .18s ease, color .18s ease;
}
.advisor__btn:hover { background: var(--red); color: #FFF; }
.advisor__btn span { margin-left: auto; color: rgba(244,241,235,.55); }

/* --- Dla kogo ----------------------------------------------------------- */
.audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.audience__item { border-top: 2px solid var(--ink); padding-top: 22px; }
.audience__t { font-size: 13px; font-weight: 700; letter-spacing: .09em; margin-bottom: 12px; }
.audience__d { font-size: 15.5px; line-height: 1.55; color: var(--muted-2); }

/* --- Personalizacja (czerwona) ------------------------------------------ */
.perso { background: var(--red); color: var(--red-ink); }
.perso__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.perso .eyebrow { color: var(--red-dim); }
.perso h2 { font-size: 52px; line-height: 1.02; margin: 24px 0 22px; }
.perso__lead { font-size: 17px; line-height: 1.6; color: var(--red-soft); max-width: 480px; margin-bottom: 36px; }
.perso__list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-bottom: 40px; }
.perso__item { display: flex; align-items: center; gap: 14px; font-size: 15.5px; }
.perso__item svg {
  width: 30px; height: 30px; flex-shrink: 0; fill: none; stroke: var(--gold-soft);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.perso__media img {
  width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover;
  object-position: center; border-radius: 4px;
}
.perso__cap { margin-top: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--red-line); }

/* --- Jak to działa ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 52px; }
.step { border-top: 1px solid var(--line-3); padding-top: 26px; }
.step__no { font-family: var(--serif); font-size: 52px; line-height: 1; color: var(--red); margin-bottom: 20px; }
.step__t { font-size: 14px; font-weight: 700; letter-spacing: .09em; margin-bottom: 12px; }
.step__d { font-size: 16px; line-height: 1.6; color: var(--muted-2); }

/* --- Formularz ---------------------------------------------------------- */
.quote { background: var(--bg-sand); }
.quote__inner { max-width: 920px; margin: 0 auto; padding: 96px var(--pad); }
.quote h2 { font-size: 60px; line-height: 1; margin: 20px 0 18px; }
.quote > .quote__inner > .lead { margin-bottom: 40px; }

.form { background: var(--bg-white); border: 1px solid var(--line); padding: 48px 52px 52px; }
.form--compact { padding: 34px 34px 36px; }
.form h2 { font-size: 34px; margin-bottom: 10px; }
.form__intro { font-size: 15.5px; line-height: 1.55; color: var(--muted-2); margin-bottom: 26px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.form__row--3 { grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 28px; }
.form--compact .form__row { gap: 22px 24px; }

.field { display: block; }
.field > span { display: block; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; border: none; border-bottom: 1px solid var(--line-2);
  background: transparent; padding: 10px 2px; font-size: 16px; color: var(--ink);
  border-radius: 0;
}
.form--compact .field input,
.form--compact .field textarea,
.form--compact .field select { font-size: 15.5px; padding: 9px 2px; }
.field textarea { resize: vertical; font-family: var(--sans); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 26px; color: var(--dim); }
.field select:valid, .field select.has-value { color: var(--ink); }
.select { position: relative; }
.select__arrow { position: absolute; right: 2px; top: 10px; pointer-events: none; font-size: 11px; color: var(--ink); }
.form--compact .select__arrow { top: 9px; }
.field--stack { margin-top: 28px; }

.check-group { margin-top: 28px; }
.check-group__t { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.check-group__d { font-size: 14px; color: var(--muted-2); margin-bottom: 16px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; }
.check {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.35;
}
.check input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; flex-shrink: 0; margin: 0; }
.check--consent { align-items: flex-start; margin-top: 30px; }
.check--consent span { font-size: 14.5px; color: var(--muted); }
.check-group--bordered { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hair); }

.form__submit { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.form__note { font-size: 14.5px; color: var(--muted-2); }
.form__note a { font-weight: 600; }
.form__status { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.form__status:empty { margin-top: 0; }
.form__status.is-ok { color: #2C6E49; font-weight: 600; }
.form__status.is-error { color: var(--red); }

/* Pulapka na boty. Musi byc realnie niewidoczna, ale nie przez display:none
   ani visibility:hidden — czesc botow pomija takie pola. Stad wyjazd poza
   ekran plus wylaczenie z tabulacji i z drzewa dostepnosci (aria-hidden). */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- Karta produktu ----------------------------------------------------- */
.product { padding-top: 44px; }
.product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.gallery { position: sticky; top: 110px; }
.gallery__main { position: relative; background: var(--bg-sand); }
.gallery__main img { width: 100%; height: 520px; object-fit: cover; }
.gallery__zoom {
  position: absolute; bottom: 14px; right: 14px; background: rgba(23,22,20,.8); color: var(--bg);
  font-size: 10.5px; letter-spacing: .1em; padding: 8px 12px; border-radius: 2px;
  border: none; cursor: pointer;
}
.gallery__thumbs { display: flex; gap: 10px; margin-top: 10px; }
.gallery__thumb {
  position: relative; flex: 1; cursor: pointer; padding: 0; border: none; background: none;
}
.gallery__thumb img { width: 100%; height: 82px; object-fit: cover; }
.gallery__thumb.is-active::after {
  content: ''; position: absolute; inset: 0; border: 2px solid var(--ink);
}

.product h1 { font-size: 62px; line-height: 1; margin: 18px 0 14px; }
.product__tagline {
  font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--red); margin-bottom: 18px;
}
.product__desc { font-size: 17px; line-height: 1.62; color: var(--muted); margin-bottom: 26px; }
.product__desc p + p { margin-top: 14px; }
.product__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; color: var(--ink);
  border: 1px solid var(--line-3); padding: 7px 11px;
}
.badge--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); font-size: 10.5px; padding: 9px 13px; }

.price {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 0; margin-bottom: 32px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.price__label { font-size: 12px; letter-spacing: .1em; color: var(--dim); }
.price__gross { font-family: var(--serif); font-size: 30px; }
.price__net { font-size: 13px; color: var(--dim); }

.contact-strip {
  margin-top: 18px; background: var(--bg-sand); padding: 26px 30px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.contact-strip img {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center;
  flex-shrink: 0; background: var(--bg);
}
.contact-strip__t { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.contact-strip__phone {
  font-family: var(--serif); font-size: 27px; color: var(--ink); display: block; line-height: 1.1;
}
.contact-strip__d { font-size: 13.5px; color: var(--muted-2); margin-top: 4px; }

/* Zawartość boxa */
.contents__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
.contents__list {
  display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.contents__item {
  background: var(--bg); padding: 22px 0;
  display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start;
}
.contents__no { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--red); padding-top: 3px; }
.contents__name { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.contents__desc { font-size: 15px; line-height: 1.55; color: var(--muted-2); }

.video-slot {
  position: relative; aspect-ratio: 9 / 16;      /* nagrania sa pionowe 540x960 */
  max-width: 400px;                              /* zeby przy 9:16 nie urosl na cala kolumne */
  background: repeating-linear-gradient(135deg, #E5DFD3 0, #E5DFD3 8px, #DCD5C7 8px, #DCD5C7 16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.video-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-slot__play {
  width: 64px; height: 64px; border-radius: 50%; background: var(--dark); color: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 18px; padding-left: 4px;
}
.video-slot__cap {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: #7E776B;
  text-align: center; line-height: 1.8;
}
.video-caption { margin-top: 14px; font-size: 14.5px; color: var(--muted-2); }

/* Dwie kolumny: dla kogo / dlaczego */
.split { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: start; }
.split h3 { font-size: 34px; line-height: 1.05; margin-bottom: 22px; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why__item { border-top: 2px solid var(--red); padding-top: 18px; }
.why__t { font-size: 13px; font-weight: 700; letter-spacing: .09em; margin-bottom: 10px; }
.why__d { font-size: 15px; line-height: 1.55; color: var(--muted-2); }

/* Pasek personalizacji na karcie */
.perso-strip {
  background: var(--bg-sand); padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.perso-strip__t { font-family: var(--serif); font-size: 30px; margin-bottom: 10px; letter-spacing: -.01em; }
.perso-strip p { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 700px; }

/* CTA na końcu karty */
.cta-dark {
  background: var(--dark); color: var(--bg); padding: 64px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 56px; flex-wrap: wrap;
}
.cta-dark h2 { font-size: 48px; line-height: 1.02; margin-bottom: 12px; }
.cta-dark p { font-size: 17px; color: var(--dark-mute); }
.cta-dark__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; flex-shrink: 0; }
.cta-dark__side > div { font-size: 15px; color: var(--dark-mute); }
.cta-dark__side a[href^="tel"] { color: var(--bg); font-weight: 600; }

/* --- Stopka ------------------------------------------------------------- */
.footer { background: var(--dark); color: var(--dark-text); }
.footer__grid {
  padding: 72px var(--pad) 40px; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  max-width: var(--wrap); margin: 0 auto;
}
.footer__logo {
  width: 64px; height: 64px; border-radius: 50%; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.footer__logo img { width: 58px; height: 58px; }
.footer__tag { font-size: 8.5px; letter-spacing: .34em; color: var(--dark-dim); margin-top: 14px; }
.footer__about { font-size: 15px; line-height: 1.6; margin-top: 22px; max-width: 300px; color: var(--dark-mute); }
.footer__col-t { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--dark-dim); margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer__links a, .footer__links span { color: var(--dark-text); }
.footer__links a:hover { color: #FFF; }
.footer__links span { color: var(--dark-dim); }
.footer__bottom { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) 44px; }
.footer__bottom > div {
  border-top: 1px solid var(--dark-line); padding-top: 22px; font-size: 12.5px; color: var(--dark-dim-2);
}
.footer__company {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px 40px; line-height: 1.75;
}
.footer__company strong { color: var(--dark-text); font-weight: 600; }
.footer__company a { color: var(--dark-text); }
.footer__company a:hover { color: #FFF; }
.footer__company + div { border-top: 0; padding-top: 16px; }
.footer__company--4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer__docs a { display: inline-block; }
.footer--slim .footer__bottom { padding-bottom: 40px; }

.footer--slim { border-top: 1px solid var(--dark-line); }
.footer--slim .footer__grid {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px var(--pad);
}
.footer--slim .footer__logo { width: 52px; height: 52px; }
.footer--slim .footer__logo img { width: 47px; height: 47px; }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(23,22,20,.92);
  display: none; align-items: center; justify-content: center; padding: 40px;
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 24px; right: 28px; background: none; border: none;
  color: var(--bg); font-size: 28px; cursor: pointer; line-height: 1;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: var(--bg); font-size: 32px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__count {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  color: var(--bg); font-size: 13px; letter-spacing: .06em; opacity: .8;
}
@media (max-width: 860px) {
  .lightbox { padding: 20px; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 26px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* --- Odstępy między sekcjami ------------------------------------------- */
/* DESKTOP: wartości oryginalne — nie ruszamy ich przy pracach nad mobile.
   Cały ciasny rytm 40 px żyje wyłącznie w media query poniżej 860 px. */
section.sec-why        { padding-top: 88px; padding-bottom: 88px; }
section.sec-catalog    { padding-top: 96px; }
section.sec-contents   { padding-top: 96px; }
section.sec-perso-strip{ padding-top: 88px; }
section.sec-related    { padding-top: 96px; }

/* --- Wspólna skala nagłówków ------------------------------------------- */
/* Jedna zmienna steruje h1 w hero i dużymi nagłówkami sekcji na landingu.
   MUSI stać na końcu stylów bazowych — .perso h2 / .quote h2 / .section__head h2
   mają tę samą specyficzność, więc decyduje kolejność w pliku. */
h1.h-display, h2.h-display, div.h-display {
  font-size: var(--h-display);
  line-height: 1;
}

/* ==========================================================================
   Responsywność
   ========================================================================== */

@media (max-width: 1080px) {
  :root { --pad: 28px; --h-display: 56px; }
  .hero__media { height: 480px; }
  .section h2:not(.h-display), .section__head h2:not(.h-display) { font-size: 46px; }
  .quote h2:not(.h-display) { font-size: 46px; }
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .audience { grid-template-columns: repeat(2, 1fr); }
      /* Nawigacja zamienia sie w panel rozwijany spod naglowka */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 4px var(--pad) 14px;
    box-shadow: 0 14px 28px rgba(23, 22, 20, .1);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 15px 2px; border-bottom: 1px solid var(--hair); font-size: 13px; }
  .nav a:last-child { border-bottom: none; }
  .burger { display: flex; }

  .product h1 { font-size: 48px; }
  .gallery__main img { height: 420px; }
  .form { padding: 36px 32px 40px; }
}

@media (max-width: 860px) {
  :root { --h-display: 44px; }
  /* Trzy hasla nie mieszcza sie w jednej linii, a lamanie ich na trzy wiersze
     zjadalo ekran nad naglowkiem. Zamiast tego jada w kolko od prawej do lewej.
     Tasma to dwa identyczne komplety; animacja przesuwa ja o -50%, czyli
     dokladnie o jeden komplet, wiec zapetlenie jest niewidoczne. */
  .topbar__inner {
    height: 38px; max-width: none;
    padding-left: 0; padding-right: 0;      /* pasek idzie od krawedzi do krawedzi */
  }
  .topbar__track {
    flex: 0 0 auto; width: max-content;
    animation: topbar-marquee 26s linear infinite;
  }
  .topbar__set { flex: 0 0 auto; justify-content: flex-start; gap: 30px; padding-right: 30px; }
  .topbar__set[aria-hidden] { display: flex; }
  .topbar__item { font-size: 11.5px; }

  @keyframes topbar-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .hero__grid,
  .perso__grid,
  .product__grid,
  .contents__grid,
  .split { grid-template-columns: 1fr; gap: 40px; }

  .hero { padding-top: 48px; }
  .hero__media { height: 380px; }
  .hero__lead { font-size: 16.5px; }

  .gallery { position: static; }
  .product__grid { gap: 32px; }

  /* Karta boxa na mobile: film wchodzi miedzy naglowek a liste skladnikow,
     podpis pod filmem znika (na waskim ekranie to zbedny szum),
     a sekcja "TEN BOX SPRAWDZI SIE" siada blizej tego, co nad nia. */
  .contents__media { order: -1; }
  .contents__media .video-caption { display: none; }
  /* Bez natywnych kontrolek (przewijanie, stop) — atrybut zdejmuje aura.js,
     te reguly to zabezpieczenie, gdyby JS nie wystartowal. */
  .video-slot video::-webkit-media-controls,
  .video-slot video::-webkit-media-controls-enclosure,
  .video-slot video::-webkit-media-controls-panel,
  .video-slot video::-webkit-media-controls-start-playback-button { display: none !important; }
  .contents__grid { gap: 28px; }
  section.product-why { padding-top: 40px; }
  /* Na wąskim ekranie wszystkie granice sekcji schodzą do 40 px */
  section.sec-why, section.sec-catalog,
  section.sec-contents, section.sec-perso-strip, section.sec-related { padding-top: 40px; }
  section.sec-why { padding-bottom: 0; }   /* na desktopie 88px — tu zerujemy */
  .section--tight { padding-top: 0; padding-bottom: 40px; }

  .section { padding-top: 64px; padding-bottom: 64px; }
  /* wyzsza specyficznosc niz .section — dziala niezaleznie od kolejnosci */
  section.section--flush-bottom { padding-bottom: 0; }
  .section h2:not(.h-display), .section__head h2:not(.h-display) { font-size: 36px; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .steps { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .perso__list { grid-template-columns: 1fr; gap: 18px; }
  .perso h2:not(.h-display) { font-size: 38px; }
  .perso__media img { aspect-ratio: 4 / 5; height: auto; }

  .quote__inner { padding: 64px var(--pad); }
  .quote h2:not(.h-display) { font-size: 38px; }
  .form__row, .form__row--3, .check-grid { grid-template-columns: 1fr; gap: 22px; }
  .form { padding: 28px 24px 32px; }

  .advisor, .perso-strip, .cta-dark { flex-direction: column; align-items: flex-start; gap: 28px; }
  .cta-dark { padding: 44px 28px; }
  .cta-dark h2 { font-size: 34px; }
  .advisor { padding: 40px 24px 28px; }   /* gora 40 = odstep rail -> naglowek */
  .advisor__card { width: 100%; }
  .advisor__photo { width: 92px; height: 104px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__company { grid-template-columns: 1fr 1fr; gap: 12px 32px; }
  .footer__company--4 { grid-template-columns: 1fr 1fr; }
  .footer--slim .footer__grid { flex-direction: column; align-items: flex-start; gap: 24px; }

  .header__inner { height: 64px; gap: 16px; }
  .header__actions .phone span { display: none; }
  .header__cta { display: none; }          /* CTA przenosi sie na przypiety pasek */

  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(244, 241, 235, .96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 10px var(--pad);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta .btn { padding: 16px 24px; }
  /* zapas, zeby pasek nie zaslanial konca stopki */
  body { padding-bottom: 82px; }
  .back-link { margin-left: 0; font-size: 11.5px; }
  /* --- Kolejność na mobile --------------------------------------------- */
  /* display:contents "rozpuszcza" kolumnę tekstową, dzięki czemu jej dzieci
     stają się elementami siatki i slider może wejść pomiędzy nagłówek
     a akapit. Wszystko wewnątrz media query — desktop bez zmian. */

  .hero__text { display: contents; }
  .hero__grid { gap: 0; }
  .hero .eyebrow { order: 1; }
  .hero h1       { order: 2; margin: 16px 0 0; }
  .hero__media   { order: 3; margin: 26px 0 24px; }
  .hero__lead    { order: 4; margin-bottom: 0; }
  .hero__cta     { order: 5; margin: 30px 0 0; }
  .hero__usp     { display: none; }          /* „10 gotowych zestawów…" — zdjęte z mobile */
  .stats         { order: 6; margin-top: 30px; }

  .perso__text { display: contents; }
  .perso__grid { gap: 0; }
  .perso .eyebrow { order: 1; }
  .perso h2       { order: 2; margin: 16px 0 0; }
  .perso__media   { order: 3; margin: 26px 0 24px; }
  .perso__lead    { order: 4; margin-bottom: 30px; }
  .perso__list    { order: 5; }
  .perso .btn     { order: 6; }

}

@media (max-width: 600px) {
  :root { --pad: 20px; --h-display: 34px; }


  .brand img { width: 36px; height: 36px; }
  .brand__tag { display: none; }
  .header__actions { gap: 12px; }
  .header__actions .btn { padding: 12px 16px; font-size: 11px; }
  .phone i { width: 38px; height: 38px; }
  .phone i svg { width: 18px; height: 18px; }

  .hero__media { height: 260px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__usp { flex-direction: column; gap: 8px; }
  .stats { grid-template-columns: 1fr; }

  .pillars { grid-template-columns: 1fr; }
  .audience { grid-template-columns: 1fr; }

  .section h2:not(.h-display), .section__head h2:not(.h-display),
  .quote h2:not(.h-display), .perso h2:not(.h-display) { font-size: 30px; }
  /* --- Karta boxa na mobile ---------------------------------------------
     Szersza karta (jedna dominuje ekran), mocniejsza hierarchia i czerwony
     przycisk zamiast drobnego napisu — desktop zostaje bez zmian. */
  .card { flex: 0 0 78vw; max-width: 330px; }
  .card__img { height: 200px; }
  .card__body { padding: 20px 18px 18px; gap: 10px; }
  .card__name { font-size: 17px; letter-spacing: .05em; line-height: 1.25; color: var(--red); }
  .card__for { font-size: 14px; }
  .card .tag { font-size: 10.5px; padding: 5px 10px; }
  .card__foot {
    flex-direction: column; align-items: stretch; gap: 12px;
    padding-top: 16px; border-top-color: var(--line);
  }
  .card__price { font-size: 15px; }
  .card__price small { font-size: 11.5px; }
  .card__more {
    background: var(--red); color: #FFF; text-align: center;
    padding: 14px 12px; border-radius: 999px; font-size: 11.5px;
  }
  /* karty "Moze zainteresowac Cie rowniez" stoja w siatce, nie w karuzeli —
     nie moga byc ograniczone szerokoscia karuzeli */
  .grid-3 .card { max-width: none; }

  .product h1 { font-size: 34px; }
  .product__tagline { font-size: 20px; }
  .gallery__main img { height: 300px; }
  .gallery__thumb img { height: 56px; }
  .price__gross { font-size: 24px; }

  .contact-strip { padding: 20px; gap: 14px; }
  .contact-strip__phone { font-size: 21px; }

    
  .footer__grid { grid-template-columns: 1fr; }
  .legal { padding-top: 56px; padding-bottom: 80px; }
  .legal__toc { padding: 22px; }
  .legal__toc-links { grid-template-columns: 1fr; }
  .legal__h { font-size: 24px; }
  .legal__list > li { padding-left: 30px; font-size: 15.5px; }
  .legal__contact { padding: 22px; }
  .legal__dl { padding-left: 0; }
  .legal__row { grid-template-columns: 1fr; gap: 2px; }
  .footer__company { grid-template-columns: 1fr; gap: 12px; }
  .footer__company--4 { grid-template-columns: 1fr; }
  .form__submit { flex-direction: column; align-items: stretch; gap: 16px; }
  .form__submit .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .rail { scroll-behavior: auto; }
  /* Bez animacji pasek korzysci nie moze zostac zamrozony w pol drogi —
     wracamy do jednego kompletu hasel, ktory da sie przewinac palcem. */
  .topbar__inner { overflow-x: auto; }
  .topbar__track { animation: none !important; transform: none !important; }
  .topbar__set[aria-hidden] { display: none !important; }
}

@media print {
  .header, .topbar, .hero__bar, .rail, .footer { display: none; }
}


/* ==========================================================================
   Skala nagłówków — TYLKO DESKTOP (> 1080 px)
   --------------------------------------------------------------------------
   Świadomie min-width, nie max-width: wszystkie wartości dla tabletu i telefonu
   zostają takie, jakie były w media queries powyżej. Ten blok ich nie dotyka.
   ========================================================================== */
@media (min-width: 1081px) {
  /* Wspólna skala dużych nagłówków sekcji: 70 -> 42 px. */
  :root { --h-display: 42px; --h-contents: 42px; --h-related: 42px; }

  /* Dwa wyjątki od tej skali. */
  .hero h1.h-display      { font-size: 62px; }   /* UPOMINKI FIRMOWE, KTÓRE ZOSTAJĄ… */
  .advisor__title.h-display { font-size: 34px; } /* Nie wiesz, który box będzie…    */

  /* Karta boxa — nagłówki spoza skali .h-display. */
  .split h3        { font-size: 42px; }          /* TEN BOX SPRAWDZI SIĘ DLA / DLACZEGO TEN BOX? */
  .cta-dark h2     { font-size: 42px; }          /* ZAINTERESOWAŁ CIĘ TEN BOX?                   */
  .perso-strip__t  { font-size: 34px; }          /* CHCESZ DODAĆ LOGO LUB DEDYKACJĘ?             */

  /* Po zmniejszeniu nagłówków 88 + 96 px między "Dlaczego firmy wybierają…"
     a "WYBIERZ SWÓJ PREZENT FIRMOWY" robiło się dziurą — schodzimy do 96 px
     łącznie, czyli tego samego rytmu co reszta przerw na landingu. */
  section.sec-why     { padding-bottom: 48px; }
  section.sec-catalog { padding-top: 48px; }
}