@layer components {
/* ============ BRAND TOKENS (z obecnej strony growthbakers.pl) ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--fg-1);background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{padding:clamp(64px,8vw,110px) var(--pad-x)}
.wrap{max-width:1240px;margin:0 auto}

/* ============ TYPOGRAFIA ============ */
h1,h2,h3,h4{font-weight:800;line-height:1.12;text-transform:uppercase;letter-spacing:-.5px}
h1{font-size:clamp(2.05rem,1.5rem + 3.6vw,4.6rem);font-weight:900;letter-spacing:-1.5px}
h2{font-size:clamp(1.55rem,1.1rem + 2.4vw,3.1rem)}
h3{font-size:clamp(1.15rem,1rem + .8vw,1.6rem)}
h4{font-size:1.05rem;letter-spacing:0}
p{font-size:clamp(.95rem,.9rem + .2vw,1.06rem);line-height:1.65}
.under-title{font-family:'Pacifico',cursive;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:clamp(1.15rem,1rem + .9vw,1.75rem);line-height:1.3;margin-bottom:.35em;display:block;color:var(--fg-1)}

.lead{max-width:660px;color:var(--fg-3)}

.hl{color:var(--accent-text)}
.on-mint-hl{color:var(--mint)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ============ PRZYCISKI ============ */
/* .btn mieszka w gb-chrome.css — potrzebuje go naglowek na kazdej podstronie */
.txtlink{font-weight:700;font-size:.95rem;border-bottom:2px solid var(--mint);padding-bottom:3px;white-space:nowrap}
.txtlink:hover{border-color:var(--purple)}

/* ============ ANIMACJE ============ */
.chr{animation:chr 6s ease-in-out infinite;will-change:transform}
.chr.c2{animation-duration:7.4s;animation-delay:-2s}
.chr.c3{animation-duration:5.2s;animation-delay:-1s}
@keyframes chr{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1deg)}}
.sway{transform-origin:bottom center;animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.4deg)}}

/* ============ HEADER ============ */
/* naglowek i nawigacja mobilna: gb-chrome.css (wspolne z reszta serwisu) */

/* ============ HERO (odchudzony + rysunek w tle jak w referencji) ============ */
.hero{position:relative;overflow:clip;padding:clamp(60px,8vw,110px) var(--pad-x) 0;text-align:center;
  background:radial-gradient(58% 42% at 50% 94%,rgba(57,255,179,.22),rgba(57,255,179,0) 72%)}
/* linia rysunkowa seo_sem.svg – ten sam plik, którego używa obecna strona */
.hero .bg-art{position:absolute;left:50%;top:clamp(40px,6vw,90px);transform:translateX(-50%);
  width:min(1980px,138%);opacity:.5;pointer-events:none;z-index:0;animation:drift 22s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-16px)}}
.hero .inner{position:relative;z-index:1;max-width:1060px;margin:0 auto}
.hero h1{margin:.15em auto 0;max-width:15em;font-size:clamp(2.1rem,1.5rem + 3.5vw,4.5rem)}
.hero h1 .strike{position:relative;color:var(--fg-4);white-space:nowrap}
.hero h1 .strike:after{content:'';position:absolute;left:-3%;top:52%;height:.09em;width:0;background:var(--yellow);transform:rotate(-2.5deg);animation:strike .9s .8s forwards}
@keyframes strike{to{width:106%}}
.hero .lead{margin:26px auto 0;font-weight:500;max-width:540px}
.hero .cta{margin-top:36px;display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero .art{position:relative;z-index:1;max-width:940px;margin:clamp(16px,4vw,44px) auto -6px}

/* ============ MARQUEE ============ */
.marq{background:var(--mint);color:var(--ink);overflow:clip;padding:15px 0;font-weight:800;text-transform:uppercase;
  letter-spacing:2px;font-size:.8rem;white-space:nowrap}
.marq .inner{display:inline-block;animation:marq 30s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.marq span{margin:0 22px}

/* ============ PĘTLA (3 kolumny z ikonami izometrycznymi) ============ */
.loop .head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:14px}
.loop .head .txt{max-width:720px}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,46px);margin-top:46px}
.col-item{text-align:center}
.col-item .ico{width:min(230px,62%);margin:0 auto 18px}
.col-item .step{font-size:.75rem;font-weight:800;letter-spacing:2px;color:var(--accent-text);text-transform:uppercase;margin-bottom:6px;display:block}
.col-item h3{margin-bottom:12px}
.col-item p{color:var(--fg-3);font-size:.97rem}
.note{margin-top:46px;background:var(--grey);border-left:7px solid var(--mint-dark);border-radius:0 18px 18px 0;
  padding:24px 30px;font-size:1rem;line-height:1.6;max-width:960px}
.note b{font-weight:800}

/* ============ CO ROBIMY — trzy obszary uslug (receptura C) ============ */
/* Sekcja stoi na szarosci i uzywa gotowego komponentu .cards — bez wlasnego
   layoutu, bo brand book na to nie pozwala („nowa kombinacja tych szesciu, nie
   nowy layout"). Pierwsza wersja miala tu siatke .grid6 z szescioma kartami
   .obox i paskami akcentu w szesciu kolorach; usunieta, bo lamala regule trzech
   kolumn i wchodzila w kolory poza paleta. Zostaje tlo, naglowek i listwa .svc,
   ktora dokladamy do karty. */
.offer{background:var(--grey)}
.offer .head{max-width:840px;margin-bottom:8px}
/* SZTYWNE trzy kolumny — nie auto-fit. Szesc kart ma sie ulozyc 3 + 3, a nie
   tyle, ile sie zmiesci: `auto-fit` dawal na 1440px 4 + 2, czyli poszarpany
   ostatni wiersz, a receptura C brand booka zabrania nawet czterech rownych.
   `minmax(0,1fr)` (nie `1fr`) — inaczej dluga tresc karty rozpychalaby kolumne
   ponad rowny podzial.

   Selektor MUSI byc dwuczlonowy (`.offer .cards`, czyli 0,2,0). Sama klasa
   `.cards-6` ma tyle samo wagi co `.cards`, a bazowa regula `.cards` z
   `auto-fit` stoi w tym pliku NIZEJ (sekcja STANDARD) — przy rownej
   specyficznosci wygrywa pozniejsza, wiec 3 kolumny nie wchodzily wcale
   (zmierzone: nadal 4 + 2 na 1440px).

   Progi zejscia do 2 i 1 kolumny te same, na ktorych stoi sekcja blogowa. */
.offer .cards{margin-top:46px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.offer .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.offer .cards{grid-template-columns:minmax(0,1fr)}}
/* ---- Chipsy „Dostajesz" + karta flagowa (redesign taste-skill 2026-08-06) ----
   Zamiast listwy .svc z wyliczanka po przecinkach: CHIPSY (jak w sekcji
   bloga). Flex-kolumna z margin-top:auto dosuwa pas chipsow do dolu karty,
   wiec dolne krawedzie rzedu sie rownaja. Subgrid z czasow .svc usuniety —
   przy bento z karta 2x2 rownanie pasow miedzy kartami nie ma juz sensu.

   Karta flagowa .feat stoi na miętowej PLASZCZYZNIE (kolor marki, nie
   kodowanie kategorii — lekcja z v1.5.0) i rozpina sie na 2x2: szesc
   pozycji z jedna wyrozniona to 4+5 = 9 komorek, czyli PELNA siatka 3x3
   bez pustych dziur. Hover flagowej: obrys INK, bo mietowy na miecie znika. */
.offer .card{display:flex;flex-direction:column}
.offer .card .tags{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.tag{background:var(--mint-pale);color:var(--fg-2);font-size:.76rem;font-weight:700;
  padding:6px 12px;border-radius:20px;line-height:1.2}
.offer .card.feat{grid-column:span 2;grid-row:span 2;background:var(--mint);border-color:var(--mint)}
.offer .card.feat:hover{border-color:var(--ink)}
.offer .card.feat .badge{align-self:flex-start;background:var(--ink);color:var(--mint);
  font-size:.7rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  padding:6px 14px;border-radius:20px;margin-bottom:16px}
.offer .card.feat h4{font-size:1.35rem}
.offer .card.feat p{color:var(--fg-2);font-size:1rem;max-width:52ch}
.offer .card.feat .tags{border-top-color:rgba(41,41,41,.15)}
.offer .card.feat .tag{background:var(--paper);color:var(--fg-1)}
@media(max-width:1000px){
  /* 2 kolumny: flagowa na cala szerokosc, 5 kart = 2+2+ostatnia na calosc */
  .offer .card.feat{grid-column:1/-1;grid-row:auto}
  .offer .cards>.card:last-child{grid-column:1/-1}
}

/* ============ BLOKI KOLOROWE ============ */
.block{padding:clamp(64px,7vw,100px) var(--pad-x)}
.block.mint{background:var(--mint)}
.block.cyan{background:var(--cyan)}
.block.dark{background:var(--ink)}
.block.grey{background:var(--grey)}
.split{display:flex;gap:clamp(30px,5vw,70px);align-items:center;flex-wrap:wrap}
.split>.col{flex:1 1 340px;min-width:300px}
.split .art{display:flex;justify-content:center}
.split .art img{width:min(430px,100%)}
.split.rev{flex-direction:row-reverse}
.split.rev>.col.art{flex:0 1 390px}
@media(max-width:900px){.split.rev{flex-direction:row}.split.rev>.col.art{flex:1 1 300px}}

/* listy z ptaszkami / kropkami */
ul.checks{list-style:none;margin-top:26px;display:grid;gap:4px}
ul.checks li{padding:10px 0 10px 42px;position:relative;font-size:1rem;line-height:1.55}
ul.checks li:before{content:'✓';position:absolute;left:0;top:9px;width:27px;height:27px;border-radius:50%;
  background:var(--mint);color:var(--ink);font-weight:900;font-size:.85rem;display:flex;align-items:center;justify-content:center}

.block.mint ul.checks li:before{background:var(--ink);color:var(--mint)}
ul.arrows{list-style:none;margin-top:26px;display:grid;gap:4px}
ul.arrows li{padding:10px 0 10px 34px;position:relative;font-size:1rem;line-height:1.55;color:var(--fg-2)}
ul.arrows li:before{content:'→';position:absolute;left:0;top:10px;color:var(--mint);font-weight:900}
ul.arrows li b{color:var(--fg-1)}

/* ============ AGENT – demo czatu ============ */
.phone{background:var(--paper);color:var(--ink);border-radius:26px;padding:22px;max-width:420px;margin:0 auto;
  box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative}
.phone .ph-h{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative}
.avatar svg{width:27px;height:27px}
.avatar .dot{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:var(--mint);border:2px solid var(--paper);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.ph-h .who{font-weight:800;font-size:.95rem;text-transform:none}
.ph-h .who span{display:block;font-weight:600;font-size:.72rem;color:var(--accent-text)}
.chat{padding:18px 2px 6px;min-height:340px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;padding:11px 15px;border-radius:16px;font-size:.86rem;line-height:1.5;opacity:0;
  transform:translateY(14px) scale(.97);transition:opacity .4s,transform .4s}
.msg.show{opacity:1;transform:none}
.msg.bot{background:var(--grey);border-bottom-left-radius:5px;align-self:flex-start}
.msg.usr{background:var(--ink);color:var(--on-dark-1);border-bottom-right-radius:5px;align-self:flex-end}
.msg.card{background:var(--paper);border:2px solid var(--mint);border-radius:14px;align-self:flex-start;max-width:92%}
.msg.card b{display:block;font-size:.85rem}
.msg.card small{color:var(--fg-3);font-size:.76rem}
.msg.card .chip{display:inline-block;margin-top:9px;background:var(--mint);font-weight:800;font-size:.75rem;padding:6px 14px;border-radius:20px}
.typing{display:inline-flex;gap:5px;padding:13px 16px;background:var(--grey);border-radius:16px;border-bottom-left-radius:5px;
  align-self:flex-start;opacity:0;transition:opacity .3s}
.typing.show{opacity:1}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--fg-4);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.ph-note{text-align:center;font-size:.72rem;color:var(--fg-4);padding-top:12px}

/* ============ STANDARD ============ */
.manifest{background:var(--ink);color:var(--fg-1);border-radius:28px;padding:clamp(30px,4vw,54px);margin-top:36px}
.manifest h3{line-height:1.35;text-transform:none;letter-spacing:-.3px;font-size:clamp(1.1rem,.95rem + 1vw,1.8rem);max-width:900px}

.manifest p{margin-top:16px;color:var(--fg-2);max-width:780px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:26px}
.card{background:var(--paper);border:2px solid var(--rule);border-radius:20px;padding:28px 26px;transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--accent-text);transform:translateY(-6px)}
.card .num{font-family:'Pacifico',cursive;text-transform:none;font-size:1.5rem;color:var(--accent-text);line-height:1;margin-bottom:10px}
.card h4{margin-bottom:8px}
.card p{font-size:.93rem;color:var(--fg-3)}

/* ============ VS – manifest tabela ============ */
.vs{margin-top:40px;border-radius:24px;overflow:clip;box-shadow:0 20px 60px rgba(0,0,0,.09)}
.vs-r{display:flex;background:var(--paper)}
.vs-r>div{flex:1 1 50%;padding:22px clamp(18px,2.4vw,34px);font-size:.97rem;line-height:1.55}
.vs-r .old{color:var(--fg-4)}
.vs-r .new{background:var(--ink);color:var(--on-dark-1);font-weight:600}
.vs-r .new b{color:var(--mint);font-weight:800}
.vs-r.head>div{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;padding:18px clamp(18px,2.4vw,34px)}
.vs-r.head .old{color:var(--fg-4)}
.vs-r.head .new{color:var(--mint)}
.vs-r:not(.head) .old span{text-decoration:line-through;text-decoration-color:rgba(255,233,0,.9);text-decoration-thickness:2px}

/* ============ GEO ============ */
.aiobox{background:var(--paper);border-radius:22px;padding:28px;box-shadow:0 22px 50px rgba(0,0,0,.12)}
.aiobox .lbl{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.76rem;color:var(--fg-3);
  text-transform:uppercase;letter-spacing:1.4px;margin-bottom:14px}
.aiobox .spark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--cyan),var(--mint))}
.aiobox p{font-size:.95rem;color:var(--fg-2)}
.aiobox .cite{display:inline-block;margin-top:16px;background:var(--mint);font-weight:800;font-size:.78rem;
  padding:8px 16px;border-radius:20px;animation:glowc 2.6s infinite}
@keyframes glowc{0%,100%{box-shadow:0 0 0 0 rgba(0,152,96,.5)}50%{box-shadow:0 0 0 12px rgba(0,152,96,0)}}
ul.dots{list-style:none;display:grid;gap:6px;margin-top:8px}
ul.dots li{padding:9px 0 9px 32px;position:relative;font-size:1rem;line-height:1.55}
ul.dots li:before{content:'';position:absolute;left:0;top:16px;width:13px;height:13px;border-radius:50%;background:var(--ink)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3vw,44px);margin-top:56px}
.pillar{text-align:center}
.pillar .ico{width:96px;margin:0 auto 16px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
.pillar h4{font-family:'Pacifico',cursive;font-weight:400;text-transform:none;font-size:1.3rem;letter-spacing:0;margin-bottom:8px}
.pillar p{font-size:.93rem;color:var(--fg-2)}

/* ============ WYKRESY (dane lokalne + raport) ============ */
/* Od 2026-08-05 wykres stoi w DWOCH sekcjach: na szarym tle (#dane) i na
   czarnym (#raport). Cien musi byc rozny — ten mocny, liczony pod czern, na
   szarym tle robil brudna plame. Dlatego baza jest lekka, a ciemna sekcja go
   pogłębia. */
.chartbox{background:var(--paper);border-radius:22px;padding:30px;color:var(--ink);box-shadow:0 26px 70px rgba(0,0,0,.16)}
.block.dark .chartbox{box-shadow:0 30px 80px rgba(0,0,0,.4)}
.chartbox .t{font-weight:800;font-size:.92rem;text-transform:uppercase;letter-spacing:.3px}
.chartbox .s{font-size:.78rem;color:var(--fg-4);margin:4px 0 26px}
.chartbox .src{font-size:.72rem;color:var(--fg-4);border-top:1px solid var(--rule-soft);padding-top:12px}
.bars{display:flex;gap:14px;align-items:flex-end;height:180px;margin-bottom:34px}
.bar{flex:1;background:linear-gradient(180deg,var(--mint),var(--mint-dark));border-radius:8px 8px 3px 3px;height:0;
  transition:height 1.1s cubic-bezier(.2,.7,.3,1);position:relative}
.bar span{position:absolute;top:-26px;left:-6px;right:-6px;text-align:center;font-size:.66rem;font-weight:800;opacity:0;transition:opacity .4s .8s}
.chartbox.vis .bar span{opacity:1}
/* podpisy slupkow lamia sie na dwie linie („Śród-<br>mieście”), wiec potrzebuja
   wlasnej interlinii — a sekcja #dane wiekszego marginesu pod wykresem, zeby
   druga linia nie wchodzila w notke o zrodle */
.bar i{position:absolute;bottom:-26px;left:-6px;right:-6px;text-align:center;font-size:.64rem;font-weight:600;color:var(--fg-4);font-style:normal;line-height:1.25}
.dane .bars{margin-bottom:46px}
.dane ul.dots{margin-top:26px}
.dane ul.dots li:before{background:var(--mint-dark)}
.demand{display:flex;align-items:center;gap:clamp(24px,4vw,60px);flex-wrap:wrap;margin-top:clamp(40px,5vw,70px);
  border-top:1px solid var(--rule);padding-top:clamp(30px,4vw,50px)}
.demand .art{flex:1 1 300px;display:flex;justify-content:center}
.demand .art img{width:min(360px,100%)}
.demand .txt{flex:1 1 420px}
.demand .quote{margin-top:20px;background:var(--ink-soft);border-radius:18px;padding:22px 26px;font-size:.95rem;color:var(--fg-2);
  border-left:6px solid var(--mint)}
.demand .quote b{color:var(--mint)}

/* ============ CTA / KONTAKT ============ */
.cta-end{background:linear-gradient(180deg,var(--paper) 0%,var(--mint-pale) 100%);text-align:center;overflow:clip}
.cta-end .lead{margin:22px auto 34px}
.cta-end .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.cta-art{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,6vw,90px);margin:clamp(30px,4vw,50px) auto -1px;max-width:1100px}
.cta-art .desk{width:min(46%,470px)}
.cta-art .plant{width:min(11%,90px)}
@media(max-width:820px){.cta-art .plant{display:none}.cta-art .desk{width:min(80%,420px)}}

/* ============ PIERWSZY WLASNY KANAL (dark) ============ */
/* Redesign po audycie taste-skill (2026-08-06): trzy rowne panele to zakazany
   wzorzec, sekcja byla sama typografia na plaskim ink. Teraz uklad B (split):
   tresc + CTA po lewej, po prawej PIONOWA SCIEZKA trzech krokow na mietowej
   szynie — krok 02 (oferta) na mietowej plaszczyznie, wiec hierarchia
   problem -> OFERTA -> proces jest widoczna, nie tylko opisana.
   Tlo: mietowa poswiata (to samo urzadzenie co w .hero, nizsza alpha pod
   czern) + wielki obrys szescioboku (ksztalt marki) z paralaksa [data-par].
   Prefiks wk-, zeby nie zderzyc sie z niewarstwowym CSS motywu. */
.wk{position:relative;overflow:clip;
  background:radial-gradient(52% 46% at 8% 96%,rgba(57,255,179,.14),rgba(57,255,179,0) 70%)}
.wk .wrap{position:relative;z-index:1}
.wk-hex{position:absolute;right:-160px;top:4%;width:min(620px,55vw);aspect-ratio:1;
  pointer-events:none;color:#fff;opacity:.05;z-index:0}
.wk-path{position:relative}
/* Szyne rysuje kazdy krok na wlasnej wysokosci: pierwszy zaczyna od srodka
   swojego dysku, ostatni konczy na srodku swojego — nic nie wystaje ponizej
   niezaleznie od dlugosci tekstu. Na miętowej plycie kroku 02 linia jest
   niewidoczna (ten sam odcien), a dyski przykrywaja ja z gory. */
.wk-step{position:relative;padding:20px 0 20px 70px}
.wk-step:before{content:'';position:absolute;left:23px;top:0;bottom:0;width:2px;
  background:rgba(57,255,179,.35)}
.wk-step:first-child:before{top:40px}
.wk-step:last-child:before{bottom:auto;height:40px}
.wk-step .num{position:absolute;left:0;top:16px;width:48px;height:48px;border-radius:50%;
  background:var(--ink-soft);display:grid;place-items:center;
  font-family:'Pacifico',cursive;text-transform:none;font-size:1.2rem;
  color:var(--mint);line-height:1}
.wk-step h4{margin-bottom:8px}
.wk-step p{font-size:.93rem;color:var(--fg-3)}
.wk-step.wk-hl{background:var(--mint);border-radius:20px;padding:26px 26px 26px 78px;margin:14px 0}
.wk-step.wk-hl .num{left:14px;top:24px;background:var(--ink);color:var(--mint)}
.wk-step.wk-hl p{color:var(--fg-2)}
@media(max-width:880px){.wk-hex{display:none}}

/* ============ FORMULARZ KONTAKTOWY (CF7 w .cta-end) ============ */
/* Przepis „Formularz" z brand booka: etykiety NAD polami (nigdy placeholder
   zamiast etykiety), promien pol 14px, obrys 2px --grey-line, focus mint-dark,
   przycisk purple pelnej szerokosci na mobile. Submit lustrzanie z .btn
   (gb-chrome.css), bo CF7 renderuje <input>, ktoremu nie dolozymy klasy <a>. */
.gbf{max-width:760px;margin:38px auto 0;text-align:left;background:var(--paper);
  border:2px solid var(--grey-line);border-radius:20px;padding:clamp(24px,4vw,40px)}
.gbf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.gbf-field{margin:0;display:flex;flex-direction:column;gap:8px}
.gbf-wide{grid-column:1/-1}
.gbf-field label{font-size:.78rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.gbf input[type=text],.gbf input[type=email],.gbf input[type=tel],.gbf textarea{
  width:100%;border:2px solid var(--grey-line);border-radius:14px;padding:12px 16px;
  font:inherit;font-size:.95rem;background:var(--paper);color:var(--fg-1);
  transition:border-color .25s}
.gbf input:focus,.gbf textarea:focus{border-color:var(--mint-dark)}
.gbf textarea{resize:vertical;min-height:120px}
.gbf .wpcf7-form-control-wrap{display:block}
.gbf-consent{margin:18px 0 0;font-size:.85rem;color:var(--fg-3);line-height:1.55}
.gbf-consent a{text-decoration:underline}
.gbf-consent input[type=checkbox]{width:18px;height:18px;accent-color:var(--purple);
  margin-right:10px;vertical-align:-3px}
.gbf-submit{margin:22px 0 0}
.gbf-submit input[type=submit]{display:inline-flex;background:var(--purple);color:var(--on-dark-1);
  font-weight:700;font-size:.95rem;padding:16px 34px;border-radius:50px;border:2px solid transparent;
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.gbf-submit input[type=submit]:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(128,0,255,.3)}
.gbf-submit input[type=submit]:active{transform:translateY(-1px) scale(.97)}
.gbf .wpcf7-not-valid-tip{font-size:.8rem;margin-top:6px}
.gbf .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border:2px solid var(--mint-dark);
  border-radius:14px;font-size:.9rem}
.gbf .invalid .wpcf7-response-output,.gbf .failed .wpcf7-response-output{border-color:#ca0e52}
.gbf .wpcf7-spinner{margin:0 0 0 14px}
.gbf-alt{margin-top:18px;font-size:.9rem;color:var(--fg-3)}
@media(max-width:680px){
  .gbf-grid{grid-template-columns:1fr}
  .gbf-submit input[type=submit]{width:100%;justify-content:center}
}

/* ============ FOOTER ============ */
/* stopka: gb-chrome.css (wspolna z reszta serwisu) */

@media(max-width:880px){
  .loop .head img{display:none}
  .vs-r{flex-direction:column}
  .vs-r>div{flex:1 1 auto}
  .vs-r.head{display:none}
  .vs-r .old:before{content:'Stara agencja';display:block;font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--fg-4);margin-bottom:6px}
  .vs-r .new:before{content:'Growth Bakers';display:block;font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--mint);margin-bottom:6px}
  }

}