/*
Theme Name: Ponczek Studio
Theme URI: https://ponczek.pl
Author: Ponczek Studio
Author URI: https://ponczek.pl
Description: Motyw blokowy Ponczek Studio. Jasne tło, pomarańcz #EC5E2A, kalkulator zwrotu, panel widoczności w AI, portfolio w pionowych ramkach telefonów. Po aktywacji motyw sam zakłada wszystkie podstrony z gotową treścią.
Version: 1.2.7
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ponczek-studio
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, editor-style, wide-blocks
*/

/* ===== TOKENY ===== */
/* Paleta domyślna: jasne tło, ciemny tekst, ten sam pomarańcz co w wersji czarnej.
   Jedyna różnica: na bieli #EC5E2A ma 3,39:1, więc do CZYTANIA idzie ściemniony
   #C64310 (4,99:1). Do rysowania - szyn, znaczników, przycisków - zostaje pełny
   #EC5E2A, bo tam kontrast tekstu nie obowiązuje. */
:root{
  --paper:#FFFFFF;
  --surface:#F4F4F5;
  --deep:#0B0B0C;
  --ink:#111111;
  --ink-soft:#52525B;
  --ink-faint:#6B6B74;
  --rule:#E4E4E7;
  --accent:#EC5E2A;       /* pelna moc - wszystko, co rysowane: szyny, znaczniki, przyciski */
  --accent-text:#C64310;  /* ten sam pomarancz sciemniony do czytania: 4,99:1 na bieli */
  --accent-soft:#FFF0E9;
  --accent-line:#EC5E2A;
  --on-accent:#0A0A0A;    /* tekst NA pomaranczu: czern ma 5,85:1, biel tylko 3,4:1 */
  --accent-hi:#FFA23C;
  --glow:rgba(236,94,42,.13);
  --glow-2:rgba(99,102,241,.13);
  --signal:#7A5E18;
  --card:#FFFFFF;
  --card-line:#E4E4E7;

  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-solid:rgba(255,255,255,.93);
  --glass-brd:rgba(17,17,17,.1);
  --glass-hi:rgba(255,255,255,.95);
  --glass-sh:rgba(17,17,17,.1);

  --grid-ink:rgba(17,17,17,.055);
  --grid-ink-2:rgba(17,17,17,.03);
  --grain-op:.4;
  /* ramka telefonu: ciemna obudowa, zeby zrzut czytal sie jak urzadzenie, a nie jak obrazek */
  --fon-bg:#17171A; --fon-brd:#0E0E10; --fon-slot:rgba(255,255,255,.34);

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --measure:64ch;
  --s1:.5rem; --s2:.875rem; --s3:1.5rem; --s4:2.25rem; --s5:3.5rem; --s6:5.25rem;
  --wrap:72rem;
  --hdr-h:5.1rem;   /* wysokosc paska nawigacji - hero podchodzi pod niego */
}

/* czern + pomarancz - ta sama para kolorow, tylko odwrocona */
:root[data-palette="czern"]{
  --fon-bg:#242422; --fon-brd:#3A3936; --fon-slot:rgba(255,255,255,.3);
  --paper:#0A0A0A; --surface:#141413; --deep:#000000;
  --ink:#F5F4F2; --ink-soft:#B3AFA9; --ink-faint:#8A857E; --rule:#2A2926;
  --accent:#EC5E2A; --accent-text:#EC5E2A; --accent-soft:#1E120C; --accent-line:#EC5E2A;
  --on-accent:#0A0A0A; --accent-hi:#FFA23C;
  --glow:rgba(236,94,42,.38); --glow-2:rgba(99,102,241,.22);
  --signal:#D9B45E; --card:#121211; --card-line:#272521;
  --glass-bg:rgba(10,10,10,.6); --glass-bg-solid:rgba(10,10,10,.93);
  --glass-brd:rgba(255,255,255,.12); --glass-hi:rgba(255,255,255,.07); --glass-sh:rgba(0,0,0,.6);
  --grid-ink:rgba(245,244,242,.06); --grid-ink-2:rgba(245,244,242,.03); --grain-op:.3;
}

/* ===== SZEŚĆ KIERUNKÓW KOLORYSTYCZNYCH =====
   Paleta domyślna (bez atrybutu) to czerń + pomarańcz. Poniżej te same sześć
   kierunków, które oglądaliśmy wcześniej - każdy z pełnym kompletem tokenów,
   żeby przełącznik zmieniał całą stronę, nie samo tło. Pomarańcz #EC5E2A
   zostaje w każdym; na jasnych tłach drobny tekst bierze ciemniejszy #BE4318,
   bo sam #EC5E2A ma na bieli tylko 3,1:1. */

/* biel + czerń - zero tonów, cały kontrast na typografii */
:root[data-palette="czern-jasna"]{
  --paper:#FFFFFF; --surface:#F3F5F8; --deep:#0E0F12; --ink:#0F1115; --ink-soft:#464B55;
  --ink-faint:#6C7280; --rule:#E5E8EE; --accent:#EC5E2A; --accent-text:#BE4318;
  --accent-soft:#FDEDE6; --accent-line:#EC5E2A; --on-accent:#0A0A0A; --glow:rgba(236,94,42,.10); --glow-2:rgba(79,70,229,.20); --on-accent:#0A0A0A; --on-accent:#0A0A0A; --on-accent:#0A0A0A; --signal:#7A5E18;
  --card:#FFFFFF; --card-line:#E5E8EE;
  --glass-bg:rgba(255,255,255,.65); --glass-bg-solid:rgba(255,255,255,.93);
  --glass-brd:rgba(15,17,21,.1); --glass-hi:rgba(255,255,255,.95); --glass-sh:rgba(15,17,21,.09);
  --grid-ink:rgba(15,17,21,.05); --grid-ink-2:rgba(15,17,21,.03); --grain-op:.4;
}

/* granat - chłodny i techniczny; granat niesie powagę, pomarańcz robi za sygnał */
:root[data-palette="granat"]{
  --paper:#F7F9FC; --surface:#E9EDF5; --deep:#16243F; --ink:#16243F; --ink-soft:#4A566E;
  --ink-faint:#78829A; --rule:#D6DDEA; --accent:#EC5E2A; --accent-text:#BE4318;
  --accent-soft:#FDEDE6; --accent-line:#EC5E2A; --on-accent:#0A0A0A; --glow:rgba(236,94,42,.10); --glow-2:rgba(79,70,229,.20); --on-accent:#0A0A0A; --on-accent:#0A0A0A; --on-accent:#0A0A0A; --signal:#1B3FBF;
  --card:#FFFFFF; --card-line:#DDE3EE;
  --glass-bg:rgba(247,249,252,.65); --glass-bg-solid:rgba(247,249,252,.93);
  --glass-brd:rgba(22,36,63,.1); --glass-hi:rgba(255,255,255,.95); --glass-sh:rgba(22,36,63,.1);
  --grid-ink:rgba(22,36,63,.05); --grid-ink-2:rgba(22,36,63,.03); --grain-op:.5;
}

/* mgła - biel z granatowym tekstem, lżejsza od granatu */
:root[data-palette="mgla"]{
  --paper:#FFFFFF; --surface:#F2F5FA; --deep:#1B2A44; --ink:#1B2A44; --ink-soft:#4C5A72;
  --ink-faint:#7C8799; --rule:#E2E8F1; --accent:#EC5E2A; --accent-text:#BE4318;
  --accent-soft:#FDEDE6; --accent-line:#EC5E2A; --on-accent:#0A0A0A; --glow:rgba(236,94,42,.10); --glow-2:rgba(79,70,229,.20); --on-accent:#0A0A0A; --on-accent:#0A0A0A; --on-accent:#0A0A0A; --signal:#1B3FBF;
  --card:#FFFFFF; --card-line:#E6EBF2;
  --glass-bg:rgba(255,255,255,.65); --glass-bg-solid:rgba(255,255,255,.92);
  --glass-brd:rgba(27,42,68,.09); --glass-hi:rgba(255,255,255,.95); --glass-sh:rgba(27,42,68,.09);
  --grid-ink:rgba(27,42,68,.05); --grid-ink-2:rgba(27,42,68,.03); --grain-op:.5;
}

/* butelkowa - jedyny kierunek, który nie jest ani szary, ani niebieski */
:root[data-palette="butelka"]{
  --paper:#F6FAF7; --surface:#E6EDE7; --deep:#11302A; --ink:#11302A; --ink-soft:#3F5A52;
  --ink-faint:#76897F; --rule:#D4E0D7; --accent:#EC5E2A; --accent-text:#B8450F;
  --accent-soft:#FBEDE4; --accent-line:#EC5E2A; --on-accent:#0A0A0A; --glow:rgba(236,94,42,.10); --glow-2:rgba(79,70,229,.20); --on-accent:#0A0A0A; --on-accent:#0A0A0A; --on-accent:#0A0A0A; --signal:#11302A;
  --card:#FFFFFF; --card-line:#DCE6DE;
  --glass-bg:rgba(246,250,247,.65); --glass-bg-solid:rgba(246,250,247,.93);
  --glass-brd:rgba(17,48,42,.1); --glass-hi:rgba(255,255,255,.95); --glass-sh:rgba(17,48,42,.1);
  --grid-ink:rgba(17,48,42,.05); --grid-ink-2:rgba(17,48,42,.03); --grain-op:.5;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}
.col{max-width:var(--measure)}

/* Naglowki na grubym bezszeryfowym, ciasno. Szeryf zostaje w cytatach i w makiecie -
   tam ma robic za "cudzy tekst". Wiekszy skok skali miedzy naglowkiem a akapitem
   to najtanszy sposob na energie: mniej rownych szarosci, wiecej hierarchii. */
h1,h2,h3{margin:0;font-family:var(--body);font-weight:700;letter-spacing:-.032em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.15rem);line-height:.99}
h2{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.08}
h3{font-family:var(--body);font-weight:600;font-size:1.05rem;letter-spacing:0;line-height:1.4}
p{margin:0;max-width:var(--measure)}
a{color:var(--accent-text);text-underline-offset:3px}
/* Monospace w wersalikach z szeroka swiatla to dzis podpis kazdej strony
   zrobionej przez AI - widac go w co drugim szablonie. Dlatego u nas mono
   robi tylko to, do czego sluzy: ustawia cyfry w kolumnie. Etykiety sekcji
   ida krojem tekstowym, zdaniowo, z pomaranczowa szyna z lewej. */
.eyebrow{font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.005em;
  text-transform:none;color:var(--accent-text);margin:0 0 var(--s2)}
.lede{font-size:1.14rem;line-height:1.62;color:var(--ink-soft);max-width:56ch}
/* Naglowki mialy zerowy margines, wiec akapit wprowadzajacy przyklejal sie
   do ostatniej linii tytulu. Odstep ustawiamy raz, globalnie - nie inline. */
h1 + .lede,h2 + .lede,h1 + p,h2 + p,h3 + p{margin-top:var(--s3)}
.eyebrow + h1,.eyebrow + h2{margin-top:.15rem}
section{padding:var(--s6) 0;scroll-margin-top:104px}
.alt{background:var(--surface)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ===== NAGŁÓWEK: LIQUID GLASS ===== */
.hdr{position:sticky;top:0;z-index:50;padding:var(--s2) var(--s3);transition:padding .28s cubic-bezier(.4,0,.2,1)}
.hdr.is-stuck{padding-top:.5rem;padding-bottom:.5rem}
.bar{position:relative;max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:var(--s3);
  padding:.55rem .6rem .55rem 1.5rem;border:1px solid var(--glass-brd);border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  box-shadow:0 1px 0 var(--glass-hi) inset, 0 -1px 0 rgba(255,255,255,.25) inset,
             0 8px 26px -12px var(--glass-sh), 0 1px 3px -1px var(--glass-sh);
  transition:background .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease,
             max-width .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1)}
/* blik po gornej krawedzi - to od niego szklo wyglada na wypukle, a nie na mleczny prostokat */
.bar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-hi) 0%,transparent 42%);opacity:.9}
/* po przewinieciu pasek lekko sie sciaga i gestnieje - jak szklana pigulka,
   ktora odkleila sie od gory strony */
.hdr.is-stuck .bar{background:var(--glass-bg-solid);max-width:calc(var(--wrap) - 4rem);
  box-shadow:0 1px 0 var(--glass-hi) inset, 0 -1px 0 rgba(255,255,255,.25) inset,
             0 16px 38px -18px var(--glass-sh), 0 2px 6px -2px var(--glass-sh)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar{background:var(--glass-bg-solid)}}
.logo{font-family:var(--body);font-size:1.02rem;letter-spacing:.055em;text-decoration:none;
  color:var(--ink);white-space:nowrap;flex:none}
.logo b{font-weight:700}.logo span{font-weight:400}
.nav{display:flex;gap:var(--s3);margin-left:auto}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;padding:.35rem .2rem;border-radius:4px}
.nav a:hover{color:var(--ink)}
/* Glowne CTA to jedyna pelna plama koloru na stronie - dlatego wiadomo, gdzie klikac. */
.pill{flex:none;display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--on-accent);
  text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:-.005em;padding:.75rem 1.3rem;border-radius:999px;
  border:1px solid var(--accent);box-shadow:0 6px 18px -10px var(--accent);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease,filter .16s ease}
.pill:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 12px 26px -12px var(--accent)}
.pill:active{transform:translateY(0)}
.burger{flex:none;display:none;margin-left:auto;background:none;border:1px solid var(--glass-brd);
  border-radius:999px;width:2.6rem;height:2.6rem;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.mnav{display:none}
@media(max-width:880px){
  .nav{display:none}.burger{display:inline-flex}.pill.in-bar{display:none}
  .mnav{display:block;max-width:var(--wrap);margin:.5rem auto 0;border:1px solid var(--glass-brd);
    border-radius:22px;padding:var(--s2);background:var(--glass-bg-solid);
    -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    box-shadow:0 1px 0 var(--glass-hi) inset,0 14px 34px -16px var(--glass-sh)}
  .mnav a{display:block;padding:.6rem .75rem;color:var(--ink);text-decoration:none;border-radius:10px}
  .mnav .pill{width:100%;justify-content:center;margin-top:var(--s1)}
}

/* ===== HERO ===== */
.hero{padding:var(--s6) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}
.hero h1{margin-bottom:var(--s3)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s4)}
.btn2{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent-text);font-weight:600;
  text-decoration:none;padding:.75rem 1.2rem;border:1.5px solid var(--accent-line);border-radius:999px;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),background .16s ease}
.btn2:hover{transform:translateY(-2px);background:var(--accent-soft)}
.micro{font-size:.87rem;color:var(--ink-faint);margin-top:var(--s2);max-width:50ch}

/* karta z liczbą - kafel z pomarańczową szyną, nie ciemny prostokąt */
.card{background:var(--surface);color:var(--ink);border:1px solid var(--card-line);
  border-left:4px solid var(--accent);border-radius:14px;padding:var(--s4)}
.card .eyebrow{color:var(--accent);margin-bottom:var(--s3)}
.card .big{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(2.3rem,5.2vw,3.2rem);line-height:1.02;display:block;color:var(--ink)}
.card .cap{margin-top:.5rem;font-size:.93rem;color:var(--ink-soft);max-width:34ch}
.card hr{border:0;border-top:1px solid var(--card-line);margin:var(--s3) 0}
.card .mini{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;
  color:var(--ink-soft);padding:.4rem 0}
.card .mini b{font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.card a{color:var(--accent);font-size:.9rem;display:inline-block;margin-top:var(--s3)}
.card .kv{display:grid;grid-template-columns:auto 1fr}

.proofbar{display:flex;flex-wrap:wrap;gap:.35rem var(--s3);margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-soft)}
.proofbar b{font-family:var(--mono);font-weight:500;color:var(--ink)}

/* ===== BLOKI ===== */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));gap:var(--s4) var(--s3)}
.item h3{margin-bottom:.35rem}
.item p{font-size:.95rem;color:var(--ink-soft)}
.item .num{font-family:var(--body);font-size:.82rem;font-weight:600;color:var(--ink-faint);letter-spacing:.005em;text-transform:none;
  display:block;margin-bottom:.5rem}

.quote{margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--rule);max-width:58ch}
.quote blockquote{margin:0;font-family:var(--display);font-size:1.12rem;line-height:1.5}
.quote figcaption{margin-top:.65rem;font-size:.86rem;color:var(--ink-faint)}
.stars{color:var(--signal);letter-spacing:.08em;font-size:.78rem}

.steps{counter-reset:s;margin-top:var(--s4)}
.step{display:grid;grid-template-columns:2.5rem 1fr;gap:0 var(--s3);padding:var(--s3) 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:.84rem;
  color:var(--ink-faint);padding-top:.15rem}
.step p{font-size:.95rem;color:var(--ink-soft);margin-top:.25rem}

.tiers{margin-top:var(--s4);border-top:1px solid var(--rule)}
.tier{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);align-items:start;
  padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.tier p{font-size:.94rem;color:var(--ink-soft)}
.price{font-family:var(--mono);font-size:1.16rem;font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right}
.price small{display:block;font-family:var(--body);font-size:.71rem;color:var(--ink-faint);font-weight:400;margin-top:.15rem}
.tier-hi{background:var(--accent-soft);border-radius:14px;border-bottom-color:transparent;
  margin-inline:calc(var(--s3)*-1);padding-inline:var(--s3)}
.badge{display:inline-block;font-family:var(--body);font-weight:600;font-size:.75rem;letter-spacing:.005em;text-transform:none;
  color:var(--accent-text);border:1px solid var(--accent);border-radius:4px;padding:.12rem .4rem;margin-bottom:.4rem}

.tbl-wrap{overflow-x:auto;margin-top:var(--s4);border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:30rem}
th,td{text-align:left;padding:.78rem 1rem;border-bottom:1px solid var(--rule)}
th{font-family:var(--body);font-size:.73rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-faint);font-weight:600;background:var(--surface)}
td:last-child,th:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:0;font-weight:600}

.guards{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.guards li{display:flex;gap:.7rem;max-width:60ch;color:var(--ink-soft)}
.guards svg{flex:none;margin-top:.45rem;color:var(--accent)}
.guards b{color:var(--ink)}

details{border-bottom:1px solid var(--rule);padding:var(--s2) 0}
details:first-of-type{border-top:1px solid var(--rule)}
summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none;display:flex;
  justify-content:space-between;gap:var(--s3);align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--ink-faint);flex:none}
details[open] summary::after{content:"–"}
details p{margin-top:.7rem;color:var(--ink-soft);font-size:.95rem}

/* ===== MECHANIZM: diagram ===== */
.mech{margin-top:var(--s5)}
.mech-name{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--body);font-weight:600;font-size:.85rem;
  letter-spacing:.005em;text-transform:none;color:var(--accent-text);border:1px solid var(--accent);
  border-radius:5px;padding:.25rem .6rem;margin-bottom:var(--s3)}
.diagram{width:100%;height:auto;max-width:56rem;margin-top:var(--s3);overflow:visible}
.diagram .box{fill:var(--surface);stroke:var(--rule)}
.diagram .box-acc{fill:var(--accent-soft);stroke:var(--accent)}
.diagram .box-ink{fill:var(--deep);stroke:var(--deep)}
.diagram .lbl{fill:var(--ink);font-family:var(--body);font-size:12.5px;font-weight:600}
.diagram .lbl-s{fill:var(--ink-soft);font-family:var(--body);font-size:11px}
.diagram .num{fill:var(--ink);font-family:var(--mono);font-size:13px;font-weight:500}
.diagram .num-acc{fill:var(--accent);font-family:var(--mono);font-size:15px;font-weight:500}
.diagram .num-rev{fill:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:500}
.diagram .lbl-rev{fill:var(--ink-soft);font-family:var(--body);font-size:11px}
.diagram .arr{stroke:var(--ink-faint);fill:none;stroke-width:1.4}
.diagram .arrhead{fill:var(--ink-faint)}
.mech-note{margin-top:var(--s3);font-size:.9rem;color:var(--ink-soft);max-width:58ch}

/* ===== KALKULATOR ===== */
.kalk{display:grid;grid-template-columns:minmax(0,18.5rem) minmax(0,1fr);gap:1px;margin-top:var(--s4);
  background:var(--rule);border:1px solid var(--rule);border-radius:16px}
@media(max-width:780px){.kalk{grid-template-columns:1fr}}
.kalk-in{background:var(--card);padding:var(--s3);border-radius:15px 0 0 15px}
.kalk-out{border-radius:0 15px 15px 0}
@media(max-width:780px){
  .kalk-in{border-radius:15px 15px 0 0}
  .kalk-out{border-radius:0 0 15px 15px}
}
.kalk-in h3{font-size:.9rem;font-weight:600;letter-spacing:.005em;text-transform:none;
  color:var(--ink-faint);margin-bottom:var(--s3)}
.f{display:block;margin-bottom:1.05rem}
.f>span{display:block;font-size:.87rem;color:var(--ink-soft);margin-bottom:.35rem}
.f>span b{font-family:var(--mono);color:var(--ink);font-weight:500}
.f input[type=number],.f select,.frm input,.frm select,.frm textarea{width:100%;font:inherit;font-size:.94rem;
  padding:.55rem .7rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink)}
.f input[type=number]{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.f input[type=range]{width:100%;margin:.35rem 0 0;accent-color:var(--accent)}
.kalk-out{background:var(--card);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.big-o{border-left:3px solid var(--accent);padding-left:1.1rem}
.big-o .n{display:block;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(1.65rem,4.4vw,2.3rem);line-height:1.08}
.big-o p{margin-top:.3rem;font-size:.89rem;color:var(--ink-soft)}
.rows{border-top:1px solid var(--rule)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.62rem 0;
  border-bottom:1px solid var(--rule);font-size:.92rem}
.row span{color:var(--ink-soft)}
.row b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.floor{background:var(--accent-soft);border-radius:12px;padding:1rem 1.15rem}
.floor .eyebrow{color:var(--accent-text);margin-bottom:.35rem}
.floor .n{font-family:var(--mono);font-size:1.38rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.floor p{margin-top:.35rem;font-size:.86rem;color:var(--ink-soft)}
.fair{font-size:.86rem;color:var(--ink-soft);padding-left:1rem;border-left:2px solid var(--rule);max-width:none}
.fair b{color:var(--ink);font-family:var(--mono);font-weight:500}
.disc{margin-top:var(--s3);font-size:.85rem;color:var(--ink-faint);max-width:60ch}

/* ===== FORMULARZ ===== */
.frm{margin-top:var(--s4);max-width:34rem;display:flex;flex-direction:column;gap:var(--s2)}
.frm label{display:block}
.frm label>span{display:block;font-size:.88rem;color:var(--ink-soft);margin-bottom:.3rem}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media(max-width:560px){.frm .two{grid-template-columns:1fr}}
.frm button{align-self:flex-start;margin-top:var(--s1);cursor:pointer}
.frm textarea{min-height:5rem;resize:vertical}

footer{padding:var(--s5) 0 var(--s6);border-top:1px solid var(--rule);font-size:.91rem;color:var(--ink-soft)}
.fgrid{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);justify-content:space-between}
footer a{color:var(--ink-soft)}
.fcol{display:flex;flex-direction:column;gap:.35rem}

/* ===== DODATKI DLA PODSTRON ===== */
.crumb{font-size:.84rem;color:var(--ink-faint);margin-bottom:var(--s2)}
.crumb a{color:var(--ink-faint)}
.page-head{padding:var(--s5) 0 var(--s3)}
.page-head h1{margin:.2rem 0 var(--s2)}
.page-head .lede{max-width:52ch}

/* portfolio */
.pgroup{margin-top:var(--s5)}
.pgroup>h2{font-size:1.15rem;margin:0 0 .35rem}
.pgroup>.gnote{color:var(--ink-faint);font-size:.9rem;margin:0 0 var(--s3);max-width:56ch}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--s3)}
.case{border:1px solid var(--card-line);border-radius:12px;padding:var(--s3);background:var(--card);display:flex;flex-direction:column;gap:.55rem}
.case h3{margin:0;font-size:1.02rem}
.case .dom{font-family:var(--mono);font-size:.78rem;color:var(--ink-faint)}
.case dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .7rem;font-size:.89rem}
.case dt{color:var(--ink-faint);white-space:nowrap}
.case dd{margin:0}
.case .wynik{margin-top:.2rem;padding-top:.55rem;border-top:1px dashed var(--rule);font-size:.89rem}
.case .wynik b{color:var(--accent-text)}
.case .wynik .stat .l{max-width:none}
.todo{background:var(--accent-soft);color:var(--accent-text);font-family:var(--body);font-weight:600;font-size:.78rem;padding:.15em .45em;border-radius:3px}

/* oferta */
.pak{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s3);margin-top:var(--s3)}
.pk{border:1px solid var(--rule);border-radius:12px;padding:var(--s3);display:flex;flex-direction:column;gap:.5rem}
.pk.wyroz{border-color:var(--accent-line);background:var(--accent-soft)}
.pk h3{margin:0;font-family:var(--body);font-size:.85rem;font-weight:600;letter-spacing:.005em;text-transform:none;color:var(--ink-faint)}
.pk p.co{margin:0;font-weight:600}
.pk ul{margin:.3rem 0 0;padding-left:1.05em;font-size:.9rem;color:var(--ink-soft)}
.pk ul li{margin:.2em 0}
.niema{margin-top:var(--s5);border-left:3px solid var(--rule);padding-left:var(--s3)}
.sla{width:100%;border-collapse:collapse;margin-top:var(--s2);font-size:.92rem}
.sla th,.sla td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top}
.sla th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
.sla td.n{font-family:var(--mono);white-space:nowrap}

/* landing audytu */
body.lp{background:var(--paper)}
.lp .lpbar{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.lp .lpbar .logo{font-size:1rem}
.lp-hero{padding:var(--s5) 0 var(--s4)}
.lp-hero h1{max-width:19ch}
.lp-hero .lede{max-width:50ch;font-size:1.06rem}
.lp-co{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s3);margin:var(--s4) 0}
.lp-co .it{border:1px solid var(--rule);border-radius:12px;padding:var(--s3)}
.lp-co .it b{display:block;margin-bottom:.3rem}
.lp-co .it p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.limit{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:500;font-size:.88rem;color:var(--accent-text);background:var(--accent-soft);padding:.4em .7em;border-radius:6px}
.ps{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);color:var(--ink-soft);max-width:58ch}

/* kontakt */
.kgrid{display:grid;grid-template-columns:1.3fr .9fr;gap:var(--s5);align-items:start}
@media(max-width:820px){.kgrid{grid-template-columns:1fr}}
.kbox{border:1px solid var(--rule);border-radius:12px;padding:var(--s3);display:flex;flex-direction:column;gap:.5rem}
.kbox a{font-weight:600}

/* karta w hero — lista definicyjna w dwóch kolumnach */
.card .kv{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:var(--s2) 0 var(--s3)}
.card .kv dt{font-family:var(--body);font-size:.84rem;font-weight:500;letter-spacing:.005em;text-transform:none;color:var(--ink-faint);white-space:nowrap;padding-top:.15rem}
.card .kv dd{margin:0;font-size:.93rem}
.lp-hero h1{margin-bottom:var(--s3)}
.lp-hero .limit{margin-top:var(--s3)}
.lp-co+h2{margin-top:var(--s5)}

/* sekcja dwukolumnowa — nagłówek po lewej, treść po prawej */
.split{display:grid;grid-template-columns:minmax(16rem,23rem) 1fr;gap:var(--s5);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--s3)}}
.split .lede{margin-top:var(--s2)}
.split>div>h2{margin-top:.2rem}

/* miniatury realizacji */
.case .shot{display:block;width:100%;aspect-ratio:16/10;border-radius:8px;border:1px solid var(--rule);
  background:var(--surface);object-fit:cover;object-position:top center;margin-bottom:.2rem}
.case .shot-ph{display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);padding:1rem;line-height:1.4}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:.95rem 2rem .95rem 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.25rem;width:.5rem;height:.5rem;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq details p{margin:0 0 1rem;color:var(--ink-soft);max-width:62ch}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ===== KAFLE Z LICZBAMI ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--s3);margin:var(--s4) 0}
.stat{border-left:4px solid var(--accent-line);padding:.2rem 0 .2rem 1.05rem}
.stat .n{display:block;font-family:var(--mono);font-size:clamp(1.8rem,4.2vw,2.6rem);font-weight:500;
  line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums}
.stat .l{display:block;margin-top:.35rem;font-size:.87rem;color:var(--ink-soft);max-width:26ch}
.stat.ink .n{color:var(--ink)}

/* pasek dowodu pod formularzami */
.proof{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);padding:var(--s3) 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin:var(--s4) 0}
.proof div{display:flex;flex-direction:column;gap:.15rem}
.proof b{font-family:var(--mono);font-size:1.05rem;color:var(--accent-text)}
.proof span{font-size:.82rem;color:var(--ink-faint)}

/* CTA po kalkulatorze */
.after-calc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4);
  padding:var(--s3);background:var(--accent-soft);border-radius:12px}
.after-calc p{margin:0;max-width:46ch;font-weight:600}

/* diagram mechanizmu */
.mech-fig{margin:var(--s4) 0 0;overflow-x:auto}
.mech-fig svg{display:block;min-width:44rem;width:100%;height:auto}
.mech-fig figcaption{margin-top:var(--s2);font-size:.84rem;color:var(--ink-faint)}

/* pasek dodatkowych rynków w portfolio */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s3)}
.strip figure{margin:0}
.strip img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;
  border-radius:8px;border:1px solid var(--rule)}
.strip figcaption{font-family:var(--body);font-size:.84rem;font-weight:500;letter-spacing:.005em;
  color:var(--ink-faint);margin-top:.4rem}

/* ===== PODPOWIEDZI W KALKULATORZE ===== */
/* To był flex z zawijaniem, więc każdy kawałek zdania stawał się osobnym
   elementem i łamał się w przypadkowych miejscach. Zwykły akapit, a znaczek "?"
   trzyma się sąsiednich słów twardymi spacjami. */
.kalk-tip-info{margin-top:var(--s3);font-size:.86rem;color:var(--ink-faint);line-height:1.7}
.kalk-tip-info.drugi{margin-top:.35rem}
.kalk-tip-info .hint{vertical-align:-.18em}
.f-lbl{position:relative}
.kalk-in .f-lbl{display:flex;align-items:center;font-size:.87rem;color:var(--ink-soft);margin-bottom:.35rem}
.kalk-in .f-lbl>label{min-width:0;flex:0 1 auto}
.kalk-in .f-lbl>button.hint{flex:none}
.kalk-in .f-lbl label{cursor:pointer}
.kalk-in .f-lbl>b{font-family:var(--mono);color:var(--ink);font-weight:500}

button.hint,span.hint{display:inline-flex;align-items:center;justify-content:center;
  width:1.05rem;height:1.05rem;margin-left:.3rem;vertical-align:middle;
  border:1px solid var(--accent-line,var(--rule));border-radius:50%;background:transparent;
  color:var(--accent-text);font:500 .66rem/1 var(--mono,monospace);cursor:help;padding:0;
  transition:background .15s,color .15s}
button.hint:hover,button.hint[aria-expanded="true"]{background:var(--accent);color:var(--paper);
  border-color:var(--accent)}
button.hint:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tip{position:absolute;top:calc(100% + .45rem);left:0;z-index:40;
  width:min(23rem,calc(100vw - 2.5rem));
  background:var(--card);color:var(--ink);border:1px solid var(--accent);border-radius:10px;padding:.75rem .9rem;
  font-size:.83rem;line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none;
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transform:translateY(-3px);pointer-events:none;
  transition:opacity .16s,transform .16s,visibility .16s}
.tip b,.kalk-in .f-lbl .tip b{color:var(--accent);font-weight:600;font-family:inherit}
.tip i{font-style:italic}
.kalk-out .tip{left:auto;right:0}
.f-lbl:hover>.tip,.f-lbl:focus-within>.tip,.tip[data-open]{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.f-lbl:hover>.tip{transition-delay:.18s}
/* na wąskim ekranie podpowiedź siada na dole ekranu — nigdy nie wystaje poza krawędź */
@media(max-width:780px){
  .tip,.kalk-out .tip{position:fixed;top:auto;bottom:.85rem;left:.85rem;right:.85rem;
    width:auto;transform:translateY(6px);font-size:.87rem;padding:.9rem 1rem}
  .f-lbl:hover>.tip{opacity:0;visibility:hidden;pointer-events:none}
  .tip[data-open]{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.tip{transition:none}}

/* na telefonie zrzut jest mocniej wykadrowany — inaczej wszystko na nim jest nieczytelne */
@media(max-width:820px){
  .case .shot{aspect-ratio:4/3;object-position:left top}
  .strip img{aspect-ratio:4/3;object-position:left top}
}

/* ===== GALERIA POZOSTAŁYCH REALIZACJI ===== */
.cases-3{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.gal-lbl{font-family:var(--body);font-size:.88rem;font-weight:600;letter-spacing:.005em;color:var(--accent-text);text-transform:none;
  color:var(--ink-faint);margin:var(--s4) 0 var(--s2);padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);max-width:none}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:var(--s3)}
.gal figure{margin:0}
.gal img.g{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;
  border-radius:10px;border:1px solid var(--rule);background:var(--surface)}
.gal figcaption{margin-top:.55rem;font-size:.85rem;line-height:1.45;color:var(--ink-faint)}
.gal figcaption b{display:block;color:var(--ink);font-weight:600;font-size:.92rem;margin-bottom:.15rem}
@media(max-width:820px){
  .gal img.g{aspect-ratio:4/3;object-position:left top}
}
@media(max-width:600px){
  .gal{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:var(--s2)}
  .gal figcaption{font-size:.78rem}
}
.gal-note{font-size:.88rem;color:var(--ink-faint);max-width:58ch;margin:0 0 var(--s3)}
.gal-sm{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:var(--s2)}
.gal-sm figcaption{margin-top:.4rem}
.gal-sm figcaption b{font-size:.82rem;margin:0}
@media(max-width:600px){.gal-sm{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}}

/* ===== ZESPÓŁ ===== */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:var(--s3);
  margin-top:var(--s4)}
.crew>div{border-top:2px solid var(--accent);padding-top:.85rem;display:flex;flex-direction:column;gap:.3rem}
.crew .num{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--accent-text)}
.crew b{font-size:1rem;font-weight:600}
.crew span:last-child{font-size:.88rem;color:var(--ink-soft);line-height:1.5}

/* ===== FAKTURA TŁA =====
   Trzy warstwy, żadnego gradientu kolorystycznego:
   1) ziarno papieru na całej stronie,
   2) siatka milimetrowa w sekcjach .alt — nawiązanie do rachunku,
   3) delikatna kratka na ciemnych blokach, żeby nie były płaskie. */
html{background:var(--paper)}
body{position:relative}
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat}

/* kalkulator: płaski odcień i włosowe linie, bez kratki */
#kalkulator,#kalkulator-sklep{background-color:var(--surface);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* linia oddzielająca sekcje — cienki włos zamiast pustki */
section + section:not(.alt){border-top:1px solid var(--rule)}
.alt + section:not(.alt){border-top:0}

/* ciemne bloki dostają własną kratkę */
.floor{position:relative;overflow:hidden}



/* hero na własnym planie, płaski odcień */
/* Hero podchodzi pod nagłówek (ujemny margines + taki sam padding), więc pasek
   nawigacji plywa na tym samym tle i tej samej poswiacie, zamiast stac na bialym pasku. */
.hero{background-color:var(--surface);
  border-bottom:1px solid var(--rule);max-width:none;padding-left:var(--s3);padding-right:var(--s3);
  margin-top:calc(-1 * var(--hdr-h));padding-top:calc(var(--s6) + var(--hdr-h))}
.hero>.hero-grid{max-width:var(--wrap);margin:0 auto}
.hero>.proofbar{max-width:var(--wrap);margin-left:auto;margin-right:auto}

/* pionowa oś przy nagłówkach sekcji — porządkuje lewe wyrównanie zamiast go ukrywać */
@media(min-width:1000px){
  section>.wrap>.eyebrow,section>.wrap>.split>div>.eyebrow,.page-head>.eyebrow{position:relative}
  section>.wrap>.eyebrow::before,.page-head>.eyebrow::before{
    content:"";position:absolute;left:-1.1rem;top:.15em;bottom:.15em;width:2px;background:var(--accent)}
}

/* ===== STRONA TREŚCI ===== */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s3);
  margin-top:var(--s4)}
.c3{border:1px solid var(--card-line);border-radius:12px;padding:var(--s3);background:var(--card);
  display:flex;flex-direction:column;gap:.45rem}
.c3 .num{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--accent-text)}
.c3 b{font-size:1rem;line-height:1.35}
.c3 span:last-child{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

.kroki{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s3);
  margin-top:var(--s4)}
.krok{border-top:2px solid var(--accent);padding-top:.85rem;display:flex;flex-direction:column;gap:.3rem}
.krok .num{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--accent-text)}
.krok b{font-size:1rem}
.krok span:last-child{font-size:.89rem;color:var(--ink-soft);line-height:1.5}

/* tabela funkcji sekcji */
.ftab{margin-top:var(--s4);border:1px solid var(--card-line);border-radius:12px;overflow:hidden;
  background:var(--card)}
.fr{display:grid;grid-template-columns:minmax(7rem,1fr) minmax(9rem,1.1fr) minmax(12rem,1.7fr);
  gap:var(--s3);padding:.8rem var(--s3);border-bottom:1px solid var(--rule);font-size:.92rem}
.fr:last-child{border-bottom:0}
.fr span:first-child{font-weight:600}
.fr span:nth-child(2){color:var(--ink-soft);font-style:italic}
.fr span:last-child{color:var(--ink-soft)}
.fr-h{background:var(--surface);font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.005em;
  text-transform:none;color:var(--ink-faint)}
.fr-h span{font-weight:500!important;font-style:normal!important;color:var(--ink-faint)!important}
@media(max-width:720px){
  .fr{grid-template-columns:1fr;gap:.25rem;padding:.9rem var(--s3)}
  .fr-h{display:none}
  .fr span:nth-child(2)::before{content:"Pytanie: ";font-style:normal;color:var(--ink-faint)}
  .fr span:last-child::before{content:"Zadanie: ";color:var(--ink-faint)}
}

/* czego nie robimy — pozycja na liście gwarancji */
.guards li.li-no{color:var(--ink-soft)}
.guards li.li-no::before{content:"—";font-family:var(--mono);color:var(--ink-faint);
  margin-right:.15rem}

/* co w cenie / co osobno */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s3);
  margin-top:var(--s4)}
.stack .lbl{font-family:var(--body);font-size:.85rem;font-weight:600;letter-spacing:.005em;text-transform:none;
  margin-bottom:.8rem}
.stack .in{border:1px solid var(--accent-line);border-radius:12px;padding:var(--s3);
  background:var(--accent-soft)}
.stack .in .lbl{color:var(--accent-text)}
.stack .out{border:1px solid var(--card-line);border-radius:12px;padding:var(--s3);background:var(--card)}
.stack .out .lbl{color:var(--ink-faint)}
.stack ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem;
  font-size:.92rem;line-height:1.45}
.stack .out ul{color:var(--ink-soft)}

/* ===== ROZBIÓR STRONY ===== */
.td-fig{margin:var(--s4) 0 0;max-width:62rem}
.td{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:14px}
.td-fig figcaption{margin-top:.8rem;font-size:.88rem;color:var(--ink-faint);max-width:58ch}



/* ===== KIERUNKI KOLORYSTYCZNE (do wyboru) ===== */
:root[data-palette="papier"]{
  --card:#FDFDFC; --card-line:#E7E2D9;
  --paper:#FAF8F4; --surface:#F1EDE5; --deep:#1A1815; --ink:#1A1815; --ink-soft:#4E4941;
  --ink-faint:#7E776C; --rule:#E1DBD1; --signal:#7A5E18;
  --accent:#EC5E2A; --accent-text:#B8450F; --accent-soft:#FBEDE4; --accent-line:#EC5E2A; --on-accent:#0A0A0A; --glow:rgba(236,94,42,.10); --glow-2:rgba(79,70,229,.20); --on-accent:#0A0A0A; --on-accent:#0A0A0A; --on-accent:#0A0A0A;
  --grid-ink:rgba(26,24,21,.05); --grain-op:.5;
  --glass-bg:rgba(250,248,244,.62); --glass-bg-solid:rgba(250,248,244,.9);
  --glass-brd:rgba(26,24,21,.1); --glass-hi:rgba(255,255,255,.9); --glass-sh:rgba(26,24,21,.09);
  --grid-ink-2:rgba(26,24,21,.03);
}

:root[data-palette="noc"]{
  --fon-bg:#242422; --fon-brd:#3A3936; --fon-slot:rgba(255,255,255,.3);
  --card:#141C29; --card-line:#27313F;
  --paper:#0F1622; --surface:#16202F; --deep:#080D16; --ink:#E9EDF4; --ink-soft:#AAB5C7;
  --ink-faint:#7C8799; --rule:#26303F; --accent:#FF7A45; --accent-text:#FF9E73;
  --accent-soft:#2A1A12; --accent-line:#FF7A45; --on-accent:#0A0A0A; --glow:rgba(255,122,69,.30); --glow-2:rgba(99,102,241,.26); --signal:#7C9BFF;
  --glass-bg:rgba(15,22,34,.6); --glass-bg-solid:rgba(15,22,34,.92);
  --glass-brd:rgba(255,255,255,.1); --glass-hi:rgba(255,255,255,.1); --glass-sh:rgba(0,0,0,.5);
  --grid-ink:rgba(233,237,244,.06); --grid-ink-2:rgba(233,237,244,.035); --grain-op:.35;
}
:root[data-palette="noc"] .card{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
/* "netto" to nie plakietka, tylko slowo w zdaniu. Ramka wokol niego nie niosla
   zadnej informacji, ktorej nie niesie samo slowo - dodawala tylko halas. */
.f-lbl label,.row .f-lbl{color:inherit}

/* ===== RAMKA TELEFONU ===== */
.fon{display:block;position:relative;margin:0 auto;width:100%;max-width:13.5rem;
  border:1px solid var(--fon-brd);border-radius:22px;padding:14px 7px 7px;background:var(--fon-bg);
  box-shadow:0 16px 32px -22px var(--glass-sh)}
.fon::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:26%;height:4px;border-radius:2px;background:var(--fon-slot);z-index:2}
.fon img{display:block;width:100%;aspect-ratio:1/2;object-fit:cover;object-position:top;
  border-radius:16px;background:var(--paper)}
.fon-desk img{object-fit:cover;object-position:left top}

/* trzy główne case'y: telefon nad treścią, wyśrodkowany */
.cases-3{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.cases-3 .case .fon{max-width:9.5rem;margin:0 auto var(--s2)}
.cases-3 .case dl{grid-template-columns:1fr;gap:.15rem}
.cases-3 .case dt{font-size:.82rem;font-weight:600;letter-spacing:.005em;text-transform:none;
  color:var(--ink-faint);margin-top:.5rem}
.cases-3 .case .stat .n{font-size:1.5rem;line-height:1.1}
.cases-3 .case .wynik{overflow-wrap:anywhere}

/* galeria: siatka telefonów */
.gal{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));align-items:start}
.gal .fon{max-width:none}
.gal-sm{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
.gal-sm .fon{border-radius:18px;padding:11px 5px 5px}
.gal-sm .fon img{border-radius:12px}
.gal-sm .fon::before{top:5px;height:3px}
@media(max-width:600px){
  .gal{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
  .gal-sm{grid-template-columns:repeat(auto-fill,minmax(6rem,1fr))}
}

/* nadpisanie starych proporcji - telefon wygrywa wszędzie, gdzie jest ramka */
.gal .fon img.g,.case .fon img.shot,.cases-3 .fon img,.strip .fon img{
  aspect-ratio:1/2;object-fit:cover;object-position:top;border-radius:15px}
.gal-sm .fon img.g{border-radius:12px}
/* ===== RUCH I REAKCJA =====
   Cala animacja jest warunkowa: dopiero skrypt dokleja .ruch do <html>.
   Bez JS-a albo przy wylaczonych animacjach w systemie tresc jest po prostu
   widoczna - nic sie nie chowa "na zawsze". */
.ruch section > .wrap > *,
.ruch .hero-grid > *,
.ruch .page-head > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1) var(--opoznienie,0ms),
             transform .5s cubic-bezier(.2,.7,.3,1) var(--opoznienie,0ms);
}
.ruch section > .wrap > .jest,
.ruch .hero-grid > .jest,
.ruch .page-head > .jest{opacity:1;transform:none}

/* kafle reaguja na kursor - inaczej cala strona sprawia wrazenie obrazka */
.case,.c3,.it,.gal a,.krok,.card{
  transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s ease,box-shadow .18s ease}
.case:hover,.c3:hover,.it:hover,.krok:hover{
  transform:translateY(-3px);border-color:var(--accent-line);
  box-shadow:0 18px 34px -24px var(--glass-sh)}
.gal a:hover .fon{border-color:var(--accent-line)}
.gal a:hover{transform:translateY(-3px)}
.gal a .fon{transition:border-color .18s ease}

@media (prefers-reduced-motion:reduce){
  .ruch section > .wrap > *,.ruch .hero-grid > *,.ruch .page-head > *{opacity:1;transform:none;transition:none}
  .case,.c3,.it,.gal a,.krok,.card,.pill,.btn2{transition:none}
  .case:hover,.c3:hover,.it:hover,.krok:hover,.gal a:hover,.pill:hover,.btn2:hover{transform:none}
}

/* =========================================================================
   WARSTWA "AI" - swiatlo, szklo i ruch
   Zasada: swieci tlo, nie tekst. Gradient i poswiata sa dekoracja, wiec
   nigdy nie niosa tresci - kazde zdanie zostaje na pelnym kontrascie.
   ========================================================================= */

/* jedno slowo w naglowku na gradiencie - reszta zostaje na --ink */
.gr{background:linear-gradient(96deg,var(--accent) 12%,var(--accent-hi) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gr{color:var(--accent-text);-webkit-text-fill-color:currentColor}}

/* Zorza pod hero: dwie rozmyte plamy i pole kropek wygaszone ku brzegom.
   Kropki sa rzadkie (32 px) i ledwo widoczne - maja dawac glebie, nie kratke. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:-2;
  background:
    radial-gradient(38rem 26rem at 16% 6%, var(--glow), transparent 68%),
    radial-gradient(34rem 24rem at 86% 70%, var(--glow-2), transparent 70%);
  filter:blur(6px);animation:dryf 26s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--grid-ink) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);opacity:.9}
@keyframes dryf{from{transform:translate3d(-2%,-1%,0) scale(1)}
                to{transform:translate3d(3%,2%,0) scale(1.08)}}

/* Karta z liczba jako panel ze szkla, z obwodka w gradiencie zamiast kreski */
.card{position:relative;border:0;border-radius:20px;padding:calc(var(--s4) + 2px);
  background:linear-gradient(180deg,var(--glass-hi),transparent 40%),var(--card);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -40px var(--glow),0 2px 0 var(--glass-hi) inset}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(150deg,var(--accent),transparent 42%,transparent 62%,var(--accent-hi));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.card .big{background:linear-gradient(96deg,var(--ink) 30%,var(--accent-hi) 190%);
  -webkit-background-clip:text;background-clip:text}

/* ===== PANEL ODPOWIEDZI MODELU =====
   To nie jest ozdoba - to dowod. Tresc odpowiada temu, co naprawde
   pokazal Perplexity we wrzesniu 2026; zrzut lezy w portfolio. */
/* Sekcja z symulacją czatu zostaje jasna - prawdziwy ChatGPT też jest biały
   z ciemnym tekstem, więc panel czyta się jak zrzut, a nie jak nasza ozdoba.
   Od reszty strony odcina ją odcień tła i poświata, nie inwersja kolorów. */
.ans-sek{position:relative;overflow:hidden;background-color:var(--surface)}
.ans-sek::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(30rem 20rem at 80% 14%, var(--glow), transparent 70%),radial-gradient(28rem 20rem at 14% 88%, var(--glow-2), transparent 72%)}
.ans-sek>.wrap{position:relative;z-index:1}
.ans{max-width:44rem;margin-top:var(--s4);border-radius:20px;padding:var(--s4);position:relative;
  background:linear-gradient(180deg,var(--glass-hi),transparent 38%),var(--card);
  box-shadow:0 30px 70px -44px var(--glow)}
.ans::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(140deg,var(--accent),transparent 46%,transparent 58%,var(--accent-hi));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.ans .pyt{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.96rem;
  color:var(--ink);padding-bottom:var(--s2);border-bottom:1px solid var(--card-line);margin:0}
.ans .pyt .zn{color:var(--accent);font-weight:500;flex:none}
.ans .kur{display:inline-block;width:.6ch;height:1.05em;background:var(--accent);
  vertical-align:-.15em;animation:mruga 1.05s step-end infinite}
@keyframes mruga{0%,49%{opacity:1}50%,100%{opacity:0}}
.ans .odp{margin:var(--s3) 0 0;font-size:1.05rem;line-height:1.6;color:var(--ink-soft);max-width:none}
.ans .odp b{color:var(--ink);font-weight:600}
.ans .zrodlo{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s3);
  font-family:var(--body);font-size:.82rem;font-weight:500;letter-spacing:0;color:var(--accent-text);
  border:1px solid var(--accent-line);border-radius:999px;padding:.34rem .75rem}
.ans .stopka{margin-top:var(--s2);font-size:.84rem;color:var(--ink-faint);max-width:none}

/* typowanie: dopoki skrypt nie skonczy, tekst jest w DOM i czytelny dla czytnikow */
.pisze .odp,.pisze .zrodlo,.pisze .stopka,.pisze .ans-licz{opacity:0;transform:translateY(8px)}
.pisze.gotowe .odp,.pisze.gotowe .zrodlo,.pisze.gotowe .stopka,.pisze.gotowe .ans-licz{
  opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.pisze.gotowe .zrodlo{transition-delay:.12s}
.pisze.gotowe .stopka{transition-delay:.2s}
.pisze.gotowe .ans-licz{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .ans .kur{animation:none;opacity:1}
  .pisze .odp,.pisze .zrodlo,.pisze .stopka,.pisze .ans-licz{opacity:1;transform:none}
}

/* ===== reszta strony w tym samym swietle =====
   Bez tego hero swieci, a dalej zaczyna sie plaski dokument. */
.alt{position:relative;isolation:isolate}
.alt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40rem 24rem at 84% 0%, var(--glow), transparent 68%),radial-gradient(34rem 22rem at 8% 96%, var(--glow-2), transparent 72%);opacity:.6}

/* kreska miedzy sekcjami rozjasnia sie w srodku zamiast ciac strone na pol */
section + section:not(.alt){border-top:0;position:relative}
section + section:not(.alt)::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 18%,var(--accent-line) 50%,var(--rule) 82%,transparent);
  opacity:.55}

/* kafle: szklo zamiast plaskiego prostokata, poswiata pod kursorem */
.case,.c3,.it,.krok{
  background:linear-gradient(180deg,var(--glass-hi),transparent 34%),var(--card);
  border-radius:16px}
.case:hover,.c3:hover,.it:hover,.krok:hover{
  box-shadow:0 26px 48px -34px var(--glow),0 0 0 1px var(--accent-line) inset}
.gal a:hover .fon{box-shadow:0 20px 40px -26px var(--glow)}

/* pasek pod kalkulatorem - wezwanie, wiec ma swiecic mocniej niz reszta */
.after-calc{position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(180deg,var(--glass-hi),transparent 40%),var(--card);
  box-shadow:0 26px 60px -44px var(--glow)}

/* =========================================================================
   ZNAK ROZPOZNAWCZY: RACHUNEK
   Agencje rysuja gradienty i bryly 3D. My sprzedajemy policzenie, czy strona
   sie zwroci - wiec jezykiem graficznym jest rachunek: os z progiem, wiersze
   z kropkowanym wiodacym i cyfry o stalej szerokosci. Zadna z tych rzeczy
   nie jest ozdoba: kazda niesie liczbe, ktora i tak podajemy.
   ========================================================================= */

/* w tekście ciągłym cyfry proporcjonalne - stała szerokość rozstrzelała np. „2026” w zdaniu */
body{font-variant-numeric:proportional-nums}

/* ===== WIERSZE RACHUNKU =====
   Kropkowany wiodacy miedzy nazwa a wartoscia - jak na kwicie, nie jak
   w tabelce. Najtanszy detal, ktory widac na kazdym zrzucie.
   Kazda para siedzi we wlasnym <div> wewnatrz <dl> (poprawny HTML5),
   dzieki czemu wiodacy jest zwyklym elementem siatki, bez kombinowania
   z ujemnymi marginesami. */
.card .kv{display:block;margin:var(--s2) 0 var(--s3)}
.card .kv>div{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  column-gap:.55rem;padding:.4rem 0}
.card .kv>div+div{border-top:1px solid color-mix(in srgb,var(--card-line) 55%,transparent)}
.card .kv dt{font-family:var(--body);font-size:.84rem;font-weight:500;letter-spacing:.005em;text-transform:none;
  color:var(--ink-faint);white-space:nowrap}
.card .kv>div::before{content:"";order:1;border-bottom:1px dotted var(--card-line);
  transform:translateY(-.28em);min-width:1.5rem}
.card .kv dd{order:2;margin:0;font-size:.95rem;font-weight:500;color:var(--ink);text-align:right;
  white-space:nowrap}
@supports not (color: color-mix(in srgb,#000 50%,transparent)){
  .card .kv>div+div{border-top:1px solid var(--card-line)}}

/* blok "nie musicie nam pokazywac swoich liczb" - zdejmuje najwiekszy opor
   przy rozmowie o rachunku, wiec ma byc widoczny, nie schowany w drobnym druku */
.strzez{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:16px;
  border:1px solid var(--accent-line);background:var(--accent-soft)}
.strzez .eyebrow{margin-bottom:var(--s2)}
.strzez p + p{margin-top:var(--s2)}
.strzez p:not(.eyebrow){font-size:.95rem;color:var(--ink-soft);max-width:62ch}
.strzez b{color:var(--ink)}

/* ===== panel odpowiedzi: zrzut realizacji obok rozmowy ===== */
.ans-grid{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);
  gap:var(--s4);align-items:start;margin-top:var(--s4)}
@media(max-width:860px){.ans-grid{grid-template-columns:1fr;gap:var(--s3)}}
.ans-fot{margin:0}
.ans-fot .fon{max-width:11.5rem;margin:0}
.ans-fot figcaption{margin-top:var(--s2);display:flex;flex-direction:column;gap:.25rem;
  font-size:.86rem;color:var(--ink-soft);max-width:22rem}
.ans-fot figcaption b{color:var(--ink);font-size:.95rem}
.ans-fot .dom{font-family:var(--mono);font-size:.78rem;color:var(--accent-text)}
.ans{max-width:none;margin-top:0}
.ans-licz{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--card-line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem}
.ans-licz .n{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--accent-text)}
.ans-licz .l{font-size:.86rem;color:var(--ink-faint);max-width:34ch}

/* tabela z odpowiedzi ChatGPT - to jest dowód, więc ma wyglądać na zestawienie,
   nie na ozdobę. Wiersz klienta wyróżniony szyną, reszta neutralnie. */
.ans-tab{width:100%;border-collapse:collapse;margin:var(--s3) 0 0;font-size:.92rem}
.ans-tab th{text-align:left;font-weight:600;font-size:.8rem;color:var(--ink-faint);
  padding:0 .8rem .5rem 0;border-bottom:1px solid var(--card-line)}
.ans-tab td{padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--card-line);
  color:var(--ink-soft);vertical-align:top}
.ans-tab tr:last-child td{border-bottom:0;font-weight:400}
.ans-tab tr.my td{color:var(--ink);background:var(--accent-soft)}
.ans-tab tr.my td:first-child{box-shadow:inset 3px 0 0 var(--accent);padding-left:.8rem}
.ans-tab tr.my b{color:var(--ink)}
.ans-nota{margin-top:.6rem;font-size:.8rem;color:var(--ink-faint)}
.pisze .ans-tab,.pisze .ans-nota{opacity:0;transform:translateY(8px)}
.pisze.gotowe .ans-tab,.pisze.gotowe .ans-nota{opacity:1;transform:none;
  transition:opacity .45s ease .06s,transform .45s ease .06s}
@media (prefers-reduced-motion:reduce){.pisze .ans-tab,.pisze .ans-nota{opacity:1;transform:none}}

/* tabela dowodu nie jest cennikiem - ostatnia kolumna to nazwa modelu, nie liczba,
   wiec nie moze isc do prawej ani monospacem (globalna regula dla tabel to robi) */
.ans-tab td:last-child,.ans-tab th:last-child{text-align:left;font-family:var(--body);
  white-space:normal}
.ans-tab th{text-transform:none;font-size:.8rem;letter-spacing:.005em}
.ans-tab{min-width:0}

/* drugi krok rozmowy: podpowiedź, którą ChatGPT zaproponował sam.
   To najważniejszy fragment tej historii - kupujący nie wiedział, o co dopytać,
   a i tak trafił na zestawienie z naszym klientem. */
.ans .pyt2{display:flex;gap:.6rem;margin:var(--s3) 0 0;font-size:.95rem;color:var(--ink-soft);
  padding:.7rem .85rem;border-radius:12px;background:var(--accent-soft)}
.ans .pyt2 .zn{color:var(--accent);flex:none;font-size:1.05rem;line-height:1.3}
.ans .pyt2 b{color:var(--ink);font-weight:600}
.pisze .pyt2{opacity:0;transform:translateY(8px)}
.pisze.gotowe .pyt2{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
@media (prefers-reduced-motion:reduce){.pisze .pyt2{opacity:1;transform:none}}

/* Kto to zrobil - blok pod symulacja czatu. Bez niego caly dowod wisi w prozni:
   czytelnik widzi, ze ChatGPT kogos wymienil, ale nie wie, ze to nasza robota. */
.nasza-robota{margin-top:var(--s4);padding:var(--s4);border-radius:16px;
  background:var(--card);border:1px solid var(--card-line);
  border-left:4px solid var(--accent);
  box-shadow:0 20px 44px -34px var(--glass-sh)}
.nasza-robota .duze{font-size:1.14rem;line-height:1.5;color:var(--ink-soft)}
.nasza-robota p:not(.eyebrow){max-width:62ch}
.nasza-robota p + p{margin-top:var(--s2)}
.nasza-robota p:not(.eyebrow):not(.duze){font-size:.95rem;color:var(--ink-soft)}
.nasza-robota b{color:var(--ink);font-weight:600}
/* puenta bloku - to jest zdanie, dla ktorego caly ten dowod tu stoi:
   że widoczność w AI jest w standardzie, a nie w cenniku dodatkow.
   Wychodzi na pelna szerokosc kafla, zeby odcialo sie od akapitow nad nim. */
.nasza-robota p.puenta{margin:var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4));
  padding:var(--s3) var(--s4);background:var(--accent-soft);
  border-top:1px solid var(--accent-line);border-radius:0 0 12px 12px;
  font-size:1.08rem!important;line-height:1.5;color:var(--ink-soft)!important;max-width:none}
.nasza-robota .puenta b{display:block;font-size:1.16rem;color:var(--ink);margin-bottom:.2rem;
  letter-spacing:-.012em}

/* poprawki po renderze na telefonie */
.mnav[hidden]{display:none!important}
@media(max-width:560px){table.sla{min-width:0}.sla th,.sla td{padding:.5rem .4rem}}

/* link tekstowy obok przycisku */
.txtlink{color:var(--accent-text);font-weight:500;text-underline-offset:3px}
.txtlink:hover{color:var(--ink)}

/* zakres na stronie glownej: cztery kafle w siatce 2 x 2, zeby zaden nie zostal sam w rzedzie */
@media(min-width:760px){.pak.pak4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* wiersze rachunku w karcie: na waskim ekranie wartosc moze zejsc do drugiej linii */
@media(max-width:560px){.card .kv>div{grid-template-columns:auto minmax(0,1fr) auto}.card .kv dd{white-space:normal;min-width:0}}

/* zastrzezenie pod kalkulatorem idzie na pelna szerokosc, rowno z kalkulatorem */
#kalkulator .disc,#kalkulator-sklep .disc{max-width:none}

/* opinia jako samodzielny pasek na stronie glownej */
.wrap > .quote:only-child{margin:0;padding:0;border-top:0}

/* wstep nad formularzem na stronie glownej - na cala szerokosc kolumny formularza */
#oferta-form .lede{max-width:none}

/* dopisek pod przyciskiem formularza - w jednej linii, na cala szerokosc formularza */
.frm .micro{max-width:none}

/* sam pasek puenty pod czatem - bez akapitow nad nim */
.nasza-robota.tylko-puenta{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.nasza-robota.tylko-puenta p.puenta{margin:0;padding:0;background:none;border:0;border-radius:0}
.nasza-robota.tylko-puenta p.puenta b{font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.15;margin-bottom:.45rem;text-wrap:balance}

/* sekcja miast - tekst na pelna szerokosc */
#miasta .lede{max-width:none}

/* sekcja "druga strona stolu" - tekst na pelna szerokosc */
#stol .lede{max-width:none}
#stol .lede ~ p{max-width:62ch}

/* zakres na stronie glownej: kafle na bialym tle, przyciski pod nimi wysrodkowane */
.pak4 .pk:not(.wyroz){background:var(--card)}
.pak4 + .actions{justify-content:center}
/* realizacje - wstep na pelna szerokosc */
#realizacje .lede{max-width:none}

/* zakres - naglowek na pelna szerokosc */
#zakres h2.col{max-width:none}

/* puenta pod czatem - wysrodkowana */
.nasza-robota.tylko-puenta p.puenta{text-align:center}

/* wszystkie wstepy i naglowki sekcji na pelna szerokosc (hero i naglowki podstron zostaja wezsze) */
section .lede,section h2.col,section .kalk-tip-info{max-width:none}

/* CTA pod kalkulatorem - wysrodkowane */
.after-calc{justify-content:center;text-align:center}

/* ===== OPINIE KLIENTOW ===== */
.op-ocena{margin-top:var(--s2);color:var(--ink-soft);font-size:.95rem}
.op-ocena .stars{color:var(--accent);letter-spacing:.08em}
.opinie{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s4)}
@media(min-width:900px){.opinie{grid-template-columns:repeat(3,minmax(0,1fr))}}
.op{margin:0;background:var(--card);border:1px solid var(--card-line);border-radius:14px;
  padding:var(--s3);display:flex;flex-direction:column;gap:.7rem}
.op .stars{color:var(--accent);letter-spacing:.08em;font-size:.95rem}
.op blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink);flex:1}
.op figcaption{display:block;font-size:.86rem;line-height:1.5;color:var(--ink-faint)}
.op figcaption b{display:block}
.op figcaption b{color:var(--ink);font-weight:600;font-size:.92rem}
.op figcaption a{color:var(--accent-text);text-underline-offset:2px}

/* podpisy opinii: linia ze stronami zawsze na dwa wiersze, zeby imiona staly na jednej wysokosci */
.op .op-zr{display:block;min-height:3em}

/* hero: oba przyciski tej samej wielkości i czcionki */
.hero .actions > a{font-size:1rem;font-weight:700;height:3.25rem;min-width:15.5rem;padding:0 1.4rem;justify-content:center;box-sizing:border-box}

/* mobile: tabela z ChatGPT przed zrzutem strony klienta */
@media(max-width:860px){.ans-fot{order:2}.ans{order:1}}
/* kalkulator: zdanie pod kalkulatorem w stylu dużej puenty */
.after-calc p.after-big{font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;max-width:none;text-wrap:balance}

/* wyniki pod realizacjami na pełną szerokość */
p.wynik{max-width:none}
/* mobile: zrzut strony klienta i podpis na środku, nad tekstem o czacie nie ma już pustego lewego marginesu */
@media(max-width:860px){.ans-fot{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:var(--s3);align-items:end;text-align:left}.ans-fot .fon{margin:0;max-width:9.5rem}.ans-fot figcaption{margin-top:0;align-items:flex-start;justify-content:flex-end;text-align:left}}

/* feedback: jednakowa czcionka przyciskow; znaczki ? w osi wiersza */
.actions>a{font-size:1rem;line-height:1.2}
.f-lbl,.row .f-lbl{display:flex;align-items:center;gap:.35em}
p>span.hint,.f-lbl>button.hint,.row button.hint,p>button.hint{vertical-align:middle}

/* mobile: brak poziomego przewijania */
@media(max-width:780px){.kalk{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.sla td.n{white-space:normal}}

/* pasek nawigacji: ten sam kolor co tlo hero (w stanie przyklejonym tez) */
.hdr .bar,.hdr.is-stuck .bar{background:var(--surface)}

/* WordPress (FSE) dokleja odstep miedzy blokami najwyzszego poziomu - tlo body (bialy szum)
   prześwituje jako biala przerwa miedzy sekcjami. Zerujemy go. */
.wp-site-blocks>*,.wp-site-blocks>*+*{margin-block-start:0!important;margin-block-end:0!important;margin-top:0!important}
/* pasek nawigacji zostaje przyklejony do gory, takze gdy WP owija go w template part */

/* przycinanie poziome bez blokowania sticky (overflow:hidden na body by to psuło) */
html,body{overflow-x:clip}

/* Gaps widoczne na zywej stronie: treść strony (wp-block-post-content / main) ma is-layout-flow,
   a WordPress dokleja odstep miedzy jej dziecmi (sekcjami). Zerujemy tylko odstep miedzy sekcjami,
   nie tresc wewnatrz nich. */
.wp-block-post-content>*,.wp-block-post-content>*+*,main>*+*,main.is-layout-flow>*+*{margin-block-start:0!important;margin-top:0!important}

/* PASEK NAWIGACJI: staly na gorze (fixed) - nie zalezy od tego, jak WordPress owija header.
   Hero nie ma juz ujemnego marginesu (pasek nie zajmuje miejsca w ukladzie), a podstrony
   dostaja niewielki odstep gorny, zeby tresc nie wchodzila pod pasek. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50}
.hero{margin-top:0!important}
/* podstrony bez sekcji (Portfolio, Kontakt, Treści...): naglowek pod pasek nawigacji */
main:not(:has(.hero))>.wrap.page-head:first-child{padding-top:calc(var(--s4) + 6.25rem)}


/* ===== WERSJA 1.2.3: ciemne pasy, stopka, lekka ramka telefonu ===== */
/* ciemny pas (opcja B) - sekcje z klasa .dk */
.dk{background:var(--deep);color:#F4F4F5;border-top-color:transparent}
section.dk h1,section.dk h2,section.dk h3,section.dk h4,section.dk b,section.dk strong{color:#F4F4F5!important}
section.dk p,section.dk li,section.dk .lede,section.dk dd,section.dk dt,section.dk .micro{color:#B4B7BE!important}
.dk .eyebrow,.dk .kicker{color:var(--accent)}
.dk .card,.dk .case,.dk .pk,.dk .opinia,.dk .kafel{background:#141413;border-color:#26272B;color:#F4F4F5}
section.dk .case h3,section.dk .card h3,section.dk .pk h3{color:#F4F4F5!important}
.dk .btn2{color:#F4F4F5;border-color:#3A3C42}
.dk .pill{color:#F4F4F5}
.dk section,.dk .alt{background:transparent}
.dk + section,.dk + .alt{border-top:0}
section + section.dk{border-top:0}
.dk section+section{border-top:0}

/* stopka: ciemna, z wyrownanym copyrightem i mniejszym dolnym odstepem */
footer{background:var(--deep);color:#B4B7BE;border-top:0;padding:var(--s5) 0 var(--s4)}
footer a{color:#F4F4F5}
footer .eyebrow{color:var(--accent)}
footer .copy{margin:var(--s4) 0 0;font-size:.82rem;color:#7C8089}

/* ramka telefonu: jasna, cienka obwodka zamiast czarnej obudowy */
.fon{background:var(--card);border:1px solid var(--rule);box-shadow:0 14px 30px -24px var(--glass-sh);padding:10px 8px 8px}
.fon::before{background:var(--rule);width:22%;height:3px}
.fon img{border-radius:14px}
.gal-sm .fon{padding:8px 6px 6px;border-radius:16px}
.gal-sm .fon img{border-radius:10px}

/* 1.2.4 stopka: dwie kolumny (Menu / Kontakt), nazwa nad nimi, copyright oddzielony linią */
footer .fbrand{margin:0 0 var(--s5);font-size:1.25rem;font-weight:600;color:#F4F4F5;letter-spacing:-.01em}
footer .fgrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s4);align-items:start}
footer .fcol{gap:.7rem}
footer .fcol a{line-height:1.35}
footer .copy{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid #26272B;font-size:.82rem;color:#7C8089}

/* ===== 1.2.6 - scalenie poprawek mobile, menu i stopki ===== */
/* podstrony bez hero: naglowek strony pod paskiem nawigacji */
body:not(:has(.hero)) main .page-head{padding-top:calc(var(--s4) + 6.25rem)}
body:not(:has(.hero)) main section:has(> .page-head){padding-top:0}
/* boczne marginesy jak na glownej na wszystkich podstronach */
.wrap{padding-left:var(--s3)!important;padding-right:var(--s3)!important}
@media(max-width:880px){
  .hero{padding-top:calc(var(--hdr-h) + 1.75rem)!important}
  body:not(:has(.hero)) main .page-head{padding-top:calc(var(--hdr-h) + 1.75rem)!important}
}
/* przyciski w naglowkach stron: rowna szerokosc */
.hero .actions,.page-head .actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch}
.hero .actions>a,.page-head .actions>a{width:100%;min-width:15.5rem;justify-content:center;text-align:center;box-sizing:border-box}
@media(max-width:640px){.hero .actions,.page-head .actions{grid-auto-flow:row;grid-auto-columns:auto}}
/* menu mobilne: ikona X gdy otwarte */
.burger .ico-x{display:none}
.burger[aria-expanded="true"] .ico-x{display:block}
.burger[aria-expanded="true"] .ico-m{display:none}
/* ikonka ? w tekscie nad kalkulatorem wysrodkowana w pionie */
.kalk-tip-info .hint{vertical-align:.12em!important}

/* stopka: WP owija part w drugi <footer> - zerujemy zewnetrzny */
footer.wp-block-template-part{padding:0!important;border:0!important;margin:0!important;background:none!important}
.wp-block-template-part>footer{background:var(--deep,#0B0B0C);color:#B4B7BE;border-top:0;margin:0;padding:var(--s5) 0 var(--s4)}
footer a,footer a:hover,footer a:focus{text-decoration:none!important}
footer a:hover{color:var(--accent)!important}
footer .fgrid2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
footer .fkontakt a{font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
footer .fsoc a{display:inline-flex;align-items:center;gap:.5rem}
footer .fsoc svg{flex:none;opacity:.85}
footer .copy{max-width:none}
@media(max-width:640px){
  .wp-block-template-part>footer{padding:var(--s4) 0 var(--s3)}
  footer .fbrand{margin-bottom:var(--s4)}
  footer .fgrid2{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)}
  footer .fkontakt{grid-column:1/-1}
  footer .fkontakt a{font-size:1.12rem}
  footer .copy{margin-top:var(--s4);padding-top:var(--s3)}
}

/* ===== 1.2.7 ===== */
/* logo w stopce jak w pasku nawigacji, w jasnym kolorze */
footer .logo.fbrand{display:inline-block;color:#F4F4F5!important;font-size:1.15rem;margin:0 0 var(--s5)}
footer .logo.fbrand:hover{color:#F4F4F5!important}
/* bez bialego paska pod stopka (iOS pokazuje tlo <html> pod strona) */
html{background:var(--deep,#0B0B0C)}
/* podstrony: mniejsza dziura miedzy naglowkiem a pierwsza sekcja */
.page-head + section,.page-head + .alt,.page-head + .dk{padding-top:var(--s4)!important;border-top:0}
@media(max-width:640px){.page-head + section,.page-head + .alt,.page-head + .dk{padding-top:var(--s3)!important}}
@media(max-width:640px){footer .logo.fbrand{margin-bottom:var(--s4)}}

/* 1.2.10 - strona audytu ma nagłówek i stopkę; treść zaczyna się pod stałym nagłówkiem */
main.lp>.wrap.lp-hero:first-child{padding-top:calc(var(--s4) + 6.25rem)}