html {
  /* Ustaw tutaj wysokość swojego górnego menu. Zazwyczaj to między 70px a 100px */
  scroll-padding-top: 80px; 
  
  /* Płynne przewijanie (jeśli jeszcze tego nie masz, to super dodatek!) */
  scroll-behavior: smooth; 
}

/* --- PRZYKLEJONE MENU GLOBALNE --- */
.topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #ffffff; /* Zapobiega prześwitywaniu treści spod spodu */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Lekki cień oddzielający od treści */
}

/* Wypycha całą stronę w dół, by nie chowała się pod menu */
body {
  padding-top: 70px !important; /* Zmień tę wartość, jeśli Twoje menu jest wyższe/niższe */
}

:root {
  --bg: #ffffff;
  --surface: #f7f8fb;
  --text: #1e232e;
  --text-muted: #9fa6b5;
  --primary: #7391f3;
  --secondary: #cf99f6;
  --accent: #6cebc0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(30, 35, 46, 0.06);
  --shadow-soft: 0 4px 14px rgba(30, 35, 46, 0.05);
  --container: 1140px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

main {
  position: relative;
  isolation: isolate;
}

main::before,
main::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
}

main::before {
  width: 280px;
  height: 280px;
  right: -140px;
  top: 120px;
  background: radial-gradient(circle, rgba(115, 145, 243, 0.35), rgba(115, 145, 243, 0));
}

main::after {
  width: 240px;
  height: 240px;
  left: -120px;
  top: 780px;
  background: radial-gradient(circle, rgba(207, 153, 246, 0.3), rgba(207, 153, 246, 0));
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--text);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ebedf2;
}

.topbar-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 0.98rem;
}

.topnav {
  display: none;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}

.topnav a {
  text-decoration: none;
  color: #4d5463;
  font-weight: 600;
  font-size: 0.92rem;
}

.topnav a:hover {
  color: var(--text);
}

.navbar-cta {
  border-radius: 999px;
  margin-left: 0.5rem;
}

.section {
  padding: 64px 0;
}

.section-alt {
  background: var(--surface);
  border-top: 1px solid rgba(225, 230, 240, 0.55);
  border-bottom: 1px solid rgba(225, 230, 240, 0.55);
}

h1,
h2 {
  font-family: "Manrope", Arial, sans-serif;
  margin: 0 0 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5.4vw, 3.45rem);
}

.gradient-highlight {
  color: var(--primary);
  background: linear-gradient(120deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: clamp(1.52rem, 3.8vw, 2.35rem);
}

.section-heading {
  width: 50%;
  max-width: 50%;
}

.why-heading {
  width: 50%;
  margin-bottom: 14px;
  max-width: 50%;
}

p {
  margin: 0 0 1rem;
}

.lead,
.section-text {
  color: var(--text-muted);
  max-width: 64ch;
  font-size: clamp(0.99rem, 1.5vw, 1.06rem);
}

.chip,
.section-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 500;
  color: var(--text);
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--primary), var(--secondary)) border-box;
}

.chip {
  padding: 0.34rem 0.85rem;
  margin-bottom: 1.15rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-badge {
  padding: 0.28rem 0.72rem;
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero {
  /* Delikatny fioletowy gradient od dołu do bieli na górze na całą szerokość ekranu */
  background: linear-gradient(to top, #F4F1FD 0%, #ffffff 100%);
}

.hero-grid {
  display: grid;
  gap: 1.75rem;
}

/* =========================================
   HERO MOCKUP (Zdjęcie + Pływające tagi)
   ========================================= */

   .hero-mockup-container {
    order: 2; /* Zachowane z Twojego starego kodu! */
    position: relative;
    width: 100%;
    max-width: 450px; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 2rem; 
  }
  
  /* 1. Główne zdjęcie centralne */
  .hero-mockup-image {
    width: 340px; 
    height: 380px; 
    border-radius: 55px; 
    background-size: cover;
    background-position: center;
    background-color: #f3f4f6; 
    border: 2px solid #ffffff; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 
    position: relative;
    z-index: 1;
  }
  
  /* 2. Styl bazowy dla "pigułek" (Badges) */
  .hero-badge {
    position: absolute;
    padding: 0.62rem 0.92rem; /* Wymiary dokładnie takie jak w karuzeli */
    border-radius: 999px; /* Maksymalne zaokrąglenie */
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text); /* Używamy Twojej zmiennej dla koloru tekstu */
    
    /* KLUCZOWE: Gradientowy obrys skopiowany z Twoich stylów karuzeli */
    border: 1px solid transparent;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(90deg, var(--primary), var(--secondary)) border-box;
    
    /* Cień i pozycjonowanie dla efektu lewitacji (zostają) */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06);
    z-index: 2; 
    animation: float 6s ease-in-out infinite;
  }
  
  /* 3. Precyzyjne pozycjonowanie poszczególnych pigułek */
  .badge-1 {
    top: 15%;
    left: 0;
    transform: translateX(-30%); 
    animation-delay: 0s;
  }
  
  .badge-2 {
    bottom: 20%;
    right: 0;
    transform: translateX(20%); 
    animation-delay: 2s; 
  }
  
  .badge-3 {
    top: 50%;
    right: -5%;
    transform: translateX(10%);
    animation-delay: 4s;
  }
  
  /* 4. Animacja lewitacji */
  @keyframes float {
    0% { transform: translateY(0px) translateX(var(--tx, 0)); }
    50% { transform: translateY(-12px) translateX(var(--tx, 0)); }
    100% { transform: translateY(0px) translateX(var(--tx, 0)); }
  }
  
  /* Fix dla przesunięć na boki w animacji */
  .badge-1 { --tx: -30%; }
  .badge-2 { --tx: 20%; }
  .badge-3 { --tx: 10%; }

.bullet-list,
.tag-list {
  display: grid;
  gap: 0.65rem;
  padding-left: 1.2rem;
  margin: 1.1rem 0 0;
}

.bullet-list li::marker {
  color: var(--primary);
}

.tag-list {
  padding-left: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.tag-list li {
  background: var(--surface);
  border: 1px solid #e7ebf2;
  border-radius: 999px;
  padding: 0.62rem 0.92rem;
  text-align: center;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

/* =========================================
   KARUZELA (Infinite Marquee) - FIX
   ========================================= */

   .tag-carousel {
    margin-top: 1.9rem;
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    padding-block: 0.2rem;
  }
  
  /* KLUCZOWY FIX: Ten kontener musi mieć display: flex, 
     aby ustawić dwie listy obok siebie w jednej linii */
  .carousel-track-wrapper {
    display: flex;
    width: max-content;
    /* Animujemy WRAPPER, a nie pojedyncze listy */
    animation: scrollCarousel 40s linear infinite;
    will-change: transform;
  }
  
  /* Pauza działa teraz na całą taśmę */
  .carousel-track-wrapper:hover {
    animation-play-state: paused;
  }
  
  .tag-track {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 0.75rem; 
    padding-left: 0;
    margin: 0;
    list-style: none;
    
    /* RESET TOTALNY: To zabije każdą próbę samodzielnego ruchu listy */
    animation: none !important; 
    transform: none !important;
  }
  
  /* Klatki kluczowe - teraz przesuwamy o równe 50% */
  @keyframes scrollCarousel {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  

}

.tag-badge {
  display: inline-flex; /* Zmiana na inline-flex pomaga w centrowaniu tekstu */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  
  /* Sztywne wymiary, które nie pozwolą mu "urosnąć" */
  padding: 0.62rem 0.92rem;
  font-size: 11px !important; /* Sztywna wielkość czcionki */
  line-height: 1 !important;   /* Reset wysokości linii */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  border: 1px solid transparent;
  color: var(--text);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--primary), var(--secondary)) border-box;
  white-space: nowrap;
}

.cta-row {
  margin-top: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  min-height: 50px;
  padding: 0.79rem 1.08rem;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.16s ease;

  /* --- FIX NA OSTROŚĆ TEKSTU --- */
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;

}

.btn:focus-visible {
  outline: 3px solid rgba(115, 145, 243, 0.35);
  outline-offset: 2px;
}

.btn:hover {
  /* Zostawiamy tylko płynne uniesienie w górę. Możesz zmienić na -2px jeśli wolisz mocniejszy efekt */
  transform: translateY(-2px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--primary), #88a0f6);
  box-shadow: 0 10px 24px rgba(115, 145, 243, 0.36);
}


.btn-ghost {
  color: var(--text);
  border: 1px solid #d5dced;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.card-grid,
.step-grid {
  margin-top: 1.4rem;
  display: grid;
  gap: 5px;
}

.platform-section {
  text-align: center;
}

.platform-section .section-heading,
.platform-section .section-text {
  margin-inline: auto;
}

.platform-cards {
  margin-top: 1.4rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.platform-card {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.15rem;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.platform-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #d9e1f1;
}

.platform-card p {
  margin: 0;
  color: #4d5463;
  font-weight: 600;
  line-height: 1.5;
}

.platform-photo-placeholder {
  width: 250px;
  height: 250px;
  border-radius: 18px;
  border: 1px solid #fff;
  background: linear-gradient(130deg, rgba(115, 145, 243, 0.28), rgba(207, 153, 246, 0.34));
  box-shadow: 0 12px 24px rgba(30, 35, 46, 0.18);
}

.platform-card-featured {
  max-width: 360px;
  padding: 1.35rem;
}

.platform-photo-placeholder-large {
  width: 280px;
  height: 280px;
}

.card,
.step-card {
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: var(--radius);
  /*box-shadow: var(--shadow-soft);*/
  padding: 1.1rem;
  /*transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;*/
  
}

.card:hover,
.step-card:hover {
  /*transform: translateY(-2px);*/
  /*box-shadow: var(--shadow);*/
  border-color: #d9e1f1;
}

/* Bezpieczny kontener Flexbox dla listy kroków */
#jak-wyglada-proces ol {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

/* Zabezpieczenie dla tabletów - zawijanie do nowej linii */
@media (max-width: 1024px) {
  #jak-wyglada-proces ol {
    flex-wrap: wrap;
  }
  #jak-wyglada-proces ol > * {
    flex: 1 1 30%; /* 3 karty w rzędzie */
  }
}

/* Zabezpieczenie dla telefonów - jedna karta pod drugą */
@media (max-width: 768px) {
  #jak-wyglada-proces ol > * {
    flex: 1 1 100%; /* 1 karta w rzędzie */
  }
}

/* Wymuszamy, aby każda karta (krok) zajmowała dokładnie tyle samo miejsca */
#jak-wyglada-proces ol > * {
  flex: 1 1 0; 
  min-width: 0; /* Zabezpieczenie przed rozsadzaniem kontenera przez długie słowa */
}

#jak-wyglada-proces .step-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  
  /* TO JEST KLUCZ: odsuwa tekst od góry, robiąc miejsce na napis Krok */
  padding-top: 3.5rem !important; 
  
}

#jak-wyglada-proces .step-index {
  position: absolute;
  top: 1.1rem; /* Dopasowane do Twojego standardowego paddingu */
  left: 1.1rem;
  
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #3d3d49;
  background: #E8EEFF;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}

#jak-wyglada-proces .step-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4; /* Ciaśniejsza interlinia */
  color: #374151;
  font-weight: 600;
}

/* Główny kontener banera nad stopka */
.final-cta-box {
  position: relative;
  border-radius: 30px;
  padding: 4rem 2rem; /* Więcej przestrzeni w pionie, żeby ładnie wyeksponować tło */
  min-height: 400px;  /* Wymuszona minimalna wysokość banera */
  border: 1px solid #e8ebf2;
  overflow: hidden;
  
  /* TŁO: Półprzezroczysty jasny gradient + Twoje zdjęcie */
  background-color: #9fa8fb;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* WYŚRODKOWANIE ZAWARTOŚCI */
  display: flex;
  flex-direction: column;
  align-items: center; /* Środkuje przycisk w poziomie */
  justify-content: center;
  text-align: center; /* Środkuje tekst */

}

.final-cta-box .section-heading {
  color: #ffffff !important;
  max-width: 800px !important; /* Pozwala nagłówkowi rozciągnąć się na boki */
  width: 100% !important;
  margin-left: auto !important; /* Pilnuje, żeby wciąż był na środku */
  margin-right: auto !important;
}

.final-cta-box p {
  color: #ffffff;
  margin-bottom: 1.2rem;
}

.footer {
  border-top: 1px solid #e6eaf2;
  padding: 1.2rem 0;
  background: #fff;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer nav {
  display: flex;
  gap: 1rem;
}

.footer a {
  color: #4d5463;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Usuwa domyślny dolny margines, który podnosił tekst do góry */
.footer-inner p,
.footer-inner span {
  margin: 0 !important;
  line-height: 1.5; 
}

/* Wyrównuje linki wewnątrz nawigacji, by idealnie zgrały się z tekstem */
.footer nav {
  display: flex;
  gap: 1rem;
  align-items: center; 
}

/* --- ZMNIEJSZENIE CZCIONKI NAGŁÓWKA NA LIŚCIE OCZEKUJĄCYCH (DESKTOP) --- */
.hero-waitlist-title {
  font-size: 3rem !important; /* Zmniejszamy rozmiar czcionki samego tekstu w h1 */
  line-height: 1.25 !important;
}

/* ============================================================ */
/* WYGLĄD FORMULARZA WAITLIST (DESKTOP)                         */
/* ============================================================ */

.waitlist-form-container {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.waitlist-top-copy {
  font-size: 1rem;
  color: #374151; /* Ciemnoszary, czytelny tekst */
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.waitlist-form {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  width: 100%;
  max-width: 480px;
}

.waitlist-input {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border: 1px solid #CBD5E1;
  border-radius: 8px; /* <--- ZMIANA: Z 50px na 8px (lekko zaokrąglony kwadrat) */
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: #ffffff;
  color: #000000;
}

/* Niebieska poświata po kliknięciu w pole zapisu */
.waitlist-input:focus {
  border-color: #7391F3; 
  box-shadow: 0 0 0 3px rgba(115, 145, 243, 0.2); 
}

.waitlist-submit {
  /* Usunięte border-radius: 50px - przycisk przejmie zaokrąglenie z Twojej klasy .btn */
  padding: 0 1.5rem;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.waitlist-bottom-copy {
  font-size: 0.85rem;
  color: #64748B; /* Jaśniejszy szary dla tekstu o spamie */
  margin-top: 0.6rem;
}

/* ============================================================ */
/* STYLE NAGŁÓWKÓW I TEKSTÓW W KARTACH                          */
/* ============================================================ */

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827; 
  margin-top: 1.5rem; /* Odstęp od ikony */
  margin-bottom: 0.5rem; /* Odstęp od tekstu pod spodem */
  line-height: 1.3;
}

.card-desc {
  font-size: 0.95rem;
  color: #4B5563; /* Nieco jaśniejszy tekst dla lepszej czytelności */
  margin: 0;
  line-height: 1.4;
}

/* ============================================================ */
/* ZMIANY DLA WAITLIST (STRUKTURA ZDJĘCIA I NOWYCH TEKSTÓW)     */
/* ============================================================ */

/* Wyrównujemy wysokość obu kolumn, aby lewa mogła przykleić zdjęcie do dołu */
.waitlist-mod-section .grid-2-col {
  align-items: stretch !important;
}

/* Zamieniamy lewą stronę w Flexbox pracujący w pionie */
.waitlist-left-flex {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}

.value-text-wrap {
  flex-grow: 1; /* Wypycha zdjęcie poniżej na sam dół kolumny */
}

/* Styl dla przyklejonego zdjęcia na dole */
.waitlist-image-wrapper {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end; /* Dociska obrazek do krawędzi sekcji */
}

.waitlist-glued-img {
  display: block;
  max-width: 80%;
  height: auto;
}

/* Styl dla nowych tekstów po prawej stronie */
.waitlist-right-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centruje Twoje karty w pionie względem lewej strony */
}

.features-top-highlight {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 1.5rem;
}

.features-bottom-microcopy {
  font-size: 0.85rem;
  color: #6B7280;
  margin-top: 1.5rem;
}

/* ============================================================ */
/* NAPRAWA TEKSTÓW W PUNKTACH 1, 2, 3                           */
/* ============================================================ */

.step-text-wrapper {
  margin-top: 1rem; /* Ustawia ładny odstęp między kółkiem z numerkiem a tekstem */
  text-align: center; /* Środkuje tekst dokładnie tak jak na screenie */
}

.step-title {
  font-size: 1.1rem;
  font-weight: 600; /* Pogrubienie nagłówka */
  color: #1F2937; /* Ciemny szary, żeby odznaczał się od reszty */
  margin-top: 0; /* Resetuje domyślny górny margines nagłówka */
  margin-bottom: 0.3rem; /* Daje ciasny, estetyczny odstęp od tekstu poniżej */
}

.step-desc {
  font-size: 1rem;
  color: #4B5563; /* Nieco jaśniejszy kolor dla zwykłego tekstu */
  margin: 0; /* Resetuje domyślne marginesy, żeby tekst nie odlatywał w dół */
  line-height: 1.4;
}

/* ============================================================ */
/* OSTYLOWANIE ROZDZIELONYCH TEKSTÓW W KROKACH                  */
/* ============================================================ */

.step-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1F2937;
  display: inline-block;
  margin-bottom: 0.3rem; /* Odstęp między pogrubionym tytułem a tekstem */
}

.step-desc {
  font-size: 0.95rem;
  color: #4B5563; /* Jaśniejszy szary dla opisu */
}

/* Styl nowego opisu pod nagłówkiem */
.benefits-desc {
  font-size: 1.1rem;
  color: #4B5563;
  margin-top: 1.5rem;
  line-height: 1.5;
  max-width: 90%;
}

/* Upewniamy się, że wrapper jest punktem odniesienia dla boksów na desktopie */
.benefits-image-container .image-wrapper {
  position: relative;
}

/* ============================================================ */
/* TEKST POD NAGŁÓWKIEM W SEKCJI PROCESU (WAITLIST)             */
/* ============================================================ */

.waitlist-process-desc {
  display: block;
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* ============================================================ */
/* GLOBALNE UJEDNOLICENIE ODSTĘPÓW (NAGŁÓWEK -> TEKST)          */
/* ============================================================ */

/* 1. Każdy główny nagłówek sekcji ma identyczny odstęp od dołu */
.section-heading {
  margin-bottom: 1rem !important; 
}

/* 2. Tekst zawsze idealnie przylega do nagłówka i równo odpycha elementy pod nim */
.section-text,
.platform-subtitle {
  margin-top: 0 !important; 
  margin-bottom: 3rem !important; /* Stały odstęp od boksów/zdjęć poniżej */
}

/* ============================================================ */
/* ZMNIEJSZENIE ODSTĘPU NAD KROKAMI W SEKCJI PROCES             */
/* ============================================================ */

.process-header-adjusted {
  margin-bottom: 0.5rem !important; /* Nadpisuje duży domyślny margines z szablonu */
}

/* ============================================================ */
/* WYRÓWNANIE SEKCJI PROCES (PO IDENTYFIKATORZE)                */
/* ============================================================ */

/* Zmniejszamy i wyrównujemy główne odstępy całej sekcji */
#jak-wyglada-proces {
  padding-top: 4rem !important;    /* Reguluje pustą przestrzeń nad nagłówkiem */
  padding-bottom: 6rem !important; /* Reguluje pustą przestrzeń pod boksami */
}

/* Upewniamy się, że kontener nagłówka nie dodaje własnych marginesów u góry */
#jak-wyglada-proces .section-header-centered {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================ */
/* KARUZELA (ORBITA) - NAPRAWA PŁYNNOŚCI, CZASU I HOVERA        */
/* ============================================================ */

/* Zabezpieczenie przed poziomym paskiem na stronie */
.target-audience {
  overflow-x: hidden !important;
}

/* Wypuszczamy karuzelę pod awatary */
.tag-carousel {
  overflow: visible !important;
  width: 100%;
}

/* Wrapper obu list */
.tag-carousel .carousel-track-wrapper {
  display: flex !important;
  width: max-content !important;
  gap: 0 !important; /* KLUCZOWE: zero marginesu między listami, by 50% działało co do piksela */
  animation: smooth-scroll 45s linear infinite !important; /* Zmieniłem na 45s (zwolniłem) - im więcej sekund, tym wolniej */
}

/* PAUZA PO NAJECHANIU MYSZKĄ (DESKTOP) */
.tag-carousel .carousel-track-wrapper:hover {
  animation-play-state: paused !important;
}

/* Ustawienia pojedynczej listy */
.tag-carousel .tag-track {
  display: flex !important;
  align-items: center;
  gap: 1rem !important; /* Odstęp między samymi tagami */
  padding-right: 1rem !important; /* Identyczny odstęp na końcu listy, by połączyła się niewidocznie z drugą */
  margin: 0 !important;
  list-style: none;
  flex-shrink: 0 !important;
}

/* Kluczowa klatka przesuwa dokładnie o połowę wrappera */
@keyframes smooth-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================ */
/* KULOODPORNA KARUZELA: JEDNA LISTA, ZERO LAGÓW                */
/* ============================================================ */

.target-audience {
  overflow-x: hidden !important;
}

.tag-carousel {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  margin-top: 4rem !important;
  overflow: visible !important;
}

.tag-carousel .carousel-track-wrapper {
  display: flex !important;
  width: max-content !important;
  gap: 0 !important;
  animation: scroll-single-track 30s linear infinite !important; /* Twoja oryginalna prędkość */
}

.tag-carousel .carousel-track-wrapper:hover {
  animation-play-state: paused !important; /* Pauza działa na hover */
}

.tag-carousel .tag-track {
  display: flex !important;
  align-items: center;
  gap: 1.5rem !important; /* Odstęp między tagami */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  flex-shrink: 0 !important;
}

/* Przesuwamy tylko o 25%, ponieważ wewnątrz jednej listy mamy 4 powtórzone zestawy. 
   Po przejechaniu pierwszej ćwiartki następuje natychmiastowy, płynny reset bez przeładowywania dom. */


   @keyframes scroll-single-track {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}

/* ODCINAMY NIEWIDZIALNE, GIGANTYCZNE KOŁO TWORZĄCE ŁUK W TLE */
#o-platformie {
  overflow: hidden !important;
}

/* ============================================================ */
/* 1. CENTROWANIE FORMULARZA W DOLNYM BANERZE                   */
/* ============================================================ */
.final-cta form {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  margin: 0 auto !important;
  width: 100%;
}

.final-cta form + p,
.final-cta .form-disclaimer,
.final-cta p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================ */
/* 2. WIDOK SUKCESU - WSPÓLNA ANIMACJA                          */
/* ============================================================ */
.success-message {
  animation: fadeInSuccess 0.5s ease-out forwards;
}

@keyframes fadeInSuccess {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/* 3. WIDOK SUKCESU W HERO (RUSZTOWANIE I KOLOR)                */
/* ============================================================ */
.hero .success-message,
.hero-content .success-message {
  min-height: 400px; /* Blokada skakania strony */
  flex-direction: column !important;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.hero .success-message p,
.hero-content .success-message p {
  color: #9fa6b5 !important; /* Twój szary kolor */
}

/* ============================================================ */
/* 4. WIDOK SUKCESU W BANERZE (UKŁAD PIONOWY H1, H2, H3, P)     */
/* ============================================================ */
.final-cta .success-message {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
}

.final-cta .success-message h1 {
  font-size: 2.8rem !important;
  color: #ffffff !important;
  margin-bottom: 0.2rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.final-cta .success-message h2 {
  font-size: 1.8rem !important;
  color: #ffffff !important;
  margin-bottom: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.final-cta .success-message h3 {
  font-size: 1.2rem !important;
  color: #ffffff !important;
  margin-bottom: 0.5rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.final-cta .success-message p {
  font-size: 1rem !important;
  color: #ffffff !important;
  margin-bottom: 0 !important;
  font-weight: 400 !important;
}

/* ============================================================ */
/* 5. BEZWZGLĘDNE UKRYWANIE ELEMENTÓW PO WYSŁANIU (KLASA KILER) */
/* ============================================================ */
.hidden-after-submit {
  display: none !important;
}

/* ============================================================ */
/* UKRYWANIE ELEMENTÓW PRZED STARTEM (CTA, Regulamin, itp.)     */
/* ============================================================ */
.hide-before-launch {
  display: none !important;
}

@media (max-width: 767px) {
  /* Odpychamy w dół tylko pierwszą główną sekcję na telefonach */
  .section:first-of-type {
    padding-top: 100px; 
  }
}

@media (min-width: 768px) {
  .section {
    padding: 84px 0;
  }

  .cta-row {
    flex-direction: row;
  }

  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 2.35rem;
  }

  .hero-mockup {
    order: 0;
  }

  .card-grid.three,
  .step-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .platform-cards {
    grid-template-columns: 1fr 1.12fr 1fr;
    align-items: start;
    gap: 1.2rem;
  }

  .card-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step-grid.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .final-cta-box {
    padding: 2.35rem;
  }

  .hero-copy {
    padding-right: 0.75rem;
  }

  .card,
  .step-card {
    padding: 1.2rem;
  }

  .btn {
    min-height: 52px;
    padding-inline: 1.2rem;
  }

  .topbar-inner {
    min-height: 76px;
  }

  .topnav {
    display: inline-flex;
  }

 /* 1. Nakładamy jeden wielki gradient na CAŁY nagłówek */
.gradient-heading {
  /* Tutaj gradient rozkłada się płynnie od lewej do prawej na całej szerokości nagłówka */
  background: linear-gradient(90deg, #7391F3 0%, #CF99F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.2em;
}

/* 2. "Zamalowujemy" słowa, które NIE mają mieć gradientu */
.gradient-heading .text-solid {
  /* Zmień ten kolor na taki, jaki miałeś domyślnie w nagłówku (np. czarny lub ciemnoszary) */
  -webkit-text-fill-color: #111827; 
  color: #111827; 
}

.platform-subtitle {
  max-width: 700px; /* TUTAJ ZMIENIASZ SZEROKOŚĆ */
  margin: 0 auto; 
  text-align: center; 
  line-height: 1.6; 
  color: #9FA6B5; 
}

  .platform-features-container {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin: 4rem auto 0 auto;
    position: relative; /* DODANE: Niezbędne, aby utrzymać łuk w odpowiednim miejscu */
  }

  /* --- Czerwona, przerywana linia (Łuk w tle) --- */
  .platform-features-container::before {
    content: '';
    position: absolute;
    
    /* Pozycjonowanie w pionie. Wartość 140px powinna trafić idealnie w środek Twoich zdjęć. 
       Jeśli łuk jest za wysoko, zwiększ tę wartość (np. do 160px). Jeśli za nisko, zmniejsz (np. do 100px) */
    top: 140px; 
    left: 50%;
    transform: translateX(-50%); /* Centruje koło w poziomie */
    
    /* Wymiary gigantycznego koła */
    width: 150vw; 
    height: 150vw; 
    border-radius: 50%; 
    border-top: 2px dashed rgb(228, 228, 228); /* Czerwona, przerywana linia */
    
    /* Warstwy */
    z-index: -1; /* Chowa linię głęboko pod zdjęciami */
    pointer-events: none;
  }
  
  /* =========================================
     1. USTAWIENIA DLA SAMEGO DIVA ZE ZDJĘCIAMI
     ========================================= */
  .platform-images {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Zdjęcia wyrównane do dołu */
    gap: 4rem; /* Odstęp między samymi zdjęciami */
  }
  
  .platform-photo-placeholder {
    width: 250px;  
    height: 250px; 
    border-radius: 55px; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
  }
  
  /* Rotacje zdjęć (Dokładnie Twoje wyjściowe ustawienia) */
  .platform-images div:nth-child(1) {
    background-image: url('./img_2.jpg') !important;
    transform: rotate(-10deg);
    transform-origin: bottom right; 
  }
  
  .platform-images div:nth-child(2) {
    background-image: url('./img_3.jpg');
    transform: scale(1.05); 
  }
  
  .platform-images div:nth-child(3) {
    background-image: url('./img_4.jpg');
    transform: rotate(10deg);
    transform-origin: bottom left; 
  }
  
  /* =========================================
     2. USTAWIENIA DLA SAMEGO DIVA Z TEKSTAMI
     ========================================= */
  .platform-texts {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Równe wysokości boxów tekstowych */
    gap: 5px; /* PROSZONY ODSTĘP: 5px między boxami z tekstem */
    counter-reset: step-counter; /* Uruchamia numerację */
    margin-top: 7rem; /* DODANE: To zastępuje usunięty globalny gap */
  }
  
  .platform-texts p {
    position: relative; 
    flex: 1; /* Sprawia, że wszystkie 3 boxy mają równą szerokość */
    background-color: #ffffff;
    border: 0px solid #d1d5db;  
    border-radius: 8px; 
    padding: 2rem 1.5rem 1.5rem; 
    text-align: center; 
    margin: 0; 
  }
  
  /* Fioletowe kółeczka z numeracją */
  .platform-texts p::before {
    counter-increment: step-counter; 
    content: counter(step-counter); 
    position: absolute;
    top: 0; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 32px;
    height: 32px;
    background-color: #9fa8fb; 
    color: white; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: regular;
    font-size: 1rem;
    border: 0px solid #ffffff; 
  }

  /* =========================================
   3. SEKACJA CTA (Przycisk pod tekstami)
   ========================================= */
.platform-cta-wrapper {
  display: flex;
  justify-content: center; /* Wyśrodkowanie przycisku */
  margin-top: 3rem; /* Zwiększ tę wartość, jeśli chcesz odsunąć przycisk mocniej od tekstów */
  position: relative;
  z-index: 2; /* Upewnia się, że przycisk jest klikalny i leży nad ew. liniami w tle */
}

.btn-gradient-cta {
  background: linear-gradient(90deg, #6A87EA 0%, #7E98F2 100%); /* Gradient dopasowany do nagłówka */
  color: #ffffff; /* Biały tekst */
  padding: 16px 36px; /* Komfortowe "powietrze" wewnątrz przycisku */
  border-radius: 12px; /* Proszony Corner Radius */
  font-weight: 600; /* Pogrubienie, aby napis był wyraźny */
  font-size: 1.05rem;
  text-decoration: none; /* Usuwa domyślne podkreślenie linku */
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.25); /* Delikatna, kolorowa poświata pod przyciskiem */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Płynność animacji hover */
}

/* Efekt po najechaniu kursorem (Hover) */
.btn-gradient-cta:hover {
  transform: translateY(-2px); /* Przycisk lekko unosi się do góry */
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); /* Poświata staje się mocniejsza */
}

/* =========================================
   SEKCJA "KOGO CHCEMY WIDZIEĆ"
   ========================================= */

/* 1. Główne ustawienia sekcji */
.target-audience {
  background-color: #9fa8fb; /* Fioletowe tło */
  position: relative; /* "Klatka" dla pływających avatarów */
  overflow: hidden; 
  padding-bottom: 4rem; /* Żeby karuzela nie dotykała samego dołu */
}

/* 2. Wymuszenie białego koloru na tekstach */
.target-audience h2.section-heading,
.target-audience p.section-text {
  color: #ffffff; 
}

/* 3. Zabezpieczenie zawartości (żeby teksty były NAD avatarami) */
.target-audience .container {
  position: relative;
  z-index: 2; 
}

/* =========================================
   UKŁAD ORBITALNY (Orbit Avatars) - ZAKTUALIZOWANY
   ========================================= */

/* Kontener staje się jednocześnie największą (zewnętrzną) orbitą! */
.avatar-scatter-container {
  position: absolute;
  top: 50%;
  right: 5%; 
  transform: translateY(-50%); 
  width: 420px;  /* Średnica zewnętrznej orbity */
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4); /* Zewnętrzna linia */
  z-index: 1; 
  pointer-events: none; 
}

/* Wewnętrzna i środkowa orbita */
.avatar-scatter-container::before,
.avatar-scatter-container::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Utrzymuje okręgi w idealnym centrum */
  z-index: 0; 
}

/* Wymiary wewnętrznych orbit */
.avatar-scatter-container::before { width: 150px; height: 150px; } /* Najmniejsza */
.avatar-scatter-container::after  { width: 280px; height: 280px; } /* Środkowa */

/* 2. Wygląd bazowy avatara */
.scatter-avatar {
  position: absolute;
  /* Ustawiamy punkt startowy avatara idealnie na środku okręgów */
  top: 50%;
  left: 50%;
  
  /* Zmienna --size pozwala wyśrodkować obrazek względem jego własnego środka! */
  width: var(--size); 
  height: var(--size);
  margin-top: calc(var(--size) / -2);
  margin-left: calc(var(--size) / -2);

  border-radius: 50%;
  border: 2px solid #ffffff; 
  background-size: cover;
  background-position: center;
  background-color: #f3f4f6; 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); 
  z-index: 1; 
}

/* =========================================
   Pozycjonowanie na orbitach (Zmienne --size)
   ========================================= */

/* ORBITA WEWNĘTRZNA (promień r = 75px) */
.avatar-1 { --size: 70px; transform: rotate(0deg)   translate(75px)  rotate(0deg);   } 
.avatar-2 { --size: 44px; transform: rotate(180deg) translate(75px)  rotate(-180deg);} 

/* ORBITA ŚRODKOWA (promień r = 140px) */
.avatar-3 { --size: 54px; transform: rotate(45deg)  translate(140px) rotate(-45deg); } 
.avatar-4 { --size: 36px; transform: rotate(135deg) translate(140px) rotate(-135deg);} 
.avatar-5 { --size: 48px; transform: rotate(225deg) translate(140px) rotate(-225deg);} 
.avatar-6 { --size: 40px; transform: rotate(315deg) translate(140px) rotate(-315deg);} 

/* ORBITA ZEWNĘTRZNA (promień r = 210px) */
.avatar-7 { --size: 60px; transform: rotate(20deg)  translate(210px) rotate(-20deg); } 
.avatar-8 { --size: 50px; transform: rotate(110deg) translate(210px) rotate(-110deg);} 
.avatar-9 { --size: 44px; transform: rotate(200deg) translate(210px) rotate(-200deg);} 
.avatar-10{ --size: 32px; transform: rotate(290deg) translate(210px) rotate(-290deg);}

  .target-audience .tag-badge {
    /* Nadpisujemy skomplikowane gradientowe tło na czysty, biały kolor */
    background: #ffffff; 
    /* Zabezpieczenie koloru tekstu wewnątrz tagu, żeby był czytelny */
    color: #374151; 
    
    /* TIP DLA CIEBIE: Jeśli kiedyś zmienisz zdanie i będziesz chciał wrócić 
       do gradientowych obrysów, po prostu skasuj lub zakomentuj ten cały blok! */
  }

/* Układ dwóch kolumn - równe proporcje */
.value-proposition .grid-2-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr; 
  gap: 3rem;
  align-items: center;
}

/* Tekst po lewej - teraz zajmie całą dostępną przestrzeń kolumny */
/* Wymuszamy 100% szerokości dla lewej kolumny i jej zawartości */
.value-proposition .value-copy {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1; /* Dodatkowe upewnienie się w układzie flex/grid */
}

.value-proposition .section-heading {
  width: 100% !important;
  max-width: 100% !important;
  display: block; /* Upewniamy się, że nie jest inline-block */
  text-align: left;
}

.value-proposition .section-text {
  width: 80% !important;
  max-width: 80% !important;
}

/* Boxy po prawej - odstęp 5px */
.value-proposition .value-cards {
  display: flex;
  flex-direction: column;
  gap: 5px; 
}

/* Styl kart - białe profesjonalne boxy */
.value-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.benefit-card {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0px solid #e5e7eb;
  transition: border-color 0.3s ease;
}

.benefit-card:hover {
  border-color: #9fa8fb; /* Subtelny kolor marki przy najechaniu */
}

/* Placeholder na Twoje ikony */
/* Stylizacja kółka/boxa ikony */
.icon-placeholder {
  width: 40px;
  height: 40px;
  background-color: #E8EEFF; /* Bardzo delikatny błękitny podkład */
  border: 1px solid #e0e7ff;
  border-radius: 50%; /* Zmieniamy na okrągłe, wygląda bardziej estetycznie przy checku */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Rysujemy ikonkę "check" za pomocą CSS (bez obrazków!) */
.icon-placeholder::after {
  content: '';
  width: 12px;
  height: 6px;
  border-left: 2px solid #9fa8fb; /* Kolor Twojego brandu (fiolet/indygo) */
  border-bottom: 2px solid #9fa8fb;
  transform: rotate(-45deg) translateY(-1px); /* Obrót tworzy kształt ptaszka */
  display: block;
}


.benefit-card p {
  margin: 0;
  font-weight: 500;
  color: #1f2937;
  font-size: 1rem;
}

/* Poprawka dla mniejszych ekranów */
@media (max-width: 768px) {
  .value-proposition .grid-2-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* 1. Centrowanie nagłówka */
#jak-wyglada-proces .section-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center; /* To wycentruje badge tag-badge na środku */
  text-align: center;
  margin-bottom: 3rem;
}

#jak-wyglada-proces .section-heading {
  margin-top: 1rem;
  max-width: 800px; /* Zapobiega rozciąganiu tekstu na całą szerokość */
}


/* Opcjonalnie: upewnij się, że grid kroków jest wyśrodkowany pod nagłówkiem */
.step-grid {
  justify-content: center;
}

/* Główne ustawienia sekcji */
.benefits-visual {
  overflow: hidden;
  position: relative;
}

/* Pozycjonowanie zdjęcia na dole */
.benefits-display {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
}

.specialist-img {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: cover;
  opacity: 0.8;
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Kontener na 6 kart - stały układ */
.floating-cards-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
  align-content: flex-start;
  z-index: 5;
}

/* Statyczne karty dostosowane do dłuższych zdań */
.f-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  
  /* Szerokość pozwalająca na 2 kolumny, elastyczna wysokość */
  width: calc(50% - 12px);
  min-width: 180px;
  
  font-size: 0.9rem;
  line-height: 1.4;
  color: #1f2937;
  font-weight: 500;
}

/* Responsywność */
@media (max-width: 768px) {
  .f-card { width: 100%; }
  .benefits-text { padding-bottom: 2rem; }
}

/* 1. Ustawienia sekcji i tła */
#dlaczego-warto {
  background-color: #f8f9fa !important;
  padding: 80px 0 0 0 !important; /* Zero na dole, żeby zdjęcie dotykało krawędzi */
  overflow: visible;
}

/* 2. Układ siatki - poprawa szerokości tekstu i wyrównania do dołu */
#dlaczego-warto .grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Jeszcze więcej miejsca dla tekstu */
  gap: 0px; /* Większy odstęp zapobiegnie wchodzeniu tagów na tekst */
  align-items: flex-end;
}

/* 3. Stylizacja treści po lewej */
.benefits-content {
  padding-bottom: 100px;
  width: 100%;
  max-width: none !important; 
}

.benefits-content .tag-badge {
  margin-bottom: 1.5rem; /* Większy odstęp pod badgem, jak w innych sekcjach */
  display: inline-flex;
}

.benefits-content .section-heading {
  width: 100% !important;
  max-width: 100% !important; /* Usuwamy limit 900px, niech zajmie całą lewą kolumnę */
  text-align: left;
  line-height: 1.1;
  margin-right: -100px; /* Triki wizualny: pozwala nagłówkowi "wejść" w lukę między kolumnami */
}

.gradient-text {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  /* --- TO ZAPOBIEGA UCINANIU LITER --- */
  display: inline; /* Zmiana z inline-block na naturalne zachowanie tekstu */
  padding-bottom: 0.2em; /* Dodaje niewidoczną przestrzeń na dole na ogonki liter (np. g, y) */
}

/* 4. Kontener obrazka - przyklejony do dołu */
.benefits-image-container {
  display: flex;
  justify-content: left;
  position: relative;
  align-items: flex-end;
  padding-left: 15px;
}

.image-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  line-height: 0; /* Usuwa mikro-odstęp pod obrazkiem */
}

.specialist-img {
  width: 100%;
  height: auto;
  border-radius: 40px 40px 0 0; /* Zaokrąglona góra, płaski dół */
  display: block;
  
  /* WYŁĄCZENIE PRZEZROCZYSTOŚCI / MASKI */
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important; 
  
  /* Reset filtrów, jeśli jakieś były */
  filter: none !important; 
}

/* 5. Tagi - rozstawienie bez nachodzenia na siebie */
.benefit-tag {
  position: absolute;
  background: #ffffff;
  
  /* Więcej przestrzeni wewnątrz boxa */
  padding: 0.9rem 1.6rem; 
  
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  
  /* Usunięcie cienia */
  box-shadow: none; 
  
  /* Wyraźniejszy obrys skoro nie ma cienia (opcjonalnie) */
  border: 1px solid transparent;
  
  white-space: nowrap;
  z-index: 10;

  /* --- NOWE ZMIANY DOTYCZĄCE ZAWIJANIA --- */
  max-width: 250px;
  white-space: normal; /* KLUCZOWE: Pozwala tekstowi przejść do nowej linii */
  line-height: 1.4;    /* Estetyczna interlinia dla wielolinijkowego tekstu */
  text-align: left;  /* Tekst wyśrodkowany wygląda w tagach o wiele lepiej */
  
  /* Zmiana zaokrąglenia */
  border-radius: 20px;
  /* 3. Magia gradientowego obramowania */
  background: 
    /* Tło wewnątrz tagu (zawsze białe, nie wchodzi na ramkę) */
    linear-gradient(#ffffff, #ffffff) padding-box, 
    
    /* Tło samej ramki - TUTAJ WSTAW SWOJE KOLORY GRADIENTU */
    linear-gradient(90deg, #7361F3, #CF99F6) border-box; 
    /* Możesz też użyć zmiennych: linear-gradient(90deg, var(--primary), var(--secondary)) */

}

/* Precyzyjne pozycje tagów - skorygowane, by się nie stykały */
.t1 { top: 0%; left: -10%; }      /* 1 lewa strona */
.t2 { top: -10%; right: -40%; }     /* 1 prawa strona */
.t3 { top: 30%; right: -55%; }     /* 2 prawa strona */
.t4 { top: 25%; left: -30%; }      /* 2 lewa strona */
.t5 { bottom: 20%; right: -45%; }  /* 3 prawa strona */
.t6 { top: 70%; left: -20%; }      /* 3 lewa strona */

/* RWD */
@media (max-width: 992px) {
  #dlaczego-warto .grid-2-col {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .benefits-content { padding-bottom: 40px; }
  .benefits-image-container { justify-content: center; }
  .specialist-img { border-radius: 40px; } /* Na mobile przywracamy pełne zaokrąglenie */
  }

/* Zmiana wysokości i paddingu TYLKO dla kart w sekcji "problem" */
#problem .card {
  min-height: 180px; /* Wyższa karta - możesz to zwiększyć, jeśli potrzebujesz więcej miejsca */
  padding-top: 100px; /* Spycha tekst w dół, robiąc "gniazdo" na ikonę na górze */
  position: relative; /* Niezbędne, by ikona trzymała się wewnątrz karty */
  }

/* Klasa przygotowana dla Twoich ilustracji / SVG */
#problem .card-icon {
  position: absolute;
  top: 24px;  /* Odstęp ikony od górnej krawędzi karty */
  left: 24px; /* Odstęp ikony od lewej krawędzi karty */
  width: 60px; /* Szerokość ikony */
  height: 60px; /* Wysokość ikony */
}

}


@media (max-width: 768px) {
  /* Odsunięcie całej zawartości od lewej i prawej krawędzi ekranu */
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Jeśli Hero sekcja nie jest w .container, dodaj marginesy bezpośrednio do niej */
  .hero-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 768px) {
  /* Odsuwamy logo i przycisk od krawędzi */
  .topbar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Zmniejszamy przycisk CTA w nawigacji */
  .topbar .btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    min-height: 40px;
  }
}

/* --- HAMBURGER (Ukryty na desktopie) --- */
.hamburger {
  display: none; 
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 100; 
}

.hamburger .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #1F2937; 
  transition: all 0.3s ease;
  border-radius: 3px;
}

/* --- WERSJA MOBILNA --- */
@media (max-width: 768px) {
  .hamburger {
    display: block; /* Pokazujemy hamburgera */
  }
  
  /* Ukrywamy menu i robimy z niego wysuwaną planszę */
  .topnav {
    position: absolute;
    top: 70px; /* Wysokość Twojego topbara - dostosuj jeśli jest inny */
    left: -100%; /* Schowane poza ekranem */
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s ease;
    gap: 1.5rem;
    z-index: 99;
  }

  /* Klasa aktywująca - wysuwa menu */
  .topnav.active {
    left: 0;
  }

  /* Rozciągnięty przycisk CTA (zgodnie z wcześniejszym ustaleniami) */
  .topnav .navbar-cta {
    width: 85%;
    max-width: 400px;
    padding: 1rem;
    margin-top: 1rem;
  }

  /* Animacja krzyżyka */
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0; 
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* Wymusza biały kolor tekstu dla przycisku CTA wewnątrz nawigacji - ostatecznie */
.topnav a.navbar-cta {
  color: #ffffff !important;
}

/* Zabezpieczenie przed hoverem ze zwykłych linków menu */
.topnav a.navbar-cta:hover {
  color: #ffffff !important;
}

/* Wymuszenie szarego koloru dla podtytułu platformy */
.platform-subtitle {
  color: #64748B !important; /* Szary odcień, taki jak w sekcji Problem */
}

@media (max-width: 768px) {

  /* Zdejmujemy limity szerokości dla nagłówków i tekstów pod nimi */
  .section-heading,
  .section-text {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;  /* Wyzerowane! */
    padding-right: 0 !important; /* Wyzerowane! */
  }

  /* Wyłączenie twardych spacji na telefonach - wersja rozszerzona */
  h1 br, 
  h2 br, 
  h3 br, 
  p br, 
  span br,
  .section-heading br,
  .section-text br,
  .platform-texts br {
    display: none !important;
  }

  /* --- 1. ZDJĘCIA (Zoptymalizowany rozmiar + przerywana linia) --- */
  .platform-images {
    position: relative !important; /* Niezbędne, by linia trzymała się zdjęć */
    z-index: 1 !important;         /* Zabezpieczenie, by linia chowała się pod spód */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 5vw !important;         /* Odrobinę mniejszy odstęp między zdjęciami */
    
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-top: 3.5rem !important;
  }

  /* --- ODTWORZENIE PRZERYWANEJ LINII (Zakrzywiony łuk w CSS) --- */
  .platform-images::before {
    content: "" !important;
    position: absolute !important;
    top: 55% !important; /* Opuszcza linię mniej więcej do połowy zdjęć */
    left: -10% !important;
    width: 120% !important; /* Linia rozciąga się poza ekran, by nie było widać jej uciętych końców */
    height: 60px !important;
    border-top: 2px dashed #CBD5E1 !important; /* Grubość i kolor - dostosuj HEX do swojego projektu */
    border-radius: 50% !important; /* Wygina linię w delikatny łuk */
    z-index: -1 !important; /* Wpycha linię pod zdjęcia */
  }

  .platform-photo-placeholder {
    width: 32vw !important;  /* Zmniejszamy z 38vw, żeby odsłonić więcej bocznych zdjęć */
    height: 32vw !important; 
    border-radius: 30px !important; 
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important; 
  }

  .platform-images div:nth-child(1) { 
    background-image: url('./img_2.jpg') !important;
    transform: rotate(-5deg) !important; 
  }
  .platform-images div:nth-child(2) { 
    background-image: url('./img_3.jpg') !important;
    transform: scale(1.05) translateY(-5px) !important; 
  }
  .platform-images div:nth-child(3) { 
    background-image: url('./img_4.jpg') !important;
    transform: rotate(5deg) !important; 
  }

  /* --- 2. TEKSTY Z NUMERACJĄ (Jeden pod drugim) --- */
  .platform-texts {
    display: flex !important;
    flex-direction: column !important; /* Zmiana układu na pionowy! */
    gap: 1.8rem; 
    margin-top: 3rem; 
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .platform-cta-wrapper {
    margin-top: 3rem !important; /* Zwiększ tę wartość, jeśli chcesz jeszcze więcej miejsca */
    text-align: center; /* Dodatkowe zabezpieczenie, żeby przycisk stał na środku */
    width: 100%;
  }

  .platform-texts > div {
    width: 100%; 
    font-size: 0.95rem; 
    line-height: 1.5;
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center; 
  }

  .platform-texts {
    counter-reset: step-counter !important;
  }

  .platform-texts > *::before {
    content: counter(step-counter) !important;
    counter-increment: step-counter !important;
    display: flex !important;
    margin: 0 auto 15px auto !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #9fa8fb !important; 
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }
  
  /* --- 3 BOXY Z IKONAMI (Wyrównane do lewej) --- */
  #problem .card {
    padding: 1.5rem 1.5rem !important; /* Minimalnie większy padding boczny, żeby tekst nie dotykał ramki */
    min-height: auto !important;      
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* KLUCZOWE: równa całą zawartość do lewej krawędzi */
    gap: 1rem !important;             
    margin-bottom: 1rem !important;   
  }

  /* Ikony dociśnięte do lewej - ostateczna poprawka na wcięcie */
  #problem .card img, 
  #problem .card svg {
    width: 80px !important;           /* Sztywna, zgrabna szerokość zamiast procentów */
    height: auto !important;
    max-height: 80px !important;      
    margin: 0 0 1rem 0 !important;    /* 0 z lewej, 0 z prawej, trochę odstępu na dole */
    padding: 0 !important;            /* Zerujemy wszelkie paddingi */
    display: block !important;
    position: static !important;      /* Resetuje ewentualne pozycjonowanie absolutne z desktopu */
    transform: none !important;       /* Resetuje ewentualne przesunięcia X/Y */
  }

  /* Tekst dociśnięty do lewej */
  #problem .card p, 
  #problem .card div {
    font-size: 0.9rem !important;     
    text-align: left !important;      /* KLUCZOWE: tekst od lewej */
    margin: 0 !important;
    line-height: 1.4 !important;
  }

 /* --- SEKCJA KORZYŚCI (#dlaczego-warto) - KARUZELA NAD ZDJĘCIEM --- */
  
  /* USUNIĘCIE DOLNEGO PADDINGU SEKCJI - aby zdjęcie dotknęło dolnej krawędzi */
  #dlaczego-warto {
    padding-bottom: 0 !important;
  }
  
  /* Zmniejszony odstęp (o ok. 50%) między nagłówkami a karuzelą */
  #dlaczego-warto .grid-2-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important; /* Było 3rem */
  }

  #dlaczego-warto .benefits-content {
    text-align: left !important;
    width: 100% !important;
  }
  
  #dlaczego-warto .section-heading {
    text-align: left !important;
  }

  #dlaczego-warto .tag-badge {
    display: inline-block !important; 
    margin-bottom: 1.5rem !important;
  }

  /* Wymuszenie gradientu dla nagłówka */
  .gradient-text {
    display: inline-block !important;
    background: linear-gradient(90deg, #8B5CF6, #C084FC) !important; 
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  /* 1. Odwrócenie kolejności i zmniejszenie światła nad zdjęciem */
  #dlaczego-warto .image-wrapper {
    display: flex !important;
    flex-direction: column-reverse !important; 
    gap: 0.5rem !important; /* Zmniejszamy mocno odstęp między karuzelą a zdjęciem */
    width: 100vw !important; 
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* 2. ZDJĘCIE - Powiększone i przyklejone do dołu */
  #dlaczego-warto .specialist-img {
    max-width: 380px !important; /* POWIĘKSZONE z 300px */
    width: 100% !important;
    margin: 0 auto 0 auto !important; /* Wyzerowany dolny margines dociska je do krawędzi */
    display: block !important;
  }

  /* 3. Ustawienia poziomego scrolla (Karuzela) */
  #dlaczego-warto .mobile-tags-carousel {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important; /* Minimalnie ściśnięte karty ze sobą */
    padding: 0 1.5rem 1rem 1.5rem !important; 
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #dlaczego-warto .mobile-tags-carousel::-webkit-scrollbar {
    display: none;
  }

  /* 4. TAGI W KARUZELI - z dodaną GRADIENTOWĄ RAMKĄ */
  #dlaczego-warto .benefit-tag {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    
    flex: 0 0 80% !important; 
    scroll-snap-align: center !important; 
    margin: 0 !important; 
    
    font-size: 0.9rem !important;
    padding: 1.5rem !important;
    white-space: normal !important;
    
    /* GRADIENTOWA RAMKA - technika background-clip */
    background: linear-gradient(#ffffff, #ffffff) padding-box,
                linear-gradient(90deg, #8B5CF6, #C084FC) border-box !important;
    border: 1px solid transparent !important; /* Przezroczysta ramka wymusza miejsce na gradient */
    border-radius: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  }

}

/* NOWE POPRAWKI MOBILNE - PROCES I CTA      */
/* ========================================= */
  
@media (max-width: 768px) {
  
  /* --- 1. ROZCIĄGNIĘCIE PRZYCISKU CTA --- */
  .platform-cta-wrapper {
    margin-top: 3rem !important; 
    text-align: center !important; 
    width: 100% !important; 
    box-sizing: border-box !important;
  }

  .platform-cta-wrapper .btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

/* --- 2. SEKCJA PROCES (#jak-wyglada-proces) --- */
  
  /* Wyśrodkowanie tagu i nagłówka */
  #jak-wyglada-proces .section-header-centered {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  #jak-wyglada-proces .tag-badge {
    margin: 0 auto 1.5rem auto !important;
    display: inline-block !important;
  }

  #jak-wyglada-proces .section-heading {
    text-align: center !important;
    margin-bottom: 2.5rem !important;
    padding: 0 !important;
  }

  /* Układanie kroków pionowo (jeden pod drugim) */
  #jak-wyglada-proces .step-grid { 
    display: flex !important;
    flex-direction: column !important; 
    gap: 1rem !important;
    padding: 0 !important; /* Kasuje domyślne wcięcie dla listy <ol> */
  }

/* Wnętrze karty: ułożenie tagu "KROK" i tekstu jedno pod drugim */
#jak-wyglada-proces .step-card { 
  width: 100% !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Równa tag i tekst do lewej */
  gap: 0.8rem !important; /* Robi ładny odstęp między "KROK 1" a głównym tekstem */
}

/* "Uziemienie" tagu KROK (wyłączenie position: absolute z desktopu) */
#jak-wyglada-proces .step-index {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Zabezpieczenie marginesów tekstu */
#jak-wyglada-proces .step-text {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* --- SEKCJA WARTOŚĆ (value-proposition) --- */
  
  /* 1. Ułożenie głównego kontenera (tekst nad kartami) */
  .value-proposition .grid-2-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  /* 2. Zabezpieczenie lewej strony z tekstem */
  .value-proposition .value-copy {
    text-align: left !important;
    width: 100% !important;
  }
  
  .value-proposition .section-heading {
    text-align: left !important;
    margin-bottom: 1rem !important;
  }

  /* 3. Ułożenie 4 boxów pionowo (CIAŚNIEJSZE ODSTĘPY) */
  .value-proposition .value-cards {
    display: flex !important;
    flex-direction: column !important; 
    gap: 5px !important; /* <--- Zmniejszony odstęp między boxami, jak na desktopie */
    width: 100% !important;
  }

  /* 4. SMUKLEJSZA KARTA (mniejsze marginesy wewnętrzne) */
  .value-proposition .benefit-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; 
    justify-content: flex-start !important;
    gap: 1rem !important;
    
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 1.2rem 1.2rem !important; /* <--- Karta jest teraz węższa w pionie */
    box-sizing: border-box !important;
    
    background: #ffffff !important;
    border-radius: 12px !important;
  }

  /* 5. DELIKATNIEJSZA IKONA (kolory i grubość z desktopu) */
  .value-proposition .icon-placeholder {
    display: block !important;
    flex-shrink: 0 !important; 
    
    width: 32px !important;  /* <--- Kółko nieco mniejsze i zgrabniejsze */
    min-width: 32px !important;
    height: 32px !important; 
    min-height: 32px !important;
    
    /* Jasnobłękitne tło kółka */
    background-color: #EEF2FF !important; 
    border-radius: 50% !important;        
    
    /* Cieńszy, błękitno-indygo ptaszek (odwzorowany z Twojego screena) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818CF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: 16px !important;     
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Tekst dociśnięty do lewej */
  .value-proposition .benefit-card p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
    flex-grow: 1 !important; 
  }

  /* --- NAPRAWA GRADIENTU W NAGŁÓWKU (Odwrócona logika) --- */
  
  /* 1. Cały nagłówek staje się domyślnie gradientem */
  .gradient-heading {
    background: linear-gradient(90deg, #818CF8, #C084FC) !important; 
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  /* 2. Wyłączenie gradientu i wymuszenie czerni dla wybranych słów */
  .gradient-heading .text-solid {
    background: none !important; /* Kasujemy tło gradientu */
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0F172A !important; /* Wymuszamy ciemny kolor (Twój HEX) */
    color: #0F172A !important;
  }

/* ============================================================ */
/* FIX DLA SEKCJI TARGET AUDIENCE (FIOLETOWA Z KARUZELĄ)        */
/* ============================================================ */

@media (max-width: 768px) {
  
  .target-audience {
    background-color: #9FA8FB !important; /* Przywraca fioletowe tło */
    padding: 4rem 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Naprawa kolorów tekstów */
  .target-audience .section-heading,
  .target-audience .section-text {
    color: #ffffff !important;
    text-align: center !important;
  }

  /* AVATARY - Środkowanie */
  .avatar-scatter-container {
    position: relative !important;
    width: 100% !important;
    height: 180px !important; 
    margin: 1rem auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: scale(0.7) !important; 
  }

  .scatter-avatar {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 60px !important;
    height: 60px !important;
    border: 3px solid #ffffff !important;
    border-radius: 50% !important;
    background-size: cover !important;
  }

  /* Ustawienie kilku avatarów w kółku na środku */
  .avatar-1 { transform: translate(-50%, -50%) translate(-50px, -30px) !important; }
  .avatar-2 { transform: translate(-50%, -50%) translate(50px, -30px) !important; }
  .avatar-3 { transform: translate(-50%, -50%) translate(0px, 0px) scale(1.2) !important; z-index: 5; }
  .avatar-4 { transform: translate(-50%, -50%) translate(-60px, 40px) !important; }
  .avatar-5 { transform: translate(-50%, -50%) translate(60px, 40px) !important; }
  .avatar-6, .avatar-7, .avatar-8, .avatar-9, .avatar-10 { display: none !important; }

  /* KARUZELA */
  .carousel-track-wrapper {
    display: flex !important;
    width: max-content !important;
  }

  .tag-track {
    display: flex !important;
    gap: 1rem !important;
    padding-right: 1rem !important;
    animation: marquee 15s linear infinite !important; 
  }

  .target-audience .tag-badge {
    background: #ffffff !important;
    color: #818CF8 !important;
    white-space: nowrap !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 50px !important;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

}
}

/* ============================================================ */
/* SEKCJA: KONTO TWÓRCY (POPRAWIONA SZEROKOŚĆ I MNIEJSZE BOXY)  */
/* ============================================================ */

.account-creation-section {
  padding: 6rem 0; 
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
}

/* KLUCZOWE: Trzyma kontener w ryzach na szerokość */
.split-layout {
  display: grid;
  grid-template-columns: 4fr 8fr; 
  gap: 3rem; /* Zmniejszony odstęp między zdjęciem a tekstem */
  align-items: stretch; 
  width: 100%;
  max-width: 1140px; /* Blokuje rozjeżdżanie się na boki */
  margin: 0 auto; /* Centruje kontener na ekranie */
}

/* ZDJĘCIE */
.image-column .side-image {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* NAGŁÓWEK */
.content-column .section-heading {
  color: #0f172a;
  margin-bottom: 2.5rem;
  font-size: 2.4rem;
  text-align: left;
  line-height: 1.2;
  max-width: none !important;
  width: 100% !important;
}

/* LISTA BOXÓW (3 Kolumny, mniejsze odstępy) */
.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem; /* Zmniejszone przerwy między boxami */
}

/* ZMNIEJSZONE BOXY */
.features-list li {
  background-color: #ffffff;
  padding: 0.8rem 1rem; /* Znacznie mniejszy padding */
  border-radius: 12px; /* Mniejsze zaokrąglenie rogu */
  border: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.9rem; /* Mniejsza czcionka */
  color: #475569;
  font-weight: 500;
}

/* PIERWSZY BOX Z GRADIENTOWYM OBRYSEM */
.features-list li.input-box-style {
  position: relative;
  background: #fff;
  border: none; /* Usuwamy zwykły border */
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0.6rem 1rem;
  z-index: 1;
}

/* Tworzenie obrysu gradientowego wokół inputa */
.features-list li.input-box-style::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 8px; 
  padding: 1px; 
  background: linear-gradient(90deg, #818CF8, #C084FC); 
  
  /* Wersja dla przeglądarek WebKit (Chrome, Safari) */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  
  /* Wersja standardowa, o którą prosi edytor (Firefox i nowe przeglądarki) */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  
  z-index: -1;
}

.input-label {
  font-size: 0.65rem; /* Mniejszy label */
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: #818CF8;
  font-weight: 400;
  margin-bottom: 2px;
}

.input-value {
  color: #475569;
  font-weight: 500;
}

/* ============================================================ */
/* RWD - MOBILE                                                 */
/* ============================================================ */
@media (max-width: 1024px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .image-column { height: 350px; }
  .features-list { grid-template-columns: repeat(2, 1fr); }
  .content-column .section-heading { font-size: 2rem; text-align: center; }
}

@media (max-width: 600px) {
  .features-list { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* WERSJA MOBILNA - ZACHOWANIE TWOICH ORBIT (SKALOWANIE)        */
/* ============================================================ */

@media (max-width: 768px) {
  
  .target-audience {
    background-color: #9FA8FB !important; 
    padding: 4rem 0 !important;
    overflow: hidden !important;
  }

  /* Wymuszamy flexbox, żeby poukładać elementy bez ruszania HTML */
  .target-audience .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 1. TEKSTY NA GÓRĘ */
  .target-audience .section-heading {
    order: 1 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }

  .target-audience .section-text {
    order: 2 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }

  /* 2. TWOJE AVATARY W ŚRODKU (Przeskalowane) */
  .target-audience .avatar-scatter-container {
    order: 3 !important;
    position: relative !important;
    width: 100% !important; 
    height: 380px !important; /* Rezerwujemy miejsce w pionie na okręgi */
    margin: 0 auto !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* MAGIA: Zmniejszamy CAŁY Twój układ orbit proporcjonalnie do 60%, 
       żeby 210px promienia zmieściło się na wąskim ekranie telefonu */
    transform: scale(0.6) !important; 
  }

  /* Ustawienie bazy dla Twoich avatarów wewnątrz wyśrodkowanego kontenera */
  .target-audience .scatter-avatar {
    position: absolute !important;
    /* Poniższe linie centrują punkt startowy dla Twoich transformacji */
    top: 50% !important; 
    left: 50% !important;
    margin-top: calc(var(--size) / -2) !important;
    margin-left: calc(var(--size) / -2) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    border: 3px solid #ffffff !important;
    border-radius: 50% !important;
    background-size: cover !important;
  }

  /* Opcjonalnie: Rysowanie okręgów (orbit) pod avatarami na mobile */
  .target-audience .avatar-scatter-container::before,
  .target-audience .avatar-scatter-container::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border: 1px dashed rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    z-index: 0 !important;
  }
  
  /* Rozmiary okręgów dopasowane do Twoich promieni (r=75 i r=140) */
  .target-audience .avatar-scatter-container::before { width: 150px !important; height: 150px !important; }
  .target-audience .avatar-scatter-container::after { width: 280px !important; height: 280px !important; }

  /* 3. KARUZELA NA SAM DÓŁ */
  .target-audience .tag-carousel {
    order: 4 !important;
    width: 100vw !important; 
    margin-top: 1rem !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .target-audience .tag-badge {
    background: #ffffff !important;
    color: #374151 !important; /* Twój kolor tekstu z kodu */
    border: none !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
  }
}

/* Kontener logotypu */
.brand {
  display: flex;
  align-items: center;
}

/* Stylizacja samego obrazka logo */
.logo-img {
  height: 20px; /* Dostosuj wysokość do swojego menu */
  width: auto;  /* Pozwala zachować proporcje */
  display: block;
}

/* Efekt po najechaniu myszką */
.brand a:hover .logo-img {
  transform: scale(1.05);
}

/* Dostosowanie dla wersji mobilnej */
@media (max-width: 768px) {
  .logo-img {
    height: 30px; /* Mniejsze logo na telefonach */
  }
}

/* ============================================================ */
/* 1. GLOBALNY FIX NA POZIOME PRZEWIJANIE (OVERFLOW)            */
/* ============================================================ */
/* To zapobiega rozpychaniu strony przez tagi lub avatary */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

/* ============================================================ */
/* 2. OPTYMALIZACJA MOBILE (PONIŻEJ 768px)                      */
/* ============================================================ */
@media (max-width: 768px) {

  /* --- ZMNIEJSZENIE LOGO (o ok. 40%) --- */
  .brand img, .logo-img {
    height: 15px !important; /* Wcześniej było 24px, teraz jest znacznie mniejsze */
    width: auto !important;
  }

  /* --- 1. WYMUSZENIE 100% WYSOKOŚCI EKRANU (Viewport) --- */
  .hero {
    /* Używamy dvh (Dynamic Viewport Height), by paski przeglądarki nie zasłaniały przycisków */
    height: calc(100dvh - 80px) !important; /* Odejmujemy ok. 60px na górny pasek z logo */
    min-height: 550px !important; /* Zabezpieczenie dla ekstremalnie małych telefonów */
    padding: 1rem 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }



  /* --- ODKLEJENIE BANNERA (Idealnie zgrane z marginesem 1.5rem) --- */
  .final-cta {
    width: calc(100% - 3rem) !important; /* 100% szerokości minus Twoje marginesy */
    margin: 0 auto 2rem auto !important; /* Środkuje go na ekranie */
    border-radius: 24px !important;      /* Ładne zaokrąglenie rogów */
    box-sizing: border-box !important;
  }

  /* --- ZDJĘCIE (Wymuszony kwadrat, brak ucięcia od góry) --- */
  .hero-mockup-container {
    order: 1 !important;
    width: 270px !important;  /* Mniejsza szerokość (miejsce na tagi) */
    height: 280px !important; /* Taka sama wysokość = idealny kwadrat */
    margin: 0 auto !important; /* Wyśrodkowanie samego bloku zdjęcia */
    position: relative !important;
  }
  
  .hero-mockup-image {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important; /* Gwarantuje, że głowa nie będzie ucięta */
    border-radius: 30px !important; /* Zachowuje ładne zaokrąglenia z desktopu */
  }

  /* --- 2. OSTATECZNA NAPRAWA TAGÓW (Wymuszony kształt pigułki) --- */
  .hero-badge {
    /* Zamiast auto, wymuszamy sztywną, małą wysokość i kasujemy resztki z desktopu */
    height: 34px !important;          
    min-height: 0 !important;
    max-height: 34px !important;
    
    width: auto !important;
    min-width: 0 !important;
    
    padding: 0 1.2rem !important;    /* Zero paddingu z góry/dołu, tylko po bokach! */
    font-size: 0.75rem !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    aspect-ratio: unset !important;  /* Zabija ewentualne proporcje kwadratu/koła */
    border-radius: 50px !important;  /* Wymusza ładną pigułkę */
    white-space: nowrap !important;
  }
  
  /* Rozmieszczenie tagów dla mniejszego zdjęcia */
  .badge-1 { left: 5% !important; top: 30% !important; }
  .badge-2 { right: -10% !important; top: 40% !important; }
  .badge-3 { right: -5% !important; top: 65% !important; }

  /* --- TEKSTY (Wyrównanie do lewej) --- */
  .hero-copy {
    order: 2 !important;
    text-align: left !important; /* Powrót do wyrównania do lewej */
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* Elementy startują od lewej krawędzi kontenera */
  }

  .hero-copy .chip {
    margin-bottom: 0.8rem !important;
  }

  .hero-copy h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.8rem !important;
    text-align: left !important;
  }

  .hero-copy .lead {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
  }

  /* Lista korzyści */
  .hero-copy .bullet-list {
    text-align: left !important; 
    width: 100%;
    margin: 0 0 1.5rem 0 !important;
    padding-left: 1.2rem !important; /* Wcięcie dla kropek z listy */
    font-size: 0.85rem !important;
  }

  /* --- 4. PRZYCISKI ZAWSZE NA DOLE EKRANU --- */
  .cta-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-top: auto !important; /* "Wypycha" przyciski na sam dół kontenera */
    padding-bottom: 1.5rem !important; /* Bezpieczny odstęp od dolnej krawędzi telefonu */
  }

  /* --- 1. WYRÓWNANIE MENU DO KRAWĘDZI --- */
  .topbar .container, 
  .topbar-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Jeśli nadal brakuje marginesu, zmień 0 na np. 1rem, aby zrównać z tekstami poniżej */
  }

  /* --- 3. NAPRAWA BADGE "TWÓRCO" --- */
  .hero-copy .chip {
    display: inline-flex !important;
    align-items: center !important;     /* Idealne centrowanie w pionie */
    justify-content: center !important;
    padding: 0.4rem 1rem !important;    /* Grubością dopasowane do "PROBLEM" */
    line-height: normal !important;     /* Resetuje puste odstępy u góry/dołu */
    height: auto !important;
    margin-bottom: 1rem !important;
    align-self: flex-start !important;
  }

  /* --- NAPRAWA WIELKIEGO NAGŁÓWKA W SEKCJI 12 PUNKTÓW --- */
  .account-creation-section .section-heading,
  .account-creation-section h2 {
    font-size: 1.5rem !important; /* Taki sam rozmiar jak w sekcji Hero */
    line-height: 1.3 !important;
    text-align: left !important;  /* Wyrównanie do lewej dla spójności */
  }

   /* --- CENTROWANIE STOPKI NA MOBILE --- */
  .footer-inner {
    flex-direction: column !important; /* Ustawia elementy jeden pod drugim */
    justify-content: center !important;
    align-items: center !important;    /* Wyśrodkowanie w poziomie */
    text-align: center !important;
    gap: 1rem !important;              /* Równy odstęp między tekstem a linkami */
  }

  .footer nav {
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;        /* W razie bardzo wąskich ekranów linki ładnie się zawiną */
    gap: 1.5rem !important;            /* Nieco większy odstęp między samymi linkami dla łatwiejszego klikania */
  }
  
}

/* ============================================================ */
/* SEKCJA "KOGO CHCEMY WIDZIEĆ" - WERSJA STATYCZNA (MOBILE)     */
/* ============================================================ */

/* 1. Ukrywamy nowy obrazek na komputerach (tam niech działa CSS) */
@media (min-width: 769px) {
  .mobile-orbits-img { 
    display: none !important; 
  }
}

@media (max-width: 768px) {
  
  /* 2. Ukrywamy skomplikowane orbity CSS na telefonach */
  .avatar-scatter-container {
    display: none !important;
  }

  /* 3. Ustawiamy Flexbox do układania elementów jeden pod drugim */
  .target-audience .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 2rem !important;
  }

  /* --- KOLEJNOŚĆ 1: TWÓJ OBRAZEK PNG Z ORBITAMI --- */
  .mobile-orbits-img {
    order: 1 !important;
    width: 100% !important;
    max-width: 360px !important; /* Optymalna wielkość na ekran telefonu */
    height: auto !important;
    margin-bottom: 2rem !important;
    display: block !important;
  }

  /* --- KOLEJNOŚĆ 2 i 3: TEKSTY --- */
  .target-audience h2.section-heading {
    order: 2 !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
  .target-audience p.section-text {
    order: 3 !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important;
  }

  /* --- KOLEJNOŚĆ 4: KARUZELA (PEŁNA SZEROKOŚĆ) --- */
  .target-audience .tag-carousel {
    order: 4 !important;
    
    /* Niezawodny trik CSS na wyłamanie z marginesów i rozciągnięcie od krawędzi do krawędzi */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    margin-bottom: 0 !important; 
  }

  /* Zabezpieczenie przed ucięciem i ładny scroll w karuzeli */
  .target-audience .tag-carousel-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; 
    
    /* Zabezpiecza pierwszy i ostatni element przed dotykaniem bocznych krawędzi ekranu */
    padding: 0 1.5rem 1rem 1.5rem !important; 
    gap: 1.2rem !important; 
    
    /* Ukrywa natywny, brzydki pasek scrolla na telefonach */
    scrollbar-width: none; 
  }
  .target-audience .tag-carousel-inner::-webkit-scrollbar {
    display: none;
  }

  /* --- ZWIĘKSZENIE TAGÓW W KARUZELI --- */
  .target-audience .tag-badge {
    font-size: 1rem !important; /* Zwiększona czcionka */
    padding: 0.8rem 1.8rem !important; /* Większy, bardziej "klikalny" przycisk */
    white-space: nowrap !important; /* Zapobiega łamaniu tekstu w dwóch liniach */
    border-radius: 50px !important;
  }

  /* ============================================================ */
  /* POPRAWKI: UKRYCIE STARYCH ORBIT I PRZESUWANA KARUZELA        */
  /* ============================================================ */

  /* 1. BEZWZGLĘDNE ukrycie starych orbit CSS na telefonie */
  .target-audience .avatar-scatter-container {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* 2. Ustawienia Karuzeli - przygotowanie pod "Swipe" palcem */
  /* ============================================================ */
  /* KARUZELA: AUTO-ANIMACJA + SWIPE (MOBILE)                    */
  /* ============================================================ */

  .target-audience .tag-carousel {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important; /* Ukrywa wystające tagi poza ekranem */
  }

  /* Kontener, który pozwala na fizyczne przesuwanie palcem */
  .target-audience .carousel-track-wrapper {
    display: flex !important;
    overflow-x: auto !important; /* Włącza swipe */
    cursor: grab;
    -webkit-overflow-scrolling: touch !important; /* Płynność na iOS */
    scrollbar-width: none !important; /* Ukrywa pasek na Firefox */
  }

  .target-audience .carousel-track-wrapper::-webkit-scrollbar {
    display: none !important; /* Ukrywa pasek na Chrome/Safari */
  }

  /* Element, który faktycznie się animuje */
  .target-audience .carousel-track {
    display: flex !important;
    gap: 1.2rem !important;
    padding: 0 1.5rem 1rem 1.5rem !important;
    width: max-content !important; /* Ważne: track musi być tak szeroki jak wszystkie tagi */
    
    /* PRZYWRACAMY ANIMACJĘ: 
       Upewnij się, że nazwa 'scroll' zgadza się z tą z wersji desktop! */
    animation: scroll 25s linear infinite !important; 
  }

  /* Tagi - nie pozwalamy im się kurczyć, by wymusić scrollowanie */
  .target-audience .tag-badge {
    flex-shrink: 0 !important;
    font-size: 1rem !important;
    padding: 0.8rem 1.8rem !important;
    white-space: nowrap !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    color: #374151 !important;
  }

  /* Bezwzględne wyłączenie pauzowania przy najechaniu/dotknięciu na mobile */
  .target-audience .carousel-track-wrapper:hover .carousel-track,
  .target-audience .carousel-track:hover,
  .target-audience .carousel-track:active {
    animation-play-state: running !important;
  }


  /* --- WYSUWANE MENU (MOBILE) --- */
  .topnav {
    position: fixed !important; /* FIXED zapobiega przewijaniu się menu razem ze stroną */
    top: 70px !important;       /* Wysokość Twojego topbara - zjedzie idealnie pod niego */
    left: -100% !important;     /* Schowane poza ekranem */
    width: 100% !important;
    height: calc(100dvh - 70px) !important; /* Rozciąga się idealnie do samego dołu ekranu */
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 3rem 0 !important;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Super płynna animacja wysuwania */
    z-index: 99 !important;
    overflow-y: auto !important; /* Jeśli dodasz dużo linków, menu będzie można przewijać */
  }

  .topnav.active {
    left: 0 !important;
  }

  /* Kiedy menu jest otwarte, blokujemy przewijanie reszty strony pod spodem */
  body.menu-open {
    overflow: hidden !important;
  }

  /* --- POPRAWKA GRADIENTU I UCINANIA TEKSTU (MOBILE) --- */
  .gradient-text {
    display: inline-block !important; /* Wymusza poprawne pudełko wokół <span> */
    padding-top: 0.15em !important;   /* Oddech dla górnych krawędzi liter (np. D, l) */
    padding-bottom: 0.15em !important;/* Oddech dla dolnych krawędzi liter (np. g) */
    line-height: 1.2 !important;
    
    /* Wypychamy fiolet na 130%, żeby nie zdominował krótkiego wyrazu */
    background: linear-gradient(90deg, #7391F3 0%, #CF99F6 130%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  /* Zmniejszenie czcionki nagłówka na telefonach */
  .waitlist-hero .hero-copy h1 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  .waitlist-hero {
    padding-top: 1rem !important; 
  }

  .waitlist-hero .hero-copy {
    margin-top: -1.5rem !important; 
  }

  .waitlist-hero .chip {
    margin-bottom: 0.5rem !important;
  }

  .hero-waitlist-title {
    margin-bottom: 0.8rem !important; 
  }

  /* ============================================================ */
  /* WYGLĄD FORMULARZA WAITLIST (MOBILE)                          */
  /* ============================================================ */

  .waitlist-form-container {
    align-items: center; 
    text-align: center;
  }

  .waitlist-form {
    flex-direction: column; 
    max-width: 100%;
  }

  .waitlist-submit {
    width: 100%; 
    padding: 1rem 0;
    margin-top: 0.3rem;
  }

  .waitlist-top-copy {
    font-size: 0.95rem;
  }

  /* ============================================================ */
  /* DOCIEŚNIENIE FORMULARZA WAITLIST W PIONIE (MOBILE)           */
  /* ============================================================ */

  .waitlist-form-container {
    margin-top: 0.5rem !important; /* Ścina dużą przerwę nad formularzem */
  }

  .waitlist-top-copy {
    margin-bottom: 0.5rem !important; /* Dociska tekst do pola e-mail */
    font-size: 0.9rem !important; /* Minimalnie mniejszy tekst, zyskujemy kolejne piksele */
    line-height: 1.3 !important;
  }

  /* ============================================================ */
  /* DOCIEŚNIENIE PUNKTÓW W HERO (TYLKO WAITLIST - MOBILE)        */
  /* ============================================================ */

  /* 1. Zmniejsza odstęp pod całą listą punktów */
  .waitlist-hero .hero-copy ul {
    margin-bottom: 0.5rem !important; 
  }

  /* 2. Zmniejsza odstępy między poszczególnymi punktami */
  .waitlist-hero .hero-copy li {
    margin-bottom: 0.1rem !important; /* Domyślnie jest tu pewnie ok. 1rem */
    line-height: 1.2 !important; /* Delikatnie ciaśniejszy tekst wewnątrz punktu */
  }

  /* ============================================================ */
  /* WYMUSZENIE ŁAMANIA LINII W NAGŁÓWKU WAITLIST (MOBILE)        */
  /* ============================================================ */

  .waitlist-hero .hero-copy h1 br {
    display: block !important; 
    content: "" !important; /* Dla pewności w niektórych przeglądarkach */
  }

  /* ============================================================ */
  /* DOPASOWANIE TŁA DO WIDOKU EKRANU (Z UŻYCIEM ZMIENNEJ)        */
  /* ============================================================ */

  .waitlist-hero {
    /* Odejmujemy dynamiczną zmienną, która zaraz zmierzy menu */
    min-height: calc(100svh - var(--nav-height, 80px)) !important; 
    padding-bottom: 1rem !important; 
    box-sizing: border-box !important; 
    background-size: cover !important;
    background-position: center bottom !important;
  }

  /* Poprawka struktury pionowej na mobile */
  .waitlist-left-flex {
    height: auto !important;
  }

  /* ============================================================ */
  /* CENTROWANIE PRZYKLEJONEGO ZDJĘCIA NA TELEFONACH              */
  /* ============================================================ */

  .waitlist-image-wrapper {
    justify-content: center !important; /* Wymusza wyśrodkowanie na mobile */
  }

  /* ============================================================ */
  /* ZMNIEJSZENIE ODSTĘPU NAD KARUZELĄ (TYLKO MOBILE)             */
  /* ============================================================ */

  #dlaczego-warto .benefits-content {
    margin-bottom: 0 !important; /* Kasuje ukryty margines kontenera na telefonie */
  }
  
  #dlaczego-warto .section-text {
    margin-bottom: 1rem !important; /* Drastycznie ścina globalny wielki margines dolny z samego tekstu */
  }

}

/* ============================================================ */
/* POPRAWKI MOBILNE DLA WIDOKU SUKCESU W HERO                   */
/* ============================================================ */

@media (max-width: 768px) {
  /* 1. Upewniamy się, że cały blok na mobile jest wycentrowany */
  .hero .success-message,
  .hero-content .success-message {
    align-items: center !important;
    text-align: center !important;
  }

  /* 2. Znacznie powiększamy sam nagłówek (Dziękujemy. Jesteś na liście...) */
  .hero .success-message h1,
  .hero-content .success-message h1,
  .hero .success-message .success-heading {
    font-size: 2.4rem !important; /* Tutaj możesz manipulować wielkością, jeśli nadal będzie za mały (np. 2.6rem) */
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
}

/* ============================================================ */
/* WYRÓWNANIE SZEROKOŚCI FORMULARZA W BANERZE NA MOBILE         */
/* ============================================================ */

@media (max-width: 768px) {
  /* Zmuszamy input i przycisk, żeby miały dokładnie taką samą szerokość (100% kontenera) */
  .final-cta form input[type="email"],
  .final-cta form input[type="text"],
  .final-cta form button,
  .final-cta form .btn {
    width: 100% !important;
    box-sizing: border-box !important; /* Gwarantuje, że paddingi nie zepsują szerokości */
  }
}