/* ============================================================
   PozaBankiem — Główny arkusz stylów
   Design System v4.0
   ============================================================ */

/* ============================================================
   1. CUSTOM PROPERTIES — Design Tokens
   ============================================================ */

:root {
  /* Kolory */
  --color-navy:      #0B1F3A;
  --color-navy-mid:  #1A3558;
  --color-silver:    #C8D0DC;
  --color-white:     #F5F7FA;
  --color-gold:      #C9A84C;
  --color-gold-dark: #A8873A;
  --color-text:      #1C1C2E;
  --color-muted:     #6B7A8D;
  --color-tag-bg:    #EEF2F7;
  --color-error:     #D94040;
  --color-success:   #2E7D52;
  --color-surface:   #F8FAFC;
  --color-border:    #E2E8F0;
  --color-text-muted: #6B7A8D;
  --radius-lg:       12px;
  --radius-md:       8px;

  /* Platformy messaging */
  --color-whatsapp:  #25D366;
  --color-telegram:  #0088CC;
  --color-signal:    #3A76F0;

  /* Typografia */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Skala typograficzna */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* Border */
  --radius-card:   4px;
  --radius-btn:    2px;
  --radius-input:  3px;

  /* Shadows */
  --shadow-card:   0 2px 24px rgba(11, 31, 58, 0.12);
  --shadow-card-hover: 0 8px 40px rgba(11, 31, 58, 0.2);
  --shadow-nav:    0 2px 20px rgba(11, 31, 58, 0.15);

  /* Transitions */
  --transition-base: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Z-index */
  --z-floating:  900;
  --z-sticky:    950;
  --z-nav:       1000;
  --z-popup:     1100;
  --z-cookies:   1050;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; }
h6 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-3);
}

.text-muted { color: var(--color-muted); }
.text-gold { color: var(--color-gold); }
.text-white { color: var(--color-white); }
.text-navy { color: var(--color-navy); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-muted);
}

/* ============================================================
   4. LAYOUT
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section--sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--lg {
  padding-top: clamp(var(--space-20), 8vw, 8rem);
  padding-bottom: clamp(var(--space-20), 8vw, 8rem);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section--navy-mid {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
}

.section--light {
  background-color: var(--color-white);
}

.section--off {
  background-color: var(--color-tag-bg);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-12);
}

.section-header .eyebrow {
  margin-bottom: var(--space-3);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header .lead {
  margin-bottom: 0;
}

/* Grid helpers */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.grid-8-4 {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: var(--space-12);
  align-items: start;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.35);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-white);
  color: var(--color-navy);
  transform: translateY(-1px);
}

.btn--outline-navy {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn--outline-navy:hover,
.btn--outline-navy:focus-visible {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn--outline-gold {
  background-color: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.btn--outline-gold:hover,
.btn--outline-gold:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-muted);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn--ghost:hover {
  color: var(--color-navy);
}

.btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: var(--text-base);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   6. NAVIGATION
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--space-4) 0;
  transition: all var(--transition-slow);
}

.nav--scrolled {
  background-color: rgba(11, 31, 58, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-nav);
  padding: var(--space-3) 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo span {
  color: var(--color-gold);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(245, 247, 250, 0.85);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition-base);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-white);
}

.nav__link--active::after,
.nav__link:hover::after {
  transform: scaleX(1);
}

/* Dropdown */
.nav__item {
  position: relative;
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background-color: var(--color-navy-mid);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-card);
  padding: var(--space-3) 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);
}

.nav__dropdown a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: rgba(245, 247, 250, 0.85);
  transition: all var(--transition-base);
}

.nav__dropdown a:hover {
  color: var(--color-gold);
  background-color: rgba(201, 168, 76, 0.05);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  cursor: pointer;
  padding: var(--space-2) 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__hamburger span {
  display: inline;
  height: auto;
  background: none;
  color: var(--color-white);
  font-weight: 700;
}

.nav__hamburger--open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__hamburger--open span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}

.nav__hamburger--open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu — drops down from nav */
.nav__mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background-color: var(--color-navy);
  padding: var(--space-6);
  padding-top: 72px; /* overridden by JS with actual nav height */
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  z-index: calc(var(--z-nav) - 1);
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(11,31,58,0.45);
}

.nav__mobile--open {
  transform: translateX(0);
}

.nav__mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 58, 0.5);
  z-index: calc(var(--z-nav) - 2);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
}

.nav__mobile-overlay--open {
  opacity: 1;
  visibility: visible;
}

.nav__mobile-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__mobile-menu a {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  color: rgba(245, 247, 250, 0.85);
  border-bottom: 1px solid rgba(200, 208, 220, 0.1);
  transition: color var(--transition-base);
  font-family: var(--font-display);
}

.nav__mobile-menu a:hover {
  color: var(--color-gold);
}

.nav__mobile-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nav__mobile-group {
  display: flex;
  flex-direction: column;
}

.nav__mobile-group-title {
  display: block;
  padding: var(--space-4) 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid rgba(200, 208, 220, 0.1);
}

.nav__mobile-group-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__mobile-group-title::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-gold);
  transition: transform 0.2s;
  line-height: 1;
}

.nav__mobile-group--open .nav__mobile-group-title::after {
  content: '−';
}

.nav__mobile-group-links {
  display: none;
  flex-direction: column;
}

.nav__mobile-group--open .nav__mobile-group-links {
  display: flex;
}

.nav__mobile-group-links a {
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-base) !important;
  color: rgba(245, 247, 250, 0.7) !important;
  border-bottom: 1px solid rgba(200, 208, 220, 0.06) !important;
}

/* ============================================================
   7. FLOATING CONTACT BAR
   ============================================================ */

.floating-bar {
  display: none !important;
}

.floating-bar__item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-base);
  animation: floatPulse 4s ease-in-out infinite;
}

.floating-bar__item:nth-child(2) { animation-delay: 1.3s; }
.floating-bar__item:nth-child(3) { animation-delay: 2.6s; }

@keyframes floatPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 4px transparent; }
}

.floating-bar__item--whatsapp {
  background-color: var(--color-whatsapp);
  color: #fff;
}

.floating-bar__item--whatsapp:hover {
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  transform: scale(1.1);
}

.floating-bar__item--telegram {
  background-color: var(--color-telegram);
  color: #fff;
}

.floating-bar__item--telegram:hover {
  box-shadow: 0 4px 20px rgba(0, 136, 204, 0.5);
  transform: scale(1.1);
}

.floating-bar__item--signal {
  background-color: var(--color-signal);
  color: #fff;
}

.floating-bar__item--signal:hover {
  box-shadow: 0 4px 20px rgba(58, 118, 240, 0.5);
  transform: scale(1.1);
}

.floating-bar__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.floating-bar__tooltip {
  position: absolute;
  right: calc(100% + var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.floating-bar__tooltip::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right: 0;
  border-left-color: var(--color-navy);
}

.floating-bar__item:hover .floating-bar__tooltip {
  opacity: 1;
}

/* ============================================================
   8. HERO SECTIONS
   ============================================================ */

.hero {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding-top: clamp(8rem, 15vw, 12rem);
  padding-bottom: clamp(var(--space-16), 8vw, var(--space-24));
  position: relative;
  overflow: hidden;
}

/* Geometric background pattern */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 60px,
      rgba(200, 208, 220, 0.04) 60px,
      rgba(200, 208, 220, 0.04) 61px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 60px,
      rgba(200, 208, 220, 0.04) 60px,
      rgba(200, 208, 220, 0.04) 61px
    );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__content {
  max-width: 760px;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.hero__sub {
  font-size: var(--text-lg);
  color: rgba(245, 247, 250, 0.75);
  margin-bottom: var(--space-8);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero__social-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.hero__proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(245, 247, 250, 0.65);
}

.hero__proof-item::before {
  content: '✓';
  color: var(--color-gold);
  font-weight: 700;
  font-size: var(--text-base);
}

.hero__gold-line {
  width: 0;
  height: 2px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-6);
  transition: width 0.8s ease 0.3s;
}

.hero__gold-line--revealed {
  width: 80px;
}

.urgency-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-silver);
  margin-top: var(--space-5);
}

.urgency-icon {
  font-size: var(--text-base);
}

/* ============================================================
   9. TRUST LINE — "Linia Zaufania"
   ============================================================ */

.trust-line {
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-5);
  margin-left: 0;
}

.trust-line--lg {
  border-left-width: 3px;
  padding-left: var(--space-6);
}

blockquote.trust-line {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-navy-mid);
  line-height: 1.7;
}

.section--navy blockquote.trust-line,
.section--navy-mid blockquote.trust-line {
  color: rgba(245, 247, 250, 0.9);
}

/* ============================================================
   10. CARDS
   ============================================================ */

.card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card--navy {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
}

.card--bordered {
  border: 1px solid rgba(200, 208, 220, 0.25);
  box-shadow: none;
}

.card--bordered:hover {
  border-color: var(--color-gold);
}

.card__icon {
  width: 48px;
  height: 48px;
  background-color: rgba(201, 168, 76, 0.12);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.card__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-gold);
  fill: none;
}

.card h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.card p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.card--navy p {
  color: rgba(200, 208, 220, 0.8);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  text-decoration: none;
  margin-top: var(--space-5);
  transition: gap var(--transition-base);
}

.card__link:hover {
  gap: var(--space-3);
}

/* Product cards (home hero) */
.product-card {
  background-color: var(--color-navy-mid);
  border-radius: var(--radius-card);
  padding: var(--space-10);
  color: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-slow);
  border: 1px solid rgba(201, 168, 76, 0.15);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(201, 168, 76, 0.35);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.product-card__desc {
  color: rgba(200, 208, 220, 0.8);
  margin-bottom: var(--space-6);
  line-height: 1.7;
}

.product-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.product-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(245, 247, 250, 0.85);
}

.product-card__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 0.45em;
}

/* Blog cards */
.blog-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-slow);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.blog-card__thumb {
  height: 200px;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-card__thumb--factoring {
  background: linear-gradient(135deg, #0B1F3A 0%, #1A4A6B 100%);
}

.blog-card__thumb--mortgage {
  background: linear-gradient(135deg, #1A3558 0%, #2D5A8E 100%);
}

.blog-card__thumb--cashflow {
  background: linear-gradient(135deg, #0D2B1A 0%, #1A4A2E 100%);
}

.blog-card__thumb--finance {
  background: linear-gradient(135deg, #2B1A0D 0%, #4A3018 100%);
}

.blog-card__thumb--law {
  background: linear-gradient(135deg, #1A1A2E 0%, #2D2D4A 100%);
}

.blog-card__thumb--leasing {
  background: linear-gradient(135deg, #0B1F3A 0%, #1A3A5C 60%, #C9A84C22 100%);
}

.blog-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(60deg, transparent 40%, rgba(201, 168, 76, 0.08));
}

.blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.blog-card__lead {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: var(--space-4);
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

.blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-3);
  background-color: var(--color-tag-bg);
  color: var(--color-muted);
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.tag:hover,
.tag--active {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.blog-card__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--transition-base);
  text-decoration: none;
}

.blog-card__cta:hover {
  gap: var(--space-3);
}

/* Case study cards */
.case-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  border-top: 3px solid transparent;
  transition: all var(--transition-slow);
}

.case-card--factoring {
  border-top-color: var(--color-gold);
}

.case-card--mortgage {
  border-top-color: var(--color-navy-mid);
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.case-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-4);
}

.case-badge--anon {
  background-color: rgba(26, 53, 88, 0.1);
  color: var(--color-navy-mid);
}

.case-badge--consent {
  background-color: rgba(46, 125, 82, 0.1);
  color: var(--color-success);
}

/* ============================================================
   11. FILTER TABS (blog, faq, etc.)
   ============================================================ */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.filter-tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid rgba(200, 208, 220, 0.4);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-base);
}

.filter-tab:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.filter-tab--active {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

/* ============================================================
   12. FORMS
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.form-label span {
  color: var(--color-error);
  margin-left: 2px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem var(--space-4);
  border: 1px solid rgba(200, 208, 220, 0.5);
  border-radius: var(--radius-input);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: var(--color-error);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  display: none;
}

.form-error--visible {
  display: block;
}

.form-success {
  font-size: var(--text-sm);
  color: var(--color-success);
  display: none;
}

.form-success--visible {
  display: block;
}

/* RODO checkboxes */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(200, 208, 220, 0.6);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  background-color: var(--color-white);
}

.checkbox-label input[type="checkbox"]:checked {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--color-navy);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.checkbox-label a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* Honeypot */
.form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

.form-rodo-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.6;
}

.form-rodo-note a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* Form grid */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

/* ============================================================
   13. PROCESS / STEPS
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(12.5% + var(--space-6));
  right: calc(12.5% + var(--space-6));
  height: 1px;
  background: linear-gradient(to right, var(--color-gold), rgba(201, 168, 76, 0.3));
  z-index: 0;
}

.steps--5 {
  grid-template-columns: repeat(5, 1fr) !important;
}

.steps--5::before {
  left: calc(10% + var(--space-6)) !important;
  right: calc(10% + var(--space-6)) !important;
}

.step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-gold);
  color: var(--color-navy);
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  position: relative;
  z-index: 1;
}

.step__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-navy);
}

.section--navy .step__title,
.section--navy-mid .step__title {
  color: var(--color-white);
}

.step__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

.section--navy .step__desc,
.section--navy-mid .step__desc {
  color: rgba(200, 208, 220, 0.7);
}

/* ============================================================
   14. STATS / TRUST SIGNALS
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.stat {
  text-align: center;
}

.stat__number {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat__label {
  font-size: var(--text-sm);
  color: rgba(200, 208, 220, 0.8);
}

/* ============================================================
   15. ACCORDION (FAQ)
   ============================================================ */

.accordion {
  border: 1px solid rgba(200, 208, 220, 0.3);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.accordion__item {
  border-bottom: 1px solid rgba(200, 208, 220, 0.2);
}

.accordion__item:last-child {
  border-bottom: none;
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-navy);
  transition: all var(--transition-base);
  gap: var(--space-4);
}

.accordion__trigger:hover {
  background-color: var(--color-tag-bg);
  color: var(--color-gold);
}

.accordion__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion__icon::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-base);
}

.accordion__item--open .accordion__icon {
  color: var(--color-gold);
}

.accordion__item--open .accordion__icon::before {
  transform: rotate(225deg) translate(-2px, -2px);
}

.accordion__item--open .accordion__trigger {
  color: var(--color-navy);
  background-color: var(--color-tag-bg);
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion__body--open,
.accordion__item--open .accordion__body {
  max-height: 600px;
  padding: 0 var(--space-6) var(--space-5);
}

.accordion__body p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.7;
}

.accordion__body a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* ============================================================
   16. TABS
   ============================================================ */

.tabs {
  display: flex;
  border-bottom: 2px solid rgba(200, 208, 220, 0.25);
  margin-bottom: var(--space-10);
  gap: 0;
}

.tab-btn {
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition-base);
}

.tab-btn:hover {
  color: var(--color-navy);
}

.tab-btn--active {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.tab-panel {
  display: none;
}

.tab-panel--active {
  display: block;
}

/* ============================================================
   17. CALCULATOR
   ============================================================ */

.calculator {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  border: 1px solid rgba(200, 208, 220, 0.25);
}

.calculator__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(200, 208, 220, 0.25);
}

.calc-group {
  margin-bottom: var(--space-5);
}

.calc-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.calc-value {
  font-weight: 700;
  color: var(--color-gold);
}

.calc-slider {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--color-gold) var(--pct, 0%), rgba(200, 208, 220, 0.4) var(--pct, 0%));
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.calc-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-gold);
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.4);
  cursor: pointer;
  transition: transform var(--transition-base);
}

.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.calc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-gold);
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.4);
  cursor: pointer;
}

.calc-radios {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.calc-radio {
  display: none;
}

.calc-radio-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(200, 208, 220, 0.5);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-base);
}

.calc-radio:checked + .calc-radio-label {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
  font-weight: 600;
}

.calc-output {
  background-color: var(--color-navy);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-top: var(--space-6);
  color: var(--color-white);
}

.calc-output__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(200, 208, 220, 0.1);
  font-size: var(--text-sm);
}

.calc-output__row:last-child {
  border-bottom: none;
}

.calc-output__label {
  color: rgba(200, 208, 220, 0.7);
}

.calc-output__value {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-gold);
}

.calc-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-4);
  line-height: 1.6;
}

/* LTV Indicator */
.ltv-indicator {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  font-weight: 500;
  border-left: 3px solid;
}

.ltv-indicator--good {
  background: rgba(46, 125, 82, 0.08);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.ltv-indicator--ok {
  background: rgba(201, 168, 76, 0.08);
  border-left-color: var(--color-gold);
  color: var(--color-gold-dark);
}

.ltv-indicator--warn {
  background: rgba(217, 64, 64, 0.08);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

/* ============================================================
   18. BREADCRUMB
   ============================================================ */

.breadcrumb {
  padding: var(--space-3) 0;
  margin-bottom: var(--space-6);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  color: rgba(200, 208, 220, 0.5);
}

.breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.breadcrumb a:hover {
  color: var(--color-gold);
}

.breadcrumb li:last-child {
  color: var(--color-text);
}

/* ============================================================
   19. TABLE OF CONTENTS
   ============================================================ */

.toc {
  background-color: var(--color-tag-bg);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.toc__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toc__list a {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition-base);
  padding: var(--space-1) 0;
  display: block;
}

.toc__list a:hover {
  color: var(--color-gold);
}

/* Sticky TOC */
.sidebar-sticky {
  position: sticky;
  top: calc(80px + var(--space-6));
}

/* ============================================================
   20. ARTICLE CONTENT
   ============================================================ */

.article-content {
  max-width: none;
}

.article-content h2 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  color: var(--color-navy);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
}

.article-content h3 {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  color: var(--color-navy);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article-content p {
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }

.article-content li {
  margin-bottom: var(--space-2);
  line-height: 1.7;
  color: var(--color-text);
}

.article-content strong {
  font-weight: 700;
  color: var(--color-navy);
}

.article-content a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* Callout boxes */
.callout {
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.callout--tip {
  background-color: rgba(46, 125, 82, 0.07);
  border-left: 3px solid var(--color-success);
  color: var(--color-text);
}

.callout--warn {
  background-color: rgba(217, 64, 64, 0.06);
  border-left: 3px solid var(--color-error);
  color: var(--color-text);
}

.callout--example {
  background-color: rgba(201, 168, 76, 0.07);
  border-left: 3px solid var(--color-gold);
  color: var(--color-text);
}

.callout--navy {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
  border-left: 3px solid var(--color-gold);
}

.callout__title {
  font-weight: 700;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

/* In-article CTA banner */
.article-cta {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  margin: var(--space-10) 0;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.article-cta__text h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.article-cta__text p {
  font-size: var(--text-sm);
  color: rgba(200, 208, 220, 0.8);
  margin-bottom: 0;
}

/* Article separator */
.article-sep {
  height: 1px;
  background: linear-gradient(to right, var(--color-gold), transparent);
  margin: var(--space-8) 0;
}

/* Article share */
.article-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(200, 208, 220, 0.25);
}

.article-share__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid rgba(200, 208, 220, 0.4);
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-base);
  background: none;
  font-family: inherit;
}

.share-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ============================================================
   21. GLOSSARY (Słowniczek)
   ============================================================ */

.glossary-search {
  width: 100%;
  padding: 0.85rem var(--space-5);
  border: 2px solid rgba(200, 208, 220, 0.4);
  border-radius: var(--radius-input);
  font-size: var(--text-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-4) center;
  padding-left: calc(var(--space-4) + 26px);
  transition: border-color var(--transition-base);
  margin-bottom: var(--space-8);
}

.glossary-search:focus {
  outline: none;
  border-color: var(--color-gold);
}

.alpha-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
}

.alpha-tab {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 208, 220, 0.4);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-base);
  background: none;
  font-family: inherit;
}

.alpha-tab:hover,
.alpha-tab--active {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

.glossary-section {
  margin-bottom: var(--space-10);
}

.glossary-letter {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-gold);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(200, 208, 220, 0.25);
}

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.glossary-term dt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.glossary-term dd {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.7;
  padding-left: var(--space-4);
  border-left: 2px solid rgba(200, 208, 220, 0.3);
}

.glossary-term dd a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* ============================================================
   22. PARAMETERS TABLE (pozyczki)
   ============================================================ */

.params-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.params-table th,
.params-table td {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-size: var(--text-sm);
}

.params-table th {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: 600;
  font-family: var(--font-body);
}

.params-table tr:nth-child(even) td {
  background-color: var(--color-tag-bg);
}

.params-table tr:nth-child(odd) td {
  background-color: var(--color-white);
}

.params-table td:first-child {
  font-weight: 600;
  color: var(--color-navy);
}

/* ============================================================
   23. CTA BANNERS
   ============================================================ */

.cta-banner {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-10);
  text-align: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(201, 168, 76, 0.04) 40px,
      rgba(201, 168, 76, 0.04) 41px
    );
  pointer-events: none;
}

.cta-banner__inner {
  position: relative;
  z-index: 1;
}

.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
}

.cta-banner p {
  color: rgba(200, 208, 220, 0.8);
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* Messaging app buttons */
.messaging-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.messaging-btn,
.messaging-btns,
.footer__messaging {
  display: none !important;
}

.messaging-btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: #fff;
}

.messaging-btn--whatsapp:hover {
  background-color: #1ea952;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

.messaging-btn--telegram {
  background-color: var(--color-telegram);
  color: #fff;
}

.messaging-btn--telegram:hover {
  background-color: #006fa3;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 136, 204, 0.4);
}

.messaging-btn--signal {
  background-color: var(--color-signal);
  color: #fff;
}

.messaging-btn--signal:hover {
  background-color: #2d5fd6;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(58, 118, 240, 0.4);
}

.messaging-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   24. SIDEBAR WIDGETS
   ============================================================ */

.sidebar-widget {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.sidebar-widget h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font-display);
}

.sidebar-widget .messaging-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.sidebar-popular {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidebar-popular a {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  transition: color var(--transition-base);
  line-height: 1.4;
}

.sidebar-popular a::before {
  content: '→';
  color: var(--color-gold);
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
}

.sidebar-popular a:hover {
  color: var(--color-gold);
}

/* ============================================================
   25. FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-navy);
  color: rgba(200, 208, 220, 0.8);
  padding-top: var(--space-16);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-3);
}

.footer__logo span {
  color: var(--color-gold);
}

.footer__tagline {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__links a {
  font-size: var(--text-sm);
  color: rgba(200, 208, 220, 0.7);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer__links a:hover {
  color: var(--color-gold);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(200, 208, 220, 0.7);
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer__contact-item:hover {
  color: var(--color-gold);
}

.footer__contact-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-gold);
  fill: none;
  flex-shrink: 0;
}

.footer__messaging {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer__msg-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.footer__msg-icon:hover {
  transform: translateY(-2px);
}

.footer__msg-icon--wa { background-color: var(--color-whatsapp); }
.footer__msg-icon--tg { background-color: var(--color-telegram); }
.footer__msg-icon--sg { background-color: var(--color-signal); }

.footer__msg-icon svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

/* Legal bar */
.footer__legal {
  padding: var(--space-6) 0;
  margin-top: var(--space-6);
}

.footer__legal-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.footer__legal-links a {
  font-size: var(--text-xs);
  color: rgba(200, 208, 220, 0.5);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer__legal-links a:hover {
  color: var(--color-gold);
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(200, 208, 220, 0.4);
  display: block;
  text-align: center;
  margin-top: var(--space-4);
}

.footer__disclaimer {
  font-size: var(--text-xs);
  color: rgba(200, 208, 220, 0.4);
  line-height: 1.6;
  margin-top: var(--space-4);
}

.footer__imprint {
  font-size: var(--text-xs);
  color: rgba(200, 208, 220, 0.35);
  margin-top: var(--space-3);
  line-height: 1.6;
}

/* ============================================================
   26. COVERAGE SECTION
   ============================================================ */

.coverage-section {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(200, 208, 220, 0.2);
  margin-top: var(--space-6);
}

.coverage-section p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 800px;
}

/* ============================================================
   27. COOKIES BANNER
   ============================================================ */

/* === Overlay / Banner wrapper === */
.cookies-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--color-navy, #0B1F3A);
  color: rgba(200,208,220,0.9);
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform 0.35s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.cookies-banner--visible {
  transform: translateY(0);
}

/* === Layer 1: Main banner === */
.cookies-main { display: block; }
.cookies-panel { display: block; }
.cookies-main[hidden],
.cookies-panel[hidden] { display: none !important; }

.cookies-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem;
}

.cookies-text {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(200,208,220,0.8);
  margin: 0 0 0.6rem;
}

.cookies-text a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* === Action buttons === */
.cookies-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.cookies-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}

.cookies-btn--primary {
  background: var(--color-gold, #C9A84C);
  color: var(--color-navy, #0B1F3A);
  border-color: var(--color-gold, #C9A84C);
}

.cookies-btn--primary:hover { opacity: 0.88; }

.cookies-btn--outline {
  background: transparent;
  color: rgba(200,208,220,0.85);
  border-color: rgba(200,208,220,0.35);
}

.cookies-btn--outline:hover {
  border-color: rgba(200,208,220,0.7);
  color: #fff;
}

/* === Layer 2: Categories === */
.cookies-categories {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0;
}

.cookies-category {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(200,208,220,0.1);
}

.cookies-category__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.cookies-category__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}

.cookies-category__always {
  font-size: 0.72rem;
  color: var(--color-gold);
  font-weight: 600;
  border: 1px solid var(--color-gold);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.cookies-category__desc {
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(200,208,220,0.65);
  margin: 0;
}

/* === Toggle switch === */
.cookies-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.cookies-switch input { opacity: 0; width: 0; height: 0; }

.cookies-switch__track {
  position: absolute;
  inset: 0;
  background: rgba(200,208,220,0.2);
  border-radius: 24px;
  transition: background 0.2s;
}

.cookies-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.cookies-switch input:checked + .cookies-switch__track {
  background: var(--color-gold, #C9A84C);
}

.cookies-switch input:checked + .cookies-switch__track .cookies-switch__thumb {
  transform: translateX(18px);
}

.cookies-actions--panel {
  flex-direction: row-reverse;
}

/* === Floating reopener === */
.cookies-reopener {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-navy, #0B1F3A);
  border: 2px solid var(--color-gold, #C9A84C);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}

.cookies-reopener[hidden] { display: none !important; }

.cookies-reopener:hover { transform: scale(1.1); }

/* === Mobile adjustments === */
@media (max-width: 600px) {
  .cookies-banner { padding: 1.25rem 1rem 1rem; }
  .cookies-actions { flex-direction: column; }
  .cookies-btn { width: 100%; }
  .cookies-actions--panel { flex-direction: column-reverse; }
  .cookies-reopener { bottom: 5.5rem; left: 0.75rem; width: 38px; height: 38px; font-size: 1.1rem; }
}

/* ============================================================
   28. EXIT POPUP
   ============================================================ */

.exit-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 58, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-popup);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.exit-popup-overlay--open {
  opacity: 1;
  visibility: visible;
}

.exit-popup {
  background: #ffffff;
  border-radius: 20px;
  max-width: 460px;
  width: 100%;
  position: relative;
  transform: translateY(36px) scale(0.97);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(11, 31, 58, 0.28), 0 8px 24px rgba(11, 31, 58, 0.12);
}

.exit-popup-overlay--open .exit-popup {
  transform: translateY(0) scale(1);
}

.exit-popup__accent {
  background: linear-gradient(135deg, #0B1F3A 0%, #163252 100%);
  padding: 1.75rem 2rem 2rem;
  text-align: center;
  position: relative;
}

.exit-popup__accent::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 12px solid #163252;
}

.exit-popup__badge {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-navy);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 0.85rem;
}

.exit-popup__headline {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 1.2;
  margin: 0;
}

.exit-popup__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  z-index: 1;
}

.exit-popup__close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.exit-popup__body {
  padding: 2rem 2rem 1.75rem;
}

.exit-popup__sub {
  color: #111827 !important;
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  text-align: center;
}

.exit-popup__perks {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  background: #F8FAFC;
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

.exit-popup__perk {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.84rem;
  color: #374151;
  font-weight: 500;
}

.exit-popup__perk-icon {
  width: 18px;
  height: 18px;
  background: #059669;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 800;
  flex-shrink: 0;
}

.exit-popup h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
  color: var(--color-gold);
}

.exit-popup p {
  font-size: var(--text-sm);
  color: rgba(200, 208, 220, 0.8);
  margin-bottom: var(--space-6);
}

.exit-popup__dismiss {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: #9CA3AF;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: color 0.2s;
  width: 100%;
  text-align: center;
}

.exit-popup__dismiss:hover {
  color: #6B7A8D;
}

/* Exit popup — simple variant (no dark accent) */
.exit-popup--simple {
  padding: 2rem;
  overflow: visible;
}

.exit-popup--simple .exit-popup__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: rgba(11,31,58,0.08);
  color: var(--color-navy);
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.exit-popup--simple .exit-popup__close:hover {
  background: rgba(11,31,58,0.15);
  color: var(--color-navy);
}

.exit-popup__top {
  text-align: center;
  margin-bottom: 1.5rem;
}

.exit-popup__top .exit-popup__badge {
  background: rgba(201,168,76,0.15);
  color: var(--color-gold);
  border: 1px solid rgba(201,168,76,0.3);
  margin-bottom: 0.75rem;
}

.exit-popup--simple .exit-popup__headline {
  color: var(--color-navy);
  font-size: clamp(1.3rem, 3vw, 1.55rem);
  margin-bottom: 0.4rem;
}

.exit-popup--simple .exit-popup__sub {
  color: var(--color-text-muted) !important;
  margin-bottom: 0;
  font-size: 0.875rem;
}

.exit-popup__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.exit-popup--simple form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.exit-popup--simple .form-group {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .exit-popup__fields {
    grid-template-columns: 1fr;
  }
  .exit-popup--simple {
    padding: 1.5rem 1.25rem;
  }
}

/* ============================================================
   29. MOBILE STICKY CTA BAR
   ============================================================ */

.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-navy);
  border-top: 2px solid var(--color-gold);
  height: 56px;
  opacity: 0;
  transform: translateY(100%);
  transition: all var(--transition-slow);
}

.mobile-sticky-cta--visible {
  opacity: 1;
  transform: translateY(0);
}

.mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
  height: 100%;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-white);
  border-right: 1px solid rgba(200, 208, 220, 0.1);
  transition: background-color var(--transition-base);
}

.mobile-cta-btn:last-child {
  border-right: none;
}

.mobile-cta-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.mobile-cta-call {
  background-color: rgba(201, 168, 76, 0.15);
}

.mobile-cta-whatsapp {
  background-color: rgba(37, 211, 102, 0.15);
}

/* ============================================================
   30. LEGAL PAGES
   ============================================================ */

.legal-hero {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: calc(6rem + var(--space-16)) 0 var(--space-12);
}

.legal-hero h1 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.legal-meta {
  font-size: var(--text-sm);
  color: rgba(200, 208, 220, 0.6);
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-12) var(--container-pad);
}

.legal-content h2 {
  font-size: var(--text-xl);
  color: var(--color-navy);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.legal-content p, .legal-content li {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.8;
}

.legal-placeholder {
  background-color: rgba(217, 64, 64, 0.06);
  border-left: 3px solid var(--color-error);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.placeholder-text {
  color: var(--color-silver) !important;
  font-style: italic;
}

/* ============================================================
   31. SECTION: DISABILITY / CHECKLIST
   ============================================================ */

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.check-list li::before {
  content: '✓';
  color: var(--color-gold);
  font-weight: 700;
  font-size: var(--text-base);
  flex-shrink: 0;
  margin-top: 1px;
}

.cross-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cross-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
}

.cross-list li::before {
  content: '✗';
  color: var(--color-error);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   32. TEL LINK
   ============================================================ */

.tel-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.tel-link:hover {
  color: var(--color-gold);
}

/* ============================================================
   33. SCROLL ANIMATIONS
   ============================================================ */

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }

/* ============================================================
   34. 404 PAGE
   ============================================================ */

.page-404 {
  min-height: 100vh;
  background-color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--container-pad);
  position: relative;
  overflow: hidden;
}

.page-404__watermark {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(10rem, 30vw, 20rem);
  font-weight: 700;
  color: rgba(201, 168, 76, 0.08);
  user-select: none;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  white-space: nowrap;
}

.page-404__inner {
  position: relative;
  z-index: 1;
}

.page-404 h1 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.page-404 p {
  color: rgba(200, 208, 220, 0.7);
  margin-bottom: var(--space-8);
}

.page-404__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
}

/* ============================================================
   35. PRINT STYLES
   ============================================================ */

@media print {
  nav,
  footer,
  .sidebar,
  .floating-bar,
  .cta-banner,
  .cookies-banner,
  .exit-popup-overlay,
  .mobile-sticky-cta,
  .nav,
  .article-cta,
  .article-share,
  .breadcrumb {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  h1, h2, h3, h4 {
    color: #000;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  .article-content {
    max-width: 100%;
  }

  .article-footer::after {
    content: "Źródło: pozabankiem.pl";
    display: block;
    margin-top: 24pt;
    font-size: 9pt;
    color: #555;
  }
}

/* ============================================================
   36. RESPONSIVE — BREAKPOINTS
   ============================================================ */

/* 1280px */
@media (max-width: 1280px) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

/* 1024px */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps::before {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-8-4 {
    grid-template-columns: 1fr;
  }

  .sidebar-sticky {
    position: static;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .floating-bar {
    right: var(--space-4);
  }
}

/* 768px */
@media (max-width: 768px) {
  .nav__menu,
  .nav__actions {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__social-proof {
    flex-direction: column;
    gap: var(--space-3);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .floating-bar {
    right: var(--space-3);
  }

  .floating-bar__item {
    width: 40px;
    height: 40px;
  }

  .floating-bar__tooltip {
    display: none;
  }

  .mobile-sticky-cta {
    display: flex;
  }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    padding: var(--space-3) var(--space-5);
    white-space: nowrap;
  }

  .article-cta {
    flex-direction: column;
    text-align: center;
  }

  .cta-banner {
    padding: var(--space-8) var(--space-6);
  }

  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
  }

  .filter-tab {
    white-space: nowrap;
  }
}

/* 480px */
@media (max-width: 480px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 7rem;
  }

  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .section--lg {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .alpha-tabs {
    gap: 3px;
  }

  .alpha-tab {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  .messaging-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .messaging-btn {
    justify-content: center;
  }
}

/* ============================================================
   37. FOCUS & ACCESSIBILITY
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to content */
.skip-link {
  position: absolute;
  top: -999px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-gold);
  color: var(--color-navy);
  font-weight: 700;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ============================================================
   38. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-up {
    opacity: 1;
    transform: none;
  }

  .floating-bar__item {
    animation: none;
  }

  .hero__gold-line {
    width: 80px;
    transition: none;
  }
}

/* ============================================================
   39. UTILITY CLASSES
   ============================================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.hidden { display: none !important; }
.invisible { visibility: hidden; }

.max-w-prose { max-width: 65ch; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 54rem; }
.max-w-4xl { max-width: 64rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.w-full { width: 100%; }

.relative { position: relative; }

.d-inline { display: inline; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* ============================================================
   NEW: MODERN FOOTER
   ============================================================ */

.footer__grid--modern {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 0.7fr 1.3fr;
  gap: var(--space-8);
  padding-bottom: var(--space-10);
}

.footer__col--newsletter {
  display: flex;
  flex-direction: column;
}

.footer__newsletter-info {
  color: rgba(200,208,220,0.7);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
  .footer__grid--modern {
    grid-template-columns: 1fr 1fr;
  }
  .footer__col--newsletter {
    grid-column: 1 / -1;
  }
}

.footer__col--dane,
.footer__col--compliance {
  display: none;
}

@media (max-width: 768px) {
  .footer__col--dane,
  .footer__col--compliance {
    display: block;
  }
}

/* Desktop: legal links above company data in bottom bar */
@media (min-width: 769px) {
  .footer__legal {
    display: flex;
    flex-direction: column;
  }

  .footer__legal-links {
    order: -1;
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 2rem;
    text-align: left;
    align-items: center;
  }

  .footer__legal-links a {
    color: rgba(200,208,220,0.6);
    font-weight: 400;
  }

  .footer__legal-links a:hover {
    color: var(--color-gold);
  }

  .footer__imprint-block {
    order: 0;
  }

  .footer__disclaimers {
    display: block;
    margin-top: 1.25rem;
  }

  .footer__disclaimers .footer__disclaimer {
    display: inline;
    margin-top: 0;
  }

  .footer__disclaimers .footer__disclaimer + .footer__disclaimer::before {
    content: ' ';
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__tagline {
  color: rgba(200,208,220,0.7);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 340px;
}

.footer__contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.footer__cta-tel,
.footer__cta-mail {
  color: rgba(200,208,220,0.85);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-base);
  display: inline-block;
}

.footer__cta-tel {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-gold);
}

.footer__cta-tel:hover,
.footer__cta-mail:hover { color: var(--color-white); }

.footer__cta-btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.footer__col {}

.footer__heading {
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__list a {
  color: rgba(200,208,220,0.7);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-base);
}

.footer__list a:hover { color: var(--color-gold); }

.footer__list--data li {
  color: rgba(200,208,220,0.6);
  font-size: var(--text-sm);
}

.footer__list--data a {
  color: rgba(200,208,220,0.6);
  font-weight: 400;
}

.footer__list--data a:hover { color: rgba(200,208,220,0.9); }

/* ============================================================
   NEW: BRANCH CARDS (faktoring page)
   ============================================================ */

.branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.125rem;
  margin-top: 2.5rem;
}

.branch-card {
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  padding: 1.4rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.branch-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.branch-card__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}

.branch-card h3 {
  font-size: var(--text-base);
  color: var(--color-navy);
  margin-bottom: 0.3rem;
}

.branch-card p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   NEW: BENEFIT CARDS DARK (faktoring page)
   ============================================================ */

.benefit-card-dark {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg, 12px);
  padding: 2rem;
  transition: background var(--transition-base);
}

.benefit-card-dark--gold {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.3);
}

.benefit-card-dark__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.benefit-card-dark h3 {
  color: var(--color-white);
  font-size: var(--text-base);
  margin-bottom: 0.75rem;
}

.benefit-card-dark p {
  color: rgba(200,208,220,0.8);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   NEW: HERO TRUST ITEMS
   ============================================================ */

.trust-item {
  font-size: var(--text-sm);
  color: rgba(200,208,220,0.8);
  font-weight: 500;
}

/* ============================================================
   MOBILE IMPROVEMENTS — comprehensive
   ============================================================ */

@media (max-width: 768px) {

  /* Hero */
  .hero {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  .hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    line-height: 1.2;
  }

  .hero__sub {
    font-size: var(--text-base);
  }

  .hero__trust {
    gap: 0.75rem !important;
    flex-wrap: wrap;
  }

  .hero__ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .hero__ctas .btn {
    text-align: center;
    justify-content: center;
  }

  /* Sections */
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .section-header h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* Steps — vertical on mobile */
  .steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .steps::before {
    display: none;
  }

  .step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem;
  }

  .step__number {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
  }

  .step__title {
    font-size: var(--text-base);
    margin-bottom: 0.3rem;
  }

  /* Product cards */
  .product-card {
    padding: 1.75rem 1.5rem;
  }

  /* Branches grid — 1 col on small screens */
  .branches-grid {
    grid-template-columns: 1fr;
  }

  /* Benefit cards */
  .benefit-card-dark {
    padding: 1.5rem;
  }

  /* Params table */
  .params-table td {
    padding: 1rem 0.75rem;
    font-size: var(--text-sm);
  }

  /* Tabs */
  .tabs__tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .tabs__tabs::-webkit-scrollbar { display: none; }

  .tabs__tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.6rem 1rem;
    font-size: var(--text-sm);
  }

  /* FAQ accordion */
  .accordion__trigger {
    font-size: var(--text-sm);
    padding: 1rem 1.25rem;
  }

  /* Comparison grid */
  .comparison-block {
    padding: 1.5rem;
  }

  /* CTA block */
  .cta-block {
    padding: 2.5rem 1.5rem;
  }

  .cta-block h2 {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  }

  /* Form */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Grid 8-4 (sidebar layouts) */
  .grid-8-4 {
    grid-template-columns: 1fr;
  }

  .sidebar-widget {
    position: static !important;
  }

  /* NOT-FOR page */
  .not-for-grid {
    grid-template-columns: 1fr;
  }

  /* Feature cards */
  .feature-card {
    padding: 1.5rem;
  }

  /* Modern footer */
  .footer__grid--modern {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Kolejność na mobile: marka (z "Skontaktuj się z nami") -> Newsletter -> Produkty -> Firma -> Dane -> Compliance */
  .footer__brand { order: 1; }
  .footer__col--newsletter { order: 2; }
  .footer__col[aria-label="Produkty"] { order: 3; }
  .footer__col[aria-label="Firma"] { order: 4; }
  .footer__col--dane { order: 5; }
  .footer__col--compliance { order: 6; }

  .footer__tagline {
    max-width: 100%;
  }

  .footer__contact-block {
    gap: var(--space-3);
  }

  .footer__cta-btn {
    align-self: stretch;
    text-align: center;
  }

  /* Mobile sticky bar improvements */
  .mobile-sticky-cta {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .mobile-cta-btn {
    font-size: 0.8rem;
    padding: 0.65rem 0.75rem;
  }

  /* Breadcrumb */
  .breadcrumb ol {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

@media (max-width: 480px) {

  /* Tighter container padding */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hero */
  .hero {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }

  /* Smaller eyebrow */
  .eyebrow {
    font-size: 0.7rem;
  }

  /* Steps even more compact */
  .step {
    padding: 1rem;
    gap: 1rem;
  }

  .step__number {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }

  /* Stats 1-col */
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .stat__number {
    font-size: 2.25rem;
  }

  /* Branch card — tighter */
  .branch-card {
    padding: 1.1rem;
    gap: 0.75rem;
  }

  .branch-card__icon {
    font-size: 1.5rem;
  }

  /* Sections tighter */
  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Buttons full width in hero */
  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Cards */
  .card {
    padding: 1.5rem 1.25rem;
  }

  /* CTA section */
  .cta-block {
    padding: 2rem 1.25rem;
  }

  /* Footer legal text */
  .footer__legal {
    padding-top: var(--space-5);
    padding-bottom: 4rem;
  }

  .footer__legal-bar {
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer__legal-links {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
  }

  .footer__legal-links a {
    color: var(--color-gold);
    font-weight: 400;
  }

  .footer__imprint-block,
  .footer__legal-links,
  .footer__copyright {
    display: none;
  }

  /* Keep disclaimers visible on mobile */
  .footer__disclaimers {
    display: block;
    margin-top: 1.25rem;
  }

  .footer__disclaimers .footer__disclaimer {
    display: block;
    font-size: 0.78rem;
    color: rgba(200,208,220,0.55);
    margin-top: 0.5rem;
    text-align: center;
  }
}


/* ============================================================
   HOMEPAGE: HERO PRODUCT CHIPS
   ============================================================ */

.hero__products-row {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0.75rem;
  margin: 1.75rem 0 2rem;
}

.hero__product-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  color: white;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.hero__product-chip:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--color-gold);
  transform: translateY(-1px);
}

.hero__product-chip-icon {
  font-size: 1rem;
}

/* ============================================================
   HOMEPAGE: TRUST BAR
   ============================================================ */

.trust-bar {
  background: var(--color-navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1.25rem 0;
}

.trust-bar__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.6rem 1.5rem;
  color: white;
  min-width: 160px;
}

.trust-bar__value {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-gold);
  line-height: 1.2;
}

.trust-bar__label {
  font-size: 0.75rem;
  color: rgba(200,208,220,0.7);
  margin-top: 0.2rem;
}

.trust-bar__divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ============================================================
   HOMEPAGE: PRODUCT SLIDER / CAROUSEL
   ============================================================ */

.section--off {
  background: var(--color-surface, #F8FAFC);
}

.slider-wrap {
  position: relative;
  overflow: hidden;
  padding-bottom: 3.5rem;
}

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 1.25rem;
  padding: 1rem 2rem 1.5rem;
  cursor: grab;
}

.slider::-webkit-scrollbar { display: none; }
.slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.slider-controls { display: flex; }

.slider-card {
  flex: 0 0 calc((100vw - 4rem - 2 * 1.25rem) / 3);
  scroll-snap-align: start;
  background: white;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 2px 12px rgba(11,31,58,0.06);
  transition: box-shadow 0.2s, transform 0.2s;
  user-select: none;
}

.slider-card:hover {
  box-shadow: 0 6px 24px rgba(11,31,58,0.1);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .slider {
    padding-left: calc(50vw - 47vw / 2);
    padding-right: calc(50vw - 47vw / 2);
    gap: 1rem;
  }

  .slider-card {
    flex: 0 0 82vw;
    scroll-snap-align: center;
  }
}

.slider-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.slider-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  background: rgba(196,160,101,0.1);
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
  width: fit-content;
}

.slider-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
}

.slider-card__desc {
  font-size: 0.9rem;
  color: var(--color-text-muted, #6B7A8D);
  line-height: 1.6;
  margin: 0;
}

.slider-card__list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.slider-card__list li {
  font-size: 0.85rem;
  color: var(--color-navy);
  padding-left: 1.25rem;
  position: relative;
}

.slider-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: 700;
}

.slider-card__cta {
  margin-top: auto;
  text-align: center;
  align-self: flex-start;
}

.slider-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
}

.slider-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border, #E2E8F0);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-navy);
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.slider-arrow:hover {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: white;
}

.slider-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border, #E2E8F0);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, width 0.2s;
}

.slider-dot.is-active {
  background: var(--color-navy);
  width: 20px;
  border-radius: 4px;
}

/* ============================================================
   HOMEPAGE: REVIEWS / OPINIE
   ============================================================ */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.review-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg, 12px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  transition: background 0.2s, border-color 0.2s;
}

.review-card--gold {
  border-color: rgba(196,160,101,0.35);
  background: rgba(196,160,101,0.07);
}

.review-card__stars {
  color: var(--color-gold);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

.review-card__text {
  color: rgba(230,235,242,0.9);
  font-size: 0.9rem;
  line-height: 1.65;
  flex: 1;
  margin: 0;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.review-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.review-card__name {
  font-weight: 600;
  color: white;
  font-size: 0.875rem;
}

.review-card__role {
  font-size: 0.775rem;
  color: rgba(200,208,220,0.6);
}

/* ============================================================
   HOMEPAGE: FAQ ACCORDION
   ============================================================ */

.btn--outline-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  border: 1.5px solid var(--color-navy);
  border-radius: 6px;
  background: transparent;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn--outline-navy:hover {
  background: var(--color-navy);
  color: white;
}

/* ============================================================
   HOMEPAGE: KNOWLEDGE TABS
   ============================================================ */

.knowledge-tabs {
  margin-top: 2.5rem;
}

.knowledge-tabs__nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-border, #E2E8F0);
  margin-bottom: 2rem;
  padding-bottom: 0;
}

.knowledge-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.65rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted, #6B7A8D);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  border-radius: 4px 4px 0 0;
}

.knowledge-tab:hover {
  color: var(--color-navy);
}

.knowledge-tab--active,
.knowledge-tab[aria-selected="true"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.knowledge-panel { display: none; }
.knowledge-panel--active { display: block; }
.knowledge-panel--hidden { display: none; }

/* ============================================================
   HOMEPAGE: BLOG CARDS (used inside knowledge tabs)
   ============================================================ */

.blog-card {
  background: white;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.blog-card:hover {
  box-shadow: 0 6px 20px rgba(11,31,58,0.08);
  transform: translateY(-2px);
}

.blog-card__thumb {
  height: 140px;
  background: var(--color-navy);
}

.blog-card__thumb--factoring { background: linear-gradient(135deg, #0B1F3A 0%, #1A4A8A 100%); }
.blog-card__thumb--cashflow  { background: linear-gradient(135deg, #1a3550 0%, #0d6e4e 100%); }
.blog-card__thumb--mortgage  { background: linear-gradient(135deg, #2d1b69 0%, #0B1F3A 100%); }

.blog-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.blog-card__cat {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.blog-card__title {
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.4;
}

.blog-card__lead {
  font-size: 0.845rem;
  color: var(--color-text-muted, #6B7A8D);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.blog-card__meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #6B7A8D);
  margin-top: 0.25rem;
}

.blog-card__cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.2s;
}

.blog-card__cta:hover { color: var(--color-gold); }

/* ============================================================
   HOMEPAGE: CTA BANNER
   ============================================================ */

.cta-banner {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg, 12px);
  padding: 3rem 2rem;
  text-align: center;
}

.cta-banner h2 {
  margin-bottom: 0.75rem;
}

.cta-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* ============================================================
   HOMEPAGE: COVERAGE / SEO
   ============================================================ */

.section--sm { padding: 1.5rem 0; }

.coverage-section {
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-md, 8px);
  padding: 1.75rem 2rem;
  text-align: center;
}

.coverage-section p {
  font-size: 0.82rem;
  color: var(--color-text-muted, #6B7A8D);
  margin: 0 0 0.6rem;
  line-height: 1.65;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.coverage-section p:last-child { margin-bottom: 0; }

/* ============================================================
   UTILITIES
   ============================================================ */

.mt-12 { margin-top: 3rem; }
.text-center { text-align: center; }

/* ============================================================
   RESPONSIVE — TRUST BAR
   ============================================================ */

@media (max-width: 768px) {
  .trust-bar__grid {
    gap: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .trust-bar__item {
    flex-direction: row;
    justify-content: center;
    text-align: center;
    padding: 0.6rem 0;
    gap: 0.75rem;
    min-width: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .trust-bar__item:last-child { border-bottom: none; }

  .trust-bar__divider { display: none; }

  .trust-bar__value { font-size: 0.95rem; min-width: 110px; }
}

/* ============================================================
   RESPONSIVE — SLIDER
   ============================================================ */

@media (max-width: 768px) {
  .slider { padding: 1rem 1rem 1.5rem; gap: 1rem; }
  .slider-card { flex: 0 0 calc(100vw - 2.5rem); padding: 1.5rem 1.25rem; }

  .slider-controls { padding: 0; }
}

/* ============================================================
   RESPONSIVE — REVIEWS
   ============================================================ */

@media (max-width: 1024px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { padding: 1.25rem; }
}

/* ============================================================
   RESPONSIVE — KNOWLEDGE TABS
   ============================================================ */

@media (max-width: 640px) {
  .knowledge-tabs__nav {
    gap: 0.25rem;
  }

  .knowledge-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
}

/* ============================================================
   RESPONSIVE — HERO PRODUCT CHIPS
   ============================================================ */

@media (max-width: 768px) {
  .hero__products-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .hero__product-chip {
    font-size: 0.875rem;
    padding: 0.75rem 1.1rem;
    justify-content: flex-start;
  }
}

/* ============================================================
   RESPONSIVE — CTA BANNER
   ============================================================ */

@media (max-width: 640px) {
  .cta-banner { padding: 2rem 1.25rem; }
  .cta-banner__actions { flex-direction: column; align-items: center; }
}

/* ============================================================
   QUICK LINKS (SEO hashtag section)
   ============================================================ */

.quick-links-section {
  padding: 2.5rem 0;
  background: var(--color-surface, #F8FAFC);
  border-top: 1px solid var(--color-border, #E2E8F0);
}

@media (max-width: 768px) {
  .quick-links-section { display: none; }
}

.quick-links__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted, #6B7A8D);
  text-align: center;
  margin: 0 0 1rem;
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.quick-link {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: white;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--color-navy);
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.quick-link:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: white;
}

/* ============================================================
   FOOTER IMPRINT BLOCK
   ============================================================ */

.footer__imprint-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.2rem 1.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 0.75rem;
  font-weight: 700;
  align-items: baseline;
}

.footer__imprint-block p {
  margin: 0;
}

.footer__imprint-firm {
  margin-bottom: 0.25rem !important;
}

.footer__imprint-company {
  font-weight: 700;
  color: var(--color-gold);
  font-size: 0.9rem;
}

/* ============================================================
   GLOSSARY (slowniczek.html)
   ============================================================ */

.glossary {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.glossary__item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  align-items: baseline;
}

.glossary__item:last-child {
  border-bottom: none;
}

.glossary__term {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1rem;
}

.glossary__def {
  color: var(--color-text, #1A2B3C);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 640px) {
  .glossary__item {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* ============================================================
   BLOG FILTERS (blog.html)
   ============================================================ */

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

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Blog controls wrapper */
.blog-controls {
  background: var(--color-surface, #F8F9FB);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.blog-controls__search .blog-search {
  max-width: 100%;
}

.blog-controls__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}

.blog-controls__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-controls__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted, #6B7A8D);
}

.blog-controls__right {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0;
}

.blog-filter {
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--color-border, #E2E8F0);
  border-radius: 100px;
  background: white;
  color: var(--color-navy);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  font-family: inherit;
}

.blog-filter:hover,
.blog-filter--active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: white;
}

/* ============================================================
   CONTACT LAYOUT (kontakt.html)
   ============================================================ */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-info__card {
  background: var(--color-navy);
  border-radius: var(--radius-lg, 12px);
  padding: 1.75rem;
  color: white;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.contact-info__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-info__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.contact-info__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold, #C9A84C);
  margin-bottom: 0.2rem;
}

.contact-info__value {
  color: white;
  font-size: 0.95rem;
  text-decoration: none;
}

a.contact-info__value:hover {
  color: var(--color-gold, #C9A84C);
}

/* ============================================================
   FORM ROWS (shared across forms)
   ============================================================ */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ARTICLE LAYOUT (artykul.html)
   ============================================================ */

/* Zmniejszone rozmiary nagłówków w artykułach */
.article-body h1,
.article-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.2;
  font-weight: 700;
  margin-top: 1rem;
}

.article-body h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin: 2rem 0 0.75rem;
  color: var(--color-navy);
}

.article-body h3 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 1.5rem 0 0.5rem;
  color: var(--color-navy);
}

/* Więcej przestrzeni między nawigacją a treścią */
.article-layout ~ * { }
main > .container {
  padding-top: 2.5rem;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
  .article-sidebar {
    display: none;
  }
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted, #6B7A8D);
  margin-top: 1.75rem;
  margin-bottom: 0;
}

.article-tags {
  margin-top: 1.25rem !important;
  margin-bottom: 0;
}

.article-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-muted, #6B7A8D);
  border-left: 4px solid var(--color-gold, #C9A84C);
  padding-left: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.article-content h2 {
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
  color: var(--color-navy);
}

.article-content h3 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-navy);
}

.article-content p,
.article-content li {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--color-text, #1A2B3C);
}

.article-content ul,
.article-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.article-content li {
  margin-bottom: 0.35rem;
}

/* Sidebar widgets */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-widget {
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem 1.5rem;
}

.sidebar-widget h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-popular {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-popular a {
  font-size: 0.85rem;
  color: var(--color-navy);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
}

.sidebar-popular a:last-child {
  border-bottom: none;
}

.sidebar-popular a:hover {
  color: var(--color-gold, #C9A84C);
}

/* ============================================================
   PROCESS (jak-dzialamy) — step-detailed layout
   ============================================================ */

.tabs__nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--color-border, #E2E8F0);
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.tabs__tab {
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tabs__tab:hover { color: var(--color-navy); }

.tabs__tab--active {
  color: var(--color-navy);
  border-bottom-color: var(--color-gold);
  background: var(--color-surface);
}

.tabs__panel { display: block; }
.tabs__panel--hidden { display: none; }

.steps--detailed {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.step-detailed {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem;
  background: var(--color-white);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border, #E2E8F0);
  box-shadow: 0 1px 6px rgba(11,31,58,0.06);
  transition: box-shadow 0.2s;
}

.step-detailed:hover {
  box-shadow: 0 4px 16px rgba(11,31,58,0.10);
}

.step-detailed__number {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  padding-top: 0.25rem;
  text-align: center;
}

.step-detailed__content h3 {
  color: var(--color-navy);
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.step-detailed__content p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

.step-detailed__time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-top: 0.75rem;
  background: rgba(201,168,76,0.08);
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
}

.step-detailed__time svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.step-detailed__note {
  margin-top: 0.75rem;
  background: var(--color-surface, #F8FAFC);
  border-left: 3px solid var(--color-gold);
  padding: 0.65rem 0.9rem;
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.step-detailed__list {
  margin: 0.75rem 0 0 1.25rem;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.9;
}

.process-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ============================================================
   NOT-FOR page (dla-kogo-nie)
   ============================================================ */

.not-for-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 0;
}

.not-for-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--color-white);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border, #E2E8F0);
  box-shadow: 0 1px 6px rgba(11,31,58,0.06);
  transition: box-shadow 0.2s;
}

.not-for-card:hover {
  box-shadow: 0 4px 16px rgba(11,31,58,0.10);
}

.not-for-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #F8FAFC);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #E2E8F0);
}

.not-for-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-gold);
}

.not-for-card__content h3 {
  color: var(--color-navy);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.not-for-card__content p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.not-for-card__alt {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface, #F8FAFC);
  border-radius: var(--radius-md, 8px);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border, #E2E8F0);
}

/* checkpoints on navy background */
.checkpoints {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkpoint {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-md, 8px);
  border: 1px solid rgba(255,255,255,0.1);
}

.checkpoint__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-gold);
  margin-top: 1px;
}

.checkpoints--light .checkpoint span {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ============================================================
   GLOSSARY (słowniczek) — card style
   ============================================================ */

.glossary-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.glossary-card {
  background: var(--color-white);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border, #E2E8F0);
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(11,31,58,0.05);
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
}

.glossary-card:hover {
  box-shadow: 0 6px 20px rgba(11,31,58,0.1);
  transform: translateY(-2px);
}

.glossary-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}

.glossary-card__term {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.6rem;
  line-height: 1.25;
}

.glossary-card__def {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.glossary-letter-section {
  margin-bottom: 2rem;
}

.glossary-letter-heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
  border-bottom: 3px solid var(--color-gold);
  display: inline-block;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .glossary-cards { grid-template-columns: 1fr; }
  .not-for-grid { grid-template-columns: 1fr; }
  .step-detailed { grid-template-columns: 52px 1fr; gap: 1rem; padding: 1.25rem; }
  .step-detailed__number { font-size: 1.75rem; }
}

/* ── ARTICLE INTERNAL LINKS (bottom) ─────────────────────── */
.article-related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
}

.article-related__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold, #C9A84C);
  margin-bottom: 1rem;
}

.article-related__link {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--color-navy, #0B1F3A);
  font-size: 0.9rem;
  line-height: 1.45;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  transition: color 0.15s;
}

.article-related__link:last-child { border-bottom: none; }

.article-related__link:hover { color: var(--color-gold, #C9A84C); }

.article-related__arrow {
  color: var(--color-gold, #C9A84C);
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.article-related__link--product {
  font-weight: 600;
}

@media (max-width: 600px) {
  .article-related { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE RATING
═══════════════════════════════════════════════════════════ */
.article-rating {
  margin: 3rem 0 0;
  padding: 2rem;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 12px;
  text-align: center;
}

.article-rating__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy, #0B1F3A);
  margin: 0 0 1rem;
}

.article-rating__stars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.article-rating__star {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #D1D5DB;
  line-height: 1;
  padding: 0.1rem;
  transition: color 0.15s, transform 0.1s;
}

.article-rating__star:hover,
.article-rating__star.is-hovered,
.article-rating__star.is-active {
  color: var(--color-gold, #C9A84C);
  transform: scale(1.15);
}

.article-rating__feedback {
  font-size: var(--text-sm);
  color: var(--color-text-muted, #6B7A8D);
  min-height: 1.4em;
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE COMMENTS
═══════════════════════════════════════════════════════════ */
.article-comments {
  margin: 2.5rem 0 0;
  padding: 2rem;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 12px;
}

.article-comments__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy, #0B1F3A);
  margin: 0 0 1.5rem;
}

.article-comments__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.article-comments__list:empty { margin-bottom: 0; }

.comment-item {
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
}

.comment-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.comment-item__name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-navy, #0B1F3A);
}

.comment-item__date {
  font-size: 0.78rem;
  color: var(--color-text-muted, #6B7A8D);
}

.comment-item__body {
  font-size: var(--text-sm);
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-form__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-navy, #0B1F3A);
  margin: 0;
}

.comment-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.comment-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: #374151;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.comment-form textarea:focus,
.comment-form input:focus {
  outline: none;
  border-color: var(--color-gold, #C9A84C);
}

.comment-form__success {
  display: none;
  padding: 1rem;
  background: #D1FAE5;
  border-radius: 8px;
  color: #065F46;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}

.comment-form__success.is-visible { display: block; }

@media (max-width: 600px) {
  .comment-form__row { grid-template-columns: 1fr; }
  .article-rating__star { font-size: 1.65rem; }
}

/* ═══════════════════════════════════════════════════════════
   BLOG LEVEL FILTERS & BADGES
═══════════════════════════════════════════════════════════ */
.blog-search-wrap {
  margin-bottom: 1.5rem;
}

.blog-search {
  width: 100%;
  max-width: 480px;
  padding: 0.7rem 1.1rem 0.7rem 2.6rem;
  border: 1.5px solid var(--color-border, #E2E8F0);
  border-radius: 50px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.85rem center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.blog-search:focus {
  border-color: var(--color-gold, #C9A84C);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

.blog-filters--level {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
}

.blog-level {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  border: 1.5px solid var(--color-border, #E2E8F0);
  background: #fff;
  color: var(--color-text-muted, #6B7A8D);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.blog-level:hover {
  border-color: var(--color-gold, #C9A84C);
  color: var(--color-navy, #0B1F3A);
}

.blog-level--active {
  background: var(--color-navy, #0B1F3A);
  border-color: var(--color-navy, #0B1F3A);
  color: #fff;
}

.blog-level__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.blog-level__dot--podstawy { background: #22c55e; }
.blog-level__dot--sredni { background: #eab308; }
.blog-level__dot--zaawansowany { background: #ef4444; }

.blog-sort {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  border: 1.5px solid var(--color-border, #E2E8F0);
  background: #fff;
  color: var(--color-navy);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.blog-sort--active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

.blog-sort:hover:not(.blog-sort--active) {
  border-color: var(--color-gold);
}

@media (max-width: 768px) {
  .blog-controls__right {
    margin-left: 0;
  }
  .blog-controls {
    padding: 1.1rem;
  }
}

/* Level badge on cards */
.blog-card__level {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.blog-card__level--podstawy {
  background: #EAF3DE;
  color: #3B6D11;
}

.blog-card__level--sredni {
  background: #FAEEDA;
  color: #854F0B;
}

.blog-card__level--zaawansowany {
  background: #FCEBEB;
  color: #A32D2D;
}

/* Empty state when no cards match */
.blog-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted, #6B7A8D);
  font-size: 0.95rem;
  display: none;
}

.blog-grid__empty.is-visible { display: block; }

/* ============================================================
   ARTICLE KB GROUP — DANE REJESTROWE MOBILE BLOCK
   ============================================================ */

.article-dane-mobile {
  display: none;
}

@media (max-width: 768px) {
  .article-dane-mobile {
    display: block;
    background: var(--color-surface, #F8FAFC);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: var(--radius-lg, 12px);
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
  }

  .article-dane-mobile__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted, #6B7A8D);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border, #E2E8F0);
    padding-bottom: 0.5rem;
  }

  .article-dane-mobile__grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-text);
  }

  /* Hide sidebar Dane rejestrowe on mobile since we show it inline */
  .sidebar-widget--dane { display: none; }

  /* Hide bottom footer legal bar on mobile — info shown in DANE/COMPLIANCE columns */
  .footer__imprint-block,
  .footer__copyright { display: none !important; }
}

/* ============================================================
   MOBILE FIXES — GRIDS, SLIDERS, SIDEBAR
   ============================================================ */

/* Values grid (o-nas) — 1 col on mobile */
@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr !important;
  }

  /* Floating sidebar (pozyczki etc.) — hide on mobile */
  .floating-sidebar-wrap {
    display: none !important;
  }

  /* Regres comparison grid (faktoring) — stack vertically */
  .regres-grid {
    grid-template-columns: 1fr !important;
  }

  /* Steps 5-col grid — override !important from .steps--5 */
  .steps--5 {
    grid-template-columns: 1fr !important;
  }

  /* Process steps — ensure desc doesn't wrap to side */
  .step {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .step__number {
    flex-shrink: 0;
  }

  /* Blog filter controls — compact on mobile */
  .blog-controls__row {
    flex-direction: column;
    gap: 1rem;
  }

  .blog-controls__right {
    margin-left: 0;
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================================
   WHATSAPP WIDGET
   ============================================================ */
.wa-widget {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 1100;
}
@media (max-width: 768px) {
  .wa-widget { bottom: 68px; right: 12px; }
  .wa-popup { width: calc(100vw - 32px); right: 0; }
}

.wa-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wa-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,211,102,0.55); }
.wa-btn svg { width: 30px; height: 30px; fill: #fff; }

.wa-popup {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  display: none;
  transform: scale(0.92) translateY(8px);
  transform-origin: bottom right;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
}
.wa-popup.wa-popup--open {
  display: block;
  transform: scale(1) translateY(0);
  opacity: 1;
}
.wa-popup__head {
  background: #075E54;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-popup__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.3);
}
.wa-popup__info { color: #fff; }
.wa-popup__name { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.wa-popup__status { font-size: 0.78rem; opacity: 0.85; display: flex; align-items: center; gap: 4px; }
.wa-popup__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #25D366; display: inline-block; }
.wa-popup__body { padding: 16px; background: #ECE5DD; }
.wa-popup__bubble {
  background: #fff;
  border-radius: 0 8px 8px 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #333;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  margin-bottom: 12px;
}
.wa-popup__cta {
  display: block;
  width: 100%;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.wa-popup__cta:hover { background: #1ebe5c; color: #fff; }

/* ============================================================
   BLOG CTA BANNER — baner pod siatką artykułów na blog.html
   ============================================================ */
.blog-cta-banner {
  margin-top: 3rem;
  padding: 2.25rem 2rem;
  background: linear-gradient(135deg, var(--color-navy) 0%, #1A3558 100%);
  border-radius: var(--radius-lg, 12px);
  text-align: center;
}
.blog-cta-banner__text {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 1.25rem;
}
.blog-cta-banner .btn {
  display: inline-flex;
}

/* ============================================================
   ARTICLE CTA BOX — biały tekst na ciemnym tle
   ============================================================ */
.article-cta-box,
.article-cta-box p,
.article-cta-box h2,
.article-cta-box h3 {
  color: #fff;
}
.article-cta-box p {
  opacity: 0.9;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-gold, #C9A84C);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}