.elementor-707 .elementor-element.elementor-element-2a7058b4{--display:flex;}/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════════
   

   LEGENDA KLAS:
   cs-page      → główny kontener całego wpisu (tło, fonty)
   cs-sec       → kontener sekcji (odstępy pionowe; padding kontenera daj 0)
   cs-alt       → dodatkowo do cs-sec: ciemniejsze tło + linie + poświata
   cs-hero      → dodatkowo do cs-sec: sekcja otwierająca (siatka + glow)
   cs-eyebrow   → Nagłówek H6: "Case study"
   cs-num       → Nagłówek H6: "01 — Punkt wyjścia"
   cs-title     → Nagłówek H1/H2/H3 sekcji
   cs-lead      → Edytor tekstu: lead pod tytułem
   cs-text      → Edytor tekstu: zwykłe akapity
   cs-chips     → Edytor tekstu: "WWW · UX/UI · SEO"
   cs-goal      → Edytor tekstu: boks z celem (pierwsza linia pogrubiona = etykieta)
   cs-meta      → kontener metryczki (w środku 4 kolumny)
   cs-meta-lbl  → Nagłówek H6: "Klient" / "Branża" / "Zakres" / "Rok"
   cs-meta-val  → Nagłówek H4: wartość
   cs-card      → kontener karty (etapy pracy, statystyki)
   cs-card-nr   → Nagłówek H6: "/ 01"
   cs-stat-lbl  → Nagłówek H6: etykieta wyniku
   cs-stat-nr   → Nagłówek H3: liczba z gradientem
   cs-quote     → Edytor tekstu: cytat klienta
   cs-author    → Edytor tekstu: podpis pod cytatem
   cs-cap       → Edytor tekstu: podpis pod zdjęciem
   cs-shot      → widżet Obraz: zwykły screen w ramce
   cs-browser   → widżet Obraz: DŁUGI screen desktop w ramce przeglądarki
   cs-phone     → widżet Obraz: DŁUGI screen mobile w ramce telefonu
   cs-auto      → dodatkowo do cs-browser / cs-phone: screen przewija się sam
   grad-text / ital → span w treści nagłówka, np.
                  Strona dla branży <span class="ital grad-text">beauty.</span>
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. BAZA STRONY ─────────────────────────────────────────────── */
.cs-page {
  --bg: #0A0A0B;
  --bg2: #0D0D0F;
  --panel: #141417;
  --paper: #F3EFE7;
  --paper80: rgba(243, 239, 231, .80);
  --paper65: rgba(243, 239, 231, .65);
  --paper50: rgba(243, 239, 231, .50);
  --paper35: rgba(243, 239, 231, .35);
  --hair: rgba(243, 239, 231, .12);
  --hair2: rgba(243, 239, 231, .07);
  --pink: #E16BE0;
  --grad: linear-gradient(100deg, #9D2BB5 0%, #C13ACA 48%, #E16BE0 100%);
  --disp: "Poppins", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  background-color: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.cs-page ::selection {
  background: #9D2BB5;
  color: #0A0A0B;
}

/* ── 1. SEKCJE ──────────────────────────────────────────────────── */
.cs-sec.cs-sec {
  padding-block: clamp(72px, 9vw, 124px);
}

/* ciemniejsza sekcja z liniami (02 i 04) */
.cs-alt.cs-alt {
  background:
    radial-gradient(900px 560px at 100% 0%, rgba(157, 43, 181, .12), transparent 62%),
    var(--bg2);
  border-block: 1px solid var(--hair);
}

/* hero z siatką i poświatą */
.cs-hero.cs-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(110px, 13vw, 168px) clamp(56px, 7vw, 88px);
  background:
    radial-gradient(1000px 620px at 78% -14%, rgba(225, 107, 224, .24), transparent 62%),
    radial-gradient(760px 520px at 4% 46%, rgba(157, 43, 181, .16), transparent 60%),
    linear-gradient(180deg, #0C090D 0%, #0A0A0B 100%);
}

.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 239, 231, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 239, 231, .05) 1px, transparent 1px);
  background-size: clamp(74px, 9vw, 128px) clamp(74px, 9vw, 128px);
  -webkit-mask-image: radial-gradient(ellipse 82% 62% at 50% 22%, #000 22%, transparent 74%);
  mask-image: radial-gradient(ellipse 82% 62% at 50% 22%, #000 22%, transparent 74%);
  pointer-events: none;
}

.cs-hero > * {
  position: relative;
  z-index: 1;
}

/* ── 2. TYPOGRAFIA ──────────────────────────────────────────────── */
.cs-eyebrow .elementor-heading-title,
.cs-eyebrow p {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
}

.cs-eyebrow .elementor-heading-title::before,
.cs-eyebrow p::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--pink);
}

.cs-num .elementor-heading-title,
.cs-num p {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper35);
}

.cs-title .elementor-heading-title,
.cs-title h1,
.cs-title h2,
.cs-title h3 {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--paper);
  line-height: 1.05;
}

.cs-title h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: -.04em; max-width: 17ch; }
.cs-title h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); max-width: 920px; }
.cs-title h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.15; }

/* gradient i kursywa — spany wewnątrz nagłówka */
.grad-text {
  background: linear-gradient(100deg, #9D2BB5 0%, #C13ACA 48%, #E16BE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ital {
  font-family: "Poppins", system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
}

.cs-lead p,
.cs-lead {
  color: var(--paper80);
  font-size: clamp(.98rem, 1.3vw, 1.16rem);
  line-height: 1.72;
  max-width: 62ch;
}

.cs-text p,
.cs-text {
  color: var(--paper65);
  line-height: 1.75;
  max-width: 58ch;
}

.cs-text p + p { margin-top: 1.1rem; }
.cs-text strong { color: var(--paper); font-weight: 600; }

.cs-chips p,
.cs-chips {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper50);
}

.cs-cap p,
.cs-cap {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper35);
}

/* ── 3. BLOKI ───────────────────────────────────────────────────── */

/* boks z celem projektu — pierwsza linia jako POGRUBIONA = etykieta */
.cs-goal.cs-goal {
  padding: 1.5rem 1.7rem;
  border-left: 2px solid;
  border-image: linear-gradient(180deg, #9D2BB5, #E16BE0) 1;
  background: linear-gradient(90deg, rgba(157, 43, 181, .10), transparent 70%);
  font-family: var(--disp);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--paper);
}

.cs-goal strong {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .7rem;
}

/* metryczka Klient / Branża / Zakres / Rok */
.cs-meta.cs-meta {
  border-block: 1px solid var(--hair);
  padding-block: clamp(1.1rem, 1.8vw, 1.5rem);
}

.cs-meta-lbl .elementor-heading-title {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper35);
}

.cs-meta-val .elementor-heading-title {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--paper);
}

/* karta — etapy pracy i statystyki */
.cs-card.cs-card {
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(24px, 2.8vw, 34px);
  background: linear-gradient(145deg, rgba(243, 239, 231, .055), rgba(243, 239, 231, .02)), var(--panel);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s;
}

.cs-card.cs-card:hover {
  transform: translateY(-5px);
  border-color: rgba(225, 107, 224, .34);
}

.cs-card-nr .elementor-heading-title {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--pink);
}

/* statystyki */
.cs-stat-lbl .elementor-heading-title {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
}

.cs-stat-nr .elementor-heading-title {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(100deg, #9D2BB5 0%, #C13ACA 48%, #E16BE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* opinia klienta */
.cs-quote.cs-quote {
  text-align: center;
}

.cs-quote p {
  font-family: var(--disp);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--paper);
  max-width: 860px;
  margin-inline: auto;
}

.cs-quote::before {
  content: "„";
  display: block;
  text-align: center;
  font-family: var(--disp);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: .4;
  margin-bottom: 1.4rem;
  background: linear-gradient(100deg, #9D2BB5 0%, #C13ACA 48%, #E16BE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cs-author p,
.cs-author {
  text-align: center;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper50);
}

.cs-author strong { color: var(--paper); }

/* ── 4. SCREENY I RAMKI URZĄDZEŃ ────────────────────────────────── */

/* zwykły screen w ramce */
.cs-shot.cs-shot {
  border: 1px solid var(--hair);
  border-radius: 24px;
  overflow: hidden;
  background: var(--panel);
}

.cs-shot img {
  display: block;
  width: 100%;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.cs-shot:hover img { transform: scale(1.02); }

/* DŁUGI screen desktop — ramka przeglądarki, przewija się na hoverze */
.cs-browser.cs-browser {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: 22px;
  overflow: hidden;
  background: #141419;
  padding-top: 44px;
  box-shadow: 0 46px 120px -48px rgba(157, 43, 181, .45);
}

.cs-browser::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(243, 239, 231, .25);
  box-shadow: 18px 0 0 rgba(243, 239, 231, .16), 36px 0 0 rgba(243, 239, 231, .10);
}

.cs-browser::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 72px;
  right: 20px;
  z-index: 2;
  height: 20px;
  border-radius: 999px;
  background: rgba(243, 239, 231, .06);
}

.cs-browser img {
  display: block;
  width: 100%;
  height: clamp(380px, 44vw, 620px);
  object-fit: cover;
  object-position: top center;
  transition: object-position 7s cubic-bezier(.4, 0, .2, 1);
}

.cs-browser:hover img { object-position: bottom center; }

/* DŁUGI screen mobile — ramka telefonu, przewija się na hoverze */
.cs-phone.cs-phone {
  position: relative;
  max-width: 340px;
  margin-inline: auto;
  border: 1px solid rgba(243, 239, 231, .16);
  border-radius: 44px;
  overflow: hidden;
  background: #141419;
  padding: 10px;
  box-shadow: 0 36px 100px -44px rgba(157, 43, 181, .5);
}

.cs-phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 84px;
  height: 20px;
  border-radius: 999px;
  background: #0A0A0B;
  border: 1px solid rgba(243, 239, 231, .08);
}

.cs-phone img {
  display: block;
  width: 100%;
  height: clamp(460px, 58vw, 600px);
  object-fit: cover;
  object-position: top center;
  border-radius: 34px;
  transition: object-position 8s cubic-bezier(.4, 0, .2, 1);
}

.cs-phone:hover img { object-position: bottom center; }

/* wariant: screen przewija się SAM (dodaj do cs-browser / cs-phone) */
@keyframes csScroll {
  0%, 10%   { object-position: top center; }
  90%, 100% { object-position: bottom center; }
}

.cs-auto img {
  animation: csScroll 16s ease-in-out infinite alternate;
}

/* na dotykowych (brak hovera) — długie screeny przewijają się same */
@media (hover: none) {
  .cs-browser img,
  .cs-phone img {
    animation: csScroll 16s ease-in-out infinite alternate;
  }
}

/* ── 5. RESPONSYWNOŚĆ I DOSTĘPNOŚĆ ──────────────────────────────── */
@media (max-width: 760px) {
  .cs-page { font-size: 16px; }
  .cs-browser.cs-browser { padding-top: 36px; border-radius: 18px; }
  .cs-browser::before { top: 13px; }
  .cs-browser::after { top: 9px; height: 18px; left: 66px; }
  .cs-browser img { height: clamp(300px, 62vw, 420px); }
  .cs-phone img { height: clamp(420px, 110vw, 540px); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-page *,
  .cs-page *::before,
  .cs-page *::after {
    animation: none !important;
    transition: none !important;
  }
}/* End custom CSS */