/* ============================================================
   ZUNO UI — wspólny design system landingów (/cennik, /pro)
   ------------------------------------------------------------
   Wyciągnięty z cennik/index.html, żeby obie strony nie
   rozjeżdżały się przy każdej zmianie.

   Ładować PRZED css/navbar.css i przed własnym <style> strony:
     <link rel="stylesheet" href="../css/zuno-ui.css">     (poziom 1: /cennik/)
     <link rel="stylesheet" href="../../css/zuno-ui.css">  (poziom 2: /pro/info/)

   Style specyficzne dla jednej strony zostają w jej <style>.
   ============================================================ */

/* ---------- TOKENY ---------- */
:root {
  --cream: #FFFFFF;
  --white: #FFFFFF;
  --ink: #221D1A;
  --body: #5C554F;
  --terracotta: #BD7443;
  --terracotta-text: #A85F32; /* ciemniejszy wariant dla małych wersalikowych etykiet - kontrast AA */
  /* Jeszcze ciemniejszy wariant na brzoskwiniowym tle: --terracotta-text ma
     na --peach-tint tylko 4,37:1 i nie przechodzi progu 4,5:1 dla małego
     tekstu (SC 1.4.3). Ten daje 4,93:1 na tincie i 5,46:1 na bieli. */
  --terracotta-on-peach: #9E5729;
  --lavender: #A99CEA;
  --lavender-deep: #7C6BA8;
  --lavender-tint: #EFEBFC;
  --peach-fuzz: #FFBE9D;
  --peach-tint: #FFF1E7;
  --sky: #6FA3E0;
  --sky-text: #3B72B0; /* ciemniejszy wariant do ikon i tekstu - kontrast AA (jak --terracotta-text) */
  --sky-tint: #EAF3FC;
  --line: #EFE7DD;
  --glass-bg-strong: rgba(255,255,255,0.94);
  --glass-border: rgba(255,255,255,1);
  --gradient-violet: linear-gradient(150deg, #D6CDF8 0%, #B6AAF0 35%, #9587DE 70%, #7C6BA8 100%);
  --gradient-btn: linear-gradient(135deg, #BBAFF0 0%, #A99CEA 50%, #8C7DDB 100%);
  /* Brzoskwiniowy odpowiednik --gradient-btn. Akcent stron konsumenckich
     (/zuno): ten sam komponent co na /cennik, inna temperatura koloru. */
  --gradient-peach: linear-gradient(135deg, #FFBE9D 0%, #FFD8CC 100%);
  --gradient-aurora: radial-gradient(circle at 30% 30%, rgba(169,156,234,0.55), transparent 60%),
                      radial-gradient(circle at 70% 60%, rgba(111,163,224,0.45), transparent 60%),
                      radial-gradient(circle at 50% 90%, rgba(198,182,245,0.4), transparent 60%);
}

/* ---------- BAZA ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: 80px; /* kompensacja fixed navbara z navbar.css */
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Obwódka focusu: ciemny atrament + biały pierścień rozdzielający.
   Lawendowa obwódka znikała na fioletowych przyciskach (1,34:1 na ciemnym
   końcu gradientu). --ink daje >=3:1 i na bieli, i na fiolecie - SC 2.4.11. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--white);
}

/* Skip link - pierwszy przystanek Tab, pozwala pominąć navbar (SC 2.4.1). */
.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -160%);
  z-index: 1100;
  padding: 12px 22px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(93,64,42,0.35);
  transition: transform 0.18s ease;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- TYPOGRAFIA ---------- */
h1 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 22px;
  color: var(--ink);
  text-wrap: balance;
}
/* Interlinia jest jawna, bo bez niej nagłówki dziedziczyły 1.6 z body - przy
   36,8 px dawało to 59 px między wierszami, czyli więcej niż odstęp nagłówka
   od akapitu pod nim (14 px). Wielowierszowy nagłówek rozpadał się wtedy na
   osobne zdania zamiast czytać się jako jeden blok. Skala jest ta sama co w
   h1 (1.08): im większy stopień, tym ciaśniej. */
h2 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--ink);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin-bottom: 18px;
}

.definition { max-width: 520px; margin: 0 0 14px; font-size: 1.08rem; color: var(--body); }
.lead { max-width: 460px; margin: 0; font-size: 1.05rem; color: var(--body); }
.section-lead { text-align: center; max-width: 560px; margin: 0 auto 44px; color: var(--body); }

.definition, .lead, .split-text p, .cta-card p, .section-lead, details p { text-wrap: pretty; }
.quote-italic, .section-lead { text-wrap: balance; }

/* Link w zdaniu. Podkreślenie jest obowiązkowe: sam kolor nie może być
   jedynym wyróżnikiem (SC 1.4.1). Kolor --terracotta-text (4,83:1), nie
   --terracotta (3,66:1), który nie przechodzi progu 4,5:1 (SC 1.4.3). */
.link-inline {
  color: var(--terracotta-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.link-inline:hover { color: var(--lavender-deep); text-decoration-thickness: 2px; }

section { padding: 68px 0; }
/* Modyfikator dla sekcji, które potrzebują więcej oddechu (długie landingi) */
.section-airy { padding: 90px 0; }

/* ---------- PRZYCISKI ---------- */
.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 15px 28px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary { background: var(--gradient-btn); color: var(--white); }
.btn-primary:hover { background: var(--lavender-deep); }
/* Brzoskwiniowy odpowiednik .btn-primary - do stron, na których obok siebie
   stoją DWIE równorzędne ścieżki: konsumencka (brzoskwinia) i specjalistyczna
   (fiolet). Poza takim rozjazdem zostaje .btn-primary, żeby serwis miał jeden
   przycisk główny. Napis jest ciemny: brzoskwinia jest jasna i biały tekst nie
   przeszedłby progu kontrastu (SC 1.4.3). */
.btn-peach { background: var(--gradient-peach); color: var(--ink); }
.btn-peach:hover { background: var(--peach-fuzz); }
.btn-secondary { background: var(--white); color: var(--ink); border: 1.5px solid var(--line); }
.btn-secondary:hover { border-color: var(--lavender); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ---------- ODZNAKI SKLEPÓW (App Store / Google Play) ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badges.center { justify-content: center; }
.store-link { display: inline-block; border-radius: 8px; transition: transform 0.15s ease, filter 0.15s ease; }
.store-link:hover { transform: translateY(-2px); filter: brightness(1.05); }
.store-badge-image { height: 44px; width: auto; max-width: 150px; }

/* ---------- HERO (siatka + dekoracyjny blob) ---------- */
header.hero { padding: 64px 0 40px; position: relative; overflow: visible; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
  text-align: left;
}
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.hero-blob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--peach-fuzz) 0%, #E8CDF0 55%, #C9B8EE 100%);
  opacity: 0.55;
  z-index: 0;
}
/* Wariant organiczny - miękka, nieregularna plama zamiast koła.
   Tło i krycie dziedziczy z .hero-blob, więc obie wersje hero
   (/cennik, /zuno) mają dokładnie ten sam gradient. */
.hero-blob--organic { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-visual { margin-top: 12px; min-height: 260px; }
}

/* Wariant jednokolumnowy - strony bez wizualu w hero (np. /faq).
   Nagłówek i lead wyśrodkowane, szerokość ograniczona, żeby wiersz
   nie robił się dłuższy niż na dwukolumnowym .hero-grid. */
.hero-center { text-align: center; }
.hero-center h1 { max-width: 760px; margin-left: auto; margin-right: auto; }
.hero-center .section-lead { margin-bottom: 28px; }
.hero-center .btn-row { justify-content: center; }

/* ---------- POWIERZCHNIA (baza pod karty i banery) ---------- */
.surface {
  background: var(--white);
  border-radius: 28px;
  border: 1px solid var(--line);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 30px 60px -32px rgba(93,64,42,0.16),
    0 10px 22px -14px rgba(93,64,42,0.10);
}

/* ---------- SPLIT CARD (tekst + wizual, na przemian lewo/prawo) ---------- */
.split-card {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 36px;
  align-items: center;
  padding: 44px;
}
/* Odwrócenie: wizual ląduje w pierwszej kolumnie, tekst w drugiej.
   Kolumny też się zamieniają (0.85fr 1fr), żeby tekst został szerszy -
   inaczej to wizual dostałby szerszą kolumnę. */
.split-card.reverse { grid-template-columns: 0.85fr 1fr; }
.split-card.reverse .split-visual { order: 1; }
.split-card.reverse .split-text { order: 2; }
/* Wariant bez chrome - rzędy "feature tour", które nie są kartą */
.split-card.flush { padding: 0; }
/* Kontener na serię rzędów - rytm pionowy bez marginesów na dzieciach */
.split-stack { display: grid; gap: 56px; }

.split-text { text-align: left; }
.split-text .eyebrow { margin-bottom: 12px; }
/* 20 px, nie 14: po zacieśnieniu interlinii h2 do 1.2 odstęp od akapitu musi
   być wyraźnie większy niż światło między wierszami samego nagłówka. */
.split-text h2 { text-align: left; margin-bottom: 20px; }
.split-text p { color: var(--body); margin: 0; }
.split-visual {
  position: relative;
  border-radius: 24px;
  min-height: 260px;
  padding: 10px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 26px 50px -22px rgba(93,64,42,0.30), 0 10px 20px -12px rgba(93,64,42,0.18);
}
.split-visual img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 16px;
  object-fit: cover;
}
/* Gotowe grafiki z własną ramką (laptop / katalog) - bez dodatkowego kontenera, cały kadr widoczny */
.split-visual.plain {
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  overflow: visible;
}
.split-visual.plain img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
}
@media (max-width: 760px) {
  .split-card, .split-card.reverse { grid-template-columns: 1fr; text-align: center; }
  .split-card.reverse .split-visual, .split-card.reverse .split-text { order: initial; }
  .split-text, .split-text h2 { text-align: center; }
  .split-text .btn-row { justify-content: center; }
  .split-visual { min-height: 160px; }
}

/* ---------- KARTY PLANÓW (cennik + teaser na landingu) ---------- */
/* Trzy rowne kolumny. Karta "Popularny" nie dostaje szerszej kolumny - zamiast
   tego jej ramka wychodzi 30px poza kolumne w kazda strone (margin-inline),
   dzieki czemu biale okno w srodku ma DOKLADNIE te sama szerokosc co karty
   boczne, przy kazdej szerokosci ekranu. Wczesniej kolumna 1.15fr dawala
   karte szersza o 48px, ale ramka zjadala 60px, wiec biale pole wychodzilo
   12px wezsze niz po bokach.
   column-gap 50px, bo ramka zabiera z niego 30px - zostaje 20px realnego
   odstepu, tyle samo co wczesniej. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 50px;
  row-gap: 20px;
  align-items: stretch;
}
.card {
  background: var(--white);
  border-radius: 28px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 24px 44px -26px rgba(93,64,42,0.14),
    0 8px 16px -12px rgba(93,64,42,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 32px 56px -26px rgba(93,64,42,0.18),
    0 12px 20px -12px rgba(93,64,42,0.10);
}
/* Wariant skrócony - teaser cennika na landingu (bez listy funkcji) */
.card.compact { text-align: center; padding: 30px 26px; }

/* Karta "Popularny" - blok nasyconego koloru z białym oknem w środku (efekt Loom) */
.card.popular {
  background: var(--gradient-violet);
  border: none;
  padding: 30px;
  box-shadow:
    0 24px 40px -18px rgba(108,92,180,0.38),
    0 8px 16px -10px rgba(108,92,180,0.24);
  position: relative;
  transform: translateY(-14px);
  display: flex;
  align-items: stretch;
  /* Ramka wychodzi poza kolumne - patrz komentarz przy .cards */
  margin-inline: -30px;
}
.card.popular:hover { transform: translateY(-19px); }
.popular-window {
  background: var(--white);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  box-shadow: 0 20px 40px -20px rgba(30,20,50,0.35), 0 1.5px 0 rgba(255,255,255,1) inset;
}
.popular-window .plan-name { color: var(--lavender-deep); }
.badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--white); color: var(--lavender-deep);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(93,64,42,0.25);
}
.plan-name { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta-text); margin-bottom: 14px; }
.plan-price { font-family: "Montserrat", sans-serif; font-size: clamp(2.8rem, 4vw, 3.4rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 2px; color: var(--ink); line-height: 1; }
.plan-condition { font-size: 0.8rem; color: var(--body); margin-bottom: 4px; }

/* ---------- BENTO (siatka kafli o różnej szerokości) ----------
   Rytm 1/3 - 2/3 - 2/3 - 1/3: siatka nie rozpada się na cztery równe
   prostokąty, a szerokie kafle mieszczą tekst obok wizualu. Kafel stoi
   na tej samej gramatyce co .card (radius 28, ten sam cień i hover),
   dokłada tylko pasek akcentu u góry. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bento-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 24px 44px -26px rgba(93,64,42,0.14),
    0 8px 16px -12px rgba(93,64,42,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bento-tile:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 32px 56px -26px rgba(93,64,42,0.18),
    0 12px 20px -12px rgba(93,64,42,0.10);
}
.bento-tile--wide { grid-column: span 2; }
.tile-accent { height: 4px; flex-shrink: 0; background: var(--gradient-btn); }
.tile-accent--peach { background: var(--gradient-peach); }
.tile-body { padding: 32px 28px; flex: 1; display: flex; flex-direction: column; }
/* Podtytuł stoi NAD nagłówkiem, tak jak .eyebrow nad h1/h2 na resztzie
   serwisu. Pod nagłówkiem wersaliki czytały się jak druga, konkurencyjna
   linia tytułu zamiast jak etykieta kategorii. */
.tile-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin: 0 0 8px;
}
.tile-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.tile-desc { margin: 0 0 20px; font-size: 0.92rem; color: var(--body); text-wrap: pretty; }
/* Szeroki kafel: tekst i wizual obok siebie, pasek "Wypróbuj" pod spodem */
.tile-split { display: flex; align-items: flex-start; gap: 28px; }
.tile-split > .tile-copy { flex: 1; }
.tile-visual { margin-top: auto; }
.tile-visual img { width: 100%; height: auto; display: block; margin: 0 auto; }
.tile-split .tile-visual { flex-shrink: 0; max-width: 280px; margin-top: 0; }

/* ---------- PASEK "WYPRÓBUJ" (próbka treści w kaflu) ----------
   Fragment aplikacji wprost na landingu - nagranie do odsłuchania,
   technika do przejrzenia. Brzoskwiniowe tło oddziela próbkę od opisu,
   nie robiąc z niej kolejnej karty. */
.try-strip {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  background: var(--peach-tint);
}
/* Odznaka na brzoskwiniowym polu jest biała: --peach-tint na --peach-tint
   znika. Ten sam zabieg co ikony kategorii na /narzedzia, ale płasko -
   pasek leży już w wyniesionym kaflu, więc cień pod jego elementami
   dokładał trzeci poziom głębi w jednym miejscu. Biel na brzoskwini
   odcina się samym kontrastem. */
.try-strip .icon-badge {
  margin-bottom: 0;
  background: var(--white);
  color: var(--terracotta-text);
}
.try-strip-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.try-strip-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta-on-peach);
}
.try-strip-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
/* Sterowanie jest białe - na brzoskwiniowym polu biel niesie sygnał
   "to jest klikalne". Brzoskwiniowy przycisk zlewałby się z tłem. */
.try-strip .btn { align-self: flex-start; margin-top: 6px; padding: 9px 20px; font-size: 0.85rem; }

/* ---------- ODTWARZACZ NAGRANIA ----------
   Natywny <audio controls> wnosi wygląd systemu operacyjnego (szara
   pigułka, obca typografia) i nie da się go ostylować przenośnie.
   Kontrolki są własne, ale sterują prawdziwym <audio>: odtwarzanie to
   <button>, przewijanie to <input type="range">, więc obsługa klawiaturą
   i czytnikiem ekranu zostaje. W HTML <audio> ma atrybut controls i to
   skrypt go zdejmuje - bez JS zostaje natywny odtwarzacz, brzydszy, ale
   działający. */
.audio-player { margin-top: 8px; }
.audio-player audio { width: 100%; height: 38px; }
.audio-player.is-enhanced {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: var(--white);
}
.audio-player.is-enhanced audio { display: none; }
.audio-play {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--gradient-peach);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.audio-play:hover { transform: scale(1.07); }
.audio-play svg { width: 14px; height: 14px; }
/* Przełączanie ikon klasą, nie atrybutem hidden: hidden jest zdefiniowany
   na HTMLElement, a <svg> to element z przestrzeni SVG - obie ikony
   zostawały widoczne jedna nad drugą. */
.audio-icon-pause { display: none; }
.audio-player.is-playing .audio-icon-play { display: none; }
.audio-player.is-playing .audio-icon-pause { display: block; }
.audio-seek {
  flex: 1;
  min-width: 40px;
  accent-color: var(--terracotta);
  cursor: pointer;
}
.audio-time {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--body);
}

/* ---------- PANELE (siatka kart informacyjnych) ---------- */
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.panels-4 { grid-template-columns: repeat(4, 1fr); }
/* Karty z ikoną i nagłówkiem wyrównujemy do góry - inaczej przy różnej długości
   tekstu ikony i tytuły w rzędzie stoją na różnych wysokościach. */
.panels-4 .panel { justify-content: flex-start; }
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 28px 50px -26px rgba(30,20,50,0.14),
    0 8px 16px -12px rgba(30,20,50,0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.panel:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 34px 58px -26px rgba(30,20,50,0.18),
    0 12px 20px -12px rgba(30,20,50,0.09);
}
.panel-peach { background: linear-gradient(155deg, #FFFCFA 0%, #FFF1E7 100%); }
.panel-lavender { background: linear-gradient(155deg, #FCFBFF 0%, #F2EEFC 100%); }
.panel-sky { background: linear-gradient(155deg, #FBFCFE 0%, #EBF3FB 100%); }
.panel h3 { font-family: "Montserrat", sans-serif; font-weight: 700; margin: 0 0 8px; font-size: 1.05rem; color: var(--ink); }
.panel p { margin: 0; font-size: 0.9rem; color: var(--body); }

/* ---------- ODZNAKA IKONY (nagłówki kart, spinacze sekcji) ---------- */
.icon-badge {
  --icon-size: 46px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--lavender-tint);
  color: var(--lavender-deep);
}
.icon-badge--square { border-radius: 14px; }
/* Większa odznaka - sekcje, w których ikona jest głównym wizualem karty */
.icon-badge--lg { --icon-size: 64px; }
.icon-badge--lg svg { width: 28px; height: 28px; }
.icon-badge--gradient { background: var(--gradient-btn); color: var(--white); }
.icon-badge--peach { background: var(--peach-tint); color: var(--terracotta-text); }
.icon-badge--lavender { background: var(--lavender-tint); color: var(--lavender-deep); }
.icon-badge--sky { background: var(--sky-tint); color: var(--sky-text); }

/* ---------- CTA CARD ---------- */
.cta-card { text-align: center; padding: 52px 36px; position: relative; overflow: hidden; }
.cta-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px;
  border-radius: 0 0 6px 6px;
  background: var(--gradient-violet);
}
/* Brzoskwiniowy pasek - domknięcie stron konsumenckich, ten sam podział
   co .tile-accent--peach i .quote-band--peach. */
.cta-card--peach::before { background: var(--gradient-peach); }
.cta-card p { max-width: 540px; margin: 0 auto 28px; color: var(--body); }

/* ---------- CTA W RAMCE (okno w oknie) ----------
   Mocne domknięcie strony bez płaskiej plamy koloru. Ta sama gramatyka
   co .card.popular i .hero-badge: nasycona ramka, w środku białe okno
   wpuszczone cieniem wewnętrznym. Tekst zostaje ciemny na białym. */
.cta-frame {
  background: var(--gradient-violet);
  border-radius: 32px;
  padding: 14px;
  box-shadow:
    0 30px 54px -22px rgba(108,92,180,0.40),
    0 10px 20px -12px rgba(108,92,180,0.26);
}
.cta-window {
  background: var(--white);
  border-radius: 20px;
  padding: 56px 40px;
  text-align: center;
  box-shadow:
    0 16px 30px -18px rgba(30,20,50,0.22) inset,
    0 1px 0 rgba(255,255,255,1);
}
.cta-window p { max-width: 540px; margin: 0 auto 28px; color: var(--body); text-wrap: pretty; }
@media (max-width: 560px) {
  .cta-frame { padding: 10px; border-radius: 26px; }
  .cta-window { padding: 36px 22px; border-radius: 16px; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 740px; margin: 0 auto; }
details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 4px 24px;
  margin-bottom: 12px;
  box-shadow: 0 1.5px 0 rgba(255,255,255,1) inset, 0 14px 28px -20px rgba(93,64,42,0.14);
}
summary { cursor: pointer; font-weight: 700; padding: 20px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.3rem; color: var(--lavender-deep); flex-shrink: 0; }
details[open] summary::after { content: "\2212"; }
details p { margin: 0 0 22px; color: var(--body); font-size: 0.95rem; }

/* Dłuższe odpowiedzi (/faq): podnagłówek, lista i domknięcie odstępu.
   Krótkie FAQ (/cennik, /pro, /narzedzia) mają w <details> same akapity,
   więc te reguły ich nie dotyczą. */
details h3 {
  font-size: 1rem;
  margin: 22px 0 8px;
  color: var(--ink);
  text-wrap: balance;
}
/* Pytanie w summary bywa dłuższe niż wiersz - równe wiersze zamiast jednego
   wyrazu zwisającego pod spodem (widoczne głównie na wąskich ekranach). */
summary { text-wrap: balance; }
details ul, details ol { margin: 0 0 22px; padding-left: 22px; color: var(--body); font-size: 0.95rem; }
details li { margin-bottom: 6px; text-wrap: pretty; }
details li:last-child { margin-bottom: 0; }
details li::marker { color: var(--lavender-deep); }
/* Pierwszy element odpowiedzi przylega do summary - bez podwójnego odstępu */
details summary + * { margin-top: 0; }
/* Ostatni element odpowiedzi zawsze odsunięty od dolnej krawędzi karty */
details > *:last-child { margin-bottom: 22px; }

/* ---------- PRZERYWNIKI RYTMU ---------- */
.statement {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  color: var(--ink);
  padding: 0;
}
/* Lora, nie Playfair Display: Playfair to krój displayowy typu Didone o bardzo
   wysokim kontraście kreski (grube trzony, włosowe łączenia). Projektowany do
   dużych nagłówków - przy 32 px cienkie kreski schodzą poniżej piksela i migoczą
   na antyaliasingu, a kursywa i polskie ogonki pogłębiają efekt. Lora jest
   rysowana pod ekran: wyrównana kreska i szersze światła, przy zachowaniu
   ciepłego, redakcyjnego charakteru.
   Uwaga: waga 500 musi być realnie wczytana w adresie Google Fonts
   (Lora:ital,wght@1,500). Wcześniej CSS prosił o 500, a ładowane było tylko 400. */
.quote-italic {
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 500;
  text-align: center;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 680px;
  margin: 0 auto;
  padding: 4px 0;
}
/* Przerywnik z cytatem - miękki gradientowy pas na całą szerokość.
   Margines jest po to, żeby oddzielić pas od bloku, który nie ma własnego
   dolnego oddechu - tak jest na /cennik, gdzie nad pasem stoi zwykły
   <div class="wrap">. */
.quote-band {
  margin-top: 48px;
  padding: 76px 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,190,157,0.12), transparent 60%),
    radial-gradient(circle at 82% 45%, rgba(111,163,224,0.10), transparent 60%),
    linear-gradient(120deg, rgba(255,190,157,0.08) 0%, rgba(169,156,234,0.11) 50%, rgba(111,163,224,0.08) 100%);
}
/* Po pełnej sekcji margines odpada: sekcja ma już padding-bottom, więc
   odstęp rósł do ~190 px przy rytmie 136 px w reszcie strony (68 + 48 + 76).
   Bez marginesu wychodzi 144 px - pas oddycha odrobinę szerzej niż zwykłe
   sekcje, i o to chodzi. Dotyczy /pro, /narzedzia i /zuno. */
section + .quote-band { margin-top: 0; }

/* Kreska pod cytatem. Pasmo rysuje ją samo, chyba że cytat niesie własną
   (.rule-peach) - obie trafiłyby w ten sam ::after i biłyby się o szerokość. */
.quote-band .quote-italic:not(.rule-peach)::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: var(--gradient-violet);
  opacity: 0.85;
}

/* Brzoskwiniowe podkreślenie - kreska pod nagłówkiem sekcji albo pod
   cytatem w przerywniku, ta sama miara co pasek w .cta-card. Idiom
   przeniesiony ze strony głównej, gdzie niesie każdy .section-title.
   Na długim landingu tak nie działa: powtórzony pod kolejnymi nagłówkami
   przestaje być akcentem i zaczyna konkurować z przerywnikami sekcji.
   Stosować na jeden, najwyżej dwa elementy na stronę. */
.rule-peach::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: var(--gradient-peach);
}
/* W przerywniku cytat potrzebuje więcej powietrza niż nagłówek sekcji */
.quote-band .rule-peach::after { margin-top: 24px; }

/* ---------- ROADMAP ---------- */
.roadmap-list { list-style: none; padding: 0; margin: 0 auto; max-width: 680px; display: grid; gap: 10px; }
.roadmap-list li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 20px;
  font-size: 0.92rem;
  color: var(--ink);
  box-shadow: 0 1.5px 0 rgba(255,255,255,1) inset, 0 12px 24px -18px rgba(93,64,42,0.14);
}
.roadmap-list strong { color: var(--terracotta-text); }

/* ---------- DELIKATNE GRADIENTY SEKCYJNE ---------- */
.tint-peach { background: linear-gradient(180deg, rgba(255,190,157,0.14) 0%, transparent 22%); }
.tint-sky { background: linear-gradient(180deg, rgba(111,163,224,0.13) 0%, transparent 22%); }
.tint-violet { background: linear-gradient(180deg, rgba(169,156,234,0.14) 0%, transparent 22%); }
.tint-sky-soft { background: linear-gradient(180deg, rgba(111,163,224,0.09) 0%, transparent 14%); }
.bottom-gradient {
  background: linear-gradient(160deg, rgba(255,190,157,0.16) 0%, rgba(169,156,234,0.16) 50%, rgba(111,163,224,0.14) 100%);
}

/* Wariant dla bardzo wysokich sekcji (np. listy FAQ na /faq).
   Bazowe tinty gasną na 22% wysokości sekcji - na 1600 px liście kolor byłby
   widoczny tylko na pierwszym ekranie i reszta czytałaby się jak inna strona.
   Tutaj barwa niesie się przez całą sekcję i wygasza dopiero na jej końcu. */
.tint-tall.tint-peach {
  background: linear-gradient(180deg, rgba(255,190,157,0.22) 0%, rgba(255,190,157,0.10) 45%, rgba(255,190,157,0.03) 80%, transparent 100%);
}
.tint-tall.tint-violet {
  background: linear-gradient(180deg, rgba(169,156,234,0.18) 0%, rgba(169,156,234,0.08) 45%, rgba(169,156,234,0.03) 80%, transparent 100%);
}

/* ---------- PLACEHOLDERY TREŚCI ---------- */
/* Ramka w miejscu brakującej grafiki - świadomie widoczna na produkcji */
.img-placeholder {
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  background: rgba(255,255,255,0.5);
}
.img-placeholder .ph-icon { font-size: 1.6rem; margin-bottom: 8px; }
.img-placeholder .ph-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin-bottom: 6px;
}
.img-placeholder .ph-desc { font-size: 0.82rem; color: var(--body); line-height: 1.5; }

/* Pas oznaczający treść niezweryfikowaną - do usunięcia przed publikacją */
.todo-band {
  position: relative;
  border: 2px dashed var(--terracotta-text);
  border-radius: 20px;
  padding: 34px 24px 24px;
  margin: 0 auto;
  background: rgba(255,241,231,0.35);
}
.todo-band::before {
  content: "🔴 Do uzupełnienia przed publikacją";
  position: absolute;
  top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--terracotta-text);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- WSPÓLNA STOPKA (components/footer-*.html, ładowana loaderem) ---------- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.main-footer { padding: 56px 24px; text-align: center; border-top: 1px solid var(--line); }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-links { display: flex; gap: 24px; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--body); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--terracotta-text); }
.footer-disclaimer { max-width: 640px; font-size: 0.82rem; color: var(--body); line-height: 1.6; }
.footer-copy { font-size: 0.82rem; color: var(--body); }
/* Link w zdaniu stopki - podkreślony, bo sam kolor nie może go wyróżniać (SC 1.4.1) */
.brand-link {
  color: var(--terracotta-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- RESPONSIVE ---------- */
/* Podwójna klasa (.panels.panels-4) jest celowa: bez niej regułę 2-kolumnową
   przykryłby późniejszy `.panels { 1fr }` z breakpointu 860 - równa specyficzność,
   wygrywa kolejność - i siatka 4-up spadałaby z 4 kolumn od razu do jednej. */
@media (max-width: 900px) {
  .panels.panels-4 { grid-template-columns: 1fr 1fr; }
}
/* Bento schodzi do jednej kolumny wcześniej niż .cards i .panels (860).
   Kafel niesie nagłówek, podtytuł, opis, makietę i pasek "Wypróbuj" -
   przy trzech kolumnach poniżej ~1000 px kolumna ma ~270 px i sam tytuł
   łamie się na cztery wiersze. Dwie kolumny odpadają: kafel span 2 nie
   zmieściłby się obok wąskiego i zostawiałby dziurę w siatce. */
@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr; gap: 20px; }
  .bento-tile--wide { grid-column: span 1; }
  .tile-split { flex-direction: column; gap: 20px; }
  .tile-split .tile-visual { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  /* Jedna kolumna - ujemny margines wypchnalby karte poza ekran */
  .card.popular { transform: none; margin-inline: 0; }
  .card.popular:hover { transform: none; }
  .panels { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .panels.panels-4 { grid-template-columns: 1fr; }
  /* Mniejsza odznaka zostawia miejsce na odtwarzacz w jednym wierszu */
  .try-strip .icon-badge { --icon-size: 48px; }
  .try-strip { gap: 12px; }
}

/* ---------- ANIMACJE WEJŚCIA (scroll reveal) ---------- */
/* Flagę .js-anim ustawia inline skrypt w <head> strony, przed pierwszym
   malowaniem - inaczej treść mrugnęłaby przed ukryciem.
   Strony dopisują własne selektory do tych list w swoim <style>. */

/* Pojedyncze bloki: fade + delikatne uniesienie */
.js-anim .hero-grid,
.js-anim .quote-italic,
.js-anim .wrap > h2,
.js-anim .section-lead,
.js-anim .split-card,
.js-anim .cta-card,
.js-anim .cta-frame,
.js-anim .statement,
.js-anim .roadmap-list {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-anim .hero-grid.is-visible,
.js-anim .quote-italic.is-visible,
.js-anim .wrap > h2.is-visible,
.js-anim .section-lead.is-visible,
.js-anim .split-card.is-visible,
.js-anim .cta-card.is-visible,
.js-anim .cta-frame.is-visible,
.js-anim .statement.is-visible,
.js-anim .roadmap-list.is-visible {
  opacity: 1;
  transform: none;
}
/* Duże/ciężkie bloki: tylko fade, bez unoszenia (mniejszy obszar przemalowania) */
.js-anim .split-card,
.js-anim .cta-card,
.js-anim .cta-frame,
.js-anim .roadmap-list { transform: none; }

/* Grupy: dzieci wchodzą kaskadowo (stagger) */
.js-anim .cards > *,
.js-anim .panels > *,
.js-anim .bento > *,
.js-anim .faq-list > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-anim .cards.is-visible > *,
.js-anim .panels.is-visible > *,
.js-anim .bento.is-visible > *,
.js-anim .faq-list.is-visible > * {
  opacity: 1;
  transform: none;
}
.js-anim .cards.is-visible > *:nth-child(2),
.js-anim .panels.is-visible > *:nth-child(2),
.js-anim .bento.is-visible > *:nth-child(2),
.js-anim .faq-list.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.js-anim .cards.is-visible > *:nth-child(3),
.js-anim .panels.is-visible > *:nth-child(3),
.js-anim .bento.is-visible > *:nth-child(3),
.js-anim .faq-list.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.js-anim .panels.is-visible > *:nth-child(4),
.js-anim .bento.is-visible > *:nth-child(4),
.js-anim .faq-list.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.js-anim .faq-list.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.js-anim .faq-list.is-visible > *:nth-child(n+6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .panel, .bento-tile, .store-link { transition: none; }
}