/* ============================================================
   PaczkaZabaw — Strona główna: wersja MOBILNA (napisana od nowa)
   ------------------------------------------------------------
   Ten plik jest ładowany TYLKO na index.html i działa wyłącznie
   na ekranach <= 760px. Wersja desktopowa pozostaje bez zmian.
   Wszystko poniżej to świadomy redesign pod telefon: większy
   oddech, karuzele do przesuwania kciukiem, oś czasu kroków,
   czytelniejszy cennik i mocniejsze CTA pod konwersję.
   ============================================================ */

@media (max-width: 760px) {

  /* ---------- Globalny rytm / typografia ---------- */
  .section { padding-block: 44px; }
  .section--tight { padding-block: 34px; }
  .section__head { margin-bottom: 24px; max-width: none; }
  .section__title { font-size: clamp(26px, 7.5vw, 32px); line-height: 1.12; }
  .section__sub { font-size: 15.5px; }
  .eyebrow { font-size: 11px; }

  /* ============================================================
     HERO — czysty, wyśrodkowany, jeden mocny przycisk
     ============================================================ */
  .hero { padding: 14px 0 30px; }
  .hero__inner { gap: 20px; }

  /* Zdjęcie na górze, w lekkiej ramce „naklejki" */
  .hero__art { order: -1; min-height: 0; margin-top: 4px; }
  .hero__blob {
    width: 84%; filter: blur(10px); opacity: .65;
    border-radius: 48% 52% 55% 45% / 50% 46% 54% 50%;
  }
  .hero__photo {
    max-width: 100%; aspect-ratio: 5 / 4; border-width: 5px;
    border-radius: 26px; box-shadow: var(--shadow-lg);
  }
  .hero__chip { font-size: 12.5px; padding: 8px 12px; box-shadow: var(--shadow-md); }
  .hero__chip svg { width: 16px; height: 16px; }
  .hero__chip--1 { top: 4px; left: 6px; }
  .hero__chip--2 { bottom: 10px; right: 6px; }

  /* Treść hero — wyśrodkowana, zwarta */
  .hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero__title { font-size: clamp(30px, 9.2vw, 42px); line-height: 1.04; margin: 12px 0 10px; }
  .hero__lead { font-size: 16px; line-height: 1.5; max-width: 34ch; margin-inline: auto; }
  .hero__cta { flex-direction: column; width: 100%; gap: 10px; margin: 22px 0 18px; }
  .hero__cta .btn { width: 100%; }
  .hero__trust { justify-content: center; gap: 10px; font-size: 14px; }

  /* ============================================================
     PASEK ZAUFANIA — 2×2 mini-karty z ikonami
     ============================================================ */
  .trustbar { background: var(--white); }
  .trustbar__inner {
    grid-template-columns: 1fr 1fr; gap: 10px;
    padding-block: 18px;
  }
  .trustbar__item {
    justify-content: flex-start; gap: 9px; text-align: left;
   
    
    
  }
  .trustbar__item svg { width: 20px; height: 20px; }

  /* ============================================================
     JAK TO DZIAŁA — oś z kroków (ikona po lewej, treść po prawej)
     ============================================================ */
  .steps { display: flex; flex-direction: column; gap: 14px; }
  .step {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas: "icon title" "icon desc";
    column-gap: 16px; row-gap: 3px;
    text-align: left; padding: 20px 18px; align-items: start;
    border-radius: var(--radius-lg);
  }
  .steps .step:nth-child(1) { border-left: 4px solid var(--brand-primary); }
  .steps .step:nth-child(2) { border-left: 4px solid var(--brand-secondary); }
  .steps .step:nth-child(3) { border-left: 4px solid var(--brand-primary); }
  .step__num { display: none; }                 /* znak wodny nie jest potrzebny na mobile */
  .step__icon { grid-area: icon; margin: 0; width: 60px; height: 60px; align-self: start; }
  .step__icon svg { width: 30px; height: 30px; }
  .step__title { grid-area: title; margin-bottom: 2px; }
  .step__desc { grid-area: desc; line-height: 1.45; font-size: 15px; }

  /* ============================================================
     CO ZNAJDZIESZ W PACZCE — karuzela przesuwana kciukiem
     ============================================================ */
  .grid--4 {
    display: flex; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad));
    padding: 4px var(--container-pad) 14px;
  }
  .grid--4::-webkit-scrollbar { display: none; }
  .grid--4 > .product {
    flex: 0 0 47%; scroll-snap-align: start;
  }
  .product__media { padding: 16px; }
  .product__name { font-size: 15px; }

  /* ============================================================
     PAKIETY — czytelne karty jedna pod drugą, mocny plan polecany
     ============================================================ */
  .plans { display: flex; flex-direction: column; gap: 16px; }
  .plan { padding: 26px 22px; border-radius: var(--radius-xl); }
  .plan--featured {
                                      /* polecany plan na górze = lepsza konwersja */
    background: linear-gradient(180deg, var(--pink-50), var(--white) 140px);
    border-width: 2.5px;
  }
  .plan__price { margin: 12px 0 2px; }
  .plan__amt { font-size: 44px; }
  .plan .btn--block { margin-top: 6px; padding-block: 16px; }

  /* ============================================================
     DLACZEGO MY — obraz + tekst, zwarte
     ============================================================ */
  .feature { gap: 18px; }
  .feature + .feature { margin-top: 34px; }
  .feature__media img {
    border-width: 4px; border-radius: var(--radius-xl);
    aspect-ratio: 5 / 4; max-height: 340px;
  }
  .feature__copy h3 { font-size: 24px; }
  .feature__list { gap: 10px; }
  .feature__list li { font-size: 15px; }

  /* ---------- Statystyki — 2×2 kolorowe kafelki ---------- */
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stats > div {
    
    padding: 20px 12px;
  }
  .stat__num { font-size: 30px; }
  .stat__label { font-size: 13px; margin-top: 6px; }

  /* OPINIE — karuzela opinii i strzałki są teraz w styles.css (współdzielone
     przez wszystkie strony z sekcją opinii). Tu zostają tylko rzeczy wspólne. */

  /* ============================================================
     PREZENT / NEWSLETTER — zwarta karta, formularz w kolumnie
     ============================================================ */
  .gift { padding: 26px 20px; gap: 22px; border-radius: var(--radius-xl); }
  .gift__copy h2 { font-size: 26px; }
  .gift__copy p { font-size: 16px !important; }
  .gift__form { flex-direction: column; gap: 12px; }
  .gift__form .btn { width: 100%; }
  .gift__media img { max-width: 100%; }

  /* ============================================================
     FAQ — przyjaźniejsze dla kciuka
     ============================================================ */
  .faq__q { font-size: 16px; padding: 16px 18px; gap: 12px; }
  .faq__q .ico { width: 24px; height: 24px; }
  .faq__a { padding: 0 18px 18px; font-size: 15px; }

  /* ============================================================
     PASEK CTA (sekcja) — wyśrodkowany, przycisk pełnej szerokości
     ============================================================ */
  .ctaband__inner { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; }
  .ctaband__title { font-size: 26px; }
  .ctaband__sub { font-size: 16px; margin-inline: auto; }
  .ctaband__inner .btn { width: 100%; }

  /* Podpowiedź: karuzele można przesuwać palcem (delikatny gradient krawędzi) */
  .grid--4 { position: relative; }

  .hero__photo{
    display: none;
  }
  .hero__blob{
    display: none;
  }
  .hero__chip--1{
    display: none;
  }
  .hero__chip--2{
    display: none;
  }


}


/* Bardzo małe telefony — domknięcie typografii */
@media (max-width: 360px) {
  .hero__title { font-size: 28px; }
  .section__title { font-size: 25px; }
  .plan__amt { font-size: 40px; }
  .grid--4 > .product { flex-basis: 56%; }
  .trustbar__item { font-size: 12px; }
}