/*
 * WELES – main.css
 * Design system: techniczny, kontrastowy — czerwień marki + grafit.
 * Kolory pochodzą wprost z logo (grafiki/logo.png): #920101 / #7D7D7D / #F8F8F8.
 * Typografia: Space Grotesk (nagłówki) + Inter (UI) + JetBrains Mono (dane, endpointy).
 * ========================================================== */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Kolory marki (nadpisywane przez Customizer) */
  --color-primary:  #920101;
  --color-dark:     #16181A;
  --color-accent:   #B31217;

  /* --- Skala czerwieni (źródło: litery W/E/L/S w logo) --- */
  --red-950:  #2E0000;
  --red-900:  #4A0000;
  --red-800:  #6E0101;
  --red-700:  #920101;   /* czerwień logo */
  --red-600:  #B31217;
  --red-500:  #D02A2A;
  --red-300:  #F0A5A5;
  --red-200:  #F6C9C9;
  --red-100:  #FADFDF;
  --red-50:   #FDF3F3;

  /* --- Skala grafitu / stali (źródło: szare litery logo) --- */
  --ink-950:   #0F1113;
  --ink-900:   #16181A;
  --ink-800:   #212427;
  --ink-700:   #2E3236;
  --steel-600: #4A4F53;
  --steel-500: #7D7D7D;  /* szarość logo */
  --steel-400: #8B9195;
  --steel-300: #B9BEC1;
  --steel-200: #DCDFE1;
  --steel-100: #EBEDEE;
  --steel-50:  #F4F5F5;
  --paper:     #F8F8F8;  /* tło logo */
  --white:     #FFFFFF;

  /* Akcent (dawniej „złoto") */
  --accent:      var(--red-700);
  --accent-soft: var(--red-300);

  /* --- Aliasy wsteczne: stare nazwy używane w regułach niżej --- */
  --navy-50:   var(--steel-50);
  --navy-100:  var(--steel-100);
  --navy-200:  var(--steel-300);
  --navy-300:  var(--steel-400);
  --navy-400:  var(--steel-500);
  --gold:      var(--accent);
  --gold-soft: var(--accent-soft);

  --ivory:     var(--paper);
  --gray-50:   var(--steel-50);
  --gray-100:  var(--steel-100);
  --gray-200:  var(--steel-200);
  --gray-300:  var(--steel-300);
  --gray-400:  var(--steel-400);
  --gray-600:  var(--steel-600);
  --gray-800:  var(--ink-800);
  --gray-900:  var(--ink-900);

  /* Semantyczne */
  --color-text:        var(--ink-900);
  --color-text-muted:  var(--steel-600);
  --color-border:      var(--steel-200);
  --color-bg:          var(--white);
  --color-bg-alt:      var(--steel-50);
  --color-bg-soft:     var(--paper);

  /* Typografia */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;
  --font-serif:   var(--font-display);   /* alias wsteczny */
  --font-size-xs:   0.8125rem;
  --font-size-sm:   0.9375rem;
  --font-size-base: 1.0625rem;
  --font-size-lg:   1.1875rem;
  --font-size-xl:   1.375rem;
  --font-size-2xl:  1.75rem;
  --font-size-3xl:  2.25rem;
  --font-size-4xl:  2.875rem;
  --font-size-5xl:  3.75rem;
  --font-size-6xl:  4.75rem;

  /* Układ */
  --container-max: 1440px;
  --container-narrow: 860px;

  /* Odstępy */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;
  --sp-32: 8rem;

  /* Promienie – logo jest kanciaste, interfejs też */
  --radius-sm:  2px;
  --radius-md:  3px;
  --radius-lg:  4px;
  --radius-xl:  6px;
  --radius-2xl: 8px;
  --radius-pill: 999px;

  /* Cienie */
  --shadow-xs: 0 1px 2px rgba(15, 17, 19, 0.07);
  --shadow-sm: 0 2px 6px rgba(15, 17, 19, 0.07), 0 1px 2px rgba(15, 17, 19, 0.05);
  --shadow-md: 0 10px 24px -6px rgba(15, 17, 19, 0.14), 0 4px 8px -2px rgba(15, 17, 19, 0.07);
  --shadow-lg: 0 24px 48px -12px rgba(15, 17, 19, 0.20), 0 8px 16px -4px rgba(15, 17, 19, 0.09);
  --shadow-xl: 0 40px 80px -20px rgba(15, 17, 19, 0.26);
  --shadow-accent: 0 8px 28px -8px rgba(146, 1, 1, 0.45);
  --shadow-gold: var(--shadow-accent);   /* alias wsteczny */

  /* Animacje */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --tr-fast:    0.18s var(--ease-out);
  --tr-base:    0.28s var(--ease-out);
  --tr-slow:    0.5s var(--ease-out);

  /* Gradienty brand – ciemne powierzchnie: grafit z czerwoną krawędzią */
  --gradient-brand: linear-gradient(135deg, var(--ink-950) 0%, var(--ink-800) 52%, #3B0B0C 100%);
  --gradient-brand-soft: linear-gradient(135deg, #212427 0%, #4A4F53 45%, #6E0101 100%);
  --gradient-accent: linear-gradient(135deg, #920101 0%, #B31217 100%);
  --gradient-gold: var(--gradient-accent);   /* alias wsteczny */
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 110px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--color-primary); color: var(--white); }

/* Atrybut hidden musi wygrywać z regułami komponentów. Bez tego przycisk
   z klasą .btn (display: inline-flex) był widoczny mimo `hidden` — tak
   pokazywał się przedwcześnie „Zapisz wybór” w banerze zgód. */
[hidden] { display: none !important; }

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--color-dark); }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
h4 { font-size: var(--font-size-xl); }
p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* Screen reader */
.screen-reader-text, .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 0; left: 0;
  width: auto; height: auto;
  padding: var(--sp-3) var(--sp-6);
  background: var(--color-primary); color: var(--white);
  font-weight: 700; z-index: 9999; clip: auto;
}

/* Aspect ratio dla obrazów */
.card__img-wrap { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-50); }
.card__img      { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.card:hover .card__img { transform: scale(1.06); }
.post-hero__img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-8); } }

.layout-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-12);
  padding-block: var(--sp-16);
}
.layout-main--page { grid-template-columns: 1fr; max-width: var(--container-narrow); }

/* Element siatki ma domyślnie min-width:auto, więc szeroka tabela w treści
   rozpycha całą kolumnę — i to mimo opakowania jej w kontener z przewijaniem.
   Bez tej reguły polityka cookies dawała poziome przewijanie całej strony
   na każdej szerokości telefonu. */
.layout-main > * { min-width: 0; }

@media (max-width: 900px) {
  .layout-main { grid-template-columns: 1fr; gap: var(--sp-8); padding-block: var(--sp-10); }
  .layout-sidebar { display: none; }
}

/* ============================================================
   4. TYPOGRAFIA TREŚCI
   ============================================================ */
.entry-content { font-size: var(--font-size-lg); line-height: 1.8; color: var(--gray-800); }
.entry-content h2 { font-size: var(--font-size-3xl); margin-block: var(--sp-10) var(--sp-4); }
.entry-content h3 { font-size: var(--font-size-2xl); margin-block: var(--sp-8) var(--sp-3); }
.entry-content h4 { font-size: var(--font-size-xl); margin-block: var(--sp-6) var(--sp-2); font-family: var(--font-sans); font-weight: 700; }
.entry-content p  { margin-bottom: var(--sp-5); }
.entry-content > p:first-child::first-letter {
  font-family: var(--font-serif);
  font-size: 4.5em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.12em 0 0;
  color: var(--color-primary);
  font-weight: 700;
}
.entry-content a {
  color: var(--color-primary);
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--tr-base), color var(--tr-fast);
}
.entry-content a:hover { background-size: 100% 2px; color: var(--color-dark); }
.entry-content ul, .entry-content ol { padding-left: var(--sp-6); margin-bottom: var(--sp-5); list-style: revert; }
.entry-content li { margin-bottom: var(--sp-2); }
.entry-content blockquote {
  position: relative;
  border-left: 3px solid var(--accent);
  padding: var(--sp-2) var(--sp-6);
  margin-block: var(--sp-8);
  color: var(--ink-800);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 1.5;
}
.entry-content blockquote::before {
  content: '"';
  position: absolute;
  top: -0.5rem; left: var(--sp-4);
  font-size: 3rem;
  color: var(--gold);
  font-family: var(--font-serif);
  line-height: 1;
}
.entry-content code {
  background: var(--navy-50);
  padding: 0.18em 0.45em;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
  color: var(--color-primary);
  font-family: var(--font-mono);
}
.entry-content pre {
  background: var(--gray-900);
  color: var(--navy-100);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-md);
}
.entry-content img { border-radius: var(--radius-lg); margin-block: var(--sp-6); box-shadow: var(--shadow-md); }
.entry-content figure { margin-bottom: var(--sp-8); }
.entry-content figcaption {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-top: var(--sp-3);
  font-style: italic;
}
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-6); font-size: var(--font-size-base); }
.entry-content th, .entry-content td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); }
.entry-content th { background: var(--navy-50); font-weight: 700; text-align: left; color: var(--color-primary); }

/* ============================================================
   5. PRZYCISKI
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
  transition: all var(--tr-base);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.25), transparent 50%);
  opacity: 0;
  transition: opacity var(--tr-base);
  z-index: -1;
}
.btn:hover::after { opacity: 1; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--gradient-accent);
  color: var(--white);
  box-shadow: 0 4px 12px -2px rgba(146,1,1, 0.35);
}
.btn--primary:hover {
  color: var(--white);
  box-shadow: 0 12px 28px -6px rgba(146,1,1, 0.5);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: calc(0.875rem - 1.5px) calc(1.75rem - 1.5px);
}
.btn--outline:hover { background: var(--color-primary); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
}
.btn--ghost:hover { background: var(--navy-50); }

/* Główne CTA. `.btn--gold` to alias wsteczny – nazwa została z poprzedniej palety. */
.btn--accent,
.btn--gold {
  background: var(--gradient-accent);
  color: var(--white);
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover,
.btn--gold:hover { color: var(--white); box-shadow: 0 12px 32px -6px rgba(146,1,1, 0.55); }

.btn--cta {
  background: var(--white);
  color: var(--color-primary);
  font-weight: 700;
}
.btn--cta:hover { background: var(--red-50); color: var(--red-800); }

.btn--lg { padding: 1.1rem 2.2rem; font-size: var(--font-size-base); }
.btn--full { width: 100%; justify-content: center; }

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  transition: gap var(--tr-base), color var(--tr-fast);
}
.btn-arrow::after { content: '→'; transition: transform var(--tr-base); }
.btn-arrow:hover { gap: var(--sp-3); color: var(--color-dark); text-decoration: none; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* ============================================================
   6. HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.95);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Pasek górny */
.header-topbar {
  background: var(--color-dark);
  color: var(--navy-200);
  font-size: var(--font-size-xs);
  padding-block: var(--sp-2);
  letter-spacing: 0.02em;
}
.header-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.header-topbar__phone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--navy-100); font-weight: 500;
  transition: color var(--tr-fast);
}
.header-topbar__phone:hover { color: var(--gold-soft); }
.header-topbar__social { display: flex; gap: var(--sp-4); }
.social-icon {
  color: var(--navy-300);
  display: flex; align-items: center;
  transition: color var(--tr-fast), transform var(--tr-fast);
}
.social-icon:hover { color: var(--gold-soft); transform: translateY(-1px); }

/* Główny pasek */
.header-main { padding-block: var(--sp-4); }
.header-main__inner {
  display: flex; align-items: center; gap: var(--sp-8);
}

.site-logo, .custom-logo { width: auto; height: 48px; }
.site-title-link { display: flex; align-items: center; }

/* ============================================================
   7. NAWIGACJA
   ============================================================ */
.main-navigation { margin-left: auto; }

.nav-menu {
  display: flex; align-items: center;
  gap: var(--sp-1);
  list-style: none;
  flex-wrap: nowrap;
}
/* Pozycje nie mogą się kurczyć — inaczej przy 8 elementach każdy link zwężał
   się i tekst łamał się na dwie linie („Dla agentów / AI”, „Strona / główna”). */
.nav-menu > li { position: relative; flex-shrink: 0; }
.nav-menu a {
  position: relative;
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--gray-800);
  font-weight: 500;
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: color var(--tr-fast);
  white-space: nowrap;
}
.nav-menu > li > a::before {
  content: '';
  position: absolute;
  left: var(--sp-3); right: var(--sp-3);
  bottom: calc(var(--sp-2) - 2px);
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--tr-base);
  border-radius: 1px;
}
.nav-menu > li:hover > a::before,
.nav-menu > li.current-menu-item > a::before,
.nav-menu > li.current-page-ancestor > a::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a {
  color: var(--color-primary);
  text-decoration: none;
}

/* Submenu */
.nav-menu ul {
  position: absolute;
  top: calc(100% + var(--sp-3)); left: 0;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: var(--sp-2);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--tr-base), transform var(--tr-base), visibility var(--tr-base);
  z-index: 100;
}
.nav-menu li:hover > ul,
.nav-menu li:focus-within > ul {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menu ul a { padding: var(--sp-2) var(--sp-3); color: var(--gray-900); }
.nav-menu ul a::before { display: none; }
.nav-menu ul a:hover { background: var(--navy-50); }

.header-cta { margin-left: var(--sp-2); }

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  padding: var(--sp-3); margin-left: auto;
  border-radius: var(--radius-sm);
}
.hamburger-line {
  display: block; width: 24px; height: 2px;
  background: var(--color-primary); border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Próg hamburgera podniesiony z 860 do 1024 px. Menu ma teraz 8 pozycji
   (doszły „O nas” i „Blog”); poniżej tej szerokości poziomy pasek robił się
   ciasny i pozycje zaczynały nachodzić na logo. Powyżej mieści się swobodnie. */
@media (max-width: 1024px) {
  .menu-toggle { display: flex; }
  .header-topbar { display: none; }
  .header-cta { display: none; }
  .header-main__inner { gap: var(--sp-4); }

  .main-navigation { position: relative; }
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--sp-4));
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--sp-4);
    flex-direction: column; align-items: stretch;
    min-width: 260px; gap: var(--sp-1);
    z-index: 500;
  }
  .nav-menu.is-open { display: flex; }
  /* W rozwijanym menu pozycje są jedna pod drugą na pełną szerokość,
     z celem dotykowym co najmniej 44 px. Panel przewija się, gdyby na niski
     ekran nie zmieściło się wszystkie 8 pozycji. */
  .nav-menu { max-height: calc(100vh - 120px); overflow-y: auto; }
  .nav-menu > li { flex-shrink: 1; }
  .nav-menu a {
    padding: var(--sp-3) var(--sp-4);
    min-height: 44px;
    display: flex; align-items: center;
    white-space: normal;
  }
  .nav-menu ul {
    position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none;
    padding-left: var(--sp-4); display: none;
  }
  .nav-menu li.is-open > ul { display: block; }
  .nav-menu > li > a::before { display: none; }
}

/* ============================================================
   8. PAGE STRIPE (nagłówek stron)
   ============================================================ */
.page-stripe {
  background: var(--gradient-brand);
  color: var(--white);
  padding-block: var(--sp-20) var(--sp-16);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-stripe::before {
  content: '';
  position: absolute; inset: 0;
  /* Ta sama tekstura co w hero, przyciemniona ciemnym welonem marki (~15% widoczności)
     — spójny nagłówek na wszystkich podstronach bez konfliktu barw. */
  background:
    radial-gradient(ellipse at 15% 20%, rgba(179,18,23,0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 80%, rgba(125,125,125,0.35) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 L80 40 M40 0 L40 80' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(22,24,26,0.85) 0%, rgba(59,11,12,0.85) 100%),
    url("../images/hero-bg.jpg");
  background-size: auto, auto, auto, cover, cover;
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  pointer-events: none; z-index: -1;
}
.page-stripe::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none; z-index: -1;
}
.page-stripe--home { padding-block: var(--sp-24) var(--sp-20); text-align: center; }
.page-stripe__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.page-stripe__desc {
  font-size: var(--font-size-lg);
  color: var(--navy-100);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
.page-stripe .breadcrumbs { margin-bottom: var(--sp-5); }

/* ============================================================
   9. BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.breadcrumbs a { color: var(--navy-200); transition: color var(--tr-fast); }
.breadcrumbs a:hover { color: var(--gold-soft); }
.breadcrumbs [aria-current] { color: var(--navy-100); }
.bc-sep { color: var(--navy-400); }

.container > .breadcrumbs {
  padding-block: var(--sp-5);
  color: var(--gray-600);
  margin-bottom: var(--sp-4);
}
.container > .breadcrumbs a { color: var(--color-primary); }
.container > .breadcrumbs [aria-current] { color: var(--gray-600); }

/* ============================================================
   10. KARTY ARTYKUŁÓW
   ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.posts-grid--small { gap: var(--sp-6); }
@media (max-width: 980px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .posts-grid { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow var(--tr-base), transform var(--tr-base), border-color var(--tr-base);
  display: flex; flex-direction: column;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--navy-100);
}

.card__img-wrap { position: relative; }
.card__img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,17,19,0.2), transparent 50%);
  pointer-events: none;
}
.card__cat {
  position: absolute;
  bottom: var(--sp-3); left: var(--sp-3);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

.card__body {
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  display: flex; flex-direction: column; flex: 1;
}
.card__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  line-height: 1.25;
  margin-block: var(--sp-3) var(--sp-3);
}
.card__title a { color: var(--gray-900); transition: color var(--tr-fast); }
.card__title a:hover { color: var(--color-primary); text-decoration: none; }
.card__excerpt { font-size: var(--font-size-sm); color: var(--gray-600); flex: 1; margin-bottom: var(--sp-5); line-height: 1.6; }
.card__btn { align-self: flex-start; margin-top: auto; }

/* ============================================================
   11. META WPISU
   ============================================================ */
.entry-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  letter-spacing: 0.02em;
}
.entry-meta time { color: var(--gray-600); }
.entry-meta .author a { color: var(--gray-600); font-weight: 600; }
.entry-meta .author a:hover { color: var(--color-primary); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.badge--ai {
  background: linear-gradient(135deg, var(--navy-50), var(--navy-100));
  color: var(--color-primary);
  border: 1px solid var(--navy-100);
}

/* ============================================================
   12. POST HERO (single)
   ============================================================ */
.post-hero { position: relative; overflow: hidden; }
.post-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,17,19,0.92) 0%, rgba(15,17,19,0.5) 50%, rgba(15,17,19,0.15) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-12) 0;
}
.post-hero__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  margin-bottom: var(--sp-4);
  max-width: 900px;
}
.post-hero .entry-meta { color: var(--navy-200); }
.post-hero .entry-meta a { color: var(--navy-200); }
.post-hero .entry-meta a:hover { color: var(--gold-soft); }
.post-hero .breadcrumbs { margin-bottom: var(--sp-4); }

/* ============================================================
   13. ARTYKUŁ SINGLE
   ============================================================ */
.article-single { max-width: 780px; margin-inline: auto; padding-block: var(--sp-12); }

.ai-notice {
  display: inline-flex; align-items: center;
  gap: var(--sp-2);
  background: linear-gradient(135deg, var(--navy-50), #FFFFFF);
  border: 1px solid var(--navy-100);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  margin-bottom: var(--sp-8);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.entry-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--color-border);
}
.tag {
  display: inline-block;
  padding: var(--sp-1) var(--sp-4);
  background: var(--navy-50);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--tr-base), color var(--tr-fast);
}
.tag:hover { background: var(--color-primary); color: var(--white); text-decoration: none; }

.post-navigation { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--color-border); }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.post-navigation a {
  display: block;
  padding: var(--sp-5);
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-weight: 500;
  color: var(--gray-900);
  transition: all var(--tr-base);
  line-height: 1.4;
}
.post-navigation a:hover {
  background: var(--white);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}
.nav-previous { text-align: left; }
.nav-next { text-align: right; }

/* ============================================================
   14. RELATED POSTS
   ============================================================ */
.related-posts { margin-top: var(--sp-16); padding-top: var(--sp-12); border-top: 1px solid var(--color-border); }
.related-posts__title { font-size: var(--font-size-3xl); margin-bottom: var(--sp-8); }

/* ============================================================
   15. SECTION TITLE
   ============================================================ */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.section-eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
  position: relative;
  padding-left: var(--sp-8);
}
.section-eyebrow::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 24px; height: 1px;
  background: var(--gold);
}
.section-intro {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 640px;
  line-height: 1.6;
  margin-bottom: var(--sp-12);
}
.section-header--center { text-align: center; }
.section-header--center .section-eyebrow { padding-left: var(--sp-8); padding-right: var(--sp-8); }
.section-header--center .section-eyebrow::before { left: calc(50% - 40px); }
.section-header--center .section-eyebrow::after {
  content: ''; position: absolute; right: calc(50% - 40px); top: 50%;
  width: 24px; height: 1px; background: var(--gold);
}
.section-header--center .section-intro { margin-inline: auto; }

/* ============================================================
   16. FRONT PAGE – HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center;
  padding: calc(var(--sp-24) + 40px) 0 var(--sp-24);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--color-dark);
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(125,125,125,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(179,18,23,0.14) 0%, transparent 55%),
    var(--gradient-brand-soft);
}
.hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;
  mix-blend-mode: luminosity;
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(15,17,19,0) 0%, rgba(15,17,19,0.4) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 L120 60 M60 0 L60 120' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Ccircle cx='60' cy='60' r='40' stroke='rgba(255,255,255,0.02)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  width: 100%;
}
@media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; gap: var(--sp-10); } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-soft);
  margin-bottom: var(--sp-6);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid rgba(179,18,23,0.35);
  border-radius: var(--radius-pill);
  background: rgba(179,18,23,0.06);
  backdrop-filter: blur(6px);
}
.hero__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  animation: pulse 2s var(--ease-in-out) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: var(--sp-6);
}
.hero__title em {
  font-style: italic;
  color: var(--gold-soft);
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lead {
  font-size: clamp(var(--font-size-lg), 1.6vw, var(--font-size-xl));
  color: var(--navy-100);
  line-height: 1.55;
  max-width: 560px;
  margin-bottom: var(--sp-10);
}
.hero__ctas {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-12);
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: 560px;
}
.hero__stat-num {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.hero__stat-label {
  font-size: var(--font-size-xs);
  color: var(--navy-200);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

/* Hero visual card */
.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  margin-inline: auto;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--color-dark);
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.6s var(--ease-out);
}
.hero__visual:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,17,19,0.3) 0%, transparent 40%, rgba(179,18,23,0.15) 100%);
  pointer-events: none;
}
.hero__visual-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 18%;
  background:
    radial-gradient(circle at 30% 30%, rgba(179,18,23,0.28), transparent 55%),
    radial-gradient(circle at 70% 72%, rgba(125,125,125,0.35), transparent 60%),
    var(--gradient-brand-soft);
}
.hero__visual-placeholder img { width: 100%; height: auto; opacity: 0.96; }

/* Znak nałożony na wygenerowaną grafikę hero */
.hero__visual-mark {
  position: absolute;
  left: 12%; right: 12%; bottom: 10%;
  z-index: 2;
  pointer-events: none;
}
.hero__visual-mark img { width: 100%; height: auto; opacity: 0.95; }

/* Punkty pod CTA w hero – zastąpiły pasek liczb, których nie chcemy zmyślać */
.hero__points {
  margin-top: var(--sp-8);
  display: grid;
  gap: var(--sp-3);
  max-width: 560px;
}
.hero__points li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--steel-300);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.hero__points li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 12px; height: 2px;
  background: var(--accent-soft);
}

.hero__floating-card {
  position: absolute;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.4);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-lg);
  color: var(--ink-900);
  font-size: var(--font-size-sm);
  display: flex; flex-direction: column; gap: var(--sp-1);
  animation: floatY 5s var(--ease-in-out) infinite;
}
.hero__floating-card--1 { bottom: 10%; left: -8%; }
.hero__floating-card--2 { top: 8%; right: -10%; animation-delay: -2.5s; }
.hero__floating-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--steel-600);
}
.hero__floating-card code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-primary);
  white-space: nowrap;
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero__scroll {
  position: absolute;
  bottom: var(--sp-6); left: 50%;
  transform: translateX(-50%);
  color: var(--navy-200);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  opacity: 0.7;
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--navy-200), transparent);
  animation: scrollHint 2s var(--ease-in-out) infinite;
}
@keyframes scrollHint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 980px) {
  .hero { min-height: auto; padding-block: var(--sp-16); }
  .hero__scroll { display: none; }
  .hero__floating-card--1 { left: 2%; }
  .hero__floating-card--2 { right: 2%; }
  .hero__visual { transform: none; max-width: 420px; }
}
@media (max-width: 560px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .hero__floating-card { display: none; }
}

/* ============================================================
   17. FRONT PAGE – FEATURES / BENEFITS
   ============================================================ */
.section {
  padding-block: var(--sp-24);
  position: relative;
}
.section--alt { background: var(--color-bg-soft); }
.section--dark {
  background: var(--gradient-brand-soft);
  color: var(--white);
}
.section--dark .section-title { color: var(--white); }
.section--dark .section-intro { color: var(--navy-100); }
.section--dark .section-eyebrow { color: var(--gold-soft); }

@media (max-width: 768px) { .section { padding-block: var(--sp-16); } }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

.feature {
  position: relative;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  transition: all var(--tr-base);
  overflow: hidden;
}
.feature::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.feature:hover::before { transform: scaleX(1); }
.feature__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--navy-50), var(--navy-100));
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  transition: all var(--tr-base);
}
.feature:hover .feature__icon {
  background: var(--gradient-brand);
  color: var(--white);
  transform: scale(1.08) rotate(-3deg);
}
.feature__icon svg { width: 28px; height: 28px; }
.feature__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  margin-bottom: var(--sp-3);
  color: var(--gray-900);
}
.feature__text { color: var(--gray-600); font-size: var(--font-size-sm); line-height: 1.65; }

/* ============================================================
   18. SERVICES (duże karty z obrazem)
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 340px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--sp-8);
  color: var(--white);
  text-decoration: none;
  transition: transform var(--tr-base), box-shadow var(--tr-base);
  isolation: isolate;
  background: var(--color-dark);
  justify-content: flex-end;
}
.service-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: var(--gradient-brand);
}
.service-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: transform 0.7s var(--ease-out), opacity var(--tr-base);
}
.service-card::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(15,17,19,0.95) 0%, rgba(15,17,19,0.6) 45%, rgba(15,17,19,0.25) 100%);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  color: var(--white);
}
.service-card:hover img { transform: scale(1.06); opacity: 0.7; }
.service-card__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  margin-bottom: var(--sp-3);
}
.service-card__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  color: var(--white);
  margin-bottom: var(--sp-3);
  line-height: 1.15;
}
.service-card__desc {
  color: var(--navy-100);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}
.service-card__link {
  display: inline-flex; align-items: center;
  gap: var(--sp-2);
  color: var(--gold-soft);
  font-weight: 600;
  font-size: var(--font-size-sm);
  transition: gap var(--tr-base);
}
.service-card__link::after { content: '→'; transition: transform var(--tr-base); }
.service-card:hover .service-card__link { gap: var(--sp-3); }
.service-card:hover .service-card__link::after { transform: translateX(4px); }

.service-card--large { grid-column: span 2; min-height: 420px; }
@media (max-width: 768px) { .service-card--large { grid-column: span 1; min-height: 300px; } }

/* ============================================================
   19. STATS (dark strip)
   ============================================================ */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-10);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  margin-block: calc(-1 * var(--sp-16)) 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) { .stats-strip { grid-template-columns: repeat(2, 1fr); margin-top: 0; } }
/* Próg 420 px spychał pasek do jednej kolumny już na typowym telefonie (390 px),
   przez co cztery liczby zajmowały cały ekran. Dwie kolumny mieszczą się
   spokojnie aż do bardzo wąskich urządzeń. */
@media (max-width: 360px) { .stats-strip { grid-template-columns: 1fr; } }

.stat {
  text-align: center;
  padding: var(--sp-4);
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--color-border);
}
@media (max-width: 768px) { .stat + .stat::before { display: none; } }
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--sp-2);
}
.stat__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-600);
  font-weight: 600;
}

/* ============================================================
   20. PRODUKTY (page)
   ============================================================ */
.products-section { padding-block: var(--sp-10) var(--sp-16); }
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
@media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .products-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--tr-base), transform var(--tr-base), border-color var(--tr-base);
  display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--navy-100); }
.product-card__img-wrap { aspect-ratio: 4 / 3; overflow: hidden; display: block; position: relative; }
.product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.product-card__img-wrap:hover .product-card__img { transform: scale(1.08); }
.product-card__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.product-card__title { font-family: var(--font-serif); font-size: var(--font-size-xl); margin-bottom: var(--sp-3); line-height: 1.25; }
.product-card__title a { color: var(--gray-900); }
.product-card__title a:hover { color: var(--color-primary); text-decoration: none; }
.product-card__excerpt { font-size: var(--font-size-sm); color: var(--gray-600); margin-bottom: var(--sp-5); flex: 1; line-height: 1.6; }
.product-card .btn { align-self: flex-start; margin-top: auto; }

.product-card__icon-wrap {
  background: linear-gradient(135deg, var(--navy-50) 0%, var(--navy-100) 100%);
  padding: var(--sp-12) var(--sp-8);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-card__icon-wrap::before {
  content: '';
  position: absolute;
  width: 160%; height: 160%;
  top: -30%; left: -30%;
  background: radial-gradient(circle, rgba(179,18,23,0.15), transparent 60%);
  transition: transform 0.8s var(--ease-out);
}
.product-card:hover .product-card__icon-wrap::before { transform: rotate(180deg); }
.product-card__icon { font-size: 3rem; position: relative; }
.product-card__cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  background: var(--navy-50);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
  align-self: flex-start;
}

.no-products {
  text-align: center;
  padding: var(--sp-16);
  color: var(--gray-600);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border);
}

/* ============================================================
   21. TIMELINE (historia)
   ============================================================ */
/* O nas — opowieść o firmie + kolaż zdjęć zakładu */
.about-story {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-12);
  align-items: center;
}
.about-story__text .section-title { margin-top: var(--sp-3); }
.about-story__text p { color: var(--gray-700, #3f3f3f); line-height: 1.75; margin-top: var(--sp-4); }
.about-areas {
  list-style: none; padding: 0; margin: var(--sp-6) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.about-areas li {
  font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary);
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 6px 14px; border-radius: 999px;
}
.about-collage { display: grid; gap: var(--sp-4); }
.about-collage--1 { grid-template-columns: 1fr; }
.about-collage--2, .about-collage--3 { grid-template-columns: 1fr 1fr; }
.about-collage figure {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
}
.about-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-collage--1 figure { aspect-ratio: 4 / 3; }
.about-collage--2 figure { aspect-ratio: 3 / 4; }
.about-collage--3 figure { aspect-ratio: 3 / 4; }
.about-collage--3 figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .about-story { grid-template-columns: 1fr; gap: var(--sp-8); }
}

.timeline-section { padding-block: var(--sp-16); }
.timeline {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding-block: var(--sp-4);
}
.timeline::before {
  content: '';
  position: absolute; left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-primary) 10%, var(--color-accent) 90%, transparent 100%);
  transform: translateX(-50%);
}

.timeline__item {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.timeline__dot {
  width: 20px; height: 20px;
  background: var(--white);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  justify-self: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--color-bg);
  transition: all var(--tr-base);
}
.timeline__item:hover .timeline__dot {
  background: var(--color-primary);
  transform: scale(1.2);
  box-shadow: 0 0 0 6px var(--color-bg), 0 0 0 10px rgba(146,1,1,0.15);
}
.timeline__content {
  background: var(--white);
  border: 1px solid var(--color-border);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--tr-base), transform var(--tr-base);
}
.timeline__item:hover .timeline__content { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.timeline__item--left .timeline__content { grid-column: 1; text-align: right; }
.timeline__item--right .timeline__content { grid-column: 3; }
.timeline__item--left .timeline__dot { grid-column: 2; }
.timeline__item--right .timeline__dot { grid-column: 2; }
.timeline__year {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}
.timeline__title { font-family: var(--font-serif); font-size: var(--font-size-xl); margin-bottom: var(--sp-2); }
.timeline__text { color: var(--gray-600); font-size: var(--font-size-sm); line-height: 1.6; }
.timeline__placeholder {
  text-align: center; padding: var(--sp-16); color: var(--gray-600);
  background: var(--gray-50); border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border);
}

@media (max-width: 720px) {
  .timeline::before { left: 20px; }
  .timeline__item { grid-template-columns: 40px 1fr; align-items: flex-start; }
  .timeline__item--left .timeline__content,
  .timeline__item--right .timeline__content { grid-column: 2; grid-row: 1; text-align: left; }
  .timeline__item--left .timeline__dot,
  .timeline__item--right .timeline__dot { grid-column: 1; grid-row: 1; margin-top: var(--sp-2); }
}

/* ============================================================
   22. KONTAKT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-16);
  padding-block: var(--sp-16);
}
@media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; gap: var(--sp-10); } }

.contact-address { font-style: normal; }
.contact-row {
  display: flex; align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--tr-base), border-color var(--tr-base);
}
.contact-row:hover { box-shadow: var(--shadow-sm); border-color: var(--navy-100); }
.contact-row__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--navy-50);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.contact-row svg { flex-shrink: 0; color: var(--color-primary); }
.contact-row a { color: var(--color-primary); font-weight: 500; }
.contact-row a:hover { text-decoration: underline; }

.contact-map {
  margin-top: var(--sp-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.contact-map iframe { display: block; }
.contact-map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--color-bg-soft, #f4f4f5);
}
.contact-map__note {
  margin: 0;
  font-size: var(--fs-sm, .875rem);
  color: var(--color-text-muted, #52525b);
}

/* Podpis atrybucyjny pod treścią wpisu (licencje CC) */
.entry-image-credit {
  margin-top: var(--sp-8);
  font-size: var(--fs-xs, .8rem);
  color: var(--color-text-muted, #52525b);
}
.entry-image-credit a { color: inherit; text-decoration: underline; }

/* Landing usług — akcje i pokrewne */
.svc-detail__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.svc-landing__related { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--color-border); }
.svc-landing__related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.svc-landing__related a { font-weight: 600; }

/* Wyniki wyszukiwania */
.search-refine { margin-top: var(--sp-6); max-width: 520px; }
.search-empty { padding: var(--sp-8) 0; }
.search-empty__links { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.search-empty__links a { font-weight: 600; color: var(--color-primary); }

/* Wdrożenia — małe obrazki po lewej, opis po prawej */
.case-detail--media { display: flex; gap: var(--sp-8); align-items: flex-start; }
.case-detail__media { flex: 0 0 clamp(320px, 28%, 400px); display: flex; flex-direction: column; gap: var(--sp-4); }
.case-detail__body { flex: 1 1 auto; min-width: 0; }
.case-detail__figure { margin: 0; border-radius: var(--radius-md, 10px); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.case-detail__figure img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
  .case-detail--media { flex-direction: column; }
  .case-detail__media { flex-basis: auto; flex-direction: row; }
}
.case-detail__tech { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.case-detail__link { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.case-card__img { display: block; overflow: hidden; border-radius: var(--radius-md, 10px); margin-bottom: var(--sp-4); aspect-ratio: 16 / 10; background: var(--color-bg-soft, #f2f2f3); }
.case-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.case-card--media:hover .case-card__img img { transform: scale(1.04); }
.pchip {
  display: inline-block;
  font-size: var(--fs-xs, .75rem);
  line-height: 1.6;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--color-bg-soft, #f4f4f5);
  color: var(--color-text-muted, #52525b);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Widżet Cloudflare Turnstile w formularzu kontaktowym */
.form-group--turnstile { margin: var(--sp-6) 0; min-height: 65px; }
.form-group--turnstile .cf-turnstile { max-width: 100%; }

.contact-form-wrap {
  background: var(--white);
  padding: var(--sp-10);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
@media (max-width: 600px) { .contact-form-wrap { padding: var(--sp-6); } }

/* Formularz */
.form-group { margin-bottom: var(--sp-5); }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-800);
  margin-bottom: var(--sp-2);
}
.form-group input:not([type="checkbox"]),
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.875rem var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  color: var(--gray-900);
  font-size: var(--font-size-base);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast);
}
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover { border-color: var(--gray-300); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(146,1,1,0.1);
  background: var(--white);
}
.form-group.has-error input,
.form-group.has-error textarea { border-color: #D54242; }
.form-group textarea { resize: vertical; min-height: 160px; }
.form-group--checkbox { display: flex; align-items: flex-start; gap: var(--sp-3); }
.form-group--checkbox label { font-weight: 400; font-size: var(--font-size-sm); color: var(--gray-600); text-transform: none; letter-spacing: 0; }
.checkbox-label { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.checkbox-label input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--color-primary); margin-top: 3px; }

/* ============================================================
   23. SIDEBAR
   ============================================================ */
.sidebar { padding-top: var(--sp-4); }
.sidebar .widget {
  margin-bottom: var(--sp-8);
  padding: var(--sp-5);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.widget-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--gray-900);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  position: relative;
}
.widget-title::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 36px; height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.widget ul { list-style: none; }
.widget ul li {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.widget ul li:last-child { border-bottom: none; padding-bottom: 0; }
.widget ul li a {
  color: var(--gray-800);
  transition: color var(--tr-fast), padding-left var(--tr-fast);
  display: inline-block;
}
.widget ul li a:hover { color: var(--color-primary); padding-left: var(--sp-2); }

.widget_search .search-form { display: flex; gap: var(--sp-2); }
.widget_search input[type="search"] {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--white);
}
.widget_search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(146,1,1,0.1); }
.widget_search button {
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-primary);
  color: var(--white);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-sm);
  transition: background var(--tr-fast);
}
.widget_search button:hover { background: var(--color-dark); }

/* ============================================================
   24. PAGINACJA
   ============================================================ */
.pagination { margin-top: var(--sp-12); }
.pagination ul {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; justify-content: center;
}
.pagination ul li a,
.pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  padding-inline: var(--sp-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  color: var(--gray-800);
  font-weight: 600;
  font-size: var(--font-size-sm);
  background: var(--white);
  transition: all var(--tr-fast);
}
.pagination ul li a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
}
.pagination ul li .current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

/* ============================================================
   25. STOPKA
   ============================================================ */
.footer-stripe {
  height: 4px;
  background: var(--gradient-brand);
  position: relative;
}
.footer-stripe::after {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 40%;
  background: var(--gradient-gold);
  transform: translateX(-50%);
  opacity: 0.6;
}

.site-footer {
  background: var(--color-dark);
  color: var(--navy-100);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(125,125,125,0.25), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(179,18,23,0.08), transparent 60%);
  pointer-events: none;
}

.footer-widgets { padding-block: var(--sp-16) var(--sp-12); position: relative; }
.footer-widgets__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-12);
}
@media (max-width: 900px) { .footer-widgets__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
@media (max-width: 560px) { .footer-widgets__grid { grid-template-columns: 1fr; } }

.footer-logo { filter: brightness(0) invert(1); margin-bottom: var(--sp-5); max-height: 48px; width: auto; }
.footer-tagline {
  font-size: var(--font-size-sm);
  color: var(--navy-200);
  margin-bottom: var(--sp-6);
  line-height: 1.7;
  max-width: 340px;
}

.footer-social { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer-social__link {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy-200);
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  transition: all var(--tr-fast);
}
.footer-social__link:hover {
  color: var(--color-dark);
  border-color: var(--gold-soft);
  background: var(--gold-soft);
  text-decoration: none;
}

.footer-col .widget {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 0;
}
.footer-col .widget-title {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.footer-col .widget-title::after { background: var(--gold); }
.footer-col .widget ul li { border-bottom-color: rgba(255,255,255,0.06); padding-block: var(--sp-2); }
.footer-col .widget ul li a { color: var(--navy-200); }
.footer-col .widget ul li a:hover { color: var(--white); padding-left: var(--sp-2); }

.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: var(--sp-2); padding: 0; border: none; }
.footer-nav a {
  color: var(--navy-200);
  font-size: var(--font-size-sm);
  transition: color var(--tr-fast), padding-left var(--tr-fast);
  display: inline-block;
}
.footer-nav a:hover { color: var(--white); padding-left: var(--sp-2); text-decoration: none; }

.footer-contact p { font-size: var(--font-size-sm); margin-bottom: var(--sp-3); color: var(--navy-200); }
.footer-contact a { color: var(--navy-100); transition: color var(--tr-fast); }
.footer-contact a:hover { color: var(--gold-soft); }

.footer-posts { list-style: none; }
.footer-posts li { padding-block: var(--sp-2); border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-posts li:last-child { border-bottom: none; }
.footer-posts a {
  color: var(--navy-200); font-size: var(--font-size-sm);
  transition: color var(--tr-fast);
  display: inline-block; line-height: 1.4;
}
.footer-posts a:hover { color: var(--white); text-decoration: none; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--sp-6);
  position: relative;
}
.footer-bottom__inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--sp-3);
}
.footer-copyright, .footer-powered {
  font-size: var(--font-size-xs);
  color: var(--navy-400);
  letter-spacing: 0.02em;
}
.footer-powered a { color: var(--navy-200); }
.footer-powered a:hover { color: var(--white); }
.footer-ai { color: var(--gold-soft); font-weight: 700; letter-spacing: 0.04em; }

/* ============================================================
   26. HERO OBRAZEK (page.php)
   ============================================================ */
.page-hero-img {
  margin-bottom: var(--sp-10);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.page-hero-img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ============================================================
   27. NO RESULTS
   ============================================================ */
.no-results {
  text-align: center;
  padding: var(--sp-20) var(--sp-8);
  color: var(--gray-600);
}
.no-results h2 { font-size: var(--font-size-2xl); margin-bottom: var(--sp-4); }

/* ============================================================
   28. KATEGORIE PRODUKTÓW
   ============================================================ */
.product-cats {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block: var(--sp-10) var(--sp-4);
  padding: var(--sp-2);
  background: var(--color-bg-soft);
  border-radius: var(--radius-pill);
  width: fit-content;
  border: 1px solid var(--color-border);
}
.product-cat-btn {
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-600);
  background: transparent;
  cursor: pointer;
  transition: all var(--tr-fast);
}
.product-cat-btn:hover { color: var(--color-primary); }
.product-cat-btn.is-active {
  background: var(--color-primary);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   29. CTA STRIP
   ============================================================ */
.cta-strip {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8);
  background: var(--gradient-brand-soft);
  color: var(--white);
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--radius-2xl);
  margin-block: var(--sp-16);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
}
.cta-strip::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(179,18,23,0.2), transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(125,125,125,0.3), transparent 50%);
}
.cta-strip::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(179,18,23,0.3);
  z-index: -1;
}
.cta-strip__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  color: var(--white); margin-bottom: var(--sp-2);
  line-height: 1.15;
}
.cta-strip__text p { color: var(--navy-100); margin: 0; font-size: var(--font-size-base); max-width: 520px; }
@media (max-width: 720px) {
  .cta-strip { flex-direction: column; text-align: center; padding: var(--sp-8); }
}

.products-note {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}

/* ============================================================
   30. BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: var(--sp-8); right: var(--sp-8);
  width: 48px; height: 48px;
  background: var(--gradient-brand);
  color: var(--white);
  border-radius: 50%;
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(16px);
  transition: all var(--tr-base);
  z-index: 900;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

/* ============================================================
   31. 404
   ============================================================ */
.error-404 {
  text-align: center; padding-block: var(--sp-24);
}
.error-404__code {
  font-family: var(--font-serif);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--sp-4);
}

/* ============================================================
   32. PRINT
   ============================================================ */
@media print {
  .site-header, .site-footer, .main-navigation, .layout-sidebar,
  .related-posts, .comments-section, .pagination, .back-to-top,
  .cta-strip, .hero__visual, .hero__scroll { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .hero, .section, .section--dark { padding-block: 0; color: #000; background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }
  .container { max-width: 100%; padding: 0; }
}

/* ============================================================
   34. KOMPONENTY „AI DLA FIRM"
   Karty usług, proces, systemy własne, szkolenia, FAQ, Agent Gateway.
   ============================================================ */

/* --- Przycisk na ciemnym tle (hero, sekcje --dark) --- */
.btn--on-dark {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
}
.btn--on-dark:hover { background: rgba(255,255,255,0.16); color: var(--white); }

/* --- Siatka usług --- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--tr-base), transform var(--tr-base);
  scroll-margin-top: 120px;
}
.svc-card::before { display: none; }
.svc-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* Karta usługi na stronie głównej wygląda jak karta wdrożenia: bez ikony, tytuł tuż nad kategorią. */
.svc-card > .svc-card__icon { display: none; }
.svc-card > .svc-card__title { margin-bottom: var(--sp-1); }

/* Klikalna karta (usługi + wdrożenia): tytuł = link rozciągnięty na całą kartę + strzałka „→". */
.svc-card, .case-card { position: relative; cursor: pointer; }
.svc-card__title a, .case-card__title a { color: inherit; text-decoration: none; }
.svc-card__title a::after, .case-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.svc-card:hover .svc-card__title a, .case-card:hover .case-card__title a { color: var(--color-primary); }
.svc-card__go, .case-card__go {
  margin-top: auto;
  align-self: flex-end;
  padding-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform var(--tr-base);
}
.svc-card:hover .svc-card__go, .case-card:hover .case-card__go { transform: translateX(4px); }
/* Miniatura na karcie – wychodzi poza padding karty, żeby siedziała przy krawędzi */
.svc-card__media {
  display: block;
  margin: calc(var(--sp-8) * -1) calc(var(--sp-7) * -1) var(--sp-6);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-900);
  border-bottom: 1px solid var(--color-border);
}
.svc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.svc-card:hover .svc-card__media img { transform: scale(1.05); }

.svc-card__icon {
  width: 44px; height: 44px;
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}
.svc-card__icon svg { width: 100%; height: 100%; }
.svc-card__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--steel-600);
  margin-bottom: var(--sp-2);
}
/* Kategoria na karcie usługi (strona główna) - taki sam styl jak domena przy wdrożeniach:
   czerwona, normalną wielkością liter. /uslugi/ i /szkolenia/ (svc-detail) bez zmian. */
.svc-card > .svc-card__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
}
.svc-card__title {
  font-size: var(--font-size-xl);
  line-height: 1.25;
  margin-bottom: var(--sp-3);
}
.svc-card__answer {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}
.svc-card__outcome {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.svc-card__outcome li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.svc-card__outcome li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--accent);
}
.svc-card__link { margin-top: auto; }

/* --- Proces --- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-8) var(--sp-6);
  counter-reset: none;
}
.process-step { position: relative; padding-top: var(--sp-6); }
.process-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: var(--sp-6);
  height: 2px;
  background: var(--steel-200);
}
.process-step:first-child::before { background: var(--accent); }
.process-step__no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.process-step__title { font-size: var(--font-size-lg); margin-bottom: var(--sp-2); }
.process-step__text { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.65; }

/* --- Systemy własne --- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 900px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .case-grid { grid-template-columns: 1fr; } }
.case-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-primary);
}
.case-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}
.case-card__title { font-size: var(--font-size-xl); margin: 0; }
.case-card__kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel-600);
  border: 1px solid var(--steel-300);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.case-card__domain {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-4);
}
.case-card__summary { font-size: var(--font-size-sm); line-height: 1.65; margin-bottom: var(--sp-4); }
.case-card__proves { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.case-card__proves li {
  font-size: var(--font-size-xs);
  color: var(--steel-600);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

/* --- Szkolenia --- */
.train-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-6);
}
.train-card {
  padding: var(--sp-7) var(--sp-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.train-card__icon { width: 36px; height: 36px; color: var(--color-primary); margin-bottom: var(--sp-4); }
.train-card__icon svg { width: 100%; height: 100%; }
.train-card__title { font-size: var(--font-size-lg); margin-bottom: var(--sp-3); line-height: 1.3; }
.train-card__answer { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--sp-4); }
.train-card__format { font-size: var(--font-size-xs); color: var(--steel-600); margin: 0; }

/* --- FAQ --- */
.faq-list {
  display: grid;
  gap: 0;
  max-width: var(--container-narrow);
  border-top: 1px solid var(--color-border);
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__q {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
  transition: color var(--tr-fast);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: '+';
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform var(--tr-base);
}
.faq-item[open] .faq-item__q::after { content: '–'; }
.faq-item__q:hover { color: var(--color-primary); }
.faq-item__a {
  padding-bottom: var(--sp-6);
  max-width: 62ch;
}
.faq-item__a p { color: var(--color-text-muted); line-height: 1.75; margin: 0; }

/* --- Sekcja dla agentów AI --- */
.agent-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
/* Element siatki ma domyślnie min-width:auto, więc długie linie w <pre>
   rozpychają kolumnę zamiast się w niej przewijać. Bez tego panel z poleceniami
   curl rozjeżdżał układ już na tablecie. */
.agent-layout > * { min-width: 0; }
.agent-panel {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.agent-panel__bar {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.agent-panel__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.agent-panel__bar span:first-child { background: var(--red-500); }
.agent-panel__bar em {
  margin-left: auto;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-300);
}
.agent-panel__code {
  margin: 0;
  padding: var(--sp-5);
  background: transparent;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--steel-100);
  white-space: pre;
}
.agent-panel__code code { font-family: inherit; background: none; padding: 0; color: inherit; }
.agent-panel__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.agent-panel__links a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-soft);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.agent-panel__links a:hover { background: rgba(255,255,255,0.1); color: var(--white); }

@media (max-width: 900px) {
  .agent-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* --- Podstrona Usługi / Szkolenia: spis + karty rozwinięte --- */
.svc-toc {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-block: var(--sp-10) var(--sp-12);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}
.svc-toc a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4);
  transition: border-color var(--tr-fast), color var(--tr-fast);
}
.svc-toc a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.svc-detail {
  padding-block: var(--sp-12);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 120px;
}
.svc-detail:last-of-type { border-bottom: none; }
.svc-detail__head { display: flex; gap: var(--sp-5); align-items: flex-start; margin-bottom: var(--sp-6); }
.svc-detail__icon { width: 40px; height: 40px; flex-shrink: 0; color: var(--color-primary); }
.svc-detail__icon svg { width: 100%; height: 100%; }
.svc-detail__title { font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin: 0; line-height: 1.2; }
.svc-detail__figure {
  width: 100%;
  max-width: 640px;
  margin: 0 0 var(--sp-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--ink-900);
}
.svc-detail__figure img { width: 100%; height: auto; display: block; }

/* Wprowadzenie obszaru: zdjęcie obok nagłówka i zdania (na /uslugi/) */
.svc-detail__top { margin-bottom: var(--sp-6); }
.svc-detail__top--media {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-8);
  align-items: start;
}
.svc-detail__top--media .svc-detail__figure { margin: 0; max-width: 100%; }
.svc-detail__intro { min-width: 0; }
.svc-detail__intro .svc-detail__head { margin-bottom: var(--sp-4); }
.svc-detail__intro .svc-detail__answer { margin-bottom: 0; }
@media (max-width: 820px) {
  .svc-detail__top--media { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.svc-detail__answer {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  max-width: 68ch;
  margin-bottom: var(--sp-8);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent);
}
.svc-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-8);
}
.svc-detail__col p { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--sp-6); }
.svc-detail__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel-600);
  margin-bottom: var(--sp-3);
}
.svc-detail__meta {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-8);
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.svc-detail__meta > div { flex: 1 1 240px; }
.svc-detail__meta strong { display: block; font-size: var(--font-size-sm); line-height: 1.5; }
.svc-detail__meta-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel-600);
  margin-bottom: var(--sp-2);
}
.svc-detail__stack { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.svc-detail__stack li {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--steel-600);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

/* --- Podstrona Wdrożenia --- */
.case-detail {
  padding-block: var(--sp-10);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 120px;
}
/* Sekcja bez mediów (gdyby jakaś usługa nie miała obrazka) zostaje czytelnie wąska;
   sekcja z obrazkami wypełnia szerokość — obrazki po lewej, opis po prawej. */
.case-detail:not(.case-detail--media) { max-width: 80ch; }
.case-detail:last-of-type { border-bottom: none; }
.case-detail__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.case-detail__title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; }
.case-detail__domain { font-size: var(--font-size-sm); color: var(--color-primary); }
.case-detail__summary { font-size: var(--font-size-lg); line-height: 1.65; margin-bottom: var(--sp-4); }
.case-detail__text { color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--sp-6); }
.case-detail__proves { margin-top: var(--sp-4); }

/* --- Podstrona „Dla agentów AI": tabela endpointów i bloki kodu --- */
.api-table-wrap { overflow-x: auto; margin-top: var(--sp-6); }
.api-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); min-width: 640px; }
.api-table th, .api-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.api-table thead th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--steel-600);
  background: var(--color-bg-alt);
  border-bottom-color: var(--steel-300);
}
.api-table td code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-primary); }
.api-method {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--steel-500);
}
.api-method--post { background: var(--color-primary); }

.code-block {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  background: var(--ink-900);
  color: var(--steel-100);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre;
}
.code-block code { font-family: inherit; background: none; padding: 0; color: inherit; }

.discovery-list li { line-height: 1.7; }
.discovery-list code { font-family: var(--font-mono); font-size: 0.8125rem; }

/* --- Formularz kontaktowy --- */
.contact-lead { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.7; margin-bottom: var(--sp-6); }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-6);
  font-size: var(--font-size-sm);
  border-left: 3px solid;
}
.form-notice--ok { background: var(--steel-50); border-left-color: var(--steel-500); }
.form-notice--error { background: var(--red-50); border-left-color: var(--color-primary); color: var(--red-800); }
.contact-agent-note {
  margin-top: var(--sp-5);
  font-size: var(--font-size-xs);
  color: var(--steel-600);
}
.contact-agent-note code { font-family: var(--font-mono); font-size: 0.75rem; }

/* ============================================================
   35. ZGODA NA CIASTECZKA
   ============================================================ */
.consent {
  position: fixed;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: 1200;
  max-width: 720px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: consentIn 0.35s var(--ease-out);
}
.consent[hidden] { display: none; }
@keyframes consentIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.consent__inner { padding: var(--sp-6); }
.consent__title { font-size: var(--font-size-lg); margin-bottom: var(--sp-2); }
.consent__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--sp-5); }
.consent__links { display: block; margin-top: var(--sp-2); }
.consent__links a { color: var(--color-primary); text-decoration: underline; }

.consent__options {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding: var(--sp-5);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  max-height: 40vh;
  overflow-y: auto;
}
.consent__options[hidden] { display: none; }
.consent__option-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: var(--sp-2) 0 0 52px;
}

/* Przełącznik – natywny checkbox schowany, ale wciąż obsługiwany klawiaturą */
.consent__switch { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.consent__switch input { position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; }
.consent__switch-track {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 22px;
  background: var(--steel-300);
  border-radius: var(--radius-pill);
  transition: background var(--tr-base);
}
.consent__switch-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--white);
  border-radius: 50%;
  transition: transform var(--tr-base);
}
.consent__switch input:checked + .consent__switch-track { background: var(--color-primary); }
.consent__switch input:checked + .consent__switch-track::after { transform: translateX(18px); }
.consent__switch input:focus-visible + .consent__switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.consent__switch input:disabled + .consent__switch-track { background: var(--steel-400); cursor: not-allowed; }
.consent__switch-label { font-weight: 600; font-size: var(--font-size-sm); }
.consent__switch-label em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-xs);
  color: var(--steel-600);
}

.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; }

/* Odnośnik ponownego otwarcia w stopce */
.consent-reopen {
  color: inherit;
  font: inherit;
  text-decoration: underline;
  padding: 0;
}
.consent-reopen:hover { color: var(--accent-soft); }

.footer-legal {
  font-size: var(--font-size-sm);
  color: var(--steel-300);
  margin-bottom: var(--sp-2);
}
.footer-legal a { color: var(--steel-300); }
.footer-legal a:hover { color: var(--accent-soft); }

@media (max-width: 560px) {
  /* Baner zajmował na telefonie ponad połowę ekranu i zasłaniał treść.
     Kompaktujemy go: mniejsze odstępy, krótsze wiersze, dwa główne przyciski
     obok siebie zamiast jeden pod drugim. */
  .consent {
    left: 0; right: 0; bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 82vh;
    overflow-y: auto;
  }
  .consent__inner { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .consent__title { font-size: var(--font-size-base); margin-bottom: var(--sp-1); }
  .consent__desc {
    font-size: var(--font-size-xs);
    line-height: 1.55;
    margin-bottom: var(--sp-4);
  }
  .consent__links { margin-top: var(--sp-1); }

  /* Akceptacja i odrzucenie w jednym rzędzie – równorzędne, jak wymaga RODO.
     „Ustawienia” niżej, bo to wybór dla mniejszości użytkowników. */
  .consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .consent__actions .btn { flex: none; width: 100%; padding-inline: var(--sp-3); font-size: var(--font-size-xs); }
  .consent__actions [data-consent-action="toggle-options"],
  .consent__actions [data-consent-action="save"] { grid-column: 1 / -1; }

  .consent__options { max-height: 46vh; padding: var(--sp-4); }
}

/* --- Dokumenty prawne --- */
.entry-content .lead {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--ink-800);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent);
  margin-bottom: var(--sp-8);
}
.entry-content .dane-firmy {
  width: auto;
  min-width: min(100%, 420px);
  margin-bottom: var(--sp-8);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.entry-content .dane-firmy th {
  width: 1%;
  white-space: nowrap;
  background: transparent;
  color: var(--steel-600);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.entry-content .dane-firmy td { font-size: var(--font-size-sm); }
.entry-content .dane-firmy tr:last-child th,
.entry-content .dane-firmy tr:last-child td { border-bottom: none; }

/* Widoczny znacznik braku – nie chcemy, żeby luka w dokumencie prawnym umknęła */
mark.do-uzupelnienia {
  background: var(--red-100);
  color: var(--red-800);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--red-300);
}

/* ============================================================
   36. WERSJA MOBILNA
   ============================================================
   Motyw był responsywny „z grubsza" — siatki się zwijały, ale kilka rzeczy
   wypychało stronę w poziomie albo robiło się nieklikalne kciukiem.
   Ten blok domyka temat. Kolejność: najpierw reguły niezależne od szerokości
   (zawijanie treści), potem kolejne progi.
   ============================================================ */

/* --- Zabezpieczenie przed przewijaniem w poziomie ---
   body ma overflow-x:hidden, ale to tylko UKRYWA problem: treść nadal wystaje,
   a na iOS potrafi i tak dać przewijanie. Poniżej przyczyny, nie objawy. */

/* Długie adresy i identyfikatory w treści (np. /wp-json/weles/v1/inquiry)
   nie mają gdzie się złamać i rozpychają akapit. */
.entry-content,
.svc-detail__col p,
.case-detail__text,
.faq-item__a p {
  overflow-wrap: break-word;
}
.entry-content a,
.entry-content code,
.contact-agent-note code,
.discovery-list code {
  overflow-wrap: anywhere;
}

/* Tabele w treści (polityka cookies ma cztery kolumny) same z siebie nie
   zwężą się poniżej sumy kolumn. JS opakowuje je w .table-scroll — tu tylko
   wygląd kontenera i sygnał, że da się przewinąć. */
.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--sp-6);
  border-radius: var(--radius-md);
  /* Cieniowanie prawej krawędzi znika, gdy tabela jest przewinięta do końca —
     to jedyny sygnał, że da się przewinąć, więc musi być widoczny. */
  background:
    linear-gradient(to right, var(--color-bg) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--color-bg) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,17,19,0.16), rgba(15,17,19,0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,17,19,0.16), rgba(15,17,19,0)) right / 14px 100% no-repeat scroll;
}
.table-scroll > table { margin-bottom: 0; min-width: 520px; background: transparent; }
.table-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--steel-300); border-radius: var(--radius-pill); }

/* Nazwy techniczne (weles_consent, wordpress_test_cookie) nie powinny łamać się
   w środku — w tabeli i tak jest przewijanie, a przełamane w pół są nieczytelne. */
.entry-content td code,
.entry-content th code { white-space: nowrap; overflow-wrap: normal; }

/* Obrazy nigdy szersze niż kontener, nawet z atrybutem width. */
img, svg, video, iframe, table { max-width: 100%; }

/* --- Tablet i mniejsze --- */
@media (max-width: 900px) {
  /* Nagłówek jest lepki; kotwice muszą uwzględniać jego realną wysokość,
     a na mobile pasek górny znika, więc offset jest mniejszy. */
  html { scroll-padding-top: 84px; }

  .svc-detail { padding-block: var(--sp-10); }
  .svc-detail__head { gap: var(--sp-4); }
  .svc-detail__answer { font-size: var(--font-size-base); padding-left: var(--sp-4); }
  .svc-detail__meta { flex-direction: column; gap: var(--sp-5); padding: var(--sp-5); }
  .svc-detail__meta .btn { width: 100%; justify-content: center; }
}

/* --- Telefon --- */
@media (max-width: 640px) {
  /* Przyciski z długimi etykietami („Dokumentacja Agent Gateway”) nie mieszczą
     się w jednej linii; nowrap wypychał je poza ekran. */
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  /* Karty pionowo na całą szerokość ekranu, z mniejszym wcięciem. */
  .svc-card { padding: var(--sp-6) var(--sp-5); }
  .svc-card__media { margin: calc(var(--sp-6) * -1) calc(var(--sp-5) * -1) var(--sp-5); }
  .train-card { padding: var(--sp-6) var(--sp-5); }

  /* Nagłówki sekcji – clamp() schodzi za wolno na małych ekranach. */
  .section-title { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .svc-detail__title { font-size: clamp(1.375rem, 5.6vw, 1.75rem); }
  .case-detail__title { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
  .faq-item__q { font-size: var(--font-size-base); gap: var(--sp-3); }

  /* Sekcje: mniej powietrza, żeby nie trzeba było długo przewijać. */
  .section { padding-block: var(--sp-12); }
  .svc-detail { padding-block: var(--sp-8); }

  /* Kod i tabele API – przewijanie wewnątrz, nigdy całą stroną. */
  .agent-panel__code,
  .code-block { font-size: 0.75rem; padding: var(--sp-4); }
  .api-table { min-width: 520px; }

  /* Dokumenty prawne: ciaśniejsze komórki, inaczej tabela cookies jest nieczytelna. */
  .entry-content th,
  .entry-content td { padding: var(--sp-2) var(--sp-3); font-size: var(--font-size-sm); }
  .entry-content .lead { font-size: var(--font-size-base); padding-left: var(--sp-4); }
  .entry-content .dane-firmy { min-width: 0; width: 100%; }
  .entry-content .dane-firmy th { white-space: normal; }

  /* Stopka: linki prawne w kolumnie, żeby dało się w nie trafić kciukiem. */
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .footer-legal { line-height: 2; }

  /* (Cele dotykowe menu i przewijanie rozwijanego panelu ustawia już blok
     @media max-width:1024px — tam pojawia się hamburger.) */

  /* Karty unoszące się nad wizualizacją hero zabierają miejsce i zasłaniają
     treść — na telefonie znikają (są wyłącznie dekoracyjne, aria-hidden). */
  .hero__floating-card { display: none; }
  .hero__points li { font-size: var(--font-size-xs); }

  /* --- Cele dotykowe ---
     Pomiar w przeglądarce pokazał odnośniki wysokości 19–26 px. Palec trafia
     w takie z trudem; wytyczne WCAG mówią o 24 px minimum, a praktyka
     projektowa o 44 px. Powiększamy pole klikalne, nie sam tekst. */
  .btn-arrow,
  .footer-legal a,
  .footer-nav a,
  .agent-panel__links a,
  .svc-toc a,
  .consent-reopen {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .footer-nav a { padding-block: var(--sp-2); }
  .agent-panel__links { gap: var(--sp-3); }
  .agent-panel__links a { padding: var(--sp-2) var(--sp-3); }
  .footer-legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); align-items: center; }

  /* Przełącznik zgód: samo pole ma 18 px, ale klikalna jest cała etykieta —
     powiększamy ją, żeby dało się trafić w dowolne miejsce wiersza. */
  .consent__switch { min-height: 44px; }

  /* --- Najmniejsze rozmiary tekstu ---
     Pomiar wykazał 10–11,2 px w etykietach. Poniżej ~12 px tekst na telefonie
     jest męczący, a iOS potrafi sam powiększać stronę przy polach formularzy. */
  .case-card__kind,
  .svc-detail__meta-label,
  .svc-detail__stack li,
  .hero__floating-label,
  .consent__switch-label em { font-size: 0.75rem; }
  .svc-card__eyebrow,
  .svc-detail__label,
  .api-method,
  .card__cat,
  .api-table thead th,
  .agent-panel__bar em,
  .contact-agent-note { font-size: 0.78125rem; }

  /* Okruszki i pole zgody RODO – pomiar pokazał 22 px i 18 px. */
  .breadcrumbs a,
  .breadcrumbs [aria-current] { display: inline-flex; align-items: center; min-height: 36px; }
  .form-group--checkbox .checkbox-label { min-height: 44px; align-items: center; }
  .form-group--checkbox input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }

  /* iOS powiększa widok, gdy pole formularza ma tekst mniejszy niż 16 px. */
  .contact-form input,
  .contact-form textarea,
  .contact-form select { font-size: 1rem; }
}

/* Przycisk „do góry" zasłaniał tekst w prawym dolnym rogu — na telefonie
   jest mniejszy i bliżej krawędzi. Chowamy go też, gdy otwarty jest baner
   zgód, żeby nie nakładał się na przyciski wyboru. */
@media (max-width: 640px) {
  .back-to-top {
    width: 42px; height: 42px;
    bottom: var(--sp-4); right: var(--sp-4);
    font-size: 1.1rem;
  }
  .consent.is-open ~ .back-to-top,
  body:has(.consent.is-open) .back-to-top { opacity: 0; visibility: hidden; }
}

/* --- Bardzo wąskie ekrany (iPhone SE i podobne) --- */
@media (max-width: 380px) {
  .container { padding-inline: var(--sp-4); }
  .svc-card { padding: var(--sp-5) var(--sp-4); }
  .svc-card__media { margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) var(--sp-4); }
  .hero__title { font-size: clamp(1.75rem, 8.5vw, 2.25rem); }
  .stats-strip { padding: var(--sp-5); }
  .consent__inner { padding: var(--sp-5); }
  .consent__option-desc { margin-left: 0; }
}

/* --- Urządzenia dotykowe niezależnie od szerokości --- */
@media (hover: none) {
  /* Efekty :hover zostają „przyklejone" po dotknięciu — wyłączamy te, które
     na dotyku wyglądają jak zawieszony stan interfejsu. */
  .svc-card:hover { transform: none; box-shadow: none; }
  .svc-card:hover .svc-card__media img { transform: none; }
  .card:hover .card__img { transform: none; }
  .btn:hover { transform: none; }
  .hero__visual:hover { transform: perspective(1200px) rotateY(-3deg) rotateX(2deg); }
}

/* --- Orientacja pozioma na telefonie --- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: var(--sp-10); }
  .consent { max-height: 90vh; overflow-y: auto; }
}

/* ============================================================
   33. 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;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   37. PORTAL NEWS (strona /news/ + archiwa kategorii)
   Układ jak portal informacyjny: wyróżniony artykuł + karty boczne,
   pasek kategorii, siatka 3-kolumnowa. Paleta marki.
   ============================================================ */
.news-portal { padding-bottom: var(--sp-20); }

.news-portal__head {
  background: var(--gradient-brand);
  color: var(--white);
  padding-block: var(--sp-12) var(--sp-10);
  margin-bottom: var(--sp-10);
  position: relative;
  overflow: hidden;
}
.news-portal__head::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  /* Ta sama tekstura co w .page-stripe — spójny nagłówek także na /news/. */
  background:
    radial-gradient(ellipse at 12% 0%, rgba(146,1,1,0.35), transparent 55%),
    radial-gradient(ellipse at 88% 120%, rgba(125,125,125,0.18), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 L80 40 M40 0 L40 80' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(22,24,26,0.85) 0%, rgba(59,11,12,0.85) 100%),
    url("../images/hero-bg.jpg");
  background-size: auto, auto, auto, cover, cover;
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
}
.news-portal__head > .container { position: relative; z-index: 1; }
.news-portal__head .section-eyebrow { color: var(--accent-soft); }
.news-portal__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  margin: var(--sp-2) 0 0;
  line-height: 1.1;
}
.news-portal__intro { color: var(--steel-200); max-width: 60ch; margin-top: var(--sp-3); }
.news-portal__head .breadcrumbs { margin-bottom: var(--sp-3); }
.news-portal__head .breadcrumbs a { color: var(--steel-200); }
.news-portal__head .breadcrumbs [aria-current] { color: var(--white); }

/* --- Wspólne: badge, meta, placeholder --- */
.news-badge {
  display: inline-block;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.news-badge--xs { font-size: 0.625rem; padding: 2px 7px; margin-bottom: var(--sp-2); }
.news-badge:hover { color: var(--white); filter: brightness(1.12); }

.news-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--steel-600);
  font-family: var(--font-mono);
}
.news-meta__ai { color: var(--color-primary); font-weight: 700; }

.card-ph {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--c, var(--steel-500)), var(--ink-800));
}

/* --- Top stories: wyróżniony + boczne --- */
.news-top { margin-bottom: var(--sp-12); }
.news-top__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-8);
}
.news-top__side { display: grid; gap: var(--sp-5); align-content: start; }

.feat-card {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feat-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-900); }
.feat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.feat-card:hover .feat-card__img img { transform: scale(1.04); }
.feat-card__body { padding: var(--sp-6); }
.feat-card__title { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.2; margin-bottom: var(--sp-3); }
.feat-card__title a { color: var(--ink-900); }
.feat-card__title a:hover { color: var(--color-primary); }
.feat-card__excerpt { color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--sp-4); }

.side-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.side-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--ink-900); }
.side-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.side-card:hover .side-card__img img { transform: scale(1.05); }
.side-card__title { font-size: var(--font-size-base); line-height: 1.3; margin-bottom: var(--sp-2); }
.side-card__title a { color: var(--ink-900); }
.side-card__title a:hover { color: var(--color-primary); }

/* --- Pasek kategorii --- */
.news-catbar {
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  margin-bottom: var(--sp-10);
  position: sticky; top: 0; z-index: 20;
}
.news-catbar__inner {
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  padding-block: var(--sp-3);
  scrollbar-width: thin;
}
.news-catbar__inner::-webkit-scrollbar { height: 4px; }
.news-catbar__inner::-webkit-scrollbar-thumb { background: var(--steel-300); border-radius: var(--radius-pill); }
.cat-pill {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.cat-pill::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--steel-400));
  margin-right: var(--sp-2); vertical-align: middle;
}
.cat-pill:hover { color: var(--ink-900); border-color: var(--c, var(--steel-400)); }
.cat-pill.is-active {
  color: var(--white);
  background: var(--c, var(--color-primary));
  border-color: var(--c, var(--color-primary));
}
.cat-pill.is-active::before { background: var(--white); }

/* --- Siatka newsów --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.news-card {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--tr-base), transform var(--tr-base), border-color var(--tr-base);
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--steel-300); }
.news-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-900); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.news-card__title { font-size: var(--font-size-lg); line-height: 1.3; margin-bottom: var(--sp-2); }
.news-card__title a { color: var(--ink-900); }
.news-card__title a:hover { color: var(--color-primary); }
.news-card__excerpt { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.6; margin-bottom: var(--sp-4); }
.news-card__body .news-meta { margin-top: auto; }

/* --- Paginacja portalu --- */
.news-pagination { margin-top: var(--sp-12); }
.news-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--sp-3);
  margin: 0 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 600;
  transition: all var(--tr-fast);
}
.news-pagination .page-numbers.current { background: var(--gradient-accent); color: var(--white); border-color: transparent; }
.news-pagination .page-numbers:hover:not(.current) { border-color: var(--color-primary); color: var(--color-primary); }
.news-pagination .page-numbers.dots { border: none; }

.news-empty { text-align: center; padding: var(--sp-20) 0; color: var(--color-text-muted); }

/* --- Responsywność portalu --- */
@media (max-width: 900px) {
  .news-top__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-portal__head { padding-block: var(--sp-10) var(--sp-8); margin-bottom: var(--sp-8); }
  .news-catbar { position: static; }
  .side-card { grid-template-columns: 96px 1fr; gap: var(--sp-3); }
  .feat-card__body { padding: var(--sp-5); }
}