/* Scena z rakietą i cząstki – przeniesione z pollyart.pl (opieka-www), 22.09.2026.
   Ładowane tylko na stronie głównej, w sekcji #pollyart. */
/* ============================================================
   PRZELATUJACE CZASTKI W TLE HERO
   Smugi opadaja - skoro swiat leci w dol, rakieta czyta sie jako wznoszaca.
   Trzy plany glebi: dalekie sa drobne, blade i wolne, bliskie dluzsze,
   jasniejsze i szybsze. Cale pole przesuwa sie z mysza w PRZECIWNA strone
   niz scena z rakieta, co poglebia wrazenie przestrzeni.
   Warstwa siedzi nad siatka hero (::after, z-index -2), ale pod trescia.
   Czastki dosypuje JS - bez niego tlo zostaje czyste i nic sie nie psuje.
   ============================================================ */
.hero-particles{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -8px), 0);
}
.hero-particles .pt{
  position: absolute;
  top: 0; left: 0;
  border-radius: 999px;
  will-change: transform;
}
/* ============================================================
   ============================================================
   SCENA HERO: RAKIETA STARTUJACA Z LAPTOPA
   Odtworzenie mechaniki ze strony wzorcowej. Kolejnosc warstw w osi Z:

     .rocket-bg            ekran laptopa   (maska: widoczne 0-82% wysokosci)
     .rocket-scene           dym, rakieta, silnik, iskry
     .rocket-bg.keyboard   klawiatura      (maska: widoczne 82-100%)

   Ten sam obrazek laptopa wstawiony dwa razy i przyciety maska w tym samym
   punkcie daje zludzenie, ze rakieta wylatuje z wnetrza ekranu: leci nad
   dolna polowa laptopa, ale pod jego klawiatura.

   Ruch:
     rocketVibrate  drgania kadluba (0,2 s)
     moveJet        przesuwana tekstura plomienia silnika (0,5 s)
     rocketGlow     pulsujaca poswiata na obudowie laptopa (1 s)
     *Boot          animacje wejscia - dym i rakieta "rozpychaja sie" po
                    wczytaniu strony; zrobione na animacjach CSS, a nie na
                    klasie zdejmowanej JS-em, zeby przy wylaczonym JS scena
                    i tak wygladala docelowo.
   Iskry generuje JS (part-script.html) - bez niego scena dziala, po prostu
   nie ma iskier.
   ============================================================
   ============================================================ */
:root{
  --spark-mask: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 30%,
    rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 100%);
}
.hero-rocket-box{
  display: flex;
  flex-flow: column;
  padding: 6rem 3.6rem 0;
  position: relative;
  animation: heroSceneIn .6s ease-in both;
}
.hero-rocket{ position: relative }
/* --- laptop: dwie kopie tego samego obrazka, przyciete w 82% wysokosci --- */
.rocket-bg{
  width: 100%; height: auto;
  opacity: .75;
  pointer-events: none;
}
.rocket-bg.keyboard{
  opacity: 1;
  position: absolute;
  inset: 0 0 auto 0;
  transform-origin: 50% 82%;
}
/* --- scena: obszar, w ktorym dzieje sie start --- */
.rocket-scene{
  position: absolute;
  inset: 0 -10% 17.5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* --- rakieta + silnik --- */
.rocket-hero{
  position: absolute;
  bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: 50% 120%;
  overflow: clip;
}
.rocket-hero-inner{
  position: relative;
  transform-origin: 50% 300%;
  padding-bottom: 4vh;
  animation: rocketBoot 3s cubic-bezier(.215,.61,.355,1) both;
}
.rocket-hero-img{
  position: relative;
  width: 8.5rem;
  animation: rocketVibrate .2s infinite;
}
.rocket-jet{
  position: absolute;
  top: 45%; left: 8%; right: 5%;
  height: 55%;
  background: url("data:image/avif;base64,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") 50% 0 / 100% repeat-y;
  animation: moveJet .5s linear infinite, jetIn 1s ease-in 1s both;
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,0) 20%, #fff 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, rgba(255,255,255,0) 20%, #fff 60%, transparent 100%);
}
/* --- dym: cztery warstwy o roznej szerokosci i tempie wejscia --- */
.smoke-box{ width: 100%; transform-origin: 50% 83% }
/* Obszar przyciecia dymu.
   Obrazki dymu maja `max-width:100%`, wiec wypelniaja swoja ramke co do piksela.
   Gdy `smokeAlive*` powieksza klab, ten wychodzi poza ramke i BYL SCINANY -
   z lewej strony widac bylo prosta pionowa krawedz.
   Dlatego obszar przyciecia jest teraz o 200 px szerszy z kazdej strony, a ramka
   obrazkow (.rocket-smoke-box) wraca o te same 200 px do srodka. Efekt: obrazki
   maja dokladnie te sama wielkosc i pozycje co wczesniej, ale klab ma zapas,
   w ktorym moze rosnac i podjezdzac w strone tekstu bez sciecia. */
.smoke{
  position: absolute;
  inset: 0 -200px -7% -200px;
  transform-origin: 50% 100%;
  overflow: clip;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.rocket-smoke-box{ position: absolute; inset: 0 200px }
/* UWAGA - ciecie kleba jest WPALONE W PLIKI ZRODLOWE.
   W smoke3 i smoke4 klab dotyka lewej krawedzi kadru obrazka i konczy sie prosta
   pionowa linia (widac to po wyrenderowaniu samych plikow na jasnym tle). Zadne
   poszerzanie kontenera tego nie naprawi, bo to nie jest przyciecie w CSS.
   Maska wygasza oba pionowe brzegi kazdego obrazka, wiec dym rozplywa sie
   zamiast konczyc kreska. Dla smoke1 i smoke2, gdzie klab lezy z dala od
   krawedzi, ta maska nie zmienia nic widocznego. */
.rocket-smoke{
  position: absolute;
  bottom: 0;
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Szerokosci w vw - jak we wzorcu, dzieki czemu klab dymu rosnie razem z ekranem.
   Kazda warstwa dostaje DWIE animacje: jednorazowe wejscie (smokeBoot*) i staly
   cykl klebienia (smokeAlive*), ktory startuje dokladnie tam, gdzie wejscie sie
   konczy - w skali 1. Bez tego drugiego dym zastygal po 6 sekundach i scena
   martwiala. Rozne czasy (14/17/21/25 s) i rozne opoznienia sprawiaja, ze warstwy
   nigdy nie ida rowno, wiec masa sie przewala zamiast pulsowac.
   Punkt odniesienia to `transform-origin: 50% 100%`, czyli podstawa klebu -
   dym rozrasta sie do gory i na boki od miejsca, gdzie stoi rakieta. */
/* smoke4 to ten klab po lewej, obok napisow, i JEDYNY z prawdziwym cieciem.
   Zmierzone na alfa-kanale pliku: klab zajmuje 0,3%-20,5% szerokosci kadru,
   a na 20,5% alfa spada SKOKIEM o 56 (w pozostalych warstwach najwieksze skoki
   to 3-6, czyli zwykla struktura chmury). To ciecie jest w srodku obrazka,
   nie przy brzegu, wiec maska brzegowa go nie lapie.
   Maska MUSI dojsc do zera PRZED 20,5% - wczesniejsza wersja wygaszala dopiero
   do 23% i w miejscu ciecia zostawalo 28% krycia, przez co krawedz dalej bylo
   widac. Teraz zero wypada na 19,5%, czyli tuz przed cieciem. */
.rocket-smoke.smoke4{ width: 60vw; margin-left: .4rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 13%, transparent 19.5%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 13%, transparent 19.5%);
  animation: smokeBoot4 6s cubic-bezier(.215,.61,.355,1) both,
             smokeAlive4 25s ease-in-out 10.2s infinite }
.rocket-smoke.smoke3{ width: 65vw;
  animation: smokeBoot3 6s cubic-bezier(.215,.61,.355,1) both,
             smokeAlive3 21s ease-in-out 8.8s infinite }
.rocket-smoke.smoke2{ width: 70vw;
  animation: smokeBoot2 6s cubic-bezier(.215,.61,.355,1) both,
             smokeAlive2 17s ease-in-out 7.4s infinite }
.rocket-smoke.smoke1{ width: 75vw;
  animation: smokeBoot1 6s cubic-bezier(.215,.61,.355,1) both,
             smokeAlive1 14s ease-in-out 6s infinite }
@media (min-width: 1920px){.rocket-smoke.smoke4{ width: 1092px }
.rocket-smoke.smoke3{ width: 1183px }
.rocket-smoke.smoke2{ width: 1274px }
.rocket-smoke.smoke1{ width: 1365px }}
/* --- poswiata na obudowie laptopa --- */
.rocket-glow{
  position: absolute;
  top: 0; left: 9.5%; right: 9.5%;
  height: 25.8rem;
  background-image: radial-gradient(circle closest-corner at 50% 80%, #fff, rgba(255,255,255,0));
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: rocketGlow 1s infinite;
}
/* --- iskry (divy dosypuje JS) --- */
.rocket-sparks-box{
  position: absolute;
  top: 0;
  z-index: 10;
  width: 10rem; height: 30rem;
  opacity: .5;
  pointer-events: none;
  perspective: 50rem;
  -webkit-mask-image: var(--spark-mask);
          mask-image: var(--spark-mask);
  animation: heroSceneIn 3s ease-in both;
}
.rocket-sparks{
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: clip;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: rotateX(30deg) perspective(50rem);
}
.spark{ position: absolute; bottom: 100%; width: 1px; background: #fff }
/* --- opisy punktowe: gwiazdka -> kreska -> podpis, po najechaniu --- */
.dots-box{
  position: absolute;
  inset: -20% 0 20%;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s ease;
}
.dots-box:hover{ opacity: 1; transition: opacity .5s ease-in }
.dot-star-box{
  position: absolute;
  top: 45%; left: 56%;
  z-index: 2;
  width: .6rem; height: .6rem;
  display: flex; justify-content: center; align-items: center;
  transition: all .3s ease-in;
}
.dot-star-box.dot-left{ top: 32%; left: 44% }
.dot-star-box.dot-top{ top: 13%; left: 49.5% }
.dot-star-wrap{ position: absolute; inset: 0; transition: transform .3s }
.dot-star{
  position: absolute; inset: 0; z-index: 2;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCA1NCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjk1OTkgMi43NjUzOEMyNC42OTMgLTAuMzA1OTAxIDI5LjA2MjggLTAuMzA1OTEyIDI5Ljc5NTkgMi43NjUzN0wzMi4xNDQxIDEyLjYwMjdDMzMuMTk0NCAxNy4wMDI4IDM2LjYzIDIwLjQzODMgNDEuMDMgMjEuNDg4Nkw1MC44Njc0IDIzLjgzNjhDNTMuOTM4NyAyNC41NyA1My45Mzg3IDI4LjkzOTcgNTAuODY3NCAyOS42NzI5TDQxLjAzIDMyLjAyMTFDMzYuNjMgMzMuMDcxNCAzMy4xOTQ0IDM2LjUwNjkgMzIuMTQ0MSA0MC45MDdMMjkuNzk1OSA1MC43NDQzQzI5LjA2MjggNTMuODE1NiAyNC42OTMgNTMuODE1NiAyMy45NTk5IDUwLjc0NDNMMjEuNjExNyA0MC45MDdDMjAuNTYxNCAzNi41MDY5IDE3LjEyNTkgMzMuMDcxNCAxMi43MjU4IDMyLjAyMTFMMi44ODg0MyAyOS42NzI5Qy0wLjE4Mjg1NCAyOC45Mzk4IC0wLjE4Mjg2NiAyNC41NyAyLjg4ODQyIDIzLjgzNjhMMTIuNzI1OCAyMS40ODg2QzE3LjEyNTggMjAuNDM4MyAyMC41NjE0IDE3LjAwMjggMjEuNjExNyAxMi42MDI3TDIzLjk1OTkgMi43NjUzOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=") 50% / 100% 100% no-repeat;
  transform: scale(.85);
  transition: all .3s ease-in;
}
.dot-line{
  position: absolute;
  bottom: 60%; left: 60%;
  width: 2rem; height: 1.64rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAzNCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjY1MTM3IDI3LjVMMjYuNzY1MSAxSDMzLjc2NTEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMC43NSIvPgo8L3N2Zz4K") 50% / cover no-repeat;
  transform-origin: 0%;
}
.dot-line.line-flipped{ left: 40%; transform: rotateY(180deg) }
.dot-text{
  position: absolute;
  bottom: 100%; left: 100%;
  width: 14ch;
  margin-left: 2rem; margin-bottom: .8rem;
  color: var(--gv-lightest-chalk);
  font-size: 11px; font-weight: 400; line-height: 1.15;
  letter-spacing: .1em; word-spacing: .1em; text-transform: uppercase;
}
.dot-text.text-right{ left: auto; right: 100%; margin-left: auto; margin-right: 2rem }
/* ============================================================
   PARALAKSA OD MYSZY
   Warstwy sceny przesuwaja sie o rozna wartosc, wiec przy ruchu myszka
   scena dostaje glebi: laptop drgnie ledwie zauwazalnie, dym mocniej,
   rakieta najmocniej. Sterowanie idzie przez --px/--py (zakres -1..1),
   ktore ustawia JS; bez JS zmienne zostaja na 0 i nic sie nie dzieje.
   Przesuwam wylacznie elementy BEZ animacji transformu (opakowania), zeby
   nie kolidowac z drganiem kadluba i animacjami wejscia.

   UWAGA: transformu NIE wolno zalozyc na .smoke-box. Ten element nie ma
   wlasnej wysokosci, a transform czyni z niego kontener pozycjonowania dla
   .smoke (inset: 0 0 -7%), przez co warstwa dymu zapada sie do zera i dym
   znika z ekranu. Dlatego dym przesuwamy na .rocket-smoke-box.
   ============================================================ */
/* zmienne siedza na calym hero, zeby dziedziczyla je i scena, i pole czastek */

.rocket-bg,
.rocket-bg.keyboard{ transform: translate3d(calc(var(--px) * 6px),  calc(var(--py) * 4px),  0) }
.rocket-smoke-box  { transform: translate3d(calc(var(--px) * 11px), calc(var(--py) * 6px),  0) }
.rocket-hero       { transform: translate3d(calc(var(--px) * 17px), calc(var(--py) * 11px), 0) }
.rocket-glow       { transform: translate3d(calc(var(--px) * 9px),  calc(var(--py) * 5px),  0) }
/* --- klatki kluczowe --- */
@keyframes rocketVibrate{
  0%, 100%{ transform: translateX(0) }
  25%     { transform: translateX(-.4px) }
  75%     { transform: translateX(.4px) }
}
@keyframes moveJet{ from{ background-position-y: 0% } to{ background-position-y: 175% } }
@keyframes rocketGlow{
  0%{ opacity:.2 } 20%{ opacity:.4 } 40%{ opacity:.2 }
  60%{ opacity:.3 } 80%{ opacity:0 } 100%{ opacity:.2 }
}
@keyframes heroSceneIn{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes jetIn{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes rocketBoot{ from{ transform: scale(.85) } to{ transform: scale(1) } }
@keyframes smokeBoot4{ from{ transform: scale(.60) } to{ transform: scale(1) } }
@keyframes smokeBoot3{ from{ transform: scale(.65) } to{ transform: scale(1) } }
@keyframes smokeBoot2{ from{ transform: scale(.70) } to{ transform: scale(1) } }
@keyframes smokeBoot1{ from{ transform: scale(.75) } to{ transform: scale(1) } }
@keyframes smokeAlive1{
  0%, 100%{ transform: scale(1)     rotate(0)       translate(0, 0) }
  28%     { transform: scale(1.075) rotate(1.1deg)  translate(-2.6%, -1.6%) }
  55%     { transform: scale(1.03)  rotate(-0.5deg) translate(-0.9%, -0.7%) }
  80%     { transform: scale(1.06)  rotate(0.4deg)  translate(-3.4%, -1.2%) }
}
@keyframes smokeAlive2{
  0%, 100%{ transform: scale(1)     rotate(0)       translate(0, 0) }
  32%     { transform: scale(1.05)  rotate(-1.3deg) translate(-3.1%, -1.1%) }
  60%     { transform: scale(1.085) rotate(0.6deg)  translate(-1.2%, -1.8%) }
  84%     { transform: scale(1.02)  rotate(-0.3deg) translate(-2.7%, -0.5%) }
}
@keyframes smokeAlive3{
  0%, 100%{ transform: scale(1)     rotate(0)       translate(0, 0) }
  24%     { transform: scale(1.04)  rotate(1.4deg)  translate(-1.4%, -0.9%) }
  58%     { transform: scale(1.09)  rotate(-0.6deg) translate(-3.6%, -1.9%) }
  82%     { transform: scale(1.045) rotate(0.7deg)  translate(-1.9%, -1%) }
}
@keyframes smokeAlive4{
  0%, 100%{ transform: scale(1)     rotate(0)       translate(0, 0) }
  30%     { transform: scale(1.065) rotate(-1.5deg) translate(-3.2%, -1.4%) }
  62%     { transform: scale(1.025) rotate(0.5deg)  translate(-1.1%, -0.6%) }
  86%     { transform: scale(1.08)  rotate(-0.7deg) translate(-2.9%, -1.7%) }
}
/* ============================================================
   SEKCJA POLLYART – styl nagłówka pollyart.pl (22.09)
   Tło i kolory z pollyart.pl: granat #0D1326, pomarańczowa poświata
   od dołu po prawej, akcent w gradiencie brzoskwiniowym.
   ============================================================ */
.pa-hero{--px:0;--py:0;position:relative;overflow:hidden;isolation:isolate;color:#fff;
  padding:clamp(72px,10vw,120px) 0 clamp(56px,8vw,96px);
  background:radial-gradient(620px 250px at 76% 62%, rgba(254,192,19,.30) 0%, rgba(254,192,19,0) 72%),
    radial-gradient(1100px 520px at 76% 62%, rgba(249,115,22,.42) 0%, rgba(234,88,12,.12) 46%, rgba(13,19,38,0) 80%),
    #0D1326}
.pa-hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.pa-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:96px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:13px;font-weight:700;
  letter-spacing:.04em;color:#CCEEFF;backdrop-filter:blur(6px)}
.pa-eyebrow .dot{width:9px;height:9px;border-radius:50%;background:#FB923C;
  box-shadow:0 0 0 4px rgba(251,146,60,.22);animation:paPulse 2.4s ease-in-out infinite}
@keyframes paPulse{0%,100%{box-shadow:0 0 0 4px rgba(251,146,60,.22)}50%{box-shadow:0 0 0 8px rgba(251,146,60,.06)}}
.pa-hero h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:#fff;
  font-size:clamp(34px,4.6vw,58px);line-height:1.1;letter-spacing:-.01em;margin:22px 0 0}
.pa-accent{background:linear-gradient(120deg,#FDBA74 0%,#FED7AA 55%,#FFEDD5 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pa-lead{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:#CCEEFF;margin:22px 0 0;max-width:52ch}
.pa-hero strong{color:#fff}
.pa-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.pa-btn,.pa-btn2{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:15px 28px;
  border-radius:96px;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.pa-btn{background:linear-gradient(120deg,#EA580C 0%,#F97316 52%,#FEC013 100%);color:#fff;
  box-shadow:0 14px 34px -12px rgba(234,88,12,.6)}
.pa-btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(234,88,12,.78);color:#fff;text-decoration:none}
.pa-btn svg{transition:transform .2s}.pa-btn:hover svg{transform:translateX(4px)}
.pa-btn2{background:rgba(22,33,64,.72);border:1px solid rgba(138,194,229,.28);color:#E6F8FA}
.pa-btn2:hover{background:rgba(23,41,77,.9);border-color:#FB923C;color:#fff;text-decoration:none}
.pa-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px}
.pa-trust span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.78)}
.pa-trust svg{width:17px;height:17px;color:#FDBA74;flex:none}

/* lista usług z menu pollyart.pl */
.pa-uslugi{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:clamp(40px,6vw,72px);position:relative;z-index:1}
.pa-grupa{background:rgba(22,33,64,.55);border:1px solid rgba(138,194,229,.18);border-radius:18px;
  padding:24px 22px;backdrop-filter:blur(6px)}
.pa-grupa h3{font-family:'Playfair Display',Georgia,serif;font-size:21px;color:#FDBA74;margin:0 0 12px}
.pa-grupa ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pa-grupa li{margin:0}
.pa-grupa a{display:grid;gap:2px;padding:10px 12px;margin:0 -12px;border-radius:10px;text-decoration:none;
  transition:background .2s}
.pa-grupa a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.pa-grupa b{color:#fff;font-size:15.5px;font-weight:700}
.pa-grupa a:hover b{color:#FDBA74}
.pa-grupa span{color:#9FB6C9;font-size:13.5px;line-height:1.45}

/* scena: przeskalowana do kolumny, dym nie wychodzi poza sekcję */
.pa-hero .hero-rocket-box{padding:3rem 1.5rem 0}
@media(max-width:980px){
  .pa-hero__in{grid-template-columns:1fr}
  .pa-hero .hero-rocket-box{max-width:520px;margin:0 auto;width:100%}
  .pa-hero{background:radial-gradient(70vw 240px at 50% 58%, rgba(254,192,19,.26) 0%, rgba(254,192,19,0) 72%),
    radial-gradient(120vw 480px at 50% 58%, rgba(249,115,22,.38) 0%, rgba(234,88,12,.12) 46%, rgba(13,19,38,0) 80%),#0D1326}
}
@media(max-width:560px){.pa-btn,.pa-btn2{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.pa-eyebrow .dot{animation:none}}

/* Poprawki po podglądzie 22.09: tekst zawsze nad sceną, poświata tylko na laptopie,
   na telefonie rakieta nie wlatuje w przyciski. */
.pa-hero__txt{position:relative;z-index:2}
.pa-hero .rocket-glow{height:auto;bottom:0;max-height:82%}
@media(max-width:980px){.pa-hero .hero-rocket-box{padding-top:13rem}}
@media(max-width:560px){.pa-hero .hero-rocket-box{padding-top:11rem}}