/* =========================================================================
   Style wyłącznie strony głównej. Wspólne rzeczy (zmienne, przyciski, nav,
   stopka, siatka sekcji) siedzą w site.css i tutaj się ich nie powtarza.
   ========================================================================= */

/* --- hero ---------------------------------------------------------------- */

.hero-home{position:relative;padding:96px 0 0;text-align:center;border-bottom:1px solid var(--border-color);overflow:hidden}
.hero-home::before{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:760px;height:520px;background:radial-gradient(circle,rgba(37,99,235,.22),transparent 68%);pointer-events:none}
.hero-home .wrap{position:relative}
.hero-home h1{font-size:1.05rem;letter-spacing:.22rem;text-transform:uppercase;color:var(--primary);font-weight:700;margin-bottom:18px}
.hero-home h2{font-size:3rem;line-height:1.12;margin-bottom:22px}
.hero-home .lead{font-size:1.12rem;max-width:760px;margin:0 auto 34px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-dopisek{margin-top:18px;font-size:.88rem;color:var(--text-main)}

/* Zrzut panelu pod przyciskami (inc/sekcje/home/hero.php): cały ekran
   generatora w ramce okna (.zrzut-okno z site.css), na nim strona płatności
   klienta. Ramka wygasa ku dołowi i przechodzi w pasek metod płatności —
   stąd brak dolnego odstępu w hero. */
.hh-zrzuty{position:relative;max-width:980px;margin:84px auto 0;text-align:left}
.hh-zrzuty .zrzut-okno{max-width:none;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 92%);mask-image:linear-gradient(to bottom,#000 55%,transparent 92%)}
.hh-zrzuty .zrzut-okno img{display:block;width:100%;height:auto}
.hh-gosc{position:absolute;right:-26px;top:22%;width:27%;margin:0;background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(37,99,235,.15)}
.hh-gosc img{display:block;width:100%;height:auto}
.hh-e1{left:0;top:-46px}
.hh-e2{right:-36px;top:calc(22% - 20px)}
@media(max-width:1060px){.hh-gosc{right:0}.hh-e2{right:-6px}}
@media(max-width:560px){
  .hh-zrzuty{margin-top:70px}
  /* na telefonie tylko góra karty klienta: kwota i przycisk płatności */
  .hh-gosc{width:44%;top:30%;max-height:80%}
  .hh-e1{top:-40px}
  .hh-e2{right:-4px;top:calc(30% - 18px)}
}
@media(max-width:780px){
  .hero-home{padding:64px 0 56px}
  .hero-home h2{font-size:2.15rem}
  .hero-home .lead{font-size:1rem}
}

/* --- pasek bramek -------------------------------------------------------- */

.pasek-bramek{padding:34px 0;background:var(--bg-deep);border-bottom:1px solid var(--border-color)}
.pasek-bramek .lbl{text-align:center;font-family:'Montserrat',sans-serif;font-size:.7rem;letter-spacing:.125rem;text-transform:uppercase;color:#64748b;font-weight:700;margin-bottom:22px}
.bramki-rzad{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:center}
.bramki-rzad img{height:34px;width:auto;opacity:.82;filter:grayscale(.25);transition:opacity .3s,filter .3s}
.bramki-rzad img:hover{opacity:1;filter:none}
/* Logotypy będące linkami partnerskimi — sygnalizujemy, że są klikalne. */
.bramka-link{display:inline-flex;align-items:center;cursor:pointer}
.bramka-link:hover img{opacity:1;filter:none;transform:translateY(-2px)}
.bramka-link img{transition:opacity .3s,filter .3s,transform .3s}
.bramka-link:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:4px}

/* --- karty korzyści ------------------------------------------------------ */

.karta{background:var(--card-bg);border:1px solid var(--border-color);border-radius:14px;padding:30px 26px;transition:transform .3s,border-color .3s}
.karta:hover{transform:translateY(-4px);border-color:var(--primary)}
.karta-ico{font-size:1.9rem;margin-bottom:16px}
.karta h3{font-size:1.12rem;margin-bottom:11px}
.karta p{font-size:.94rem}

/* --- film ------------------------------------------------------------------ */

/* Jeden film — szeroki, wyśrodkowany, w proporcji 16:9. */
.film{position:relative;border:1px solid var(--border-color);border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.film iframe{display:block;width:100%;height:100%;border:0}

/* Film pod krokami „Jak to działa” (inc/sekcje/home/jak-to-dziala.php). */
.film-po-krokach{max-width:900px;margin:54px auto 0}
.film-tytul{text-align:center;font:700 .72rem/1 'Montserrat',sans-serif;letter-spacing:.12rem;text-transform:uppercase;color:#64748b;margin-bottom:16px}

/* --- kroki na zrzutach (#jak, inc/sekcje/home/jak-to-dziala.php) -------- */
/* Zrzut przycięty od góry do stałej wysokości — kadry mają różne proporcje,
   a karty w rzędzie mają kończyć się równo. Numer kroku zachodzi na krawędź. */

.kroki-zrzuty{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kz{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;overflow:hidden}
.kz-obraz{background:#f1f5f9;height:280px;overflow:hidden;border-bottom:1px solid var(--border-color);padding:18px 18px 0}
.kz-obraz img{display:block;width:100%;height:auto;border-radius:10px 10px 0 0;box-shadow:0 10px 30px rgba(15,23,42,.18)}
.kz-tekst{padding:20px 22px 24px;position:relative}
.kz-nr{position:absolute;top:-21px;left:22px;width:42px;height:42px;border-radius:50%;background:var(--gradient-main);color:#fff;display:grid;place-items:center;font:800 1rem/1 'Montserrat',sans-serif;box-shadow:0 0 15px rgba(225,29,72,.45)}
.kz h3{font-size:1.08rem;margin:18px 0 8px}
.kz p{font-size:.92rem}
@media(max-width:880px){.kroki-zrzuty{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* --- porównanie ---------------------------------------------------------- */

.porownanie{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.por-kol{background:var(--card-bg);border:1px solid var(--border-color);border-radius:14px;padding:30px 26px}
.por-kol h3{font-size:1.14rem;margin-bottom:20px}
.por-kol ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.por-kol li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem}
.por-kol .znak{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;margin-top:2px}
.por-minus .znak{background:rgba(225,29,72,.16);color:#fb7185}
.por-plus{border-color:rgba(37,99,235,.45)}
.por-plus .znak{background:rgba(5,150,105,.16);color:#34d399}
@media(max-width:780px){.porownanie{grid-template-columns:1fr}}


/* --- FAQ ----------------------------------------------------------------- */

.faq-lista{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-poz{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}
.faq-poz summary{padding:20px 24px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-poz summary::-webkit-details-marker{display:none}
.faq-poz summary::after{content:'+';font-size:1.5rem;color:var(--primary);flex-shrink:0;line-height:1}
.faq-poz[open] summary::after{content:'−'}
.faq-poz summary h3{font-size:1.02rem;margin:0}
.faq-poz p{padding:0 24px 22px;font-size:.94rem}

/* --- liczby z API -------------------------------------------------------- */

.liczby-sekcja{background:var(--bg-deep)}
.liczby-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.25);border-radius:16px;overflow:hidden}
.liczba-karta{background:rgba(15,23,42,.95);padding:32px 24px;text-align:center}
.liczba-ico{font-size:1.5rem;margin-bottom:14px;opacity:.85}
.liczba-val{font-size:clamp(1.7rem,2.5vw,2.4rem);font-weight:800;color:#f1f5f9;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.liczba-tytul{font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07rem;color:#fff;margin-bottom:6px}
.liczba-opis{font-size:.8rem;color:#64748b}
@media(max-width:900px){.liczby-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.liczby-grid{grid-template-columns:1fr}}

/* --- CTA końcowe --------------------------------------------------------- */

.cta-koncowe{text-align:center;border-bottom:none}
.cta-koncowe h2{font-size:2.15rem;margin-bottom:16px}
.cta-koncowe p{font-size:1.06rem;margin-bottom:30px}