/* ═══════════════════════════════════════════════════════════════════════
   ULTIMATEMOVE v3
   Trzy stylistyki i trzy zestawy krojów, przełączane panelem w prawym
   dolnym rogu. Wybór zapamiętuje się w adresie (#theme=…&font=…),
   więc możesz wysłać komuś link do konkretnego wariantu.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── PALETA ──────────────────────────────────────────────────
   Wylacznie Twoje hexy:
     #a100ff, #a600ff  fiolet Ultimate Neon (astra global-color 0 i 1)
     #7A0010           Sanguine Royalty z Imperial Midnight, wylacznie CTA
     #00a1fe           cyan Ultimate Neon (astra global-color 6)
     #E7F6FF           tekst Ultimate Neon (astra global-color 3)
     #E6EDF5           Liquid Platinum z Imperial Midnight
     #04030a           baza Ultimate Neon
   Jasniejsze warianty to color-mix z biela albo czernia, wiec zostaja
   w tej samej rodzinie. Zadnych odcieni z zewnatrz.                  */
:root{
  --violet:#a100ff; --violet-2:#a600ff;
  --violet-soft:color-mix(in srgb,#a100ff 60%,#E7F6FF);
  --blood:#7A0010;  --blood-hi:color-mix(in srgb,#7A0010 66%,#E6EDF5);
  --cyan:#00a1fe;   --cyan-soft:color-mix(in srgb,#00a1fe 64%,#E7F6FF);
  /* dane: lodowy blekit z rodziny #00a1fe, zamiast zieleni */
  --data:#4db8f5;   --data-lite:color-mix(in srgb,#00a1fe 42%,#E7F6FF);
  --data-dim:color-mix(in srgb,#E7F6FF 24%,#04030a);
  --loss:color-mix(in srgb,#E7F6FF 44%,#04030a);
  --bg:#04030a;
  /* powierzchnie: czern z domieszka fioletu zamiast twardej czerni */
  --bg2:color-mix(in srgb,#a100ff 7%,#04030a);
  --bg3:color-mix(in srgb,#a100ff 13%,#04030a);
  --ink:#ffffff; --ink1:#E7F6FF;
  --ink2:color-mix(in srgb,#E6EDF5 74%,transparent);
  --ink3:color-mix(in srgb,#E6EDF5 48%,transparent);
  --line:color-mix(in srgb,#E7F6FF 12%,transparent);
  --line-hi:color-mix(in srgb,#E7F6FF 24%,transparent);
  --glass:color-mix(in srgb,#E7F6FF 4.5%,transparent);
  --acc:var(--violet); --acc-lite:var(--violet-soft);
  --acc-deep:color-mix(in srgb,#a100ff 52%,#04030a);
  --acc2:var(--cyan);  --acc2-lite:var(--cyan-soft);
  --cta:var(--blood);  --cta-deep:color-mix(in srgb,#7A0010 66%,#000);
  --cta-lite:var(--blood-hi); --cta-ink:#fff;
  --grain:.20;
}
/* ─── ALTERNATYWNE STYLISTYKI (przelacznik w prawym dolnym rogu) ─── */
[data-theme="neon"]{ --cta:var(--violet); --cta-deep:color-mix(in srgb,#a100ff 52%,#04030a);
  --cta-lite:var(--violet-soft); }
[data-theme="midnight"]{
  --bg:#0B0F19; --bg2:#151B2B; --bg3:#1C2436; --ink1:#E6EDF5;
  --acc:#7A0010; --acc-lite:color-mix(in srgb,#7A0010 66%,#E6EDF5);
  --acc-deep:color-mix(in srgb,#7A0010 66%,#000);
  --acc2:#E6EDF5; --acc2-lite:#ffffff;
  --data:color-mix(in srgb,#7A0010 55%,#E6EDF5); --data-lite:color-mix(in srgb,#7A0010 30%,#E6EDF5); }
[data-theme="platinum"]{
  --bg:#04030a; --bg2:color-mix(in srgb,#E7F6FF 4%,#04030a); --bg3:color-mix(in srgb,#E7F6FF 8%,#04030a);
  --acc:#E6EDF5; --acc-lite:#ffffff; --acc-deep:color-mix(in srgb,#E6EDF5 40%,#04030a);
  --cta:#7A0010; --cta-deep:color-mix(in srgb,#7A0010 66%,#000); --cta-lite:color-mix(in srgb,#7A0010 66%,#E6EDF5);
  --acc2:#00a1fe; }
/* ─── KROJE ─────────────────────────────────────────────────────
   Obecnie używamy Plus Jakarta Sans (nagłówki), Montserrat (tekst)
   oraz Consolas
   (wszystkie liczby, bo ma stałą szerokość cyfr, więc liczniki
   nie skaczą podczas animacji).                                  */
[data-font="montserrat"]{
  --f-head:Montserrat, system-ui, sans-serif;
  --f-body:Montserrat, system-ui, sans-serif;
  --head-w:900; --head-w2:800; --head-track:-.045em;
}
[data-font="jakarta"]{
  --f-head:"Plus Jakarta Sans", system-ui, sans-serif;
  --f-body:"Plus Jakarta Sans", system-ui, sans-serif;
  --head-w:800; --head-w2:700; --head-track:-.038em;
}
/* mieszanka: nagłówki Jakarta (geometryczna, ostrzejsza),
   tekst Montserrat (szerszy, lepiej się czyta w akapicie) */
[data-font="mix"]{
  --f-head:"Plus Jakarta Sans", system-ui, sans-serif;
  --f-body:Montserrat, system-ui, sans-serif;
  --head-w:800; --head-w2:700; --head-track:-.04em;
}
:root{
  --mono:Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  --r:12px; --r-l:20px; --r-xl:28px; --r-2xl:40px;
  --content:1560px;
  --gut:clamp(1.15rem,4vw,4rem);
  --ez:cubic-bezier(.16,1,.3,1);
  --ez-spring:cubic-bezier(.34,1.5,.5,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink1);background:var(--bg);
  font-family:var(--f-body);
  font-size:clamp(1.02rem,.98rem + .22vw,1.12rem);
  line-height:1.62;font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s var(--ez),color .5s var(--ez);
}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:#fff}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--f-head);
  font-weight:var(--head-w2);line-height:1.02;letter-spacing:var(--head-track);
  /* kerning wlaczony jawnie: bez tego "rz" i "Ze" sklejaly sie
     przy ujemnym trackingu i wadze 900 */
  font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1}
h1{font-size:clamp(2.6rem,1.1rem + 6.2vw,7rem);font-weight:var(--head-w);line-height:.94;
  letter-spacing:calc(var(--head-track) + .014em)}
h2{font-size:clamp(2.05rem,1.1rem + 3.6vw,4.4rem)}
h3{font-size:clamp(1.2rem,1.02rem + .8vw,1.7rem);letter-spacing:-.025em;line-height:1.14}
h4{font-size:1.02rem;letter-spacing:-.015em;line-height:1.3}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.hold{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(3.4rem,6vw,6.4rem);position:relative}
/* PRZEJSCIA MIEDZY SEKCJAMI
   Poswiata siedzi OKRAKIEM na granicy sekcji (top:-260px) i jest
   wygaszona maska w obie strony, wiec nie ma zadnej krawedzi ani
   u gory, ani u dolu. To bylo zrodlo tych poziomych kresek.       */
.sec::before,.sec-sm::before{content:"";position:absolute;left:0;right:0;
  top:-260px;height:560px;pointer-events:none;z-index:0;
  background:radial-gradient(62% 120% at 50% 50%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 58%,transparent 100%)}
.sec>*,.sec-sm>*{position:relative;z-index:1}
.sec--plain::before{display:none}
/* sekcje z wlasnym tlem tez nie moga sie urywac */
.sec[style*="background"]{-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
/* naglowki sekcji, ktore inaczej lamia sie na dwie waskie linie */
.mid,[data-mid]{text-align:center;margin-inline:auto}
[data-mid] h2{max-width:22ch;margin-inline:auto}
[data-mid] .lead{margin-inline:auto}
/* tresc pod naglowkiem wraca do lewej */
[data-mid] .plans,[data-mid] .tools,[data-mid] .cfg,[data-mid] .chart,
[data-mid] .faq,[data-mid] .bk-wrap,[data-mid] .switches{text-align:left}
/* sekcje wysrodkowane w calosci: naglowek, lead, przypisy */
[data-mid]{text-align:center}
[data-mid] h2,[data-mid] .lead,[data-mid] .fnote,[data-mid] p{margin-inline:auto}
[data-mid] .mid{margin-inline:auto}
/* elementy, ktore maja zostac wyrownane do lewej mimo srodkowania sekcji */
[data-mid] .plan,[data-mid] .card,[data-mid] .step,[data-mid] .eng__i,
[data-mid] .safe__i,[data-mid] .vs__aside,[data-mid] .ev3__c,
[data-mid] .why__i,[data-mid] table,[data-mid] .bk,[data-mid] .cfg,
[data-mid] .cs__c,[data-mid] details{text-align:left}
[data-mid] .why__i,[data-mid] .ev3__c{text-align:left}
[data-mid] .bench__head{flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:2rem}
[data-mid] .bench__head>div{margin-inline:auto;max-width:60ch}
[data-mid] .bench__head>div>h2{margin-inline:auto}
[data-mid] .bench__head .lead{margin-inline:auto}
[data-mid] .bench__head .switches{justify-content:center;flex-wrap:wrap;max-width:100%}
[data-mid] .bench__head>div{max-width:min(60ch,100%)}
.mid h2{max-width:22ch;margin-inline:auto}
.mid .lead{margin-inline:auto}
.mid .num{display:block}
.sec-sm{padding-block:clamp(2.6rem,4vw,4.2rem)}
/* ─── reveal: deblur + rise ─── */
/* delikatny zoom zamiast unoszenia: tresc "dochodzi do ostrosci",
   oko nie musi jej gonic w pionie */
.rv{opacity:0;transform:scale(.972);filter:blur(10px);
    transition:opacity 1.5s var(--ez),transform 1.7s var(--ez),filter 1.5s var(--ez)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv[data-d="1"]{transition-delay:.13s}
.rv[data-d="2"]{transition-delay:.26s}
.rv[data-d="3"]{transition-delay:.39s}
.rv[data-d="4"]{transition-delay:.52s}
.rv[data-d="5"]{transition-delay:.65s}
.rv[data-d="6"]{transition-delay:.78s}
.rvl{display:block;overflow:hidden}
.rvl>span{display:block;opacity:0;transform:translateY(105%);filter:blur(8px);
  transition:opacity 1.4s var(--ez),transform 1.6s var(--ez),filter 1.4s var(--ez)}
.rvl.in>span{opacity:1;transform:none;filter:blur(0)}
/* ─── drobnica ─── */
.tag{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.7rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--ink2);
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:99px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(14px)}
.tag .led{width:6px;height:6px;border-radius:50%;background:var(--acc2-lite);animation:led 2.4s var(--ez) infinite}
@keyframes led{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc2-lite) 60%,transparent)}
               70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.num{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  color:var(--acc-lite);text-transform:uppercase}
.lead{font-size:clamp(1.06rem,.98rem + .5vw,1.32rem);color:var(--ink2);line-height:1.55;max-width:56ch}
/* gradient w nagłówku: akcent marki, nigdy zieleń */
.hl{background:linear-gradient(100deg,var(--acc-lite) 0%,var(--acc2-lite) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* ─── przyciski ─── */
.b{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.05rem 1.9rem;border-radius:var(--r);
  font-weight:700;font-size:1rem;letter-spacing:-.012em;color:var(--cta-ink);
  background:linear-gradient(120deg,var(--cta) 0%,var(--cta-deep) 55%,var(--cta) 100%);
  background-size:220% 100%;
  /* podwojna poswiata: krew blizej przycisku, fiolet szerzej */
  box-shadow:0 10px 28px -14px color-mix(in srgb,var(--cta) 92%,transparent),
             0 20px 60px -26px color-mix(in srgb,var(--acc) 85%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22);
  transition:background-position 1.1s var(--ez),transform .32s var(--ez),box-shadow .5s var(--ez)}
.b:hover{background-position:100% 0;transform:scale(1.022);
  box-shadow:0 14px 40px -16px color-mix(in srgb,var(--cta) 85%,transparent),
             0 30px 90px -36px color-mix(in srgb,var(--acc) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.26)}
.b:active{transform:scale(.986)}
/* blysk jest ledwo widoczny i wolny - ma sugerowac material, nie krzyczec */
.b::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%)}
.b:hover::after{animation:sheen 1.5s var(--ez)}
@keyframes sheen{to{transform:translateX(120%)}}
.b .tail{font-family:var(--mono);font-size:.84rem;font-weight:600;opacity:.78}
.b .arw{transition:transform .35s var(--ez)}
.b:hover .arw{transform:translateX(4px)}
.b-2{background:transparent;border:1px solid var(--line-hi);color:var(--ink1);box-shadow:none;background-image:none}
.b-2{transition:border-color .5s var(--ez),background .5s var(--ez),transform .32s var(--ez),box-shadow .5s var(--ez)}
.b-2:hover{border-color:color-mix(in srgb,var(--acc) 46%,transparent);transform:scale(1.022);
  background:color-mix(in srgb,var(--acc) 7%,transparent);
  box-shadow:0 18px 50px -26px color-mix(in srgb,var(--acc) 60%,transparent)}
:focus-visible{outline:2px solid var(--acc2-lite);outline-offset:3px;border-radius:8px}
/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:1.4rem;
  padding:.85rem var(--gut);border-bottom:0;
  /* zadnej twardej krawedzi nad hero, tylko miekki cien */
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 68%,transparent) 0%,
                                    color-mix(in srgb,var(--bg) 24%,transparent) 62%, transparent 100%);
  transition:background .45s var(--ez),backdrop-filter .45s var(--ez),border-color .45s var(--ez),padding .45s var(--ez)}
.nav.stuck{background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(26px) saturate(170%);padding-block:.6rem;
  box-shadow:0 1px 0 var(--line),0 18px 40px -30px #000}
.brand__mark{height:40px;width:40px;object-fit:contain;flex:none;
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--acc) 55%,transparent));
  transition:transform .7s var(--ez)}
.brand__logo{height:52px;width:auto;display:block}
.brand:hover .brand__mark{transform:scale(1.09)}
@media(max-width:640px){.brand__logo{display:none}.brand__mark{height:36px;width:36px}}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-head);font-weight:800;
  font-size:1.06rem;letter-spacing:-.03em;color:var(--ink)}
.brand img{height:46px;width:auto;max-width:230px;object-fit:contain}
/* Menu zakotwiczone w osi okna. Sam flex ustawial je 84 px w lewo, bo
   prawa strona paska (jezyk, konto, CTA) jest szersza od logo i zabierala
   wiecej wolnego miejsca. Kotwica dziala tylko tam, gdzie menu w ogole
   jest widoczne, wiec na wezszych ekranach nic sie nie zmienia. */
@media(min-width:1380px){
  .nav{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;gap:1rem}
  .nav__mid{margin:0 auto}
  .nav__end{margin-left:auto}
  /* nic w pasku sie nie lamie: przy ciasnocie kurczy sie odstep w menu,
     a nie wysokosc paska */
  .nav__mid a,.nav__end .b,.acct{white-space:nowrap}
}
@media(min-width:1380px) and (max-width:1460px){
  .nav{gap:.8rem}
  .nav__mid{padding:.25rem}
  .nav__mid a{padding-inline:.62rem;font-size:.83rem}
  .nav__end{gap:.5rem}
  .nav__end .b{padding:.62rem .95rem;font-size:.85rem}
  .acct{padding:.55rem .8rem;font-size:.82rem}
}
@media(min-width:1461px) and (max-width:1560px){
  .nav{gap:.7rem}
  .nav__mid a{padding-inline:.72rem;font-size:.86rem}
}
.nav__mid{display:none;margin-inline:auto;gap:.25rem;padding:.3rem;border:1px solid var(--line);
  border-radius:99px;background:var(--glass);backdrop-filter:blur(18px)}
.nav__mid a{position:relative;padding:.55rem 1.05rem;border-radius:99px;font-size:.92rem;
  font-weight:600;color:var(--ink2);transition:color .25s}
.nav__mid a::before{content:"";position:absolute;inset:0;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);opacity:0;transform:scale(.9);
  transition:opacity .3s var(--ez),transform .3s var(--ez)}
.nav__mid a:hover{color:var(--ink)}
.nav__mid a:hover::before{opacity:1;transform:none}
.nav__mid a span{position:relative}
.nav__end{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.lang{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--ink3);
  border:1px solid var(--line);border-radius:8px;padding:.42rem .6rem}
.lang b{color:var(--ink)}
@media(min-width:1380px){.nav__mid{display:flex}.nav__end{margin-left:auto;justify-content:flex-end}}
/* ═══ HERO ═══ */
.hero{position:relative;min-height:min(94svh,940px);display:flex;align-items:flex-end;
  padding:7rem 0 clamp(2rem,4vw,3.5rem);isolation:isolate;overflow:hidden}
.hero__vid{position:absolute;inset:0;z-index:0;overflow:hidden;
  /* material rozplywa sie w tlo strony - stad brak poziomej krawedzi */
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%)}
/* zadnego ken-burns na wideo. Material ma wlasny ruch, drugi
   nalozony na niego wyglada jak trzesienie ziemi. */
.hero__vid video{width:100%;height:100%;object-fit:cover}
.hero__fade{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* maska: cala warstwa gasnie u dolu, wiec hero nie konczy sie kreska */
  -webkit-mask-image:linear-gradient(180deg,#000 0 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 72%,transparent 100%);
  background:
    radial-gradient(110% 70% at 6% 2%, color-mix(in srgb,var(--acc) 18%,transparent) 0%, transparent 52%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 46%,transparent) 0%,
      color-mix(in srgb,var(--bg) 4%,transparent) 22%,
      color-mix(in srgb,var(--bg) 26%,transparent) 58%,
      color-mix(in srgb,var(--bg) 80%,transparent) 84%, var(--bg) 100%)}
.hero__mesh{display:none;position:absolute;inset:0;z-index:-2;opacity:var(--grain);pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(75% 65% at 40% 45%,#000 0%,transparent 100%);
  mask-image:radial-gradient(75% 65% at 40% 45%,#000 0%,transparent 100%)}
.hero__inner{position:relative;z-index:2;width:100%}
/* czytelnosc: rozmycie tylko pod kolumna tekstu, wygaszone na krawedziach */
.hero__inner>.hold{position:relative}
/* ledwo wyczuwalne zmiekczenie tla pod kolumna tekstu - tyle, zeby
   oko zlapalo litery, nie tyle, zeby zabic material */
.hero__inner>.hold::before,.hero__inner>.hold::after{content:"";position:absolute;
  pointer-events:none;z-index:-1;
  inset:-7rem -8rem -5rem -6rem;width:min(74rem,120%)}
/* warstwa 1: szersza, bardzo slabe rozmycie, maska gasnie do zera na kazdej krawedzi */
.hero__inner>.hold::before{
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  -webkit-mask-image:radial-gradient(58% 52% at 34% 50%,#000 0 8%,rgba(0,0,0,.55) 46%,transparent 100%);
  mask-image:radial-gradient(58% 52% at 34% 50%,#000 0 8%,rgba(0,0,0,.55) 46%,transparent 100%)}
/* warstwa 2: wezsza, mocniejsze rozmycie + przyciemnienie dokladnie pod litery */
.hero__inner>.hold::after{
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  background:radial-gradient(46% 46% at 30% 50%,color-mix(in srgb,var(--bg) 30%,transparent),transparent 100%);
  -webkit-mask-image:radial-gradient(40% 38% at 30% 50%,#000 0 4%,rgba(0,0,0,.4) 40%,transparent 92%);
  mask-image:radial-gradient(40% 38% at 30% 50%,#000 0 4%,rgba(0,0,0,.4) 40%,transparent 92%)}
.hero__inner>.hold{overflow:clip}
@media(max-width:820px){.hero__inner>.hold::before,.hero__inner>.hold::after{
  inset:-5rem -2rem -4rem -2rem;width:auto;right:-2rem}}
.hero h1{max-width:16ch;margin-top:1.5rem}
.hero__lead{margin-top:1.8rem;max-width:52ch;font-size:clamp(1.06rem,.98rem + .55vw,1.4rem);
  color:var(--ink1);line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
.hero__proof{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.5rem;font-size:.86rem;color:var(--ink2)}
.hero__proof i{font-style:normal;display:inline-flex;align-items:center;gap:.45rem}
.hero__proof svg{width:15px;height:15px;color:var(--acc2-lite);flex:none}
/* ═══ PASEK METRYK ═══
   Format z v2 (duże cyfry mono, jednostka w akcencie, kreska u dołu),
   ale gęstość informacji z v1: krótka etykieta pod liczbą, bez rozlewania. */
.metrics{display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:2px solid var(--line);border-radius:26px;overflow:hidden;
  margin-top:clamp(2.2rem,4.5vw,3.4rem);backdrop-filter:blur(16px)}
.metrics__c{background:color-mix(in srgb,var(--bg) 66%,transparent);
  padding:1.2rem clamp(1rem,2.2vw,1.7rem);position:relative;overflow:hidden}
.metrics__c::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  /* bez szorstkiego poczatku i konca koloru */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  transition:width 1.6s var(--ez) .3s}
.metrics.in .metrics__c::after{width:100%}
.metrics__v{font-family:var(--mono);font-size:clamp(1.5rem,1.15rem + 1.2vw,2.15rem);
  font-weight:700;letter-spacing:-.045em;color:var(--ink);line-height:1;white-space:nowrap}
.metrics__v .u{font-size:.46em;color:var(--acc2-lite);margin-left:.16em;font-weight:600;letter-spacing:0}
.metrics__v .ar{color:var(--ink3);margin-inline:.2em;font-size:.66em}
.metrics__l{margin-top:.45rem;font-size:.76rem;color:var(--ink3);line-height:1.35;max-width:30ch}
/* ═══ WYKRES ═══ */
.bench__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.5rem}
.switches{display:flex;flex-wrap:wrap;gap:.8rem}
.sw{position:relative;display:flex;padding:.28rem;border:1px solid var(--line);
  border-radius:99px;background:var(--glass);gap:.2rem}
.sw button{position:relative;z-index:1;padding:.52rem 1rem;border-radius:99px;font-size:.83rem;
  font-weight:600;color:var(--ink3);transition:color .28s var(--ez);white-space:nowrap}
.sw button.on{color:var(--cta-ink)}
.sw__pill{position:absolute;inset:.28rem auto .28rem .28rem;border-radius:99px;z-index:0;
  background:linear-gradient(120deg,var(--cta),var(--cta-deep));
  box-shadow:0 6px 20px -8px var(--cta);
  transition:transform .5s var(--ez-spring),width .5s var(--ez-spring)}
.chart{border:1px solid var(--line);border-bottom-color:transparent;border-radius:32px;
  background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 55%,color-mix(in srgb,var(--bg2) 55%,transparent) 100%);
  padding:clamp(1.2rem,3vw,2.6rem);position:relative;overflow:hidden;
  /* dol rozplywa sie w strone, zamiast konczyc twarda kreska */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%)}
.chart::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 62%)}
.chart__spec{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:1.5rem;
  font-family:var(--mono);font-size:.75rem;color:var(--ink3)}
.chart__spec b{color:var(--ink1);font-weight:600}
.chart__legend{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:1.8rem;font-size:.84rem;font-weight:600}
.chart__legend i{display:inline-block;width:20px;height:10px;border-radius:3px;margin-right:.55rem;vertical-align:-1px}
.lg-b i{background:var(--data-dim)}
.lg-a i{background:linear-gradient(90deg,var(--data),var(--data-lite));
  box-shadow:0 0 16px -2px var(--data)}
.plot-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:.4rem;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.plot-scroll::-webkit-scrollbar{display:none}
.plot-scroll::-webkit-scrollbar{height:6px}
.plot-scroll::-webkit-scrollbar-thumb{background:var(--line-hi);border-radius:99px}
.plot{display:flex;align-items:flex-end;gap:clamp(.4rem,1.4vw,1.4rem);
  height:clamp(260px,34vw,420px);position:relative;padding-top:2.6rem}
.plot__grid{position:absolute;inset:2.6rem 0 0 0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between}
.plot__grid span{display:block;height:1px;background:var(--line)}
.gcol{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  position:relative;min-width:0}
.gcol__bars{display:flex;align-items:flex-end;justify-content:center;gap:clamp(3px,.5vw,7px);height:100%}
.bar{position:relative;flex:1;max-width:46px;border-radius:5px 5px 0 0;height:0;
  transition:height 1.05s var(--ez-spring)}
.bar--b{background:linear-gradient(180deg,var(--data-dim),color-mix(in srgb,var(--data-dim) 70%,#000))}
.bar--a{background:linear-gradient(180deg,var(--data-lite),var(--data));
  box-shadow:0 0 26px -6px var(--data)}
.bar__cap{position:absolute;left:50%;transform:translate(-50%,-118%);top:0;white-space:nowrap;
  font-family:var(--mono);font-size:clamp(.6rem,.9vw,.78rem);font-weight:700;color:var(--ink2);
  opacity:0;transition:opacity .5s var(--ez) .7s}
.bar--a .bar__cap{color:var(--data-lite)}
.chart.live .bar__cap{opacity:1}
.gcol__x{margin-top:1rem;text-align:center;min-height:44px;display:flex;flex-direction:column;
  align-items:center;gap:.35rem}
.gcol__x b{font-size:.72rem;font-weight:700;color:var(--ink2);letter-spacing:-.01em;line-height:1.15}
.gcol__x i{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--data-lite);font-weight:700}
.scan{position:absolute;inset:2.6rem 0 0 0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc2) 16%,transparent) 45%,
    color-mix(in srgb,var(--acc2) 50%,transparent) 50%,color-mix(in srgb,var(--acc2) 16%,transparent) 55%,transparent)}
.chart.scanning .scan{opacity:1;animation:scanx 1.15s var(--ez)}
@keyframes scanx{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.plot-hint{display:none;margin-top:.9rem;font-size:.74rem;color:var(--ink3);font-family:var(--mono)}
.chart__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;margin-top:1.6rem;
  padding-top:1.3rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--ink3)}
@media(max-width:820px){.plot{min-width:680px}.plot-hint{display:block}}
/* ═══ SUWAK PRZED / PO ═══ */
.ba-wrap{position:relative}
.ba{position:relative;border-radius:26px;overflow:hidden;border:2px solid var(--line);
  background:var(--bg2);aspect-ratio:16/10;touch-action:none;cursor:ew-resize;user-select:none;
  transition:border-color .35s var(--ez)}
.ba:hover{border-color:var(--line-hi)}
@media(max-width:700px){.ba{aspect-ratio:4/3}}
.ba canvas,.ba video,.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__clip{position:absolute;inset:0;overflow:hidden;width:50%}
.ba__clip>*{width:var(--full,100vw)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:5;transform:translateX(-1px);
  background:linear-gradient(180deg,transparent,var(--acc2-lite) 12%,var(--acc2-lite) 88%,transparent);
  box-shadow:0 0 22px 2px color-mix(in srgb,var(--acc2) 70%,transparent)}
.ba__knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;
  background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--acc2) 65%,transparent);display:grid;place-items:center;
  box-shadow:0 10px 34px -10px var(--acc2);transition:transform .2s var(--ez)}
.ba:active .ba__knob{transform:translate(-50%,-50%) scale(.93)}
.ba__knob svg{width:22px;height:22px;color:var(--acc2-lite)}
.ba__lbl{position:absolute;top:1.1rem;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.42rem .8rem;border-radius:99px;z-index:4;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(10px)}
.ba__lbl--l{left:1.1rem;color:var(--loss);border:1px solid color-mix(in srgb,var(--loss) 40%,transparent)}
.ba__lbl--r{right:1.1rem;color:var(--data-lite);border:1px solid color-mix(in srgb,var(--data) 40%,transparent)}
/* Legenda pod płótnem, poza obszarem cięcia. Nie da się jej zgnieść suwakiem. */
.ba__legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  margin-top:.9rem;font-family:var(--mono);font-size:.74rem}
.ba__legend b{font-weight:700}
.ba__legend .l{color:var(--loss)}
.ba__legend .r{color:var(--data-lite)}
.ba__legend .c{color:var(--ink3)}
.ba__hint{position:absolute;bottom:1.1rem;left:50%;translate:-50% 0;font-size:.74rem;color:var(--ink2);
  background:color-mix(in srgb,var(--bg) 65%,transparent);padding:.35rem .8rem;border-radius:99px;
  backdrop-filter:blur(8px);z-index:4;transition:opacity .4s}
.ba.touched .ba__hint{opacity:0}
/* tryb wideo */
.ba__slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:var(--bg3);padding:2rem}
.ba__slot p{font-family:var(--mono);font-size:.78rem;color:var(--ink3);max-width:34ch;line-height:1.6}
.ba__slot b{display:block;color:var(--ink1);font-size:.95rem;margin-bottom:.6rem;font-family:var(--f-head)}
/* dwa porownania obok siebie: po lewej frametime, po prawej nagranie */
.ba-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:1080px){.ba-grid{grid-template-columns:1fr 1fr}}
.ba-col__h{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.9rem}
.ba-col__h b{font-family:var(--f-head);font-size:1.02rem;color:var(--ink);letter-spacing:-.02em}
.ba-col__h span{font-family:var(--mono);font-size:.7rem;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase}
/* OS Y w HTML, nad canvasami ale POZA .ba__clip - suwak jej nie tnie */
.ba__axis{position:absolute;inset:0;pointer-events:none;z-index:3}
.ba__axis span{position:absolute;left:.75rem;transform:translateY(-50%);font-family:var(--mono);
  font-size:.68rem;color:var(--ink3);text-shadow:0 0 7px var(--bg2),0 0 4px var(--bg2)}
/* ═══ KARTY ═══ */
.ev{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:900px){.ev{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;border:2px solid var(--line);border-radius:26px;will-change:transform;
  background:linear-gradient(180deg,var(--glass),transparent);
  padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .6s var(--ez),transform .8s var(--ez),box-shadow .8s var(--ez)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--acc) 20%,transparent),transparent 62%);
  transition:opacity .4s var(--ez)}
.card:hover{border-color:color-mix(in srgb,var(--acc) 28%,transparent);transform:scale(1.012);
  box-shadow:0 30px 90px -46px color-mix(in srgb,var(--acc) 60%,transparent)}
.card:hover::before{opacity:1}
.card__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--acc-lite);margin-bottom:1rem}
.card p{margin-top:.75rem;font-size:.94rem;color:var(--ink2);line-height:1.55}
.card__big{font-family:var(--mono);font-size:clamp(2.4rem,1.8rem + 2.4vw,3.7rem);font-weight:700;
  letter-spacing:-.05em;line-height:1;margin:1.4rem 0 .2rem;color:var(--ink)}
.card__big .u{font-size:.34em;margin-left:.22em;letter-spacing:0;color:var(--acc2-lite)}
.card__src{margin-top:auto;padding-top:1.4rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.mini{margin-top:1.3rem;display:flex;flex-direction:column;gap:.75rem}
.mini__t{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;margin-bottom:.38rem}
.mini__t span{color:var(--ink2);font-weight:600}
.mini__t b{font-family:var(--mono);font-size:.94rem;color:var(--ink)}
.mini__tr{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.mini__f{height:100%;border-radius:99px;width:0;transition:width 1.2s var(--ez-spring)}
.in .mini__f{width:var(--w)}
.mini__r:nth-child(2) .mini__f{transition-delay:.1s}
.mini__r:nth-child(3) .mini__f{transition-delay:.2s}
.f-dim{background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 20%,transparent),color-mix(in srgb,var(--ink) 34%,transparent))}
.f-loss{background:linear-gradient(90deg,color-mix(in srgb,var(--loss) 45%,#000),var(--loss))}
.f-gain{background:linear-gradient(90deg,var(--data),var(--data-lite));box-shadow:0 0 18px -3px var(--data)}
/* ═══ PAKIETY ═══ */
.plans{display:grid;gap:1.2rem;grid-template-columns:1fr;align-items:stretch}
@media(min-width:980px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;border:2px solid var(--line);border-radius:26px;
  padding:clamp(1.5rem,2.6vw,2.1rem);background:linear-gradient(180deg,var(--glass),transparent);
  display:flex;flex-direction:column;transition:transform .45s var(--ez),border-color .35s,box-shadow .45s var(--ez)}
.plan:hover{transform:scale(1.015);border-color:var(--line-hi)}
.plan--best{border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 18%,transparent),transparent 58%);
  box-shadow:0 34px 90px -40px var(--acc)}
@media(min-width:980px){.plan--best{transform:translateY(-18px)}.plan--best:hover{transform:translateY(-18px) scale(1.015)}}
.plan__tag{position:absolute;top:-.75rem;left:1.5rem;font-family:var(--mono);font-size:.62rem;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:.38rem .78rem;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);border:1px solid var(--line-hi);color:var(--ink2)}
@keyframes breathe{0%,100%{box-shadow:0 8px 24px -10px color-mix(in srgb,var(--cta) 80%,transparent)}
                   50%{box-shadow:0 10px 34px -8px color-mix(in srgb,var(--cta) 100%,transparent)}}
.plan--best{position:relative}
.plan__tag--hot{animation:breathe 4.5s var(--ez) infinite;background:linear-gradient(100deg,var(--cta),var(--cta-lite));border-color:transparent;
  color:var(--cta-ink);box-shadow:0 8px 24px -8px var(--acc)}
.plan__sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;
  color:var(--acc2-lite);font-weight:600}
.plan__for{margin-top:.5rem;font-size:.86rem;color:var(--ink3);margin-bottom:0}
@media(min-width:980px){
  .plans{align-items:stretch;
    grid-template-rows:auto auto auto auto auto auto auto}
  .plan{display:grid;grid-row:span 7;grid-template-rows:subgrid;gap:0}
  .plan__p{margin-top:1.3rem;align-self:end}
}
.plan__p{margin-top:1.3rem;display:flex;align-items:baseline;gap:.5rem}
.plan__p b{font-family:var(--mono);font-size:2.6rem;font-weight:700;letter-spacing:-.05em;color:var(--ink)}
.plan__p span{font-size:.82rem;color:var(--ink3)}
.plan .b{margin-top:1.4rem;width:100%}
.plan__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;align-self:center;
  font-size:.82rem;font-weight:600;color:var(--ink3);transition:color .25s}
.plan__more:hover{color:var(--acc2-lite)}
.plan__more svg{width:13px;height:13px;transition:transform .3s var(--ez)}
.plan__more:hover svg{transform:translateX(3px)}
/* mapa strony w stopce */
.map{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid var(--line)}
.map h5{margin:0 0 .9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc-lite);font-weight:700}
.map ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.map a{font-size:.88rem;color:var(--ink2);transition:color .22s}
.map a:hover{color:var(--ink)}
.fl{list-style:none;margin:1.6rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.7rem;font-size:.88rem}
.fl li{display:flex;gap:.65rem;align-items:flex-start;color:var(--ink1)}
.fl li.no{color:var(--ink3)}
.fl svg{width:16px;height:16px;flex:none;margin-top:.24em}
.fl li:not(.no) svg{color:var(--acc2-lite)}
.fl li.no svg{color:color-mix(in srgb,var(--ink) 20%,transparent)}
/* ═══ NARZĘDZIA ═══ */
.tools{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tool{position:relative;overflow:hidden;border:2px solid var(--line);border-radius:26px;
  padding:1.6rem;background:linear-gradient(180deg,var(--glass),transparent);
  display:flex;flex-direction:column;gap:.65rem;min-height:200px;
  transition:border-color .35s,transform .45s var(--ez),background .35s}
.tool:hover{transform:scale(1.015);box-shadow:0 30px 90px -46px color-mix(in srgb,var(--acc) 55%,transparent);border-color:color-mix(in srgb,var(--acc) 28%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc2) 10%,transparent),transparent)}
.tool__k{display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:.63rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .6rem;border-radius:6px;
  background:color-mix(in srgb,var(--acc2) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--acc2) 34%,transparent);color:var(--acc2-lite)}
.tool h4{margin-top:.3rem}
.tool p{font-size:.86rem;color:var(--ink2);line-height:1.5}
.tool__go{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.83rem;
  font-weight:700;color:var(--acc2-lite)}
.tool__go svg{width:14px;height:14px;transition:transform .35s var(--ez)}
.tool:hover .tool__go svg{transform:translateX(4px)}
.tool--free::after{content:"0 zł";position:absolute;top:1.2rem;right:1.3rem;font-family:var(--mono);
  font-size:.72rem;font-weight:700;color:var(--acc2-lite)}
/* ═══ REZERWACJA INLINE ═══ */
.bk{display:grid;gap:1.4rem;grid-template-columns:1fr;
  border:2px solid var(--line);border-radius:32px;padding:clamp(1.3rem,3vw,2.4rem);
  background:linear-gradient(180deg,var(--glass),transparent)}
@media(min-width:1000px){.bk{grid-template-columns:.85fr 1.15fr;gap:2.6rem}}
.bk__svc{display:flex;flex-direction:column;gap:.6rem}
.bk__svc button{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.1rem;border-radius:16px;
  border:2px solid var(--line);text-align:left;transition:border-color .3s var(--ez),background .3s var(--ez)}
.bk__svc button:hover{border-color:var(--line-hi);background:var(--glass)}
.bk__svc button[aria-pressed="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,transparent)}
.bk__t{min-width:0}
.bk__svc b{display:block;font-size:.94rem;color:var(--ink);font-family:var(--f-head);letter-spacing:-.015em}
.bk__svc i{font-style:normal;font-size:.75rem;color:var(--ink3);white-space:nowrap}
.bk__svc em{margin-left:auto;flex:none;white-space:nowrap;font-style:normal;font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--ink)}
.bk__days{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.3rem}
.bk__day{flex:none;width:74px;padding:.7rem .4rem;border-radius:14px;border:2px solid var(--line);
  text-align:center;transition:border-color .3s,background .3s}
.bk__day:hover{border-color:var(--line-hi)}
.bk__day[aria-pressed="true"]{border-color:var(--acc2);background:color-mix(in srgb,var(--acc2) 15%,transparent)}
.bk__day span{display:block;font-size:.66rem;color:var(--ink3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.bk__day b{display:block;font-size:1.15rem;color:var(--ink);font-family:var(--mono);margin-top:.2rem}
.bk__day.off{opacity:.32;pointer-events:none}
.bk__tz{display:inline-flex;align-items:center;gap:.45rem}
.bk__tz-l{font-family:var(--mono);font-size:.7rem;color:var(--ink3);letter-spacing:.04em}
.bk__tz select{font-family:var(--mono);font-size:.78rem;color:var(--ink1);cursor:pointer;
  background-color:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:.34rem 1.9rem .34rem .6rem;max-width:min(240px,54vw);
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 1.05rem center,right .75rem center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .35s var(--ez),color .35s var(--ez)}
.bk__tz select:hover,.bk__tz select:focus-visible{border-color:var(--acc2-lite);color:var(--ink)}
/* rozwinieta lista: przegladarka honoruje tylko kolory na <option> */
.bk__tz select option{background:#0d0b16;color:#E7F6FF;padding:.4rem}
.bk__tz select option:checked{background:#2a1150;color:#fff;font-weight:700}
.bk__tzn{margin:.55rem 0 .9rem;font-family:var(--mono);font-size:.72rem;color:var(--ink3)}
.bk__slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5rem}
.bk__slot{padding:.62rem .3rem;border-radius:12px;border:2px solid var(--line);font-family:var(--mono);
  font-size:.84rem;font-weight:600;color:var(--ink1);transition:border-color .25s,background .25s,color .25s}
.bk__slot:hover{border-color:var(--acc2-lite);color:var(--ink)}
.bk__slot[aria-pressed="true"]{border-color:var(--cta);background:var(--cta);color:var(--cta-ink)}
.bk__slot.taken{opacity:.28;text-decoration:line-through;pointer-events:none}
.bk__sum{margin-top:1.6rem;padding-top:1.3rem;border-top:2px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.bk__sum p{font-size:.88rem;color:var(--ink2)}
.bk__sum b{color:var(--ink)}
.bk__sum .b{margin-left:auto}
.bk__note{margin-top:1rem;font-size:.76rem;color:var(--ink3);font-family:var(--mono)}
/* panel rezerwacji wysuwa sie pod siatka pakietow */
.bk-wrap{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s var(--ez),opacity .45s var(--ez),margin .6s var(--ez);margin-top:0}
.bk-wrap.open{grid-template-rows:1fr;opacity:1;margin-top:1.6rem}
.bk-wrap>div{overflow:hidden;min-height:0}
.bk__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:.55rem}
.bk__head h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem)}
.bk__head em{font-style:normal;font-family:var(--mono);font-size:.82rem;color:var(--ink3)}
.bk__get{font-size:.92rem;color:var(--ink2);margin-bottom:1.8rem;max-width:62ch}
.bk__close{margin-left:auto;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;color:var(--ink3);flex:none;transition:border-color .25s,color .25s}
.bk__close:hover{border-color:var(--line-hi);color:var(--ink)}
.bk__close svg{width:14px;height:14px}
/* ═══ DLACZEGO MY: tabela porownawcza ═══ */
.vs{display:grid;gap:1.4rem;grid-template-columns:1fr;border:2px solid var(--line);
  border-radius:32px;overflow:hidden;background:linear-gradient(180deg,var(--glass),transparent)}
@media(min-width:1100px){.vs{grid-template-columns:minmax(300px,.9fr) 1.4fr;gap:0}}
.vs__aside{position:relative;padding:clamp(1.8rem,4vw,3rem);display:flex;flex-direction:column;
  justify-content:center;isolation:isolate;min-height:260px}
.vs__aside::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 90% at 30% 40%,color-mix(in srgb,var(--cta) 42%,transparent),transparent 70%),
             linear-gradient(140deg,color-mix(in srgb,var(--acc) 22%,transparent),transparent 65%)}
/* znak firmowy jako tlo kolumny, rozmyty, bez ruchu */
.vs__aside::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;translate:-50% -50%;
  width:min(420px,88%);aspect-ratio:1;
  background:url("https://ultimatemove.eu/wp-content/uploads/2026/07/Favicon512-a.png")
             center/contain no-repeat;
  filter:blur(8px);opacity:.14}
.vs__aside h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem)}
.vs__aside p{margin-top:.9rem;font-size:.92rem;color:var(--ink1);max-width:44ch;line-height:1.6}
.vs__t{width:100%;border-collapse:collapse;font-size:.9rem}
.vs__t th,.vs__t td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:middle}
@media(max-width:1099px){.vs{border-radius:26px}
  .vs__aside{border-bottom:1px solid var(--line)}
  .vs__aside p{max-width:56ch}
  .vs__t th,.vs__t td{padding:.8rem .9rem}}
@media(max-width:560px){.vs__t{font-size:.82rem}
  .vs__t th,.vs__t td{padding:.7rem .55rem}
  .vs__t thead th:not(:first-child),.vs__t td:not(:first-child){width:19%}}
.vs__t thead th{font-family:var(--f-head);font-size:.92rem;color:var(--ink);font-weight:700}
.vs__t thead th:not(:first-child),.vs__t td:not(:first-child){text-align:center;width:22%}
.vs__t tbody th{font-weight:600;color:var(--ink1)}
.vs__sub{display:block;margin-top:.2rem;font-family:var(--mono);font-size:.68rem;
  font-weight:400;color:var(--ink3);letter-spacing:.01em}
.vs__t tbody tr:last-child th,.vs__t tbody tr:last-child td{border-bottom:0}
.vs__t tbody tr{transition:background .4s var(--ez)}
.vs__t tbody tr:hover{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.vs__y{color:var(--data)}
.vs__n{color:color-mix(in srgb,#E7F6FF 30%,transparent)}
.vs__t td{line-height:0}
.vs__t td>svg,.vs__t td>.vs__num{display:block;margin-inline:auto}
.vs__t td>.vs__num{line-height:1.2}
.vs__t svg{width:18px;height:18px;display:block}
.vs__num{font-family:var(--mono);font-size:.84rem;color:var(--ink2)}
.vs__num b{color:var(--data)}
/* ═══ TRYB COACHINGU ═══
   Klikniecie "Coaching" w naglowku chowa to, co dotyczy sprzetu,
   i zostawia sam coaching. Wyjscie chipem u gory.                */
.nav__mid a.on{color:var(--ink)}
.nav__mid a.on::before{opacity:1;transform:none}
/* karty kategorii coachingu */
.ccats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2.4rem}
.ccat{border:2px solid var(--line);border-radius:26px;padding:1.6rem;
  background:linear-gradient(180deg,var(--glass),transparent);display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .6s var(--ez),transform .8s var(--ez),box-shadow .8s var(--ez)}
.ccat:hover{transform:scale(1.015);border-color:color-mix(in srgb,var(--acc) 28%,transparent);
  box-shadow:0 30px 90px -46px color-mix(in srgb,var(--acc) 60%,transparent)}
.ccat h4{font-size:1.05rem}
.ccat p{font-size:.86rem;color:var(--ink2);line-height:1.5}
.ccat ul{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.ccat li{font-size:.74rem;padding:.28rem .6rem;border-radius:99px;border:1px solid var(--line);color:var(--ink3)}
.ccat .px{margin-top:auto;padding-top:1.1rem;font-family:var(--mono);font-size:.8rem;color:var(--ink3)}
.ccat .px b{color:var(--ink);font-size:1.15rem}
/* ═══ WARSZTAT: zdjecia z realnych sesji ═══ */
.shots{position:relative;padding-block:1.2rem}
.shots__t{display:flex;gap:1rem;width:max-content}
.shot{position:relative;flex:none;height:clamp(200px,24vw,330px);border-radius:26px;overflow:hidden;
  border:2px solid var(--line);background:var(--bg2);
  transition:border-color .6s var(--ez),transform .8s var(--ez),box-shadow .8s var(--ez)}
.shot:hover{transform:scale(1.015);border-color:color-mix(in srgb,var(--acc) 28%,transparent);
  box-shadow:0 30px 90px -46px color-mix(in srgb,var(--acc) 60%,transparent)}
.shot img{height:100%;width:auto;object-fit:cover;filter:saturate(.55) brightness(.82);
  transition:filter 1.1s var(--ez),transform 1.4s var(--ez)}
.shot:hover img{filter:saturate(1) brightness(1);transform:scale(1.035)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .9rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink1);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,#04030a 88%,transparent))}
/* ═══ PREFEROWANE ŹRÓDŁO W GOOGLE ═══ */
.pref{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem;
  border:2px solid var(--line);border-radius:26px;padding:1.5rem 1.7rem;
  background:linear-gradient(110deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent 65%)}
.pref__ico{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 18%,transparent);border:2px solid color-mix(in srgb,var(--acc) 34%,transparent)}
.pref__ico svg{width:22px;height:22px;color:var(--acc-lite)}
.pref__t{flex:1 1 300px;min-width:0}
.pref__t b{display:block;font-family:var(--f-head);font-size:1.02rem;color:var(--ink);letter-spacing:-.02em}
.pref__t span{display:block;margin-top:.3rem;font-size:.86rem;color:var(--ink2);line-height:1.5}
.pref .b{flex:none}
@media(max-width:620px){.pref .b{width:100%}}
/* ═══ KONFIGURATOR USŁUG (modal) ═══ */
.mod{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ez)}
.mod.open{opacity:1;pointer-events:auto}
.mod__bd{position:absolute;inset:0;background:color-mix(in srgb,#04030a 78%,transparent);
  backdrop-filter:blur(10px)}
.mod__c{position:relative;width:min(1000px,100%);max-height:92svh;overflow:auto;
  border:1px solid var(--line-hi);border-radius:32px;background:var(--bg2);
  transform:translateY(18px) scale(.985);transition:transform .55s var(--ez);
  box-shadow:0 60px 140px -60px #000}
.mod.open .mod__c{transform:none}
.mod__hd{position:relative;padding:2.2rem 2rem 1.6rem;text-align:center;
  background:radial-gradient(120% 130% at 50% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 62%)}
.mod__hd h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}
.mod__hd p{margin-top:.6rem;font-size:.9rem;color:var(--ink2)}
.mod__x{position:absolute;top:1.1rem;right:1.1rem;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-hi);display:grid;place-items:center;color:var(--ink2);
  transition:border-color .3s,color .3s,transform .3s var(--ez)}
.mod__x:hover{color:var(--ink);border-color:var(--acc);transform:rotate(90deg)}
.mod__x svg{width:14px;height:14px}
.mod__b{padding:0 clamp(1rem,3vw,2rem) 1.5rem}
.mg{margin-bottom:1.5rem}
.mg h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);font-weight:700;margin-bottom:.7rem}
.mg__l{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:700px){.mg__l{grid-template-columns:repeat(2,1fr)}
  .mg--3 .mg__l{grid-template-columns:repeat(3,1fr)}}
.opt{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:14px;
  border:1px solid var(--line);text-align:left;background:var(--glass);
  transition:border-color .4s var(--ez),background .4s var(--ez),transform .3s var(--ez)}
.opt:hover{border-color:var(--line-hi);transform:translateY(-1px)}
.opt[aria-pressed="true"]{border-color:color-mix(in srgb,var(--cta) 70%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--cta) 26%,transparent),color-mix(in srgb,var(--cta) 8%,transparent))}
.opt__b{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-hi);flex:none;
  display:grid;place-items:center;transition:background .3s,border-color .3s}
.opt[aria-pressed="true"] .opt__b{background:var(--cta);border-color:var(--cta)}
.opt__b svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity .25s}
.opt[aria-pressed="true"] .opt__b svg{opacity:1}
.opt__n{font-size:.88rem;font-weight:600;color:var(--ink1);min-width:0}
.opt__q{margin-left:.35rem;color:var(--ink3);cursor:help;font-size:.78rem}
.opt__p{margin-left:auto;font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--ink);flex:none}
.opt__p s{color:var(--ink3);font-weight:400;margin-right:.35rem;font-size:.78rem}
.opt__p .free{color:var(--data)}
.mod__ft{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
  padding:1.2rem clamp(1rem,3vw,2rem);border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(18px)}
.mod__ft .meta{font-family:var(--mono);font-size:.72rem;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}
.mod__ft .meta b{color:var(--acc-lite)}
.mod__ft .tot{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--ink3);
  letter-spacing:.1em;text-transform:uppercase}
.mod__ft .tot b{display:block;font-size:1.7rem;color:var(--ink);letter-spacing:-.04em}
.mod__ft .b{flex:1 1 220px;min-width:0}
.mod__ft .b.off{opacity:.4;pointer-events:none}
.mini-b{padding:.6rem 1rem;border-radius:99px;border:1px solid var(--line);font-size:.78rem;
  font-weight:600;color:var(--ink2);transition:border-color .3s,color .3s}
.mini-b:hover{border-color:var(--line-hi);color:var(--ink)}
/* ═══ KONFIGURATOR PC ═══ */
.cfg{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:1000px){.cfg{grid-template-columns:.9fr 1.1fr;gap:2.2rem}}
.cfg__panel{border:2px solid var(--line);border-radius:26px;padding:clamp(1.3rem,2.6vw,2rem);
  background:linear-gradient(180deg,var(--glass),transparent)}
.cfg__row{margin-bottom:1.6rem}
.cfg__row:last-child{margin-bottom:0}
.cfg__lbl{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.cfg__lbl span{font-size:.8rem;font-weight:700;color:var(--ink2)}
.cfg__lbl b{font-family:var(--mono);font-size:.92rem;color:var(--acc2-lite);white-space:nowrap}
.cfg__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.cfg__chips button{padding:.5rem .85rem;border-radius:99px;border:2px solid var(--line);
  font-size:.8rem;font-weight:600;color:var(--ink2);transition:border-color .25s,background .25s,color .25s}
.cfg__chips button:hover{border-color:var(--line-hi);color:var(--ink)}
.cfg__chips button[aria-pressed="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--ink)}
.cfg input[type=range]{width:100%;accent-color:var(--acc);height:4px}
.cfg__out{border:2px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:26px;
  padding:clamp(1.3rem,2.6vw,2rem);display:flex;flex-direction:column;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 14%,transparent),transparent 60%)}
.cfg__parts{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column}
.cfg__parts li{display:flex;gap:.8rem;align-items:baseline;font-size:.88rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.cfg__parts li span{font-family:var(--mono);font-size:.66rem;color:var(--ink3);width:58px;flex:none;text-transform:uppercase;letter-spacing:.08em}
.cfg__parts li b{color:var(--ink1);font-weight:600}
.cfg__parts li em{margin-left:auto;font-style:normal;font-family:var(--mono);color:var(--ink3);font-size:.8rem}
.cfg__fps{display:flex;align-items:flex-end;gap:1rem;margin-top:1.4rem;padding-top:1.3rem;border-top:2px solid var(--line)}
.cfg__fps>div:first-child b{font-family:var(--mono);font-size:2.6rem;font-weight:700;letter-spacing:-.05em;color:var(--ink);line-height:1}
.cfg__fps span{font-size:.8rem;color:var(--ink3);max-width:24ch;line-height:1.35}
.cfg__price{margin-left:auto;text-align:right}
.cfg__price b{display:block;font-family:var(--mono);font-size:1.85rem;font-weight:700;color:var(--acc2-lite);letter-spacing:-.04em}
.cfg__price span{font-size:.72rem;color:var(--ink3)}
/* ═══ OPINIE ═══ */
/* karuzele: natywny scroll (swipe na telefonie), przeciaganie myszka
   na desktopie, powolny dryf w tle. Jedna implementacja dla opinii
   i dla zdjec.                                                        */
.drag{position:relative;overflow-x:auto;overflow-y:hidden;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:5.5rem;margin-block:-4.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.drag::-webkit-scrollbar{display:none}
.drag.grabbing{cursor:grabbing}
.drag.grabbing *{pointer-events:none}
.marq__t{display:flex;gap:1.2rem;width:max-content}
/* grubsze i miękkie ramki, żeby nie było szorstko */
.rev{width:min(430px,80vw);flex:none;border:2px solid var(--line);border-radius:26px;padding:1.7rem;
  background:linear-gradient(180deg,var(--glass),transparent);display:flex;flex-direction:column;gap:1rem;
  transition:border-color .35s var(--ez),transform .45s var(--ez),box-shadow .45s var(--ez)}
.rev:hover{border-color:color-mix(in srgb,var(--acc) 30%,transparent);transform:scale(1.012);
  box-shadow:0 30px 90px -44px color-mix(in srgb,var(--acc) 65%,transparent),
             0 0 0 1px color-mix(in srgb,var(--acc) 10%,transparent)}
.rev__s{display:flex;gap:.15rem;color:#ffc542}
.rev__s svg{width:15px;height:15px}
.rev p{font-size:.92rem;color:var(--ink1);line-height:1.58}
.rev__b{margin-top:auto;display:flex;align-items:center;gap:.7rem;padding-top:.9rem;border-top:1px solid var(--line)}
.rev__av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  font-size:.92rem;color:#fff;background:linear-gradient(140deg,var(--acc),var(--acc2))}
.rev__n b{display:block;font-size:.86rem;color:var(--ink)}
.rev__n i{font-style:normal;font-size:.72rem;color:var(--ink3)}
.rev__go{margin-left:auto;font-size:.72rem;color:var(--ink3);transition:color .25s}
.rev:hover .rev__go{color:var(--acc2-lite)}
/* sekcja opinii nad nastepna, zeby poswiata kart nie chowala sie pod spodem */
#opinie{position:relative;z-index:3}
#opinie .drag{z-index:3}
#opinie+.sec,#opinie+.sec-sm{position:relative;z-index:1}
/* logo w stopce: pelna rozdzielczosc, wygaszone w tlo */
.ft-logo{height:88px;width:auto;opacity:.92;
  -webkit-mask-image:radial-gradient(72% 105% at 50% 46%,#000 0 44%,transparent 96%);
  mask-image:radial-gradient(72% 105% at 50% 46%,#000 0 44%,transparent 96%)}
/* rangi KaRzye */
.rank{align-items:center;text-align:center;gap:.5rem;padding:1.6rem 1.3rem}
.rank__i{height:clamp(74px,7vw,104px);width:auto;object-fit:contain;margin-inline:auto;
  filter:drop-shadow(0 12px 34px color-mix(in srgb,var(--acc) 40%,transparent));
  transition:transform .8s var(--ez)}
.rank:hover .rank__i{transform:scale(1.06)}
/* podpis stopki: logo + CTA "preferowane zrodlo" z animowana ramka Google */
.ft-sign{position:relative;display:flex;justify-content:center;
  padding:2.4rem 1.4rem 1.4rem;text-align:center}
.ft-sign::before{content:"";position:absolute;inset:-40% -10% -70% -10%;pointer-events:none;
  background:radial-gradient(52% 62% at 50% 34%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 34%,transparent 100%)}
.ft-sign>*{position:relative}
.ft-sign__logo{height:clamp(72px,9vw,124px);width:auto;opacity:.94;
  -webkit-mask-image:radial-gradient(70% 108% at 50% 46%,#000 0 42%,transparent 96%);
  mask-image:radial-gradient(70% 108% at 50% 46%,#000 0 42%,transparent 96%)}
.gpref{position:relative;display:block;border-radius:24px;padding:2px;isolation:isolate;
  max-width:min(520px,100%);margin-top:1.6rem;transition:transform .6s var(--ez)}
.gpref:hover{transform:scale(1.02)}
.gpref:hover::before{opacity:1}
.gpref:hover::after{opacity:.42}
.gpref__in{display:flex;align-items:center;gap:1rem;text-align:left;
  padding:1.05rem 1.3rem;border-radius:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent),var(--bg));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .6s var(--ez)}
.gpref:hover .gpref__in{background:color-mix(in srgb,var(--bg) 92%,var(--acc))}
.gpref__g{width:26px;height:26px;flex:none}
.gpref__t{flex:1;min-width:0}
.gpref__t b{display:block;font-size:.94rem;color:var(--ink)}
.gpref__t i{display:block;margin-top:.25rem;font-style:normal;font-size:.78rem;
  color:var(--ink3);line-height:1.45}
html:not([data-motion="full"]) .gpref::before,
html:not([data-motion="full"]) .gpref::after{animation:none}
@media(prefers-reduced-motion:reduce){.gpref::before,.gpref::after{animation:none}}
/* ═══ FAQ ═══ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--f-head);font-size:clamp(1rem,.95rem + .4vw,1.22rem);font-weight:700;
  color:var(--ink);letter-spacing:-.02em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc2-lite)}
.faq summary::after{content:"";position:absolute;right:.6rem;top:50%;width:13px;height:13px;
  translate:0 -50%;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);rotate:45deg;
  transition:rotate .4s var(--ez),border-color .3s}
.faq details[open] summary::after{rotate:-135deg;border-color:var(--acc2-lite)}
.faq__a{padding:0 3rem 1.7rem 0;color:var(--ink2);font-size:.98rem;line-height:1.62;max-width:78ch;
  animation:fadein .55s var(--ez)}
@keyframes fadein{from{opacity:0;transform:translateY(-8px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
/* ═══ ZAŁOŻYCIEL ═══ */
.fnd{display:grid;gap:2.4rem;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.fnd{grid-template-columns:.8fr 1.2fr;gap:4rem}}
.fnd__img{position:relative;border-radius:32px;overflow:hidden;border:2px solid var(--line);
  background:linear-gradient(170deg,color-mix(in srgb,var(--acc) 25%,transparent),transparent 65%)}
.fnd__img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center}
.fnd blockquote{margin:0;font-family:var(--f-head);font-size:clamp(1.24rem,1rem + 1.1vw,2rem);
  line-height:1.3;letter-spacing:-.032em;color:var(--ink);font-weight:700}
.fnd__p{margin-top:1.5rem;color:var(--ink2);font-size:1rem;max-width:60ch}
.fnd__sig{margin-top:1.9rem;display:flex;align-items:center;gap:.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.fnd__sig img{width:42px;height:42px;border-radius:11px;object-fit:contain;
  background:color-mix(in srgb,var(--ink) 6%,transparent);padding:4px}
.fnd__sig b{display:block;font-size:.96rem;color:var(--ink)}
.fnd__sig i{font-style:normal;font-size:.8rem;color:var(--ink3)}
/* ═══ CTA ═══ */
.cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(3.5rem,9vw,7rem) var(--gut);border-block:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.cta__vid{position:absolute;inset:0;z-index:-2;overflow:hidden;opacity:.28}
.cta__vid video{width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 130% at 50% 0%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 62%),
             linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 92%,transparent))}
.cta h2{max-width:20ch;margin-inline:auto}
.cta .lead{margin:1.4rem auto 0;max-width:52ch}
.cta__row{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:2.4rem}
footer{position:relative;padding:4.5rem 0 0;font-size:.84rem;color:var(--ink3);overflow:hidden}
footer::before{content:"";position:absolute;left:0;right:0;top:-200px;height:400px;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 50%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 45%,transparent)}
.ft-top{display:grid;gap:2.4rem;grid-template-columns:1fr;align-items:start;margin-bottom:3rem}
@media(min-width:900px){.ft-top{grid-template-columns:1.4fr .9fr}}
.ft-blurb{font-size:.92rem;color:var(--ink2);max-width:52ch;line-height:1.6;margin-top:1.1rem}
.ft-soc{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.ft-soc a{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink2);
  transition:border-color .5s var(--ez),color .5s var(--ez),transform .5s var(--ez),background .5s var(--ez)}
.ft-soc a:hover{color:var(--ink);transform:scale(1.06);
  border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  background:color-mix(in srgb,var(--acc) 10%,transparent)}
.ft-soc svg{width:18px;height:18px}
.ft-dc{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border-radius:20px;
  border:2px solid color-mix(in srgb,var(--cta) 55%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--cta) 22%,transparent),transparent 70%);
  transition:border-color .5s var(--ez),transform .5s var(--ez),box-shadow .5s var(--ez)}
.ft-dc:hover{transform:scale(1.015);box-shadow:0 26px 70px -40px var(--cta)}
.ft-dc b{display:block;font-family:var(--f-head);color:var(--ink);font-size:1rem}
.ft-dc span{font-size:.8rem;color:var(--ink2)}
.ft-dc .arw{margin-left:auto;color:var(--cta-lite)}
.ft-pay{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.ft-pay span{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink2);
  padding:.4rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--glass)}
.ft-mark{font-family:var(--f-head);font-weight:800;letter-spacing:-.04em;text-align:center;
  font-size:clamp(3rem,13vw,11rem);line-height:.8;margin-top:2.5rem;
  color:color-mix(in srgb,#E7F6FF 4%,transparent);user-select:none;pointer-events:none}
.ft-legal{padding:2rem 0 2.5rem;border-top:1px solid var(--line);margin-top:2rem;
  display:grid;justify-items:center;gap:1rem;font-size:.78rem;text-align:center}
/* pasek CTA przy dole */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;flex-wrap:wrap;
  align-items:center;gap:1rem;padding:.8rem var(--gut);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(22px);
  border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .7s var(--ez)}
.stick.on{transform:none}
.stick b{font-family:var(--f-head);color:var(--ink);font-size:.98rem}
.stick .led{width:8px;height:8px;border-radius:50%;background:var(--data);flex:none}
.stick span{font-size:.84rem;color:var(--ink2)}
.stick .b{margin-left:auto}
@media(max-width:640px){.stick{display:none}}
.fnote{margin-top:1rem;font-size:.78rem;color:var(--ink3);opacity:.7;max-width:80ch}
/* ═══ PANEL STYLISTYK ═══ */
.styler{position:fixed;right:1rem;bottom:1rem;z-index:200;font-family:var(--mono);font-size:.72rem}
.styler__btn{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:99px;
  border:1px solid var(--line-hi);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(20px);color:var(--ink1);font-weight:700;letter-spacing:.08em;
  box-shadow:0 14px 40px -16px #000}
.styler__btn:hover{border-color:var(--acc-lite)}
/* konto: klasa xoo-el-login-tgr otwiera popup wtyczki Easy Login (Xootix).
   Gdy uzytkownik jest zalogowany, WP podmienia etykiete na "Moje konto". */
.acct{display:none;align-items:center;gap:.5rem;padding:.62rem 1rem;border-radius:99px;
  border:1px solid var(--line);color:var(--ink1);font-size:.86rem;font-weight:600;
  transition:border-color .4s var(--ez),color .4s var(--ez),transform .5s var(--ez),
             box-shadow .5s var(--ez)}
.acct svg{width:17px;height:17px;flex:none;color:var(--ink2);transition:color .4s var(--ez)}
.acct:hover{border-color:color-mix(in srgb,var(--acc) 46%,transparent);color:var(--ink);
  transform:scale(1.03);box-shadow:0 16px 44px -26px color-mix(in srgb,var(--acc) 75%,transparent)}
.acct:hover svg{color:var(--acc-lite)}
@media(min-width:900px){.acct{display:inline-flex}}
.styler__p{position:absolute;right:0;bottom:calc(100% + .6rem);width:min(300px,85vw);
  border:1px solid var(--line-hi);border-radius:20px;padding:1.1rem;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(24px);
  box-shadow:0 30px 80px -30px #000;
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
  transition:opacity .35s var(--ez),transform .35s var(--ez)}
.styler.open .styler__p{opacity:1;transform:none;pointer-events:auto}
.styler__h{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-bottom:.6rem}
.styler__h:not(:first-child){margin-top:1.2rem}
.styler__o{display:flex;flex-direction:column;gap:.35rem}
.styler__o button{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:11px;
  border:1px solid transparent;color:var(--ink2);text-align:left;font-size:.76rem;font-weight:600;
  transition:background .25s,color .25s,border-color .25s}
.styler__o button:hover{background:var(--glass);color:var(--ink)}
.styler__o button[aria-pressed="true"]{background:var(--glass);border-color:var(--acc);color:var(--ink)}
.dots{display:flex;gap:3px;flex:none}
.dots i{width:11px;height:11px;border-radius:3px;display:block}
.styler__note{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.66rem;color:var(--ink3);line-height:1.5}
/* Ruch warstwowo. Przy systemowym ograniczeniu wylaczamy to, co realnie
   meczy blednik: petle, parallaxy, duze przesuniecia. Krotkie wygaszenia
   zostaja, bo pomagaja zrozumiec, ze cos sie pojawilo.
   Uzytkownik moze recznie wlaczyc pelny ruch przelacznikiem w stopce -
   wybor ladu je w localStorage i wygrywa z ustawieniem systemu.        */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="full"]) { scroll-behavior:auto }
  html:not([data-motion="full"]) .hero__vid video{animation:none;transform:scale(1.04)}
  html:not([data-motion="full"]) .marq__t{animation:none}
  html:not([data-motion="full"]) .plan__tag--hot{animation:none}
  html:not([data-motion="full"]) .tag .led{animation:none}
  html:not([data-motion="full"]) .b:hover::after{animation:none}
  /* ujawnianie zostaje, ale bez ruchu w przestrzeni */
  html:not([data-motion="full"]) .rv{transform:none;filter:none;transition:opacity .5s ease}
  html:not([data-motion="full"]) .rvl>span{transform:none;filter:none;transition:opacity .5s ease}
  html:not([data-motion="full"]) .card:hover,
  html:not([data-motion="full"]) .tool:hover,
  html:not([data-motion="full"]) .rev:hover,
  html:not([data-motion="full"]) .plan:hover{transform:none}
}
.motion-sw{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;
  color:var(--ink3);border:1px solid var(--line);border-radius:99px;padding:.45rem .85rem;
  transition:border-color .3s,color .3s}
.motion-sw:hover{border-color:var(--line-hi);color:var(--ink1)}
.motion-sw i{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none;transition:background .3s}
html[data-motion="full"] .motion-sw i{background:var(--data)}
/* Astra wpisuje typografie naglowkow jako .entry-content :where(h1),
   czyli z waga selektora 0-1-0. Golе h1 z tego pliku bylo slabsze i
   naglowki dostawaly 61 px oraz wage 600 zamiast skali projektu.
   Powtarzamy ustawienia projektu na 0-1-1, wiec bijemy motyw, a reguly
   konkretnych stron (.top h1, .art h2) nadal wygrywaja, bo ladują sie
   pozniej przy tej samej wadze. */
:is(.entry-content,.ultp-builder-content,.elementor) :is(h1,h2,h3,h4){
  font-family:var(--f-head);font-weight:var(--head-w2);line-height:1.02;
  letter-spacing:var(--head-track);font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1}
:is(.entry-content,.ultp-builder-content,.elementor) h1{
  font-size:clamp(2.6rem,1.1rem + 6.2vw,7rem);font-weight:var(--head-w);
  line-height:.94;letter-spacing:calc(var(--head-track) + .014em)}
:is(.entry-content,.ultp-builder-content,.elementor) h2{
  font-size:clamp(2.05rem,1.1rem + 3.6vw,4.4rem)}
:is(.entry-content,.ultp-builder-content,.elementor) h3{
  font-size:clamp(1.2rem,1.02rem + .8vw,1.7rem);letter-spacing:-.025em;line-height:1.14}
:is(.entry-content,.ultp-builder-content,.elementor) h4{
  font-size:1.02rem;letter-spacing:-.015em;line-height:1.3}

/* Astra wymusza img{height:auto} regula .entry-content img, ktora ma te
   sama wage co nasze .res img i laduje sie pozniej. Obrazki, ktore maja
   wypelniac kafelek, przestawaly go wypelniac: w banerze CTA zostawal
   czarny pas nad i pod grafika, a w kafelkach wynikow pod spodem.
   Powtarzamy je z wyzsza waga selektora. */
:is(.entry-content,.ultp-builder-content,.elementor) :is(
  .top__bg,.post__img,.tl__img,.mp__th,.area__img,.who__img,.shot,
  .fnd__img,.hero__vid,.cta__vid,.ba,.res,.res figure,.um-tl__img) :is(img,video,canvas){
  height:100%;object-fit:cover}
/* przypis pod sekcja ma byc wysrodkowany takze poza kontenerem data-mid */
.fnote{margin-inline:auto;text-align:center}

/* Pas CTA bez twardych krawedzi: zamiast kreski na gorze i na dole
   grafika i poswiata wygaszaja sie w tlo strony, a dol laczy sie ze
   stopka. */
.cta{border-block:0}
.cta .cta__vid{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%)}
.cta::before{
  background:radial-gradient(80% 130% at 50% 40%,color-mix(in srgb,var(--acc) 34%,transparent),transparent 66%),
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 24%,
      color-mix(in srgb,var(--bg) 55%,transparent) 76%,var(--bg) 100%)}


/* --- POSWIATA POD KURSOREM ------------------------------------
   W projekcie kafelki rozswietlaja sie pod kursorem. Na zywej stronie
   efekt byl ledwo widoczny, wiec podnosimy jego sile i rozciagamy go
   na pozostale kafelki: pakiety, narzedzia i kategorie coachingu. */
.card::before{
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--acc) 40%,transparent) 0%,
    color-mix(in srgb,var(--acc) 14%,transparent) 34%,
    transparent 68%)}
.card:hover{box-shadow:0 34px 100px -42px color-mix(in srgb,var(--acc) 78%,transparent)}

/* Kafelki pakietow, narzedzi i coachingu zostaja przy wlasnej
   animacji z projektu - unoszenie i obwodka, bez dodatkowej poswiaty. */