.header {
    /* H:60-88; */ /* P:…(skrótem) */
    height: clamp(60px, calc(60px + (28) * ((100vw - 375px) / (1065))), 88px);
    padding: 0px clamp(12px, calc(12px + (32) * ((100vw - 375px) / (1065))), 44px) 0px clamp(12px, calc(12px + (32) * ((100vw - 375px) / (1065))), 44px);
}

.overlay-section .section-width {
    /* P:…(skrótem) */
    padding: clamp(60px, calc(60px + (28) * ((100vw - 375px) / (1065))), 88px) 12px 20px 12px;
}

/* =========================================================
   STRUKTURA GŁÓWNA
   ========================================================= */

.section {
    /* P:…(skrótem) */
    padding: clamp(48px, calc(48px + (48) * ((100vw - 375px) / (1065))), 96px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px) clamp(48px, calc(48px + (48) * ((100vw - 375px) / (1065))), 96px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px);
}

.section-header {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(32px, calc(32px + (16) * ((100vw - 375px) / (1065))), 48px) 0px;
}

.section-lead {
    /* M:…(skrótem) */
    margin: clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px 0px 0px;
}

.header {
    /* P:…(skrótem) */
    padding: clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px) clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px);
}

.header .col-right {
    
    gap: clamp(8px, calc(8px + (8) * ((100vw - 375px) / (1065))), 16px);
}

.menu-desktop .menu {
    
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.overlay-section .section-content {
    /* P:…(skrótem) */
    padding: clamp(32px, calc(32px + (16) * ((100vw - 375px) / (1065))), 48px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px) clamp(32px, calc(32px + (16) * ((100vw - 375px) / (1065))), 48px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px);
}

.overlay-section .mobile-menu li + li {
    /* M:…(skrótem) */
    margin: clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) 0px 0px 0px;
}

/* Przykładowe zachowanie mobilne: na małych ekranach możesz przez JS / media dodać klasę,
   ale same rozmiary i odstępy ogarnia clamp. */


/* =========================================================
   HERO
   ========================================================= */

.section-hero {
    /* P:…(skrótem) */
    padding: clamp(64px, calc(64px + (48) * ((100vw - 375px) / (1065))), 112px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px) clamp(64px, calc(64px + (48) * ((100vw - 375px) / (1065))), 112px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px);
}

.hero-inner {
    
    grid-template-columns: clamp(280px, calc(280px + (80) * ((100vw - 375px) / (1065))), 360px) auto;
    gap: clamp(24px, calc(24px + (16) * ((100vw - 375px) / (1065))), 40px);
}

.hero-text {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) 0px;
}

.hero-title {
    /* M:…(skrótem) */
    margin: clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px;
}

.hero-lead {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) 0px;
}

.hero-actions {
    /* M:…(skrótem) */
    gap: clamp(8px, calc(8px + (8) * ((100vw - 375px) / (1065))), 16px);
    margin: 0px 0px clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) 0px;
}

.hero-bullets {
    /* M:…(skrótem) */
    margin: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) 0px 0px 0px;
}

/* =========================================================
   PRZYCISKI
   ========================================================= */

/* F:14-16; */
/* P:10-14 20-32; */
.btn {
    /* P:…(skrótem) */
    padding: clamp(10px, calc(10px + (4) * ((100vw - 375px) / (1065))), 14px) clamp(20px, calc(20px + (12) * ((100vw - 375px) / (1065))), 32px) clamp(10px, calc(10px + (4) * ((100vw - 375px) / (1065))), 14px) clamp(20px, calc(20px + (12) * ((100vw - 375px) / (1065))), 32px);
}

/* =========================================================
   SEKCJA "O NAS"
   ========================================================= */

.section-about .section-content {
    
    grid-template-columns: 1px 1px;
    gap: clamp(24px, calc(24px + (16) * ((100vw - 375px) / (1065))), 40px);
}

.about-highlights {
    /* M:…(skrótem) */
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
    margin: clamp(24px, calc(24px + (16) * ((100vw - 375px) / (1065))), 40px) 0px 0px 0px;
}

.about-highlight {
    /* P:…(skrótem) */
    padding: clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

/* =========================================================
   SEKCJA USŁUGI
   ========================================================= */

.section-services .section-content {
    /* M:…(skrótem) */
    margin: 0px 0px 0px 0px;
}

.services-grid {
    
    grid-template-columns: clamp(160px, calc(160px + (60) * ((100vw - 375px) / (1065))), 220px) clamp(160px, calc(160px + (60) * ((100vw - 375px) / (1065))), 220px);
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.service-card {
    /* P:…(skrótem) */
    padding: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.service-card-title {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px;
}

.service-card-note {
    /* M:…(skrótem) */
    margin: clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px 0px 0px;
}

/* =========================================================
   SEKCJA CENNIK
   ========================================================= */

.section-pricing .section-content {
    /* M:…(skrótem) */
    margin: 0px 0px 0px 0px;
}

.pricing-grid {
    
    grid-template-columns: clamp(220px, calc(220px + (40) * ((100vw - 375px) / (1065))), 260px) clamp(220px, calc(220px + (40) * ((100vw - 375px) / (1065))), 260px);
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.pricing-item {
    /* P:…(skrótem) */
    padding: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.pricing-description {
    /* M:…(skrótem) */
    margin: clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px 0px 0px;
}

/* F:18-22; */
.pricing-price {
    /* M:…(skrótem) */
    margin: clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) 0px 0px 0px;
}

.pricing-badge {
    /* P:…(skrótem) */ /* M:…(skrótem) */
    padding: clamp(4px, calc(4px + (2) * ((100vw - 375px) / (1065))), 6px) clamp(10px, calc(10px + (4) * ((100vw - 375px) / (1065))), 14px) clamp(4px, calc(4px + (2) * ((100vw - 375px) / (1065))), 6px) clamp(10px, calc(10px + (4) * ((100vw - 375px) / (1065))), 14px);
    margin: clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px 0px 0px;
}

/* =========================================================
   SEKCJA GALERIA
   ========================================================= */

.section-gallery .section-header {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(24px, calc(24px + (8) * ((100vw - 375px) / (1065))), 32px) 0px;
}

.gallery-grid {
    
    grid-template-columns: clamp(160px, calc(160px + (60) * ((100vw - 375px) / (1065))), 220px) clamp(160px, calc(160px + (60) * ((100vw - 375px) / (1065))), 220px);
    gap: clamp(8px, calc(8px + (8) * ((100vw - 375px) / (1065))), 16px);
}

/* =========================================================
   SEKCJA OPINIE
   ========================================================= */

.section-testimonials .section-header {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(24px, calc(24px + (8) * ((100vw - 375px) / (1065))), 32px) 0px;
}

.testimonials-list {
    
    grid-template-columns: clamp(220px, calc(220px + (40) * ((100vw - 375px) / (1065))), 260px) clamp(220px, calc(220px + (40) * ((100vw - 375px) / (1065))), 260px);
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.testimonial {
    /* P:…(skrótem) */
    padding: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

/* F:12-14; */
.testimonial-meta {
    /* M:…(skrótem) */
    margin: clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) 0px 0px 0px;
}

/* =========================================================
   SEKCJA "JAK DZIAŁAMY" (KROKI)
   ========================================================= */

.section-steps .section-header {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(24px, calc(24px + (8) * ((100vw - 375px) / (1065))), 32px) 0px;
}

.steps-list {
    
    grid-template-columns: clamp(220px, calc(220px + (40) * ((100vw - 375px) / (1065))), 260px) clamp(220px, calc(220px + (40) * ((100vw - 375px) / (1065))), 260px);
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.step-item {
    /* P:…(skrótem) */
    padding: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.step-title {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px;
}

/* =========================================================
   SEKCJA KONTAKT
   ========================================================= */

.section-contact .section-content {
    
    grid-template-columns: 1px 1px;
    gap: clamp(24px, calc(24px + (16) * ((100vw - 375px) / (1065))), 40px);
}

.contact-details .contact-item {
    /* M:…(skrótem) */
    margin: clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px 0px 0px;
}

.contact-extra {
    /* M:…(skrótem) */
    margin: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) 0px 0px 0px;
}

/* Miejsce na formularz (jeśli włączysz go shortcode’em) */
.contact-form-wrapper {
    /* P:…(skrótem) */
    padding: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px) clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

/* Możesz w razie potrzeby dodać osobne style dla np. CF7 */


/* =========================================================
   STOPKA
   ========================================================= */

.footer-wrapper {
    /* P:…(skrótem) */
    padding: clamp(32px, calc(32px + (16) * ((100vw - 375px) / (1065))), 48px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px) clamp(32px, calc(32px + (16) * ((100vw - 375px) / (1065))), 48px) clamp(16px, calc(16px + (16) * ((100vw - 375px) / (1065))), 32px);
}

.footer-inner {
    
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.footer-top {
    
    grid-template-columns: 1px 1px 1px;
    gap: clamp(16px, calc(16px + (8) * ((100vw - 375px) / (1065))), 24px);
}

.footer-brand-tagline {
    /* M:…(skrótem) */
    margin: clamp(4px, calc(4px + (4) * ((100vw - 375px) / (1065))), 8px) 0px 0px 0px;
}

.footer-contact-item {
    /* M:…(skrótem) */
    margin: clamp(4px, calc(4px + (4) * ((100vw - 375px) / (1065))), 8px) 0px 0px 0px;
}

.footer-social-title {
    /* M:…(skrótem) */
    margin: 0px 0px clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px) 0px;
}

.footer-social-links {
    
    gap: clamp(8px, calc(8px + (4) * ((100vw - 375px) / (1065))), 12px);
}

.footer-social-link {
    /* P:…(skrótem) */
    padding: clamp(6px, calc(6px + (2) * ((100vw - 375px) / (1065))), 8px) clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px) clamp(6px, calc(6px + (2) * ((100vw - 375px) / (1065))), 8px) clamp(12px, calc(12px + (6) * ((100vw - 375px) / (1065))), 18px);
}