/* =========================================================
   OPATULO — redesign (gałąź nowa-wersja)
   Cel: żywiej i bardziej zachęcająco, mniej tekstu,
   pełnoekranowe wideo, świetnie na telefonie.
   Ładowany PO styles.css — nadpisuje wybrane reguły.
   ========================================================= */

/* ---- HERO: pełnoekranowy, kinowy (mops liżący) ---- */
.hero-cine { position: relative; min-height: clamp(540px, 84vh, 840px); display: flex; overflow: hidden; background: #2A2528; }
.hero-cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Slajd 1 „Kochaj go mądrze" – pastelowy fiolet (schodzi do jasnej lawendy) */
.hero-cine__scrim { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(95deg, rgba(138,108,196,.9) 0%, rgba(176,150,222,.74) 30%, rgba(224,210,244,.4) 56%, rgba(234,224,248,0) 82%),
    linear-gradient(to bottom, rgba(138,108,196,.32) 0%, rgba(138,108,196,0) 22%),
    linear-gradient(to top, rgba(138,108,196,.26) 0%, rgba(138,108,196,0) 28%); }
.hero-cine__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(2.5rem, 6vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.hero-cine__copy { max-width: 46ch; }
.hero-cine .eyebrow { color: var(--lime); justify-content: flex-start; margin-bottom: .9rem; }
.hero-cine .eyebrow::before { background: var(--lime); }
.hero-cine h1 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .35em; }
.hero-cine h1 .em { font-style: italic; color: var(--lime); }
.hero-cine__lead { color: rgba(247,243,236,.92); font-size: clamp(1.04rem, 1.6vw, 1.24rem); max-width: 44ch; margin: 0 0 1.5rem; }
.hero-cine__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-cine .deco { z-index: 2; }
.hero-cine .deco--ring-sm { width: 74px; top: 15%; right: 9%; }
.hero-cine .deco--ring-xs { width: 46px; bottom: 20%; right: 17%; }
@media (max-width: 760px){
  .hero-cine { min-height: clamp(560px, 82vh, 760px); }
  .hero-cine__scrim { background: linear-gradient(to bottom, rgba(138,108,196,.88) 0%, rgba(176,150,222,.48) 44%, rgba(234,224,248,.1) 74%, rgba(234,224,248,0) 100%); }
  .hero-cine__inner { justify-content: flex-start; padding-top: clamp(1.5rem, 5vw, 2.5rem); padding-bottom: 1.5rem; }
  .hero-cine__copy { max-width: none; }
}

/* ===== HERO: karuzela banerów ===== */
.hero-slider { position: relative; }
.hero-slides { position: relative; min-height: clamp(540px, 84vh, 840px); }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide--link { text-decoration: none; background-size: cover; background-position: center; cursor: pointer; }
.hero-slide h2 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .35em; }
.hero-slide--link:hover .btn--lime { transform: translateY(-2px); }
/* Per-slajd gradienty (jaśniejszy fragment każdego brandowego gradientu) */
/* Slajd 2 „Pierwsza pomoc dla psa i kota" – Icy Aqua → Deep Ocean (turkus) */
.hero-slide--training .hero-cine__scrim { background: linear-gradient(95deg, rgba(31,107,104,.94) 0%, rgba(64,150,148,.82) 30%, rgba(140,206,210,.42) 56%, rgba(170,223,228,0) 82%); }
/* Slajd 3 „Program pożegnalny dla klinik" – Medium Slate Blue → Dark Ultramarine (granat) */
.hero-slide--program .hero-cine__scrim { background: linear-gradient(95deg, rgba(31,20,134,.95) 0%, rgba(57,46,160,.86) 32%, rgba(121,116,204,.45) 58%, rgba(121,116,204,0) 84%); }
/* mobile: pokaż świecę / kobietę z psem + przyciemnienie góra→dół (tekst u góry czytelny) */
@media (max-width: 760px){
  .hero-slide--training .hero-cine__scrim { background: linear-gradient(to bottom, rgba(31,107,104,.92) 0%, rgba(64,150,148,.5) 44%, rgba(170,223,228,.12) 74%, rgba(170,223,228,0) 100%); }
  .hero-slide--program .hero-cine__scrim { background: linear-gradient(to bottom, rgba(31,20,134,.92) 0%, rgba(57,46,160,.55) 44%, rgba(121,116,204,.12) 74%, rgba(121,116,204,0) 100%); }
  .hero-slide--program { background-size: 165%; background-position: 84% 50%; }
  .hero-slide--training { background-position: 70% center; }
}
/* slajd jasny (program pożegnalny): ilustracja w tle + ciemny tekst */
.hero-slide--soft { background-color: #E9F1DC; background-repeat: no-repeat; background-position: right -20px bottom; background-size: clamp(240px, 38vw, 520px); background-blend-mode: multiply; }
.hero-slide--soft .hero-cine__scrim { display: none; }
.hero-slide--soft .eyebrow { color: var(--ink-soft); }
.hero-slide--soft .eyebrow::before { background: var(--accent); }
.hero-slide--soft h2 { color: var(--ink); }
.hero-slide--soft .hero-cine__lead { color: var(--ink-soft); }
/* kropki nawigacji */
.hero-dots { position: absolute; bottom: clamp(.9rem, 2.5vw, 1.5rem); left: 50%; transform: translateX(-50%); display: flex; gap: .7rem; z-index: 4; background: rgba(40,30,35,.34); padding: .6rem .9rem; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hero-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: transparent; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
/* strzałki karuzeli (komputer); na telefonie chowamy – tam działa swipe palcem */
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s ease, transform .2s ease; }
.hero-arrow:hover { background: rgba(255,255,255,.34); transform: translateY(-50%) scale(1.06); }
.hero-arrow svg { width: 24px; height: 24px; }
.hero-arrow--prev { left: clamp(.6rem, 2vw, 1.6rem); }
.hero-arrow--next { right: clamp(.6rem, 2vw, 1.6rem); }
@media (max-width: 760px){ .hero-arrow { display: none; } }
.hero-dot.is-active { background: var(--lime); border-color: var(--lime); transform: scale(1.2); }
@media (max-width: 760px){ .hero-slides { min-height: clamp(560px, 82vh, 760px); } .hero-slide--soft { background-size: 190px; } }

/* jasny przycisk na ciemnym tle */
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }

/* ---- FINDER: kolorowe kafle (żywiej + jaśniej „co i dla kogo") ---- */
.finder__head h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.dest { border: 1px solid var(--line-soft); background: #fff; transition: transform .18s ease, box-shadow .18s ease, background .25s ease, border-color .18s ease; }
.dest:hover, .dest:focus-visible, .dest.is-hot { transform: translateY(-6px); box-shadow: var(--shadow-2); outline: none; }
/* Kafle = LEKKIE washe z 4 brandowych gradientów (key visual): turkus / pomarańcz / ciemnoniebieski / zielony.
   Domyślnie delikatny wash; najazd = głębszy ton + uniesienie (lekko, bez ciężkich ramek). */

/* TURKUS — Icy Aqua → Deep Ocean (Wiedza, Dla klinik) */
.dest--c2, .dest--biz { background: linear-gradient(158deg, #E4F4F3 0%, #F3FAF9 58%, #fff 100%); }
.dest--c2 .dest__icon, .dest--biz .dest__icon { background: #CDEAE8; }
.dest--c2 .dest__icon svg, .dest--biz .dest__icon svg { stroke: #2E7D7A; }
.dest--c2 h3, .dest--biz h3 { color: var(--ink); }
.dest--c2 p, .dest--biz p { color: var(--ink-soft); }
.dest--c2 .dest__more, .dest--biz .dest__more { color: #2E7D7A; }
.dest--c2:hover, .dest--c2:focus-visible, .dest--c2.is-hot, .dest--biz:hover, .dest--biz:focus-visible, .dest--biz.is-hot { background: linear-gradient(158deg, #BFE6E3 0%, #DCF1F0 60%, #EFF8F7 100%); border-color: #9DD6D2; }

/* POMARAŃCZ — Sunlit Clay → Fiery Terracotta (Szkolenia, Społeczność) */
/* POMARAŃCZ — Sunlit Clay → Fiery Terracotta (Szkolenia) */
.dest--c4 { background: linear-gradient(158deg, #FCEDDC 0%, #FFF6EF 58%, #fff 100%); }
.dest--c4 .dest__icon { background: #FADFC4; }
.dest--c4 .dest__icon svg { stroke: #C0532D; }
.dest--c4 .dest__more { color: #C0532D; }
.dest--c4:hover, .dest--c4:focus-visible, .dest--c4.is-hot { background: linear-gradient(158deg, #F9D6B4 0%, #FCE8D6 60%, #FEF4EC 100%); border-color: #F0B584; }
/* RÓŻOWY pastelowy — Społeczność (żeby wyróżniał się od pomarańczu) */
.dest--c5 { background: linear-gradient(158deg, #FCE3EF 0%, #FFF1F7 58%, #fff 100%); }
.dest--c5 .dest__icon { background: #F8D3E4; }
.dest--c5 .dest__icon svg { stroke: #C24E84; }
.dest--c5 .dest__more { color: #C24E84; }
.dest--c5:hover, .dest--c5:focus-visible, .dest--c5.is-hot { background: linear-gradient(158deg, #F9CFE2 0%, #FCE2EE 60%, #FEF2F7 100%); border-color: #EFA8CB; }

/* ZIELONY — Lime Cream → Deep Ocean (Sklep) */
.dest--c1 { background: linear-gradient(158deg, #EEFAD6 0%, #F7FCEB 58%, #fff 100%); }
.dest--c1 .dest__icon { background: #E2F3BF; }
.dest--c1 .dest__icon svg { stroke: #5C802C; }
.dest--c1 .dest__more { color: #5C802C; }
.dest--c1:hover, .dest--c1:focus-visible, .dest--c1.is-hot { background: linear-gradient(158deg, #DFF3B7 0%, #EDF9D4 60%, #F6FCEA 100%); border-color: #C2DE88; }

/* CIEMNONIEBIESKI — Medium Slate Blue → Dark Ultramarine (Wsparcie) */
.dest--c3 { background: linear-gradient(158deg, #E9E8F7 0%, #F3F2FB 58%, #fff 100%); }
.dest--c3 .dest__icon { background: #DAD8F1; }
.dest--c3 .dest__icon svg { stroke: #4A43A8; }
.dest--c3 .dest__more { color: #4A43A8; }
.dest--c3:hover, .dest--c3:focus-visible, .dest--c3.is-hot { background: linear-gradient(158deg, #D4D1F1 0%, #E7E6F8 60%, #F2F1FB 100%); border-color: #B3AEE6; }

/* ---- KOLEJNOŚĆ: Wiedza → Szkolenia → Sklep → Wsparcie → Dla klinik → Społeczność (ostatnia) ---- */
.dest--c2  { order: 1; }
.dest--c4  { order: 2; }
.dest--c1  { order: 3; }
.dest--c3  { order: 4; }
.dest--biz { order: 5; }
.dest--c5  { order: 6; }

/* ---- O NAS: zdjęcia na tym samym poziomie + notka o partnerach ---- */
.about__photos figure:nth-child(2) { margin-top: 0; }
.trust__note { max-width: 62ch; margin: 1.4rem auto 0; color: var(--ink-soft); font-size: 1rem; text-align: center; }
/* partnerzy: klikalne chipy (logo-zastępcze), wyróżnione */
.trust__row a { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--ink); text-decoration: none; border: 2px solid var(--line); border-radius: 999px; padding: .4em 1.15em; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.trust__row a:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-2px); }

/* partnerzy: PRAWDZIWE LOGA (Amvet + Palmedica) zamiast napisów */
.trust__row--logos { gap: clamp(2rem, 5vw, 3.6rem); align-items: center; flex-wrap: wrap; }
.trust__row--logos a { border: none; border-radius: 12px; padding: .5rem .8rem; display: inline-flex; align-items: center; opacity: .92; transition: transform .2s ease, opacity .2s ease, background-color .2s ease, box-shadow .2s ease; }
.trust__row--logos a:hover { border: none; transform: translateY(-3px); opacity: 1; background: #fff; box-shadow: var(--shadow-1); }
.trust__row--logos img { width: auto; display: block; }
.trust__row--logos img.logo-amvet { height: 27px; }
.trust__row--logos img.logo-palmedica { height: 42px; }
@media (max-width: 560px){
  .trust__row--logos img.logo-amvet { height: 22px; }
  .trust__row--logos img.logo-palmedica { height: 34px; }
}

/* ---- STATY: 2 karty wyśrodkowane (po usunięciu statystyki o samobójstwach) ---- */
.stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
@media (max-width: 600px){ .stats__grid { grid-template-columns: 1fr; } }

/* ---- MISSION-FULL: wariant jaśniejszy (radosny pies z bańką) ---- */
.mission-full--bright .mission-full__scrim {
  background: linear-gradient(to top, rgba(6,7,97,.86) 0%, rgba(6,7,97,.3) 46%, rgba(6,7,97,0) 74%); }
.mission-full--bright .mission-full__copy { text-align: center; margin-inline: auto; }
.mission-full--bright h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
@media (min-width: 761px){
  .mission-full--bright .mission-full__inner { justify-content: flex-end; padding-bottom: clamp(2.6rem,5vw,4rem); }
  .mission-full--bright .mission-full__copy { max-width: none; }
}
@media (min-width: 900px){ .mission-full--bright h2 { white-space: nowrap; } }

/* ---- W LICZBACH: 2 karty, wyśrodkowane (bez statystyki o samobójstwach) ---- */
.stats__grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 820px; margin-inline: auto; }
@media (max-width: 640px){ .stats__grid { grid-template-columns: 1fr; } }

/* ---- DRZWI: mniej tekstu (chowamy listy wypunktowane) ---- */
.door__list { display: none; }
.door { gap: .7rem; }

/* ===== UJEDNOLICENIE: wszystkie sekcje treściowe wyśrodkowane ===== */
.axis__head, .stats__head { text-align: center; margin-inline: auto; }
.axis__head .eyebrow, .stats__head .eyebrow { justify-content: center; }
.axis__head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.16; max-width: 30ch; margin-inline: auto; }

.doors__head { display: block; text-align: center; }
.doors__head .eyebrow { justify-content: center; }
.doors__head .lead { max-width: 60ch; margin-inline: auto; }

/* „Co nas wyróżnia": nagłówek na górze, punkty pod spodem, wszystko wyśrodkowane */
.now__grid { display: block; text-align: center; max-width: 860px; margin-inline: auto; }
.now__grid .eyebrow { justify-content: center; }
.now__points { max-width: 660px; margin: 2.2rem auto 0; text-align: left; }

/* Kontakt: nagłówek + formularz w jednej, wyśrodkowanej kolumnie */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); text-align: left; align-items: center; }
.contact__intro { margin-bottom: 0; }
.contact__intro h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.contact__intro .eyebrow { justify-content: flex-start; }
.contact__direct { align-items: flex-start; gap: .8rem; margin-top: 1.6rem; }
@media (max-width: 760px){ .contact__grid { grid-template-columns: 1fr; text-align: center; } .contact__intro .eyebrow { justify-content: center; } .contact__direct { align-items: center; } }
.contact__direct li { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; color: var(--ink); }
.contact__direct li svg { width: 18px; height: 18px; stroke: var(--coral); fill: none; flex: none; }
.contact__direct a { border-bottom: none; color: var(--ink); font-weight: 500; }
.contact__direct a:hover { color: var(--coral); }

/* Instagram w stopce */
.footer__ig { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; color: rgba(247,243,236,.78); text-decoration: none; font-size: .92rem; transition: color .2s ease; }
.footer__ig svg { width: 18px; height: 18px; }
.footer__ig:hover { color: var(--lime); }
.contact__form { text-align: left; margin-top: 0; }

/* O nas: zdjęcia na górze + wyśrodkowany tekst */
.about__grid { display: block; max-width: 740px; margin-inline: auto; text-align: center; }
.about__photos { justify-content: center; max-width: 480px; margin: 0 auto 2.2rem; }
.about__grid .eyebrow { justify-content: center; }
.about blockquote { margin-inline: auto; }
.about .lead { max-width: 60ch; margin-inline: auto; }
/* bio założycielek: dwie uporządkowane kolumny zamiast wyśrodkowanego ciągu */
.about__bios { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 2.4rem; text-align: left; max-width: 660px; margin: 1.9rem auto 0; }
.about__bio__name { font-weight: 700; color: var(--ink); font-size: 1rem; margin: 0 0 .25rem; }
.about__bio p:last-child { font-size: .94rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
@media (max-width: 600px){ .about__bios { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; } }

/* ===== OŚ ŻYCIA: łuk opieki zamiast prostej linii ===== */
.axis__track::before { display: none; }            /* chowamy starą prostą linię */
.axis__arc { position: absolute; top: 0; left: 16.6%; width: 66.8%; height: 44px; z-index: 0; opacity: .65; pointer-events: none; }
.axis__arc path { stroke-width: 2.5px; }

/* Linki etapu: opiekun / klinika */
.axis__track .phase { display: flex; flex-direction: column; align-items: center; height: 100%; }
.phase__links { display: flex; flex-direction: column; gap: .45rem; margin-top: auto; padding-top: 1rem; align-items: center; }
.phase__links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: color .2s ease; }
.phase__links a svg { width: 15px; height: 15px; transition: transform .2s ease; }
.phase__links a:hover { color: var(--coral); }
.phase__links a:hover svg { transform: translateX(3px); }
@media (max-width: 760px){ .axis__arc { display: none; } }

/* ===== MANIFEST: koralowy gradient z palety (zamiast zieleni), węższy pas, mniejsza czcionka ===== */
/* Gradient marki „Icy Aqua + Deep Ocean" (z katalogu – zastosowanie weterynaryjne), pogłębiony pod biały tekst */
.manifest { background: linear-gradient(135deg, #E0FF8C 0%, #BBE03F 100%); padding-block: clamp(2.6rem, 5vw, 4.2rem); }
.manifest h2 { font-size: clamp(1.8rem, 4vw, 3rem); color: var(--ink); }
.manifest p { color: var(--ink); opacity: .8; }
.manifest h2 em { font-style: normal; }
/* mobile: chowamy dekoracje w banerze, żeby napis nie nachodził na serce */
@media (max-width: 760px){ .manifest .deco { display: none; } }

/* ===== KIM JESTEŚMY (baner z psem): nagłówek w jednej linii ===== */
.mission-full h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }

/* ===== CO NAS WYRÓŻNIA: jasne tło (kolor strony) + ciemny tekst ===== */
.now { background: var(--bg-soft); color: var(--ink); }
.now h2 { color: var(--ink); }
.now .lead { color: var(--ink-soft); }
.now__point .t { color: var(--ink-soft); }
.now__point .t strong { color: var(--ink); }
.now__point .k { color: #E8543D; }

/* ===== PSY I KOTY: filmik w zaokrąglonej ramce ===== */
.petfilm { text-align: center; }
.petfilm__head { max-width: 54ch; margin: 0 auto; }
.petfilm__head .eyebrow { justify-content: center; }
.petfilm__head h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
/* Kot „wycięty" z białego tła trikiem multiply – lekki efekt wow, bez przetwarzania alpha */
.petfilm__cat { max-width: 780px; margin: clamp(.5rem, 2vw, 1.5rem) auto 0; }
.petfilm__cat video { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
/* różowe kropki: w róg, z dala od tekstu (ruch góra-dół daje wspólna animacja .deco) */
.petfilm .deco--ring-xs { top: 7%; right: 7%; width: 38px; }
@media (max-width: 640px){ .petfilm .deco--ring-xs { top: 3%; right: 4%; width: 30px; } }