/* =========================================================
   BUDUJWIDOCZNOŚĆ.PL, arkusz stylów
   Kierunek: spokojny, premium, jasne karty na ciepłym tle,
   miękkie cienie, zaokrąglenia, akcent w kolorze rdzy
   ========================================================= */

/* ---------- 00 · zmienne ---------- */
:root{
  --paper:        #F5F3EE;   /* tło strony */
  --paper-dim:    #ECE8E0;
  --paper-deep:   #E2DDD3;
  --surface:      #FFFFFF;   /* karty */
  --ink:          #121417;
  --ink-soft:     #4A4F57;
  --ink-mute:     #8A8F96;
  --rule:         rgba(18,20,23,.09);
  --rule-soft:    rgba(18,20,23,.06);
  --rule-strong:  rgba(18,20,23,.18);

  --dark:         #121417;
  --dark-2:       #1B1E22;
  --dark-rule:    rgba(245,243,238,.10);
  --dark-card:    rgba(255,255,255,.04);
  --paper-on-dark:#F1EEE8;

  --brand:        #B4471D;
  --accent:       #B4471D;   /* rdza */
  --accent-deep:  #8D3614;
  --accent-tint:  rgba(180,71,29,.08);
  --accent-on-dark:#E08A5A;

  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-sans:    "Onest", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-tech:    "Onest", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-nav:     "Archivo", "Onest", "Helvetica Neue", Arial, sans-serif;

  --r-xl: clamp(22px,2.4vw,32px);
  --r-l:  20px;
  --r-m:  14px;
  --r-s:  10px;

  --shadow-s: 0 1px 2px rgba(18,20,23,.04), 0 4px 14px -6px rgba(18,20,23,.08);
  --shadow-m: 0 1px 2px rgba(18,20,23,.04), 0 18px 40px -18px rgba(18,20,23,.20);

  --max: 1280px;
  --gut: clamp(20px, 4vw, 56px);
  --nav-h: 72px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ścieżki klienta, subtelna zmiana akcentu */
body[data-path="projektanci"]{ --accent:#5C6552; --accent-deep:#454C3E; --accent-tint:rgba(92,101,82,.10); --accent-on-dark:#A6B292; }
body[data-path="hurtownie"]  { --accent:#2E4C5C; --accent-deep:#223A47; --accent-tint:rgba(46,76,92,.10); --accent-on-dark:#84AEC3; }

/* ---------- 01 · reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- 02 · układ ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap--wide{ max-width:1520px; }
.sheet{ position:relative; }
.pad{ padding-block:clamp(72px,9vw,136px); }
.pad-s{ padding-block:clamp(48px,6vw,80px); }

/* dawne linie konstrukcyjne i sygnatura arkusza, wyłączone */
.gridlines,.sheetmark{ display:none !important; }

/* ---------- 03 · typografia ---------- */
.label{
  font-family:var(--f-tech); font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:.7em;
}
.label--accent{ color:var(--accent); }
.label--light{ color:rgba(241,238,232,.55); }
.label i{ font-style:normal; }

.d1{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.9rem, 7vw, 6.2rem);
  line-height:.98; letter-spacing:-.025em;
}
.d2{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.1rem, 4.2vw, 3.7rem);
  line-height:1.04; letter-spacing:-.02em;
}
.d3{
  font-family:var(--f-display); font-weight:350;
  font-size:clamp(1.5rem, 2.2vw, 2rem);
  line-height:1.14; letter-spacing:-.012em;
}
.d1 em,.d2 em,.d3 em{ font-style:italic; font-weight:300; color:var(--accent); }
.h-sans{
  font-family:var(--f-sans); font-weight:600;
  font-size:clamp(1.06rem,1.3vw,1.2rem);
  line-height:1.32; letter-spacing:-.01em;
}
.lead{
  font-size:clamp(1.08rem,1.35vw,1.24rem);
  line-height:1.58; color:var(--ink-soft); max-width:56ch;
}
.body{ color:var(--ink-soft); max-width:64ch; }
.body p + p{ margin-top:1em; }
.small{ font-size:.92rem; line-height:1.55; color:var(--ink-mute); }
.mono{ font-family:var(--f-tech); font-size:.84rem; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- 04 · nagłówek sekcji ---------- */
.shead{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:16px clamp(24px,4vw,64px); margin-bottom:clamp(34px,4.4vw,58px);
}
.shead__no{ font-family:var(--f-tech); font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--accent); flex:none; }
.shead__t{ flex:1 1 520px; min-width:0; }
.shead__t .d2{ max-width:20ch; }
.shead__t .label{ max-width:none; }
.shead__dim{ display:none; }
.shead > p{ color:var(--ink-mute); }
@media (max-width:760px){
  .shead__t{ flex:1 1 100%; max-width:none; }
  .shead > p{ flex:1 1 100%; max-width:none !important; }
}

/* ---------- 05 · przyciski ---------- */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--rule-strong);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:.95em 1.55em; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  border-radius:999px;
  font-family:var(--f-sans); font-weight:600; font-size:14.5px; letter-spacing:-.005em; line-height:1.2;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease-out);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); border-radius:inherit;
  transform:scale(.4); opacity:0; transition:transform .45s var(--ease-out), opacity .3s var(--ease);
}
.btn:hover::after{ transform:scale(1); opacity:1; }
.btn:hover{ color:var(--paper); border-color:var(--ink); transform:translateY(-1px); }
.btn svg{ transition:transform .42s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }
.btn--solid{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); box-shadow:0 10px 24px -12px rgba(18,20,23,.5); }
.btn--solid::after{ background:var(--accent); }
.btn--solid:hover{ color:#fff; border-color:var(--accent); box-shadow:0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--accent{ --bg:var(--accent); --fg:#fff; --bd:var(--accent); box-shadow:0 12px 28px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--accent::after{ background:var(--ink); }
.btn--accent:hover{ border-color:var(--ink); color:#fff; }
.btn--ghost-light{ --fg:var(--paper-on-dark); --bd:var(--dark-rule); }
.btn--ghost-light::after{ background:var(--paper-on-dark); }
.btn--ghost-light:hover{ color:var(--dark); border-color:var(--paper-on-dark); }

/* link tekstowy */
.tlink{
  display:inline-flex; align-items:center; gap:.55em; position:relative;
  font-family:var(--f-sans); font-weight:600; font-size:14.5px;
  padding-bottom:.25em; color:var(--ink);
}
.tlink::before{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--rule-strong); }
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink:hover{ color:var(--accent); }
.tlink svg{ transition:transform .4s var(--ease-out); }
.tlink:hover svg{ transform:translateX(3px); }

/* ---------- 06 · nawigacja ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rule-soft);
}
.nav__in{ position:relative; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; flex:none; position:relative; z-index:101; }
.brand__mark{ width:22px; height:22px; flex:none; color:var(--brand); }
.brand__txt{ font-family:var(--f-sans); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.brand__txt span{ font-weight:400; color:var(--accent); }
.nav__menu{ display:flex; align-items:center; gap:4px; }
.nav__link{
  font-family:var(--f-nav); font-weight:500; font-size:14.5px; letter-spacing:.005em;
  color:var(--ink-soft); padding:.5em .9em; border-radius:999px;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link:hover{ color:var(--ink); background:rgba(18,20,23,.05); }
.nav__link.is-active{ color:var(--ink); background:var(--surface); box-shadow:var(--shadow-s); }
.nav__cta{ margin-left:10px; padding:.7em 1.25em; font-size:14px; font-family:var(--f-nav); font-weight:600; letter-spacing:.01em; }
.nav__burger{
  display:none; width:44px; height:44px; margin-right:-8px;
  background:none; border:0; cursor:pointer; position:relative; z-index:101;
}
.nav__burger span{
  position:absolute; left:11px; width:22px; height:1.5px; border-radius:2px; background:var(--ink);
  transition:transform .38s var(--ease-out), opacity .2s;
}
.nav__burger span:nth-child(1){ top:18px; }
.nav__burger span:nth-child(2){ top:25px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
.nav__progress{
  position:absolute; left:0; bottom:-1px; height:2px; border-radius:2px; background:var(--accent);
  width:0; transition:width .12s linear;
}
@media (max-width:1100px){
  .nav__burger{ display:block; }
  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 0 0; z-index:99;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:6px; padding:clamp(20px,6vw,48px) var(--gut);
    background:var(--paper);
    transform:translateY(-101%); visibility:hidden; pointer-events:none;
    transition:transform .5s var(--ease-out), visibility 0s linear .5s;
    overflow-y:auto;
  }
  body.menu-open .nav__menu{ transform:translateY(0); visibility:visible; pointer-events:auto; transition:transform .5s var(--ease-out), visibility 0s; }
  body.menu-open{ overflow:hidden; }
  .nav__link{
    padding:16px 20px; border-radius:var(--r-m); background:var(--surface); box-shadow:none;
    font-family:var(--f-display); font-size:1.6rem; font-weight:300; letter-spacing:-.01em; color:var(--ink);
  }
  .nav__link.is-active{ box-shadow:inset 0 0 0 1px var(--accent); }
  .nav__cta{ margin:18px 0 0; align-self:flex-start; }
}

/* ---------- 07 · hero ---------- */
.hero,.phero{
  background:
    radial-gradient(760px 420px at 92% -6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(620px 380px at -8% 104%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}
.hero{ position:relative; padding-top:clamp(56px,8vw,112px); padding-bottom:clamp(56px,7vw,96px); overflow:hidden; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,4vw,48px); align-items:center; }
.hero__meta .dash{ display:none; }
.hero__meta .label{
  padding:.55em 1em; border-radius:999px; background:color-mix(in srgb, var(--surface) 70%, transparent);
  border:1px solid var(--rule); letter-spacing:.1em; font-size:11px;
}
.hero__meta .label--accent{ background:var(--accent-tint); border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.hero__h{ max-width:19ch; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  gap:clamp(28px,4vw,72px); align-items:end; margin-top:clamp(30px,4vw,54px);
}
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; align-items:start; } }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__side{ background:var(--surface); border-radius:var(--r-l); padding:clamp(20px,2.4vw,30px); box-shadow:var(--shadow-m); }
.hero__facts{ display:grid; gap:0; }
.hero__fact{ padding:14px 0; border-bottom:1px solid var(--rule-soft); display:flex; gap:16px; align-items:baseline; }
.hero__fact:last-child{ border-bottom:0; }
.hero__fact dt{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); width:88px; flex:none; }
.hero__fact dd{ margin:0; font-size:.96rem; color:var(--ink); }

.hero__draw{
  position:absolute; right:calc(var(--gut) * -1.5); top:54%; transform:translateY(-42%);
  width:min(38vw,520px); color:var(--accent); opacity:.14; pointer-events:none; z-index:0;
}
@media (max-width:1100px){ .hero__draw{ opacity:.08; width:70vw; right:-14vw; } }
.hero > .wrap{ position:relative; z-index:1; }

/* animacje wejścia */
.reveal-line{ display:block; overflow:hidden; padding-block:.14em .1em; margin-block:-.14em -.1em; }
.reveal-line > span{ display:block; transform:translateY(104%); animation:lineUp 1.05s var(--ease-out) forwards; animation-delay:var(--d,0s); }
@keyframes lineUp{ to{ transform:translateY(0); } }
.fade-up{ opacity:0; transform:translateY(16px); animation:fadeUp .9s var(--ease-out) forwards; animation-delay:var(--d,0s); }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* ---------- 08 · ujawnianie przy scrollu ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease); transition-delay:var(--d,0s); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in{ opacity:1; transform:none; transition:none; }
  .reveal-line > span,.fade-up{ animation:none; transform:none; opacity:1; }
}

/* ---------- 09 · trzy ścieżki klienta ---------- */
.paths{ display:grid; gap:14px; }
.path{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 64px;
  gap:clamp(14px,2.4vw,36px); align-items:start;
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-xl);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.path:hover{ border-color:color-mix(in srgb, var(--accent) 40%, transparent); box-shadow:var(--shadow-m); transform:translateY(-2px); }
.path__name{ display:block; font-family:var(--f-display); font-weight:300; font-size:clamp(1.9rem,3.2vw,2.8rem); line-height:1.05; letter-spacing:-.02em; }
.path__want{ display:block; margin-top:.6em; font-family:var(--f-tech); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.path__who{ display:block; color:var(--ink-soft); font-size:.98rem; }
.path__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.tag{
  font-family:var(--f-tech); font-weight:500; font-size:12px; letter-spacing:0;
  padding:.4em .85em; border-radius:999px; background:var(--paper); color:var(--ink-soft); white-space:nowrap;
}
.path__go{ justify-self:end; align-self:center; }
.path__arrow{
  width:52px; height:52px; border-radius:50%; background:var(--paper); color:var(--ink);
  display:grid; place-items:center; transition:background .4s var(--ease), color .4s var(--ease), transform .45s var(--ease-out);
}
.path:hover .path__arrow{ background:var(--accent); color:#fff; transform:rotate(-45deg); }
@media (max-width:900px){
  .path{ grid-template-columns:minmax(0,1fr) 46px; row-gap:14px; }
  .path > :nth-child(1){ grid-column:1; }
  .path > :nth-child(2){ grid-column:1 / -1; }
  .path__go{ grid-column:2; grid-row:1; align-self:start; justify-self:end; }
  .path__arrow{ width:44px; height:44px; }
  .path__name{ font-size:clamp(1.6rem,7vw,2.1rem); }
}

/* ---------- 10 · tabela usług ---------- */
.svc{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-xl); padding:6px clamp(20px,3vw,40px); }
.svc__row{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 124px 132px;
  gap:clamp(12px,2vw,28px); align-items:baseline;
  padding:clamp(20px,2.4vw,28px) 0; border-bottom:1px solid var(--rule-soft);
  position:relative;
}
.svc__row:last-child{ border-bottom:0; }
.svc__no{ font-family:var(--f-tech); font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--ink-mute); }
.svc__name{ font-family:var(--f-display); font-weight:350; font-size:clamp(1.3rem,1.9vw,1.65rem); line-height:1.16; letter-spacing:-.012em; transition:color .3s var(--ease); }
.svc__row:hover .svc__name{ color:var(--accent); }
.svc__desc{ color:var(--ink-soft); font-size:.95rem; }
.svc__meta{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.svc__meta b{ display:block; font-weight:600; color:var(--ink); letter-spacing:.08em; }
.svc--noprice .svc__row{ grid-template-columns:minmax(0,1.5fr) minmax(0,1.9fr) 132px; }
.svc__head{ padding-block:16px 12px; }
@media (max-width:880px){
  .svc__row,.svc--noprice .svc__row{ grid-template-columns:minmax(0,1fr); row-gap:10px; }
  .svc__meta{ display:inline-block; margin-right:20px; }
  .svc__head{ display:none; }
}

/* ---------- 11 · karty / siatki ---------- */
.grid{ display:grid; gap:clamp(12px,1.4vw,18px); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid > *{
  background:var(--surface); padding:clamp(24px,2.6vw,36px);
  border:1px solid var(--rule); border-radius:var(--r-l);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.grid > *:hover{ box-shadow:var(--shadow-m); border-color:transparent; }
@media (max-width:1000px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
.grid--2 > *:last-child:nth-child(odd){ grid-column:1 / -1; }
.grid--2 > *:last-child:nth-child(odd) .ticks{ columns:2; column-gap:clamp(24px,3vw,48px); }
@media (max-width:700px){ .grid--2 > *:last-child:nth-child(odd) .ticks{ columns:1; } }
@media (max-width:860px){ .grid--3{ grid-template-columns:1fr; } }
@media (max-width:640px){ .grid--2,.grid--4{ grid-template-columns:1fr; } }

/* numeracja kart w siatce trzech kolumn */
.grid--3{ counter-reset:card; }
.grid--3 > .cell{ counter-increment:card; position:relative; }
.grid--3 > .cell:not(:has(.cell__no))::before{
  content:counter(card, decimal-leading-zero);
  display:inline-grid; place-items:center; width:38px; height:38px; margin-bottom:20px;
  border-radius:12px; background:var(--accent-tint); color:var(--accent);
  font-family:var(--f-sans); font-weight:600; font-size:13px;
}

.grid--3 > .cell--case::before{ display:none !important; }

.cell__no{ font-family:var(--f-tech); font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--accent); display:block; margin-bottom:18px; }
.cell h3{ margin-bottom:12px; }
.cell .d3{ margin-bottom:8px; }
.cell p{ color:var(--ink-soft); font-size:.97rem; }
.cell ul{ margin-top:16px; }

/* lista z ptaszkami */
.ticks li{ position:relative; padding-left:30px; font-size:.96rem; color:var(--ink-soft); padding-block:6px; }
.ticks li::before{
  content:""; position:absolute; left:0; top:calc(6px + .3em); width:18px; height:18px; border-radius:50%;
  background:var(--accent-tint);
}
.ticks li::after{
  content:""; position:absolute; left:5px; top:calc(6px + .3em + 5px); width:8px; height:8px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 4.2 3.1 6.2 7 1.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 4.2 3.1 6.2 7 1.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ticks--tight li{ padding-block:4px; }
.ticks--tight li::before{ top:calc(4px + .3em); }
.ticks--tight li::after{ top:calc(4px + .3em + 5px); }

/* kroki, karty z numerem */
.steps{ display:grid; gap:12px; counter-reset:step; }
.step{
  counter-increment:step; position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(14px,2.6vw,40px); align-items:start;
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px) clamp(22px,2.4vw,30px) clamp(76px,7vw,96px);
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l);
}
.step::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:clamp(22px,2.6vw,34px); top:clamp(22px,2.4vw,30px);
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-tint); color:var(--accent);
  font-family:var(--f-sans); font-weight:600; font-size:13px; line-height:1;
}
.step h3{ margin-bottom:8px; padding-top:7px; }
.step p{ color:var(--ink-soft); font-size:.97rem; }
.step:hover{ box-shadow:var(--shadow-m); border-color:transparent; }
@media (max-width:820px){ .step{ grid-template-columns:minmax(0,1fr); gap:0; } }
.split .step{ grid-template-columns:minmax(0,1fr); gap:0; }
@media (max-width:560px){
  .step{ padding:22px 20px 22px 20px; }
  .step::before{ position:static; margin-bottom:14px; }
  .step h3{ padding-top:0; }
}

/* ---------- 12 · sekcja ciemna ---------- */
.dark{
  background:
    radial-gradient(900px 520px at 88% -10%, color-mix(in srgb, var(--accent-on-dark) 22%, transparent), transparent 65%),
    radial-gradient(700px 420px at 0% 110%, color-mix(in srgb, var(--accent-on-dark) 9%, transparent), transparent 70%),
    var(--dark);
  color:var(--paper-on-dark); --accent:var(--accent-on-dark); --accent-tint:color-mix(in srgb, var(--accent-on-dark) 14%, transparent);
}
.sheet.dark{ margin-inline:clamp(8px,1.4vw,20px); border-radius:var(--r-xl); overflow:clip; }
.dark .btn--accent{ --fg:#121417; }
.dark .btn--accent:hover{ color:var(--paper-on-dark); }
.dark h1,.dark h2,.dark h3{ color:var(--paper-on-dark); }
.dark .lead,.dark .body,.dark p{ color:rgba(241,238,232,.68); }
.dark .grid > *,.dark .step,.dark .faq__item,.dark .path,.dark .svc{ background:var(--dark-card); border-color:var(--dark-rule); }
.dark .grid > *:hover,.dark .step:hover{ background:rgba(255,255,255,.06); box-shadow:none; border-color:rgba(255,255,255,.14); }
.dark .ticks li{ color:rgba(241,238,232,.7); }
.dark .tag{ background:rgba(255,255,255,.06); color:rgba(241,238,232,.7); }
.dark .small{ color:rgba(241,238,232,.5); }
.dark .hero__fact{ border-bottom-color:var(--dark-rule); }
.dark .cell__no{ color:var(--accent); }
.dark .tlink{ color:var(--paper-on-dark); }
.dark .tlink::before{ background:var(--dark-rule); }
.dark .btn:not(.btn--accent):not(.btn--solid){ --fg:var(--paper-on-dark); --bd:var(--dark-rule); }
.dark .btn:not(.btn--accent):not(.btn--solid)::after{ background:var(--paper-on-dark); }
.dark .btn:not(.btn--accent):not(.btn--solid):hover{ color:var(--dark); }

/* ---------- 13 · cytat ---------- */
.quote{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.quote blockquote{
  font-family:var(--f-display); font-weight:300; font-style:italic;
  font-size:clamp(1.7rem,3.4vw,2.8rem); line-height:1.2; letter-spacing:-.015em; max-width:22ch;
}
.quote .mark{ font-size:clamp(3rem,5vw,4.4rem); line-height:.6; color:var(--accent); font-family:var(--f-display); }

/* ---------- 14 · realizacje ---------- */
.case{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px); align-items:center;
  padding-block:clamp(32px,4.4vw,64px);
}
@media (max-width:900px){ .case{ grid-template-columns:1fr; } }
.case--flip .case__vis{ order:2; }
@media (max-width:900px){ .case--flip .case__vis{ order:0; } }
.case__vis{
  position:relative; aspect-ratio:4/3; background:var(--paper-dim);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-m);
}
.case__vis svg{ position:absolute; inset:0; width:100%; height:100%; }
.case__vis img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.case:hover .case__vis img{ transform:scale(1.035); }
.case__src{ display:inline-flex; margin-top:18px; }
.case__stamp{
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(8px);
  padding:.55em .95em; border-radius:999px;
}
.case__kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:26px; }
.case__kpi div{ padding:16px 18px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-m); }
.case__kpi b{ display:block; font-family:var(--f-display); font-weight:350; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.1; letter-spacing:-.01em; color:var(--accent); }
.case__kpi span{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }

/* ---------- 15 · FAQ ---------- */
.faq{ display:grid; gap:10px; }
.faq__item{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l); transition:box-shadow .35s var(--ease), border-color .35s var(--ease); }
.faq__item:hover,.faq__item.is-open{ box-shadow:var(--shadow-s); }
.faq__item.is-open{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.faq__q{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:clamp(14px,2.4vw,28px);
  padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,28px);
  font-family:var(--f-sans); font-weight:600;
  font-size:clamp(1.02rem,1.3vw,1.12rem); line-height:1.35; letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.faq__q:hover{ color:var(--accent); }
.faq__q .sign{
  margin-left:auto; flex:none; position:relative; width:34px; height:34px; border-radius:50%;
  background:var(--paper); transition:background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease-out);
}
.faq__q .sign::before,.faq__q .sign::after{
  content:""; position:absolute; left:11px; top:16.25px; width:12px; height:1.5px; border-radius:2px; background:currentColor;
  transition:transform .45s var(--ease-out);
}
.faq__q .sign::after{ transform:rotate(90deg); }
.faq__item.is-open .sign{ background:var(--accent); color:#fff; transform:rotate(180deg); }
.faq__item.is-open .sign::after{ transform:rotate(0deg); }
.faq__no{ font-family:var(--f-tech); font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--ink-mute); flex:none; }
.faq__a{ overflow:hidden; height:0; transition:height .5s var(--ease-out); }
.faq__a > div{ padding:0 clamp(20px,2.4vw,28px) 24px; max-width:72ch; color:var(--ink-soft); }
.dark .faq__q .sign{ background:rgba(255,255,255,.08); }

/* ---------- 16 · formularz ---------- */
.form{ display:grid; gap:12px; }
.field{
  position:relative; padding:14px 18px 4px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-m);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
.field label{
  display:block; font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:2px;
}
.field input,.field textarea,.field select{
  width:100%; background:none; border:0; outline:none; padding:4px 0 12px;
  font-size:1.02rem; color:var(--ink); font-family:var(--f-sans);
}
.field input:focus-visible,.field textarea:focus-visible{ outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.field.has-error{ border-color:#B4271D; box-shadow:0 0 0 4px rgba(180,39,29,.08); }
.field .err{ position:absolute; right:18px; top:14px; font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#B4271D; opacity:0; transition:opacity .3s; }
.field.has-error .err{ opacity:1; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.field .choice{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 0 14px; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice label{
  margin:0; cursor:pointer; padding:.6em 1.05em; border:1px solid var(--rule); border-radius:999px; background:var(--paper);
  font-family:var(--f-sans); font-weight:500; font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--ink-soft);
  transition:all .25s var(--ease);
}
.choice input:checked + label{ background:var(--ink); border-color:var(--ink); color:#fff; }
.choice label:hover{ border-color:var(--ink); }
.form__note{ margin-top:10px; display:flex; gap:12px; align-items:flex-start; }
.form__ok{
  margin-top:16px; padding:18px 22px; border-radius:var(--r-m); background:var(--accent-tint);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size:.96rem; display:none;
}
.form__ok.is-on{ display:block; }

/* ---------- 17 · stopka ---------- */
.foot{
  background:
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--accent-on-dark) 18%, transparent), transparent 65%),
    var(--dark);
  color:var(--paper-on-dark); --accent:var(--accent-on-dark);
  margin:clamp(8px,1.4vw,20px); margin-top:0; border-radius:var(--r-xl);
}
.foot .btn--accent{ --fg:#121417; }
.foot .btn--accent:hover{ color:var(--paper-on-dark); }
.foot a{ transition:color .2s var(--ease); }

.foot__main{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(40px,6vw,100px);
  padding-block:clamp(60px,7vw,100px) clamp(44px,5vw,72px); align-items:end;
}
@media (max-width:900px){ .foot__main{ grid-template-columns:1fr; align-items:start; } }
.foot__lead .d2{ max-width:16ch; }
.foot__lead .d2 em{ color:var(--accent); }
.foot__lead p{ max-width:44ch; margin-top:22px; font-size:.97rem; line-height:1.65; color:rgba(241,238,232,.62); }
.foot__lead .btn{ margin-top:30px; }

.foot__contact{ display:grid; gap:10px; }
.foot__contact li{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:baseline;
  padding:18px 22px; border-radius:var(--r-m); background:rgba(255,255,255,.04); border:1px solid var(--dark-rule);
}
.foot__k{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(241,238,232,.45); }
.foot__v{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.2; color:var(--paper-on-dark); overflow-wrap:anywhere; }
a.foot__v:hover{ color:var(--accent); }
@media (max-width:420px){ .foot__contact li{ grid-template-columns:1fr; gap:6px; } }

.foot__nav{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px clamp(24px,3vw,48px);
  padding-block:clamp(36px,4.4vw,56px); border-top:1px solid var(--dark-rule);
}
@media (max-width:900px){ .foot__nav{ grid-template-columns:repeat(3,minmax(0,1fr)); } .foot__brand{ grid-column:1 / -1; } }
@media (max-width:560px){ .foot__nav{ grid-template-columns:1fr 1fr; } }
.foot__brand .brand__txt{ font-size:19px; }
.foot__brand .brand__txt span{ color:var(--accent); }
.foot__brand p{ margin-top:14px; max-width:30ch; font-size:.92rem; line-height:1.6; color:rgba(241,238,232,.55); }
.foot__col h3{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(241,238,232,.45); margin-bottom:14px; }
.foot__col li + li{ margin-top:8px; }
.foot__col a{ font-size:.96rem; color:rgba(241,238,232,.85); }
.foot__col a:hover{ color:var(--accent); }

.foot__bar{
  border-top:1px solid var(--dark-rule); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; justify-content:space-between;
  font-family:var(--f-tech); font-weight:500; font-size:13px; color:rgba(241,238,232,.45);
}
.foot__bar a:hover{ color:var(--paper-on-dark); }

/* ---------- 18 · drobiazgi ---------- */
.split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,88px); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split .d2{ font-size:clamp(1.9rem,3.1vw,2.9rem); }
.split--even{ grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .split--even{ grid-template-columns:1fr; } }
.sticky{ position:sticky; top:calc(var(--nav-h) + 40px); }
@media (max-width:900px){ .sticky{ position:static; } }
.sticky > .label:first-child{
  padding:.5em .95em; border-radius:999px; background:var(--accent-tint);
}
.dark .sticky > .label:first-child{ background:rgba(255,255,255,.07); }

.stack-sm > * + *{ margin-top:14px; }
.stack   > * + *{ margin-top:24px; }
.stack-l > * + *{ margin-top:44px; }
.mt-s{ margin-top:18px; } .mt-m{ margin-top:30px; } .mt-l{ margin-top:clamp(40px,5vw,68px); }
.center{ text-align:center; } .acc{ color:var(--accent); }
.hr{ height:1px; background:var(--rule); border:0; }
.badge{
  display:inline-flex; align-items:center; gap:.6em; padding:.5em .95em; border-radius:999px;
  background:var(--surface); border:1px solid var(--rule); font-family:var(--f-tech); font-weight:600; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.badge .dot{ width:6px; height:6px; background:var(--accent); border-radius:50%; }
.dark .badge{ background:rgba(255,255,255,.05); border-color:var(--dark-rule); color:rgba(241,238,232,.7); }

/* strona-ścieżka: nagłówek */
.phero{ padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(40px,5vw,72px); }
.phero .d1{ font-size:clamp(2.5rem,5.4vw,4.8rem); line-height:1; letter-spacing:-.025em; }
.phero .d1--fit{ font-size:clamp(2.4rem,5.2vw,3.8rem); }
.phero__grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px,4vw,68px); align-items:end; }
@media (max-width:900px){ .phero__grid{ grid-template-columns:1fr; align-items:start; } }

.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; position:relative; z-index:1; }
@media (max-width:700px){ .kpi-row{ grid-template-columns:1fr; } }
.kpi-row > div{ padding:24px clamp(20px,2.2vw,28px); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l); }
.kpi-row b{ display:block; font-family:var(--f-display); font-weight:300; font-size:clamp(1.9rem,3vw,2.6rem); line-height:1; letter-spacing:-.015em; margin-bottom:10px; color:var(--accent); }
.dark .kpi-row > div{ background:var(--dark-card); border-color:var(--dark-rule); }

.pricebox{ border:1px solid var(--rule); border-radius:var(--r-xl); padding:clamp(24px,3vw,38px); background:var(--surface); }
.pricebox--hi{ border-color:var(--accent); position:relative; box-shadow:var(--shadow-m); }
.pricebox--hi::before{
  content:"NAJCZĘŚCIEJ WYBIERANE"; position:absolute; top:0; right:24px; transform:translateY(-50%);
  background:var(--accent); color:#fff; font-family:var(--f-tech); font-weight:600; font-size:10px;
  letter-spacing:.1em; padding:.5em .95em; border-radius:999px;
}
.price{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.9rem,3vw,2.6rem); line-height:1; letter-spacing:-.015em; }
.price small{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-top:10px; }

.annot{ position:relative; padding-left:22px; }
.annot::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* ---------- 19 · podstrona realizacji ---------- */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.7em; margin-bottom:clamp(22px,3vw,34px); }
.crumbs a{ color:var(--ink-mute); transition:color .3s var(--ease); }
.crumbs a:hover{ color:var(--accent); }
.crumbs span[aria-hidden]{ color:var(--rule-strong); }

.cs-cover{ position:relative; aspect-ratio:21/9; border-radius:var(--r-xl); overflow:hidden; background:var(--paper-dim); box-shadow:var(--shadow-m); }
.cs-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:700px){ .cs-cover{ aspect-ratio:4/3; } }

.cs-meta{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; }
.cs-meta > div{ padding:18px 20px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-m); }
.cs-meta dt{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
.cs-meta dd{ margin:0; font-size:.96rem; color:var(--ink); }
.cs-meta dd a{ border-bottom:1px solid var(--rule-strong); transition:border-color .3s var(--ease), color .3s var(--ease); }
.cs-meta dd a:hover{ color:var(--accent); border-color:var(--accent); }
@media (max-width:800px){ .cs-meta{ grid-template-columns:1fr 1fr; } }

.cs-fig{ margin:clamp(56px,7vw,110px) 0 0; }
@media (max-width:900px){ .cs-fig{ margin-top:40px; } }
.cs-fig__img{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--paper-dim); aspect-ratio:4/3; box-shadow:var(--shadow-m); }
.cs-fig__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs-fig figcaption{ margin-top:12px; }

.cs-video{ position:relative; aspect-ratio:16/9; border-radius:var(--r-xl); background:#0d0f11; overflow:hidden; }
.cs-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.cs-result{ font-family:var(--f-display); font-weight:300; font-style:italic; font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.2; letter-spacing:-.015em; max-width:24ch; }

.case__more{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:28px; }
.case__more .tlink{ margin-top:0; }

/* ---------- 20 · kafelki wyboru ---------- */
.choice{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
@media (max-width:800px){ .choice{ grid-template-columns:1fr; } }
.choice__tile{
  position:relative; display:flex; flex-direction:column; gap:16px;
  padding:clamp(26px,3.2vw,44px); background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-xl);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.choice__tile:hover{ border-color:color-mix(in srgb, var(--accent) 40%, transparent); box-shadow:var(--shadow-m); transform:translateY(-3px); }
.choice__tile .d2{ font-size:clamp(1.9rem,3.2vw,2.8rem); }
.choice__tile p{ color:var(--ink-soft); max-width:46ch; }
.choice__foot{ margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.choice__tile:hover .path__arrow{ background:var(--accent); color:#fff; transform:rotate(-45deg); }

.gloss{ margin:0; display:grid; gap:10px; }
.gloss > div{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(14px,2.6vw,40px); padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,28px); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-m); }
.gloss dt{ font-family:var(--f-display); font-weight:350; font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.2; }
.gloss dd{ margin:0; color:var(--ink-soft); font-size:.97rem; }
@media (max-width:700px){ .gloss > div{ grid-template-columns:1fr; gap:6px; } }

/* ---------- 21 · strony usługowe ---------- */
.toc{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:8px;
  background:color-mix(in srgb, var(--surface) 75%, transparent); border:1px solid var(--rule); border-radius:999px;
  width:fit-content; max-width:100%;
}
.toc__t{ margin:0 6px 0 10px; }
.toc a{
  font-family:var(--f-sans); font-weight:500; font-size:13.5px;
  padding:.5em .85em; border-radius:999px; color:var(--ink-soft);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.toc a:hover{ color:var(--accent); background:var(--accent-tint); }
@media (max-width:760px){ .toc{ border-radius:var(--r-l); } }
[id]{ scroll-margin-top:calc(var(--nav-h) + 24px); }

.prob{ display:flex; flex-direction:column; gap:10px; }
.prob > p:not(.prob__fix){ color:var(--ink-mute); }
.prob__fix{
  margin-top:auto; padding:16px 18px; border-radius:var(--r-m);
  background:var(--accent-tint); color:var(--ink) !important;
}
.prob__fix b{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:4px; }
.grid--2 > .prob:last-child:nth-child(odd){ grid-column:auto; }
.ticks--cols{ columns:2; column-gap:clamp(24px,3vw,48px); }
.ticks--cols li{ break-inside:avoid; }
@media (max-width:700px){ .ticks--cols{ columns:1; } }
.related{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
@media (max-width:900px){ .related{ grid-template-columns:1fr; } }
.related .choice__tile{ padding:clamp(22px,2.4vw,30px); gap:12px; }
.related .choice__tile .d3{ font-size:clamp(1.3rem,1.9vw,1.7rem); }
.related--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1100px){ .related--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .related--4{ grid-template-columns:1fr; } }

/* ---------- 22 · blog ---------- */
.post-meta{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; }
.post-meta span{ display:inline-flex; align-items:center; gap:.6em; }
.post-meta span + span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--rule-strong); margin-right:.4em; }

.post-grid{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(32px,5vw,84px); align-items:start; }
@media (max-width:1000px){ .post-grid{ grid-template-columns:1fr; } .post-aside{ order:-1; } }
.post-aside{ position:sticky; top:calc(var(--nav-h) + 32px); }
@media (max-width:1000px){ .post-aside{ position:static; } }
.post-toc{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l); padding:4px 20px 12px; }
.post-toc ol{ list-style:none; margin:0; padding:0; }
.post-toc li + li{ border-top:1px solid var(--rule-soft); }
.post-toc a{ display:block; padding:10px 0; font-size:.9rem; line-height:1.4; color:var(--ink-soft); transition:color .3s var(--ease), padding-left .3s var(--ease); }
.post-toc a:hover,.post-toc a.is-current{ color:var(--accent); padding-left:6px; }
.post-aside .btn{ width:100%; justify-content:center; margin-top:14px; }

.prose{ max-width:72ch; font-size:1.04rem; line-height:1.78; color:var(--ink-soft); }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.1; letter-spacing:-.018em; color:var(--ink); margin-top:2.1em; }
.prose h3{ font-family:var(--f-sans); font-weight:600; font-size:1.14rem; line-height:1.35; color:var(--ink); margin-top:1.8em; }
.prose h2 + p,.prose h3 + p{ margin-top:.7em; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a:not(.btn){ color:var(--ink); border-bottom:1px solid var(--accent); transition:color .3s var(--ease); }
.prose a:not(.btn):hover{ color:var(--accent); }
.prose ul,.prose ol{ padding-left:0; }
.prose ul li{ position:relative; padding-left:26px; margin-top:.55em; }
.prose ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.prose ol{ counter-reset:li; }
.prose ol li{ counter-increment:li; position:relative; padding-left:40px; margin-top:.7em; }
.prose ol li::before{
  content:counter(li); position:absolute; left:0; top:.1em; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; background:var(--accent-tint); color:var(--accent);
  font-family:var(--f-sans); font-weight:600; font-size:.8rem;
}

.answer{ border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); background:var(--surface); border-radius:var(--r-l); padding:clamp(22px,2.6vw,32px); box-shadow:var(--shadow-s); }
.answer p{ color:var(--ink); }
.callout{ border-radius:var(--r-m); background:var(--accent-tint); padding:20px 24px; color:var(--ink); font-family:var(--f-display); font-size:1.22rem; line-height:1.45; }
.callout--warn{ background:rgba(141,54,20,.1); }

.table-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r-l); background:var(--surface); -webkit-overflow-scrolling:touch; }
.ptable{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:560px; }
.ptable caption{ text-align:left; padding:16px 20px; font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); border-bottom:1px solid var(--rule-soft); caption-side:top; }
.ptable th,.ptable td{ padding:15px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-soft); }
.ptable thead th{ font-family:var(--f-tech); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); background:var(--paper); }
.ptable tbody th{ color:var(--ink); font-weight:600; }
.ptable td.price{ font-family:var(--f-display); font-size:1.25rem; color:var(--accent); white-space:nowrap; }
.ptable tr:last-child th,.ptable tr:last-child td{ border-bottom:0; }

.post-cta{
  background:
    radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--accent-on-dark) 24%, transparent), transparent 70%),
    var(--dark);
  color:var(--paper-on-dark); padding:clamp(28px,3.6vw,46px); border-radius:var(--r-xl); --accent:var(--accent-on-dark);
}
.post-cta h2,.post-cta h3{ color:var(--paper-on-dark) !important; margin-top:0 !important; }
.post-cta p{ color:rgba(241,238,232,.72); }
.post-cta .btn{ margin-top:22px; }
.post-cta .btn--accent{ --fg:#121417; }

/* listing bloga */
.bhero{ padding-top:clamp(36px,4.5vw,64px); padding-bottom:clamp(28px,3.5vw,48px); }
.bhero__top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(20px,4vw,64px); align-items:end; margin-top:clamp(22px,3vw,36px); }
@media (max-width:900px){ .bhero__top{ grid-template-columns:1fr; align-items:start; } }
.bhero .d1{ font-size:clamp(2.4rem,5vw,4.4rem); line-height:1; }
.bhero .lead{ font-size:clamp(1rem,1.2vw,1.12rem); }
.bfilter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(26px,3vw,40px); padding-top:clamp(20px,2.4vw,28px); border-top:1px solid var(--rule); }
.bfilter button{
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  padding:.55em 1.05em; border-radius:999px; border:1px solid var(--rule); background:var(--surface);
  font-size:.9rem; font-weight:500; color:var(--ink-soft);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.bfilter button:hover{ border-color:var(--rule-strong); color:var(--ink); }
.bfilter button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.bfilter small{ font-size:.75rem; opacity:.55; font-variant-numeric:tabular-nums; }

.blist{ padding-top:clamp(8px,1.5vw,20px); padding-bottom:clamp(72px,9vw,120px); }
.blayout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,4.5vw,72px); align-items:start; }
@media (max-width:1000px){ .blayout{ grid-template-columns:1fr; } }
.bfeed{ display:grid; gap:clamp(14px,1.6vw,20px); }
.bfeed__empty{ color:var(--ink-mute); padding:24px 0; }

.bpost{
  position:relative; display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:clamp(18px,2.4vw,32px); align-items:center;
  padding:clamp(14px,1.6vw,18px); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-xl);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.bpost[hidden]{ display:none; }
.bpost:hover{ border-color:color-mix(in srgb, var(--accent) 40%, transparent); box-shadow:var(--shadow-m); transform:translateY(-3px); }
.bpost__body{ display:flex; flex-direction:column; gap:10px; padding-right:clamp(4px,1.4vw,18px); min-width:0; }
.bpost__cat{ display:flex; flex-wrap:wrap; gap:6px; }
.bpost__cat span{ font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:.3em .75em; border-radius:999px; background:var(--accent-tint); color:var(--accent); }
.bpost h2{ font-family:var(--f-display); font-weight:350; font-size:clamp(1.35rem,1.9vw,1.65rem); line-height:1.18; letter-spacing:-.012em; text-wrap:balance; }
.bpost h2 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.bpost p{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.bpost__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:.84rem; color:var(--ink-mute); margin-top:2px; }
.bpost__meta span{ white-space:nowrap; }
.bpost__meta span + span::before{ content:""; display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--ink-mute); margin-right:14px; vertical-align:middle; }
.bpost__more{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--ink); margin-top:4px; }
.bpost__more svg{ transition:transform .4s var(--ease-out); }
.bpost:hover .bpost__more{ color:var(--accent); }
.bpost:hover .bpost__more svg{ transform:translateX(4px); }
@media (max-width:640px){
  .bpost{ grid-template-columns:1fr; align-items:stretch; }
  .bpost__body{ padding:4px 6px 8px; }
  .bcover{ aspect-ratio:16/10; }
}

/* wyróżniony wpis */
.bpost--feat{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.bpost--feat .bcover{ aspect-ratio:auto; min-height:100%; }
.bpost--feat .bpost__body{ gap:14px; padding:clamp(8px,2vw,28px) clamp(6px,2vw,28px) clamp(8px,2vw,28px) 0; }
.bpost--feat h2{ font-weight:300; font-size:clamp(1.7rem,2.4vw,2.25rem); line-height:1.1; letter-spacing:-.02em; }
.bpost--feat p{ font-size:1.02rem; }
.bpost__flag{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
@media (max-width:900px){
  .bpost--feat{ grid-template-columns:1fr; }
  .bpost--feat .bcover{ aspect-ratio:16/10; min-height:0; }
  .bpost--feat .bpost__body{ padding:8px 10px 14px; }
}

/* okładki rysowane w CSS/SVG */
.bcover{
  position:relative; overflow:hidden; border-radius:calc(var(--r-xl) - 8px); aspect-ratio:4/3;
  background:var(--paper-dim); color:var(--ink); display:grid; place-items:center;
}
.bcover::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size:28px 28px;
}
.bcover svg{ position:relative; width:62%; height:auto; transition:transform .8s var(--ease-out); }
.bpost:hover .bcover svg{ transform:scale(1.04) rotate(-1deg); }
.bcover--dark{ background:var(--dark); color:var(--paper-on-dark); }
.bcover--dark::before{ background-image:linear-gradient(var(--dark-rule) 1px, transparent 1px), linear-gradient(90deg, var(--dark-rule) 1px, transparent 1px); }
.bcover--rust{ background:var(--accent); color:#fff; }
.bcover--rust::before{ background-image:linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); }
.bcover--img{ background:var(--paper-deep); }
.bcover--img::before{ display:none; }
.bcover--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.bpost:hover .bcover--img img{ transform:scale(1.04); }
.post-cover{ margin:clamp(28px,4vw,48px) 0 0; }
.post-cover img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-xl); background:var(--paper-deep); box-shadow:var(--shadow-m); }
.post-cover figcaption{ margin-top:10px; font-size:.84rem; color:var(--ink-mute); }

/* artykuł: autor, treść, ramka o autorze */
.post-author{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.post-author__img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--rule-strong); }
.post-author__name{ display:block; font-weight:600; font-size:.98rem; line-height:1.3; color:var(--ink); }
.post-author__name:hover{ color:var(--accent); }
.post-author__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:.86rem; color:var(--ink-mute); }
.post-author__meta > span::before{ content:""; display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--ink-mute); margin-right:12px; vertical-align:middle; }

.phero:has(.post-cover){ padding-bottom:0; }
.post-cover{ margin-top:clamp(32px,4vw,52px); }
.post-cover figcaption{ display:flex; align-items:center; gap:8px; }
.post-cover figcaption::before{ content:""; width:14px; height:1px; background:var(--rule-strong); }
.post-body{ padding-top:clamp(40px,5vw,72px); }

.post-body .prose{ max-width:68ch; font-size:1.075rem; line-height:1.8; color:#3A3F46; }
.post-body .prose > * + *{ margin-top:1.15em; }
.post-body .prose h2{
  position:relative; margin-top:2.4em; padding-top:1.1em; border-top:1px solid var(--rule);
  font-size:clamp(1.85rem,3vw,2.55rem); scroll-margin-top:calc(var(--nav-h) + 24px); text-wrap:balance;
}
.post-body .prose h2::before{ content:""; position:absolute; left:0; top:-1px; width:56px; height:2px; background:var(--accent); }
.post-body .prose .answer + p{ margin-top:1.6em; }
.post-body .prose .post-cta h2,.post-body .prose .post-cta h3{ border-top:0; padding-top:0; }
.post-body .prose .post-cta h2::before{ display:none; }
.post-body .prose h3{ font-size:1.2rem; margin-top:2em; scroll-margin-top:calc(var(--nav-h) + 24px); }
.post-body .prose h2 + p,.post-body .prose h3 + p{ margin-top:.6em; }
.post-body .prose > p:first-of-type{ font-size:1.16rem; line-height:1.7; color:var(--ink); }
.post-body .prose ul li{ margin-top:.7em; }
.post-body .prose .callout{ border-left:3px solid var(--accent); border-radius:0 var(--r-m) var(--r-m) 0; }
.post-body .answer{
  position:relative; border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background:color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow:none;
  padding:clamp(24px,2.8vw,34px) clamp(24px,3vw,38px);
}
.post-body .answer .label{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.post-body .answer .label::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.post-body .answer p{ margin-top:16px; font-size:1.06rem; line-height:1.75; }
.post-body .answer strong{ color:var(--ink); }

/* karty cenowe w artykule */
.pcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:1.6em !important; }
.pcards__cap{ grid-column:1 / -1; font-size:11.5px !important; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute) !important; margin:0 0 4px !important; line-height:1.4 !important; }
.pcard{
  display:flex; flex-direction:column; padding:clamp(20px,2vw,26px); background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-l); box-shadow:var(--shadow-s); margin:0 !important;
}
.pcard--alt{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-s); }
.prose .pcard__name{ font-weight:600; font-size:1rem; color:var(--ink); margin:0; line-height:1.3; }
.prose .pcard__price{ margin-top:10px; font-family:var(--f-display); font-weight:300; font-size:clamp(1.7rem,2.4vw,2.1rem); line-height:1.05; letter-spacing:-.02em; color:var(--accent); white-space:nowrap; }
.prose .pcard__price--txt{ font-size:clamp(1.35rem,1.8vw,1.55rem); white-space:normal; }
.pcard dl{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--rule-soft); display:grid; gap:4px; }
.pcard dt{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }
.pcard dt:not(:first-child){ margin-top:12px; }
.pcard dd{ margin:0; font-size:.93rem; line-height:1.55; color:var(--ink-soft); }
@media (max-width:820px){ .pcards{ grid-template-columns:1fr; } }
.post-body .post-cta{ margin-top:2.6em; }
.post-body .table-wrap{ margin-top:1.4em; box-shadow:var(--shadow-s); }
.post-body .faq{ margin-top:1.2em; }

.post-toc{ padding:6px 22px 14px; box-shadow:var(--shadow-s); }
.post-toc a{ position:relative; }
.post-toc a.is-current{ font-weight:600; }
.post-toc a.is-current::before{ content:""; position:absolute; left:-22px; top:12px; bottom:12px; width:2px; background:var(--accent); border-radius:2px; }

.post-bio{
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:clamp(18px,2.4vw,28px); align-items:start;
  margin-top:3em !important; padding:clamp(22px,2.8vw,32px); background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-xl); box-shadow:var(--shadow-s);
}
.post-bio img{ width:88px; height:88px; border-radius:50%; object-fit:cover; }
.post-bio p.post-bio__name{ margin-top:6px !important; font-family:var(--f-display); font-size:1.6rem; line-height:1.1; color:var(--ink); }
.post-bio p{ margin-top:10px; font-size:1rem; line-height:1.65; }
.post-bio .tlink{ margin-top:14px; border-bottom:0 !important; }
@media (max-width:560px){ .post-bio{ grid-template-columns:1fr; } .post-bio img{ width:72px; height:72px; } }

/* wyróżniony artykuł na liście bloga */
.bfeat{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0; align-items:stretch;
  padding:0; overflow:hidden; border-radius:var(--r-xl);
}
.bfeat:hover{ transform:translateY(-3px); }
.bfeat__img{ position:relative; display:block; overflow:hidden; min-height:420px; background:var(--paper-deep); }
.bfeat__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.bfeat:hover .bfeat__img img{ transform:scale(1.04); }
.bfeat__flag{
  position:absolute; left:18px; top:18px; padding:7px 12px; border-radius:999px;
  background:var(--paper); color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.bfeat__body{ display:flex; flex-direction:column; gap:16px; padding:clamp(26px,3.4vw,52px); }
.bfeat h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.8rem,2.8vw,2.7rem); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
.bfeat h2 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.bfeat p{ color:var(--ink-soft); font-size:1.03rem; line-height:1.65; }
.bfeat__foot{ margin-top:auto; padding-top:22px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.bfeat__foot .post-author{ margin-top:0; }
.bfeat__btn{ position:relative; z-index:1; pointer-events:none; }
.bfeat:hover .bfeat__btn{ background:var(--accent); border-color:var(--accent); }
@media (max-width:900px){
  .bfeat{ grid-template-columns:1fr; }
  .bfeat__img{ min-height:0; aspect-ratio:16/9; }
}

.bduo{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; margin-top:18px; }
.bduo__author{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(20px,2.6vw,34px); align-items:center;
  padding:clamp(22px,2.8vw,36px); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-xl);
}
.bduo__author img{ width:150px; height:150px; border-radius:var(--r-l); object-fit:cover; }
.bduo__author p{ color:var(--ink-soft); }
.bduo__cta{
  padding:clamp(24px,3vw,40px); border-radius:var(--r-xl); color:var(--paper-on-dark);
  background:
    radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--accent-on-dark) 26%, transparent), transparent 70%),
    var(--dark);
}
.bduo__cta h3{ color:var(--paper-on-dark); }
.bduo__cta .d3 em{ color:var(--accent-on-dark); }
.bduo__cta p{ color:rgba(241,238,232,.7); }
.bduo__cta .hero__actions{ margin-top:24px; }
@media (max-width:1000px){ .bduo{ grid-template-columns:1fr; } }
@media (max-width:560px){ .bduo__author{ grid-template-columns:1fr; } .bduo__author img{ width:96px; height:96px; } }
.blist{ padding-bottom:clamp(72px,9vw,120px); }

/* panel boczny */
.baside{ position:sticky; top:calc(var(--nav-h) + 28px); display:grid; gap:16px; }
@media (max-width:1000px){ .baside{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .baside{ grid-template-columns:1fr; } }
.bbox{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l); padding:22px; }
.bbox h3{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px; }
.bauthor{ display:flex; align-items:center; gap:14px; }
.bauthor img{ width:60px; height:60px; border-radius:50%; object-fit:cover; object-position:50% 18%; flex:none; }
.bauthor strong{ display:block; font-weight:600; line-height:1.3; }
.bauthor span{ font-size:.86rem; color:var(--ink-mute); }
.bbox > p{ margin-top:14px; font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
.bbox__link{ display:inline-block; margin-top:12px; font-size:.9rem; font-weight:600; border-bottom:1px solid var(--accent); }
.bbox__link:hover{ color:var(--accent); }
.bbox--dark{ background:var(--dark); border-color:var(--dark); color:var(--paper-on-dark); }
.bbox--dark h3{ color:rgba(241,238,232,.55); }
.bbox--dark .d3{ font-size:1.45rem; line-height:1.2; margin-top:0; color:var(--paper-on-dark); }
.bbox--dark .d3 em{ color:var(--accent-on-dark); }
.bbox--dark > p{ color:rgba(241,238,232,.68); }
.bbox--dark .btn{ margin-top:18px; width:100%; justify-content:center; --fg:#121417; }

/* ---------- 23 · strona główna ---------- */
.hero--home .hero__draw{ display:none; }
.hero--home .hero__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; margin-top:0; gap:clamp(36px,5vw,80px); }
.hero--home .d1{ font-size:clamp(2.5rem,4.1vw,4.1rem); }
.hero--home .lead{ margin-top:clamp(22px,2.4vw,32px); }
@media (max-width:900px){ .hero--home .hero__grid{ grid-template-columns:1fr; } }

/* makieta strony w hero */
.hmock{ position:relative; padding:0 0 clamp(70px,7vw,110px) clamp(56px,6vw,96px); }
.hmock__browser{
  position:relative; background:var(--surface); border-radius:18px; overflow:hidden;
  box-shadow:0 2px 4px rgba(18,20,23,.04), 0 40px 80px -30px rgba(18,20,23,.35), 0 0 0 1px rgba(18,20,23,.06);
  transform:perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin:left center;
  animation:mockFloat 9s ease-in-out infinite alternate;
}
@keyframes mockFloat{ to{ transform:perspective(1600px) rotateY(-4deg) rotateX(1deg) translateY(-6px); } }
.hmock__bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#F1EEE8; border-bottom:1px solid var(--rule-soft); }
.hmock__bar i{ width:9px; height:9px; border-radius:50%; background:#D9D4CA; }
.hmock__bar i:first-child{ background:#E58C6A; }
.hmock__bar span{ flex:1; height:18px; margin-left:12px; border-radius:999px; background:var(--surface); max-width:58%; }
.hmock__page{ padding:14px; }
.hmock__nav{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hmock__nav b{ width:62px; height:9px; border-radius:4px; background:var(--ink); }
.hmock__nav span{ width:34px; height:6px; border-radius:4px; background:var(--paper-deep); }
.hmock__nav span:first-of-type{ margin-left:auto; }
.hmock__nav em{ width:52px; height:18px; border-radius:999px; background:var(--accent); }
.hmock__hero{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/8.4; }
.hmock__hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hmock__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,20,23,.72) 0%, rgba(18,20,23,.2) 62%, transparent); }
.hmock__copy{ position:absolute; z-index:1; left:7%; top:50%; transform:translateY(-50%); width:48%; display:grid; gap:7px; }
.hmock__copy b{ height:13px; border-radius:4px; background:#fff; }
.hmock__copy b + b{ width:72%; }
.hmock__copy span{ height:5px; border-radius:3px; background:rgba(255,255,255,.55); width:88%; }
.hmock__copy span + span{ width:64%; }
.hmock__copy em{ margin-top:6px; width:44%; height:20px; border-radius:999px; background:var(--accent); }
.hmock__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.hmock__cards div{ height:58px; border-radius:10px; background:var(--paper); position:relative; }
.hmock__cards div::before{ content:""; position:absolute; left:10px; top:11px; width:16px; height:16px; border-radius:5px; background:var(--accent-tint); }
.hmock__cards div::after{ content:""; position:absolute; left:10px; right:22%; bottom:13px; height:5px; border-radius:3px; background:var(--paper-deep); }

.hmock__phone{
  position:absolute; left:0; bottom:0; width:clamp(112px,11vw,150px); aspect-ratio:9/18.5;
  background:var(--surface); border-radius:22px; padding:8px; overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(18,20,23,.45), 0 0 0 1px rgba(18,20,23,.08), inset 0 0 0 4px var(--ink);
  animation:mockFloat2 7s ease-in-out infinite alternate;
}
@keyframes mockFloat2{ to{ transform:translateY(-8px); } }
.hmock__phone img{ width:100%; height:44%; object-fit:cover; border-radius:15px 15px 8px 8px; }
.hmock__pbody{ display:grid; gap:7px; padding:12px 8px; }
.hmock__pbody b{ height:9px; border-radius:4px; background:var(--ink); width:80%; }
.hmock__pbody span{ height:5px; border-radius:3px; background:var(--paper-deep); }
.hmock__pbody span + span{ width:70%; }
.hmock__pbody em{ margin-top:8px; height:22px; border-radius:999px; background:var(--accent); }

.hmock__chip{
  position:absolute; right:clamp(-8px,-1vw,0px); bottom:clamp(8px,2vw,24px);
  padding:12px 16px; border-radius:16px; background:var(--surface); color:#E9A23B;
  box-shadow:0 20px 40px -18px rgba(18,20,23,.35), 0 0 0 1px rgba(18,20,23,.05);
  animation:mockFloat2 8s ease-in-out infinite alternate-reverse;
}
.hmock__chip svg{ width:96px; height:auto; }
@media (max-width:900px){
  .hmock{ max-width:560px; padding-left:clamp(40px,10vw,64px); }
  .hmock__browser{ transform:none; animation:none; }
}
@media (prefers-reduced-motion:reduce){ .hmock__browser,.hmock__phone,.hmock__chip{ animation:none; } }

/* trzy ścieżki jako karty */
.paths--cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.paths--cards .path{ display:flex; flex-direction:column; gap:18px; padding:clamp(26px,2.8vw,38px); }
.paths--cards .path > span:nth-child(2){ flex:1; }
.paths--cards .path__name{ font-size:clamp(1.9rem,2.6vw,2.5rem); }
.paths--cards .path__go{ justify-self:auto; align-self:flex-start; }
.paths--cards .path::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px 220px at 100% 0%, var(--accent-tint), transparent 70%); opacity:0; transition:opacity .4s var(--ease);
}
.paths--cards .path:hover::after{ opacity:1; }
@media (max-width:1000px){ .paths--cards{ grid-template-columns:1fr; } }

/* cytat jako karta */
.quote--card{
  position:relative; overflow:hidden;
  padding:clamp(32px,5vw,72px); border-radius:var(--r-xl);
  background:radial-gradient(700px 360px at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--surface);
  border:1px solid var(--rule);
}
.quote--card blockquote{ max-width:26ch !important; }

/* realizacje ze zdjęciem */
.cell--case{ padding:clamp(12px,1.2vw,16px) clamp(12px,1.2vw,16px) clamp(24px,2.6vw,34px); }
.cell--case > :not(.cell__img){ margin-inline:clamp(12px,1.4vw,20px); }
.cell__img{ aspect-ratio:16/9; border-radius:14px; overflow:hidden; margin-bottom:clamp(20px,2.2vw,28px); background:var(--paper-dim); }
.cell__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.cell--case:hover .cell__img img{ transform:scale(1.04); }

/* ---------- 24 · o nas ---------- */
.about-hero{ padding-bottom:clamp(56px,7vw,100px); }
.about-hero__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,6vw,96px); align-items:center; }
@media (max-width:900px){ .about-hero__grid{ grid-template-columns:1fr; } }
.about-hero .d1{ font-size:clamp(3rem,6.4vw,5.8rem); }
.about-photo{ position:relative; margin:0; max-width:440px; justify-self:end; width:100%; isolation:isolate; }
@media (max-width:900px){ .about-photo{ justify-self:start; max-width:420px; } }
.about-photo img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; border-radius:var(--r-xl); box-shadow:0 40px 80px -36px rgba(18,20,23,.5); }
.about-photo::before{
  content:""; position:absolute; inset:auto -18px -18px auto; width:70%; height:60%; z-index:-1;
  border-radius:var(--r-xl); background:var(--accent-tint);
}
.about-photo__tag{
  position:absolute; left:-24px; bottom:32px; display:grid; gap:4px; max-width:250px;
  padding:16px 20px; border-radius:var(--r-m); background:var(--surface); box-shadow:var(--shadow-m);
}
.about-photo__tag .label{ color:var(--ink); }
@media (max-width:560px){ .about-photo__tag{ left:12px; right:12px; bottom:12px; max-width:none; } }

.about-why{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,88px); align-items:center; }
@media (max-width:900px){ .about-why{ grid-template-columns:1fr; } }
.about-why__img{ margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-m); aspect-ratio:3/2; }
.about-why__img img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:560px){ .about-photo::before{ right:-8px; bottom:-10px; } }

/* o nas, dodatkowa sekcja */
.about-ai{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(28px,4.6vw,64px); border-radius:var(--r-xl); border:1px solid var(--rule);
  background:radial-gradient(700px 380px at 0% 0%, var(--accent-tint), transparent 70%), var(--surface);
}
@media (max-width:900px){ .about-ai{ grid-template-columns:1fr; } }
.about-ai__lists{ display:grid; gap:12px; }
.about-ai__box{ padding:clamp(20px,2.2vw,28px); border-radius:var(--r-l); background:var(--paper); }
.ticks--no li::before{ background:rgba(18,20,23,.07); }
.ticks--no li::after{
  background:var(--ink-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 1.5l5 5M6.5 1.5l-5 5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 1.5l5 5M6.5 1.5l-5 5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 25 · wezwania do wyceny ---------- */
.cta-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px;
  padding:clamp(24px,3.4vw,40px) clamp(22px,3.4vw,44px);
  background:var(--accent-tint); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius:var(--r-xl);
}
.cta-band > div:first-child{ flex:1 1 380px; }
.cta-band p{ color:var(--ink-soft); max-width:52ch; }
.cta-band__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.mcta{ display:none; }
@media (max-width:760px){
  .mcta{
    display:flex; gap:8px; position:fixed; left:12px; right:12px; bottom:12px; z-index:40;
    padding:8px; border-radius:999px; background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 14px 34px -14px rgba(18,20,23,.45);
    transform:translateY(140%); transition:transform .45s var(--ease-out);
  }
  body.show-mcta .mcta{ transform:none; }
  body.menu-open .mcta{ transform:translateY(140%); }
  .mcta .btn{ flex:1; justify-content:center; }
  .mcta__tel{ display:grid; place-items:center; width:48px; flex:0 0 48px; border-radius:999px; background:var(--ink); color:#fff; }
  .mcta ~ .foot, body:has(.mcta) .foot{ margin-bottom:84px; }
}

/* ---------- 26 · ramka „Co dostajesz” ---------- */
.getbox{
  padding:clamp(22px,2.4vw,30px); background:var(--surface);
  border-radius:var(--r-l); box-shadow:var(--shadow-m);
}
.getbox h3{ margin-bottom:4px; }

/* tabele w treści, wspólny styl (komputer i telefon) */
.post-body .table-wrap{ border:0; background:transparent; box-shadow:none; overflow:visible; }
.ptable{ width:100%; min-width:0; border-collapse:separate; border-spacing:0; font-size:.95rem; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l); overflow:visible; box-shadow:var(--shadow-s); }
.ptable thead th:first-child{ border-top-left-radius:var(--r-l); }
.ptable thead th:last-child{ border-top-right-radius:var(--r-l); }
.ptable tbody tr:last-child > :first-child{ border-bottom-left-radius:var(--r-l); }
.ptable tbody tr:last-child > :last-child{ border-bottom-right-radius:var(--r-l); }
.ptable caption{
  caption-side:top; text-align:left; padding:0 0 12px; border:0; background:none;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
}
.ptable thead th{ background:color-mix(in srgb, var(--accent) 6%, var(--surface)); padding:14px 22px; border-bottom:1px solid var(--rule); font-size:10.5px; letter-spacing:.1em; color:var(--ink-soft); }
.ptable tbody th,.ptable tbody td{ padding:18px 22px; border-bottom:1px solid var(--rule-soft); vertical-align:top; line-height:1.55; }
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{ border-bottom:0; }
.ptable tbody tr{ transition:background .25s var(--ease); }
.ptable tbody tr:hover{ background:color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.ptable tbody th{ font-weight:600; color:var(--ink); width:28%; }
.ptable tbody td{ color:var(--ink-soft); }
.ptag{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:.84rem; font-weight:600; line-height:1.4; white-space:nowrap; color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); }

@media (max-width:640px){
  .ptable,.ptable caption,.ptable tbody,.ptable tr,.ptable th,.ptable td{ display:block; width:auto !important; }
  .ptable{ background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible; }
  .ptable thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ptable tbody{ display:grid; gap:10px; }
  .ptable tbody tr{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-m); padding:16px 18px; box-shadow:var(--shadow-s); }
  .ptable tbody th,.ptable tbody td{ padding:0; border:0; }
  .ptable tbody th{ font-size:1.02rem; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--rule-soft); }
  .ptable tbody td + td{ margin-top:10px; }
  .ptable tbody td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }
}

/* formularz, wysyłka */
.form__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__rodo{ margin-top:12px; font-size:.78rem; line-height:1.55; color:var(--ink-mute); }
.form__rodo a{ text-decoration:underline; }
.form__fail{ display:none; margin-top:16px; padding:14px 18px; border-radius:var(--r-m); background:rgba(180,39,29,.08); color:#8D2416; font-size:.95rem; }
.form__fail.is-on{ display:block; }
.form button[disabled]{ opacity:.6; cursor:wait; }