/* =========================================================
   MD KLIMA PROFESSIONAL 4.0
   MAIN CSS — FINAL DARK PREMIUM
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

html{
    box-sizing:border-box;
    background:#030914;
}

*,
*::before,
*::after{
    box-sizing:inherit;
}

body{
    margin:0;
    overflow-x:hidden;
    background:#030914;
    color:#fff;
}

img{
    max-width:100%;
    height:auto;
}

a{
    color:inherit;
}

.section{
    padding:90px 0;
}


/* =========================================================
   STARY HERO — JEŚLI JEST UŻYWANY
   ========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    padding:110px 0 90px;
    background:
        linear-gradient(
            90deg,
            rgba(3,9,20,.96),
            rgba(6,18,33,.88)
        ),
        url("../images/hero.jpg");
    background-size:cover;
    background-position:center;
    color:#fff;
}

.hero::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:#008fd3;
    opacity:.08;
    border-radius:50%;
    right:-150px;
    top:-150px;
}

.hero-grid{
    position:relative;
    z-index:2;
}


/* =========================================================
   TRUST
   ========================================================= */

.trust-bar{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:35px;
}

.trust-bar div{
    background:#10283a;
    color:#fff;
    padding:12px 20px;
    border-radius:40px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    font-weight:700;
    display:flex;
    gap:8px;
    align-items:center;
}


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

.hero-services{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.service-box{
    display:flex;
    align-items:center;
    gap:20px;
    padding:25px;
    border-radius:25px;
    color:#fff;
    transition:.35s;
    box-shadow:0 20px 40px rgba(0,0,0,.30);
    backdrop-filter:blur(10px);
}

.service-box:hover{
    transform:translateX(-10px);
}

.service-icon{
    font-size:55px;
    flex:0 0 auto;
}

.service-box h3{
    margin:0 0 8px;
    font-size:24px;
    color:#fff;
}

.service-box p{
    margin:0;
    color:#fff;
    font-size:15px;
}

.climate{
    background:linear-gradient(135deg,#008fd3,#00bfff);
}

.gas{
    background:linear-gradient(135deg,#f97316,#fb923c);
}

.computer{
    background:linear-gradient(135deg,#7c3aed,#a855f7);
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title span{
    color:#38bdf8;
    font-weight:800;
}

.section-title h2{
    font-size:42px;
    margin:15px 0 0;
    color:#fff;
}


/* =========================================================
   NASZE USŁUGI
   ========================================================= */

body.home .section:has(.services-grid){
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(0,143,211,.16),
            transparent 38%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(124,58,237,.10),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #081521 0%,
            #0b1c2a 100%
        );
    color:#fff;
}

body.home .section:has(.services-grid) .section-title span{
    color:#38bdf8;
    text-shadow:0 0 18px rgba(56,189,248,.45);
}

body.home .section:has(.services-grid) .section-title h2{
    color:#fff;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.service-card{
    position:relative;
    overflow:hidden;
    min-width:0;
    padding:35px;
    border-radius:30px;
    background:
        linear-gradient(
            145deg,
            #122c40 0%,
            #091a28 100%
        );
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 15px 40px rgba(0,0,0,.35);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.service-card::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-100px;
    top:-100px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    filter:blur(5px);
    pointer-events:none;
}

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

.service-card h3{
    position:relative;
    z-index:1;
    font-size:28px;
    color:#fff;
}

.service-card p{
    position:relative;
    z-index:1;
    color:rgba(255,255,255,.82);
    line-height:1.7;
}

.service-card a{
    position:relative;
    z-index:1;
    display:inline-block;
    margin-top:10px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    font-weight:800;
    text-decoration:none;
    transition:.3s ease;
}

.service-card a:hover{
    transform:translateX(5px);
    background:rgba(255,255,255,.14);
}

.big-icon{
    position:relative;
    z-index:2;
    font-size:70px;
    line-height:1;
    margin-bottom:20px;
}

.blue-card{
    border-top:8px solid #008fd3;
    box-shadow:0 15px 40px rgba(0,143,211,.16);
}

.blue-card:hover{
    border-color:#22bfff;
    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 35px rgba(0,191,255,.28);
}

.orange-card{
    border-top:8px solid #f97316;
    box-shadow:0 15px 40px rgba(249,115,22,.14);
}

.orange-card:hover{
    border-color:#fb923c;
    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 35px rgba(249,115,22,.25);
}

.purple-card{
    border-top:8px solid #7c3aed;
    box-shadow:0 15px 40px rgba(124,58,237,.14);
}

.purple-card:hover{
    border-color:#a855f7;
    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 35px rgba(168,85,247,.25);
}


/* =========================================================
   DLACZEGO MY
   ========================================================= */

.why-section{
    padding:90px 0;
    background:
        linear-gradient(
            180deg,
            #071522 0%,
            #0b1c2a 100%
        );
    color:#fff;
}

.why-section .section-title h2{
    color:#fff;
}

.why-section .section-title span{
    color:#38bdf8;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px;
}

.why-card{
    min-width:0;
    background:
        linear-gradient(
            145deg,
            #122c40,
            #091a28
        );
    color:#fff;
    padding:35px 25px;
    border-radius:30px;
    text-align:center;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 15px 40px rgba(0,0,0,.28);
    transition:.35s;
}

.why-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.4);
}

.why-icon{
    font-size:55px;
    margin-bottom:20px;
}

.why-card h3{
    font-size:22px;
    margin-bottom:15px;
    color:#fff;
}

.why-card p{
    color:#b9c9d8;
    line-height:1.6;
}


/* =========================================================
   STATYSTYKI
   ========================================================= */

.stats-section{
    padding:50px 0;
    background:#081521;
    color:#fff;
}

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

.stat-card{
    min-width:0;
    padding:30px 20px;
    border-radius:25px;
    background:#10283a;
    color:#fff;
    text-align:center;
    border:1px solid rgba(255,255,255,.10);
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-8px);
    background:#14334a;
    box-shadow:0 20px 40px rgba(0,0,0,.3);
}

.stat-icon{
    font-size:45px;
    margin-bottom:15px;
}

.stat-card strong{
    display:block;
    font-size:20px;
    margin-bottom:8px;
    color:#fff;
}

.stat-card span{
    color:#aebfd0;
}


/* =========================================================
   REALIZACJE
   ========================================================= */

.projects-section{
    padding:90px 0;
    background:#0b1c2a;
    color:#fff;
}

.projects-section .section-title h2{
    color:#fff;
}

.projects-section .section-title span{
    color:#38bdf8;
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.project-card{
    min-width:0;
    background:#122c40;
    color:#fff;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 15px 40px rgba(0,0,0,.30);
    transition:.35s;
}

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

.project-image{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:90px;
    color:#fff;
}

.climate-bg{
    background:linear-gradient(135deg,#008fd3,#00bfff);
}

.gas-bg{
    background:linear-gradient(135deg,#f97316,#fb923c);
}

.pc-bg{
    background:linear-gradient(135deg,#7c3aed,#a855f7);
}

.project-content{
    padding:30px;
}

.project-content h3{
    font-size:24px;
    margin-top:0;
    color:#fff;
}

.project-content p{
    color:#b9c9d8;
    line-height:1.6;
}


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

.reviews-section{
    padding:90px 0;
    background:#071522;
    color:#fff;
}

.reviews-section .section-title h2{
    color:#fff;
}

.reviews-section .section-title span{
    color:#38bdf8;
}

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.review-card{
    min-width:0;
    background:#122c40;
    color:#fff;
    padding:35px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 15px 40px rgba(0,0,0,.30);
    transition:.35s;
}

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

.stars{
    font-size:28px;
    letter-spacing:5px;
    color:#fbbf24;
    margin-bottom:20px;
}

.review-card p{
    font-size:17px;
    line-height:1.7;
    color:#c2d0de;
    font-style:italic;
}

.review-card strong{
    color:#fff;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-section{
    padding:90px 0;
    background:#0b1c2a;
    color:#fff;
}

.faq-section .section-title h2{
    color:#fff;
}

.faq-section .section-title span{
    color:#38bdf8;
}

.faq-list{
    max-width:900px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.faq-item{
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    overflow:hidden;
    background:#122c40;
    transition:.3s;
}

.faq-item:hover{
    border-color:rgba(56,189,248,.35);
}

.faq-question{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    background:transparent;
    border:0;
    color:#fff;
    cursor:pointer;
    font-size:18px;
    font-weight:700;
    text-align:left;
}

.faq-question span{
    font-size:26px;
    color:#38bdf8;
    transition:.3s;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    padding:0 20px;
    color:#b9c9d8;
    line-height:1.7;
    transition:max-height .35s ease,padding .35s ease;
}

.faq-item.active .faq-answer{
    max-height:300px;
    padding:0 20px 20px;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}


/* =========================================================
   KONTAKT — ZWARTY PREMIUM
   ========================================================= */

.contact-section{
    padding:55px 0 60px;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(0,143,211,.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #071522 0%,
            #0b1c2a 100%
        );
    color:#fff;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:center;
}

.contact-info{
    min-width:0;
}

.contact-info h2{
    font-size:36px;
    line-height:1.1;
    margin:0 0 15px;
    color:#fff;
}

.contact-info p{
    font-size:16px;
    line-height:1.6;
    color:#b9c9d8;
    margin:0 0 22px;
}


/* =========================================================
   TELEFON
   ========================================================= */

.contact-info .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 20px;
    border-radius:12px;
    background:linear-gradient(135deg,#087cf0,#16a8ff);
    color:#fff;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,137,255,.18);
    white-space:nowrap;
}

.contact-info .button:hover{
    transform:translateY(-2px);
}


/* =========================================================
   FORMULARZ — MNIEJSZY
   ========================================================= */

.contact-form-box{
    min-width:0;
    width:100%;
    max-width:650px;
    margin:0 auto;
    background:
        linear-gradient(
            145deg,
            #10283a,
            #0b2032
        );
    padding:22px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 20px 45px rgba(0,0,0,.30);
}

.mdk-form{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mdk-form label{
    width:100%;
    margin:0;
    padding:0;
    color:#fff;
    font-weight:700;
    font-size:14px;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.mdk-form input,
.mdk-form textarea{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:8px 12px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.16);
    background:#081a2a;
    color:#fff;
    font-size:14px;
    line-height:1.35;
    font-family:inherit;
    outline:none;
    box-shadow:none;
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.mdk-form input{
    height:40px;
}

.mdk-form textarea{
    min-height:85px;
    height:85px;
    resize:vertical;
}

.mdk-form input::placeholder,
.mdk-form textarea::placeholder{
    color:#7f95aa;
}

.mdk-form input:focus,
.mdk-form textarea:focus{
    border-color:#168ff0;
    background:#0a2032;
    box-shadow:0 0 0 3px rgba(0,143,211,.12);
}


/* =========================================================
   PRZYCISK WYŚLIJ — PEŁNA SZEROKOŚĆ
   ========================================================= */

.mdk-form button.button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:100%;
    min-height:48px;
    margin:4px 0 0;
    padding:12px 18px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,#087cf0,#16a8ff);
    color:#fff;
    font-size:15px;
    font-weight:800;
    line-height:1.2;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,137,255,.20);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.mdk-form button.button:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 15px 30px rgba(0,137,255,.30);
}

.mdk-form button.button:active{
    transform:translateY(0);
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.hidden-field{
    position:absolute!important;
    left:-9999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}


/* =========================================================
   KOMUNIKAT PO WYSŁANIU
   ========================================================= */

.success-message{
    display:flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(135deg,#15803d,#22c55e);
    color:#fff;
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:15px;
    animation:successShow .6s ease;
}

.success-message span{
    font-size:25px;
    font-weight:900;
    flex:0 0 auto;
}

.success-message strong{
    font-size:16px;
}

.success-message p{
    margin:2px 0 0;
    font-size:13px;
}

@keyframes successShow{
    from{
        opacity:0;
        transform:translateY(-15px) scale(.98);
    }

    to{
        opacity:1;
        transform:none;
    }
}


/* =========================================================
   PODSTRONY
   ========================================================= */

.page-header{
    padding:70px 0;
    background:
        linear-gradient(
            135deg,
            #008fd3,
            #7c3aed
        );
    color:#fff;
    text-align:center;
}

.page-header h1{
    font-size:48px;
    margin:0;
    color:#fff;
}

.content-box{
    background:
        linear-gradient(
            145deg,
            #10283a,
            #091a28
        );
    color:#fff;
    padding:40px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 15px 40px rgba(0,0,0,.30);
    line-height:1.8;
}

.content-box h2{
    color:#38bdf8;
    margin-top:35px;
}

.content-box p{
    color:#c2d0de;
}

.content-box li{
    color:#c2d0de;
}

.content-box img{
    border-radius:20px;
}


/* =========================================================
   404
   ========================================================= */

.error-page{
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#071522;
    color:#fff;
}

.error-page h1{
    font-size:120px;
    margin:0;
    font-weight:900;
    color:#38bdf8;
}

.error-page h2{
    font-size:40px;
    color:#fff;
}

.error-page p{
    font-size:18px;
    color:#b9c9d8;
    margin-bottom:30px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
    background:#030914;
    color:#fff;
    padding-top:60px;
}

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

.footer-contact a{
    color:#fff;
}

.footer-bottom{
    margin-top:40px;
    padding:20px;
    text-align:center;
    background:#020711;
}


/* =========================================================
   LOGO
   ========================================================= */

.custom-logo{
    max-height:65px;
    width:auto;
}

.logo{
    display:flex;
    align-items:center;
}

.logo a{
    display:flex;
    align-items:center;
}


/* =========================================================
   TELEFON
   ========================================================= */

.phone{
    white-space:nowrap;
}


/* =========================================================
   IKONY SVG
   ========================================================= */

.service-icon img{
    width:65px;
    height:65px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.big-icon img{
    width:80px;
    height:80px;
    object-fit:contain;
}


/* =========================================================
   ANIMACJE
   ========================================================= */

.hero-content,
.hero-services,
.service-card{
    animation:fadeUp .8s ease both;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.hidden{
    opacity:0;
    transform:translateY(40px);
    transition:.8s ease;
}

.show{
    opacity:1;
    transform:none;
}


/* =========================================================
   MENU MOBILNE
   ========================================================= */

.menu-toggle{
    width:45px;
    height:45px;
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    cursor:pointer;
}

.menu-toggle span{
    height:3px;
    width:28px;
    background:#fff;
    border-radius:5px;
    transition:.3s;
}

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

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

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


/* =========================================================
   GLOBALNE ZABEZPIECZENIE PRZED BIAŁYMI POLAMI
   ========================================================= */

body.home .section{
    color:#fff;
}

body.home .section-title h2,
body.home .section-title h3{
    color:#fff;
}

body.home .section p{
    color:#c2d0de;
}

body.home .service-card p,
body.home .why-card p,
body.home .project-content p,
body.home .review-card p,
body.home .stat-card span{
    color:#b9c9d8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

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

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

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

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

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

    .contact-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .contact-form-box{
        max-width:100%;
    }

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


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .section{
        padding:65px 0;
    }

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

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

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

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

    .hero h1{
        font-size:clamp(42px,7vw,65px);
        line-height:1;
    }

    .menu-toggle{
        display:flex;
    }

    .main-menu{
        position:fixed;
        top:85px;
        left:0;
        right:0;
        background:#071522;
        padding:25px;
        box-shadow:0 20px 40px rgba(0,0,0,.35);
        transform:translateY(-120%);
        transition:.4s;
        z-index:9999;
    }

    .main-menu.open{
        transform:none;
    }

    .main-menu .menu{
        flex-direction:column;
        gap:20px;
    }

    .header-contact{
        display:none;
    }

    .contact-section{
        padding:50px 0;
    }

    .contact-info h2{
        font-size:32px;
    }

    .contact-form-box{
        padding:18px;
        border-radius:18px;
    }
}


/* =========================================================
   MAŁE TELEFONY
   ========================================================= */

@media(max-width:600px){

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

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

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

    .section-title h2{
        font-size:34px;
    }

    .page-header h1{
        font-size:38px;
    }

    .content-box{
        padding:25px;
        border-radius:22px;
    }

    .contact-info .button{
        width:100%;
    }

    .mdk-form input{
        height:40px;
    }

    .mdk-form textarea{
        min-height:90px;
        height:90px;
    }

    .mdk-form button.button{
        min-height:50px;
    }

    .phone{
        font-size:16px;
    }

    .hero-buttons .button{
        width:100%;
    }

    .trust-bar{
        flex-direction:column;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }
}
/* =========================================================
   MD KLIMA — ANIMACJA WYSYŁANIA FORMULARZA
========================================================= */

.mdk-form button.mdk-sending,
.mdk-form button.mdk-sent{
    position:relative;
    overflow:hidden;
}

.mdk-form button.mdk-sending{
    cursor:wait;
    opacity:.92;
}

.mdk-send-spinner,
.mdk-result-spinner{
    display:inline-block;
    width:19px;
    height:19px;
    border:3px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    animation:mdkSpinner .75s linear infinite;
    flex:0 0 auto;
}

.mdk-form button.mdk-sending{
    gap:10px;
}

.mdk-form button.mdk-sent{
    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );
    box-shadow:
        0 10px 35px rgba(34,197,94,.30);
}

.mdk-success-check{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(255,255,255,.20);
    font-size:17px;
    font-weight:900;
    animation:mdkSuccessPop .45s ease;
}

.mdk-contact-result{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:10px;
    padding:10px 14px;
    border-radius:10px;
    font-size:14px;
    line-height:1.4;
}

.mdk-result-sending{
    color:#9fc9e8;
    background:rgba(8,124,240,.08);
}

.mdk-result-success{
    color:#86efac;
    background:rgba(34,197,94,.10);
    animation:mdkSuccessFade .5s ease;
}

.mdk-success-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    font-weight:900;
    animation:mdkSuccessPop .45s ease;
}

@keyframes mdkSpinner{

    to{
        transform:rotate(360deg);
    }

}

@keyframes mdkSuccessPop{

    0%{
        transform:scale(.4);
        opacity:0;
    }

    70%{
        transform:scale(1.15);
        opacity:1;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

@keyframes mdkSuccessFade{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

@media(max-width:600px){

    .mdk-contact-result{
        font-size:13px;
    }

}
/* =========================================================
   MD KLIMA — KOLOR TEKSTU ANIMACJI WYSYŁANIA
========================================================= */

.mdk-form button.mdk-sending,
.mdk-form button.mdk-sending span,
.mdk-form button.mdk-sending .mdk-send-spinner{
    color:#ffffff !important;
}

.mdk-form button.mdk-sent,
.mdk-form button.mdk-sent span,
.mdk-form button.mdk-sent .mdk-success-check{
    color:#ffffff !important;
}

.mdk-form button.mdk-sending{
    background:linear-gradient(135deg,#087cf0,#16a8ff) !important;
}

.mdk-form button.mdk-sent{
    background:linear-gradient(135deg,#16a34a,#22c55e) !important;
}

.mdk-send-spinner{
    border-color:rgba(255,255,255,.35) !important;
    border-top-color:#ffffff !important;
}

.mdk-success-check{
    color:#ffffff !important;
}
/* =========================================================
   MD KLIMA — FINALNY STAN „WIADOMOŚĆ WYSŁANA”
========================================================= */

.mdk-form button.button.mdk-sent,
.mdk-form button.mdk-sent {
    background: #16a34a !important;
    background-image: linear-gradient(
        135deg,
        #15803d 0%,
        #22c55e 100%
    ) !important;

    color: #ffffff !important;

    border: 0 !important;

    box-shadow:
        0 10px 30px rgba(34,197,94,.35),
        0 0 25px rgba(34,197,94,.15) !important;
}

.mdk-form button.button.mdk-sent:hover,
.mdk-form button.mdk-sent:hover {
    background: #22c55e !important;
    background-image: linear-gradient(
        135deg,
        #16a34a 0%,
        #22c55e 100%
    ) !important;

    color: #ffffff !important;
}

.mdk-form button.mdk-sent span,
.mdk-form button.mdk-sent .mdk-success-check {
    color: #ffffff !important;
}

.mdk-form button.mdk-sent .mdk-success-check {
    background: rgba(255,255,255,.20) !important;
}
 /* =========================================================
    MD KLIMA — FINALNA ANIMACJA FORMULARZA
 ========================================================= */

.mdk-form button.mdk-sending,
.mdk-form button.mdk-sending.button {
    background: linear-gradient(
        135deg,
        #087cf0 0%,
        #16a8ff 100%
    ) !important;

    background-color: #087cf0 !important;

    color: #ffffff !important;

    border: 0 !important;

    cursor: wait !important;

    opacity: .95 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;
}


/* =========================================================
   SPINNER
 ========================================================= */

.mdk-send-spinner {
    width: 19px !important;
    height: 19px !important;

    display: inline-block !important;

    border: 3px solid rgba(255,255,255,.35) !important;

    border-top-color: #ffffff !important;

    border-radius: 50% !important;

    animation:
        mdkFormSpin .7s linear infinite !important;

    flex: 0 0 auto !important;
}


@keyframes mdkFormSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   WYSŁANO — ZIELONY PRZYCISK
 ========================================================= */

.mdk-form button.mdk-sent,
.mdk-form button.mdk-sent.button {

    background: linear-gradient(
        135deg,
        #15803d 0%,
        #22c55e 100%
    ) !important;

    background-color: #16a34a !important;

    color: #ffffff !important;

    border: 0 !important;

    cursor: default !important;

    box-shadow:
        0 10px 30px rgba(34,197,94,.35) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;
}


/* =========================================================
   BIAŁY PTASZEK
 ========================================================= */

.mdk-success-check {

    width: 25px !important;
    height: 25px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.20) !important;

    color: #ffffff !important;

    font-size: 17px !important;

    font-weight: 900 !important;

    animation:
        mdkCheckPop .45s ease both !important;
}


@keyframes mdkCheckPop {

    0% {
        transform: scale(.3);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}


/* =========================================================
   ZIELONE POTWIERDZENIE
 ========================================================= */

.mdk-form-success {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

    margin-top: 18px !important;

    padding: 17px 20px !important;

    border-radius: 15px !important;

    background: linear-gradient(
        135deg,
        rgba(21,128,61,.95),
        rgba(34,197,94,.95)
    ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(134,239,172,.30) !important;

    box-shadow:
        0 12px 35px rgba(34,197,94,.20) !important;

    animation:
        mdkSuccessAppear .5s ease both !important;
}


.mdk-form-success-icon {

    width: 34px !important;
    height: 34px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    color: #16a34a !important;

    font-size: 21px !important;

    font-weight: 900 !important;

    animation:
        mdkCheckPop .5s ease both !important;
}


.mdk-form-success div {

    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;
}


.mdk-form-success strong {

    display: block !important;

    color: #ffffff !important;

    font-size: 17px !important;

}


.mdk-form-success span:not(.mdk-form-success-icon) {

    display: block !important;

    color: rgba(255,255,255,.88) !important;

    font-size: 14px !important;

    line-height: 1.45 !important;

}


@keyframes mdkSuccessAppear {

    from {

        opacity: 0;

        transform:
            translateY(12px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   MOBILE
 ========================================================= */

@media(max-width:600px) {

    .mdk-form-success {

        padding: 15px !important;

    }

    .mdk-form-success strong {

        font-size: 16px !important;

    }

    .mdk-form-success span:not(.mdk-form-success-icon) {

        font-size: 13px !important;

    }

}
/* =========================================================
   MD KLIMA — FORMULARZ KONTAKTOWY
   FINALNA ANIMACJA WYSYŁANIA
========================================================= */


/* =========================================================
   WYSYŁANIE
========================================================= */

.mdk-form button.mdk-sending,
.mdk-form button.mdk-sending.button {

    width:100% !important;

    min-width:100% !important;

    min-height:54px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    background:
        linear-gradient(
            135deg,
            #087cf0 0%,
            #16a8ff 100%
        ) !important;

    color:#ffffff !important;

    border:0 !important;

    cursor:wait !important;

    opacity:.95 !important;

    transform:none !important;

    box-shadow:
        0 10px 30px rgba(0,137,255,.25) !important;
}


/* =========================================================
   SPINNER
========================================================= */

.mdk-send-spinner {

    width:20px !important;

    height:20px !important;

    display:inline-block !important;

    flex:0 0 20px !important;

    border:
        3px solid
        rgba(255,255,255,.35) !important;

    border-top-color:
        #ffffff !important;

    border-radius:50% !important;

    animation:
        mdkSpinner .7s linear infinite !important;
}


@keyframes mdkSpinner {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}


/* =========================================================
   WYSŁANO — ZIELONY PRZYCISK
========================================================= */

.mdk-form button.mdk-sent,
.mdk-form button.mdk-sent.button {

    width:100% !important;

    min-width:100% !important;

    min-height:54px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:9px !important;

    background:
        linear-gradient(
            135deg,
            #15803d 0%,
            #22c55e 100%
        ) !important;

    background-color:#16a34a !important;

    color:#ffffff !important;

    border:0 !important;

    cursor:default !important;

    opacity:1 !important;

    box-shadow:
        0 10px 30px
        rgba(34,197,94,.30) !important;

    transform:none !important;
}


/* =========================================================
   BIAŁY PTASZEK W PRZYCISKU
========================================================= */

.mdk-success-check {

    width:26px !important;

    height:26px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex:0 0 26px !important;

    border-radius:50% !important;

    background:#ffffff !important;

    color:#16a34a !important;

    font-size:17px !important;

    font-weight:900 !important;

    line-height:1 !important;

    animation:
        mdkCheck .4s ease both !important;
}


@keyframes mdkCheck {

    0% {

        transform:scale(.3);

        opacity:0;

    }

    70% {

        transform:scale(1.15);

        opacity:1;

    }

    100% {

        transform:scale(1);

        opacity:1;

    }

}


/* =========================================================
   ZIELONE POTWIERDZENIE
========================================================= */

.mdk-contact-success {

    width:100% !important;

    margin-top:18px !important;

}


.mdk-success-box {

    width:100% !important;

    display:flex !important;

    align-items:center !important;

    gap:14px !important;

    padding:18px 20px !important;

    border-radius:16px !important;

    background:
        linear-gradient(
            135deg,
            #15803d 0%,
            #22c55e 100%
        ) !important;

    color:#ffffff !important;

    border:
        1px solid
        rgba(134,239,172,.35) !important;

    box-shadow:
        0 12px 35px
        rgba(34,197,94,.22) !important;

    animation:
        mdkSuccess .5s ease both !important;
}


.mdk-success-icon {

    width:36px !important;

    height:36px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex:0 0 36px !important;

    border-radius:50% !important;

    background:#ffffff !important;

    color:#16a34a !important;

    font-size:22px !important;

    font-weight:900 !important;

    line-height:1 !important;
}


.mdk-success-text {

    display:flex !important;

    flex-direction:column !important;

    gap:3px !important;
}


.mdk-success-text strong {

    display:block !important;

    color:#ffffff !important;

    font-size:18px !important;

    font-weight:800 !important;
}


.mdk-success-text span {

    display:block !important;

    color:
        rgba(255,255,255,.90) !important;

    font-size:14px !important;

    line-height:1.45 !important;
}


@keyframes mdkSuccess {

    from {

        opacity:0;

        transform:
            translateY(12px)
            scale(.97);

    }

    to {

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   BŁĄD
========================================================= */

.mdk-error-box {

    width:100% !important;

    padding:16px 18px !important;

    margin-top:18px !important;

    border-radius:14px !important;

    background:#991b1b !important;

    color:#ffffff !important;

    border:
        1px solid
        rgba(255,255,255,.15) !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .mdk-success-box {

        padding:15px !important;

    }

    .mdk-success-text strong {

        font-size:16px !important;

    }

    .mdk-success-text span {

        font-size:13px !important;

    }

}
/* =========================================================
   MD KLIMA — NASZE USŁUGI
   WOW EFFECT 1.0
   NIE RUSZA SZEROKOĹšCI STRONY
========================================================= */

body.home .section:has(.services-grid){

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(0,143,211,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(124,58,237,.16),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #030b14 0%,
            #061421 48%,
            #030a12 100%
        );

    color:#fff;
}


/* =========================================================
   DELIKATNA SIATKA W TLE
========================================================= */

body.home .section:has(.services-grid)::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(45,155,220,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45,155,220,.045) 1px,
            transparent 1px
        );

    background-size:50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 95%
        );

    pointer-events:none;
}


/* =========================================================
   POĹšWIATA SEKCJI
========================================================= */

body.home .section:has(.services-grid)::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:50%;
    top:45%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            rgba(0,143,211,.08),
            transparent 68%
        );

    filter:blur(20px);

    pointer-events:none;
}


/* =========================================================
   TYTUŁ
========================================================= */

body.home .section:has(.services-grid) .section-title{

    position:relative;

    z-index:2;

    margin-bottom:55px;
}


body.home .section:has(.services-grid) .section-title span{

    display:inline-block;

    color:#42c7ff;

    font-size:14px;

    font-weight:900;

    letter-spacing:.18em;

    text-transform:uppercase;

    text-shadow:
        0 0 18px
        rgba(66,199,255,.55);

    animation:
        mdkServicesGlow 3s ease-in-out infinite;
}


body.home .section:has(.services-grid) .section-title h2{

    margin-top:14px;

    color:#fff;

    font-size:clamp(
        32px,
        4vw,
        48px
    );

    line-height:1.05;

    letter-spacing:-.035em;

    text-shadow:
        0 8px 35px
        rgba(0,0,0,.35);
}


/* =========================================================
   GRID
========================================================= */

body.home .section:has(.services-grid) .services-grid{

    position:relative;

    z-index:3;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:28px;

    width:100%;
}


/* =========================================================
   KARTY
========================================================= */

body.home .section:has(.services-grid) .service-card{

    position:relative;

    min-width:0;

    overflow:hidden;

    padding:38px 34px 32px;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(18,48,70,.96),
            rgba(5,19,31,.98)
        );

    border:
        1px solid
        rgba(255,255,255,.10);

    color:#fff;

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.40);

    transform:
        translateY(0);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;

}


/* =========================================================
   SZKLANY REFLEKS
========================================================= */

body.home .section:has(.services-grid) .service-card::before{

    content:"";

    position:absolute;

    top:-80%;

    left:-70%;

    width:55%;

    height:240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );

    transform:
        rotate(25deg);

    transition:
        left .8s ease;

    pointer-events:none;
}


body.home .section:has(.services-grid) .service-card:hover::before{

    left:125%;
}


/* =========================================================
   GĂ“RNA POĹšWIATA
========================================================= */

body.home .section:has(.services-grid) .service-card::after{

    content:"";

    position:absolute;

    width:190px;
    height:190px;

    right:-90px;
    top:-90px;

    border-radius:50%;

    background:
        rgba(255,255,255,.05);

    filter:blur(5px);

    pointer-events:none;
}


/* =========================================================
   HOVER KARTY
========================================================= */

body.home .section:has(.services-grid) .service-card:hover{

    transform:
        translateY(-14px);

    border-color:
        rgba(255,255,255,.22);

    box-shadow:
        0 35px 75px
        rgba(0,0,0,.52);
}


/* =========================================================
   IKONY
========================================================= */

body.home .section:has(.services-grid) .big-icon{

    position:relative;

    z-index:5;

    width:86px;
    height:86px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:24px;

    border-radius:24px;

    font-size:58px;

    line-height:1;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.10),
        0 15px 35px
        rgba(0,0,0,.25);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        background .45s ease;
}


body.home .section:has(.services-grid) .service-card:hover .big-icon{

    transform:
        translateY(-5px)
        scale(1.08)
        rotate(-2deg);

}


/* =========================================================
   KLIMATYZACJA — NIEBIESKA
========================================================= */

body.home .section:has(.services-grid) .blue-card{

    border-top:
        3px solid #16a8ff;

    box-shadow:
        0 20px 55px
        rgba(0,143,211,.18);

}


body.home .section:has(.services-grid) .blue-card .big-icon{

    background:
        linear-gradient(
            135deg,
            rgba(0,143,211,.22),
            rgba(0,191,255,.07)
        );

    box-shadow:
        0 0 35px
        rgba(0,174,255,.18),
        inset 0 1px 0
        rgba(255,255,255,.10);
}


body.home .section:has(.services-grid) .blue-card:hover{

    border-color:
        rgba(36,188,255,.65);

    box-shadow:
        0 35px 75px
        rgba(0,0,0,.55),
        0 0 45px
        rgba(0,174,255,.22);
}


/* =========================================================
   GAZ — POMARAŃCZOWA
========================================================= */

body.home .section:has(.services-grid) .orange-card{

    border-top:
        3px solid #fb923c;

    box-shadow:
        0 20px 55px
        rgba(249,115,22,.16);

}


body.home .section:has(.services-grid) .orange-card .big-icon{

    background:
        linear-gradient(
            135deg,
            rgba(249,115,22,.22),
            rgba(251,146,60,.06)
        );

    box-shadow:
        0 0 35px
        rgba(249,115,22,.18),
        inset 0 1px 0
        rgba(255,255,255,.10);
}


body.home .section:has(.services-grid) .orange-card:hover{

    border-color:
        rgba(251,146,60,.65);

    box-shadow:
        0 35px 75px
        rgba(0,0,0,.55),
        0 0 45px
        rgba(249,115,22,.20);
}


/* =========================================================
   KOMPUTERY — FIOLETOWA
========================================================= */

body.home .section:has(.services-grid) .purple-card{

    border-top:
        3px solid #a855f7;

    box-shadow:
        0 20px 55px
        rgba(124,58,237,.16);

}


body.home .section:has(.services-grid) .purple-card .big-icon{

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.24),
            rgba(168,85,247,.07)
        );

    box-shadow:
        0 0 35px
        rgba(168,85,247,.18),
        inset 0 1px 0
        rgba(255,255,255,.10);
}


body.home .section:has(.services-grid) .purple-card:hover{

    border-color:
        rgba(168,85,247,.65);

    box-shadow:
        0 35px 75px
        rgba(0,0,0,.55),
        0 0 45px
        rgba(168,85,247,.20);
}


/* =========================================================
   NAGŁÓWKI
========================================================= */

body.home .section:has(.services-grid) .service-card h3{

    position:relative;

    z-index:5;

    margin:
        0 0 13px;

    color:#fff;

    font-size:26px;

    line-height:1.15;

    letter-spacing:-.02em;

    transition:
        transform .35s ease;
}


body.home .section:has(.services-grid) .service-card:hover h3{

    transform:
        translateX(4px);

}


/* =========================================================
   OPIS
========================================================= */

body.home .section:has(.services-grid) .service-card p{

    position:relative;

    z-index:5;

    margin:
        0 0 24px;

    color:
        rgba(220,232,245,.78);

    font-size:15px;

    line-height:1.7;

}


/* =========================================================
   WIĘCEJ INFORMACJI
========================================================= */

body.home .section:has(.services-grid) .service-card a{

    position:relative;

    z-index:6;

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:2px;

    padding:
        11px 17px;

    border-radius:999px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.14);

    color:#fff;

    font-size:14px;

    font-weight:800;

    text-decoration:none;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


body.home .section:has(.services-grid) .service-card a:hover{

    transform:
        translateX(6px);

    background:
        rgba(255,255,255,.12);

    border-color:
        rgba(255,255,255,.28);

    box-shadow:
        0 0 25px
        rgba(56,189,248,.16);
}


/* =========================================================
   DELIKATNE PULSOWANIE IKON
========================================================= */

@keyframes mdkServicesGlow{

    0%,100%{
        opacity:.85;
    }

    50%{
        opacity:1;
        text-shadow:
            0 0 24px
            rgba(66,199,255,.75);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    body.home .section:has(.services-grid) .services-grid{

        grid-template-columns:
            1fr;

        gap:22px;

    }

    body.home .section:has(.services-grid) .service-card{

        padding:30px;

    }

}


@media(max-width:600px){

    body.home .section:has(.services-grid){

        padding:
            70px 0;

    }

    body.home .section:has(.services-grid) .section-title{

        margin-bottom:38px;

    }

    body.home .section:has(.services-grid) .service-card{

        padding:27px 24px;

        border-radius:24px;

    }

    body.home .section:has(.services-grid) .big-icon{

        width:74px;
        height:74px;

        font-size:48px;

        border-radius:20px;

    }

    body.home .section:has(.services-grid) .service-card h3{

        font-size:23px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    body.home .section:has(.services-grid) .service-card,
    body.home .section:has(.services-grid) .big-icon,
    body.home .section:has(.services-grid) .service-card::before{

        transition:none !important;

    }

    body.home .section:has(.services-grid) .section-title span{

        animation:none !important;

    }

}
/* =========================================================
   MD KLIMA — NASZE USŁUGI — WOW EFFECT
   ========================================================= */

body.home .section:has(.services-grid){
    position:relative;
    overflow:hidden;
    padding-top:80px;
    padding-bottom:90px;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0,143,211,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 25%,
            rgba(124,58,237,.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(0,191,255,.08),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #050d18 0%,
            #081827 50%,
            #030914 100%
        );
}


/* Delikatna siatka technologiczna */

body.home .section:has(.services-grid)::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(
            rgba(56,189,248,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56,189,248,.035) 1px,
            transparent 1px
        );
    background-size:45px 45px;
    mask-image:linear-gradient(
        to bottom,
        rgba(0,0,0,.8),
        transparent 90%
    );
    pointer-events:none;
}


/* Światło za kartami */

body.home .section:has(.services-grid)::after{
    content:"";
    position:absolute;
    width:700px;
    height:350px;
    left:50%;
    bottom:-220px;
    transform:translateX(-50%);
    background:radial-gradient(
        ellipse,
        rgba(0,157,255,.16),
        transparent 70%
    );
    filter:blur(30px);
    pointer-events:none;
}


/* Tytuł */

body.home .section:has(.services-grid) .section-title{
    position:relative;
    z-index:2;
    margin-bottom:55px;
}

body.home .section:has(.services-grid) .section-title span{
    display:inline-block;
    color:#4cc9ff;
    font-size:14px;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-shadow:
        0 0 10px rgba(56,189,248,.6),
        0 0 25px rgba(56,189,248,.25);
}

body.home .section:has(.services-grid) .section-title h2{
    margin-top:12px;
    color:#fff;
    font-size:clamp(34px,4vw,48px);
    letter-spacing:-.035em;
    text-shadow:
        0 4px 25px rgba(0,0,0,.45);
}


/* GRID */

body.home .section:has(.services-grid) .services-grid{
    position:relative;
    z-index:2;
    gap:25px;
}


/* =========================================================
   KARTY
   ========================================================= */

body.home .section:has(.services-grid) .service-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:38px 32px 32px;
    min-height:330px;

    background:
        linear-gradient(
            145deg,
            rgba(18,44,64,.96),
            rgba(5,17,29,.98)
        );

    border:1px solid rgba(255,255,255,.10);
    border-radius:26px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);

    transform:translateY(0);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* Ĺšwietlny refleks przechodzÄ…cy po karcie */

body.home .section:has(.services-grid) .service-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    top:-80%;
    left:-100%;
    width:60%;
    height:260%;
    transform:rotate(22deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    transition:left .8s ease;
    pointer-events:none;
}

body.home .section:has(.services-grid) .service-card:hover::after{
    left:150%;
}


/* GĂłrna linia */

body.home .section:has(.services-grid) .service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:12%;
    right:12%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #22bfff,
        transparent
    );

    opacity:.75;
    box-shadow:
        0 0 15px rgba(34,191,255,.7);

    pointer-events:none;
}


/* HOVER KARTY */

body.home .section:has(.services-grid) .service-card:hover{
    transform:translateY(-14px) scale(1.015);

    border-color:rgba(56,189,248,.42);

    box-shadow:
        0 30px 70px rgba(0,0,0,.50),
        0 0 35px rgba(0,157,255,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* =========================================================
   IKONY
   ========================================================= */

body.home .section:has(.services-grid) .big-icon{
    position:relative;
    width:82px;
    height:82px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:24px;

    font-size:52px;
    line-height:1;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 30px rgba(0,0,0,.25);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

body.home .section:has(.services-grid) .service-card:hover .big-icon{
    transform:
        translateY(-5px)
        scale(1.10)
        rotate(-3deg);

    box-shadow:
        0 0 25px rgba(34,191,255,.28),
        inset 0 1px 0 rgba(255,255,255,.12);
}


/* =========================================================
   KLIMATYZACJA
   ========================================================= */

body.home .section:has(.services-grid) .blue-card:hover{
    border-color:rgba(34,191,255,.65);

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 45px rgba(0,174,255,.25);
}

body.home .section:has(.services-grid) .blue-card .big-icon{
    background:
        radial-gradient(
            circle,
            rgba(0,174,255,.22),
            rgba(0,174,255,.03) 70%
        );
}


/* =========================================================
   GAZ
   ========================================================= */

body.home .section:has(.services-grid) .orange-card:hover{
    border-color:rgba(251,146,60,.65);

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 45px rgba(249,115,22,.24);
}

body.home .section:has(.services-grid) .orange-card .big-icon{
    background:
        radial-gradient(
            circle,
            rgba(249,115,22,.22),
            rgba(249,115,22,.03) 70%
        );
}


/* =========================================================
   KOMPUTERY
   ========================================================= */

body.home .section:has(.services-grid) .purple-card:hover{
    border-color:rgba(168,85,247,.65);

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 45px rgba(168,85,247,.25);
}

body.home .section:has(.services-grid) .purple-card .big-icon{
    background:
        radial-gradient(
            circle,
            rgba(168,85,247,.22),
            rgba(168,85,247,.03) 70%
        );
}


/* =========================================================
   TEKST
   ========================================================= */

body.home .section:has(.services-grid) .service-card h3{
    position:relative;
    margin:0 0 12px;
    font-size:27px;
    letter-spacing:-.02em;
    color:#fff;
}

body.home .section:has(.services-grid) .service-card p{
    position:relative;
    margin:0;
    min-height:76px;
    color:#b8c9d9;
    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   PRZYCISK
   ========================================================= */

body.home .section:has(.services-grid) .service-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:18px;
    padding:11px 17px;

    border-radius:12px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.13);

    color:#eaf6ff;
    font-size:14px;
    font-weight:800;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

body.home .section:has(.services-grid) .service-card a:hover{
    transform:translateX(6px);

    background:rgba(34,168,255,.12);
    border-color:rgba(34,168,255,.45);

    box-shadow:
        0 0 20px rgba(34,168,255,.16);
}


/* =========================================================
   ANIMACJA WEJĹšCIA KART
   ========================================================= */

body.home .section:has(.services-grid) .service-card{
    animation:mdkServiceAppear .7s cubic-bezier(.2,.8,.2,1) both;
}

body.home .section:has(.services-grid) .service-card:nth-child(1){
    animation-delay:.05s;
}

body.home .section:has(.services-grid) .service-card:nth-child(2){
    animation-delay:.18s;
}

body.home .section:has(.services-grid) .service-card:nth-child(3){
    animation-delay:.31s;
}

@keyframes mdkServiceAppear{
    from{
        opacity:0;
        transform:translateY(35px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    body.home .section:has(.services-grid){
        padding-top:60px;
        padding-bottom:65px;
    }

    body.home .section:has(.services-grid) .services-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    body.home .section:has(.services-grid) .service-card{
        min-height:auto;
        padding:30px 25px 28px;
    }

    body.home .section:has(.services-grid) .service-card p{
        min-height:auto;
    }

    body.home .section:has(.services-grid) .big-icon{
        width:72px;
        height:72px;
        font-size:45px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    body.home .section:has(.services-grid) .service-card,
    body.home .section:has(.services-grid) .service-card::after{
        animation:none!important;
        transition:none!important;
    }

}
/* =========================================================
   MD KLIMA — NASZE USŁUGI
   WOW EFFECT 2.0 — FINAL
   ========================================================= */

body.home .services-grid .service-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    transform:translateY(0) scale(1) !important;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .35s ease !important;
}

/* ŚWIATŁO PRZESUWAJĄCE SIĘ PO KARCIE */

body.home .services-grid .service-card::before{
    content:"" !important;

    position:absolute !important;
    z-index:1 !important;

    top:-100% !important;
    left:-160% !important;

    width:70% !important;
    height:300% !important;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.04) 35%,
        rgba(255,255,255,.22) 50%,
        rgba(255,255,255,.04) 65%,
        transparent 100%
    ) !important;

    transform:rotate(25deg) !important;

    transition:left .9s cubic-bezier(.2,.7,.2,1) !important;

    pointer-events:none !important;
}

/* ŚWIATŁO PO NAJECHANIU */

body.home .services-grid .service-card:hover::before{
    left:160% !important;
}

/* KARTA UNOSI SIĘ */

body.home .services-grid .service-card:hover{
    transform:translateY(-18px) scale(1.025) !important;

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 35px rgba(0,160,255,.15) !important;
}

/* ZAWARTOŚĆ NAD EFEKTEM */

body.home .services-grid .service-card > *{
    position:relative;
    z-index:3;
}

/* IKONA */

body.home .services-grid .big-icon{
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        filter .45s ease !important;
}

/* IKONA — HOVER */

body.home .services-grid .service-card:hover .big-icon{
    transform:
        translateY(-8px)
        scale(1.12)
        rotate(-3deg) !important;

    filter:
        brightness(1.15)
        drop-shadow(0 0 15px rgba(255,255,255,.25)) !important;
}

/* =========================================================
   NIEBIESKA — KLIMATYZACJA
   ========================================================= */

body.home .services-grid .blue-card{
    border-top:3px solid #16a8ff !important;
}

body.home .services-grid .blue-card:hover{
    border-color:#16a8ff !important;

    box-shadow:
        0 30px 75px rgba(0,0,0,.55),
        0 0 55px rgba(0,174,255,.35) !important;
}

body.home .services-grid .blue-card:hover .big-icon{
    box-shadow:
        0 0 45px rgba(0,174,255,.45),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* =========================================================
   POMARAŃCZOWA — GAZ
   ========================================================= */

body.home .services-grid .orange-card{
    border-top:3px solid #fb923c !important;
}

body.home .services-grid .orange-card:hover{
    border-color:#fb923c !important;

    box-shadow:
        0 30px 75px rgba(0,0,0,.55),
        0 0 55px rgba(249,115,22,.35) !important;
}

body.home .services-grid .orange-card:hover .big-icon{
    box-shadow:
        0 0 45px rgba(249,115,22,.45),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* =========================================================
   FIOLETOWA — KOMPUTERY
   ========================================================= */

body.home .services-grid .purple-card{
    border-top:3px solid #a855f7 !important;
}

body.home .services-grid .purple-card:hover{
    border-color:#a855f7 !important;

    box-shadow:
        0 30px 75px rgba(0,0,0,.55),
        0 0 55px rgba(168,85,247,.35) !important;
}

body.home .services-grid .purple-card:hover .big-icon{
    box-shadow:
        0 0 45px rgba(168,85,247,.45),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* =========================================================
   TEKST — LEKKIE PODBICIE
   ========================================================= */

body.home .services-grid .service-card h3{
    transition:
        transform .35s ease,
        text-shadow .35s ease !important;
}

body.home .services-grid .service-card:hover h3{
    transform:translateX(4px) !important;

    text-shadow:
        0 0 18px rgba(255,255,255,.25) !important;
}

/* OPIS */

body.home .services-grid .service-card p{
    transition:
        color .35s ease !important;
}

body.home .services-grid .service-card:hover p{
    color:#dbeafe !important;
}

/* LINK */

body.home .services-grid .service-card a{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;

    transition:
        transform .35s ease,
        color .35s ease !important;
}

body.home .services-grid .service-card:hover a{
    transform:translateX(7px) !important;
}

/* =========================================================
   ANIMACJA POJAWIENIA KART
   ========================================================= */

@keyframes mdkServiceAppear{
    from{
        opacity:0;
        transform:translateY(45px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

body.home .services-grid .service-card{
    animation:
        mdkServiceAppear .8s cubic-bezier(.2,.8,.2,1) both !important;
}

body.home .services-grid .service-card:nth-child(1){
    animation-delay:.10s !important;
}

body.home .services-grid .service-card:nth-child(2){
    animation-delay:.25s !important;
}

body.home .services-grid .service-card:nth-child(3){
    animation-delay:.40s !important;
}

/* =========================================================
   MOBILE — BEZ PRZESADNEGO POWIĘKSZENIA
   ========================================================= */

@media(max-width:900px){

    body.home .services-grid .service-card:hover{
        transform:translateY(-8px) scale(1.01) !important;
    }

}
/* =========================================================
   MD KLIMA — NASZE USŁUGI — WOW FINAL OVERRIDE
   ========================================================= */

body.home .services-grid .service-card {
    position: relative !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease !important;
}

body.home .services-grid .service-card:hover {
    transform: translateY(-16px) scale(1.025) !important;
}

/* KLIMATYZACJA */
body.home .services-grid .service-card.blue-card {
    border-top: 4px solid #16a8ff !important;
    box-shadow:
        0 20px 55px rgba(0,143,211,.22),
        0 0 0 rgba(22,168,255,0) !important;
}

body.home .services-grid .service-card.blue-card:hover {
    border-color: #16a8ff !important;
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 45px rgba(22,168,255,.35) !important;
}

/* GAZ */
body.home .services-grid .service-card.orange-card {
    border-top: 4px solid #fb923c !important;
    box-shadow:
        0 20px 55px rgba(249,115,22,.22),
        0 0 0 rgba(251,146,60,0) !important;
}

body.home .services-grid .service-card.orange-card:hover {
    border-color: #fb923c !important;
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 45px rgba(251,146,60,.35) !important;
}

/* KOMPUTERY */
body.home .services-grid .service-card.purple-card {
    border-top: 4px solid #a855f7 !important;
    box-shadow:
        0 20px 55px rgba(124,58,237,.22),
        0 0 0 rgba(168,85,247,0) !important;
}

body.home .services-grid .service-card.purple-card:hover {
    border-color: #a855f7 !important;
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 45px rgba(168,85,247,.35) !important;
}

/* IKONY */
body.home .services-grid .service-card .big-icon {
    transition:
        transform .45s ease,
        box-shadow .45s ease !important;
}

body.home .services-grid .service-card:hover .big-icon {
    transform: translateY(-7px) scale(1.10) !important;
}

/* REFLEKS */
body.home .services-grid .service-card::before {
    content: "" !important;
    position: absolute !important;
    top: -100% !important;
    left: -80% !important;
    width: 45% !important;
    height: 300% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    ) !important;
    transform: rotate(25deg) !important;
    transition: left .8s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.home .services-grid .service-card:hover::before {
    left: 130% !important;
}

/* TREŚĆ NAD EFEKTEM */
body.home .services-grid .service-card > * {
    position: relative !important;
    z-index: 2 !important;
}
/* =========================================================
   MD KLIMA — NASZE USŁUGI
   WOW EFFECT 2.0
========================================================= */

body.home .section:has(.services-grid) .service-card{
    isolation:isolate;
    transform-style:preserve-3d;
    will-change:transform;
}

/* ĹšWIETLNA RAMKA */
body.home .section:has(.services-grid) .service-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:30px;
    padding:2px;
    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.65),
        transparent 80%
    );
    background-size:200% 100%;
    opacity:0;
    z-index:-1;
    transition:opacity .4s ease;
    animation:mdkBorderFlow 4s linear infinite;
}

body.home .section:has(.services-grid) .service-card:hover::before{
    opacity:1;
}

@keyframes mdkBorderFlow{
    0%{
        background-position:200% 0;
    }
    100%{
        background-position:-200% 0;
    }
}

/* ĹšWIETLNY PASEK NA GĂ“RZE */
body.home .section:has(.services-grid) .service-card::after{
    content:"";
    position:absolute;
    top:0;
    left:8%;
    width:84%;
    height:2px;
    border-radius:50%;
    opacity:.35;
    filter:blur(1px);
    transition:
        opacity .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}

/* KOLOROWE ŚWIATŁO */
body.home .section:has(.services-grid) .blue-card::after{
    background:#16a8ff;
    box-shadow:0 0 18px #16a8ff;
}

body.home .section:has(.services-grid) .orange-card::after{
    background:#fb923c;
    box-shadow:0 0 18px #fb923c;
}

body.home .section:has(.services-grid) .purple-card::after{
    background:#a855f7;
    box-shadow:0 0 18px #a855f7;
}

body.home .section:has(.services-grid) .service-card:hover::after{
    opacity:1;
    transform:scaleX(1.08);
}

/* KARTA — MOCNIEJSZA GŁĘBIA */
body.home .section:has(.services-grid) .service-card:hover{
    transform:
        translateY(-16px)
        scale(1.025);

}

/* NIEBIESKA POĹšWIATA */
body.home .section:has(.services-grid) .blue-card:hover{
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 35px rgba(22,168,255,.25),
        0 0 90px rgba(22,168,255,.12);
}

/* POMARAŃCZOWA POŚWIATA */
body.home .section:has(.services-grid) .orange-card:hover{
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 35px rgba(251,146,60,.25),
        0 0 90px rgba(251,146,60,.12);
}

/* FIOLETOWA POĹšWIATA */
body.home .section:has(.services-grid) .purple-card:hover{
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 35px rgba(168,85,247,.25),
        0 0 90px rgba(168,85,247,.12);
}

/* IKONA */
body.home .section:has(.services-grid) .big-icon{
    transform:translateZ(25px);
    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease,
        filter .5s ease;
}

/* IKONA HOVER */
body.home .section:has(.services-grid) .service-card:hover .big-icon{
    transform:
        translateZ(35px)
        translateY(-7px)
        scale(1.12)
        rotate(-3deg);

    filter:
        brightness(1.18)
        drop-shadow(0 0 15px rgba(255,255,255,.25));
}

/* TEKST TEĹ» LEKKO WYSKAKUJE */
body.home .section:has(.services-grid) .service-card h3,
body.home .section:has(.services-grid) .service-card p,
body.home .section:has(.services-grid) .service-card a{
    position:relative;
    z-index:5;
    transform:translateZ(12px);
    transition:
        transform .45s ease,
        color .35s ease;
}

body.home .section:has(.services-grid) .service-card:hover h3{
    transform:translateZ(18px);
}

/* LINK */
body.home .section:has(.services-grid) .service-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-weight:800;
    text-decoration:none;
    transition:
        gap .3s ease,
        transform .3s ease,
        filter .3s ease;
}

body.home .section:has(.services-grid) .service-card a:hover{
    gap:14px;
    filter:brightness(1.2);
}

/* MIGAJĄCY PUNKT ŚWIATŁA */
body.home .section:has(.services-grid) .service-card .big-icon::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    top:10px;
    right:10px;
    border-radius:50%;
    background:#fff;
    opacity:.55;
    box-shadow:
        0 0 10px #fff,
        0 0 25px currentColor;
    animation:mdkPulseDot 2s ease-in-out infinite;
}

@keyframes mdkPulseDot{
    0%,100%{
        opacity:.25;
        transform:scale(.7);
    }

    50%{
        opacity:1;
        transform:scale(1.25);
    }
}

/* DELIKATNE UNOSZENIE KART */
body.home .section:has(.services-grid) .service-card:nth-child(1){
    animation:mdkFloat1 5s ease-in-out infinite;
}

body.home .section:has(.services-grid) .service-card:nth-child(2){
    animation:mdkFloat2 5.5s ease-in-out infinite;
}

body.home .section:has(.services-grid) .service-card:nth-child(3){
    animation:mdkFloat3 6s ease-in-out infinite;
}

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

@keyframes mdkFloat2{
    0%,100%{transform:translateY(-2px);}
    50%{transform:translateY(4px);}
}

@keyframes mdkFloat3{
    0%,100%{transform:translateY(1px);}
    50%{transform:translateY(-5px);}
}

/* HOVER MA WYGRAĆ Z FLOAT */
body.home .section:has(.services-grid) .service-card:hover{
    animation:none;
}

/* TELEFON — BEZ PRZESADNEGO 3D */
@media(max-width:900px){

    body.home .section:has(.services-grid) .service-card{
        animation:none;
    }

    body.home .section:has(.services-grid) .service-card:hover{
        transform:translateY(-8px) scale(1.01);
    }

}
/* =========================================================
   MD KLIMA — SERVICES WOW 3.0
   FINAL
========================================================= */

body.home .services-grid .service-card{
    animation:none !important;
    transform:
        translate3d(0,0,0)
        rotateX(0)
        rotateY(0)
        scale(1) !important;

    transform-style:preserve-3d !important;
    perspective:1000px !important;

    transition:
        transform .15s ease-out,
        box-shadow .35s ease,
        border-color .35s ease !important;

    will-change:transform;
}

/* KLIMA */
body.home .services-grid .blue-card{
    border-top:4px solid #16a8ff !important;
}

/* GAZ */
body.home .services-grid .orange-card{
    border-top:4px solid #fb923c !important;
}

/* KOMPUTERY */
body.home .services-grid .purple-card{
    border-top:4px solid #a855f7 !important;
}

/* HOVER */
body.home .services-grid .blue-card:hover{
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 45px rgba(22,168,255,.45) !important;
}

body.home .services-grid .orange-card:hover{
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 45px rgba(251,146,60,.45) !important;
}

body.home .services-grid .purple-card:hover{
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 45px rgba(168,85,247,.45) !important;
}

/* IKONA */
body.home .services-grid .big-icon{
    transition:
        transform .35s ease,
        box-shadow .35s ease !important;
}

body.home .services-grid .service-card:hover .big-icon{
    transform:
        translateZ(30px)
        scale(1.12)
        rotate(-4deg) !important;
}

/* MOBILE */
@media(max-width:900px){

    body.home .services-grid .service-card{
        animation:none !important;
    }

    body.home .services-grid .service-card:hover{
        transform:
            translateY(-8px)
            scale(1.01) !important;
    }

}
/* =========================================================
   MD KLIMA — SERVICES WOW 5.0
   3D + GLOW + LIGHT
========================================================= */

body.home .services-grid{
    perspective:1400px;
}


/* KARTA */

body.home .services-grid .service-card{

    --mouse-x:50%;
    --mouse-y:50%;

    position:relative;

    transform-style:preserve-3d;

    will-change:
        transform,
        box-shadow;

    transition:
        transform .18s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    isolation:isolate;

}


/* ŚWIATŁO POD MYSZKĄ */

body.home .services-grid .service-card::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:
        radial-gradient(
            circle at var(--mouse-x) var(--mouse-y),
            rgba(255,255,255,.28),
            rgba(255,255,255,.08) 18%,
            transparent 48%
        );

    opacity:0;

    transition:
        opacity .3s ease;

    pointer-events:none;

    z-index:1;

}


/* AKTYWNE ŚWIATŁO */

body.home .services-grid .service-card:hover::after{

    opacity:1;

}


/* ZAWARTOŚĆ NAD ŚWIATŁEM */

body.home .services-grid .service-card > *{

    position:relative;

    z-index:3;

}


/* IKONA 3D */

body.home .services-grid .service-card .big-icon{

    transform-style:preserve-3d;

    will-change:
        transform,
        box-shadow;

    transition:
        transform .2s ease,
        box-shadow .3s ease;

}


/* IKONA — GŁĘBIA */

body.home .services-grid .service-card:hover .big-icon{

    box-shadow:
        0 0 25px rgba(255,255,255,.12),
        0 20px 45px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.18);

}


/* NIEBIESKA */

body.home .services-grid .blue-card:hover{

    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 70px rgba(0,174,255,.28),
        0 0 140px rgba(0,174,255,.10);

}


/* POMARAŃCZOWA */

body.home .services-grid .orange-card:hover{

    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 70px rgba(249,115,22,.28),
        0 0 140px rgba(249,115,22,.10);

}


/* FIOLETOWA */

body.home .services-grid .purple-card:hover{

    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 70px rgba(168,85,247,.30),
        0 0 140px rgba(168,85,247,.10);

}


/* DELIKATNA PIONOWA POĹšWIATA */

body.home .services-grid .service-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:25%;

    height:340%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform:
        rotate(25deg);

    opacity:0;

    transition:
        left .9s ease,
        opacity .4s ease;

    pointer-events:none;

    z-index:2;

}


/* PRZEJAZD ŚWIATŁA */

body.home .services-grid .service-card:hover::before{

    left:125%;

    opacity:1;

}


/* KLIK */

body.home .services-grid .service-card.mdk-card-pressed{

    transform:
        perspective(900px)
        translateY(-8px)
        scale(.99);

}


/* =========================================================
   WEJĹšCIE KART
========================================================= */

body.home .services-grid .service-card{

    animation:
        mdkServiceCardIn .8s cubic-bezier(.2,.8,.2,1) both;

}


body.home .services-grid .service-card:nth-child(1){

    animation-delay:.10s;

}


body.home .services-grid .service-card:nth-child(2){

    animation-delay:.22s;

}


body.home .services-grid .service-card:nth-child(3){

    animation-delay:.34s;

}


@keyframes mdkServiceCardIn{

    from{

        opacity:0;

        transform:
            translateY(55px)
            scale(.94);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    body.home .services-grid .service-card{

        transform:none !important;

        animation:
            mdkServiceCardInMobile
            .7s ease both;

    }

}


@keyframes mdkServiceCardInMobile{

    from{

        opacity:0;

        transform:
            translateY(35px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   REDUKCJA RUCHU
========================================================= */

@media(prefers-reduced-motion:reduce){

    body.home .services-grid .service-card{

        animation:none !important;

        transition:none !important;

    }

}
/* =========================================================

/* =========================================================
   MD KLIMA — ICON TILT 2.0
   DELIKATNY OBRÓT W LEWO
========================================================= */

body.home .services-grid .blue-card:hover .big-icon {
    transform:
        translateY(-8px)
        translateZ(25px)
        rotate(-15deg)
        scale(1.10) !important;
}

body.home .services-grid .orange-card:hover .big-icon {
    transform:
        translateY(-8px)
        translateZ(25px)
        rotate(-15deg)
        scale(1.10) !important;
}

body.home .services-grid .purple-card:hover .big-icon {
    transform:
        translateY(-8px)
        translateZ(25px)
        rotate(-15deg)
        scale(1.10) !important;
}


/* =========================================================
   MD KLIMA — ICON COLORS 3.0
   KOLOR IKONY DOPASOWANY DO KARTY
========================================================= */

/* KLIMATYZACJA — NIEBIESKI */

body.home .services-grid .blue-card:hover .big-icon {
    color: #16a8ff !important;

    filter:
        drop-shadow(0 0 8px rgba(22,168,255,.95))
        drop-shadow(0 0 20px rgba(22,168,255,.70))
        drop-shadow(0 0 38px rgba(22,168,255,.40));

    transform:
        translateY(-8px)
        translateZ(25px)
        rotate(-15deg)
        scale(1.10) !important;
}

/* GAZOWE — CZERWONY */

body.home .services-grid .orange-card:hover .big-icon {
    color: #ff3b30 !important;

    filter:
        drop-shadow(0 0 8px rgba(255,59,48,.95))
        drop-shadow(0 0 20px rgba(255,59,48,.70))
        drop-shadow(0 0 38px rgba(255,59,48,.40));

    transform:
        translateY(-8px)
        translateZ(25px)
        rotate(-15deg)
        scale(1.10) !important;
}

/* KOMPUTERY — FIOLETOWY */

body.home .services-grid .purple-card:hover .big-icon {
    color: #a855f7 !important;

    filter:
        drop-shadow(0 0 8px rgba(168,85,247,.95))
        drop-shadow(0 0 20px rgba(168,85,247,.70))
        drop-shadow(0 0 38px rgba(168,85,247,.40));

    transform:
        translateY(-8px)
        translateZ(25px)
        rotate(-15deg)
        scale(1.10) !important;
}


/* =========================================================
   MD KLIMA — CARD TILT 2.0
========================================================= */

@media (min-width: 901px) {

    body.home .services-grid .service-card {
        transform-style: preserve-3d !important;
        will-change: transform;

        transition:
            transform .12s ease-out,
            box-shadow .35s ease,
            border-color .35s ease !important;
    }

}


/* =========================================================
   MD KLIMA — CARD TITLES COLORS 1.0
   KOLOR TYTUŁU DOPASOWANY DO KARTY
========================================================= */

/* KLIMATYZACJA — NIEBIESKI */

body.home .services-grid .blue-card:hover h2,
body.home .services-grid .blue-card:hover h3,
body.home .services-grid .blue-card:hover .service-title {
    color: #16a8ff !important;
    text-shadow:
        0 0 8px rgba(22,168,255,.55),
        0 0 18px rgba(22,168,255,.25);
}

/* GAZOWE — CZERWONY */

body.home .services-grid .orange-card:hover h2,
body.home .services-grid .orange-card:hover h3,
body.home .services-grid .orange-card:hover .service-title {
    color: #ff3b30 !important;
    text-shadow:
        0 0 8px rgba(255,59,48,.55),
        0 0 18px rgba(255,59,48,.25);
}

/* KOMPUTERY — FIOLETOWY */

body.home .services-grid .purple-card:hover h2,
body.home .services-grid .purple-card:hover h3,
body.home .services-grid .purple-card:hover .service-title {
    color: #a855f7 !important;
    text-shadow:
        0 0 8px rgba(168,85,247,.55),
        0 0 18px rgba(168,85,247,.25);
}

/* PŁYNNE PRZEJŚCIE */

body.home .services-grid .service-card h2,
body.home .services-grid .service-card h3,
body.home .services-grid .service-card .service-title {
    transition:
        color .35s ease,
        text-shadow .35s ease;
}


/* =========================================================
   MD KLIMA — SERVICE TITLES FINAL
   KOLOR TYTUŁÓW KART
========================================================= */

body.home .services-grid .blue-card h3 {
    color: #16a8ff !important;
    transition: color .35s ease, text-shadow .35s ease;
}

body.home .services-grid .orange-card h3 {
    color: #ff3b30 !important;
    transition: color .35s ease, text-shadow .35s ease;
}

body.home .services-grid .purple-card h3 {
    color: #a855f7 !important;
    transition: color .35s ease, text-shadow .35s ease;
}

/* MOCNIEJSZY EFEKT PO NAJECHANIU */

body.home .services-grid .blue-card:hover h3 {
    text-shadow:
        0 0 8px rgba(22,168,255,.65),
        0 0 20px rgba(22,168,255,.35);
}

body.home .services-grid .orange-card:hover h3 {
    text-shadow:
        0 0 8px rgba(255,59,48,.65),
        0 0 20px rgba(255,59,48,.35);
}

body.home .services-grid .purple-card:hover h3 {
    text-shadow:
        0 0 8px rgba(168,85,247,.65),
        0 0 20px rgba(168,85,247,.35);
}


/* =========================================================
   MD KLIMA — KOLORY TEKSTU KART
   KLIMA = NIEBIESKI
   GAZ = CZERWONY
   KOMPUTERY = FIOLET
========================================================= */

body.home .services-grid .service-card:nth-child(1) h3,
body.home .services-grid .service-card:nth-child(1) p,
body.home .services-grid .service-card:nth-child(1) a {
    color: #16a8ff !important;
}

body.home .services-grid .service-card:nth-child(2) h3,
body.home .services-grid .service-card:nth-child(2) p,
body.home .services-grid .service-card:nth-child(2) a {
    color: #ef4444 !important;
}

body.home .services-grid .service-card:nth-child(3) h3,
body.home .services-grid .service-card:nth-child(3) p,
body.home .services-grid .service-card:nth-child(3) a {
    color: #a855f7 !important;
}

/* HOVER — lekko jaśniejszy efekt */

body.home .services-grid .service-card:nth-child(1):hover h3,
body.home .services-grid .service-card:nth-child(1):hover p,
body.home .services-grid .service-card:nth-child(1):hover a {
    color: #38bdf8 !important;
}

body.home .services-grid .service-card:nth-child(2):hover h3,
body.home .services-grid .service-card:nth-child(2):hover p,
body.home .services-grid .service-card:nth-child(2):hover a {
    color: #f87171 !important;
}

body.home .services-grid .service-card:nth-child(3):hover h3,
body.home .services-grid .service-card:nth-child(3):hover p,
body.home .services-grid .service-card:nth-child(3):hover a {
    color: #c084fc !important;
}


/* =========================================================
   MD KLIMA — KOLORY TEKSTU SERVICE CARDS
   FINAL OVERRIDE
========================================================= */

/* KLIMATYZACJA — NIEBIESKI */
body.home .services-grid .service-card.blue-card h3,
body.home .services-grid .service-card.blue-card p,
body.home .services-grid .service-card.blue-card a {
    color: #16a8ff !important;
}

/* GAZOWE — CZERWONY */
body.home .services-grid .service-card.orange-card h3,
body.home .services-grid .service-card.orange-card p,
body.home .services-grid .service-card.orange-card a {
    color: #ff4d4d !important;
}

/* KOMPUTERY — FIOLETOWY */
body.home .services-grid .service-card.purple-card h3,
body.home .services-grid .service-card.purple-card p,
body.home .services-grid .service-card.purple-card a {
    color: #a855f7 !important;
}

/* LINK — DELIKATNIE MOCNIEJSZY */
body.home .services-grid .service-card.blue-card a,
body.home .services-grid .service-card.orange-card a,
body.home .services-grid .service-card.purple-card a {
    font-weight: 700 !important;
}

/* HOVER — LEKKIE ROZJAŚNIENIE */
body.home .services-grid .service-card.blue-card:hover h3,
body.home .services-grid .service-card.blue-card:hover p,
body.home .services-grid .service-card.blue-card:hover a {
    color: #55c4ff !important;
}

body.home .services-grid .service-card.orange-card:hover h3,
body.home .services-grid .service-card.orange-card:hover p,
body.home .services-grid .service-card.orange-card:hover a {
    color: #ff7777 !important;
}

body.home .services-grid .service-card.purple-card:hover h3,
body.home .services-grid .service-card.purple-card:hover p,
body.home .services-grid .service-card.purple-card:hover a {
    color: #c084fc !important;
}

/* =========================================================
   IKONY — KOLOR ZGODNY Z KARTĄ
========================================================= */

body.home .services-grid .service-card.blue-card .big-icon {
    color: #16a8ff !important;
    text-shadow:
        0 0 12px rgba(22,168,255,.65),
        0 0 30px rgba(22,168,255,.35) !important;
}

body.home .services-grid .service-card.orange-card .big-icon {
    color: #ff4d4d !important;
    text-shadow:
        0 0 12px rgba(255,77,77,.65),
        0 0 30px rgba(255,77,77,.35) !important;
}

body.home .services-grid .service-card.purple-card .big-icon {
    color: #a855f7 !important;
    text-shadow:
        0 0 12px rgba(168,85,247,.65),
        0 0 30px rgba(168,85,247,.35) !important;
}


/* =========================================================
   MD KLIMA - SERVICE CARDS TEXT COLORS FINAL
========================================================= */

body.home .services-grid .service-card.blue-card h3 {
    color: #16a8ff !important;
}

body.home .services-grid .service-card.blue-card p {
    color: rgba(220, 240, 255, 0.88) !important;
}

body.home .services-grid .service-card.blue-card a {
    color: #16a8ff !important;
}


body.home .services-grid .service-card.orange-card h3 {
    color: #ef4444 !important;
}

body.home .services-grid .service-card.orange-card p {
    color: rgba(255, 235, 235, 0.88) !important;
}

body.home .services-grid .service-card.orange-card a {
    color: #ef4444 !important;
}


body.home .services-grid .service-card.purple-card h3 {
    color: #a855f7 !important;
}

body.home .services-grid .service-card.purple-card p {
    color: rgba(245, 235, 255, 0.88) !important;
}

body.home .services-grid .service-card.purple-card a {
    color: #a855f7 !important;
}


/* HOVER - mocniejszy kolor */

body.home .services-grid .service-card.blue-card:hover h3,
body.home .services-grid .service-card.blue-card:hover a {
    color: #38bdf8 !important;
}

body.home .services-grid .service-card.orange-card:hover h3,
body.home .services-grid .service-card.orange-card:hover a {
    color: #f87171 !important;
}

body.home .services-grid .service-card.purple-card:hover h3,
body.home .services-grid .service-card.purple-card:hover a {
    color: #c084fc !important;
}


/* =========================================================
   MD KLIMA — SERVICE CARDS — FINAL TEXT COLORS
========================================================= */

body.home .services-grid .service-card.blue-card h3,
body.home .services-grid .service-card.blue-card a {
    color: #16a8ff !important;
}

body.home .services-grid .service-card.blue-card p {
    color: #d7efff !important;
}


body.home .services-grid .service-card.orange-card h3,
body.home .services-grid .service-card.orange-card a {
    color: #ef4444 !important;
}

body.home .services-grid .service-card.orange-card p {
    color: #ffe0e0 !important;
}


body.home .services-grid .service-card.purple-card h3,
body.home .services-grid .service-card.purple-card a {
    color: #a855f7 !important;
}

body.home .services-grid .service-card.purple-card p {
    color: #eee0ff !important;
}


/* HOVER — jaśniejsze akcenty */

body.home .services-grid .service-card.blue-card:hover h3,
body.home .services-grid .service-card.blue-card:hover a {
    color: #38bdf8 !important;
}

body.home .services-grid .service-card.orange-card:hover h3,
body.home .services-grid .service-card.orange-card:hover a {
    color: #f87171 !important;
}

body.home .services-grid .service-card.purple-card:hover h3,
body.home .services-grid .service-card.purple-card:hover a {
    color: #c084fc !important;
}


/* =========================================================
   MD KLIMA — SERVICES CARDS V2
   MNIEJSZE KARTY + PREMIUM HOVER
   ========================================================= */

/* --- MNIEJSZE KARTY USŁUG --- */

body.home .services-grid .service-card {
    min-height: 300px !important;
    padding: 28px 24px !important;
    border-radius: 22px !important;
}

/* --- IKONY --- */

body.home .services-grid .service-card .big-icon {
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        filter .35s ease !important;
}

/* --- DELIKATNE POWIĘKSZENIE IKONY --- */

body.home .services-grid .service-card:hover .big-icon {
    transform:
        translateZ(35px)
        scale(1.10)
        rotate(-10deg) !important;
}

/* --- KLIMATYZACJA --- */

body.home .services-grid .service-card.blue-card:hover {
    border-color: #16a8ff !important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.45),
        0 0 35px rgba(22,168,255,.28) !important;
}

/* --- GAZ --- */

body.home .services-grid .service-card.orange-card:hover {
    border-color: #ef4444 !important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.45),
        0 0 35px rgba(239,68,68,.25) !important;
}

/* --- KOMPUTERY --- */

body.home .services-grid .service-card.purple-card:hover {
    border-color: #a855f7 !important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.45),
        0 0 35px rgba(168,85,247,.28) !important;
}

/* =========================================================
   PRZYKŁADY WYKONANYCH PRAC
   ========================================================= */

body.home .work-examples {
    margin-top: 55px;
}

body.home .work-examples h2 {
    text-align: center;
    margin-bottom: 10px;
}

body.home .work-examples > p {
    text-align: center;
    margin: 0 auto 30px;
    max-width: 700px;
}

/* --- GRID --- */

body.home .work-examples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* --- KARTA PRACY --- */

body.home .work-example-card {
    position: relative;
    padding: 26px 24px;
    min-height: 180px;
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.10);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* --- ŚWIATŁO --- */

body.home .work-example-card::before {
    content: "";
    position: absolute;
    inset: -50%;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,255,255,.12),
            transparent 45%
        );

    opacity: 0;
    transition: opacity .35s ease;

    pointer-events: none;
}

/* --- HOVER --- */

body.home .work-example-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,.25);
    box-shadow:
        0 20px 50px rgba(0,0,0,.40);
}

body.home .work-example-card:hover::before {
    opacity: 1;
}

/* --- IKONA PRACY --- */

body.home .work-example-card .work-icon {
    position: relative;
    z-index: 2;

    font-size: 42px;
    margin-bottom: 14px;

    transition:
        transform .4s ease,
        filter .35s ease;
}

body.home .work-example-card:hover .work-icon {
    transform:
        translateY(-5px)
        scale(1.10);
}

/* --- TEKST --- */

body.home .work-example-card h3,
body.home .work-example-card p {
    position: relative;
    z-index: 2;
}

body.home .work-example-card h3 {
    margin: 0 0 8px;
}

body.home .work-example-card p {
    margin: 0;
}

/* =========================================================
   KOLORY PRZYKŁADÓW
   ========================================================= */

body.home .work-example-card.blue-work:hover {
    border-color: #16a8ff;
    box-shadow:
        0 20px 50px rgba(0,0,0,.40),
        0 0 30px rgba(22,168,255,.20);
}

body.home .work-example-card.blue-work .work-icon {
    color: #16a8ff;
    text-shadow:
        0 0 15px rgba(22,168,255,.45);
}

body.home .work-example-card.red-work:hover {
    border-color: #ef4444;
    box-shadow:
        0 20px 50px rgba(0,0,0,.40),
        0 0 30px rgba(239,68,68,.20);
}

body.home .work-example-card.red-work .work-icon {
    color: #ef4444;
    text-shadow:
        0 0 15px rgba(239,68,68,.45);
}

body.home .work-example-card.purple-work:hover {
    border-color: #a855f7;
    box-shadow:
        0 20px 50px rgba(0,0,0,.40),
        0 0 30px rgba(168,85,247,.20);
}

body.home .work-example-card.purple-work .work-icon {
    color: #a855f7;
    text-shadow:
        0 0 15px rgba(168,85,247,.45);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    body.home .services-grid .service-card {
        min-height: 270px !important;
        padding: 24px 20px !important;
    }

    body.home .work-examples-grid {
        grid-template-columns: 1fr;
    }

    body.home .work-example-card {
        min-height: 150px;
    }

}


/* =========================================================
   MD KLIMA — SERVICE CARDS COMPACT PREMIUM
========================================================= */

body.home .services-grid {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 22px !important;
}

body.home .services-grid .service-card {
    min-height: 270px !important;
    height: 270px !important;
    padding: 28px 24px !important;
    border-radius: 22px !important;
}

/* IKONA */
body.home .services-grid .service-card .big-icon {
    font-size: 48px !important;
    margin-bottom: 12px !important;
}

/* TYTUŁ */
body.home .services-grid .service-card h3 {
    font-size: 22px !important;
    margin: 8px 0 10px !important;
}

/* OPIS */
body.home .services-grid .service-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 auto 14px !important;
    max-width: 270px !important;
}

/* LINK */
body.home .services-grid .service-card a {
    font-size: 14px !important;
}

/* =========================================================
   HOVER — NIE POWIĘKSZAJ CAŁEJ KARTY
========================================================= */

body.home .services-grid .service-card:hover {
    scale: 1 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    body.home .services-grid {
        max-width: 94% !important;
        gap: 16px !important;
    }

    body.home .services-grid .service-card {
        height: auto !important;
        min-height: 245px !important;
        padding: 24px 20px !important;
    }

}


/* =========================================================
   MD KLIMA — PROJECT CARDS PREMIUM
   PRZYKŁADY WYKONANYCH PRAC
========================================================= */

/* GRID */

body.home .projects-section {
    position: relative;
}

body.home .projects-section .projects-grid {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 20px !important;
}

/* KARTY — MNIEJSZE */

body.home .projects-section .project-card {
    position: relative;

    min-height: 175px !important;
    height: 175px !important;

    padding: 22px 20px !important;

    border-radius: 20px !important;

    overflow: hidden;

    transform-style: preserve-3d;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    will-change: transform;
}

/* IKONA */

body.home .projects-section .project-card > div:first-child {
    position: relative;
    z-index: 3;

    font-size: 38px !important;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        filter .35s ease;
}

/* TYTUŁ */

body.home .projects-section .project-card h3 {
    position: relative;
    z-index: 3;

    font-size: 19px !important;
    line-height: 1.25 !important;

    margin: 8px 0 7px !important;
}

/* OPIS */

body.home .projects-section .project-card p {
    position: relative;
    z-index: 3;

    font-size: 13px !important;
    line-height: 1.45 !important;

    margin: 0 !important;
}

/* =========================================================
   KLIMATYZACJA
========================================================= */

body.home .projects-section .project-card:nth-child(1) {
    border-color: rgba(22,168,255,.18);
}

body.home .projects-section .project-card:nth-child(1):hover {
    transform:
        translateY(-7px)
        rotateX(2deg)
        rotateY(-2deg);

    border-color: #16a8ff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.40),
        0 0 30px rgba(22,168,255,.28);
}

body.home .projects-section .project-card:nth-child(1) > div:first-child {
    color: #16a8ff;
    text-shadow:
        0 0 12px rgba(22,168,255,.55);
}

body.home .projects-section .project-card:nth-child(1):hover > div:first-child {
    transform:
        translateZ(25px)
        scale(1.10)
        rotate(-10deg);
}

/* =========================================================
   GAZ
========================================================= */

body.home .projects-section .project-card:nth-child(2) {
    border-color: rgba(239,68,68,.18);
}

body.home .projects-section .project-card:nth-child(2):hover {
    transform:
        translateY(-7px)
        rotateX(2deg)
        rotateY(2deg);

    border-color: #ef4444;

    box-shadow:
        0 18px 45px rgba(0,0,0,.40),
        0 0 30px rgba(239,68,68,.25);
}

body.home .projects-section .project-card:nth-child(2) > div:first-child {
    color: #ef4444;
    text-shadow:
        0 0 12px rgba(239,68,68,.55);
}

body.home .projects-section .project-card:nth-child(2):hover > div:first-child {
    transform:
        translateZ(25px)
        scale(1.10)
        rotate(-10deg);
}

/* =========================================================
   KOMPUTERY
========================================================= */

body.home .projects-section .project-card:nth-child(3) {
    border-color: rgba(168,85,247,.18);
}

body.home .projects-section .project-card:nth-child(3):hover {
    transform:
        translateY(-7px)
        rotateX(2deg)
        rotateY(-2deg);

    border-color: #a855f7;

    box-shadow:
        0 18px 45px rgba(0,0,0,.40),
        0 0 30px rgba(168,85,247,.28);
}

body.home .projects-section .project-card:nth-child(3) > div:first-child {
    color: #a855f7;
    text-shadow:
        0 0 12px rgba(168,85,247,.55);
}

body.home .projects-section .project-card:nth-child(3):hover > div:first-child {
    transform:
        translateZ(25px)
        scale(1.10)
        rotate(-10deg);
}

/* =========================================================
   ŚWIATŁO POD KURSOREM
========================================================= */

body.home .projects-section .project-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255,255,255,.14),
            transparent 45%
        );

    opacity: 0;

    transition: opacity .3s ease;

    pointer-events: none;

    z-index: 1;
}

body.home .projects-section .project-card:hover::after {
    opacity: 1;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    body.home .projects-section .projects-grid {
        max-width: 94% !important;
        grid-template-columns: 1fr !important;
    }

    body.home .projects-section .project-card {
        height: auto !important;
        min-height: 160px !important;
    }

}


/* =========================================================
   MD KLIMA — NASZE USŁUGI — FINAL
   Nie dotyczy .projects-section
========================================================= */

body.home .services-grid{
    column-gap:55px !important;
    row-gap:42px !important;
}

body.home .services-grid .service-card{
    width:100% !important;
    height:350px !important;
    min-height:350px !important;
    padding:34px 32px !important;
    border-radius:30px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        filter .35s ease !important;
}

body.home .services-grid .service-card h3{
    font-size:31px !important;
    line-height:1.15 !important;
    margin:0 0 10px !important;
}

body.home .services-grid .service-card p{
    font-size:19px !important;
    line-height:1.42 !important;
    margin:0 0 18px !important;
    max-width:430px !important;
}

body.home .services-grid .service-card a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:absolute !important; left:32px !important; bottom:24px !important; top:auto !important; font-size:21px !important;
    font-weight:800 !important;
    padding:14px 24px !important;
    min-height:54px !important;
    border-radius:17px !important;
    box-sizing:border-box !important;
    text-decoration:none !important;
}

body.home .services-grid .service-card:hover{
    transform:translateY(-10px) scale(1.025) !important;
    filter:brightness(1.08) saturate(1.12) !important;
}

body.home .services-grid .service-card:not(:hover){
    transform:translateY(0) scale(1) !important;
}



/* =========================================================
   MD KLIMA — NASZE USŁUGI — FINAL 2
   Tylko .services-grid
========================================================= */

body.home .services-grid{
    column-gap:55px !important;
    row-gap:42px !important;
}

body.home .services-grid .service-card{
    width:100% !important;
    height:350px !important;
    min-height:350px !important;
    padding:34px 32px !important;
    border-radius:30px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        filter .35s ease !important;
}

body.home .services-grid .service-card h3{
    font-size:31px !important;
    line-height:1.15 !important;
    margin:0 0 10px !important;
}

body.home .services-grid .service-card p{
    font-size:19px !important;
    line-height:1.42 !important;
    margin:0 !important;
    max-width:430px !important;
}

body.home .services-grid .service-card a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    position:static !important;
    top:auto !important;
    left:auto !important;
    bottom:auto !important;

    margin-top:auto !important;
    align-self:flex-start !important;

    font-size:21px !important;
    font-weight:800 !important;
    padding:14px 24px !important;
    min-height:54px !important;
    border-radius:17px !important;
    box-sizing:border-box !important;
    text-decoration:none !important;
    transform:none !important;
}

/* komputer — CTA lekko wyżej */
body.home .services-grid .service-card:nth-child(3) a{
    transform:translateY(-10px) !important;
}

/* PREMIUM HOVER */
body.home .services-grid .service-card:hover{
    transform:translateY(-10px) scale(1.025) !important;
    filter:brightness(1.08) saturate(1.12) !important;
}


/* =========================================================
   MD KLIMA — NASZE USŁUGI — CTA ONE LINE
========================================================= */

body.home .services-grid .service-card a{
    white-space:nowrap !important;
    display:inline-flex !important;
    width:auto !important;
    min-width:max-content !important;
}


/* =========================================================
   MD KLIMA — NASZE USŁUGI — CTA ONE LINE
========================================================= */

body.home .services-grid .service-card a{
    white-space:nowrap !important;
    display:inline-flex !important;
    width:auto !important;
    min-width:max-content !important;
}


/* =========================================================
   MD KLIMA — NASZE REALIZACJE — PREMIUM ICONS
   Karty 190px / Ikony 74px / Tytuł 20px / Opis 15px
========================================================= */

body.home .projects-section .project-card{
    height:190px !important;
    min-height:190px !important;
    padding:2px 18px 6px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
}

body.home .projects-section .project-card .project-image{
    width:74px !important;
    height:74px !important;
    min-width:74px !important;
    min-height:74px !important;
    margin:0 0 1px 0 !important;
    flex-shrink:0 !important;

    border-radius:50% !important;
    border:none !important;
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:35px !important;
    line-height:1 !important;

    transform:none !important;
    animation:mdRealizacjaGlow 3.2s ease-in-out infinite !important;
}

body.home .projects-section .project-card .project-image img{
    width:35px !important;
    height:35px !important;
    display:block !important;
    transform:none !important;
}

/* ---------- KLIMATYZACJA ---------- */

body.home .projects-section .project-card .project-image.climate-bg{
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.32),transparent 28%),
        linear-gradient(145deg,#21a4ff,#0062c7 55%,#003d8f) !important;

    box-shadow:
        0 0 12px rgba(0,140,255,.45),
        0 0 28px rgba(0,110,255,.22) !important;
}

body.home .projects-section .project-card .project-image.climate-bg::before{
    background:radial-gradient(
        circle,
        rgba(0,190,255,.75),
        transparent 65%
    ) !important;
}

/* ---------- GAZ ---------- */

body.home .projects-section .project-card .project-image.gas-bg{
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 28%),
        linear-gradient(145deg,#ffb347,#ed6b0c 55%,#a83200) !important;

    box-shadow:
        0 0 12px rgba(255,130,30,.45),
        0 0 28px rgba(255,100,0,.22) !important;
}

body.home .projects-section .project-card .project-image.gas-bg::before{
    background:radial-gradient(
        circle,
        rgba(255,145,30,.75),
        transparent 65%
    ) !important;
}

/* ---------- KOMPUTER ---------- */

body.home .projects-section .project-card .project-image.pc-bg{
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.30),transparent 28%),
        linear-gradient(145deg,#b16cff,#7135d6 55%,#40148c) !important;

    box-shadow:
        0 0 12px rgba(150,80,255,.45),
        0 0 28px rgba(120,40,255,.22) !important;
}

body.home .projects-section .project-card .project-image.pc-bg::before{
    background:radial-gradient(
        circle,
        rgba(190,80,255,.75),
        transparent 65%
    ) !important;
}

/* ---------- ŚWIATŁO WEWNĘTRZNE ---------- */

body.home .projects-section .project-card .project-image::before{
    content:"" !important;
    position:absolute !important;
    inset:-35% !important;
    border-radius:50% !important;
    pointer-events:none !important;
    z-index:-1 !important;
    opacity:.8 !important;

    animation:mdRealizacjaLight 3.8s linear infinite !important;
}

/* ---------- PRZESUWAJĄCY SIĘ BŁYSK ---------- */

body.home .projects-section .project-card .project-image::after{
    content:"" !important;
    position:absolute !important;

    width:34px !important;
    height:140% !important;

    top:-20% !important;
    left:-60% !important;

    transform:rotate(25deg) !important;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        rgba(255,255,255,.45),
        rgba(255,255,255,.08),
        transparent
    ) !important;

    filter:blur(4px) !important;
    pointer-events:none !important;
    z-index:1 !important;

    animation:mdRealizacjaShine 3.4s ease-in-out infinite !important;
}

/* ---------- TYTUŁ ---------- */

body.home .projects-section .project-card h3{
    font-size:20px !important;
    line-height:1.1 !important;
    margin:0 0 2px 0 !important;
    padding:0 !important;
}

/* ---------- OPIS ---------- */

body.home .projects-section .project-card p{
    font-size:15px !important;
    line-height:1.3 !important;
    margin:0 !important;
    padding:0 !important;
}

/* =========================================================
   ANIMACJE
========================================================= */

@keyframes mdRealizacjaLight{
    0%{
        transform:translate(-18%,-10%) scale(.8);
        opacity:.45;
    }

    50%{
        transform:translate(18%,12%) scale(1.15);
        opacity:.95;
    }

    100%{
        transform:translate(-18%,-10%) scale(.8);
        opacity:.45;
    }
}

@keyframes mdRealizacjaShine{
    0%,15%{
        left:-70%;
        opacity:0;
    }

    30%{
        opacity:1;
    }

    55%{
        left:125%;
        opacity:.8;
    }

    70%,100%{
        left:125%;
        opacity:0;
    }
}

@keyframes mdRealizacjaGlow{
    0%,100%{
        filter:brightness(1);
        box-shadow:
            0 0 10px rgba(80,170,255,.28),
            0 0 22px rgba(80,170,255,.12);
    }

    50%{
        filter:brightness(1.13);
        box-shadow:
            0 0 18px rgba(80,170,255,.48),
            0 0 34px rgba(80,170,255,.22);
    }
}


/* =========================================================
   MD KLIMA — 3 IKONY — MOBILE FINAL
   ❄️ SNOW 3D / 🔥 FIRE LIVE / 💻 PC LIVE
   Desktop pozostaje bez zmian
   ========================================================= */

@media (max-width:900px){

    body.home .projects-section .project-card .project-image{
        width:74px !important;
        height:74px !important;
        min-width:74px !important;
        min-height:74px !important;
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        animation:none !important;
        transform:none !important;
        overflow:visible !important;
    }

    /* ❄️ ŚNIEŻYNKA */

    body.home .projects-section .project-card .project-image.climate-bg
    .md-snow-symbol{
        display:block !important;
        font-family:Arial,sans-serif !important;
        font-size:54px !important;
        line-height:1 !important;
        color:#35bfff !important;

        transform-origin:50% 50% !important;
        transform-style:preserve-3d !important;

        text-shadow:
            0 0 5px #35bfff,
            0 0 12px rgba(53,191,255,.8),
            0 0 22px rgba(53,191,255,.45) !important;

        animation:mdkMobileSnow 3.6s linear infinite !important;
    }

    @keyframes mdkMobileSnow{
        0%{
            transform:rotateY(0deg) rotateX(0deg);
        }
        25%{
            transform:rotateY(90deg) rotateX(8deg);
        }
        50%{
            transform:rotateY(180deg) rotateX(0deg);
        }
        75%{
            transform:rotateY(270deg) rotateX(-8deg);
        }
        100%{
            transform:rotateY(360deg) rotateX(0deg);
        }
    }

    /* 🔥 PŁOMIEŃ */

    body.home .projects-section .project-card .project-image.gas-bg
    .md-real-fire{
        width:58px !important;
        height:58px !important;
        display:block !important;

        transform-origin:50% 90% !important;

        filter:
            drop-shadow(0 0 4px rgba(255,40,20,.95))
            drop-shadow(0 0 10px rgba(255,50,20,.75))
            drop-shadow(0 0 20px rgba(255,30,10,.45)) !important;

        animation:mdkMobileFire 1.35s ease-in-out infinite !important;
    }

    @keyframes mdkMobileFire{

        0%,100%{
            transform:scaleX(1) scaleY(1) translateY(0);
        }

        20%{
            transform:scaleX(.96) scaleY(1.04) translateY(-1px);
        }

        40%{
            transform:scaleX(1.04) scaleY(.97) translateY(0);
        }

        60%{
            transform:scaleX(.94) scaleY(1.07) translateY(-2px);
        }

        80%{
            transform:scaleX(1.03) scaleY(.98) translateY(-1px);
        }
    }

    /* 💻 MONITOR */

    body.home .projects-section .project-card .project-image.pc-bg
    .md-pc-live{
        width:62px !important;
        height:62px !important;
        display:block !important;
        overflow:visible !important;

        filter:
            drop-shadow(0 0 4px rgba(168,85,247,.9))
            drop-shadow(0 0 10px rgba(124,58,237,.65))
            drop-shadow(0 0 18px rgba(56,189,248,.3)) !important;
    }

    body.home .projects-section .project-card .project-image.pc-bg
    .pc-line{
        animation:
            mdkMobilePcFloat 4.5s ease-in-out infinite,
            mdkMobilePcBlink 3s ease-in-out infinite !important;
    }

    body.home .projects-section .project-card .project-image.pc-bg
    .pc-line2{
        animation-delay:-.8s,-.3s !important;
    }

    body.home .projects-section .project-card .project-image.pc-bg
    .pc-line3{
        animation-delay:-1.5s,-1s !important;
    }

    body.home .projects-section .project-card .project-image.pc-bg
    .pc-line4{
        animation-delay:-2.1s,-1.7s !important;
    }

    body.home .projects-section .project-card .project-image.pc-bg
    .pc-line5{
        animation-delay:-2.8s,-2.2s !important;
    }

    @keyframes mdkMobilePcFloat{
        0%,100%{
            transform:translateX(0);
        }
        50%{
            transform:translateX(6px);
        }
    }

    @keyframes mdkMobilePcBlink{
        0%,100%{
            opacity:.55;
        }
        50%{
            opacity:1;
        }
    }

}
/* =========================================================
   MDK KONTAKT — JEDNA KOLUMNA
   ========================================================= */

.contact-section .contact-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:25px !important;
}

.contact-section .contact-info{
    width:100% !important;
    max-width:650px !important;
    text-align:center !important;
}

.contact-section .contact-info .button{
    display:inline-flex !important;
}

.contact-section .contact-form-box{
    width:100% !important;
    max-width:650px !important;
    margin:0 auto !important;
}


/* =========================================================
   MD KLIMA — PREMIUM HERO BUTTONS
   ========================================================= */

.mdk-hero-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:28px;
    flex-wrap:wrap;
}

.mdk-hero-actions .button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:54px;
    padding:0 24px;
    border-radius:14px;
    text-decoration:none;
    font-size:15px;
    font-weight:800;
    letter-spacing:.2px;
    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.mdk-hero-actions .button::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        110deg,
        transparent 20%,
        rgba(255,255,255,.16) 50%,
        transparent 80%
    );
    transform:translateX(-120%);
    transition:transform .55s ease;
}

.mdk-hero-actions .button:hover::before{
    transform:translateX(120%);
}

.mdk-hero-actions .button:hover{
    transform:translateY(-3px);
}

.mdk-button-primary{
    color:#fff !important;
    background:linear-gradient(135deg,#159cff,#006eff) !important;
    border:1px solid rgba(93,203,255,.75) !important;
    box-shadow:
        0 8px 24px rgba(0,126,255,.25),
        0 0 18px rgba(21,156,255,.18);
}

.mdk-button-primary:hover{
    box-shadow:
        0 12px 30px rgba(0,126,255,.38),
        0 0 28px rgba(21,156,255,.28);
}

.mdk-button-secondary{
    color:#dff5ff !important;
    background:rgba(5,18,34,.72) !important;
    border:1px solid rgba(55,181,255,.55) !important;
    box-shadow:
        0 8px 22px rgba(0,0,0,.22),
        inset 0 0 18px rgba(21,156,255,.04);
    backdrop-filter:blur(8px);
}

.mdk-button-secondary:hover{
    color:#fff !important;
    border-color:#39baff !important;
    background:rgba(8,29,51,.88) !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,.28),
        0 0 22px rgba(21,156,255,.18);
}

.mdk-button-icon{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:9px;
    font-size:16px;
    line-height:1;
    background:rgba(255,255,255,.12);
}

.mdk-hero-actions .button span:last-child{
    position:relative;
    z-index:1;
}

@media (max-width:700px){

    .mdk-hero-actions{
        width:100%;
        gap:10px;
        margin-top:22px;
    }

    .mdk-hero-actions .button{
        flex:1 1 100%;
        width:100%;
        min-height:52px;
        padding:0 18px;
    }

}
/* =========================================================
   MD KLIMA — WYŚRODKOWANIE TREŚCI PODSTRON
   ========================================================= */

body:not(.home) .content-box{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}

body:not(.home) .content-box > *{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

body:not(.home) .content-box h2{
    text-align:center;
}

body:not(.home) .content-box p,
body:not(.home) .content-box li{
    text-align:left;
}

/* Obrazy i większe elementy pozostają centralnie */
body:not(.home) .content-box img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

@media (max-width:700px){
    body:not(.home) .content-box{
        max-width:none;
    }

    body:not(.home) .content-box > *{
        max-width:none;
    }
}


/* =========================================================
   MD KLIMA — PODSTRONY — CENTRALNA KOLUMNA TREŚCI
   ========================================================= */

body.page .content-box{
    text-align:left;
}

body.page .content-box > *{
    max-width:920px;
    margin-left:auto;
    margin-right:auto;
}

body.page .content-box > h1,
body.page .content-box > h2,
body.page .content-box > h3,
body.page .content-box > h4{
    text-align:center;
}

body.page .content-box > hr{
    max-width:920px;
    margin-left:auto;
    margin-right:auto;
}

body.page .content-box ul,
body.page .content-box ol{
    max-width:920px;
    margin-left:auto;
    margin-right:auto;
    padding-left:28px;
}

body.page .content-box img{
    display:block;
    max-width:100%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

@media (max-width:700px){

    body.page .content-box > *{
        max-width:none;
    }

    body.page .content-box > h1,
    body.page .content-box > h2,
    body.page .content-box > h3,
    body.page .content-box > h4{
        text-align:left;
    }

    body.page .content-box ul,
    body.page .content-box ol{
        max-width:none;
    }

}

/* =========================================================
   MD KLIMA — PREMIUM BACK BUTTON
   ========================================================= */

.mdk-back-wrap{
    display:flex;
    justify-content:center;
    margin-top:34px;
    padding-top:6px;
}

.mdk-back-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:150px;
    min-height:48px;
    padding:0 22px;
    border-radius:14px;
    color:#dff5ff !important;
    text-decoration:none !important;
    font-size:15px;
    font-weight:800;
    letter-spacing:.2px;
    background:rgba(5,18,34,.72);
    border:1px solid rgba(55,181,255,.45);
    box-shadow:
        0 8px 24px rgba(0,0,0,.25),
        0 0 18px rgba(21,156,255,.08),
        inset 0 0 18px rgba(21,156,255,.035);
    backdrop-filter:blur(8px);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.mdk-back-button:hover{
    transform:translateY(-3px);
    color:#fff !important;
    background:rgba(8,29,51,.9);
    border-color:#39baff;
    box-shadow:
        0 12px 30px rgba(0,0,0,.3),
        0 0 25px rgba(21,156,255,.22);
}

.mdk-back-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:27px;
    height:27px;
    border-radius:9px;
    background:rgba(21,156,255,.13);
    color:#4bc2ff;
    font-size:19px;
    line-height:1;
    transition:transform .25s ease, background .25s ease;
}

.mdk-back-button:hover .mdk-back-arrow{
    transform:translateX(-4px);
    background:rgba(21,156,255,.22);
}

@media (max-width:700px){
    .mdk-back-wrap{
        margin-top:28px;
    }

    .mdk-back-button{
        width:100%;
        max-width:260px;
        min-height:50px;
    }
}


/* =========================================================
   MD KLIMA — PRZYCISK POWROTU
   ========================================================= */

.mdk-back-home-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:34px 0 8px;
}

.mdk-back-home{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
    padding:0 24px;
    border-radius:14px;
    border:1px solid rgba(55,181,255,.55);
    background:linear-gradient(
        135deg,
        rgba(8,35,60,.95),
        rgba(5,20,38,.95)
    );
    color:#dff5ff !important;
    text-decoration:none !important;
    font-size:15px;
    font-weight:800;
    letter-spacing:.2px;
    box-shadow:
        0 8px 24px rgba(0,0,0,.25),
        0 0 18px rgba(21,156,255,.10);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.mdk-back-home:hover{
    transform:translateY(-3px);
    border-color:#39baff;
    background:linear-gradient(
        135deg,
        rgba(10,45,75,.98),
        rgba(6,25,46,.98)
    );
    color:#fff !important;
    box-shadow:
        0 12px 30px rgba(0,0,0,.30),
        0 0 26px rgba(21,156,255,.22);
}

.mdk-back-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:9px;
    background:rgba(255,255,255,.10);
    color:#55c7ff;
    font-size:20px;
    line-height:1;
    transition:
        transform .25s ease,
        background .25s ease;
}

.mdk-back-home:hover .mdk-back-arrow{
    transform:translateX(-4px);
    background:rgba(55,181,255,.16);
}

@media (max-width:700px){

    .mdk-back-home-wrap{
        margin:28px 0 4px;
    }

    .mdk-back-home{
        width:100%;
        min-height:52px;
        padding:0 18px;
    }

}


/* =========================================================
   MD KLIMA — CERTYFIKAT F-GAZ KATEGORIA I
   PREMIUM / DESKTOP + MOBILE
   ========================================================= */

body.home .certificates-section{
    position:relative;
    padding:90px 0 100px;
    overflow:hidden;
}

body.home .certificates-section::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(
        circle,
        rgba(0,140,255,.13) 0%,
        rgba(0,100,255,.06) 38%,
        transparent 72%
    );
    pointer-events:none;
    filter:blur(12px);
}

body.home .certificates-section .container{
    position:relative;
    z-index:2;
}

body.home .certificates-section .section-title{
    margin-bottom:42px;
}

body.home .certificates-section .section-title span{
    color:#42b7ff;
    text-shadow:0 0 14px rgba(0,170,255,.35);
}

body.home .certificate-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:38px;
    width:min(920px,100%);
    margin:0 auto;
    padding:34px 40px;
    box-sizing:border-box;

    background:
        linear-gradient(
            145deg,
            rgba(10,35,60,.92),
            rgba(5,18,34,.96)
        );

    border:1px solid rgba(70,180,255,.28);
    border-radius:24px;

    box-shadow:
        0 18px 55px rgba(0,0,0,.38),
        0 0 30px rgba(0,130,255,.10),
        inset 0 1px 0 rgba(255,255,255,.06);

    overflow:hidden;
}

body.home .certificate-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(80,190,255,.07) 45%,
            rgba(255,255,255,.12) 50%,
            rgba(80,190,255,.07) 55%,
            transparent 80%
        );
    transform:translateX(-120%);
    animation:mdCertificateShine 7s ease-in-out infinite;
    pointer-events:none;
}

body.home .certificate-card::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:23px;
    border:1px solid rgba(90,190,255,.06);
    pointer-events:none;
}

body.home .certificate-icon{
    position:relative;
    flex:0 0 110px;
    width:110px;
    height:110px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:58px;
    line-height:1;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.34),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #21a4ff,
            #0062c7 55%,
            #003d8f
        );

    box-shadow:
        0 0 18px rgba(0,150,255,.48),
        0 0 45px rgba(0,100,255,.20),
        inset 0 0 20px rgba(255,255,255,.08);

    animation:mdCertificatePulse 4s ease-in-out infinite;
}

body.home .certificate-icon::after{
    content:"";
    position:absolute;
    inset:-9px;
    border-radius:50%;
    border:1px solid rgba(60,180,255,.25);
    animation:mdCertificateRing 5s linear infinite;
}

body.home .certificate-content{
    position:relative;
    flex:1;
    min-width:0;
    z-index:2;
}

body.home .certificate-status{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:7px;

    font-size:12px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;

    color:#7dd4ff;
}

body.home .certificate-status span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#43d7ff;
    box-shadow:
        0 0 8px rgba(60,210,255,.95),
        0 0 18px rgba(60,190,255,.55);

    animation:mdCertificateDot 2s ease-in-out infinite;
}

body.home .certificate-content h3{
    margin:0 0 10px;
    font-size:34px;
    line-height:1.05;
    font-weight:800;
    color:#fff;
    letter-spacing:.2px;
}

body.home .certificate-main-text{
    margin:0 0 22px;
    max-width:680px;
    font-size:16px;
    line-height:1.55;
    color:rgba(235,245,255,.82);
}

body.home .certificate-details{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:24px;
}

body.home .certificate-detail{
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(120,190,255,.10);
}

body.home .certificate-detail strong{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#5fc5ff;
}

body.home .certificate-detail span{
    display:block;
    font-size:13px;
    line-height:1.35;
    color:rgba(255,255,255,.78);
}

body.home .certificate-actions{
    display:flex;
    align-items:center;
}

body.home .certificate-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;
    padding:0 22px;

    border:1px solid rgba(80,190,255,.38);
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(20,150,255,.18),
            rgba(0,90,190,.10)
        );

    color:#8cdbff;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    text-decoration:none;

    box-shadow:
        0 0 18px rgba(0,130,255,.08),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        color .25s ease,
        background .25s ease;
}

body.home .certificate-button:hover{
    transform:translateY(-2px);
    color:#fff;
    border-color:rgba(90,200,255,.75);

    background:
        linear-gradient(
            135deg,
            rgba(20,160,255,.30),
            rgba(0,100,210,.18)
        );

    box-shadow:
        0 0 22px rgba(0,150,255,.20),
        0 8px 24px rgba(0,0,0,.22);
}

/* =========================================================
   ANIMACJE CERTYFIKATU
   ========================================================= */

@keyframes mdCertificatePulse{
    0%,100%{
        transform:scale(1);
        box-shadow:
            0 0 18px rgba(0,150,255,.42),
            0 0 45px rgba(0,100,255,.18),
            inset 0 0 20px rgba(255,255,255,.08);
    }

    50%{
        transform:scale(1.035);
        box-shadow:
            0 0 25px rgba(0,170,255,.58),
            0 0 58px rgba(0,110,255,.24),
            inset 0 0 25px rgba(255,255,255,.10);
    }
}

@keyframes mdCertificateRing{
    0%{
        transform:scale(.94);
        opacity:.75;
    }

    50%{
        transform:scale(1.08);
        opacity:.22;
    }

    100%{
        transform:scale(.94);
        opacity:.75;
    }
}

@keyframes mdCertificateDot{
    0%,100%{
        opacity:.55;
        transform:scale(.85);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }
}

@keyframes mdCertificateShine{
    0%,65%,100%{
        transform:translateX(-120%);
    }

    78%{
        transform:translateX(120%);
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    body.home .certificates-section{
        padding:65px 0 75px;
    }

    body.home .certificates-section .section-title{
        margin-bottom:30px;
    }

    body.home .certificate-card{
        flex-direction:column;
        text-align:center;
        gap:24px;
        padding:30px 20px;
        border-radius:20px;
    }

    body.home .certificate-icon{
        flex-basis:auto;
        width:88px;
        height:88px;
        font-size:46px;
    }

    body.home .certificate-status{
        justify-content:center;
        font-size:10px;
        letter-spacing:1px;
    }

    body.home .certificate-content h3{
        font-size:28px;
    }

    body.home .certificate-main-text{
        font-size:14px;
        line-height:1.5;
    }

    body.home .certificate-details{
        grid-template-columns:1fr;
        gap:9px;
        text-align:left;
    }

    body.home .certificate-actions{
        justify-content:center;
    }

    body.home .certificate-button{
        width:100%;
        max-width:280px;
    }
}

/* =========================================================
   MD KLIMA — CERTYFIKATY — GRID
   ========================================================= */

body.home .certificates-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    width:100%;
}

body.home .certificates-grid .certificate-card{
    width:100%;
    margin:0;
    box-sizing:border-box;
}

@media (max-width:900px){

    body.home .certificates-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

}

@media (max-width:600px){

    body.home .certificates-grid .certificate-card{
        padding:28px 24px;
        gap:24px;
    }

}

/* =========================================================
   MDK DOCUMENT MODAL
   PREMIUM DOCUMENT VIEWER
   ========================================================= */

.mdk-document-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    box-sizing:border-box;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.mdk-document-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.mdk-document-backdrop{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0,130,255,.13),
            transparent 42%
        ),
        rgba(2,7,14,.94);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.mdk-document-window{
    position:relative;
    z-index:2;

    width:min(1100px,100%);
    max-height:calc(100vh - 60px);

    display:flex;
    flex-direction:column;

    background:
        linear-gradient(
            145deg,
            rgba(12,30,50,.98),
            rgba(3,12,23,.99)
        );

    border:1px solid rgba(70,180,255,.30);
    border-radius:22px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.65),
        0 0 55px rgba(0,120,255,.15),
        inset 0 1px 0 rgba(255,255,255,.06);

    overflow:hidden;

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);
}

.mdk-document-modal.is-open .mdk-document-window{
    transform:
        translateY(0)
        scale(1);
}

.mdk-document-close{
    position:absolute;
    top:14px;
    right:16px;
    z-index:10;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid rgba(120,200,255,.25);
    border-radius:50%;

    background:rgba(4,18,32,.82);

    color:#fff;
    font-size:28px;
    line-height:1;

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.mdk-document-close:hover{
    transform:rotate(90deg);

    background:rgba(0,120,220,.35);

    box-shadow:
        0 0 18px rgba(0,150,255,.35);
}

.mdk-document-header{
    position:relative;
    padding:25px 70px 20px 28px;

    border-bottom:1px solid rgba(100,190,255,.10);
}

.mdk-document-label{
    display:block;

    margin-bottom:5px;

    color:#55c5ff;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;

    text-shadow:
        0 0 12px rgba(50,180,255,.35);
}

.mdk-document-header h3{
    margin:0;

    color:#fff;

    font-size:24px;
    line-height:1.2;
    font-weight:800;
}

.mdk-document-viewer{
    position:relative;

    flex:1;

    min-height:300px;
    max-height:calc(100vh - 170px);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:28px;

    overflow:auto;

    background:
        radial-gradient(
            circle,
            rgba(20,80,130,.10),
            transparent 65%
        );
}

.mdk-document-placeholder{
    width:min(520px,100%);

    padding:55px 30px;

    box-sizing:border-box;

    text-align:center;

    border:1px dashed rgba(100,190,255,.25);
    border-radius:18px;

    background:rgba(255,255,255,.025);
}

.mdk-document-placeholder > span{
    display:block;

    margin-bottom:15px;

    font-size:54px;

    filter:
        drop-shadow(0 0 15px rgba(0,160,255,.35));
}

.mdk-document-placeholder strong{
    display:block;

    margin-bottom:8px;

    color:#fff;

    font-size:18px;
}

.mdk-document-placeholder small{
    display:block;

    color:rgba(225,240,255,.60);

    font-size:13px;
    line-height:1.5;
}

.mdk-document-image{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:calc(100vh - 230px);

    object-fit:contain;

    border-radius:8px;

    box-shadow:
        0 20px 70px rgba(0,0,0,.55),
        0 0 25px rgba(0,130,255,.10);
}

.mdk-document-pdf{
    width:100%;
    height:calc(100vh - 230px);

    min-height:500px;

    border:0;
    border-radius:8px;

    background:#fff;
}

body.mdk-modal-open{
    overflow:hidden;
}

@media (max-width:700px){

    .mdk-document-modal{
        padding:10px;
    }

    .mdk-document-window{
        max-height:calc(100vh - 20px);
        border-radius:16px;
    }

    .mdk-document-header{
        padding:20px 60px 16px 20px;
    }

    .mdk-document-header h3{
        font-size:19px;
    }

    .mdk-document-viewer{
        padding:15px;
        max-height:calc(100vh - 125px);
    }

    .mdk-document-image{
        max-height:calc(100vh - 160px);
    }

    .mdk-document-pdf{
        height:calc(100vh - 145px);
        min-height:400px;
    }

    .mdk-document-close{
        top:10px;
        right:10px;

        width:38px;
        height:38px;

        font-size:25px;
    }

}

/* =========================================================
   MDK PREMIUM DOCUMENT VIEWER
   Tylko modal dokumentów — nie zmienia kart certyfikatów
   ========================================================= */

body.mdk-document-modal-open{
    overflow:hidden;
}

.mdk-document-modal{
    position:fixed;
    inset:0;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}

.mdk-document-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.mdk-document-backdrop{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(0,150,255,.12),
            transparent 45%
        ),
        rgba(2,8,18,.88);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.mdk-document-window{
    position:relative;
    z-index:2;

    width:min(1180px,96vw);
    height:min(900px,94vh);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid rgba(70,180,255,.28);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(9,29,50,.98),
            rgba(3,12,24,.99)
        );

    box-shadow:
        0 30px 100px rgba(0,0,0,.65),
        0 0 50px rgba(0,130,255,.14),
        inset 0 1px 0 rgba(255,255,255,.07);

    transform:translateY(18px) scale(.97);
    opacity:0;

    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        opacity .28s ease;
}

.mdk-document-modal.is-open .mdk-document-window{
    transform:translateY(0) scale(1);
    opacity:1;
}

.mdk-document-close{
    position:absolute;
    top:14px;
    right:16px;

    z-index:10;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid rgba(100,190,255,.28);
    border-radius:50%;

    background:rgba(5,18,34,.88);

    color:#fff;

    font-size:27px;
    line-height:1;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.mdk-document-close:hover{
    transform:rotate(90deg) scale(1.06);

    background:rgba(15,65,100,.95);

    border-color:rgba(80,190,255,.65);

    box-shadow:
        0 0 20px rgba(0,150,255,.28);
}

.mdk-document-header{
    flex:0 0 auto;

    padding:22px 72px 18px 28px;

    border-bottom:1px solid rgba(100,190,255,.12);

    background:
        linear-gradient(
            90deg,
            rgba(20,80,125,.18),
            transparent
        );
}

.mdk-document-label{
    display:block;

    margin-bottom:5px;

    color:#62c7ff;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
}

.mdk-document-header h3{
    margin:0;

    color:#fff;

    font-size:24px;
    line-height:1.2;
    font-weight:800;
}

.mdk-document-viewer{
    flex:1;
    min-height:0;

    display:flex;
    flex-direction:column;

    background:#050b13;
}

.mdk-pdf-toolbar{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    min-height:48px;

    padding:7px 18px;

    border-bottom:1px solid rgba(100,190,255,.12);

    background:
        linear-gradient(
            90deg,
            rgba(8,30,50,.96),
            rgba(4,15,28,.98)
        );
}

.mdk-pdf-status{
    color:rgba(220,240,255,.62);

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
}

.mdk-pdf-new-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:34px;

    padding:0 14px;

    border:1px solid rgba(70,180,255,.30);
    border-radius:9px;

    background:rgba(20,100,155,.16);

    color:#75d0ff;

    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;

    text-decoration:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.mdk-pdf-new-tab:hover{
    transform:translateY(-1px);

    background:rgba(20,120,190,.28);

    border-color:rgba(80,195,255,.60);

    box-shadow:
        0 0 18px rgba(0,150,255,.18);

    color:#fff;
}

.mdk-pdf-frame-wrap{
    flex:1;
    min-height:0;

    padding:0;

    background:#111;
}

.mdk-pdf-frame{
    display:block;

    width:100%;
    height:100%;

    min-height:0;

    border:0;

    background:#111;
}

.mdk-document-placeholder{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:12px;

    text-align:center;

    color:#fff;
}

.mdk-document-placeholder span{
    font-size:54px;

    filter:
        drop-shadow(0 0 18px rgba(0,160,255,.35));
}

.mdk-document-placeholder strong{
    font-size:20px;
}

.mdk-document-placeholder small{
    max-width:420px;

    color:rgba(225,240,255,.62);

    font-size:13px;
    line-height:1.5;
}


@media (max-width:700px){

    .mdk-document-modal{
        padding:10px;
    }

    .mdk-document-window{
        width:100%;
        height:calc(100vh - 20px);

        border-radius:16px;
    }

    .mdk-document-header{
        padding:18px 60px 14px 20px;
    }

    .mdk-document-header h3{
        font-size:19px;
    }

    .mdk-document-close{
        top:10px;
        right:10px;
    }

    .mdk-pdf-toolbar{
        padding:7px 10px;
    }

    .mdk-pdf-status{
        display:none;
    }

    .mdk-pdf-new-tab{
        width:100%;
    }

}


/* =========================================================
   MD KLIMA — CERTYFIKATY I DOŚWIADCZENIE
   PREMIUM WOW — FINAL
   ========================================================= */

body.home .why-qualifications{
    position:relative;
    width:100%;
    margin:58px 0 0;
    padding:42px 0 0;
    border-top:1px solid rgba(80,190,255,.16);
    box-sizing:border-box;
    overflow:visible;
}

/* delikatna poświata sekcji */

body.home .why-qualifications::before{
    content:"";
    position:absolute;
    top:-1px;
    left:8%;
    right:8%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(70,205,255,.65),
        rgba(130,225,255,.35),
        transparent
    );
    box-shadow:0 0 18px rgba(60,200,255,.35);
    pointer-events:none;
}

/* =========================================================
   NAGŁÓWEK
   ========================================================= */

body.home .why-qualifications-heading{
    position:relative;
    max-width:820px;
    margin:0 auto 28px;
    text-align:center;
}

body.home .why-qualifications-heading > span{
    display:inline-block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:2.4px;
    color:#52d4ff;
    text-transform:uppercase;
    text-shadow:0 0 14px rgba(60,205,255,.35);
}

body.home .why-qualifications-heading h3{
    margin:0;
    font-size:27px;
    line-height:1.2;
    font-weight:800;
    color:#fff;
    letter-spacing:-.3px;
}

body.home .why-qualifications-heading p{
    max-width:680px;
    margin:10px auto 0;
    font-size:14px;
    line-height:1.55;
    color:#aebfce;
}

/* =========================================================
   GRID
   ========================================================= */

body.home .why-qualifications-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    width:100%;
    margin:0;
}

/* =========================================================
   KARTA
   ========================================================= */

body.home .why-qualification-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:14px;

    min-width:0;
    min-height:118px;

    padding:17px;

    border-radius:18px;
    border:1px solid rgba(110,190,235,.15);

    background:
        linear-gradient(
            145deg,
            rgba(22,53,73,.92),
            rgba(8,23,36,.96)
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.035);

    box-sizing:border-box;

    overflow:hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

/* światło przesuwające się po karcie */

body.home .why-qualification-card::before{
    content:"";
    position:absolute;
    top:-80%;
    left:-35%;
    width:45%;
    height:260%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(100,220,255,.13),
        transparent
    );
    transform:rotate(18deg);
    opacity:0;
    pointer-events:none;
    transition:
        left .8s ease,
        opacity .35s ease;
}

/* subtelny punkt światła */

body.home .why-qualification-card::after{
    content:"";
    position:absolute;
    top:10px;
    right:10px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#55d8ff;
    box-shadow:
        0 0 7px rgba(70,215,255,.9),
        0 0 15px rgba(70,215,255,.45);
    opacity:.35;
    transition:opacity .3s ease, transform .3s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

body.home .why-qualification-card:hover{
    transform:translateY(-5px);

    border-color:rgba(75,205,255,.48);

    background:
        linear-gradient(
            145deg,
            rgba(25,67,91,.98),
            rgba(8,25,39,.98)
        );

    box-shadow:
        0 18px 38px rgba(0,0,0,.34),
        0 0 22px rgba(45,190,255,.12),
        inset 0 1px 0 rgba(255,255,255,.07);
}

body.home .why-qualification-card:hover::before{
    left:115%;
    opacity:1;
}

body.home .why-qualification-card:hover::after{
    opacity:1;
    transform:scale(1.35);
}

/* =========================================================
   IKONA
   ========================================================= */

body.home .why-qualification-icon{
    position:relative;
    flex:0 0 48px;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(45,160,210,.22),
            rgba(20,70,100,.12)
        );

    border:1px solid rgba(90,205,245,.25);

    font-size:24px;
    line-height:1;

    box-shadow:
        0 6px 18px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

/* halo */

body.home .why-qualification-icon::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:17px;
    background:rgba(60,205,255,.12);
    filter:blur(8px);
    opacity:.35;
    z-index:-1;
    transition:opacity .35s ease;
}

body.home .why-qualification-card:hover .why-qualification-icon{
    transform:translateY(-2px) scale(1.08);

    border-color:rgba(85,215,255,.58);

    background:
        linear-gradient(
            145deg,
            rgba(50,180,230,.30),
            rgba(25,80,110,.16)
        );

    box-shadow:
        0 0 22px rgba(55,200,255,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
}

body.home .why-qualification-card:hover .why-qualification-icon::before{
    opacity:.8;
}

/* =========================================================
   TREŚĆ
   ========================================================= */

body.home .why-qualification-content{
    position:relative;
    min-width:0;
    flex:1;
}

body.home .why-qualification-status{
    display:inline-block;
    margin-bottom:5px;

    font-size:9px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:1.25px;

    color:#55d8ff;
    text-transform:uppercase;

    opacity:.9;
}

body.home .why-qualification-content h4{
    margin:0 0 6px;

    font-size:15px;
    line-height:1.25;
    font-weight:800;

    color:#fff;

    transition:
        color .3s ease,
        text-shadow .3s ease;
}

body.home .why-qualification-card:hover
.why-qualification-content h4{
    color:#e9fbff;
    text-shadow:0 0 12px rgba(70,210,255,.22);
}

body.home .why-qualification-content p{
    margin:0;

    font-size:11.5px;
    line-height:1.48;

    color:#aebfce;
}

/* =========================================================
   PRZYCISK DOKUMENTU
   ========================================================= */

body.home .why-qualification-content .certificate-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:9px;
    padding:6px 10px;

    border:1px solid rgba(75,205,255,.24);
    border-radius:8px;

    background:rgba(40,150,200,.08);

    color:#61dcff;

    font-size:9px;
    font-weight:800;
    letter-spacing:.7px;

    text-decoration:none;

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

body.home .why-qualification-content .certificate-button:hover{
    background:rgba(45,175,225,.18);
    border-color:rgba(80,215,255,.58);

    box-shadow:
        0 0 16px rgba(55,200,255,.15);

    transform:translateY(-1px);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

    body.home .why-qualifications-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width:700px){

    body.home .why-qualifications{
        margin-top:42px;
        padding-top:32px;
    }

    body.home .why-qualifications-heading{
        margin-bottom:22px;
    }

    body.home .why-qualifications-heading h3{
        font-size:23px;
    }

    body.home .why-qualifications-heading p{
        font-size:12.5px;
    }

    body.home .why-qualifications-grid{
        grid-template-columns:1fr;
        gap:11px;
    }

    body.home .why-qualification-card{
        min-height:0;
        padding:14px;
        border-radius:15px;
        gap:12px;
    }

    body.home .why-qualification-icon{
        flex-basis:42px;
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:21px;
    }

    body.home .why-qualification-content h4{
        font-size:14px;
    }

    body.home .why-qualification-content p{
        font-size:11px;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    body.home .why-qualification-card,
    body.home .why-qualification-icon,
    body.home .why-qualification-content .certificate-button{
        transition:none;
    }

    body.home .why-qualification-card:hover{
        transform:none;
    }

}


/* =========================================================
   MD KLIMA — CERTYFIKATY I DOŚWIADCZENIE
   PREMIUM WOW — FINAL
   HTML / NAZWY / DOKUMENTY — BEZ ZMIAN
   ========================================================= */

body.home .why-qualifications{
    position:relative;
    width:100%;
    margin:48px 0 0;
    padding:38px 0 0;
    border-top:1px solid rgba(90,200,255,.16);
}

body.home .why-qualifications-heading{
    position:relative;
    max-width:780px;
    margin:0 auto 28px;
    text-align:center;
}

body.home .why-qualifications-heading > span{
    display:inline-block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    color:#69d8ff;
    text-transform:uppercase;
}

body.home .why-qualifications-heading h3{
    margin:0;
    font-size:27px;
    line-height:1.2;
    font-weight:800;
}

body.home .why-qualifications-heading p{
    margin:10px auto 0;
    max-width:650px;
    font-size:14px;
    line-height:1.6;
    opacity:.72;
}

body.home .why-qualifications-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    width:100%;
}

/* =========================================================
   KARTY — MNIEJSZE / BARDZIEJ PREMIUM
   ========================================================= */

body.home .why-qualification-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;

    min-height:118px;
    padding:17px 18px;

    overflow:hidden;
    isolation:isolate;

    border:1px solid rgba(100,205,255,.18);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(30,55,75,.62),
            rgba(8,18,28,.88)
        );

    box-shadow:
        0 12px 32px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* delikatna poświata */

body.home .why-qualification-card::before{
    content:"";
    position:absolute;
    inset:-40%;
    z-index:-1;

    background:
        radial-gradient(
            circle,
            rgba(50,200,255,.16),
            transparent 58%
        );

    opacity:.45;
    transform:translateX(-25%);
    transition:
        transform .8s ease,
        opacity .5s ease;
}

/* świetlny pasek */

body.home .why-qualification-card::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(150,235,255,.14),
            transparent
        );

    transform:skewX(-20deg);
    animation:mdkCertSweep 7s ease-in-out infinite;
    pointer-events:none;
}

/* =========================================================
   IKONY — DUŻE / ANIMOWANE
   ========================================================= */

body.home .why-qualification-icon{
    position:relative;
    flex:0 0 68px;
    width:68px;
    height:68px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:43px;
    line-height:1;

    border-radius:20px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(100,220,255,.22),
            rgba(20,60,85,.18) 45%,
            transparent 72%
        );

    border:1px solid rgba(100,220,255,.24);

    box-shadow:
        0 0 18px rgba(40,190,255,.12),
        inset 0 0 18px rgba(100,210,255,.08);

    filter:
        drop-shadow(0 0 7px rgba(100,220,255,.25));

    transform:translateZ(0);
    animation:
        mdkCertIconFloat 4s ease-in-out infinite,
        mdkCertIconGlow 2.8s ease-in-out infinite alternate;
}

/* halo */

body.home .why-qualification-icon::before{
    content:"";
    position:absolute;
    inset:-9px;

    border-radius:24px;

    border:1px solid rgba(100,220,255,.12);

    box-shadow:
        0 0 20px rgba(70,205,255,.10);

    animation:mdkCertHalo 3.2s ease-in-out infinite;
}

/* =========================================================
   TREŚĆ
   ========================================================= */

body.home .why-qualification-content{
    position:relative;
    z-index:2;
    min-width:0;
}

body.home .why-qualification-status{
    display:inline-block;
    margin-bottom:5px;

    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;

    color:#70dcff;
    text-transform:uppercase;
}

body.home .why-qualification-content h4{
    margin:0;

    font-size:15px;
    line-height:1.25;
    font-weight:800;

    color:#fff;
}

body.home .why-qualification-content p{
    margin:6px 0 0;

    font-size:11px;
    line-height:1.5;

    color:rgba(255,255,255,.68);
}

body.home .why-qualification-content .certificate-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:9px;
    padding:6px 10px;

    border:1px solid rgba(100,215,255,.28);
    border-radius:8px;

    font-size:9px;
    font-weight:800;
    letter-spacing:.7px;

    color:#8de5ff;
    background:rgba(50,170,220,.07);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine){

    body.home .why-qualification-card:hover{
        transform:translateY(-6px);

        border-color:rgba(100,220,255,.48);

        box-shadow:
            0 18px 42px rgba(0,0,0,.32),
            0 0 28px rgba(50,195,255,.12),
            inset 0 1px 0 rgba(255,255,255,.08);
    }

    body.home .why-qualification-card:hover::before{
        transform:translateX(25%) scale(1.1);
        opacity:.8;
    }

    body.home .why-qualification-icon{
        transition:transform .35s ease;
    }

    body.home .why-qualification-card:hover .why-qualification-icon{
        transform:
            translateY(-3px)
            scale(1.08)
            rotate(-3deg);

        box-shadow:
            0 0 28px rgba(60,205,255,.24),
            inset 0 0 20px rgba(100,220,255,.12);
    }

    body.home .why-qualification-content .certificate-button:hover{
        transform:translateY(-2px);

        background:rgba(50,190,240,.15);

        box-shadow:
            0 0 16px rgba(60,205,255,.16);
    }
}

/* =========================================================
   ANIMACJE
   ========================================================= */

@keyframes mdkCertIconFloat{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-5px) rotate(2deg);
    }

}

@keyframes mdkCertIconGlow{

    0%{
        filter:drop-shadow(0 0 5px rgba(90,210,255,.18));
    }

    100%{
        filter:drop-shadow(0 0 15px rgba(90,220,255,.48));
    }

}

@keyframes mdkCertHalo{

    0%,100%{
        transform:scale(.96);
        opacity:.35;
    }

    50%{
        transform:scale(1.08);
        opacity:.75;
    }

}

@keyframes mdkCertSweep{

    0%,65%,100%{
        left:-120%;
    }

    78%{
        left:140%;
    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

    body.home .why-qualifications-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px){

    body.home .why-qualifications{
        margin-top:38px;
        padding-top:30px;
    }

    body.home .why-qualifications-heading{
        margin-bottom:22px;
    }

    body.home .why-qualifications-heading h3{
        font-size:23px;
    }

    body.home .why-qualifications-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    body.home .why-qualification-card{
        min-height:96px;
        padding:13px 14px;
        gap:13px;
        border-radius:15px;
    }

    body.home .why-qualification-icon{
        flex-basis:54px;
        width:54px;
        height:54px;
        font-size:34px;
        border-radius:16px;
    }

    body.home .why-qualification-content h4{
        font-size:13px;
    }

    body.home .why-qualification-content p{
        font-size:10px;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    body.home .why-qualification-icon,
    body.home .why-qualification-card::after,
    body.home .why-qualification-icon::before{
        animation:none;
    }

}



/* =========================================================
   MD KLIMA — CERTYFIKATY
   COMPACT CARDS + STRONG PREMIUM WOW
   ========================================================= */

/* ---------- DESKTOP ---------- */

body.home .why-qualifications-grid{
    gap:12px;
}

body.home .why-qualification-card{
    min-height:92px;
    height:92px;
    padding:11px 14px;
    gap:14px;
    border-radius:16px;
    overflow:hidden;
    position:relative;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22),
        0 0 20px rgba(40,190,255,.08),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* mocniejszy świetlny przejazd */

body.home .why-qualification-card::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-70%;
    width:45%;
    height:180%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(130,225,255,.08),
            rgba(180,245,255,.32),
            rgba(130,225,255,.08),
            transparent
        );

    transform:skewX(-18deg);
    animation:mdkCertSweep 4.8s ease-in-out infinite;

    pointer-events:none;
}

/* ---------- IKONA ---------- */

body.home .why-qualification-icon{
    flex:0 0 60px;
    width:60px;
    height:60px;

    font-size:39px;
    line-height:1;

    border-radius:17px;

    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(100,220,255,.20),
            rgba(30,120,180,.07) 55%,
            transparent 75%
        );

    filter:
        drop-shadow(0 0 7px rgba(90,211,255,.45))
        drop-shadow(0 0 18px rgba(40,190,255,.22));

    animation:
        mdkCertIconFloat 3.2s ease-in-out infinite,
        mdkCertIconGlow 2.8s ease-in-out infinite;
}

/* duże halo */

body.home .why-qualification-icon::before{
    content:"";
    position:absolute;

    width:78px;
    height:78px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(60,205,255,.22) 0%,
            rgba(60,205,255,.10) 35%,
            rgba(60,205,255,.03) 58%,
            transparent 72%
        );

    filter:blur(5px);

    z-index:-1;

    animation:mdkCertHalo 2.6s ease-in-out infinite;
}

/* ---------- TEKST ---------- */

body.home .why-qualification-content{
    min-width:0;
}

body.home .why-qualification-content h4{
    margin:2px 0 4px;
}

body.home .why-qualification-content p{
    margin:0;
}

/* ---------- HOVER ---------- */

@media (hover:hover) and (pointer:fine){

    body.home .why-qualification-card:hover{
        transform:translateY(-5px) scale(1.015);

        border-color:rgba(100,220,255,.65);

        box-shadow:
            0 14px 32px rgba(0,0,0,.30),
            0 0 25px rgba(40,200,255,.18),
            0 0 55px rgba(40,190,255,.08),
            inset 0 1px 0 rgba(255,255,255,.12);
    }

    body.home .why-qualification-card:hover .why-qualification-icon{
        transform:scale(1.08);

        filter:
            drop-shadow(0 0 10px rgba(110,225,255,.75))
            drop-shadow(0 0 28px rgba(40,190,255,.45));
    }

}

/* ---------- ANIMACJE ---------- */

@keyframes mdkCertIconFloat{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-4px) rotate(.8deg);
    }

}

@keyframes mdkCertIconGlow{

    0%,100%{
        filter:
            drop-shadow(0 0 6px rgba(90,211,255,.30))
            drop-shadow(0 0 14px rgba(40,190,255,.12));
    }

    50%{
        filter:
            drop-shadow(0 0 12px rgba(100,225,255,.70))
            drop-shadow(0 0 30px rgba(40,190,255,.35));
    }

}

@keyframes mdkCertHalo{

    0%,100%{
        opacity:.35;
        transform:translate(-50%,-50%) scale(.82);
    }

    50%{
        opacity:.95;
        transform:translate(-50%,-50%) scale(1.12);
    }

}

/* ---------- MOBILE ---------- */

@media (max-width:700px){

    body.home .why-qualification-grid{
        gap:9px;
    }

    body.home .why-qualification-card{
        min-height:84px;
        height:84px;
        padding:10px 12px;
        gap:12px;
        border-radius:14px;
    }

    body.home .why-qualification-icon{
        flex-basis:52px;
        width:52px;
        height:52px;
        font-size:32px;
        border-radius:15px;
    }

    body.home .why-qualification-icon::before{
        width:68px;
        height:68px;
    }

}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion:reduce){

    body.home .why-qualification-icon,
    body.home .why-qualification-card::after,
    body.home .why-qualification-icon::before{
        animation:none;
    }

}



/* =========================================================
   MD KLIMA — CERTYFIKATY WOW 3.1
   MNIEJSZE KARTY / MOCNIEJSZE IKONY
   ========================================================= */

body.home .why-qualification-card{
    min-height:82px !important;
    height:82px !important;
    padding:8px 12px !important;
    gap:12px !important;
    border-radius:14px !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.24),
        0 0 28px rgba(40,200,255,.10),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.home .why-qualification-icon{
    flex:0 0 56px !important;
    width:56px !important;
    height:56px !important;
    font-size:38px !important;

    filter:
        drop-shadow(0 0 10px rgba(100,225,255,.60))
        drop-shadow(0 0 25px rgba(40,190,255,.35)) !important;
}

body.home .why-qualification-icon::before{
    width:76px !important;
    height:76px !important;

    background:
        radial-gradient(
            circle,
            rgba(70,215,255,.30) 0%,
            rgba(60,200,255,.14) 35%,
            rgba(40,190,255,.04) 60%,
            transparent 74%
        ) !important;

    filter:blur(4px) !important;
}

body.home .why-qualification-card::after{
    animation:
        mdkCertSweep 3.6s ease-in-out infinite !important;
    opacity:.9 !important;
}

body.home .why-qualification-card:hover{
    transform:translateY(-4px) scale(1.012) !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.30),
        0 0 30px rgba(50,205,255,.22),
        0 0 65px rgba(40,190,255,.10),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body.home .why-qualification-card:hover .why-qualification-icon{
    transform:scale(1.10) !important;

    filter:
        drop-shadow(0 0 13px rgba(120,235,255,.90))
        drop-shadow(0 0 35px rgba(40,200,255,.55)) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px){

    body.home .why-qualification-card{
        min-height:76px !important;
        height:76px !important;
        padding:8px 10px !important;
        gap:10px !important;
    }

    body.home .why-qualification-icon{
        flex-basis:50px !important;
        width:50px !important;
        height:50px !important;
        font-size:32px !important;
    }

    body.home .why-qualification-icon::before{
        width:68px !important;
        height:68px !important;
    }

}



/* =========================================================
   MD KLIMA — CERTYFIKATY WOW 3.2
   USUNIĘCIE SWEEP / PRZEJAZDU ŚWIETLNEGO
   ========================================================= */

body.home .why-qualification-card::after{
    animation:none !important;
    opacity:0 !important;
    display:none !important;
}

/* zachowujemy efekt hover karty */

body.home .why-qualification-card:hover{
    transform:translateY(-4px) scale(1.012) !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.30),
        0 0 30px rgba(50,205,255,.22),
        0 0 65px rgba(40,190,255,.10),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* zachowujemy mocny efekt ikon */

body.home .why-qualification-card:hover .why-qualification-icon{
    transform:scale(1.10) !important;

    filter:
        drop-shadow(0 0 13px rgba(120,235,255,.90))
        drop-shadow(0 0 35px rgba(40,200,255,.55)) !important;
}



/* =========================================================
   MD KLIMA — CERTYFIKATY — USUNIĘCIE RUCHOMEGO KOŁA
   TYLKO CARD::AFTER / SWEEP
   ========================================================= */

body.home .why-qualification-card::after{
    content:none !important;
    display:none !important;
    animation:none !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
}

/* zachowujemy halo i animację samej ikony */
body.home .why-qualification-icon::before{
    display:block !important;
}



/* =========================================================
   MD KLIMA — TEST CERTYFIKATY
   WYŁĄCZENIE TYLKO EFEKTÓW ::BEFORE / ::AFTER KART
   ========================================================= */

body.home .why-qualifications .why-qualification-card::before,
body.home .why-qualifications .why-qualification-card::after{
    content:none !important;
    display:none !important;
    animation:none !important;
    transform:none !important;
    background:none !important;
    box-shadow:none !important;
    opacity:0 !important;
}

/* NIE RUSZAMY IKON */
body.home .why-qualifications .why-qualification-icon{
    animation:mdkCertIconFloat 3.2s ease-in-out infinite !important;
}

body.home .why-qualifications .why-qualification-icon::before{
    display:block !important;
}



/* =========================================================
   MD KLIMA — DIAGNOSTYKA CERTYFIKATÓW
   ODIZOLOWANIE GLOBALNYCH CANVASÓW TYLKO W TEJ SEKCJI
   ========================================================= */

body.home .why-qualifications{
    position:relative !important;
    z-index:20 !important;
    isolation:isolate !important;
}

body.home .why-qualifications::before{
    z-index:0 !important;
}

body.home .why-qualifications-heading,
body.home .why-qualifications-grid{
    position:relative !important;
    z-index:5 !important;
}

body.home .why-qualification-card{
    position:relative !important;
    z-index:6 !important;
}



/* =========================================================
   MD KLIMA — CERTYFIKATY
   IZOLACJA CANVASU BEZ ZASŁANIANIA ZAWARTOŚCI
   ========================================================= */

/* przywracamy przezroczystą sekcję */

body.home .why-qualifications{
    background:transparent !important;
    position:relative !important;
    z-index:20 !important;
    isolation:isolate !important;
}

/* osobna warstwa ochronna przed globalnym canvasem */

body.home .why-qualifications::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(7,21,34,.98) 0%,
            rgba(8,24,38,.98) 100%
        ) !important;

    pointer-events:none !important;

    display:block !important;
    opacity:1 !important;
}

/* zawartość nad warstwą ochronną */

body.home .why-qualifications-heading,
body.home .why-qualifications-grid{
    position:relative !important;
    z-index:5 !important;
}

body.home .why-qualification-card{
    position:relative !important;
    z-index:6 !important;
}

/* zachowujemy ikonę */

body.home .why-qualification-icon{
    z-index:7 !important;
}



/* =========================================================
   MD KLIMA — CERTYFIKATY WOW 3.3
   KOMPAKTOWE KARTY — BEZ UCINANIA PRZYCISKÓW
   ========================================================= */

body.home .why-qualifications-grid{
    align-items:stretch !important;
}

body.home .why-qualifications .why-qualification-card{
    height:auto !important;
    min-height:104px !important;

    padding:10px 12px !important;
    gap:12px !important;

    align-items:flex-start !important;
    box-sizing:border-box !important;

    overflow:hidden !important;
}

body.home .why-qualifications .why-qualification-icon{
    flex:0 0 56px !important;
    width:56px !important;
    height:56px !important;

    font-size:38px !important;
}

body.home .why-qualifications .why-qualification-content{
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:visible !important;
}

body.home .why-qualifications .why-qualification-content h4{
    margin:1px 0 4px !important;
    font-size:14px !important;
    line-height:1.22 !important;
}

body.home .why-qualifications .why-qualification-content p{
    margin:0 !important;
    font-size:16px !important;
    line-height:1.42 !important;
}

body.home .why-qualifications .why-qualification-content .certificate-button{
    display:inline-flex !important;
    margin-top:7px !important;
    padding:5px 9px !important;
    min-height:0 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px){

    body.home .why-qualifications .why-qualification-card{
        height:auto !important;
        min-height:88px !important;
        padding:9px 10px !important;
        gap:10px !important;
    }

    body.home .why-qualifications .why-qualification-icon{
        flex:0 0 50px !important;
        width:50px !important;
        height:50px !important;
        font-size:32px !important;
    }

    body.home .why-qualifications .why-qualification-content h4{
        font-size:13px !important;
    }

    body.home .why-qualifications .why-qualification-content p{
        font-size:16px !important;
    }

}




/* =========================================================
   MD KLIMA — KWALIFIKACJE
   FINAL FIX 4.0 — PEŁNA WYSOKOŚĆ KART
   ========================================================= */

body.home .why-qualifications{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}

body.home .why-qualifications-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:max-content !important;

    gap:14px !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    align-items:start !important;
    align-content:start !important;

    overflow:visible !important;
    box-sizing:border-box !important;
}

body.home .why-qualifications .why-qualification-card{
    position:relative !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;

    width:100% !important;
    height:auto !important;
    min-height:118px !important;
    max-height:none !important;

    padding:17px !important;

    box-sizing:border-box !important;

    overflow:visible !important;

    align-self:start !important;
}

body.home .why-qualifications .why-qualification-content{
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    flex:1 1 auto !important;
    min-width:0 !important;
    min-height:0 !important;

    width:auto !important;
    height:auto !important;
    max-height:none !important;

    overflow:visible !important;

    box-sizing:border-box !important;
}

body.home .why-qualifications .why-qualification-content h4{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;

    margin:0 0 6px !important;
}

body.home .why-qualifications .why-qualification-content p{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;

    margin:0 !important;
}

body.home .why-qualifications .why-qualification-content .certificate-button{
    display:inline-flex !important;

    position:relative !important;
    z-index:100 !important;

    visibility:visible !important;
    opacity:1 !important;

    flex:0 0 auto !important;

    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin-top:9px !important;

    overflow:visible !important;

    white-space:nowrap !important;

    box-sizing:border-box !important;
}

body.home .why-qualifications .why-qualification-card::before,
body.home .why-qualifications .why-qualification-card::after{
    pointer-events:none !important;
}

@media (max-width:700px){

    body.home .why-qualifications{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
    }

    body.home .why-qualifications-grid{
        grid-template-columns:1fr !important;
        grid-auto-flow:row !important;
        grid-auto-rows:max-content !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        overflow:visible !important;
    }

    body.home .why-qualifications .why-qualification-card{
        width:100% !important;

        height:auto !important;
        min-height:118px !important;
        max-height:none !important;

        overflow:visible !important;
    }

    body.home .why-qualifications .why-qualification-content{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        overflow:visible !important;
    }

    body.home .why-qualifications .why-qualification-content .certificate-button{
        display:inline-flex !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        overflow:visible !important;

        margin-top:8px !important;
    }
}


/* =========================================================
   MD KLIMA — CERTYFIKATY
   TABLET + TELEFON — WIĘCEJ KART W RZĘDZIE
   DESKTOP BEZ ZMIAN
   ========================================================= */

/* TABLET */
@media (min-width:701px) and (max-width:1000px){

    body.home .why-qualifications-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:max-content !important;
    }

}

/* TELEFON — 2 KARTY */
@media (min-width:451px) and (max-width:700px){

    body.home .why-qualifications-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:max-content !important;
    }

}

/* MAŁY TELEFON — 1 KARTA */
@media (max-width:450px){

    body.home .why-qualifications-grid{
        grid-template-columns:1fr !important;
        grid-auto-rows:max-content !important;
    }

}




/* =========================================================
   MD KLIMA — KWALIFIKACJE
   CZYTELNIEJSZY OPIS KART
   ========================================================= */

body.home .why-qualification-content p{
    font-size:14px;
    line-height:1.5;
}


/* =========================================================
   MD KLIMA — KWALIFIKACJE
   FINALNA CZYTELNOŚĆ OPISÓW
   ========================================================= */

body.home .why-qualification-content p{
    font-size:15px;
    line-height:1.55;
    color:#c0ced9;
    font-weight:400;
}


/* =========================================================
   MD KLIMA — KWALIFIKACJE
   FINALNA CZYTELNOŚĆ OPISÓW
   ========================================================= */

body.home .why-qualification-content p{
    font-size:15px;
    line-height:1.55;
    color:#c0ced9;
    font-weight:400;
}


/* =========================================================
   MD KLIMA — KWALIFIKACJE
   16 PX — CZYTELNY TEKST + KOMPAKTOWA KARTA
   ========================================================= */

body.home .why-qualification-card{
    gap:12px;
    padding:15px;
}

body.home .why-qualification-content{
    min-width:0;
}

body.home .why-qualification-status{
    margin-bottom:4px;
}

body.home .why-qualification-content h4{
    margin:0 0 5px;
    font-size:15px;
    line-height:1.25;
}

body.home .why-qualification-content p{
    margin:0;
    font-size:16px;
    line-height:1.45;
    color:#c0ced9;
    font-weight:400;
}

body.home .why-qualification-content .certificate-button{
    margin-top:8px;
}


/* =========================================================
   MD KLIMA — CERTYFIKATY
   FINALNY CZYTELNY OPIS — 16 PX
   ========================================================= */

body.home .why-qualifications .why-qualification-content p{
    font-size:16px !important;
    line-height:1.6 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    opacity:1 !important;
    max-width:none !important;
}

/* DESKTOP + TABLET */
@media (min-width:701px){

    body.home .why-qualifications .why-qualification-content p{
        font-size:16px !important;
        line-height:1.6 !important;
    }

}

/* TELEFON */
@media (max-width:700px){

    body.home .why-qualifications .why-qualification-content p{
        font-size:16px !important;
        line-height:1.55 !important;
    }

}



/* =========================================================
   MD KLIMA — FINALNY FIX CZYTELNOŚCI OPISÓW KWALIFIKACJI
   ========================================================= */

html body.home .why-qualifications .why-qualification-card .why-qualification-content p{
    font-size:16px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    opacity:1 !important;
}

@media (max-width:700px){
    html body.home .why-qualifications .why-qualification-card .why-qualification-content p{
        font-size:16px !important;
        line-height:1.5 !important;
    }
}


/* =========================================================
   MD KLIMA — PDF.JS VIEWER
   FINAL SIZE FIX
   ========================================================= */

.mdk-document-viewer{
    width:100% !important;
    max-width:none !important;
    height:82vh !important;
    min-height:620px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

.mdk-pdf-frame-wrap{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

.mdk-pdfjs-frame,
.mdk-pdf-frame{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:0 !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
}

@media (max-width:700px){

    .mdk-document-viewer{
        width:100% !important;
        height:78vh !important;
        min-height:520px !important;
    }

    .mdk-pdf-frame-wrap{
        width:100% !important;
        height:100% !important;
    }

    .mdk-pdfjs-frame,
    .mdk-pdf-frame{
        width:100% !important;
        height:100% !important;
    }

}


/* =========================================================
   MD KLIMA — PDF.JS
   FRAME WRAPPER WIDTH FIX
   ========================================================= */

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    flex:1 1 auto !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap .mdk-pdfjs-frame,
html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap .mdk-pdf-frame{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
}

@media (max-width:700px){

    html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap{
        width:100% !important;
        min-width:0 !important;
    }

    html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap .mdk-pdfjs-frame,
    html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap .mdk-pdf-frame{
        width:100% !important;
        min-width:0 !important;
    }

}


/* =========================================================
   MD KLIMA — PDF.JS
   FINAL WIDTH CHAIN FIX
   ========================================================= */

html body .mdk-document-modal .mdk-document-window{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    box-sizing:border-box !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap iframe.mdk-pdfjs-frame{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    box-sizing:border-box !important;
}


/* =========================================================
   MD KLIMA — PDF.JS
   FINAL ALIGN FIX
   .mdk-document-viewer musi rozciągać dzieci
   ========================================================= */

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer{
    align-items:stretch !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap{
    align-self:stretch !important;
    width:100% !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap iframe.mdk-pdfjs-frame{
    width:100% !important;
}


/* =========================================================
   MD KLIMA — PDF.JS FINAL LAYOUT
   Pełny dokument w modalu
   ========================================================= */

html body.mdk-document-modal-open{
    overflow:hidden !important;
}

html body .mdk-document-modal .mdk-document-window{
    width:calc(100vw - 48px) !important;
    max-width:1400px !important;
    height:calc(100vh - 48px) !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-pdf-frame-wrap{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    flex:1 1 auto !important;
    align-self:stretch !important;
    display:block !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-pdf-frame-wrap iframe.mdk-pdfjs-frame{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
}

@media (max-width:700px){

    html body .mdk-document-modal .mdk-document-window{
        width:100vw !important;
        height:100dvh !important;
        max-width:none !important;
        border-radius:0 !important;
    }

    html body .mdk-document-modal .mdk-document-window .mdk-document-viewer{
        width:100% !important;
        height:auto !important;
    }

    html body .mdk-document-modal .mdk-document-window .mdk-pdf-frame-wrap{
        width:100% !important;
        height:auto !important;
        flex:1 1 auto !important;
    }

    html body .mdk-document-modal .mdk-document-window .mdk-pdf-frame-wrap iframe.mdk-pdfjs-frame{
        width:100% !important;
        height:100% !important;
    }

}

/* =========================================================
   KONIEC — PDF.JS FINAL LAYOUT
   ========================================================= */


/* =========================================================
   MD KLIMA — PDF.JS
   GRID FINAL — USUNIĘCIE OGRANICZENIA 300PX
   ========================================================= */

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    overflow:hidden !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap{
    grid-column:1 !important;
    grid-row:2 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    display:block !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}

html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap iframe.mdk-pdfjs-frame{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
}

@media (max-width:700px){

    html body .mdk-document-modal .mdk-document-window .mdk-document-viewer{
        width:100vw !important;
        height:auto !important;
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:auto minmax(0,1fr) !important;
    }

    html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap{
        width:auto !important;
        height:auto !important;
        min-height:0 !important;
    }

    html body .mdk-document-modal .mdk-document-window .mdk-document-viewer .mdk-pdf-frame-wrap iframe.mdk-pdfjs-frame{
        width:100% !important;
        height:100% !important;
    }

}

/* =========================================================
   KONIEC — PDF.JS GRID FINAL
   ========================================================= */


/* =========================================================
   MD KLIMA — QUALIFICATION ICONS PREMIUM 1.0
   Animacje istniejących ikon SVG
   ========================================================= */

.why-qualification-icon .mdk-qual-icon {
    width: 76px;
    height: 76px;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 50%;
}

/* =========================================================
   1. UDT — DOKUMENT + ZNAK KONTROLI
   ========================================================= */

.mdk-icon-udt {
    color: #55bfff;
    filter: drop-shadow(0 0 7px rgba(50,180,255,.35));
}

.mdk-icon-udt circle {
    animation: mdkUDTPulse 2.8s ease-in-out infinite;
    transform-origin: 68px 68px;
}

@keyframes mdkUDTPulse {
    0%,100% {
        transform: scale(1);
        opacity: .82;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* =========================================================
   2. F-GAZY — KRYSZTAŁ + CZĄSTECZKI
   ========================================================= */

.mdk-icon-fgas {
    color: #61cfff;
    filter: drop-shadow(0 0 8px rgba(60,190,255,.45));
}

.mdk-icon-fgas .mdk-crystal {
    transform-origin: 50% 50%;
    animation: mdkCrystalFloat 5s ease-in-out infinite;
}

.mdk-icon-fgas .mdk-particle {
    fill: currentColor;
    stroke: none;
    opacity: .45;
}

.mdk-icon-fgas .p1 {
    animation: mdkParticle1 3.8s ease-in-out infinite;
}

.mdk-icon-fgas .p2 {
    animation: mdkParticle2 4.4s ease-in-out infinite;
}

.mdk-icon-fgas .p3 {
    animation: mdkParticle3 4.1s ease-in-out infinite;
}

.mdk-icon-fgas .p4 {
    animation: mdkParticle4 4.7s ease-in-out infinite;
}

@keyframes mdkCrystalFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-2px) rotate(2deg);
    }
}

@keyframes mdkParticle1 {
    0%,100% { transform: translate(0,0); opacity:.35; }
    50% { transform: translate(3px,-5px); opacity:.9; }
}

@keyframes mdkParticle2 {
    0%,100% { transform: translate(0,0); opacity:.35; }
    50% { transform: translate(-4px,4px); opacity:.85; }
}

@keyframes mdkParticle3 {
    0%,100% { transform: translate(0,0); opacity:.3; }
    50% { transform: translate(-3px,-4px); opacity:.8; }
}

@keyframes mdkParticle4 {
    0%,100% { transform: translate(0,0); opacity:.3; }
    50% { transform: translate(4px,3px); opacity:.8; }
}

/* =========================================================
   3. G3 — TECHNICZNY PŁOMIEŃ
   ========================================================= */

.mdk-icon-g3 {
    color: #ff6a35;
    filter: drop-shadow(0 0 8px rgba(255,70,25,.45));
}

.mdk-icon-g3 .mdk-flame {
    fill: rgba(255,72,30,.18);
    stroke: #ff5528;
    transform-origin: 50% 82%;
    animation: mdkFlame 1.8s ease-in-out infinite;
}

.mdk-icon-g3 .mdk-flame-core {
    fill: rgba(255,190,60,.3);
    stroke: #ffc247;
    transform-origin: 50% 82%;
    animation: mdkFlameCore 1.25s ease-in-out infinite;
}

@keyframes mdkFlame {
    0%,100% {
        transform: scaleY(1) translateY(0);
    }
    50% {
        transform: scaleY(1.035) translateY(-1px);
    }
}

@keyframes mdkFlameCore {
    0%,100% {
        transform: scale(.96);
        opacity: .75;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

/* =========================================================
   4. AICADEMY — CERTYFIKAT + HOLOGRAM
   ========================================================= */

.mdk-icon-aicademy {
    color: #9b7cff;
    filter: drop-shadow(0 0 8px rgba(130,90,255,.4));
}

.mdk-icon-aicademy .mdk-scan-line {
    stroke: #d5c9ff;
    stroke-width: 2.5;
    opacity: .2;
    animation: mdkCertificateScan 3.4s ease-in-out infinite;
}

.mdk-icon-aicademy .mdk-ac-mark {
    stroke: #c9b8ff;
    animation: mdkACPulse 2.4s ease-in-out infinite;
}

@keyframes mdkCertificateScan {
    0% {
        transform: translateY(0);
        opacity: .15;
    }
    45% {
        opacity: .9;
    }
    55% {
        opacity: .9;
    }
    100% {
        transform: translateY(48px);
        opacity: .15;
    }
}

@keyframes mdkACPulse {
    0%,100% {
        opacity: .65;
    }
    50% {
        opacity: 1;
    }
}

/* =========================================================
   5. WÓZEK WIDŁOWY — DELIKATNY RUCH WIDEŁ
   ========================================================= */

.mdk-icon-forklift {
    color: #ffb84d;
    filter: drop-shadow(0 0 7px rgba(255,170,55,.35));
}

.mdk-icon-forklift .mdk-fork {
    animation: mdkForkLift 2.8s ease-in-out infinite;
    transform-origin: 66px 64px;
}

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

/* =========================================================
   6. SERWIS KOMPUTEROWY — PŁYNĄCY KOD
   ========================================================= */

.mdk-icon-pc {
    color: #b06cff;
    filter: drop-shadow(0 0 8px rgba(155,70,255,.4));
}

.mdk-icon-pc .mdk-code-line {
    stroke: currentColor;
    transform-box: fill-box;
    transform-origin: center;
}

.mdk-icon-pc .code1 {
    animation: mdkCode1 2.7s ease-in-out infinite;
}

.mdk-icon-pc .code2 {
    animation: mdkCode2 2.7s ease-in-out infinite .35s;
}

.mdk-icon-pc .code3 {
    animation: mdkCode3 2.7s ease-in-out infinite .7s;
}

@keyframes mdkCode1 {
    0%,100% {
        opacity: .35;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(3px);
    }
}

@keyframes mdkCode2 {
    0%,100% {
        opacity: .35;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-3px);
    }
}

@keyframes mdkCode3 {
    0%,100% {
        opacity: .35;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(3px);
    }
}

/* =========================================================
   HOVER — IKONA DELIKATNIE OŻYWA
   ========================================================= */

.why-qualification-card:hover .mdk-qual-icon {
    filter: drop-shadow(0 0 11px currentColor);
    transition: filter .35s ease;
}

/* =========================================================
   MOBILE — MNIEJSZA INTENSYWNOŚĆ
   ========================================================= */

@media (max-width: 700px) {

    .why-qualification-icon .mdk-qual-icon {
        width: 70px;
        height: 70px;
    }

}

/* =========================================================
   MD KLIMA — QUALIFICATION ICONS — COLOR FIX 1.0
   ========================================================= */

/* Wspólna baza */
.why-qualification-icon .mdk-qual-icon {
    display: block !important;
    width: 76px !important;
    height: 76px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* =========================================================
   UDT — NIEBIESKI
   ========================================================= */

.why-qualification-icon .mdk-icon-udt {
    color: #55c8ff !important;
    stroke: #55c8ff !important;
    fill: none !important;
    filter: drop-shadow(0 0 8px rgba(50,190,255,.55)) !important;
}

.why-qualification-icon .mdk-icon-udt circle {
    fill: rgba(85,200,255,.12) !important;
    stroke: #8cddff !important;
}

/* =========================================================
   F-GAZY — LODOWY NIEBIESKI
   ========================================================= */

.why-qualification-icon .mdk-icon-fgas {
    color: #61d8ff !important;
    stroke: #61d8ff !important;
    fill: none !important;
    filter: drop-shadow(0 0 9px rgba(50,200,255,.6)) !important;
}

.why-qualification-icon .mdk-icon-fgas .mdk-crystal {
    fill: rgba(70,205,255,.10) !important;
    stroke: #72ddff !important;
}

.why-qualification-icon .mdk-icon-fgas .mdk-particle {
    fill: #9ceaff !important;
    stroke: none !important;
}

/* =========================================================
   G3 — POMARAŃCZ / CZERWIEŃ
   ========================================================= */

.why-qualification-icon .mdk-icon-g3 {
    color: #ff6338 !important;
    stroke: #ff6338 !important;
    fill: none !important;
    filter: drop-shadow(0 0 10px rgba(255,70,25,.65)) !important;
}

.why-qualification-icon .mdk-icon-g3 .mdk-flame {
    fill: rgba(255,65,25,.20) !important;
    stroke: #ff5128 !important;
}

.why-qualification-icon .mdk-icon-g3 .mdk-flame-core {
    fill: rgba(255,190,55,.40) !important;
    stroke: #ffd05c !important;
}

/* =========================================================
   AICADEMY — FIOLET
   ========================================================= */

.why-qualification-icon .mdk-icon-aicademy {
    color: #a77cff !important;
    stroke: #a77cff !important;
    fill: none !important;
    filter: drop-shadow(0 0 9px rgba(150,90,255,.55)) !important;
}

.why-qualification-icon .mdk-icon-aicademy .mdk-scan-line {
    stroke: #e2d5ff !important;
    fill: none !important;
}

.why-qualification-icon .mdk-icon-aicademy .mdk-ac-mark {
    stroke: #d5c3ff !important;
    fill: none !important;
}

/* =========================================================
   WÓZKI — ZŁOTY / TECHNICZNY
   ========================================================= */

.why-qualification-icon .mdk-icon-forklift {
    color: #ffbd55 !important;
    stroke: #ffbd55 !important;
    fill: none !important;
    filter: drop-shadow(0 0 8px rgba(255,180,60,.5)) !important;
}

.why-qualification-icon .mdk-icon-forklift .mdk-fork {
    stroke: #ffd477 !important;
}

/* =========================================================
   SERWIS KOMPUTEROWY — FIOLET / NEON
   ========================================================= */

.why-qualification-icon .mdk-icon-pc {
    color: #b56cff !important;
    stroke: #b56cff !important;
    fill: none !important;
    filter: drop-shadow(0 0 10px rgba(170,80,255,.6)) !important;
}

.why-qualification-icon .mdk-icon-pc .mdk-code-line {
    stroke: #d49aff !important;
    fill: none !important;
}

/* =========================================================
   HOVER — DELIKATNE WZMOCNIENIE
   ========================================================= */

.why-qualification-card:hover .mdk-qual-icon {
    filter: drop-shadow(0 0 14px currentColor) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .why-qualification-icon .mdk-qual-icon {
        width: 70px !important;
        height: 70px !important;
    }

}


/* =========================================================
   MD KLIMA — QUALIFICATION SVG — FINAL COLOR OVERRIDE
   Naprawa kolorów ikon SVG
   ========================================================= */

body.home .why-qualification-icon .mdk-qual-icon,
body.home .why-qualification-icon .mdk-qual-icon * {
    stroke-width: 2.4;
}

/* UDT — dokument + pieczęć */
body.home .why-qualification-icon .mdk-icon-udt {
    color: #55d8ff !important;
}

body.home .why-qualification-icon .mdk-icon-udt rect,
body.home .why-qualification-icon .mdk-icon-udt path {
    stroke: #55d8ff !important;
    fill: none !important;
}

body.home .why-qualification-icon .mdk-icon-udt circle {
    stroke: #55d8ff !important;
    fill: rgba(85,216,255,.16) !important;
}

/* F-GAZY — kryształ */
body.home .why-qualification-icon .mdk-icon-fgas {
    color: #65ddff !important;
}

body.home .why-qualification-icon .mdk-icon-fgas .mdk-crystal {
    stroke: #65ddff !important;
    fill: rgba(70,205,255,.16) !important;
}

body.home .why-qualification-icon .mdk-icon-fgas > path:not(.mdk-crystal) {
    stroke: #9ceaff !important;
    fill: none !important;
}

body.home .why-qualification-icon .mdk-icon-fgas .mdk-particle {
    stroke: none !important;
    fill: #9ceaff !important;
}

/* G3 — techniczny płomień */
body.home .why-qualification-icon .mdk-icon-g3 {
    color: #ff5a30 !important;
}

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame {
    stroke: #ff4b27 !important;
    fill: rgba(255,65,25,.22) !important;
}

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame-core {
    stroke: #ffd45a !important;
    fill: rgba(255,190,55,.52) !important;
}

/* AICADEMY — certyfikat + AC */
body.home .why-qualification-icon .mdk-icon-aicademy {
    color: #69cfff !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy rect,
body.home .why-qualification-icon .mdk-icon-aicademy > path:not(.mdk-scan-line):not(.mdk-ac-mark) {
    stroke: #69cfff !important;
    fill: none !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-ac-mark {
    stroke: #b56cff !important;
    fill: none !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-scan-line {
    stroke: #bff4ff !important;
    fill: none !important;
}

/* WÓZKI WIDŁOWE */
body.home .why-qualification-icon .mdk-icon-forklift {
    color: #ffb84d !important;
}

body.home .why-qualification-icon .mdk-icon-forklift circle,
body.home .why-qualification-icon .mdk-icon-forklift > path:not(.mdk-fork) {
    stroke: #ffb84d !important;
    fill: none !important;
}

body.home .why-qualification-icon .mdk-icon-forklift .mdk-fork {
    stroke: #ffd36a !important;
    fill: none !important;
}

/* SERWIS KOMPUTEROWY */
body.home .why-qualification-icon .mdk-icon-pc {
    color: #b56cff !important;
}

body.home .why-qualification-icon .mdk-icon-pc rect,
body.home .why-qualification-icon .mdk-icon-pc > path:not(.mdk-code-line) {
    stroke: #b56cff !important;
    fill: none !important;
}

body.home .why-qualification-icon .mdk-icon-pc .mdk-code-line {
    stroke: #6ee7ff !important;
    fill: none !important;
}

/* delikatny neon */
body.home .why-qualification-icon .mdk-icon-udt {
    filter: drop-shadow(0 0 5px rgba(85,216,255,.35));
}

body.home .why-qualification-icon .mdk-icon-fgas {
    filter: drop-shadow(0 0 6px rgba(80,210,255,.38));
}

body.home .why-qualification-icon .mdk-icon-g3 {
    filter: drop-shadow(0 0 6px rgba(255,70,30,.38));
}

body.home .why-qualification-icon .mdk-icon-aicademy {
    filter: drop-shadow(0 0 5px rgba(100,210,255,.32));
}

body.home .why-qualification-icon .mdk-icon-forklift {
    filter: drop-shadow(0 0 5px rgba(255,180,70,.30));
}

body.home .why-qualification-icon .mdk-icon-pc {
    filter: drop-shadow(0 0 6px rgba(180,100,255,.38));
}

/* =========================================================
   KONIEC — FINAL COLOR OVERRIDE
   ========================================================= */

/* =========================================================
   MD KLIMA — QUALIFICATION SVG — BLACK FILL KILLER 2.0
   Usuwamy czarne wypełnienie elementów SVG
   ========================================================= */

/* WSPÓLNA BAZA — wszystkie elementy konstrukcyjne */
body.home .why-qualification-icon .mdk-qual-icon rect,
body.home .why-qualification-icon .mdk-qual-icon > path,
body.home .why-qualification-icon .mdk-qual-icon > circle {
    fill: none !important;
}

/* =========================================================
   UDT
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-udt rect,
body.home .why-qualification-icon .mdk-icon-udt path {
    fill: none !important;
    stroke: #55d8ff !important;
}

body.home .why-qualification-icon .mdk-icon-udt circle {
    fill: rgba(85,216,255,.16) !important;
    stroke: #8cddff !important;
}

/* =========================================================
   F-GAZY
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-fgas .mdk-crystal {
    fill: rgba(70,205,255,.16) !important;
    stroke: #72ddff !important;
}

body.home .why-qualification-icon .mdk-icon-fgas > path:not(.mdk-crystal) {
    fill: none !important;
    stroke: #9ceaff !important;
}

body.home .why-qualification-icon .mdk-icon-fgas .mdk-particle {
    fill: #9ceaff !important;
    stroke: none !important;
}

/* =========================================================
   G3
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame {
    fill: rgba(255,65,25,.20) !important;
    stroke: #ff5128 !important;
}

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame-core {
    fill: rgba(255,190,55,.55) !important;
    stroke: #ffd05c !important;
}

/* =========================================================
   AICADEMY
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-aicademy rect,
body.home .why-qualification-icon .mdk-icon-aicademy > path {
    fill: none !important;
    stroke: #a77cff !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-scan-line {
    fill: none !important;
    stroke: #e2d5ff !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-ac-mark {
    fill: none !important;
    stroke: #d5c3ff !important;
}

/* =========================================================
   WÓZKI
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-forklift circle,
body.home .why-qualification-icon .mdk-icon-forklift > path {
    fill: none !important;
    stroke: #ffbd55 !important;
}

body.home .why-qualification-icon .mdk-icon-forklift .mdk-fork {
    fill: none !important;
    stroke: #ffd477 !important;
}

/* =========================================================
   SERWIS KOMPUTEROWY
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-pc rect,
body.home .why-qualification-icon .mdk-icon-pc > path {
    fill: none !important;
    stroke: #b56cff !important;
}

body.home .why-qualification-icon .mdk-icon-pc .mdk-code-line {
    fill: none !important;
    stroke: #6ee7ff !important;
}

/* =========================================================
   WAŻNE:
   SVG nie może odziedziczyć czarnego fill z innych reguł
   ========================================================= */

body.home .why-qualification-icon .mdk-qual-icon {
    fill: none !important;
    background: transparent !important;
}

body.home .why-qualification-icon .mdk-qual-icon rect,
body.home .why-qualification-icon .mdk-qual-icon path,
body.home .why-qualification-icon .mdk-qual-icon circle {
    background: transparent !important;
}

/* =========================================================
   KONIEC — BLACK FILL KILLER
   ========================================================= */

/* =========================================================
   MD KLIMA — QUALIFICATION ICONS — FINAL VISUAL FIX 2.0
   Wymuszenie widocznych kolorów SVG
   ========================================================= */

body.home .why-qualifications .why-qualification-icon .mdk-qual-icon{
    display:block !important;
    width:76px !important;
    height:76px !important;
    opacity:1 !important;
    visibility:visible !important;
    color:#55d8ff !important;
    fill:none !important;
    stroke:#55d8ff !important;
    stroke-width:2.4 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    filter:drop-shadow(0 0 10px rgba(70,210,255,.65)) !important;
}

/* UDT */
body.home .why-qualifications .mdk-icon-udt,
body.home .why-qualifications .mdk-icon-udt *{
    stroke:#55d8ff !important;
}

body.home .why-qualifications .mdk-icon-udt rect{
    fill:rgba(20,100,150,.18) !important;
    stroke:#55d8ff !important;
}

body.home .why-qualifications .mdk-icon-udt circle{
    fill:rgba(85,216,255,.18) !important;
    stroke:#9ceaff !important;
}

body.home .why-qualifications .mdk-icon-udt path{
    fill:none !important;
    stroke:#55d8ff !important;
}

/* F-GAZY */
body.home .why-qualifications .mdk-icon-fgas{
    color:#61d8ff !important;
    stroke:#61d8ff !important;
}

body.home .why-qualifications .mdk-icon-fgas .mdk-crystal{
    fill:rgba(70,205,255,.18) !important;
    stroke:#72ddff !important;
}

body.home .why-qualifications .mdk-icon-fgas > path:not(.mdk-crystal){
    fill:none !important;
    stroke:#b5f2ff !important;
}

body.home .why-qualifications .mdk-icon-fgas .mdk-particle{
    fill:#b8f3ff !important;
    stroke:none !important;
}

/* G3 */
body.home .why-qualifications .mdk-icon-g3{
    color:#ff6338 !important;
    stroke:#ff6338 !important;
}

body.home .why-qualifications .mdk-icon-g3 .mdk-flame{
    fill:rgba(255,55,20,.28) !important;
    stroke:#ff5128 !important;
}

body.home .why-qualifications .mdk-icon-g3 .mdk-flame-core{
    fill:rgba(255,190,45,.65) !important;
    stroke:#ffd45c !important;
}

/* AICADEMY */
body.home .why-qualifications .mdk-icon-aicademy{
    color:#b184ff !important;
    stroke:#b184ff !important;
}

body.home .why-qualifications .mdk-icon-aicademy rect{
    fill:rgba(130,80,255,.16) !important;
    stroke:#b184ff !important;
}

body.home .why-qualifications .mdk-icon-aicademy > path:not(.mdk-scan-line):not(.mdk-ac-mark){
    fill:none !important;
    stroke:#d4c2ff !important;
}

body.home .why-qualifications .mdk-icon-aicademy .mdk-scan-line{
    fill:none !important;
    stroke:#ffffff !important;
    stroke-width:3 !important;
}

body.home .why-qualifications .mdk-icon-aicademy .mdk-ac-mark{
    fill:none !important;
    stroke:#ffffff !important;
    stroke-width:2.5 !important;
}

/* WÓZKI */
body.home .why-qualifications .mdk-icon-forklift{
    color:#ffc15c !important;
    stroke:#ffc15c !important;
}

body.home .why-qualifications .mdk-icon-forklift circle{
    fill:rgba(255,180,60,.20) !important;
    stroke:#ffd477 !important;
}

body.home .why-qualifications .mdk-icon-forklift > path{
    fill:none !important;
    stroke:#ffc15c !important;
}

body.home .why-qualifications .mdk-icon-forklift .mdk-fork{
    fill:none !important;
    stroke:#ffe09a !important;
    stroke-width:3 !important;
}

/* SERWIS KOMPUTEROWY */
body.home .why-qualifications .mdk-icon-pc{
    color:#b56cff !important;
    stroke:#b56cff !important;
}

body.home .why-qualifications .mdk-icon-pc rect{
    fill:rgba(120,50,220,.16) !important;
    stroke:#c080ff !important;
}

body.home .why-qualifications .mdk-icon-pc > path:not(.mdk-code-line){
    fill:none !important;
    stroke:#c080ff !important;
}

body.home .why-qualifications .mdk-icon-pc .mdk-code-line{
    fill:none !important;
    stroke:#e0b8ff !important;
    stroke-width:2.6 !important;
}

/* WSPÓLNE WZMOCNIENIE */
body.home .why-qualifications .why-qualification-icon{
    opacity:1 !important;
    visibility:visible !important;
}

body.home .why-qualifications .why-qualification-icon svg{
    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================================
   MD KLIMA — QUALIFICATION SVG — FINAL VISUAL FIX 3.0
   Bez czarnych wypełnień — wymuszenie kolorów elementów
   ========================================================= */

body.home .why-qualification-icon svg.mdk-qual-icon {
    display:block !important;
    width:76px !important;
    height:76px !important;
    overflow:visible !important;
    background:transparent !important;
    fill:none !important;
}

/* Wszystkie elementy konstrukcyjne SVG */
body.home .why-qualification-icon svg.mdk-qual-icon rect,
body.home .why-qualification-icon svg.mdk-qual-icon path,
body.home .why-qualification-icon svg.mdk-qual-icon circle {
    fill:none !important;
    stroke-width:2.4 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* =========================================================
   UDT — NIEBIESKI
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-udt {
    color:#55d8ff !important;
    stroke:#55d8ff !important;
    fill:none !important;
    filter:drop-shadow(0 0 7px rgba(85,216,255,.55)) !important;
}

body.home .why-qualification-icon .mdk-icon-udt rect,
body.home .why-qualification-icon .mdk-icon-udt path {
    stroke:#55d8ff !important;
    fill:none !important;
}

body.home .why-qualification-icon .mdk-icon-udt circle {
    stroke:#8cddff !important;
    fill:rgba(85,216,255,.18) !important;
}

/* =========================================================
   F-GAZY — LODOWY NIEBIESKI
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-fgas {
    color:#65ddff !important;
    stroke:#65ddff !important;
    fill:none !important;
    filter:drop-shadow(0 0 8px rgba(80,210,255,.55)) !important;
}

body.home .why-qualification-icon .mdk-icon-fgas .mdk-crystal {
    stroke:#72ddff !important;
    fill:rgba(70,205,255,.18) !important;
}

body.home .why-qualification-icon .mdk-icon-fgas > path:not(.mdk-crystal) {
    stroke:#9ceaff !important;
    fill:none !important;
}

body.home .why-qualification-icon .mdk-icon-fgas .mdk-particle {
    stroke:none !important;
    fill:#9ceaff !important;
}

/* =========================================================
   G3 — PŁOMIEŃ
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-g3 {
    color:#ff6338 !important;
    stroke:#ff6338 !important;
    fill:none !important;
    filter:drop-shadow(0 0 9px rgba(255,70,30,.55)) !important;
}

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame {
    stroke:#ff5128 !important;
    fill:rgba(255,65,25,.22) !important;
}

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame-core {
    stroke:#ffd05c !important;
    fill:rgba(255,190,55,.55) !important;
}

/* =========================================================
   AICADEMY — FIOLET
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-aicademy {
    color:#a77cff !important;
    stroke:#a77cff !important;
    fill:none !important;
    filter:drop-shadow(0 0 8px rgba(150,90,255,.5)) !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy rect,
body.home .why-qualification-icon .mdk-icon-aicademy > path {
    stroke:#a77cff !important;
    fill:none !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-scan-line {
    stroke:#e2d5ff !important;
    fill:none !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-ac-mark {
    stroke:#d5c3ff !important;
    fill:none !important;
}

/* =========================================================
   WÓZEK — ZŁOTY
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-forklift {
    color:#ffbd55 !important;
    stroke:#ffbd55 !important;
    fill:none !important;
    filter:drop-shadow(0 0 7px rgba(255,180,60,.5)) !important;
}

body.home .why-qualification-icon .mdk-icon-forklift circle,
body.home .why-qualification-icon .mdk-icon-forklift > path {
    stroke:#ffbd55 !important;
    fill:none !important;
}

body.home .why-qualification-icon .mdk-icon-forklift .mdk-fork {
    stroke:#ffd477 !important;
    fill:none !important;
}

/* =========================================================
   SERWIS PC — FIOLET + CYJANOWY KOD
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-pc {
    color:#b56cff !important;
    stroke:#b56cff !important;
    fill:none !important;
    filter:drop-shadow(0 0 8px rgba(180,100,255,.55)) !important;
}

body.home .why-qualification-icon .mdk-icon-pc rect,
body.home .why-qualification-icon .mdk-icon-pc > path {
    stroke:#b56cff !important;
    fill:none !important;
}

body.home .why-qualification-icon .mdk-icon-pc .mdk-code-line {
    stroke:#6ee7ff !important;
    fill:none !important;
}

/* =========================================================
   HOVER — DELIKATNE ROZŚWIETLENIE
   ========================================================= */

body.home .why-qualification-card:hover .why-qualification-icon svg.mdk-qual-icon {
    filter:drop-shadow(0 0 13px currentColor) !important;
    transition:filter .4s ease !important;
}


/* =========================================================
   MD KLIMA — QUALIFICATION ICONS PREMIUM VISUAL 4.0
   Pełniejsze / bardziej przestrzenne / neonowe SVG
   Nie zmienia HTML ani animacji
   ========================================================= */

/* WSPÓLNA BAZA */
body.home .why-qualification-icon svg.mdk-qual-icon {
    width:76px !important;
    height:76px !important;
    display:block !important;
    overflow:visible !important;
    background:transparent !important;
}

/* =========================================================
   UDT — PREMIUM BLUE DOCUMENT
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-udt {
    color:#62d9ff !important;
    filter:
        drop-shadow(0 0 4px rgba(80,210,255,.65))
        drop-shadow(0 0 12px rgba(50,170,255,.32)) !important;
}

body.home .why-qualification-icon .mdk-icon-udt rect {
    fill:rgba(45,150,210,.12) !important;
    stroke:#69dcff !important;
    stroke-width:2.8 !important;
}

body.home .why-qualification-icon .mdk-icon-udt rect + path {
    stroke:#b9f1ff !important;
    stroke-width:2.7 !important;
}

body.home .why-qualification-icon .mdk-icon-udt circle {
    fill:rgba(50,190,255,.20) !important;
    stroke:#9ceaff !important;
    stroke-width:2.8 !important;
}

body.home .why-qualification-icon .mdk-icon-udt circle + path {
    stroke:#e2faff !important;
    stroke-width:3 !important;
}

/* =========================================================
   F-GAZY — SZKLANY KRYSZTAŁ
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-fgas {
    color:#69ddff !important;
    filter:
        drop-shadow(0 0 5px rgba(70,215,255,.75))
        drop-shadow(0 0 14px rgba(40,180,255,.35)) !important;
}

body.home .why-qualification-icon .mdk-icon-fgas .mdk-crystal {
    fill:rgba(45,190,245,.20) !important;
    stroke:#9aeaff !important;
    stroke-width:2.8 !important;
}

body.home .why-qualification-icon .mdk-icon-fgas > path:not(.mdk-crystal) {
    stroke:#c5f5ff !important;
    stroke-width:2.4 !important;
}

body.home .why-qualification-icon .mdk-icon-fgas .mdk-particle {
    fill:#b9f4ff !important;
    opacity:.9 !important;
    filter:drop-shadow(0 0 4px #65dcff) !important;
}

/* =========================================================
   G3 — PEŁNIEJSZY PŁOMIEŃ
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-g3 {
    color:#ff6838 !important;
    filter:
        drop-shadow(0 0 5px rgba(255,80,30,.75))
        drop-shadow(0 0 15px rgba(255,55,20,.35)) !important;
}

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame {
    fill:rgba(255,55,20,.28) !important;
    stroke:#ff5a2c !important;
    stroke-width:2.8 !important;
}

body.home .why-qualification-icon .mdk-icon-g3 .mdk-flame-core {
    fill:rgba(255,190,45,.72) !important;
    stroke:#ffe27b !important;
    stroke-width:2.5 !important;
    filter:drop-shadow(0 0 5px rgba(255,190,50,.7)) !important;
}

/* =========================================================
   AICADEMY — PREMIUM HOLOGRAM
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-aicademy {
    color:#ad82ff !important;
    filter:
        drop-shadow(0 0 5px rgba(155,95,255,.7))
        drop-shadow(0 0 14px rgba(120,70,255,.35)) !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy rect {
    fill:rgba(125,70,220,.14) !important;
    stroke:#b994ff !important;
    stroke-width:2.8 !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy rect + path {
    stroke:#dbc8ff !important;
    stroke-width:2.5 !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-ac-mark {
    stroke:#f0e7ff !important;
    stroke-width:3 !important;
    filter:drop-shadow(0 0 4px rgba(190,140,255,.8)) !important;
}

body.home .why-qualification-icon .mdk-icon-aicademy .mdk-scan-line {
    stroke:#8eeaff !important;
    stroke-width:3 !important;
    opacity:.85 !important;
    filter:drop-shadow(0 0 5px rgba(80,220,255,.8)) !important;
}

/* =========================================================
   WÓZKI — SOLID TECH GOLD
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-forklift {
    color:#ffc45c !important;
    filter:
        drop-shadow(0 0 4px rgba(255,190,70,.7))
        drop-shadow(0 0 12px rgba(255,165,40,.3)) !important;
}

body.home .why-qualification-icon .mdk-icon-forklift circle {
    fill:rgba(255,185,60,.16) !important;
    stroke:#ffd477 !important;
    stroke-width:3 !important;
}

body.home .why-qualification-icon .mdk-icon-forklift > path {
    stroke:#ffc45c !important;
    stroke-width:3 !important;
}

body.home .why-qualification-icon .mdk-icon-forklift .mdk-fork {
    stroke:#ffe49a !important;
    stroke-width:3.4 !important;
    filter:drop-shadow(0 0 3px rgba(255,210,100,.7)) !important;
}

/* =========================================================
   SERWIS PC — PREMIUM NEON MONITOR
   ========================================================= */

body.home .why-qualification-icon .mdk-icon-pc {
    color:#b66cff !important;
    filter:
        drop-shadow(0 0 5px rgba(175,90,255,.75))
        drop-shadow(0 0 15px rgba(145,65,255,.35)) !important;
}

body.home .why-qualification-icon .mdk-icon-pc rect {
    fill:rgba(130,65,220,.14) !important;
    stroke:#c18aff !important;
    stroke-width:2.8 !important;
}

body.home .why-qualification-icon .mdk-icon-pc > path:not(.mdk-code-line) {
    stroke:#d09cff !important;
    stroke-width:2.8 !important;
}

body.home .why-qualification-icon .mdk-icon-pc .mdk-code-line {
    stroke:#73e9ff !important;
    stroke-width:2.8 !important;
    filter:drop-shadow(0 0 4px rgba(80,220,255,.85)) !important;
}

/* =========================================================
   WSPÓLNY EFEKT — LEKKIE ŻYWE ŚWIATŁO
   ========================================================= */

body.home .why-qualification-card:hover .why-qualification-icon svg.mdk-qual-icon {
    transform:scale(1.045) !important;
    transition:transform .35s ease, filter .35s ease !important;
}

body.home .why-qualification-icon svg.mdk-qual-icon {
    transition:filter .35s ease, transform .35s ease !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

    body.home .why-qualification-icon svg.mdk-qual-icon {
        width:70px !important;
        height:70px !important;
    }

}


/* =========================================================
   MD KLIMA — FINAL REALIZACJE + MOBILE 2026
   NIE ZMIENIA IKON ❄️ 🔥 💻
   ========================================================= */

body.home .projects-section .projects-grid{
    gap:24px;
}

body.home .projects-section .project-card{
    min-height:190px;
    border-radius:18px;
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease;
}

body.home .projects-section .project-card:hover{
    transform:translateY(-6px);
}

body.home .projects-section .project-card .project-image{
    width:74px;
    height:74px;
    min-width:74px;
    min-height:74px;
}

body.home .projects-section .project-card h3{
    font-size:20px;
    line-height:1.25;
}

body.home .projects-section .project-card p{
    font-size:15px;
    line-height:1.55;
}

/* MOBILE */

@media (max-width:767px){

    body.home .projects-section{
        padding-left:16px;
        padding-right:16px;
    }

    body.home .projects-section .projects-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    body.home .projects-section .project-card{
        min-height:180px;
    }

    body.home .projects-section .project-card .project-image{
        width:74px;
        height:74px;
        min-width:74px;
        min-height:74px;
    }

    body.home .projects-section .project-card h3{
        font-size:19px;
    }

    body.home .projects-section .project-card p{
        font-size:15px;
    }

}

/* BARDZO MAŁE TELEFONY */

@media (max-width:420px){

    body.home .projects-section{
        padding-left:12px;
        padding-right:12px;
    }

    body.home .projects-section .project-card{
        min-height:175px;
    }

}


/* =========================================================
   MD KLIMA — REALIZACJE PREMIUM FINAL
   IKONY ❄️ 🔥 💻 — BEZ ZMIAN
   ========================================================= */

body.home .projects-section .project-card{
    position:relative;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.055),
        rgba(20,30,45,.72)
    );
    border:1px solid rgba(117,229,255,.16);
    box-shadow:
        0 12px 35px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.04);
}

body.home .projects-section .project-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 18px 45px rgba(0,0,0,.38),
        0 0 24px rgba(70,200,255,.12),
        inset 0 1px 0 rgba(255,255,255,.07);
}

body.home .projects-section .project-card .project-content{
    position:relative;
    z-index:2;
}

body.home .projects-section .project-card h3{
    letter-spacing:.1px;
}

body.home .projects-section .project-card p{
    opacity:.88;
}

body.home .projects-section .project-image{
    position:relative;
    z-index:2;
    transition:transform .35s ease, filter .35s ease;
}

body.home .projects-section .project-card:hover .project-image{
    transform:scale(1.04);
}

@media (max-width:767px){

    body.home .projects-section .project-card:hover{
        transform:none;
    }

    body.home .projects-section .project-card:hover .project-image{
        transform:none;
    }

}


/* =========================================================
   MD KLIMA — FINAL PREMIUM REALIZACJE + MOBILE
   2026-08-30
   IKONY I ANIMACJE — BEZ ZMIAN
   ========================================================= */

/* KARTY — PREMIUM */

body.home .projects-section .project-card{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* DELIKATNY EFEKT GLOW */

body.home .projects-section .project-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:18px;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
    box-shadow:inset 0 0 28px rgba(80,170,255,.10);
}

body.home .projects-section .project-card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 35px rgba(0,0,0,.30);
}

body.home .projects-section .project-card:hover::after{
    opacity:1;
}

/* TREŚĆ KART */

body.home .projects-section .project-card h3{
    position:relative;
    z-index:2;
    margin-bottom:8px;
    font-size:20px;
    line-height:1.25;
}

body.home .projects-section .project-card p{
    position:relative;
    z-index:2;
    font-size:15px;
    line-height:1.55;
}

/* IKONY — NIE ZMIENIAMY ICH WYGLĄDU */

body.home .projects-section .project-card .project-image{
    position:relative;
    z-index:2;
    width:74px;
    height:74px;
    min-width:74px;
    min-height:74px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    body.home .projects-section{
        padding-left:16px;
        padding-right:16px;
    }

    body.home .projects-section .projects-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    body.home .projects-section .project-card{
        width:100%;
        min-height:180px;
        border-radius:16px;
    }

    body.home .projects-section .project-card .project-image{
        width:74px;
        height:74px;
        min-width:74px;
        min-height:74px;
    }

    body.home .projects-section .project-card h3{
        font-size:19px;
        line-height:1.3;
    }

    body.home .projects-section .project-card p{
        font-size:15px;
        line-height:1.5;
    }

}


/* =========================================================
   BARDZO MAŁE TELEFONY
   ========================================================= */

@media (max-width:420px){

    body.home .projects-section{
        padding-left:12px;
        padding-right:12px;
    }

    body.home .projects-section .project-card{
        min-height:175px;
    }

    body.home .projects-section .project-card h3{
        font-size:18px;
    }

    body.home .projects-section .project-card p{
        font-size:14px;
    }

}


/* =========================================================
   MD KLIMA — FAQ PREMIUM FINAL
   2026-08-30
   TREŚĆ I JS — BEZ ZMIAN
   ========================================================= */

body.home .faq-section{
    position:relative;
}

body.home .faq-section .faq-list{
    max-width:900px;
    margin:0 auto;
}

body.home .faq-section .faq-item{
    position:relative;
    margin-bottom:12px;
    border-radius:16px;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

body.home .faq-section .faq-item:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0,0,0,.20);
}

body.home .faq-section .faq-question{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 20px;
    text-align:left;
    cursor:pointer;
    font-size:16px;
    line-height:1.4;
}

body.home .faq-section .faq-question span{
    flex:0 0 auto;
    font-size:25px;
    line-height:1;
    transition:transform .3s ease;
}

body.home .faq-section .faq-item.active .faq-question span{
    transform:rotate(45deg);
}

body.home .faq-section .faq-answer{
    padding:0 20px;
}

body.home .faq-section .faq-answer p{
    font-size:15px;
    line-height:1.6;
}

/* MOBILE */

@media (max-width:767px){

    body.home .faq-section{
        padding-left:16px;
        padding-right:16px;
    }

    body.home .faq-section .faq-question{
        min-height:60px;
        padding:15px 16px;
        font-size:15px;
    }

    body.home .faq-section .faq-answer{
        padding-left:16px;
        padding-right:16px;
    }

    body.home .faq-section .faq-answer p{
        font-size:15px;
        line-height:1.55;
    }

}

/* BARDZO MAŁE TELEFONY */

@media (max-width:420px){

    body.home .faq-section{
        padding-left:12px;
        padding-right:12px;
    }

    body.home .faq-section .faq-question{
        font-size:14px;
        gap:10px;
    }

}


/* =========================================================
   MD KLIMA — OPINIE — COMPACT PREMIUM FINAL
   Mniejsze i bardziej zwarte karty
   ========================================================= */

body.home .reviews-section .reviews-grid{
    gap:18px;
}

body.home .reviews-section .review-card{
    min-height:0;
    padding:22px 22px 20px;
    border-radius:16px;
}

body.home .reviews-section .review-card .stars{
    font-size:18px;
    line-height:1;
    margin-bottom:12px;
}

body.home .reviews-section .review-card p{
    font-size:14px;
    line-height:1.5;
    margin:0 0 12px;
}

body.home .reviews-section .review-card strong{
    font-size:13px;
    line-height:1.3;
}

/* MOBILE */

@media (max-width:767px){

    body.home .reviews-section{
        padding-left:16px;
        padding-right:16px;
    }

    body.home .reviews-section .reviews-grid{
        gap:12px;
    }

    body.home .reviews-section .review-card{
        padding:18px 18px 16px;
        border-radius:14px;
    }

    body.home .reviews-section .review-card .stars{
        font-size:17px;
        margin-bottom:9px;
    }

    body.home .reviews-section .review-card p{
        font-size:14px;
        line-height:1.45;
        margin-bottom:10px;
    }

    body.home .reviews-section .review-card strong{
        font-size:12px;
    }

}

@media (max-width:420px){

    body.home .reviews-section{
        padding-left:12px;
        padding-right:12px;
    }

    body.home .reviews-section .review-card{
        padding:16px;
    }

}


/* =========================================================
   MD KLIMA — REALIZACJE — PREMIUM FINAL
   TYLKO WARSTWA WIZUALNA KART
   IKONY I ANIMACJE — BEZ ZMIAN
   ========================================================= */

body.home .projects-section .project-card{
    position:relative;
    isolation:isolate;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.018)
    );
    box-shadow:
        0 12px 30px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.045);
}

body.home .projects-section .project-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.07),
            transparent 35%
        );
    opacity:.45;
    z-index:-1;
}

body.home .projects-section .project-card::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
    box-shadow:
        0 0 24px rgba(0,170,255,.18),
        inset 0 0 18px rgba(0,170,255,.035);
}

body.home .projects-section .project-card:hover{
    transform:translateY(-5px);
    border-color:rgba(0,170,255,.24);
    box-shadow:
        0 18px 38px rgba(0,0,0,.28),
        0 0 22px rgba(0,170,255,.10),
        inset 0 1px 0 rgba(255,255,255,.07);
}

body.home .projects-section .project-card:hover::after{
    opacity:1;
}

body.home .projects-section .project-card .project-content{
    position:relative;
    z-index:2;
}

body.home .projects-section .project-card h3{
    letter-spacing:.15px;
}

body.home .projects-section .project-card p{
    opacity:.86;
}

/* KOLORY POŚWIATY DOPASOWANE DO KART */

body.home .projects-section .project-card:nth-child(1):hover{
    border-color:rgba(0,170,255,.32);
    box-shadow:
        0 18px 38px rgba(0,0,0,.28),
        0 0 26px rgba(0,170,255,.14);
}

body.home .projects-section .project-card:nth-child(2):hover{
    border-color:rgba(255,105,35,.30);
    box-shadow:
        0 18px 38px rgba(0,0,0,.28),
        0 0 26px rgba(255,105,35,.13);
}

body.home .projects-section .project-card:nth-child(3):hover{
    border-color:rgba(150,90,255,.30);
    box-shadow:
        0 18px 38px rgba(0,0,0,.28),
        0 0 26px rgba(150,90,255,.13);
}

/* MOBILE — BEZ PRZESADNEGO POWIĘKSZANIA */

@media (max-width:767px){

    body.home .projects-section .project-card:hover{
        transform:translateY(-3px);
    }

}


/* =========================================================
   MD KLIMA — QUALIFICATIONS / GLOBAL EFFECTS VISIBILITY
   Efekty globalne widoczne również nad sekcją kwalifikacji
   Nie zmienia ikon ani ich animacji
   ========================================================= */

body.home .why-qualifications{
    position:relative;
    z-index:1;
    isolation:auto;
}

body.home .why-qualifications .container{
    position:relative;
    z-index:3;
}

body.home .why-qualification-card{
    position:relative;
    z-index:4;
}

body.home .why-qualification-icon{
    position:relative;
    z-index:5;
}

body.home .why-qualification-card,
body.home .why-qualification-icon,
body.home .why-qualification-icon svg{
    transform-style:preserve-3d;
}

#mdk-premium-wow,
#mdk-aurora-field{
    pointer-events:none !important;
}


/* =========================================================
   MD KLIMA — KWALIFIKACJE — PRZEPUŚĆ GLOBALNE EFEKTY
   2026-08-30
   NIE ZMIENIA SVG / IKON / JS
   ========================================================= */

/* Sekcja pozostaje przezroczysta dla canvasów efektów */
body.home .why-qualifications{
    position:relative;
    isolation:auto !important;
    z-index:auto !important;
}

/* Karty nie tworzą własnej bariery dla efektów */
body.home .why-qualifications .why-qualification-card{
    position:relative;
    z-index:1;
    overflow:visible !important;
}

/* Efekty globalne mają móc przechodzić wizualnie nad sekcją */
body.home #mdk-global-atmosphere,
body.home #mdk-premium-wow,
body.home #mdk-aurora-field,
body.home #mdk-energy-flash{
    pointer-events:none !important;
}

/* Ikony i tekst nadal pozostają czytelne */
body.home .why-qualifications .why-qualification-icon,
body.home .why-qualifications .why-qualification-icon svg,
body.home .why-qualifications .why-qualification-card h3,
body.home .why-qualifications .why-qualification-card p,
body.home .why-qualifications .why-qualification-card a{
    position:relative;
    z-index:2;
}


/* =========================================================
   MD KLIMA — QUALIFICATIONS — GLOBAL EFFECTS FINAL Z-INDEX
   2026-08-30
   TYLKO WARSTWA — BEZ ZMIAN SVG / JS / IKON
   ========================================================= */

/* CANVASY GLOBALNYCH EFEKTÓW NAD SEKCJĄ */
body.home #mdk-global-atmosphere{
    position:fixed !important;
    z-index:9000 !important;
    pointer-events:none !important;
}

body.home #mdk-premium-wow{
    position:fixed !important;
    z-index:9001 !important;
    pointer-events:none !important;
}

body.home #mdk-aurora-field{
    position:fixed !important;
    z-index:8999 !important;
    pointer-events:none !important;
}

body.home #mdk-energy-flash{
    position:fixed !important;
    z-index:9002 !important;
    pointer-events:none !important;
}

/* SEKCJA NIE MOŻE TWORZYĆ WŁASNEGO KONTEKSTU NAD CANVASAMI */
body.home .why-qualifications{
    position:relative !important;
    z-index:auto !important;
    isolation:auto !important;
}

/* KARTY POZOSTAJĄ CZYTELNE */
body.home .why-qualifications .why-qualification-card{
    position:relative !important;
    z-index:auto !important;
}

/* TREŚĆ I IKONY NAD TŁEM KART */
body.home .why-qualifications .why-qualification-icon,
body.home .why-qualifications .why-qualification-icon svg,
body.home .why-qualifications .why-qualification-card h3,
body.home .why-qualifications .why-qualification-card p,
body.home .why-qualifications .why-qualification-card a{
    position:relative !important;
    z-index:2 !important;
}

/* =========================================================
   MD KLIMA - NOWY FORMULARZ KONTAKTOWY
   Wersja: 2026-09-13
   ========================================================= */

.contact-form-box {
    position: relative;
}

.mdk-form {
    width: 100%;
}

.mdk-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* ---------- ETYKIETY ---------- */

.mdk-form label {
    display: block;
    margin: 0 0 8px;
    color: #eaf4ff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.mdk-form label small {
    display: block;
    margin-top: 4px;
    color: rgba(220, 235, 250, .62);
    font-size: 12px;
    font-weight: 400;
}

.mdk-form .mdk-required {
    color: #55b8ff;
    margin-left: 3px;
}

/* ---------- SIATKA PÓL ---------- */

.mdk-form .mdk-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.mdk-form .mdk-form-grid.mdk-one-column {
    grid-template-columns: 1fr;
}

.mdk-form .mdk-field {
    min-width: 0;
}

.mdk-form .mdk-field-full {
    grid-column: 1 / -1;
}

/* ---------- INPUT / SELECT / TEXTAREA ---------- */

.mdk-form input[type="text"],
.mdk-form input[type="email"],
.mdk-form input[type="tel"],
.mdk-form input[type="number"],
.mdk-form input[type="file"],
.mdk-form select,
.mdk-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(100, 170, 230, .22);
    border-radius: 12px;
    background: rgba(7, 24, 43, .72);
    color: #f3f8ff;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    outline: none;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.mdk-form input[type="text"],
.mdk-form input[type="email"],
.mdk-form input[type="tel"],
.mdk-form input[type="number"],
.mdk-form select {
    min-height: 48px;
}

.mdk-form textarea {
    min-height: 125px;
    resize: vertical;
}

.mdk-form input::placeholder,
.mdk-form textarea::placeholder {
    color: rgba(220, 235, 250, .42);
}

.mdk-form input:hover,
.mdk-form select:hover,
.mdk-form textarea:hover {
    border-color: rgba(80, 175, 245, .40);
    background: rgba(8, 28, 50, .82);
}

.mdk-form input:focus,
.mdk-form select:focus,
.mdk-form textarea:focus {
    border-color: rgba(69, 180, 255, .85);
    background: rgba(8, 30, 54, .92);
    box-shadow:
        0 0 0 3px rgba(45, 165, 245, .10),
        0 8px 28px rgba(0, 0, 0, .16);
}

.mdk-form select {
    cursor: pointer;
}

/* ---------- NAGŁÓWKI SEKCJI ---------- */

.mdk-form .mdk-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(76, 174, 240, .18);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(25, 101, 157, .16),
            rgba(5, 25, 45, .42)
        );
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.mdk-form .mdk-section-title:first-child {
    margin-top: 0;
}

.mdk-form .mdk-section-title-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(53, 174, 246, .14);
    border: 1px solid rgba(82, 190, 255, .20);
    font-size: 18px;
}

.mdk-form .mdk-section-description {
    margin: -8px 0 18px;
    color: rgba(220, 235, 250, .65);
    font-size: 13px;
    line-height: 1.55;
}

/* ---------- WYBÓR BRANŻY ---------- */

.mdk-form .mdk-branch-wrap {
    margin: 0 0 24px;
}

.mdk-form .mdk-branch-label {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 15px;
}

.mdk-form select[name="branch"] {
    min-height: 54px;
    border-color: rgba(60, 180, 250, .35);
    background:
        linear-gradient(
            135deg,
            rgba(13, 49, 77, .95),
            rgba(7, 28, 49, .95)
        );
    font-size: 15px;
    font-weight: 600;
}

/* ---------- SEKCJE BRANŻOWE ---------- */

.mdk-form .mdk-dynamic-section {
    position: relative;
    padding: 20px;
    margin: 0 0 22px;
    border: 1px solid rgba(78, 174, 235, .18);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(8, 31, 53, .64),
            rgba(4, 19, 35, .58)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 35px rgba(0,0,0,.12);
}

.mdk-form .mdk-dynamic-section[hidden] {
    display: none !important;
}

/* ---------- PODSEKCJE ---------- */

.mdk-form .mdk-subsection {
    margin: 22px 0 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(120, 180, 220, .10);
}

.mdk-form .mdk-subsection:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.mdk-form .mdk-subsection-title {
    margin: 0 0 14px;
    color: #8ed4ff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---------- INFORMACJE ---------- */

.mdk-form .mdk-form-help,
.mdk-form .mdk-help,
.mdk-form .description {
    display: block;
    margin-top: 7px;
    color: rgba(205, 225, 242, .58);
    font-size: 12px;
    line-height: 1.5;
}

.mdk-form .mdk-info-box {
    margin: 16px 0;
    padding: 13px 15px;
    border-left: 3px solid rgba(69, 180, 255, .65);
    border-radius: 0 10px 10px 0;
    background: rgba(35, 130, 190, .08);
    color: rgba(225, 239, 250, .72);
    font-size: 13px;
    line-height: 1.55;
}

/* ---------- CHECKBOXY ---------- */

.mdk-form input[type="checkbox"],
.mdk-form input[type="radio"] {
    width: auto;
    margin-right: 8px;
    accent-color: #32a9ef;
}

.mdk-form .mdk-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 8px 0 18px;
}

.mdk-form .mdk-check-item {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(100, 170, 220, .16);
    border-radius: 10px;
    background: rgba(8, 28, 48, .50);
    color: rgba(235, 245, 255, .78);
    font-size: 13px;
    cursor: pointer;
}

/* ---------- UPLOAD ZDJĘĆ ---------- */

.mdk-form .mdk-photo-upload {
    position: relative;
    margin-top: 8px;
    padding: 20px;
    border: 1px dashed rgba(71, 181, 247, .38);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(20, 107, 161, .08),
            rgba(4, 24, 42, .32)
        );
    text-align: center;
}

.mdk-form .mdk-photo-upload:hover {
    border-color: rgba(71, 181, 247, .65);
}

.mdk-form .mdk-photo-upload input[type="file"] {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 10px;
    border: 1px solid rgba(100, 170, 220, .18);
    border-radius: 10px;
    background: rgba(3, 17, 30, .52);
    cursor: pointer;
    text-align: left;
}

.mdk-form .mdk-photo-upload input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 14px;
    border: 1px solid rgba(74, 184, 247, .35);
    border-radius: 9px;
    background: rgba(35, 137, 195, .16);
    color: #dff3ff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.mdk-form .mdk-photo-icon {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
    line-height: 1;
}

.mdk-form .mdk-photo-title {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.mdk-form .mdk-photo-description {
    display: block;
    margin-bottom: 13px;
    color: rgba(210, 230, 245, .58);
    font-size: 12px;
    line-height: 1.5;
}

.mdk-form #mdk-photo-info {
    margin-top: 10px;
    color: #7ecfff;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.mdk-form #mdk-photo-list {
    margin-top: 8px;
    color: rgba(220, 235, 250, .65);
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
}

.mdk-form #mdk-photo-list div {
    padding: 4px 0;
    border-bottom: 1px solid rgba(120, 180, 220, .07);
}

/* ---------- PRZYCISK ---------- */

.mdk-form button.button {
    min-height: 52px;
    margin-top: 8px;
    padding: 13px 26px;
    border: 1px solid rgba(86, 193, 255, .40);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #087fbe,
            #1263a1
        );
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow:
        0 8px 24px rgba(0, 100, 170, .22),
        inset 0 1px 0 rgba(255,255,255,.12);
    cursor: pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.mdk-form button.button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 12px 30px rgba(0, 120, 200, .30),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.mdk-form button.button:active {
    transform: translateY(0);
}

/* ---------- HONEYPOT ---------- */

.mdk-form input[name="website"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

    .mdk-form .mdk-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }

    .mdk-form .mdk-field-full {
        grid-column: auto;
    }

    .mdk-form .mdk-dynamic-section {
        padding: 15px;
        border-radius: 13px;
    }

    .mdk-form .mdk-section-title {
        padding: 12px 13px;
        font-size: 15px;
    }

    .mdk-form .mdk-section-title-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .mdk-form input[type="text"],
    .mdk-form input[type="email"],
    .mdk-form input[type="tel"],
    .mdk-form input[type="number"],
    .mdk-form select,
    .mdk-form textarea {
        font-size: 16px;
    }

    .mdk-form .mdk-photo-upload {
        padding: 15px;
    }

    .mdk-form button.button {
        width: 100%;
    }
}

@media (max-width: 420px) {

    .mdk-form .mdk-dynamic-section {
        padding: 12px;
    }

    .mdk-form .mdk-section-title {
        margin-top: 22px;
    }

    .mdk-form .mdk-photo-upload input[type="file"] {
        padding: 8px;
    }
}


/* =========================================================
   MD KLIMA — FORMULARZ KONTAKTOWY V2
   TYLKO #mdk-contact-form
   ========================================================= */

#mdk-contact-form {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px;
    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(10, 24, 43, 0.98),
            rgba(7, 18, 34, 0.98)
        );

    border: 1px solid rgba(62, 158, 255, 0.22);
    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.035);
}

/* =========================================================
   UKŁAD PÓL
   ========================================================= */

#mdk-contact-form .mdk-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
    margin-bottom: 24px;
}

#mdk-contact-form .mdk-form-grid.mdk-one-column {
    grid-template-columns: 1fr;
}

#mdk-contact-form .mdk-field {
    min-width: 0;
}

#mdk-contact-form .mdk-field-full {
    grid-column: 1 / -1;
}

/* =========================================================
   LABEL
   ========================================================= */

#mdk-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 9px;

    color: #f3f8ff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

#mdk-contact-form label > span,
#mdk-contact-form .mdk-label {
    color: #eaf4ff;
    font-size: 14px;
    font-weight: 700;
}

/* =========================================================
   POLA TEKSTOWE
   ========================================================= */

#mdk-contact-form input[type="text"],
#mdk-contact-form input[type="email"],
#mdk-contact-form input[type="tel"],
#mdk-contact-form input[type="number"],
#mdk-contact-form select,
#mdk-contact-form textarea {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;

    padding: 14px 16px;

    color: #f7fbff;
    background: rgba(3, 12, 25, 0.78);

    border: 1px solid rgba(101, 174, 255, 0.25);
    border-radius: 12px;

    outline: none;

    font-size: 15px;
    line-height: 1.45;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#mdk-contact-form textarea {
    min-height: 145px;
    resize: vertical;
}

#mdk-contact-form input::placeholder,
#mdk-contact-form textarea::placeholder {
    color: rgba(220, 235, 250, 0.48);
}

#mdk-contact-form input:hover,
#mdk-contact-form select:hover,
#mdk-contact-form textarea:hover {
    border-color: rgba(76, 165, 255, 0.48);
    background: rgba(5, 16, 31, 0.92);
}

#mdk-contact-form input:focus,
#mdk-contact-form select:focus,
#mdk-contact-form textarea:focus {
    border-color: rgba(71, 166, 255, 0.95);

    box-shadow:
        0 0 0 3px rgba(38, 137, 230, 0.13),
        0 0 18px rgba(38, 137, 230, 0.10);

    background: rgba(4, 17, 33, 0.98);
}

/* =========================================================
   BRANŻA — NAJWAŻNIEJSZY WYBÓR
   ========================================================= */

#mdk-contact-form .mdk-branch-selector {
    margin-bottom: 30px;
    padding: 22px 24px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(19, 65, 108, 0.28),
            rgba(6, 24, 44, 0.48)
        );

    border: 1px solid rgba(67, 166, 255, 0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025);
}

#mdk-contact-form .mdk-branch-selector label {
    font-size: 16px;
}

#mdk-contact-form .mdk-branch-selector select {
    min-height: 58px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 13px;
}

/* =========================================================
   SEKCJE DYNAMICZNE
   ========================================================= */

#mdk-contact-form .mdk-dynamic-section {
    margin-top: 30px;
    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 31, 53, 0.86),
            rgba(5, 18, 34, 0.86)
        );

    border: 1px solid rgba(71, 155, 230, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025);
}

#mdk-contact-form .mdk-dynamic-section[hidden] {
    display: none !important;
}

/* =========================================================
   NAGŁÓWKI SEKCJI
   ========================================================= */

#mdk-contact-form .mdk-section-title {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
}

#mdk-contact-form .mdk-section-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border-radius: 12px;

    background: rgba(38, 142, 236, 0.14);
    border: 1px solid rgba(70, 169, 255, 0.25);

    font-size: 21px;
}

#mdk-contact-form .mdk-section-description {
    margin: 0 0 25px;

    color: rgba(220, 235, 250, 0.68);

    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
   PODSEKCJE
   ========================================================= */

#mdk-contact-form .mdk-subsection {
    margin-top: 28px;
    padding-top: 24px;

    border-top: 1px solid rgba(94, 165, 225, 0.13);
}

#mdk-contact-form .mdk-subsection:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#mdk-contact-form .mdk-subsection-title {
    margin: 0 0 17px;

    color: #72bdff;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* =========================================================
   POMOCNICZE OPISY
   ========================================================= */

#mdk-contact-form .mdk-form-help {
    margin-top: 7px;

    color: rgba(211, 229, 246, 0.52);

    font-size: 12px;
    line-height: 1.5;
}

/* =========================================================
   POLA WYBORU / SELECT
   ========================================================= */

#mdk-contact-form select {
    appearance: auto;
    cursor: pointer;
}

#mdk-contact-form select option {
    color: #111827;
    background: #ffffff;
}

/* =========================================================
   UPLOAD ZDJĘĆ
   ========================================================= */

#mdk-contact-form .mdk-photo-upload {
    margin-top: 10px;
    padding: 25px;

    border-radius: 16px;

    border: 1px dashed rgba(73, 169, 255, 0.45);

    background:
        linear-gradient(
            145deg,
            rgba(21, 91, 148, 0.12),
            rgba(4, 22, 41, 0.50)
        );

    text-align: center;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

#mdk-contact-form .mdk-photo-upload:hover {
    border-color: rgba(73, 169, 255, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(21, 91, 148, 0.18),
            rgba(4, 22, 41, 0.62)
        );
}

#mdk-contact-form .mdk-photo-upload input[type="file"] {
    width: 100%;
    min-height: 48px;

    color: #dcecff;

    font-size: 14px;
}

#mdk-contact-form .mdk-photo-upload input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 11px 18px;

    color: #ffffff;
    background: #176fba;

    border: 0;
    border-radius: 10px;

    font-weight: 700;
    cursor: pointer;
}

#mdk-contact-form .mdk-photo-upload input[type="file"]::file-selector-button:hover {
    background: #2387dc;
}

/* =========================================================
   LISTA WYBRANYCH ZDJĘĆ
   ========================================================= */

#mdk-contact-form #mdk-photo-list {
    margin-top: 15px;

    color: rgba(224, 239, 252, 0.72);

    font-size: 13px;
    line-height: 1.65;

    text-align: left;
}

/* =========================================================
   WIADOMOŚĆ KOŃCOWA
   ========================================================= */

#mdk-contact-form .mdk-general-message {
    margin-top: 28px;
}

/* =========================================================
   PRZYCISK
   ========================================================= */

#mdk-contact-form button[type="submit"] {
    width: 100%;
    min-height: 58px;

    margin-top: 30px;
    padding: 15px 24px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1685dc,
            #075ba4
        );

    border: 1px solid rgba(115, 196, 255, 0.40);
    border-radius: 13px;

    box-shadow:
        0 9px 24px rgba(0, 103, 190, 0.23);

    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

#mdk-contact-form button[type="submit"]:hover {
    transform: translateY(-1px);

    box-shadow:
        0 13px 30px rgba(0, 103, 190, 0.34);

    filter: brightness(1.08);
}

#mdk-contact-form button[type="submit"]:active {
    transform: translateY(0);
}

/* =========================================================
   KOMUNIKAT WYSYŁANIA
   ========================================================= */

#mdk-contact-form .mdk-contact-result {
    margin-top: 18px;

    font-size: 14px;
    line-height: 1.6;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    #mdk-contact-form {
        padding: 22px 18px;
        border-radius: 18px;
    }

    #mdk-contact-form .mdk-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 20px;
    }

    #mdk-contact-form .mdk-field-full {
        grid-column: auto;
    }

    #mdk-contact-form .mdk-dynamic-section {
        padding: 21px 17px;
        margin-top: 22px;
        border-radius: 15px;
    }

    #mdk-contact-form .mdk-section-title {
        font-size: 18px;
    }

    #mdk-contact-form .mdk-section-title-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    #mdk-contact-form input[type="text"],
    #mdk-contact-form input[type="email"],
    #mdk-contact-form input[type="tel"],
    #mdk-contact-form input[type="number"],
    #mdk-contact-form select,
    #mdk-contact-form textarea {
        min-height: 51px;
    }

    #mdk-contact-form textarea {
        min-height: 130px;
    }

    #mdk-contact-form .mdk-photo-upload {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {

    #mdk-contact-form {
        padding: 18px 13px;
        border-radius: 15px;
    }

    #mdk-contact-form .mdk-branch-selector {
        padding: 17px 14px;
    }

    #mdk-contact-form .mdk-dynamic-section {
        padding: 18px 13px;
    }

    #mdk-contact-form .mdk-section-title {
        font-size: 17px;
        gap: 9px;
    }

    #mdk-contact-form .mdk-section-title-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 18px;
    }
}

/* =========================================================
   KONIEC FORMULARZA V2
   ========================================================= */

/* MD KLIMA ? NASZE US?UGI: KOMPAKTOWE KAFELKI */
body.home .services-grid{
    column-gap:24px !important;
    row-gap:24px !important;
}
body.home .services-grid .service-card{
    height:260px !important;
    min-height:260px !important;
    padding:24px !important;
    border-radius:22px !important;
    transition:transform .25s ease, box-shadow .25s ease !important;
}
body.home .services-grid .service-card .big-icon{
    font-size:42px !important;
    margin-bottom:12px !important;
}
body.home .services-grid .service-card h3{
    font-size:23px !important;
    line-height:1.2 !important;
    margin-bottom:8px !important;
}
body.home .services-grid .service-card p{
    font-size:16px !important;
    line-height:1.4 !important;
}
body.home .services-grid .service-card a{
    font-size:16px !important;
    padding:10px 16px !important;
    min-height:42px !important;
    border-radius:12px !important;
}
body.home .services-grid .service-card:nth-child(3) a{
    transform:none !important;
}
body.home .services-grid .service-card:hover{
    transform:translateY(-4px) !important;
    filter:brightness(1.04) !important;
}

/* MD KLIMA - USLUGI COMPACT V2 */
body.home .services-grid {
    column-gap: 24px !important;
    row-gap: 24px !important;
}
body.home .services-grid .service-card {
    height: 250px !important;
    min-height: 250px !important;
    padding: 22px !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    transform: none !important;
    transition: transform .25s ease, filter .25s ease !important;
}
body.home .services-grid .service-card .big-icon {
    font-size: 40px !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
}
body.home .services-grid .service-card h3 {
    font-size: 23px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
}
body.home .services-grid .service-card p {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}
body.home .services-grid .service-card a {
    position: static !important;
    margin-top: auto !important;
    align-self: flex-start !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding: 10px 14px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    transform: none !important;
}
body.home .services-grid .service-card:hover {
    transform: translateY(-4px) !important;
    filter: brightness(1.05) !important;
}
@media (max-width: 700px) {
    body.home .services-grid .service-card {
        height: auto !important;
        min-height: 230px !important;
        padding: 22px !important;
    }
}

/* MD KLIMA - USLUGI COMPACT V3 */
body.home .services-grid {
    gap: 16px !important;
}
body.home .services-grid .service-card {
    height: 210px !important;
    min-height: 210px !important;
    padding: 17px !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    transform: none !important;
}
body.home .services-grid .service-card .big-icon {
    font-size: 32px !important;
    line-height: 1.05 !important;
    margin-bottom: 7px !important;
}
body.home .services-grid .service-card h3 {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px !important;
}
body.home .services-grid .service-card p {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
body.home .services-grid .service-card a {
    position: static !important;
    margin-top: auto !important;
    align-self: flex-start !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    padding: 8px 11px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
}
body.home .services-grid .service-card:hover {
    transform: translateY(-3px) !important;
}
@media (max-width: 700px) {
    body.home .services-grid .service-card {
        height: auto !important;
        min-height: 200px !important;
        padding: 17px !important;
    }
}

/* MDK SPECIALIZATION EFFECTS V2 - bez ingerencji w pseudo-elementy */
body.home .services-grid .service-card.blue-card {
    animation: mdk-blue-glow 7s ease-in-out infinite;
}
body.home .services-grid .service-card.orange-card {
    animation: mdk-orange-glow 4.5s ease-in-out infinite;
}
body.home .services-grid .service-card.purple-card {
    animation: mdk-purple-glow 6s ease-in-out infinite;
}
@keyframes mdk-blue-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(94,220,255,0), 0 0 12px rgba(94,220,255,.12); }
    50% { box-shadow: 0 0 3px rgba(190,245,255,.25), 0 0 23px rgba(35,160,255,.32); }
}
@keyframes mdk-orange-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(255,100,20,.12); }
    50% { box-shadow: 0 0 25px rgba(255,100,20,.35), 0 0 38px rgba(255,166,32,.16); }
}
@keyframes mdk-purple-glow {
    0%, 100% { box-shadow: 0 0 9px rgba(157,115,255,.13); }
    50% { box-shadow: 0 0 22px rgba(157,115,255,.30), 0 0 30px rgba(72,255,213,.15); }
}
@media (prefers-reduced-motion: reduce) {
    body.home .services-grid .service-card.blue-card,
    body.home .services-grid .service-card.orange-card,
    body.home .services-grid .service-card.purple-card {
        animation: none !important;
    }
}
/* KONIEC MDK SPECIALIZATION EFFECTS V2 */

/* MDK SPECIALIZATION EFFECTS V3 */
body.home .services-grid .service-card.blue-card {
    border-color: rgba(94,220,255,.72);
}
body.home .services-grid .service-card.orange-card {
    border-color: rgba(255,145,45,.72);
}
body.home .services-grid .service-card.purple-card {
    border-color: rgba(157,115,255,.72);
}

/* LODOWE REFLEKSY */
body.home .services-grid .service-card.blue-card .big-icon {
    animation: mdk-ice-reflection 3.8s ease-in-out infinite;
}
body.home .services-grid .service-card.blue-card h3 {
    animation: mdk-ice-title 5s ease-in-out infinite;
}
@keyframes mdk-ice-reflection {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(94,220,255,.25)) brightness(1); }
    50% { filter: drop-shadow(0 0 12px rgba(150,235,255,.8)) brightness(1.18); }
}
@keyframes mdk-ice-title {
    0%, 100% { text-shadow: 0 0 3px rgba(94,220,255,.12); }
    50% { text-shadow: 0 0 10px rgba(94,220,255,.55); }
}

/* GAZ: PULSUJACY ZAR */
body.home .services-grid .service-card.orange-card .big-icon {
    animation: mdk-gas-heat 2.4s ease-in-out infinite;
}
body.home .services-grid .service-card.orange-card h3 {
    animation: mdk-gas-title 3s ease-in-out infinite;
}
@keyframes mdk-gas-heat {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255,110,20,.25)); }
    50% { filter: drop-shadow(0 0 13px rgba(255,150,35,.85)) brightness(1.15); }
}
@keyframes mdk-gas-title {
    0%, 100% { text-shadow: 0 0 2px rgba(255,120,20,.1); }
    50% { text-shadow: 0 0 9px rgba(255,140,35,.55); }
}

/* KOMPUTERY: NEONOWE IMPULSY */
body.home .services-grid .service-card.purple-card .big-icon {
    animation: mdk-circuit-pulse 3s ease-in-out infinite;
}
body.home .services-grid .service-card.purple-card h3 {
    animation: mdk-circuit-title 4s ease-in-out infinite;
}
@keyframes mdk-circuit-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(157,115,255,.25)); }
    50% { filter: drop-shadow(0 0 12px rgba(72,255,213,.8)); }
}
@keyframes mdk-circuit-title {
    0%, 100% { text-shadow: 0 0 3px rgba(157,115,255,.12); }
    50% { text-shadow: 0 0 9px rgba(72,255,213,.5); }
}

@media (prefers-reduced-motion: reduce) {
    body.home .services-grid .service-card.blue-card .big-icon,
    body.home .services-grid .service-card.blue-card h3,
    body.home .services-grid .service-card.orange-card .big-icon,
    body.home .services-grid .service-card.orange-card h3,
    body.home .services-grid .service-card.purple-card .big-icon,
    body.home .services-grid .service-card.purple-card h3 {
        animation: none !important;
    }
}
/* KONIEC MDK SPECIALIZATION EFFECTS V3 */


/* MDK WHOLE CARD EFFECTS V1 */
body.home .services-grid .service-card > .mdk-special-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    opacity: .95;
    mix-blend-mode: screen;
    background-repeat: no-repeat;
}

body.home .services-grid .service-card.blue-card > .mdk-ice-overlay {
    background-image:
        linear-gradient(115deg, transparent 18%, rgba(100,220,255,.03) 32%, rgba(210,250,255,.32) 42%, rgba(60,180,255,.10) 48%, transparent 61%),
        radial-gradient(ellipse at 15% 20%, rgba(30,170,255,.25), transparent 48%),
        radial-gradient(ellipse at 85% 85%, rgba(100,230,255,.18), transparent 45%);
    background-size: 230% 230%, 100% 100%, 100% 100%;
    animation: mdk-card-ice-sweep 6s ease-in-out infinite;
}

body.home .services-grid .service-card.orange-card > .mdk-fire-overlay {
    background-image:
        radial-gradient(ellipse at 50% 110%, rgba(255,75,10,.35), transparent 62%),
        radial-gradient(ellipse at 85% 20%, rgba(255,170,35,.22), transparent 48%),
        linear-gradient(0deg, rgba(255,90,15,.12), transparent 65%);
    background-size: 100% 150%, 140% 140%, 100% 100%;
    animation: mdk-card-fire-pulse 2.8s ease-in-out infinite;
}

body.home .services-grid .service-card.purple-card > .mdk-circuit-overlay {
    background-image:
        repeating-linear-gradient(115deg, transparent 0 28px, rgba(75,255,220,.0) 29px 35px, rgba(75,255,220,.20) 36px 38px, transparent 39px 68px),
        repeating-linear-gradient(25deg, transparent 0 43px, rgba(170,105,255,.0) 44px 52px, rgba(170,105,255,.18) 53px 55px, transparent 56px 85px),
        radial-gradient(ellipse at 50% 50%, rgba(90,60,255,.12), transparent 75%);
    background-size: 200% 200%, 200% 200%, 100% 100%;
    animation: mdk-card-circuit-flow 8s linear infinite;
}

@keyframes mdk-card-ice-sweep {
    0%, 100% { background-position: 100% 0, 0 0, 0 0; opacity: .55; }
    50% { background-position: 0 100%, 0 0, 0 0; opacity: 1; }
}
@keyframes mdk-card-fire-pulse {
    0%, 100% { background-position: 50% 100%, 100% 0, 0 0; opacity: .55; }
    50% { background-position: 50% 0, 0 100%, 0 0; opacity: 1; }
}
@keyframes mdk-card-circuit-flow {
    from { background-position: 0 0, 100% 100%, 0 0; opacity: .45; }
    to { background-position: 200% 100%, -100% 0, 0 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.home .services-grid .service-card > .mdk-special-overlay {
        animation: none !important;
    }
}
/* KONIEC MDK WHOLE CARD EFFECTS V1 */

/* MDK CARD SHAPES V1 — śnieżynka / płomień / monitor */
@supports (clip-path: polygon(0 0, 100% 0, 50% 100%)) {

    body.home .services-grid .service-card {
        box-sizing: border-box;
        min-height: 360px;
        overflow: hidden;
        background-clip: border-box;
        -webkit-clip-path: none;
        clip-path: none;
    }

    /* KLIMATYZACJA — stylizowana śnieżynka */
    body.home .services-grid .service-card.blue-card {
        padding: 48px 14% 48px;
        -webkit-clip-path: polygon(
            50% 0, 56% 9%, 64% 3%, 66% 15%,
            84% 15%, 84% 31%, 100% 40%,
            91% 50%, 100% 60%, 84% 69%,
            84% 85%, 66% 85%, 64% 97%,
            56% 91%, 50% 100%, 44% 91%,
            36% 97%, 34% 85%, 16% 85%,
            16% 69%, 0 60%, 9% 50%,
            0 40%, 16% 31%, 16% 15%,
            34% 15%, 36% 3%, 44% 9%
        );
        clip-path: polygon(
            50% 0, 56% 9%, 64% 3%, 66% 15%,
            84% 15%, 84% 31%, 100% 40%,
            91% 50%, 100% 60%, 84% 69%,
            84% 85%, 66% 85%, 64% 97%,
            56% 91%, 50% 100%, 44% 91%,
            36% 97%, 34% 85%, 16% 85%,
            16% 69%, 0 60%, 9% 50%,
            0 40%, 16% 31%, 16% 15%,
            34% 15%, 36% 3%, 44% 9%
        );
        filter: drop-shadow(0 0 3px rgba(94,220,255,.9))
                drop-shadow(0 0 9px rgba(40,160,255,.45));
    }

    /* URZĄDZENIA GAZOWE — płomień */
    body.home .services-grid .service-card.orange-card {
        padding: 48px 14% 42px;
        -webkit-clip-path: polygon(
            50% 0, 60% 10%, 65% 21%, 78% 14%,
            82% 29%, 93% 39%, 100% 51%,
            96% 66%, 87% 79%, 72% 91%,
            50% 100%, 28% 91%, 13% 79%,
            4% 66%, 0 51%, 7% 39%,
            18% 29%, 22% 14%, 35% 21%,
            40% 10%
        );
        clip-path: polygon(
            50% 0, 60% 10%, 65% 21%, 78% 14%,
            82% 29%, 93% 39%, 100% 51%,
            96% 66%, 87% 79%, 72% 91%,
            50% 100%, 28% 91%, 13% 79%,
            4% 66%, 0 51%, 7% 39%,
            18% 29%, 22% 14%, 35% 21%,
            40% 10%
        );
        filter: drop-shadow(0 0 3px rgba(255,145,45,.9))
                drop-shadow(0 0 9px rgba(255,75,10,.45));
    }

    /* SERWIS KOMPUTERÓW — ekran z podstawą monitora */
    body.home .services-grid .service-card.purple-card {
        padding: 38px 9% 56px;
        -webkit-clip-path: polygon(
            4% 0, 96% 0, 100% 5%, 100% 80%,
            60% 80%, 60% 90%, 72% 90%, 79% 100%,
            21% 100%, 28% 90%, 40% 90%,
            40% 80%, 0 80%, 0 5%
        );
        clip-path: polygon(
            4% 0, 96% 0, 100% 5%, 100% 80%,
            60% 80%, 60% 90%, 72% 90%, 79% 100%,
            21% 100%, 28% 90%, 40% 90%,
            40% 80%, 0 80%, 0 5%
        );
        filter: drop-shadow(0 0 3px rgba(157,115,255,.9))
                drop-shadow(0 0 9px rgba(100,75,255,.45));
    }

    /* Treść pozostaje nad dotychczasowymi animacjami */
    body.home .services-grid .service-card > .mdk-special-overlay {
        pointer-events: none;
    }

    /* Mniejsze ekrany — więcej miejsca na treść */
    @media (max-width: 600px) {
        body.home .services-grid .service-card {
            min-height: 340px;
        }

        body.home .services-grid .service-card.blue-card {
            padding: 48px 13% 48px;
        }

        body.home .services-grid .service-card.orange-card {
            padding: 48px 13% 42px;
        }

        body.home .services-grid .service-card.purple-card {
            padding: 30px 8% 56px;
        }
    }
}
/* KONIEC MDK CARD SHAPES V1 */