/* Pakiet CSS motywu michlor-child, generowany automatycznie (custom-snippets/css-pakiet.php). Nie edytuj: zmieniaj pliki w assets/css/. */

/* ===== michlor-child-style: style.css ===== */
/*
 Theme Name:   Michlor Child
 Theme URI:    https://michlor.pl
 Description:  Motyw potomny dla projektu Michlor
 Author:       Michlor
 Author URI:   https://michlor.pl
 Template:     twentytwentyfive
 Version:      1.7.7
 Text Domain:  michlor-child
*/

/* ============================================================
   Design System – CSS Variables
   ============================================================ */
:root {
    /* Kolory */
    --color-primary:       #0A0A0A;
    --color-secondary:     #FFFFFF;
    --color-accent:        #C9A96E;
    --color-accent-dark:   #A07840;
    --color-bg:            #FAFAFA;
    --color-muted:         #6B6B6B;

    /* Typografia */
    --font-heading:        'Playfair Display', Georgia, serif;
    --font-body:           'Inter', system-ui, sans-serif;
    --font-size-base:      16px;
    --line-height-base:    1.7;

    /* Spacing */
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   2rem;
    --space-lg:   4rem;
    --space-xl:   8rem;

    /* Border radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;

    /* Transitions */
    --transition: 0.3s ease;
}


/* === Powiekszenie czcionki w menu (+2px) === */
.mhdr__link { font-size: 1rem !important; }
.mhdr__drop-link strong { font-size: 1rem !important; }
.mhdr__drop-link small { font-size: 0.875rem !important; }


/* ===== michlor-header: assets/css/header.css ===== */
/* ============================================================
   MICHLOR — Header / Navigation CSS
   Klasy: .mhdr (michlor-header)
   ============================================================ */

/* ── Bazowy header ───────────────────────────────────────── */
.mhdr {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    1000;
    transition: background-color var(--transition-base),
                backdrop-filter  var(--transition-base),
                box-shadow       var(--transition-base),
                padding          var(--transition-base);

    /* Start: przezroczysty (nad hero wideo) */
    background-color: transparent;
    padding:          1.25rem 0;
}

/* Stan po scrollu — glassmorphism */
.mhdr.is-scrolled {
    background-color: rgba(4, 16, 30, 0.80);
    backdrop-filter:  blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:       0 1px 0 rgba(79, 163, 212, 0.12),
                      0 4px 24px rgba(4, 16, 30, 0.5);
    padding:          0.875rem 0;
}

/* ── Inner container ─────────────────────────────────────── */
.mhdr__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       1280px;
    margin:          0 auto;
    padding:         0 clamp(1.5rem, 4vw, 3rem);
    gap:             2rem;
}

/* ── Logo ────────────────────────────────────────────────── */
.mhdr__logo {
    text-decoration: none;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
}

.mhdr__logo img {
    height:     36px;
    width:      auto;
    display:    block;
}

.mhdr__logo-text {
    font-family:    var(--font-heading);
    font-size:      1.375rem;
    font-weight:    800;
    letter-spacing: -0.04em;
    color:          var(--color-text);
    line-height:    1;
}

.mhdr__logo-dot {
    color: var(--color-accent);
}

/* ── Menu główne ─────────────────────────────────────────── */
.mhdr__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.mhdr__menu {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.mhdr__item {
    position: relative;
}

/* Link / button bazowy */
.mhdr__link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    padding:         0.5rem 0.875rem;
    font-family:     var(--font-body);
    font-size:       0.875rem;
    font-weight:     500;
    color:           rgba(232, 241, 242, 0.80);
    text-decoration: none;
    background:      none;
    border:          none;
    border-radius:   var(--radius-sm);
    cursor:          pointer;
    transition:      color            var(--transition-fast),
                     background-color var(--transition-fast);
    white-space:     nowrap;
}

.mhdr__link:hover,
.mhdr__item--has-drop:hover > .mhdr__link {
    color:            var(--color-text);
    background-color: rgba(255, 255, 255, 0.06);
}

/* ── Split: link + chevron toggle (Zmiękczacze) ─────────── */
.mhdr__split {
    display:     flex;
    align-items: stretch;
}

.mhdr__split .mhdr__link {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding-right: 0.4rem;
}

.mhdr__split .mhdr__link:hover {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.mhdr__drop-toggle {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0.5rem 0.5rem;
    background:       none;
    border:           none;
    border-radius:    0 var(--radius-sm) var(--radius-sm) 0;
    cursor:           pointer;
    color:            rgba(232, 241, 242, 0.80);
    transition:       color            var(--transition-fast),
                      background-color var(--transition-fast);
}

.mhdr__drop-toggle:hover,
.mhdr__item--has-drop:hover > .mhdr__split .mhdr__drop-toggle {
    color:            var(--color-text);
    background-color: rgba(255, 255, 255, 0.06);
}

.mhdr__item--has-drop:hover > .mhdr__split .mhdr__link {
    color:            var(--color-text);
    background-color: rgba(255, 255, 255, 0.06);
}

/* Chevron animacja */
.mhdr__chevron {
    transition:    transform var(--transition-fast);
    flex-shrink:   0;
    opacity:       0.6;
}

.mhdr__item--has-drop:hover .mhdr__chevron,
.mhdr__item--has-drop.is-open .mhdr__chevron {
    transform: rotate(180deg);
    opacity:   1;
}

/* ── Dropdown ────────────────────────────────────────────── */
.mhdr__dropdown {
    position:         absolute;
    top:              100%;
    left:             50%;
    transform:        translateX(-50%) translateY(-8px);
    min-width:        260px;
    background:       rgba(6, 26, 46, 0.95);
    backdrop-filter:  blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:           1px solid var(--glass-border);
    border-radius:    var(--radius-md);
    box-shadow:       0 16px 48px rgba(4, 16, 30, 0.7),
                      0 0 0 1px rgba(79, 163, 212, 0.06);
    /* padding-top = gap między linkiem a panelem — kursor nie wypada z :hover */
    padding:          0.75rem 0.5rem 0.5rem;
    opacity:          0;
    visibility:       hidden;
    pointer-events:   none;
    transition:       opacity   var(--transition-base),
                      transform var(--transition-base),
                      visibility var(--transition-base);
    z-index:          100;
}

/* Niewidoczny most nad dropdownem — kursor nie wypada z :hover przy przechodzeniu */
.mhdr__dropdown::before {
    content:  '';
    position: absolute;
    top:      -0.75rem;
    left:     0;
    right:    0;
    height:   0.75rem;
}

.mhdr__item--has-drop:hover .mhdr__dropdown,
.mhdr__item--has-drop.is-open .mhdr__dropdown {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translateX(-50%) translateY(0);
}

.mhdr__drop-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0.125rem;
}

.mhdr__drop-link {
    display:         flex;
    align-items:     center;
    gap:             0.875rem;
    padding:         0.75rem 0.875rem;
    border-radius:   var(--radius-sm);
    text-decoration: none;
    transition:      background-color var(--transition-fast);
}

.mhdr__drop-link:hover {
    background-color: rgba(79, 163, 212, 0.08);
}

.mhdr__drop-icon {
    font-size:    1.125rem;
    flex-shrink:  0;
    width:        28px;
    text-align:   center;
    filter:       grayscale(0.3);
}

.mhdr__drop-link strong {
    display:     block;
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--color-text);
    line-height: 1.3;
}

.mhdr__drop-link small {
    display:     block;
    font-size:   0.75rem;
    color:       var(--color-muted);
    margin-top:  0.125rem;
    font-weight: 400;
}

/* ── Actions (CTA + burger) ──────────────────────────────── */
.mhdr__actions {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-shrink: 0;
}

.mhdr__cta {
    display:          inline-flex;
    align-items:      center;
    padding:          0.5rem 1.25rem;
    font-family:      var(--font-body);
    font-size:        0.875rem;
    font-weight:      500;
    color:            #04101E;
    background-color: var(--color-accent);
    border-radius:    var(--radius-pill);
    text-decoration:  none;
    transition:       background-color var(--transition-fast),
                      box-shadow       var(--transition-fast),
                      transform        var(--transition-fast);
    white-space:      nowrap;
    box-shadow:       0 0 16px rgba(79, 163, 212, 0.3);
}

.mhdr__cta:hover {
    background-color: var(--color-accent-glow);
    box-shadow:       var(--glow-accent);
    transform:        translateY(-1px);
    color:            #04101E;
}

/* ── Hamburger ───────────────────────────────────────────── */
.mhdr__burger {
    display:        none;
    flex-direction: column;
    justify-content: center;
    gap:            5px;
    width:          40px;
    height:         40px;
    padding:        8px;
    background:     rgba(255, 255, 255, 0.06);
    border:         1px solid rgba(255, 255, 255, 0.1);
    border-radius:  var(--radius-sm);
    cursor:         pointer;
    transition:     background-color var(--transition-fast);
}

.mhdr__burger:hover {
    background: rgba(79, 163, 212, 0.1);
    border-color: var(--glass-border);
}

.mhdr__burger-line {
    display:          block;
    width:            100%;
    height:           1.5px;
    background-color: var(--color-text);
    border-radius:    2px;
    transition:       transform var(--transition-base),
                      opacity   var(--transition-base),
                      width     var(--transition-base);
    transform-origin: center;
}

/* Burger → X po otwarciu */
.mhdr__burger.is-open .mhdr__burger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.mhdr__burger.is-open .mhdr__burger-line:nth-child(2) {
    opacity:   0;
    transform: scaleX(0);
}
.mhdr__burger.is-open .mhdr__burger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Przycisk zamknięcia (tylko mobile) ─────────────────── */
.mhdr__close {
    display: none;
}

/* ── Mobile menu overlay ─────────────────────────────────── */
@media (max-width: 1024px) {
    /* Logo wyzej: przy przyklejonym naglowku i ukrytych okruszkach
       plakietka .mpage-hero__overline ladowala pod samym logo.
       Naglowek na mobile i tablecie ma 60 px logo (wymuszone snippetem
       WPCode z !important), wiec skracamy sam padding: 100 px wysokosci
       schodzi na 76 px. Druga polowa poprawki siedzi w subpage.css,
       w gornym paddingu .mpage-hero__inner. Zmierzone 2026-09-02:
       375 px logo 20-80 kontra plakietka od 64, 900 px logo 20-80
       kontra plakietka od 72. W obu przypadkach nachodzilo. */
    .mhdr,
    .mhdr.is-scrolled {
        padding: 0.5rem 0;
    }

    /* Przycisk X wewnątrz panelu */
    .mhdr__close {
        display:          flex;
        align-items:      center;
        justify-content:  center;
        position:         absolute;
        top:              1.125rem;
        right:            1.125rem;
        width:            38px;
        height:           38px;
        background:       rgba(255, 255, 255, 0.07);
        border:           1px solid rgba(255, 255, 255, 0.12);
        border-radius:    var(--radius-sm);
        cursor:           pointer;
        color:            var(--color-text);
        transition:       background-color var(--transition-fast),
                          border-color     var(--transition-fast);
        flex-shrink:      0;
        z-index:          1;
    }

    .mhdr__close:hover {
        background:   rgba(79, 163, 212, 0.14);
        border-color: var(--glass-border);
    }

    .mhdr__split {
        width: 100%;
    }

    .mhdr__split .mhdr__link {
        flex:          1;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }

    .mhdr__drop-toggle {
        padding: 0.875rem 1rem;
    }

    .mhdr__burger {
        display: flex;
    }

    .mhdr__nav {
        position:         fixed;
        top:              0;
        right:            0;
        bottom:           0;
        width:            min(320px, 85vw);
        background:       rgba(4, 16, 30, 0.97);
        backdrop-filter:  blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left:      1px solid var(--glass-border);
        padding:          6rem 1.5rem 2rem;
        transform:        translateX(100%);
        transition:       transform var(--transition-base);
        overflow-y:       auto;
        overflow-x:       hidden;
        justify-content:  flex-start;
        flex-direction:   column;
        z-index:          999;
    }

    .mhdr__nav.is-open {
        transform: translateX(0);
    }

    .mhdr__menu {
        flex-direction: column;
        align-items:    stretch;
        gap:            0.25rem;
        width:          100%;
    }

    .mhdr__link {
        width:    100%;
        padding:  0.875rem 1rem;
        font-size: 1rem;
        justify-content: space-between;
    }

    /* Dropdown w mobile — inline, nie absolutny */
    .mhdr__dropdown {
        position:   static;
        transform:  none;
        width:      100%;
        min-width:  unset;
        margin-top: 0.25rem;
        border:     none;
        border-left: 2px solid var(--color-accent);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        padding:    0.25rem 0 0.25rem 0.5rem;
        background: rgba(79, 163, 212, 0.04);
        backdrop-filter: none;
        box-shadow: none;
        opacity:    1;
        visibility: visible;
        pointer-events: auto;
        display:    none;
    }

    .mhdr__item--has-drop.is-open .mhdr__dropdown {
        display: block;
        transform: none;
    }

    /* Zapobiegaj wylewaniu się submenus poza panel */
    .mhdr__item--has-drop:hover .mhdr__dropdown {
        transform: none;
    }

    .mhdr__drop-link {
        padding: 0.625rem 0.75rem;
    }

    .mhdr__item--has-drop:hover .mhdr__dropdown {
        /* Reset hover na mobile — tylko klik */
        opacity:    1;
        visibility: visible;
    }

    /* Overlay za mobilnym menu */
    .mhdr__nav::before {
        content:    '';
        position:   fixed;
        inset:      0;
        right:      min(320px, 85vw);
        background: rgba(4, 16, 30, 0.5);
        z-index:    -1;
    }
}

@media (max-width: 480px) {
    .mhdr__cta {
        display: none; /* schowany na bardzo małych — jest w menu */
    }
}


/* ══════════════════════════════════════════════════════════
   Przelacznik jezyka PL / EN
   Przeniesione z buildu statycznego (build_en.py), 2026-08-16
   ══════════════════════════════════════════════════════════ */

.mlang {
    display:       inline-flex;
    align-items:   center;
    gap:           2px;
    margin-left:   .75rem;
    border:        1px solid rgba(79, 163, 212, .35);
    border-radius: 999px;
    padding:       2px;
    flex-shrink:   0;
}

.mlang a {
    display:        block;
    padding:        3px 9px;
    border-radius:  999px;
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .04em;
    text-decoration: none;
    color:          #9fb6c8;
    line-height:    1.4;
    /* 2026-08-21: bez tego zmiana jezyka przeskakiwala kolorem bez przejscia,
       mimo ze reszta naglowka korzysta z --transition-fast */
    transition:     background-color var(--transition-fast, .15s ease),
                    color            var(--transition-fast, .15s ease);
}

.mlang a[aria-current="true"] {
    background: var(--color-accent, #4FA3D4);
    color:      #04101E;
}

.mlang a:not([aria-current="true"]):hover {
    color: #e8f1f2;
}

@media (max-width: 900px) {
    .mlang   { margin-left: .4rem; }
    .mlang a { padding: 3px 7px; font-size: .68rem; }
}


/* ===== michlor-services: assets/css/services.css ===== */
/* ============================================================
   MICHLOR — Services Section CSS
   Klasy: .msrv (michlor-services)
   Wersja: lista redakcyjna (paski) zamiast kart flip
   ============================================================ */

/* ── Sekcja ──────────────────────────────────────────────── */
.msrv {
    position:         relative;
    background-color: var(--color-bg-deep);
    padding:          var(--space-lg) 0;
    overflow:         hidden;

    /* --- Kolorystyka sekcji: biało-niebieski gradient (jak H1) --- */
    /* Nadpisujemy akcent tylko w tej sekcji: turkus -> błękit.      */
    --color-accent:   #4FA3D4;                 /* baza: spokojny błękit */
    --blue-light:     #90E0EF;                 /* jasny biało-niebieski (koniec gradientu H1) */
    --grad-blue:      linear-gradient(135deg, #2E7FB5 0%, #90E0EF 100%);
    --glass-border:   rgba(144, 224, 239, 0.22);
}

/* Helper: gradient „przycięty" do tekstu (biało-niebieski) */
.msrv .grad-text,
.msrv__row-num,
.msrv__row:hover .msrv__row-title,
.msrv__row:hover .msrv__row-arrow {
    background:              var(--grad-blue);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent;
}

/* Dekoracyjny separator od hero */
.msrv::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-accent) 30%,
        var(--color-accent) 70%,
        transparent 100%
    );
    opacity: 0.2;
}

.msrv__inner {
    max-width: 1280px;
    margin:    0 auto;
    padding:   0 clamp(1.5rem, 4vw, 3rem);
}

/* ── Nagłówek sekcji (bez zmian) ─────────────────────────── */
.msrv__head {
    text-align:    center;
    margin-bottom: clamp(3rem, 5vw, 5rem);
}

.msrv__overline {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.msrv__title {
    font-family:    var(--font-heading);
    font-size:      clamp(2rem, 4vw, 3rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 1rem;
}

.msrv__title-em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.msrv__sub {
    font-size:   1rem;
    color:       var(--color-muted);
    max-width:   480px;
    margin:      0 auto;
    line-height: var(--line-height-body);
}

/* ── Lista usług (paski) ─────────────────────────────────── */
.msrv__list {
    border-top: 1px solid rgba(232, 241, 242, 0.12);
}

.msrv__row {
    display:               grid;
    grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1.5fr) 34px;
    gap:                   clamp(0.875rem, 2.6vw, 2.25rem);
    align-items:           start;
    padding:               clamp(1.625rem, 3.2vw, 2.375rem) clamp(0.5rem, 1vw, 1rem);
    border-bottom:         1px solid rgba(232, 241, 242, 0.12);
    position:              relative;
    text-decoration:       none;
    transition:            background-color var(--transition-base);
}

.msrv__row:hover {
    background-color: rgba(232, 241, 242, 0.045);
}

/* Turkusowa krawędź z lewej przy hover */
.msrv__row::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      3px;
    background: var(--color-accent);
    opacity:    0;
    transition: opacity var(--transition-base);
}

.msrv__row:hover::before {
    opacity: 1;
}

/* Kolumna wiodąca: numer + miniaturka zdjęcia */
.msrv__row-lead {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

/* Numer */
.msrv__row-num {
    font-family:    var(--font-heading);
    font-weight:    700;
    font-size:      0.875rem;
    letter-spacing: 0.18em;
    color:          var(--color-accent);
}

/* Miniaturka — wrapper (ramka, zaokrąglenie, przycięcie refleksu) */
.msrv__thumb-wrap {
    display:       block;
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radius-md);
    border:        1px solid rgba(144, 224, 239, 0.28);
    transition:    border-color var(--transition-base);
}

.msrv__row:hover .msrv__thumb-wrap {
    border-color: var(--color-accent);
}

/* Refleks świetlny — smuga przechodząca po najechaniu */
.msrv__thumb-wrap::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:      linear-gradient(115deg,
                        transparent 30%,
                        rgba(255, 255, 255, 0.38) 50%,
                        transparent 70%);
    transform:      translateX(-130%);
    pointer-events: none;
}

.msrv__row-thumb {
    display:       block;
    width:         100%;
    aspect-ratio:  1 / 1;
    height:        auto;
    object-fit:    cover;
    filter:        saturate(1.02);
    transition:    transform var(--transition-base);
}

.msrv__row:hover .msrv__row-thumb {
    transform: scale(1.04);
}

/* Kolumna główna: tag + tytuł + fakty */
.msrv__row-tag {
    display:        block;
    font-size:      0.7rem;
    font-weight:    500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color:          var(--blue-light);
    margin-bottom:  0.5rem;
    opacity:        0.85;
}

.msrv__row-title {
    font-family:    var(--font-heading);
    font-weight:    700;
    font-size:      clamp(1.1875rem, 2.1vw, 1.6875rem);
    line-height:    1.15;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    margin:         0;
    transition:     color var(--transition-base);
}

.msrv__row:hover .msrv__row-title {
    color: var(--color-accent);
}

.msrv__row-facts {
    margin:      0.75rem 0 0;
    font-size:   0.84rem;
    color:       var(--color-muted);
    line-height: 1.6;
}

.msrv__row-facts strong {
    color:       var(--blue-light);
    font-weight: 600;
}

.msrv__row-dot {
    opacity: 0.55;
    padding: 0 0.55em;
}

/* Kolumna opisu + CTA */
.msrv__row-desc {
    color:       var(--color-muted);
    font-size:   0.97rem;
    line-height: 1.7;
    max-width:   62ch;
    margin:      0;
}

.msrv__row-cta {
    display:            inline-block;
    margin-top:         0.875rem;
    font-size:          0.78rem;
    font-weight:        600;
    letter-spacing:     0.16em;
    text-transform:     uppercase;
    color:              var(--color-text);
    padding-bottom:     0.35rem;
    background-image:   var(--grad-blue);
    background-repeat:  no-repeat;
    background-position: 0 100%;
    background-size:    100% 1.5px;
    transition:         color var(--transition-fast),
                        background-size 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.msrv__row:hover .msrv__row-cta {
    color: var(--blue-light);
}

/* Podkreślenie CTA „rysuje się" od lewej przy hoverze */
@media (prefers-reduced-motion: no-preference) {
    .msrv__row-cta {
        background-size: 0% 1.5px;
    }
    .msrv__row:hover .msrv__row-cta {
        background-size: 100% 1.5px;
    }
}

/* Strzałka */
.msrv__row-arrow {
    font-size:   1.25rem;
    color:       rgba(232, 241, 242, 0.25);
    padding-top: 0.5rem;
    transition:  color var(--transition-base),
                 transform var(--transition-base);
}

.msrv__row:hover .msrv__row-arrow {
    color:     var(--color-accent);
    transform: translateX(5px);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .msrv__row {
        grid-template-columns: 104px minmax(0, 1fr) 26px;
    }
    .msrv__row-body {
        grid-column: 2;
        grid-row:    2;
    }
    .msrv__row-arrow {
        grid-column: 3;
        grid-row:    1;
    }
    .msrv__row-desc {
        margin-top: 0.75rem;
    }
}

@media (max-width: 520px) {
    .msrv__row {
        grid-template-columns: 84px minmax(0, 1fr) 22px;
        gap: 1rem;
    }
    .msrv__row-lead {
        grid-column: 1;
        grid-row:    1 / span 2;
    }
}

/* ============================================================
   RUCH — subtelne animacje wodne (v1.4.0)
   Wszystko w bloku no-preference: użytkownik z wyłączonymi
   animacjami w systemie dostaje wersję statyczną.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    /* 1. Płynący gradient na numerkach (efekt przelewającej się wody) */
    .msrv__row-num {
        background-image: linear-gradient(100deg, #2E7FB5 0%, #90E0EF 45%, #E8F6FC 50%, #90E0EF 55%, #2E7FB5 100%);
        background-size:  260% auto;
        animation:        msrvFlow 7s linear infinite;
    }

    @keyframes msrvFlow {
        from { background-position:   0% center; }
        to   { background-position: 260% center; }
    }

    /* 2. Świetlna fala po górnej linii separatora sekcji */
    .msrv::before {
        background-size: 220% 100%;
        animation:       msrvLine 9s linear infinite;
    }

    @keyframes msrvLine {
        from { background-position:   0% 0; }
        to   { background-position: 220% 0; }
    }

    /* 3. Refleks świetlny przejeżdżający po miniaturce (hover) */
    .msrv__row:hover .msrv__thumb-wrap::after {
        animation: msrvShine 0.9s ease;
    }

    @keyframes msrvShine {
        from { transform: translateX(-130%); }
        to   { transform: translateX(130%); }
    }
}


/* ===== michlor-why: assets/css/why.css ===== */
/* ============================================================
   MICHLOR — "Dlaczego Michlor" Section CSS
   Klasy: .mwhy (michlor-why)
   ============================================================ */

.mwhy {
    position:         relative;
    background-color: var(--color-bg);
    padding:          var(--space-lg) 0;
    overflow:         hidden;
}

.mwhy__inner {
    display:               grid;
    grid-template-columns: 1fr 1.6fr;
    gap:                   clamp(3rem, 6vw, 7rem);
    align-items:           start;
    max-width:             1280px;
    margin:                0 auto;
    padding:               0 clamp(1.5rem, 4vw, 3rem);
}

/* ── Lewa kolumna — nagłówek ─────────────────────────────── */
.mwhy__head {
    position: sticky;
    top:      8rem;
    display:  flex;
    flex-direction: column;
    align-items: flex-start;
    gap:      0;
}

.mwhy__overline {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mwhy__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3vw, 2.5rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.2;
    margin:         0 0 1.25rem;
}

.mwhy__title-em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.mwhy__sub {
    font-size:   0.9375rem;
    color:       var(--color-muted);
    line-height: var(--line-height-body);
    margin:      0 0 2rem;
}

.mwhy__cta {
    font-family:     var(--font-body);
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--color-accent);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    transition:      gap var(--transition-fast),
                     color var(--transition-fast);
}

.mwhy__cta:hover {
    gap:   0.6rem;
    color: var(--color-accent-glow);
}

/* Dekoracyjna sfera pod CTA */
.mwhy__glow {
    position:      absolute;
    bottom:        -80px;
    left:          -60px;
    width:         300px;
    height:        300px;
    border-radius: 50%;
    background:    radial-gradient(
                       circle,
                       rgba(79, 163, 212, 0.12) 0%,
                       transparent 65%
                   );
    filter:        blur(50px);
    pointer-events: none;
    z-index:       0;
}

/* ── Prawa kolumna — lista ───────────────────────────────── */
.mwhy__list {
    display:        flex;
    flex-direction: column;
    position:       relative;
}

/* ── Pojedynczy argument ─────────────────────────────────── */
.mwhy__item {
    position:    relative;
    display:     grid;
    grid-template-columns: 52px 1fr;
    gap:         0 1.25rem;
    padding:     2rem 0;
    align-items: start;
}

.mwhy__item:first-child {
    padding-top: 0;
}

/* Pionowa linia łącząca argumenty */
.mwhy__item-line {
    position:         absolute;
    left:             25px;
    top:              calc(52px + 2rem);
    bottom:           0;
    width:            1px;
    background:       linear-gradient(
                          180deg,
                          rgba(79, 163, 212, 0.25) 0%,
                          rgba(79, 163, 212, 0.05) 100%
                      );
}

/* Ikona */
.mwhy__item-icon {
    width:            48px;
    height:           48px;
    flex-shrink:      0;
    color:            var(--color-accent);
    background:       var(--glass-bg);
    border:           1px solid var(--glass-border);
    border-radius:    var(--radius-md);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          10px;
    transition:       background-color var(--transition-base),
                      border-color     var(--transition-base),
                      box-shadow       var(--transition-base);
    position:         relative;
    z-index:          1;
}

.mwhy__item:hover .mwhy__item-icon {
    background:  rgba(79, 163, 212, 0.1);
    border-color: rgba(79, 163, 212, 0.4);
    box-shadow:  0 0 16px rgba(79, 163, 212, 0.15);
}

.mwhy__item-icon svg {
    width:  100%;
    height: 100%;
}

/* Body */
.mwhy__item-body {
    padding-top: 0.1rem;
}

.mwhy__item-header {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin-bottom: 0.625rem;
}

.mwhy__item-num {
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    color:          var(--color-accent);
    opacity:        0.6;
    letter-spacing: 0.05em;
    flex-shrink:    0;
}

.mwhy__item-title {
    font-family:    var(--font-heading);
    font-size:      1.0625rem;
    font-weight:    700;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    margin:         0;
    line-height:    1.3;
    flex:           1;
    transition:     color var(--transition-fast);
}

.mwhy__item:hover .mwhy__item-title {
    color: var(--color-accent-glow);
}

.mwhy__item-badge {
    display:        inline-block;
    font-size:      0.65rem;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-accent);
    background:     rgba(79, 163, 212, 0.1);
    border:         1px solid rgba(79, 163, 212, 0.2);
    border-radius:  var(--radius-pill);
    padding:        0.2rem 0.6rem;
    white-space:    nowrap;
}

.mwhy__item-desc {
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.7;
    margin:      0;
    max-width:   560px;
    transition:  color var(--transition-fast);
}

.mwhy__item:hover .mwhy__item-desc {
    color: rgba(122, 155, 174, 0.85);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mwhy__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .mwhy__head {
        position: static;
    }

    .mwhy__glow {
        display: none;
    }
}

@media (max-width: 640px) {
    .mwhy__item {
        grid-template-columns: 42px 1fr;
        gap: 0 1rem;
    }

    .mwhy__item-icon {
        width:  42px;
        height: 42px;
    }

    .mwhy__item-line {
        left: 20px;
    }

    .mwhy__item-badge {
        display: none;
    }
}


/* ===== michlor-stats: assets/css/stats.css ===== */
/* ============================================================
   MICHLOR — Stats / Counters Section CSS
   Klasy: .mstat (michlor-stats)
   ============================================================ */

.mstat {
    position:         relative;
    background:       linear-gradient(
                          180deg,
                          var(--color-bg)      0%,
                          var(--color-bg-deep) 50%,
                          var(--color-bg)      100%
                      );
    padding:          var(--space-lg) 0;
    overflow:         clip; /* clip zamiast hidden — lepsze clippowanie animacji na iOS Safari */
}

/* Gradient kreska górna i dolna */
.mstat__rule {
    height:     1px;
    background: linear-gradient(
        90deg,
        transparent  0%,
        rgba(79, 163, 212,.35) 20%,
        rgba(14,165,233,.25) 50%,
        rgba(79, 163, 212,.35) 80%,
        transparent  100%
    );
    margin: 0;
}

/* Dekoracyjny orb centralny */
.mstat::before {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         700px;
    height:        400px;
    border-radius: 50%;
    background:    radial-gradient(
                       ellipse at center,
                       rgba(79, 163, 212, 0.07) 0%,
                       transparent 65%
                   );
    filter:        blur(60px);
    pointer-events: none;
}

.mstat__inner {
    max-width: 1280px;
    margin:    0 auto;
    padding:   clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}

/* ── Nagłówek ────────────────────────────────────────────── */
.mstat__head {
    text-align:    center;
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.mstat__overline {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mstat__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0;
}

.mstat__title-em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* ── Grid 3+3 ────────────────────────────────────────────── */
.mstat__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            rgba(255, 255, 255, 0.05);
    border:                1px solid rgba(255, 255, 255, 0.05);
    border-radius:         var(--radius-lg);
    overflow:              hidden;
}

/* ── Pojedynczy licznik ──────────────────────────────────── */
.mstat__item {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    padding:         2.5rem 1.5rem;
    background:      var(--color-bg-deep);
    transition:      background-color var(--transition-base);
    overflow:        hidden;
}

.mstat__item::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    radial-gradient(
                       ellipse at 50% 0%,
                       rgba(79, 163, 212, 0.08) 0%,
                       transparent 60%
                   );
    opacity:       0;
    transition:    opacity var(--transition-base);
}

.mstat__item:hover {
    background: rgba(10, 37, 64, 0.8);
}

.mstat__item:hover::before {
    opacity: 1;
}

/* Ikona */
.mstat__item-icon {
    width:         36px;
    height:        36px;
    color:         var(--color-accent);
    margin-bottom: 1.25rem;
    opacity:       0.7;
    transition:    opacity var(--transition-base),
                   transform var(--transition-base);
}

.mstat__item:hover .mstat__item-icon {
    opacity:   1;
    transform: scale(1.1);
}

.mstat__item-icon svg {
    width:  100%;
    height: 100%;
}

/* Wartość licznika */
.mstat__item-value-wrap {
    display:     flex;
    align-items: baseline;
    gap:         0.1em;
    margin-bottom: 0.5rem;
    position:    relative;
    z-index:     1;
}

.mstat__item-prefix {
    font-family:    var(--font-heading);
    font-size:      clamp(1rem, 2vw, 1.5rem);
    font-weight:    800;
    color:          var(--color-text);
    letter-spacing: var(--letter-heading);
    opacity:        0.7;
}

.mstat__item-value {
    font-family:    var(--font-heading);
    font-size:      clamp(2.5rem, 4.5vw, 3.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    line-height:    1;
    background:     linear-gradient(
                        135deg,
                        var(--color-text)  0%,
                        var(--color-accent) 100%
                    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    transition:     filter var(--transition-base);
}

.mstat__item:hover .mstat__item-value {
    filter: brightness(1.15);
}

/* Etykieta */
.mstat__item-label {
    font-family:    var(--font-heading);
    font-size:      0.9375rem;
    font-weight:    700;
    color:          var(--color-text);
    margin:         0 0 0.25rem;
    letter-spacing: var(--letter-heading);
    position:       relative;
    z-index:        1;
}

.mstat__item-sub {
    font-size:  0.75rem;
    color:      var(--color-muted);
    margin:     0;
    letter-spacing: 0.02em;
    position:   relative;
    z-index:    1;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mstat__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mstat__grid {
        grid-template-columns: 1fr;
    }

    .mstat__item {
        padding: 2rem 1.25rem;
        flex-direction: row;
        text-align:     left;
        gap:            1.25rem;
        align-items:    center;
    }

    .mstat__item-icon {
        flex-shrink:   0;
        margin-bottom: 0;
    }

    .mstat__item-value-wrap {
        margin-bottom: 0.2rem;
    }

    .mstat__item-value {
        font-size: 2rem;
    }
}


/* ══════════════════════════════════════════════════════════
   STATYSTYKI NA TELEFONIE: etykieta musi moc sie zawinac
   Wdrozone 2026-09-07 po przegladzie mobilnym.

   .mstat__item to flex w wierszu bez zawijania, a dzieci maja domyslne
   min-width: auto, wiec dluzsza etykieta nie zawijala sie, tylko wychodzila
   poza karte i byla scinana przez overflow: hidden. Zmierzone przy 375 px:
   "Rok dzialalnosci" konczylo sie na 382 px przy karcie do 350 px.
   Po min-width: 0 etykieta zawija sie i miesci (289-331 px).

   WAZNE: reguła celuje w SAMA etykiete, nie w "> *". Przy "> *" kurczyl sie
   takze .mstat__item-value-wrap i liczba wylewala sie poza swoje pudelko
   (scrollWidth 124 px przy clientWidth 102 px), przez co "400+" sklejalo sie
   z napisem "Wdrozen BIOTIK". Liczba ma zachowac swoja szerokosc wlasna.
   ══════════════════════════════════════════════════════════ */

.mstat__item-label {
    min-width: 0;
}


/* ===== michlor-faq: assets/css/faq.css ===== */
/* ============================================================
   MICHLOR — FAQ Section CSS
   Klasy: .mfaq (michlor-faq)
   ============================================================ */

.mfaq {
    position:         relative;
    background-color: var(--color-bg-deep);
    padding:          var(--space-lg) 0;
}

.mfaq__inner {
    max-width: 860px;
    margin:    0 auto;
    padding:   0 clamp(1.5rem, 4vw, 3rem);
}

/* ── Nagłówek ────────────────────────────────────────────── */
.mfaq__head {
    text-align:    center;
    margin-bottom: 2.5rem;
}

.mfaq__overline {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mfaq__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 1rem;
}

.mfaq__title-em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.mfaq__sub {
    font-size:  0.9375rem;
    color:      var(--color-muted);
    margin:     0;
    line-height: var(--line-height-body);
}

/* ── Filtry ──────────────────────────────────────────────── */
.mfaq__filters {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
    justify-content: center;
    margin-bottom:   2.5rem;
}

.mfaq__filter {
    font-family:      var(--font-body);
    font-size:        0.8125rem;
    font-weight:      500;
    color:            var(--color-muted);
    background:       transparent;
    border:           1px solid rgba(255, 255, 255, 0.08);
    border-radius:    var(--radius-pill);
    padding:          0.4rem 1rem;
    cursor:           pointer;
    transition:       color            var(--transition-fast),
                      background-color var(--transition-fast),
                      border-color     var(--transition-fast);
}

.mfaq__filter:hover {
    color:        var(--color-text);
    border-color: rgba(255, 255, 255, 0.2);
}

.mfaq__filter.is-active {
    color:            var(--color-bg);
    background-color: var(--color-accent);
    border-color:     var(--color-accent);
}

/* ── Lista pytań ─────────────────────────────────────────── */
.mfaq__list {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-bottom:  3rem;
}

/* Ukryta kategoria przy filtrowaniu */
.mfaq__item.is-hidden {
    display: none;
}

/* ── Pojedynczy item ─────────────────────────────────────── */
.mfaq__item {
    background:    var(--color-bg-card);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    overflow:      hidden;
    transition:    border-color var(--transition-base);
}

.mfaq__item:has(.mfaq__question[aria-expanded="true"]) {
    border-color: rgba(79, 163, 212, 0.3);
}

/* ── Przycisk pytania ────────────────────────────────────── */
.mfaq__question {
    width:           100%;
    display:         grid;
    grid-template-columns: auto 1fr auto;
    align-items:     center;
    gap:             0.875rem;
    padding:         1.25rem 1.5rem;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    transition:      background-color var(--transition-fast);
}

.mfaq__question:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.mfaq__question-cat {
    font-size:      0.65rem;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-accent);
    white-space:    nowrap;
    padding:        0.2rem 0.6rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mfaq__question-text {
    font-family:  var(--font-body);
    font-size:    0.9375rem;
    font-weight:  500;
    color:        var(--color-text);
    line-height:  1.45;
    transition:   color var(--transition-fast);
}

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

.mfaq__question-icon {
    color:      var(--color-muted);
    flex-shrink: 0;
    transition: transform var(--transition-base),
                color    var(--transition-fast);
    display:    flex;
    align-items: center;
}

.mfaq__question[aria-expanded="true"] .mfaq__question-icon {
    transform: rotate(180deg);
    color:     var(--color-accent);
}

/* ── Panel odpowiedzi ────────────────────────────────────── */
.mfaq__answer {
    overflow: hidden;
}

/* hidden="hidden" → display none, JS usuwa atrybut i animuje height */
.mfaq__answer[hidden] {
    display: none;
}

.mfaq__answer-inner {
    padding:    0 1.5rem 1.5rem;
    padding-left: calc(1.5rem + 0.65rem * 6 + 0.875rem); /* wyrównanie do tekstu pytania */
}

.mfaq__answer-inner p {
    font-size:   0.9rem;
    color:       var(--color-muted);
    line-height: 1.75;
    margin:      0;
    border-left: 2px solid rgba(79, 163, 212, 0.25);
    padding-left: 1rem;
}

/* ── CTA pod FAQ ─────────────────────────────────────────── */
.mfaq__cta-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    flex-wrap:       wrap;
    padding-top:     2rem;
    border-top:      1px solid rgba(255, 255, 255, 0.06);
}

.mfaq__cta-text {
    font-size:  1rem;
    color:      var(--color-muted);
    margin:     0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .mfaq__question {
        grid-template-columns: 1fr auto;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
    }

    .mfaq__question-cat {
        display: none;
    }

    .mfaq__answer-inner {
        padding-left: 1.25rem;
    }
}


/* ===== michlor-cta-footer: assets/css/cta-footer.css ===== */
/* ============================================================
   MICHLOR — CTA Band + Footer CSS
   Klasy: .mctab (cta-band) | .mftr (footer)
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BUTTONS — komponent wspoldzielony (design system)
   Przeniesione z hero.css 2026-07-15: .mh-btn uzywany jest w
   cta-band.php (globalnie) i faq-section.php, a hero.css laduje
   sie TYLKO na stronie glownej -> na podstronach przycisk nie mial
   zadnych styli (tekst w kolorze akcentu = niewidoczny).
   Ten plik jest enqueue globalnie, wiec komponent dziala wszedzie.
   ══════════════════════════════════════════════════════════ */

/* Bazowy btn */
.mh-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.875rem 1.875rem;
    font-family:     var(--font-body);
    font-size:       0.9375rem;
    font-weight:     500;
    letter-spacing:  0.02em;
    border-radius:   var(--radius-pill);
    cursor:          pointer;
    text-decoration: none;
    position:        relative;
    transition:      background-color var(--transition-base),
                     color            var(--transition-base),
                     box-shadow       var(--transition-base),
                     transform        var(--transition-fast),
                     border-color     var(--transition-base);
    white-space:     nowrap;
}

/* CTA Solid — główny */
.mh-btn--solid {
    background-color: var(--color-accent);
    color:            #04101E;
    border:           1px solid transparent;
    box-shadow:       var(--glow-accent);
}

.mh-btn--solid::before {
    content:       '';
    position:      absolute;
    inset:         -10px;
    border-radius: inherit;
    background:    radial-gradient(
                       ellipse at center,
                       rgba(79, 163, 212, 0.28) 0%,
                       transparent 68%
                   );
    filter:        blur(10px);
    opacity:       0;
    transition:    opacity var(--transition-base);
    z-index:       -1;
    pointer-events: none;
}

.mh-btn--solid:hover {
    background-color: var(--color-accent-glow);
    box-shadow:       var(--glow-strong),
                      0 6px 30px rgba(79, 163, 212, 0.55);
    transform:        translateY(-2px);
    color:            #04101E;
}

.mh-btn--solid:hover::before {
    opacity: 1;
}

.mh-btn--solid:active {
    transform:  translateY(0);
    box-shadow: var(--glow-accent);
}

.mh-btn__arrow {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.mh-btn--solid:hover .mh-btn__arrow {
    transform: translateX(4px);
}

/* CTA Ghost — secondary */
.mh-btn--ghost {
    background-color: transparent;
    color:            var(--color-accent);
    border:           1px solid var(--color-accent);
}

.mh-btn--ghost:hover {
    background-color: rgba(79, 163, 212, 0.10);
    color:            var(--color-accent-glow);
    border-color:     var(--color-accent-glow);
    box-shadow:       0 0 14px rgba(79, 163, 212, 0.22);
    transform:        translateY(-2px);
}


/* ══════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════ */

.mctab {
    position:   relative;
    background: linear-gradient(
                    135deg,
                    var(--color-bg-deep) 0%,
                    #061e30              100%
                );
    padding:    clamp(4rem, 7vw, 7rem) 0;
    overflow:   clip; /* clip zamiast hidden — lepsze clippowanie na iOS Safari */
}

/* Orby dekoracyjne */
.mctab__orb {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(80px);
    pointer-events: none;
}

.mctab__orb--l {
    top: -100px; left: -100px;
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(79, 163, 212,.15) 0%, transparent 65%);
}

.mctab__orb--r {
    bottom: -80px; right: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(14,165,233,.1) 0%, transparent 65%);
}

.mctab__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   clamp(2rem, 5vw, 5rem);
    max-width:             1280px;
    margin:                0 auto;
    padding:               0 clamp(1.5rem, 4vw, 3rem);
    position:              relative;
    z-index:               1;
}

.mctab__overline {
    display:        inline-block;
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mctab__title {
    font-family:    var(--font-heading);
    font-size:      clamp(2rem, 4vw, 3.25rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 1rem;
}

.mctab__title-em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.mctab__sub {
    font-size:  0.9375rem;
    color:      var(--color-muted);
    line-height: var(--line-height-body);
    margin:     0;
    max-width:  420px;
}

/* Prawa kolumna — przyciski kontaktu */
.mctab__actions {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    align-items:    flex-start;
}

.mctab__contact-btn {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    padding:         1rem 1.5rem;
    width:           100%;
    background:      var(--glass-bg);
    border:          1px solid var(--glass-border);
    border-radius:   var(--radius-md);
    text-decoration: none;
    transition:      background-color var(--transition-base),
                     border-color     var(--transition-base),
                     transform        var(--transition-fast);
    backdrop-filter: var(--glass-blur);
}

.mctab__contact-btn:hover {
    background-color: rgba(79, 163, 212, 0.08);
    border-color:     rgba(79, 163, 212, 0.35);
    transform:        translateX(4px);
}

.mctab__contact-icon {
    width:         44px;
    height:        44px;
    border-radius: var(--radius-sm);
    background:    rgba(79, 163, 212, 0.1);
    border:        1px solid rgba(79, 163, 212, 0.2);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    color:         var(--color-accent);
    transition:    background-color var(--transition-fast);
}

.mctab__contact-btn:hover .mctab__contact-icon {
    background: rgba(79, 163, 212, 0.2);
}

.mctab__contact-body {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.mctab__contact-body small {
    font-size:   0.72rem;
    color:       var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mctab__contact-body strong {
    font-family: var(--font-heading);
    font-size:   1.0625rem;
    font-weight: 700;
    color:       var(--color-text);
    letter-spacing: var(--letter-heading);
}

@media (max-width: 768px) {
    .mctab__inner {
        grid-template-columns: 1fr;
    }
    .mctab__actions {
        width: 100%;
    }
    .mh-btn.mh-btn--solid {
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */

.mftr {
    background-color: var(--color-bg);
    border-top:       1px solid rgba(255, 255, 255, 0.05);
}

.mftr__inner {
    display:               grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:                   clamp(2rem, 4vw, 4rem);
    max-width:             1280px;
    margin:                0 auto;
    padding:               clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem)
                           clamp(2rem, 3vw, 3rem);
}

/* ── Kolumna brand ───────────────────────────────────────── */
.mftr__logo {
    display:         inline-flex;
    text-decoration: none;
    margin-bottom:   1.25rem;
}

.mftr__logo-text {
    font-family:    var(--font-heading);
    font-size:      1.25rem;
    font-weight:    800;
    letter-spacing: -0.04em;
    color:          var(--color-text);
}

.mftr__logo-dot {
    color: var(--color-accent);
}

.mftr__tagline {
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.65;
    margin:      0 0 1.25rem;
    max-width:   260px;
}

.mftr__address {
    font-style:  normal;
    font-size:   0.8125rem;
    color:       rgba(122, 155, 174, 0.6);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Social */
.mftr__social {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.625rem;
}

.mftr__social-link {
    width:            36px;
    height:           36px;
    border-radius:    var(--radius-sm);
    background:       var(--glass-bg);
    border:           1px solid rgba(255, 255, 255, 0.08);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--color-muted);
    text-decoration:  none;
    transition:       background-color var(--transition-fast),
                      color            var(--transition-fast),
                      border-color     var(--transition-fast);
}

.mftr__social-link:hover {
    background-color: rgba(79, 163, 212, 0.1);
    border-color:     var(--glass-border);
    color:            var(--color-accent);
}

/* ── Kolumny linków ──────────────────────────────────────── */
.mftr__col-title {
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-text);
    margin:         0 0 1.25rem;
    opacity:        0.9;
}

.mftr__links {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
}

.mftr__link {
    font-size:       0.875rem;
    color:           var(--color-muted);
    text-decoration: none;
    transition:      color var(--transition-fast),
                     padding-left var(--transition-fast);
    display:         inline-block;
}

.mftr__link:hover {
    color:        var(--color-accent);
    padding-left: 4px;
}

/* ── Partnerzy ───────────────────────────────────────────── */
.mftr__partners {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.mftr__partner {
    display:     flex;
    align-items: flex-start;
    gap:         0.625rem;
    font-size:   0.8125rem;
    color:       var(--color-muted);
    line-height: 1.5;
}

.mftr__partner-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--color-accent);
    flex-shrink:   0;
    margin-top:    0.4em;
    opacity:       0.7;
}

/* ── Bottom bar ──────────────────────────────────────────── */
.mftr__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mftr__bottom-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             0.5rem;
    max-width:       1280px;
    margin:          0 auto;
    padding:         1.25rem clamp(1.5rem, 4vw, 3rem);
}

.mftr__copy,
.mftr__made {
    font-size: 0.75rem;
    color:     rgba(122, 155, 174, 0.5);
    margin:    0;
}

.mftr__nip {
    opacity: 0.6;
    font-style: italic;
    font-size:  0.75rem;
    color:      rgba(122, 155, 174, 0.5);
}

.mftr__bottom-right {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
}

.mftr__bottom-link {
    font-size:       0.75rem;
    color:           rgba(122, 155, 174, 0.6);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.mftr__bottom-link:hover {
    color: var(--color-accent);
}

.mftr__bottom-sep {
    font-size: 0.75rem;
    color:     rgba(122, 155, 174, 0.3);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mftr__inner {
        grid-template-columns: 1fr 1fr;
    }
    .mftr__col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 540px) {
    .mftr__inner {
        grid-template-columns: 1fr;
    }
    .mftr__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}


/* ===== michlor-hero: assets/css/hero.css ===== */
/* ============================================================
   MICHLOR — Hero Section CSS
   Klasy: .mh (michlor-hero)
   Zależności: Design System z global-styles.php (:root vars)
   ============================================================ */

/* ── Wideo w tle ─────────────────────────────────────────── */
.mh__video-wrap {
    position:   absolute;
    inset:      0;
    z-index:    0;
    overflow:   hidden;
}

.mh__video {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center center;
    filter:     brightness(0.75);
}

/* Gradient overlay — przyciemnienie wideo */
.mh__video-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        105deg,
        rgba(4, 16, 30, 0.65) 0%,
        rgba(4, 16, 30, 0.35) 55%,
        rgba(4, 16, 30, 0.15) 100%
    );
}

/* Orby dekoracyjne — wyłączone */
.mh__orb {
    display: none;
}

/* Glow sphere — wyłączona */
.mh__glow-sphere {
    display: none;
}

/* ── Sekcja bazowa ───────────────────────────────────────── */
.mh {
    position:         relative;
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    background-color: var(--color-bg);
    overflow:         clip; /* clip działa poprawnie z transform na iOS Safari */
    padding:          clamp(6rem, 10vw, 10rem) 0 clamp(4rem, 6vw, 6rem);
}

/* ── Grid wewnętrzny ─────────────────────────────────────── */
.mh__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   clamp(2rem, 5vw, 5rem);
    width:                 100%;
    max-width:             1280px;
    margin:                0 auto;
    padding:               0 clamp(1.5rem, 5vw, 4rem);
    position:              relative;
    z-index:               2;
}

/* ── Orby tła ────────────────────────────────────────────── */
.mh__orb {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(80px);
    pointer-events: none;
    will-change:   opacity, transform;
    z-index:       1;
}

.mh__orb--tl {
    top:        -220px;
    left:       -180px;
    width:      650px;
    height:     650px;
    background: radial-gradient(
        circle,
        rgba(79, 163, 212, 0.13) 0%,
        transparent 65%
    );
    animation: orbDrift 12s ease-in-out infinite alternate;
}

.mh__orb--br {
    bottom:     -140px;
    right:      -120px;
    width:      550px;
    height:     550px;
    background: radial-gradient(
        circle,
        rgba(14, 165, 233, 0.10) 0%,
        transparent 65%
    );
    animation: orbDrift 15s ease-in-out infinite alternate-reverse;
}

@keyframes orbDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, 20px) scale(1.06); }
}

/* ── Lewa kolumna — treść ────────────────────────────────── */
.mh__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    position:       relative;
    z-index:        2;
}

/* Overline */
.mh__overline {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    font-family:     var(--font-body);
    font-size:       0.72rem;
    font-weight:     500;
    letter-spacing:  var(--letter-overline);
    text-transform:  uppercase;
    color:           var(--color-accent);
    margin-bottom:   1.75rem;
    padding:         0.4rem 1rem;
    border:          1px solid var(--glass-border);
    border-radius:   var(--radius-pill);
    background:      var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.mh__overline sup {
    font-size: 0.65em;
}

/* H1 — bazowy: biały tekst */
.mh__h1 {
    font-family:             var(--font-heading);
    /* Zmniejszone 2026-09-07 na zlecenie Iwony. Bylo clamp(3rem, 6.5vw, 6rem),
       czyli 96 px przy 1920 px. Sam H1 mial wtedy 829 px wysokosci przy ekranie
       1000 px, wiec nie miescil sie na pierwszym ekranie razem z podtytulem i CTA.
       Teraz 52 px przy 1920 px i 46 px przy 1440 px. */
    font-size:               clamp(2rem, 3.2vw, 3.25rem);
    font-weight:             800;
    letter-spacing:          var(--letter-heading);
    line-height:             1.08;
    margin:                  0 0 1.5rem;
    color:                   var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

/* "Woda" — gradient #0e3a60 → #90e0ef */
.mh__h1-grad {
    background:              linear-gradient(135deg, #0e3a60 0%, #90e0ef 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* "technologia." — italic + gradient #90e0ef → #0e3a60 */
.mh__h1-em {
    font-style:              italic;
    background:              linear-gradient(135deg, #90e0ef 0%, #0e3a60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* Sub */
.mh__sub {
    font-family: var(--font-body);
    font-size:   clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 400;
    line-height: var(--line-height-body);
    color:       var(--color-muted);
    max-width:   480px;
    margin:      0 0 2.5rem;
}

.mh__sub strong {
    color:       var(--color-text);
    font-weight: 500;
}

/* ── Przyciski CTA ───────────────────────────────────────── */
.mh__cta-group {
    display:     flex;
    flex-wrap:   wrap;
    gap:         1rem;
    align-items: center;
    margin-bottom: 0;
}

/* ── Micro-stats ─────────────────────────────────────────── */
.mh__stats {
    display:     flex;
    gap:         2.5rem;
    margin-top:  2.5rem;
    padding-top: 2rem;
    border-top:  1px solid rgba(255, 255, 255, 0.07);
    flex-wrap:   wrap;
}

.mh__stat {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.mh__stat-value {
    font-family:    var(--font-heading);
    font-size:      clamp(1.5rem, 2.5vw, 2rem);
    font-weight:    800;
    color:          var(--color-text);
    line-height:    1;
    letter-spacing: var(--letter-heading);
}

.mh__stat-label {
    font-size:      0.72rem;
    font-weight:    400;
    color:          var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Prawa kolumna — media ───────────────────────────────── */
.mh__media {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         1;
}

/* Sfera glow */
.mh__glow-sphere {
    position:       absolute;
    width:          clamp(320px, 45vw, 520px);
    height:         clamp(320px, 45vw, 520px);
    border-radius:  50%;
    background:     radial-gradient(
                        circle at 38% 38%,
                        rgba(79, 163, 212, 0.38) 0%,
                        rgba(14, 165, 233, 0.15) 40%,
                        transparent 70%
                    );
    filter:         blur(55px);
    animation:      glowPulse 7s ease-in-out infinite;
    will-change:    opacity, transform;
    pointer-events: none;
}

.mh__glow-sphere::after {
    content:       '';
    position:      absolute;
    inset:         12% 18%;
    border-radius: 50%;
    background:    radial-gradient(
                       circle,
                       rgba(14, 165, 233, 0.22) 0%,
                       transparent 65%
                   );
    filter:        blur(35px);
    animation:     glowPulse 7s ease-in-out infinite reverse;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.75; transform: scale(1);    }
    50%       { opacity: 1.00; transform: scale(1.07); }
}

/* Zdjęcie produktu */
.mh__product-img {
    position:   relative;
    z-index:    2;
    max-height: clamp(300px, 45vw, 520px);
    width:      auto;
    filter:     drop-shadow(0 24px 64px rgba(79, 163, 212, 0.28));
    animation:  floatProduct 5.5s ease-in-out infinite;
    will-change: transform;
}

@keyframes floatProduct {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

/* ── Scroll hint ─────────────────────────────────────────── */
.mh__scroll-hint {
    position:        absolute;
    bottom:          2rem;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.5rem;
    animation:       scrollBounce 2.5s ease-in-out infinite;
}

.mh__scroll-text {
    font-size:      0.7rem;
    font-weight:    400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-muted);
}

.mh__scroll-icon {
    color: var(--color-muted);
}

@keyframes scrollBounce {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
    50%       { opacity: 1.0; transform: translateX(-50%) translateY(5px); }
}

/* ── Responsive — Tablet (< 1024px) ─────────────────────── */
@media (max-width: 1024px) {
    .mh__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .mh__h1 {
        font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    }
}

/* ── Wideo overlay — silniejszy na mobile ───────────────── */
@media (max-width: 768px) {
    .mh__video {
        filter: brightness(0.35);
    }
    .mh__video-overlay {
        background: rgba(4, 16, 30, 0.82);
    }
}

/* ── Responsive — Mobile (< 768px) ──────────────────────── */
@media (max-width: 768px) {
    .mh {
        min-height: auto;
        padding: 8rem 0 5rem;
    }
    .mh__inner {
        grid-template-columns: 1fr;
        text-align:            center;
    }
    .mh__content {
        align-items: center;
        order: 2;
        /* Zapobiega wylewaniu się dzieci poza kolumnę */
        max-width: 100%;
        overflow: hidden;
    }
    .mh__h1 {
        font-size: clamp(1.75rem, 6.4vw, 2.375rem);
    }
    /* Overline — za długi tekst na mobilnym → zawijaj */
    .mh__overline {
        white-space:    normal;
        text-align:     center;
        max-width:      calc(100vw - 3rem);
        line-height:    1.5;
    }
    .mh__media {
        order: 1;
        margin-bottom: 1rem;
    }
    .mh__sub {
        max-width: 100%;
    }
    .mh__stats {
        justify-content: center;
    }
    .mh__glow-sphere {
        width:  280px;
        height: 280px;
    }
    .mh__product-img {
        max-height: 240px;
    }
    .mh__scroll-hint {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════
   FALE NA STYKU HERO I SEKCJI USLUG   (.mh__wave)
   Wdrozone 2026-09-14 na zlecenie Iwony (wzor: organovietnam.vn).

   Wzor rysuje fale na <canvas> skryptem, ktory przerysowuje je
   okolo 60 razy na sekunde, bez konca. Tutaj trzy gotowe sciezki SVG,
   kazda na 200% szerokosci z dwoma identycznymi okresami, przesuwane
   animacja CSS o -50%. Przesuniecie transform liczy karta graficzna,
   wiec nie ma pracy skryptu na kazda klatke. Petla jest bezszwowa,
   bo -50% to dokladnie jeden okres fali.

   Przednia fala ma kolor sekcji .msrv (rgb 18,46,66, zmierzone na zywo),
   wiec hero przechodzi w nia bez prostej granicy.
   ══════════════════════════════════════════════════════════ */

.mh {
    --mh-wave-h: clamp(64px, 8vw, 130px);
}

.mh__wave {
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         -1px; /* bez wlosowej szczeliny na styku z .msrv */
    height:         var(--mh-wave-h);
    overflow:       hidden;
    pointer-events: none;
    z-index:        1;
}

.mh__wave-layer {
    position:    absolute;
    left:        0;
    bottom:      0;
    width:       200%;
    max-width:   none; /* globalne svg { max-width: 100% } ucinalo warstwe do 1425 px i przy przesuwaniu robila sie dziura */
    height:      100%;
    display:     block;
    will-change: transform;
    animation:   mhWave 18s linear infinite;
}

.mh__wave-layer--back  { fill: rgba(79, 163, 212, 0.30); animation-duration: 26s; animation-direction: reverse; }
.mh__wave-layer--mid   { fill: rgba(18, 46, 66, 0.78);  animation-duration: 17s; }
.mh__wave-layer--front { fill: #122E42;                 animation-duration: 11s; }

@keyframes mhWave {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Podpowiedz przewijania stoi nad fala, nie pod nia */
.mh__scroll-hint {
    z-index: 2;
    bottom:  calc(var(--mh-wave-h) + 0.5rem);
}

/* Fala przejmuje role separatora, wiec cienka linia .msrv::before
   ("Dekoracyjny separator od hero" w services.css) wygladalaby pod nia
   jak szew. Zdejmujemy ja tylko tam, gdzie tuz przed .msrv stoi hero. */
.mh + .msrv::before {
    display: none;
}

/* Ograniczony ruch w systemie: fala stoi */
@media (prefers-reduced-motion: reduce) {
    .mh__wave-layer {
        animation: none;
    }
}


/* ===== michlor-video: assets/css/video.css ===== */
/* ============================================================
   MICHLOR, Video Section CSS
   Klasy: .mvid (sekcja na stronie glownej) + .mpage-videos /
   .mpage-video (komponent kafelka, uzywany tez na podstronach)

   Plik powstal 2026-09-02. Komponent kafelka mieszkal wczesniej
   w subpage.css, ale subpage.css NIE laduje sie na stronie glownej
   (warunek w custom-snippets/global-styles.php), a kafelki stoja teraz
   w obu miejscach. Zeby nie trzymac dwoch kopii tych samych regul,
   komponent wyprowadzony jest tutaj, a arkusz laduje sie globalnie.

   Kafelek to link do YouTube, nie osadzony odtwarzacz: iframe ciagnie
   ponad 600 kB skryptow i stawia ciasteczka Google, zanim ktokolwiek
   kliknie play. Miniatury leza na naszym serwerze jako WebP.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   SEKCJA NA STRONIE GLOWNEJ   (.mvid)
   Budowa i nazewnictwo jak w pozostalych sekcjach strony glownej
   (mfaq, mecow, mwhy): wlasne tlo, wlasny inner, wlasny naglowek.
   Nie opiera sie na .mpage-section ani .mpage-container, bo tamte
   przychodza ze snippetu WPCode i na stronie glownej nie sa pewne.
   ══════════════════════════════════════════════════════════ */

.mvid {
    position:         relative;
    background-color: var(--color-bg-deep);
    padding:          var(--space-lg) 0;
}

.mvid__inner {
    max-width: 1000px;
    margin:    0 auto;
    padding:   0 clamp(1.5rem, 4vw, 3rem);
}

.mvid__head {
    text-align:    center;
    margin-bottom: 2.5rem;
}

.mvid__overline {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mvid__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 0.875rem;
}

.mvid__lead {
    font-size:   0.9375rem;
    color:       var(--color-muted);
    line-height: var(--line-height-body);
    margin:      0 auto;
    max-width:   680px;
}

@media (max-width: 768px) {
    .mvid__title {
        font-size: 1.625rem;
    }
}


/* ══════════════════════════════════════════════════════════
   KAFELKI WIDEO Z YOUTUBE   (.mpage-videos / .mpage-video)
   Wdrozone 2026-09-02 na /realizacje/.

   Kafelek to zwykly link do YouTube, nie osadzony odtwarzacz. Powod:
   iframe YouTube ciagnie ponad 600 kB skryptow i stawia ciasteczka
   zanim ktokolwiek kliknie play. Miniatura jest u nas na serwerze
   (WebP, zalaczniki 425 i 426), wiec strona nie odpytuje Google
   przy samym wejsciu, a film otwiera sie w nowej karcie.
   ══════════════════════════════════════════════════════════ */

.mpage-videos {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
    max-width:             900px;
    margin:                0;
}

@media (max-width: 760px) {
    .mpage-videos {
        grid-template-columns: 1fr;
    }
}

.mpage-video {
    display:         block;
    text-decoration: none;
    background:      rgba(255, 255, 255, 0.03);
    border:          1px solid var(--glass-border);
    border-radius:   var(--radius-md);
    overflow:        hidden;
    transition:      border-color var(--transition-fast), background var(--transition-fast);
}

.mpage-video:hover,
.mpage-video:focus-visible {
    background:   rgba(79, 163, 212, 0.05);
    border-color: rgba(79, 163, 212, 0.3);
}

.mpage-video__thumb {
    display:      block;
    position:     relative;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    background:   var(--color-bg-deep);
}

.mpage-video__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

.mpage-video:hover .mpage-video__thumb img {
    transform: scale(1.04);
}

/* Znaczek play lezy NAD miniatura, zeby od razu bylo widac, ze to film */
.mpage-video__play {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(4, 16, 30, 0.22);
    transition:      background var(--transition-fast);
}

.mpage-video:hover .mpage-video__play {
    background: rgba(4, 16, 30, 0.08);
}

.mpage-video__play svg {
    width:  62px;
    height: 44px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.mpage-video__body {
    display: block;
    padding: 1rem 1.125rem 1.25rem;
}

.mpage-video__title {
    display:     block;
    font-size:   1rem;
    font-weight: 600;
    color:       var(--color-text);
    margin:      0 0 0.375rem;
    line-height: 1.35;
}

.mpage-video__meta {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.8125rem;
    color:       var(--color-muted);
    margin:      0;
}

@media (max-width: 480px) {
    .mpage-video__play svg {
        width:  52px;
        height: 37px;
    }
}


/* ===== michlor-ecowater: assets/css/ecowater.css ===== */
/* ============================================================
   MICHLOR — EcoWater Section + Benefits Section
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   ECOWATER SECTION  .mecow
   ══════════════════════════════════════════════════════════ */

.mecow {
    background: var(--color-bg-deep);
    padding:    var(--space-lg) 0;
    overflow:   hidden;
    position:   relative;
}

.mecow::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(79, 163, 212,.25), transparent);
}

.mecow__inner {
    max-width: 1280px;
    margin:    0 auto;
    padding:   0 clamp(1.5rem, 4vw, 3rem);
}

/* Overline */
.mecow__overline {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1.25rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

/* Nagłówek z produktem — 2 kolumny */
.mecow__head {
    display:               grid;
    grid-template-columns: 1fr 480px;
    gap:                   clamp(3rem, 6vw, 6rem);
    align-items:           center;
    margin-bottom:         clamp(4rem, 6vw, 6rem);
}

.mecow__title {
    font-family:    var(--font-heading);
    font-size:      clamp(2rem, 3.5vw, 3rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 1.25rem;
}

.mecow__title em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.mecow__sub {
    font-size:   1rem;
    color:       var(--color-muted);
    line-height: var(--line-height-body);
    max-width:   560px;
    margin:      0 0 2rem;
}

.mecow__sub strong {
    color: var(--color-text);
}

/* USP lista */
.mecow__usp-list {
    list-style:     none;
    margin:         0 0 2rem;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.mecow__usp {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
    font-size:   0.9375rem;
    color:       var(--color-muted);
    line-height: 1.5;
}

.mecow__usp strong {
    color: var(--color-text);
}

.mecow__usp-icon {
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      rgba(79, 163, 212, 0.12);
    border:          1px solid rgba(79, 163, 212, 0.25);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--color-accent);
    margin-top:      0.1em;
}

/* Loga partnerów */
.mecow__logos {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    margin-bottom: 2rem;
    flex-wrap:   wrap;
}

.mecow__logo-item {
    background:    var(--glass-bg);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding:       0;
    overflow:      hidden;
    display:       flex;
    align-items:   center;
}

.mecow__logo-item img {
    display:    block;
    width:      100%;
    height:     auto;
    object-fit: contain;
    filter:     brightness(1.1);
}

.mecow__logo-badge {
    display:         flex;
    align-items:     center;
    gap:             0.375rem;
    font-size:       0.8125rem;
    color:           var(--color-accent);
    padding:         0.5rem 0.875rem;
    border:          1px solid rgba(79, 163, 212, 0.2);
    border-radius:   var(--radius-pill);
    background:      rgba(79, 163, 212, 0.06);
}

/* Przycisk CTA */
.mecow__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.75rem 1.75rem;
    background:      var(--color-accent);
    color:           var(--color-bg);
    border-radius:   var(--radius-pill);
    font-size:       0.9375rem;
    font-weight:     500;
    text-decoration: none;
    transition:      background-color var(--transition-base),
                     box-shadow       var(--transition-base),
                     transform        var(--transition-fast);
}

.mecow__cta:hover {
    background: var(--color-accent-glow);
    color:      var(--color-bg);
    box-shadow: var(--glow-accent);
    transform:  translateY(-2px);
}

.mecow__cta--solid {
    background: var(--color-accent);
    color:      var(--color-bg);
}

.mecow__cta--ghost {
    background:   var(--glass-bg);
    color:        var(--color-text);
    border:       1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
}

.mecow__cta--ghost:hover {
    background:   rgba(79, 163, 212, 0.08);
    border-color: rgba(79, 163, 212, 0.35);
    color:        var(--color-text);
    box-shadow:   none;
}

/* Zdjęcie produktu */
.mecow__head-visual {
    position: relative;
}

.mecow__product-img-wrap {
    position:      relative;
    border-radius: var(--radius-lg);
    overflow:      visible;
}

.mecow__product-img {
    width:      100%;
    height:     auto;
    display:    block;
    filter:     drop-shadow(0 20px 60px rgba(79, 163, 212, 0.2));
    position:   relative;
    z-index:    1;
}

.mecow__product-glow {
    position:      absolute;
    inset:         10%;
    background:    radial-gradient(circle, rgba(79, 163, 212, 0.15) 0%, transparent 70%);
    filter:        blur(40px);
    z-index:       0;
    border-radius: 50%;
}

/* Pływające statystyki */
.mecow__float-stat {
    position:      absolute;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    padding:       0.875rem 1.25rem;
    background:    rgba(4, 18, 34, 0.95);
    border:        1px solid rgba(79, 163, 212, 0.45);
    border-radius: var(--radius-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align:    center;
    z-index:       2;
    box-shadow:    0 6px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(79, 163, 212,.1);
}

.mecow__float-stat strong {
    font-family:    var(--font-heading);
    font-size:      1.5rem;
    font-weight:    800;
    color:          var(--color-accent);
    letter-spacing: -0.03em;
    line-height:    1;
    text-shadow:    0 0 14px rgba(79, 163, 212,.45);
}

.mecow__float-stat span {
    font-size:  0.75rem;
    color:      rgba(255, 255, 255, 0.82);
    margin-top: 0.25rem;
    white-space: nowrap;
    font-weight: 500;
}

.mecow__float-stat--1 {
    bottom: 12%;
    left:   -5%;
}

.mecow__float-stat--2 {
    top:   38%;
    right: -4%;
}

/* Modele — nagłówek */
.mecow__models-head {
    display:       flex;
    align-items:   center;
    gap:           1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap:     wrap;
}

.mecow__models-title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight:    700;
    color:          var(--color-text);
    letter-spacing: var(--letter-heading);
    margin:         0;
}

/* Siatka modeli */
.mecow__models {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
    margin-bottom:         clamp(3rem, 5vw, 4rem);
}

.mecow__model {
    background:      var(--glass-bg);
    border:          1px solid var(--glass-border);
    border-radius:   var(--radius-lg);
    padding:         1.5rem;
    display:         flex;
    flex-direction:  column;
    gap:             0.625rem;
    position:        relative;
    backdrop-filter: var(--glass-blur);
    transition:      border-color var(--transition-base),
                     transform    var(--transition-base),
                     box-shadow   var(--transition-base);
}

.mecow__model:hover {
    border-color: rgba(79, 163, 212, 0.4);
    transform:    translateY(-4px);
    box-shadow:   var(--shadow-card);
}

.mecow__model-badge {
    position:       absolute;
    top:            -0.625rem;
    right:          1rem;
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-bg);
    background:     var(--color-accent);
    padding:        0.2rem 0.625rem;
    border-radius:  var(--radius-pill);
}

.mecow__model-tag {
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-accent);
}

.mecow__model-name {
    font-family:    var(--font-heading);
    font-size:      1rem;
    font-weight:    700;
    color:          var(--color-text);
    letter-spacing: var(--letter-heading);
    margin:         0;
    line-height:    1.3;
}

.mecow__model-desc {
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.6;
    margin:      0;
    flex:        1;
}

.mecow__model-specs {
    list-style:     none;
    margin:         0.375rem 0 0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
}

.mecow__model-specs li {
    font-size:    0.8125rem;
    color:        var(--color-muted);
    padding-left: 1rem;
    position:     relative;
}

.mecow__model-specs li::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           0.55em;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--color-accent);
    opacity:       0.7;
}

.mecow__model-link {
    margin-top:      0.5rem;
    font-size:       0.8125rem;
    font-weight:     500;
    color:           var(--color-accent);
    text-decoration: none;
    transition:      color var(--transition-fast),
                     letter-spacing var(--transition-fast);
}

.mecow__model-link:hover {
    color:          var(--color-accent-glow);
    letter-spacing: 0.02em;
}

/* CTA dolne */
.mecow__bottom-cta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2rem;
    flex-wrap:       wrap;
    background:      linear-gradient(135deg, rgba(79, 163, 212,.07) 0%, rgba(79, 163, 212,.03) 100%);
    border:          1px solid rgba(79, 163, 212, 0.2);
    border-radius:   var(--radius-lg);
    padding:         2rem 2.5rem;
}

.mecow__bottom-cta h3 {
    font-family:    var(--font-heading);
    font-size:      1.25rem;
    font-weight:    700;
    color:          var(--color-text);
    margin:         0 0 0.375rem;
    letter-spacing: var(--letter-heading);
}

.mecow__bottom-cta p {
    font-size:   0.9375rem;
    color:       var(--color-muted);
    margin:      0;
    line-height: 1.6;
}

.mecow__bottom-cta-actions {
    display:     flex;
    gap:         1rem;
    flex-shrink: 0;
    flex-wrap:   wrap;
}

/* ══════════════════════════════════════════════════════════
   BENEFITS SECTION  .mbfit
   ══════════════════════════════════════════════════════════ */

.mbfit {
    background: var(--color-bg);
    padding:    var(--space-lg) 0;
    overflow:   hidden;
    position:   relative;
}

.mbfit__inner {
    max-width: 1280px;
    margin:    0 auto;
    padding:   0 clamp(1.5rem, 4vw, 3rem);
}

.mbfit__overline {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1.25rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mbfit__head {
    text-align:    center;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.mbfit__title {
    font-family:    var(--font-heading);
    font-size:      clamp(2rem, 3.5vw, 2.875rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 1.25rem;
}

.mbfit__title em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.mbfit__sub {
    font-size:  1rem;
    color:      var(--color-muted);
    max-width:  640px;
    margin:     0 auto;
    line-height: var(--line-height-body);
}

/* Siatka kart */
.mbfit__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
    margin-bottom:         3rem;
}

.mbfit__card {
    border-radius: var(--radius-lg);
    overflow:      hidden;
    background:    var(--color-bg-card);
    border:        1px solid var(--glass-border);
    display:       flex;
    flex-direction: column;
    transition:    border-color var(--transition-base),
                   transform    var(--transition-base),
                   box-shadow   var(--transition-base);
}

.mbfit__card:hover {
    border-color: rgba(79, 163, 212, 0.35);
    transform:    translateY(-6px);
    box-shadow:   var(--shadow-card);
}

.mbfit__card-img-wrap {
    position:    relative;
    height:      260px;
    overflow:    hidden;
    flex-shrink: 0;
}

.mbfit__card-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center top;
    display:    block;
    transition: transform var(--transition-slow);
}

.mbfit__card:hover .mbfit__card-img {
    transform: scale(1.05);
}

.mbfit__card-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(4, 16, 30, 0.7) 100%
    );
}

/* Stat nakładka na zdjęciu */
.mbfit__card-stat {
    position:       absolute;
    bottom:         1rem;
    left:           1rem;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
}

.mbfit__card-stat-val {
    font-family:    var(--font-heading);
    font-size:      2rem;
    font-weight:    800;
    letter-spacing: -0.04em;
    line-height:    1;
    color:          var(--color-accent);
    text-shadow:    0 2px 12px rgba(79, 163, 212, 0.4);
}

.mbfit__card-stat-unit {
    font-size:   0.75rem;
    color:       rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    font-weight: 500;
}

/* Treść karty */
.mbfit__card-body {
    padding: 1.375rem;
    flex:    1;
}

.mbfit__card-title {
    font-family:    var(--font-heading);
    font-size:      1.0625rem;
    font-weight:    700;
    color:          var(--color-text);
    letter-spacing: var(--letter-heading);
    margin:         0 0 0.625rem;
}

.mbfit__card-desc {
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.65;
    margin:      0;
}

/* CTA dolne */
.mbfit__cta-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2rem;
    flex-wrap:       wrap;
    padding-top:     2rem;
    border-top:      1px solid rgba(255, 255, 255, 0.05);
}

.mbfit__cta-text {
    font-size:   1rem;
    color:       var(--color-muted);
    margin:      0;
    max-width:   480px;
    line-height: 1.6;
}

.mbfit__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.75rem 1.75rem;
    background:      var(--color-accent);
    color:           var(--color-bg);
    border-radius:   var(--radius-pill);
    font-size:       0.9375rem;
    font-weight:     500;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background-color var(--transition-base),
                     box-shadow       var(--transition-base),
                     transform        var(--transition-fast);
    flex-shrink:     0;
}

.mbfit__cta:hover {
    background: var(--color-accent-glow);
    color:      var(--color-bg);
    box-shadow: var(--glow-accent);
    transform:  translateY(-2px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mecow__models {
        grid-template-columns: repeat(2, 1fr);
    }

    .mbfit__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .mecow__head {
        grid-template-columns: 1fr;
    }

    .mecow__head-visual {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Kafelki float — ukryte na mobile, wylewają się poza kontener */
    .mecow__float-stat {
        display: none;
    }

    .mecow__bottom-cta {
        flex-direction: column;
        align-items:    flex-start;
    }
}

@media (max-width: 640px) {
    .mecow__models {
        grid-template-columns: 1fr;
    }

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

    .mbfit__cta-row {
        flex-direction: column;
        align-items:    flex-start;
    }
}


/* ===== michlor-founder: assets/css/founder.css ===== */
/* ============================================================
   SEKCJA ZAŁOŻYCIELA — Mariusz Michalak
   ============================================================ */

.mfounder {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: var(--color-bg-2, #071828);
    overflow: hidden;
}

/* Subtelny glow w tle */
.mfounder__bg-accent {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 15% 50%, rgba(79, 163, 212, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 85% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Wrapper */
.mfounder__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

/* ── ZDJĘCIE ── */
.mfounder__photo-col {
    position: relative;
}

.mfounder__photo-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 420px;
}

/* Linia akcentowa po lewej stronie zdjęcia */
.mfounder__photo-line {
    position: absolute;
    top: 2rem;
    left: -1.25rem;
    width: 3px;
    height: calc(100% - 4rem);
    background: linear-gradient(180deg, var(--color-accent) 0%, transparent 100%);
    border-radius: 2px;
}

.mfounder__photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
    filter: brightness(0.97) contrast(1.03);
    transition: transform 0.5s ease;
}

.mfounder__photo-frame:hover .mfounder__photo {
    transform: scale(1.015);
}

/* Badge z liczbą realizacji */
.mfounder__photo-badge {
    position: absolute;
    bottom: 1.5rem;
    right: -1.25rem;
    background: rgba(4, 18, 34, 0.97);
    border: 1.5px solid var(--color-accent);
    border-radius: .75rem;
    padding: .875rem 1.375rem;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 28px rgba(79, 163, 212, 0.45), 0 0 0 1px rgba(79, 163, 212, 0.15);
}

.mfounder__badge-val {
    display: block;
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size: 2.125rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    text-shadow: 0 0 18px rgba(79, 163, 212, 0.55);
}

.mfounder__badge-lbl {
    display: block;
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-top: .3rem;
    font-weight: 600;
}

/* ── TREŚĆ ── */
.mfounder__overline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.mfounder__name {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    margin: 0 0 .35rem;
}

.mfounder__role {
    font-size: .9rem;
    color: var(--color-muted);
    letter-spacing: .04em;
    margin: 0 0 1.75rem;
}

/* Cytat */
.mfounder__quote {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--color-accent);
    background: rgba(79, 163, 212, 0.06);
    border-radius: 0 .5rem .5rem 0;
}

.mfounder__quote p {
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0;
}

/* Bio */
.mfounder__bio {
    font-size: .9375rem;
    color: var(--color-muted);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}

/* Mini statystyki */
.mfounder__stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.mfounder__stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.mfounder__stat-val {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.mfounder__stat-lbl {
    font-size: .75rem;
    color: var(--color-muted);
    letter-spacing: .04em;
}

/* CTA link */
.mfounder__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: .125rem;
    transition: color var(--transition-fast, 0.2s), border-color var(--transition-fast, 0.2s);
}

.mfounder__cta:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ── RESPONSYWNOŚĆ ── */
@media (max-width: 768px) {
    .mfounder__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .mfounder__photo-col {
        display: flex;
        justify-content: center;
    }

    .mfounder__photo-frame {
        max-width: 320px;
    }

    .mfounder__photo-badge {
        right: 0;
    }

    .mfounder__photo-line {
        display: none;
    }

    .mfounder__stats {
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    .mfounder__stats {
        gap: 1rem;
    }

    .mfounder__stat-val {
        font-size: 1.375rem;
    }
}


/* ===== michlor-zgody: assets/css/zgody.css ===== */
/* MICHLOR — baner zgód na cookies + znaczek ustawień (2026-09-24), logika w assets/js/zgody.js */

.mzgody {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    background: rgba(4, 16, 30, .97);
    color: #e8eef4;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .35);
    border-top: 1px solid rgba(0, 180, 166, .35);
    font-family: 'DM Sans', system-ui, sans-serif;
}
.mzgody__in {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
}
.mzgody__txt {
    flex: 1 1 420px;
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: #e8eef4 !important;
}
.mzgody__txt a { color: #00B4A6; text-decoration: underline; }
.mzgody__opts { flex: 1 1 100%; display: grid; gap: 10px; }
.mzgody__opts[hidden] { display: none; }
.mzgody__h { margin: 0; font-weight: 700; font-size: .95rem; color: #fff !important; }
.mzgody__opt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .84rem;
    line-height: 1.45;
    color: #b8c7d3;
    cursor: pointer;
}
.mzgody__opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: #00B4A6; flex: 0 0 18px; }
.mzgody__opt strong { display: block; color: #e8eef4; }
.mzgody__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mzgody__btn {
    padding: 10px 18px;
    border-radius: 8px;
    font: 700 .86rem/1.2 'DM Sans', system-ui, sans-serif;
    cursor: pointer;
    border: 1px solid transparent;
}
.mzgody__btn[hidden] { display: none; }
.mzgody__btn--yes { background: #00B4A6; color: #04101E; }
.mzgody__btn--yes:hover { background: #1cc9bb; }
.mzgody__btn--ghost { background: transparent; color: #e8eef4; border-color: #3a5060; }
.mzgody__btn--ghost:hover { border-color: #7d94a6; }
.mzgody__btn:focus-visible, .mzgody-badge:focus-visible { outline: 2px solid #00B4A6; outline-offset: 2px; }

/* Znaczek w lewym dolnym rogu, jak w CookieYes */
.mzgody-badge {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9995;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 180, 166, .5);
    background: #0A2540;
    color: #00B4A6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
    opacity: .85;
    transition: opacity .2s, transform .2s;
}
.mzgody-badge:hover { opacity: 1; transform: scale(1.08); }
.mzgody-badge[hidden] { display: none; }

@media (max-width: 768px) {
    /* nad paskiem „Bezpłatna wycena” (.msticky-cta, ok. 66 px) */
    .mzgody { bottom: 66px; }
    .mzgody__in { padding: 12px 14px; }
    .mzgody__btns { width: 100%; }
    .mzgody__btn { flex: 1 1 auto; }
    .mzgody-badge { bottom: 78px; left: 12px; width: 40px; height: 40px; }
}