/* ==========================================================================
   Strony dla Medycyny, arkusz wspolny.
   Klasy uzywane na co najmniej dwoch stronach. CSS jednej strony siedzi
   w jej pliku PHP w <style>.
   ========================================================================== */

/* ---------- 1. Tokeny ---------- */
:root {
  --c-primary:      #3B8BD9;
  --c-primary-dark: #2668A8;
  --c-dark:         #14325C;
  --c-light:        #EEF4FB;
  --c-accent:       #F07167;

  --t-xs: .875rem;
  --t-sm: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.75rem;
  --t-xl: 2.5rem;

  --r:    18px;
  --r-sm: 12px;
  --shadow:    0 10px 30px rgba(20, 50, 92, .08);
  --shadow-lg: 0 22px 50px rgba(20, 50, 92, .14);
  --ease: .45s cubic-bezier(.34, 1.56, .64, 1);
  --hdr-h: 78px;
}

/* Dekoracyjne kola, plakietki i makiety celowo wychodza poza swoje sekcje.
   Przy weższych ekranach rozpychaly strone i robily poziome przewijanie,
   wiec przycinamy je na poziomie dokumentu. Uzywamy clip, a nie hidden,
   bo hidden tworzy kontener przewijania i psuje position sticky w naglowku.
   Przewijanie w pionie dziala normalnie, sprawdzone po zmianie. */
html, body { overflow-x: clip; }
html { font-size: 16px; scroll-behavior: smooth; }
@media (max-width: 960px) { html { font-size: 15px; } }
@media (max-width: 600px) { html { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 2. Reset i baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--c-dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }
ul[role="list"], .lista { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.15; }
h1 { font-size: var(--t-xl); line-height: 1.1; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0; }
p + p { margin-top: 1em; }
strong { font-weight: 800; }
.muted { opacity: .75; }
.lead { font-size: var(--t-md); line-height: 1.55; }
.ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--c-dark); color: #fff; padding: .6em 1em;
}
.skip:focus { left: 1em; top: 1em; color: #fff; }

/* ---------- 3. Siatka i sekcje ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 2em; }
.sec { padding-top: 4em; padding-bottom: 4em; }
.sec-light { background: var(--c-light); }
.sec-dark  { background: var(--c-dark); color: #fff; }
.sec-dark a:not(.btn) { color: #fff; }
.sec-head { max-width: 46em; margin-bottom: 2.5em; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { margin-top: .9em; font-size: var(--t-md); opacity: .78; line-height: 1.55; }
.etykieta {
  display: inline-block; font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-primary); margin-bottom: .9em;
}
.sec-dark .etykieta { color: var(--c-accent); }

/* Placeholder zdjecia, dopoki nie ma wygenerowanego pliku */
.foto-ph {
  position: relative; display: grid; place-items: center; text-align: center; padding: 1em;
  background: rgba(59, 139, 217, .16); color: var(--c-dark); font-size: var(--t-xs); font-weight: 700; opacity: .9;
}
.foto-ph::before { content: 'zdjęcie'; position: absolute; top: .8em; left: 1em; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

.grid { display: grid; gap: 1.5em; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 1em; }
  .sec { padding-top: 2em; padding-bottom: 2em; }
  .sec-head { margin-bottom: 1.5em; }
  .grid { gap: 1em; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* ---------- 4. Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .9em 1.7em; border-radius: 999px; border: 2px solid var(--c-primary);
  background: var(--c-primary); color: #fff; font: inherit; font-weight: 800; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.btn:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(38, 104, 168, .25); }
.btn .ico { width: 1.1em; height: 1.1em; }
.btn-ghost { background: transparent; color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary); }
.btn-jasny { background: #fff; border-color: #fff; color: var(--c-dark); }
.btn-jasny:hover { background: var(--c-light); border-color: var(--c-light); color: var(--c-dark); box-shadow: 0 12px 24px rgba(0, 0, 0, .18); }
.btn-accent { background: var(--c-accent); border-color: var(--c-accent); }
.btn-accent:hover { background: #d95a50; border-color: #d95a50; box-shadow: 0 12px 24px rgba(240, 113, 103, .3); }
.btn-sm { padding: .65em 1.3em; font-size: var(--t-xs); }
.btn-lg { padding: 1.05em 2em; font-size: 1.0625rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9em; align-items: center; }
.link-strzalka { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; }
.link-strzalka .ico { width: 1.1em; height: 1.1em; transition: transform .25s; }
.link-strzalka:hover .ico { transform: translateX(4px); }

/* ---------- 5. Naglowek ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20, 50, 92, .08);
  transition: box-shadow .25s;
}
.hdr.scrolled { box-shadow: 0 6px 24px rgba(20, 50, 92, .08); }
.hdr-in {
  max-width: 1180px; margin: 0 auto; padding: 0 2em; height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: 2em;
}
.logo { display: inline-flex; align-items: center; gap: .6em; color: var(--c-dark); font-weight: 400; font-size: 1.2rem; letter-spacing: -.01em; }
.logo strong { font-weight: 800; }
/* Logotyp ma dwie linijki, duze OERO i podpis pod nim, wiec potrzebuje
   kilku pikseli wiecej wysokosci niz poprzedni, jednolinijkowy. */
.logo img { height: 54px; width: auto; }
.logo-znak { width: 2.1em; height: 2.1em; color: var(--c-primary); }
.logo-znak svg { width: 100%; height: 100%; }
.logo-jasne { color: #fff; }
.logo-jasne .logo-znak { color: #fff; }
.ftr .logo img { height: 60px; }
@media (max-width: 600px) { .logo img { height: 42px; } }

.nav { display: flex; align-items: center; gap: .25em; }
.nav > li { position: relative; }
.nav > li > a {
  display: inline-flex; align-items: center; padding: .55em .85em; border-radius: 999px;
  color: var(--c-dark); font-weight: 700; transition: background .2s, color .2s;
}
.nav > li > a:hover, .nav > li > a.act { background: var(--c-light); color: var(--c-primary-dark); }
.nav-cta { margin-left: .6em; }
/* Regula .nav > li > a jest bardziej szczegolowa niz .btn, wiec stan normalny
   i hover przycisku w nawigacji trzeba ustawic osobno. */
.nav-cta .btn { padding: .65em 1.3em; background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 800; transition: transform var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s; }
.nav-cta .btn:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(38, 104, 168, .25); }

.has-drop { display: flex; align-items: center; }
.drop-btn {
  border: 0; background: transparent; padding: .3em; margin-left: -.5em; cursor: pointer;
  color: var(--c-dark); display: inline-flex; border-radius: 50%;
}
.ico-drop { width: 1em; height: 1em; transform: rotate(90deg); transition: transform .25s; }
.has-drop:hover .ico-drop, .has-drop.open .ico-drop { transform: rotate(-90deg); }
.drop {
  position: absolute; top: calc(100% + .6em); left: 0; min-width: 16em; z-index: 10;
  background: #fff; border-radius: var(--r-sm); padding: .6em; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(20, 50, 92, .08);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop, .has-drop.open .drop { opacity: 1; visibility: visible; transform: none; }
.drop a {
  display: flex; align-items: center; gap: .7em; padding: .55em .8em; border-radius: 8px;
  color: var(--c-dark); font-weight: 700; font-size: var(--t-xs);
}
.drop a .ico { color: var(--c-primary); }
.drop a:hover { background: var(--c-light); color: var(--c-primary-dark); }

.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; }
.burger span { display: block; height: 3px; border-radius: 3px; background: var(--c-dark); transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 960px) {
  .hdr-in { padding: 0 1em; height: 66px; }
  :root { --hdr-h: 66px; }
  .burger { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .2em;
    background: #fff; padding: .8em 1em 1.2em; border-bottom: 1px solid rgba(20, 50, 92, .08);
    box-shadow: var(--shadow-lg); max-height: calc(100vh - 66px); overflow-y: auto;
    display: none;
  }
  .nav.open { display: flex; }
  .nav > li > a { display: flex; padding: .7em .9em; }
  .has-drop { flex-wrap: wrap; }
  .has-drop > a { flex: 1; }
  .drop-btn { margin: 0; width: 44px; height: 44px; justify-content: center; align-items: center; }
  .drop {
    position: static; width: 100%; min-width: 0; box-shadow: none; border: 0; padding: 0 0 .4em .6em;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .has-drop.open .drop { display: block; }
  .nav-cta { margin: .6em 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- 6. Hero podstron: jeden uklad dla wszystkich ----------
   Ten sam jezyk co hero strony glownej: jasny gradient, siatka kropek,
   dekoracyjne kola, tekst z lewej, zdjecie w ramce z prawej, puls na dole.
   Markup w hero-podstrony.php. */
.ph { position: relative; overflow: hidden; background: linear-gradient(160deg, #F7FBFF 0%, #EAF3FC 55%, #E2EEFA 100%); padding-top: 3.5em; padding-bottom: 5em; display: grid; align-items: center; }
.ph-siatka { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(20, 50, 92, .1) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 85%); mask-image: linear-gradient(180deg, #000 35%, transparent 85%); }
.ph-kolo { position: absolute; border-radius: 50%; pointer-events: none; }
.ph-kolo-a { width: 38em; height: 38em; right: -12em; top: -18em; background: rgba(59, 139, 217, .10); }
.ph-kolo-b { width: 18em; height: 18em; left: -8em; bottom: -6em; background: rgba(240, 113, 103, .08); }
.ph .wrap { position: relative; width: 100%; }
.ph-in { display: grid; grid-template-columns: 1fr .92fr; gap: 3em; align-items: center; }
.ph-in.ph-sam { grid-template-columns: 1fr; }
.ph-in.ph-sam .ph-tresc { max-width: 42em; }
.ph-nad { display: flex; align-items: center; gap: .8em; font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary-dark); margin-bottom: 1.1em; }
.ph-nad::after { content: ''; flex: 1; max-width: 5em; height: 1px; background: rgba(59, 139, 217, .5); }
.ph h1 { font-size: clamp(2rem, 3.8vw, 2.9rem); line-height: 1.12; margin-bottom: .35em; }
/* Drugi naglowek pod H1, uzywany na podstronach specjalizacji: H1 jest krotkie
   i pod fraze, a tutaj idzie pelne zdanie. */
.ph-h2 { font-size: var(--t-md); line-height: 1.3; font-weight: 700; color: var(--c-primary-dark); margin-bottom: .7em; max-width: 28em; }
.ph .lead { opacity: .82; max-width: 34em; }
.ph .btn-row { margin-top: 1.8em; }
.ph-dodatek { margin-top: 1.8em; }
.ph-foto { position: relative; }
.ph-foto img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.ph-foto::before { content: ''; position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; background: rgba(59, 139, 217, .12); right: -8%; bottom: -10%; z-index: -1; }
.ph-plakietka {
  position: absolute; left: -1.5em; bottom: 1.5em; z-index: 2; display: flex; align-items: center; gap: .8em;
  padding: .85em 1.1em; border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(20, 50, 92, .08); font-size: var(--t-xs); font-weight: 800; line-height: 1.3;
  animation: unos 6s ease-in-out infinite;
}
.ph-plakietka small { display: block; font-weight: 400; opacity: .7; }
.ph-plakietka .karta-ikona { margin: 0; width: 2.3em; height: 2.3em; border-radius: 10px; }
.ph-ekg { position: absolute; left: 0; right: 0; bottom: .6em; width: 100%; height: 60px; pointer-events: none; z-index: 0; }
.ph-ekg path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-ekg .ekg-baza { stroke: rgba(240, 113, 103, .22); }
.ph-ekg .ekg-ruch { stroke: var(--c-accent); stroke-dasharray: 220 2200; stroke-dashoffset: 2420; animation: ekg-plyn 4.5s linear infinite; }
.ph-fakty { display: flex; flex-wrap: wrap; gap: 1.5em 2.5em; }
.ph-fakty strong { display: block; font-size: var(--t-lg); line-height: 1; color: var(--c-primary); }
.ph-fakty span { font-size: var(--t-xs); font-weight: 700; opacity: .75; }
.ph-chipy { display: flex; flex-wrap: wrap; gap: .5em; }
.ph-chipy a { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; border-radius: 999px; background: #fff; border: 1px solid rgba(20, 50, 92, .1); color: var(--c-dark); font-weight: 700; font-size: var(--t-xs); transition: background .2s, color .2s, transform var(--ease); }
.ph-chipy a .ico { color: var(--c-primary); }
.ph-chipy a:hover { background: var(--c-primary); color: #fff; transform: translateY(-3px); }
.ph-chipy a:hover .ico { color: #fff; }
@media (max-width: 960px) {
  .ph-in { grid-template-columns: 1fr; gap: 2em; }
  .ph-foto { max-width: 30em; }
  .ph-plakietka { left: auto; right: 1em; bottom: 1em; }
}
@media (max-width: 600px) { .ph { padding-top: 2em; padding-bottom: 4em; } .ph-ekg { height: 46px; } .ph-plakietka { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .ph-ekg .ekg-ruch, .ph-plakietka { animation: none; } }

/* ---------- 7. Karty i kafelki ---------- */
.karta {
  background: #fff; border-radius: var(--r); padding: 2em; border: 1px solid rgba(20, 50, 92, .08);
  transition: transform var(--ease), box-shadow var(--ease), border-color .25s;
}
.karta:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(59, 139, 217, .3); }
.karta h3 { margin-bottom: .5em; }
.karta p { opacity: .8; }
.karta-ikona {
  width: 3.2em; height: 3.2em; border-radius: 14px; display: grid; place-items: center;
  background: var(--c-light); color: var(--c-primary); margin-bottom: 1.2em;
}
.karta-ikona .ico { width: 1.5em; height: 1.5em; }
.sec-light .karta { border-color: transparent; }

.kafel {
  display: flex; flex-direction: column; gap: .8em; padding: 1.6em; border-radius: var(--r);
  background: #fff; color: var(--c-dark); border: 1px solid rgba(20, 50, 92, .08);
  transition: transform var(--ease), box-shadow var(--ease), border-color .25s;
}
.kafel:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(59, 139, 217, .35); color: var(--c-dark); }
.kafel .karta-ikona { margin: 0; }
.kafel h3 { font-size: var(--t-sm); }
.kafel p { font-size: var(--t-xs); opacity: .75; line-height: 1.5; }
.kafel .link-strzalka { margin-top: auto; font-size: var(--t-xs); }

@media (max-width: 600px) {
  .karta, .kafel { padding: 1em; }
}

/* ---------- 8. Kroki ---------- */
.kroki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; counter-reset: krok; }
.krok { position: relative; padding: 2em; border-radius: var(--r); background: #fff; border: 1px solid rgba(20, 50, 92, .08); }
.krok-nr {
  width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-dark); color: #fff; font-weight: 800; margin-bottom: 1.2em;
}
.krok h3 { margin-bottom: .5em; }
.krok p { opacity: .8; font-size: var(--t-xs); line-height: 1.6; }
.sec-dark .krok { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.sec-dark .krok-nr { background: var(--c-accent); }
.sec-dark .krok p { opacity: .82; }
@media (max-width: 960px) { .kroki { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kroki { grid-template-columns: 1fr; gap: 1em; } .krok { padding: 1em; } }

/* ---------- 9. Lista z ptaszkami ---------- */
.lista-ok { display: grid; gap: .8em; }
.lista-ok li { display: flex; gap: .8em; align-items: flex-start; }
.lista-ok .ico {
  width: 1.6em; height: 1.6em; padding: .3em; border-radius: 50%; margin-top: .1em;
  background: rgba(59, 139, 217, .14); color: var(--c-primary);
}
.sec-dark .lista-ok .ico { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- 10. Realizacje ---------- */
.real-karta {
  display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff;
  border: 1px solid rgba(20, 50, 92, .08); color: var(--c-dark);
  transition: transform var(--ease), box-shadow var(--ease);
}
.real-karta:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--c-dark); }
/* Zrzut strony w ramce przegladarki. Zrzut jest wyzszy niz ramka, a po najechaniu
   przesuwa sie w gore, jakby ktos przewijal strone klienta. */
.real-pasek { display: flex; align-items: center; gap: .4em; padding: .7em 1em; background: #F7FAFE; border-bottom: 1px solid rgba(20, 50, 92, .08); }
.real-pasek span { width: .65em; height: .65em; border-radius: 50%; background: rgba(20, 50, 92, .15); }
.real-pasek span:first-child { background: var(--c-accent); }
.real-pasek i { margin-left: .6em; flex: 1; height: 1.4em; border-radius: 999px; background: #fff; border: 1px solid rgba(20, 50, 92, .1); font-style: normal; font-size: .7rem; line-height: 1.4em; padding: 0 .9em; color: var(--c-dark); opacity: .7; }
/* Zrzut zachowuje wlasne proporcje (bez rozciagania, bez object-fit ktory
   przycina) i jest zakotwiczony do gornej krawedzi. Kadr ma stale proporcje
   i przycina overflow-em, a po najechaniu obrazek przesuwa sie procentowo
   wzgledem wlasnej wysokosci, wiec dziala niezaleznie od realnych wymiarow pliku. */
.real-foto { aspect-ratio: 16 / 9; background: var(--c-light); overflow: hidden; position: relative; }
.real-foto img { width: 100%; height: auto; display: block; object-fit: contain; object-position: top center; transform: translateY(0); transition: transform 2s ease-in-out; }
.real-karta:hover .real-foto img { transform: translateY(-40%); }
.real-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2em; background: linear-gradient(0deg, rgba(255, 255, 255, .75), transparent); pointer-events: none; }
.real-foto-brak {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .3em;
  color: var(--c-dark);
}
.real-foto-brak strong { font-size: var(--t-md); }
.real-foto-brak span { font-size: var(--t-xs); opacity: .7; }
.real-foto-brak::before {
  content: ''; position: absolute; width: 22em; height: 22em; border-radius: 50%; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: rgba(59, 139, 217, .10); z-index: -1;
}
.real-tresc { padding: 1.6em 2em 2em; display: flex; flex-direction: column; gap: .6em; }
.real-branza { font-size: var(--t-xs); font-weight: 800; color: var(--c-primary); text-transform: uppercase; letter-spacing: .05em; }
.real-tresc p { opacity: .8; font-size: var(--t-xs); line-height: 1.6; }
.real-opinia {
  margin-top: .6em; padding: .9em 1.1em; border-radius: var(--r-sm); background: var(--c-light);
  font-style: italic; font-size: var(--t-xs); opacity: 1;
}
.real-opinia::before { content: '\201E'; }
.real-opinia::after  { content: '\201D'; }
.real-domena { margin-top: auto; padding-top: .8em; font-weight: 800; display: inline-flex; align-items: center; gap: .4em; color: var(--c-primary); }
@media (max-width: 600px) { .real-tresc { padding: 1em; } }
/* Siatka kart realizacji na stronie glownej i na stronie o nas */
.real-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
@media (max-width: 960px) { .real-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .real-2 { grid-template-columns: 1fr; } }

/* ---------- 11. FAQ ---------- */
.faq { max-width: 52em; margin: 0 auto; display: grid; gap: .8em; }
.faq-item { background: #fff; border-radius: var(--r-sm); border: 1px solid rgba(20, 50, 92, .1); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1em;
  padding: 1.1em 1.5em; border: 0; background: transparent; text-align: left; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--c-dark); font-size: var(--t-sm);
}
.faq-q::after {
  content: ''; flex: 0 0 auto; width: .7em; height: .7em; border-right: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary);
  transform: rotate(45deg); transition: transform .3s; margin-top: -.3em;
}
.faq-item.open .faq-q::after { transform: rotate(-135deg); margin-top: .3em; }
.faq-a { height: 0; overflow: hidden; transition: height .35s ease; }
.faq-a-in { padding: 0 1.5em 1.3em; opacity: .85; line-height: 1.65; }
html:not(.js) .faq-a { height: auto; }
html:not(.js) .faq-a-in { padding-top: 0; }
.faq-item.open { border-color: rgba(59, 139, 217, .4); }
.sec-light .faq-item { border-color: transparent; }
@media (max-width: 600px) { .faq-q { padding: 1em; } .faq-a-in { padding: 0 1em 1em; } }

/* FAQ w dwoch kolumnach: z lewej przyklejony wstep i kontakt, z prawej pytania */
.faq-uklad { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4em; align-items: start; }
.faq-uklad .faq { max-width: none; margin: 0; }
.faq-bok { position: sticky; top: calc(var(--hdr-h) + 2em); }
.faq-bok h2 { margin-bottom: .6em; }
.faq-bok > p { opacity: .8; }
.faq-bok-karta { margin-top: 2em; padding: 1.6em; border-radius: var(--r); background: var(--c-dark); color: #fff; position: relative; overflow: hidden; }
.faq-bok-karta::before { content: ''; position: absolute; width: 14em; height: 14em; border-radius: 50%; right: -6em; top: -6em; background: rgba(59, 139, 217, .25); }
.faq-bok-karta > * { position: relative; }
.faq-bok-karta strong { display: block; font-size: var(--t-md); margin-bottom: .4em; }
.faq-bok-karta p { font-size: var(--t-xs); opacity: .85; margin-bottom: 1.2em; }
.faq-bok-karta .btn-row { gap: .6em; }
@media (max-width: 960px) { .faq-uklad { grid-template-columns: 1fr; gap: 2em; } .faq-bok { position: static; } }
@media (max-width: 600px) { .faq-bok-karta { padding: 1em; } }

/* ---------- 12. Pasek CTA ---------- */
.cta {
  position: relative; overflow: hidden; background: var(--c-dark); color: #fff;
  padding-top: 4em; padding-bottom: 4em;
}
.cta::before, .cta::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.cta::before { width: 30em; height: 30em; right: -10em; top: -14em; background: rgba(59, 139, 217, .22); }
.cta::after  { width: 16em; height: 16em; left: -6em; bottom: -8em; background: rgba(240, 113, 103, .18); }
.cta .wrap { position: relative; }
.cta-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3em; align-items: center; }
.cta h2 { font-size: var(--t-xl); line-height: 1.1; margin-bottom: .5em; }
.cta p { opacity: .85; font-size: var(--t-md); max-width: 30em; }
.cta-kontakt { display: grid; gap: 1em; }
.cta-kontakt a {
  display: flex; align-items: center; gap: 1em; padding: 1.1em 1.4em; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 800;
  transition: transform var(--ease), background .25s;
}
.cta-kontakt a:hover { background: rgba(255, 255, 255, .14); transform: translateY(-4px); }
.cta-kontakt .karta-ikona { margin: 0; width: 2.6em; height: 2.6em; background: var(--c-primary); color: #fff; border-radius: 10px; }
.cta-kontakt small { display: block; font-weight: 400; opacity: .75; font-size: var(--t-xs); }
@media (max-width: 960px) { .cta-in { grid-template-columns: 1fr; gap: 2em; } .cta h2 { font-size: var(--t-lg); } }
@media (max-width: 600px) { .cta { padding-top: 2em; padding-bottom: 2em; } }

/* ---------- 13. Stopka ---------- */
.ftr { background: var(--c-dark); color: #fff; padding-top: 4em; }
.ftr a { color: rgba(255, 255, 255, .8); }
.ftr a:hover { color: #fff; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3em; padding-bottom: 3em; }
.ftr-brand-desc { margin: 1.2em 0 1.5em; opacity: .78; font-size: var(--t-xs); line-height: 1.7; max-width: 26em; }
/* Lista kontaktowa nie ma atrybutu role="list", wiec nie lapal jej reset
   list u gory pliku i zostawala z domyslnym wcieciem przegladarki. */
.ftr-contact { display: grid; gap: .6em; font-size: var(--t-xs); list-style: none; margin: 0; padding: 0; }
.ftr-contact li { display: flex; align-items: center; gap: .7em; }
.ftr-contact .ico { width: 1.1em; height: 1.1em; color: var(--c-primary); }
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: var(--t-xs); }
.ftr-col-title { font-weight: 800; margin-bottom: 1em; letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-xs); color: var(--c-accent); }
.ftr-cta p { opacity: .8; font-size: var(--t-xs); line-height: 1.7; margin-bottom: 1.2em; }
.ftr-wiecej a { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: #fff; }
.ftr-wiecej .ico { width: 1em; height: 1em; color: var(--c-accent); transition: transform .25s; }
.ftr-wiecej a:hover .ico { transform: translateX(4px); }
.ftr-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.3em 0; font-size: var(--t-xs); opacity: .8; }
.ftr-bottom-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em; align-items: center; }
.ftr-ck-link { background: none; border: 0; color: rgba(255, 255, 255, .8); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.ftr-ck-link:hover { color: #fff; }
@media (max-width: 960px) { .ftr-grid { grid-template-columns: 1fr 1fr; gap: 2em; } }
@media (max-width: 600px) {
  .ftr { padding-top: 2em; }
  .ftr-grid { grid-template-columns: 1fr; gap: 1.5em; padding-bottom: 1.5em; }
  /* Przy jednej kolumnie stopki listy rozciagaja sie na cala szerokosc,
     a czcionka jest mala, wiec mieszcza sie w dwoch kolumnach i stopka
     robi sie o polowe krotsza. */
  .ftr-col ul { grid-template-columns: 1fr 1fr; gap: .6em 1.2em; align-items: start; }
  .ftr-col ul .ftr-wiecej { grid-column: 1 / -1; }
}

/* ---------- 14. Pasek telefonu na mobile ---------- */
.call-bar {
  position: fixed; left: 1em; right: 1em; bottom: 1em; z-index: 90;
  display: none; align-items: center; justify-content: center; gap: .6em;
  padding: .9em 1.2em; border-radius: 999px; background: var(--c-accent); color: #fff; font-weight: 800;
  box-shadow: 0 12px 30px rgba(240, 113, 103, .4);
  transform: translateY(150%); transition: transform .35s;
}
.call-bar .ico { width: 1.2em; height: 1.2em; }
@media (max-width: 960px) {
  .call-bar { display: flex; }
  .call-bar.call-bar-on { transform: none; }
}

/* ---------- 15. Baner cookies ---------- */
.ck-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 1px solid rgba(20, 50, 92, .12); box-shadow: 0 -10px 40px rgba(20, 50, 92, .12);
  transform: translateY(100%); transition: transform .35s;
}
.ck-bar.ck-open { transform: none; }
.ck-in { display: flex; align-items: center; justify-content: space-between; gap: 2em; padding-top: 1.2em; padding-bottom: 1.2em; }
.ck-title { font-weight: 800; margin-bottom: .3em; }
.ck-desc { font-size: var(--t-xs); opacity: .8; line-height: 1.6; max-width: 56em; }
.ck-btns { display: flex; gap: .7em; flex: 0 0 auto; }
.ck-btn { padding: .7em 1.3em; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; border: 2px solid var(--c-primary); }
.ck-btn-ok { background: var(--c-primary); color: #fff; }
.ck-btn-deny { background: transparent; color: var(--c-primary); }
.ck-btn:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
@media (max-width: 960px) { .ck-in { flex-direction: column; align-items: stretch; gap: 1em; } .ck-btns { justify-content: flex-end; } }
@media (max-width: 600px) { .ck-btns { flex-direction: column; } .ck-btn { width: 100%; } }

/* ---------- 16. Formularze ---------- */
.form-alert { background: #fdecea; color: #8a1c14; padding: 1em 0; font-weight: 700; }
.pole { display: grid; gap: .4em; }
.pole label { font-weight: 800; font-size: var(--t-xs); }
.pole input, .pole textarea, .pole select {
  width: 100%; padding: .85em 1em; border-radius: var(--r-sm); border: 2px solid rgba(20, 50, 92, .14);
  font: inherit; color: var(--c-dark); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(59, 139, 217, .18); }
.pole textarea { min-height: 9em; resize: vertical; }
.form-zgoda { display: flex; gap: .7em; align-items: flex-start; font-size: var(--t-xs); opacity: .85; }
.form-zgoda input { margin-top: .3em; }
.form-ok { padding: 2em; border-radius: var(--r); background: var(--c-light); text-align: center; }
.form-ok h3 { margin-bottom: .4em; }

/* ---------- 17. Tasma specjalizacji (przesuwajacy sie pas) ---------- */
.tasma { overflow: hidden; padding: 1.2em 0; background: #fff; border-top: 1px solid rgba(20, 50, 92, .08); border-bottom: 1px solid rgba(20, 50, 92, .08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tasma-in { display: flex; gap: .8em; width: max-content; animation: tasma 45s linear infinite; }
.tasma:hover .tasma-in { animation-play-state: paused; }
.tasma a { display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.1em; border-radius: 999px; background: var(--c-light); color: var(--c-dark); font-weight: 700; font-size: var(--t-xs); white-space: nowrap; transition: background .2s, color .2s; }
.tasma a .ico { color: var(--c-primary); }
.tasma a:hover { background: var(--c-primary); color: #fff; }
.tasma a:hover .ico { color: #fff; }
@keyframes tasma { to { transform: translateX(-50%); } }

/* ---------- 18. Spis w rzedach (zamiast kafelkow) ---------- */
.spis-uklad { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4em; align-items: start; }
.spis-lewa { position: sticky; top: calc(var(--hdr-h) + 2em); }
.spis-lewa h2 { margin-bottom: .6em; }
.spis-lewa p { opacity: .8; }
.spis-lewa .btn { margin-top: 1.6em; }
.spis { border-top: 1px solid rgba(20, 50, 92, .12); }
.spis-rzad {
  display: grid; grid-template-columns: 2.6em 3em 1fr auto; gap: 1.2em; align-items: center;
  padding: 1.15em 0; border-bottom: 1px solid rgba(20, 50, 92, .12); color: var(--c-dark);
  transition: padding-left .35s ease, background .25s;
}
.spis-rzad:hover { padding-left: .8em; background: rgba(238, 244, 251, .7); color: var(--c-dark); }
.spis-nr { font-size: var(--t-xs); font-weight: 800; color: var(--c-primary); opacity: .8; }
.spis-rzad .karta-ikona { margin: 0; width: 3em; height: 3em; border-radius: 12px; transition: background .25s, color .25s; }
.spis-rzad:hover .karta-ikona { background: var(--c-primary); color: #fff; }
.spis-rzad h3 { font-size: var(--t-sm); margin-bottom: .15em; }
.spis-rzad p { font-size: var(--t-xs); opacity: .75; line-height: 1.45; }
.spis-rzad .ico-strz { width: 1.3em; height: 1.3em; color: var(--c-primary); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .3s; }
.spis-rzad:hover .ico-strz { opacity: 1; transform: none; }
@media (max-width: 960px) { .spis-uklad { grid-template-columns: 1fr; gap: 2em; } .spis-lewa { position: static; } }
@media (max-width: 600px) { .spis-rzad { grid-template-columns: 2.6em 1fr auto; gap: .8em; } .spis-nr { display: none; } .spis-rzad .ico-strz { opacity: 1; transform: none; } }

/* ---------- 18b. Zakladki specjalizacji (radio + CSS, bez JS) ---------- */
/* Inputy leza bezposrednio w .zak, a reguly :checked dla kazdej specjalizacji
   generuje PHP w pliku strony (petla po $SPECJALIZACJE). */
.zak { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: stretch; }
.zak > input { position: absolute; opacity: 0; width: 0; height: 0; }
.zak-lista { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; align-content: center; }
.zak-lista label {
  display: flex; align-items: center; gap: .8em; padding: .75em .9em; border-radius: 12px; cursor: pointer;
  font-weight: 800; color: var(--c-dark); font-size: var(--t-xs); transition: background .25s, color .25s, transform .3s;
}
.zak-lista label .karta-ikona { margin: 0; width: 2.4em; height: 2.4em; border-radius: 10px; flex: 0 0 auto; transition: background .25s, color .25s; }
.zak-lista label .ico-strz { margin-left: auto; width: 1.2em; height: 1.2em; opacity: 0; transition: opacity .25s; }
.zak-lista label:hover { background: var(--c-light); transform: translateX(4px); }
.zak-lista label.act { background: var(--c-dark); color: #fff; transform: translateX(6px); }
.zak-lista label.act .karta-ikona { background: var(--c-primary); color: #fff; }
.zak-lista label.act .ico-strz { opacity: 1; }
.zak-panel { position: relative; }
.zak-tresc { display: none; position: relative; height: 100%; padding: 2.5em; border-radius: var(--r); background: var(--c-light); overflow: hidden; animation: zak-wjazd .45s ease both; }
.zak-tresc.act { display: block; }
.zak-tresc::before { content: ''; position: absolute; width: 18em; height: 18em; border-radius: 50%; right: -7em; top: -7em; background: rgba(59, 139, 217, .14); }
.zak-tresc > * { position: relative; }
.zak-nr { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--c-primary); opacity: .25; position: absolute; right: 1.5rem; bottom: 1rem; }
.zak-tresc .karta-ikona { width: 3.6em; height: 3.6em; background: #fff; }
.zak-tresc .karta-ikona .ico { width: 1.8em; height: 1.8em; }
.zak-tresc h3 { font-size: var(--t-lg); line-height: 1.15; margin-bottom: .5em; }
.zak-tresc > p { opacity: .82; margin-bottom: 1.4em; }
.zak-tresc h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-primary-dark); margin-bottom: .8em; }
.zak-tresc .lista-ok { margin-bottom: 1.8em; }
.zak-tresc .lista-ok .ico { background: #fff; }
@keyframes zak-wjazd { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .zak { grid-template-columns: 1fr; gap: 1.5em; }
  .zak-lista label:hover, .zak-lista label.act { transform: none; }
}
/* Na telefonie lista zostaje dwukolumnowa, bo w jednej kolumnie pietnascie
   specjalizacji rozciagalo sie na kilka ekranow i panel z trescia uciekal
   poza widok. Etykiety sa krotkie, wiec miesci sie po dwie w rzedzie. */
@media (max-width: 600px) {
  .zak-lista { grid-template-columns: 1fr 1fr; gap: .35em; }
  .zak-lista label { padding: .6em .7em; gap: .5em; font-size: var(--t-xs); }
  .zak-lista label .karta-ikona { width: 1.9em; height: 1.9em; border-radius: 8px; }
  .zak-lista label .ico-strz { display: none; }
  .zak-tresc { padding: 1em; }
}

/* ---------- 19. Zygzak zdjecie i tekst ---------- */
.zyg { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: center; }
.zyg + .zyg { margin-top: 5em; }
.zyg:nth-child(even) .zyg-foto { order: 2; }
.zyg-foto { position: relative; }
.zyg-foto img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.zyg-foto::before { content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(59, 139, 217, .12); z-index: -1; left: -12%; top: -12%; }
.zyg:nth-child(even) .zyg-foto::before { left: auto; right: -12%; top: auto; bottom: -12%; background: rgba(240, 113, 103, .12); }
.zyg-plakietka {
  position: absolute; right: -1.5em; bottom: 2em; display: flex; align-items: center; gap: .8em; padding: .9em 1.1em; border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-lg); border: 1px solid rgba(20, 50, 92, .08);
  font-size: var(--t-xs); font-weight: 800; line-height: 1.3; animation: unos 6s ease-in-out infinite;
}
.zyg:nth-child(even) .zyg-plakietka { right: auto; left: -1.5em; }
.zyg-plakietka small { display: block; font-weight: 400; opacity: .7; }
.zyg-plakietka .karta-ikona { margin: 0; width: 2.4em; height: 2.4em; border-radius: 10px; }
.zyg h2, .zyg h3 { font-size: var(--t-lg); line-height: 1.15; margin-bottom: .6em; }
.zyg-tresc > p { opacity: .8; }
.zyg .lista-ok { margin-top: 1.4em; }
.zyg .link-strzalka { margin-top: 1.4em; }
@keyframes unos { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 960px) {
  .zyg { grid-template-columns: 1fr; gap: 2em; }
  .zyg + .zyg { margin-top: 3em; }
  .zyg:nth-child(even) .zyg-foto { order: 0; }
  .zyg-plakietka, .zyg:nth-child(even) .zyg-plakietka { right: 1em; left: auto; bottom: 1em; }
  /* Dekoracyjne kolo przy parzystych blokach wychodzilo poza prawa krawedz
     i rozpychalo cala strone. Na wezszych ekranach idzie w lewo, gdzie
     nadmiar nie tworzy poziomego przewijania. */
  .zyg:nth-child(even) .zyg-foto::before { left: -12%; right: auto; top: -12%; bottom: auto; }
}

/* ---------- 19b. Dwie kolumny tekst i blok ---------- */
.dlaczego { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4em; align-items: center; }
.dlaczego h2 { margin-bottom: .6em; }
@media (max-width: 960px) { .dlaczego { grid-template-columns: 1fr; gap: 2.5em; } }

/* ---------- 20. Liczby ---------- */
.liczby { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5em 3em; padding: 2.5em; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
.liczby strong { display: block; font-size: 3.4rem; line-height: 1; letter-spacing: -.02em; color: var(--c-accent); }
.liczby span { display: block; margin-top: .4em; font-weight: 800; }
.liczby p { font-size: var(--t-xs); opacity: .78; margin-top: .3em; line-height: 1.5; }
@media (max-width: 600px) { .liczby { gap: 1.5em; padding: 1em; } .liczby strong { font-size: 2.6rem; } }

/* ---------- 21. Os procesu ---------- */
.os { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; padding-top: 2.4em; }
.os::before { content: ''; position: absolute; left: 0; right: 0; top: .95em; height: 3px; background: rgba(20, 50, 92, .12); border-radius: 3px; }
.os::after { content: ''; position: absolute; left: 0; top: .95em; height: 3px; width: 0; background: var(--c-primary); border-radius: 3px; transition: width 2.2s cubic-bezier(.4, 0, .2, 1); }
.reveal.is-visible .os::after, html:not(.js) .os::after { width: 100%; }
.os-krok { position: relative; }
.os-krok::before {
  content: ''; position: absolute; left: 0; top: -2.4em; width: 2em; height: 2em; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-primary); box-sizing: border-box;
}
.os-krok::after { content: ''; position: absolute; left: .6em; top: -1.8em; width: .8em; height: .8em; border-radius: 50%; background: var(--c-primary); transform: scale(0); transition: transform .4s var(--ease); }
.reveal.is-visible .os-krok::after, html:not(.js) .os-krok::after { transform: scale(1); }
.os-krok:nth-child(2)::after { transition-delay: .5s; }
.os-krok:nth-child(3)::after { transition-delay: 1s; }
.os-krok:nth-child(4)::after { transition-delay: 1.5s; }
.os-nr { font-size: var(--t-xs); font-weight: 800; color: var(--c-primary); letter-spacing: .08em; margin-bottom: .5em; }
.os-krok h3 { margin-bottom: .5em; }
.os-krok p { font-size: var(--t-xs); opacity: .8; line-height: 1.6; }
@media (max-width: 960px) { .os { grid-template-columns: repeat(2, 1fr); } .os::before, .os::after { display: none; } .os-krok::before, .os-krok::after { display: none; } .os { padding-top: 0; } }
@media (max-width: 600px) { .os { grid-template-columns: 1fr; gap: 1.5em; } }

/* ---------- 22. Cytat ---------- */
.cytat { position: relative; max-width: 50em; margin: 0 auto; text-align: center; padding: 3.2em 2.5em 2.2em; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid rgba(20, 50, 92, .08); }
.cytat::before { content: '\201E'; position: absolute; left: 50%; top: -.55em; transform: translateX(-50%); font-size: 5rem; line-height: 1; color: var(--c-accent); font-weight: 800; background: #fff; padding: 0 .2em; border-radius: 50%; }
.cytat p { font-size: var(--t-md); line-height: 1.5; font-weight: 700; }
.cytat footer { margin-top: 1.2em; font-size: var(--t-xs); opacity: .75; }
@media (max-width: 600px) { .cytat { padding: 2.4em 1em 1.5em; } }

/* ---------- 23. Uklad kontaktu z formularzem ---------- */
.kontakt-uklad { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4em; align-items: start; }
.kontakt-info h2 { margin-bottom: .6em; }
.kontakt-info > p { opacity: .82; }
.kontakt-lista { display: grid; gap: 1em; margin-top: 2em; }
.kontakt-lista a, .kontakt-lista li { display: flex; align-items: center; gap: 1em; color: inherit; font-weight: 800; }
.kontakt-lista small { display: block; font-weight: 400; opacity: .72; font-size: var(--t-xs); }
.kontakt-lista .karta-ikona { margin: 0; width: 2.8em; height: 2.8em; border-radius: 12px; }
.sec-dark .kontakt-lista .karta-ikona { background: rgba(255, 255, 255, .12); color: #fff; }
.formularz { background: #fff; color: var(--c-dark); border-radius: var(--r); padding: 2em; box-shadow: var(--shadow-lg); display: grid; gap: 1.2em; }
.formularz .pola-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.sec-dark .formularz a:not(.btn), .formularz a { color: var(--c-primary); text-decoration: underline; }
.formularz .btn { justify-self: start; }
.formularz-note { font-size: var(--t-xs); opacity: .7; }
.pole-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 960px) { .kontakt-uklad { grid-template-columns: 1fr; gap: 2em; } }
@media (max-width: 600px) { .formularz { padding: 1em; } .formularz .pola-2 { grid-template-columns: 1fr; } .formularz .btn { justify-self: stretch; } }

/* ---------- 24. Akcenty z hero powtarzane na stronie ---------- */
/* Sekcja z akcentami musi miec position: relative, a tresc z-index nad dekoracja. */
.sec-akcent { position: relative; overflow: hidden; }
.sec-akcent > .wrap { position: relative; z-index: 1; }
.siatka { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(20, 50, 92, .12) 1px, transparent 1px); background-size: 28px 28px; }
.siatka-gora { -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%); }
.siatka-dol { -webkit-mask-image: linear-gradient(0deg, #000, transparent 55%); mask-image: linear-gradient(0deg, #000, transparent 55%); }
.sec-dark .siatka { background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); }
.kolo-dek { position: absolute; border-radius: 50%; pointer-events: none; border: 1px dashed rgba(59, 139, 217, .4); animation: kolo-obrot 60s linear infinite; }
.kolo-dek::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: rgba(59, 139, 217, .10); }
.sec-dark .kolo-dek { border-color: rgba(255, 255, 255, .25); }
.sec-dark .kolo-dek::before { background: rgba(59, 139, 217, .18); }
@keyframes kolo-obrot { to { transform: rotate(360deg); } }

/* Pas EKG jako separator miedzy sekcjami, ten sam puls co w hero */
.ekg-pas { position: relative; height: 70px; overflow: hidden; }
.ekg-pas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ekg-pas path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ekg-pas .ekg-baza { stroke: rgba(240, 113, 103, .22); }
.ekg-pas .ekg-ruch { stroke: var(--c-accent); stroke-dasharray: 220 2200; stroke-dashoffset: 2420; animation: ekg-plyn 4.5s linear infinite; }
.ekg-pas-dark { background: var(--c-dark); }
.ekg-pas-light { background: var(--c-light); }
@keyframes ekg-plyn { to { stroke-dashoffset: 0; } }

/* ---------- 25. Porownanie dwoch kolumn ---------- */
.porownanie { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); }
.porownanie > div { padding: 1.2em 1.5em; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: var(--t-xs); line-height: 1.5; }
.porownanie > div:nth-last-child(-n+3) { border-bottom: 0; }
.porownanie .por-naglowek { font-weight: 800; font-size: var(--t-sm); background: rgba(255, 255, 255, .06); }
.porownanie .por-temat { font-weight: 800; font-size: var(--t-sm); }
.porownanie .por-zwykla { opacity: .7; }
.porownanie .por-nasza { background: rgba(59, 139, 217, .16); position: relative; }
.porownanie .por-nasza::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-accent); }
/* Na jasnej sekcji tabela musi sie odciac od tla, wiec dostaje biala plyte,
   wyrazna ramke i cien. Bez tego zlewa sie z sekcja i wyglada plasko. */
.sec:not(.sec-dark) .porownanie { background: #fff; border-color: rgba(20, 50, 92, .12); box-shadow: var(--shadow-lg); }
.sec:not(.sec-dark) .porownanie > div { border-bottom-color: rgba(20, 50, 92, .08); }
.sec:not(.sec-dark) .porownanie .por-naglowek { background: var(--c-light); }
.sec:not(.sec-dark) .porownanie .por-nasza { background: rgba(59, 139, 217, .08); }
.sec:not(.sec-dark) .porownanie .por-nasza.por-naglowek { background: var(--c-primary); color: #fff; }
.sec:not(.sec-dark) .porownanie .por-zwykla { opacity: .78; }
.porownanie .por-nasza.por-naglowek { background: var(--c-primary); }
.porownanie .por-nasza.por-naglowek::before { display: none; }
@media (max-width: 960px) {
  .porownanie { grid-template-columns: 1fr; }
  .porownanie > div { border-bottom: 1px solid rgba(255, 255, 255, .12) !important; }
  .porownanie .por-naglowek { display: none; }
  .porownanie .por-temat { padding-bottom: .4em; border-bottom: 0 !important; padding-top: 1.4em; }
  /* Etykiety kolumn bierzemy z data-etykieta, bo ta sama tabela stoi na kilku
     stronach z roznymi kolumnami. Naglowek wiersza wstawiamy PRZED trescia. */
  .porownanie .por-zwykla::before,
  .porownanie .por-nasza::before {
    content: attr(data-etykieta); display: block; font-weight: 800; opacity: 1;
    position: static; width: auto; height: auto; background: none; margin-bottom: .2em;
  }
  .porownanie .por-zwykla { border-bottom: 0 !important; padding-top: 0; padding-bottom: .4em; }
  .porownanie .por-nasza { padding-top: .6em; }
}
@media (max-width: 600px) { .porownanie > div { padding: .8em 1em; } }

/* ---------- 26. Blog: lista i wpis ---------- */
.blog-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
.blog-karta { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid rgba(20, 50, 92, .08); color: var(--c-dark); transition: transform var(--ease), box-shadow var(--ease); }
.blog-karta:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--c-dark); }
.blog-karta-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-light); }
.blog-karta-foto img, .blog-karta-foto .foto-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.blog-karta:hover .blog-karta-foto img { transform: scale(1.05); }
.blog-karta-tresc { padding: 1.5em 1.8em 1.8em; display: flex; flex-direction: column; gap: .6em; flex: 1; }
.blog-karta-data { font-size: var(--t-xs); font-weight: 800; color: var(--c-primary); }
.blog-karta h3 { font-size: var(--t-md); line-height: 1.25; }
.blog-karta p { font-size: var(--t-xs); opacity: .78; line-height: 1.6; }
.blog-karta .link-strzalka { margin-top: auto; padding-top: .6em; font-size: var(--t-xs); }
.blog-wyroz { display: grid; grid-template-columns: 1.15fr .85fr; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid rgba(20, 50, 92, .08); color: var(--c-dark); box-shadow: var(--shadow); transition: transform var(--ease), box-shadow var(--ease); }
.blog-wyroz:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--c-dark); }
.blog-wyroz .blog-karta-foto { aspect-ratio: auto; min-height: 20em; }
.blog-wyroz .blog-karta-tresc { padding: 2.5em; justify-content: center; }
.blog-wyroz h2, .blog-wyroz h3 { font-size: var(--t-lg); line-height: 1.15; }
.blog-wyroz p { font-size: var(--t-sm); }
@media (max-width: 960px) { .blog-lista { grid-template-columns: 1fr 1fr; } .blog-wyroz { grid-template-columns: 1fr; } .blog-wyroz .blog-karta-foto { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 600px) { .blog-lista { grid-template-columns: 1fr; } .blog-karta-tresc, .blog-wyroz .blog-karta-tresc { padding: 1em; } }

.wpis-hero { max-width: 46em; }
.wpis-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: .5em; }
.wpis-meta { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.4em; font-size: var(--t-xs); font-weight: 700; opacity: .75; }
.wpis-meta .ico { width: 1.1em; height: 1.1em; color: var(--c-primary); }
.wpis-foto { margin-top: -3em; position: relative; z-index: 2; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.wpis-foto img { width: 100%; height: auto; }
.wpis-uklad { display: grid; grid-template-columns: 17em 1fr; gap: 4em; align-items: start; }
.wpis-bok { position: sticky; top: calc(var(--hdr-h) + 1.5em); display: grid; gap: 1.5em; }
.wpis-spis { padding: 1.4em 1.5em; border-radius: var(--r-sm); background: var(--c-light); }
.wpis-spis-tytul { font-weight: 800; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-primary-dark); margin-bottom: .8em; }
.wpis-spis ol { margin: 0; padding-left: 1.2em; display: grid; gap: .45em; font-size: var(--t-xs); }
.wpis-spis a { color: var(--c-dark); font-weight: 700; }
.wpis-spis a:hover { color: var(--c-primary-dark); }
.wpis-bok .faq-bok-karta { margin-top: 0; }
.wpis-tresc { max-width: 44em; font-size: 1.0625rem; }
.wpis-tresc h2 { font-size: var(--t-lg); line-height: 1.15; margin: 1.8em 0 .7em; scroll-margin-top: calc(var(--hdr-h) + 1em); }
.wpis-tresc h2:first-child { margin-top: 0; }
.wpis-tresc p { margin: 0 0 1em; line-height: 1.7; }
.wpis-tresc .lista-ok { margin: 0 0 1.4em; }
.wpis-tresc .faq { margin-top: 1em; }
.wpis-podsumowanie { margin-top: 2em; padding: 1.6em 1.8em; border-radius: var(--r-sm); background: var(--c-light); border-left: 4px solid var(--c-accent); }
.wpis-podsumowanie strong { display: block; margin-bottom: .4em; }
.wpis-podsumowanie p { margin: 0; }
@media (max-width: 960px) { .wpis-uklad { grid-template-columns: 1fr; gap: 2em; } .wpis-bok { position: static; } .wpis-foto { margin-top: 0; } }
@media (max-width: 600px) { .wpis-spis { padding: 1em; } .wpis-podsumowanie { padding: 1em; } }

/* ---------- 26b. Dokumenty: polityka prywatnosci i regulamin ---------- */
.dok-uklad { display: grid; grid-template-columns: 17em 1fr; gap: 4em; align-items: start; }
.dok-spis { position: sticky; top: calc(var(--hdr-h) + 1.5em); padding: 1.4em 1.5em; border-radius: var(--r-sm); background: var(--c-light); }
.dok-spis ol { margin: 0; padding-left: 1.2em; display: grid; gap: .45em; font-size: var(--t-xs); }
.dok-spis a { color: var(--c-dark); font-weight: 700; }
.dok-spis a:hover { color: var(--c-primary-dark); }
.dok-tresc { max-width: 44em; }
.dok-tresc h2 { font-size: var(--t-md); line-height: 1.25; margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--hdr-h) + 1em); }
.dok-tresc h2:first-of-type { margin-top: 0; }
.dok-tresc p { margin: 0 0 .9em; line-height: 1.7; opacity: .86; }
.dok-data { font-size: var(--t-xs); font-weight: 700; opacity: .7; padding-bottom: 1.4em; border-bottom: 1px solid rgba(20, 50, 92, .12); }
@media (max-width: 960px) { .dok-uklad { grid-template-columns: 1fr; gap: 2em; } .dok-spis { position: static; } }
@media (max-width: 600px) { .dok-spis { padding: 1em; } }

/* ---------- 27. Oferta: naprzemienne wiersze z wizualizacja ---------- */
.of-blok { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: center; scroll-margin-top: calc(var(--hdr-h) + 1em); }
.of-blok + .of-blok { margin-top: 5.5em; }
.of-blok:nth-child(even) .of-wiz { order: -1; }
.of-glowa { display: flex; align-items: center; gap: .9em; margin-bottom: 1em; }
.of-nr { font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; color: var(--c-primary); }
.of-glowa .karta-ikona { margin: 0; width: 2.6em; height: 2.6em; border-radius: 10px; }
.of-blok h2 { font-size: var(--t-lg); line-height: 1.15; margin-bottom: .5em; }
.of-blok .lead { opacity: .82; font-size: var(--t-sm); margin-bottom: 1em; }
.of-blok-tresc > p { opacity: .82; }
.of-blok-tresc > p + p { margin-top: .8em; }
.of-pigulki { display: grid; grid-template-columns: 1fr 1fr; gap: .6em 1.4em; margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid rgba(20, 50, 92, .12); }
.of-pigulki span { display: flex; align-items: flex-start; gap: .55em; font-size: var(--t-xs); font-weight: 700; line-height: 1.4; }
.of-pigulki .ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; margin-top: .15em; color: var(--c-primary); }
@media (max-width: 600px) { .of-pigulki { grid-template-columns: 1fr; } }

/* Wizualizacje przy kazdej usludze */
.of-wiz { position: relative; }
.of-wiz-okno { border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid rgba(20, 50, 92, .1); }
.of-wiz-okno .real-pasek { padding: .6em .9em; }
.of-wiz-okno .real-pasek span { width: .55em; height: .55em; }
/* Zrzut strony klienta zachowuje wlasne proporcje, tak jak w realizacjach:
   kadr ma stale proporcje i przycina overflow-em, obrazek jest zakotwiczony
   do gory, a po najechaniu przesuwa sie procentowo wzgledem wlasnej wysokosci. */
.of-wiz-foto { aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: var(--c-light); }
.of-wiz-foto img { width: 100%; height: auto; display: block; object-fit: contain; object-position: top center; transform: translateY(0); transition: transform 2s ease-in-out; }
.of-wiz-okno:hover .of-wiz-foto img { transform: translateY(-40%); }
.of-wiz-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2em; background: linear-gradient(0deg, rgba(255, 255, 255, .75), transparent); pointer-events: none; }
.of-wiz-zdj { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.of-wiz-zdj img { width: 100%; height: auto; display: block; }
.of-wiz .pl-wiz {
  position: absolute; display: flex; align-items: center; gap: .8em; padding: .85em 1.1em; border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-lg); border: 1px solid rgba(20, 50, 92, .08);
  font-size: var(--t-xs); font-weight: 800; line-height: 1.3; animation: unos 6s ease-in-out infinite;
}
.of-wiz .pl-wiz small { display: block; font-weight: 400; opacity: .7; }
.of-wiz .pl-wiz .karta-ikona { margin: 0; width: 2.3em; height: 2.3em; border-radius: 10px; }
.of-wiz-prawo { right: -1.5em; bottom: 1.5em; }
.of-wiz-lewo { left: -1.5em; bottom: 1.5em; }

/* Wspolna ramka wizualizacji, zeby kolumny mialy podobna wage */
.of-ramka { background: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg); border: 1px solid rgba(20, 50, 92, .08); padding: 1.6em; }
.of-podpis { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary-dark); opacity: .8; margin: 1.4em 0 .8em; }
.of-podpis:first-child { margin-top: 0; }

/* Pasek wyszukiwarki jako wizualizacja SEO */
.of-szukaj { display: flex; align-items: center; gap: .8em; padding: .85em 1.1em; border-radius: 999px; background: var(--c-light); border: 1px solid rgba(20, 50, 92, .1); font-weight: 700; }
.of-szukaj .ico { color: rgba(20, 50, 92, .4); flex: 0 0 auto; }
.of-wynik { padding: .9em 1.1em; border-radius: var(--r-sm); background: #fff; border: 1px solid rgba(20, 50, 92, .1); display: grid; grid-template-columns: auto auto 1fr; gap: .8em; align-items: center; }
.of-wynik + .of-wynik { margin-top: .7em; }
.of-wynik.of-wynik-ty { border-color: rgba(59, 139, 217, .5); box-shadow: 0 6px 18px rgba(59, 139, 217, .16); }
.of-wynik.of-wynik-ty .of-poz { background: var(--c-primary); color: #fff; }
.of-poz { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--c-light); color: var(--c-dark); font-size: .7rem; font-weight: 800; }
.of-wynik .karta-ikona { margin: 0; width: 2.2em; height: 2.2em; border-radius: 9px; }
.of-wynik strong { display: block; font-size: var(--t-xs); }
.of-wynik span { font-size: .75rem; opacity: .75; line-height: 1.35; }
.of-wynik-blady { opacity: .5; }
.gwiazdki-mini { display: inline-flex; gap: .05em; color: #F2B01E; vertical-align: -.15em; }
.gwiazdki-mini .ico { width: .85em; height: .85em; fill: currentColor; stroke: none; color: #F2B01E; }

/* Lista dokumentow jako wizualizacja RODO */
.of-dok { display: grid; gap: .6em; }
.of-dok-rzad { display: flex; align-items: center; gap: .9em; padding: .7em .9em; border-radius: var(--r-sm); background: var(--c-light); font-weight: 700; font-size: var(--t-xs); }
.of-dok-rzad .ico { color: var(--c-primary); flex: 0 0 auto; }
.of-dok-rzad .znak { margin-left: auto; width: 1.5em; height: 1.5em; border-radius: 50%; background: rgba(34, 197, 94, .18); color: #16A34A; display: grid; place-items: center; }
.of-dok-rzad .znak .ico { width: .9em; height: .9em; color: inherit; }

@media (max-width: 960px) {
  .of-blok { grid-template-columns: 1fr; gap: 1.8em; }
  .of-blok:nth-child(even) .of-wiz { order: 0; }
  .of-blok + .of-blok { margin-top: 3.5em; }
  .of-wiz .pl-wiz { right: 1em; left: auto; bottom: 1em; }
}
@media (max-width: 600px) { .of-dok { padding: 1em; } }
@media (prefers-reduced-motion: reduce) {
  .of-wiz .pl-wiz { animation: none; }
  .of-wiz-foto img, .of-wiz-okno:hover .of-wiz-foto img { transition: none; transform: none; }
}

/* ---------- 28. Realizacja jako szeroki rzad ---------- */
.real-rzad { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3em; align-items: center; }
.real-rzad + .real-rzad { margin-top: 4em; }
.real-rzad:nth-child(even) .real-karta { order: 2; }
.real-rzad .real-karta { display: flex; }
.real-rzad .real-foto { aspect-ratio: 16 / 9; }
.real-rzad h2 { font-size: var(--t-lg); line-height: 1.15; margin-bottom: .5em; }
.real-rzad .real-branza { display: block; margin-bottom: .6em; }
.real-rzad p { opacity: .82; }
.real-rzad .lista-ok { margin-top: 1.2em; font-size: var(--t-xs); }
.real-rzad .btn-row { margin-top: 1.6em; }
@media (max-width: 960px) { .real-rzad { grid-template-columns: 1fr; gap: 1.5em; } .real-rzad:nth-child(even) .real-karta { order: 0; } .real-rzad + .real-rzad { margin-top: 3em; } }

/* ---------- 29. Podstrona specjalizacji ---------- */
/* Pytania pacjenta jako babelki rozmowy, bez punktow i bez deklaracji,
   co bedzie na stronie klienta. Babelki wjezdzaja po kolei przy przewinieciu. */
.pyt-uklad { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4em; align-items: center; }
.pyt-lewa h2 { margin-bottom: .6em; }
.pyt-lewa p { opacity: .82; }
.pyt-lewa p + p { margin-top: .9em; }
.babelki { display: flex; flex-direction: column; gap: .9em; }
.babelek {
  position: relative; align-self: flex-start; max-width: 32em; padding: 1em 1.3em;
  border-radius: 20px 20px 20px 6px; background: #fff; border: 1px solid rgba(20, 50, 92, .08);
  box-shadow: var(--shadow); font-weight: 700; line-height: 1.45;
}
.babelek:nth-child(even) { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--c-dark); color: #fff; border-color: transparent; }
/* Awatar pacjenta przy kazdym babelku, po stronie, z ktorej babelek wychodzi */
.babelek-awatar {
  position: absolute; bottom: -.1em; left: -3em; width: 2.4em; height: 2.4em; border-radius: 50%;
  display: grid; place-items: center; background: rgba(20, 50, 92, .1); color: rgba(20, 50, 92, .45);
}
.babelek:nth-child(even) .babelek-awatar { left: auto; right: -3em; background: rgba(59, 139, 217, .22); color: rgba(255, 255, 255, .8); }
.babelek-awatar .ico { width: 1.3em; height: 1.3em; }
.js .babelek { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-visible .babelek { opacity: 1; transform: none; }
.reveal.is-visible .babelek:nth-child(2) { transition-delay: .12s; }
.reveal.is-visible .babelek:nth-child(3) { transition-delay: .24s; }
.reveal.is-visible .babelek:nth-child(4) { transition-delay: .36s; }
.reveal.is-visible .babelek:nth-child(5) { transition-delay: .48s; }
.reveal.is-visible .babelek:nth-child(6) { transition-delay: .6s; }
@media (max-width: 960px) { .pyt-uklad { grid-template-columns: 1fr; gap: 2em; } .babelek { max-width: none; } .babelek-awatar { display: none; } }
@media (max-width: 600px) { .babelek { padding: .8em 1em; font-size: var(--t-xs); } }

/* ---------- Punkty w kartach, zamiast golej listy z ptaszkiem ----------
   Uzywane na podstronach uslugowych tam, gdzie pod leadem stala plaska lista.
   Kazdy punkt dostaje wlasna karte z ikona, tlem i uniesieniem po najechaniu. */
.pkt-karty { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; margin: 2.2em 0 0; padding: 0; list-style: none; }
.pkt-karty > li {
  display: flex; align-items: flex-start; gap: 1em; padding: 1.3em 1.4em;
  border-radius: var(--r-sm); background: #fff; border: 1px solid rgba(20, 50, 92, .1);
  box-shadow: var(--shadow); transition: transform var(--ease), box-shadow var(--ease), border-color .25s;
}
.pkt-karty > li:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(59, 139, 217, .4); }
.pkt-karty .karta-ikona {
  margin: 0; width: 2.4em; height: 2.4em; border-radius: 10px; flex: 0 0 auto;
  background: var(--c-light); color: var(--c-primary); transition: background .25s, color .25s;
}
.pkt-karty > li:hover .karta-ikona { background: var(--c-primary); color: #fff; }
.pkt-karty span { font-size: var(--t-xs); line-height: 1.6; }
.sec-light .pkt-karty > li { border-color: rgba(20, 50, 92, .08); }

/* ---------- Punkty w pasach, wariant jednokolumnowy z numerem ----------
   Drugi sposob pokazania listy, zeby dwie podstrony obok siebie nie wygladaly tak samo. */
.pkt-pasy { display: grid; gap: .9em; margin: 2.2em 0 0; padding: 0; list-style: none; }
.pkt-pasy > li {
  display: flex; align-items: center; gap: 1.1em; padding: 1.1em 1.4em;
  border-radius: var(--r-sm); background: var(--c-light); border-left: 4px solid var(--c-primary);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .25s, border-color .25s, box-shadow .3s;
}
.pkt-pasy > li::before {
  content: ''; flex: 0 0 auto; width: .55em; height: .55em; border-radius: 50%;
  background: var(--c-primary); transition: transform .3s, background .25s;
}
.pkt-pasy > li:hover { transform: translateX(8px); background: #fff; border-left-color: var(--c-accent); box-shadow: var(--shadow); }
.pkt-pasy > li:hover::before { background: var(--c-accent); transform: scale(1.5); }
.pkt-pasy span { font-size: var(--t-xs); line-height: 1.6; }
.sec-light .pkt-pasy > li { background: #fff; }

@media (max-width: 860px) { .pkt-karty { grid-template-columns: 1fr; gap: .9em; } }
@media (max-width: 600px) { .pkt-karty > li, .pkt-pasy > li { padding: 1em; } }
@media (prefers-reduced-motion: reduce) {
  .pkt-karty > li, .pkt-karty > li:hover, .pkt-pasy > li, .pkt-pasy > li:hover { transition: none; transform: none; }
}

/* Ustalenia: o co pytamy lekarza, zanim cokolwiek zaprojektujemy */
.ust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5em 3em; }
.ust > div { position: relative; padding-top: 1.6em; border-top: 3px solid var(--c-primary); }
.ust h3 { font-size: var(--t-md); line-height: 1.25; margin-bottom: .5em; }
.ust h3::before { content: '\201E'; color: var(--c-primary); }
.ust h3::after { content: '\201D'; color: var(--c-primary); }
.ust p { font-size: var(--t-xs); opacity: .82; line-height: 1.65; }
@media (max-width: 960px) { .ust { grid-template-columns: 1fr; gap: 1.8em; } }

/* Numerowana siatka (uzywana tez na o nas) */
.zasady { display: grid; grid-template-columns: 1fr 1fr; gap: 3em 4em; counter-reset: zasada; }
.zasady > div { position: relative; padding-left: 3.6em; }
.zasady > div::before { counter-increment: zasada; content: '0' counter(zasada); position: absolute; left: 0; top: -.2em; font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--c-accent); }
.zasady h3 { margin-bottom: .4em; }
.zasady p { opacity: .85; font-size: var(--t-xs); line-height: 1.65; }
/* Wariant trzykolumnowy bez numerow. Zamiast cyfry kazda pozycja dostaje
   pasek akcentu nad naglowkiem, ktory po najechaniu rozjezdza sie na cala
   szerokosc kolumny. Numer nic tu nie wnosil, bo kolejnosc nie ma znaczenia. */
.zasady-3 { grid-template-columns: repeat(3, 1fr); gap: 2.5em 3em; }
.zasady-3 > div { padding-left: 0; padding-top: 1.5em; }
.zasady-3 > div::before {
  counter-increment: none; content: ''; top: 0; left: 0; width: 48px; height: 3px;
  border-radius: 3px; background: var(--c-accent);
  transition: width .45s cubic-bezier(.34, 1.56, .64, 1), background .25s;
}
.zasady-3 > div:hover::before { width: 100%; background: var(--c-primary); }
.zasady-3 h3 { font-size: var(--t-md); line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .zasady-3 > div::before, .zasady-3 > div:hover::before { transition: none; width: 48px; } }

/* Wariant kartowy zasad. Na jasnym tle karta jest biala z cieniem i paskiem
   akcentu u gory, na ciemnym polprzezroczysta, bo inaczej gubi sie w tle. */
.zasady-karty { gap: 1.5em; }
.zasady-karty > div {
  padding: 1.8em 1.6em 1.6em; border-radius: var(--r); overflow: hidden;
  background: #fff; border: 1px solid rgba(20, 50, 92, .1); box-shadow: var(--shadow);
  transition: transform var(--ease), background .25s, border-color .25s, box-shadow var(--ease);
}
.zasady-karty > div::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-accent), rgba(240, 113, 103, 0)); opacity: .9;
}
.zasady-karty > div::before { position: static; display: block; font-size: 1.6rem; color: var(--c-accent); margin-bottom: .5em; }
.zasady-karty > div:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(59, 139, 217, .35); }
.sec-dark .zasady-karty > div { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.sec-dark .zasady-karty > div:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.zasady-karty h3 { font-size: var(--t-md); }
.zasady-karty p { opacity: .82; }
@media (max-width: 960px) { .zasady, .zasady-3 { grid-template-columns: 1fr; gap: 2em; } .zasady-karty { gap: 1em; } }
@media (max-width: 600px) { .zasady-karty > div { padding: 1em; } }
@media (prefers-reduced-motion: reduce) { .zasady-karty > div, .zasady-karty > div:hover { transition: none; transform: none; } }

/* Cechy na ciemnym tle, trzy kolumny typograficzne z ikona */
.cechy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
.cechy > div {
  padding: 1.8em 1.6em; border-radius: var(--r); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: transform var(--ease), background .25s, border-color .25s;
}
.cechy > div:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .26); }
.cechy .karta-ikona { background: rgba(255, 255, 255, .1); color: #fff; transition: background .25s; }
.cechy > div:hover .karta-ikona { background: var(--c-primary); }
.cechy h3 { margin-bottom: .5em; }
.cechy p { opacity: .85; font-size: var(--t-xs); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .cechy > div, .cechy > div:hover { transition: none; transform: none; } }
@media (max-width: 960px) { .cechy { grid-template-columns: 1fr; gap: 2em; } }

/* Blok SEO: czysty tekst jednym ciagiem, bez kolumn i kafelkow. Szerokosc
   ograniczona miara wiersza, zeby dlugi tekst dalo sie czytac. */
.seo-tekst { max-width: 52em; }
.seo-tekst h2 { font-size: var(--t-lg); line-height: 1.18; margin-bottom: .7em; }
.seo-tekst h3 { font-size: var(--t-md); line-height: 1.3; margin: 1.8em 0 .6em; }
.seo-tekst p { font-size: 1.0625rem; line-height: 1.75; opacity: .86; }
.seo-tekst p + p { margin-top: .9em; }
@media (max-width: 600px) { .seo-tekst p { font-size: var(--t-sm); line-height: 1.7; } .seo-tekst h3 { margin-top: 1.4em; } }

/* Pokrewne specjalizacje */
.pokrewne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
.pokrewne a { display: flex; align-items: center; gap: 1em; padding: 1.2em 1.4em; border-radius: var(--r); background: #fff; border: 1px solid rgba(20, 50, 92, .08); color: var(--c-dark); transition: transform var(--ease), box-shadow var(--ease); }
.pokrewne a:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--c-dark); }
.pokrewne .karta-ikona { margin: 0; flex: 0 0 auto; }
.pokrewne strong { display: block; font-size: var(--t-sm); }
.pokrewne span { font-size: var(--t-xs); opacity: .75; }
.pokrewne .ico-strz { margin-left: auto; color: var(--c-primary); width: 1.2em; height: 1.2em; }
@media (max-width: 960px) { .pokrewne { grid-template-columns: 1fr; } }

/* ---------- 30. Animacje ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .karta, .kafel, .real-karta, .btn, .cta-kontakt a, .os::after, .os-krok::after { transition: none; }
  .karta:hover, .kafel:hover, .real-karta:hover, .btn:hover, .cta-kontakt a:hover { transform: none; }
  .tasma-in, .zyg-plakietka, .kolo-dek, .ekg-pas .ekg-ruch { animation: none; }
  .real-foto img, .real-karta:hover .real-foto img { transition: none; transform: none; }
  .btn-ghost, .btn-jasny, .btn-accent, .btn-sm, .btn-lg, .nav-cta .btn { transition: none; }
  .btn-ghost:hover, .btn-jasny:hover, .btn-accent:hover, .btn-sm:hover, .btn-lg:hover, .nav-cta .btn:hover { transform: none; }
}