/* ═══════════════════════════════════════════════════════════════════════
   SPARK — landing, wersja 4 (jasna, editorial + bento).
   Zasada: paleta wychodzi z samego panelu Sparka, nie z szablonu.
   Bialy papier, atrament, jedna lawendowa plama, czerwien tylko na sygnale.
   Gradient marki wystepuje w trzech miejscach: logo, sygnet, domkniecie strony.
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --fd:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --fb:'Instrument Sans',system-ui,-apple-system,sans-serif;

  /* papier i atrament */
  --paper:#fff;
  --canvas:#f4f3f8;
  --wash:#f6eefb;
  --ink:#0c0e18;
  --ink-2:#484d63;
  --ink-3:#63687f;   /* 5.5:1 na bieli, 4.7:1 na lawendzie — WCAG AA */
  --line:#e4e6ef;
  --line-2:#cfd3e0;

  /* marka — jedna rodzina zamiast pieciu kolorow.
     --brand jest ciemniejszy niz roz z logo, bo #e619a6 daje na bieli 4.15:1
     i nie nadaje sie pod tekst ani ikony. Jasny roz zostaje w gradientach. */
  /* trzy kolory: fiolet, roz, zolty — kazdy ma swoja robote
     fiolet  #7c3aed  5.70:1 na bieli — tekst, ikony, linki
     roz     #be185d  6.04:1 na bieli — drugi glos, akcenty
     zolty   #fbbf24  1.67:1 na bieli (!) — NIGDY pod tekst na jasnym;
                      na ciemnym ma 11:1 i tam przejmuje role akcentu */
  --brand:#7c3aed;
  --brand-2:#be185d;
  --pink:#e619a6;
  --accent:#fbbf24;
  --hot:#e11d2e;
  --grad:linear-gradient(100deg,#7c3aed 0%,#be185d 40%,#e619a6 66%,#fbbf24 100%);

  /* szklo: dziala tylko wtedy, gdy pod spodem jest kolor. Stad aura na body. */
  --glass:rgba(255,255,255,.66);
  --glass-2:rgba(255,255,255,.78);
  --glass-brd:rgba(255,255,255,.85);
  --blur:blur(18px) saturate(1.5);

  --edge:clamp(.75rem,2vw,1.5rem);   /* jeden margines dla scen, plansz, tasmy, blokow */
  --max:1240px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --r:12px;
  --r-lg:20px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
/* Birdeye kladzie sekcje jak karty na przygaszonym plotnie — biel jest wtedy
   materialem karty, nie tlem strony. Bez tego zaokraglone bloki nie maja sie
   od czego odciac i wygladaja jak przypadkowe marginesy. */
body{font-family:var(--fb);font-size:16px;line-height:1.6;color:var(--ink);background:var(--canvas);
  position:relative;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#e3d5fb;color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
/* Aura pod cala strona — nieruchoma, wiec plaszczyzny plyna po niej przy
   przewijaniu. Bez niej szklo nie ma czego pokazac i wyglada jak brudna biel. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 38% at 10% 6%,rgba(124,58,237,.2),transparent 70%),
    radial-gradient(44% 34% at 90% 18%,rgba(230,25,166,.17),transparent 70%),
    radial-gradient(46% 36% at 16% 48%,rgba(251,191,36,.14),transparent 70%),
    radial-gradient(44% 36% at 86% 62%,rgba(124,58,237,.16),transparent 70%),
    radial-gradient(46% 34% at 24% 90%,rgba(230,25,166,.14),transparent 70%)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* Skip link: bez niego klawiatura przechodzi przez cala nawigacje na kazdej podstronie */
.skip{position:absolute;left:50%;top:.6rem;transform:translate(-50%,-200%);z-index:200;
  padding:.7rem 1.2rem;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;
  font-size:.92rem;transition:transform .2s var(--ease)}
.skip:focus-visible{transform:translate(-50%,0)}

/* ───────── typografia ─────────
   Bricolage Grotesque niesie naglowki: waskie, wydawnicze formy, ktore w duzym
   stopniu wygladaja jak sklad prasowy, a nie jak domyslny grotesk panelu.
   Instrument Sans zostaje w tekscie, bo to ten sam ton co interfejs Sparka. */
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.h1{font-size:clamp(3.1rem,9.4vw,8.6rem);line-height:.88;letter-spacing:-.055em}
.h2{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1.02}
.lead{font-size:clamp(1.08rem,1.45vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:34ch;text-wrap:pretty}

/* ───────── przyciski ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--fb);font-weight:600;letter-spacing:-.01em;
  border-radius:var(--r);transition:transform .18s var(--ease),background .18s,box-shadow .18s;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn.p{background:var(--ink);color:#fff;padding:.72rem 1.15rem;font-size:.95rem;
  box-shadow:0 1px 2px rgba(12,14,24,.28)}
.btn.p:hover{background:var(--brand);box-shadow:0 6px 18px rgba(124,58,237,.34)}
.btn.lg{padding:1.05rem 1.9rem;font-size:1.05rem;border-radius:14px}
.btn.gh{color:var(--ink-2);padding:.72rem .9rem;font-size:.95rem}
.btn.gh:hover{color:var(--ink)}
/* drugie dzialanie w hero: przycisk, nie link — link tekstowy obok czarnego
   przycisku przegrywa tak bardzo, ze praktycznie nie istnieje */
.btn.o{background:rgba(255,255,255,.72);color:var(--ink);border:1px solid var(--line-2);
  padding:1.05rem 1.7rem;font-size:1.05rem;border-radius:14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.o:hover{background:#fff;border-color:var(--ink);box-shadow:0 8px 24px -10px rgba(12,14,24,.3)}

.link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:500;color:var(--ink-2);
  padding-bottom:2px;box-shadow:inset 0 -1px 0 var(--line-2);transition:color .18s,box-shadow .18s}
.link:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.link span{transition:transform .25s var(--ease)}
.link:hover span{transform:translateY(3px)}

/* ───────── nawigacja ─────────
   Pasek nie dzieli ekranu na dwa pietra, tylko unosi sie nad gradientem jako
   jedna bryla ze szkla. Kolor tla przechodzi pod nim i widac go przez rozmycie —
   dzieki temu gora strony zostaje jednym obrazem, a nie belka i reszta. */
.nav{position:fixed;top:clamp(.7rem,1.6vw,1.15rem);left:0;right:0;z-index:80;
  display:flex;justify-content:center;padding:0 var(--pad);pointer-events:none}
/* Pas rozmycia przy samej krawedzi. Tresc nie znika pod pigulka ostrym cieciem,
   tylko rozmywa sie na wejsciu — bez wprowadzania koloru, wiec dziala tak samo
   nad gradientem jak nad bialym papierem nizej. */
.nav::before{content:'';position:fixed;left:0;right:0;top:0;height:clamp(60px,7.5vw,92px);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .3s}
.nav.stuck::before{opacity:1}
.nav::before{
  -webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent);
  mask-image:linear-gradient(to bottom,#000 38%,transparent)}
.nav-in{pointer-events:auto;display:flex;align-items:center;gap:clamp(.25rem,1vw,.6rem);
  padding:.45rem .45rem .45rem 1.2rem;border-radius:999px;
  /* nad kolorowa scena pasek jest mocno przeswitujacy — widac przez niego gradient.
     Po zjechaniu robi sie bardziej krylacy, bo nizej przechodzi nad czarnymi
     sekcjami i przy .58 tekst spadalby do 2.6:1. */
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(26px) saturate(1.9);-webkit-backdrop-filter:blur(26px) saturate(1.9);
  box-shadow:0 1px 2px rgba(12,14,24,.05),0 12px 34px -12px rgba(12,14,24,.22);
  transition:box-shadow .3s var(--ease),background .3s}
.nav.stuck .nav-in{background:rgba(255,255,255,.84);border-color:rgba(255,255,255,.9)}
.nav-brand{display:flex;align-items:center;margin-right:clamp(.5rem,1.6vw,1.3rem)}
.nav-brand img{height:31px;width:auto}
.nav-link{display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem clamp(.55rem,1vw,.85rem);border-radius:999px;
  font-size:.92rem;font-weight:600;color:var(--ink);white-space:nowrap;
  transition:background .18s,color .18s}
.nav.stuck .nav-link{font-weight:500;color:var(--ink-2)}
.nav.stuck .nav-link:hover{color:var(--ink)}
.nav-link:hover{background:rgba(12,14,24,.06);color:var(--ink)}
.nav-login{margin-left:clamp(.3rem,1vw,.7rem)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;
  padding:.6rem 1.15rem;border-radius:999px;background:var(--ink);color:#fff;
  font-weight:600;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;
  transition:background .2s,transform .18s var(--ease)}
.nav-cta:hover{background:var(--brand)}
.nav-cta:active{transform:translateY(1px)}
.burger{display:none;width:38px;height:38px;border-radius:999px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:16px;height:1.8px;background:var(--ink);border-radius:2px}

/* menu na telefonie — pod pigulka, to samo szklo */
.mnav{position:fixed;left:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);
  top:calc(clamp(.7rem,1.6vw,1.15rem) + 62px);z-index:79;display:grid;gap:.15rem;
  padding:.6rem;border-radius:20px;background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 20px 50px -18px rgba(12,14,24,.35)}
.mnav a{display:block;padding:.85rem 1rem;border-radius:12px;font-weight:600;color:var(--ink);
  min-height:44px}
.mnav a:hover{background:var(--wash)}
.burger.x i:first-child{transform:translateY(3.4px) rotate(45deg)}
.burger.x i:last-child{transform:translateY(-3.4px) rotate(-45deg)}
.burger i{transition:transform .25s var(--ease)}
.mnav[hidden]{display:none}
@media (min-width:901px){.mnav{display:none!important}}

/* ───────── hero: scena w ramce, jak u Birdeye ─────────
   Nie pelny ekran, tylko zaokraglona karta z marginesem — mniej agresywna,
   a strona zaczyna sie od bieli. Tekst siedzi w lewym dolnym rogu (dlugi polski
   naglowek czyta sie z lewej lepiej niz ze srodka), po prawej lezy wycinek
   produktu. Zrzuty w tle sa przygaszone: to scena, nie galeria. */
.hero{padding:calc(clamp(4.6rem,7vw,5.6rem) + .75rem) var(--edge) 0}
.hero-stage{position:relative;overflow:hidden;border-radius:clamp(20px,2.4vw,34px);
  min-height:clamp(560px,82svh,860px);display:flex;align-items:flex-end;color:#fff;
  background:linear-gradient(150deg,#4c1d95 0%,#7c3aed 26%,#be185d 56%,#e619a6 78%,#fbbf24 100%);
  box-shadow:0 40px 90px -46px rgba(90,10,45,.7)}

.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(to right,#fff 1px,transparent 1px),
                   linear-gradient(to bottom,#fff 1px,transparent 1px);
  background-size:74px 74px;opacity:.08;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 40% 30%,#000,transparent 85%);
  mask-image:radial-gradient(ellipse 90% 80% at 40% 30%,#000,transparent 85%)}
/* przyciemnienie od dolu — inaczej bialy tekst gubi sie na jasnym rogu gradientu */
.hero-bg::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(60,6,30,.66) 0%,rgba(60,6,30,.3) 38%,rgba(60,6,30,.08) 68%,transparent 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.blob.a{width:40vw;height:30vw;left:-8vw;top:-10vw;background:#8b5cf6;opacity:.45}
.blob.b{width:34vw;height:26vw;right:-6vw;top:2vw;background:#fbbf24;opacity:.36}
.blob.c{width:30vw;height:24vw;left:26vw;bottom:-12vw;background:#e619a6;opacity:.4}
.blob.d,.blob.e{display:none}
@media (prefers-reduced-motion:no-preference){
  .blob{animation:drift 42s ease-in-out infinite alternate}
  .blob.b{animation-duration:49s;animation-delay:-11s}
  .blob.c{animation-duration:55s;animation-delay:-21s}
  @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}
                   to{transform:translate3d(2.5vw,2vw,0) scale(1.08)}}
}

/* zrzuty produktu jako tlo sceny */
.hero-cards{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-cards img{position:absolute;border-radius:12px;
  box-shadow:0 26px 60px -22px rgba(60,6,30,.6);border:1px solid rgba(255,255,255,.25)}
.hero-cards img:nth-child(1){width:23%;left:-4%;top:5%;transform:rotate(-8deg);opacity:.72}
.hero-cards img:nth-child(2){width:18%;left:15%;top:-6%;transform:rotate(5deg);opacity:.6}
.hero-cards img:nth-child(3){width:21%;right:-3%;top:3%;transform:rotate(7deg);opacity:.72}
.hero-cards img:nth-child(4){width:16%;right:18%;top:-7%;transform:rotate(-6deg);opacity:.56}
.hero-cards img:nth-child(5){width:19%;left:4%;bottom:-8%;transform:rotate(6deg);opacity:.46}
.hero-cards img:nth-child(6){width:18%;right:2%;bottom:-10%;transform:rotate(-7deg);opacity:.42}
/* srodek sceny: mniejsze, mocniej przygaszone — wypelniaja plame, nie walcza z tekstem */
.hero-cards img:nth-child(7){width:15%;left:36%;top:6%;transform:rotate(-4deg);opacity:.5}
.hero-cards img:nth-child(8){width:13%;left:52%;top:24%;transform:rotate(6deg);opacity:.36}
.hero-cards img:nth-child(9){width:14%;left:30%;top:34%;transform:rotate(3deg);opacity:.26}
.hero-cards img:nth-child(10){width:12%;right:26%;top:16%;transform:rotate(-8deg);opacity:.32}

/* tresc: lewy dolny rog, obok wycinek produktu */
.hero-in{position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  padding:clamp(2rem,4vw,3.25rem) clamp(1.25rem,3vw,3rem) clamp(2.75rem,5vw,4rem)}
.hero-tx{text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;
  color:#fff;margin-bottom:clamp(1rem,2vw,1.5rem);
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:999px;
  padding:.42rem .9rem .42rem .72rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#fff;flex:none}
.hero h1{max-width:16ch;color:#fff;text-shadow:0 4px 40px rgba(70,8,36,.4)}
.hero .h1{font-size:clamp(2.9rem,6.4vw,6.1rem);line-height:.93;letter-spacing:-.05em}
.hero .lead{max-width:40ch;margin-top:clamp(1rem,2vw,1.5rem);color:rgba(255,255,255,.95);
  font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.45}
.hero-cta{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  margin-top:clamp(1.4rem,2.6vw,2rem)}


/* wycinek panelu po prawej — szklo, przez ktore widac gradient */
.hero-peek{border-radius:18px;padding:1.25rem 1.4rem;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 24px 60px -26px rgba(60,6,30,.6)}
.hero-peek-h{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-bottom:.85rem;margin-bottom:.35rem;border-bottom:1px solid rgba(255,255,255,.26);
  font-size:.85rem;color:rgba(255,255,255,.85)}
.hero-peek-h b{color:#fff;font-size:.95rem;font-weight:600}
.hero-peek-r{display:flex;align-items:center;gap:.65rem;padding:.7rem 0;font-size:.93rem;
  border-bottom:1px solid rgba(255,255,255,.14)}
.hero-peek-r:last-child{border-bottom:0}
.hero-peek-r i{flex:none;width:7px;height:7px;border-radius:50%;background:#fff;opacity:.65}
.hero-peek-r i.hot{background:#ffd0a1;opacity:1}
.hero-peek-r b{font-weight:600;color:#fff}
.hero-peek-r em{font-style:normal;color:rgba(255,255,255,.75);font-size:.85rem}
.hero-peek-r u{margin-left:auto;text-decoration:none;font-size:.76rem;font-weight:600;
  padding:.22rem .6rem;border-radius:99px;background:rgba(255,255,255,.22);color:#fff;
  white-space:nowrap;flex:none}
.hero-peek-r b{white-space:nowrap}
.hero-peek-r u.hot{background:#fff;color:#9d174d}

.hero .btn.p{background:#fff;color:var(--ink);box-shadow:0 14px 34px -12px rgba(60,6,30,.6)}
.hero .btn.p:hover{background:var(--ink);color:#fff}
.hero .btn.o{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero .btn.o:hover{background:rgba(255,255,255,.26);border-color:#fff;box-shadow:none}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;align-items:start;gap:1.75rem}
  .hero-cards img{opacity:.4!important}
  .hero-cards img:nth-child(2),.hero-cards img:nth-child(4),
  .hero-cards img:nth-child(7),.hero-cards img:nth-child(8),
  .hero-cards img:nth-child(9),.hero-cards img:nth-child(10){display:none}
  .hero-cards img:nth-child(1){width:52%;left:-14%}
  .hero-cards img:nth-child(3){width:48%;right:-12%}
}

/* ───────── pas zaufania ─────────
   Trzy fakty tuz pod produktem, w jednej linii. Kazdy jest sprawdzalny: to nie
   liczby o klientach, tylko rzeczy, ktore czytelnik moze zweryfikowac sam. */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;
  margin:clamp(2rem,4vw,3rem) 0 0}
.trust div{background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:1.35rem clamp(1rem,2vw,1.6rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:center}
.trust i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--wash);color:var(--brand)}
.trust svg{width:17px;height:17px}
.trust b{display:block;font-size:.96rem;font-weight:600}
.trust span{font-size:.88rem;color:var(--ink-2);line-height:1.4}
@media (max-width:860px){.trust{grid-template-columns:1fr}}

/* ───────── plansza z produktem ─────────
   Sam panel, bez kafli obok. Liczby, ktore wczesniej stały w kolumnie po prawej,
   sa juz w srodku panelu — powtorzone obok czytaly sie jak drugi, obcy interfejs. */
.bento-wrap{margin:clamp(2.75rem,5.5vw,4.5rem) 0 0;padding:0;
  position:relative;z-index:1}
.bento{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#f7f8fb;overflow:hidden;aspect-ratio:1876/936;
  box-shadow:0 2px 4px rgba(12,14,24,.04),0 40px 90px -30px rgba(91,33,182,.28)}
.bento img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}

/* ───────── wejscie strony ─────────
   Jedna sekwencja przy zaladowaniu, nic wiecej. Sekcje nizej nie wjezdzaja
   po kolei — to najczystszy sygnal, ze strone zlozyl generator. */
@media (prefers-reduced-motion:no-preference){
  .in{opacity:0;transform:translateY(14px);animation:in .7s var(--ease) forwards}
  .in.d1{animation-delay:.05s}.in.d2{animation-delay:.14s}.in.d3{animation-delay:.23s}
  .in.d4{animation-delay:.32s}.in.d5{animation-delay:.44s}
  @keyframes in{to{opacity:1;transform:none}}
}

/* ───────── mobile ───────── */
@media (max-width:900px){
  .nav-link,.nav-login{display:none}
  .burger{display:flex}
  .nav-in{padding-left:1rem}
  .hero h1{max-width:none}
  .hero-cta{flex-wrap:wrap;justify-content:center;gap:1.1rem}
  .blob{filter:blur(70px)}
  
}
/* Na telefonie caly pulpit zmniejszony do szerokosci ekranu robi sie nieczytelny.
   Zamiast pomniejszac, pokazujemy jego lewy fragment w czytelnej skali. */
@media (max-width:700px){
  .bento{aspect-ratio:auto;height:clamp(300px,74vw,430px)}
  .bento img{width:auto;max-width:none;height:100%;object-fit:cover;object-position:left top}
  .bento-wrap{perspective:1400px}
}
@media (max-width:560px){
  .hero-peek-r em,.inbox-r em{display:none}
  /* karta w domknieciu: dwie kolumny robily sie za waskie, liczba idzie nad opis */
  .cta-card{grid-template-columns:1fr}
  .cta-card li{grid-template-columns:1fr;gap:.25rem}
  .sticky p{font-size:.82rem}
  .btn.lg{width:100%}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .link{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   PRZECHYL PLANSZY
   Panel lezy lekko odchylony, jakby stal na biurku. Tam, gdzie przegladarka
   umie animacje sterowane scrollem, prostuje sie przy wjezdzie w widok —
   ruch odpowiada na przewijanie, wiec nie jest ozdoba samą w sobie.
   Firefox dostaje sam przechyl. Efekt jest dekoracyjny, wiec bez polyfilla.
   ═══════════════════════════════════════════════════════════════════════ */
.bento-wrap{perspective:2400px;perspective-origin:50% 0}
.bento{transform:rotateX(6deg) rotateY(-3.5deg) scale(.99);transform-origin:50% 0;
  transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    @keyframes lay-flat{
      from{transform:rotateX(15deg) rotateY(-8deg) scale(.94)}
      to{transform:rotateX(4deg) rotateY(-2deg) scale(1)}
    }
    .bento{animation:lay-flat auto linear both}
    .bento{animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@media (prefers-reduced-motion:reduce){.bento{transform:none}}

/* ═══════════════════════════════════════════════════════════════════════
   SEKCJE — wspolny rytm
   ═══════════════════════════════════════════════════════════════════════ */
.sec{position:relative;padding:clamp(4rem,7vw,6.5rem) 0}
/* blok: sekcja przestaje byc pasem przez caly ekran i staje sie karta.
   Bez overflow:hidden — ono tworzy kontekst przewijania i zabija position:sticky
   w srodku (naglowek FAQ przestawal sie przyklejac). Tlo i tak przycina radius. */
.sec.blok{margin:clamp(.5rem,1.2vw,1rem) var(--edge);
  padding:clamp(4rem,7vw,6.5rem) 0;border-radius:clamp(20px,2.4vw,34px)}
.sec.wash{background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 1px 2px rgba(12,14,24,.04),0 30px 70px -50px rgba(91,33,182,.4)}
.sec.dark{background:var(--ink);color:#fff;
  box-shadow:0 30px 80px -46px rgba(12,14,24,.7)}
/* Karta w szklanym bloku wraca do pelnej bieli — szklo na szkle robi sie metne
   i linie miedzy kaflami znikaja. Szklo jest dla tego, co lezy wprost na aurze. */
.sec.wash .aud-grid,.sec.wash .step,.sec.wash .mm,.sec.wash .steps-grid{
  background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:var(--line)}
.sec.wash .steps-grid{background:var(--line)}
.head{max-width:44rem;margin:0 auto clamp(2.5rem,5vw,3.75rem);text-align:center}
/* Badge nad naglowkiem ma jeden ksztalt na calej stronie: pigulka z kropka
   z gradientu marki. Ten sam element otwiera hero, wiec sekcje czytaja sie
   jak kolejne rozdzialy tego samego dokumentu. */
.kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;
  padding:.4rem .85rem .4rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);
  font-size:.83rem;font-weight:600;letter-spacing:-.005em;color:var(--ink-2)}
.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
.sec.wash .kicker{background:var(--paper);border-color:var(--line)}
.sec.dark .kicker{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#c9cde4}
.cta-box .kicker{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}
.cta-box .kicker::before{background:#fff}
.head p{margin-top:1rem;font-size:1.08rem;line-height:1.55;color:var(--ink-2);
  max-width:46ch;margin-inline:auto;text-wrap:pretty}
.sec.dark .head p{color:#a9aecb}
.cta-box .kicker{margin-bottom:1.25rem}

/* ───────── pasek „Zastepuje” ─────────
   Nie ozdobny marquee, tylko lista rzeczy do skasowania: kazda przekreslona,
   na koncu jedyna, ktora zostaje. */
.mq{margin:clamp(.5rem,1.2vw,1rem) var(--edge);border:1px solid var(--line);
  border-radius:999px;padding:1.15rem 0;overflow:hidden;border-color:var(--glass-brd);
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.mq-in{display:flex;align-items:center;gap:1.5rem}
.mq-lb{flex:none;padding-left:var(--pad);font-size:.82rem;font-weight:600;
  color:var(--ink-3);letter-spacing:.02em}
.mq-scroll{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 4rem),transparent);
  mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 4rem),transparent)}
.mq-track{display:flex;align-items:center;gap:.7rem;white-space:nowrap;
  animation:mq 46s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-track span{flex:none;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);
  font-size:.92rem;color:var(--ink-3);text-decoration:line-through;
  text-decoration-color:var(--line-2)}
.mq-track span.ok{color:var(--paper);background:var(--ink);border-color:var(--ink);
  text-decoration:none;font-weight:600}

/* ───────── rozsypane / zebrane ─────────
   Sekcja mowi, ze zgloszenia rozsypuja sie po kanalach, a Spark je zbiera —
   wiec to pokazuje, zamiast opisywac. Po lewej karteczki lezace krzywo, po
   prawej ta sama tresc jako lista ze statusami. Strzalka miedzy nimi jest
   jedynym elementem laczacym, wiec niesie caly sens ukladu. */
.col-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);align-items:center;max-width:72rem;margin:0 auto}
.col-side>p{margin-top:1rem;color:var(--ink-2);line-height:1.6;max-width:42ch;text-wrap:pretty}
.col-side .h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}

.scatter{position:relative;margin-top:clamp(1.75rem,3vw,2.5rem);
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.note:nth-child(5){grid-column:span 2}
.note{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem .8rem 1.75rem;
  position:relative;border:1px solid var(--glass-brd);border-radius:12px;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 1px 2px rgba(12,14,24,.05),0 10px 24px -14px rgba(12,14,24,.35);
  transition:transform .3s var(--ease)}
.note::before{content:'';position:absolute;left:.85rem;top:1.15rem;width:6px;height:6px;
  border-radius:50%;background:var(--line-2)}
.note:nth-child(1)::before{background:#7c3aed}
.note:nth-child(2)::before{background:#a855f7}
.note:nth-child(3)::before{background:#be185d}
.note:nth-child(4)::before{background:#e619a6}
.note:nth-child(5)::before{background:#f0a92c}
.note b{font-size:.92rem;font-weight:600}
.note em{font-style:normal;font-size:.78rem;color:var(--ink-3)}
.note:nth-child(1){transform:rotate(-2.5deg)}
.note:nth-child(2){transform:rotate(1.8deg) translateY(6px)}
.note:nth-child(3){transform:rotate(-1.2deg) translateY(-4px)}
.note:nth-child(4){transform:rotate(2.6deg)}
.note:nth-child(5){transform:rotate(-3deg) translateY(5px)}
.scatter:hover .note{transform:rotate(0) translateY(0)}
@media (prefers-reduced-motion:reduce){.note,.scatter:hover .note{transition:none}}

.col-arrow{display:grid;place-items:center;gap:.75rem;color:var(--ink-3)}
.col-arrow i{display:block;width:1px;height:clamp(3.5rem,9vw,7rem);
  background:linear-gradient(to bottom,transparent,var(--line-2) 85%)}
.col-arrow i+i{background:linear-gradient(to bottom,var(--line-2),transparent 85%)}
.col-arrow span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--grad);color:#fff;box-shadow:0 10px 26px -10px rgba(230,25,166,.65)}
.col-arrow svg{width:18px;height:18px}

.inbox{border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 2px 4px rgba(12,14,24,.04),0 28px 66px -32px rgba(12,14,24,.32)}
.inbox-hd{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.9rem 1.15rem;border-bottom:1px solid var(--line)}
.inbox-hd b{font-size:.94rem}
.inbox-hd span{font-size:.8rem;color:var(--ink-3)}
.inbox-r{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.15rem;
  border-bottom:1px solid var(--line);font-size:.92rem}
.inbox-r:last-child{border-bottom:0}
.inbox-r i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.inbox-r i.hot{background:var(--hot)}
.inbox-r b{font-weight:600}
.inbox-r em{font-style:normal;color:var(--ink-3);font-size:.85rem}
.inbox-r u{margin-left:auto;text-decoration:none;font-size:.78rem;font-weight:600;
  padding:.25rem .6rem;border-radius:99px;background:var(--wash);color:var(--brand);
  white-space:nowrap;flex:none}
.inbox-r b{white-space:nowrap}
.inbox-r u.hot{background:#ffe4e8;color:var(--hot)}

/* dowod — jedno zdanie, ktore czytelnik moze sprawdzic w tej samej minucie */
.proof{max-width:60rem;margin:clamp(2.5rem,5vw,4rem) auto 0;display:flex;gap:.9rem;
  align-items:flex-start;padding:1.4rem 1.5rem;border-radius:var(--r-lg);
  background:#f6eefb;border:1px solid #e6d9fa}
.proof-ic{flex:none;width:21px;height:21px;color:var(--brand);margin-top:.15rem}
.proof-ic svg{width:100%;height:100%}
.proof p{font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:64ch}
.proof b{color:var(--ink);font-weight:600}

/* ───────── dla kogo ───────── */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;max-width:66rem;margin:0 auto;
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 2px 4px rgba(12,14,24,.04),0 24px 60px -34px rgba(12,14,24,.22)}
.aud-card{padding:clamp(1.75rem,3vw,2.6rem)}
.aud-card+.aud-card{border-left:1px solid var(--line)}
.aud-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--wash);color:var(--brand);margin-bottom:1.2rem}
.aud-ic svg{width:21px;height:21px}
.aud-card h3{font-size:1.28rem;margin-bottom:.6rem}
.aud-card>p{color:var(--ink-2);line-height:1.55;max-width:40ch}
.aud-list{margin-top:1.5rem;display:grid;gap:.1rem}
.aud-list li{position:relative;padding:.6rem 0 .6rem 1.6rem;font-size:.96rem;color:var(--ink-2);
  border-top:1px solid var(--line)}
.aud-list li::before{content:'';position:absolute;left:0;top:1.05rem;width:7px;height:7px;
  border-radius:2px;background:var(--grad)}

/* ───────── zmiana: oś tygodnia ─────────
   Piec dni w jednym rzedzie, jak kalendarz na biurku — nie szesc kafli w
   siatce. Kazda kolumna to jeden dzien; przelacznik podmienia tresc kolumn,
   uklad zostaje, wiec widac, ze to naprawde ten sam tydzien. Jasne szklo
   zamiast czerni: sekcja przestaje byc dziura miedzy dwiema jasnymi. */
.tg-wrap{display:flex;justify-content:center;margin-bottom:clamp(2rem,3.5vw,2.75rem)}
.tg{display:inline-flex;padding:.3rem;border-radius:999px;background:rgba(12,14,24,.06);
  border:1px solid var(--line);position:relative}
.tg button{padding:.62rem 1.5rem;border-radius:999px;font-size:.95rem;font-weight:600;
  color:var(--ink-2);transition:color .2s;position:relative;z-index:1}
.tg button[aria-pressed="true"]{color:#fff}
.tg-pill{position:absolute;top:.3rem;bottom:.3rem;border-radius:999px;background:var(--ink);
  transition:left .38s var(--ease),width .38s var(--ease);z-index:0}

.sw{max-width:70rem;margin:0 auto}
.wk{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.wk[hidden]{display:none}
.wk li{background:var(--paper);padding:clamp(1.25rem,2vw,1.6rem) clamp(1rem,1.6vw,1.3rem);
  display:flex;flex-direction:column;gap:.8rem;min-height:9rem}
.wk-d{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--ink-3)}
.wk i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:.66rem;font-style:normal;font-weight:700}
.wk.before i{background:rgba(225,29,46,.12);color:var(--hot)}
.wk.after i{background:rgba(124,58,237,.14);color:var(--brand)}
.wk b{font-weight:500;font-size:.98rem;line-height:1.42;color:var(--ink);text-wrap:pretty}
/* koniec tygodnia: pasek pod osia, w „po” na gradiencie marki */
.wk li.sum{grid-column:1/-1;flex-direction:row;align-items:center;gap:1rem;min-height:0;
  padding:1.1rem clamp(1rem,1.6vw,1.3rem);background:var(--wash)}
.wk li.sum .wk-d{flex:none;width:9rem}
.wk li.sum b{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;font-size:1.08rem}
.wk.after li.sum{background:var(--grad);color:#fff}
.wk.after li.sum .wk-d,.wk.after li.sum b{color:#fff}
.wk-row{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
  overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .wk:not([hidden]) li{animation:sw-in .45s var(--ease) backwards}
  .wk li:nth-child(2){animation-delay:.05s}.wk li:nth-child(3){animation-delay:.1s}
  .wk li:nth-child(4){animation-delay:.15s}.wk li:nth-child(5){animation-delay:.2s}
  .wk li:nth-child(6){animation-delay:.25s}
  @keyframes sw-in{from{opacity:0;transform:translateY(10px)}}
}
@media (max-width:860px){
  .wk{grid-template-columns:1fr}
  .wk li{min-height:0}
  .wk li.sum{flex-direction:column;align-items:flex-start;gap:.4rem}
  .wk li.sum .wk-d{width:auto}
}

/* ───────── na dziś: produkt na środku ─────────
   Bylo: tekst po lewej, makieta po prawej, lista pod tekstem — trzy rzeczy
   walczace o uwage. Teraz naglowek prowadzi, makieta jest bohaterem na calej
   szerokosci, a trzy punkty czytaja ja pod spodem. */
.tw-wrap{max-width:58rem;margin:0 auto}
.tw{border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 2px 4px rgba(12,14,24,.04),0 34px 80px -34px rgba(91,33,182,.45)}
.tw-hd{display:flex;align-items:center;gap:.5rem;padding:1rem 1.4rem;font-size:.76rem;
  font-weight:700;letter-spacing:.08em;color:var(--ink-3);border-bottom:1px solid var(--line)}
.tw-dot{width:7px;height:7px;border-radius:50%;background:var(--hot)}
.tw-row{display:flex;align-items:center;gap:.8rem;padding:1.05rem 1.4rem;
  border-bottom:1px solid var(--line)}
.tw-row.hot{background:rgba(225,29,46,.05)}
.tw-row.hot .tw-bul{background:var(--hot)}
.tw-bul{flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.tw-bul.n{background:var(--brand)}
.tw-tx{flex:1;min-width:0}
.tw-tx strong{display:block;font-size:1rem;font-weight:600}
.tw-tx span{display:block;font-size:.88rem;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tw-act{flex:none;font-size:.85rem;font-weight:600;color:var(--brand);
  padding:.4rem .8rem;border-radius:9px;background:var(--wash)}
.tw-act.hot{color:#fff;background:var(--hot)}
.tw-ask{display:flex;align-items:center;gap:.55rem;padding:1.15rem 1.4rem .8rem;
  font-size:.98rem;font-weight:600}
.tw-ask-ic{width:18px;height:18px;color:var(--brand)}
.tw-ask-ic svg{width:100%;height:100%}
.tw-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.4rem 1.4rem}
.tw-chips span{padding:.45rem .85rem;border-radius:999px;border:1px solid var(--line);
  font-size:.88rem;color:var(--ink-2);background:var(--paper)}

/* trzy punkty pod makieta — czytaja ekran, ktory wlasnie zobaczyles */
.today-ls{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;
  max-width:58rem;margin:clamp(1rem,2vw,1.5rem) auto 0}
.today-ls li{position:relative;padding:1.25rem 1.3rem;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.today-ls li::before{content:'';display:block;width:7px;height:7px;border-radius:50%;
  background:var(--brand);margin-bottom:.7rem}
.today-ls li:first-child::before{background:var(--hot)}
.today-ls strong{display:block;font-size:1rem;font-weight:600;margin-bottom:.25rem}
.today-ls span{font-size:.92rem;line-height:1.45;color:var(--ink-2)}

@media (max-width:900px){
  .today-ls{grid-template-columns:1fr}
  .today-ls li{border-top:1px solid var(--line)}
  .today-ls li:first-child{border-top:0}
}

/* ───────── produkt: trzy kroki sterowane scrollem ─────────
   Zamiast trzech grup jedna pod druga sekcja przykleja sie na ekranie, a
   przewijanie przelacza kroki. Wysokosc toru daje scrollowi dystans, na ktorym
   ma sie to wydarzyc; sticky trzyma widok w miejscu. Na telefonie i przy
   prefers-reduced-motion tor sie rozwija i wszystko wraca do zwyklej listy. */
.fx-track{position:relative;height:300vh}
.fx-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:flex-start;
  padding:clamp(4.5rem,8vh,5.5rem) 0 clamp(2rem,5vh,3.5rem)}
/* sekcja z torem nie potrzebuje wlasnego gornego paddingu — sticky ma swoj;
   ujemny margines zbiera jeszcze kawalek pustki po sekcji „Na dzis” */
#produkt{padding-top:0;margin-top:calc(-1 * clamp(1.5rem,3vw,2.5rem))}
.fx-stage{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);width:100%;align-items:center}
/* Naglowek sekcji jedzie razem z przyklejonym widokiem — stojac nad torem
   zostawialby na wejsciu pol ekranu pustki, zanim tor sie przyklei. */
.fx-head{text-align:left;max-width:none;margin:0 0 clamp(1.75rem,3vh,2.5rem)}
.fx-head .h2{font-size:clamp(1.8rem,2.9vw,2.6rem)}
.fx-head p{margin-inline:0;font-size:1rem;max-width:34ch}

.fx-steps{display:grid;gap:.3rem;align-content:center}
.fx-steps li{position:relative;padding:.85rem 1.1rem;border-radius:14px;cursor:pointer;
  color:var(--ink-3);background:transparent;border:1px solid transparent;
  transition:color .3s,background .3s,box-shadow .3s,border-color .3s}
.fx-steps li>span{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:baseline}
.fx-steps li b{font-family:var(--fd);font-size:.88rem;font-weight:800;letter-spacing:-.02em}
.fx-steps li em{font-style:normal;font-family:var(--fd);font-size:1.08rem;font-weight:700;
  letter-spacing:-.03em}
/* opis rozwija sie tylko przy aktywnym kroku — reszta zostaje sama nazwa */
.fx-steps li p{grid-column:2;overflow:hidden;max-height:0;opacity:0;
  font-family:var(--fb);font-size:.92rem;font-weight:400;line-height:1.5;color:var(--ink-2);
  transition:max-height .4s var(--ease),opacity .3s,margin .4s var(--ease)}
.fx-steps li.on{color:var(--ink);background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-color:var(--glass-brd);
  box-shadow:0 2px 4px rgba(12,14,24,.05),0 18px 40px -22px rgba(12,14,24,.35)}
.fx-steps li.on p{max-height:6rem;opacity:1;margin-top:.5rem}

.fx-slides{display:grid}
/* Wychodzacy krok gasnie szybko, wchodzacy zapala sie z opoznieniem — inaczej
   przez chwile oba teksty leza na sobie i robi sie nieczytelna kasza. */
.fx-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(18px);
  pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s}
.fx-slide.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .4s var(--ease) .16s,transform .5s var(--ease) .16s,visibility 0s}
.fx-mods{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden}
/* nieparzysta liczba modulow zostawiala pusta komorke w siatce 2x2 */
.fx-mods>.fx-m:last-child:nth-child(odd){grid-column:1/-1}
.fx-m{background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:clamp(1.3rem,2.2vw,1.75rem);transition:background .2s}
.fx-m:hover{background:rgba(255,255,255,.92)}
.fx-m i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--wash);color:var(--brand);margin-bottom:.9rem}
.fx-m i svg{width:18px;height:18px}
.fx-m .fx-h{font-size:1.02rem;margin-bottom:.45rem}
.fx-m p{font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.fx-hint{display:flex;align-items:center;gap:.5rem;margin-top:1.25rem;padding-left:1rem;
  font-size:.85rem;color:var(--ink-3)}
.fx-hint i{display:block;width:12px;height:12px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%,100%{transform:rotate(45deg) translate(-3px,-3px)}
                50%{transform:rotate(45deg) translate(1px,1px)}}
@media (prefers-reduced-motion:reduce){.fx-hint i{animation:none;transform:rotate(45deg)}}

.fx-slide-h{display:none;align-items:baseline;gap:.8rem;margin-bottom:1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.fx-slide-h b{font-family:var(--fd);font-size:.95rem;font-weight:800;color:var(--ink-3)}
.fx-slide-h span{font-family:var(--fd);font-size:1.3rem;font-weight:700;letter-spacing:-.03em}

/* rozwiniecie: telefon i uzytkownicy z ograniczonym ruchem */
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .fx-track{height:auto}
  .fx-sticky{position:static;height:auto;display:block;overflow:visible}
  .fx-stage{grid-template-columns:1fr;gap:1.5rem}
  .fx-steps,.fx-hint{display:none}
  .fx-head{text-align:center;max-width:44rem;margin:0 auto clamp(2.5rem,5vw,3.5rem)}
  .fx-head p{margin-inline:auto;max-width:46ch}
  .fx-slides{display:grid;gap:clamp(2rem,4vw,3rem)}
  .fx-slide{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
  .fx-slide-h{display:flex}
}
@media (max-width:640px){.fx-mods{grid-template-columns:1fr}}

/* ───────── pieniądze ───────── */
.money-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);max-width:74rem;margin:0 auto;align-items:start}
.mm{border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 2px 4px rgba(12,14,24,.04),0 26px 64px -32px rgba(12,14,24,.28)}
.mm-hd{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.mm-hd strong{display:block;font-size:.98rem}
.mm-hd>div>span{font-size:.83rem;color:var(--ink-3)}
.mm-tabs{display:flex;gap:.25rem}
.mm-tabs span{padding:.32rem .6rem;border-radius:7px;font-size:.8rem;color:var(--ink-3)}
.mm-tabs .on{background:var(--ink);color:#fff;font-weight:600}
.mm-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
/* Etykiety maja rozna dlugosc; bez wyrownania do dolu liczby stoja na roznych
   wysokosciach i kafle wygladaja na przekrzywione. */
.mm-kpi{padding:1.1rem 1rem;border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;gap:.5rem}
.mm-kpi:first-child{border-left:0}
.mm-kpi span{display:block;font-size:.78rem;line-height:1.35;color:var(--ink-3)}
.mm-kpi strong{font-family:var(--fd);font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.03em}
.mm-kpi .up{color:var(--brand)}
.mm-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1.3rem}
.mm-split b{display:block;font-size:.86rem;font-weight:600;color:var(--ink-3);margin-bottom:.8rem}
.mm-f{display:grid;grid-template-columns:6.5rem 1fr 1.6rem;align-items:center;gap:.55rem;
  margin-bottom:.55rem;font-size:.85rem}
.mm-f i{display:block;height:7px;border-radius:99px;background:var(--brand);width:var(--w);opacity:.55}
.mm-f i.g{background:var(--grad);opacity:1}
.mm-f em{font-style:normal;text-align:right;font-weight:600;font-size:.85rem}
.mm-s{display:flex;justify-content:space-between;gap:.7rem;padding:.5rem 0;font-size:.85rem;
  border-top:1px solid var(--line);color:var(--ink-2)}
.mm-s:first-of-type{border-top:0}
.mm-s em{font-style:normal;font-weight:600;color:var(--ink)}
.money-ls{display:grid;gap:.1rem}
.money-ls li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:.85rem;
  row-gap:.3rem;padding:1.15rem 0;border-top:1px solid var(--line-2)}
.money-ls li:first-child{border-top:0;padding-top:0}
.ml-ic{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--paper);color:var(--brand);border:1px solid var(--line)}
.ml-ic svg{width:16px;height:16px}
.money-ls strong{font-size:1rem}
.money-ls li>span:last-child{font-size:.92rem;line-height:1.5;color:var(--ink-2)}

/* ───────── kroki ───────── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;max-width:70rem;margin:0 auto}
.step{background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:clamp(1.6rem,2.6vw,2.2rem)}
.step-hd{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line)}
.step-n{font-family:var(--fd);font-size:1.1rem;font-weight:800;letter-spacing:-.02em;
  line-height:1;color:var(--ink-3)}
.step-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--wash);color:var(--brand);margin-left:auto}
.step-ic svg{width:17px;height:17px}
.step h3{font-size:1.1rem;margin-bottom:.5rem}
.step p{font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.steps-cta{display:flex;justify-content:center;margin-top:clamp(2rem,3.5vw,3rem)}

/* ───────── porównanie: trzy karty zamiast tabeli ─────────
   Tabela 4x7 na telefonie wymagala przewijania w bok, a na desktopie zmuszala
   do skakania wzrokiem miedzy kolumnami. Trzy karty czyta sie po kolei, kazda
   niesie komplet odpowiedzi. Etykieta wiersza wchodzi do srodka jako podpis. */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.5vw,1.15rem);
  max-width:70rem;margin:0 auto;align-items:start}
.cmp-card{border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,2rem);
  border:1px solid var(--glass-brd);background:var(--glass-2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.cmp-card.us{background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:0 24px 60px -28px rgba(12,14,24,.6)}
.cmp-hd{display:flex;align-items:center;gap:.6rem;padding-bottom:1rem;margin-bottom:.35rem;
  border-bottom:1px solid var(--line)}
.cmp-card.us .cmp-hd{border-color:rgba(255,255,255,.16)}
.cmp-hd h3{font-size:1.15rem}
.cmp-card.us .cmp-hd h3{color:#fff}
.cmp-tag{font-size:.7rem;font-weight:700;letter-spacing:.02em;padding:.2rem .55rem;
  border-radius:999px;background:var(--grad);color:#fff;line-height:1.4}
.cmp-ls li{padding:.95rem 0;border-top:1px solid var(--line)}
.cmp-card.us .cmp-ls li{border-color:rgba(255,255,255,.12)}
.cmp-ls li:first-child{border-top:0}
.cmp-k{display:block;font-size:.78rem;font-weight:600;color:var(--ink-3);margin-bottom:.35rem}
.cmp-card.us .cmp-k{color:#9096b8}
.cmp-v{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;line-height:1.45;
  color:var(--ink-2)}
.cmp-card.us .cmp-v{color:#e2e4f0}
.tak,.nie{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:.62rem;margin-top:.1rem}
.tak{background:rgba(124,58,237,.14);color:var(--brand)}
.nie{background:rgba(225,29,46,.12);color:var(--hot)}
.cmp-card.us .tak{background:rgba(251,191,36,.2);color:#fbbf24}

@media (max-width:900px){.cmp-grid{grid-template-columns:1fr}}

/* ───────── kto za tym stoi ───────── */
.cred-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,4rem);max-width:70rem;margin:0 auto;align-items:center}
.cred-tx .h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
.cred-tx>p{margin-top:1.1rem;color:var(--ink-2);line-height:1.6;max-width:48ch}
.cred-pts{display:grid;gap:1px;background:var(--line);border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);overflow:hidden}
.cred-pts li{background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:1.15rem 1.3rem}
.cred-pts strong{display:block;font-size:.98rem;margin-bottom:.2rem}
.cred-pts span{font-size:.9rem;color:var(--ink-3)}

/* ───────── FAQ ───────── */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
  gap:clamp(2rem,4vw,4rem);max-width:70rem;margin:0 auto;align-items:start}
.faq-side{position:sticky;top:6.5rem}
.faq-side>p{margin:1rem 0 1.5rem;color:var(--ink-2);line-height:1.55;max-width:34ch}
.faq-ls{display:grid}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;transition:color .18s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--brand)}
.q summary::after{content:'';position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  margin-top:-6px;border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg);transform-origin:60% 60%;transition:transform .28s var(--ease)}
.q[open] summary::after{transform:rotate(-135deg)}
.q p{padding:0 2.5rem 1.3rem 0;color:var(--ink-2);line-height:1.6;max-width:62ch}

/* ───────── domknięcie ─────────
   Jedyne miejsce, gdzie gradient marki wypelnia cala plaszczyzne. Wczesniej
   wystepuje tylko w logo i drobnych akcentach, wiec tutaj czyta sie jak koniec.
   Gradient jest ciemniejszy niz w logo i przykryty poswiata w rogu — plaska
   tecza od niebieskiego do pomaranczowego czytala sie jak tapeta, nie jak tlo. */
.cta-box{position:relative;overflow:hidden;max-width:70rem;margin:0 auto;border-radius:30px;
  padding:clamp(2.25rem,4vw,3.25rem) clamp(1.5rem,4vw,3.25rem);color:#fff;
  background:linear-gradient(118deg,#4c1d95 0%,#7c3aed 24%,#be185d 54%,#e619a6 76%,#fbbf24 100%);
  box-shadow:0 30px 90px -34px rgba(91,33,182,.55)}
.cta-box::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(to right,#fff 1px,transparent 1px),
                   linear-gradient(to bottom,#fff 1px,transparent 1px);
  background-size:58px 58px;opacity:.1;
  -webkit-mask-image:radial-gradient(ellipse 75% 80% at 30% 20%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse 75% 80% at 30% 20%,#000,transparent 80%)}
/* poswiata w gornym lewym rogu daje plaszczyznie glebie */
.cta-box::after{content:'';position:absolute;left:-10%;top:-40%;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);
  pointer-events:none}
.cta-in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
.cta-box .kicker{margin-bottom:1.15rem;background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.42);color:#fff}
.cta-box .kicker::before{background:#fff}
.cta-box .h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.cta-box>*{position:relative}
.cta-tx>p{margin:1rem 0 1.9rem;font-size:1.08rem;line-height:1.55;
  color:rgba(255,255,255,.92);max-width:38ch;text-wrap:pretty}
.btn.w{background:#fff;color:var(--ink);box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.btn.w:hover{background:var(--ink);color:#fff}

/* szklana karta: to samo, co stalo w jednej linijce pod przyciskiem, rozbite
   na trzy fakty — czyta sie szybciej i wypelnia prawa polowe plaszczyzny */
/* Wspolna siatka dla calej listy (subgrid), zeby opisy zaczynaly sie w jednej
   kolumnie — przy osobnych siatkach kazdy wiersz rownal sie do swojej liczby. */
.cta-card{display:grid;grid-template-columns:max-content minmax(0,1fr);
  border-radius:20px;padding:.4rem 1.4rem;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.cta-card li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;
  gap:.9rem;padding:1.05rem 0;border-top:1px solid rgba(255,255,255,.22)}
.cta-card li:first-child{border-top:0}
.cta-card b{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1;white-space:nowrap}
.cta-card span{font-size:.95rem;color:rgba(255,255,255,.86);line-height:1.4}
.cta-mic{margin-top:1.15rem;font-size:.92rem;color:rgba(255,255,255,.82)}

@media (max-width:860px){
  .cta-in{grid-template-columns:1fr;gap:2rem}
  .cta-tx>p{max-width:none}
  /* uklady, ktore na telefonie schodza do jednej kolumny — odtworzone po tym,
     jak przebudowa sekcji zjadla ich pierwotny blok */
  .col-grid{grid-template-columns:1fr;gap:1.75rem}
  .col-arrow{grid-auto-flow:column;justify-self:center}
  .col-arrow i{width:clamp(2rem,12vw,4rem);height:1px;
    background:linear-gradient(to right,transparent,var(--line-2))}
  .col-arrow i+i{background:linear-gradient(to right,var(--line-2),transparent)}
  .col-arrow span{transform:rotate(90deg)}
  .scatter{grid-template-columns:1fr 1fr}
  .proof{flex-direction:column;gap:.8rem}
  .aud-grid{grid-template-columns:1fr}
  .aud-card+.aud-card{border-left:0;border-top:1px solid var(--line)}
  }

/* ───────── stopka ───────── */
.ft{background:var(--ink);color:#fff;padding:clamp(3rem,5vw,4.5rem) 0 0}
.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-bottom:clamp(2.5rem,4vw,3.5rem);border-bottom:1px solid rgba(255,255,255,.1)}
.ft-cta strong{display:block;font-family:var(--fd);font-size:clamp(1.2rem,2.2vw,1.6rem);
  font-weight:700;letter-spacing:-.03em;margin-bottom:.35rem}
.ft-cta span{font-size:.95rem;color:#a9aecb}
.ft-cta .btn.p{background:#fff;color:var(--ink)}
.ft-cta .btn.p:hover{background:var(--brand);color:#fff}
.ft-in{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem;
  padding:clamp(2.5rem,4vw,3.5rem) var(--pad)}
.ft-bd img{height:26px;width:auto;margin-bottom:.9rem}
.ft-bd p{font-size:.92rem;line-height:1.55;color:#a9aecb;max-width:34ch}
.ft-bd a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ft-col h5{font-size:.82rem;font-weight:600;color:#fff;margin-bottom:.9rem;
  font-family:var(--fb);letter-spacing:0}
.ft-col a{display:block;font-size:.92rem;color:#a9aecb;padding:.3rem 0;transition:color .18s}
.ft-col a:hover{color:#fff}
.ft-bt{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:var(--max);margin:0 auto;padding:1.3rem var(--pad);font-size:.85rem;color:#7f849f;
  border-top:1px solid rgba(255,255,255,.1)}
.ft-bt-l{display:flex;gap:1.25rem;flex-wrap:wrap}
.ft-bt a:hover{color:#fff}

/* ───────── pasek przyklejony na dole ───────── */
.sticky{position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,140%);z-index:70;
  display:flex;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.25rem;border-radius:999px;
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 14px 40px -12px rgba(12,14,24,.3);transition:transform .45s var(--ease)}
.sticky.on{transform:translate(-50%,0)}
.sticky p{font-size:.92rem;color:var(--ink-2);white-space:nowrap}
.sticky b{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .money-grid,.cred-in,.faq-grid{grid-template-columns:1fr}
  .faq-side{position:static}
  .steps-grid{grid-template-columns:1fr}
  .mm-kpis{grid-template-columns:1fr 1fr}
  .mm-kpi:nth-child(3){border-left:0}
  .mm-kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .mm-split{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
    }
@media (max-width:560px){
  .sticky{left:var(--pad);right:var(--pad);bottom:.8rem;transform:translateY(140%);
    justify-content:space-between;gap:.6rem;padding-left:1rem}
  .sticky.on{transform:translateY(0)}
  .sticky p{font-size:.86rem;white-space:normal}
  .ft-in{grid-template-columns:1fr}
}

/* ───────── cennik: jeden pakiet ─────────
   Przy jednym planie trzy waskie karty nie maja czego porownywac, wiec zostaje
   jedna szeroka: po lewej pelna lista tego, co wchodzi, po prawej cena i decyzja.
   Karta jest ciemna — na jasnej stronie to jedyny taki blok, wiec czyta sie jak
   konkret, a nie jak kolejna sekcja. */
.pr-box{max-width:70rem;margin:0 auto;border-radius:26px;overflow:hidden;
  background:var(--ink);color:#fff;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  box-shadow:0 30px 90px -38px rgba(12,14,24,.65)}

.pr-what{padding:clamp(1.75rem,3vw,2.6rem)}
.pr-what h3{font-size:1.05rem;color:#fff;margin-bottom:.35rem}
.pr-what>p{font-size:.92rem;color:#a9aecb;margin-bottom:1.5rem}
.pr-ls{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.75rem}
.pr-ls li{position:relative;padding:.62rem 0 .62rem 1.6rem;font-size:.93rem;color:#d8daea;
  border-top:1px solid rgba(255,255,255,.1)}
.pr-ls li:nth-child(1),.pr-ls li:nth-child(2){border-top:0}
.pr-ls li::before{content:'';position:absolute;left:0;top:1.02rem;width:10px;height:6px;
  border-left:1.8px solid #c4a5ff;border-bottom:1.8px solid #c4a5ff;transform:rotate(-45deg)}

/* prawa polowa: gradient marki jako podklad pod cene i decyzje */
.pr-buy{position:relative;padding:clamp(1.75rem,3vw,2.6rem);display:flex;flex-direction:column;
  justify-content:center;
  background:linear-gradient(150deg,#4c1d95,#7c3aed 28%,#be185d 60%,#e619a6 82%,#f0a92c 100%)}
.pr-buy::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(to right,#fff 1px,transparent 1px),
                   linear-gradient(to bottom,#fff 1px,transparent 1px);
  background-size:46px 46px;opacity:.11;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 40% 25%,#000,transparent 82%);
  mask-image:radial-gradient(ellipse 80% 70% at 40% 25%,#000,transparent 82%)}
.pr-buy>*{position:relative}
.pr-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.5rem}
.pr-price em{font-style:normal;font-size:.95rem;color:rgba(255,255,255,.85)}
.pr-price b{font-family:var(--fd);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;
  letter-spacing:-.05em;line-height:1}
.pr-price span{font-size:.95rem;color:rgba(255,255,255,.85)}
.pr-buy>p{font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.9);margin-bottom:1.5rem}
.pr-buy .btn{width:100%}
.pr-facts{margin-top:1.5rem;display:grid;gap:.7rem}
.pr-facts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;
  font-size:.9rem;color:rgba(255,255,255,.92);line-height:1.4}
.pr-facts i{display:block;width:16px;height:9px;margin-top:.28rem;
  border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg) scale(.62);
  transform-origin:center}

.pr-foot{max-width:70rem;margin:1.15rem auto 0;font-size:.9rem;color:var(--ink-3);text-align:center}

@media (max-width:900px){
  .pr-box{grid-template-columns:1fr}
  .pr-ls{grid-template-columns:1fr}
  .pr-ls li:nth-child(2){border-top:1px solid rgba(255,255,255,.1)}

}
@media (max-width:560px){.pr-ls{gap:.1rem}}