/* ============================================================
   ADWOKAT 24 — Hub (a24-) + Podstrona (a24s-/e24-) — hero, timeline, treść
   Wyniesione ze style.css → ładowane warunkowo tylko na template-adwokat24.php
   i template-adwokat24-sub.php (functions.php: $page_css[]='adwokat24').
   Warianty kontekstowe globalnych komponentów (#fcta-a24 itd.) są w collectorze.
   ============================================================ */


/*
  @property declarations for CSS Houdini animated angles.
  These allow smooth interpolation of angle values in conic-gradient,
  which standard CSS cannot transition. Falls back gracefully —
  browsers without @property support get a static border instead.
*/
@property --a24-card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --a24-scan-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Section — dark emergency atmosphere ── */
.a24-hero {
  position: relative;
  background: #0A0A0A;
  min-height: 90vh;
  /* svh, nie vh: na telefonie `vh` liczy się od ekranu BEZ pasków przeglądarki,
     więc sekcja wystawałaby dokładnie o ich wysokość — a to pas pilnych
     sytuacji stoi na jej dole i to on by wypadł pod zgięcie. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hero-pt) 0 clamp(48px, 5vw, 72px);
  overflow: hidden;
}
/* Z pasem u dołu sekcja nie potrzebuje już pełnego dopełnienia: kreska pasa
   sama ją domyka, a odzyskane ~35 px idzie na to, żeby rząd pigułek mieścił
   się na pierwszym ekranie laptopa. */
.a24-hero:has(.a24-triage) {
  padding-bottom: clamp(28px, 2.6vw, 40px);
}
/* Gradient fade at bottom of hero into next section */
.a24-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #0A0A0A);
  pointer-events: none;
  z-index: 1;
}
/* Subtle accent divider at hero bottom edge */
.a24-hero {
  border-bottom: 1px solid rgba(74, 154, 106, 0.25);
  box-shadow: 0 1px 0 0 rgba(74, 154, 106, 0.10);
}
/* Soft inset shadow on section following hero for depth */
.a24-hero + section {
  box-shadow: inset 0 20px 40px -20px rgba(0, 0, 0, 0.15);
}

/* Layered emergency atmosphere:
   - Deep red vignette at edges (danger framing)
   - Subtle green accent where the card lives (draws eye right)
   - Dark bottom gradient for grounding */
.a24-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(180,40,40,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 80% 100% at 100% 100%, rgba(180,40,40,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 80% 40%, rgba(46,107,71,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Slow pulsing red ambient glow — reinforces urgency without overwhelming */
.a24-hero__bg-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(200,50,50,0.04) 0%, transparent 70%);
  animation: a24BgPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes a24BgPulse {
  0%   { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Subtle grid pattern overlay — adds tactical/operational feel */
.a24-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}

/* Emergency top line — red-to-green gradient, pulsing */
.a24-hero__topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #DC3232, var(--accent-light), #DC3232, transparent);
  opacity: 0.7;
  animation: a24ToplinePulse 3s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes a24ToplinePulse {
  0%   { opacity: 0.4; }
  100% { opacity: 0.8; }
}


/* ── Grid ── */
/* Container needs to sit above background effects */
.a24-hero > .container {
  position: relative;
  z-index: 2;
  /* .a24-hero to kolumnowy flex, a .container ma `margin: 0 auto` bez
     szerokości. W kolumnowym flexie automatyczne marginesy poprzeczne
     wyłączają rozciąganie, więc kontener kurczył się do szerokości treści
     — sekcja otwierająca była o ~210 px węższa od każdej innej na stronie.
     Podstrona (.a24s-hero > .container) ma tę linijkę od początku. */
  width: 100%;
}

.a24-hero__grid {
  display: grid;
  /* 1,25fr (3.08.2026, druga korekta). Poprzednie 1,1fr oddawało prawej
     kolumnie 599 px na zdjęcie szerokie 509 px — 45 px zostawało pustych,
     przez co ramka kończyła się przed prawą krawędzią kontenera i nie
     trzymała linii z nagłówkiem strony ani z pasem pilnych sytuacji.
     1,25fr daje prawej kolumnie 563 px, czyli wciąż więcej niż sufit
     zdjęcia (560 px), a lewej 703 px — tyle, ile realnie potrzebuje
     najszerszy wiersz tekstu (akapit wprowadzający, 700 px).
     Reszta zapasu idzie do rynny, nie w martwe pole obok ramki.
     Przy dosuniętej do prawej ramce (patrz .a24-hero__card-wrap) odległość
     „koniec tekstu → zdjęcie" wychodzi wprost z odejmowania:
     szerokość kontenera − szerokość zdjęcia − szerokość tekstu.
     Podział kolumn nie zmienia jej sam z siebie — decyduje o tym, ile
     miejsca ma do dyspozycji najszerszy wiersz. Sprawdzone: dalsze
     poszerzanie lewej kolumny (1,32fr / akapit 720 px) nic już nie daje,
     bo wiersz łamie się na słowie „każda" i tekst i tak kończy się w tym
     samym miejscu — a prawej kolumnie schodziło poniżej 560 px, więc na
     wysokich ekranach zdjęcie traciło swój sufit. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  /* Rynna z 72 px na 63 px przy 1440. Odległość „koniec tekstu → zdjęcie"
     to suma trzech rzeczy: niewykorzystanej szerokości lewej kolumny,
     rynny i luzu wokół wyśrodkowanej ramki. Same fr-y jej nie zamkną. */
  column-gap: clamp(36px, 4.4vw, 64px);
  /* Odstępy pionowe niosą same elementy (margin-top pasa pilnych sytuacji,
     margin-top ramki na wąskich ekranach). Gdyby siatka dokładała do tego
     swój row-gap, każdy odstęp byłby sumą dwóch wartości z dwóch miejsc —
     a pas ma mieścić się na pierwszym ekranie co do piksela. */
  row-gap: 0;
  align-items: center;
}
/* Brak zdjęcia = brak prawej kolumny: jedna kolumna zamiast dziury po niej. */
.a24-hero__grid--solo {
  grid-template-columns: minmax(0, 1fr);
}
.a24-hero__grid--solo .a24-hero__content {
  max-width: 820px;
}

/* ── Entrance Animations ── */
.a24-anim {
  opacity: 0;
  transform: translateY(24px);
  animation: a24FadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.a24-anim--1  { animation-delay: 0.05s; }
.a24-anim--2  { animation-delay: 0.15s; }
.a24-anim--3  { animation-delay: 0.25s; }
.a24-anim--3b { animation-delay: 0.3s; }
.a24-anim--3c { animation-delay: 0.33s; }
.a24-anim--4  { animation-delay: 0.35s; }
.a24-anim--4b { animation-delay: 0.4s; }
.a24-anim--5  { animation-delay: 0.5s; }
.a24-anim--6  { animation-delay: 0.6s; }
.a24-anim--7  { animation-delay: 0.7s; }
.a24-anim--card { animation-delay: 0.2s; }

@keyframes a24FadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Left Column: Text ── */
.a24-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.a24-hero__dot {
  width: 10px;
  height: 10px;
  background: #DC3232;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.a24-hero__dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: #DC3232;
  opacity: 0;
  animation: a24DotPulse 2s ease-in-out infinite;
}
@keyframes a24DotPulse {
  0%   { transform: scale(0.8); opacity: 0.6; }
  50%  { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
.a24-hero__eyebrow-text {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #FF6B6B;
}

/* H1 */
.a24-hero__heading {
  font-family: var(--font-heading);
  /* Sufit 3,25rem → 3,5rem (3.08.2026). Przy 52 px nagłówek zajmował 419 px
     w kolumnie szerokiej na 703 px i wyglądał na wciśnięty w za duże pudło —
     to on, a nie akapit, ma trzymać górę sekcji. Zmienia się wyłącznie
     sufit: poniżej ~1090 px stopień jest praktycznie ten sam co wcześniej
     (różnica ułamka piksela), więc łamanie na wąskich ekranach zostaje
     nietknięte, a „Działam natychmiast." nadal mieści się w jednym wierszu. */
  font-size: clamp(2rem, 1.35rem + 3.15vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
  /* Rytm lewej kolumny czyta się jako trzy grupy: obietnica (plakietka,
     nagłówek, akapit), działanie (przyciski + nota o tajemnicy) i dowód
     (opinia, wyróżnienia). Wewnątrz grupy 10–18 px, między grupami 36–40 px.
     Wcześniej odstępy szły 8/16/32/14/32/24 i żadna z tych granic nie była
     czytelna. Uwaga: przy niskim oknie te wartości nadpisują progi
     max-height niżej w pliku. */
  margin-bottom: 18px;
}
.a24-hero__heading em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  color: #FF6B6B;
}

/* Lead */
.a24-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--dark-text-secondary);
  /* 620 px → 700 px. To najszerszy wiersz lewej kolumny, więc to ON wyznacza
     jej optyczną prawą krawędź — a przy 620 px kończył się 80 px przed
     końcem swojej kolumny i tyle właśnie dokładał do luki przy zdjęciu.
     700 px przy 18,4 px to ~76 znaków w wierszu: górna granica wygodnej
     miary, ale akapit ma tu dwa wiersze, nie dwadzieścia. Wyżej nie ma
     po co iść — przy obecnej treści wiersz i tak łamie się na „każda". */
  max-width: 700px;
  margin-bottom: 36px;
}

/* CTA buttons */
.a24-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-4);
}
.a24-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.a24-hero__cta svg { flex-shrink: 0; }
.a24-hero__cta:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 3px;
}
/* Red solid — primary call */
.a24-hero__cta--call {
  background: #DC3232;
  color: #fff;
  box-shadow: 0 6px 20px rgba(220,50,50,0.35);
}
.a24-hero__cta--call:hover {
  background: #e23b3b;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(220,50,50,0.45);
}
/* Ghost — WhatsApp. Sekcja otwierająca huba ma zamiast tego dzielone CTA
   (niżej), ale ten wariant zostaje: korzysta z niego hero siedmiu podstron
   A24 (template-parts/a24-sub/hero.php), które dzielą ten arkusz. */
.a24-hero__cta--ghost {
  background: transparent;
  color: var(--dark-text);
  border-color: rgba(255,255,255,0.25);
}
.a24-hero__cta--ghost:hover {
  border-color: #25D366;
  color: #25D366;
  transform: translateY(-2px);
}

/* ── Dzielone CTA — pół WhatsApp, pół Signal ──
   Jedna obrysowana pigułka, w środku dwa równe odnośniki. Wysokość (48px)
   wychodzi z 14px odstępu, 20px ikony i 1px obrysu — tyle samo co przycisk
   telefonu obok, więc oba stoją w jednej linii. Wypełnienia pigułka nie ma
   celowo: czerwony przycisk telefonu musi zostać jedynym „ciężkim" elementem
   sekcji otwierającej. Rozpoznawalność biorą znaki firmowe w barwach marek —
   dlatego kolor siedzi na ikonie, a nie na całym przycisku; na napis i tło
   wchodzi dopiero pod kursorem.

   Siatka, nie flex: dwie kolumny 1fr są równe, ale szerokość całej pigułki
   liczy się z SZERSZEJ etykiety („WhatsApp"), więc żadna połowa nie zwęża się
   poniżej swojej treści i nie ma czego uciąć. Flex z `1 1 0` dawał równe
   połowy dopiero po ścięciu dłuższego napisu. */
.a24-hero__split {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  background: transparent;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.a24-hero__split-half {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--dark-text);
  transition: background 0.25s ease, color 0.25s ease;
}
.a24-hero__split-half--wa {
  border-radius: 100px 0 0 100px;
}
.a24-hero__split-half--signal {
  border-radius: 0 100px 100px 0;
  /* Kreska rozdzielająca przez inset shadow, nie border — border dołożyłby
     tej połowie 1px i przestałaby być połową. */
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.25);
}
/* Bez wielokropka i bez `nowrap`: gdyby redaktor wpisał dłuższy napis,
   ma się zawinąć, a nie zniknąć w trzech kropkach. */
.a24-hero__split-label {
  text-align: center;
  /* `break-word`, nie `anywhere` — tylko ten pierwszy zostawia „WhatsApp"
     w rachunku min-content, więc kolumna nigdy nie zejdzie poniżej całego
     słowa i nie rozłamie go w środku. */
  overflow-wrap: break-word;
}
.a24-hero__split-icon {
  flex-shrink: 0;
  transition: color 0.25s ease;
}
.a24-hero__split-half--wa .a24-hero__split-icon     { color: #25D366; }
/* Znak Signala ma w środku przerywany pierścień, więc przy tym samym boku
   co WhatsApp czyta się jako plamka. Dokładamy mu 2px — optycznie wychodzą
   równe, geometrycznie nie. */
.a24-hero__split-half--signal .a24-hero__split-icon { color: #3A76F0; width: 20px; height: 20px; }

.a24-hero__split-half--wa:hover {
  background: rgba(37,211,102,0.12);
  color: #25D366;
}
.a24-hero__split-half--signal:hover {
  background: rgba(58,118,240,0.16);
  /* Firmowy #3A76F0 daje na czerni 3,9:1 — za mało na napis, więc pod
     kursorem rozjaśniamy go do 7,3:1. Sama ikona zostaje w barwie marki. */
  color: #6E9CF7;
}
.a24-hero__split-half--signal:hover .a24-hero__split-icon { color: #6E9CF7; }

/* Unoszenie i obrys biorą całą pigułkę, nie połowę — podniesiona połowa
   wyglądałaby na rozpadający się przycisk. Bez :has() zostaje sama
   zmiana tła i napisu, co też czyta się jako stan aktywny. */
.a24-hero__split:has(.a24-hero__split-half:hover) {
  transform: translateY(-2px);
}
.a24-hero__split:has(.a24-hero__split-half--wa:hover)     { border-color: rgba(37,211,102,0.55); }
.a24-hero__split:has(.a24-hero__split-half--signal:hover) { border-color: rgba(58,118,240,0.6); }

/* z-index, bo obrys fokusu jednej połowy zachodzi na drugą. */
.a24-hero__split-half:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}
/* Z notą o tajemnicy przyciski oddają jej odstęp — para ma czytać się
   jako jedna całość, a nie dwa niezależne wiersze. Modyfikator zamiast
   :has(), bo szablon i tak wie, czy nota jest. */
.a24-hero__actions--tight {
  margin-bottom: 14px;
}

/* Nota o tajemnicy adwokackiej.
   Celowo poza czerwienią strony: alarm mówi „dzwoń teraz", a to zdanie
   ma uspokajać. Stąd chłodna, jasna szarość i neutralna kłódka zamiast
   kolejnego czerwonego akcentu. */
.a24-hero__secrecy {
  display: flex;
  /* center, nie flex-start: tarcza z kłódką jest wyższa (26 px) niż wiersz
     tekstu, więc przy flex-start zdanie wisiało o kilka pikseli nad jej
     środkiem. Wyśrodkowanie trzyma tekst na osi kłódki i w jednym wierszu
     (desktop), i przy zawinięciu na dwa (telefon). */
  align-items: center;
  gap: 10px;
  /* 580 → 640 px: nota jest krótsza od akapitu, ale nie ma powodu, żeby
     urywała się o 120 px wcześniej niż on. */
  max-width: 640px;
  /* Koniec grupy „działanie" — stąd 40 px do opinii, największy odstęp
     w kolumnie. */
  margin-bottom: 40px;
  font-family: var(--font-body);
  /* 12,5 px było najmniejszym stopniem na stronie, a zdanie niesie
     najważniejszą obiekcję („czy mogę powiedzieć wszystko?"). */
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--dark-text-secondary);
  /* Bez rozgałęzienia na szerokość: kolumna tekstu jest między 601 a 960 px
     wyśrodkowana i dziedziczenie zniosłoby tekst noty na środek, gdzie drugi
     wiersz rwałby się obok kłódki. Jedna deklaracja w regule bazowej zamiast
     osobnego @media — mniej do trzymania w głowie i działa na każdej szerokości. */
  text-align: left;
}
.a24-hero__secrecy strong {
  font-weight: 600;
  color: var(--dark-text);
}
.a24-hero__secrecy-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
}

/* Urgent badge — red pulsing attention-grabber */
.a24-hero__urgent-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(220,50,50,0.12);
  border: 1px solid rgba(220,50,50,0.3);
  /* 11 px z odstępem 2 px (0,18 em) to rozstrzelenie, przy którym oko czyta
     litery, a nie wyraz. Pół stopnia w górę, jedna trzecia odstępu w dół —
     plakietka zostaje jedynym wersalikiem w kolumnie (przycisk telefonu
     zszedł do zapisu zdaniowego), więc może być odrobinę spokojniejsza. */
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #FF6B6B;
  margin-bottom: 10px;
  animation: a24FadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards, a24UrgentPulse 2.5s ease-in-out infinite 1s;
  opacity: 0;
}
.a24-hero__urgent-dot {
  width: 8px;
  height: 8px;
  background: #DC3232;
  border-radius: 50%;
  flex-shrink: 0;
  animation: a24UrgentDotBlink 1.5s ease-in-out infinite;
}
@keyframes a24UrgentDotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes a24UrgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,50,50,0); }
  50% { box-shadow: 0 0 12px 2px rgba(220,50,50,0.15); }
}

/* Testimonial slider */
.a24-hero__testimonials {
  /* Opinia i pasek wyróżnień to jedna grupa („dowód"), więc odstęp między
     nimi jest mniejszy niż ten, który je od przycisków oddziela. */
  margin-bottom: 18px;
}
.a24-testimonial {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  padding-left: var(--space-2);
  border-left: 2px solid rgba(220,50,50,0.3);
}
.a24-testimonial__track {
  position: relative;
}
.a24-testimonial__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.a24-testimonial__slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.a24-testimonial__slide p {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark-text-secondary);
  margin-bottom: 4px;
}
.a24-testimonial__slide cite {
  font-family: var(--font-body);
  font-size: 0.71875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--dark-text-muted);
  letter-spacing: 0.5px;
}
.a24-testimonial__dots {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
/* Kropka zostaje wizualnie 6 px, ale klikalne pole rośnie do 24 px przez
   przezroczysty padding (background-clip: content-box maluje tylko wnętrze).
   Wcześniej cel dotykowy miał 6×6 px — czterokrotnie mniej niż minimum WCAG. */
.a24-testimonial__dot {
  width: 6px;
  height: 6px;
  box-sizing: content-box;
  padding: 9px;
  background-clip: content-box;
  border-radius: 100px;
  background-color: var(--dark-border);
  border: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.a24-testimonial__dots {
  gap: 0;              /* odstęp robią teraz paddingi kropek (2×9 px) */
  margin-left: -9px;   /* kompensacja paddingu pierwszej kropki */
}
.a24-testimonial__dot.is-active {
  background-color: #FF6B6B;
  width: 24px;
}
.a24-testimonial__dot:hover {
  /* background-color, nie skrót — skrót zresetowałby background-clip
     i podświetlił całe 24 px pola dotykowego zamiast samej kropki. */
  background-color: #FF6B6B;
}
.a24-testimonial__dot:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Social proof strip */
.a24-hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: var(--space-3);
}
.a24-hero__proof-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  /* Pół stopnia w górę: to ostatni wiersz kolumny i sąsiaduje z najszerszym
     miejscem zdjęcia, więc na 13 px gubił się przy nim zupełnie. */
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--dark-text-muted);
}
.a24-hero__proof-item svg {
  width: 14px;
  height: 14px;
  stroke: #FF6B6B;
  fill: none;
  flex-shrink: 0;
}
.a24-hero__proof-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dark-border);
  flex-shrink: 0;
}

/* Footnote */
.a24-hero__footnote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dark-text-muted);
  letter-spacing: 0.3px;
}
.a24-hero__footnote svg {
  color: #FF6B6B;
  flex-shrink: 0;
}

/* ── Prawa kolumna: zdjęcie w animowanej ramce ── */
.a24-hero__card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Do prawej, nie na środek (3.08.2026). Zdjęcie bywa węższe od swojej
     kolumny — wysokość widocznego ekranu ścina je z 560 px do ~509 px
     na laptopie — a wyśrodkowane dzieliło ten luz na pół: pół dokładało
     do luki przy tekście, pół zostawiało pustkę przy prawej krawędzi.
     Dosunięte trzyma jedną pionową linię z przyciskiem w nagłówku strony
     i z końcem pasa pilnych sytuacji, a cały luz idzie tam, gdzie jest
     rynną, a nie dziurą. Poniżej 961 px kolumna jest jedna i wracamy
     na środek — patrz @media. */
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

/* Card wrapper (provides the 3D perspective context) */
.a24-card {
  position: relative;
  border-radius: 20px;
  padding: 1.5px;
  perspective: 1200px;
  width: 100%;
  max-width: 420px;
  z-index: 1;
}

/* Tilt container — applies subtle 3D rotation on hover via JS */
.a24-card__tilt {
  border-radius: 20px;
  position: relative;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/*
  ROTATING CONIC-GRADIENT BORDER
  The pseudo-element creates a full conic-gradient that covers the element.
  The mask trick works by:
  1. First mask layer: white everywhere (content-box) — this is what's opaque
  2. Second mask layer: white everywhere (no constraint) — this is the full area
  3. XOR composite: shows only the area that's in one but not both = the padding area
  This effectively "cuts out" the interior, leaving only the 1.5px padding as visible border.
  The --a24-card-angle custom property rotates the gradient origin over 8s.
*/
.a24-card__tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--a24-card-angle, 0deg),
    rgba(220,50,50,0.6),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.6),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.6)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: a24BorderSpin 8s linear infinite;
  z-index: 1;
}
@keyframes a24BorderSpin { to { --a24-card-angle: 360deg; } }

/*
  SCANNING LINE
  Same mask technique, but the conic-gradient only has a narrow ~8deg bright wedge.
  Rotates faster (3.5s) with a slight blur for a "radar sweep" effect.
*/
.a24-card__tilt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: conic-gradient(
    from var(--a24-scan-angle, 0deg),
    transparent 340deg,
    rgba(220,50,50,0.8) 352deg,
    rgba(220,50,50,0.3) 356deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: a24ScanSpin 3.5s linear infinite;
  filter: blur(3px);
  z-index: 2;
}
@keyframes a24ScanSpin { to { --a24-scan-angle: 360deg; } }

/* Card interior — dark with subtle red tint */
/* Wnętrze ramki — kadr zdjęcia. Proporcje trzyma sama ramka, więc każde
   zdjęcie (pionowe czy poziome) dostaje ten sam kształt i nie przesuwa
   układu podczas ładowania. */
.a24-card__photo {
  position: relative;
  border-radius: 19px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(170deg,
    rgba(60,20,20,0.5) 0%,
    rgba(13,13,13,0.97) 40%,
    rgba(13,13,13,0.97) 60%,
    rgba(50,15,15,0.35) 100%
  );
  z-index: 3;
}
.a24-card__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* ── Tabliczka u stopy kadru ──
   Kto to jest + że dyżur trwa teraz. Kurtyna gradientowa pod spodem daje
   tekstowi kontrast niezależnie od tego, jak jasny wypadnie kadr w tym
   miejscu — zdjęcie wymienia redaktor, a czytelność ma zostać. Kadr jest
   ustawiony na `center 25%`, więc twarz siedzi wysoko i tabliczka nigdy
   jej nie przykrywa. */
.a24-card__plate {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  /* Procenty liczą się od szerokości ramki, więc tabliczka skaluje się
     razem z nią — od 500 px na desktopie po pełną szerokość telefonu. */
  padding: clamp(48px, 12%, 72px) clamp(16px, 4.5%, 24px) clamp(16px, 4%, 22px);
  background: linear-gradient(to top,
    rgba(6,5,5,0.95) 0%,
    rgba(6,5,5,0.88) 30%,
    rgba(6,5,5,0.55) 62%,
    rgba(6,5,5,0) 100%
  );
}

/* Status dyżuru — ten sam idiom co plakietka pilności u góry sekcji. */
.a24-card__plate-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 11px 4px 9px;
  border-radius: 100px;
  background: rgba(220,50,50,0.14);
  border: 1px solid rgba(220,50,50,0.32);
  font-family: var(--font-body);
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #FF6B6B;
}
.a24-card__plate-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #DC3232;
  /* Wolny oddech zamiast mrugania: plakietka u góry sekcji już miga co 1,5 s,
     a dwa czerwone punkty w jednym kadrze nie mogą bić w tym samym rytmie.
     Ten ma mówić „ktoś tam jest", nie „alarm". */
  animation: a24PlatePulse 3s ease-in-out infinite;
}
@keyframes a24PlatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,50,50,0.55); }
  70%      { box-shadow: 0 0 0 6px rgba(220,50,50,0); }
}

.a24-card__plate-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1875rem, 4.2vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.15;
  color: #FFFFFF;
}
.a24-card__plate-role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78125rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}

/* Ramka jest szersza niż karta kontaktowa, którą zastąpiła — zdjęcie
   człowieka znosi większy kadr lepiej niż spis kanałów kontaktu. */
.a24-card--photo {
  max-width: 560px;
}
/* …ale na niskim ekranie to ramka, nie kolumna tekstu, wypycha pas pilnych
   sytuacji pod zgięcie: 4:5 z 560 px to 700 px samej wysokości. Pytanie brzmi,
   czym za to płacimy. Wcześniej płaciła SZEROKOŚĆ: żeby utrzymać sztywne 4:5,
   zdjęcie malało w obu wymiarach naraz i przy 1440×900 kończyło się na 509 px
   w kolumnie szerokiej na 563 — 54 px kolumny stało puste tylko po to, żeby
   proporcje pozostały nietknięte. Teraz płaci KADR: ramka bierze całą swoją
   kolumnę, a wysokość zatrzymuje się tam, gdzie zaczyna się pas. Zdjęcie
   wypełnia ją przez object-fit: cover, więc niższa ramka niczego nie
   deformuje — przycina kadr z góry i z dołu wokół punktu `center 25%`.
   Podłoga proporcji 1:1,1 pilnuje, żeby przy ~720 px widocznej wysokości
   portret nie zrobił się kwadratem: poniżej niej ramka znów zwęża się razem
   z wysokością, tak jak przedtem.
   134 px to koszt pasa (margines + dopełnienie + rząd) razem z dolnym
   dopełnieniem sekcji; 3 px to dopełnienie ramki pod obwódkę. Sufit 600 px
   nie sięga dziś żadnego ekranu — prawa kolumna kończy się na 563 px przy
   kontenerze 1440 — i wisi tu na wypadek, gdyby kontener kiedyś urósł.
   Tylko układ dwukolumnowy: poniżej 961 px zdjęcie stoi POD tekstem, więc
   nie konkuruje z pasem o pierwszy ekran i żaden budżet wysokości go nie
   dotyczy.
   Osobne reguły, nie podmiana: przeglądarka bez `svh` odrzuca je w całości
   i zostaje przy 560 px z deklaracji wyżej. Szerokość ramki trzymaj zgodną
   z `sizes` w szablonie — obie liczby opisują tę samą ramkę. */
@media (min-width: 961px) {
  .a24-card--photo {
    --a24-photo-h: calc(100svh - var(--hero-pt) - 134px - 3px);
    max-width: min(600px, calc(var(--a24-photo-h) / 1.1));
  }
  /* `width: 100%` jest tu warunkiem, nie ozdobą: bez jawnej szerokości
     przeglądarka woli utrzymać `aspect-ratio` i pod `max-height` ścina ramkę
     w obu wymiarach — czyli dokładnie to, od czego uciekamy. */
  .a24-card--photo .a24-card__photo {
    width: 100%;
    max-height: var(--a24-photo-h);
  }
}

/* Podpowiedź w pustej ramce. Renderuje się wyłącznie dla zalogowanego
   redaktora (warunek w szablonie) — odwiedzający nie zobaczy pustego
   prostokąta, tylko sekcję rozłożoną na jedną kolumnę. */
.a24-card__photo--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.18);
  color: var(--dark-text-muted);
}
.a24-card__photo--empty svg { color: #FF6B6B; opacity: 0.7; }
.a24-card__photo-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--dark-text);
}
.a24-card__photo-hint {
  font-size: 0.78125rem;
  line-height: 1.5;
  max-width: 30ch;
}
.a24-card__photo-hint strong { color: var(--dark-text-secondary); }

/* ── Pas pilnych sytuacji (stopa sekcji otwierającej) ──
   Rząd stoi POD siatką, na całą szerokość sekcji, bo nie jest ciągiem
   dalszym opowieści z lewej kolumny — jest rozjazdem. Nagłówek obiecuje
   „działam natychmiast", a pas pyta „co się stało?" i podaje siedem
   odpowiedzi prowadzących na właściwą podstronę A24. Odnośniki pochodzą
   z zakładek sytuacji (inc/data/adwokat24.php), więc lista nie ma
   drugiego, rozjeżdżającego się źródła.
   Wysokość jest tu walutą: na telefonie siedem pigułek zawinęłoby się
   w trzy rzędy, więc jadą w bok — patrz media (max-width: 600px). */
.a24-triage {
  /* Ta sama wartość co padding .container — z niej liczy się wyjście
     rzędu poza kontener na telefonie. Jedno miejsce do poprawienia,
     gdyby padding kontenera kiedyś się zmienił. */
  --a24-gutter: clamp(20px, 12px + 3vw, 96px);
  /* Trzeci wiersz siatki, rozpięty na obie kolumny — stąd „pełna szerokość"
     bez ujemnych marginesów i bez wyprowadzania pasa poza siatkę. */
  grid-column: 1 / -1;
  /* Element siatki ma domyślnie min-width: auto, czyli min-content — a na
     telefonie szyna nie zawija się, więc jej min-content to siedem pigułek
     w rzędzie. Bez tego pas wylewałby się poza sekcję (i tylko jej
     overflow: hidden chowałby skutek). */
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  /* Odstępy policzone pod pierwszy ekran, nie pod „oddech": pas razem
     z marginesem, dopełnieniem i rzędem mieści się w ~97 px. */
  margin-top: clamp(24px, 2.6vw, 38px);
  padding-top: clamp(14px, 1.4vw, 20px);
}
/* Kreska-bliźniaczka pulsującej linii u góry sekcji: czerwony zapłon
   z lewej, gasnący w prawo. Domyka hero klamrą, zamiast ciąć go równym
   szarym paskiem. */
.a24-triage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(220,50,50,0.45) 0%,
    rgba(255,255,255,0.10) 32%,
    rgba(255,255,255,0.05) 68%,
    transparent 100%
  );
}

.a24-triage__label {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
}

.a24-triage__rail-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.a24-triage__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.a24-triage__item { display: flex; }

.a24-triage__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--dark-text-secondary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Bez skalowania i przesuwania samej pigułki — rząd potrafi się zawijać,
     a każdy transform na elemencie przesuwałby sąsiadów pod kursorem. */
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.a24-triage__pill:hover {
  border-color: rgba(220,50,50,0.55);
  background: rgba(220,50,50,0.12);
  color: var(--dark-text);
}
.a24-triage__pill:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 3px;
  color: var(--dark-text);
}

/* Strzałka odróżnia pigułkę od zwykłej etykiety — bez niej rząd czyta się
   jak chmura tagów, a nie jak siedem wejść. Siedzi w stałym gabarycie
   (flex-shrink: 0), więc jej ruch pod kursorem nie rozpycha pigułki. */
.a24-triage__chev {
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.a24-triage__pill:hover .a24-triage__chev,
.a24-triage__pill:focus-visible .a24-triage__chev {
  opacity: 1;
  transform: translateX(2px);
}

/* Czerwony akcent dla sytuacji z zegarem — którym zakładkom go dać, wybiera
   redaktor przy każdej zakładce („Pigułka → wyróżnij”). Akcent niesie obrys,
   tło, barwa napisu I pulsująca kropka naraz: sam kolor nie wystarczy, bo
   odbiorcy z zaburzeniem widzenia barw zobaczyliby siedem takich samych
   pigułek. #FF6B6B na tym tle daje 6,1:1, więc napis zostaje czytelny. */
.a24-triage__pill--hot {
  border-color: rgba(220,50,50,0.5);
  background: rgba(220,50,50,0.13);
  color: #FF6B6B;
}
/* Pod kursorem akcent nie „gaśnie” w zwykły stan aktywny — dociąga do bieli,
   żeby wyróżnione pigułki miały własny, mocniejszy szczyt. */
.a24-triage__pill--hot:hover,
.a24-triage__pill--hot:focus-visible {
  border-color: rgba(220,50,50,0.8);
  background: rgba(220,50,50,0.2);
  color: #fff;
}
.a24-triage__dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #DC3232;
  box-shadow: 0 0 8px rgba(220,50,50,0.7);
}
.a24-triage__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #DC3232;
  opacity: 0;
  animation: a24DotPulse 2s ease-in-out infinite;
}

/* ── A24-HERO Responsive ── */

/* Tablet: single column */
@media (max-width: 960px) {
  .a24-hero__grid {
    /* minmax(0, 1fr), nie samo `1fr`: domyślne minimum ścieżki to `auto`,
       czyli min-content jej zawartości. Poniżej 600 px ramka gubi swój
       `max-width` (dostaje 100%), więc nic już nie trzymało tego minimum
       — ścieżka rozpychała się do ~1190 px, a zdjęcie renderowało się
       trzykrotnie za szerokie i tylko `overflow: hidden` sekcji ukrywał
       pasek przewijania. */
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  /* Odstęp tekst → ramka niesie teraz sama ramka, bo row-gap siatki jest
     zerowy (patrz .a24-hero__grid). */
  .a24-hero__card-wrap {
    margin-top: 40px;
  }
  .a24-hero__content {
    text-align: center;
    align-items: center;
  }
  .a24-hero__urgent-badge {
    align-self: center;
  }
  .a24-hero__lead {
    max-width: 100%;
  }
  .a24-hero__proof {
    justify-content: center;
  }
  .a24-hero__footnote {
    justify-content: center;
  }
  .a24-hero__card-wrap {
    justify-content: center;
    /* Jedna kolumna = ramka wraca na środek; dosunięcie do prawej ma sens
       tylko wtedy, gdy obok stoi kolumna tekstu (patrz reguła bazowa). */
    align-items: center;
  }
  .a24-card {
    max-width: 480px;
  }
  /* Kolumna tekstu jest tu wyśrodkowana, więc pas też: napis wskakuje nad
     rząd, a pigułki układają się symetrycznie pod nim. Siedem sztuk zawija
     się na tej szerokości w dwa rzędy — jeszcze bez kosztu wysokości,
     który uzasadniałby przewijanie. */
  .a24-triage {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .a24-triage__rail-wrap {
    align-self: stretch;
  }
  .a24-triage__rail {
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .a24-hero {
    padding-top: clamp(80px, 10vw, 120px);
    padding-bottom: 40px;
    min-height: auto;
  }

  /* ── Kolejność na telefonie ──
     Nad zgięciem 375×667 mieści się nagłówek, akapit, dwa przyciski i nota
     o tajemnicy — reszta i tak schodzi niżej, więc kolejność poniżej noty
     ustawia jedna zasada: najpierw dowód (opinia, pasek wyróżnień), potem
     rozjazd. Kto po przeczytaniu leada nie dzwoni, potrzebuje jeszcze
     powodu, żeby uwierzyć; pigułki „co się stało?" przydają się dopiero
     temu, kto już wie, że trafił dobrze. Pas wraca więc pod pasek wyróżnień
     i tak jak na desktopie domyka blok tekstu przed portretem.
     `display: contents` rozpuszcza kolumnę tekstu, więc jej dzieci stają się
     elementami tej samej siatki co pas i ramka — dopiero wtedy `order` może
     je przeplatać. Kolumna to zwykły <div> bez roli, więc rozpuszczenie
     niczego nie zabiera drzewu dostępności. */
  .a24-hero__content {
    display: contents;
    text-align: left;
  }
  .a24-hero__urgent-badge  { order: 1; }
  .a24-hero__heading       { order: 2; }
  .a24-hero__lead          { order: 3; }
  .a24-hero__actions       { order: 4; }
  .a24-hero__secrecy       { order: 5; }
  .a24-hero__testimonials  { order: 6; }
  .a24-hero__proof         { order: 7; }
  .a24-triage              { order: 8; }
  .a24-hero__footnote      { order: 9; }
  .a24-hero__card-wrap     { order: 10; }

  /* Bez kolumny-rodzica pigułkowate elementy (inline-flex) rozciągnęłyby się
     na całą szerokość siatki — wcześniej trzymało je align-items kolumny. */
  .a24-hero__urgent-badge,
  .a24-hero__footnote {
    justify-self: start;
  }
  .a24-hero__proof,
  .a24-hero__footnote,
  .a24-hero__actions {
    justify-content: flex-start;
  }
  .a24-hero__heading {
    font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
  }
  .a24-hero__actions {
    gap: 8px;
  }
  .a24-hero__cta {
    flex: 1 1 auto;
    padding: 13px 16px;
    font-size: 0.875rem;
  }
  /* Dzielone CTA schodzi do własnego wiersza na całą szerokość — obok
     przycisku telefonu obie połowy zrobiłyby się węższe niż 44px. */
  .a24-hero__split {
    flex: 1 1 100%;
  }
  .a24-hero__split-half {
    padding: 13px 12px;
    font-size: 0.875rem;
    gap: 8px;
  }
  .a24-hero__card-wrap {
    width: 100%;
  }
  .a24-card {
    max-width: 100%;
  }

  /* Pas wraca do lewej, jak reszta treści na telefonie. Odstęp nad kreską
     jest mały, bo pasek wyróżnień oddaje już swoje 24 px; pod pasem nie ma
     nic — dolny odstęp niesie margin-top ramki ze zdjęciem (40 px). */
  .a24-triage {
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 0;
    padding-top: 16px;
    /* Wejście wsunięte między pasek wyróżnień (0,5 s) a przypis (0,6 s) —
       pas stoi na telefonie właśnie tam, a nie na dnie sekcji jak
       na desktopie (0,7 s). */
    animation-delay: 0.55s;
  }
  /* Siedem pigułek zawiniętych w trzy rzędy dokładałoby ~130 px do sekcji,
     która na telefonie i tak jest długa (nagłówek, dwa CTA, nota, opinie,
     wyróżnienia, przypis, zdjęcie). Zamiast tego jeden rząd jadący w bok.
     Rząd wychodzi poza margines kontenera aż do krawędzi ekranu — ucięta
     pigułka na brzegu sama mówi „jest tego więcej", czego wersja kończąca
     się równo z tekstem powiedzieć nie potrafi. Ujemny margines działa,
     bo align-self: stretch trzyma szerokość auto; .a24-hero ma
     overflow: hidden, więc strona nie dostaje poziomego paska. */
  .a24-triage__rail-wrap {
    margin-inline: calc(var(--a24-gutter) * -1);
  }
  .a24-triage__rail {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    /* Bez tego przeciągnięcie na końcu rzędu przechodzi w gest „wstecz". */
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* Pigułki zaczynają się i kończą tam, gdzie tekst wyżej — mimo że sam
       rząd sięga krawędzi ekranu. */
    padding-inline: var(--a24-gutter);
    scroll-padding-inline-start: var(--a24-gutter);
    /* Miejsce na obwódkę fokusu (outline-offset 3px), bez dokładania
       wysokości rzędowi. */
    padding-block: 5px;
    margin-block: -5px;
    scrollbar-width: none;
  }
  .a24-triage__rail::-webkit-scrollbar { display: none; }
  .a24-triage__item {
    scroll-snap-align: start;
  }
  /* Pełne 44 px celu dotykowego. */
  .a24-triage__pill {
    min-height: 44px;
    padding: 12px 16px;
  }
  /* Wygaszenie prawej krawędzi — sygnał, że rząd jedzie dalej. Ten sam
     czarny co tło sekcji, więc po dojechaniu do końca nie widać, że
     cokolwiek tam leży. */
  .a24-triage__rail-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40px;
    background: linear-gradient(90deg, rgba(10,10,10,0) 0%, #0A0A0A 75%);
    pointer-events: none;
  }
}

/* ── Niskie ekrany (laptop 13", okno z otwartymi narzędziami) ──
   Na desktopie ograniczenie wysokości zdjęcia (patrz .a24-card--photo)
   załatwia prawą kolumnę, ale przy ~720 px widocznej wysokości to LEWA
   kolumna nie mieści się razem z pasem. Ściskamy więc rytm pionowy —
   nic nie znika, zmieniają się wyłącznie odstępy. */
@media (min-width: 961px) and (max-height: 820px) {
  .a24-hero__heading      { margin-bottom: 12px; }
  .a24-hero__lead         { margin-bottom: 20px; }
  .a24-hero__secrecy      { margin-bottom: 20px; }
  .a24-hero__testimonials { margin-bottom: 16px; }
  .a24-hero__proof        { margin-bottom: 16px; }
}
/* Drugi próg — 13" (1280×720) i okna z otwartą konsolą. Same odstępy już nie
   wystarczą (brakuje ~40 px), więc schodzi też nagłówek: o jeden stopień,
   z zachowaniem tego samego łamania na dwa wiersze. Osobny próg zamiast
   ostrzejszych wartości w pierwszym — przy 1440×800 pas mieści się z zapasem
   37 px i nie ma powodu, żeby H1 tam malał. */
@media (min-width: 961px) and (max-height: 760px) {
  .a24-hero__heading {
    font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.75rem);
    margin-bottom: 10px;
  }
  .a24-hero__urgent-badge { margin-bottom: 6px; }
  .a24-hero__lead         { margin-bottom: 16px; }
  .a24-hero__actions--tight { margin-bottom: 10px; }
  .a24-hero__secrecy      { margin-bottom: 16px; }
  .a24-hero__testimonials { margin-bottom: 12px; }
  .a24-hero__proof        { margin-bottom: 10px; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .a24-anim,
  .a24-hero__urgent-badge {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .a24-hero__dot::after,
  .a24-hero__urgent-dot,
  .a24-hero__bg-pulse,
  .a24-hero__topline,
  .a24-card__plate-dot,
  .a24-triage__dot::after {
    animation: none;
  }
  /* Zmiana krycia strzałki zostaje — to sygnał stanu, nie ruch. Znika
     samo przesunięcie. */
  .a24-triage__chev {
    transition: opacity 0.2s ease;
  }
  /* Dzielone CTA gubi unoszenie; tło i barwa napisu pod kursorem zostają,
     bo bez nich nie widać, którą połowę się trafiło. */
  .a24-hero__split:has(.a24-hero__split-half:hover) {
    transform: none;
  }
  .a24-triage__pill:hover .a24-triage__chev,
  .a24-triage__pill:focus-visible .a24-triage__chev {
    transform: none;
  }
  .a24-card__tilt::after {
    animation: none;
    opacity: 0.5;
  }
  .a24-card__tilt::before {
    animation: none;
    opacity: 0;
  }
}

/* ── Forced Colors (High Contrast) ── */
@media (forced-colors: active) {
  .a24-card__tilt::after,
  .a24-card__tilt::before {
    display: none;
  }
  .a24-card__photo {
    border: 2px solid ButtonText;
  }
  /* Tabliczkę trzyma nad zdjęciem sam gradient — tryb wysokiego kontrastu
     go zdejmuje, więc podpis wylądowałby wprost na fotografii. Kryjemy go
     płaskim tłem systemowym i odcinamy linią. */
  .a24-card__plate {
    background: Canvas;
    border-top: 1px solid ButtonText;
  }
  .a24-card__plate-status,
  .a24-card__plate-name,
  .a24-card__plate-role {
    color: CanvasText;
  }
  /* Pigułki trzyma na tym tle wyłącznie półprzezroczyste tło i obwódka,
     a tryb wysokiego kontrastu zdejmuje jedno i drugie — bez tej linijki
     rząd rozpada się w luźne słowa. */
  .a24-triage__pill {
    border: 1px solid ButtonText;
  }
  .a24-triage__dot::after,
  .a24-triage__rail-wrap::after {
    display: none;
  }
  /* Szew dzielonego CTA rysuje inset shadow, a tryb wysokiego kontrastu
     cienie kasuje — bez zamiany na border obie połowy zlewają się
     w jeden przycisk z dwiema nazwami. */
  .a24-hero__split {
    border: 1px solid ButtonText;
  }
  .a24-hero__split-half--signal {
    box-shadow: none;
    border-left: 1px solid ButtonText;
  }
  .a24-hero__split-icon {
    color: ButtonText;
    forced-color-adjust: none;
  }
}

/* ============================================================
   REVIEWS — Adwokat 24 Emergency Dark Override (styl „hr")
   Scoped do #opinie-a24 (ID sekcji ustawiane w inc/sections/a24hub|a24sub).
   Karuzela .hr (home/reviews.css) domyślnie jasna → tu zaczerniamy grafitem.
   Akcent = --ks-accent strony a24 (emergency red #FF6B6B) — eyebrow i link
   Google tintują się automatycznie; tu dopinamy H2 i akcenty kart/pagera,
   by cała sekcja grała z resztą strony.
   ============================================================ */

#opinie-a24 {
  background: #0A0A0A;
  position: relative;
  overflow: hidden;
}

/* Grid overlay */
#opinie-a24::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
#opinie-a24 > .container {
  position: relative;
  z-index: 1;
}

/* Nagłówek */
#opinie-a24 .hr__title {
  color: var(--emergency-text);
}
#opinie-a24 .hr__rule {
  background: rgba(255,255,255,0.08);
}

/* Karty */
#opinie-a24 .hr__card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
#opinie-a24 .hr__card:hover {
  border-color: rgba(220,50,50,0.28);
  box-shadow: 0 8px 32px rgba(220,50,50,0.10);
}
#opinie-a24 .hr__card-rule {
  background: rgba(255,255,255,0.08);
}
#opinie-a24 .hr__mark {
  color: var(--ks-accent);
}
#opinie-a24 .hr__quote {
  color: var(--dark-text-secondary);
}
#opinie-a24 .hr__author {
  color: var(--dark-text);
}
#opinie-a24 .hr__case {
  color: var(--dark-text-muted);
}
#opinie-a24 .hr__num {
  color: var(--accent-champagne);
}

/* Pager */
#opinie-a24 .hr__counter {
  color: var(--dark-text-muted);
}
#opinie-a24 .hr__track {
  background: rgba(255,255,255,0.10);
}
#opinie-a24 .hr__track-fill {
  background: var(--ks-accent);
}
#opinie-a24 .hr__btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--dark-text-muted);
}
#opinie-a24 .hr__btn:hover:not(:disabled) {
  background: rgba(220,50,50,0.12);
  border-color: rgba(220,50,50,0.3);
  color: #FF8A8A;
}
#opinie-a24 .hr__btn:focus-visible {
  outline-color: var(--ks-accent);
}

/* ============================================================
   ECTA — Adwokat 24 Red Emergency Override
   Scoped to #ecta-a24
   ============================================================ */

/* Section background — darker, with red vignette */
#ecta-a24 {
  background: #080808;
}
#ecta-a24::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(180,40,40,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 100% 100%, rgba(180,40,40,0.04) 0%, transparent 50%);
  pointer-events: none;
}
#ecta-a24::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
/* Stos nad tłem .ecta::before zapewnia bazowa reguła .ecta > .container
   (emergency-cta.css) — #ecta-a24 .ecta__container usunięte przy migracji. */

/* Card-status dot — red. (Eyebrow to teraz atoms/eyebrow; jego linia+tekst
   tintują się z --ks-accent: #FF6B6B ustawionego na .page-template-template-adwokat24.) */
#ecta-a24 .ecta__dot {
  background: #DC3232;
}
#ecta-a24 .ecta__dot::after {
  background: #DC3232;
}

/* Tags — red pills */
#ecta-a24 .ecta__tag {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.2);
  color: #FF8A8A;
}
#ecta-a24 .ecta__tag:hover {
  background: #DC3232;
  color: #fff;
  border-color: #DC3232;
}
#ecta-a24 .ecta__tag:focus-visible {
  outline-color: #FF6B6B;
}

/* Card — red rotating border */
#ecta-a24 .ecta__card-tilt::after {
  background: conic-gradient(
    from var(--card-angle, 0deg),
    rgba(220,50,50,0.6),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.6),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.05),
    rgba(220,50,50,0.6)
  );
}

/* Card — red scanning line */
#ecta-a24 .ecta__card-tilt::before {
  background: conic-gradient(
    from var(--scan-angle, 0deg),
    transparent 340deg,
    rgba(220,50,50,0.8) 352deg,
    rgba(220,50,50,0.3) 356deg,
    transparent 360deg
  );
}

/* Card — red ambient glow */
#ecta-a24 .ecta__card::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(220,50,50,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(220,50,50,0.08) 0%, transparent 50%);
}

/* Card inner — dark with red tint */
#ecta-a24 .ecta__card-inner {
  background: linear-gradient(170deg,
    rgba(60,20,20,0.5) 0%,
    rgba(13,13,13,0.97) 40%,
    rgba(13,13,13,0.97) 60%,
    rgba(50,15,15,0.35) 100%
  );
}

/* Status badge — red */
#ecta-a24 .ecta__card-status {
  background: rgba(220,50,50,0.12);
  border-color: rgba(220,50,50,0.3);
  color: #FF6B6B;
}
#ecta-a24 .ecta__card-status .ecta__dot {
  background: #DC3232;
}
#ecta-a24 .ecta__card-status .ecta__dot::after {
  background: #DC3232;
}

/* Phone hover — red */
#ecta-a24 .ecta__phone:hover {
  color: #FF6B6B;
  text-shadow: 0 0 30px rgba(220,50,50,0.35);
}
#ecta-a24 .ecta__phone::after {
  background: #DC3232;
}
#ecta-a24 .ecta__phone:focus-visible {
  outline-color: #FF6B6B;
}

/* Trust — red star */
#ecta-a24 .ecta__card-trust svg {
  fill: #FF6B6B;
}

/* Channels — red hover */
#ecta-a24 .ecta__channel:hover {
  background: rgba(220,50,50,0.1);
  border-color: rgba(220,50,50,0.3);
  color: #FF6B6B;
}
#ecta-a24 .ecta__channel:focus-visible {
  outline-color: #FF6B6B;
}

/* Encryption note — red icon */
#ecta-a24 .ecta__encryption-note svg {
  fill: #FF6B6B;
}

/* Headline em — red accent */
#ecta-a24 .ecta__headline em {
  font-style: normal;
  color: #FF6B6B;
}

/* Hot tags — brighter, bolder. Atom emituje .ks-tag--hot (dawniej .ecta__tag--hot). */
#ecta-a24 .ks-tag--hot {
  background: rgba(220,50,50,0.15);
  border-color: rgba(220,50,50,0.4);
  color: #FF6B6B;
  font-weight: 700;
}
#ecta-a24 .ks-tag--hot:hover {
  box-shadow: 0 0 12px rgba(220,50,50,0.3);
}

/* Divider — red tint */
#ecta-a24 .ecta__card-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(220,50,50,0.2) 20%, rgba(220,50,50,0.2) 80%, transparent 100%);
}

/* ============================================================
   FAQ — Adwokat 24 Dark Emergency Override
   Scoped to #faq-a24
   ============================================================ */

/* Section */
#faq-a24 {
  background: #0A0A0A;
  position: relative;
}
#faq-a24::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
#faq-a24 > .container {
  position: relative;
  z-index: 1;
}

/* Header */
#faq-a24 .faq__eyebrow {
  color: #FF6B6B;
}
#faq-a24 .faq__headline {
  color: var(--emergency-text);
}

/* Accordion items — dark borders */
#faq-a24 .faq__item {
  border-color: rgba(255,255,255,0.06);
}
#faq-a24 .faq__item:first-child {
  border-color: rgba(255,255,255,0.06);
}

/* Question button */
#faq-a24 .faq__question {
  color: var(--dark-text);
}
#faq-a24 .faq__question:hover {
  color: #FF6B6B;
}
#faq-a24 .faq__question:focus-visible {
  outline-color: #FF6B6B;
}

/* Icon — red */
#faq-a24 .faq__icon {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.2);
}
#faq-a24 .faq__icon svg {
  stroke: #FF6B6B;
}
#faq-a24 .faq__question[aria-expanded="true"] .faq__icon {
  background: rgba(220,50,50,0.15);
  border-color: rgba(220,50,50,0.3);
}
#faq-a24 .faq__question[aria-expanded="true"] .faq__icon svg {
  stroke: #FF6B6B;
}

/* Answer text */
#faq-a24 .faq__answer-inner p {
  color: var(--dark-text-secondary);
}
#faq-a24 .faq__answer-inner a {
  color: #FF6B6B;
  text-decoration-color: rgba(220,50,50,0.3);
}
#faq-a24 .faq__answer-inner a:hover {
  text-decoration-color: #FF6B6B;
}

/* Sidebar card — dark elevated */
#faq-a24 .faq__sidebar-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
#faq-a24 .faq__sidebar-card:hover {
  box-shadow: 0 8px 32px rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.15);
}
#faq-a24 .faq__sidebar-icon {
  background: rgba(220,50,50,0.1);
  border-color: rgba(220,50,50,0.2);
}
#faq-a24 .faq__sidebar-icon svg {
  stroke: #FF6B6B;
}
#faq-a24 .faq__sidebar-headline {
  color: var(--emergency-text);
}
#faq-a24 .faq__sidebar-text {
  color: var(--dark-text-muted);
}
#faq-a24 .faq__sidebar-btn {
  background: #DC3232;
  box-shadow: 0 0 16px rgba(220,50,50,0.25);
}
#faq-a24 .faq__sidebar-btn:hover {
  background: #E04040;
  box-shadow: 0 0 24px rgba(220,50,50,0.35);
}
#faq-a24 .faq__sidebar-meta {
  color: var(--dark-text-muted);
}

/* ============================================================
   RELATED — Adwokat 24 Dark Emergency Override
   Scoped to #related-a24
   ============================================================ */

#related-a24 {
  background: #0A0A0A;
  position: relative;
}
#related-a24::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
#related-a24 > .container {
  position: relative;
  z-index: 1;
}

/* Header — eyebrow/heading themed via molecules/section-header + --ks-accent */

/* Cards — dark */
#related-a24 .related__card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
#related-a24 .related__card:hover {
  border-color: rgba(220,50,50,0.2);
  box-shadow: 0 8px 32px rgba(220,50,50,0.08);
}

/* Icon */
#related-a24 .related__card-icon {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.2);
}
#related-a24 .related__card-icon svg {
  stroke: #FF6B6B;
}
#related-a24 .related__card:hover .related__card-icon {
  border-color: #DC3232;
  box-shadow: 0 0 0 3px rgba(220,50,50,0.1);
}

/* Text */
#related-a24 .related__card-title {
  color: var(--dark-text);
}
#related-a24 .related__card-desc {
  color: var(--dark-text-muted);
}

/* Badge */
#related-a24 .related__card-badge {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.2);
  color: #FF6B6B;
}

/* Arrow */
#related-a24 .related__card-arrow {
  color: var(--dark-text-muted);
}
#related-a24 .related__card:hover .related__card-arrow {
  color: #FF6B6B;
}

/* Focus */
#related-a24 .related__card:focus-visible {
  outline-color: #FF6B6B;
}


/* ============================================================
   A24S-HERO — Adwokat 24 Subcategory Split Hero
   Split layout: text left (~55%), full-bleed photo right (~45%).
   Design language: matches a24-hero emergency red palette.
   Prefix: a24s-hero
   ============================================================ */

/* ── Section — dark emergency atmosphere (matches a24-hero) ── */
.a24s-hero {
  --a24s-red: #DC3232;
  --a24s-red-light: #FF6B6B;
  --a24s-red-muted: #FF8A8A;
  --a24s-photo-radius: 24px;
  position: relative;
  background: #0A0A0A;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

/* Gradient fade at bottom of hero into next section */
.a24s-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #0A0A0A);
  pointer-events: none;
  z-index: 3;
}

/* Layered emergency atmosphere (matches a24-hero::before) */
.a24s-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(180,40,40,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 80% 100% at 100% 100%, rgba(180,40,40,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Emergency top line — red-to-green gradient, pulsing (matches a24-hero__topline) */
.a24s-hero__topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #DC3232, var(--accent-light), #DC3232, transparent);
  opacity: 0.7;
  animation: a24ToplinePulse 3s ease-in-out infinite alternate;
  z-index: 5;
}

/* Slow pulsing red ambient glow (matches a24-hero__bg-pulse) */
.a24s-hero__bg-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(200,50,50,0.04) 0%, transparent 70%);
  animation: a24BgPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Subtle grid pattern overlay (matches a24-hero__bg-grid) */
.a24s-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}

/* Container needs to sit above background effects and fill width */
.a24s-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: var(--hero-pt);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/*
  FULL-BLEED GRID TECHNIQUE:
  55/45 split. Photo column breaks out of the container to the right
  viewport edge via negative margin on the photo-frame.
*/
.a24s-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
  min-height: clamp(400px, 50vh, 600px);
}

/* ── Left Column: Text (matches a24-hero__content structure) ── */
.a24s-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Entrance animations — keyframe based like a24-hero */
.a24s-anim {
  opacity: 0;
  transform: translateY(24px);
  animation: a24FadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.a24s-anim--1  { animation-delay: 0.05s; }
.a24s-anim--2  { animation-delay: 0.15s; }
.a24s-anim--3  { animation-delay: 0.25s; }
.a24s-anim--4  { animation-delay: 0.35s; }
.a24s-anim--5  { animation-delay: 0.45s; }
.a24s-anim--6  { animation-delay: 0.55s; }
.a24s-anim--4b { animation-delay: 0.40s; }
.a24s-anim--5  { animation-delay: 0.45s; }
.a24s-anim--6  { animation-delay: 0.55s; }
.a24s-anim--7  { animation-delay: 0.65s; }
.a24s-anim--8  { animation-delay: 0.75s; }
.a24s-anim--9  { animation-delay: 0.85s; }
.a24s-anim--10 { animation-delay: 1.0s; }
.a24s-anim--photo { animation-delay: 0.2s; }

/* Breadcrumb */
/* Breadcrumb (bc-slide) — wider gap before badge in this hero */
.a24s-hero .bc-slide {
  margin-bottom: var(--space-4);
}

.a24s-hero__breadcrumb {
  margin-bottom: var(--space-2);
}
.a24s-hero__breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.a24s-hero__breadcrumb li {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-text-muted);
}
.a24s-hero__breadcrumb li + li::before {
  content: '/';
  margin: 0 8px;
  color: var(--dark-border);
}
.a24s-hero__breadcrumb a {
  color: var(--dark-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.a24s-hero__breadcrumb a:hover {
  color: #FF6B6B;
}
.a24s-hero__breadcrumb li[aria-current="page"] {
  color: var(--dark-text-secondary);
}

/* Urgent badge (matches a24-hero__urgent-badge) */
/* Eyebrow (atom: atoms/eyebrow) — left-aligned, hero spacing */
.a24s-hero__eyebrow {
  align-self: flex-start;
  margin-bottom: var(--space-2);
}

/* Heading (matches a24-hero__heading) */
.a24s-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
  margin-bottom: var(--space-2);
}
.a24s-hero__heading em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  color: #FF6B6B;
}

/* Lead text */
.a24s-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--dark-text-secondary);
  max-width: 500px;
  margin-bottom: var(--space-3);
}

/* Phone number — large, prominent, Cormorant Garamond */
.a24s-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  margin-bottom: var(--space-1);
  transition: transform 0.3s ease;
}
.a24s-hero__phone:hover {
  transform: translateY(-2px);
}
.a24s-hero__phone:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 6px;
  border-radius: 4px;
}
.a24s-hero__phone-number {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 1.75rem);
  font-weight: 700;
  color: var(--emergency-text);
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.a24s-hero__phone-number {
  position: relative;
}
.a24s-hero__phone-number::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #DC3232;
  opacity: 0;
  filter: blur(2px);
  transition: all 0.3s ease;
}
.a24s-hero__phone:hover .a24s-hero__phone-number {
  color: #FF6B6B;
  text-shadow: 0 0 30px rgba(220,50,50,0.35);
}
.a24s-hero__phone:hover .a24s-hero__phone-number::after {
  opacity: 0.7;
  left: 0;
  right: 0;
  filter: blur(4px);
}

/* Wiersz dostępności (.a24s-hero__avail) usunięty 3.08.2026 razem
   z przypisem hero na hubie — style poszły za znacznikiem. */

/* Encryption note beside channel buttons */
.a24s-hero__secure {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.71875rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--dark-text-muted);
}
.a24s-hero__secure svg {
  flex-shrink: 0;
  color: #4ADE80;
}

/* Kanały kontaktu na podstronie. Wzorowane na karcie kontaktowej z hero
   huba — ta karta ustąpiła 3.08.2026 miejsca zdjęciu, więc te reguły
   nie mają już odpowiednika po tamtej stronie i stoją samodzielnie. */
.a24s-hero__channels {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
}
.a24s-hero__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  max-width: 160px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--dark-text-secondary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.a24s-hero__channel svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
.a24s-hero__channel:hover {
  background: rgba(220,50,50,0.1);
  border-color: rgba(220,50,50,0.3);
  color: #FF6B6B;
  transform: translateY(-1px);
}
.a24s-hero__channel:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 2px;
}

/* Trust / proof strip (matches a24-hero__proof) */
.a24s-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.a24s-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dark-text-muted);
}
.a24s-hero__trust-item svg {
  width: 14px;
  height: 14px;
  stroke: #FF6B6B;
  fill: none;
  flex-shrink: 0;
}
.a24s-hero__trust-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dark-border);
  flex-shrink: 0;
}

/* ── Right column: photo with full-bleed ── */
.a24s-hero__photo {
  position: relative;
  align-self: stretch;
}

/*
  Photo frame: fills the grid cell with animated border.
*/
.a24s-hero__photo-frame {
  position: relative;
  height: 100%;
  min-height: clamp(400px, 50vh, 600px);
  border-radius: var(--a24s-photo-radius);
  overflow: hidden;
  background: linear-gradient(135deg, #2a1515, #0d0a0a);
  padding: 1.5px;
}

/* Rotating conic-gradient border (matches a24-card) */
@property --a24s-photo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.a24s-hero__photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--a24s-photo-radius);
  padding: 1.5px;
  background: conic-gradient(
    from var(--a24s-photo-angle, 0deg),
    rgba(220,50,50,0.4),
    rgba(220,50,50,0.03),
    rgba(220,50,50,0.03),
    rgba(220,50,50,0.4),
    rgba(220,50,50,0.03),
    rgba(220,50,50,0.03),
    rgba(220,50,50,0.4)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: a24sPhotoBorderSpin 10s linear infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes a24sPhotoBorderSpin { to { --a24s-photo-angle: 360deg; } }

.a24s-hero__photo-frame img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
  GRADIENT OVERLAY:
  Left-to-right dark gradient ensures text readability at the column boundary.
  Matches the atmospheric feel of a24-hero.
*/
.a24s-hero__photo-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10,10,10,0.75), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* Photo entrance — slides in from right */
.a24s-hero__photo.a24s-anim {
  transform: translateX(40px);
}

/* Scroll indicator */
.a24s-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: var(--space-6, 32px);
  padding-bottom: var(--space-4, 16px);
  text-decoration: none;
  cursor: pointer;
}
.a24s-hero__scroll:hover .a24s-hero__scroll-text {
  color: rgba(255,255,255,0.55);
}
.a24s-hero__scroll:hover .a24s-hero__scroll-chevron {
  color: rgba(220,50,50,0.8);
}
.a24s-hero__scroll-text {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.a24s-hero__scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(220,50,50,0.4), transparent);
  animation: a24sScrollPulse 2.5s ease-in-out infinite;
}
.a24s-hero__scroll-chevron {
  color: rgba(220,50,50,0.5);
  animation: a24sChevronBounce 2.5s ease-in-out infinite;
}
@keyframes a24sScrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50% { opacity: 0.8; transform: scaleY(1); }
}
@keyframes a24sChevronBounce {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(4px); }
}

/* ── Responsive: tablet ── */
@media (max-width: 960px) {
  .a24s-hero {
    min-height: auto;
  }

  .a24s-hero > .container {
    padding-top: 40px;
  }

  .a24s-hero__grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
  }

  .a24s-hero__grid {
    gap: var(--space-4);
  }

  .a24s-hero__photo-frame {
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
  }

  /* Mobile gradient: bottom-up so text beneath stays readable */
  .a24s-hero__photo-frame::before {
    background: linear-gradient(to top, rgba(10,10,10,0.8), transparent 70%);
  }

  .a24s-hero__content {
    padding: var(--space-4) 0 0;
  }

  .a24s-hero__heading {
    font-size: clamp(1.6rem, 1.2rem + 3vw, 2.2rem);
  }

  .a24s-hero__phone-number {
    font-size: clamp(1.4rem, 1rem + 2vw, 1.6rem);
  }

  .a24s-hero__breadcrumb {
    margin-bottom: var(--space-1);
  }
  .a24s-hero__breadcrumb li {
    font-size: 0.6875rem;
  }

  .a24s-hero__channels {
    flex-wrap: wrap;
  }
  .a24s-hero__channel {
    max-width: none;
    flex: 1 1 auto;
  }
  .a24s-hero__secure {
    flex: 1 0 100%;
    width: 100%;
    margin-top: var(--space-1);
  }

  .a24s-hero__trust {
    gap: 12px;
  }

  .a24s-hero__scroll {
    display: none;
  }

  .a24s-hero__photo {
    border-radius: 0;
  }

  /* Photo entrance: fade only on mobile */
  .a24s-hero__photo.a24s-anim {
    transform: translateY(0);
  }
}

/* ── Responsive: small mobile ── */
@media (max-width: 480px) {
  .a24s-hero__channels {
    gap: 6px;
  }
  .a24s-hero__channel {
    padding: 6px 14px;
    font-size: 0.6875rem;
  }
  .a24s-hero__trust-item {
    font-size: 0.75rem;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .a24s-anim {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .a24s-hero__dot::after,
  .a24s-hero__bg-pulse,
  .a24s-hero__topline,
  .a24s-hero__scroll-line,
  .a24s-hero__photo-frame::after {
    animation: none;
  }
}

/* ============================================================
   E24-CALLOUT — „Co musisz wiedzieć teraz"
   Split layout: callout left (60%) + contact card right (40%).
   Dark theme, continues hero emergency atmosphere.
   Prefix: e24-callout, e24-contact-card
   ============================================================ */

/* ── Section ── */
.e24-callout-section {
  background: #0A0A0A;
  padding: 0 0 clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

/* Subtle grid pattern (matches hero) */
.e24-callout-section__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ── Callout header: heading + badge ── */
.e24-callout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}
.e24-callout__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.35rem);
  font-weight: 600;
  color: var(--text-inverse);
  line-height: 1.3;
}
.e24-callout__heading em {
  font-style: normal;
  color: #FF6B6B;
}
.e24-callout__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFB3B3;
  background: rgba(220,50,50,0.08);
  border: 1px solid rgba(220,50,50,0.2);
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.e24-callout__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #DC3232;
  box-shadow: 0 0 0 0 rgba(220,50,50,0.5);
  animation: a24UrgentDotBlink 1.5s ease-in-out infinite;
}

/* ── Split grid ── */
.e24-callout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(24px, 4vw, 40px);
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* ── Left: Callout box ── */
.e24-callout {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%),
    radial-gradient(120% 80% at 0% 0%, rgba(220,50,50,0.06) 0%, transparent 55%);
  border-left: 4px solid #DC3232;
  border-radius: 0 14px 14px 0;
  padding: 28px 32px;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-right: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 32px -16px rgba(0,0,0,0.6);
  position: relative;
}

/* Scroll reveal (progressive enhancement) */
.e24-callout.e24-anim-ready {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.e24-callout.e24-anim-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Title with icon */
.e24-callout__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-inverse);
  line-height: 1.3;
  margin-bottom: 16px;
}
.e24-callout__title-icon {
  width: 20px;
  height: 20px;
  stroke: #FF6B6B;
  flex-shrink: 0;
}

/* List */
.e24-callout__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Each item is a two-column mini-grid: keyword tag left, text right.
   This keeps all text aligned regardless of tag width. */
.e24-callout__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0 14px;
  align-items: start;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255,255,255,0.80);
  line-height: 1.65;
}
.e24-callout__item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* Keyword tag: fixed-width left column */
.e24-callout__item strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #FF6B6B;
  background: rgba(220,50,50,0.08);
  border: 1px solid rgba(220,50,50,0.18);
  padding: 4px 6px;
  border-radius: 5px;
  line-height: 1.1;
  white-space: nowrap;
}

/* ── Right: Contact card (matches a24-card design) ── */
.e24-contact-card {
  background: linear-gradient(170deg,
    rgba(60,20,20,0.4) 0%,
    rgba(13,13,13,0.95) 40%,
    rgba(13,13,13,0.95) 60%,
    rgba(50,15,15,0.3) 100%
  );
  border-radius: 20px;
  border: 1px solid rgba(220,50,50,0.22);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(220,50,50,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Noise texture overlay */
.e24-contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Scroll reveal */
.e24-contact-card.e24-anim-ready {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.e24-contact-card.e24-anim-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Urgency countdown */
.e24-contact-card__urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(220,50,50,0.1);
  border: 1px solid rgba(220,50,50,0.25);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FF6B6B;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  animation: a24UrgentPulse 2.5s ease-in-out infinite;
}
.e24-contact-card__urgency svg {
  width: 14px;
  height: 14px;
  stroke: #FF6B6B;
}
.e24-contact-card__urgency-dot {
  width: 6px;
  height: 6px;
  background: #DC3232;
  border-radius: 50%;
  flex-shrink: 0;
  animation: a24UrgentDotBlink 1.5s ease-in-out infinite;
}

/* Phone number */
.e24-contact-card__phone {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 1.75rem);
  font-weight: 700;
  color: var(--emergency-text);
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1.1;
  padding: 4px 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.e24-contact-card__phone:hover {
  color: #FF6B6B;
  text-shadow: 0 0 30px rgba(220,50,50,0.35);
}
.e24-contact-card__phone:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 6px;
  border-radius: 4px;
}

/* Label */
.e24-contact-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

/* Divider */
.e24-contact-card__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--dark-border) 20%, var(--dark-border) 80%, transparent 100%);
  margin: 8px 0;
  position: relative;
  z-index: 1;
}

/* Messaging label */
.e24-contact-card__msg-label {
  font-size: 0.8125rem;
  color: var(--dark-text-muted);
  margin-top: 8px;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

/* Channel buttons */
.e24-contact-card__channels {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.e24-contact-card__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--dark-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.e24-contact-card__channel:hover {
  background: rgba(220,50,50,0.1);
  border-color: rgba(220,50,50,0.3);
  color: #FF6B6B;
  transform: translateY(-1px);
}
.e24-contact-card__channel:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 2px;
}
.e24-contact-card__channel svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Encryption note */
.e24-contact-card__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.71875rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--dark-text-muted);
  position: relative;
  z-index: 1;
}
.e24-contact-card__secure svg {
  flex-shrink: 0;
  color: #4ADE80;
}

/* Trust signals */
.e24-contact-card__trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.e24-contact-card__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-text-muted);
}
.e24-contact-card__trust-item svg {
  width: 16px;
  height: 16px;
  stroke: #FF6B6B;
  flex-shrink: 0;
}

/* Toggle hidden on desktop */
.e24-callout__toggle {
  display: none;
}

/* ── Responsive: tablet + mobile ── */
@media (max-width: 960px) {
  .e24-callout-section {
    padding: clamp(32px, 4vw, 48px) 0;
  }

  .e24-callout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Callout: full-width clean card */
  .e24-callout {
    padding: 20px;
    border-left-width: 3px;
    border-radius: 0 12px 12px 0;
  }

  /* Quick answer badge above the heading on mobile */
  .e24-callout__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .e24-callout__badge {
    order: -1;
  }

  .e24-callout__title {
    font-size: 0.9375rem;
    margin-bottom: 12px;
    gap: 8px;
  }

  .e24-callout__title-icon {
    width: 18px;
    height: 18px;
  }

  .e24-callout__item {
    grid-template-columns: 76px 1fr;
    gap: 0 10px;
    font-size: 0.8125rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
    line-height: 1.6;
  }

  .e24-callout__item strong {
    font-size: 0.5625rem;
    padding: 3px 4px;
  }


  /* Callout collapse: hide items 4+ on mobile */
  .e24-callout__list .e24-callout__item:nth-child(n+4) {
    display: none;
  }
  .e24-callout__list.is-expanded .e24-callout__item:nth-child(n+4) {
    display: grid;
  }

  .e24-callout__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: #FF6B6B;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .e24-callout__toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }
  .e24-callout__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Contact card: compact horizontal strip */
  .e24-contact-card {
    border-radius: 12px;
    padding: 16px 20px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px 12px;
  }

  .e24-contact-card__urgency {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    font-size: 0.625rem;
    padding: 4px 10px;
  }

  .e24-contact-card__phone {
    font-size: 1.3rem;
    flex-basis: 100%;
  }

  .e24-contact-card__label {
    margin-bottom: 0;
    font-size: 0.6875rem;
  }

  .e24-contact-card__divider {
    width: 100%;
    margin: 4px 0;
  }

  .e24-contact-card__msg-label {
    width: 100%;
    margin-top: 0;
    margin-bottom: 2px;
    font-size: 0.75rem;
  }

  .e24-contact-card__channels {
    justify-content: center;
  }

  .e24-contact-card__channel {
    flex: 0 1 auto;
    padding: 8px 18px;
    font-size: 0.75rem;
    border-radius: 8px;
  }

  .e24-contact-card__secure {
    margin-top: 8px;
    font-size: 0.6875rem;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .e24-callout.e24-anim-ready,
  .e24-contact-card.e24-anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .e24-contact-card__urgency,
  .e24-contact-card__urgency-dot,
  .e24-callout__badge-dot {
    animation: none;
  }
}

/* ============================================================
   E24-TIMELINE — „Co zrobię po Twoim telefonie"
   Vertical timeline, sekcja 3 na podstronach Adwokat 24.
   Prefix: e24-timeline
   ============================================================ */

/* ── Section — slightly lighter dark to differentiate from callout ── */
.e24-timeline-section {
  background: #0D0D0D;
  padding: clamp(48px, 5vw, 80px) 0;
  position: relative;
  overflow: clip; /* clip (not hidden) so the sticky aside isn't trapped in a scroll context */
  border-top: 1px solid rgba(220,50,50,0.08);
}
.e24-timeline-section::before {
  content: '';
  position: absolute;
  top: 10%;
  left: -8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(220,50,50,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* Grid pattern (matches hero + callout) */
.e24-timeline-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ── Header ── */
.e24-timeline-header {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

/* ── Two-column layout: timeline + sticky contact aside (desktop) ── */
.e24-timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.e24-timeline-layout .e24-timeline {
  max-width: none;
  margin: 0;
}

/* ── Sticky contact aside ── */
.e24-timeline-aside {
  position: sticky;
  top: 96px;
  align-self: start;
}
.e24-timeline-aside__card {
  background: linear-gradient(170deg,
    rgba(60,20,20,0.4) 0%,
    rgba(13,13,13,0.95) 45%,
    rgba(50,15,15,0.3) 100%
  );
  border: 1px solid rgba(220,50,50,0.22);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 24px 48px -24px rgba(220,50,50,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.e24-timeline-aside__urgency {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(220,50,50,0.1);
  border: 1px solid rgba(220,50,50,0.25);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FF6B6B;
}
.e24-timeline-aside__urgency-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #DC3232;
  animation: a24UrgentDotBlink 1.5s ease-in-out infinite;
}
.e24-timeline-aside__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark-text-muted);
  letter-spacing: 0.3px;
}
.e24-timeline-aside__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.e24-timeline-aside__phone svg {
  width: 20px;
  height: 20px;
  color: #FF6B6B;
  flex-shrink: 0;
}
.e24-timeline-aside__phone:hover {
  color: #FF6B6B;
  text-shadow: 0 0 24px rgba(220,50,50,0.4);
}
.e24-timeline-aside__phone:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 4px;
  border-radius: 6px;
}
.e24-timeline-aside__channels {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}
.e24-timeline-aside__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--dark-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.e24-timeline-aside__channel svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.e24-timeline-aside__channel:hover {
  background: rgba(220,50,50,0.1);
  border-color: rgba(220,50,50,0.3);
  color: #FF6B6B;
  transform: translateY(-1px);
}
.e24-timeline-aside__channel:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 2px;
}
.e24-timeline-aside__secure {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--dark-text-muted);
  line-height: 1.4;
}
.e24-timeline-aside__secure svg {
  flex-shrink: 0;
  color: #4ADE80;
}

/* ── Timeline container ── */
.e24-timeline {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  z-index: 1;
}

/* ── Progress line (left rail, fills on scroll) ── */
.e24-timeline__progress {
  position: absolute;
  top: 16px;
  left: 40px;
  transform: translateX(-50%);
  width: 2px;
  bottom: 16px;
  background: rgba(220,50,50,0.08);
  z-index: 0;
}
.e24-timeline__progress-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, #DC3232, #FF6B6B);
  border-radius: 1px;
  transition: height 0.4s ease;
}

/* Active step (JS adds .is-active) */
.e24-timeline__step.is-active .e24-timeline__dot {
  background: #DC3232 !important;
  border-color: #DC3232 !important;
  box-shadow: 0 0 0 4px rgba(220,50,50,0.15) !important;
}
.e24-timeline__step.is-active .e24-timeline__number {
  color: #FFFFFF !important;
}

/* ── Step ── */
.e24-timeline__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
  position: relative;
  border-radius: 12px;
  padding: 16px 16px 44px;
  margin: -16px;
  margin-bottom: 0;
  transition: background 0.3s ease;
}
.e24-timeline__step:last-child {
  padding-bottom: 16px;
}

/* Connecting line (pseudo-element) */
.e24-timeline__step::after {
  content: '';
  position: absolute;
  top: 52px;
  left: 40px;
  transform: translateX(-50%);
  width: 2px;
  bottom: 0;
  background: rgba(220,50,50,0.2);
  transform-origin: top;
}
.e24-timeline__step:last-child::after {
  display: none;
}

/* ── Marker ── */
.e24-timeline__marker {
  display: flex;
  justify-content: center;
}

.e24-timeline__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.e24-timeline__number {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition: color 0.4s ease;
}

/* First step: filled dot */
.e24-timeline__step:first-child .e24-timeline__dot {
  background: radial-gradient(circle at 35% 30%, #FF6B6B 0%, #DC3232 70%);
  box-shadow: 0 0 0 4px rgba(220,50,50,0.15), 0 0 18px rgba(220,50,50,0.4);
}
.e24-timeline__step:first-child .e24-timeline__number {
  color: #FFFFFF;
}

/* Other steps: outlined dot */
.e24-timeline__step:not(:first-child) .e24-timeline__dot {
  background: radial-gradient(circle, rgba(220,50,50,0.10) 0%, rgba(255,255,255,0.02) 100%);
  border: 2px solid rgba(220,50,50,0.3);
}
.e24-timeline__step:not(:first-child) .e24-timeline__number {
  color: #FF6B6B;
}

/* ── Content ── */
.e24-timeline__content {
  padding-top: 4px;
}

.e24-timeline__title {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-inverse);
  line-height: 1.3;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.e24-timeline__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--dark-text-secondary);
  line-height: 1.7;
}

/* Step badge (timing indicator) */
.e24-timeline__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FF6B6B;
  background: rgba(220,50,50,0.08);
  border: 1px solid rgba(220,50,50,0.15);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}

/* Checklist inside step */
.e24-timeline__checklist {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.e24-timeline__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}
.e24-timeline__checklist li::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  background-color: #4ADE80;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Note block inside step */
.e24-timeline__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(220,50,50,0.04);
  border-radius: 8px;
  border: 1px solid rgba(220,50,50,0.1);
}
.e24-timeline__note svg {
  width: 16px;
  height: 16px;
  stroke: #FF6B6B;
  flex-shrink: 0;
  margin-top: 1px;
}
.e24-timeline__note span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}

/* ── CTA pod timeline ── */
.e24-timeline-cta {
  text-align: center;
  max-width: 680px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  position: relative;
  z-index: 1;
}
.e24-timeline-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  background: #DC3232;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(220,50,50,0.25);
}
.e24-timeline-cta__phone:hover {
  background: #E04040;
  box-shadow: 0 0 32px rgba(220,50,50,0.45);
  transform: translateY(-2px);
}
.e24-timeline-cta__phone:focus-visible {
  outline: 2px solid #FF6B6B;
  outline-offset: 4px;
}
.e24-timeline-cta__phone svg {
  width: 20px;
  height: 20px;
}
.e24-timeline-cta__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dark-text-muted);
  margin-top: 12px;
}

/* ── Hover on step (desktop) ── */
.e24-timeline__step:hover {
  background: rgba(220,50,50,0.02);
}
.e24-timeline__step:hover .e24-timeline__dot {
  background: #DC3232;
  border-color: #DC3232;
  box-shadow: 0 0 0 4px rgba(220,50,50,0.15);
}
.e24-timeline__step:hover .e24-timeline__number {
  color: #FFFFFF;
}
.e24-timeline__step:hover .e24-timeline__title {
  color: #FF6B6B;
}

/* ── Scroll reveal (progressive enhancement) ──
   JS adds .e24-tl-ready to hide elements, then .is-visible to reveal.
   Without JS, everything is visible. */
.e24-timeline.e24-tl-ready .e24-timeline__dot {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.e24-timeline.e24-tl-ready .e24-timeline__step::after {
  transform: translateX(-50%) scaleY(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.e24-timeline.e24-tl-ready .e24-timeline__content {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.e24-timeline.e24-tl-ready .e24-timeline-header {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state — sequential cascade */
.e24-timeline.e24-tl-ready.is-visible .e24-timeline-header {
  opacity: 1; transform: translateY(0);
}

.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(1) .e24-timeline__dot { opacity: 1; transform: scale(1); transition-delay: 0.15s; }
.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(1)::after { transform: translateX(-50%) scaleY(1); transition-delay: 0.25s; }
.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(1) .e24-timeline__content { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }

.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(2) .e24-timeline__dot { opacity: 1; transform: scale(1); transition-delay: 0.35s; }
.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(2)::after { transform: translateX(-50%) scaleY(1); transition-delay: 0.45s; }
.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(2) .e24-timeline__content { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }

.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(3) .e24-timeline__dot { opacity: 1; transform: scale(1); transition-delay: 0.55s; }
.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(3)::after { transform: translateX(-50%) scaleY(1); transition-delay: 0.65s; }
.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(3) .e24-timeline__content { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }

.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(4) .e24-timeline__dot { opacity: 1; transform: scale(1); transition-delay: 0.75s; }
.e24-timeline.e24-tl-ready.is-visible .e24-timeline__step:nth-child(4) .e24-timeline__content { opacity: 1; transform: translateX(0); transition-delay: 0.8s; }

/* ── Responsive: tablet — collapse layout, hide sticky aside ── */
@media (max-width: 960px) {
  .e24-timeline-layout {
    display: block;
    max-width: 680px;
  }
  .e24-timeline-layout .e24-timeline {
    max-width: 680px;
    margin: 0 auto;
  }
  .e24-timeline-aside {
    display: none;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 767px) {
  .e24-timeline__step {
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 12px 12px 32px;
    margin: -12px;
    margin-bottom: 0;
    border-radius: 10px;
  }
  .e24-timeline__step:last-child {
    padding-bottom: 12px;
  }

  .e24-timeline__dot {
    width: 28px;
    height: 28px;
  }

  .e24-timeline__number {
    font-size: 0.8125rem;
  }

  .e24-timeline__step::after {
    left: 30px;
    width: 1.5px;
    top: 40px;
  }

  .e24-timeline__progress {
    left: 30px;
  }

  .e24-timeline__title {
    font-size: 0.875rem;
  }

  .e24-timeline__desc {
    font-size: 0.8125rem;
  }

  .e24-timeline__badge {
    font-size: 0.5625rem;
    padding: 2px 8px;
  }

  .e24-timeline__checklist li {
    font-size: 0.75rem;
  }

  .e24-timeline__note {
    padding: 8px 10px;
    gap: 8px;
  }
  .e24-timeline__note span {
    font-size: 0.75rem;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .e24-timeline.e24-tl-ready .e24-timeline__dot,
  .e24-timeline.e24-tl-ready .e24-timeline__content,
  .e24-timeline.e24-tl-ready .e24-timeline-header {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .e24-timeline.e24-tl-ready .e24-timeline__step::after {
    transform: translateX(-50%) scaleY(1);
    transition: none;
  }
}

/* ============================================================
   EXPERT--DARK — Dark emergency override for Adwokat 24 subpages
   Scoped to .expert--dark. Overrides light-theme expert styles
   to match the red emergency palette used across the page.
   ============================================================ */

/* Section background */
.expert--dark {
  background: #0A0A0A;
  position: relative;
}
.expert--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Header */
.expert--dark .expert__eyebrow {
  color: #FF6B6B;
}
.expert--dark .expert__headline {
  color: var(--text-inverse);
}
.expert--dark .expert__headline em {
  color: #FF6B6B;
}

/* Segment titles and body */
.expert--dark .segment__title {
  color: var(--text-inverse);
}
.expert--dark .segment__body {
  color: var(--dark-text-secondary);
}
.expert--dark .segment__body strong {
  color: var(--text-inverse);
}
.expert--dark .segment__body h3,
.expert--dark .segment__body h4 {
  color: var(--text-inverse);
}
.expert--dark .segment__body a {
  color: #FF6B6B;
  text-decoration-color: rgba(220,50,50,0.3);
}
.expert--dark .segment__body a:hover {
  color: #FF8A8A;
}

/* Segment icon */
.expert--dark .segment__icon {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.15);
}
.expert--dark .segment__icon svg {
  stroke: #FF6B6B;
}

/* Even segment alternating bg */
.expert--dark .segment:nth-child(even) .segment__inner {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.05);
}

/* Segment--dark (the "alert" variant) */
.expert--dark .segment--dark {
  background: rgba(220,50,50,0.03);
  border-color: rgba(220,50,50,0.1);
}

/* List markers */
.expert--dark .segment__body ul li::before {
  background: rgba(220,50,50,0.15);
  border-color: rgba(220,50,50,0.3);
}

/* Trust callout */
.expert--dark .segment__trust-callout {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
.expert--dark .segment__trust-callout-number {
  color: #FF6B6B;
}
.expert--dark .segment__trust-callout-label {
  color: var(--dark-text-muted);
}
.expert--dark .segment__trust-callout-sep {
  background: rgba(255,255,255,0.06);
}

/* Stat pullquote */
.expert--dark .segment__stat {
  background: rgba(220,50,50,0.04);
  border-color: rgba(220,50,50,0.1);
}
.expert--dark .segment__stat-icon svg {
  stroke: #FF6B6B;
}
.expert--dark .segment__stat p {
  color: var(--dark-text-secondary);
}

/* Penalty cards */
.expert--dark .penalty-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.expert--dark .penalty-card__title {
  color: var(--text-inverse);
}
.expert--dark .penalty-card__penalty {
  color: #FF6B6B;
}
.expert--dark .penalty-card__desc {
  color: var(--dark-text-muted);
}
.expert--dark .penalty-card__badge {
  color: #FF6B6B;
  background: rgba(220,50,50,0.1);
  border-color: rgba(220,50,50,0.2);
}
.expert--dark .penalty-card--severe {
  border-color: rgba(220,50,50,0.2);
  background: rgba(220,50,50,0.04);
}
.expert--dark .penalty-card--mitigated {
  border-color: rgba(74,154,106,0.2);
}

/* Inline CTA */
.expert--dark .inline-cta {
  background: rgba(255,255,255,0.03);
  border-color: rgba(220,50,50,0.15);
  box-shadow: none;
}
.expert--dark .inline-cta:hover {
  border-color: rgba(220,50,50,0.4);
}
.expert--dark .inline-cta__icon {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.15);
}
.expert--dark .inline-cta__icon svg {
  stroke: #FF6B6B;
}
.expert--dark .inline-cta__title {
  color: var(--text-inverse);
}
.expert--dark .inline-cta__desc {
  color: var(--dark-text-muted);
}
.expert--dark .inline-cta__phone {
  color: #FF6B6B;
}
.expert--dark .inline-cta__phone:hover {
  color: #FF8A8A;
}

/* Inline CTA urgent variant */
.expert--dark .inline-cta--urgent {
  border-color: rgba(220,50,50,0.25);
  background: rgba(220,50,50,0.04);
}

/* Bottom CTA */
.expert--dark .expert__bottom-cta {
  background: rgba(220,50,50,0.04);
  border-color: rgba(220,50,50,0.15);
}
.expert--dark .expert__bottom-cta::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(220,50,50,0.06) 0%, transparent 60%);
}
.expert--dark .expert__bottom-cta-title {
  color: var(--text-inverse);
}
.expert--dark .expert__bottom-cta-desc {
  color: var(--dark-text-secondary);
}
.expert--dark .expert__bottom-cta-footnote {
  color: var(--dark-text-muted);
}
.expert--dark .expert__bottom-cta-actions .btn-accent {
  background: #DC3232;
}
.expert--dark .expert__bottom-cta-actions .btn-accent:hover {
  background: #E04040;
}

/* TOC sidebar */
.expert--dark .toc {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
.expert--dark .toc__title {
  color: #FF6B6B;
  border-bottom-color: rgba(255,255,255,0.06);
}
.expert--dark .toc__list {
  border-left-color: rgba(255,255,255,0.06);
}
.expert--dark .toc__link {
  color: var(--dark-text-muted);
}
.expert--dark .toc__link:hover {
  color: var(--dark-text-secondary);
  border-left-color: rgba(220,50,50,0.3);
}
.expert--dark .toc__link.is-active {
  color: #FF6B6B;
  border-left-color: #DC3232;
}
.expert--dark .toc__cta {
  border-top-color: rgba(255,255,255,0.06);
}
.expert--dark .toc__cta-phone {
  color: #FF6B6B;
}
.expert--dark .toc__cta-phone:hover {
  color: #FF8A8A;
}
.expert--dark .toc__cta-label {
  color: var(--dark-text-muted);
}

/* Sidebar form */
.expert--dark .sidebar-form {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
.expert--dark .sidebar-form__title {
  color: var(--text-inverse);
}
.expert--dark .sidebar-form__input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-inverse);
}
.expert--dark .sidebar-form__input::placeholder {
  color: var(--dark-text-muted);
}
.expert--dark .sidebar-form__input:focus {
  border-color: #DC3232;
  box-shadow: 0 0 0 3px rgba(220,50,50,0.1);
}
.expert--dark .sidebar-form__btn {
  background: #DC3232;
}
.expert--dark .sidebar-form__btn:hover {
  background: #E04040;
}
.expert--dark .sidebar-form__privacy {
  color: var(--dark-text-muted);
}

/* Sidebar urgency */
.expert--dark .sidebar-urgency {
  background: rgba(220,50,50,0.04);
  border-color: rgba(220,50,50,0.12);
}
.expert--dark .sidebar-urgency__text {
  color: var(--dark-text-muted);
}
.expert--dark .sidebar-urgency__text strong {
  color: var(--dark-text-secondary);
}
.expert--dark .sidebar-urgency__phone {
  color: #FF6B6B;
}

/* KK badge */
.expert--dark .kk-badge {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.15);
  color: #FF6B6B;
}

/* ── Large screens (≥1600px) — wyniesione z LARGE SCREENS bloku style.css ── */
@media (min-width: 1600px) {
  .a24-hero {
    min-height: min(90vh, 800px);
    padding: 140px 0 56px;
  }
  .a24s-hero {
    min-height: min(90vh, 800px);
  }
  .a24s-hero > .container {
    padding-top: 180px;
    padding-bottom: 56px;
  }
  .e24-timeline-section { padding: 56px 0; }
}