/* Dla kancelarii — style tylko dla tej podstrony. Tokeny i komponenty bazowe z site.css. */

/* hero: gabinet o zmierzchu, powolny najazd; trzy linie nagłówka */
.hero--kanc .hero-h1{max-width:13ch;font-size:clamp(1.9rem,4.3vw,3.9rem)}
.hero--kanc .hero__sub{max-width:50ch}
.hero--kanc .film img{object-position:55% 50%;transform-origin:50% 55%;animation:kb 42s ease-in-out infinite alternate}
@keyframes kb{to{scale:1.08}}

/* zanim klient zadzwoni: trzy punkty podświetlają fragmenty ekranu wyszukiwarki */
.look{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.look{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.look__text{position:sticky;top:calc(16px + 62px + 2.5rem)}}
.look__rows{display:grid;gap:.25rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.look__row{display:grid;gap:.3rem;width:100%;text-align:left;padding:1rem 1.1rem;border:1px solid transparent;border-radius:var(--r-md);background:none;color:var(--fg-muted);font:inherit;cursor:pointer;transition:background var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft),color var(--d-hover) var(--ease-soft)}
.look__row b{font-weight:500;font-size:clamp(1.0625rem,1.4vw,1.25rem);letter-spacing:-.016em;color:var(--fg);line-height:1.3}
.look__row span{font-size:.9375rem;line-height:1.45}
.look__row:hover{background:var(--surface)}
.look__row.is-on{background:var(--surface);border-color:var(--hairline);color:var(--fg-muted)}
.look__row.is-on b{color:var(--fg)}
.serp{margin:0;border:1px solid var(--hairline);border-radius:var(--r-lg);background:#0E0F12;box-shadow:inset 0 1px 0 rgb(255 255 255 / .06);overflow:hidden}
.serp__bar{display:flex;align-items:center;gap:.75rem;margin:1rem 1.25rem 0;padding:.65rem 1rem;border:1px solid rgb(255 255 255 / .14);border-radius:var(--r-pill);background:rgb(255 255 255 / .05);font-size:.9375rem;color:var(--fg)}
.serp__lens{margin-left:auto;width:14px;height:14px;border-radius:50%;border:1.5px solid rgb(250 250 250 / .55);position:relative;flex:none}
.serp__lens::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:1.5px;background:rgb(250 250 250 / .55);rotate:45deg}
.serp__body{display:grid;gap:.6rem;padding:1rem 1.25rem 1.25rem}
.serp__item{position:relative;padding:.9rem 1rem;border-radius:var(--r-md);border:1px solid transparent;transition:border-color 380ms var(--ease-soft),background 380ms var(--ease-soft),opacity 380ms var(--ease-soft),box-shadow 380ms var(--ease-soft)}
.serp__item b{display:block;font-weight:500;font-size:1rem;letter-spacing:-.012em;line-height:1.3;color:var(--fg)}
.serp__item p{margin-top:.3rem;font-size:.8125rem;line-height:1.45;max-width:none}
.serp__tag,.serp__url,.serp__meta{display:block;font-size:.75rem;color:var(--fg-faint);line-height:1.4}
.serp__tag{font-weight:500;color:var(--fg-muted);margin-bottom:.15rem}
.serp__url{margin-bottom:.25rem}
.serp__card{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1rem;align-items:start}
.serp__map{width:4.5rem;aspect-ratio:1;border-radius:10px;background:radial-gradient(circle at 55% 45%,var(--accent) 0 4px,transparent 5px),repeating-linear-gradient(0deg,rgb(255 255 255 / .06) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgb(255 255 255 / .06) 0 1px,transparent 1px 12px),rgb(255 255 255 / .05)}
.serp__stars{display:block;font-size:.8125rem;color:var(--fg-muted);margin-top:.15rem}
.serp__stars i{font-style:normal;color:var(--accent);letter-spacing:.05em;font-size:.75rem;margin-right:.25rem}
.serp__btns,.serp__links{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.serp__btns em,.serp__links em{font-style:normal;font-size:.75rem;padding:.25rem .65rem;border-radius:var(--r-pill);border:1px solid rgb(255 255 255 / .16);color:var(--fg-muted)}
.serp__links em{border:0;padding:0;color:rgb(160 145 255 / .9)}
.serp__links em+em::before{content:"·";margin-right:.4rem;color:var(--fg-faint)}
.serp[data-k="1"] .serp__item[data-k="1"],.serp[data-k="2"] .serp__item[data-k="2"],.serp[data-k="3"] .serp__item[data-k="3"]{border-color:rgb(115 96 223 / .6);background:rgb(115 96 223 / .1);box-shadow:0 0 0 4px rgb(115 96 223 / .12)}
.serp[data-k="1"] .serp__item:not([data-k="1"]),.serp[data-k="2"] .serp__item:not([data-k="2"]),.serp[data-k="3"] .serp__item:not([data-k="3"]){opacity:.55}
.serp figcaption{padding:.8rem 1.25rem 1rem;border-top:1px solid var(--hairline);font-size:.8125rem;color:var(--fg-faint)}

/* sześć kroków: numer zapala się, gdy krok wjeżdża w ekran */
.ladder{list-style:none;margin:clamp(2.5rem,4vw,3.5rem) 0 0;padding:0;border-top:1px solid var(--hairline)}
.lstep{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1rem 1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--hairline);align-items:start}
@media (min-width:768px){.lstep{grid-template-columns:7rem minmax(0,1fr);padding:1.85rem 0}}
.lstep__n{font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:500;letter-spacing:-.03em;line-height:1;color:rgb(250 250 250 / .22);font-variant-numeric:tabular-nums;transition:color 600ms var(--ease-out)}
.lstep.is-on .lstep__n{color:var(--accent)}
.lstep h3{font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.02em;line-height:1.2;opacity:.5;translate:0 6px;transition:opacity 640ms var(--ease-out),translate 640ms var(--ease-out)}
.lstep p{margin-top:.6rem;font-size:.9375rem;max-width:58ch;opacity:.5;translate:0 6px;transition:opacity 640ms var(--ease-out) 60ms,translate 640ms var(--ease-out) 60ms}
.lstep.is-on h3,.lstep.is-on p{opacity:1;translate:0 0}
.lstep .link{display:inline-block;margin-top:.7rem;font-size:.875rem;color:var(--fg-muted);border-bottom:1px solid var(--hairline);transition:color var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft)}
.lstep .link:hover{color:var(--fg);border-bottom-color:rgb(255 255 255 / .5)}

/* czego nie obiecujemy: pięć zdań, lewa kolumna gruba */
.nots{margin-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--hairline)}
.not{display:grid;gap:.4rem 2rem;grid-template-columns:1fr;padding:1.35rem 0;border-bottom:1px solid var(--hairline);transition:background var(--d-hover) var(--ease-soft)}
@media (min-width:768px){.not{grid-template-columns:minmax(0,5fr) minmax(0,7fr);padding:1.6rem 0}}
.not b{font-weight:500;font-size:clamp(1.125rem,1.7vw,1.5rem);letter-spacing:-.02em;line-height:1.25;text-wrap:pretty}
.not p{font-size:.9375rem;max-width:52ch}

/* referencje: trzy listy + lista pozostałych realizacji */
.refs{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(3rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:900px){.refs{grid-template-columns:repeat(3,1fr)}}
.ref{display:flex;flex-direction:column;gap:1.1rem;padding:clamp(1.5rem,2.4vw,2rem);border:1px solid var(--hairline);border-radius:var(--r-lg);background:#0E0F12;box-shadow:inset 0 1px 0 rgb(255 255 255 / .06)}
.ref img{height:26px;width:auto;align-self:flex-start;opacity:.85}
.ref blockquote{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--fg);text-wrap:pretty}
.ref footer{font-size:.8125rem;color:var(--fg-faint);line-height:1.4}
.ref footer b{display:block;font-weight:500;color:var(--fg-muted);font-size:.9375rem}
.ref__what{margin-top:auto;padding-top:1rem;border-top:1px solid var(--hairline);font-size:.875rem;max-width:none}
.ref .link{font-size:.875rem;color:var(--fg-muted);border-bottom:1px solid var(--hairline);align-self:flex-start;transition:color var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft)}
.ref .link:hover{color:var(--fg);border-bottom-color:rgb(255 255 255 / .5)}
.more{list-style:none;margin:clamp(2rem,3vw,2.5rem) 0 0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--hairline)}
@media (min-width:768px){.more{grid-template-columns:repeat(2,1fr);gap:0 clamp(1.5rem,3vw,3rem)}}
.more a{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:center;padding:1rem .5rem;margin-inline:-.5rem;border-bottom:1px solid var(--hairline);border-radius:var(--r-sm);transition:background var(--d-hover) var(--ease-soft)}
.more a:hover{background:var(--surface)}
.more img{max-height:22px;max-width:5.5rem;width:auto;height:auto;opacity:.8}
.more span{font-size:.875rem;color:var(--fg-muted);line-height:1.4}
.more b{display:block;font-weight:500;color:var(--fg);font-size:.9375rem}

/* IT: cztery pola */
.itwrap{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.itwrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.itwrap__text{position:sticky;top:calc(16px + 62px + 2.5rem)}}
.itwrap__text .btn--ghost{margin-top:1.75rem}
.it{list-style:none;margin:0;padding:0;display:grid;gap:1px;grid-template-columns:1fr;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){.it{grid-template-columns:repeat(2,1fr)}}
.it li{background:var(--bg);padding:clamp(1.5rem,2.4vw,2rem);min-height:11rem;display:flex;flex-direction:column;gap:.6rem;transition:background var(--d-hover) var(--ease-soft)}
.it li:hover{background:var(--surface)}
.it b{font-weight:500;font-size:1.25rem;letter-spacing:-.018em;margin-top:auto}
.it p{font-size:.9375rem;max-width:none}

/* pytania: nagłówek z boku, lista z site.css */
.faq{display:grid;gap:clamp(1.5rem,4vw,4rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.faq{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.faq__text{position:sticky;top:calc(16px + 62px + 2.5rem)}}
.faq .qa{margin-top:0}
.faq .qa summary{font-size:clamp(1rem,1.3vw,1.125rem)}

/* zakończenie */
.end{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.end{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.end__actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:2rem}
.end__actions .btn--ghost{font-size:1.0625rem;font-variant-numeric:tabular-nums}
.end__meta{margin-top:1.25rem;font-size:.9375rem;color:var(--fg-faint);max-width:none}
.end__meta a{color:var(--fg-muted)}
.end__meta a:hover{color:var(--fg)}
.end__facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
@media (min-width:900px){.end__facts{margin-top:.6rem}}
.end__facts li{padding:1.1rem 0;border-bottom:1px solid var(--hairline);display:grid;gap:.2rem}
.end__facts b{font-weight:500;letter-spacing:-.014em}
.end__facts span{font-size:.9375rem;color:var(--fg-muted)}

@media (prefers-reduced-motion:reduce){
  .hero--kanc .film img{animation:none}
  .lstep h3,.lstep p{opacity:1;translate:0 0;transition:none}
  .lstep__n{color:var(--accent)}
  .serp__item{transition:none}
}