/* ==========================================================================
   MOCNO Club — mocnoclub.pl
   System wizualny: MOCNO Design System (szare tlo, biale karty, czarny dramat,
   czerwien #FF0801 jako kolor decyzji, ogniste akcenty maksymalnie oszczednie).
   ========================================================================== */

/* ---------- Fonty (self-hosted, WOFF2, subset latin + latin-ext) ---------- */
@font-face {
  font-family: 'Saira Condensed';
  src: url('assets/fonts/saira-condensed-black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Saira Condensed';
  src: url('assets/fonts/saira-condensed-semibold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('assets/fonts/roboto-variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokeny ---------- */
:root {
  --mocno-light: #EFEFEF;
  --mocno-white: #FFFFFF;
  --mocno-black: #000000;
  --mocno-red: #FF0801;
  --mocno-red-hover: #E00600;
  --mocno-red-active: #C20500;
  --mocno-yellow: #FED70F;
  --mocno-gradient: linear-gradient(135deg, #FF0000 0%, #FF7A00 40%, #FFAA00 70%, #FED70F 100%);

  --ink-900: #000000;
  --ink-800: #111111;
  --ink-700: #333333;
  --ink-600: #555555;
  --ink-650: #666666;
  --ink-500: #777777;
  --line-300: #CFCFCF;
  --line-200: #D9D9D9;
  --line-100: #E5E5E5;
  --fill-100: #F5F5F5;

  --surface-dark: #111111;
  --surface-dark-soft: #151515;

  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1200px;
  --container-text: 720px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --section-y-sm: clamp(2.5rem, 5vw, 4rem);

  --radius-xs: 2px;
  --radius-sm: 4px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.04);
  --shadow-raised: 0 4px 16px rgba(0,0,0,.08);
  --shadow-pop: 0 12px 36px rgba(0,0,0,.16);
  --shadow-cta: 0 6px 20px rgba(255,8,1,.30);

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ---------- Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--mocno-light);
  color: var(--ink-800);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
/* Bez tego [hidden] przegrywa z display na .btn czy .signup. */
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--mocno-red); color: #fff; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,8,1,.35); border-radius: var(--radius-xs); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mocno-red); color: #fff; padding: .6rem 1rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.skip-link:focus { left: 0; }

/* ---------- Ikony (inline SVG sprite) ---------- */
.ti { display: inline-flex; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }

/* ---------- Uklad ---------- */
.section { padding: var(--section-y) 0; }
.section--sm { padding: var(--section-y-sm) 0; }
.section--light { background: var(--mocno-light); }
.section--white { background: var(--mocno-white); border-top: 1px solid var(--line-200); border-bottom: 1px solid var(--line-200); }
.section--dark { background: var(--surface-dark); color: #fff; }
.section--dark p { color: rgba(255,255,255,.72); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--container-text); }
.center { text-align: center; }
.center .prose { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 1.25rem; }

/* ---------- Typografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ink-800);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.02; }
h4 { font-size: 1.15rem; line-height: 1.1; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.hot { color: var(--mocno-red); }
.hot-yellow { color: var(--mocno-yellow); }
.strike { color: #8e8e8e; text-decoration: line-through; text-decoration-thickness: .08em; }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-600);
  max-width: 46ch;
}
.section--dark .lead { color: rgba(255,255,255,.72); }
.center .lead { margin-left: auto; margin-right: auto; }

.meta { font-size: .875rem; color: var(--ink-650); }
.section--dark .meta { color: rgba(255,255,255,.6); }

.rule { height: 1px; background: var(--line-200); border: 0; margin: 1.75rem 0 0; }
.section--dark .rule { background: rgba(255,255,255,.14); }
.head-block { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.head-block .lead { margin-top: 1.25rem; }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1; text-align: center; text-decoration: none;
  padding: 1.05em 1.7em; border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn--primary { background: var(--mocno-red); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--mocno-red-hover); }
.btn--primary:active { background: var(--mocno-red-active); transform: scale(.98); }
.btn--ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-800); }
.btn--ghost:hover { background: var(--ink-800); color: #fff; }
.btn--ghost:active { transform: scale(.98); }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.section--dark .btn--ghost:hover { background: #fff; color: var(--ink-800); border-color: #fff; }
.btn--dark { background: var(--ink-900); color: #fff; }
.btn--dark:hover { background: var(--ink-700); }
.btn--dark:active { transform: scale(.98); }
.btn--sm { font-size: .875rem; padding: .95em 1.5em; letter-spacing: .12em; }
.btn--lg { font-size: 1.1875rem; padding: 1.15em 2.1em; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }
.center .btn-row { justify-content: center; }

/* Kotwice sekcji (rzad pod hero) */
.anchor-nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.anchor-nav a {
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-800); background: transparent;
  border: 1px solid var(--line-300); border-radius: var(--radius-sm);
  padding: .8rem 1.25rem; line-height: 1;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.anchor-nav a:hover { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }

/* ---------- Karty ---------- */
.card {
  background: var(--mocno-white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow: var(--shadow-card);
}
.section--white .card { background: var(--mocno-light); border-color: var(--line-200); }
.section--dark .card { background: var(--surface-dark-soft); border-color: rgba(255,255,255,.14); box-shadow: none; }
.card--hover { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.card--hover:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.card h3 { margin-bottom: .75rem; }
.card p { color: var(--ink-600); }
.section--dark .card p { color: rgba(255,255,255,.72); }

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Naglowek strony (sticky) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(239,239,239,.88);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--line-200); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; }
.site-header__logo { display: block; line-height: 0; }
.site-header__logo img { width: clamp(104px, 11vw, 140px); height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.site-nav > a:not(.btn) {
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink-700);
  transition: color var(--dur-base) var(--ease-out);
}
.site-nav > a:not(.btn):hover { color: var(--mocno-red); }

/* ---------- Hero (uklad 2B: deklaracja po lewej, mockup po prawej) ---------- */
/* Typografia hero schodzi o ~8% wzgledem reszty strony, ale odstepy rosna
   o polowe - chodzi o powietrze, nie o zmniejszanie na sile. */
.hero { padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem); }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.75rem, 6vw, 5rem); align-items: center;
}
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: .78125rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-500);
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
}
.hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: .02em; }
.hero__title-kill {
  position: relative; display: inline-block;
  font-size: clamp(2.2rem, 5vw, 4.5rem); color: #B4B4B4;
}
/* Przekreslenie rysujemy paskiem, a nie text-decoration - tylko tak trafia
   dokladnie w os wersalikow Saira Condensed Black. */
.hero__title-kill::after {
  content: ""; position: absolute; left: -.03em; right: -.03em; top: 54%;
  transform: translateY(-50%);
  height: .09em; background: var(--mocno-red);
}
.hero__title-win { font-size: clamp(3rem, 6.1vw, 5.75rem); }
.hero__lead {
  margin: clamp(1.625rem, 3vw, 2.25rem) 0 0; max-width: 34ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7;
}
.hero__kicker {
  margin-top: clamp(1.875rem, 3.2vw, 2.5rem);
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.75vw, 1.5rem); line-height: 1.1; color: var(--ink-800);
  max-width: 22ch;
}
.hero .btn-row { justify-content: flex-start; margin-top: clamp(2rem, 3.4vw, 2.625rem); gap: 1rem; }
.hero .btn--lg { font-size: 1.0625rem; padding: 1.15em 2em; }
.hero__mock {
  width: 100%; height: auto; max-width: 660px; margin-left: auto;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.16));
}

/* Dowod spoleczny pod CTA */
.social-proof { display: flex; align-items: center; justify-content: flex-start; gap: .875rem; margin-top: clamp(2rem, 3.4vw, 2.625rem); flex-wrap: wrap; }
.avatars { display: flex; }
.avatars img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--mocno-light);
}
.avatars img + img { margin-left: -12px; }
.avatars__me { box-shadow: 0 0 0 3px var(--mocno-light), 0 0 0 5px var(--mocno-red); }
.social-proof p { font-size: 1rem; color: var(--ink-600); }
.social-proof strong {
  font-family: var(--font-display); font-weight: 900; font-size: 1.375rem;
  color: var(--ink-800); letter-spacing: .01em;
}

/* Filary pod hero */
.rule--top { margin: 0 0 clamp(2rem, 4vw, 3rem); }
/* Ikona filaru - czerwona, nad naglowkiem; display:block, zeby nie siadala na baseline. */
.pillars .card .ti { display: block; font-size: 1.75rem; color: var(--mocno-red); margin-bottom: .9rem; }
.pillars .card h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
.pillars .card p { font-size: .9375rem; }

/* Dowody z hero: 3 sylwetki + opis */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.proof { text-align: center; }
.proof img { margin: 0 auto; width: 100%; max-width: 320px; }
.proof p { margin-top: .75rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-600); }
.proof strong { color: var(--ink-800); }

/* ---------- Pasek: opinia + Erwin ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--narrow { grid-template-columns: .85fr 1.15fr; }
.figure-flat { border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.figure-plain img { filter: drop-shadow(0 18px 44px rgba(0,0,0,.16)); }

/* Filozofia - tekst obok sylwetki Erwina */
.filozofia h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.filozofia p { color: var(--ink-600); }
.filozofia > p + p { margin-top: 1rem; }
.filozofia .check-list { margin: clamp(1.25rem, 2vw, 1.75rem) 0; }
.filozofia__punch {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.15; color: var(--ink-800) !important;
}

/* ---------- Kroki (PRZETRWAJ WYGRAJ) ---------- */
.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.step { position: relative; background: var(--mocno-white); border: 1px solid var(--line-200); border-left: 3px solid var(--mocno-red); border-radius: var(--radius-sm); padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.step__no { font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: .8; color: var(--line-300); display: block; margin-bottom: .75rem; }
.step h3 { margin-bottom: .6rem; }
.step p { color: var(--ink-600); }

/* ---------- Lista cech / anty-lista ---------- */
.check-list li, .cross-list li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .55rem 0; border-bottom: 1px solid var(--line-100);
  font-size: .9375rem; line-height: 1.5;
}
.check-list li:last-child, .cross-list li:last-child { border-bottom: 0; }
.check-list .ti { font-size: 1.15rem; color: var(--mocno-red); margin-top: .1em; }
.cross-list li { border-bottom-color: rgba(255,255,255,.12); font-size: 1.0625rem; padding: 1rem 0; }
.cross-list .ti { font-size: 1.35rem; color: var(--mocno-red); margin-top: .1em; }

/* ---------- Cennik (wzorzec MOCNO: trzy karty, srodkowa wyrozniona) ----------
   Sekcja trzyma wlasne zmienne w swoim scope - cennik bywa przenoszony miedzy
   stronami w calosci i musi wygladac tak samo wszedzie. */
.cennik {
  --cr: #FF0801;
  --line: #D9D9D9;
  --dark: #111111;
  --fire: linear-gradient(135deg, #FF0000 0%, #FF7A00 40%, #FFAA00 70%, #FED70F 100%);
  --card-radius: 6px;
}
.cn-kicker {
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-500);
  margin-bottom: .75rem;
}
.cn-sub { max-width: 660px; }

/* Trzy karty, trzy powierzchnie */
/* align-items: start - karty maja bardzo rozne listy, wiec rozciagane do jednej
   wysokosci zostawialy w krotszych ogromna dziure miedzy lista a CTA. */
.cn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 901px) {
  .cn-grid > :nth-child(1) { order: 2; }
  .cn-grid > :nth-child(2) { order: 1; }
  .cn-grid > :nth-child(3) { order: 3; }
}
.bcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--mocno-white); border: 1px solid var(--line);
  border-radius: var(--card-radius); padding: clamp(1.75rem, 2.5vw, 2.25rem);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bcard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.10); }
.bcard--hl { border: 2px solid var(--cr); }
.bcard--hl:hover { box-shadow: 0 10px 34px rgba(255,8,1,.18); }
.bcard--dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.bcard--dark:hover { box-shadow: 0 10px 34px rgba(0,0,0,.35); }
.bcard--dark.bcard--hl { border: 2px solid var(--cr); }
.bcard--dark.bcard--hl:hover { box-shadow: 0 10px 34px rgba(255,8,1,.22); }

.bcard__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--cr); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap;
}
.bcard__tiger {
  width: 76px; height: 76px; position: absolute;
  top: clamp(1.25rem, 2vw, 1.75rem); right: clamp(1.25rem, 2vw, 1.75rem); opacity: .95;
}
.bcard__name {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 1.375rem; line-height: 1; letter-spacing: .01em; padding-right: 5rem;
}
.bcard__price { display: flex; align-items: baseline; gap: .35rem; margin-top: 1rem; }
.bcard__price .v { font-family: var(--font-display); font-weight: 900; font-size: 4rem; line-height: 1; }
.bcard__price .c { font-family: var(--font-display); font-weight: 900; font-size: 2rem; line-height: 1; }
/* Jednostka wisi w linii ceny, a wszystkie przeliczniki ida w jedna szara linijke
   ponizej - cztery osobne akapity pod cena robily z karty siekane pole tekstu. */
.bcard__price .u { font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--ink-500); }
.bcard--dark .bcard__price .u { color: rgba(255,255,255,.6); }
.bcard__meta { margin-top: .55rem; font-size: .8125rem; line-height: 1.5; color: var(--ink-500); }
.bcard--dark .bcard__meta { color: rgba(255,255,255,.6); }

.bcard__save {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  background: rgba(255,8,1,.07); border: 1px solid rgba(255,8,1,.2);
  border-radius: var(--radius-xs); padding: .55rem .8rem;
  font-size: .875rem; font-weight: 700; color: var(--cr);
}
/* Stara cena siedzi w kafelku oszczednosci - osobno wisiala bez kontekstu. */
.bcard__save s { font-weight: 500; text-decoration-color: var(--cr); text-decoration-thickness: 2px; }
.bcard--dark .bcard__save s { color: rgba(255,255,255,.75); text-decoration-color: #fff; }
.bcard__save.soft {
  background: var(--fill-100); border-color: var(--line-100);
  font-weight: 500; color: var(--ink-700);
}
.bcard--dark .bcard__save {
  background: rgba(255,8,1,.16); border-color: rgba(255,8,1,.35); color: #fff;
}
.bcard__save .ti { color: var(--cr); font-size: 1.05rem; }
.bcard--dark .bcard__save .ti { color: #fff; }

.bcard__feat { margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .8rem; }
.bcard__feat li { display: flex; align-items: flex-start; gap: .65rem; font-size: .96875rem; line-height: 1.45; }
.bcard__feat .ti { color: var(--cr); font-size: 1.15rem; flex-shrink: 0; margin-top: .12em; }
.bcard__feat li.lead { font-weight: 700; font-size: .96875rem; color: inherit; }
.bcard--dark .bcard__feat li { color: #fff; }


.bcard__cta {
  display: block; margin-top: 1.5rem; text-align: center; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 1.05em 1.5em; border-radius: var(--radius-sm);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.bcard__cta.ghost { border: 2px solid var(--ink-900); color: var(--ink-900); background: transparent; }
.bcard__cta.ghost:hover { background: var(--ink-900); color: #fff; }
.bcard__cta.red { background: var(--cr); color: #fff; }
.bcard__cta.red:hover { background: var(--mocno-red-hover); }
/* Ogien pojawia sie raz na cala strone - tutaj, na najdrozszym CTA. */
.bcard__cta.fire { background: var(--fire); color: var(--ink-900); }
.bcard__cta.fire:hover { filter: brightness(1.08); }

.bcard__note { margin-top: .875rem; font-size: .8125rem; color: var(--ink-650); text-align: center; }
.bcard--dark .bcard__note { color: rgba(255,255,255,.6); }

/* Domkniecie sekcji */
.cn-transfer {
  display: flex; align-items: flex-start; gap: .875rem;
  background: var(--mocno-white); border: 1px solid var(--line); border-left: 4px solid var(--cr);
  border-radius: var(--card-radius); padding: 1.25rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.cn-transfer .ti { color: var(--cr); font-size: 1.35rem; flex-shrink: 0; margin-top: .1em; }
.cn-transfer p { font-size: .96875rem; color: var(--ink-700); }
.cn-reassure {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem;
  margin-top: 1.5rem;
}
.cn-reassure li { display: flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--ink-500); }
.cn-reassure .ti { color: var(--cr); font-size: 1rem; }

/* ---------- MOCNO BOX ---------- */
.box-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.box-grid img { margin: 0 auto; filter: drop-shadow(0 18px 44px rgba(0,0,0,.16)); }


/* ---------- Galeria opinii (masonry) ---------- */
.gallery { column-count: 3; column-gap: 1.25rem; }
.gallery img {
  width: 100%; margin: 0 0 1.25rem; break-inside: avoid;
  border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: #fff;
}
.gallery-toggle { margin-top: .5rem; }

/* ---------- Opinie-screeny w tresci ---------- */
.shots { display: grid; gap: 1.25rem; }
.shots img { width: 100%; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: #fff; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line-200); }
.faq details { border-bottom: 1px solid var(--line-200); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; color: var(--ink-800);
  transition: color var(--dur-base) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--mocno-red); }
.faq summary .ti { font-size: 1.4rem; color: var(--mocno-red); transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary .ti { transform: rotate(180deg); }
.faq__body { padding: 0 0 1.5rem; color: var(--ink-600); font-size: 1rem; }
.faq__body ul { margin-top: .5rem; }
.faq__body li { padding: .2rem 0; }

/* ---------- Formularz zapisu ---------- */
.signup { max-width: 620px; margin: 0 auto; }
.signup .field { margin-bottom: .875rem; }
.signup input[type="text"], .signup input[type="email"], .signup input[type="tel"] {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: #fff;
  background: #000; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  transition: border-color var(--dur-base) var(--ease-out);
}
.signup input::placeholder { color: rgba(255,255,255,.45); }
.signup input:focus { border-color: var(--mocno-red); outline: none; }
.consent { display: flex; gap: .75rem; align-items: flex-start; margin: 1.25rem 0 1.5rem; text-align: left; }
.consent input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--mocno-red); flex-shrink: 0; }
.consent label { font-size: .8125rem; line-height: 1.5; color: rgba(255,255,255,.62); }
.consent a { color: #fff; }
/* Komunikat wchodzi w miejsce formularza - ta sama szerokosc, zeby sekcja nie skakala. */
.signup-done {
  max-width: 620px; margin: 0 auto; text-align: center;
  border: 1px solid rgba(255,255,255,.2); border-top: 3px solid var(--mocno-red);
  border-radius: var(--radius-sm); padding: clamp(1.75rem, 3vw, 2.5rem);
}
.signup-done .ti { display: block; margin: 0 auto .875rem; font-size: 2.25rem; color: var(--mocno-red); }
.signup-done h4 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: .75rem; }
.signup-done .meta { max-width: 46ch; margin: 0 auto; }

/* ---------- Stopka ---------- */
.footer { background: var(--mocno-black); color: rgba(255,255,255,.7); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
.footer__co p { font-size: .8125rem; line-height: 1.7; color: rgba(255,255,255,.55); }
.footer__co-name { color: #fff !important; font-weight: 500; }
.footer__co a { color: rgba(255,255,255,.75); }
/* Linki dokumentow w jednej kolumnie - lista jest krotka i musi byc czytelna
   takze wtedy, gdy tytul zawija sie na telefonie. */
.footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.footer__links a, .footer__link-btn {
  font-size: .8125rem; line-height: 1.4; color: rgba(255,255,255,.62);
  text-decoration: none; transition: color var(--dur-base) var(--ease-out);
}
.footer__links a:hover, .footer__link-btn:hover { color: var(--mocno-red); }
/* Przycisk zgod udaje link - ale musi zostac buttonem, bo otwiera baner. */
.footer__link-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); text-align: left; }
.footer__bottom { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.footer__bottom span { font-size: .8125rem; color: rgba(255,255,255,.5); }

/* ---------- Strony prawne ---------- */
.legal-hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.legal-hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin-top: .875rem; }
.legal { padding-top: clamp(2rem, 4vw, 3rem); }
.legal .container { max-width: 820px; }
.legal__body { font-size: .9375rem; line-height: 1.7; color: var(--ink-600); }
.legal__body h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.05;
  margin: clamp(2.25rem, 4vw, 3rem) 0 1rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-200);
}
.legal__body > :first-child { margin-top: 0; }
.legal__body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal__body h3 { font-size: 1rem; letter-spacing: .04em; margin: 1.75rem 0 .75rem; }
.legal__body p { margin-bottom: 1rem; }
.legal__body strong { color: var(--ink-800); font-weight: 500; }
.legal__body a { color: var(--ink-800); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--mocno-red); }
/* Numeracja paragrafow musi byc widoczna - to po niej sie te dokumenty cytuje. */
.lst-num, .lst-alpha { list-style: decimal outside; margin: 0 0 1.25rem 1.35rem; }
.lst-alpha { list-style: lower-alpha outside; margin: .5rem 0 .5rem 1.1rem; }
.lst-bullet { list-style: disc outside; margin: 0 0 1.25rem 1.1rem; }
.lst-num > li, .lst-alpha > li, .lst-bullet > li { padding: .28rem 0; }
.lst-num::marker, .lst-alpha::marker { color: var(--ink-500); }
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--mocno-white); }
.legal__body table { width: 100%; border-collapse: collapse; font-size: .8125rem; min-width: 640px; }
.legal__body th, .legal__body td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--line-100); vertical-align: top; }
.legal__body th { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .6875rem; color: var(--ink-800); background: var(--mocno-light); }
.legal__body tr:last-child td { border-bottom: 0; }
.legal__back { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-200); }
.legal__back a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; color: var(--ink-800); text-decoration: none; }
.legal__back a:hover { color: var(--mocno-red); }

/* ---------- Baner cookies ---------- */
/* Siedzi w rogu, nie zaslania calej strony - to zgoda, nie modal blokujacy. */
.cookiebar { position: fixed; z-index: 60; left: 0; bottom: 0; width: 100%; padding: 1rem; pointer-events: none; }
.cookiebar__box {
  pointer-events: auto; max-width: 440px; margin-left: auto; margin-right: 0;
  background: var(--mocno-white); border: 1px solid var(--line-300);
  border-top: 3px solid var(--mocno-red); border-radius: var(--radius-sm);
  padding: 1.35rem 1.5rem; box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.cookiebar__title { font-size: 1.15rem; margin-bottom: .6rem; }
.cookiebar__desc { font-size: .8125rem; line-height: 1.6; color: var(--ink-600); }
.cookiebar__desc a { color: var(--ink-800); text-decoration: underline; text-underline-offset: 2px; }
.cookiebar__opts { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-200); }
.cookiebar__opt { display: flex; gap: .65rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--ink-600); cursor: pointer; }
.cookiebar__opt input { margin-top: .18rem; width: 1rem; height: 1rem; accent-color: var(--mocno-red); flex-shrink: 0; }
.cookiebar__opt input:disabled { cursor: default; }
.cookiebar__opt strong { color: var(--ink-800); font-weight: 500; }
.cookiebar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.cookiebar__actions .btn { padding: .8em 1.25em; font-size: .8125rem; }
.cookiebar__more { background: none; border: 0; padding: .4rem 0; cursor: pointer; font-family: var(--font-body); font-size: .8125rem; color: var(--ink-500); text-decoration: underline; text-underline-offset: 2px; }
.cookiebar__more:hover { color: var(--mocno-red); }

/* ---------- Responsywnosc ---------- */
/* Ponizej ~1120px lewa kolumna robi sie za waska na dwa CTA obok siebie -
   hero schodzi wtedy na jedna kolumne, zanim cokolwiek zacznie sie lamac. */
@media (max-width: 1120px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__mock { max-width: 620px; margin: 0 auto; }
  .hero__lead, .hero__kicker { max-width: 46ch; }
}
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { column-count: 2; }
}
@media (max-width: 900px) {
  .cn-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .bcard__tiger { width: 64px; height: 64px; }
}
@media (max-width: 860px) {
  .grid--3, .steps, .proof-grid { grid-template-columns: 1fr; }
  .split, .split--narrow, .box-grid { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 2; }
}
@media (max-width: 600px) {
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .cookiebar { padding: .75rem; }
  .cookiebar__box { max-width: none; padding: 1.15rem 1.25rem; }
  .cookiebar__actions .btn { width: 100%; }
  .site-header__inner { min-height: 60px; }
  .site-nav { gap: .875rem; }
  .site-nav > a:not(.btn) { font-size: .75rem; letter-spacing: .1em; }
  .site-nav .btn { width: auto; }
  .social-proof { gap: .75rem; }
  .cn-reassure { gap: .6rem 1.25rem; }
  .gallery { column-count: 1; }
  .btn { width: 100%; }
  .anchor-nav a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Drobiazgi ---------- */
.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;
}
/* Emoji wystepujace w tresci - trzymamy je w foncie tekstowym, zeby nie rozbijaly
   linii naglowkow zlozonych Saira Condensed Black. */

/* Numeracja krokow - czysto dekoracyjna (licznik CSS, brak tresci w HTML). */
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: .8;
  color: var(--line-300); display: block; margin-bottom: .75rem;
}