/* ============================================
   HOMEPAGE - style specyficzne dla /  (wg Layout - Strona główna v2)
   ============================================ */

/* HERO */
.hero { background: var(--surface); padding: 90px 0 60px; }
@media (max-width: 600px) {
  .hero { padding: 48px 0 40px; }
}
/* Kolumna z wideo ma ok. 530px wysokości, więc tekst w domyślnej skali
   zostawiał obok siebie ponad 240px pustki. Stąd większy krok typograficzny
   niż na podstronach i lista atutów domykająca kolumnę. */
.hero-title { margin-bottom: 20px; font-size: clamp(36px, 4.6vw, 64px); }
.hero-desc {
  font-size: clamp(18px, 1.4vw, 21px);
  color: var(--text-muted); line-height: 1.6;
  margin-bottom: 24px; max-width: 620px;
}
.hero-checklist { margin-bottom: 32px; gap: 18px 32px; }
.hero-checklist .checklist-item { font-size: 18px; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero .split-media .media-placeholder { aspect-ratio: 4/3; border-radius: var(--radius-media); }

@media (max-width: 900px) {
  .hero .container.split { grid-template-columns: 1fr; }
  /* Reszta hero jest wyśrodkowana, ale pozycje listy zostają wyrównane do
     lewej (tak jak w całym serwisie) - środkujemy więc sam blok listy. */
  .hero-checklist { width: fit-content; margin-left: auto; margin-right: auto; }
}
/* Hasła zostają w dwóch kolumnach także na telefonie - komponent
   checklist-2col domyślnie zwija się tu do jednej, więc przywracamy siatkę
   i zmniejszamy tekst, żeby krótkie hasła mieściły się w jednej linii. */
@media (max-width: 768px) {
  .hero-checklist { grid-template-columns: 1fr 1fr; gap: 14px 12px; width: auto; }
  .hero-checklist .checklist-item { font-size: 15px; gap: 8px; }
  .hero-checklist .check-icon { width: 17px; height: 17px; }
}
@media (min-width: 901px) {
  .hero .split-media .media-placeholder { min-height: 420px; }
}

/* CZYM JEST LUNCHERBOX */
#czym-jest { background: var(--surface); padding-top: 56px; }
@media (max-width: 600px) {
  #czym-jest { padding-top: 36px; }
}
#czym-jest .czym-jest-media { display: flex; gap: 16px; }
#czym-jest .czym-jest-media .media-placeholder { flex: 1; aspect-ratio: 3/4; max-height: 420px; width: auto; margin: 0; border-radius: var(--radius-media); }
#czym-jest .czym-jest-media .media-placeholder img { transition: transform 0.35s ease; }
#czym-jest .czym-jest-media .media-placeholder:hover img { transform: scale(1.2); }
#czym-jest .checklist-2col { margin: 24px 0 32px; }
@media (max-width: 900px) {
  #czym-jest .czym-jest-media .media-placeholder { max-height: 360px; }
  /* Na desktopie zdjęcia stoją po lewej (split-reverse), ale po zwinięciu do
     jednej kolumny mają lądować POD tekstem - inaczej użytkownik zaczyna
     sekcję od zdjęcia, nie wiedząc jeszcze, czego dotyczy. */
  #czym-jest .split-media { order: 1; }
}
/* Poniżej 600px zdjęcia ustawiłyby się jedno pod drugim - zamiast tego
   zostaje samo pierwsze, w wysokości odpowiadającej dwóm poprzednim. */
@media (max-width: 600px) {
  #czym-jest .czym-jest-media { flex-direction: column; }
  #czym-jest .czym-jest-media .media-placeholder:nth-of-type(n+2) { display: none; }
  #czym-jest .czym-jest-media .media-placeholder:first-of-type {
    aspect-ratio: 3/5; max-height: 70vh; width: 100%;
  }
}

/* ZAUFALI NAM */
#zaufali-nam { padding: 56px 0; }

/* KIEDY WARTO */
#kiedy-warto { background: var(--surface); }
#kiedy-warto h2 { margin-bottom: 28px; }
#kiedy-warto .check-rows-label {
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark);
  margin-bottom: 16px;
}
.callout-dark {
  background: var(--dark); color: rgba(255,255,255,0.9);
  border-radius: var(--radius-card); padding: 28px 32px;
  margin-top: 16px; font-size: 20px; line-height: 1.6;
}

/* DLA KOGO - segmenty */
#dla-kogo { background: var(--white); }
#dla-kogo h2 { margin-bottom: 32px; }
.dla-kogo-area {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 32px; padding: 12px 20px;
  background: var(--red-tint); border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; color: var(--red);
}
.dla-kogo-area svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2; color: var(--red); }

@media (max-width: 600px) {
  .dla-kogo-area { display: flex; width: 100%; justify-content: center; text-align: center; }
}

/* KORZYŚCI */
#korzysci { background: var(--dark); }
#korzysci .section-label { color: var(--red); }
#korzysci h2 { color: var(--white); margin-bottom: 16px; }
#korzysci .section-intro { color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.6; max-width: 640px; margin-bottom: 32px; }

/* MODELE WSPÓŁPRACY */
#modele { background: var(--surface); }
#modele .models-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
@media (max-width: 600px) {
  #modele .models-actions { flex-direction: column; align-items: stretch; }
  #modele .models-actions .btn { justify-content: center; }
}

/* KROKI WDROŻENIA */
#kroki { background: var(--white); }

/* PODZIAŁ OBOWIĄZKÓW */
#podzial-obowiazkow { background: var(--surface); }

/* REALIZACJE */
#realizacje { background: var(--white); }

/* FAQ */
#faq { background: var(--surface); }

/* CTA KOŃCOWE - style współdzielone przeniesione do components.css
   (sekcja formularza nad stopką jest wspólna dla wszystkich podstron) */