/* Above Pilot - theme "vectr" (system z dossier v2; paleta+logo+copy = brand) */
:root{
  --paper:#F7F8FB; --ice:#EAF2FB; --ink:#121B2B; --deep:#0E2A4E; --navy:#1C2F4A;
  --route:#274A80; --electric:#528DE0; --lumen:#5FA3E8;
  --muted:#4A5870; --subtle:#8B97AB; --hair:#DFE5EF;
  --ink-10:rgba(18,27,43,.10); --ink-16:rgba(18,27,43,.16);
  --pad-x:40px; --pad-y:192px;
  --ease-ui:cubic-bezier(.25,1,.5,1); --ease-in:cubic-bezier(.16,1,.3,1);
  --font:"Roboto",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto; }
body{ background:var(--paper); color:var(--ink); font-family:var(--font);
  font-size:18px; line-height:1.4; overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
[id]{ scroll-margin-top:6rem; }
/* sekcje glowne: ladowanie ROWNO z linia sekcji przy dolnej krawedzi topbara
   (76px = padding 14 + pille 48 + 14); 6rem wyzej zostaje dla naglowkow artykulow */
#main > section[id]{ scroll-margin-top:76px; }
:focus-visible{ outline:3px solid var(--electric); outline-offset:3px; border-radius:3px; }
.skip-link{ position:absolute; left:-999px; top:8px; z-index:300; background:var(--ink); color:#fff; padding:.7em 1.2em; }
.skip-link:focus{ left:8px; }

/* ---------- typografia (dossier: Roboto 500 + ciasny tracking) ---------- */
h1{ font-weight:500; font-size:clamp(64px,7.4vw,96px); line-height:.9; letter-spacing:-.06em; text-wrap:balance; }
.h2-64,h2{ font-weight:500; font-size:clamp(38px,4.6vw,64px); line-height:1.0; letter-spacing:-.05em; text-wrap:balance; }
h3{ font-weight:500; font-size:24px; line-height:1.2; letter-spacing:-.01em; }
.kicker{ font-size:12px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--route); margin-bottom:1.2rem; }
.lead{ font-size:clamp(20px,2vw,24px); line-height:1.25; font-weight:400; max-width:34ch; margin:1.4rem 0 3rem; }
p{ color:var(--muted); }
h1,h2,h3{ color:var(--ink); }

/* ---------- pille (dossier: h48 r156 14px UPPERCASE w400) ---------- */
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  height:48px; padding:0 24px; border-radius:156px; text-decoration:none;
  font-size:14px; font-weight:400; letter-spacing:.02em; text-transform:uppercase;
  border:0; cursor:pointer; white-space:nowrap;
  transition:background-color .3s var(--ease-ui), color .3s var(--ease-ui), transform .3s var(--ease-ui); }
.pill--dark{ background:var(--ink); color:#FCFCFC; }
.pill--dark:hover{ background:var(--route); }
.pill--glass{ background:var(--ink-10); color:var(--ink); backdrop-filter:blur(10px); }
.pill--glass:hover{ background:var(--ink-16); }
.pill--wide{ width:100%; }
.pill[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------- loader ---------- */
#loader{ position:fixed; inset:0; z-index:200; background:var(--paper); display:grid; place-items:center; }
#loader .lg{ width:96px; margin-inline:auto; overflow:visible; }
#loader .word{ margin-top:1.4rem; text-align:center; font-size:12px; letter-spacing:.42em;
  text-indent:.42em; color:var(--route); text-transform:uppercase; opacity:0; }
html.reduce #loader, html:not(.js) #loader{ display:none; }

/* ---------- topbar (dossier: linki lewo / logo centrum / pille prawo) ---------- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:14px var(--pad-x); transition:background-color .4s, box-shadow .4s; }
.topbar.scrolled{ background:rgba(247,248,251,.78); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hair); }
.topbar__left{ display:flex; gap:28px; }
.topbar__left a{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:.6em 0; }
.topbar__left a:hover{ color:var(--route); }
.topbar__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; justify-self:center; }
/* logo jak na obecnej stronie: czarny znak bez tla; bialy na ciemnych elementach */
.amark{ width:30px; height:30px; color:var(--ink); display:grid; place-items:center; }
.amark svg{ width:100%; height:100%; }
.footer .amark, [data-dark] .amark{ color:#FCFCFC; }
.topbar__name{ font-weight:500; font-size:17px; letter-spacing:-.02em; }
.topbar__right{ display:flex; gap:10px; justify-self:end; }

/* ---------- tlo hero+proces: malarska podroz canvas (journey) ---------- */
#scene3d{ position:fixed; inset:0; z-index:0; pointer-events:none; }
/* lvh: stala wysokosc niezalezna od chowajacego sie paska adresu na mobile -
   element nie rozciaga sie wzgledem bufora canvasa (kolo zostaje kolem) */
@supports (height:100lvh){ #scene3d{ height:100lvh; } }
#scene3d canvas{ width:100%; height:100%; display:block; }
/* reduce/no-js: zero animacji tla - czysty papier, tresc panelu zostaje */
html.reduce #ap-canvas, html:not(.js) #ap-canvas{ display:none; }

/* ---------- hero (CENTROWANY jak vectr) ---------- */
main{ position:relative; z-index:2; }
.hero{ position:fixed; inset:0; z-index:1; display:grid; place-content:center;
  text-align:center; padding:0 var(--pad-x); pointer-events:none; }
.hero h1{ max-width:14ch; margin-inline:auto; }
.hero h1 .accent{ color:var(--route); }
.hero__sub{ max-width:52ch; margin:1.6rem auto 0; font-size:clamp(19px,2vw,24px); line-height:1.25; color:var(--ink); }
.hero__hint{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  pointer-events:auto; font-size:14px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; padding:10px 2px 6px; border-bottom:1.5px solid var(--ink); }
.hero__hint:hover{ color:var(--route); border-color:var(--route); }
html.reduce .hero, html:not(.js) .hero{ position:relative; inset:auto; min-height:86svh; pointer-events:auto; }
.hero-spacer{ height:110svh; }
html.reduce .hero-spacer, html:not(.js) .hero-spacer{ display:none; }

/* ---------- flow (lista krokow NA scenie) ---------- */
.flow{ position:relative; }
html.js-live .flow{ height:560svh; }
.flow__wrapper{ padding:120px var(--pad-x) 60px; }
/* dvh, nie svh: na telefonie pasek przegladarki chowa sie przy scrollu i widoczny
   viewport rosnie - panel ma sledzic REALNY dol ekranu (svh zostawialby szczeline) */
html.js-live .flow__wrapper{ position:sticky; top:0; height:100svh; height:100dvh; display:grid; align-content:center; }
.flow__panel{ max-width:520px; }
.flow__h2{ font-size:clamp(28px,2.6vw,36px); letter-spacing:-.04em; margin-bottom:2.4rem; }
.fsteps{ display:grid; gap:14px; }
.fstep__row{ display:flex; align-items:center; gap:14px; }
.fnum{ font-size:14px; font-weight:500; min-width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; color:var(--ink); transition:background-color .4s var(--ease-ui), box-shadow .4s; }
.fstep h3{ font-size:18px; font-weight:400; color:var(--ink); transition:font-size .35s var(--ease-ui); }
.fstep__body{ overflow:clip; max-height:0; opacity:0; margin-left:54px;
  transition:max-height .5s var(--ease-ui), opacity .4s var(--ease-ui); }
.fstep__body p{ font-size:18px; line-height:1.4; color:var(--muted); max-width:38ch; padding-top:.5rem; }
.fstep.is-active .fnum{ background:#fff; box-shadow:0 2px 14px -6px rgba(18,27,43,.25); }
.fstep.is-active h3{ font-size:24px; font-weight:500; }
.fstep.is-active .fstep__body{ max-height:260px; opacity:1; }
.ftrack{ display:block; width:2px; height:56px; background:var(--ink-10); margin:14px 0 4px 2px; }
.ftrack i{ display:block; width:100%; height:100%; background:var(--ink); transform:scaleY(0); transform-origin:top; will-change:transform; }
html.reduce .fstep__body, html:not(.js) .fstep__body{ max-height:none; opacity:1; }
html.reduce .ftrack, html:not(.js) .ftrack{ display:none; }

/* ---------- chips (tresc 1:1; ciche) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--hair); border-radius:8px; padding:6px 10px; background:rgba(255,255,255,.55); }

/* ---------- sekcje solid (nad scena) ---------- */
.solid{ position:relative; background:var(--paper); padding:var(--pad-y) var(--pad-x); }
.solid + .solid{ border-top:1px solid var(--hair); }

/* hairline-kolumny (dossier: zero kart) */
.hcols{ display:grid; margin-top:1rem; }
.hcols--2{ grid-template-columns:repeat(2,1fr); }
.hcols--3{ grid-template-columns:repeat(3,1fr); }
.hcol{ padding:40px 32px 8px; border-left:1px solid var(--hair); }
.hcol:first-child{ border-left:0; padding-left:0; }
.hicon{ width:96px; height:96px; margin-bottom:28px; }
.hcol .tag{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--route); margin-bottom:22px; }
.hcol h3{ margin-bottom:14px; }
.hcol p{ max-width:40ch; }

/* ---------- statement ---------- */
.statement{ padding:calc(var(--pad-y) * .8) var(--pad-x); }
.statement__p{ font-weight:500; font-size:clamp(36px,4.6vw,64px); line-height:1.0;
  letter-spacing:-.05em; color:var(--ink); max-width:22ch; }
.statement__p .dim{ color:var(--electric); }

/* ---------- kontakt: split z pionowym hairlinem ---------- */
.split{ display:grid; grid-template-columns:1fr 1.1fr; gap:64px; position:relative; }
.split::before{ content:""; position:absolute; left:calc(47% - 32px); top:0; bottom:0; width:1px; background:var(--hair); }
.contact h2{ font-size:clamp(32px,3.4vw,48px); letter-spacing:-.045em; }
.contact__email{ font-size:18px; color:var(--route); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:.4em 0; }
.contact__email:hover{ color:var(--ink); }

/* formularz (dossier: label 18/600, input h48 r100 border subtle) */
.contact-form .field{ margin-bottom:22px; display:flex; flex-direction:column; gap:8px; }
.contact-form label, .contact-form legend{ font-size:18px; font-weight:500; color:var(--ink); }
.contact-form input[type="text"], .contact-form input[type="email"]{
  height:48px; border-radius:100px; border:1px solid #B2B1B8; background:transparent;
  padding:0 24px; font:inherit; font-size:18px; color:var(--ink); }
.contact-form textarea{ border-radius:20px; border:1px solid #B2B1B8; background:transparent;
  padding:14px 24px; font:inherit; font-size:18px; color:var(--ink); resize:vertical; min-height:120px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible{ outline:2px solid var(--electric); outline-offset:1px; border-color:var(--electric); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field--topic{ border:0; padding:0; margin-bottom:22px; }
.field--topic legend{ margin-bottom:10px; }
.topic-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.topic-chip{ position:relative; }
.topic-chip .chip-input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.topic-chip span{ display:inline-flex; align-items:center; height:40px; padding:0 18px;
  border-radius:100px; border:1px solid #B2B1B8; font-size:14px; text-transform:uppercase;
  letter-spacing:.02em; color:var(--ink); transition:all .25s var(--ease-ui); }
.topic-chip .chip-input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.topic-chip .chip-input:focus-visible + span{ outline:2px solid var(--electric); outline-offset:2px; }
.err, .form-error{ display:none; color:#B4231F; font-size:14px; }
.hp-field{ position:absolute; left:-9999px; }
.form-submit{ margin-top:8px; }
.form-proto-note{ font-size:13px; color:var(--subtle); margin-top:10px; }
.form-sent{ display:none; }
.form-noscript{ color:var(--muted); }

/* ---------- stopka (mega 3 kolumny + linki uslug i sociale) ---------- */
.footer{ position:relative; z-index:2; background:var(--ink); color:#FCFCFC; }
.mega{ display:grid; grid-template-columns:repeat(3,1fr); }
.mega__col{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:56px 40px; text-decoration:none; border-left:1px solid rgba(255,255,255,.14); }
.mega__col:first-child{ border-left:0; }
.mega__col span{ font-size:clamp(26px,2.6vw,36px); font-weight:500; letter-spacing:-.04em; }
.mega__col svg{ width:30px; height:30px; color:var(--lumen); transition:transform .35s var(--ease-ui); }
.mega__col:hover svg{ transform:translateX(10px); }
.mega__col:hover span{ color:var(--lumen); }
.footer__meta{ display:flex; flex-wrap:wrap; gap:28px 48px; align-items:center;
  padding:48px var(--pad-x); border-top:1px solid rgba(255,255,255,.14); }
.footer-services{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; font-size:15px; }
.footer-services-label{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:#A9BAD3; margin-right:10px; }
.footer-services a{ color:#DCE6F5; text-decoration:none; }
.footer-services a:hover{ color:var(--lumen); text-decoration:underline; }
.footer-social{ display:flex; gap:8px; margin-left:auto; }
.footer-social a{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color:#DCE6F5; border:1px solid rgba(255,255,255,.16); transition:all .25s var(--ease-ui); }
.footer-social a:hover{ color:var(--ink); background:var(--lumen); border-color:var(--lumen); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center;
  padding:18px var(--pad-x) 26px; border-top:1px solid rgba(255,255,255,.14);
  font-size:13px; color:#A9BAD3; }
.lang-switch{ display:flex; gap:14px; align-items:center; }
.lang-switch a{ text-decoration:none; color:#A9BAD3; padding:.4em 0; }
.lang-switch a:hover{ color:#fff; }
.lang-switch a.active{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer__bottom > span{ margin-left:auto; }

/* ---------- mobile ---------- */
@media (max-width:900px){
  :root{ --pad-x:20px; --pad-y:96px; }
  /* topbar mobile: padding 10 + burger/pille 44 + 10 */
  #main > section[id]{ scroll-margin-top:64px; }
  /* krotsze przejscie hero -> kroki: mniej pustego scrolla po zgasnieciu tekstu */
  .hero-spacer{ height:72svh; }
  .topbar{ grid-template-columns:auto 1fr auto; gap:10px; padding:10px var(--pad-x); }
  .topbar__left{ display:none; }
  .topbar__brand{ justify-self:start; }
  .topbar__right .pill--glass{ display:none; }
  .pill{ height:44px; padding:0 18px; font-size:13px; }
  h1{ font-size:clamp(44px,13vw,64px); }
  .hcols--2,.hcols--3{ grid-template-columns:1fr; }
  .hcol{ border-left:0; border-top:1px solid var(--hair); padding:32px 0 8px; }
  .hcol:first-child{ border-top:0; padding-top:0; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .split::before{ display:none; }
  .form-row{ grid-template-columns:1fr; }
  html.js-live .flow{ height:480svh; }
  /* mobile: panel krokow przyklejony do dolu, transparentne szklo nad scena */
  .flow__wrapper, html.js-live .flow__wrapper{ align-content:end; padding:0 14px calc(14px + env(safe-area-inset-bottom)); }
  .flow__panel{ background:transparent; border:0; border-radius:0; padding:0 6px;
    max-width:none; box-shadow:none; }
  .flow__panel h2, .fstep h3, .fstep__body p, .flow__kicker{
    text-shadow:0 1px 10px rgba(247,248,251,.95), 0 0 3px rgba(247,248,251,.9); }
  .fstep .chips .chip{ background:rgba(247,248,251,.72); }
  .flow__h2{ font-size:15px; letter-spacing:-.01em; margin-bottom:.9rem; color:var(--muted); font-weight:500; }
  .fsteps{ gap:6px; }
  .fstep__row{ gap:10px; }
  .fstep h3{ font-size:14.5px; }
  .fstep.is-active h3{ font-size:18px; }
  .fstep__body{ margin-left:44px; }
  .fstep__body p{ font-size:13.5px; line-height:1.45; max-width:none; padding-top:.3rem; }
  .fstep.is-active .fstep__body{ max-height:210px; }
  .ftrack{ height:26px; margin:8px 0 2px 2px; }
  .mega{ grid-template-columns:1fr; }
  .mega__col{ border-left:0; border-top:1px solid rgba(255,255,255,.14); padding:26px var(--pad-x); }
  .footer__meta{ padding:32px var(--pad-x); gap:22px 32px; }
  .footer-social{ margin-left:0; }
}

/* ---------- reveal (JS ustawia stany poczatkowe; default = widoczne) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}
html.reduce .flow, html:not(.js) .flow{ height:auto; }
html.reduce .flow__wrapper, html:not(.js) .flow__wrapper{ position:static; height:auto; }
html.reduce .fstep h3, html:not(.js) .fstep h3{ font-size:24px; font-weight:500; }

/* ---------- strony tresci: blog + uslugi (szkielet "cpage") ---------- */
.cpage .topbar{ position:sticky; top:0; }
.cmain{ max-width:1200px; margin:0 auto; padding:64px var(--pad-x) 110px; }
.topbar__left a.active{ color:var(--route); }

.breadcrumb{ display:flex; gap:10px; align-items:center; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--subtle); margin-bottom:38px; }
.breadcrumb a{ color:var(--subtle); text-decoration:none; }
.breadcrumb a:hover{ color:var(--route); }

/* artykul */
.article{ max-width:860px; margin:0 auto; }
.article-header h1{ font-size:clamp(34px,4.4vw,58px); line-height:1.04; letter-spacing:-.045em; max-width:24ch; }
.article-meta{ margin-top:20px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--subtle); }
.article .prose{ margin-top:52px; }
.prose{ font-size:18.5px; line-height:1.68; max-width:70ch; }
.prose p{ margin:0 0 1.2em; }
.prose h2{ font-size:clamp(24px,2.6vw,34px); line-height:1.12; letter-spacing:-.035em; margin:2.1em 0 .65em; }
.prose h3{ font-size:21px; margin:1.8em 0 .5em; }
.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.25em; color:var(--muted); }
.prose li{ margin:.35em 0; }
.prose li::marker{ color:var(--electric); }
.prose a{ color:var(--route); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--ink); }
.prose blockquote{ margin:1.6em 0; padding:.2em 0 .2em 22px; border-left:2px solid var(--electric);
  color:var(--ink); font-size:20px; }
.prose blockquote p{ color:inherit; }
.prose code{ background:var(--ice); border-radius:6px; padding:.12em .38em; font-size:.86em; }
.prose pre{ background:var(--ink); color:#DCE6F5; border-radius:14px; padding:20px 24px; overflow-x:auto; margin:0 0 1.4em; }
.prose pre code{ background:none; padding:0; font-size:14.5px; }
.prose img{ border-radius:14px; margin:1.6em 0; }
.prose hr{ border:0; border-top:1px solid var(--hair); margin:2.4em 0; }
.prose table{ border-collapse:collapse; width:100%; margin:0 0 1.4em; font-size:16px; }
.prose th,.prose td{ border-bottom:1px solid var(--hair); text-align:left; padding:10px 14px 10px 0; color:var(--muted); }
.prose th{ color:var(--ink); font-weight:500; }
.article-back{ margin-top:72px; padding-top:26px; border-top:1px solid var(--hair);
  font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.article-back a{ text-decoration:none; }
.article-back a:hover{ color:var(--route); }

/* blog: indeks jako hairline-wiersze (dossier: zero kart) */
.blog-index-header{ padding:8px 0 42px; }
.blog-index-header h1{ font-size:clamp(52px,7vw,92px); }
.blog-index-header .lead{ margin-bottom:0; max-width:52ch; }
.blog-list{ list-style:none; padding:0; margin:26px 0 0; border-top:1px solid var(--hair); }
.blog-item{ border-bottom:1px solid var(--hair); }
.blog-card{ display:grid; grid-template-columns:56px 150px 1fr; column-gap:28px; align-items:start;
  padding:38px 0; text-decoration:none; }
.blog-ghost{ font-size:14px; font-weight:500; color:var(--subtle); padding-top:7px; }
.blog-card-kicker{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--subtle); padding-top:8px; }
.blog-card h2{ font-size:clamp(22px,2.3vw,32px); line-height:1.1; letter-spacing:-.035em;
  transition:color .3s var(--ease-ui); }
.blog-card-desc{ grid-column:3; max-width:62ch; margin-top:10px; font-size:16.5px; line-height:1.5; }
.blog-go{ grid-column:3; margin-top:16px; display:inline-flex; gap:.5em; align-items:center;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--route); }
.blog-go .arr{ transition:transform .3s var(--ease-ui); }
.blog-card:hover h2{ color:var(--route); }
.blog-card:hover .arr{ transform:translateX(6px); }

/* uslugi */
.service{ max-width:900px; margin:0 auto; }
.service-hero h1{ font-size:clamp(38px,5vw,64px); letter-spacing:-.05em; line-height:1.0; }
.service-hero .lead{ margin:1.4rem 0 2rem; max-width:46ch; }
.service-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 24px;
  border-radius:156px; font-size:14px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
  transition:background-color .3s var(--ease-ui), color .3s var(--ease-ui); }
.btn-primary{ background:var(--ink); color:#FCFCFC; }
.btn-primary:hover{ background:var(--route); }
.btn-ghost{ background:var(--ink-10); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink-16); }
.service-body{ margin-top:56px; }
.service-closing{ margin-top:72px; padding-top:40px; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.service-closing h2{ font-size:clamp(24px,2.6vw,34px); letter-spacing:-.035em; }

@media (max-width:900px){
  .cmain{ padding:40px var(--pad-x) 72px; }
  .blog-card{ grid-template-columns:1fr; row-gap:6px; padding:28px 0; }
  .blog-ghost{ display:none; }
  .blog-card-kicker{ padding-top:0; }
  .blog-card-desc,.blog-go{ grid-column:auto; }
  .article-header h1{ font-size:clamp(30px,8.4vw,40px); }
  .blog-index-header h1{ font-size:clamp(44px,12vw,64px); }
}

/* ---------- fonty: Roboto self-host (CSP font-src 'self'; Apache 2.0) ---------- */
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:100 900; font-stretch:100%; font-display:swap;
  src:url(/assets/fonts/roboto-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:100 900; font-stretch:100%; font-display:swap;
  src:url(/assets/fonts/roboto-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- mobile menu (checkbox przed header; overlay pod topbarem) ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.menu-toggle{ position:absolute; left:-9999px; }
.burger{ display:none; width:44px; height:44px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger i{ display:block; width:22px; height:2px; background:var(--ink);
  transition:transform .3s var(--ease-ui); }
.mobile-menu{ display:none; }
@media (max-width:900px){
  .burger{ display:flex; }
  .mobile-menu{ display:flex; position:fixed; inset:0; z-index:55; background:var(--paper);
    flex-direction:column; justify-content:center; gap:0; padding:0 var(--pad-x);
    opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .35s var(--ease-ui), transform .35s var(--ease-ui); }
  .mobile-menu a{ font-size:clamp(32px,9vw,42px); font-weight:500; letter-spacing:-.04em;
    text-decoration:none; padding:.45em 0; border-bottom:1px solid var(--hair); }
  .mobile-menu a:last-child{ border-bottom:0; }
  .menu-toggle:checked ~ .mobile-menu{ opacity:1; transform:none; pointer-events:auto; }
  .menu-toggle:checked ~ header .burger i:first-of-type{ transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle:checked ~ header .burger i:last-of-type{ transform:translateY(-3.5px) rotate(-45deg); }
  .menu-toggle:checked ~ header.topbar{ background:var(--paper); }
}

/* ---------- formularz: stany walidacji / wysylki ---------- */
.field.invalid .err{ display:block; }
.field.invalid input, .field.invalid textarea{ border-color:#B4231F; }
.form-error.show{ display:block; }
.form-sent.show{ display:block; padding:18px 0; }
.form-sent h3{ margin-bottom:8px; }
.cf-turnstile-slot{ margin:4px 0 14px; }
.cf-turnstile-slot:empty{ margin:0; }

/* ---------- lenis 1.3.25 (MIT, vendored z dist/lenis.css) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---------- 404 ---------- */
.nf{ min-height:70svh; display:grid; align-content:center; justify-items:start; }
.nf__h1{ font-size:clamp(48px,7vw,92px); letter-spacing:-.055em; }
.nf__lead{ max-width:44ch; margin:1.2rem 0 2rem; }