/* =========================================================
   Natalia Brzezińska, system projektowy
   Kierunek: nowoczesna kancelaria. Głęboka zieleń jako kolor
   marki, ciepły papier, wyrazista czytelna typografia.
   Wszystko lokalnie, czcionki systemowe, zero zasobów z sieci.
   ========================================================= */
/* Czcionka Ubuntu, wgrana lokalnie (Ubuntu Font Licence 1.0, wolno używać
   komercyjnie), zero pobierania z internetu. Pliki w /fonts. */
@font-face{
  font-family:'Ubuntu';
  src:url('fonts/ubuntu-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Ubuntu';
  src:url('fonts/ubuntu-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Ubuntu';
  src:url('fonts/ubuntu-semibold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Ubuntu';
  src:url('fonts/ubuntu-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --ink:#33272A;          /* nagłówki, mocny tekst */
  --body:#4B3E3A;         /* tekst akapitów */
  --mute:#5E4F4B;         /* etykiety, podpisy, drobny tekst (WCAG AA) */
  --paper:#FDFAF8;        /* tło główne, czysta biel */
  --paper-tint:#FAF3EF;   /* tło sekcji naprzemiennych */
  --line:#E8D9D1;         /* linie, obramowania, bardzo jasne */
  --line-deep:#D6BFB4;    /* linie na hover / mocniejsze podziały */

  /* Główny serwis (strona główna, O mnie, Kontakt, Regulamin...) jest
     celowo NEUTRALNY, czerń/biel/szarość, zero koloru. To jest jedyny
     "akcent": sam kontrast czerni na bieli. */
  --accent:#8A6630;
  --accent-deep:#7A5A2A;
  --accent-tint:#F6EDE0;

  --radius:0px;           /* ostre, proste krawędzie */
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Ubuntu',Arial,Helvetica,sans-serif;

  /* Kilka starszych komponentów (np. promo-box "Buduję też strony
     internetowe") nadal odwołuje się do tych nazw zmiennych, domyślnie
     są neutralne (spójne z resztą strony), a ich jedynym wyjątkiem jest
     poniższa reguła :has(), która włącza niebieski TYLKO na podstronie
     "Strony WWW" (klasa .page-www na <main>). Jedno miejsce steruje
     kolorem całej podstrony. */
  --brand:var(--ink);
  --brand-deep:#000000;
  --wash-bg:var(--paper);
  --wash-alt:var(--paper-tint);
  --wash-tint:var(--accent-tint);
  --wash-line:var(--line);
  --wash-ink:var(--ink);
}

/* ---- JEDYNY KOLOR NA CAŁEJ STRONIE ----
   Reszta serwisu jest neutralna (czerń/biel). Podstrona "Strony WWW"
   ma zdefiniowaną klasę .page-www na <main>, poniższa reguła wykrywa
   to i podmienia zmienne z :root na niebieskie, WŁĄCZNIE z <body> i
   <header>, które są poza .page-www w drzewie DOM (stąd :root, a nie
   .page-www, zmienna ustawiona na :root spływa do całej strony).
   Chcesz zmienić kolor podstrony? Zmień te 7 wartości. */
:root:has(.page-www){
  --brand:#8A6630;
  --brand-deep:#7A5A2A;
  --wash-bg:#FDF9F6;
  --wash-alt:#F9EFE8;
  --wash-tint:#F3E4D6;
  --wash-line:#E7D2C4;
  --wash-ink:#3A2A22;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* Odstęp od góry przy przewijaniu do kotwicy, żeby przyklejony
   nagłówek strony nie zasłaniał początku sekcji. Dotyczy wszystkich
   elementów z identyfikatorem, nie tylko sekcji. */
section[id], div[id], a[id]{scroll-margin-top:100px;}
body{
  font-family:var(--sans);
  color:var(--body);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* TYPOGRAFIA, jedna skala dla całego serwisu.
   Waga 500 (medium) na wszystkich nagłówkach daje spokojny, elegancki
   ton, spójny ze stylem "ultra czystym". Rozmiary są ustawiane niżej,
   przy konkretnych sekcjach, ale rodzina, kolor i waga są wspólne. */
h1,h2,h3,.display{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.15;
}
h3{font-weight:600;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
::selection{background:var(--ink);color:#fff;}

.wrap{max-width:1140px;margin:0 auto;padding:0 32px;}

.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:12px;
  font-weight:700;
  color:var(--mute);
}

/* --- Przyciski --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;
  min-height:48px;
  font-family:var(--sans);
  font-size:15px;font-weight:600;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background-color .25s ease, color .25s ease,
             border-color .25s ease, box-shadow .25s ease,
             transform .18s ease;
}
/* Przyciski w duchu reszty strony: sama cienka linia i tekst,
   bez wypełnienia. Tło strony prześwituje przez przycisk. Dopiero
   pod kursorem ramka ciemnieje, a tło delikatnie się wypełnia. */
.btn-primary{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-deep);
  position:relative;
  z-index:1;
}
/* Wypełnienie wjeżdża od lewej strony przy najechaniu kursorem.
   Warstwa jest pod treścią (z-index:-1), więc tekst i strzałka
   pozostają czytelne przez cały czas trwania animacji. */
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:#8A6630;
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.btn-primary:hover{
  color:#fff;
  border-color:#8A6630;
  box-shadow:0 8px 20px rgba(138,102,48,0.18);
}
.btn-primary:hover::before{transform:scaleX(1);}
.btn-primary:active{transform:translateY(1px);}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-deep);
  position:relative;z-index:1;
}
.btn-ghost::before{
  content:'';position:absolute;inset:0;
  background:var(--accent-tint);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost:hover::before{transform:scaleX(1);}
.btn svg{transition:transform .22s ease;}
.btn:hover svg{transform:translateX(4px);}
/* Widoczne obramowanie przy nawigacji klawiaturą (dostępność) */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
}

/* --- Nagłówek --- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  height:82px;
}
.logo-text{
  font-family:var(--serif);
  font-size:20px;font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink);
}
.logo-text a{color:inherit;}
nav ul{display:flex;gap:34px;}
nav a{
  font-family:var(--sans);
  font-size:15px;font-weight:500;color:var(--body);
  position:relative;padding:4px 0;
  transition:color .15s ease;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:0;height:1.5px;background:var(--accent);
  transition:width .2s ease;
}
nav a:hover{color:var(--accent);}
nav a:hover::after{width:100%;}

.nav-actions{display:flex;align-items:center;gap:20px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink);}

/* --- HERO: animowane tło (powolne, subtelne plamy koloru) ---
   Trzy rozmyte plamy w odcieniach niebieskiego przesuwają się bardzo
   powoli w tle nagłówka. Efekt jest celowo delikatny, ma dodawać
   głębi, a nie odwracać uwagę od treści. Całość to czysty CSS,
   bez obrazków i bez JavaScriptu, więc nie spowalnia strony. */
.hero-shell{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;inset:0;
  z-index:-1;
  pointer-events:none;
}
.hero-bg .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(62px);
  opacity:1;
}
.blob-1{
  width:560px;height:560px;
  top:-140px;left:-100px;
  background:radial-gradient(circle, #F2D3D6 0%, rgba(242,211,214,0) 70%);
  animation:blobDrift1 11s ease-in-out infinite alternate;
}
.blob-2{
  width:500px;height:500px;
  top:20px;right:-120px;
  background:radial-gradient(circle, #F5DFD2 0%, rgba(245,223,210,0) 70%);
  animation:blobDrift2 14s ease-in-out infinite alternate;
}
.blob-3{
  width:460px;height:460px;
  bottom:-160px;left:42%;
  background:radial-gradient(circle, #EFE0C9 0%, rgba(239,224,201,0) 70%);
  animation:blobDrift3 17s ease-in-out infinite alternate;
}
@keyframes blobDrift1{
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(430px,240px) scale(1.5); }
}
@keyframes blobDrift2{
  0%   { transform:translate(0,0) scale(1.25); }
  100% { transform:translate(-390px,290px) scale(0.85); }
}
@keyframes blobDrift3{
  0%   { transform:translate(-50%,0) scale(1); }
  100% { transform:translate(10%,-310px) scale(1.55); }
}
/* Szacunek dla ustawien systemowych: jesli ktos ma wylaczone animacje
   (np. z powodu wrazliwosci na ruch), plamy zostaja nieruchome. */
@media (prefers-reduced-motion:reduce){
  .blob-1,.blob-2,.blob-3{animation:none;}
}
@media (max-width:700px){
  .hero-bg .blob{filter:blur(55px);opacity:0.7;}
  .blob-1{width:360px;height:360px;top:-90px;left:-80px;}
  .blob-2{width:320px;height:320px;right:-90px;}
  .blob-3{width:300px;height:300px;bottom:-110px;}
}

/* Hero podstrony jest niższe niż na stronie głównej, więc plamy są
   mniejsze i słabsze, żeby nie przytłoczyć krótszej sekcji. */
.legal-hero .blob{opacity:0.9;filter:blur(54px);}
.legal-hero .blob-1{width:380px;height:380px;top:-130px;left:-90px;}
.legal-hero .blob-2{width:340px;height:340px;top:-40px;right:-110px;}
.legal-hero .blob-3{width:300px;height:300px;bottom:-150px;left:40%;}
@media (max-width:700px){
  .legal-hero .blob{opacity:0.75;filter:blur(42px);}
  .legal-hero .blob-1{width:260px;height:260px;top:-80px;left:-70px;}
  .legal-hero .blob-2{width:230px;height:230px;right:-70px;}
  .legal-hero .blob-3{width:200px;height:200px;bottom:-90px;}
}

/* --- HERO ---
   Układ dwukolumnowy: po lewej tekst (nazwisko, opis, przycisk),
   po prawej siatka 2x2 z obszarami działalności. Okno z ofertą stron
   internetowych rozciąga się pod spodem na całą szerokość.
   Na węższych ekranach wszystko układa się w jedną kolumnę. */
.hero{
  display:grid;
  grid-template-columns:1.12fr 0.88fr;
  grid-template-areas:"main foto" "stats stats" "hint hint";
  align-items:center;
  gap:52px 48px;
  max-width:1140px;margin:0 auto;
  padding:104px 0 96px;
  text-align:left;
}
.hero-main{grid-area:main;}
.hero-foto{grid-area:foto;position:relative;isolation:isolate;justify-self:center;max-width:370px;width:100%;}
.hero-foto img{width:100%;height:auto;display:block;position:relative;z-index:2;}
/* Cienka ramka przesunięta za zdjęciem, spójna z liniami na stronie. */
.hero-foto::after{
  content:'';position:absolute;
  left:20px;top:20px;right:-20px;bottom:-20px;
  border:1px solid var(--line-deep);
  z-index:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.hero-foto:hover::after{transform:translate(-9px,-9px);}
/* Linia pod danymi kontaktowymi w sekcji powitalnej. */
.hero-trust{
  margin-top:22px;
  font-family:var(--sans);
  font-size:13px;color:var(--mute);
  letter-spacing:0.01em;
}
.hero-www-box{grid-area:promo;}
.scroll-hint{grid-area:hint;}
.hero .eyebrow{
  margin-bottom:22px;
  color:var(--mute);
  letter-spacing:0.16em;
}
.hero h1{
  font-size:clamp(38px,5.4vw,60px);
  line-height:1.06;
  letter-spacing:-0.015em;
  margin-bottom:22px;
  font-weight:500;
}
.hero p.lede{
  font-size:18px;line-height:1.7;
  color:var(--body);
  max-width:520px;margin:0 0 32px;
}
.hero-ctas{display:flex;gap:14px;margin-bottom:0;flex-wrap:wrap;justify-content:flex-start;}

/* --- Okno z ofertą stron internetowych (pod hero) --- */
.hero-www-box{
  display:flex;align-items:center;gap:20px;
  width:100%;max-width:none;
  margin:0;
  padding:22px 28px;
  border:1px solid var(--line);
  background:var(--paper);
  text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hero-www-box:hover{
  border-color:var(--line-deep);
  box-shadow:0 12px 28px rgba(0,0,0,0.06);
}
.hero-www-box-icon{
  width:48px;height:48px;flex-shrink:0;
  border-radius:0;
  background:#F6EDE0;
  display:flex;align-items:center;justify-content:center;
}
.hero-www-box-icon svg{width:22px;height:22px;color:#8A6630;}
.hero-www-box-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.hero-www-box-text strong{font-family:var(--sans);font-size:15.5px;color:var(--ink);font-weight:600;}
.hero-www-box-text span{font-size:13.5px;color:var(--mute);line-height:1.5;}
.hero-www-box-links{display:flex;flex-direction:row;align-items:center;gap:10px;flex-shrink:0;}
.hero-www-box-links .btn{padding:11px 22px;font-size:14px;}
.hero-www-box-links .btn-primary,
.hero-www-box-brief-btn{
  background:transparent;
  color:#8A6630;
  border:1.5px solid #8A6630;
  position:relative;z-index:1;
}
.hero-www-box-links .btn-primary::before,
.hero-www-box-brief-btn::before{
  content:'';position:absolute;inset:0;
  background:#8A6630;
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.hero-www-box-links .btn-primary:hover,
.hero-www-box-brief-btn:hover{color:#fff;border-color:#8A6630;}
.hero-www-box-links .btn-primary:hover::before,
.hero-www-box-brief-btn:hover::before{transform:scaleX(1);}
@media (max-width:620px){
  .hero-www-box{flex-direction:column;text-align:center;gap:16px;padding:24px 20px;}
  .hero-www-box-text{align-items:center;}
  .hero-www-box-links{width:100%;flex-direction:column;}
  .hero-www-box-links .btn{width:100%;justify-content:center;}
}

.hero-stats{
  grid-area:stats;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0 28px;
  width:100%;
  margin-top:12px;
}
.hero-stats-label{grid-column:1 / -1;}
/* Etykieta nad listą: od razu mówi, czym jest ten spis,
   zamiast zostawiać odwiedzającego z czterema pozycjami bez kontekstu. */
.hero-stats-label{
  display:block;
  font-family:var(--sans);
  font-size:11.5px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--mute);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
/* Lista obszarow dzialalnosci: numer, nazwa, krotki opis i strzalka.
   Przy najechaniu wiersz delikatnie przesuwa sie w prawo, numer
   nabiera koloru marki, a strzalka wysuwa sie z prawej strony. */
.hero-stat{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:20px 0 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  transition:border-color .25s ease;
}
.hero-stat:hover{border-color:var(--brand);}
.hero-stat-n{
  font-family:var(--sans);
  font-size:11.5px;font-weight:700;letter-spacing:0.08em;
  color:var(--mute);min-width:22px;flex-shrink:0;
  transition:color .22s ease;
}
.hero-stat:hover .hero-stat-n{color:#8A6630;}
.hero-stat-txt{display:flex;flex-direction:column;gap:2px;}
.hero-stat-txt{flex:1;min-width:0;}
.hero-stat-txt strong{
  display:block;
  font-family:var(--sans);
  font-size:16px;font-weight:600;color:var(--ink);
  line-height:1.35;margin-bottom:2px;
}
.hero-stat-txt em{
  display:block;
  font-style:normal;
  font-size:13.5px;color:var(--mute);line-height:1.5;
}
.hero-stat-go{
  color:#8A6630;font-size:15px;margin-top:8px;
  opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
.hero-stat:hover .hero-stat-go{opacity:1;transform:translateX(0);}

/* --- Sekcje --- */
.section{padding:96px 0;}
.section-alt{background:var(--paper-tint);}
.section-head{text-align:center;max-width:780px;margin:0 auto 60px;}
.section-head .rule-title{
  display:block;
  margin-bottom:0;
}
.section-head .rule-title::before,
.section-head .rule-title::after{display:none;}
.section-head h2{font-size:clamp(30px,4.5vw,42px);letter-spacing:-0.01em;line-height:1.12;font-weight:500;color:var(--ink);}
.section-head p{
  color:var(--mute);font-size:16.5px;margin-top:16px;
  max-width:520px;margin-left:auto;margin-right:auto;
}

/* --- Panel usług (Prawo / Mentoring) --- */
.law-panel{
  border:1px solid var(--line);
  background:var(--paper);
  padding:40px;
  border-radius:var(--radius);
  margin-bottom:28px;
  position:relative;
}
.law-panel::before{display:none;}
.law-panel-head{
  display:flex;gap:20px;align-items:flex-start;
  margin-bottom:30px;padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
/* ---- NUMERACJA: jeden motyw przewodni całego serwisu ----
   Zamiast ikon każdy blok treści (panel, karta, pozycja listy, krok)
   oznaczony jest dwucyfrowym numerem w tym samym stylu. Numer jest
   przygaszony, a przy najechaniu na klikalny element nabiera koloru
   marki. Dzięki temu strona główna i podstrony wyglądają jak jedna
   całość, bez mieszania różnych rodzajów grafiki. */
.card-num, .mgmt-num{
  display:inline-block;
  font-family:var(--sans);
  font-size:12px;font-weight:700;
  letter-spacing:0.1em;
  color:var(--mute);
  flex-shrink:0;
  transition:color .2s ease;
}
.card-num{padding-top:5px;min-width:30px;}
.mgmt-num{margin-bottom:20px;}
a.mgmt-item:hover .mgmt-num{color:var(--brand);}
.law-panel-head h3{font-size:22px;margin-bottom:6px;font-weight:600;}
.law-panel-head .desc{font-size:15px;color:var(--body);}
.law-list{
  columns:2;column-gap:44px;
  margin-bottom:22px;
}
.law-list li{
  font-size:15px;color:var(--body);
  padding-left:20px;position:relative;
  margin-bottom:14px;break-inside:avoid;
}
.law-list li::before{
  content:'';position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;
  background:var(--ink);
}
.fine-print{
  font-size:13px;color:var(--mute);
  border-top:1px solid var(--line);
  padding-top:18px;line-height:1.65;
}

/* --- Karty zarządzania (Projekty / Serwis) --- */
.mgmt-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  max-width:1076px;margin:0 auto;
}
.mgmt-grid-3{grid-template-columns:repeat(3,1fr);max-width:1076px;}
.mgmt-item{
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  padding:40px;
  background:var(--paper);
  border-radius:var(--radius);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.mgmt-item:hover{
  border-color:var(--line-deep);
  box-shadow:0 12px 28px rgba(0,0,0,0.06);
}
.mgmt-item h3{font-size:20px;margin-bottom:12px;font-weight:600;}
.mgmt-item p{font-size:15px;line-height:1.7;color:var(--body);margin-bottom:22px;}
.mgmt-list{
  border-top:1px solid var(--line);
  padding-top:22px;
}
.mgmt-list li{
  font-size:14.5px;color:var(--body);
  padding-left:20px;position:relative;margin-bottom:13px;
}
.mgmt-list li:last-child{margin-bottom:0;}
.mgmt-list li::before{
  content:'';position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--ink);
}

/* --- O Natalii --- */
.about-wrap{max-width:760px;margin:0 auto;}
/* Sekcja "O Natalii": zdjęcie obok tekstu. Na węższych ekranach
   zdjęcie przechodzi nad tekst i zmniejsza się, żeby nie zabierać
   całego widoku na telefonie. */
.about-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:56px;
  align-items:center;
}
.about-foto{position:relative;isolation:isolate;}
.about-foto img{
  width:100%;height:auto;display:block;
  border-radius:0;
  position:relative;z-index:2;
}
/* Delikatna ramka przesunięta za zdjęciem, spójna z cienkimi liniami
   używanymi w całym serwisie. Przy najechaniu przesuwa się lekko,
   co daje wrażenie głębi. */
.about-foto::after{
  content:'';position:absolute;
  left:18px;top:18px;right:-18px;bottom:-18px;
  border:1px solid var(--line-deep);
  z-index:1;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.about-foto:hover::after{transform:translate(-8px,-8px);}
@media (prefers-reduced-motion:reduce){
  .about-foto:hover::after{transform:none;}
}
.about-text{max-width:none;margin:0;text-align:center;}
/* Pierwsze zdanie jako wyróżniony cytat: to najważniejszy przekaz
   całej sekcji, więc dostaje większy stopień pisma i cienką linię. */
.about-cytat{
  font-size:26px !important;
  line-height:1.45 !important;
  color:var(--ink) !important;
  font-weight:500 !important;
  padding-bottom:26px;
  margin-bottom:26px !important;
  border-bottom:1px solid var(--line);
}
@media (max-width:620px){ .about-cytat{font-size:21px !important;} }
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr;gap:38px;justify-items:center;}
  .about-foto{max-width:260px;}
  .about-text{text-align:center;}
}
.about-text p{
  font-size:17.5px;line-height:1.8;color:var(--body);margin-bottom:20px;
}
.about-text p:last-child{margin-bottom:0;}
.about-text p:first-child{
  font-size:20px;color:var(--ink);font-weight:500;line-height:1.6;
}

/* --- Kontakt --- */
.contact-wrap{max-width:720px;margin:0 auto;text-align:center;}
.contact-lead{max-width:560px;margin:0 auto 40px;text-align:center;}
.contact-lead p{font-size:17px;line-height:1.8;color:var(--body);}
.contact-direct{
  display:grid;
  /* minmax(0,1fr) zamiast samego 1fr: bez tego dłuższa treść
     (adres e-mail) rozpycha swoją kolumnę i kafle wychodzą nierówne. */
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  max-width:720px;margin:0 auto;
  align-items:stretch;
}
.contact-direct-item{
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--line);
  padding:24px 22px;
  background:var(--paper);
  border-radius:var(--radius);
  transition:border-color .16s ease,box-shadow .16s ease;
  text-align:left;
}
.contact-direct-item:hover{
  border-color:var(--line-deep);
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}
.contact-direct-item svg{width:24px;height:24px;flex-shrink:0;color:var(--ink);}
.contact-direct-item > div{display:flex;flex-direction:column;gap:5px;min-width:0;}
.contact-direct-label{
  font-family:var(--sans);
  font-size:11.5px;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--mute);font-weight:600;
}
.contact-direct-value{
  font-family:var(--sans);
  font-size:15.5px;font-weight:600;color:var(--ink);
  /* Adres mieści się w jednej linii. Gdyby zabrakło miejsca na bardzo
     wąskim ekranie, złamie się w naturalnym miejscu (przy znaku @). */
  overflow-wrap:break-word;
  word-break:normal;
  line-height:1.4;
  min-width:0;
  white-space:nowrap;
}

/* =========================================================
   Podstrona "Strony WWW", kolor na stałe
   Ta zakładka jest kolorowa cały czas (bez najeżdżania kursorem),
   w tym samym kolorze marki, co "magiczne" rozświetlenie
   na stronie głównej. Reszta serwisu zostaje czarno-biała.
   ========================================================= */
body:has(.page-www){background:var(--wash-bg);}
body:has(.page-www) header{background:var(--wash-bg);border-bottom-color:var(--wash-line);}
.page-www .section-alt,
.page-www .legal-hero{background:var(--wash-alt);text-align:center;}
.page-www .legal-hero .wrap{display:flex;flex-direction:column;align-items:center;}
.page-www .legal-hero p{max-width:600px;margin-left:auto;margin-right:auto;}
.page-www h1, .page-www h2, .page-www h3{color:var(--wash-ink);}
.page-www .legal-hero .eyebrow{color:var(--brand);}
.page-www .section-head .rule-title::before,
.page-www .section-head .rule-title::after{background:var(--brand);opacity:0.45;}
.page-www .mgmt-item,
.page-www .contact-direct-item{background:var(--wash-bg);border-color:var(--wash-line);}
.page-www .mgmt-item:hover{border-color:var(--brand);box-shadow:0 12px 28px rgba(138,102,48,0.12);}

/* --- Trzy kolorowe karty usług, każda w innym kolorze ---
   Kolor pojawia się mocniej dopiero po najechaniu kursorem:
   ikona i jej tło nabierają barwy, karta lekko się unosi. */
.page-www .card-c1 .page-www .card-c1 .page-www .card-c2 .page-www .card-c2 .page-www .card-c3 .page-www .card-c3 
.page-www .mgmt-item{
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.page-www .card-c1:hover{border-color:#8A6630;box-shadow:0 12px 28px rgba(138,102,48,0.12);}
.page-www .card-c1:hover .page-www .card-c1:hover .page-www .card-c1:hover h3{color:#8A6630;}

.page-www .card-c2:hover{border-color:#8A6630;box-shadow:0 12px 28px rgba(138,102,48,0.12);}
.page-www .card-c2:hover .page-www .card-c2:hover .page-www .card-c2:hover h3{color:#8A6630;}

.page-www .card-c3:hover{border-color:#8A6630;box-shadow:0 12px 28px rgba(138,102,48,0.12);}
.page-www .card-c3:hover .page-www .card-c3:hover .page-www .card-c3:hover h3{color:#8A6630;}
.page-www .mgmt-item h3{transition:background-color .25s ease, color .25s ease;}
.page-www .mgmt-list li::before{background:var(--brand);}
.page-www .brief-pill{border-color:var(--wash-line);}
.page-www .brief-pill:hover{border-color:var(--brand);}
.page-www .brief-pill:has(input:checked){background:var(--wash-tint);border-color:var(--brand);}
.page-www .brief-important{background:var(--wash-tint);border-color:var(--wash-line);}
.page-www .contact-form input,
.page-www .contact-form textarea,
.page-www .brief-field input,
.page-www .brief-field textarea{border-color:var(--wash-line);background:#fff;}
.page-www .contact-form input:focus,
.page-www .contact-form textarea:focus,
.page-www .brief-field input:focus,
.page-www .brief-field textarea:focus{border-color:var(--brand);}
.page-www .btn-primary{
  background:transparent;
  color:var(--brand);
  border-color:var(--brand);
}
.page-www .btn-primary::before{background:var(--brand);}
.page-www .btn-primary:hover{color:#fff;border-color:var(--brand);}
.page-www .contact-direct-item:hover{border-color:var(--brand);box-shadow:0 10px 24px rgba(138,102,48,0.12);}
.page-www .contact-direct-item:nth-child(1) svg{color:#8A6630;}
.page-www .contact-direct-item:nth-child(2) svg{color:#8A6630;}
.page-www .back-link{color:var(--brand);}
.page-www .back-link:hover{color:var(--brand-deep);}
.page-www .form-note-ok{background:var(--wash-tint);border-color:var(--brand);color:var(--wash-ink);}
.page-www .form-note-ok::before{background:var(--brand);}

/* --- Stopka --- */
footer{
  background:var(--ink);
  color:#a8a8a8;
  padding:72px 0 30px;
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.3fr;
  gap:36px;padding-bottom:52px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-grid h4{
  font-family:var(--sans);
  font-size:12px;text-transform:uppercase;letter-spacing:0.12em;
  color:#9c968a;margin-bottom:20px;font-weight:700;
}
.footer-grid li{margin-bottom:11px;font-size:14.5px;color:#c7c1b6;}
.footer-grid a{transition:color .15s ease;}
.footer-grid a:hover{color:#fff;}
.footer-logo{
  font-family:var(--serif);
  font-size:22px;font-weight:700;color:#fff;
  letter-spacing:0.01em;margin-bottom:12px;
}
.footer-tagline{font-size:14px;color:#9c968a;line-height:1.6;}
.footer-legal{font-size:12.5px;color:#807a6f;margin-top:16px;line-height:1.7;}
.footer-contact li{display:flex;align-items:center;gap:12px;}
.footer-contact svg{width:16px;height:16px;flex-shrink:0;color:#9c968a;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;font-size:13px;color:#9c968a;flex-wrap:wrap;gap:12px;
}
.footer-bottom nav{display:flex;gap:24px;}
.footer-bottom a{transition:color .15s ease;}
.footer-bottom a:hover{color:#fff;}

/* --- Responsywność --- */
@media (max-width:900px){
  .mgmt-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  #mainNav{
    display:none;
    position:absolute;top:82px;left:0;right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(27,25,23,0.08);
  }
  #mainNav.open{display:block;}
  #mainNav ul{flex-direction:column;gap:0;}
  #mainNav li{border-top:1px solid var(--line);}
  #mainNav li:first-child{border-top:none;}
  #mainNav a{display:block;padding:18px 32px;font-size:16px;}
  #mainNav a::after{display:none;}
  .menu-toggle{display:block;}
  .nav-actions .btn-primary{display:none;}
  .section{padding:76px 0;}
  /* Na węższych ekranach hero układa się w jedną kolumnę:
     najpierw tekst, pod nim siatka 2x2, na końcu okno z ofertą. */
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:"main" "foto" "stats" "hint";
    gap:40px;
    padding:80px 0 72px;
  }
  .hero p.lede{max-width:none;}
  .contact-direct{grid-template-columns:1fr;}
  .law-list{columns:1;}
  .law-panel{padding:32px 26px;}
  .law-panel::before{top:32px;bottom:auto;height:60px;}
  .mgmt-item{padding:32px 28px;}
}
@media (max-width:560px){
  .wrap{padding:0 22px;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
}

/* --- Podstrona: przycisk-outline i linki do prostego formularza --- */
.hero-www-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.page-www .btn-outline-www{
  background:transparent;
  color:var(--brand);
  border:1.5px solid var(--wash-line);
  position:relative;z-index:1;
}
.page-www .btn-outline-www::before{
  content:'';position:absolute;inset:0;
  background:var(--wash-tint);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.page-www .btn-outline-www:hover::before{transform:scaleX(1);}
.page-www .btn-outline-www:hover{border-color:var(--brand);}
.hero-www-hint{
  margin-top:16px;max-width:560px;
  font-size:14px;color:var(--mute);line-height:1.6;
}
.brief-alt-link{
  text-align:center;margin-top:28px;
  font-size:15px;color:var(--body);
}
.brief-section-intro{
  font-size:14px;line-height:1.65;color:var(--body);
  background:var(--wash-tint);
  border:1px solid var(--wash-line);
  border-radius:var(--radius);
  padding:14px 18px;margin-bottom:20px;
}
.brief-alt-link a{
  color:var(--brand);font-weight:700;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.brief-alt-link a:hover{border-color:var(--brand);}

/* --- Podstrona: "Jak przebiega współpraca" (kroki) --- */
.steps-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  max-width:1140px;margin:0 auto;
  position:relative;
}
.step-item{
  padding:0 20px;text-align:center;
  position:relative;
}
/* Łącznik między kółkami: rząd kropek zamiast ciągłej linii.
   Kropki są tłem elementu, więc pozostają nieruchome, gdy kółko
   powiększa się przy najechaniu kursorem. */
.step-item::before{
  content:'';position:absolute;top:28px;left:calc(-50% + 34px);width:calc(100% - 68px);
  height:3px;
  background-image:radial-gradient(circle, var(--wash-line) 1.5px, transparent 1.6px);
  background-size:9px 3px;
  background-repeat:repeat-x;
  background-position:center;
}
.step-item:first-child::before{display:none;}
/* Duże kółka z numerami kroków: wyraźny punkt na osi współpracy. */
.step-number{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;
  border-radius:50%;
  font-family:var(--sans);
  font-size:17px;font-weight:700;
  letter-spacing:0.02em;
  color:var(--brand);
  margin:0 auto 20px;
  position:relative;z-index:1;
  background:var(--wash-bg);
  border:1.5px solid var(--wash-line);
  transition:background-color .3s ease, color .3s ease,
             border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
/* Po najechaniu kółko wypełnia się kolorem marki. */
.step-item:hover .step-number{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  transform:scale(1.12);
}
.step-item h3{font-size:17px;margin-bottom:10px;font-weight:600;}
.step-item p{font-size:14px;line-height:1.65;color:var(--body);}
@media (max-width:900px){
  .steps-grid{grid-template-columns:1fr;gap:36px;max-width:420px;}
  .step-item::before{display:none;}
  .step-item{padding:0;}
}

/* --- Strony prawne (regulamin / polityka) --- */
/* --- Formularz kontaktowy --- */
.contact-form{
  display:flex;flex-direction:column;gap:18px;
  max-width:520px;margin:0 auto 32px;
  text-align:left;
}
.form-row{display:flex;flex-direction:column;gap:7px;}
.form-row label{
  font-family:var(--sans);
  font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--mute);font-weight:600;
}
.form-optional{
  text-transform:none;letter-spacing:0;font-weight:400;
  color:var(--mute);
}
.contact-form input,
.contact-form textarea{
  font-family:var(--sans);
  font-size:15.5px;color:var(--ink);
  border:1px solid var(--line-deep);
  background:var(--paper);
  padding:13px 15px;
  border-radius:var(--radius);
  transition:border-color .15s ease;
  width:100%;
}
.contact-form input:focus,
.contact-form textarea:focus{outline:none;border-color:var(--ink);}
.contact-form textarea{resize:vertical;min-height:120px;line-height:1.6;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{
  font-family:var(--sans);
  font-size:14.5px;padding:15px 18px;margin:0 auto 24px;border-radius:var(--radius);
  border:1px solid var(--line-deep);
  max-width:520px;text-align:left;
}
.form-note-ok{
  background:#f5f9f5;border:1px solid #b8d4b8;color:#2c5c2c;
  font-size:16px;font-weight:500;line-height:1.6;
  padding:20px 24px;max-width:520px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.form-note-ok::before{
  content:'✓';
  flex-shrink:0;
  width:30px;height:30px;
  background:#3d7a3d;color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
}
.form-note-error{background:#fbf5f4;border-color:#e4c4bd;color:#7a3d2c;}
.contact-divider{
  display:flex;align-items:center;gap:16px;
  max-width:520px;margin:0 auto 28px;
  font-family:var(--sans);font-size:12px;color:var(--mute);font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;
}
.contact-divider::before,
.contact-divider::after{content:'';flex:1;height:1px;background:var(--line);}

/* --- Brief strony WWW --- */
.brief-wrap{max-width:820px;margin:0 auto;}
.brief-important{
  font-size:14.5px;color:var(--body);
  background:var(--accent-tint);
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--radius);
  padding:18px 22px;margin-bottom:28px;line-height:1.65;
  text-align:left;
}
.brief-important strong{display:block;color:var(--ink);font-family:var(--serif);font-size:16px;margin-bottom:4px;}
.brief-important p{margin:0;}

/* Informacja o czasie odpowiedzi pod przyciskiem wysyłki */
.form-reply-time{
  font-family:var(--sans);
  font-size:13px;color:var(--mute);
  text-align:center;margin-top:14px;line-height:1.6;
}

/* Zachęta w kartach usług (Projekty cyfrowe / Serwis biur) */
.mgmt-cta{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:22px;
  font-family:var(--sans);
  font-size:14px;font-weight:600;
  color:var(--ink);
  transition:gap .18s ease;
}
.mgmt-item:hover .mgmt-cta{gap:11px;}
.mgmt-cta svg{flex-shrink:0;}
.brief-field{margin-top:22px;}
.brief-label{
  display:block;
  font-family:var(--sans);
  font-size:14.5px;font-weight:600;color:var(--ink);
  margin-bottom:8px;line-height:1.5;
}
.brief-note{
  font-size:13px;color:var(--mute);margin-bottom:10px;line-height:1.5;
}
.brief-field input[type="text"],
.brief-field input[type="email"],
.brief-field input[type="tel"],
.brief-field input[type="date"],
.brief-field textarea{
  font-family:var(--sans);
  font-size:15px;color:var(--ink);
  border:1px solid var(--line);
  background:var(--paper);
  padding:11px 14px;
  border-radius:var(--radius);
  width:100%;
  transition:border-color .15s ease;
}
.brief-field input:focus,
.brief-field textarea:focus{outline:none;border-color:var(--ink);}
.brief-field textarea{resize:vertical;min-height:80px;line-height:1.6;}
.brief-other{margin-top:10px;}

.brief-pills{display:flex;flex-wrap:wrap;gap:8px;}
.brief-pill{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);
  border-radius:0;
  padding:8px 14px;
  font-size:13.5px;color:var(--body);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.brief-pill:hover{border-color:var(--ink);}
.brief-pill input{accent-color:var(--ink);flex-shrink:0;}
.brief-pill input:checked ~ span{font-weight:600;color:var(--ink);}
.brief-pill:has(input:checked){background:var(--accent-tint);border-color:var(--ink);}



.legal-hero{
  padding:72px 0 48px;
  border-bottom:1px solid var(--line);
  background:var(--paper-tint);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.legal-hero h1{font-size:clamp(30px,4.5vw,42px);margin-bottom:12px;font-weight:500;line-height:1.12;}
.legal-hero p{color:var(--mute);font-size:15px;}
.legal-body{padding:72px 0 100px;max-width:780px;margin:0 auto;}
.legal-body h2{font-size:24px;margin:44px 0 16px;}
.legal-body h2:first-of-type{margin-top:0;}
.legal-body p{font-size:16px;line-height:1.8;color:var(--body);margin-bottom:16px;}
.legal-body ul{margin:0 0 16px;}
.legal-body ul li{
  font-size:16px;color:var(--body);line-height:1.7;
  padding-left:22px;position:relative;margin-bottom:10px;
}
.legal-body ul li::before{
  content:'';position:absolute;left:0;top:11px;
  width:7px;height:7px;border-radius:0;background:var(--accent);
}
.legal-body strong{color:var(--ink);font-weight:600;}
.legal-body h3{font-size:18px;margin:28px 0 12px;font-weight:600;}
/* Numerowane listy w dokumentach prawnych: numeracja paragrafow i
   podpunktow (a, b, c) zgodna z ukladem dokumentu od prawnika. */
.legal-body ol{margin:0 0 18px;padding-left:26px;}
.legal-body ol li{
  font-size:16px;color:var(--body);line-height:1.8;
  margin-bottom:12px;padding-left:4px;
}
.legal-body ol li::marker{color:var(--mute);font-weight:600;}
.legal-body ol ol{margin:12px 0 4px;padding-left:24px;}
.legal-body ol ol li{margin-bottom:8px;font-size:15.5px;}
.legal-body a{color:var(--ink);border-bottom:1px solid var(--line-deep);}
.legal-body a:hover{border-bottom-color:var(--ink);}
.legal-sign{
  margin-top:44px;padding-top:26px;
  border-top:1px solid var(--line);
}
.legal-sign p{font-size:15.5px;line-height:1.8;}
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;margin-bottom:28px;color:var(--accent);
}
.back-link:hover{color:var(--accent-deep);}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;}
}

/* =========================================================
   INTERAKCJE I DOSTĘPNOŚĆ DOTYKOWA
   ========================================================= */

/* Karty i panele reagują na kursor delikatnym uniesieniem. */
.mgmt-item, .law-panel, .contact-direct-item, .hero-www-box{
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
a.mgmt-item:hover, .contact-direct-item:hover{transform:translateY(-3px);}

/* Podkreślenie wysuwające się pod linkami menu. */
#mainNav a{position:relative;}
#mainNav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:var(--brand);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
#mainNav a:hover::after{transform:scaleX(1);}

/* Sekcje pojawiają się miękko przy przewijaniu strony.
   Jeśli JavaScript jest wyłączony, treść i tak jest widoczna,
   bo klasa "widoczna" jest dodawana dopiero przez skrypt. */
.reveal{opacity:0;transform:translateY(18px);}
.reveal.widoczna{
  opacity:1;transform:none;
  transition:opacity .7s ease, transform .7s ease;
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
  .btn:hover, a.mgmt-item:hover, .contact-direct-item:hover{transform:none;}
}

/* Wygodne cele dotykowe na telefonie: każdy link i przycisk
   ma co najmniej 44 px wysokości, zgodnie z wytycznymi dostępności. */
@media (max-width:900px){
  /* Link pod briefem: wygodny cel dotykowy na telefonie. */
  .brief-alt-link a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:0 4px;
  }
  #mainNav a{padding:16px 32px;min-height:48px;display:flex;align-items:center;}
  .menu-toggle{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;}
  .footer-grid ul a, .footer-bottom a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .footer-contact li{min-height:44px;}
  .footer-bottom{gap:8px;}
  .back-link{min-height:44px;}
  .hero-stat{padding-top:22px;padding-bottom:22px;}
  .brief-section summary{min-height:52px;}
}

/* --- Dodatkowe, subtelne animacje --- */

/* Linia pod numerem kroku "rysuje się" wraz z pojawieniem sekcji. */


/* Pozycje list wsuwają się delikatnie przy pojawieniu panelu. */
.law-panel.widoczna .law-list li,
.mgmt-item.widoczna .mgmt-list li{
  animation:wsunListe .5s ease both;
}
.law-panel.widoczna .law-list li:nth-child(2){animation-delay:.06s}
.law-panel.widoczna .law-list li:nth-child(3){animation-delay:.12s}
.law-panel.widoczna .law-list li:nth-child(4){animation-delay:.18s}
.law-panel.widoczna .law-list li:nth-child(5){animation-delay:.24s}
.law-panel.widoczna .law-list li:nth-child(6){animation-delay:.3s}
.mgmt-item.widoczna .mgmt-list li:nth-child(2){animation-delay:.06s}
.mgmt-item.widoczna .mgmt-list li:nth-child(3){animation-delay:.12s}
.mgmt-item.widoczna .mgmt-list li:nth-child(4){animation-delay:.18s}
@keyframes wsunListe{
  from{opacity:0;transform:translateX(-8px);}
  to{opacity:1;transform:none;}
}

/* Pola formularza podświetlają się przy wpisywaniu. */
.contact-form input,
.contact-form textarea,
.brief-field input,
.brief-field textarea{
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{box-shadow:0 0 0 3px rgba(28,28,28,0.06);}
.page-www .contact-form input:focus,
.page-www .contact-form textarea:focus,
.page-www .brief-field input:focus,
.page-www .brief-field textarea:focus{box-shadow:0 0 0 3px rgba(138,102,48,0.12);}

/* Sekcje briefu rozwijają się płynnie, a znak plus obraca się. */
.brief-section summary{transition:background-color .2s ease;}
.brief-section summary::after{transition:transform .25s ease;}
.brief-section[open] summary::after{transform:rotate(180deg);}

/* Pigułki wyboru w briefie reagują na kliknięcie. */
.brief-pill{transition:background-color .18s ease, border-color .18s ease, transform .18s ease;}
.brief-pill:active{transform:scale(0.97);}

/* Kafle kontaktowe: ikona lekko się powiększa. */
.contact-direct-item svg{transition:transform .25s ease;}
.contact-direct-item:hover svg{transform:scale(1.12);}

@media (prefers-reduced-motion:reduce){
  .law-panel.widoczna .law-list li,
  .mgmt-item.widoczna .mgmt-list li{animation:none;}
  .contact-direct-item:hover svg{transform:none;}
}

/* Plakietka na stronie błędu 404: kontur zamiast wypełnienia,
   spójnie z przyciskami i resztą serwisu. */
.error-badge{
  display:inline-block;
  padding:7px 15px;
  border:1px solid var(--line-deep);
  color:var(--mute);
}

/* Wskazówka przewijania: dyskretny sygnał, że pod sekcją powitalną
   jest dalsza treść. Strzałka delikatnie pulsuje w pionie. */
.scroll-hint{
  display:inline-flex;align-items:center;gap:9px;
  justify-self:center;
  margin-top:8px;
  font-family:var(--sans);
  font-size:12.5px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--mute);
  transition:color .2s ease;
}
.scroll-hint:hover{color:var(--ink);}
.scroll-hint svg{animation:zjedzNizej 2.4s ease-in-out infinite;}
@keyframes zjedzNizej{
  0%,100%{transform:translateY(0);opacity:.75;}
  50%{transform:translateY(4px);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint svg{animation:none;}
}
@media (max-width:900px){
  .scroll-hint{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .btn-primary::before, .btn-ghost::before,
  .hero-www-box-links .btn-primary::before,
  .hero-www-box-brief-btn::before,
  .page-www .btn-outline-www::before{transition:none;}
}

/* =========================================================
   WEJŚCIE PODSTRONY "STRONY WWW"
   Elementy nagłówka pojawiają się jeden po drugim zaraz po
   otwarciu strony, bez czekania na przewijanie. Daje to
   wrażenie, że strona "wita" odwiedzającego.
   ========================================================= */
.wejscie{
  opacity:0;
  transform:translateY(24px);
  animation:wejscieOd 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
.w1{animation-delay:.10s}
.w2{animation-delay:.22s}
.w3{animation-delay:.36s}
.w4{animation-delay:.50s}
.w5{animation-delay:.62s}
@keyframes wejscieOd{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}

/* Tło nagłówka podstrony rozjaśnia się przy wejściu. */
.page-www .legal-hero .hero-bg{
  opacity:0;
  animation:rozjasnijTlo 1.6s ease .1s forwards;
}
@keyframes rozjasnijTlo{ to{opacity:1;} }

/* Cienka linia pod nagłówkiem podstrony "rysuje się" od lewej. */
.page-www .legal-hero::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg, var(--brand), transparent);
  transform:scaleX(0);transform-origin:left;
  animation:rysujLinie 1.4s cubic-bezier(.22,1,.36,1) .5s forwards;
}
@keyframes rysujLinie{ to{transform:scaleX(1);} }

/* Karty oferty na podstronie unoszą się mocniej pod kursorem. */
.page-www .mgmt-item{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;}
.page-www .mgmt-item:hover{transform:translateY(-6px);}

/* Numer karty przesuwa się i nabiera koloru przy najechaniu. */
.page-www .mgmt-item .mgmt-num{transition:transform .3s ease, color .3s ease;}
.page-www .mgmt-item:hover .mgmt-num{transform:translateX(4px);color:var(--brand);}

/* Kroki współpracy: numer delikatnie rośnie przy najechaniu. */




/* Sekcje briefu: subtelne przesunięcie przy najechaniu. */
/* Sekcje briefu celowo bez ruchu: to formalny element formularza,
   gdzie przesuwanie się treści rozprasza przy wypełnianiu. */
.page-www .brief-section{transition:border-color .25s ease;}

@media (prefers-reduced-motion:reduce){
  .wejscie{animation:none;opacity:1;transform:none;}
  .page-www .legal-hero .hero-bg{animation:none;opacity:1;}
  .page-www .legal-hero::after{animation:none;transform:scaleX(1);}
  .page-www .mgmt-item:hover,
  .step-item:hover .step-number{transform:none;}
}

@media (max-width:900px){
  .hero-foto{max-width:250px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:0 24px;}
  .hero-trust{margin-top:18px;}
}
@media (max-width:520px){
  .hero-stats{grid-template-columns:1fr;}
}

/* =========================================================
   SEKCJA "DLA KOGO PRACUJĘ"
   Trzy profile, w których odwiedzająca ma rozpoznać własną
   sytuację. To najkrótsza droga od "czy to dla mnie?" do kontaktu.
   ========================================================= */
.profile-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  max-width:1076px;margin:0 auto;
}
.profile-item{
  display:flex;flex-direction:column;
  padding:38px 34px;
  border:1px solid var(--line);
  background:var(--paper);
  text-decoration:none;
  position:relative;
  transition:border-color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.profile-item:hover{
  border-color:var(--brand);
  box-shadow:0 14px 30px rgba(138,102,48,0.10);
  transform:translateY(-4px);
}
.profile-num{
  font-family:var(--sans);
  font-size:12px;font-weight:700;letter-spacing:0.1em;
  color:var(--mute);margin-bottom:18px;
  transition:color .28s ease;
}
.profile-item:hover .profile-num{color:var(--brand);}
.profile-item h3{
  font-size:20px;font-weight:600;color:var(--ink);
  margin-bottom:12px;line-height:1.3;
}
.profile-item p{
  font-size:15px;line-height:1.7;color:var(--body);
  margin-bottom:22px;flex:1;
}
.profile-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);
  font-size:14px;font-weight:600;color:var(--ink);
  transition:gap .25s ease, color .25s ease;
}
.profile-item:hover .profile-cta{gap:12px;color:var(--brand);}
@media (max-width:900px){
  .profile-grid{grid-template-columns:1fr;gap:18px;max-width:520px;}
  .profile-item{padding:32px 26px;}
}
@media (prefers-reduced-motion:reduce){
  .profile-item:hover{transform:none;}
}

/* =========================================================
   GŁĘBIA I FAKTURA
   Strona była zbyt płaska: wszystkie sekcje jasne, bez
   kontrastu i tekstury. Poniższe warstwy dodają charakteru.
   ========================================================= */

/* 1. Delikatne ziarno na tle. Prawie niewidoczne, ale sprawia,
      że tło przestaje wyglądać jak płaska plama koloru. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
main, footer{position:relative;z-index:2;}
/* Nagłówek musi być nad treścią, inaczej rozwinięte menu na telefonie
   chowa się pod sekcją powitalną. */
header{position:sticky;z-index:60;}

/* 2. Ciemny pas z cytatem. Największa zmiana: przerywa ciąg
      jasnych sekcji i tworzy mocny punkt w środku strony. */
#o-mnie{
  background:linear-gradient(160deg,#3A2B24 0%,#33272A 55%,#2C2226 100%);
  position:relative;overflow:hidden;
}
#o-mnie::after{
  content:'';position:absolute;
  width:520px;height:520px;border-radius:50%;
  top:-190px;right:-140px;
  background:radial-gradient(circle,rgba(180,140,80,.20),transparent 70%);
  pointer-events:none;
}
#o-mnie .section-head h2,
#o-mnie .about-cytat{color:#F6EDE0 !important;}
#o-mnie .section-head p,
#o-mnie .about-text p{color:#C9B9AC;}
#o-mnie .about-cytat{
  border-bottom-color:rgba(214,180,120,.35);
  font-size:30px !important;
}
/* Ozdobny cudzysłów nad cytatem */
#o-mnie .about-cytat::before{
  content:'\201E';
  display:block;
  font-family:Georgia,serif;
  font-size:66px;line-height:.5;
  color:rgba(196,157,92,.55);
  margin-bottom:18px;
}
@media (max-width:620px){
  #o-mnie .about-cytat{font-size:23px !important;}
}

/* 3. Nagłówki sekcji naprzemiennie: raz wyśrodkowane, raz
      przesunięte w lewo z ozdobną kreską. Koniec monotonii. */
#wspolpraca .section-head,
#zarzadzanie .section-head{
  text-align:left;margin-left:0;max-width:640px;
}
#wspolpraca .section-head p,
#zarzadzanie .section-head p{margin-left:0;margin-right:0;}
#wspolpraca .section-head .rule-title,
#zarzadzanie .section-head .rule-title{
  position:relative;padding-left:26px;
}
#wspolpraca .section-head .rule-title::before,
#zarzadzanie .section-head .rule-title::before{
  content:'';display:block;position:absolute;
  left:0;top:10px;bottom:10px;width:3px;
  background:linear-gradient(180deg,var(--accent),transparent);
}
@media (max-width:820px){
  #wspolpraca .section-head,
  #zarzadzanie .section-head{text-align:center;margin:0 auto 60px;}
  #wspolpraca .section-head .rule-title,
  #zarzadzanie .section-head .rule-title{padding-left:0;}
  #wspolpraca .section-head .rule-title::before,
  #zarzadzanie .section-head .rule-title::before{display:none;}
}

/* 4. Karty z większą głębią: subtelny gradient i złoty narożnik. */
.profile-item, .mgmt-item{
  background:linear-gradient(165deg,var(--paper) 0%,var(--paper) 62%,var(--accent-tint) 100%);
  position:relative;
}
.profile-item::after, .mgmt-item::after{
  content:'';position:absolute;right:0;top:0;
  width:0;height:0;
  border-style:solid;border-width:0 26px 26px 0;
  border-color:transparent var(--accent-tint) transparent transparent;
  transition:border-width .3s ease;
}
.profile-item:hover::after, a.mgmt-item:hover::after{
  border-width:0 34px 34px 0;
  border-right-color:var(--accent);
}
/* Duży, ozdobny numer w prawym dolnym rogu karty. Umieszczony
   z dala od tekstu, żeby nie utrudniał czytania. */
.profile-item{overflow:hidden;}
.profile-item::before{
  content:attr(data-duzy);
  position:absolute;right:14px;bottom:-16px;
  font-family:var(--serif);
  font-size:96px;font-weight:400;line-height:1;
  color:var(--accent);opacity:.06;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.profile-item:hover::before{opacity:.11;transform:translateY(-4px);}
.profile-item > *{position:relative;z-index:1;}

/* =========================================================
   NAWIGACJA I PRZYCISKI, wersja dopracowana
   Wcześniej były to zwykłe linki i cienka ramka. Teraz mają
   charakter zgodny z resztą strony: monogram, złote akcenty,
   wypełniony przycisk główny.
   ========================================================= */

/* --- Nagłówek strony --- */
header{
  background:rgba(253,250,248,0.88);
  backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(223,201,192,.55);
}
/* Cienka złota linia pod nagłówkiem, nadaje mu "wykończenie". */
header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.35;
}

/* Logo z monogramem w złotej ramce. */
.logo-text{
  font-family:var(--serif);
  font-size:19px;font-weight:400;
  letter-spacing:0.02em;
  color:var(--ink);
  display:flex;align-items:center;gap:12px;
}
.logo-text a{color:inherit;display:flex;align-items:center;gap:12px;}
.logo-text a::before{
  content:'NB';
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  font-family:var(--serif);
  font-size:13.5px;letter-spacing:0.02em;
  color:var(--accent);
  border:1px solid var(--accent);
  transition:background-color .3s ease, color .3s ease;
}
.logo-text a:hover::before{background:var(--accent);color:#fff;}

/* Odnośniki w menu: mniejsze, rozstrzelone, z podkreśleniem. */
#mainNav ul{display:flex;align-items:center;gap:30px;}
#mainNav a{
  font-family:var(--sans);
  font-size:12.5px;font-weight:600;
  letter-spacing:0.09em;text-transform:uppercase;
  color:var(--body);
  transition:color .25s ease;
}
#mainNav a:hover{color:var(--ink);}
#mainNav a::after{
  height:1px;bottom:-6px;
  background:var(--accent);
}

/* Przycisk w nagłówku: wypełniony, z miękkim cieniem. */
.nav-actions .btn-primary{
  padding:12px 24px;min-height:44px;
  font-size:13px;letter-spacing:0.05em;
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 4px 14px rgba(138,102,48,.18);
}
.nav-actions .btn-primary::before{background:var(--accent-deep);}
.nav-actions .btn-primary:hover{
  color:#fff;border-color:var(--accent-deep);
  box-shadow:0 7px 20px rgba(138,102,48,.26);
}

/* --- Przyciski w treści strony --- */
/* Główny: wypełniony złotem, z delikatnym gradientem i cieniem. */
.hero-ctas .btn-primary,
.contact-form .btn-primary,
.legal-hero .btn-primary,
.brief-submit{
  background:linear-gradient(160deg,var(--accent) 0%,var(--accent-deep) 100%);
  color:#fff;
  border-color:var(--accent-deep);
  box-shadow:0 6px 18px rgba(138,102,48,.20);
  letter-spacing:0.03em;
}
.hero-ctas .btn-primary::before,
.contact-form .btn-primary::before,
.legal-hero .btn-primary::before,
.brief-submit::before{background:var(--accent-deep);}
.hero-ctas .btn-primary:hover,
.contact-form .btn-primary:hover,
.legal-hero .btn-primary:hover,
.brief-submit:hover{
  color:#fff;
  box-shadow:0 10px 26px rgba(138,102,48,.30);
  transform:translateY(-2px);
}

/* Drugorzędny: kontur w kolorze złota, na jasnym tle. */
.btn-ghost, .btn-outline-www{
  border-color:var(--line-deep);
  color:var(--ink);
  background:rgba(255,255,255,.5);
}
.btn-ghost:hover, .btn-outline-www:hover{
  border-color:var(--accent);
  color:var(--accent-deep);
}

/* Przycisk menu na telefonie */
.menu-toggle{
  border:1px solid var(--line-deep);
  color:var(--ink);
  transition:border-color .25s ease, color .25s ease;
}
.menu-toggle:hover{border-color:var(--accent);color:var(--accent);}

@media (max-width:900px){
  #mainNav ul{flex-direction:column;gap:0;align-items:stretch;}
  #mainNav a{font-size:13.5px;letter-spacing:0.08em;}
  .logo-text{font-size:17px;gap:10px;}
  .logo-text a::before{width:32px;height:32px;font-size:12.5px;}
}

/* ============================================================
   BRIEF KROK PO KROKU
   Jeden etap na ekranie, pasek postępu, przyciski Wstecz/Dalej.
   Bez przesuwania na boki: etap tylko łagodnie się pojawia.
   ============================================================ */
.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;}
.brief-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 40px 30px;
  box-shadow:0 18px 40px rgba(51,39,42,0.06);
  text-align:left;
}
.page-www .brief-form{border-color:var(--wash-line);}
/* Pasek nawigacji: przyklejony pod menu, przyciski zawsze w tym samym miejscu */
.bw-bar{
  position:sticky;top:var(--bw-top,80px);z-index:5;
  display:flex;align-items:center;gap:16px;
  margin:-34px -40px 30px;
  padding:16px 40px;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
}
.bw-bar[hidden]{display:none;}
.bw-center{flex:1;min-width:0;text-align:center;}
.bw-segs{display:flex;gap:4px;}
.bw-seg{
  flex:1;height:6px;border-radius:99px;
  background:var(--accent-tint);
  transition:background-color .3s ease;
}
.bw-seg.done{background:#C9A36A;}
.bw-seg.current{background:var(--accent);}
.bw-status{
  margin:8px 0 0;
  font-family:var(--sans);
  font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bw-arrow{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex-shrink:0;
  min-width:118px;height:46px;padding:0 18px;
  border-radius:99px;
  font-family:var(--sans);font-size:14px;font-weight:600;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.bw-prev{background:#fff;color:var(--accent);border:1px solid var(--line-deep);}
.bw-prev:hover:not(:disabled){border-color:var(--accent);background:var(--accent-tint);}
.bw-next{
  background:linear-gradient(135deg,#C9A36A,var(--accent));
  color:#fff;border:1px solid transparent;
  box-shadow:0 6px 16px rgba(138,102,48,0.25);
}
.bw-next:hover:not(:disabled){box-shadow:0 8px 20px rgba(138,102,48,0.35);filter:brightness(1.05);}
.bw-arrow:disabled{opacity:.35;cursor:default;box-shadow:none;}
.bw-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.bw-step{border:0;margin:0;padding:0;min-width:0;}
.bw-step + .bw-step{margin-top:44px;padding-top:36px;border-top:1px solid var(--line);}
.brief-form.is-wizard .bw-step + .bw-step{margin-top:0;padding-top:0;border-top:0;}
.bw-legend{
  display:flex;align-items:center;gap:14px;
  padding:0;margin-bottom:6px;
  font-family:var(--serif);
  font-size:25px;line-height:1.25;color:var(--ink);
}
.bw-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  flex-shrink:0;
  font-family:var(--sans);font-size:15px;font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#C9A36A,var(--accent));
  box-shadow:0 6px 14px rgba(138,102,48,0.22);
}
.bw-title:focus{outline:none;}
.brief-section-intro{
  font-size:14.5px;color:var(--body);line-height:1.6;
  margin:10px 0 0;text-align:left;
}
.brief-section-outro{
  margin-top:24px;
  font-size:14px;line-height:1.6;color:var(--body);
  padding:14px 18px;
  background:var(--paper-tint);
  border-radius:var(--radius);
}
.bw-fields{display:flex;flex-wrap:wrap;column-gap:16px;}
.bw-fields .brief-field{flex:1 1 100%;min-width:0;}
.bw-fields .brief-field-half{flex:1 1 calc(50% - 8px);}
.brief-cond[hidden]{display:none !important;}
.brief-req{color:var(--accent);}
.brief-field input::placeholder,
.brief-field textarea::placeholder{color:#9A8A85;}
.brief-other-wrap .brief-other{
  width:100%;
  font-family:var(--sans);font-size:15px;color:var(--ink);
  border:1px solid var(--line);background:#fff;
  padding:11px 14px;border-radius:var(--radius);
}
.brief-pill{border-radius:99px;padding:9px 16px;min-height:44px;background:#fff;}
.brief-pill input{accent-color:var(--accent);}
/* Pojawienie się etapu: tylko przenikanie, bez ruchu w bok */
.brief-form.is-wizard .bw-in{animation:bwFade .3s ease both;}
@keyframes bwFade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .brief-form.is-wizard .bw-in{animation:none;}
  .bw-fill{transition:none;}
}
.bw-nav{
  margin-top:34px;padding-top:24px;
  border-top:1px solid var(--line);
}
.bw-nav[hidden]{display:none !important;}
.bw-nav .brief-submit{width:100%;justify-content:center;}
.brief-skip-hint{
  margin:14px 0 0;text-align:center;
  font-size:13px;color:var(--mute);
}
@media (max-width:640px){
  .brief-form{padding:24px 18px 22px;}
  .bw-legend{font-size:21px;gap:12px;}
  .bw-num{width:34px;height:34px;font-size:14px;}
  .bw-fields .brief-field-half{flex-basis:100%;}
  .bw-bar{margin:-24px -18px 24px;padding:12px 14px;gap:10px;}
  .bw-arrow{min-width:0;width:44px;height:44px;padding:0;}
  .bw-arrow-txt{display:none;}
  .bw-status{font-size:10.5px;letter-spacing:.04em;}
}

/* ============================================================
   REALIZACJE (portfolio) na podstronie Strony WWW
   Karty z grafiką w formie okna przeglądarki. Bez podskakiwania:
   przy najechaniu zmienia się tylko ramka, cień i przybliżenie grafiki.
   ============================================================ */
.pf-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  text-align:left;
}
.pf-item{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--wash-line, var(--line));
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.pf-item:hover{border-color:var(--accent);box-shadow:0 16px 36px rgba(138,102,48,0.13);}
.pf-shot{display:block;text-decoration:none;border-bottom:1px solid var(--line);}
.pf-browser{
  display:flex;align-items:center;gap:12px;
  padding:9px 14px;
  background:#F7F1EC;
  border-bottom:1px solid var(--line);
}
.pf-dots{display:flex;gap:5px;flex-shrink:0;}
.pf-dots i{width:8px;height:8px;border-radius:50%;background:#E3D4CB;display:block;}
.pf-url{
  flex:1;min-width:0;
  font-family:var(--sans);font-size:11.5px;color:var(--mute);
  background:#fff;border-radius:99px;padding:3px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf-screen{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:16/10;
  overflow:hidden;
  text-align:center;padding:20px;
}
.pf-screen::before{
  content:'';position:absolute;inset:0;
  background:inherit;
  transition:transform .6s ease;
  z-index:0;
}
.pf-item:hover .pf-screen::before{transform:scale(1.06);}
.pf-mark,.pf-sub{position:relative;z-index:1;}
.pf-mark{font-family:var(--serif);font-size:30px;line-height:1.1;}
.pf-sub{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;}

/* Olimp: ciemna, elegancka kolorystyka jak na stronie klienta */
.pf-olimp .pf-screen{background:radial-gradient(circle at 30% 20%,#2a2a30 0%,#121215 55%,#0c0c0e 100%);}
.pf-olimp .pf-mark{color:#F4EEE6;letter-spacing:.32em;padding-left:.32em;}
.pf-olimp .pf-sub{color:#C9A36A;}
/* KW Stone: jasny, kamienny szary */
.pf-kw .pf-screen{background:linear-gradient(135deg,#EFEBE6 0%,#D9D2CA 55%,#C4BBB1 100%);}
.pf-kw .pf-mark{color:#3A3532;letter-spacing:.2em;padding-left:.2em;}
.pf-kw .pf-sub{color:#6B625C;}
/* Halo Goleniów: róż i złoto marki */
.pf-halo .pf-screen{background:radial-gradient(circle at 75% 25%,#F6DCD6 0%,#FAEDE6 45%,#F6EDE0 100%);}
.pf-halo .pf-mark{color:var(--accent-deep);}
.pf-halo .pf-sub{color:#8A6630;}

.pf-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 22px;}
.pf-tag{
  align-self:flex-start;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--line-deep);
  border-radius:99px;padding:4px 11px;
  margin-bottom:14px;
}
.pf-body h3{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:8px;}
.pf-body p{font-size:14.5px;line-height:1.65;color:var(--body);margin:0;}
.pf-feats{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.pf-feats li{
  font-size:12.5px;color:var(--body);
  background:var(--accent-tint);
  border-radius:99px;padding:4px 11px;
}
.pf-link{
  margin-top:auto;padding-top:20px;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--accent);text-decoration:none;
  min-height:44px;
  transition:gap .2s ease;
}
.pf-link:hover{gap:11px;}
.pf-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .pf-screen::before,.pf-link{transition:none;}
  .pf-item:hover .pf-screen::before{transform:none;}
}
@media (max-width:980px){
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .pf-grid{grid-template-columns:1fr;gap:18px;}
  .pf-mark{font-size:26px;}
}
/* Miniatura realizacji: prawdziwy zrzut ekranu strony, jeśli jest w img/portfolio/.
   Gdy pliku nie ma, zostaje grafika z nazwą strony. */
.pf-img{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  transition:transform .6s ease;
}
.pf-item:hover .pf-img{transform:scale(1.04);}
@media (prefers-reduced-motion:reduce){.pf-item:hover .pf-img{transform:none;}}

/* ============================================================
   PODSTRONA STRONY WWW: nowy układ
   ============================================================ */
/* --- Hero: tekst na środku, pod nim dwa zrzuty prawdziwych realizacji --- */
.w-hero{
  position:relative;overflow:hidden;
  background:var(--wash-alt);
  padding:84px 0 0;
  border-bottom:1px solid var(--wash-line);
  text-align:center;
}
.w-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
.w-hero .eyebrow{color:var(--brand);}
.w-hero-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5.4vw,62px);line-height:1.08;
  letter-spacing:-.01em;color:var(--ink);
  max-width:780px;margin:16px 0 0;
  text-wrap:balance;
}
.w-hero-lead{font-size:17.5px;line-height:1.7;color:var(--body);max-width:620px;margin:22px auto 0;}
.w-hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;}
.w-hero-points{
  list-style:none;margin:30px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
}
.w-hero-points li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--body);}
.w-hero-points svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

.w-hero-shots{
  position:relative;z-index:1;
  width:min(980px,calc(100% - 32px));
  height:clamp(190px,30vw,330px);
  margin:56px auto 0;
}
.w-shot{
  position:absolute;bottom:-2px;
  width:62%;
  background:#fff;
  border:1px solid var(--wash-line);border-bottom:0;
  border-radius:10px 10px 0 0;overflow:hidden;
  box-shadow:0 -10px 40px rgba(51,39,42,0.10);
}
.w-shot img{display:block;width:100%;height:auto;}
.w-shot .pf-browser{padding:8px 12px;}
.w-shot-a{left:0;height:92%;}
.w-shot-b{right:0;height:100%;z-index:2;box-shadow:0 -14px 50px rgba(51,39,42,0.16);}

/* --- Co dostajesz: 2 x 2, ikona obok tekstu --- */
.w-offer{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  max-width:1000px;margin:0 auto;text-align:left;
}
.w-offer-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:28px;
  background:#fff;border:1px solid var(--wash-line);
  border-radius:var(--radius);
}
.w-offer-item h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:2px 0 8px;}
.w-offer-item p{margin:0;font-size:15px;line-height:1.65;color:var(--body);}
.w-offer-key{background:var(--wash-tint);border-color:#D9BFA0;}
.w-ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:48px;height:48px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent);
}
.w-offer-key .w-ico{background:#fff;}
.w-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* --- Realizacje: duże prezentacje na zmianę (obraz / tekst) --- */
.w-cases{display:flex;flex-direction:column;gap:56px;max-width:1080px;margin:0 auto;}
.w-case{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:48px;align-items:center;text-align:left;
}
.w-case-rev .w-case-shot{order:2;}
.w-case-shot{
  display:block;text-decoration:none;
  background:#fff;border:1px solid var(--wash-line);
  border-radius:10px;overflow:hidden;
  box-shadow:0 20px 44px rgba(51,39,42,0.10);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.w-case-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;}
.w-case-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
/* Po najechaniu: bez powiększania miniatury. Od dołu wysuwa się
   złoty pasek „Otwórz stronę”, a ramka okna nabiera koloru. */
.w-case-open{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,rgba(138,102,48,.94),rgba(201,163,106,.94));
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.w-case-shot:hover{border-color:var(--accent);box-shadow:0 24px 50px rgba(138,102,48,0.18);}
.w-case-shot:hover .w-case-open{transform:translateY(0);}
.w-case-shot:hover .pf-browser{background:var(--accent-tint);}
.w-case-body h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,30px);color:var(--ink);margin:14px 0 10px;}
.w-case-body p{font-size:15.5px;line-height:1.7;color:var(--body);margin:0;}
.w-case-body .pf-tag{margin-bottom:0;}
.w-case-body .pf-link{padding-top:14px;}

.w-soon{
  display:flex;align-items:center;gap:20px;
  max-width:1080px;margin:56px auto 0;
  padding:22px 26px;
  background:#fff;border:1px dashed #D9BFA0;
  border-radius:var(--radius);
  text-decoration:none;text-align:left;
  transition:border-color .25s ease, background-color .25s ease;
}
.w-soon:hover{border-style:solid;border-color:var(--accent);background:var(--wash-bg);}
.w-soon .pf-tag{margin:0;flex-shrink:0;}
.w-soon-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.w-soon-text strong{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;}
.w-soon-text span{font-size:14.5px;color:var(--body);line-height:1.55;}
.w-soon-arrow{color:var(--accent);flex-shrink:0;}

/* --- Jak chcesz zacząć: dwie karty wyboru --- */
.w-choice{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  max-width:880px;margin:0 auto;text-align:left;
}
.w-choice-card{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:32px 30px 28px;
  background:#fff;border:1px solid var(--wash-line);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.w-choice-card:hover{border-color:var(--accent);box-shadow:0 16px 36px rgba(138,102,48,0.13);}
.w-choice-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.w-choice-main{border:1.5px solid var(--accent);box-shadow:0 14px 34px rgba(138,102,48,0.12);}
.w-choice-badge{
  position:absolute;top:-12px;left:30px;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--accent);
  padding:4px 12px;border-radius:99px;
}
.w-choice-card strong{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:600;margin-top:4px;}
.w-choice-text{font-size:15px;line-height:1.65;color:var(--body);}
.w-choice-cta{
  margin-top:auto;padding-top:10px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--accent);
  transition:gap .2s ease;
}
.w-choice-card:hover .w-choice-cta{gap:12px;}

@media (prefers-reduced-motion:reduce){
  .w-case-open{transition:none;}
}
@media (max-width:900px){
  .w-case,.w-case-rev{grid-template-columns:1fr;gap:24px;}
  .w-case-rev .w-case-shot{order:0;}
  .w-cases{gap:48px;}
  .w-offer{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .w-hero{padding-top:56px;}
  .w-hero-lead{font-size:16px;}
  .w-hero-ctas{width:100%;flex-direction:column;}
  .w-hero-ctas .btn{width:100%;justify-content:center;}
  .w-hero-points{flex-direction:column;align-items:flex-start;gap:8px;text-align:left;}
  .w-hero-shots{margin-top:40px;height:44vw;}
  .w-shot{width:74%;border-radius:8px 8px 0 0;}
  .w-shot .pf-browser{padding:6px 9px;}
  .w-offer-item{padding:22px 20px;gap:14px;}
  .w-choice{grid-template-columns:1fr;gap:26px;}
  .w-soon{flex-direction:column;align-items:flex-start;gap:12px;}
  .w-soon-arrow{display:none;}
}
/* Główny przycisk w hero wypełniony złotem, jak „Skontaktuj się” w menu */
.page-www .w-hero-ctas .btn-primary{
  background:linear-gradient(135deg,#8A6630,#6F5124);
  color:#fff;border-color:transparent;
  box-shadow:0 10px 24px rgba(138,102,48,0.28);
}
.page-www .w-hero-ctas .btn-primary::before{display:none;}
.page-www .w-hero-ctas .btn-primary:hover{color:#fff;filter:brightness(1.07);box-shadow:0 12px 28px rgba(138,102,48,0.36);}
.w-shot .pf-url{text-align:left;}

/* ============================================================
   STRONA GŁÓWNA: nowy układ (spójny z podstroną Strony WWW)
   ============================================================ */
.hero{grid-template-areas:"main foto";padding-top:96px;padding-bottom:104px;}
.hero .eyebrow{color:var(--accent);}
.hero h1{color:var(--ink);}
.hero p.lede{color:var(--body);font-size:19px;}
.hero-points{justify-content:flex-start;margin-top:30px;flex-direction:column;align-items:flex-start;gap:9px;}
.hero-points li{font-size:15px;color:var(--ink);}

/* Moje usługi: cztery karty-wejścia */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;text-align:left;}
.svc-card,.who-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:28px 24px 24px;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.svc-card:hover,.who-card:hover{border-color:var(--accent);box-shadow:0 16px 36px rgba(138,102,48,0.12);}
.svc-card:focus-visible,.who-card:focus-visible,.more-card:focus-visible,.pm-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.svc-card h3,.who-card h3{font-family:var(--serif);font-size:21px;color:var(--ink);margin-top:6px;line-height:1.25;}
.svc-card p,.who-card p{font-size:15px;line-height:1.65;color:var(--body);margin:0;}
.svc-cta{
  margin-top:auto;padding-top:8px;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--accent);
  transition:gap .2s ease;
}
.svc-card:hover .svc-cta,.who-card:hover .svc-cta,.more-card:hover .svc-cta,.pm-cta:hover .svc-cta{gap:11px;}

/* Dla kogo */
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left;}
.who-card{padding:30px 28px 26px;}
.who-tag{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-tint);
  padding:4px 11px;border-radius:99px;
}

/* Lista z ptaszkami, czytelniejsza od kropek */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.check-list li{
  position:relative;padding-left:28px;
  font-size:15.5px;line-height:1.5;color:var(--ink);
}
.check-list li::before{
  content:'';position:absolute;left:0;top:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6630' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center/12px no-repeat;
}
.check-list-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;}

/* Prawo i mentoring */
.pm-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start;text-align:left;}
.pm-side{display:flex;flex-direction:column;gap:22px;}
.pm-card{background:#fff;border:1px solid var(--line);padding:34px 32px;border-radius:var(--radius);}
.pm-head{display:flex;gap:18px;align-items:flex-start;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line);}
.pm-head h3{font-family:var(--serif);font-size:25px;color:var(--ink);margin-bottom:6px;}
.pm-head p{font-size:15.5px;line-height:1.6;color:var(--body);margin:0;}
.pm-card .fine-print{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--mute);}
.pm-cta{
  display:flex;flex-direction:column;gap:6px;
  padding:26px 28px;
  background:var(--accent-tint);border:1px solid #E3CFB5;
  border-radius:var(--radius);text-decoration:none;
  transition:border-color .25s ease;
}
.pm-cta:hover{border-color:var(--accent);}
.pm-cta strong{font-family:var(--serif);font-size:19px;color:var(--ink);}
.pm-cta span{font-size:15px;line-height:1.6;color:var(--body);}
.pm-cta .svc-cta{color:var(--accent);}

/* Pozostałe usługi */
.more-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;text-align:left;}
.more-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.more-card:hover{border-color:var(--accent);box-shadow:0 16px 36px rgba(138,102,48,0.12);}
.more-thumbs{
  position:relative;display:block;height:190px;
  background:var(--paper-tint);border-bottom:1px solid var(--line);overflow:hidden;
}
.more-thumbs img{
  position:absolute;bottom:-1px;width:58%;height:auto;
  border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;
  box-shadow:0 -8px 24px rgba(51,39,42,0.12);
}
.more-thumbs img:first-child{left:7%;height:auto;bottom:-30px;}
.more-thumbs img:last-child{right:7%;z-index:1;}
.more-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 30px 28px;flex:1;}
.more-body h3{font-family:var(--serif);font-size:23px;color:var(--ink);}
.more-body p{font-size:15.5px;line-height:1.65;color:var(--body);margin:0;}
.more-body .check-list{margin:4px 0 6px;}

/* Kontakt: dane po lewej, formularz po prawej */
.kontakt-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:28px;align-items:start;max-width:1000px;margin:0 auto;text-align:left;}
.contact-direct-stack{grid-template-columns:1fr !important;max-width:none !important;margin:0 !important;}
.kontakt-points{margin-top:26px;}
.kontakt-form-box{background:#fff;border:1px solid var(--line);padding:32px 30px;border-radius:var(--radius);}
.kontakt-form-box .contact-form{max-width:none;margin:0;}
.kontakt-form-box .btn{width:100%;}

@media (max-width:1020px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .who-grid{grid-template-columns:1fr;}
  .pm-grid,.more-grid,.kontakt-grid{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .hero{grid-template-areas:"main" "foto";padding-top:64px;padding-bottom:72px;}
}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr;}
  .check-list-2{grid-template-columns:1fr;}
  .pm-card{padding:26px 20px;}
  .pm-head{flex-direction:column;gap:12px;}
  .kontakt-form-box{padding:24px 18px;}
  .more-thumbs{height:150px;}
  .more-body{padding:24px 20px;}
}

/* ============================================================
   REALIZACJE: czytelniejsze, każda realizacja w jednej białej karcie
   ============================================================ */
.w-case{
  background:#fff;border:1px solid var(--wash-line);
  padding:28px;gap:40px;
  border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(51,39,42,0.06);
}
.w-case-shot{box-shadow:none;border-radius:8px;}
.w-case-body h3{font-size:clamp(26px,2.8vw,32px);margin:14px 0 12px;}
.w-case-body p{font-size:16.5px;line-height:1.7;color:var(--ink);opacity:.86;}
.w-case-body .pf-feats{display:grid;gap:9px;margin-top:18px;}
.w-case-body .pf-feats li{
  background:none;padding:0 0 0 28px;border-radius:0;position:relative;
  font-size:15.5px;line-height:1.5;color:var(--ink);
}
.w-case-body .pf-feats li::before{
  content:'';position:absolute;left:0;top:2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6630' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center/12px no-repeat;
}
.w-case-body .pf-link{
  margin-top:22px;padding:0 20px;
  border:1.5px solid var(--accent);color:var(--accent);
  min-height:46px;
}
.w-case-body .pf-link:hover{background:var(--accent);color:#fff;gap:7px;}
.w-soon-text span{color:var(--ink);opacity:.86;}
@media (max-width:640px){ .w-case{padding:16px 16px 24px;gap:22px;} }
/* Nowy układ: wszystkie nagłówki sekcji wyśrodkowane, jednolicie */
#wspolpraca .section-head,
#zarzadzanie .section-head{text-align:center;margin:0 auto 60px;max-width:780px;}
#wspolpraca .section-head p,
#zarzadzanie .section-head p{margin-left:auto;margin-right:auto;}
#wspolpraca .section-head .rule-title,
#zarzadzanie .section-head .rule-title{padding-left:0;}
#wspolpraca .section-head .rule-title::before,
#zarzadzanie .section-head .rule-title::before{display:none;}

/* ============================================================
   AWATAR ZAMIAST MONOGRAMU „NB” w logo
   ============================================================ */
.logo-text a::before{
  content:'';
  width:42px;height:42px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--accent-tint) url('img/avatar.jpg') center/cover no-repeat;
  box-shadow:0 0 0 1px var(--line-deep), 0 4px 10px rgba(51,39,42,0.12);
  transition:box-shadow .3s ease;
}
.logo-text a:hover::before{background:var(--accent-tint) url('img/avatar.jpg') center/cover no-repeat;box-shadow:0 0 0 1.5px var(--accent), 0 4px 12px rgba(138,102,48,0.22);}
@media (max-width:640px){ .logo-text a::before{width:38px;height:38px;} }

/* ============================================================
   PRZYCISKI: wszystkie zaokrąglone, spójnie w całym serwisie
   ============================================================ */
.btn,
.btn::before,
.nav-actions .btn,
.brief-submit,
.w-case-body .pf-link,
.menu-toggle{border-radius:999px !important;}
.btn{padding-left:30px;padding-right:30px;}
.w-case-body .pf-link{padding:0 22px;}
.w-soon,.w-choice-card{border-radius:14px;}
/* Zdjęcie w hero z łagodnie zaokrąglonymi rogami, jak przyciski */
.hero-foto img{border-radius:18px;}
.hero-foto::after{border-radius:18px;}

/* ============================================================
   SZYBKI KONTAKT: pływający przycisk i okienko (prawy dolny róg)
   ============================================================ */
.qc{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.qc-fab{
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 24px 0 18px;
  border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#8A6630,#6F5124);
  box-shadow:0 12px 30px rgba(111,81,36,0.35);
  transition:box-shadow .25s ease, filter .25s ease;
}
.qc-fab:hover{filter:brightness(1.08);box-shadow:0 14px 34px rgba(111,81,36,0.45);}
.qc-fab:focus-visible{outline:3px solid #C9A36A;outline-offset:3px;}
.qc-fab-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;}
.qc-i-close{display:none !important;}
.qc.is-open .qc-i-open{display:none !important;}
.qc.is-open .qc-i-close{display:block !important;}
.qc.is-open .qc-fab{padding:0;width:56px;justify-content:center;}
.qc.is-open .qc-fab-txt{display:none;}

.qc-panel{
  width:min(380px,calc(100vw - 32px));
  max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);
  overflow:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(51,39,42,0.22);
  animation:qcIn .25s ease;
}
@keyframes qcIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.qc-panel{animation:none;}}
.qc-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 16px 14px 18px;
  background:linear-gradient(135deg,#FAF3EF,#F6EDE0);
  border-bottom:1px solid var(--line);
}
.qc-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--accent-tint) url('img/avatar.jpg') center/cover no-repeat;
  border:2px solid #fff;box-shadow:0 0 0 1px var(--line-deep);
}
.qc-head-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.qc-head-txt strong{font-family:var(--serif);font-size:17px;color:var(--ink);font-weight:600;}
.qc-head-txt span{font-size:12.5px;color:var(--mute);}
.qc-close{width:36px;height:36px;border-radius:50%;border:0;background:transparent;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;}
.qc-close:hover{background:rgba(138,102,48,0.1);}
.qc-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.qc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 16px 0;padding:4px;background:var(--paper-tint);border-radius:999px;}
.qc-tab{
  border:0;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--body);
  padding:9px 8px;border-radius:999px;min-height:40px;
  transition:background-color .2s ease, color .2s ease;
}
.qc-tab.is-active{background:#fff;color:var(--accent-deep);box-shadow:0 2px 8px rgba(51,39,42,0.10);}
.qc-body{padding:14px 18px 18px;display:flex;flex-direction:column;}
.qc-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:10px 0 6px;}
.qc-opt{font-weight:400;color:var(--mute);}
.qc-input{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  border:1px solid var(--line-deep);background:#fff;
  border-radius:12px;padding:10px 13px;
}
.qc-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(138,102,48,0.15);}
textarea.qc-input{resize:vertical;min-height:90px;line-height:1.55;}

.qc-cal{border:1px solid var(--line);border-radius:14px;padding:10px;}
.qc-cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.qc-cal-month{font-weight:600;font-size:14px;color:var(--ink);text-transform:capitalize;}
.qc-cal-nav{width:34px;height:34px;border-radius:50%;border:0;background:transparent;cursor:pointer;color:var(--accent);display:flex;align-items:center;justify-content:center;}
.qc-cal-nav:hover:not(:disabled){background:var(--accent-tint);}
.qc-cal-nav:disabled{opacity:.3;cursor:default;}
.qc-cal-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.qc-cal-week,.qc-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;}
.qc-cal-week span{font-size:11px;font-weight:600;color:var(--mute);padding:4px 0;}
.qc-day{
  aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);
  transition:background-color .15s ease, color .15s ease;
}
.qc-day:hover:not(:disabled){background:var(--accent-tint);}
.qc-day:disabled{color:#BFB0AA;cursor:default;}
.qc-day.is-today{box-shadow:inset 0 0 0 1px var(--accent);}
.qc-day.is-picked{background:var(--accent);color:#fff;box-shadow:none;}
.qc-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.qc-slot{
  border:1px solid var(--line-deep);background:#fff;cursor:pointer;
  border-radius:999px;padding:9px 4px;min-height:40px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.qc-slot:hover:not(:disabled){border-color:var(--accent);}
.qc-slot.is-picked{background:var(--accent);border-color:var(--accent);color:#fff;}
.qc-slot:disabled{opacity:.35;cursor:default;text-decoration:line-through;}
.qc-day:focus-visible,.qc-slot:focus-visible,.qc-tab:focus-visible,.qc-close:focus-visible,.qc-cal-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.qc-status{min-height:0;margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--body);}
.qc-status:empty{margin:0;}
.qc-status.is-error{color:#A12B2B;}
.qc-send{width:100%;margin-top:14px;min-height:48px;}
.qc-privacy{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--mute);text-align:center;}
.qc-privacy a{color:var(--accent);text-decoration:underline;}
.qc-done{padding:30px 22px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.qc-done-ico{width:54px;height:54px;border-radius:50%;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;color:var(--accent);}
.qc-done-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.qc-done-txt{font-size:15px;line-height:1.6;color:var(--ink);margin:0;}
@media (max-width:640px){
  .qc{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));}
  .qc-fab{height:54px;padding:0 20px 0 16px;}
  .qc.is-open .qc-fab{width:54px;}
}
@media print{.qc{display:none;}}

/* --- Poprawki: równe dolne krawędzie w „Prawo i mentoring” --- */
.pm-grid{align-items:stretch;}
.pm-card#prawo{height:100%;}
.pm-side .pm-cta{flex:1;justify-content:center;}

/* --- „Pozostałe usługi”: obie karty w tym samym układzie (ikona + tekst) --- */
.more-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1020px){.more-grid{grid-template-columns:1fr;}}
.qc-done[hidden],.qc-form[hidden],.qc-tabs[hidden],.qc-pane[hidden],.qc-panel[hidden]{display:none !important;}
.qc .qc-send{
  background:linear-gradient(135deg,#8A6630,#6F5124) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 8px 20px rgba(111,81,36,0.25);
}
.qc .qc-send::before{display:none;}
.qc .qc-send:hover{filter:brightness(1.07);}
.qc .qc-send:disabled{opacity:.6;cursor:wait;}
.qc-hint{margin:-2px 0 8px;font-size:12.5px;color:var(--mute);}
.qc-hint[hidden]{display:none;}
.qc-slot:disabled{text-decoration:none;}
.qc-slot:disabled{opacity:.4;}
.qc-slot.is-past{text-decoration:line-through;}

/* --- Mentoring jako główna usługa (strona główna) --- */
.mentor-feature{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  background:#fff;border:1.5px solid var(--accent);
  border-radius:18px;overflow:hidden;
  box-shadow:0 20px 44px rgba(138,102,48,0.14);
  text-align:left;margin-bottom:22px;
}
.mentor-main{position:relative;padding:40px 36px 34px;}
.mentor-badge{
  display:inline-block;margin-bottom:18px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:5px 13px;border-radius:99px;
}
.mentor-head h3{font-size:30px !important;}
.mentor-head p{font-size:16.5px !important;}
.mentor-cta{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;
  padding:36px 34px;
  background:linear-gradient(160deg,#F6EDE0,#F9EFE8);
  border-left:1px solid #E3CFB5;
}
.mentor-cta strong{font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.3;}
.mentor-cta p{font-size:15.5px;line-height:1.65;color:var(--body);margin:0;}
.mentor-cta .btn{margin-top:8px;gap:9px;
  background:linear-gradient(135deg,#8A6630,#6F5124) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 10px 24px rgba(138,102,48,0.28);}
.mentor-cta .btn::before{display:none;}
.mentor-cta .btn:hover{filter:brightness(1.07);}
.mentor-alt{font-size:14.5px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.law-card{text-align:left;}
.check-list-3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;}
.svc-main{border:1.5px solid var(--accent);box-shadow:0 14px 32px rgba(138,102,48,0.12);}
@media (max-width:1020px){
  .mentor-feature{grid-template-columns:1fr;}
  .mentor-cta{border-left:0;border-top:1px solid #E3CFB5;}
  .check-list-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .mentor-main{padding:28px 20px 24px;}
  .mentor-cta{padding:26px 20px;}
  .mentor-cta .btn{width:100%;justify-content:center;}
  .mentor-head h3{font-size:26px !important;}
  .check-list-3{grid-template-columns:1fr;}
}

/* --- Karta „Umów rozmowę telefoniczną” w sekcjach kontaktu --- */
.call-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:26px 26px 24px;margin-bottom:18px;
  background:linear-gradient(160deg,#F6EDE0,#FBF3EE);
  border:1.5px solid var(--accent);border-radius:18px;
  box-shadow:0 14px 32px rgba(138,102,48,0.12);
  text-align:left;
}
.call-card .w-ico{background:#fff;}
.call-card-txt{display:flex;flex-direction:column;gap:6px;}
.call-card-txt strong{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1.3;}
.call-card-txt span{font-size:15px;line-height:1.6;color:var(--body);}
.call-card-btn{
  gap:9px;margin-top:4px;
  background:linear-gradient(135deg,#8A6630,#6F5124) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 10px 24px rgba(138,102,48,0.28);
}
.call-card-btn::before{display:none;}
.call-card-btn:hover{filter:brightness(1.07);color:#fff !important;}
#kontakt-www .call-card{max-width:620px;margin:0 auto 34px;}
#kontakt-www .contact-divider{max-width:520px;margin:0 auto 30px;}
@media (max-width:640px){ .call-card-btn{width:100%;justify-content:center;} }

/* Trzy sposoby rozpoczęcia na podstronie WWW */
.w-choice-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;}
@media (max-width:900px){ .w-choice-3{grid-template-columns:1fr;max-width:560px;} }
/* Główne przyciski z ikoną telefonu */
.hero-ctas .btn-primary,.w-hero-ctas .btn-primary{gap:9px;}
/* Po usunięciu serwisu biur: trzy usługi i jedna karta stron internetowych */
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin:0 auto;}
@media (max-width:1020px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr;max-width:520px;}}
.more-grid-1{grid-template-columns:1fr !important;max-width:680px;margin:0 auto;}
.www-card{margin-top:22px;}
.www-card .check-list{margin-bottom:6px;}
.www-card-link{display:inline-flex;margin-top:18px;text-decoration:none;}
.card-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px;}
.card-call{gap:9px;padding:12px 24px;min-height:46px;font-size:14.5px;
  background:linear-gradient(135deg,#8A6630,#6F5124) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 8px 20px rgba(138,102,48,0.24);}
.card-call::before{display:none;}
.card-call:hover{filter:brightness(1.07);color:#fff !important;}
.card-ctas .svc-cta{margin:0;padding:0;text-decoration:none;}
.law-card .card-ctas + .fine-print{margin-top:22px;}
@media (max-width:640px){ .card-call{width:100%;justify-content:center;} }

/* ============================================================
   USŁUGI: trzy równorzędne karty (mentoring, prawo, strony www)
   ============================================================ */
.usl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;text-align:left;}
.usl-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:32px 28px 28px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 14px 34px rgba(51,39,42,0.06);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.usl-card:hover{border-color:var(--accent);box-shadow:0 18px 40px rgba(138,102,48,0.13);}
.usl-card h3{font-family:var(--serif);font-size:26px;color:var(--ink);margin-top:4px;}
.usl-card > p{font-size:15.5px;line-height:1.65;color:var(--body);margin:0;}
.usl-card .check-list{margin-top:6px;}
.usl-foot{margin-top:auto;padding-top:18px;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.usl-more{width:100%;margin-top:4px;}
.usl-more summary{
  cursor:pointer;list-style:none;
  font-size:14px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;min-height:36px;
}
.usl-more summary::-webkit-details-marker{display:none;}
.usl-more summary::after{content:'+';font-size:18px;line-height:1;}
.usl-more[open] summary::after{content:'−';}
.usl-more .check-list{margin:10px 0 0;}
.usl-more .fine-print{margin-top:14px;font-size:12px;line-height:1.55;color:var(--mute);}
.usl-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
@media (max-width:1020px){ .usl-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto;} }

/* ============================================================
   NA JAKIM ETAPIE JESTEŚ: wyrazista sekcja na ciepłym tle
   ============================================================ */
.etapy{
  background:linear-gradient(160deg,#F3E2D2 0%,#EFD9C3 55%,#F6E7DA 100%);
  border-top:1px solid #E3CFB5;border-bottom:1px solid #E3CFB5;
}
.etapy .section-head h2{font-size:clamp(32px,4vw,44px);}
.etapy .section-head p{color:var(--ink);opacity:.85;}
.etap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;text-align:left;}
.etap-card{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:34px 28px 28px;
  background:#fff;border-radius:18px;
  box-shadow:0 18px 40px rgba(111,81,36,0.14);
  border-top:4px solid var(--accent);
}
.etap-ico{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8A6630,#6F5124);color:#fff;
  box-shadow:0 8px 18px rgba(138,102,48,0.3);
}
.etap-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.etap-card h3{font-family:var(--serif);font-size:25px;color:var(--ink);line-height:1.25;}
.etap-card p{font-size:15.5px;line-height:1.65;color:var(--body);margin:0 0 6px;}
.etap-card .card-call{margin-top:auto;}
@media (max-width:1020px){ .etap-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto;} }

/* ============================================================
   HERO STRONY GŁÓWNEJ (nowy): obietnica po lewej, zdjęcie w łuku
   z trzema karteczkami atutów po prawej
   ============================================================ */
.hero2-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  align-items:center;gap:56px;
  max-width:1140px;margin:0 auto;
  padding-top:84px;padding-bottom:96px;
}
.hero2-kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:0 0 20px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.hero2-kicker a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease;}
.hero2-kicker a:hover{border-bottom-color:var(--accent);}
.hero2-kicker span{color:#C9A36A;}
.hero2 h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5vw,60px);line-height:1.08;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 22px;text-wrap:balance;
}
.hero2-lede{font-size:18.5px;line-height:1.7;color:var(--body);max-width:560px;margin:0 0 32px;}
.hero2-lede strong{color:var(--ink);font-weight:600;}
.hero2 .hero-ctas .btn-primary{gap:9px;}

.hero2-visual{position:relative;justify-self:center;width:100%;max-width:400px;}
.hero2-arch{
  position:relative;
  border-radius:200px 200px 22px 22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 30px 60px rgba(111,81,36,0.18);
}
.hero2-arch img{display:block;width:100%;height:auto;}
.hero2-visual::before{
  content:'';position:absolute;inset:-14px -14px 14px 14px;
  border:1.5px solid #D9BFA0;border-radius:212px 212px 30px 30px;
  z-index:-1;
}
.hero2-badges{list-style:none;margin:0;padding:0;}
.hero2-badges li{
  position:absolute;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px 10px 10px;
  background:rgba(255,255,255,0.96);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 12px 28px rgba(51,39,42,0.14);
  font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.hb-ico{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8A6630,#6F5124);color:#fff;
}
.hb-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.hb-1{top:14%;left:-22%;}
.hb-2{top:48%;right:-20%;}
.hb-3{bottom:7%;left:-14%;}
@media (max-width:1180px){
  .hb-1{left:-10%;} .hb-2{right:-8%;} .hb-3{left:-6%;}
}
@media (max-width:900px){
  .hero2-grid{grid-template-columns:1fr;gap:40px;padding-top:56px;padding-bottom:64px;}
  .hero2-visual{max-width:340px;}
  .hero2-badges{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px;}
  .hero2-badges li{position:static;white-space:normal;}
  .hero2-visual::before{inset:-10px -10px 10px 10px;}
}
@media (max-width:640px){
  .hero2-lede{font-size:17px;}
  .hero2 .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero2 .hero-ctas .btn{width:100%;justify-content:center;}
}
.hero2 .hero-ctas{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;}
@media (max-width:900px){ .hero2-visual::before{display:none;} }
@media (max-width:640px){
  .hero2-kicker{letter-spacing:.08em;font-size:11.5px;gap:4px 8px;}
  .hero2 .hero-ctas{flex-direction:column;align-items:stretch;}
}

/* Zdjęcie w hero: zaokrąglony prostokąt zamiast łuku,
   za nim przesunięty, ciepły panel w kolorach marki */
.hero2-arch{border-radius:26px;}
.hero2-visual::before{
  inset:28px -28px -28px 28px;
  border:0;border-radius:30px;
  background:linear-gradient(145deg,#F3E2D2 0%,#EAD3BD 60%,#F2D9D6 100%);
}
.hero2-visual::after{
  content:'';position:absolute;z-index:-1;
  width:120px;height:120px;left:-34px;top:-34px;
  background-image:radial-gradient(#C9A36A 1.6px, transparent 1.7px);
  background-size:14px 14px;opacity:.55;
}
@media (max-width:900px){
  .hero2-visual::before{display:block;inset:18px -14px 206px 14px;}
  .hero2-visual::after{left:-14px;top:-18px;width:90px;height:90px;}
}

/* ============================================================
   HERO (wersja uporządkowana)
   - zdjęcie: białe tło zlewa się z ciepłym beżem (mix-blend-mode),
     przycięta pusta góra, jedna cienka złota ramka
   - atuty w spokojnym rzędzie pod przyciskami, nic nie zasłania twarzy
   ============================================================ */
.hero2-visual::before,.hero2-visual::after{content:none !important;display:none !important;}
.hero2-visual{max-width:420px;}
.hero2-arch{
  position:relative;
  border-radius:24px;
  overflow:visible;
  background:none;box-shadow:none;
}
.hero2-arch picture{
  display:block;position:relative;z-index:1;
  aspect-ratio:4/4.4;
  border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,#F4E4D8 0%,#EFD7C8 55%,#F3DCD9 100%);
  box-shadow:0 26px 54px rgba(111,81,36,0.18);
}
.hero2-arch img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 78%;
  mix-blend-mode:multiply;
}
.hero2-arch::after{
  content:'';position:absolute;z-index:0;
  inset:18px -18px -18px 18px;
  border:1.5px solid #C9A36A;border-radius:28px;
}
.hero2-who{
  margin:0 0 10px;
  font-family:var(--sans);font-size:17px;font-weight:700;color:var(--ink);
}
.hero2-who span{font-weight:400;color:var(--body);}
.hero2-lede{max-width:520px;margin-bottom:30px;}
.hero2-trust{
  list-style:none;margin:30px 0 0;padding:22px 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 26px;
}
.hero2-trust li{
  position:static;display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:600;color:var(--ink);
  padding:0;background:none;border:0;box-shadow:none;white-space:normal;
}
.hero2-trust .hb-ico{width:30px;height:30px;}
.hero2-trust .hb-ico svg{width:15px;height:15px;}
@media (max-width:900px){
  .hero2-visual{max-width:340px;}
  .hero2-arch::after{inset:12px -12px -12px 12px;}
}
@media (max-width:640px){
  .hero2-trust{flex-direction:column;gap:12px;}
  .hero2-who{font-size:16px;}
}

/* ============================================================
   KRÓJ NAGŁÓWKÓW: Cormorant Garamond (licencja SIL OFL),
   pliki na własnym serwerze, bez usług zewnętrznych
   ============================================================ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-500-normal.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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-600-normal.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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-500-italic.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:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;
  src:url('fonts/cormorant-garamond-latin-ext-500-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;}
:root{--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;}
h1,h2,h3{font-weight:600;}
.logo-text a{font-family:var(--serif);font-size:23px;font-weight:600;}

/* ============================================================
   STRONA GŁÓWNA 2.0
   ============================================================ */
.home{background:var(--paper);}
.home .h-label{
  margin:0 0 14px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:12px;
}
.home .h-label::before{content:'';width:28px;height:1.5px;background:var(--accent);}
.home h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(36px,4.6vw,56px);line-height:1.05;letter-spacing:-.005em;
  color:var(--ink);margin:0;text-wrap:balance;
}
.home h1 em,.home h2 em{font-style:italic;color:var(--accent);font-weight:500;}
.h-section{padding:112px 0;}
.h-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:56px;text-align:left;}
.h-head > p{margin:0;font-size:17px;line-height:1.75;color:var(--body);max-width:520px;}
.h-head-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;margin-bottom:60px;}
.h-head-center h2{margin-bottom:18px;}
.h-head-center > p{max-width:600px;}

/* linki tekstowe zamiast wielu ciężkich przycisków */
.h-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent-deep);
  text-decoration:none;min-height:44px;
  border-bottom:1.5px solid transparent;transition:border-color .2s ease, gap .2s ease;
}
.h-link:hover{border-bottom-color:currentColor;gap:12px;}
.h-link svg{flex-shrink:0;}
.h-link-call span{border-bottom:1.5px solid #D9BFA0;padding-bottom:1px;}
.h-link-call:hover span{border-bottom-color:transparent;}
.h-link-call:hover{border-bottom-color:transparent;}
.h-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.h-btn{gap:10px;padding:16px 30px;font-size:15.5px;
  background:linear-gradient(135deg,#8A6630,#6F5124) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:0 12px 28px rgba(111,81,36,0.28);}
.h-btn::before{display:none;}
.h-btn:hover{filter:brightness(1.07);color:#fff !important;}

/* --- HERO --- */
.h-hero{position:relative;overflow:hidden;background:var(--paper);}
.h-hero-panel{
  position:absolute;top:0;bottom:0;right:0;width:40%;
  background:linear-gradient(170deg,#F4E4D8 0%,#EED6C4 60%,#F1DAD5 100%);
}
.h-hero-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  align-items:center;gap:64px;
  max-width:1180px;margin:0 auto;
  padding-top:96px;padding-bottom:104px;
}
.h-kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 26px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.h-kicker a{color:var(--accent);text-decoration:none;}
.h-kicker a:hover{text-decoration:underline;text-underline-offset:4px;}
.h-kicker span{color:#CDB08A;}
.h-hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(46px,6.2vw,84px);line-height:.98;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 28px;text-wrap:balance;
}
.h-hero h1 em{display:block;}
.h-lede{font-size:19px;line-height:1.7;color:var(--body);max-width:500px;margin:0 0 36px;}
.h-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;}
.h-hero-photo{position:relative;margin:0;justify-self:center;width:100%;max-width:430px;}
.h-photo-frame{position:relative;}
.h-photo-frame::after{
  content:'';position:absolute;inset:-18px 18px 18px -18px;
  border:1.5px solid #C9A36A;border-radius:6px;z-index:0;
}
.h-photo-frame picture{
  position:relative;z-index:1;display:block;
  aspect-ratio:4/5;overflow:hidden;border-radius:4px;
  background:linear-gradient(170deg,#F2DFD2,#EAD0BF);
  box-shadow:0 34px 70px rgba(80,55,30,0.22);
}
.h-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;mix-blend-mode:multiply;display:block;}
.h-nameplate{
  position:absolute;z-index:2;left:-40px;bottom:36px;
  display:flex;flex-direction:column;gap:2px;
  padding:16px 22px 15px;
  background:#fff;border-left:3px solid var(--accent);
  box-shadow:0 18px 40px rgba(51,39,42,0.16);
}
.h-nameplate strong{font-family:var(--serif);font-style:italic;font-weight:500;font-size:25px;line-height:1.1;color:var(--ink);}
.h-nameplate span{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}

/* --- ATUTY --- */
.h-trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.h-trust ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);max-width:1180px;}
.h-trust li{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:26px 18px;font-size:15.5px;font-weight:600;color:var(--ink);text-align:left;
}
.h-trust li + li{border-left:1px solid var(--line);}
.h-trust-ico{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent);}
.h-trust-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* --- USŁUGI --- */
.h-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;}
.h-service{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:38px 32px 30px;background:#fff;
  border:1px solid var(--line);border-radius:6px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.h-service::before{content:'';position:absolute;left:32px;right:32px;top:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.h-service:hover{border-color:#DCC3A8;box-shadow:0 22px 48px rgba(111,81,36,0.10);}
.h-service:hover::before{transform:scaleX(1);}
.h-service-ico{color:var(--accent);}
.h-service-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.h-service h3{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.05;color:var(--ink);margin:0;}
.h-service > p{font-size:16px;line-height:1.7;color:var(--body);margin:0;}
.h-service .check-list{margin-top:4px;}
.h-service-foot{margin-top:auto;padding-top:22px;width:100%;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.h-service .usl-more{margin-top:0;}

/* --- ETAPY --- */
.h-stages{background:linear-gradient(170deg,#F7ECE3 0%,#F2E0D2 100%);}
.h-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative;text-align:left;}
.h-path::before{content:'';position:absolute;left:32px;right:calc(33.33% - 8px);top:32px;height:1.5px;background:repeating-linear-gradient(90deg,#C9A36A 0 6px,transparent 6px 12px);}
.h-path li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.h-path-dot{
  width:64px;height:64px;border-radius:50%;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--accent);
  box-shadow:0 0 0 6px rgba(255,255,255,0.55), 0 12px 26px rgba(111,81,36,0.16);
  position:relative;z-index:1;
}
.h-path-dot svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.h-path-label{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.h-path h3{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.1;color:var(--ink);margin:0;}
.h-path li > p:not(.h-path-label){font-size:16px;line-height:1.7;color:var(--body);margin:0 0 6px;}
.h-path .h-link{margin-top:auto;}

/* --- O MNIE --- */
.h-about{background:#2E2326;color:#E9DDD3;padding:112px 0;position:relative;overflow:hidden;}
.h-about::before{content:'';position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,163,106,0.18),transparent 70%);}
.h-about-grid{position:relative;display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:72px;align-items:center;max-width:1100px;margin:0 auto;}
.h-about-portrait{text-align:center;}
.h-about-circle{
  width:min(300px,70vw);aspect-ratio:1;margin:0 auto 22px;border-radius:50%;overflow:hidden;
  background:linear-gradient(170deg,#F2DFD2,#EAD0BF);
  box-shadow:0 0 0 1.5px #C9A36A, 0 0 0 12px rgba(201,163,106,0.12);
}
.h-about-circle img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;mix-blend-mode:multiply;display:block;}
.h-signature{font-family:var(--serif);font-style:italic;font-size:30px;color:#F6EDE0;margin:0;}
.h-signature-role{margin:4px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#BFAE9F;}
.h-about .h-label-light{color:#D9BA8A;}
.h-about .h-label-light::before{background:#D9BA8A;}
.h-about h2{color:#F6EDE0;margin-bottom:26px;}
.h-about h2 em{color:#D9BA8A;}
.h-about-text > p:not(.h-label){font-size:17.5px;line-height:1.8;color:#E0D2C6;margin:0 0 18px;max-width:560px;}
.h-about .h-btn{margin-top:14px;}

/* --- KONTAKT --- */
.h-contact{padding:112px 0;}

@media (max-width:1020px){
  .h-head{grid-template-columns:1fr;align-items:start;}
  .h-services,.h-path{grid-template-columns:1fr;max-width:620px;margin:0 auto;}
  .h-path::before{display:none;}
  .h-about-grid{grid-template-columns:1fr;gap:44px;text-align:left;}
}
@media (max-width:900px){
  .h-hero-panel{top:auto;height:46%;width:100%;}
  .h-hero-grid{grid-template-columns:1fr;gap:56px;padding-top:56px;padding-bottom:72px;}
  .h-hero-photo{max-width:360px;}
  .h-nameplate{left:-12px;bottom:24px;}
  .h-trust ul{grid-template-columns:1fr;}
  .h-trust li{justify-content:flex-start;padding:16px 20px;}
  .h-trust li + li{border-left:0;border-top:1px solid var(--line);}
}
@media (max-width:640px){
  .h-section,.h-about,.h-contact{padding:76px 0;}
  .h-lede{font-size:17px;}
  .h-ctas{flex-direction:column;align-items:stretch;}
  .h-ctas .h-btn{justify-content:center;}
  .h-ctas .h-link{justify-content:center;}
  .h-service{padding:30px 22px 24px;}
  .h-photo-frame::after{inset:-12px 12px 12px -12px;}
}
@media (max-width:1020px){ .h-head.h-head-center{align-items:center;} }
.h-photo-frame img{object-position:50% 45%;}
/* Kontakt na stronie głównej: spójne zaokrąglenia i cienie */
.h-contact .call-card{border-radius:10px;}
.h-contact .contact-direct-item{border-radius:8px;background:#fff;}
.h-contact .kontakt-form-box{border-radius:10px;box-shadow:0 18px 40px rgba(51,39,42,0.07);}
.h-contact .contact-form input,.h-contact .contact-form textarea{border-radius:8px;background:#fff;}
.h-contact .call-card-txt strong{font-size:26px;}

/* --- ATUTY: pływająca karta nachodząca na dół hero --- */
.h-trust{background:transparent;border:0;position:relative;z-index:3;margin-top:-58px;padding:0 20px;}
.h-trust ul{
  max-width:1060px;
  background:#fff;border-radius:14px;
  box-shadow:0 26px 60px rgba(80,55,30,0.14);
  border:1px solid #EFE2D8;
  padding:8px;
}
.h-trust li{
  flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:26px 20px 24px;
  font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.2;color:var(--ink);
}
.h-trust li + li{border-left:1px solid #EFE2D8;}
.h-trust-ico{
  width:52px;height:52px;
  background:linear-gradient(135deg,#8A6630,#6F5124);color:#fff;
  box-shadow:0 10px 22px rgba(138,102,48,0.28);
}
.h-trust-ico svg{width:22px;height:22px;}
.h-trust + .h-section{padding-top:96px;}
@media (max-width:900px){
  .h-trust{margin-top:-36px;padding:0 16px;}
  .h-trust ul{grid-template-columns:1fr;padding:4px 16px;}
  .h-trust li{flex-direction:row;justify-content:flex-start;text-align:left;padding:16px 4px;font-size:20px;gap:14px;}
  .h-trust li + li{border-left:0;border-top:1px solid #EFE2D8;}
  .h-trust-ico{width:42px;height:42px;}
  .h-trust-ico svg{width:18px;height:18px;}
}
.h-trust li{justify-content:flex-start;}

/* ============================================================
   HERO: dopracowanie
   ============================================================ */
/* spokojne tło bez rozmytych plam, panel z miękkim zaokrągleniem */
.h-hero{background:radial-gradient(120% 90% at 0% 0%, #FFFDFB 0%, #FBF5F1 60%, #F8EFEA 100%);}
.h-hero-panel{
  width:42%;
  border-bottom-left-radius:220px;
  background:
    radial-gradient(80% 60% at 70% 30%, rgba(255,255,255,0.55), transparent 70%),
    linear-gradient(165deg,#F5E6DA 0%,#EFD8C6 55%,#EFD3CF 100%);
}
/* cienka złota linia wzdłuż zaokrąglenia panelu */
.h-hero-panel::after{
  content:'';position:absolute;inset:0 0 -1px 0;
  border-bottom-left-radius:220px;
  box-shadow:inset 1px -1px 0 rgba(201,163,106,0.55);
}
.h-hero-grid{padding-top:104px;padding-bottom:128px;}
.h-hero h1 em{position:relative;display:inline-block;padding-bottom:10px;}
.h-swash{
  position:absolute;left:0;right:0;bottom:-6px;width:100%;height:18px;overflow:visible;
}
.h-swash path{fill:none;stroke:#C9A36A;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;animation:hSwash 1.2s .9s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes hSwash{to{stroke-dashoffset:0;}}
.h-lede{color:#4B3E3A;}

/* większe zdjęcie z delikatniejszą ramką i miękkim cieniem */
.h-hero-photo{max-width:460px;}
.h-photo-frame picture{border-radius:10px;box-shadow:0 40px 80px rgba(80,55,30,0.22), 0 8px 18px rgba(80,55,30,0.08);}
.h-photo-frame::after{border-radius:12px;border-color:rgba(201,163,106,0.9);}
.h-nameplate{border-radius:8px;border-left:0;padding:16px 24px 15px 22px;}
.h-nameplate::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--accent);}

/* łagodne wejście treści po załadowaniu */
.h-rise{opacity:0;transform:translateY(16px);animation:hRise .9s cubic-bezier(.22,1,.36,1) forwards;}
.h-r1{animation-delay:.05s}.h-r2{animation-delay:.15s}.h-r3{animation-delay:.3s}.h-r4{animation-delay:.45s}
@keyframes hRise{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .h-rise{opacity:1;transform:none;animation:none;}
  .h-swash path{stroke-dashoffset:0;animation:none;}
}
@media (max-width:900px){
  .h-hero-panel{width:100%;border-bottom-left-radius:0;border-top-left-radius:140px;}
  .h-hero-panel::after{border-bottom-left-radius:0;border-top-left-radius:140px;box-shadow:inset 1px 1px 0 rgba(201,163,106,0.55);}
  .h-hero-grid{padding-bottom:96px;}
}
.h-hero-panel::after{content:none !important;}

/* --- ATUTY (wersja 3): ikona w złotym pierścieniu, tytuł i krótki podpis --- */
.h-trust ul{padding:6px 10px;border-radius:16px;}
.h-trust li{
  flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;text-align:left;
  padding:26px 26px;font-family:var(--sans);font-size:15px;font-weight:400;
}
.h-trust-ico{
  width:54px;height:54px;flex-shrink:0;
  background:#fff;color:var(--accent);
  box-shadow:inset 0 0 0 1.5px #D9BFA0, 0 0 0 5px #FBF3EC;
}
.h-trust-ico svg{width:24px;height:24px;stroke-width:1.5;}
.h-trust li:hover .h-trust-ico{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 5px #F3E4D6;}
.h-trust-ico{transition:background-color .3s ease, color .3s ease, box-shadow .3s ease;}
.h-trust-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.h-trust-txt strong{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.15;color:var(--ink);}
.h-trust-txt small{font-size:14px;line-height:1.45;color:var(--mute);}
@media (max-width:900px){
  .h-trust ul{padding:4px 14px;}
  .h-trust li{padding:18px 4px;gap:14px;}
  .h-trust-ico{width:46px;height:46px;}
  .h-trust-ico svg{width:20px;height:20px;}
  .h-trust-txt strong{font-size:21px;}
}
.h-trust ul{max-width:1180px;}
.h-trust li{padding:24px 22px;gap:14px;}
.h-trust-txt strong{font-size:22px;white-space:nowrap;}
@media (max-width:1100px){ .h-trust-txt strong{white-space:normal;font-size:20px;} }
/* Zachęta pod przyciskami w hero */
.h-cta-note{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;}
.h-cta-note li{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--body);}
.h-cta-note svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
@media (max-width:640px){ .h-cta-note{flex-direction:column;align-items:center;gap:8px;} }
.h-trust-txt strong{white-space:normal !important;}
.h-trust-txt strong{text-wrap:balance;}

/* --- DLA KOGO: trzy proste karty, bez numerów i linii kroków --- */
.h-whos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:left;}
.h-who{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:34px 30px 28px;background:#fff;border-radius:14px;
  box-shadow:0 18px 40px rgba(111,81,36,0.10);
}
.h-who-ico{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--accent);box-shadow:inset 0 0 0 1.5px #D9BFA0, 0 0 0 5px #FBF3EC;
}
.h-who-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.h-who h3{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.1;color:var(--ink);margin:4px 0 0;}
.h-who p{font-size:16px;line-height:1.7;color:var(--body);margin:0;}
.h-who .h-link{margin-top:auto;padding-top:8px;}
@media (max-width:1020px){ .h-whos{grid-template-columns:1fr;max-width:620px;margin:0 auto;} }

/* Tekst wprowadzający do usług w eleganckim okienku */
.h-intro-box{
  max-width:820px;margin:-24px auto 56px;
  padding:30px 40px;text-align:center;
  background:#fff;border:1px solid #EAD9C8;border-radius:16px;
  box-shadow:0 18px 40px rgba(111,81,36,0.08);
  position:relative;
}
.h-intro-box::before,.h-intro-box::after{
  content:'';position:absolute;left:50%;width:44px;height:2px;background:#C9A36A;transform:translateX(-50%);
}
.h-intro-box::before{top:-1px;}.h-intro-box::after{bottom:-1px;}
.h-intro-box p{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(21px,2.2vw,25px);line-height:1.5;color:var(--ink);}

/* Wyśrodkowany przycisk w kartach */
.h-card-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:50px;padding:12px 20px;
  border:1.5px solid var(--accent);border-radius:999px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent-deep);
  text-decoration:none;text-align:center;background:transparent;
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.h-card-btn:hover{background:linear-gradient(135deg,#8A6630,#6F5124);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(138,102,48,0.25);}
.h-card-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.h-service-foot{align-items:stretch !important;gap:12px !important;}
.h-service-foot .h-link{align-self:center;}

/* Dla kogo: rozbudowane karty */
.h-who{padding:36px 32px 30px;gap:16px;}
.h-who h3{font-size:32px;}
.h-who-help{width:100%;margin-top:6px;padding-top:20px;border-top:1px solid #EFE2D8;}
.h-who-help-label{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.h-who .h-card-btn{margin-top:auto;}
.h-who .check-list{gap:9px;}
@media (max-width:640px){ .h-intro-box{padding:24px 22px;margin-top:-16px;} }
.h-who .h-who-help-label{margin:0 0 12px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);line-height:1.4;}
.h-who-help{margin-bottom:10px;}
/* Okienko pod „Usługi”: czytelniej, bez kursywy */
.h-intro-box{padding:34px 44px;}
.h-intro-box p{font-style:normal;}
.h-intro-box .h-intro-lead{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,30px);line-height:1.3;color:var(--ink);margin:0 0 12px;text-wrap:balance;}
.h-intro-box .h-intro-sub{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--body);margin:0 auto;max-width:620px;}
.h-intro-sub strong{color:var(--accent-deep);font-weight:600;}
@media (max-width:640px){ .h-intro-box .h-intro-sub{font-size:16px;} }
.home .h-label::before,.h-about .h-label-light::before{content:none !important;display:none !important;}

/* Główny przycisk w hero: pulsujący złoty pierścień, przebłysk światła i „dzwoniąca” słuchawka */
.h-btn-pulse{position:relative;overflow:hidden;isolation:isolate;animation:hPulse 2.6s ease-out 1.6s infinite;}
.h-btn-pulse::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-20deg);animation:hShine 5.2s ease-in-out 2s infinite;
}
.h-btn-pulse svg{transform-origin:50% 50%;animation:hRing 5.2s ease-in-out 2s infinite;}
.h-btn-pulse:hover{animation-play-state:paused;}
@keyframes hPulse{
  0%{box-shadow:0 12px 28px rgba(111,81,36,0.28),0 0 0 0 rgba(201,163,106,0.55);}
  70%{box-shadow:0 12px 28px rgba(111,81,36,0.28),0 0 0 16px rgba(201,163,106,0);}
  100%{box-shadow:0 12px 28px rgba(111,81,36,0.28),0 0 0 0 rgba(201,163,106,0);}
}
@keyframes hShine{0%,60%{left:-60%;}85%,100%{left:130%;}}
@keyframes hRing{0%,70%,100%{transform:rotate(0);}73%{transform:rotate(-16deg);}76%{transform:rotate(14deg);}79%{transform:rotate(-10deg);}82%{transform:rotate(6deg);}85%{transform:rotate(0);}}
@media (prefers-reduced-motion:reduce){
  .h-btn-pulse,.h-btn-pulse::after,.h-btn-pulse svg{animation:none;}
}

/* Okienko usług z animacją „trzy obszary łączą się w jedno” */
.h-intro-anim{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:30px;text-align:left;max-width:900px;}
.h-intro-anim .h-intro-sub{margin:0;}
.h-join{width:100%;height:auto;overflow:visible;display:block;}
.hj-line{fill:none;stroke:#C9A36A;stroke-width:2;stroke-linecap:round;stroke-dasharray:4 6;opacity:.35;}
.hj-node circle{fill:#fff;stroke:#D9BFA0;stroke-width:1.5;}
.hj-node path,.hj-node rect{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.hj-core{fill:var(--accent);}
.hj-center path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;}
.hj-halo{fill:rgba(201,163,106,0.18);transform-origin:0 0;transform-box:fill-box;}
/* animacja: światło płynie po liniach do środka, węzły po kolei się podświetlają, środek pulsuje */
.hj-line{animation:hjFlow 1.6s linear infinite;}
.hj-l2{animation-delay:.4s}.hj-l3{animation-delay:.8s}
@keyframes hjFlow{from{stroke-dashoffset:20;opacity:.35}50%{opacity:.9}to{stroke-dashoffset:0;opacity:.35}}
.hj-node circle{animation:hjNode 4.2s ease-in-out infinite;}
.hj-n2 circle{animation-delay:1.4s}.hj-n3 circle{animation-delay:2.8s}
@keyframes hjNode{0%,70%,100%{fill:#fff;stroke:#D9BFA0}15%,30%{fill:#F6EDE0;stroke:var(--accent)}}
.hj-halo{animation:hjHalo 2.8s ease-out infinite;transform-origin:center;transform-box:fill-box;}
@keyframes hjHalo{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hj-line,.hj-node circle,.hj-halo{animation:none;}.hj-line{opacity:.7}}
@media (max-width:760px){
  .h-intro-anim{grid-template-columns:1fr;text-align:center;gap:16px;}
  .h-join-wrap{max-width:200px;margin:0 auto;}
}

/* Przycisk otwierający okienko w karcie usługi */
.usl-more-btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:6px 0;min-height:40px;
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--accent-deep);
  border-bottom:1.5px solid #D9BFA0;
}
.usl-more-btn:hover{border-bottom-color:var(--accent);}
.usl-more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Okienko (dialog) */
.nb-modal{
  border:0;padding:0;background:transparent;
  width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 40px);
}
.nb-modal::backdrop{background:rgba(46,35,38,0.55);backdrop-filter:blur(3px);}
.nb-modal[open]{animation:nbModalIn .3s ease;}
@keyframes nbModalIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.nb-modal[open]{animation:none;}}
.nb-modal-box{
  position:relative;background:#fff;border-radius:18px;
  padding:40px 40px 34px;text-align:left;
  box-shadow:0 30px 70px rgba(46,35,38,0.3);
  border-top:4px solid var(--accent);
  max-height:calc(100dvh - 40px);overflow:auto;
}
.nb-modal-box .h-label{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.nb-modal-box h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,36px);line-height:1.1;color:var(--ink);margin:0 0 24px;}
.nb-modal-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:12px;}
.nb-modal-box .fine-print{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--mute);}
.nb-modal-cta{margin-top:24px;}
.nb-modal-close{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
  border:0;background:var(--paper-tint);cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.nb-modal-close:hover{background:var(--accent-tint);}
.nb-modal-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
@media (max-width:640px){
  .nb-modal-box{padding:34px 22px 26px;}
  .nb-modal-list{grid-template-columns:1fr;}
}
.nb-modal{margin:auto;}
/* równe przyciski w kartach usług: stopka zawsze na samym dole, tylko przycisk */
.h-service .h-service-more,.h-service .usl-more-btn{margin-top:4px;}
.h-service-foot{margin-top:auto;}
/* Atuty: trzeci (najdłuższy) ma więcej miejsca, wszystkie w jednej linii */
@media (min-width:901px){
  .h-trust ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);}
  .h-trust li{padding:24px 18px;}
  .h-trust-txt strong{white-space:nowrap !important;font-size:clamp(17px,1.55vw,22px);}
}
/* Jedna linijka pod przyciskiem „Umów rozmowę telefoniczną” */
.h-cta-hint{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:14.5px;color:var(--body);}
.h-cta-hint svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.h-cta-hint-light{color:#D9CBBF;}
.h-cta-hint-light svg{stroke:#D9BA8A;}
@media (max-width:640px){ .h-hero .h-cta-hint{justify-content:center;} }
.h-ctas .h-cta-hint{flex-basis:100%;order:3;margin-top:2px;}
@media (max-width:640px){
  .h-ctas .h-btn{order:1;}
  .h-ctas .h-cta-hint{order:2;justify-content:center;margin-top:-2px;}
  .h-ctas > .h-link{order:3;}
}

/* Dla kogo: równe karty, tytuły, opisy, listy i przyciski w tych samych rzędach */
@media (min-width:1021px){
  .h-whos{grid-template-rows:auto auto auto auto auto;row-gap:0;}
  .h-who{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:14px;align-items:start;}
  .h-who h3{align-self:end;}
  .h-who .h-card-btn{align-self:end;}
}
/* Większe opisy pod nagłówkami sekcji na stronie głównej */
.home .h-head > p,.home .h-head-center > p{font-size:19px;line-height:1.7;color:#4B3E3A;max-width:680px;}
.home .h-about-text > p:not(.h-label){font-size:18.5px;}
@media (max-width:640px){ .home .h-head > p,.home .h-head-center > p{font-size:17.5px;} }
@media (min-width:1021px){
  .h-who h3{align-self:start;font-size:clamp(24px,2.1vw,29px);white-space:nowrap;}
}
/* Etykiety sekcji (Usługi, Dla kogo, O mnie, Kontakt): większe, eleganckie */
.home .h-label{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(22px,2.2vw,27px);letter-spacing:.01em;text-transform:none;
  color:var(--accent);margin-bottom:8px;
}
.h-about .h-label-light{color:#D9BA8A;}
.home .h-head > p.h-label,.home .h-head-center > p.h-label,.home p.h-label{
  font-family:var(--serif) !important;font-style:italic;font-weight:500;
  font-size:clamp(24px,2.4vw,30px) !important;line-height:1.2;letter-spacing:.01em;text-transform:none;
  color:var(--accent) !important;margin:0 0 6px !important;max-width:none;
}
.h-about p.h-label-light{color:#D9BA8A !important;}
/* Jednolite linki w kartach usług („Więcej o mentoringu”, „Pełny zakres…”, „Oferta i realizacje”) */
.card-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:4px 0;min-height:40px;
  background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent-deep);
  border-bottom:1.5px solid #D9BFA0;transition:gap .2s ease,border-color .2s ease;
}
.card-more:hover{gap:12px;border-bottom-color:var(--accent);}
.card-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* Okienka: nagłówek i mini opis */
.nb-modal-kicker{margin:0 0 6px;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--accent);}
.nb-modal-lead{margin:-10px 0 24px;font-size:16.5px;line-height:1.7;color:var(--body);}
.nb-modal-desc{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.nb-modal-desc li{padding:16px 18px;border-radius:12px;background:var(--paper-tint);border-left:3px solid #D9BFA0;display:flex;flex-direction:column;gap:4px;}
.nb-modal-desc strong{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);}
.nb-modal-desc span{font-size:15px;line-height:1.6;color:var(--body);}
.h-service .card-more{margin-top:auto;} .h-service .card-more + .h-service-foot{margin-top:0 !important;padding-top:18px;}
/* Dla kogo: lżejsze tło, prawie jak reszta strony */
.h-stages{background:#FBF6F2;border-top:1px solid #F1E6DE;border-bottom:1px solid #F1E6DE;}
.h-who{box-shadow:0 10px 30px rgba(111,81,36,0.07);border:1px solid #F0E4DA;}
/* Zachęta pod kartami „Dla kogo” */
.h-who-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  max-width:1000px;margin:48px auto 0;padding:30px 36px;
  background:#fff;border:1px solid #EAD9C8;border-radius:16px;
  box-shadow:0 12px 32px rgba(111,81,36,0.07);text-align:left;
}
.h-who-cta-text{flex:1 1 420px;min-width:0;}
.h-who-cta-text p{margin:0;font-size:16.5px;line-height:1.7;color:var(--body);}
.h-who-cta-text .h-who-cta-title{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1.2;color:var(--ink);margin-bottom:6px;}
.h-who-cta .h-btn{flex-shrink:0;}
@media (max-width:640px){
  .h-who-cta{padding:26px 22px;text-align:center;justify-content:center;}
  .h-who-cta .h-btn{width:100%;justify-content:center;}
}
/* Okienko mentoringu: cztery kafelki 2x2 w delikatnych, różnych odcieniach marki */
#modal-mentoring .nb-modal-box{width:100%;}
.nb-modal{width:min(720px,calc(100vw - 32px));}
.nb-modal-desc{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.nb-modal-desc li{
  border-left:0;border-radius:14px;padding:20px 20px 18px;gap:6px;
  border:1px solid rgba(201,163,106,0.25);
}
.nb-modal-desc li:nth-child(1){background:linear-gradient(160deg,#FBF3E8,#F6E9D8);}
.nb-modal-desc li:nth-child(2){background:linear-gradient(160deg,#FBF1EF,#F5E1DD);}
.nb-modal-desc li:nth-child(3){background:linear-gradient(160deg,#F6F2EC,#ECE3D8);}
.nb-modal-desc li:nth-child(4){background:linear-gradient(160deg,#FCF4EA,#F3DFCB);}
.nb-desc-ico{
  width:40px;height:40px;border-radius:50%;margin-bottom:6px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--accent);box-shadow:0 4px 12px rgba(111,81,36,0.12);
}
.nb-desc-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.nb-modal-desc strong{font-size:22px;}
@media (max-width:640px){ .nb-modal-desc{grid-template-columns:1fr;} }

/* ============================================================
   STRONY WWW: nagłówki sekcji w stylu strony głównej
   ============================================================ */
.page-www .section-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(36px,4.6vw,52px);line-height:1.1;}
.page-www .section-head .rule-title::after{
  content:'';display:block!important;width:56px;height:2px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,#C9A36A 20%,#C9A36A 80%,transparent);opacity:1;
}
.page-www .section-head p{font-size:18.5px;line-height:1.7;color:#4B3E3A;max-width:660px;}
@media (max-width:640px){ .page-www .section-head p{font-size:17px;} }
.page-www .section-head:has(+ .w-intro-box){margin-bottom:0;}
.w-intro-box{margin:34px auto 56px!important;max-width:680px;}
.w-intro-box .h-intro-lead{font-style:normal;}
.w-intro-box .h-intro-sub{font-family:var(--serif)!important;font-style:italic!important;font-size:clamp(20px,2vw,23px)!important;color:var(--accent-deep)!important;margin:0!important;}

/* Atuty w hero strony WWW, jak pasek na stronie głównej */
.w-trust{
  list-style:none;margin:36px auto 0;padding:8px;max-width:900px;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border:1px solid #EFE2D8;border-radius:14px;
  box-shadow:0 22px 50px rgba(80,55,30,0.12);
}
.w-trust li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:22px 16px 20px;
  font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2;color:var(--ink);}
.w-trust li + li{border-left:1px solid #EFE2D8;}
.w-trust-ico{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,#8A6630,#6F5124);color:#fff;box-shadow:0 10px 22px rgba(138,102,48,0.28);}
.w-trust-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:760px){
  .w-trust{grid-template-columns:1fr;padding:4px 16px;text-align:left;}
  .w-trust li{flex-direction:row;text-align:left;padding:14px 4px;font-size:19px;gap:14px;}
  .w-trust li + li{border-left:0;border-top:1px solid #EFE2D8;}
  .w-trust-ico{width:40px;height:40px;}
  .w-trust-ico svg{width:18px;height:18px;}
}

/* Stopka: czytelniejsze linki do polityki i regulaminu */
.footer-bottom{color:#C9C2B6;font-size:14.5px;}
.footer-bottom nav a{color:#EDE6DA;font-weight:500;text-decoration:underline;text-decoration-color:rgba(201,163,106,0.6);text-underline-offset:4px;}
.footer-bottom nav a:hover{color:#fff;text-decoration-color:#C9A36A;}
.footer-legal{color:#ABA497;}
.footer-tagline{color:#BDB6AA;}

/* Większy awatar w menu, żeby było widać twarz */
.logo-text a::before,.logo-text a:hover::before{width:56px;height:56px;background:var(--accent-tint) url('img/avatar-menu.jpg') center/cover no-repeat;}
@media (max-width:640px){ .logo-text a::before{width:48px;height:48px;} }

/* ============================================================
   OKIENKO „UMÓW ROZMOWĘ”: na komputerze na środku ekranu,
   na telefonie jako panel wysuwany od dołu
   ============================================================ */
html.qc-lock{overflow:hidden;}
.qc.is-open::before{
  content:'';position:fixed;inset:0;z-index:0;
  background:rgba(43,30,26,0.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:qcFade .2s ease;
}
@keyframes qcFade{from{opacity:0;}to{opacity:1;}}
.qc.is-open .qc-fab{display:none;}
.qc.is-open .qc-panel{position:fixed;z-index:1;}
.qc-head{padding-right:12px;}

@media (min-width:761px){
  .qc.is-open .qc-panel{
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(560px,calc(100vw - 48px));
    max-height:calc(100dvh - 48px);
    animation:qcPop .22s ease;
  }
  .qc.is-open[data-typ="rozmowa"] .qc-panel{width:min(880px,calc(100vw - 48px));}
  @keyframes qcPop{from{opacity:0;transform:translate(-50%,calc(-50% + 10px));}to{opacity:1;transform:translate(-50%,-50%);}}
  .qc-head{padding:18px 20px 16px 22px;}
  .qc-head-txt strong{font-size:20px;}
  .qc-tabs{max-width:420px;margin:16px auto 0;}
  .qc-body{padding:18px 28px 24px;}

  /* dwie kolumny: dane po lewej, kalendarz i godziny po prawej */
  .qc[data-typ="rozmowa"] .qc-body{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:32px;
    grid-template-rows:auto 1fr auto auto auto;align-items:start;
  }
  .qc[data-typ="rozmowa"] .qc-f-imie{grid-column:1;grid-row:1;}
  .qc[data-typ="rozmowa"] .qc-pane[data-pane="rozmowa"]{display:contents;}
  .qc[data-typ="rozmowa"] .qc-col-a{grid-column:1;grid-row:2;}
  .qc[data-typ="rozmowa"] .qc-col-b{grid-column:2;grid-row:1 / 6;}
  .qc[data-typ="rozmowa"] .qc-status{grid-column:1;grid-row:3;}
  .qc[data-typ="rozmowa"] .qc-send{grid-column:1;grid-row:4;}
  .qc[data-typ="rozmowa"] .qc-privacy{grid-column:1;grid-row:5;text-align:left;}
  .qc-f-imie .qc-label{margin-top:4px;}
  .qc-col-b > .qc-label:first-child{margin-top:4px;}
  .qc-day{aspect-ratio:auto;width:38px;height:38px;justify-self:center;}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){ .qc.is-open .qc-panel{animation:none;} }

@media (max-width:760px){
  .qc.is-open .qc-panel{
    left:0;right:0;bottom:0;top:auto;width:100%;
    max-height:92dvh;
    border-radius:22px 22px 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    animation:qcSheet .25s ease;
  }
  @keyframes qcSheet{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}
  .qc.is-open .qc-panel::before{
    content:'';display:block;width:44px;height:4px;border-radius:4px;background:#E2D3C6;margin:10px auto 0;
  }
}
/* poprawki: atuty w jednym wierszu, bez podwójnej złotej kreski, zaokrąglone karty oferty */
.w-trust{max-width:1020px;}
@media (min-width:1100px){ .w-trust li{white-space:nowrap;padding-left:22px;padding-right:22px;} }
.page-www .section-head:has(+ .w-intro-box) .rule-title::after{display:none!important;}
.w-offer-item{border-radius:16px;}
.footer-bottom{padding-bottom:88px;}
.footer-grid h4{color:#CDB48C;}

/* ============================================================
   STRONY WWW: hero w układzie strony głównej
   ============================================================ */
.w-hero2 .h-kicker{letter-spacing:.2em;}
.w-hero2 .h-lede{max-width:540px;}
.w-hero-links{display:flex;flex-wrap:wrap;gap:12px 28px;flex-basis:100%;order:4;margin-top:10px;}
.w-hero2 .h-kicker{color:var(--accent);}
.w-hero2 h1{font-size:clamp(44px,5.4vw,74px);}
@media (min-width:1021px){
  .w-hero2 .h-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;}
  .w-hero2 h1 .w-nb{white-space:nowrap;}
}
.w-hero-visual{position:relative;min-height:470px;}
.w-vshot{
  position:absolute;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid #EAD9C8;box-shadow:0 30px 70px rgba(80,55,30,0.18);
}
.w-vshot img{display:block;width:100%;height:auto;}
.w-vshot .pf-browser{border-radius:0;}
.w-vshot-back{width:94%;right:0;top:6%;}
.w-vshot-front{width:64%;left:-4%;bottom:4%;box-shadow:0 34px 80px rgba(60,40,20,0.26);border-color:#E3CDB5;}
/* złoty akcent w tle, jak ramka zdjęcia na stronie głównej */
.w-hero-visual::before{
  content:'';position:absolute;left:18%;top:0;right:-18px;bottom:18%;
  border:1.5px solid rgba(201,163,106,0.55);border-radius:18px;
}
@media (max-width:1020px){
  .w-hero2 .h-hero-grid{gap:48px;}
  .w-hero-visual{min-height:0;aspect-ratio:1.45;max-width:620px;margin:0 auto;width:100%;}
}
@media (max-width:640px){
  .w-hero-links{flex-direction:column;align-items:center;gap:14px;}
  .w-hero-visual::before{right:-6px;bottom:-6px;}
}
/* atuty podstrony: tylko jeden wiersz tekstu, więc wyśrodkowane */
.w-trust2 li{align-items:center;}
.w-trust2 .h-trust-txt strong{font-size:22px;}
@media (min-width:901px){ .w-trust2 .h-trust-txt strong{white-space:nowrap;} }
@media (min-width:901px){
  .w-trust2 ul{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .w-trust2 li{flex-direction:column;justify-content:center;text-align:center;gap:14px;padding:26px 18px 24px;}
  .w-trust2 .h-trust-txt strong{white-space:normal;text-wrap:balance;}
}
@media (max-width:900px){ .w-trust2 .h-trust-txt strong{text-wrap:pretty;} }
/* awatar jako zaokrąglony kwadrat */
/* jeden, wspólny okrągły awatar w całym serwisie */
.logo-text a::before,.logo-text a:hover::before{border-radius:50%;}
.qc-avatar{border-radius:50%;background:var(--accent-tint) url('img/avatar-menu.jpg') center/cover no-repeat;}
/* bez pływającego przycisku w rogu: okienko otwierają przyciski na stronie */
.qc-fab{display:none!important;}
.footer-bottom{padding-bottom:0;}
/* „Umów rozmowę w tej sprawie” w jednym wierszu */
.h-card-btn{padding:12px 14px;font-size:14.5px;gap:8px;}
.h-card-btn span{white-space:nowrap;}
@media (min-width:1021px) and (max-width:1180px){ .h-card-btn{font-size:13.5px;padding:12px 10px;gap:6px;} }
/* bez przycisku w menu: nawigacja do prawej krawędzi */
@media (min-width:901px){ .nav-actions{display:none;} }
/* kalendarz: stała wysokość, podpowiedź nie znika z układu */
.qc-hint.is-off{visibility:hidden;}
.qc-cal-days > span{aspect-ratio:1;}
@media (min-width:761px){ .qc-cal-days > span{aspect-ratio:auto;height:38px;} }

/* Pod przyciskiem „Umów rozmowę w tej sprawie”: link do wiadomości */
.h-card-actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;}
.h-who .h-card-actions{margin-top:auto;align-self:end;}
.h-card-msg{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:2px 0;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--body);
  text-decoration:underline;text-decoration-color:#D9BFA0;text-underline-offset:4px;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.h-card-msg svg{color:var(--accent);flex-shrink:0;}
.h-card-msg:hover{color:var(--accent-deep);text-decoration-color:var(--accent);}
.h-card-msg:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.nb-modal .h-card-actions{margin-top:22px;}
.nb-modal .h-card-actions .nb-modal-cta{margin-top:0;}

/* ============================================================
   HERO: przycisk z podpisem pod nim, link obok przycisku
   ============================================================ */
.h-hero .h-ctas{
  display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;
  column-gap:34px;row-gap:14px;
}
.h-hero .h-ctas > .h-btn{grid-column:1;grid-row:1;order:0;}
.h-hero .h-ctas > .h-link,.h-hero .h-ctas > .w-hero-links{grid-column:2;grid-row:1;order:0;margin:0;}
.h-hero .h-ctas > .h-cta-hint{
  grid-column:1;grid-row:2;justify-self:center;order:0;flex-basis:auto;
  margin:0;font-size:14px;color:var(--body);
}
.w-hero-links{flex-direction:column;align-items:flex-start;gap:10px;flex-basis:auto;}
@media (max-width:640px){
  .h-hero .h-ctas{grid-template-columns:1fr;justify-content:stretch;row-gap:12px;}
  .h-hero .h-ctas > .h-btn{grid-column:1;grid-row:1;justify-content:center;}
  .h-hero .h-ctas > .h-cta-hint{grid-column:1;grid-row:2;}
  .h-hero .h-ctas > .h-link,.h-hero .h-ctas > .w-hero-links{grid-column:1;grid-row:3;justify-self:center;margin-top:10px;}
  .w-hero-links{align-items:center;gap:14px;}
}
@media (min-width:641px){
  .h-hero .h-ctas{column-gap:30px;}
  .h-hero .h-ctas > .h-link,.h-hero .h-ctas > .w-hero-links{padding:6px 0 6px 30px;border-left:1px solid #E3CDB5;}
  .h-hero .h-ctas > .h-link{border-bottom:0;}
  .w-hero-links{gap:6px;}
  .w-hero-links .h-link{padding-top:3px;padding-bottom:3px;}
}
/* O mnie: przycisk z wyśrodkowanym podpisem pod spodem */
.h-cta-stack{display:inline-grid;justify-items:center;row-gap:14px;margin-top:18px;}
.h-cta-stack .h-btn{margin-top:0!important;}
.h-about .h-cta-stack p.h-cta-hint{margin:0!important;font-size:14px!important;line-height:1.4;color:#D9CBBF;}
@media (max-width:640px){ .h-cta-stack{display:grid;width:100%;} .h-cta-stack .h-btn{width:100%;justify-content:center;} }

/* ATUTY: trzy równe kolumny, wszystko wyśrodkowane (strona główna i WWW) */
@media (min-width:901px){
  .h-trust ul{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .h-trust li{flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
    text-align:center!important;gap:14px!important;padding:28px 22px 26px!important;}
  .h-trust-txt{align-items:center;gap:5px;}
  .h-trust-txt strong{font-size:23px;white-space:nowrap;}
  .h-trust-txt small{font-size:14.5px;}
}
@media (min-width:901px) and (max-width:1100px){ .h-trust-txt strong,.w-trust2 .h-trust-txt strong{font-size:20px;white-space:normal;text-wrap:balance;} }
/* bardzo wąskie telefony (320 px): długie napisy przycisków mogą się łamać */
@media (max-width:380px){
  .h-card-btn span{white-space:normal;}
  .h-card-btn{font-size:14px;padding:12px 16px;line-height:1.3;}
  .h-card-msg{font-size:13.5px;text-align:center;}
}