/* Strona dla organizatorów (planerto.com/dla-biznesu), na bazie main.css.
   Reguła kolorów części biznesowej: jasna baza, czarna rama — czarna nawigacja i hero na początku,
   czarny końcowy blok i stopka na końcu. */

/* ── Strefy czarne: ciemne zmienne main.css ────────────── */
.biz .site-nav,
.biz-hero,
.biz .site-footer {
  --bg:            #0a0a0a;
  --bg-subtle:     #141414;
  --bg-hover:      #1c1c1c;
  --text:          #f5f5f5;
  --text-light:    #a3a3a3;
  /* main.css wylicza --text-muted i --body-text od --text na :root, więc trzeba je podać ponownie. */
  --text-muted:    var(--text);
  --body-text:     var(--text);
  --border:        #262626;
  --border-strong: #2e2e2e;
  --brand-soft:    #12291f;
  --brand-text:    #6fcf97;
  --shadow-float:  0 4px 24px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .4);
  --shadow-screen: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  color: var(--text);
}
.biz .site-footer { background: #0a0a0a; }

/* Sekcje z ograniczoną szerokością: czarne tło na całą szerokość okna, osobną warstwą,
   żeby zrzuty z hero mogły wyjść poza dolną krawędź tła */
.biz .biz-hero { isolation: isolate; }
.biz .biz-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--bg);
  z-index: -1;
}

/* ── Nawigacja (czarna) ─────────────────────────────────── */
/* Na górze menu w kolorze hero, bez linii; po przewinięciu szkło (półprzezroczystość + rozmycie) */
.biz .site-nav {
  background: #0a0a0a;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: background-color .25s ease, border-color .25s ease;
}
.biz .site-nav.is-scrolled {
  background: rgba(10, 10, 10, .72);
  border-bottom-color: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
}
.biz .logo img { filter: brightness(0) invert(1); }
.biz .nav-links > a,
.biz .mega-trigger { color: var(--text); }
.biz .mega-dropdown { background: var(--bg-subtle); border-color: var(--border); box-shadow: var(--shadow-float); }
.biz .mega-link:hover { background: var(--bg-hover); }
/* Mega menu: większa czcionka (tekst min. 16 px), szersze, żeby opisy mieściły się w dwóch wierszach */
.biz .mega-dropdown { width: min(1120px, calc(100vw - 64px)); padding: 20px; grid-template-columns: 2.4fr 1fr; }
.biz .mega-link { gap: 16px; padding: 14px; }
.biz .mega-ic,
.biz .mega-ic svg { width: 22px; height: 22px; }
.biz .mega-title { color: var(--text); font-size: 17px; font-weight: 500; }
.biz .mega-desc { color: #d4d4d4; font-size: 16px; margin-top: 4px; }
.biz .mega-cta-title { font-size: 22px; font-weight: 500; }
.biz .mega-cta-btn { font-size: 16px; font-weight: 500; padding: 12px 20px; }
.biz .mega-cta-note { font-size: 16px; }
.biz .mega-ic,
.biz .mega-link:hover .mega-title { color: var(--brand-text); }

/* Układ jak na Freshy: logo i linki po lewej, przyciski po prawej; większa czcionka */
.biz .nav-inner { height: 72px; justify-content: flex-start; gap: 36px; }
.biz .nav-links { position: static; transform: none; padding: 0; gap: 4px; }
.biz .nav-links > a,
.biz .nav-links .mega-trigger { font-size: 16px; font-weight: 500; padding: 10px 14px; color: var(--text); }
.biz .nav-links > a::after { display: none; }
.biz .nav-links > a:hover,
.biz .nav-funkcje:hover .mega-trigger,
.biz .nav-funkcje.is-open .mega-trigger { color: var(--text); background: var(--bg-hover); }
.biz .mega-chev { color: var(--text); }
.biz .nav-right { margin-left: auto; gap: 12px; }
.biz .site-nav .btn-ghost {
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  padding: 11px 20px;
  border: 1px solid #3a3a3a;
  background: transparent;
}
.biz .site-nav .btn-ghost:hover { background: var(--bg-hover); }
.biz .nav-right .btn-primary { font-size: 16px; font-weight: 500; padding: 12px 22px; }
/* Rozwijane „Funkcje” od lewej krawędzi przycisku (wyśrodkowane wychodziłoby poza ekran) */
.biz .mega-dropdown { left: 0; transform: translateY(6px); }
.biz .nav-funkcje:hover .mega-dropdown,
.biz .nav-funkcje.is-open .mega-dropdown { transform: translateY(0); }
.biz .nav-mobile { background: rgba(10, 10, 10, .98); border-bottom-color: var(--border); }
/* Telefon: hamburger przy prawej krawędzi (main.css zwija menu poniżej 900 px) */
@media (max-width: 900px) {
  .biz .nav-inner { height: 60px; justify-content: space-between; padding: 0 20px; }
  .biz .nav-toggle { margin-left: auto; }
}
@media (max-width: 1180px) {
  .biz .nav-inner { gap: 20px; }
  .biz .nav-links > a,
  .biz .nav-links .mega-trigger { font-size: 15px; padding: 10px 10px; }
  .biz .site-nav .btn-ghost,
  .biz .nav-right .btn-primary { font-size: 15px; padding: 10px 16px; }
}

/* ── Hero: tekst po lewej, panel i aplikacja po prawej ─── */
.biz-hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 88px 32px 72px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.biz-hero h1 { font-size: var(--fs-hero); margin-bottom: 20px; }
.biz-hero .hero-sub { font-size: var(--fs-body); color: var(--text); max-width: 34em; margin-bottom: 28px; }
.biz-hero .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.biz-hero .btn-cta-ghost { background: transparent; color: var(--text); border-color: #3a3a3a; }
.biz-hero .btn-cta-ghost:hover { background: var(--bg-hover); }
.biz-hero__video { display: inline-flex; align-items: center; gap: 8px; }
.biz-hero__video svg { color: var(--brand-text); }
.biz-hero__stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.biz-hero__store { position: relative; display: inline-block; }
.biz-hero__store img { display: block; width: auto; height: 50px; }

.biz-hero__visual { position: relative; padding: 0 0 56px 72px; margin-right: -12%; }
.biz-hero__web {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-screen);
}
.biz-hero__web img { display: block; width: 100%; height: auto; }
.biz-hero__phone {
  position: absolute;
  left: 0;
  bottom: 96px;
  width: 31%;
  min-width: 150px;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6));
}

/* Zrzuty wychodzą dolną krawędzią poza czerń i nachodzą na białą sekcję pod spodem */
.biz .biz-hero { padding-bottom: 0; align-items: end; }
.biz .biz-hero__copy { padding-bottom: 96px; }
.biz .biz-hero__visual { margin-bottom: -120px; z-index: 2; }
.biz .biz-logos { padding-top: 168px; }

/* ── Wideo pod sekcją „Messenger…” (style jak w lp.css, który ładuje się tylko na /start) ── */
.biz .lp-video { max-width: 880px; margin: 0 auto; padding: 0 32px 72px; scroll-margin-top: 96px; }
.biz .lp-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--card-radius); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: 0 1px 2px rgba(17, 17, 17, .06); }
.biz .lp-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) { .biz .lp-video { padding: 0 16px 48px; } }

/* ── FAQ przeniesione z /start: przycisk „Poznaj więcej odpowiedzi” (style jak w lp.css, który ładuje się tylko na /start).
   Bez JS wszystkie pytania są widoczne, a przycisk ukryty (main.js). ── */
.biz .lp-faq-more-wrap { display: none; justify-content: center; margin-top: 28px; }
.biz .lp-faq-more-wrap.is-ready { display: flex; }
.biz .lp-faq-more {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--btn-radius);
  padding: 14px 28px; font-family: var(--font-body);
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.biz .lp-faq-more:hover { background: var(--brand-soft); }
.biz .lp-faq-more svg { transition: transform .15s; }
/* Jawnie, bo motyw gdzie indziej celowo neutralizuje [hidden] (.fsw-panel). */
.biz .faq-item[hidden] { display: none; }

/* ── Kategorie wydarzeń (62 kafle, 1:1): zamiast 62 osobnych kresek jedna ciągła linia postępu między strzałkami —
   kreski stykają się ze sobą i zapełniają płynnie wraz z przewijaniem karuzeli ── */
.biz .audience-progress { display: flex; flex: 0 0 auto; width: min(320px, 50vw); gap: 0; }
.biz .audience-progress span { flex: 1 1 0; width: auto; min-width: 0; height: 2px; border-radius: 0; transition: background .35s ease; }
.biz .audience-progress span:first-child { border-radius: 1px 0 0 1px; }
.biz .audience-progress span:last-child { border-radius: 0 1px 1px 0; }
.biz .audience-slide { aspect-ratio: 1 / 1; }
.biz .audience-slide-caption { padding-top: 64px; }
/* Telefon: dwa rzędy mniejszych kafli przewijane razem w bok — na ekranie widać 4–5 kategorii naraz */
@media (max-width: 760px) {
  .biz .audience-carousel {
    display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
    grid-auto-columns: 42vw; gap: 10px;
  }
  .biz .audience-slide { width: auto; border-radius: 12px; }
  .biz .audience-slide-caption { padding: 40px 12px 12px; }
  .biz .audience-slide-name { font-size: 17px; line-height: 1.2; }
}

/* ── Opinia organizatora: logo zamiast portretu — kwadratowa karta (nie pionowa jak przy zdjęciu),
   mniejsze logo na środku, na tym samym białym tle co logotyp ── */
.biz-opinion .founder-portrait { width: min(100%, 300px); aspect-ratio: 1 / 1; align-self: center; }
.biz-opinion .founder-portrait-card { display: grid; place-items: center; background: #fff; }
.biz-opinion .founder-portrait-card::after { display: none; }
.biz-opinion .founder-portrait-card img { width: 72%; height: auto; object-fit: contain; }
/* Opinia jest dłuższa niż dawny cytat — mniejszy krój (token pod-nagłówka), żeby nie dominowała sekcji */
.biz-opinion .founder-quote { font-size: var(--fs-card-title); line-height: 1.5; letter-spacing: -.01em; }
/* Drugi akapit opinii w tym samym cytacie (skrypt wypełniania słów obsługuje zagnieżdżone elementy) */
.biz-opinion .biz-quote-p { display: block; margin-top: .7em; }
/* „Przeczytaj całą opinię”: przycisk-link otwiera okno z pełną opinią */
.biz-opinion-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 0;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  color: var(--brand); font-size: 16px; font-weight: 600;
}
.biz-opinion-more::after { content: "→"; transition: transform .15s; }
.biz-opinion-more:hover::after { transform: translateX(3px); }
.biz-opinion-dialog {
  width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; margin: auto;
  border: 1px solid var(--border-strong); border-radius: 16px; background: #fff; color: var(--text);
  box-shadow: 0 24px 60px rgba(17, 17, 17, .25);
}
.biz-opinion-dialog::backdrop { background: rgba(10, 10, 10, .55); }
.biz-opinion-dialog__head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 14px;
  padding: 20px 24px; background: #fff; border-bottom: 1px solid var(--border);
}
.biz-opinion-dialog__head img { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; border: 1px solid var(--border); background: #fff; }
.biz-opinion-dialog__head > div { flex: 1; min-width: 0; }
.biz-opinion-dialog__name { font-size: 17px; font-weight: 600; }
.biz-opinion-dialog__role { font-size: 16px; color: var(--text); margin-top: 2px; }
.biz-opinion-dialog__close {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--bg-subtle); color: var(--text); cursor: pointer;
}
.biz-opinion-dialog__close:hover { background: #eef0f2; }
.biz-opinion-text { display: grid; gap: 14px; padding: 24px; }
.biz-opinion-text p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.65; }
@media (max-width: 600px) {
  .biz-opinion-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .biz-opinion-dialog__head { padding: 16px 20px; }
  .biz-opinion-text { padding: 20px; }
}
.biz-opinion .founder-signature-photo img { object-fit: contain; background: #fff; }

/* ── „Bądź tam, gdzie ludzie szukają…”: zakładki „Dla Ciebie / Dla Twoich klientów” (wygląd jak przełącznik
   „Bez Planerto / Z Planerto” ze stron funkcji), pod nimi jeden z dwóch przełączników USP. ── */
.biz-seg { display: flex; justify-content: center; margin: -32px 0 40px; }
.biz-seg-inner {
  display: inline-flex; gap: 4px; padding: 5px;
  border: 1px solid var(--border-strong); border-radius: 16px;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.biz-seg-inner button {
  border: 0; background: transparent; border-radius: 12px; padding: 11px 22px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: background .15s, color .15s;
}
.biz-seg-inner button:hover { background: var(--bg-subtle); }
.biz-seg-inner button.is-active { background: var(--text); color: #fff; }
/* „Wkrótce” przy aplikacji dla uczestników — aplikacja jeszcze nie jest w sklepach */
.biz-soon {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 8px; padding: 4px 12px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
}
.biz .fsw--grouped { padding-bottom: 0; }
.biz .fsw--grouped[hidden] { display: none; }
.biz .fsw-side { display: grid; gap: 20px; align-content: center; }
.biz .fsw--grouped .fsw-stage { padding: clamp(20px, 2.5vw, 36px); }
/* Zrzut z telefonu: węższy kadr zamiast szerokiego zrzutu panelu */
/* Ten sam obrys telefonu dla aplikacji organizatora i uczestnika. Ramką jest tło panelu (5 px),
   a obraz ma promień wewnętrzny 35 px — bez „border” na <img>, który dawał poszarpane rogi. */
.biz .fsw-panel--phone {
  width: fit-content; max-width: 100%; justify-self: center;
  padding: 5px; border-radius: 40px; background: #1f2937;
  box-shadow: 0 18px 40px rgba(17, 17, 17, .16);
}
.biz .fsw-panel--phone img {
  display: block; width: auto; max-width: 100%; height: min(420px, 60vh);
  border: 0; border-radius: 35px; background: #fff; box-shadow: none;
}
@media (max-width: 960px) {
  /* Telefon: zrzut stoi zaraz pod klikniętą pozycją (jak akordeon), a nie pod całą listą.
     Lista i scena są w jednej kolumnie; kolejność ustawia --fsw-stage-order z main.js. */
  .biz .fsw--grouped { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .biz .fsw--grouped .fsw-side, .biz .fsw--grouped .fsw-nav { display: contents; }
  .biz .fsw--grouped .fsw-item:nth-child(1) { order: 2; }
  .biz .fsw--grouped .fsw-item:nth-child(2) { order: 4; }
  .biz .fsw--grouped .fsw-item:nth-child(3) { order: 6; }
  .biz .fsw--grouped .fsw-item:nth-child(4) { order: 8; }
  .biz .fsw--grouped .fsw-item:nth-child(5) { order: 10; }
  .biz .fsw--grouped .fsw-item:nth-child(6) { order: 12; }
  .biz .fsw--grouped .fsw-stage { order: var(--fsw-stage-order, 3); margin: 6px 0 14px; }
  /* Zrzuty mieszczą się w szerokości ekranu, bez przewijania w bok */
  .biz .fsw--grouped .fsw-panel { overflow: visible; }
  /* Scena ma wysokość aktywnego zrzutu, a nie najwyższego z całej listy */
  .biz .fsw--grouped .fsw-panel[hidden] { display: none; }
  .biz .fsw--grouped .fsw-panel img { width: 100%; height: auto; max-width: 100%; }
  .biz .fsw--grouped .fsw-panel--phone img { width: auto; height: min(380px, 55vh); }
  .biz-hero__stores { flex-wrap: nowrap; gap: 10px; }
  .biz-hero__store img { height: 42px; }
  .biz-seg { margin: -16px 0 28px; }
  .biz-seg-inner button { padding: 10px 16px; font-size: 15px; }
  .biz .fsw-panel--phone img { height: min(380px, 55vh); }
}

/* ── „Więcej niż system do zapisów”: duża czarna karta o promocji wyszukiwarki + 4 mniejsze karty ── */
.biz-why { max-width: var(--max-w); margin: 0 auto; padding: 88px 32px; }
.biz-why .alt-section-header { margin-bottom: 40px; }
.biz-why__hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: 48px; border-radius: 16px; color: #f5f5f5;
  background: radial-gradient(900px 460px at 0% -30%, #1f3d2f, #111 50%, #050505 100%);
}
.biz-why__soon { margin: 0 0 16px; }
.biz-why__copy h3 { font-family: var(--font-heading); font-size: var(--fs-subhead); font-weight: 500; line-height: 1.2; margin: 0 0 16px; color: #fff; }
.biz-why__copy p { font-size: 17px; line-height: 1.6; color: #e5e5e5; margin: 0; }
.biz-why__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.biz-why__chips li { padding: 8px 14px; border-radius: 999px; background: rgba(111, 207, 151, .14); color: #8fe0b0; font-size: 16px; font-weight: 500; }
.biz-why__flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.biz-why__flow li {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .04);
}
.biz-why__flow li + li::before {
  content: ""; position: absolute; left: 35px; top: -15px; width: 2px; height: 14px; background: rgba(255, 255, 255, .25);
}
.biz-why__flow strong { display: block; font-size: 16px; font-weight: 500; color: #fff; }
.biz-why__flow li > span:last-child { font-size: 16px; color: #d4d4d4; }
.biz-why__flow-ic { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; }
.biz-why__flow-ic--brand { background: var(--brand); }
.biz-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.biz-why__card { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.biz-why__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft, #eaf4ee); color: var(--brand); margin-bottom: 16px; }
.biz-why__card h3 { font-family: var(--font-heading); font-size: var(--fs-card-title); font-weight: 500; line-height: 1.25; margin: 0 0 8px; }
.biz-why__card p { font-size: 16px; line-height: 1.55; color: var(--text); margin: 0; }
@media (max-width: 1100px) { .biz-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .biz-why { padding: 64px 20px; }
  .biz-why__hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 22px; }
}
@media (max-width: 560px) {
  .biz-why__grid { grid-template-columns: minmax(0, 1fr); }
  /* Plakietki na telefonie: równe wiersze na pełną szerokość z ptaszkiem, zamiast pigułek łamanych na dwie linie */
  .biz-why__chips { display: grid; gap: 8px; }
  .biz-why__chips li { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 12px 14px; line-height: 1.4; }
  .biz-why__chips li::before {
    content: ""; flex: 0 0 auto; width: 6px; height: 11px; margin: 3px 4px 0 2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  }
}

/* ── Końcowy blok: czarny, z tym samym układem gradientu co zielony w main.css ── */
.biz .final-cta-inner { background: radial-gradient(900px 460px at 50% -30%, #3d3d3d, #161616 45%, #050505 100%); }

@media (max-width: 960px) {
  .biz-hero { grid-template-columns: minmax(0, 1fr); padding: 56px 20px 48px; gap: 40px; }
  .biz-hero__visual { padding: 24px 0 24px 56px; margin-right: 0; }
  .biz-hero__phone { width: 27%; min-width: 0; bottom: 40px; }
  .biz .biz-hero__copy { padding-bottom: 0; }
  .biz .biz-hero__visual { margin-bottom: -64px; }
  .biz .biz-logos { padding-top: 104px; }
}

/* Telefon: przyciski w hero na pełną szerokość, równe pod sobą */
@media (max-width: 600px) {
  .biz-hero .hero-cta-row > a { flex: 1 1 100%; justify-content: center; }
}