/* Przyciski: jeden wygląd na całej stronie, ładowany jako ostatni arkusz na każdej podstronie.
   Światło z góry: gradient jasny u góry, ostra jasna krawędź 1px na górze, ciemna 1px na dole,
   ciasny cień kontaktowy i miękka poświata w kolorze przycisku. Wciśnięty: gradient się odwraca,
   górne światło gaśnie, przycisk wygląda na wciśnięty. */

.btn-primary,
.btn-ghost,
.nav-cta,
.btn-load-more,
button[type="submit"] {
  background: linear-gradient(180deg, #5a93ee 0%, #2f6fd6 55%, #2459b6 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(47, 111, 214, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 -10px 14px rgba(0, 0, 0, 0.12) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.btn-primary:hover,
.btn-ghost:hover,
.nav-cta:hover,
.btn-load-more:hover,
button[type="submit"]:hover {
  background: linear-gradient(180deg, #6ea2f2 0%, #3a7ae0 55%, #2a63c4 100%) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 10px 26px rgba(47, 111, 214, 0.38),
    0 0 22px rgba(90, 147, 238, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 -10px 14px rgba(0, 0, 0, 0.12) !important;
}

.btn-primary:active,
.btn-ghost:active,
.nav-cta:active,
.btn-load-more:active,
button[type="submit"]:active {
  background: linear-gradient(0deg, #5a93ee 0%, #2f6fd6 55%, #2459b6 100%) !important;
  transform: translateY(1px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* Drugi przycisk obok głównego (np. telefon w hero) i "Wróć": ten sam kształt i światło,
   ale szklany, żeby główna akcja zostawała jedna. */
.btn-primary + .btn-ghost,
.btn-back {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -10px 14px rgba(0, 0, 0, 0.12) !important;
}
.btn-primary + .btn-ghost:hover,
.btn-back:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.09) 100%) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 14px rgba(0, 0, 0, 0.12) !important;
}
.btn-primary + .btn-ghost:active,
.btn-back:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* Na jasnym tle szklany przycisk znika, więc dostaje granatowy tekst i ciemniejszą krawędź */
.bg-light .btn-primary + .btn-ghost,
.bg-light .btn-back {
  background: linear-gradient(180deg, #ffffff 0%, #eef2f9 100%) !important;
  color: #1a4fa0 !important;
  text-shadow: none;
  box-shadow:
    0 1px 2px rgba(13, 27, 46, 0.12),
    0 6px 16px rgba(13, 27, 46, 0.08),
    inset 0 0 0 1px rgba(26, 79, 160, 0.25),
    inset 0 -1px 0 rgba(13, 27, 46, 0.08) !important;
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-cta:focus-visible,
.btn-load-more:focus-visible,
.btn-back:focus-visible,
button[type="submit"]:focus-visible {
  outline: 2px solid #8fb8f5;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost, .nav-cta, .btn-load-more, .btn-back, button[type="submit"] { transition: none !important; }
  .btn-primary:hover, .btn-ghost:hover, .nav-cta:hover, .btn-load-more:hover, .btn-back:hover, button[type="submit"]:hover { transform: none; }
}

/* Sekcje: tło na pełną szerokość ekranu, treść dalej w kolumnie 1200px.
   app.js dodaje .full-bleed i zapisuje pierwotny padding sekcji w --pl / --pr. */
@media (min-width: 1201px) {
  section.full-bleed {
    max-width: none !important;
    padding-left: calc((100% - 1200px) / 2 + var(--pl, 20px)) !important;
    padding-right: calc((100% - 1200px) / 2 + var(--pr, 20px)) !important;
  }
}

/* Polityka prywatności */
.legal-body { max-width: 760px; margin: 0 auto; color: var(--text, #1a2233); font-size: 16px; line-height: 1.7; }
.legal-body h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 12px; color: inherit; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: #1a4fa0; text-decoration: underline; }
.bg-dark .legal-body { color: rgba(255, 255, 255, 0.88); }
.bg-dark .legal-body a { color: #8fb8f5; }

/* ── Telefon: dolny pasek szybkiego kontaktu (wstrzykuje go app.js) ──
   Zawsze widoczny, trzy równe przyciski: alarm (czerwony), telefon (szkło), wycena (niebieski).
   Pływający przycisk "Odwołaj patrol" chowamy, bo alarm jest w pasku i nic nie zasłania treści. */
@media (max-width: 768px) {
  .alarm-fab { display: none !important; }
  html.has-sticky-cta body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .sticky-mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
    display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 20, 36, 0.9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    transform: none !important; opacity: 1 !important; pointer-events: auto !important;
    box-sizing: border-box; max-width: 100vw;
  }
  .sticky-cta-btn {
    flex: none !important; min-width: 0; height: 56px !important; padding: 0 4px !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px !important;
    border: 0 !important; border-radius: 10px !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.1; letter-spacing: 0.1px;
    color: #fff !important; text-decoration: none; white-space: nowrap; overflow: hidden;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    transition: transform .15s ease, box-shadow .15s ease !important;
  }
  .sticky-cta-btn span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .sticky-cta-btn svg { flex-shrink: 0; }
  .sticky-cta-btn:active { transform: translateY(1px) !important; }

  .sticky-cta-action {
    background: linear-gradient(180deg, #5a93ee 0%, #2f6fd6 55%, #2459b6 100%) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(47,111,214,.3),
      inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.25), inset 0 -10px 14px rgba(0,0,0,.12) !important;
  }
  .sticky-cta-phone {
    background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 100%) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.28),
      inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 14px rgba(0,0,0,.12) !important;
  }
  .sticky-cta-alarm {
    background: linear-gradient(180deg, #ec5a4c 0%, #d42b20 55%, #b0211a 100%) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(212,43,32,.3),
      inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.25), inset 0 -10px 14px rgba(0,0,0,.12) !important;
  }
}
@media (max-width: 768px) { .sticky-cta-btn { text-transform: none !important; letter-spacing: 0.1px !important; font-size: 14px !important; } }

/* ── Czytelność: czytelny tekst min. 14px, etykiety wielkimi literami min. 12px ── */
.footer-legal-data { font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.footer-bottom, .footer-bottom span, .footer-bottom a { font-size: 14px !important; }
.footer-bottom { color: rgba(255, 255, 255, 0.55); }
.hero-eyebrow, .art-card-cat, .art-category, .page-hero-stat-lbl, .ref-card-tag, .ref-card-sector,
.ref-section-label, .team-grid-label, .app-badge-label, .hero-credit { font-size: 12px !important; }
.of-stat-lbl { font-size: 13px !important; line-height: 1.35 !important; }
.art-meta, .art-card-date, .art-card-excerpt, .ceo-meta-item, .cert-desc, .of-quote-author, .team-role,
.ref-card-year, .ref-signatory, .ref-year, .ref-card-excerpt, .search-hint, .cib-label, .mpf-tag,
.error-contact, .tel, .filter-btn, .hero-proof dd, .form-group label, .contact-form label { font-size: 14px !important; }
p[style*="font-size: 11px"], p[style*="font-size:11px"], p[style*="font-size: 13px"], p[style*="font-size:13px"],
div[style*="font-size: 12px"], div[style*="font-size:12px"], div[style*="font-size: 13px"], div[style*="font-size:13px"],
span[style*="font-size: 12px"], span[style*="font-size: 13px"], span[style*="font-size:13px"],
label[style*="font-size: 13px"], label[style*="font-size:13px"] { font-size: 14px !important; }
/* Okruszek w hero zostaje etykietą wielkimi literami */
.hero-nav-wrapper > span { font-size: 13px !important; }

/* Nawigacja: na wąskim ekranie logo + podpis + hamburger wypychały pasek poza ekran (przesuwanie w bok) */
@media (max-width: 420px) {
  .nav-logo-tagline { letter-spacing: 1px; }
  .nav-inner { padding-left: 16px !important; padding-right: 12px !important; }
}

/* ── Hero podstron na telefonie: dopasowane do treści, od góry pod nawigacją ──
   (style.css wymusza min-height 100svh dla slajdów scroll-snap, co zostawiało krótki tekst w pustym granacie) */
@media (max-width: 768px) {
  html.mobile-snap .page-hero,
  html.mobile-snap header.hero:has(.hero-content-overlay) {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 96px 20px 40px !important;
    scroll-snap-stop: normal;
  }
  html.mobile-snap header.hero .hero-content-overlay { padding: 0 !important; }
  html.mobile-snap .page-hero-inner { width: 100%; }
}

/* Długi napis na przycisku formularza (nowrap w inline style) poszerzał kolumnę ponad ekran telefonu */
@media (max-width: 768px) {
  .contact-form button[type="submit"] { white-space: normal !important; max-width: 100%; text-align: center; }
}
.contact-form .form-group label, .cib-label strong, .sidebar-cta p { font-size: 14px !important; }
span[style*="font-size: 10px"], span[style*="font-size: 11px"], span[style*="font-size:11px"] { font-size: 12px !important; }
.ref-signatory strong, .ref-signatory b { font-size: 14px !important; }

@media (max-width: 768px) {
  /* Pasek statystyk w hero referencji nie może dotykać opisu (style.css zeruje dolny margines opisu) */
  .page-hero-desc { margin-bottom: 28px !important; }
  /* Formularz kontaktowy nie rozciąga się już na cały ekran (pusty granat nad polami) */
  html.mobile-snap .contact-form { min-height: 0 !important; justify-content: flex-start !important; padding: 24px 20px !important; }
}
@media (max-width: 480px) {
  .hero-nav-wrapper > span { font-size: 12px !important; letter-spacing: 0.4px !important; }
}

/* Desktop: hero usług miało 80vh z treścią przy dole i pustym granatem u góry. Teraz wysokość wynika z treści. */
@media (min-width: 769px) {
  header.hero:has(.hero-content-overlay) { height: auto !important; min-height: 460px !important; }
  header.hero .hero-content-overlay { padding: 120px 20px 56px !important; }
}

/* Telefon: bez przewijania skokami po pełnych ekranach. Dla starszej osoby każde przesunięcie
   o cały ekran jest mylące, a wymuszone 100svh zostawiało białe pustki pod krótką treścią.
   Hero strony głównej (header.hero bez .hero-content-overlay) zostaje pełnoekranowe. */
@media (max-width: 768px) {
  html.mobile-snap { scroll-snap-type: none !important; }
  html.mobile-snap .page-hero,
  html.mobile-snap header.app-hero,
  html.mobile-snap header.hero-thank-you,
  html.mobile-snap section,
  html.mobile-snap .section-full,
  html.mobile-snap .app-section,
  html.mobile-snap .of-quote,
  html.mobile-snap .cta-section,
  html.mobile-snap .stat-section-wrapper,
  html.mobile-snap .of-ps-col,
  html.mobile-snap .of-step,
  html.mobile-snap footer {
    min-height: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}

/* Hero stron usług na komputerze: nagłówek miał 32px z inline style, przy spokojnym tekście wyglądał słabo */
@media (min-width: 769px) {
  header.hero .hero-content-overlay h1 { font-size: clamp(38px, 3.8vw, 54px) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; margin-bottom: 18px !important; }
  header.hero .hero-content-overlay h1 + p { font-size: 18px !important; line-height: 1.6 !important; max-width: 34em !important; }
}

/* ── BLOKADA WYSYŁKI NA STRONIE PODGLĄDOWEJ (app.js initPreviewLock) ── */
.preview-lock { position: relative; }
.preview-note { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: #fff; color: #0a1628; border: 1px solid #f5c26b; border-left: 4px solid #f59e0b; border-radius: 14px; box-shadow: 0 12px 32px rgba(10,22,40,.22); padding: 16px 18px; margin: 0 0 16px; }
.preview-note svg { flex-shrink: 0; width: 22px; height: 22px; color: #b45309; background: #fef3c7; border-radius: 50%; padding: 7px; box-sizing: content-box; }
.preview-note strong { display: block; font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.preview-note p { font-size: 13px !important; line-height: 1.5; color: #4a5a70; margin: 0 0 6px; }
.preview-note a { font-size: 14px; font-weight: 700; color: #1a4fa0; text-decoration: none; }
.preview-note a:hover { text-decoration: underline; }
.preview-lock.is-side .preview-note { position: absolute; top: 24px; left: calc(100% + 24px); width: 280px; margin: 0; flex-direction: column; gap: 10px; z-index: 5; }
.preview-note.is-shaking { animation: preview-shake .6s cubic-bezier(.36,.07,.19,.97) both; border-color: #ef4444; border-left-color: #ef4444; }
@keyframes preview-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-9px); }
  40%, 60% { transform: translateX(9px); }
}
@media (prefers-reduced-motion: reduce) { .preview-note.is-shaking { animation: none; box-shadow: 0 0 0 4px rgba(239,68,68,.35), 0 12px 32px rgba(10,22,40,.22); } }

/* ── LICZNIK: akcent przy ostatnim skoku (app.js initCounters, data-count-hold) ── */
.count-drop { display: inline-block; animation: count-drop .7s cubic-bezier(.2,.9,.3,1.4) both; transform-origin: left center; }
@keyframes count-drop {
  0%   { transform: translateY(-14px) scale(1.25); color: #8fbaff; text-shadow: 0 0 24px rgba(143,186,255,.75); }
  60%  { transform: translateY(2px) scale(.98); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .count-drop { animation: none; } }
/* w trakcie liczenia przygaszone, po zakończeniu pełny kolor */
[data-count], [data-count-reveal] { transition: opacity .8s ease; }
[data-count].is-counting, [data-count-reveal].is-counting { opacity: .5; }

/* Nawigacja: przy 7 linkach podpis "Agencja Ochrony" zderzał się z menu między tabletem a szerokim desktopem */
@media (min-width: 769px) and (max-width: 1199px) {
  .nav-logo-divider, .nav-logo-tagline { display: none !important; }
}