/* ============================================================
   NEWSLETTER RADOSŁAW WASIK – styles.css

   Spis treści:
     1.  Zmienne CSS (kolory, typografia, odstępy)
     2.  Reset i style bazowe
     3.  Typografia
     4.  Komponenty wspólne (kontener, nagłówki sekcji, przyciski, ikona check)
     5.  Header
     6.  Sekcja Hero
     7.  Sekcja Korzyści
     8.  Sekcja Bonusów
     9.  Sekcja Dla kogo
     10. Sekcja Jak wygląda wysyłka
     11. Sekcja FAQ
     12. Sekcja Końcowego CTA
     13. Footer
     14. Media queries – responsywność
============================================================ */


/* ============================================================
   1. ZMIENNE CSS
============================================================ */
:root {
    /* --- Kolory --- */
    --color-bg:           #FAF7F0;     /* ciepłe tło strony            */
    --color-surface:      #ffffff;     /* białe tło kart               */
    --color-surface-alt:  #F0EAD6;     /* jaśniejsze tło sekcji alt    */
    --color-text:         #1a1510;     /* główny kolor tekstu          */
    --color-text-muted:   #6a5f4f;     /* wyciszony tekst / opisy      */
    --color-accent:       #D4A43E;     /* ciepły akcent (złoty)        */
    --color-accent-hover: #B88F2E;     /* ciemniejszy akcent na hover  */
    --color-border:       #E3D9C0;     /* obramowania / separatory     */
    --color-cta-bg:       #1E293B;     /* tło głównego przycisku CTA   */
    --color-cta-hover:    #0F172A;     /* hover głównego przycisku     */

    /* --- Typografia --- */
    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;

    --fs-xs:   0.8125rem;   /*  13px */
    --fs-sm:   0.875rem;    /*  14px */
    --fs-base: 1rem;        /*  16px */
    --fs-md:   1.125rem;    /*  18px */
    --fs-lg:   1.25rem;     /*  20px */
    --fs-xl:   1.5rem;      /*  24px */
    --fs-2xl:  2rem;        /*  32px */
    --fs-3xl:  2.5rem;      /*  40px */
    --fs-4xl:  3rem;        /*  48px */

    /* --- Odstępy --- */
    --sp-xs:   0.5rem;     /*  8px  */
    --sp-sm:   0.75rem;    /* 12px  */
    --sp-md:   1rem;       /* 16px  */
    --sp-lg:   1.5rem;     /* 24px  */
    --sp-xl:   2rem;       /* 32px  */
    --sp-2xl:  3rem;       /* 48px  */
    --sp-3xl:  4rem;       /* 64px  */
    --sp-4xl:  4rem;       /* 64px  */
    --sp-5xl:  4.5rem;     /* 72px  */

    /* --- Zaokrąglenia --- */
    --r-sm:   6px;
    --r-md:   12px;
    --r-lg:   18px;
    --r-xl:   24px;
    --r-full: 9999px;

    /* --- Cienie --- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);

    /* --- Inne --- */
    --transition:      0.2s ease;
    --container-max:   1100px;
    --container-pad:   1.5rem;
}


/* ============================================================
   2. RESET I STYLE BAZOWE
============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Dostępność – widoczny focus dla elementów interaktywnych */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}


/* ============================================================
   3. TYPOGRAFIA
============================================================ */
h1, h2, h3 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-text);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p {
    color: var(--color-text-muted);
    line-height: 1.75;
}


/* ============================================================
   4. KOMPONENTY WSPÓLNE
============================================================ */

/* --- Kontener --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* --- Sekcje – containment dla ograniczenia obszaru repaint --- */
.benefits,
.bonuses,
.for-whom,
.how-it-works,
.mail-samples,
.faq,
.about-author {
    contain: content;
}

/* --- Nagłówek sekcji --- */
.section-header {
    text-align: center;
    margin-bottom: var(--sp-3xl);
}

.section-header h2 {
    margin-bottom: var(--sp-sm);
}

.section-header p {
    font-size: var(--fs-md);
    white-space: nowrap;
    margin: 0 auto;
}

/* --- Przyciski --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-base);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--r-md);
    transition:
        background-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

/* Główny przycisk – ciemne tło */
.btn-primary {
    background: linear-gradient(135deg, #1E293B 0%, #334155 50%, #0F172A 100%);
    background-size: 100% 200%;
    background-position: top;
    color: #fff;
    padding: var(--sp-sm) var(--sp-xl);
    font-size: var(--fs-base);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.4);
    background-position: bottom;
}

.btn-primary:active {
    transform: scale(0.98);
}

/* Wariant duży – do hero */
.btn-large {
    padding: var(--sp-md) var(--sp-2xl);
    font-size: var(--fs-md);
    border-radius: var(--r-lg);
}

/* Wariant mały – do headera */
.btn-small {
    padding: 0.45rem 1.1rem;
    font-size: var(--fs-sm);
}

/* --- Ikona checkmark (kółko z ✓) --- */
.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* Wariant jasny – na ciemnym tle (sekcja CTA) */
.check-icon--light {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
}


/* ============================================================
   5. HEADER
============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: rgba(250, 247, 240, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-md) 0;
    will-change: transform;
    contain: layout style;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
}

/* --- Nawigacja główna --- */
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-lg);
    justify-content: center;
}

.header-nav a {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
    position: relative;
}

.header-nav a.btn {
    color: #fff;
    position: static;
}

.header-nav a.btn:hover {
    color: #fff;
}

.header-nav a.btn::after {
    display: none;
}

.header-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: var(--r-full);
    transition: width var(--transition);
}

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

.header-nav a:hover::after {
    width: 100%;
}


/* ============================================================
   6. SEKCJA HERO
============================================================ */
.hero {
    padding: var(--sp-5xl) 0 var(--sp-4xl);
    background: linear-gradient(135deg, #FAF7F0 0%, #F0EAD6 50%, #E3D9C0 100%);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--sp-2xl);
    align-items: center;
}

/* Mała etykieta nad nagłówkiem */
.hero-label {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--sp-lg);
}

.hero-title {
    margin-bottom: var(--sp-lg);
    letter-spacing: -0.02em;
}

.hero-lead {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-xl);
    max-width: 580px;
}

/* Mini-lista benefitów */
.hero-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    text-align: left;
    margin: 0 0 var(--sp-2xl);
}

.hero-benefits li {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-text);
}

/* Przycisk + drobna notka */
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-sm);
}

.hero-cta-note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.hero-social-proof {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-accent-hover);
    margin: 0;
}

/* --- Zdjęcie autora w sekcji hero --- */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.author-photo {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: var(--r-lg);
    border: 3px solid var(--color-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
}

.author-photo:hover {
    transform: scale(1.03);
}


/* ============================================================
   7. SEKCJA KORZYŚCI
============================================================ */
.benefits {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-bg);
}

/* Siatka 2×2 kart */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-xl);
}

.benefit-card {
    background-color: var(--color-surface);
    border-radius: var(--r-lg);
    padding: var(--sp-2xl);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition);
}

.benefit-card:hover {
    transform: translateY(-3px);
}

/* Ikona w kółku */
.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-lg);
    color: var(--color-accent);   /* SVG stroke dziedziczy kolor */
    flex-shrink: 0;
}

.benefit-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-sm);
}


/* ============================================================
   8. SEKCJA BONUSÓW
============================================================ */
.bonuses {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-surface-alt);
}

/* Nadpisanie tła sekcji dla naprzemienności – kolejność:
   hero(gradient) → benefits(bg) → bonuses(surface-alt)
   → for-whom(bg) → how-it-works(surface-alt)
   → faq(bg) → cta(dark) */

.bonuses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-xl);
}

.bonus-card {
    background-color: var(--color-surface);
    border-radius: var(--r-xl);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition);
}

.bonus-card:hover {
    transform: translateY(-4px);
}

/* Okładka – mała, pozycjonowana absolutnie w prawym górnym rogu */
/* Padding karty bonusu */
.bonus-content {
    padding: var(--sp-2xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Etykieta „E-book #1" */
.bonus-badge {
    display: inline-block;
    background-color: var(--color-accent);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: var(--r-full);
    margin-bottom: var(--sp-md);
    align-self: flex-start;
}

.bonus-card h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-sm);
}

.bonus-desc {
    font-size: var(--fs-base);
    margin-bottom: var(--sp-lg);
}

/* Lista korzyści z ikoną → */
.bonus-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    margin-top: auto;
}

.bonus-list li {
    display: flex;
    gap: var(--sp-sm);
    font-size: var(--fs-base);
    color: var(--color-text);
    align-items: flex-start;
}

.bonus-list li::before {
    content: '→';
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ============================================================
   9. SEKCJA DLA KOGO
============================================================ */
.for-whom {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-bg);
}

.for-whom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-xl);
}

.for-whom-card {
    background-color: var(--color-surface);
    border-radius: var(--r-lg);
    padding: var(--sp-2xl);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
}

/* Nagłówek karty z linią akcentu pod spodem */
.for-whom-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-lg);
    padding-bottom: var(--sp-md);
    border-bottom: 2px solid var(--color-accent);
}

/* Lista z miniaturową ikoną ✓ */
.check-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    font-size: var(--fs-base);
    color: var(--color-text);
}

/* Kółko z ikoną checkmark generowane przez CSS */
.check-list li::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-color: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    margin-top: 3px;
    line-height: 1;
}


/* ============================================================
   10. SEKCJA JAK WYGLĄDA WYSYŁKA (3 kroki)
============================================================ */
.how-it-works {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-bg);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xl);
    position: relative;
}

/* Dekoracyjna linia łącząca numery kroków (tylko na desktopie) */
.steps-grid::before {
    content: '';
    position: absolute;
    top: 28px;            /* wyśrodkowane z numerami kroków   */
    left: calc(16.67% + 28px);   /* startuje za pierwszym numerem    */
    right: calc(16.67% + 28px);  /* kończy przed ostatnim numerem    */
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-accent) 0%,
        var(--color-border) 100%);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.step-card {
    text-align: center;
    padding: var(--sp-2xl) var(--sp-xl);
    background-color: var(--color-surface);
    border-radius: var(--r-lg);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1;
}

/* Numerowany okrąg */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--color-cta-bg);
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: 700;
    border-radius: 50%;
    margin: 0 auto var(--sp-lg);
    position: relative;
    z-index: 1;
}

.step-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-sm);
}


/* ============================================================
   11. PRZYKŁADOWE MAILE
============================================================ */
.mail-samples {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-surface-alt);
}

.mail-samples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xl);
    align-items: stretch;
}

.mail-sample-item {
    background-color: var(--color-bg);
    border: 2px solid var(--color-accent);
    border-radius: var(--r-lg);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.mail-sample-item:hover {
    transform: translateY(-4px);
}

/* Pasek tytułowy okna – styl ramki aplikacji */
.mail-sample-item::before {
    content: '● ● ●';
    display: block;
    background-color: var(--color-accent);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

.mail-sample-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   12. SEKCJA FAQ
============================================================ */
.faq {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-bg);
}

.faq-list {
    max-width: 740px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.faq-item {
    background-color: var(--color-surface);
    border-radius: var(--r-md);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color var(--transition);
}

/* Otwarty element – akcent na obramowaniu */
.faq-item[open] {
    border-color: var(--color-accent);
}

/* Usuń domyślną strzałkę przeglądarki */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-xl) var(--sp-2xl);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--transition);
    user-select: none;
}

.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker               { display: none; }

.faq-question:hover {
    background-color: var(--color-bg);
}

/* Ikona +/– zbudowana w CSS */
.faq-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    position: relative;
    transition: background-color var(--transition), border-color var(--transition);
    pointer-events: none;   /* klik obsługuje <summary> */
}

/* Linia pozioma (minus) */
.faq-toggle::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: var(--color-text-muted);
    border-radius: 2px;
    transition: background-color var(--transition);
}

/* Linia pionowa (tworzy +, znika gdy otwarty) */
.faq-toggle::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: var(--color-text-muted);
    border-radius: 2px;
    transition: opacity var(--transition), background-color var(--transition);
}

/* Stan otwarty – ikona zmienia się w minus */
details[open] .faq-toggle {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

details[open] .faq-toggle::before,
details[open] .faq-toggle::after {
    background-color: #fff;
}

details[open] .faq-toggle::after {
    opacity: 0;
}

/* Animacja wysuniecia treści */
.faq-answer {
    padding: 0 var(--sp-2xl) var(--sp-xl);
    animation: faqSlideIn 0.22s ease;
}

.faq-answer p {
    font-size: var(--fs-md);
    line-height: 1.75;
}

@keyframes faqSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   12. SEKCJA KOŃCOWEGO CTA
============================================================ */
.cta-section {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-cta-bg);
    position: relative;
    overflow: hidden;
}

/* Dekoracyjne koło w tle */
.cta-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -60px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background-color: rgba(217, 114, 52, 0.08);
    pointer-events: none;
    z-index: 0;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background-color: rgba(217, 114, 52, 0.05);
    pointer-events: none;
    z-index: 0;
}

.cta-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-section h2 {
    color: #fff;
    font-size: var(--fs-3xl);
    margin-bottom: var(--sp-md);
    letter-spacing: -0.02em;
}

.cta-lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-md);
    margin-bottom: var(--sp-xl);
}

/* Lista wyróżników nad formularzem */
.cta-highlights {
    display: inline-flex;
    flex-direction: column;
    gap: var(--sp-sm);
    text-align: left;
    margin: 0 auto var(--sp-2xl);
}

.cta-highlights li {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--fs-base);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Wrapper na formularz MailerLite */
.form-wrapper {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-xl);
    padding: var(--sp-2xl);
    text-align: left;
}

/* Style dla embedowanego formularza MailerLite */
.ml-embedded {
    width: 100% !important;
}

.ml-form-embedWrapper {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto;
    background-color: transparent !important;
    border: none !important;
}

.ml-form-embedContainer button,
.ml-form-embedContainer input[type="email"] {
    border-radius: var(--r-md) !important;
    height: 50px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    font-size: var(--fs-base) !important;
}

.ml-form-embedBody,
.ml-form-successBody {
    padding: 0 !important;
}

.ml-form-embedContent {
    margin-bottom: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.ml-form-formContent.horozintalForm {
    padding: 0 !important;
    margin: 0 !important;
}


/* ============================================================
   13. SEKCJA O AUTORZE
============================================================ */

.about-author {
    padding: var(--sp-5xl) 0;
    background-color: var(--color-surface-alt);
}

.about-author h2 {
    text-align: center;
    margin-bottom: var(--sp-2xl);
}

.author-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-2xl);
    align-items: start;
}

.author-image-wrapper {
    display: flex;
    justify-content: center;
}

.author-photo-about {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: var(--r-lg);
    border: 3px solid var(--color-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
}

.author-photo-about:hover {
    transform: scale(1.03);
}

.author-lead {
    font-size: var(--fs-md);
    color: var(--color-text);
    margin-bottom: var(--sp-lg);
}

.author-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.author-highlights li {
    padding-left: var(--sp-lg);
    position: relative;
    color: var(--color-text);
    font-size: var(--fs-base);
    line-height: 1.6;
}

.author-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

.author-note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: var(--sp-lg);
}

.author-social {
    display: flex;
    gap: var(--sp-sm);
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 0.5rem 1rem;
    border-radius: var(--r-full);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: transform var(--transition);
}

.social-link:hover {
    transform: translateY(-2px);
}

.social-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.social-link.linkedin .social-icon {
    background-color: #0A66C2;
}

.social-link.instagram .social-icon {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
}

/* ============================================================
   14. FOOTER
============================================================ */
.site-footer {
    padding: var(--sp-xl) 0;
    background-color: var(--color-cta-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.footer-name {
    font-weight: 600;
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.footer-copy {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
}


/* ============================================================
   14. STICKY CTA – dolna belka z przyciskiem
============================================================ */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(250, 247, 240, 0.97);
    border-top: 2px solid var(--color-accent);
    padding: var(--sp-md) 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 200;
    transform: translateY(0);
    transition: transform 0.3s ease;
    will-change: transform;
    contain: layout style;
}

.sticky-cta.hidden {
    transform: translateY(100%);
}

.sticky-cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
    flex-wrap: wrap;
}

.sticky-cta-text {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.sticky-cta-short {
    display: none;
}

/* ============================================================
   15. MEDIA QUERIES – RESPONSYWNOŚĆ
============================================================ */

/* --- Tablet i mniejsze (≤ 900px) --- */
@media (max-width: 900px) {
    :root {
        --fs-4xl: 2.5rem;   /* h1 mniejsze na tabletach */
        --fs-3xl: 2rem;
        --fs-2xl: 1.75rem;
        --sp-5xl: 3.5rem;
    }

    /* Siatki 2-kolumnowe zamieniają się w 1-kolumnowe */
    .benefits-grid,
    .bonuses-grid,
    .for-whom-grid {
        grid-template-columns: 1fr;
    }

    /* Kroki – pionowo zamiast poziomo */
    .steps-grid {
        grid-template-columns: 1fr;
    }

    /* Przykładowe maile – 1 kolumna na tablecie */
    .mail-samples-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }

    /* Ukryj dekoracyjną linię kroków */
    .steps-grid::before {
        display: none;
    }
}

/* --- Mobile (≤ 600px) --- */
@media (max-width: 600px) {
    :root {
        --fs-4xl: 1.875rem;  /* h1 */
        --fs-3xl: 1.625rem;
        --fs-2xl: 1.375rem;
        --fs-xl:  1.125rem;
        --fs-lg:  1rem;
        --sp-5xl: 2.5rem;
        --sp-4xl: 2rem;
        --sp-3xl: 1.75rem;
        --sp-2xl: 1.5rem;
        --container-pad: 1rem;
    }

    .section-header p {
        white-space: normal;
    }

    .hero {
        padding: var(--sp-3xl) 0 var(--sp-2xl);
    }

    /* Hero – jedna kolumna na mobile, tekst wyśrodkowany */
    .hero-content {
        grid-template-columns: 1fr;
    }

    .hero-image {
        order: 1;   /* zdjęcie pod tekstem na mobile */
    }

    .hero-text {
        text-align: center;
        order: 0;   /* tekst na górze na mobile */
    }

    .hero-benefits {
        margin: 0 auto var(--sp-2xl);
    }

    .hero-cta {
        align-items: center;
    }

    /* Header – ukryty na mobile */
    .site-header {
        display: none;
    }

    /* Nawigacja – ukryta na mobile, widoczna od 768px */
    .header-nav {
        display: none;
    }

    /* Karty – mniejszy padding na mobile */
    .benefit-card,
    .bonus-card,
    .for-whom-card,
    .step-card {
        padding: var(--sp-xl);
    }

    /* Treść e-booków – wyrównanie do lewej na mobile */
    .bonus-content {
        text-align: left;
        align-items: flex-start;
    }

    .bonus-list li {
        text-align: left;
    }

    /* Wrapper formularza */
    .form-wrapper {
        padding: var(--sp-xl);
    }

    /* Footer wyśrodkowany na mobile */
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    /* Autor – jedna kolumna na mobile */
    .author-content {
        grid-template-columns: 1fr;
    }

    .author-photo-about {
        max-width: 200px;
    }

    .author-photo {
        max-width: 200px;
    }

    /* Sticky CTA – krótki tekst na mobile, jedna linia */
    .sticky-cta {
        padding: var(--sp-sm) 0;
    }

    .sticky-cta-content {
        flex-wrap: nowrap;
        gap: var(--sp-md);
        justify-content: space-between;
    }

    .sticky-cta-text {
        font-size: var(--fs-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sticky-cta-content .btn {
        font-size: var(--fs-xs);
        padding: var(--sp-sm) var(--sp-md);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .sticky-cta-full {
        display: none;
    }

    .sticky-cta-short {
        display: inline;
    }
}

/* --- Bardzo małe ekrany (≤ 380px) --- */
@media (max-width: 380px) {
    :root {
        --fs-4xl: 1.625rem;
    }

    .btn-large {
        padding: var(--sp-md) var(--sp-xl);
        font-size: var(--fs-base);
    }
}