/* Hero strony glownej (Kacper 04.10.2026: wybrany wariant 25 z /tla/): ciemny granatowo-niebieski gradient z ziarnem,
   naglowek Fraunces 300 na srodku, pole nazwy ze Sprawdz w srodku, przyciski, a pod spodem rzad kafli z podgladem uslug (bez slidera). */

.hero25 { position: relative; overflow: hidden; color: #fff; background: linear-gradient(165deg, #060b24 0%, #0d1b55 50%, #1a37a6 100%); }
.hero25__tlo { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.hero25__tlo i { position: absolute; display: block; }
.hero25__tlo .b1 { right: -12%; top: 6%; width: 62vmax; height: 62vmax; border-radius: 50%; background: #4f7bff; opacity: .3; filter: blur(110px); animation: h25-p2 26s ease-in-out infinite alternate; }
.hero25__tlo .b2 { left: -22%; bottom: -45%; width: 58vmax; height: 58vmax; border-radius: 50%; background: #070d2c; opacity: .85; filter: blur(90px); animation: h25-p1 30s ease-in-out infinite alternate; }
.hero25__tlo .zwir { inset: 0; opacity: .28; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 2.2 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes h25-p1 { to { transform: translate(28vw, 18vh) scale(1.15); } }
@keyframes h25-p2 { to { transform: translate(-30vw, -22vh) scale(.9); } }

.hero25__in { position: relative; z-index: 2; padding-top: clamp(64px, 9vh, 110px); padding-bottom: clamp(40px, 5vh, 64px); text-align: center; }
.hero25__h { margin: 0; font-family: 'Fraunces', Georgia, serif; font-optical-sizing: none; font-variation-settings: 'opsz' 40; font-size: clamp(38px, 4.6vw, 68px); font-weight: 300; line-height: 1.06; letter-spacing: -0.015em; color: #fff; text-wrap: balance; }
.hero25__lead { max-width: 520px; margin: 22px auto 0; font-size: 15px; line-height: 1.55; font-weight: 400; color: rgba(255, 255, 255, .85); text-wrap: pretty; }

/* Pole nazwy: ciemne polprzezroczyste, Sprawdz w srodku pola */
.nazwa--h25 { max-width: 680px; margin: 30px auto 0; text-align: left; }
.nazwa--h25 .nazwa__label { margin-bottom: 10px; font-size: 14px; color: rgba(255, 255, 255, .82); text-align: center; }
.nazwa--h25 .nazwa__row { position: relative; }
.nazwa--h25 .nazwa__bar { height: 54px; padding: 0 116px 0 18px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); }
.nazwa--h25 .nazwa__bar:hover { background: rgba(255, 255, 255, .1); }
.nazwa--h25 .nazwa__bar:focus-within { border-color: rgba(147, 180, 255, .9); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(37, 99, 235, .25); }
.nazwa--h25 .nazwa__bar > .ico { color: rgba(255, 255, 255, .65); }
.nazwa--h25 .nazwa__proto, .nazwa--h25 .nazwa__wrap input, .nazwa--h25 .nazwa__ghost { font-size: 16px; }
.nazwa--h25 .nazwa__proto { color: rgba(255, 255, 255, .55); }
.nazwa--h25 .nazwa__wrap input { color: #fff; }
.nazwa--h25 .nazwa__wrap input::placeholder { color: rgba(255, 255, 255, .45); }
.nazwa--h25 .nazwa__ghost em { color: rgba(255, 255, 255, .35); }
.nazwa--h25 .nazwa__btn { position: absolute; top: 7px; right: 7px; width: auto; height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14px; }

/* Przyciski i ocena */
.hero25__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 22px; }
.hero25__btn { height: 46px; padding: 0 26px; border-radius: 8px; background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); }
.hero25__btn:hover { background: #e8eeff; }
.hero25__btn::after { background: linear-gradient(105deg, transparent, rgba(37, 99, 235, .14) 50%, transparent); }
.hero25__btns .ulink { color: #fff; }
.hero25__btns .ulink:hover { color: #c7d7ff; }
.hero25__trust { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
.hero25__trust a { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.hero25__trust a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero25__trust svg { width: 14px; height: 14px; }

/* ---------- Kafle z podgladem uslug (Kacper: Strona i Domena zostaja na pewno, reszte jeszcze zmienimy) ---------- */
.h25karty { display: grid; grid-template-columns: 1.55fr 1fr 1.05fr 1.3fr; gap: 12px; max-width: 1180px; margin: clamp(36px, 5vh, 56px) auto 0; text-align: left; }
.h25k { position: relative; overflow: hidden; height: 240px; border-radius: 14px; color: var(--ink); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.h25k:hover { transform: translateY(-4px); }
.h25k__chip { position: absolute; z-index: 1; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 500; }
.h25k__chip .ico { width: 13px; height: 13px; color: var(--accent); }
.h25k__chip--ciemny { background: rgba(17, 24, 39, .08); }
/* Strona: zdjecie i pole "Zbuduj strone" */
.h25k--duza { padding: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); }
.h25k--duza img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 9px; }
.h25k--duza .h25k__chip { top: 22px; left: 22px; }
.h25k__input { position: absolute; left: 9%; right: 9%; top: 50%; display: flex; align-items: center; height: 56px; padding: 0 8px 0 18px; border: 2px solid #b9cdff; border-radius: 12px; background: rgba(255, 255, 255, .94); font-size: 15px; transform: translateY(-50%); }
.h25k__go { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 9px; background: var(--accent); }
.h25k__go .klik { width: 13px; height: 13px; fill: #fff; transition: transform .25s; }
.h25k--duza:hover .h25k__go .klik { transform: translate(2px, -2px); }
/* Domena wpisywana na zywo */
.h25k--domena { background: linear-gradient(160deg, #d9e6ff, #8fb2ff); }
.h25k__pill { position: absolute; left: 16px; right: -60px; top: 54%; display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 16px; border-radius: 14px; background: #fff; transform: translateY(-50%); }
.h25k__glob { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: #eaf0ff; color: var(--accent); }
.h25k__glob .ico { width: 23px; height: 23px; }
.h25k__typ { font-size: 23px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.h25k__typ::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--accent); vertical-align: -.15em; animation: h25-kursor 1s steps(2) infinite; }
@keyframes h25-kursor { 50% { opacity: 0; } }
/* Poczta */
.h25k--poczta { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 0 16px; background: #f3f6fc; }
.h25k__head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; color: var(--soft); }
.h25k__head .ico { flex: none; width: 14px; height: 14px; color: var(--accent); }
.h25k__row { display: flex; align-items: center; gap: 10px; margin-right: -30px; padding: 10px 12px; border-radius: 10px; background: #fff; }
.h25k__row > span:last-child { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.h25k__row b { font-size: 13.5px; font-weight: 600; }
.h25k__row small { font-size: 12px; color: var(--muted); }
.h25k__av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #dbe7ff; font-size: 12px; font-weight: 600; color: var(--accent); }
/* Realizacja: rozmyte tlo z tej strony i jej zrzut w ramce (jak mockup u Hostingera) */
.h25k--real { padding: 0; border: 0; background: #0b1120; } /* mockup na caly kafel (Kacper 04.10.2026) */
.h25k__tlo { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 9px; }
.h25k--real .h25k__chip { top: auto; left: auto; right: 26px; bottom: 26px; } /* w rogu, zeby nie zaslaniac logo strony */
.h25k__mock { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.h25k__mock img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; } /* od lewej, zeby naglowek strony byl caly */
.h25k__mock img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.h25k--real:hover .h25k__mock img { transform: scale(1.04); }
/* Poczta firmowa: przed i po (Kacper 04.10.2026 wybral propozycje 4 z /kafle-poczta/); adresy zmieniaja sie z kaflem Domena */
.pm4 { background: #f4f6fb; }
.pm4__przed, .pm4__po { position: absolute; left: 16px; right: 16px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; }
.pm4__przed { top: 64px; background: rgba(17, 24, 39, .04); }
.pm4__przed s { font-size: 13px; color: #9aa1ad; text-decoration-color: #e11d48; text-decoration-thickness: 1.5px; overflow-wrap: break-word; } /* lamie sie przed @ */
.pm4 small { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.pm4__strz { position: absolute; left: 50%; top: 127px; display: grid; place-items: center; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #fff; }
.pm4__strz .klik { width: 10px; height: 10px; fill: var(--accent); transform: rotate(135deg); }
.pm4__po { bottom: 16px; padding-right: 44px; background: #fff; box-shadow: 0 12px 26px -16px rgba(17, 24, 39, .4); }
.pm4__po b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: break-word; }
.pm4__po.is-nowe { animation: h25-po .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes h25-po { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pm4__ok { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.pm4__ok .ico { width: 14px; height: 14px; }
/* Dzien dobry: duze zdjecie naszego chlopaka */
.h25k--pomoc { padding: 22px 0 0 20px; border: 1px solid rgba(255, 255, 255, .14); background: radial-gradient(circle at 78% 72%, rgba(79, 123, 255, .6), rgba(37, 99, 235, .14) 45%, transparent 72%), #0a1230; color: #fff; } /* ciemne z niebieskim swiatlem za postacia (Kacper: inne tlo) */
.h25k__osoba { position: absolute; right: 4%; bottom: 0; width: auto; height: 94%; pointer-events: none; } /* caly, nie uciety (Kacper 04.10.2026) */
.h25k__hej { position: relative; display: block; font-size: 19px; font-weight: 600; color: #fff; }
.h25k__pyt { position: relative; display: block; max-width: 150px; margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .7); }
.h25k__opcje { position: absolute; z-index: 1; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.h25k__opcje span { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: 10px; background: #fff; font-size: 12.5px; color: var(--soft); white-space: nowrap; box-shadow: 0 6px 16px -10px rgba(17, 24, 39, .35); }
.h25k__opcje .klik { flex: none; width: 10px; height: 10px; fill: var(--ink); }
/* zamiast dwoch przyciskow (Kacper: "nie siedzi mi") jeden link jak "Zobacz realizacje" */
.h25k__link { position: absolute; z-index: 1; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1.5px solid currentColor; font-size: 14px; font-weight: 500; color: #fff; }
.h25k__link .klik { width: 11px; height: 11px; fill: currentColor; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.h25k--pomoc:hover .h25k__link .klik { transform: translate(2px, -2px); }

@media (max-width: 1000px) {
  .h25karty { grid-template-columns: 1fr 1fr; }
  .h25k--duza, .h25k--pomoc { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .nazwa--h25 .nazwa__bar { height: 52px; }
  .h25k { height: 180px; }
  .h25k__pill { left: 10px; height: 56px; gap: 10px; padding: 0 10px; }
  .h25k__glob { width: 34px; height: 34px; }
  .h25k__glob .ico { width: 18px; height: 18px; }
  .h25k__typ { font-size: 17px; }
  .h25k--pomoc { padding: 16px 0 0 14px; }
  .h25k__osoba { right: 0; height: 72%; } /* na telefonie nizej, zeby napis nie wchodzil na glowe */
  .h25k__hej { font-size: 16px; }
  .h25k__pyt { max-width: 90px; font-size: 12px; }
  .h25k__opcje { display: none; }
  /* poczta przed i po na telefonie: kolumna zamiast stalych pozycji, kafle w tym rzedzie wyzsze */
  .h25k--domena, .pm4 { height: 230px; }
  .pm4 { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 54px 10px 10px; }
  .pm4__przed, .pm4__po, .pm4__strz { position: relative; inset: auto; }
  .pm4__przed { padding: 7px 10px; }
  .pm4__przed s { font-size: 11.5px; }
  .pm4__strz { align-self: center; width: 22px; height: 22px; margin: 0; }
  .pm4__po { padding: 7px 34px 7px 10px; }
  .pm4__po b { font-size: 12.5px; }
  .pm4__ok { right: 8px; width: 20px; height: 20px; margin-top: -10px; }
}
@media (prefers-reduced-motion: reduce) { .hero25__tlo .b1, .hero25__tlo .b2 { animation: none; } }

/* Pod hero: jasne tlo do dolu, na razie bez tresci (Kacper 04.10.2026) */
.pusto { min-height: clamp(160px, 24vh, 300px); }

/* Navbar przezroczysty nad hero (Kacper 04.10.2026). Przypiety na gorze, po przewinieciu dostaje ciemne tlo, zeby zawsze byl widoczny. */
.nav-nad .hdr { position: fixed; top: 0; left: 0; right: 0; background: transparent; transition: background-color .25s ease; }
.nav-nad .hdr.is-tlo, .nav-nad .hdr:has(.mmenu:not([hidden])) { background: rgba(6, 11, 36, .94); }
.nav-nad .page { margin-top: 8px; }
.nav-nad .hero25__in { padding-top: calc(64px + clamp(40px, 7vh, 90px)); }

/* Loga narzedzi pod hero: szare, po najechaniu ciemniejsze (Kacper 04.10.2026) */
.narz { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(12px, 2vw, 24px); text-align: center; }
.narz__t { margin: 0 0 22px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.narz__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; }
.narz__lista li { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: #9aa1ad; transition: color .2s; }
.narz__lista img { width: 22px; height: 22px; opacity: .38; transition: opacity .2s; }
.narz__lista li:hover { color: var(--ink); }
.narz__lista li:hover img { opacity: .9; }
.narz__lista .narz__ico { width: 22px; height: 22px; color: #9aa1ad; }
.narz__lista img.narz__kolor { filter: grayscale(1) brightness(.62) contrast(1.2); opacity: .55; } /* oficjalne kolorowe ikony (GA, Search Console) w szarosci */
.narz__lista li:hover img.narz__kolor { filter: grayscale(1) brightness(.7); opacity: 1; }
.narz__lista li:hover .narz__ico { color: var(--ink); }
@media (max-width: 640px) { .narz__lista { gap: 14px 24px; } .narz__lista li { font-size: 14px; } .narz__lista img { width: 18px; height: 18px; } }