/* websly.pl: jeden arkusz dla całej strony, kierunek „Warsztat” (12.11.2026).
   Wzorzec i opis: Claude-Cowork/PROJECTS/websly/nowy-wyglad/KIERUNEK-B.md. Fonty: narzedzia/fonty.py. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonty/plex.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonty/mono.woff2") format("woff2"); }
:root {
  --tlo: #0a0c0f; --panel: #11141a; --panel-2: #171b22; --linia: #252a33; --tekst: #edebe5; --tekst-2: #a3a9b3;
  --akcent: #ff8a1f; --akcent-tekst: #14100a; --ok: #46e08a;
  --tlo-2: #11141a; --karta: #11141a; --akcent-mgla: rgba(255, 138, 31, .16);
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --prosty: "IBM Plex Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 17px/1.62 var(--prosty); -webkit-font-smoothing: antialiased;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 64px 64px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); }
.etykieta { font: 500 13px/1 var(--mono); color: var(--akcent); letter-spacing: .02em; }
.etykieta::before { content: "// "; color: var(--tekst-2); }
.ruch [data-wejscie], .ruch [data-kolejno] > * { opacity: 0; animation: pokaz 0s 4s forwards; }
.ruch [data-wejscie].widac, .ruch [data-kolejno].widac > * { animation: wjazd .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pokaz { to { opacity: 1; } }
@keyframes wjazd { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.gora { position: sticky; top: 0; z-index: 20; background: rgba(10, 12, 15, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linia); }
.gora .ramka { display: flex; align-items: center; gap: 28px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; font: 600 19px/1 var(--mono); letter-spacing: -.03em; }
.logo svg, .logo img { width: 28px; height: 28px; }
.logo i { font-style: normal; color: var(--akcent); animation: mig 1.1s steps(1) infinite; }
@keyframes mig { 50% { opacity: 0; } }
.menu { display: flex; gap: 4px; margin-left: auto; font: 500 14px/1 var(--mono); }
.menu a { padding: 10px 12px; border-radius: 8px; color: var(--tekst-2); transition: color .2s, background .2s; }
.menu a:hover { color: var(--tekst); background: var(--panel-2); }
.przycisk { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 10px; background: var(--akcent); color: var(--akcent-tekst); font: 600 15px/1 var(--mono); cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.przycisk:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(255, 138, 31, .6); background: #ffa04a; }
.przycisk.pusty { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px #3a414d; }
.przycisk.pusty:hover { box-shadow: inset 0 0 0 1px var(--akcent); background: rgba(255, 138, 31, .08); }

.wejscie { padding: 72px 0 84px; position: relative; overflow: hidden; }
.wejscie::before { content: ""; position: absolute; width: 760px; height: 760px; right: -180px; top: -260px; background: radial-gradient(closest-side, rgba(255, 138, 31, .2), transparent); pointer-events: none; }
.wejscie .siatka { display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); gap: 56px; align-items: center; position: relative; }
.wejscie h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.04em; margin: 22px 0 24px; }
.wejscie h1 span { color: var(--akcent); }
.wejscie .wstep { color: #c9cdd4; font-size: 18.5px; max-width: 56ch; }
.osoba { display: flex; align-items: center; gap: 14px; margin: 28px 0; }
.osoba img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tlo), 0 0 0 4px var(--akcent); }
.osoba b { display: block; font-size: 17px; }
.osoba span { font: 400 13px/1.4 var(--mono); color: var(--tekst-2); }
.akcje { display: flex; flex-wrap: wrap; gap: 12px; }

/* Okno z wynikami */
.okno { background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; overflow: hidden; box-shadow: 0 50px 100px -40px #000, 0 0 0 1px rgba(255, 255, 255, .03) inset; }
.okno .pasek { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linia); background: var(--panel-2); font: 400 12.5px/1 var(--mono); color: var(--tekst-2); }
.okno .pasek i { width: 11px; height: 11px; border-radius: 50%; background: #3a414d; }
.okno .pasek span { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zegary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 26px 18px 18px; }
.zegar { text-align: center; }
.zegar .kolo { position: relative; width: min(96px, 100%); aspect-ratio: 1; margin: 0 auto 10px; }
.zegar svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.zegar circle { fill: none; stroke-width: 3; }
.zegar .tor { stroke: rgba(70, 224, 138, .14); }
.zegar .luk { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.zegar b { position: absolute; inset: 0; display: grid; place-content: center; font: 600 26px/1 var(--mono); color: var(--ok); font-variant-numeric: tabular-nums; }
.zegar span { font-size: 13px; color: var(--tekst-2); }
.okno .podpis { padding: 0 18px 18px; font-size: 13.5px; color: var(--tekst-2); text-align: center; }
.terminal { border-top: 1px solid var(--linia); padding: 18px; font: 400 14px/1.9 var(--mono); background: #0c0e12; }
.terminal .pyt { color: var(--tekst-2); }
.terminal .pyt b { color: var(--akcent); font-weight: 500; }
.terminal .ok::before { content: "✓ "; color: var(--ok); }

.sekcja { padding: 96px 0; }
.sekcja h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.06; margin-top: 14px; }
.sekcja .podtytul { color: var(--tekst-2); max-width: 52ch; margin-top: 14px; }
.glowka { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; }

/* Usługi */
.kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kafel { position: relative; padding: 26px 24px 24px; background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; transition: border-color .25s, transform .25s, background .25s; overflow: hidden; }
.kafel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 240px at var(--kx, 85%) var(--ky, 105%), rgba(255, 138, 31, .17), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.kafel:hover, .kafel.aktywny { border-color: #3a414d; transform: translateY(-4px); background: var(--panel-2); }
.kafel:hover::after, .kafel.aktywny::after { opacity: 1; }
.kafel .nr { font: 500 13px/1 var(--mono); color: var(--tekst-2); }
.kafel .potrzeba { margin-top: 26px; font: 500 14px/1.4 var(--mono); color: var(--akcent); }
.kafel h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kafel .dol { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.kafel .mala { position: relative; z-index: 3; min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px #3a414d; font: 500 13px/1 var(--mono); transition: box-shadow .2s, background .2s; }
.kafel .mala:hover { box-shadow: inset 0 0 0 1px var(--akcent); background: rgba(255, 138, 31, .1); }
.kafel .nr b { color: var(--akcent); font-weight: 500; }
.kafel h3 { font-size: 23px; line-height: 1.15; margin: 8px 0 10px; }
.kafel p { color: var(--tekst-2); font-size: 15.5px; }
.kafel .dalej { display: inline-block; font: 500 13.5px/1 var(--mono); color: var(--akcent); }
.kafel .dalej::after { content: " →"; display: inline-block; transition: transform .2s; }
.kafel:hover .dalej::after, .kafel.aktywny .dalej::after { transform: translateX(4px); }

/* Realizacje: przewijany rząd okien */
.tasma { display: grid; grid-auto-flow: column; grid-auto-columns: min(560px, 82vw); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(24px, calc((100vw - 1240px) / 2)) 26px; scrollbar-color: #3a414d transparent; }
.praca { scroll-snap-align: center; background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; overflow: hidden; transition: border-color .25s; }
.praca:hover, .praca.aktywny { border-color: #3a414d; }
.praca .pasek { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--linia); font: 400 12.5px/1 var(--mono); color: var(--tekst-2); }
.praca .pasek i { width: 9px; height: 9px; border-radius: 50%; background: #3a414d; }
.praca .pasek span { margin-left: 8px; padding: 5px 10px; background: #0c0e12; border-radius: 6px; }
.praca .zrzut { overflow: hidden; }
.praca img { width: 100%; aspect-ratio: 16 / 8.6; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.praca:hover img, .praca.aktywny img { transform: scale(1.04); }
.praca .opis { padding: 18px 20px 20px; }
.praca h3 { font-size: 20px; line-height: 1.2; }
.praca p { color: var(--tekst-2); font-size: 15px; margin-top: 6px; }
.znaczki { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.znaczki span { font: 400 12px/1 var(--mono); padding: 6px 9px; border-radius: 6px; background: #0c0e12; border: 1px solid var(--linia); color: #c9cdd4; }

/* Współpraca */
.kroki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 48px; }
.kroki::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 1px; background: linear-gradient(90deg, var(--akcent), var(--linia)); }
.krok { padding-right: 28px; position: relative; }
.krok .nr { width: 36px; height: 36px; border-radius: 10px; display: grid; place-content: center; background: var(--tlo); border: 1px solid var(--akcent); color: var(--akcent); font: 600 14px/1 var(--mono); position: relative; }
.krok h3 { font-size: 21px; margin: 22px 0 8px; }
.krok p { color: var(--tekst-2); font-size: 15.5px; }

/* Bag Guard */
.aplikacja .pudlo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--linia); border-radius: 24px; padding: 48px 48px 0; overflow: hidden; }
.aplikacja h2 { display: flex; align-items: center; gap: 16px; }
.aplikacja h2 img { width: 60px; height: 60px; border-radius: 14px; }
.aplikacja p { color: #c9cdd4; max-width: 50ch; margin: 16px 0 26px; }
.aplikacja .tekst { padding-bottom: 48px; }
.telefon { justify-self: center; width: min(260px, 70%); border-radius: 34px 34px 0 0; border: 7px solid #2a3039; border-bottom: 0; align-self: end; }

/* Kontakt */
.kontakt .pudlo { border: 1px solid var(--akcent); border-radius: 24px; padding: 64px 48px; background: radial-gradient(120% 140% at 100% 0, rgba(255, 138, 31, .16), transparent 60%), var(--panel); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.kontakt h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -.04em; }
.kontakt p { color: #c9cdd4; margin: 18px 0 28px; max-width: 46ch; }
.kontakt .dane a { display: block; font: 500 clamp(17px, 1.9vw, 24px)/1.9 var(--mono); border-bottom: 1px solid var(--linia); transition: color .2s, border-color .2s; }
.kontakt .dane a:hover { color: var(--akcent); border-color: var(--akcent); }
.kontakt .dane a::before { content: "> "; color: var(--akcent); }
.stopka { border-top: 1px solid var(--linia); padding: 56px 0 96px; }
.kolumny { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.kolumny > div:first-child { grid-column: 1 / -1; }
.kolumny b { display: block; font: 500 13px/1 var(--mono); color: var(--akcent); margin-bottom: 14px; }
.kolumny a:not(.logo), .kolumny span { display: block; font-size: 15px; line-height: 1.35; color: #c9cdd4; padding: 6px 0; transition: color .2s; }
.kolumny a:not(.logo):hover { color: var(--akcent); }
.prawa { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linia); font: 400 13px/1.6 var(--mono); color: var(--tekst-2); }

/* Wyróżniki: konsola, światło za kursorem, podświetlane krawędzie, pochylenie okna */
.ukryty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.konsola { border-top: 1px solid var(--linia); background: #0c0e12; padding: 14px 18px; font: 400 13px/1.75 var(--mono); height: calc(1.75em * 11 + 28px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.konsola .wiersze > div { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.75em; color: #dfe2e7; }
.konsola .z { color: var(--akcent); }
.konsola .ok::before { content: "✓ "; color: var(--ok); }
.konsola .wy { color: var(--tekst-2); }
.konsola .k { color: #ff9d47; }
.konsola .s { color: #7fe0a6; }
.konsola .v { color: #9cc2ff; }
.konsola .t { color: #e6c07b; }
.konsola .c { color: #7b8490; }
.kursor { display: inline-block; width: .58em; height: 1.05em; margin-left: 1px; background: var(--akcent); vertical-align: text-bottom; animation: mig 1s steps(1) infinite; }
.polecenia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 16px; background: #0c0e12; border-top: 1px dashed var(--linia); font: 400 12.5px/1 var(--mono); color: var(--tekst-2); }
.polecenia span { margin-right: 4px; }
.polecenia button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px #3a414d; color: var(--tekst); font: 500 13px/1 var(--mono); cursor: pointer; transition: box-shadow .2s, background .2s, transform .2s; }
.polecenia button::before { content: "$ "; color: var(--akcent); }
.polecenia button:hover { box-shadow: inset 0 0 0 1px var(--akcent); background: rgba(255, 138, 31, .08); transform: translateY(-1px); }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s; }
.swiatlo body::before { opacity: 1; background-image: linear-gradient(rgba(255, 138, 31, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 138, 31, .3) 1px, transparent 1px); background-size: 64px 64px; background-position: 0 calc(var(--sy, 0px) * -1); -webkit-mask-image: radial-gradient(circle 300px at var(--mx, 72%) var(--my, 30%), #000, transparent); mask-image: radial-gradient(circle 300px at var(--mx, 72%) var(--my, 30%), #000, transparent); }
.swiatlo body::after { opacity: 1; background: radial-gradient(circle 480px at var(--mx, 72%) var(--my, 30%), rgba(255, 138, 31, .08), transparent 70%); }
.swiatlo .wejscie::before { transform: translate(calc(var(--nx, 0) * -90px), calc(var(--ny, 0) * -60px)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.scena { perspective: 1400px; }
.wejscie .siatka > * { min-width: 0; }
.swiatlo .okno { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.kafel, .praca, .okno, .branze { position: relative; }
.kafel::before, .praca::before, .okno::before, .branze::before, .drzwi-karta::before, a.karta::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; background: radial-gradient(circle 260px at var(--kx, 50%) var(--ky, 50%), var(--akcent), transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; pointer-events: none; }
.kafel:hover::before, .praca:hover::before, .okno:hover::before, .branze:hover::before, .drzwi-karta:hover::before, a.karta:hover::before, .kafel.aktywny::before, .praca.aktywny::before, .drzwi-karta.aktywny::before, a.karta.aktywny::before, .krok.aktywny .nr { opacity: 1; }
.krok .nr { transition: background .3s, color .3s, box-shadow .3s; }
.krok.aktywny .nr { background: var(--akcent); color: var(--akcent-tekst); box-shadow: 0 0 24px rgba(255, 138, 31, .55); }

/* Układ pod sprzedaż: rozwijane usługi, wezwania, studia aplikacji, karta spotkania, pasek na telefonie */
.wysuw { position: relative; }
.menu summary { padding: 10px 12px; border-radius: 8px; color: var(--tekst-2); transition: color .2s, background .2s; }
.menu summary::after { content: " ▾"; color: var(--akcent); }
.menu summary:hover, .wysuw[open] summary { color: var(--tekst); background: var(--panel-2); }
.wysuw .lista { position: absolute; left: 0; top: calc(100% + 14px); width: 300px; background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; padding: 8px; box-shadow: 0 30px 60px -20px #000; }
.wysuw .lista a { display: block; padding: 13px 14px; border-radius: 10px; color: var(--tekst); font: 500 14px/1.2 var(--mono); }
.wysuw .lista a.wszystkie { color: var(--akcent); border-top: 1px solid var(--linia); border-radius: 0 0 10px 10px; margin-top: 6px; }
.rozmowa .lista a.pierwsza { background: rgba(255, 138, 31, .1); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .5); margin-bottom: 4px; }
.wezwanie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 96px; padding: 20px 24px; border: 1px dashed #3a414d; border-radius: 14px; font-size: 18px; color: #c9cdd4; }
.wezwanie a { font: 600 15px/1 var(--mono); color: var(--akcent); padding: 12px 0; }
.wezwanie a:hover { text-decoration: underline; }
.studia { display: grid; gap: 18px; }
.studium { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 44px; align-items: center; padding: 44px 44px 0; background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--linia); border-radius: 24px; overflow: hidden; }
.studium.odwrotnie .ekrany { order: -1; }
.studium .tresc { padding-bottom: 44px; }
.app { display: flex; align-items: center; gap: 16px; }
.app img { width: 64px; height: 64px; border-radius: 15px; }
.app h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; }
.app span { font: 400 13.5px/1.4 var(--mono); color: var(--tekst-2); }
.app .stan { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 138, 31, .12); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .55); color: var(--akcent); font: 500 12.5px/1 var(--mono); font-style: normal; letter-spacing: 0; }
.studium dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px 18px; margin: 28px 0 0; }
.studium dt { font: 500 12.5px/1.9 var(--mono); color: var(--akcent); }
.studium dd { margin: 0; color: #c9cdd4; font-size: 16px; }
.studium .znaczki { margin-top: 22px; }
.studium .akcje { margin-top: 26px; }
.ekrany { position: relative; align-self: end; display: flex; justify-content: center; align-items: flex-end; min-height: 360px; }
.ekrany .tel { width: min(250px, 62%); border-radius: 32px 32px 0 0; border: 7px solid #2a3039; border-bottom: 0; }
.ekrany .przegl { width: 90%; margin-right: auto; border-radius: 12px 12px 0 0; border: 1px solid #3a414d; border-bottom: 0; }
.ekrany.dwa .tel { position: absolute; right: 0; bottom: 0; width: 32%; border-width: 5px; border-radius: 24px 24px 0 0; box-shadow: -24px 0 50px -12px #000; }
.spotkanie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; margin-bottom: 22px; border-radius: 14px; background: rgba(255, 138, 31, .08); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .5); scroll-margin-top: 110px; }
.spotkanie b { display: block; font-size: 18px; }
.spotkanie small { font: 400 13px/1.5 var(--mono); color: var(--tekst-2); }
.pasek-dol { display: none; }

/* Panel „Porozmawiajmy” i menu na telefonie */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.rozmowa, .menu-m { position: relative; }
.rozmowa .lista, .menu-m nav { position: absolute; right: 0; top: calc(100% + 12px); width: min(360px, 100vw - 32px); background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; padding: 8px; box-shadow: 0 30px 60px -20px #000; }
.rozmowa .lista a, .menu-m nav a { display: block; padding: 14px 16px; border-radius: 10px; transition: background .2s; }
.rozmowa .lista a:hover, .menu-m nav a:hover { background: var(--panel-2); }
.rozmowa .lista b { display: block; font-size: 16.5px; font-weight: 600; }
.rozmowa .lista b::before { content: "> "; color: var(--akcent); font-family: var(--mono); }
.rozmowa .lista small { font: 400 13px/1.5 var(--mono); color: var(--tekst-2); }
.menu-m { display: none; margin-left: auto; }
.menu-m summary { width: 44px; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px #3a414d; display: grid; place-content: center; gap: 5px; }
.menu-m summary i { display: block; width: 18px; height: 2px; background: var(--tekst); border-radius: 2px; }
.menu-m nav a { font: 500 16px/1 var(--mono); }

/* Strzałki taśmy, branże, formularz */
button.przycisk { border: 0; }
.strzalki { display: flex; flex-wrap: wrap; gap: 8px; }
.strzalki button { width: 48px; padding: 0; justify-content: center; font-size: 18px; }
.branze { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 48px; background: var(--panel); border: 1px solid var(--linia); border-radius: 24px; }
.chipy { display: flex; flex-wrap: wrap; gap: 10px; }
.chipy a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px #3a414d; font: 500 14.5px/1 var(--mono); transition: box-shadow .2s, background .2s, transform .2s; }
.chipy a::before { content: "#"; color: var(--akcent); margin-right: 3px; }
.chipy a:hover { box-shadow: inset 0 0 0 1px var(--akcent); background: rgba(255, 138, 31, .08); transform: translateY(-2px); }
.chipy a.wszystkie { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
.chipy a.wszystkie::before { content: none; }
.sklep { font: 400 13px/1 var(--mono); color: var(--tekst-2); }
.sklep::before { content: "✓ "; color: var(--ok); }
.formularz { display: grid; gap: 14px; }
.formularz label { display: grid; gap: 7px; font: 500 13px/1.3 var(--mono); color: var(--tekst-2); }
.formularz input, .formularz select, .formularz textarea { width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/1.4 var(--prosty); color: var(--tekst); background: #0c0e12; border: 1px solid #3a414d; border-radius: 10px; transition: border-color .2s; }
.formularz input:focus, .formularz select:focus, .formularz textarea:focus { border-color: var(--akcent); outline: 0; box-shadow: 0 0 0 3px rgba(255, 138, 31, .25); }
.formularz textarea { resize: vertical; }
.formularz .para { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formularz .przycisk { justify-self: start; }
.kontakt .drobne { margin: 0; max-width: none; font-size: 13px; color: var(--tekst-2); }
.kontakt .drobne a { text-decoration: underline; }


@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .menu { display: none; }
  .menu-m { display: block; position: static; }
  .studium { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px 0; }
  .studium.odwrotnie .ekrany { order: 0; }
  .studium .tresc { padding-bottom: 0; }
  .studium dl { grid-template-columns: 1fr; gap: 2px; }
  .studium dd { margin-bottom: 12px; }
  .ekrany { min-height: 0; }
  .wezwanie { margin-bottom: 64px; font-size: 16.5px; padding: 16px 18px; }
  .pasek-dol { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 12, 15, .93); backdrop-filter: blur(12px); border-top: 1px solid var(--linia); }
  .pasek-dol a { display: grid; place-content: center; min-height: 48px; border-radius: 10px; box-shadow: inset 0 0 0 1px #3a414d; font: 600 15px/1 var(--mono); }
  .pasek-dol a.mocny { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
  .stopka { padding-bottom: 170px; }
  .menu-m nav { left: 16px; right: 16px; top: 74px; width: auto; }
  .gora .ramka { gap: 10px; }
  .gora .przycisk { min-height: 44px; padding: 0 14px; }
  .branze { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
  .formularz .para { grid-template-columns: 1fr; }
  .kolumny { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .kolumny > div:first-child { grid-column: 1 / -1; }
  .stopka { padding-top: 40px; }
  .wejscie { padding: 44px 0 56px; }
  .wejscie .siatka, .aplikacja .pudlo, .kontakt .pudlo { grid-template-columns: 1fr; gap: 36px; }
  .kafle { grid-template-columns: 1fr; }
  .kafel h3 { margin-top: 22px; }
  .sekcja { padding: 68px 0; }
  .kroki { grid-template-columns: 1fr; gap: 28px; }
  .kroki::before { left: 17px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(var(--akcent), var(--linia)); }
  .krok { padding: 0 0 0 56px; }
  .krok .nr { position: absolute; left: 0; top: 0; }
  .krok h3 { margin-top: 4px; }
  .aplikacja .pudlo { padding: 32px 24px 0; }
  .aplikacja .tekst { padding-bottom: 0; }
  .kontakt .pudlo { padding: 40px 24px; }
  .zegar b { font-size: 20px; }
  .konsola { font-size: 11.5px; padding: 12px 14px; }
  .polecenia { padding: 12px 14px 14px; }
  .polecenia button { min-height: 44px; }
  .zegar span { font-size: 11.5px; }
}

/* ===== Podstrony na znacznikach, które składa panel (.start.podstrona, .tresc-pod, .blok, .pytania, .siatka, .wpis) ===== */
.ramka { width: min(1240px, 100% - 48px); margin-inline: auto; }
.start.podstrona { position: relative; overflow: hidden; padding: 56px 0 44px; }
.start.podstrona::before { content: ""; position: absolute; width: 700px; height: 700px; right: -200px; top: -300px; background: radial-gradient(closest-side, rgba(255, 138, 31, .17), transparent); pointer-events: none; }
.start.podstrona .ramka { position: relative; }
.okruszki { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font: 400 13px/1.3 var(--mono); color: var(--tekst-2); }
.okruszki i { font-style: normal; color: #4a515d; }
.okruszki a { padding: 4px 0; }
.okruszki a:hover { color: var(--akcent); }
.okruszki span { color: var(--tekst); }
.nadtytul { font: 500 13px/1.4 var(--mono); color: var(--akcent); }
.nadtytul::before { content: "// "; color: var(--tekst-2); }
.start.podstrona h1 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.035em; margin: 16px 0 20px; max-width: 22ch; }
.wstep { color: #c9cdd4; font-size: 18.5px; max-width: 64ch; }
.start.podstrona .akcje { margin-top: 28px; }
.meta-wpisu { margin-top: 18px; font: 400 13px/1.6 var(--mono); color: var(--tekst-2); }
.tresc-pod { padding-bottom: 72px; }
.tresc-pod.z-bokiem { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.blok { padding: 36px 0; border-top: 1px solid var(--linia); max-width: 800px; }
.blok h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; margin-bottom: 16px; scroll-margin-top: 96px; }
.blok p { color: #c9cdd4; margin-bottom: 14px; }
.blok p:last-child { margin-bottom: 0; }
.blok p a, .blok li a { color: var(--tekst); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s; }
.blok p a:hover, .blok li a:hover { color: var(--akcent); }
.blok ul, .blok ol { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 12px; color: #c9cdd4; }
.blok ul li { position: relative; padding-left: 28px; }
.blok ul li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-family: var(--mono); }
.blok ol { counter-reset: krok; }
.blok ol li { counter-increment: krok; position: relative; padding-left: 50px; min-height: 34px; }
.blok ol li::before { content: counter(krok, decimal-leading-zero); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-content: center; border-radius: 9px; border: 1px solid var(--akcent); color: var(--akcent); font: 600 12.5px/1 var(--mono); }
.wpis h2 { margin-top: 38px; }
.wpis > h2:first-of-type { margin-top: 30px; }
.spis { margin-bottom: 28px; padding: 20px 22px; border-radius: 14px; background: var(--panel); border: 1px solid var(--linia); }
.spis b { display: block; margin-bottom: 12px; font: 500 13px/1 var(--mono); color: var(--akcent); }
.spis ol { gap: 4px; margin: 0; counter-reset: none; }
.spis ol li { counter-increment: none; padding-left: 0; min-height: 0; }
.spis ol li::before { content: none; }
.spis ol li a { display: block; padding: 7px 0; text-decoration: none; color: #c9cdd4; font-size: 15.5px; }
.spis ol li a::before { content: "> "; color: var(--akcent); font-family: var(--mono); }
.siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
a.karta { position: relative; display: block; padding: 22px; background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; transition: transform .25s, background .25s; }
a.karta:hover, a.karta.aktywny { transform: translateY(-4px); background: var(--panel-2); }
a.karta small { display: block; margin-bottom: 12px; font: 400 12.5px/1 var(--mono); color: var(--tekst-2); }
a.karta h3 { font-size: 18px; line-height: 1.28; margin-bottom: 8px; }
a.karta p { margin: 0; font-size: 14.5px; color: var(--tekst-2); }
.siatka.wpisy a.karta { padding: 26px; }
.siatka.wpisy a.karta h3 { font-size: 21px; }
.pytania details { margin-bottom: 10px; border: 1px solid var(--linia); border-radius: 12px; background: var(--panel); transition: border-color .2s; }
.pytania details[open] { border-color: #3a414d; }
.pytania summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 18px; font-weight: 600; }
.pytania summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-content: center; border-radius: 8px; box-shadow: inset 0 0 0 1px #3a414d; color: var(--akcent); font: 500 16px/1 var(--mono); transition: transform .25s; }
.pytania details[open] summary::after { content: "−"; transform: rotate(180deg); }
.pytania details > p { padding: 0 18px 16px; margin: 0; }
.autor p { padding: 20px 22px; border-radius: 14px; background: var(--panel); border-left: 3px solid var(--akcent); font-size: 15.5px; }
.zakonczenie { border-top: 0; padding-top: 0; }
.bok { position: sticky; top: 92px; display: grid; gap: 14px; margin-top: 36px; }
.karta-rozmowa { display: grid; gap: 10px; padding: 24px; border-radius: 18px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .45); }
.karta-rozmowa .osoba { margin: 0 0 8px; }
.karta-rozmowa .tytul { font-size: 20px; line-height: 1.2; }
.karta-rozmowa p { font: 400 13px/1.5 var(--mono); color: var(--tekst-2); margin-bottom: 8px; }
.karta-rozmowa .przycisk { justify-content: center; }
.karta-rozmowa .tel { font: 500 15px/1 var(--mono); padding: 12px 0 4px; }
.karta-rozmowa .tel::before { content: "> "; color: var(--akcent); }
.karta-rozmowa .tel:hover { color: var(--akcent); }

/* Konsola na dole podstron */
.konsola-dol { padding: 0 0 96px; }
.okno.poziome .dwie-czesci { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.okno.poziome .lewa-czesc { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--linia); }
.okno.poziome .konsola { border-top: 0; }

/* Kontakt: trzy drogi, kalendarz, wizytówka */
.drzwi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.drzwi.pion { grid-template-columns: 1fr; margin-top: 0; }
.drzwi-karta { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 22px 24px; background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; transition: transform .25s, background .25s; }
.drzwi-karta:hover, .drzwi-karta.aktywny { transform: translateY(-3px); background: var(--panel-2); }
.drzwi-karta .nr { grid-column: 1 / -1; font: 500 13px/1 var(--mono); color: var(--akcent); margin-bottom: 14px; }
.drzwi.pion .drzwi-karta .nr { display: none; }
.drzwi-karta b { font-size: 20px; line-height: 1.2; }
.drzwi-karta small { grid-column: 1; font: 400 13px/1.5 var(--mono); color: var(--tekst-2); }
.drzwi-karta i { grid-column: 2; grid-row: 2 / span 2; width: 42px; height: 42px; display: grid; place-content: center; border-radius: 10px; box-shadow: inset 0 0 0 1px #3a414d; font-style: normal; font-size: 18px; transition: background .2s, color .2s, transform .3s; }
.drzwi.pion .drzwi-karta i { grid-row: 1 / span 2; }
.drzwi-karta:hover i { background: var(--akcent); color: var(--akcent-tekst); transform: translateX(3px); }
.drzwi-karta.glowna { background: rgba(255, 138, 31, .09); border-color: rgba(255, 138, 31, .55); }
.drzwi-karta.glowna i { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
.rozmowa-siatka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.rozmowa-siatka .podtytul { margin-bottom: 28px; color: #c9cdd4; }
.kalendarz .srodek { padding: 24px; display: grid; gap: 12px; }
.krok-kal { font: 500 13px/1 var(--mono); color: var(--akcent); margin-top: 6px; }
.kalendarz .dni { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kalendarz .godziny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kalendarz .dni button, .kalendarz .godziny button { min-height: 52px; padding: 6px; border: 0; border-radius: 10px; background: #0c0e12; box-shadow: inset 0 0 0 1px #3a414d; color: var(--tekst); font: 500 14px/1.25 var(--mono); cursor: pointer; transition: box-shadow .2s, background .2s, transform .15s; }
.kalendarz .dni button small { display: block; font-size: 11.5px; color: var(--tekst-2); }
.kalendarz button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--akcent); }
.kalendarz button[aria-pressed="true"] { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
.kalendarz button[aria-pressed="true"] small { color: var(--akcent-tekst); }
.kalendarz .wybrany { margin-top: 8px; padding: 14px 16px; border-radius: 10px; border: 1px dashed #3a414d; font: 500 14px/1.4 var(--mono); }
.kalendarz .przycisk:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.kalendarz .drobne { font-size: 13px; color: var(--tekst-2); }
.wizytowka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 44px; background: var(--panel); border: 1px solid var(--linia); border-radius: 24px; }
.wizytowka address { margin-top: 18px; font-style: normal; color: #c9cdd4; line-height: 1.7; }
.wizytowka address b { display: block; color: var(--tekst); }
.wizytowka dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px 18px; margin: 0; align-content: center; }
.wizytowka dt { font: 500 12.5px/1.9 var(--mono); color: var(--akcent); }
.wizytowka dd { margin: 0; color: #c9cdd4; }
.wizytowka dd a { text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: 3px; }

/* Animacje dobre na telefonie: pasek postępu, wciśnięcie, błysk przycisku, płynne przejście między stronami, pisane etykiety */
.postep { position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 3px; background: linear-gradient(90deg, var(--akcent), #ffc078); transform-origin: 0 50%; transform: scaleX(var(--postep, 0)); pointer-events: none; }
.przycisk:active, .drzwi-karta:active, .kafel:active, a.karta:active, .chipy a:active, .polecenia button:active, .pasek-dol a:active { transform: scale(.97); transition-duration: .08s; }
.wejscie .przycisk:not(.pusty), .pasek-dol a.mocny { position: relative; overflow: hidden; }
.swiatlo .wejscie .przycisk:not(.pusty)::after, .swiatlo .pasek-dol a.mocny::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); animation: blysk 5.5s ease-in-out infinite; }
@keyframes blysk { 0%, 72% { left: -60%; } 100% { left: 130%; } }
.swiatlo .ekrany .tel { transform: translateY(var(--tel, 0px)); transition: transform .2s linear; }
.etykieta.pisana::after { content: "▍"; color: var(--akcent); animation: mig 1s steps(1) infinite; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

@media (max-width: 900px) {
  .start.podstrona { padding: 36px 0 32px; }
  .tresc-pod.z-bokiem { grid-template-columns: 1fr; gap: 0; }
  .bok { position: static; margin: 8px 0 0; }
  .blok { padding: 28px 0; }
  .konsola-dol { padding-bottom: 64px; }
  .okno.poziome .dwie-czesci { grid-template-columns: 1fr; }
  .okno.poziome .lewa-czesc { border-right: 0; border-bottom: 1px solid var(--linia); }
  .drzwi { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .drzwi-karta .nr { display: none; }
  .drzwi-karta i { grid-row: 1 / span 2; }
  .rozmowa-siatka, .wizytowka { grid-template-columns: 1fr; gap: 28px; }
  .wizytowka { padding: 28px 22px; }
  .wizytowka dl { grid-template-columns: 1fr; gap: 2px; }
  .wizytowka dd { margin-bottom: 12px; }
  .kalendarz .srodek { padding: 18px 14px; }
  .kalendarz .dni { gap: 6px; }
  .kalendarz .dni button { font-size: 13px; padding: 6px 2px; }
}

/* ===== Dopasowanie do znaczników generatora i elementy przeniesione ze starego arkusza ===== */
.pomin { position: absolute; left: -9999px; }
.pomin:focus { left: 16px; top: 16px; z-index: 60; background: var(--akcent); color: var(--akcent-tekst); padding: 10px 14px; border-radius: 8px; }
h1 em { font-style: normal; color: var(--akcent); }
.logo span { display: inline-flex; }
.menu .jezyk { color: var(--tekst); }
.droga-wiersz { display: block; }
.gora details > summary::-webkit-details-marker { display: none; }
.kafel .ikona, a.karta .ikona { display: none; }
.naglowek { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.naglowek h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.06; }
.naglowek p { color: var(--tekst-2); font-size: 18.5px; }
.sekcja.inna { background: transparent; }
.dalej { font: 500 13.5px/1 var(--mono); color: var(--akcent); }
a.karta .dalej { display: inline-block; margin-top: 14px; }
article.karta { padding: 24px; background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; }
article.karta h3 { font-size: 20px; margin-bottom: 12px; }
.aplikacja { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.aplikacja .tekst { display: grid; gap: 16px; justify-items: start; padding-bottom: 0; }
.aplikacja .tekst p { color: var(--tekst-2); font-size: 18px; margin: 0; max-width: none; }
.aplikacja .ikona-apki { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.znaczek { font: 500 13px/1 var(--mono); border: 1px solid var(--linia); border-radius: 8px; padding: 8px 12px; color: var(--tekst-2); }
.telefony { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.telefony img { border-radius: 16px; border: 1px solid var(--linia); background: #0b0b0d; }
.telefony img:nth-child(2) { transform: translateY(26px); }
.lista-cech { display: grid; gap: 10px; padding: 0; margin: 4px 0 8px; list-style: none; }
.lista-cech li { position: relative; padding-left: 28px; color: var(--tekst-2); }
.lista-cech li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-family: var(--mono); }
.pole { display: grid; gap: 7px; }
.pole label { font: 500 13px/1.3 var(--mono); color: var(--tekst-2); }
.pole label small { font-weight: 400; }
.pole input, .pole textarea, .pole select { width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/1.4 var(--prosty); color: var(--tekst); background: #0c0e12; border: 1px solid #3a414d; border-radius: 10px; transition: border-color .2s; }
.pole textarea { min-height: 130px; resize: vertical; }
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: 0; border-color: var(--akcent); box-shadow: 0 0 0 3px rgba(255, 138, 31, .25); }
.dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zgoda { font-size: 13px; color: var(--tekst-2); }
.zgoda a { color: var(--tekst); text-decoration: underline; }
.kontakt .zgoda { margin: 0; max-width: none; font-size: 13px; color: var(--tekst-2); }
.kontakt p#blad { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--akcent); color: var(--tekst); }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dla-czytnika { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.blok .adres-real { font: 500 13.5px/1 var(--mono); margin-bottom: 14px; }
.blok .adres-real a { color: var(--akcent); text-decoration: none; }
.blok .zrzut { width: 100%; height: auto; border: 1px solid var(--linia); border-radius: 12px; margin-bottom: 16px; }
.blok .cechy { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.blok .cechy li { font: 400 12.5px/1 var(--mono); border: 1px solid var(--linia); border-radius: 6px; padding: 7px 10px; color: #c9cdd4; margin: 0; }
.blok .cechy li::before { content: none; }
.tekstowa { padding: clamp(48px, 7vw, 90px) 0; }
.tekstowa .ramka { max-width: 760px; }
.tekstowa h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 14px; }
.tekstowa h2 { font-size: 24px; margin: 38px 0 10px; }
.tekstowa p, .tekstowa li { color: #c9cdd4; margin-bottom: 12px; }
.tekstowa a:not(.przycisk) { color: var(--tekst); text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: 3px; }
.tekstowa .meta { font: 400 13px/1.6 var(--mono); color: var(--tekst-2); margin-bottom: 30px; }
.od-razu a { white-space: nowrap; }
.wpis-start h1 { max-width: 24ch; font-size: clamp(30px, 4.4vw, 54px); }
.wpis > :first-child { margin-top: 0; }
.wpis h3 { font-size: 19px; margin: 26px 0 10px; }
.wpis code { font-family: var(--mono); font-size: .88em; background: var(--panel); border: 1px solid var(--linia); border-radius: 6px; padding: 1px 6px; color: var(--tekst); }
.wpis blockquote { margin: 20px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--akcent); }
.tabela { overflow-x: auto; margin: 8px 0 22px; border: 1px solid var(--linia); border-radius: 14px; }
.wpis table { width: 100%; min-width: 560px; border-collapse: collapse; }
.wpis th, .wpis td { text-align: left; vertical-align: top; padding: 11px 14px; font-size: 15.5px; line-height: 1.5; border-top: 1px solid var(--linia); color: #c9cdd4; }
.wpis th { color: var(--tekst); font-weight: 600; background: var(--panel); border-top: 0; }
.wpis td:first-child { color: var(--tekst); font-weight: 600; }
.rezerwacja { display: grid; gap: 14px; margin-top: 30px; }
.kalendarz .rezerwacja { margin-top: 0; padding: 24px; }
.rezerwacja h2 { font: 500 13px/1 var(--mono); color: var(--akcent); margin: 10px 0 0; letter-spacing: 0; }
.rez-dni { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 8px; margin: 0 -4px; scroll-snap-type: x proximity; }
.rez-dni button, .rez-godziny button { font: 500 14px/1.25 var(--mono); color: var(--tekst); background: #0c0e12; border: 0; box-shadow: inset 0 0 0 1px #3a414d; border-radius: 10px; cursor: pointer; transition: box-shadow .2s, background .2s; }
.rez-dni button { flex: 0 0 auto; min-width: 78px; min-height: 52px; padding: 10px 12px; scroll-snap-align: start; }
.rez-dni button small, .rez-godziny button small { display: block; font-weight: 400; color: var(--tekst-2); font-size: 12px; }
.rez-godziny { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.rez-godziny button { min-height: 48px; padding: 12px 8px; }
.rez-dni button:hover, .rez-godziny button:hover { box-shadow: inset 0 0 0 1px var(--akcent); }
.rez-dni button[aria-pressed="true"], .rez-godziny button[aria-pressed="true"] { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
.rez-dni button[aria-pressed="true"] small, .rez-godziny button[aria-pressed="true"] small { color: var(--akcent-tekst); }
.rez-formularz { margin-top: 10px; scroll-margin-top: 90px; display: grid; gap: 14px; }
.rez-wybrany, .tekstowa .rez-wybrany { font: 500 14px/1.4 var(--mono); color: var(--tekst); }
.rez-forma { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.rez-forma legend { font: 500 13px/1.3 var(--mono); color: var(--tekst-2); margin-bottom: 8px; width: 100%; }
.rez-forma label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rez-forma input { accent-color: var(--akcent); width: 18px; height: 18px; }
.rez-komunikat { padding: 18px 20px; border: 1px solid var(--linia); border-radius: 14px; background: #0c0e12; margin: 0; }
.rez-komunikat.blad { border-color: var(--akcent); }
.rez-komunikat h2 { margin-top: 0; }
.przycisk.cichy { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px #3a414d; }
.przycisk.cichy:hover { box-shadow: inset 0 0 0 1px var(--akcent); background: rgba(255, 138, 31, .08); }
@media (max-width: 900px) {
  .aplikacja { grid-template-columns: 1fr; }
  .dwa { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tabela.karty-tel { border: 0; border-radius: 0; overflow: visible; }
  .karty-tel table, .karty-tel tbody, .karty-tel tr, .karty-tel td { display: block; width: 100%; min-width: 0; }
  .karty-tel thead { display: none; }
  .karty-tel tr { background: var(--panel); border: 1px solid var(--linia); border-radius: 14px; padding: 6px 0 10px; margin-bottom: 12px; }
  .wpis .karty-tel td { border-top: 0; padding: 6px 16px; }
  .wpis .karty-tel td:first-child { font-size: 17px; padding-top: 10px; }
  .karty-tel td[data-etykieta]::before { content: attr(data-etykieta); display: block; font: 500 12px/1.4 var(--mono); color: var(--akcent); margin-bottom: 2px; }
}
.blok.szeroki { max-width: none; }
.blok.szeroki .siatka { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Blok „dobór hostingu i kod partnera” (formularz do hosting.php) */
.rabat { display: grid; gap: 20px; margin: 36px 0; padding: 28px; max-width: 800px; border-radius: 18px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .45); scroll-margin-top: 96px; }
.rabat h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 12px 0 10px; }
.rabat p { color: #c9cdd4; margin: 0; }
.rabat form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.rabat form .przycisk, .rabat form .zgoda, .rabat form .ptaszek { grid-column: 1 / -1; }
.rabat .ptaszek { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--tekst-2); cursor: pointer; }
.rabat .ptaszek input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--akcent); }
.rabat form .przycisk { justify-self: start; }
.rabat .zgoda { font-size: 13px; color: var(--tekst-2); }
.rabat .zgoda[role] { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ok); color: var(--tekst); font-size: 15px; }
.rabat #rabat-blad { border-color: var(--akcent); }
@media (max-width: 640px) { .rabat { padding: 22px 18px; } .rabat form { grid-template-columns: 1fr; } }

/* Zgoda na Google Analytics: pasek przyklejony do dołu ekranu, nie przesuwa układu; na telefonie stoi nad paskiem „Zadzwoń / Umów rozmowę” */
.ciastka { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 780px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 14px 16px; border-radius: 14px; background: #171b22; box-shadow: inset 0 0 0 1px #3a414d, 0 18px 50px rgba(0, 0, 0, .6); font: 400 14px/1.5 var(--prosty); color: var(--tekst); }
.ciastka[hidden] { display: none; }
.ciastka p { margin: 0; flex: 1 1 320px; max-width: none; }
.ciastka p a { color: var(--tekst); text-decoration: underline; }
.ciastka div { display: flex; gap: 8px; }
.ciastka button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px #5a6270; font: 600 14px/1 var(--mono); cursor: pointer; }
.ciastka button[data-zgoda="1"] { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
.ciastka button:focus-visible, .ciastka-ust:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.ciastka-ust { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 900px) {
  .ciastka { left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); padding: 12px 14px; font-size: 13.5px; }
  .ciastka div { flex: 1 1 100%; }
  .ciastka button { flex: 1; }
}