/* =============================================================================
   marszalstudio - /uslugi/ FX overlay (v2 — pixel-perfect refinement)

   Synteza:
   • Design tokens marszalstudio (Inter Variable, amber #FFBE0D + ink ladder)
   • Best practices 2026 (clamp fluid, multi-layer shadows, ease-out-expo)
   • Raycast.com patterns (1px top highlight inset, ::after border layer,
     instant scale(0.98) :active, ss03 stylistic set, color-tinted shadows)

   Wszystko aplikuje się tylko do istniejących klas .usl-* na /uslugi/.
   ========================================================================== */

/* ============================================================================
   1) DESIGN TOKENS — CSS custom properties (scope .usl-wrap)
   ============================================================================ */
.usl-wrap {
  /* Brand palette */
  --ms-amber: #FFBE0D;
  --ms-amber-light: #FFD42A;
  --ms-amber-dark: #E8B600;

  /* Ink ladder (skonsolidowane z 7 odcieni → 4 tokeny) */
  --ms-ink-1: #1a1a1c;       /* headings, table title */
  --ms-ink-2: #242424;       /* body strong, default text */
  --ms-ink-body: #3a3a3c;    /* lead, card body */
  --ms-ink-mid: #5a5a5c;     /* table secondary col */
  --ms-ink-mute: #8e8e92;    /* table thead, captions */

  /* Surface ladder */
  --ms-surface: #ffffff;
  --ms-surface-2: #fafafb;
  --ms-surface-3: #F5F7FA;
  --ms-surface-dark: #0F0F0F;

  /* Borders (warm-tinted dla light theme) */
  --ms-border-faint: rgba(36, 36, 36, 0.05);
  --ms-border-soft: rgba(36, 36, 36, 0.08);
  --ms-border-mid: rgba(36, 36, 36, 0.12);

  /* Radius scale (4 tokeny - Raycast inspired) */
  --ms-r-sm: 12px;
  --ms-r-md: 16px;
  --ms-r-lg: 20px;
  --ms-r-xl: 28px;
  --ms-r-pill: 100px;

  /* Easings (4 tokeny - 2026 best practices) */
  --ms-ease-default: cubic-bezier(0.4, 0, 0.2, 1);     /* hover/UI quick */
  --ms-ease-snappy: cubic-bezier(0.4, 0, 0.22, 0.96);  /* reveal mid */
  --ms-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);       /* scroll-in long */
  --ms-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* overshoot */

  /* Shadow tokens (multi-layer, warm rgba(36,36,36)) */
  --ms-shadow-surface:
    0 1px 2px rgba(36, 36, 36, 0.04),
    0 2px 4px rgba(36, 36, 36, 0.04);

  --ms-shadow-elevated:
    0 1px 2px rgba(36, 36, 36, 0.06),
    0 4px 8px rgba(36, 36, 36, 0.06),
    0 12px 24px rgba(36, 36, 36, 0.08);

  --ms-shadow-amber:
    0 1px 2px rgba(36, 36, 36, 0.06),
    0 4px 12px rgba(255, 190, 13, 0.30),
    0 8px 24px rgba(255, 190, 13, 0.18);

  --ms-shadow-amber-strong:
    0 2px 4px rgba(36, 36, 36, 0.08),
    0 8px 24px rgba(255, 190, 13, 0.45),
    0 16px 40px rgba(255, 190, 13, 0.22);

  /* Signature inset highlights (Raycast 1px top edge) */
  --ms-inset-hi: rgba(255, 255, 255, 0.8) 0 1px 0 inset;
  --ms-inset-hi-strong: rgba(255, 255, 255, 0.9) 0 1px 0.4px inset;
}

/* ============================================================================
   2) TYPOGRAPHY UNIFICATION
   • Feature settings ss01,cv11 (Inter L cv) na cały wrap (rozwiązuje
     niespójność z auditu - dotąd tylko hero h1 miał).
   • tabular-nums + tnum na liczbach (stat-num, table)
   ============================================================================ */
.usl-wrap,
.usl-wrap h1,
.usl-wrap h2,
.usl-wrap h3,
.usl-wrap h4,
.usl-wrap p,
.usl-wrap span,
.usl-wrap a,
.usl-wrap td,
.usl-wrap th {
  font-feature-settings: "ss01", "cv11", "kern", "liga", "calt";
  -webkit-font-feature-settings: "ss01", "cv11", "kern", "liga", "calt";
}

.usl-wrap .usl-stat-num,
.usl-wrap .usl-table-wrap td,
.usl-wrap .usl-table-wrap th {
  font-feature-settings: "ss01", "cv11", "tnum", "kern", "liga";
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   3) GLOBAL FOCUS-VISIBLE (accessibility 2026)
   ============================================================================ */
.usl-wrap a:focus-visible,
.usl-wrap button:focus-visible,
.usl-wrap [tabindex]:focus-visible {
  outline: 2px solid var(--ms-amber);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 150ms var(--ms-ease-default);
}

/* ============================================================================
   4) KARTY .usl-card — Raycast-style ::after border + top highlight
   ============================================================================ */
.usl-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 200ms var(--ms-ease-default),
    box-shadow 250ms var(--ms-ease-default);
}

/* Spotlight gradient za kursorem (na ::before) */
.usl-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    420px circle at var(--usl-mx, -200px) var(--usl-my, -200px),
    rgba(255, 190, 13, 0.18),
    rgba(255, 190, 13, 0.05) 28%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 250ms var(--ms-ease-default);
  border-radius: inherit;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .usl-card:hover::before { opacity: 1; }
  .usl-card:hover {
    transform: translateY(-2px);
    box-shadow:
      var(--ms-inset-hi),
      var(--ms-shadow-elevated);
  }
}

@media (hover: none) {
  .usl-card:active {
    transform: scale(0.99);
    transition-duration: 80ms;
  }
}

/* Zawartość zawsze nad gradientem */
.usl-card > * { position: relative; z-index: 1; }

/* ============================================================================
   5) BUTTON PRIMARY (.usl-btn-primary)
   • Sygnaturowy 4-stack shadow: top highlight + bottom darken + amber glow
   • Shine animation przez ::after
   • translateY(-1px) hover + scale(0.98) :active
   ============================================================================ */
.usl-wrap .usl-btn-primary {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  background: linear-gradient(180deg, #FFD42A 0%, var(--ms-amber) 100%) !important;
  box-shadow:
    var(--ms-inset-hi-strong),
    rgba(0, 0, 0, 0.08) 0 -1px 0.4px inset,
    var(--ms-shadow-amber) !important;
  transition:
    transform 100ms var(--ms-ease-default),
    box-shadow 250ms var(--ms-ease-default),
    filter 200ms var(--ms-ease-default) !important;
}

/* Shine sweep */
.usl-wrap .usl-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: usl-shine 5s ease-in-out infinite;
  z-index: 3;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .usl-wrap .usl-btn-primary:hover {
    transform: none !important;
    box-shadow:
      var(--ms-inset-hi-strong),
      rgba(0, 0, 0, 0.08) 0 -1px 0.4px inset,
      var(--ms-shadow-amber-strong) !important;
    filter: brightness(1.03) !important;
  }
  .usl-wrap .usl-btn-primary:hover .premium-button-text-icon-wrapper svg {
    transform: translateX(4px) !important;
  }
}

.usl-wrap .usl-btn-primary .premium-button-text-icon-wrapper svg {
  transition: transform 320ms var(--ms-ease-default) !important;
}

.usl-wrap .usl-btn-primary:active {
  transform: none !important;
  filter: brightness(0.97) !important;
  transition-duration: 50ms;
}

@keyframes usl-shine {
  0%   { left: -120%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

/* ============================================================================
   6) BUTTON OUTLINE / ONLIGHT
   • Styl identyczny z /packshoty/ "Cennik packshotów →"
   • 14px/700/.02em + 16px arrow + płynna translacja (Premium drawable native)
   ============================================================================ */
.usl-wrap .usl-btn-outline,
.usl-wrap .usl-btn-onlight {
  background: transparent !important;
  padding: 20px 10px !important;
  border-radius: var(--ms-r-pill) !important;
  overflow: visible !important;
  position: relative;
  isolation: isolate;
}

.usl-wrap .usl-btn-outline .premium-button-text-icon-wrapper span,
.usl-wrap .usl-btn-onlight .premium-button-text-icon-wrapper span {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

.usl-wrap .usl-btn-outline .premium-button-text-icon-wrapper,
.usl-wrap .usl-btn-onlight .premium-button-text-icon-wrapper {
  gap: 15px !important;
  transition:
    color 200ms var(--ms-ease-default),
    -webkit-text-fill-color 200ms var(--ms-ease-default);
}

.usl-wrap .usl-btn-outline .premium-button-text-icon-wrapper svg,
.usl-wrap .usl-btn-onlight .premium-button-text-icon-wrapper svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  transition: transform 420ms var(--ms-ease-default) !important;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .usl-wrap .usl-btn-outline:hover .premium-button-text-icon-wrapper {
    color: var(--ms-ink-2);
    -webkit-text-fill-color: var(--ms-ink-2);
  }
  .usl-wrap .usl-btn-outline:hover .premium-button-text-icon-wrapper svg {
    transform: translateX(6px) !important;
  }
  .usl-wrap .usl-btn-onlight:hover .premium-button-text-icon-wrapper {
    color: var(--ms-amber);
    -webkit-text-fill-color: var(--ms-amber);
  }
  .usl-wrap .usl-btn-onlight:hover .premium-button-text-icon-wrapper svg {
    transform: translateX(6px) !important;
  }
}

.usl-wrap .usl-btn-outline:active,
.usl-wrap .usl-btn-onlight:active {
  transform: scale(0.97);
  transition-duration: 50ms;
}

/* ============================================================================
   7) TABELA "Specjalizacje branżowe"
   • Header 13px uppercase tracking 0.05em, color ink-mute
   • Row hover: bg-color shift (NIE transform na row - 2026 best practice)
   • Animowany pasek po lewej (na td:first-child::before, bo tr:position
     ignoruje display:table-row)
   • Cursor-tracked spotlight na background tr
   • ::after border layer (smooth focus state bez layout shift)
   ============================================================================ */
.usl-wrap .usl-table-wrap {
  margin: 32px auto 0;
  max-width: 1200px;
  border-radius: var(--ms-r-lg);
  background: var(--ms-surface);
  border: 1px solid rgba(36, 36, 36, 0.08);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(36, 36, 36, 0.04),
    0 4px 12px -4px rgba(36, 36, 36, 0.06);
}
.usl-wrap .usl-table-wrap::after {
  display: none !important;
}

/* Border w ::after (Raycast pattern) */
.usl-wrap .usl-table-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--ms-border-soft);
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
}

.usl-wrap .usl-table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  letter-spacing: -0.01em;
}

/* Header */
.usl-wrap .usl-table-wrap thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  padding: 16px 24px;
  background: var(--ms-surface-2);
  border-bottom: 1px solid var(--ms-border-faint);
  white-space: nowrap;
}

/* Row spotlight gradient (cursor-tracked) */
.usl-wrap .usl-table-wrap tbody tr {
  background:
    radial-gradient(
      560px circle at var(--usl-rmx, -300px) var(--usl-rmy, -300px),
      rgba(255, 190, 13, 0.10),
      rgba(255, 190, 13, 0.025) 35%,
      transparent 70%
    );
  background-color: transparent;
  transition: background-color 150ms ease-out;
}

/* Body cells */
.usl-wrap .usl-table-wrap tbody td {
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ms-ink-body);
  border-bottom: 1px solid var(--ms-border-faint);
  vertical-align: middle;
  background: transparent;
  position: relative;
  z-index: 1;
  transition:
    transform 350ms var(--ms-ease-default),
    color 200ms var(--ms-ease-default);
}
.usl-wrap .usl-table-wrap tbody tr:last-child td { border-bottom: 0; }

/* Pierwsza kolumna (branża) */
.usl-wrap .usl-table-wrap tbody td:first-child {
  font-weight: 700;
  color: var(--ms-ink-1);
  letter-spacing: -0.018em;
  font-size: 15.5px;
}
.usl-wrap .usl-table-wrap tbody td:first-child strong { font-weight: 700; }

/* Pasek po lewej - full row height, scaleY 0→1 na hover */
.usl-wrap .usl-table-wrap tbody td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ms-amber);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 320ms var(--ms-ease-spring);
  z-index: 2;
}

/* Środkowa kolumna - lekko jaśniejsza */
.usl-wrap .usl-table-wrap tbody td:nth-child(2) {
  color: var(--ms-ink-mid);
}

/* Trzecia kolumna - link bez kwadratowego underline (custom rounded ::before) */
.usl-wrap .usl-table-wrap tbody td:last-child {
  position: relative;
}
.usl-wrap .usl-table-wrap tbody td:last-child a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-ink-1);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.018em;
  text-decoration: none !important;
  position: relative;
  padding-bottom: 5px;
  transition:
    gap 280ms var(--ms-ease-default),
    color 200ms var(--ms-ease-default);
}
/* Rounded underline jako ::before (tylko pod tekstem, bez arrow) */
.usl-wrap .usl-table-wrap tbody td:last-child a > span,
.usl-wrap .usl-table-wrap tbody td:last-child a {
  position: relative;
}
.usl-wrap .usl-table-wrap tbody td:last-child a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - 22px); /* zostaw miejsce pod arrow ::after gdy widoczne */
  height: 2px;
  background: var(--ms-amber);
  border-radius: 2px;
  transition: width 280ms var(--ms-ease-default), height 200ms var(--ms-ease-default);
}
.usl-wrap .usl-table-wrap tbody td:last-child a::after {
  content: '→';
  display: inline-block;
  font-weight: 500;
  color: var(--ms-amber);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 240ms var(--ms-ease-default),
    transform 280ms var(--ms-ease-default);
}
/* Stan default - underline pod całym tekstem (gdy arrow ukryty) */
.usl-wrap .usl-table-wrap tbody td:last-child a:not(:hover)::before {
  width: 100%;
}

/* HOVER ROW — bg color + pasek po lewej + arrow appear (BEZ translacji tekstu/komórek) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .usl-wrap .usl-table-wrap tbody tr:hover {
    background-color: rgba(255, 190, 13, 0.05);
  }
  .usl-wrap .usl-table-wrap tbody tr:hover td:first-child::before {
    transform: scaleY(1);
  }
  .usl-wrap .usl-table-wrap tbody tr:hover td:first-child {
    color: var(--ms-ink-1);
  }
  .usl-wrap .usl-table-wrap tbody tr:hover td:last-child a::before {
    width: calc(100% - 22px);
    height: 2.5px;
  }
  .usl-wrap .usl-table-wrap tbody tr:hover td:last-child a::after {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================================
   8) TABELA - mobile (card view, <720px)
   ============================================================================ */
@media (max-width: 720px) {
  .usl-wrap .usl-table-wrap { border-radius: var(--ms-r-md); }
  .usl-wrap .usl-table-wrap table,
  .usl-wrap .usl-table-wrap thead,
  .usl-wrap .usl-table-wrap tbody,
  .usl-wrap .usl-table-wrap tr,
  .usl-wrap .usl-table-wrap td { display: block; width: 100%; }
  .usl-wrap .usl-table-wrap thead { display: none; }

  .usl-wrap .usl-table-wrap tbody tr {
    padding: 18px 18px 20px 22px;
    border-bottom: 1px solid var(--ms-border-faint);
    position: relative;
  }
  .usl-wrap .usl-table-wrap tbody tr:last-child { border-bottom: 0; }

  .usl-wrap .usl-table-wrap tbody td {
    padding: 4px 0;
    border: 0;
    font-size: 14.5px;
  }
  /* Mobile: TD label przez data-label (zachowane z oryginału) */
  .usl-wrap .usl-table-wrap tbody td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-ink-mute);
    margin-bottom: 2px;
  }
  .usl-wrap .usl-table-wrap tbody td:first-child {
    margin-bottom: 8px;
    font-size: 16px;
    transform: none !important;
  }
  /* Reset desktop ::before - na mobile pasek na całym wierszu */
  .usl-wrap .usl-table-wrap tbody td:first-child::before {
    content: attr(data-label);
    position: static;
    width: auto;
    background: transparent;
    transform: none;
    border-radius: 0;
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-ink-mute);
    margin-bottom: 2px;
    box-shadow: none;
  }
  /* Pasek po lewej w trybie mobile */
  .usl-wrap .usl-table-wrap tbody tr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    background: linear-gradient(180deg, var(--ms-amber-light), var(--ms-amber), var(--ms-amber-dark));
    border-radius: 0 3px 3px 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms var(--ms-ease-spring);
  }
  .usl-wrap .usl-table-wrap tbody tr:active::before {
    transform: scaleX(1);
  }
  .usl-wrap .usl-table-wrap tbody tr:active {
    background-color: rgba(255, 190, 13, 0.04);
  }
}

/* ============================================================================
   9) PREFERS-REDUCED-MOTION (accessibility 2026)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .usl-card,
  .usl-card::before,
  .usl-table-wrap tbody tr,
  .usl-table-wrap tbody td,
  .usl-table-wrap tbody td::before,
  .usl-btn-primary,
  .usl-btn-primary::after,
  .usl-btn-outline,
  .usl-btn-outline .premium-button-text-icon-wrapper,
  .usl-btn-outline .premium-button-text-icon-wrapper svg,
  .usl-btn-onlight,
  .usl-btn-onlight .premium-button-text-icon-wrapper,
  .usl-btn-onlight .premium-button-text-icon-wrapper svg {
    transition: none !important;
    animation: none !important;
  }
  .usl-wrap .usl-btn-primary::after { display: none; }
}

/* ============================================================================
   10) TOUCH (no hover) - wyłącz hover transforms, zachowaj :active feedback
   ============================================================================ */
@media (hover: none) {
  .usl-card:hover { transform: none; box-shadow: var(--ms-shadow-surface); }
  .usl-wrap .usl-btn-primary::after { display: none; }
  .usl-wrap .usl-btn-primary:hover {
    transform: none;
    box-shadow:
      var(--ms-inset-hi-strong),
      rgba(0, 0, 0, 0.08) 0 -1px 0.4px inset,
      var(--ms-shadow-amber) !important;
  }
}

/* ============================================================================
   11) LOGOS — optyczne wyrównanie wielkości (per-logo override)
   Iteracja 1: powiększ małe (TIFFI/Kontigo/Annabelle/JEMIOL),
               drastycznie zmniejsz 4FIZJO i WNK (zdominowane przez max-width),
               powiększ Hortex (mały symbol).
   ============================================================================ */
.usl-wrap .usl-logos img[src*="l-1284786-2"]      { max-height: 84px !important; max-width: 120px !important; } /* TIFFI */
.usl-wrap .usl-logos img[src*="logo-45671-3"]     { max-height: 84px !important; max-width: 120px !important; } /* Kontigo */
.usl-wrap .usl-logos img[src*="logo-45670-2"]     { max-height: 84px !important; max-width: 120px !important; } /* Annabelle */
.usl-wrap .usl-logos img[src*="logo-2671823-2"]   { max-height: 28px !important; max-width: 90px !important; }  /* 4FIZJO  -mniejszy */
.usl-wrap .usl-logos img[src*="logo12257"]        { max-height: 32px !important; max-width: 54px !important; }  /* HORTEX  -mniejszy v2 */
.usl-wrap .usl-logos img[src*="logo_wnk_100"]     { max-height: 22px !important; max-width: 100px !important; } /* WNK     -mniejszy */
.usl-wrap .usl-logos img[src*="logo-45674-4"]     { max-height: 84px !important; max-width: 120px !important; } /* JEMIOL */

/* ============================================================================
   12) STAT NUMS — żółte wyróżnienia
   ============================================================================ */
.usl-wrap .usl-stat-num span {
  color: var(--ms-amber);
  font-weight: 700;
}

/* ============================================================================
   13) MIASTA PILL GRID — kompaktowe, w 1 wierszu na desktop
   ============================================================================ */
@media (min-width: 1100px) {
  .usl-wrap .usl-pill-grid {
    gap: 8px !important;
    max-width: 100%;
  }
  .usl-wrap .usl-pill {
    padding: 9px 14px 11px !important;
    font-size: 13px !important;
  }
}

/* ============================================================================
   14) SPACING RHYTHM — pełny rework, spójny 4/8px grid + fluid clamp
   Wszystkie wartości na 8px grid scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 120
   ============================================================================ */

/* Container max-width unifikacja */
.usl-wrap {
  max-width: 1300px;
  margin: 0 auto;
}

/* === Hero === */
.usl-wrap .usl-hero {
  padding: clamp(64px, 8vw, 104px) 16px clamp(56px, 6vw, 80px) !important;
}
.usl-wrap .usl-badge {
  margin-bottom: clamp(20px, 2.5vw, 28px) !important;
}
.usl-wrap .usl-hero h1 {
  margin: 0 0 clamp(20px, 2.5vw, 28px) !important;
}
.usl-wrap .usl-hero .lead {
  margin: 0 auto clamp(28px, 3.5vw, 40px) !important;
}
.usl-wrap .usl-cta-row {
  margin-bottom: clamp(20px, 3vw, 32px) !important;
  gap: clamp(16px, 2vw, 24px) !important;
}
.usl-wrap .usl-trust {
  margin-top: clamp(4px, 1vw, 12px) !important;
  gap: clamp(20px, 3vw, 32px) !important;
}

/* === Sticky nav (poza hero w rytmie) === */
.usl-wrap .usl-stickynav {
  margin-top: clamp(16px, 2.5vw, 32px) !important;
}

/* === Logos === */
.usl-wrap .usl-logos {
  padding: clamp(48px, 6vw, 72px) 16px clamp(40px, 5vw, 64px) !important;
}

/* === Stats === */
.usl-wrap .usl-stats {
  padding: clamp(40px, 5vw, 64px) 16px clamp(48px, 6vw, 72px) !important;
  gap: clamp(20px, 3vw, 32px) !important;
}
.usl-wrap .usl-stat-label {
  margin-top: clamp(8px, 1vw, 12px) !important;
}

/* === Section (powtarzalna - eCom, lifestyle, branże, postpro, miasta, FAQ) === */
.usl-wrap .usl-section {
  padding: clamp(64px, 8vw, 104px) 16px !important;
}
.usl-wrap .usl-section-head {
  margin: 0 auto clamp(32px, 4vw, 48px) !important;
}
.usl-wrap .usl-section-head h2 {
  margin: 0 0 clamp(12px, 1.5vw, 16px) !important;
}
.usl-wrap .usl-section-head p {
  margin: 0 auto !important;
}

/* === Cards (.usl-card) — wewnętrzne odstępy spójne === */
.usl-wrap .usl-card {
  padding: clamp(24px, 3vw, 32px) !important;
}
.usl-wrap .usl-card-icon,
.usl-wrap .usl-card .usl-card-icon {
  margin-bottom: clamp(20px, 2.5vw, 28px) !important;
}
.usl-wrap .usl-card h3 {
  margin: 0 0 clamp(10px, 1.25vw, 14px) !important;
}
.usl-wrap .usl-card p {
  margin: 0 0 clamp(18px, 2vw, 24px) !important;
}
.usl-wrap .usl-card-link {
  gap: 8px !important;
}

/* === Grid gap === */
.usl-wrap .usl-grid {
  gap: clamp(16px, 2vw, 24px) !important;
}

/* === Pill grid === */
.usl-wrap .usl-pill-grid {
  margin: clamp(8px, 1vw, 16px) 0 !important;
  gap: clamp(8px, 1vw, 12px) !important;
}
.usl-wrap .usl-pill {
  padding: 10px 14px !important;  /* symmetryczny vertical */
  line-height: 1.4 !important;
}

/* === Table — większe padding na desktop dla "oddychania" === */
.usl-wrap .usl-table-wrap {
  margin-top: clamp(24px, 3vw, 40px) !important;
}
.usl-wrap .usl-table-wrap thead th {
  padding: clamp(14px, 1.5vw, 18px) clamp(20px, 2.5vw, 28px) !important;
}
.usl-wrap .usl-table-wrap tbody td {
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.5vw, 28px) !important;
}

/* === CTA banner === */
.usl-wrap .usl-cta-banner {
  margin: clamp(48px, 6vw, 80px) auto !important;
  padding: clamp(56px, 7vw, 88px) clamp(24px, 4vw, 56px) !important;
}
.usl-wrap .usl-cta-banner h2 {
  margin: 0 0 clamp(16px, 2vw, 24px) !important;
}
.usl-wrap .usl-cta-banner p {
  margin: 0 auto clamp(24px, 3vw, 36px) !important;
}
.usl-wrap .usl-cta-rating {
  margin-bottom: clamp(28px, 3.5vw, 40px) !important;
}

/* === FAQ === */
.usl-wrap .schema-faq-section {
  margin-bottom: clamp(8px, 1vw, 16px) !important;
}
.usl-wrap .schema-faq-answer {
  padding: clamp(8px, 1vw, 16px) 0 clamp(20px, 2.5vw, 32px) !important;
}

/* === Yasr widget margin (poniżej content - oddech) === */
.usl-wrap + .yasr-visitor-votes,
.yasr-visitor-votes-readonly,
.yasr_visitor_votes {
  margin: clamp(40px, 5vw, 64px) auto clamp(24px, 3vw, 40px) !important;
  text-align: center;
  font-size: 14px !important;
}
.yasr-visitor-votes .yasr-rater-stars-visitor-votes,
.yasr_visitor_votes .yasr-rater-stars-visitor-votes {
  display: block !important;
  margin: 0 auto 8px !important;
}

/* ============================================================================
   ROUND 1 PRECISION FIXES - na podstawie auditu 8 agentów
   ============================================================================ */

/* === HERO === */
.usl-wrap .usl-badge {
  padding: 9px 20px 9px 36px !important;
}
.usl-wrap .usl-badge::before { left: 16px !important; }
.usl-wrap .usl-badge::after  { left: 12px !important; }
.usl-wrap .usl-hero h1 {
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  max-width: 22ch !important;
  margin-inline: auto !important;
  text-wrap: balance !important;
}
.usl-wrap .usl-hero .lead {
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
  max-width: 60ch !important;
}

/* === STICKYNAV - kontrast === */
.usl-wrap .usl-stickynav-inner {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(36, 36, 36, 0.10) !important;
}
.usl-wrap .usl-stickynav a {
  color: rgb(60, 60, 60) !important;
}

/* === LOGOS - opacity + force scale przez width (max-height nie skaluje SVG w górę) === */
.usl-wrap .usl-logos img {
  opacity: 0.55 !important;
}
.usl-wrap .usl-logos img:hover { opacity: 1 !important; }

/* Desktop: square logos (TIFFI/Kontigo/Annabelle/JEMIOL) - force width 96px */
@media (min-width: 768px) {
  .usl-wrap .usl-logos img[src*="l-1284786-2"] {     /* TIFFI */
    width: 96px !important; height: auto !important; max-height: none !important;
  }
  .usl-wrap .usl-logos img[src*="logo-45671-3"] {    /* Kontigo */
    width: 96px !important; height: auto !important; max-height: none !important;
  }
  .usl-wrap .usl-logos img[src*="logo-45670-2"] {    /* Annabelle */
    width: 96px !important; height: auto !important; max-height: none !important;
  }
  .usl-wrap .usl-logos img[src*="logo-45674-4"] {    /* JEMIOL */
    width: 96px !important; height: auto !important; max-height: none !important;
  }
  /* Wide logos - max-height ograniczenie góry (downscale OK) */
  .usl-wrap .usl-logos img[src*="logo-2671823-2"] {  /* 4FIZJO */
    width: auto !important; max-width: 110px !important; max-height: 36px !important;
  }
  .usl-wrap .usl-logos img[src*="logo12257"] {       /* HORTEX */
    width: auto !important; max-width: 80px !important; max-height: 50px !important;
  }
  .usl-wrap .usl-logos img[src*="logo_wnk_100"] {    /* WNK */
    width: auto !important; max-width: 130px !important; max-height: 32px !important;
  }
}

/* === STATS - przywrócenie do oryginalnej skali (clamp 36-52) + span 0.5em === */
.usl-wrap .usl-stat-num {
  font-size: clamp(36px, 3.8vw, 52px) !important;
  margin-bottom: 8px !important;
  font-weight: 700 !important;
}
.usl-wrap .usl-stat-num span {
  color: var(--ms-amber, #FFBE0D) !important;
  font-size: 0.5em !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
  letter-spacing: -0.01em !important;
  vertical-align: 6px !important;
}

/* === CARDS - hover translateY -2 (zamiast -6 z oryginału) === */
.usl-wrap .usl-card:hover {
  transform: translateY(-2px) !important;
}

/* === TABELA - kill stary CSS underline (border-bottom 2px) i hover bg === */
.usl-wrap .usl-table-wrap tbody td a,
.usl-table-wrap tbody td a {
  border-bottom: 0 !important;
  background: transparent !important;
}
.usl-wrap .usl-table-wrap tbody td a:hover,
.usl-table-wrap tbody td a:hover {
  background: transparent !important;
}
/* Force amber stripe na first-child only */
.usl-wrap .usl-table-wrap tbody td:first-child::before {
  content: "" !important;
}
/* Desktop pasek flush-left (zamiast left:8) */
@media (min-width: 1025px) {
  .usl-wrap .usl-table-wrap tbody td:first-child::before {
    left: 0 !important;
  }
}

/* === CTA BANNER buttony - unifikacja height + font === */
.usl-wrap .usl-cta-banner .usl-btn-primary,
.usl-wrap .usl-cta-banner .usl-btn-onlight {
  font-size: 15px !important;
  padding: 16px 28px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.usl-wrap .usl-cta-banner .usl-btn-primary .premium-button-text-icon-wrapper span,
.usl-wrap .usl-cta-banner .usl-btn-onlight .premium-button-text-icon-wrapper span {
  font-size: 15px !important;
}
.usl-wrap .usl-cta-banner .usl-btn-onlight {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--ms-r-pill, 100px) !important;
}
.usl-wrap .usl-cta-banner .usl-btn-onlight .premium-button-text-icon-wrapper {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.usl-wrap .usl-cta-banner .usl-btn-onlight:hover {
  background: rgba(255, 190, 13, 0.12) !important;
}
.usl-wrap .usl-cta-banner .usl-btn-onlight:hover .premium-button-text-icon-wrapper {
  color: var(--ms-amber, #FFBE0D) !important;
  -webkit-text-fill-color: var(--ms-amber, #FFBE0D) !important;
}

/* CTA banner padding symmetric */
.usl-wrap .usl-cta-banner {
  padding-bottom: clamp(56px, 7vw, 88px) !important;
  padding-top: clamp(56px, 7vw, 88px) !important;
}

/* === PILL yellow - usuń inset shadow (psuje czystość) === */
.usl-wrap .usl-pill-yellow {
  box-shadow: 0 4px 12px -4px rgba(255, 190, 13, 0.40) !important;
}
.usl-wrap .usl-pill-yellow:hover {
  box-shadow: 0 4px 14px -4px rgba(36, 36, 36, 0.30) !important;
}

/* === FAQ - fix stuck animation (oryginał miał animation: uslFadeIn 0.35s both) === */
.usl-wrap .schema-faq-answer {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.usl-wrap details[open] .schema-faq-answer {
  animation: uslFadeIn 0.35s both !important;
}

/* FAQ chevron expand icon */
.usl-wrap .schema-faq-section summary {
  position: relative !important;
  padding-right: 48px !important;
  cursor: pointer !important;
}
.usl-wrap .schema-faq-section summary::after {
  content: '' !important;
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid var(--ms-ink-2, #242424) !important;
  border-bottom: 2px solid var(--ms-ink-2, #242424) !important;
  transform: translateY(-70%) rotate(45deg) !important;
  transition: transform 250ms var(--ms-ease-default, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}
.usl-wrap details[open] .schema-faq-section summary::after,
.usl-wrap .schema-faq-section[open] summary::after {
  transform: translateY(-30%) rotate(-135deg) !important;
}

/* === YASR widget layout - flex column zamiast row === */
.yasr-visitor-votes,
.yasr_visitor_votes,
.yasr-visitor-votes-readonly {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin: clamp(40px, 5vw, 64px) auto clamp(24px, 3vw, 40px) !important;
  text-align: center !important;
  font-size: 14px !important;
}
.yasr-custom-text-vv-before,
.yasr-custom-text-vv-after,
.yasr-vv-second-row-container {
  text-align: center !important;
  font-size: 14px !important;
}
.yasr-vv-second-row-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

/* === AI badge "Nowość" na karcie postpro AI === */
.usl-wrap #uslugi-postpro .usl-card:nth-child(2) h3::after,
.usl-wrap .usl-card:has(img[alt*="AI" i]) h3::after {
  content: 'Nowość';
  display: inline-block;
  background: var(--ms-amber, #FFBE0D);
  color: var(--ms-ink-2, #242424);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-left: 8px;
}

/* === Reduced motion - HARD OVERRIDE
   Oryginał strony ma @media (prefers-reduced-motion:reduce) { .animated { animation: auto !important } }
   - to BUG (włącza, nie wyłącza). Override force-disable. === */
@media (prefers-reduced-motion: reduce) {
  .usl-wrap .usl-card,
  .usl-wrap .usl-card::before,
  .usl-wrap .usl-card:hover,
  .usl-wrap .usl-badge::after,
  .usl-wrap .schema-faq-answer,
  .usl-wrap .animated,
  .usl-wrap .usl-btn-primary,
  .usl-wrap .usl-btn-primary::after,
  .usl-wrap .usl-btn-primary:hover,
  .usl-wrap .usl-table-wrap tbody td::before,
  .usl-wrap .usl-pill,
  .usl-wrap .usl-pill:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* === Shine animation - smooth loop bez 40% dziury === */
@keyframes usl-shine {
  0%   { left: -120%; }
  15%  { left: -120%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* ============================================================================
   15) MOBILE FIXES — root cause: theme cap .site-main max-width 500px
   na breakpoint 576-767px łamie cały layout strony /uslugi/.
   Fix: na tej stronie pełna szerokość + inline padding.
   ============================================================================ */
:where(body.page-id-6443304, body.page-id-6443305, body.page-id-6443306) :is(.site-main, main, #content, #primary) {
  max-width: none !important;
  width: 100% !important;
  padding-inline: 0 !important;
}
/* Padding tylko na content wrappers (nie na main który ma notification bar) */
:where(body.page-id-6443304, body.page-id-6443305, body.page-id-6443306) :is(.page-content, .entry-content) {
  padding-inline: clamp(16px, 4vw, 32px) !important;
}

/* === Tabela card-view od 1024px (do tej pory tylko 720px) === */
@media (max-width: 1024px) {
  .usl-wrap .usl-table-wrap { border-radius: var(--ms-r-md); }
  .usl-wrap .usl-table-wrap table,
  .usl-wrap .usl-table-wrap thead,
  .usl-wrap .usl-table-wrap tbody,
  .usl-wrap .usl-table-wrap tr,
  .usl-wrap .usl-table-wrap td { display: block !important; width: 100% !important; }
  .usl-wrap .usl-table-wrap thead { display: none !important; }

  .usl-wrap .usl-table-wrap tbody tr {
    padding: 18px 18px 20px 22px !important;
    border-bottom: 1px solid var(--ms-border-faint) !important;
    position: relative !important;
  }
  .usl-wrap .usl-table-wrap tbody tr:last-child { border-bottom: 0 !important; }

  .usl-wrap .usl-table-wrap tbody td {
    padding: 4px 0 !important;
    border: 0 !important;
    font-size: 15px !important;
  }
  .usl-wrap .usl-table-wrap tbody td:not(:first-child)::before {
    content: attr(data-label) !important;
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ms-ink-mute) !important;
    margin-bottom: 4px !important;
  }
  .usl-wrap .usl-table-wrap tbody td:first-child {
    margin-bottom: 10px !important;
    font-size: 16px !important;
    transform: none !important;
  }
  .usl-wrap .usl-table-wrap tbody td:first-child::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 18px !important;
    bottom: 18px !important;
    width: 3px !important;
    height: auto !important;
    background: var(--ms-amber) !important;
    border-radius: 0 3px 3px 0 !important;
    transform: scaleX(1) !important;
    transform-origin: left !important;
    transition: opacity 250ms var(--ms-ease-default) !important;
    opacity: 0.85 !important;
    box-shadow: none !important;
  }
  .usl-wrap .usl-table-wrap tbody td:last-child {
    margin-top: 6px !important;
  }
  .usl-wrap .usl-table-wrap tbody td:last-child a {
    display: inline-flex !important;
    padding: 10px 0 !important;  /* lepszy touch target */
    min-height: 44px !important;
    align-items: center !important;
    font-size: 16px !important;
  }
  .usl-wrap .usl-table-wrap tbody td:last-child a::before {
    width: 100% !important;  /* underline na całość mobile */
  }
  .usl-wrap .usl-table-wrap tbody td:last-child a::after {
    opacity: 1 !important;
    transform: translateX(0) !important;
    margin-left: 6px !important;
  }
}

/* === Stats: 2x2 grid na mobile === */
@media (max-width: 767px) {
  .usl-wrap .usl-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(24px, 4vw, 32px) !important;
  }
}

/* === Logos: grid 4-3 na mobile (7 logos = 4+3 wyrównane) === */
@media (max-width: 767px) {
  .usl-wrap .usl-logos-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px 12px !important;
    place-items: center !important;
    padding: 0 16px !important;
  }
  .usl-wrap .usl-logos img {
    max-width: 100% !important;
    width: auto !important;
  }
  /* Ostatnie 3 logos w drugim wierszu - center span z col 1 */
  .usl-wrap .usl-logos img:nth-child(5) { grid-column: 1 / span 2; justify-self: end; margin-right: 6px; }
  .usl-wrap .usl-logos img:nth-child(6) { grid-column: 3; }
  .usl-wrap .usl-logos img:nth-child(7) { grid-column: 4; justify-self: start; margin-left: 6px; }

  /* Per-logo override mobile - mniejsze dopasowanie do 4-col gridu */
  .usl-wrap .usl-logos img[src*="l-1284786-2"]      { max-height: 50px !important; }
  .usl-wrap .usl-logos img[src*="logo-45671-3"]     { max-height: 50px !important; }
  .usl-wrap .usl-logos img[src*="logo-45670-2"]     { max-height: 50px !important; }
  .usl-wrap .usl-logos img[src*="logo-2671823-2"]   { max-height: 24px !important; }
  .usl-wrap .usl-logos img[src*="logo12257"]        { max-height: 32px !important; }
  .usl-wrap .usl-logos img[src*="logo_wnk_100"]     { max-height: 22px !important; }
  .usl-wrap .usl-logos img[src*="logo-45674-4"]     { max-height: 50px !important; }
}

/* === Cards 1-col stack na mobile (zamiast 2x2 wąsko) === */
@media (max-width: 767px) {
  .usl-wrap .usl-grid,
  .usl-wrap .usl-grid-3,
  .usl-wrap .usl-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .usl-wrap .usl-card {
    padding: clamp(20px, 4vw, 28px) !important;
  }
}

/* === Pills - większy touch target na mobile === */
@media (max-width: 767px) {
  .usl-wrap .usl-pill {
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* === CTA banner H2 — mniejszy fluid na mobile (375px telefon) === */
.usl-wrap .usl-cta-banner h2 {
  font-size: clamp(24px, 6vw, 48px) !important;
}

/* === Hero buttons - ujednolicenie font-size === */
.usl-wrap .usl-btn-primary .premium-button-text-icon-wrapper span {
  font-size: 14px !important;
}