@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@200;300;400;500;800&family=Open+Sans:wght@700;800&display=swap');

:root {
    --bg-color: #fcfcfc;
    --text-color: #192a3e;
    --accent-color: #192a3e;
    --max-width: 1240px;
    --serif-font: Palatino, 'Palatino Linotype', 'Book Antiqua', serif;
    --sans-font: 'Inter', sans-serif;
    --section-spacing: 120px;
}

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

body {
    background-color: var(--bg-color);
    color: var(--accent-color);
    /* Navy color for body text */
    font-family: var(--sans-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--serif-font);
    font-weight: 400;
    line-height: 1.05;
    /* Tighter line height */
}

h2 {
    font-size: 3rem;
    margin-bottom: 40px;
}

h3 {
    font-size: 2.2rem;
    margin-bottom: 25px;
}

p {
    font-weight: 300;
    /* Light font */
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.3s;
}

strong {
    font-weight: 800;
}

a:hover {
    opacity: 0.7;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
}

main {
    padding: 0;
}

/* Header */
/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--accent-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #b45f06;
    transform: translateY(-5px);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Header */
header {
    height: 100px;
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background: transparent;
}

header .container {
    width: 100%;
}



.nav-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--serif-font);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
}

.logo:hover {
    opacity: 1;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 32px;
    /* Larger */
    height: 3px;
    /* Thicker */
    background: var(--text-color);
    margin: 6px 0;
    transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
}

nav ul a {
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 0.9rem;
    /* Increased by ~10% */
    letter-spacing: 0.1em;
    position: relative;
    /* For pseudo-element absolute positioning */
    padding-bottom: 5px;
    /* Space for underline */
}

nav ul a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--text-color);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

nav ul a:hover::after {
    transform: scaleX(1);
    transform-origin: center;
}

nav ul a:hover {
    color: var(--text-color);
    /* Keep color unchanged */
    opacity: 1;
    /* Disable global hover opacity change */
}

/* Hero Section with Fixed Parallax */
.hero {
    height: 100vh;
    /* Full viewport height */
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Ensure image doesn't bleed out */
}

.hero-parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Create the fixed effect nicely */
    clip-path: inset(0 0 0 0);
    /* Fix for some browsers */
}

.hero-parallax-bg img {
    position: fixed;
    /* This creates the parallax */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1;
    will-change: transform;
    /* Hint for optimization */
}

.hero::after {
    /* Optional overlay if text readability is an issue, but we want it natural */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    /* Push text to the right because person is on left */
    width: 100%;
}

/* Reverted desktop img styles */



.hero-content {
    max-width: 1000px;
    /* Increased to fit long title lines */
    background: transparent;
    padding: 130px 40px 100px 40px;
    /* Moved down 30px (top padding 100->130) */
    margin-right: -225px;
    /* Moved left 100px (-325->-225) */
}

/* Mobile elements hidden by default */
.hero-mobile-elements {
    display: none;
}

.hero-content h1 {
    font-size: 4.6rem;
    /* Adjusted: -5% from 4.8rem */
    margin-bottom: 30px;
    color: var(--text-color);
    position: relative;
    top: -45px;
    left: -5px;
}

.hero-content .hero-name-desktop {
    font-family: var(--serif-font);
    font-size: 20pt;
    color: var(--text-color);
    margin-top: 30px;
    margin-bottom: 30px;
    /* Increased gap to title */
    font-weight: 500;
}

.hero-content .surname {
    font-size: 1em;
    display: inline-block;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: var(--text-color);
    position: relative;
    top: -30px;
    /* Moved 30px up */
    padding-right: 150px;
}

/* Common Section */
section {
    padding: var(--section-spacing) 0;
    background: var(--bg-color);
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Ensure text centering */
    /* Ensure text centering */
    height: 100px;
    /* Fixed height */
    width: 350px;
    /* Fixed width increased to 350px for long labels */
    padding: 0 10px;
    /* Reduced padding */
    border: none;
    margin: 0 auto;
    /* Ensure centering fallback */
    background: var(--accent-color);
    color: #ffffff;
    font-family: var(--sans-font);
    font-size: 1rem;
    letter-spacing: 0.1em;
    transition: all 0.3s;
    text-transform: uppercase;
    font-weight: 300;
}

.cta-button.primary {
    background: var(--accent-color);
    color: #fff;
}

.cta-button.secondary {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.cta-button:hover,
.cta-button.primary:hover,
.cta-button.secondary:hover {
    opacity: 1;
    background: #b45f06;
    /* Coffee/Brown rollover */
    color: #ffffff;
}


/* Offer Section */
.offer-section {
    position: relative;
    background-image: url('images/standing.png');
    background-attachment: fixed;
    background-size: auto 85vh;
    /* Larger image */
    background-position: right bottom;
    /* Aligned to right bottom */
    background-repeat: no-repeat;
    /* Aligned to right bottom */
    background-repeat: no-repeat;
    background-color: #e5e5e5;
    /* Slightly darker gray */
    padding: 80px 0;
    /* Increased padding */
}

/* Ensure text doesn't overlap the image on large screens */
.offer-section .container {
    display: block;
    /* Changed from grid to block for full width */
    max-width: 1000px;
    /* Limit width for centering */
}

.offer-content-wrapper {
    /* grid-column removed */
    background: transparent;
    padding-right: 0;
    /* Remove right padding */
    margin: 0 auto;
    /* Center the wrapper */
    text-align: center;
    /* Ensure wrapper text align is center */
}

.offer-grid {
    display: block;
    /* Reset grid to stack items in the left column */
    margin-bottom: 0;
}

.offer-item {
    margin-bottom: 100px;
    position: relative;
    text-align: center;
    /* Aligned center as requested */
}

.offer-number {
    font-family: var(--serif-font);
    font-size: 5rem;
    /* 50% larger than 3.75rem */
    color: #b45f06;
    /* Brown color */
    margin-bottom: 15px;
    border-bottom: none;
    display: inline-block;
    padding-bottom: 5px;
}

.offer-number::after {
    content: ".";
    color: var(--accent-color);
    /* Navy dot */
}

.offer-item h3 {
    font-size: 2.8rem;
    /* Larger headings */
    margin-bottom: 25px;
    margin-bottom: 25px;
    line-height: 1.1;
    text-align: center;
    /* Aligned center */
}

.offer-item p {
    margin-bottom: 35px;
    font-size: 1.1rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    /* Centered block */
    text-align: center;
    /* Centered text */
}

.offer-item .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Training Tiles Grid */
.training-tiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.training-tile {
    aspect-ratio: 1;
    /* Square tiles */
    background: #fff;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    /* Larger padding */
    min-height: 180px;
    /* Minimum height */
    transition: all 0.3s;
    font-weight: 500;
    font-size: 1.2rem;
    /* Larger text */
    color: var(--text-color);
}


.training-tile .arrow {
    margin-top: 10px;
    font-size: 1.2rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s;
}


.training-tile.has-image {
    padding: 0;
    border: none;
    overflow: hidden;
}

.training-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Training Card (Detailed) */
.training-card {
    background: #fff;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    height: 100%;
    padding-bottom: 40px;
    /* Added bottom padding for better spacing */
}


.training-card-image {
    width: 100%;
    height: 300px;
    /* Increased from 240px */
    overflow: hidden;
}

.training-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.training-card-image.contain img {
    object-fit: contain;
    padding: 0;
    /* Removed padding to enlarge image */
    background: #fff;
}


.training-card-content {
    padding: 0;
    /* Zero padding as requested */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
    /* Center text */
    align-items: center;
    /* Center flex children horizontally */
    justify-content: center;
    /* Center vertically if there is space */
}

.training-card h4 {
    font-family: var(--serif-font);
    font-weight: 400;
    font-size: 2.0rem;
    /* Increased by 10% from 1.8rem */
    margin-bottom: 30px;
    /* Increased from 10px to add more light */
    color: var(--accent-color);
    line-height: 1.1;
    /* Tighter line height */
    text-align: center;
    /* Force center */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.training-card p {
    width: 100%;
    /* Ensure full width for text */
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 25px;
    /* Increased from 5px to add more light */
    line-height: 1.4;
    /* Tighter line height */
    text-align: center;
    /* Force center override */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.training-card-footer {
    display: flex;
    justify-content: center;
    /* Center the button */
    align-items: center;
    margin-top: auto;
    /* Pushes footer to the very bottom */
    padding-top: 30px;
    /* Increased from 10px to add more light */
    border-top: none;
}

.training-card-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-bottom: 20px;
    display: block;
    /* Block to allow margin auto */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.training-card .cta-button.small {
    height: 100px;
    /* Fixed height for consistency */
    padding: 0 30px;
    width: 350px;
    /* Standardized width */
    max-width: 100%;
    /* Prevent overflow on small screens */
    /* Match parent width or use global fixed width? User said "same width". 
       If I use 100% here, it fits the card. But user said "same width as Hero CTA".
       The Hero CTA is standalone. 
       If the card is narrow, 320px might overflow or look big. 
       However, "wszystkie przyciski" implies uniformity. 
       Let's use the same width if possible, or max-width 100%. 
    */
    width: 320px;
    max-width: 100%;
    /* Prevent overflow on small screens */
}



.training-card .cta-button.small:hover {
    background: #b45f06;
    color: #ffffff;
}

/* Cleaned up duplicate section */

@media (max-width: 1024px) {
    .offer-section {
        background-position: center bottom;
        /* Adjust for mobile? Or hide? */
        background-size: cover;
    }

    .offer-section .container {
        grid-template-columns: 1fr;
    }
}

/* Mobile adjustments for combined section */
@media (max-width: 992px) {
    .container-flex {
        flex-direction: column;
        gap: 80px;
    }

    .contact-column,
    .newsletter-column {
        width: 100%;
    }
}

/* Newsletter Column - Modern High Contrast Design */
.newsletter-column {
    flex: 1;
    padding: 60px 50px;
    background-color: #c0392b;
    /* Professional Red */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.newsletter-column h3 {
    color: #ffffff;
    font-size: 2.22rem;
    margin-bottom: 15px;
}

.newsletter-icon {
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-column p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    font-size: 1.15rem;
    font-weight: 200;
}

.newsletter-form .form-group {
    margin-bottom: 20px;
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 15px 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #ffffff;
    color: var(--accent-color);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--text-color);
    opacity: 0.7;
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
}

.newsletter-column .cta-button {
    width: 100%;
    background-color: var(--accent-color);
    /* Navy brand color */
    color: #ffffff;
    border: none;
    justify-content: center;
}

.newsletter-column .cta-button:hover {
    background-color: #ffffff;
    color: var(--accent-color);
    transform: translateY(-2px);
    opacity: 1;
}

/* Cooperation Tiles - Minimalist Design */
.cooperation-section {
    background-color: var(--bg-color);
    /* Light background instead of navy */
    padding: var(--section-spacing) 0;
}

.cooperation-header {
    margin-bottom: 60px;
    text-align: center;
}

.cooperation-header h2 {
    color: var(--text-color);
    /* Dark title on light bg */
}

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.tile {
    padding: 40px;
    background: transparent;
    /* No background */
    border: 1px solid #ddd;
    /* Subtle border */
    color: var(--text-color);
    /* Dark text */
    transition: all 0.3s ease;
}


.tile-number {
    font-family: var(--serif-font);
    font-size: 4rem;
    color: #b45f06;
    /* Brown/rust accent */
    line-height: 1;
    margin-bottom: 20px;
}

.tile h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--accent-color);
    /* Navy headings */
    line-height: 1.3;
}

.tile p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 15px;
}

.tile .goal {
    font-size: 0.9rem;
    color: #b45f06;
    /* Brown accent for goal */
    margin-bottom: 10px;
    font-weight: 500;
}

.tile .goal-text {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 400;
}

/* Why Me Section */
.why-me-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.why-me-grid.reverse {
    direction: rtl;
}

.why-me-grid.reverse .why-me-content {
    direction: ltr;
}

.why-me-content h2 {
    font-size: 3rem;
    margin-bottom: 30px;
}

.why-me-image img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
}

/* Final CTA */
.final-cta {
    background-color: var(--accent-color);
    /* Navy background */
    background-image: url('images/biznes3.png');
    /* BG Image */
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    /* Multiply effect */
    color: #ffffff;
    text-align: center;
    padding: 120px 0;
    /* Increased padding */
}

.final-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #ffffff;
    /* Ensure white text */
}

.final-cta p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 40px auto;
    color: #ffffff;
    /* Changed from light gray to white for better contrast of brand on dark */
}

.about-section {
    text-align: center;
    padding: 100px 0;
    background-color: #f5f5f5;
    /* Subtle background for distinction */
}

.about-section p {
    font-size: 1.25rem;
    max-width: 850px;
    margin: 0 auto 30px auto;
    /* Center the block and add space below */
    line-height: 1.6;
}

.about-text {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.about-text h4 {
    font-family: var(--serif-font);
    font-size: 1.8rem;
    color: var(--accent-color);
    margin: 45px 0 20px 0;
}

.qualifications-frame {
    margin: 50px auto;
    padding: 40px;
    border: 1px solid var(--accent-color);
    border-radius: 30px;
    background-color: var(--accent-color);
    color: #ffffff;
    max-width: 1400px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.qualifications-frame h4 {
    margin-top: 0;
    font-family: var(--serif-font);
    font-weight: 400;
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 30px;
    text-align: center;
}

.qualifications-frame ul {
    list-style: none;
    padding: 0;
    display: inline-block;
    text-align: left;
}

.qualifications-frame li {
    font-size: 1.15rem;
    font-weight: 300;
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    line-height: 1.4;
    color: #ffffff;
}

.qualifications-frame li strong {
    color: #ffffff;
}

.qualifications-frame li::before {
    content: "•";
    color: #b45f06;
    position: absolute;
    left: 0;
    top: -5px;
    /* Adjust top to center */
    font-size: 2.5rem;
    /* Enlarge */
    line-height: 1;
    /* Reset line-height */
}

/* Contact */
/* Combined Contact & Newsletter Section */
.contact-combined-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #fcfcfc 0%, #f7f7f7 100%);
}

.container-flex {
    display: flex;
    gap: 80px;
    align-items: flex-end;
    /* Align cards to the bottom */
}

.contact-column {
    flex: 1.4;
    text-align: center;
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.contact-logo {
    margin-bottom: 35px;
    opacity: 0.8;
}

.contact-logo img {
    max-width: 140px;
    height: auto;
}

.contact-form {
    margin-top: 50px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 0;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
    text-align: center;
    /* Centered form inputs as well */
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
}

.consent-group {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: left;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.consent-group input[type="checkbox"] {
    width: auto;
    margin-top: 5px;
    cursor: pointer;
}

.consent-group label {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-color);
    cursor: pointer;
}

.consent-group label a {
    color: var(--accent-color);
    text-decoration: underline;
}

.submit-btn {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

footer {
    padding: 40px 0;
    border-top: 1px solid #eee;
    font-size: 0.8rem;
    color: var(--text-color);
    text-align: center;
}

@media (max-width: 1024px) {

    .container {
        padding: 0 10px;
        /* Smaller padding on mobile */
    }

    body {
        font-size: 1rem;
    }

    p,
    .offer-item p,
    .newsletter-column p,
    .hero-content p {
        font-size: 1rem;
    }

    header .container {
        padding: 0 20px;
    }

    .hero-grid,
    .offer-grid,
    .tiles-grid,
    .why-me-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero {
        height: auto;
        padding-top: 600px;
        padding-bottom: 30px;
        /* Make space for the image at top */
        display: block;
        /* Align items for mobile */
    }

    .hero-parallax-bg img {
        display: none;
        /* Hide desktop image */
    }

    .hero-parallax-bg {
        background: url('images/foto-main-mobile-2.jpg') no-repeat top center;
        background-size: 130% auto !important;
        /* Increased to 130% and forced */
        z-index: 0;
    }



    .hero .container {
        justify-content: center;
        /* Center content */
        text-align: center;
    }


    /* Hide desktop name on mobile */
    .hero-name-desktop {
        display: none;
    }

    .hero-content {
        background: transparent;
        backdrop-filter: none;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 0;
        /* Reset margin on mobile */
    }

    /* Mobile Hero Styling */
    .hero-mobile-elements {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        width: 100%;
    }

    .hero-mobile-image {
        width: 280px;
        height: auto;
        /* Allow height to adjust or keep fixed? Let's try auto or keep square? User just said 'no round frame'. Let's keep existing size but square, or maybe auto height. Original image might be portrait. */
        /* Let's stick to simple removal of border-radius first. */
        /* Actually, if I remove border-radius, I should probably also check aspect ratio. */
        /* Let's try: width 100% max-width 300px? Or key 280px. */
        /* Use 280px width, auto height to respect aspect ratio. */
        /* And remove border-radius. */
        width: 280px;
        height: auto;
        border-radius: 0;
        /* Removed circular frame */
        overflow: hidden;
        margin-bottom: 20px;
        border: 4px solid #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .hero-mobile-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-name-mobile {
        font-family: var(--serif-font);
        font-size: 1.6rem;
        /* Increased to 1.6rem */
        color: var(--text-color);
        margin: 30px 0 30px 0;
        /* Increased gap to title */
        text-align: center;
        line-height: 1.2;
    }

    .hero-mobile-image-container {
        padding: 10px;
        text-align: center;
    }

    .hero-mobile-image-container img {
        max-width: 100%;
        height: auto;
        border-radius: 0;
    }

    .hero-content h1 {
        font-size: 2.8rem;
        /* Reverted to 2.8rem */
        margin-top: 40px;
        /* Moved 20px up from 60px */
    }

    .hero-content p {
        padding-right: 0;
    }

    h2 {
        font-size: 2rem;
        /* Smaller than hero h1 */
    }

    h3 {
        font-size: 1.5rem;
        /* Even smaller */
    }

    .why-me-grid.reverse {
        direction: ltr;
    }

    /* Mobile Header */
    .hamburger {
        display: block;
    }

    .logo {
        font-size: 1.58rem;
        /* Another 20% larger */
        line-height: 1.1;
        /* Tighter line-height */
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: var(--bg-color);
        padding: 100px 40px;
        transition: right 0.3s;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    }

    nav.active {
        right: 0;
    }

    nav ul {
        flex-direction: column;
        gap: 30px;
    }

    nav ul a {
        font-size: 1.2rem;
    }

    .tiles-grid {
        grid-template-columns: 1fr;
    }

    .training-tiles-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile CTA styling */
    /* Mobile CTA styling */
    .cta-button {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100px;
        width: 100%;
        /* On mobile, full width is usually better, but user asked for specific width? 
           "Based on Porozmawiajmy". 
           Let's keep 100% for mobile specific override if it was there, 
           or respect the desktop fixed width if it fits. 
           Actually, the previous code had width: 100% for mobile. 
           I should check if I should keep that. 
           Usually mobile buttons are full width. 
           I will leave the existing mobile override width: 100% as it's cleaner for mobile UX 
           unless user specifically complains about mobile too. 
        */
        width: 100%;
        max-width: 320px;
        /* Match the desktop width but allow full width up to that size? 
           Or just 100%? The user request "wszystkie" might imply mobile too. 
           Let's set max-width: 320px + margin auto to center it?
        */
        margin: 0 auto;
        padding: 0 10px;
    }

    .hero .cta-button {
        margin-top: -20px;
    }

    .offer-item {
        text-align: center;
        margin-bottom: 40px;
    }

    .offer-item p {
        text-align: center;
    }

    .training-card {
        text-align: center;
    }

    .training-card-content {
        align-items: center;
    }

    .training-card-footer {
        padding-top: 20px;
    }

    .offer-item h3 {
        text-align: center;
    }

    .offer-section {
        background-attachment: scroll;
        background-position: center bottom;
        /* Moved to edge */
        background-size: 234px auto;
        padding-top: 20px;
        padding-bottom: 520px;
        /* Increased by another 30px */
    }
}