/* --- Global Styles & Variables --- */
:root {
    --font-primary: 'Poppins', sans-serif;
    --font-headings: 'Rowdies', cursive; /* cursive is a fallback */

    /* Updated Colors */
    --color-pink: #D8005E;
    --color-light-yellow: #FFEDC4;
    --color-mid-yellow: #FAC038;
    --color-dark-brown: #4a2511;
    --color-button-text-brown: #3B1802;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-green-whatsapp: #2AB318;
    --color-dark-green-text: #1e7e34;
    --color-hero-text: #FFF4C9;
    --color-nav-bg: #57002A;
    --color-nav-active: #FFF4C9;
    --color-nav-inactive: #D06C9D;
    --color-button-secondary-text: #3B1802;
    --color-learn-tag-bg: #FAC038;
    --color-footer-text: #FFF4C9;
    --color-footer-bottom-bg: #57002A;
    --color-footer-bottom-text: #D06C9D;
    --color-feature-item-bg: #CA0058;
    --color-price-1-bg: #FFEDC4;
    --color-price-2-bg: #FAC038;
    --color-price-3-bg: #D8005E;
    --color-trial-plan-bg: #FAC038;
    --color-trial-plan-text: #3B1802;
    --color-step1-bg: #FFEDC4;
    --color-step1-text: #3B1802;
    --color-step2-bg: #FAC038;
    --color-step2-text: #3B1802;
    --color-step3-bg: #3B1802;
    --color-step3-text: #FFEDC4;


    --padding-standard: 25px;
    --padding-section: 40px 20px; /* Top/Bottom Left/Right */
}

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

body {
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-dark-brown);
    background-color: var(--color-light-yellow);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-dark-brown);
    margin-bottom: 15px;
    line-height: 1.2;
}

p {
    margin-bottom: 15px;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}
img[src$=".svg"] {
    /* SVG specific styles if needed */
}

/* --- General Classes --- */
.font-rowdies { font-family: var(--font-headings); }
.font-poppins { font-family: var(--font-primary); }
.section-padding { padding: var(--padding-section); }
.bg-pink { background-color: var(--color-pink); }
.bg-light-yellow { background-color: var(--color-light-yellow); }
.bg-mid-yellow { background-color: var(--color-mid-yellow); }
.text-center { text-align: center; }
.section-title { font-size: 28px; text-align: center; margin-bottom: 30px; }

/* --- Button Styles --- */
.button { display: inline-block; padding: 12px 25px; border-radius: 30px; font-family: var(--font-primary); font-weight: 600; font-size: 16px; text-align: center; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; margin: 5px; border: 2px solid transparent; }
.button-primary { background-color: var(--color-green-whatsapp); color: var(--color-white); border-color: var(--color-green-whatsapp); }
.button-primary:hover { opacity: 0.9; }
.hero-section .button-secondary {
    background-color: var(--color-white);
    color: var(--color-button-secondary-text);
    border: 1px solid var(--color-button-secondary-text);
}
.hero-section .button-secondary:hover { background-color: #f8f8f8; }
.button-secondary-trial { background-color: var(--color-white); color: var(--color-trial-plan-text); border: 2px solid var(--color-trial-plan-text); }
.button-secondary-trial:hover { background-color: rgba(59, 24, 2, 0.1); }
.button-dark-outline {
    background-color: var(--color-white);
    color: var(--color-button-secondary-text);
    border: 1px solid var(--color-button-secondary-text);
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
}
.button-dark-outline:hover {
     background-color: #f8f8f8;
}
.button-whatsapp { background-color: var(--color-green-whatsapp); color: var(--color-white); border-color: var(--color-green-whatsapp); }
.button-whatsapp:hover { opacity: 0.9; }
.button-group { text-align: center; margin-top: 20px; }

/* Specific margin for trial buttons */
.trial-button-group .button {
    margin: 2px;
}

/* --- Icon Styles --- */
.icon-small {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -3px;
}
.icon-button { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 8px; margin-top: -2px; }

/* --- 1. Language Nav --- */
.lang-nav { background-color: var(--color-nav-bg); text-align: center; padding: 8px 0; }
.lang-nav span, .lang-nav a { font-family: var(--font-primary); font-size: 18px; display: inline-block; padding: 12px; margin: 0 5px; border-radius: 5px; }
.lang-active { color: var(--color-nav-active); font-weight: 700; text-transform: uppercase; cursor: default; }
.lang-inactive { color: var(--color-nav-inactive); font-weight: 400; }
.lang-inactive:hover { color: var(--color-nav-active); background-color: rgba(255, 255, 255, 0.05); }

/* --- 2. Hero Section --- */
.hero-section { background-color: var(--color-pink); text-align: center; }
.location-tag {
    display: inline-block;
    background-color: var(--color-hero-text);
    color: var(--color-pink);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.headline, .subheadline { color: var(--color-hero-text); }
.headline { font-size: 32px; margin-bottom: 15px; }
.subheadline { font-size: 18px; margin-bottom: 25px; }
.gratis-badge {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-hero-text); /* Added color for consistency */
    margin-bottom: 20px;
    margin-top: 40px; /* ADDED MARGIN-TOP */
    font-size: 18px;
}
.gratis-highlight { background-color: var(--color-mid-yellow); color: var(--color-dark-brown); padding: 3px 8px; border-radius: 5px; margin-left: 5px; }

/* --- 3. Poznaj Aimé Section --- */
.poznaj-section { text-align: center; }
.profile-image-large {
    width: 300px;
    height: auto;
    max-width: 90%;
    border-radius: 15px;
    margin: 0 auto 20px auto;
    display: block;
}
.intro-greeting {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-dark-brown);
}

/* --- 4. Zacznijmy Mówić Section --- */
.zacznijmy-section {
    text-align: center;
    background-color: var(--color-mid-yellow);
}
.step-box {
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 16px;
    /* No shadow */
    text-align: center;
}
.step-header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 15px 5px 7px;
    border-radius: 20px;
    margin-bottom: 15px;
}
.step-number { border-radius: 50%; width: 30px; height: 30px; line-height: 30px; font-family: var(--font-headings); font-size: 18px; text-align: center; flex-shrink: 0; }
.step-title {
    font-family: var(--font-rowdies);
    font-size: 20px;
    font-weight: 700;
}
.step-box-1 .step-header { background-color: var(--color-step1-bg); }
.step-box-1 .step-number { background-color: var(--color-step1-text); color: var(--color-step1-bg); }
.step-box-1 .step-title { color: var(--color-step1-text); }
.step-box-2 .step-header { background-color: var(--color-step2-bg); }
.step-box-2 .step-number { background-color: var(--color-step2-text); color: var(--color-step2-bg); }
.step-box-2 .step-title { color: var(--color-step2-text); }
.step-box-3 .step-header { background-color: var(--color-step3-bg); }
.step-box-3 .step-number { background-color: var(--color-step3-text); color: var(--color-step3-bg); }
.step-box-3 .step-title { color: var(--color-step3-text); }
.step-box p {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--color-dark-brown);
}

/* --- 5. Znajdź Idealny Plan Section --- */
.plan-section {
    text-align: center;
    background-color: var(--color-light-yellow);
}
.plan-box, .trial-plan-box {
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 24px 16px;
    margin-bottom: 16px;
    /* No shadow */
}
.trial-plan-box {
    background-color: var(--color-trial-plan-bg);
}
.trial-plan-box .plan-title,
.trial-plan-box p {
    color: var(--color-trial-plan-text);
}

.icon-plan {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px auto;
}
.plan-title {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-dark-brown);
}
.trial-plan-box .plan-title {
    color: var(--color-trial-plan-text);
}

.plan-description {
    font-size: 16px;
    margin-bottom: 24px;
    color: var(--color-dark-brown);
}
.plan-description strong {
     font-weight: 700;
}

.plan-price-tag {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 5px;
    border: none;
}
.plan-price-default { background-color: var(--color-price-1-bg); color: var(--color-dark-brown); }
.plan-price-highlight-yellow { background-color: var(--color-price-2-bg); color: var(--color-dark-brown); }
.plan-price-highlight-pink { background-color: var(--color-price-3-bg); color: var(--color-white); }
.price-per-lesson {
    font-size: 16px;
    font-weight: 400;
    margin-left: 5px;
    opacity: 0.9;
}
.plan-saving {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 0;
}
.saving-green { color: var(--color-dark-green-text); }


/* --- 7. Jak Będziemy Się Uczyć Section --- */
.how-learn-section { text-align: center; background-color: var(--color-pink); }
.how-learn-section .section-title, .how-learn-section .subtitle, .how-learn-section .instruction-text { color: var(--color-white); }
.subtitle { font-size: 26px; margin-top: -20px; margin-bottom: 10px; }
.instruction-text { margin-bottom: 30px; }
.learn-item { background-color: var(--color-feature-item-bg); border-radius: 16px; padding: 20px; margin-bottom: 25px; text-align: center; }
.icon-learn {
    width: 90px;
    height: 90px;
    margin: 0 auto 5px auto; /* UPDATED MARGIN */
    display: block;
}
.learn-tag { display: inline-block; background-color: var(--color-learn-tag-bg); color: var(--color-dark-brown); padding: 5px 15px; border-radius: 20px; font-family: var(--font-primary); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.learn-item p { font-size: 18px; color: var(--color-white); margin-bottom: 0; }

/* --- 8. Miło Cię Poznać (Bio) Section --- */
.bio-section { text-align: center; background-color: var(--color-light-yellow); }
.profile-image-bio { width: 80%; max-width: 300px; border-radius: 15px; margin: 0 auto 25px auto; }
.bio-section p { margin-bottom: 15px; color: var(--color-dark-brown); }
.bio-hobby { font-weight: 600; margin-top: 20px; color: var(--color-dark-brown); }

/* --- 9. Częste Pytania (FAQ) Section --- */
.faq-section { background-color: var(--color-mid-yellow); }
.faq-item { margin-bottom: 15px; background-color: var(--color-white); border-radius: 15px; overflow: hidden; }
.faq-question { background-color: transparent; color: var(--color-dark-brown); border: none; padding: 15px 20px; width: 100%; text-align: left; font-family: var(--font-primary); font-size: 17px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question span { flex-grow: 1; margin-right: 15px; }
.faq-icon { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.3s ease; }
.faq-answer { background-color: transparent; padding: 0 20px; overflow: hidden; max-height: 0; transition: max-height 0.4s ease-out, padding 0.4s ease-out; }
.faq-answer p { padding: 0 0 15px 0; margin: 0; font-size: 16px; color: var(--color-dark-brown); }
.faq-answer p:first-child { padding-top: 5px; }

/* --- 10. Skontaktuj Się (Footer) Section --- */
.contact-section { text-align: center; background-color: var(--color-pink); }
.contact-section .section-title, .contact-section .contact-info, .contact-section .contact-label, .contact-section .contact-detail { color: var(--color-footer-text); }
.contact-info { margin-bottom: 30px; }
.contact-method { margin-bottom: 30px; }
.contact-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.contact-detail { font-size: 20px; font-weight: 600; margin-bottom: 15px; }
.email-link { color: var(--color-footer-text); text-decoration: none; font-weight: 600; font-size: 20px; }
.email-link:hover { text-decoration: underline; }

/* --- 11. Ultimate Footer --- */
.site-footer-bottom { background-color: var(--color-footer-bottom-bg); color: var(--color-footer-bottom-text); text-align: center; padding: 15px 20px; font-size: 14px; font-family: var(--font-primary); }


/* --- Desktop Styles (Added at the end) --- */
@media (min-width: 768px) { /* Start Tablet/Desktop Styles */

    /* General Content Wrapper for Desktop */
    .content-wrapper {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px; /* Add some side padding inside the wrapper */
        padding-right: 20px;
    }
    /* Adjust section padding on desktop if needed */
    .section-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* 3. Poznaj Aimé Section - Desktop Grid */
    .desktop-grid-poznaj {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 40px;
        align-items: center;
        text-align: left;
    }
    .poznaj-section .section-title {
         text-align: left;
         margin-bottom: 10px;
    }
     .poznaj-image-col {
         text-align: center;
     }
     .profile-image-large {
         margin: 0;
         width: 100%;
         max-width: 350px;
     }
     .poznaj-text-col .button-dark-outline {
          display: inline-block;
     }


    /* 4. Zacznijmy Mówić Section - Desktop Flexbox */
    .steps-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
    }
    .step-box {
        flex-basis: calc(33.333% - 15px);
        min-width: 280px;
        margin-bottom: 20px;
    }

    /* 5. Znajdź Idealny Plan Section - Desktop Grid */
    .plans-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* UPDATED: 3 columns */
        gap: 25px;
    }
    .plan-box, .trial-plan-box {
        margin-bottom: 0;
    }
    /* Target the 4th child (trial plan) */
    .plans-container .trial-plan-box {
        grid-column: 1 / 4; /* Span all 3 columns */
        justify-self: center; /* Center the box within the spanned columns */
        max-width: calc(66.666% - 12.5px); /* Approx width of 2 columns minus half gap */
        /* Or simply a fixed max-width that looks good */
        /* max-width: 600px; */
    }


    /* 7. Jak Będziemy Się Uczyć Section - Desktop Flexbox */
    .learn-items-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
    }
    .learn-item {
         flex-basis: calc(33.333% - 20px);
         min-width: 260px;
         margin-bottom: 0;
         /* min-height: 300px; */
    }


    /* 8. Miło Cię Poznać (Bio) Section - Desktop Grid */
    .desktop-grid-bio {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 40px;
        align-items: center;
        text-align: left;
    }
     .bio-image-col {
         text-align: center;
     }
     .profile-image-bio {
         margin: 0;
         width: 100%;
         max-width: 350px;
     }
    .bio-section .section-title {
        text-align: left;
        margin-top: 0;
    }
    .bio-hobby {
        text-align: left;
    }

    /* 9. Częste Pytania (FAQ) Section - Width Limit */
    .faq-content-wrapper { /* Target specific wrapper */
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

} /* End Tablet/Desktop Media Query */