/* ============================================================================
   RETUSZ — nakładka na assets/style.css

   Zasada: NIE ruszamy HTML-a ani jednego słowa copy. Zmieniamy wyłącznie to,
   jak to wygląda. Wszystko poniżej to nadpisania na istniejące klasy.

   Cztery rzeczy, które robią różnicę między „prosto" a „profesjonalnie":

   1. KRÓJ PISMA. Strona nie miała ANI JEDNEGO webfontu — leciała na systemowym
      Segoe UI. To jest główny powód, dla którego czytała się jak formularz
      urzędowy. Wchodzi para: Source Serif 4 w nagłówkach (powaga kancelarii)
      i Inter w tekście (czytelność). Oba mają pełne latin-ext, więc ł, ą, ę
      i Ł w wersalikach są prawdziwymi znakami kroju, nie podmianką z fallbacku.

   2. JEDEN AKCENT ZAMIAST TRZECH. Było: granat + zielony CTA + niebieskie
      linki. Trzy kolory walczyły ze sobą. Zostaje granat jako fundament
      i BURSZTYN jako jedyny akcent — na przyciskach, liczbach i podkreśleniach.

   3. GŁĘBIA ZAMIAST PŁASKICH PLAM. Hero dostaje warstwę światła i delikatną
      siatkę, karty dostają włoskowate krawędzie zamiast grubych cieni.

   4. CZYTELNOŚĆ 30–55. Stopień bazowy 18 px, interlinia 1,72, linia tekstu
      do 68 znaków, pola klikalne minimum 52 px wysokości.

   Kroje są SERWOWANE Z NASZEGO SERWERA — patrz `assets/kroje.css` i `assets/fonts/`.
   Google wozi latin-ext osobnym plikiem przez unicode-range i przy font-display:swap
   słowo „służebność" mrugało w dwóch krojach. Lokalnie problem znika, a strona
   nie odpytuje obcego serwera przy każdym wejściu.
   ========================================================================== */

:root{
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-nag: "Source Serif 4", Cambria, Georgia, "Times New Roman", serif;

  /* fundament */
  --navy-900:#101B33;
  --navy-800:#1B2C4E;
  --navy-700:#25406E;
  --navy-100:#EBF0F7;

  /* jedyny akcent */
  --bursztyn:#B4762A;
  --bursztyn-jasny:#D9A253;
  --bursztyn-tlo:#FBF5EA;

  --ink:#151A22;
  --ink-soft:#4E5766;
  --paper:#ffffff;
  --paper-soft:#F7F8FA;
  --line:#E3E7EE;
  --line-mocna:#CDD5E0;

  --radius:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(16,27,51,.06);
  --shadow-md:0 4px 16px rgba(16,27,51,.09);
  --shadow-lg:0 18px 44px rgba(16,27,51,.14);

  --maxw:1140px;
  --maxw-tekst:68ch;
}

/* ---------- typografia ---------- */
body{
  font-family:var(--font);
  font-size:18px;
  line-height:1.72;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.003em;
}
h1,h2{
  font-family:var(--font-nag);
  color:var(--ink-mocny);
  letter-spacing:-.012em;
  line-height:1.14;
  font-weight:700;
}
/* h3 bezszeryfowo — male naglowki czytaja sie tak lepiej, a druga grubosc
   szeryfowa to 218 KB plikow, ktore nikomu nie sa potrzebne. */
h3{
  font-family:var(--font);
  color:var(--ink-mocny);
  letter-spacing:-.008em;
  font-weight:600;
}
h1{ font-size:clamp(34px,4.2vw,58px); }
h2{ font-size:clamp(27px,2.8vw,40px); line-height:1.16; }
h3{ font-size:clamp(19px,1.5vw,23px); line-height:1.30; }
p{ margin:0 0 1.15em; }
.lead{
  font-family:var(--font);
  font-size:clamp(19px,1.35vw,21px);
  line-height:1.62;
  color:var(--ink-soft);
  font-weight:400;
}
/* Pogrubienie dostaje granat TYLKO na jasnym tle.
   UWAGA na specyficznosc: w liscie selektorow kazdy liczy sie OSOBNO.
   Poprzednia wersja miala tu `.container > p strong` (0,1,2), co bilo
   wyjatek `.hero strong` (0,1,1) — i pogrubienia w hero oraz w stopce
   wychodzily granatem na granacie, kontrast 1:1, tekst niewidoczny.
   Dlatego regula od jasnego tla siedzi teraz w :where() i ma
   specyficznosc ZERO — nie sciga sie juz z niczym. */
strong,b{ font-weight:700; }
:where(main, section, .container > p) strong,
:where(main, section) b{ color:var(--ink-mocny); }

/* Ciemne tla — pogrubienie musi byc biale. Wypisane jawnie, bo kazde
   z tych miejsc ma granatowe tlo albo gradient. */
.topbar strong, .topbar b,
.hero strong, .hero b,
.hero-osoba strong, .hero-partner strong,
.footer strong, .footer b,
.sticky-cta strong, .sticky-cta b,
.cookie-banner strong, .cookie-banner b{ color:#fff; }

/* nadkreślenie zamiast krzykliwego koloru */
.eyebrow{
  font-family:var(--font);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bursztyn); background:transparent; border:0; padding:0;
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--bursztyn); border-radius:2px;
}

/* ---------- hero: głębia zamiast płaskiej plamy ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(180,118,42,.20), transparent 62%),
    radial-gradient(760px 420px at 12% 108%, rgba(37,64,110,.55), transparent 60%),
    linear-gradient(168deg, #16233E 0%, #101B33 52%, #0C1528 100%);
  padding:clamp(64px,5.6vw,104px) 0 clamp(72px,6vw,112px);
  overflow:hidden;
}
/* włoskowata siatka — widać ją dopiero, gdy się jej szuka, ale zdejmuje wrażenie pustej plamy */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(900px 480px at 68% 12%, #000 0%, transparent 72%);
}
.hero > *{ position:relative; z-index:1; }
.hero h1{ color:#fff; letter-spacing:-.018em; }
.hero .lead{ color:#C3CEDE; max-width:58ch; }
.hero .eyebrow{ color:var(--bursztyn-jasny); }
.hero .eyebrow::before{ background:var(--bursztyn-jasny); }
.hero-trust{ color:#93A3B9; font-size:15px; gap:22px; }
.hero-trust span::before{ color:var(--bursztyn-jasny); }

.hero-osoba{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(2px);
}
.hero-osoba img{ border:2px solid rgba(217,162,83,.55); }

.hero-partner{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius);
}
.hero-partner-label{ color:#93A3B9; letter-spacing:.1em; }
.votum-badge{ background:#fff; border-radius:8px; }

/* ---------- przyciski: jeden akcent, wyraźne pole klikalne ---------- */
.btn{
  font-family:var(--font);
  font-weight:700;
  border-radius:10px;
  min-height:54px;
  padding:15px 28px;
  letter-spacing:-.005em;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
/* Tlo przycisku MUSI byc ciemniejsze od --bursztyn: bialy tekst na #B4762A
   daje 3,77:1, ponizej progu WCAG AA (4,5:1). #9C6521 daje 4,89:1.
   Sam --bursztyn zostaje bez zmian jako kolor akcentu i tekstu na jasnym tle. */
.btn-primary{
  background:#9C6521; color:#fff; border-color:#9C6521;
  box-shadow:0 2px 10px rgba(156,101,33,.28);
}
.btn-primary:hover{
  background:#84541A; border-color:#84541A;
  box-shadow:0 6px 20px rgba(180,118,42,.34);
  transform:translateY(-1px);
}
.btn-secondary{
  background:transparent; border:1.5px solid rgba(255,255,255,.38); color:#fff;
}
.btn-secondary:hover{ background:rgba(255,255,255,.10); border-color:#fff; }
.btn-ghost{
  background:#fff; border:1.5px solid var(--line-mocna); color:var(--ink-mocny);
}
.btn-ghost:hover{ border-color:var(--navy-700); background:var(--paper-soft); }
.btn-lg{ min-height:60px; padding:18px 34px; font-size:18px; }

/* ---------- sekcje: rytm przez światło, nie przez pasy ---------- */
section{ padding:clamp(56px,5vw,92px) 0; }
.section-alt{
  background:var(--paper-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
h2.center{ max-width:24ch; }
.lead.center{ max-width:var(--maxw-tekst); }

/* ---------- karty: włoskowate krawędzie zamiast grubych cieni ---------- */
.card, .service-card, .trust-item, .faq-item{
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  background:#fff;
}
.service-card{ padding:30px 28px; }
.service-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-mocna);
}
.service-card h3{ color:var(--ink-mocny); }
.service-card .icon{
  width:46px; height:46px;
  background:var(--bursztyn-tlo);
  border-radius:10px; padding:9px;
  color:var(--bursztyn);
}

/* numerowane kroki — liczba jako element typograficzny, nie kółko */
.num{
  font-family:var(--font-nag);
  font-size:40px; font-weight:700;
  color:var(--bursztyn); background:transparent;
  width:auto; height:auto; line-height:1;
  display:block; margin-bottom:10px;
}

/* lista z odhaczeniami — bursztynowy znacznik zamiast surowego krzyżyka */
.tick{ color:var(--bursztyn); font-weight:700; }
.check-list li{ margin-bottom:11px; }

/* ---------- FAQ ---------- */
.faq-item{ margin-bottom:10px; overflow:hidden; }
.faq-q{
  font-family:var(--font);
  font-weight:600; font-size:18px; color:var(--ink-mocny);
  padding:20px 22px; min-height:60px;
}
.faq-q:hover{ background:var(--paper-soft); }
.faq-a-inner{ padding:0 22px 22px; color:var(--ink-soft); }

/* ---------- formularz: większe pola, wyraźny fokus ---------- */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select, .field textarea{
  font-family:var(--font);
  font-size:17px;
  min-height:54px;
  border-radius:10px;
  border:1.5px solid var(--line-mocna);
  padding:14px 16px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--bursztyn);
  box-shadow:0 0 0 3px rgba(180,118,42,.16);
  outline:none;
}
.field label{ font-weight:600; font-size:16px; color:var(--ink-mocny); margin-bottom:7px; }
.field-check label{ font-weight:400; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.form-hint{ font-size:15px; color:var(--ink-soft); }
.required-mark{ color:var(--bursztyn); }

/* ---------- tryb ciemny ---------- */

:root[data-theme="dark"]{
  --paper:#0E1420; --paper-soft:#141C2B; --ink:#E9EDF4; --ink-soft:#A5B0C2;
  --line:#222E42; --line-mocna:#33415A; --navy-100:#182338; --bursztyn-tlo:#231B0E;
}
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3{ color:#F2F5FA; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .trust-item, :root[data-theme="dark"] .faq-item{ background:var(--paper-soft); }

/* ---------- telefon ---------- */
@media (max-width:760px){
  body{ font-size:17px; }
  .btn{ min-height:56px; width:100%; justify-content:center; }
  .hero{ padding:48px 0 56px; }
  .num{ font-size:34px; }
}

/* ============================================================================
   ANIMACJE

   Zasada: ruch ma prowadzić wzrok, nie zwracać na siebie uwagi. Strona sprzedaje
   pomoc prawną ludziom, którzy podejrzewają, że ktoś ich naciągnął — cyrk działa
   tu przeciwko nam. Wszystko jest krótkie (200–520 ms), bez odbić i bez skoków.

   ⚠️ Wszystko wyłącza się przy `prefers-reduced-motion`. To nie jest kosmetyka:
   część osób ma po animacjach realne zawroty głowy, a system operacyjny zgłasza
   tę preferencję sam.
   ========================================================================== */

/* ---------- wejście sekcji przy przewijaniu ---------- */
/* CSS-only, bez JS — animation-timeline działa w Chrome i Edge, a tam, gdzie nie
   działa, element po prostu stoi na miejscu w stanie końcowym. Nic się nie psuje. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    .service-card, .trust-item, .faq-item, .card,
    section > .container > h2, section > .container > .lead{
      animation: wejscie linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes wejscie{
      from{ opacity:0; transform:translateY(18px); }
      to  { opacity:1; transform:none; }
    }
  }
}

/* ---------- hero: treść wjeżdża po wczytaniu ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero .eyebrow{ animation:hero-wejscie .5s .04s both cubic-bezier(.22,.7,.3,1); }
  .hero h1      { animation:hero-wejscie .52s .10s both cubic-bezier(.22,.7,.3,1); }
  .hero .lead   { animation:hero-wejscie .52s .17s both cubic-bezier(.22,.7,.3,1); }
  .hero-actions { animation:hero-wejscie .52s .24s both cubic-bezier(.22,.7,.3,1); }
  .hero-trust   { animation:hero-wejscie .52s .30s both cubic-bezier(.22,.7,.3,1); }
  .hero-osoba   { animation:hero-wejscie .58s .20s both cubic-bezier(.22,.7,.3,1); }
  .hero-partner { animation:hero-wejscie .52s .36s both cubic-bezier(.22,.7,.3,1); }
  @keyframes hero-wejscie{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:none; }
  }
}

/* ---------- karty usług: podniesienie i rozjaśnienie krawędzi ---------- */
.service-card{
  transition:transform .22s cubic-bezier(.22,.7,.3,1),
             box-shadow .22s ease, border-color .22s ease;
}
.service-card .icon{ transition:transform .22s cubic-bezier(.22,.7,.3,1), background .22s ease; }
.service-card:hover .icon{ transform:scale(1.06) rotate(-2deg); background:#F5E6CB; }
.service-card .go{
  position:relative; transition:color .18s ease;
}
.service-card .go::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--bursztyn); transition:right .26s cubic-bezier(.22,.7,.3,1);
}
.service-card:hover .go::after{ right:0; }

/* ---------- przyciski: reakcja na dotknięcie, nie skakanie ---------- */
.btn{ position:relative; overflow:hidden; }
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.24) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .55s cubic-bezier(.3,.7,.3,1);
}
.btn-primary:hover::before{ transform:translateX(120%); }
.btn:active{ transform:translateY(1px) scale(.995); }

/* ---------- FAQ: rozwijanie zamiast przeskoku ---------- */
.faq-a{ transition:grid-template-rows .3s cubic-bezier(.22,.7,.3,1); }
.faq-q{ transition:background .18s ease, color .18s ease; }
.faq-q::after{ transition:transform .26s cubic-bezier(.22,.7,.3,1); }

/* ---------- pola formularza ---------- */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select, .field textarea{
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

/* ---------- pełne wyłączenie ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================================
   KARTY ZAUFANIA — wyrównanie

   Problem widoczny na żywej stronie: trzy karty w siatce rozciągały się do
   wysokości najdłuższej, więc pod krótkim tekstem środkowej zostawała pusta
   połowa kafla. Czytało się to jak brakująca treść, a nie jak układ.

   Karty stają teraz na swojej naturalnej wysokości, ze wspólną minimalną,
   żeby rząd nie wyglądał na porwany.
   ========================================================================== */
.trust-grid{ align-items:start; gap:18px; }
.trust-item{ padding:24px 24px 26px; min-height:170px; align-items:flex-start; }
.trust-item .icon{ width:26px; height:26px; color:var(--bursztyn); margin-top:2px; }
.trust-item p, .trust-item > div{ margin:0; }
@media (max-width:820px){ .trust-item{ min-height:0; } }

/* ---------- hero na telefonie: pasek partnera i karta autora ----------
   Zmierzone na 375 px przed poprawka:
     - „Sprawy prowadzi:" zajmowalo 331 z 335 px (display:block rozpychal
       element flex), przez co logo VOTUM spadalo do nastepnego wiersza;
     - awatar + imie + zdanie staly w JEDNYM rzedzie: 56 + 73 + 176 = 333 px,
       imie lamalo sie na dwa wiersze, zdanie na trzy.
   Ponizej 1100 px porzadkujemy oba bloki. Powyzej 1100 px obowiazuje
   uklad kolumnowy z karta po prawej — tego nie ruszamy. */
@media (max-width:1099px){
  .hero-partner{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:10px 14px; padding:12px 14px;
  }
  /* Etykieta ma zajmowac tyle, ile tekst. Wczesniejsza regula z bloku 520 px
     dawala jej `flex:1 1 100%`, czyli cala szerokosc — i logo spadalo nizej. */
  .hero-partner-label{
    flex:0 0 auto; width:auto; font-size:12px; letter-spacing:.06em;
  }
  /* Zmierzone: przy domyslnej wielkosci plakietka ma 221 px i razem
     z etykieta (135) nie miesci sie w 305 px kontenera. Po zejsciu do
     22 px wysokosci obrazka wychodzi ~169 px i calosc siada w jednym wierszu.
     Regula dotyczy WYLACZNIE hero — pasek gorny zostaje bez zmian. */
  .hero-partner .votum-badge{ flex:0 0 auto; padding:5px 10px; }
  /* 20 px, nie 22: na stronie glownej i sluzebnosci kontener jest o 4 px
     wezszy i przy 22 px zostawaly tylko 2 px zapasu — za malo, wiersz sie lamal.
     Teraz zapas wynosi ~15 px na kazdej stronie. */
  .hero-partner .votum-badge img{ height:20px; }

  .hero-osoba{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:6px 14px; padding:16px 16px;
  }
  .hero-osoba img{ flex:0 0 auto; width:60px; height:60px; }
  /* imie w jednym wierszu obok awatara */
  .hero-osoba .imie{ flex:1 1 auto; min-width:0; font-size:17px; }
  /* zdanie o oddzwanianiu schodzi pod spod, na pelna szerokosc */
  .hero-osoba .oddzwania{ flex:1 0 100%; margin:0; font-size:14px; }
  .hero-osoba .oddzwania br{ display:none; }
}