/* =========================================
   1. ZMIENNE I RESET
   ========================================= */
:root {
    /* Paleta kolorów "Nude/Wellness" */
    --bg-color: #F9F7F2;       /* Bardzo jasny beż (tło główne) */
    --section-alt: #EFEBE4;    /* Ciemniejszy beż (sekcje alternatywne) */
    --white: #FFFFFF;
    --text-main: #2C2A29;      /* Ciemny grafit/brąz (główny tekst) */
    --text-muted: #5D5654;     /* Jaśniejszy tekst */
    --accent: #C87A56;         /* Terakota (Główne CTA) */
    --accent-hover: #A66343;   /* Ciemniejsza terakota */
    --gold: #D4AF37;           /* Delikatne akcenty */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 18px;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    color: var(--text-main);
    margin-bottom: 1rem;
    line-height: 1.3;
}

strong { font-weight: 700; }
p { margin-bottom: 1.5rem; }
img { max-width: 100%; height: auto; border-radius: 8px; }

/* =========================================
   2. UI KOMPONENTY (Buttons, Cards, Lists)
   ========================================= */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 40px 0;
}

/* --- BUTTON CTA (Nowoczesny z animacją) --- */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--accent);
    color: var(--white);
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(200, 122, 86, 0.3);
    border: none;
    cursor: pointer;
    text-align: center;
}

.btn-cta:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(200, 122, 86, 0.5);
}

.btn-cta i { transition: transform 0.3s ease; }
.btn-cta:hover i { transform: translateX(5px); }

.btn-full-width { width: 100%; }

/* Animacja pulsowania (dla Hero) */
@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(200, 122, 86, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(200, 122, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 122, 86, 0); }
}
.btn-pulse { animation: pulse-shadow 2s infinite; }

/* --- KARTY --- */
.card {
    background: var(--white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

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

/* --- LISTY --- */
.check-list, .cross-list { list-style: none; }
.check-list li, .cross-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
}
.check-list li::before {
    content: '\f00c'; /* FontAwesome check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0; top: 2px;
    color: var(--accent);
}
.cross-list li::before {
    content: '\f00d'; /* FontAwesome X */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0; top: 2px;
    color: #d9534f;
}

/* =========================================
   3. SEKCJA HERO (NOWA - MODERN 2026)
   ========================================= */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('magical-moment-releasing-balloons-into-sky.jpg') no-repeat center center/cover;
    overflow: hidden;
    padding: 120px 0 80px;
}

.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(249, 247, 242, 0.95) 0%, rgba(249, 247, 242, 0.7) 100%);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Typografia Hero */
.hero-section h1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.h1-hook {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--text-main);
    display: block;
}

.h1-tension {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--text-muted);
    display: block;
    margin-top: 5px;
    font-style: italic;
}

.h1-solution {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    color: var(--accent);
    display: block;
    margin-top: 10px;
}

.hero-subhead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--text-main);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Action Box (Glassmorphism) */
.hero-action-box {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(200, 122, 86, 0.1);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
    max-width: 700px;
}

.hero-description {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    text-align: left;
    font-size: 1rem;
    color: var(--text-muted);
}

.hero-description .icon-accent {
    color: var(--accent);
    font-size: 1.5rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.cta-subtext {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* =========================================
   4. POZOSTAŁE SEKCJE
   ========================================= */

/* Intro */
.section-intro {
    background-color: var(--white);
    text-align: center;
}

.highlight-box {
    background-color: var(--section-alt);
    padding: 30px;
    border-left: 4px solid var(--accent);
    margin: 30px 0;
    text-align: left;
}

/* Problem */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.problem-item h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--accent);
}

/* Consequences (Dark) */
.consequences {
    background-color: #2C2A29;
    color: #F9F7F2;
}
.consequences h2, .consequences h3 { color: #F9F7F2; }
.consequences .text-highlight { color: var(--accent); font-weight: bold; }

/* Solution */
.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.product-areas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
}
.area-box {
    background: var(--section-alt);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}
.area-box i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 10px;
}

/* Pricing */
.pricing-section {
    background-color: var(--white);
    text-align: center;
}
.price-box {
    border: 2px solid var(--accent);
    padding: 50px;
    max-width: 600px;
    margin: 40px auto;
    border-radius: 20px;
    background-color: #fffaf7;
}
.price-old {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 1.5rem;
}
.price-new {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent);
    font-family: 'Playfair Display', serif;
}

/* Who is it for */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.for-you { background-color: #e8f5e9; padding: 50px; }
.not-for-you { background-color: #ffebee; padding: 50px; }
.for-you h3 { color: #2e7d32; }
.not-for-you h3 { color: #c62828; }

/* FAQ Accordion */
.accordion { margin-top: 30px; }
.accordion-item { border-bottom: 1px solid #ddd; }
.accordion-header {
    width: 100%;
    text-align: left;
    padding: 20px;
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Playfair Display', serif;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 20px;
}
.accordion-content p { margin-bottom: 20px; }
.accordion-header i { transition: transform 0.3s; }
.accordion-header.active i { transform: rotate(180deg); }

/* Bio */
.bio-section { background-color: var(--section-alt); }
.bio-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
}
.bio-img { flex: 0 0 300px; }
.bio-img img { border-radius: 50%; border: 5px solid var(--white); }

/* Footer */
footer {
    background-color: #2C2A29;
    color: #aaa;
    text-align: center;
    padding: 40px 0;
    font-size: 0.9rem;
}

/* =========================================
   5. MEDIA QUERIES (RWD)
   ========================================= */
@media (max-width: 768px) {
    /* Hero Adjustments */
    .hero-section {
        padding: 100px 20px 60px;
        min-height: auto;
    }
    .hero-action-box { padding: 20px; }
    .hero-description {
        font-size: 0.95rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero-description .icon-accent { margin-bottom: 5px; }

    /* General Layout Adjustments */
    .solution-grid, 
    .comparison-grid, 
    .bio-wrapper { 
        grid-template-columns: 1fr; 
        display: block; 
    }
    
    .comparison-grid { display: block; }
    .for-you, .not-for-you { padding: 30px; }
    
    .bio-img { 
        margin: 0 auto 30px; 
        text-align: center; 
    }
    .bio-wrapper { text-align: center; }
    
    .product-areas { grid-template-columns: 1fr; }
    
    .btn-cta { 
        width: 100%; 
        padding: 15px 20px; 
    }
}

/* =========================================
   SEKCJA INTRO (MODERN CARDS)
   ========================================= */

.section-intro {
    background-color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Ozdobny element w tle (opcjonalnie) */
.section-intro::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(200, 122, 86, 0.05) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
}

.intro-heading {
    text-align: center;
    font-size: 2.2rem;
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 1;
}

.text-accent {
    color: var(--accent);
    font-style: italic;
    position: relative;
    display: inline-block;
}

/* Podkreślenie pod słowem ZOBACZYSZ */
.text-accent::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(200, 122, 86, 0.2);
    z-index: -1;
    transform: skewX(-20deg);
}

/* --- GRID KORZYŚCI --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 równe kolumny */
    gap: 30px;
    position: relative;
    z-index: 1;
}

/* --- KARTA --- */
.benefit-card {
    background: var(--bg-color); /* Delikatne tło (beż) na białej sekcji */
    padding: 40px 30px;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.benefit-card:hover {
    transform: translateY(-10px);
    background: var(--white);
    border-color: rgba(200, 122, 86, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* --- IKONA W KARCIE --- */
.card-icon {
    width: 60px;
    height: 60px;
    background-color: var(--section-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent);
    transition: all 0.3s ease;
}

.benefit-card:hover .card-icon {
    background-color: var(--accent);
    color: var(--white);
    transform: rotate(10deg);
}

/* --- TREŚĆ KARTY --- */
.card-content p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.7;
}

.card-content strong {
    color: var(--text-main);
    display: block; /* Sprawia, że pogrubiony początek działa jak nagłówek */
 
}

/* --- RWD (Tablet i Mobile) --- */
@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny na tabletach */
    }
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* 1 kolumna na telefonach */
        gap: 20px;
    }
    
    .intro-heading {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }
    
    .benefit-card {
        padding: 30px 20px;
    }
}

/* =========================================
   SEKCJA PROBLEM (CARDS WITH DEPTH)
   ========================================= */

.problem-section {
    background-color: var(--section-alt); /* Ciemniejszy beż jako tło sekcji */
}

.section-heading-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 2.2rem;
}

/* --- GRID --- */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* Responsywna siatka */
    gap: 30px;
    margin-bottom: 50px;
}

/* --- KARTA PROBLEMU --- */
.problem-card {
    background-color: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* Bardzo delikatny cień początkowy */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 1px solid rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    height: 100%; /* Karty równej wysokości */
}

/* Efekt Hover - Karta "wstaje" */
.problem-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(200, 122, 86, 0.15); /* Cień nabiera koloru marki (terakota) */
    border-color: rgba(200, 122, 86, 0.3);
}

/* --- IKONA W BAŃCE --- */
.icon-bubble {
    width: 70px;
    height: 70px;
    background-color: #FDF6F3; /* Bardzo jasna wersja akcentu */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: var(--accent);
    transition: transform 0.4s ease;
}

.problem-card:hover .icon-bubble {
    transform: scale(1.1) rotate(-5deg); /* Ikona lekko "żyje" przy najechaniu */
    background-color: var(--accent);
    color: var(--white);
}

/* --- TYPOGRAFIA KARTY --- */
.problem-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 15px;
    line-height: 1.3;
    color: var(--text-main);
}

.problem-card p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- WRAPPER DLA CTA --- */
.cta-center-wrapper {
    text-align: center;
    margin-top: 20px;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
    .section-heading-center {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    
    .problem-card {
        padding: 30px 20px;
    }
    
    .icon-bubble {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* =========================================
   SEKCJA KONSEKWENCJE (DARK MODE)
   ========================================= */

.consequences-section {
    background-color: var(--text-main); /* Ciemny grafit/brąz */
    color: #F9F7F2; /* Jasny tekst */
    position: relative;
    padding-bottom: 100px;
}

/* Opcjonalny gradient dla głębi */
.consequences-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

/* --- NAGŁÓWEK SEKCYJNY --- */
.consequences-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.consequences-header h2 {
    color: var(--white);
    margin-bottom: 20px;
}

.consequences-header .text-lighter {
    color: rgba(255, 255, 255, 0.7); /* Szarawy tekst dla drugiego zdania */
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    display: block;
    margin-top: 10px;
}

.lead-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Alert Bar (Pasek z wyróżnieniem) */
.alert-bar {
    border: 1px solid var(--accent);
    background: rgba(200, 122, 86, 0.1);
    padding: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.alert-bar i {
    color: var(--accent);
    font-size: 1.5rem;
}

.alert-bar .text-highlight {
    color: var(--accent);
    font-weight: 700;
    margin: 0;
}

/* --- GRID OSTRZEGAWCZY (Błędne Koło) --- */
.cycle-container {
    margin-bottom: 60px;
}

.cycle-title {
    text-align: center;
    color: var(--white);
    margin-bottom: 30px;
    font-style: italic;
}

.warning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.warning-card {
    background: rgba(255, 255, 255, 0.05); /* Półprzezroczyste tło */
    padding: 25px;
    border-radius: 8px;
    border-left: 3px solid #555;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.warning-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--accent); /* Zmiana koloru paska przy hover */
}

.card-number {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03); /* Bardzo subtelny numer w tle */
    font-family: 'Playfair Display', serif;
}

.warning-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #ddd;
    position: relative;
    z-index: 2;
}

.warning-card strong {
    color: var(--white);
}

/* --- REALITY CHECK BOX (Dolna część) --- */
.reality-check-box {
    background: var(--bg-color); /* Powrót do jasnego tła wewnątrz ciemnej sekcji */
    color: var(--text-main);
    padding: 50px;
    border-radius: 20px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    text-align: center;
}

.reality-check-box p {
    margin-bottom: 1.5rem;
}

.highlight-paragraph {
    font-size: 1.1rem;
    background-color: rgba(200, 122, 86, 0.1);
    padding: 20px;
    border-radius: 10px;
}

.final-statement {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-top: 30px;
    font-weight: 700;
}

.text-accent {
    color: var(--accent);
}

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
    .consequences-header .text-lighter {
        font-size: 1.2rem;
    }
    
    .alert-bar {
        flex-direction: column;
        text-align: center;
    }
    
    .warning-grid {
        grid-template-columns: 1fr;
    }
    
    .reality-check-box {
        padding: 30px 20px;
    }
    
    .final-statement {
        font-size: 1.2rem;
    }
}

/* =========================================
   SEKCJA ROZWIĄZANIE (SOLUTION)
   ========================================= */

.solution-section {
    background-color: var(--bg-color); /* Jasny beż */
    overflow: hidden; /* Zapobiega wystawaniu elementów dekoracyjnych */
}

.eyebrow-text {
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

.lead-desc {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 30px;
}

/* --- GRID UKŁAD --- */
.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

/* --- LISTA Z IKONAMI --- */
.solution-list {
    list-style: none;
    margin-top: 30px;
}

.solution-list li {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.list-icon-wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* --- WIZUALIZACJA (Lewitujący Mockup) --- */
.solution-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dekoracyjny "Blob" w tle */
.blob-bg {
    position: absolute;
    width: 120%;
    height: 120%;
    background-color: #EFEBE4; /* Nieco ciemniejszy niż tło */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: 0;
    animation: blob-pulse 8s infinite alternate;
}

.floating-mockup {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    transform: perspective(1000px) rotateY(-5deg);
    transition: all 0.5s ease;
    animation: floating 6s ease-in-out infinite;
    max-width: 90%; /* Żeby nie wychodziło poza blob */
}

/* --- INSIGHT CARD (Dolny box) --- */
.insight-card-wrapper {
    position: relative;
    z-index: 2;
}

.insight-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
}

.insight-header {
    background-color: var(--section-alt);
    padding: 30px 40px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.insight-header h3 {
    margin: 0;
    color: var(--accent);
    font-size: 1.5rem;
}

.insight-body {
    padding: 40px;
}

.insight-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.insight-item i {
    font-size: 1.5rem;
    margin-top: 5px;
    flex-shrink: 0;
}

.icon-bad { color: #d9534f; }
.icon-neutral { color: var(--text-muted); }

.divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

.summary-text {
    font-size: 1.1rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px;
}

.cta-center {
    text-align: center;
}

/* --- ANIMACJE --- */
@keyframes floating {
    0% { transform: translateY(0px) perspective(1000px) rotateY(-5deg); }
    50% { transform: translateY(-15px) perspective(1000px) rotateY(-5deg); }
    100% { transform: translateY(0px) perspective(1000px) rotateY(-5deg); }
}

@keyframes blob-pulse {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    100% { border-radius: 60% 40% 30% 70% / 50% 40% 50% 60%; }
}

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .solution-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .solution-visual {
        order: -1; /* Obrazek nad tekstem na mobile? Lub usuń tę linię jeśli wolisz pod */
        margin-bottom: 30px;
    }
    
    .floating-mockup {
        max-width: 80%;
        transform: none; /* Wyłączamy perspektywę na mobile */
        animation: floating 6s ease-in-out infinite; /* Zostawiamy lewitowanie góra/dół */
    }
    
    .insight-body, .insight-header {
        padding: 25px;
    }
    
    .insight-item {
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================
   SEKCJA KORZYŚCI (BENEFITS GRID)
   ========================================= */

.benefits-section {
    background-color: var(--section-alt); /* Ciemniejszy beż */
}

.benefits-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px;
    font-size: 2rem;
}

.benefits-heading .text-accent {
    color: var(--accent);
    font-style: italic;
    font-family: 'Playfair Display', serif;
}

/* --- GRID --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolumny */
    gap: 30px;
}

/* --- KARTA KORZYŚCI --- */
.benefit-card {
    background: var(--white);
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(200, 122, 86, 0.1); /* Cień w kolorze terakoty */
    border-color: rgba(200, 122, 86, 0.2);
}

/* --- IKONY --- */
.benefit-icon {
    width: 60px;
    height: 60px;
    background-color: #FDF6F3;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.benefit-card:hover .benefit-icon {
    background-color: var(--accent);
    color: var(--white);
    transform: rotate(5deg);
}

/* --- TYPOGRAFIA KARTY --- */
.benefit-card h3 {
    font-size: 1.25rem;
    margin-bottom: 5px;
    line-height: 1.4;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.benefit-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

.benefit-card strong {
    color: var(--text-main);
}

/* --- SZEROKA KARTA (OSTATNIA) --- */
.card-wide {
    grid-column: 1 / -1; /* Rozciąga się na całą szerokość */
    background: linear-gradient(135deg, #fff 0%, #fffaf7 100%);
    border: 1px dashed var(--accent); /* Wyróżnienie jako "Bonus/Mapa" */
}

.card-wide .benefit-content-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

.card-wide p {
    font-size: 1.05rem; /* Nieco większy tekst dla podsumowania */
}

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny na tabletach */
    }
    .card-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* 1 kolumna na mobile */
        gap: 20px;
    }
    
    .card-wide {
        grid-column: auto; /* Na mobile zachowuje się jak zwykła karta */
    }
    
    .card-wide .benefit-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .benefits-heading {
        font-size: 1.7rem;
        margin-bottom: 40px;
    }
    
    .benefit-card {
        padding: 25px;
    }
}

/* =========================================
   SEKCJA SZCZEGÓŁY PRODUKTU (DETAILS & PROCESS)
   ========================================= */

.product-details-section {
    background-color: var(--white);
}

.details-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.details-lead {
    font-size: 1.15rem;
    color: var(--text-muted);
}

/* --- 4 OBSZARY (CARDS) --- */
.areas-wrapper {
    margin-bottom: 80px;
    text-align: center;
}

.areas-title {
    margin-bottom: 40px;
    font-size: 1.5rem;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.area-card {
    background: var(--section-alt);
    padding: 30px 20px;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.area-card:hover {
    transform: translateY(-5px);
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: rgba(200, 122, 86, 0.2);
}

.area-icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 15px;
    transition: transform 0.3s;
}

.area-card:hover .area-icon {
    transform: scale(1.1);
}

.area-card h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.area-card p {
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* --- LISTA ZAWARTOŚCI (REPORT BOX) --- */
.content-breakdown {
    max-width: 900px;
    margin: 0 auto 80px;
}

.content-box {
background: var(--white);
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* .content-header-stripe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: var(--accent);
} */

.content-item {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    align-items: flex-start;
}

.content-item p
{
    margin-bottom: 0;
}

.content-item i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 4px;
}

.divider-dashed {
    border-bottom: 2px dashed #eee;
    margin: 40px 0;
}

.results-title {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.results-subtitle {
    color: var(--text-muted);
    margin-bottom: 25px;
}

.results-check-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie kolumny listy */
    gap: 20px 40px;
}

.results-check-list li {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
}

.results-check-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0; top: 3px;
    color: var(--accent);
    background: rgba(200, 122, 86, 0.1);
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- PROCESS TIMELINE (Oś Czasu) --- */
.process-wrapper {
    text-align: center;
    background: var(--bg-color); /* Lekkie wyróżnienie tła dla procesu */
    padding: 60px 20px;
    border-radius: 30px;
}

.timeline-container {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
    position: relative;
}

/* Linia pozioma łącząca kroki */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 25px; /* Połowa wysokości markera */
    left: 40px;
    right: 40px;
    height: 2px;
    background: #ddd;
    z-index: 0;
}

.timeline-step {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0 15px;
}

.step-marker {
    width: 50px;
    height: 50px;
    background: var(--white);
    border: 2px solid var(--accent);
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 auto 20px;
    font-family: 'Playfair Display', serif;
}

.step-content h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.step-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.process-cta {
    margin-top: 40px;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .results-check-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .areas-grid {
        grid-template-columns: 1fr;
    }
    
    /* Timeline pionowy na mobile */
    .timeline-container {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20px;
    }
    
    .timeline-container::before {
        width: 2px;
        height: 100%;
        left: 44px; /* Dopasowanie do środka markera */
        top: 0;
        right: auto;
    }
    
    .timeline-step {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
        text-align: left;
        width: 100%;
    }
    
    .step-marker {
        flex-shrink: 0;
        margin: 0;
    }
    
    .content-box {
        padding: 25px;
    }
}

/* =========================================
   SEKCJA PRICING (MODERN CARD)
   ========================================= */

.pricing-section {
    background-color: #FAF9F6; /* Bardzo jasny szary/beż dla kontrastu */
    overflow: visible; /* Pozwala cieniom wystawać */
}

.pricing-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Lewa strona szersza, prawa węższa (karta) */
    gap: 60px;
    align-items: center;
}

/* --- LEWA KOLUMNA (TEKST) --- */
.pricing-content h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.text-block p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: var(--text-muted);
}

.value-highlight-box {
    background: var(--white);
    border-left: 4px solid var(--accent);
    padding: 25px;
    margin: 30px 0;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.value-highlight-box i {
    color: var(--accent);
    font-size: 1.5rem;
    margin-top: 5px;
}

.value-highlight-box p {
    margin: 0;
    font-size: 1rem;
}

/* --- PRAWA KOLUMNA (KARTA) --- */
.pricing-card-wrapper {
    position: relative;
    z-index: 2;
}

.pricing-card {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Badge "Oferta Specjalna" */
.offer-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 15px;
    border-radius: 0 0 0 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-intro {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

/* Wyświetlanie Ceny */
.price-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    gap: 5px;
}

.price-old {
    text-decoration: line-through;
    color: #aaa;
    font-size: 1.4rem;
    font-weight: 400;
}

.price-new {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent);
    font-family: 'Playfair Display', serif;
    line-height: 1;
}

/* Porównanie (To mniej niż...) */
.price-comparison {
    background-color: #F9F7F2; /* Tło "nude" wewnątrz karty */
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    text-align: left;
}

.comparison-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 15px;
    text-align: center;
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: var(--text-main);
}

.comparison-list li:last-child {
    margin-bottom: 0;
}

.comparison-list i {
    color: var(--accent);
    width: 20px;
    text-align: center;
}

.price-summary {
    margin-bottom: 30px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Bezpieczeństwo */
.secure-badge {
    margin-top: 20px;
    font-size: 0.8rem;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Dekoracja pod kartą (efekt 3D/Stack) */
.card-shadow-decoration {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background: var(--accent);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.1;
    transform: rotate(3deg);
}

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .pricing-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .pricing-content {
        text-align: center;
    }
    
    .value-highlight-box {
        text-align: left;
    }
    
    .card-shadow-decoration {
        display: none; /* Ukrywamy dekorację na mobile dla czystości */
    }
}


/* =========================================
   SEKCJA DLA KOGO (TARGET AUDIENCE)
   ========================================= */

.target-audience-section {
    background-color: var(--white);
}

.comparison-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Pozytywna strona nieco szersza */
    gap: 40px;
    align-items: stretch; /* Równa wysokość kart */
}

/* --- KARTY AUDIENCE --- */
.audience-card {
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0,0,0,0.05);
}

.icon-header {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.audience-card h3 {
    margin: 0;
    font-size: 1.4rem;
}

/* --- STYLE DLA KARTY POZYTYWNEJ (DLA CIEBIE) --- */
.card-positive {
    background-color: #F3F9F4; /* Bardzo jasna zieleń/mięta */
    border: 1px solid rgba(46, 125, 50, 0.1);
}

.card-positive .check-icon {
    background-color: #2e7d32;
    color: #fff;
}

.card-positive h3 {
    color: #1b5e20;
}

/* --- STYLE DLA KARTY NEGATYWNEJ (NIE DLA CIEBIE) --- */
.card-negative {
    background-color: #FAF9F6; /* Szarawy/neutralny */
    border: 1px solid rgba(0,0,0,0.05);
}

.card-negative .cross-icon {
    background-color: #c62828;
    color: #fff;
}

.card-negative h3 {
    color: #b71c1c;
}

/* --- LISTY --- */
.audience-list {
    list-style: none;
}

.audience-list li {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.li-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin-top: 3px;
    color: #fff;
}

/* Ikony w liście pozytywnej */
.list-positive .li-icon {
    background-color: #4caf50;
}

/* Ikony w liście negatywnej */
.list-negative .li-icon {
    background-color: #ef5350;
}

.audience-list strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.05rem;
    color: var(--text-main);
}

.audience-list p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

/* CTA w negatywnej karcie */
.cta-wrapper-negative {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 30px;
}

.mini-cta-text {
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 15px;
    font-style: italic;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .comparison-wrapper {
        grid-template-columns: 1fr; /* Jedna pod drugą na mniejszych ekranach */
    }
    
    .audience-card {
        padding: 30px 20px;
    }
    
    .card-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* =========================================
   SEKCJA FAQ / OBIEKCJE (MODERN ACCORDION)
   ========================================= */

.faq-section {
    background-color: #F9F9F9; /* Bardzo jasne szare tło */
}

.faq-heading {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}

.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Odstęp między kartami */
}

/* --- KARTA FAQ --- */
.faq-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-card.active {
    box-shadow: 0 10px 30px rgba(200, 122, 86, 0.15); /* Cień terakotowy po otwarciu */
    border-color: rgba(200, 122, 86, 0.4);
}

/* --- NAGŁÓWEK (TRIGGER) --- */
.faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s;
}

.faq-trigger:hover {
    background-color: #fcfcfc;
}

.question-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.faq-icon-box {
    width: 40px;
    height: 40px;
    background-color: var(--section-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s;
}

.faq-card.active .faq-icon-box {
    background-color: var(--accent);
    color: var(--white);
}

.question-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
}

.chevron {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.faq-card.active .chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

/* --- TREŚĆ ODPOWIEDZI --- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
    background-color: var(--white);
}

.answer-content {
    padding: 0 25px 30px 85px; /* Padding-left dopasowany do wcięcia tekstu (żeby był pod nagłówkiem, a nie pod ikoną) */
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
    .faq-trigger {
        padding: 20px;
    }
    
    .question-group {
        gap: 15px;
    }
    
    .question-text {
        font-size: 1rem;
    }
    
    .faq-icon-box {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .answer-content {
        padding: 0 20px 25px 20px; /* Na mobile wyrównujemy tekst normalnie */
    }
}


/* =========================================
   SEKCJA BIO (AUTHORITY)
   ========================================= */

.bio-section {
    background-color: var(--section-alt); /* Ciemniejszy beż */
    overflow: hidden;
}

.bio-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Tekst szerszy niż zdjęcie */
    gap: 80px;
    align-items: center;
}

/* --- KOLUMNA WIZUALNA --- */
.bio-visual {
    position: relative;
    padding: 20px; /* Miejsce na przesuniętą ramkę */
}

.image-wrapper {
    position: relative;
    z-index: 1;
}

.bio-photo {
    width: 100%;
    border-radius: 8px;
    display: block;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}

/* Ozdobna ramka (Outline) */
.image-outline {
    position: absolute;
    top: 30px;
    left: -30px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent);
    border-radius: 8px;
    z-index: 1;
    transition: transform 0.4s ease;
}

.bio-visual:hover .image-outline {
    transform: translate(10px, -10px); /* Efekt ruchu przy najechaniu */
}

/* Badge (20 lat) */
.experience-badge {
    position: absolute;
    bottom: -30px;
    right: -20px;
    background-color: var(--white);
    padding: 20px;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 3;
    text-align: center;
    border: 4px solid var(--bg-color); /* Oddzielenie od zdjęcia */
}

.experience-badge .years {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.experience-badge .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 5px;
    line-height: 1.2;
    font-weight: 700;
}

/* --- KOLUMNA TEKSTOWA --- */
.bio-content h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.name-highlight {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
}

.bio-text p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 25px;
}

/* Insight Box (Wyróżniony cytat) */
.insight-quote-box {
    background-color: rgba(200, 122, 86, 0.08); /* Bardzo jasna terakota */
    border-left: 4px solid var(--accent);
    padding: 25px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
}

.insight-quote-box p {
    margin-bottom: 0;
    color: var(--text-main);
    font-style: italic;
}

.text-accent {
    color: var(--accent);
}

/* Podpis */
.signature-area {
    margin-top: 40px;
}

.signature-text {
    font-family: 'Playfair Display', serif; /* Możesz tu użyć fontu handwriting jeśli masz */
    font-style: italic;
    font-size: 1.8rem;
    color: var(--accent);
    opacity: 0.8;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .bio-grid {
        grid-template-columns: 1fr; /* Jedna kolumna */
        gap: 60px;
    }
    
    .bio-visual {
        max-width: 500px;
        margin: 0 auto;
        padding: 0;
    }
    
    .image-outline {
        left: 15px;
        top: 15px;
        width: 100%;
    }
    
    .experience-badge {
        right: -10px;
        bottom: -20px;
        width: 100px;
        height: 100px;
    }
    
    .experience-badge .years {
        font-size: 1.6rem;
    }
    
    .bio-content {
        text-align: left; /* Tekst nadal do lewej dla czytelności */
    }
}

@media (max-width: 768px) {
    .bio-visual {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .image-outline {
        display: none; /* Na małych ekranach usuwamy outline dla czystości */
    }
    
    .bio-photo {
        width: 100%;
    }
}


/* =========================================
   SEKCJA FINAL CTA (PONAGLENIE)
   ========================================= */

.final-cta-section {
    background-color: var(--white);
    padding-bottom: 100px;
}

.final-cta-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    border: 2px solid var(--section-alt); /* Delikatna ramka */
    border-radius: 20px;
    padding: 60px 40px;
    background: linear-gradient(to bottom, #fff 0%, #fffaf7 100%);
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}

.urgent-heading {
    color: #a66343; /* Kolor z Twojego pliku (czerwień) */
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.pain-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    line-height: 1.7;
}

.solution-text-block {
    font-size: 1.15rem;
    color: var(--text-main);
    margin-bottom: 40px;
}

/* --- CENA FINAŁOWA --- */
.final-price-wrapper {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(200, 122, 86, 0.05); /* Bardzo jasne tło akcentowe */
    border-radius: 12px;
    display: inline-block;
    min-width: 300px;
}

.price-label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.price-display-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.old-price-strike {
    text-decoration: line-through;
    color: #999;
    font-size: 1.5rem;
}

.new-price-highlight {
    color: var(--accent);
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.btn-large {
    padding: 22px 60px;
    font-size: 1.3rem;
}

/* =========================================
   FOOTER (STOPKA)
   ========================================= */

.site-footer {
    background-color: #2C2A29;
    color: #888;
    padding: 50px 0;
    font-size: 0.9rem;
    border-top: 1px solid #333;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--accent);
}

.separator {
    color: #444;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
    .final-cta-box {
        padding: 40px 20px;
        border: none; /* Na mobile usuwamy ramkę dla większej przestrzeni */
        box-shadow: none;
        background: none;
    }
    
    .urgent-heading {
        font-size: 1.8rem;
    }
    
    .price-display-large {
        flex-direction: column;
        gap: 5px;
    }
    
    .btn-large {
        width: 100%;
        padding: 18px 20px;
        font-size: 1.1rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .separator {
        display: none;
    }
}









/* =========================================
   FIXTURES - ZMIANY W HEADERZE (NO IMAGE, CLEAN H1)
   ========================================= */

/* 1. Tło jednolite (usuwamy obrazek) */
.hero-section {
    background: #F2EFE9 !important; /* Jednolity, elegancki beż */
    min-height: auto !important;     /* Wysokość dopasowana do treści */
    padding: 80px 0 60px !important; /* Zmniejszony padding góra/dół */
    align-items: flex-start !important; /* Wyrównanie do góry */
}

/* 2. Ukrycie nakładki gradientowej (overlay) */
.hero-bg-overlay {
    display: none !important;
}

/* 3. Stylowanie nowego H1 (Uproszczone) */
.hero-main-title {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-size: clamp(2rem, 4.5vw, 3.2rem) !important; /* Responsywna wielkość */
    color: var(--text-main) !important;
    line-height: 1.3 !important;
    margin-bottom: 30px !important;
    
    /* Resetujemy poprzednie style flex dla spana */
    display: block !important;
    text-align: center !important;
}

/* 4. Dostosowanie boxa z CTA do jednolitego tła */
.hero-action-box {
    background: #FFFFFF !important; /* Pełna biel zamiast szkła */
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    backdrop-filter: none !important;
}

/* =========================================
   FIXTURES - CONSEQUENCES & REALITY CHECK
   ========================================= */

/* --- 1. NOWY HEADER SEKCYJNY (UPROSZCZONY) --- */
.consequences-header-simple {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.consequences-header-simple h2 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.simple-subtext {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 1);
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 30px;
}

.alert-simple {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(200, 122, 86, 0.15); /* Ciemniejsza terakota przezroczysta */
    border: 1px solid var(--accent);
    padding: 15px 25px;
    border-radius: 50px;
    color: #fff;
    text-align: left;
}

.alert-simple i { font-size: 1.2rem; }
.alert-simple span { font-weight: 700; font-size: 1rem; }


/* --- 2. NOWY UKŁAD: LISTA + ZDJĘCIE --- */
.cycle-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 40px;
}

/* Lewa kolumna (Tekst) */
.cycle-content {
    flex: 1;
}

.cycle-heading {
    color: var(--white);
    font-family: 'Lato', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 30px; 
}

.cycle-list-vertical {
    list-style: none;
    padding: 0;
}

.cycle-list-vertical li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 25px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
}

/* Wypunktowanie jako strzałki */
.cycle-list-vertical li::before {
    content: '\f061'; /* FontAwesome Arrow Right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--accent);
}

.cycle-list-vertical strong {
    color: var(--white);
    /* Usunąłem display:block, żeby tekst płynął naturalnie zgodnie z oryginałem, chyba że wolisz łamanie linii */
    font-weight: 700; 
}

/* Prawa kolumna (Zdjęcie) */
.cycle-image-box {
    flex: 0.8;
    position: relative;
}

.cycle-img {
    width: 100%;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Dekoracja pod zdjęciem */
.cycle-decoration-box {
    position: absolute;
    top: 20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent);
    border-radius: 12px;
    z-index: 1;
    opacity: 0.5;
}


/* --- 3. NOWA SEKCJA: REALITY CHECK (JASNA) --- */
.reality-check-section {
    background-color: #FDF6F3; /* Bardzo jasny kremowy/róż */
    color: var(--text-main);
    text-align: center;
    border-bottom: 1px solid #eee;
}

.reality-content {
    max-width: 800px;
    margin: 0 auto;
}

.reality-title {
    font-size: 2.2rem;
    color: var(--text-main);
    margin-bottom: 30px;
}

.reality-highlight {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin: 30px 0;
    border-left: 4px solid var(--accent);
    text-align: left;
}

.reality-highlight p {
    margin-bottom: 15px;
    font-size: 1.05rem;
}
.reality-highlight p:last-child { margin-bottom: 0; }

.final-statement-simple {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 40px 0 30px;
    line-height: 1.4;
}

/* --- RWD dla nowych sekcji --- */
@media (max-width: 992px) {
    .cycle-wrapper {
        flex-direction: column; /* Na tablecie i mobile jedno pod drugim */
        gap: 40px;
    }
    
    .cycle-image-box {
        width: 100%;
        max-width: 500px;
    }
    
    .cycle-decoration-box {
        right: -10px;
        top: 10px;
    }
}

@media (max-width: 768px) {
    .consequences-header-simple h2 {
        font-size: 2rem;
    }
    
    .alert-simple {
        flex-direction: column;
        text-align: center;
    }
    
    .cycle-heading {
        text-align: center;
    }
}

/* =========================================
   FIXTURES - SPLIT SOLUTION & INSIGHT SECTION
   ========================================= */

/* Nowa sekcja Insight - wyróżniona kolorem */
.insight-section {
    background-color: #E8E4DD; /* Wyraźny, ciemniejszy odcień beżu dla kontrastu */
    position: relative;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Reset marginesów dla wrappera, który teraz jest w nowej sekcji */
.insight-card-wrapper {
    margin-top: 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Podkręcenie cienia karty, żeby lepiej "siedziała" na nowym tle */
.insight-card {
    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
}

/* Opcjonalnie: Zmiana koloru nagłówka w karcie, 
   żeby odróżniał się od tła sekcji (jeśli są podobne) */
.insight-header {
    background-color: #2C2A29; /* Ciemny nagłówek dla kontrastu */
    color: #fff;
}

.insight-header h3 {
    color: #fff !important; /* Wymuszenie bieli na tekście */
}
/* =========================================
   FIXTURES - INSIGHT SECTION (NO-CARD VERSION)
   ========================================= */

/* 1. Reset kontenera karty - usunięcie cienia, tła i obramowań */
.insight-section .insight-card {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 800px; /* Zwężamy trochę treść dla lepszej czytelności bez ramki */
    margin: 0 auto;   /* Centrowanie */
}

/* 2. Reset nagłówka - usunięcie ciemnego tła i zmiana koloru tekstu */
.insight-section .insight-header {
    background-color: transparent !important;
    padding: 0 0 30px 0 !important; /* Reset paddingu, zostawiamy tylko dolny odstęp */
    border-bottom: none !important;
    text-align: center; /* Wyśrodkowanie nagłówka wygląda lepiej bez karty */
}

.insight-section .insight-header h3 {
    color: var(--text-main) !important; /* Zmiana koloru z białego na ciemny */
    font-size: 1.8rem !important;
}

/* 3. Reset ciała karty */
.insight-section .insight-body {
    padding: 0 !important; /* Usunięcie wewnętrznych odstępów */
    background: transparent !important;
}

/* 4. Dostosowanie kolorów elementów dla lepszego kontrastu na beżowym tle */

/* Teksty */
.insight-section p, 
.insight-section li {
    color: var(--text-main) !important; /* Używamy ciemniejszego koloru głównego zamiast szarego muted */
}

/* Ikony - "neutralna" lupa musi być ciemniejsza, żeby nie zginęła na tle */
.insight-section .icon-neutral {
    color: var(--text-main) !important; 
    opacity: 0.7;
}

/* Czerwony X (icon-bad) może zostać, ma dobry kontrast */

/* Divider (linia pozioma) - musi być ciemniejsza */
.insight-section .divider {
    border-top-color: rgba(0,0,0,0.1) !important;
}

/* Summary text - wyśrodkowanie */
.insight-section .summary-text {
    text-align: center;
    font-size: 1.1rem;
}

/* =========================================
   FIXTURES - WYRÓWNANIE PUNKTÓW LISTY (GRID ROW ALIGNMENT)
   ========================================= */

/* Działamy tylko na komputerach (powyżej 992px), 
   bo na telefonie kolumny są jedna pod drugą, więc wyrównanie nie ma znaczenia */
@media (min-width: 992px) {
    
    .audience-list li {
        /* Ustawiamy minimalną wysokość każdego punktu. 
           Wartość 160px jest dobrana "na oko" do Twoich tekstów.
           Jeśli teksty będą się nakładać, zwiększ tę wartość np. na 170px lub 180px */
        min-height: 134px; 
        
        /* Upewniamy się, że układ wewnątrz punktu jest elastyczny */
        display: flex; 
        align-items: flex-start; /* Ikona i tekst startują od góry */
    }

    /* Opcjonalnie: Centrowanie ikony względem pierwszej linii tekstu */
    .li-icon {
        margin-top: 5px !important; /* Drobna korekta, żeby ikona nie "wisiała" za wysoko */
    }
}

/* =========================================
   FIXTURES - FAQ STATIC (GRID VIEW)
   ========================================= */

/* 1. Zmiana kontenera na Grid (Siatka 2 kolumny) */
.faq-wrapper.static-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */
    gap: 30px;
    max-width: 1000px; /* Nieco szerzej niż wcześniej */
}

/* 2. Stylizacja stałej karty */
.static-card {
    padding: 35px;
    height: 100%; /* Karty równej wysokości */
    display: flex;
    flex-direction: column;
    /* Reset interakcji */
    cursor: default; 
    border-color: rgba(0,0,0,0.05) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.static-card:hover {
    transform: translateY(-5px); /* Delikatne uniesienie */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* 3. Nagłówek (Ikona + Pytanie) */
.faq-static-header {
    display: flex;
    align-items: flex-start; /* Wyrównanie do góry w razie długich pytań */
    gap: 20px;
    margin-bottom: 20px;
}

.faq-static-header .question-text {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.4;
    padding-top: 5px; /* Drobna korekta względem ikony */
}

/* 4. Treść odpowiedzi */
.faq-static-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- RWD dla FAQ --- */
@media (max-width: 992px) {
    .faq-wrapper.static-grid {
        grid-template-columns: 1fr; /* Na tabletach i mobile jedna kolumna */
        max-width: 600px;
    }
    
    .static-card {
        padding: 30px 25px;
    }
}



/* =========================================
   6. RWD FIXES & TWEAKS (Wklej na końcu pliku)
   ========================================= */

/* Dostosowanie dla tabletów i mniejszych ekranów (poniżej 992px) */
@media (max-width: 992px) {
    /* Zabezpieczenie siatki problemów, żeby nie ściskała kart */
    .problem-grid {
        grid-template-columns: 1fr; /* Jedna kolumna zamiast minmax(300px) */
    }

    /* Poprawa widoczności w sekcji Insight na ciemniejszym tle */
    .insight-section .insight-header h3 {
        font-size: 1.5rem !important;
    }
}

/* Dostosowanie dla telefonów (poniżej 768px) */
@media (max-width: 768px) {
    
    /* --- OGÓLNE --- */
    /* Zmniejszenie paddingów sekcji, żeby nie marnować miejsca na mobile */
    .section-padding {
        padding: 50px 0 !important;
    }
    
    .container {
        padding: 0 20px;
    }

    /* --- TYPOGRAFIA MOBILE --- */
    h1, .hero-main-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 1.6rem !important;
    }

    /* --- HERO SECTION --- */
    .hero-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .hero-action-box {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- PRICING (Ceny były za duże na mobile) --- */
    .price-new {
        font-size: 2.5rem; /* Zmniejszenie z 3.5rem */
    }
    
    .price-box, 
    .pricing-card {
        padding: 30px 20px; /* Mniejsze marginesy wewn. kart */
    }

    /* --- BIO SECTION (Naprawa uciekającego Badge'a) --- */
    .bio-visual {
        margin-bottom: 50px; /* Miejsce na badge pod zdjęciem */
    }

    .experience-badge {
        width: 90px;
        height: 90px;
        padding: 15px;
        right: 0; /* Przyklejenie do prawej krawędzi kontenera */
        bottom: -20px;
    }

    .experience-badge .years {
        font-size: 1.4rem;
    }
    
    .experience-badge .label {
        font-size: 0.6rem;
    }

    /* --- FINAL CTA --- */
    .final-cta-box {
        padding: 30px 20px;
    }
    
    .new-price-highlight {
        font-size: 2rem; /* Mniejsza cena w stopce */
    }
    
    .btn-large {
        padding: 18px 30px; /* Mniejszy przycisk */
        font-size: 1.1rem;
        width: 100%;
    }

    /* --- REALITY CHECK --- */
    .reality-highlight {
        padding: 20px;
    }
    
    .final-statement-simple {
        font-size: 1.3rem;
    }
}

/* Dostosowanie dla bardzo małych ekranów (np. iPhone SE - poniżej 380px) */
@media (max-width: 380px) {
    .btn-cta {
        padding: 15px 20px;
        font-size: 0.95rem;
        width: 100%;
    }
    
    .hero-main-title {
        font-size: 1.5rem !important;
    }
}