/* =====================================================
   PROFINSTAL
   style.css
   Profesjonalna strona firmowa
===================================================== */


/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", sans-serif;
    background: #ffffff;
    color: #101820;
    line-height: 1.6;
    overflow-x: hidden;
}


img {
    max-width: 100%;
    display: block;
}


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


ul {
    list-style: none;
}




/* =====================================================
   ZMIENNE
===================================================== */

:root {

    /* Kolory główne - przemysł / technika */

    --primary: #0057a8;
    --primary-dark: #003b73;

    --secondary: #e30613;

    --dark: #101820;
    --gray-dark: #39424e;

    --gray: #6b7280;

    --light: #f4f7fa;

    --white: #ffffff;


    /* Cienie */

    --shadow:
        0 20px 50px rgba(0,0,0,.08);


    --shadow-hover:
        0 25px 60px rgba(0,0,0,.14);


    /* Zaokrąglenia */

    --radius: 18px;


    /* Animacje */

    --transition:
        .35s ease;

}





/* =====================================================
   GLOBALNY LAYOUT
===================================================== */


.container {

    width: min(1200px, 90%);

    margin-inline: auto;

}


section {

    padding: 100px 0;

}




/* =====================================================
   TYPOGRAFIA
===================================================== */


h1,
h2,
h3 {

    color: var(--dark);

    line-height: 1.15;

    font-weight: 700;

}



h1 {

    font-size: clamp(42px, 5vw, 72px);

    letter-spacing: -2px;

}



h2 {

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

}



h3 {

    font-size: 22px;

}



p {

    color: var(--gray);

    font-size: 17px;

}





/* =====================================================
   HEADER / MENU
===================================================== */


header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:

    rgba(255,255,255,.9);


    backdrop-filter:

    blur(15px);


    border-bottom:

    1px solid rgba(0,0,0,.06);


}



.nav {

    height: 90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img {

    width:180px;

    height:auto;

}



nav {

    display:flex;

    gap:40px;

}



nav a {

    position:relative;

    font-weight:500;

    color:var(--dark);

    transition:var(--transition);

}



nav a::after {


    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}



nav a:hover {

    color:var(--primary);

}



nav a:hover::after {

    width:100%;

}





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


.hero {

    padding-top:120px;

    background:

    linear-gradient(
        135deg,
        #ffffff 0%,
        #f2f7fc 100%
    );

}



.hero-grid {

    display:grid;

    grid-template-columns:

    1fr 1fr;


    align-items:center;

    gap:70px;

}



.small-title {


    display:inline-block;


    margin-bottom:25px;


    color:var(--primary);


    font-size:14px;


    font-weight:700;


    letter-spacing:3px;

}



.hero h1 {

    margin-bottom:30px;

}



.hero p {

    max-width:520px;

    margin-bottom:40px;

    font-size:20px;

}



.hero-image {

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    animation:

    heroFloat 6s infinite ease-in-out;

}





@keyframes heroFloat {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }


    100% {

        transform:translateY(0);

    }

}




/* =====================================================
   BUTTONY
===================================================== */


.buttons {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



.button {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:

    16px 35px;


    border-radius:50px;


    background:var(--primary);


    color:white;


    font-weight:600;


    transition:var(--transition);


    box-shadow:

    0 10px 25px rgba(0,87,168,.25);

}



.button:hover {


    transform:translateY(-4px);


    background:var(--primary-dark);


    box-shadow:

    0 15px 35px rgba(0,87,168,.35);

}



.button.outline {


    background:transparent;


    color:var(--primary);


    border:

    2px solid var(--primary);


    box-shadow:none;


}



.button.outline:hover {


    background:var(--primary);


    color:white;

}




/* =====================================================
   SEKCJE - NAGŁÓWKI
===================================================== */


.section-title {

    text-align:center;

    margin-bottom:60px;

}



.section-title span {


    display:block;


    color:var(--primary);


    font-size:14px;


    font-weight:700;


    letter-spacing:3px;


    margin-bottom:15px;

}



.section-title h2 {

    max-width:800px;

    margin:auto;

}





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


@keyframes fadeUp {


    from {

        opacity:0;

        transform:translateY(40px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}



.hero-grid > div:first-child {

    animation:

    fadeUp .8s ease forwards;

}



.hero-grid > div:last-child {

    animation:

    fadeUp 1s ease forwards;

}

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


#about {

    background: var(--light);

}



.about-grid {


    display:grid;


    grid-template-columns:

    repeat(3, 1fr);


    gap:30px;


}




.card {


    background:white;


    padding:40px;


    border-radius:var(--radius);


    box-shadow:var(--shadow);


    transition:var(--transition);


    position:relative;


    overflow:hidden;


}




.card::before {


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:4px;


    background:var(--primary);


    transform:scaleX(0);


    transform-origin:left;


    transition:var(--transition);


}




.card:hover {


    transform:

    translateY(-10px);


    box-shadow:

    var(--shadow-hover);


}




.card:hover::before {


    transform:scaleX(1);


}




.card h3 {


    margin-bottom:20px;


}




.card p {


    font-size:16px;


}







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


#projects {


    background:white;


}



.gallery {


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:25px;


}




.gallery img {


    width:100%;


    height:300px;


    object-fit:cover;


    border-radius:var(--radius);


    box-shadow:var(--shadow);


    transition:var(--transition);


}




.gallery img:hover {


    transform:

    scale(1.04);


    box-shadow:

    var(--shadow-hover);


}






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


#contact {


    background:

    linear-gradient(

        135deg,

        #f4f7fa,

        #ffffff

    );


}




.contact-grid {


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


}




.contact-card {


    background:white;


    padding:35px;


    border-radius:var(--radius);


    box-shadow:var(--shadow);


    transition:var(--transition);


}




.contact-card:hover {


    transform:

    translateY(-8px);


    box-shadow:

    var(--shadow-hover);


}




.contact-card h3 {


    margin-bottom:15px;


    color:var(--primary);


}




.contact-card p {


    color:var(--gray-dark);


}







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


footer {


    background:

    var(--dark);


    padding:40px 0;


}




.footer {


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:30px;


}



.footer img {


    width:160px;


    filter:

    brightness(0) invert(1);


}



.footer p {


    color:

    rgba(255,255,255,.7);


    font-size:14px;


}







/* =====================================================
   ELEMENTY DODATKOWE
===================================================== */



.card,
.contact-card,
.gallery img {


    opacity:0;


    animation:

    fadeUp .8s ease forwards;


}





.card:nth-child(1) {


    animation-delay:.1s;


}


.card:nth-child(2) {


    animation-delay:.2s;


}


.card:nth-child(3) {


    animation-delay:.3s;


}



.gallery img:nth-child(1) {


    animation-delay:.1s;


}


.gallery img:nth-child(2) {


    animation-delay:.2s;


}


.gallery img:nth-child(3) {


    animation-delay:.3s;


}


.gallery img:nth-child(4) {


    animation-delay:.4s;


}


.gallery img:nth-child(5) {


    animation-delay:.5s;


}


.gallery img:nth-child(6) {


    animation-delay:.6s;


}







/* =====================================================
   SCROLLBAR
===================================================== */


::-webkit-scrollbar {


    width:10px;


}



::-webkit-scrollbar-track {


    background:#f1f1f1;


}



::-webkit-scrollbar-thumb {


    background:

    var(--primary);


    border-radius:10px;


}



::-webkit-scrollbar-thumb:hover {


    background:

    var(--primary-dark);


}







/* =====================================================
   SELEKCJA TEKSTU
===================================================== */


::selection {


    background:

    var(--primary);


    color:white;


}
/* =====================================================
   RESPONSYWNOŚĆ
===================================================== */


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


@media (max-width: 1024px) {


    .hero-grid {

        grid-template-columns:1fr;

        gap:50px;

    }


    .hero {

        text-align:center;

    }


    .hero p {

        margin-left:auto;

        margin-right:auto;

    }


    .buttons {

        justify-content:center;

    }


    .hero-image {

        max-width:700px;

        margin:auto;

    }



    .about-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



    .gallery {


        grid-template-columns:

        repeat(2,1fr);


    }



    .contact-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



}





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


@media (max-width:768px) {


    section {

        padding:60px 0;

    }



    .container {

        width:90%;

    }




    /* MENU */


    .nav {

        height:75px;

    }



    .logo img {


        width:140px;


    }



    nav {


        gap:20px;


    }



    nav a {


        font-size:14px;


    }





    /* HERO */


    .hero {


        padding-top:50px;

        padding-bottom:50px;


    }



    h1 {


        font-size:42px;

        letter-spacing:-1px;


    }



    .hero p {


        font-size:17px;


    }




    .buttons {


        flex-direction:column;

        width:100%;


    }




    .button {


        width:100%;


    }





    /* SEKCJE */


    .section-title {


        margin-bottom:35px;


    }




    .section-title span {


        font-size:12px;


    }




    h2 {


        font-size:32px;


    }





    /* KARTY */


    .about-grid {


        grid-template-columns:1fr;


    }



    .card {


        padding:30px;


    }





    /* GALERIA */


    .gallery {


        grid-template-columns:1fr;


    }



    .gallery img {


        height:260px;


    }





    /* KONTAKT */


    .contact-grid {


        grid-template-columns:1fr;


    }





    /* FOOTER */


    .footer {


        flex-direction:column;

        text-align:center;


    }



}





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


@media (max-width:480px) {



    nav {


        gap:12px;


    }



    nav a {


        font-size:13px;


    }




    h1 {


        font-size:36px;


    }




    .small-title {


        font-size:11px;


        letter-spacing:2px;


    }




    .hero-image {


        border-radius:12px;


    }



    .card {


        padding:25px;


    }




    .contact-card {


        padding:25px;


    }


}





/* =====================================================
   POPRAWA WYŚWIETLANIA OBRAZÓW
===================================================== */


.hero-image,
.gallery img {


    background:#ddd;


}





/* =====================================================
   REDUKCJA ANIMACJI DLA OSÓB,
   KTÓRE MAJĄ JĄ WYŁĄCZONĄ
===================================================== */


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


    *,
    *::before,
    *::after {


        animation-duration:0.01ms !important;


        animation-iteration-count:1 !important;


        scroll-behavior:auto !important;


        transition-duration:0.01ms !important;


    }


}





/* =====================================================
   KONIEC style.css
===================================================== */