/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Coda:wght@400;800&family=Inter:wght@300;400;500;600;700;800&display=swap');


/* KOLOR */
:root {
    --kolor-glowny: #ffffff;
    --kolor-uzupelniajacy: #000000;
    --kolor-ciemny: #07111b;
    --kolor-sredni: #8ea0b2;
    --kolor-jasny: #ffffff;
    --kolor-linia: rgba(255,255,255,.32);
    --kolor-akcent: #132333;
}

/* GLOBALNE */
*{
    box-sizing: border-box;
    transition: .6s;
}

html{
    scroll-behavior: smooth;
    font-family: "Coda", sans-serif;
    font-size: 10px;
    overflow-x: hidden;
}

body{
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--kolor-jasny);
    background-color: var(--kolor-uzupelniajacy);
    overflow-x: hidden;
}

h1, h2, h3{
    font-family: "Coda", sans-serif;
    color: var(--kolor-jasny);
    margin-bottom: 1rem;
    font-weight: 400;
    letter-spacing: .22em;
}

h1{
    font-size: clamp(4rem, 3.8vw, 7rem);
    line-height: 90%;
    margin-bottom: 0;
}

h2{
    font-size: clamp(2.6rem, 2.35vw, 4rem);
    line-height: 132%;
    margin-bottom: 2rem;
}

h3{
    font-size: 1.65rem;
    font-weight: 800;
}

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

p{
    line-height: 155%;
    color: rgba(255,255,255,.86);
    letter-spacing: .13em;
}

a{
    text-decoration: none;
}

/* NAV DESKTOP */
nav{
    position: absolute;
    top: 2.2rem;
    left: 0;
    width: 100%;
    z-index: 8;

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

    padding-left: 6vw;
    padding-right: 6vw;
}

nav ol{
    width: min(1180px, 78vw);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

nav a{
    min-height: 4.2rem;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--kolor-jasny);
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 1.2rem;
    background-color: rgba(255,255,255,.10);
    box-shadow: -4px 4px 7px rgba(255,255,255,.12);
    backdrop-filter: blur(10px);

    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    white-space: nowrap;
}

nav a:hover{
    background-color: rgba(255,255,255,.22);
    transform: translateY(-.3rem);
}

/* NAV MOBILE */
.burger{
    position: fixed;
    top: 2rem;
    right: 2rem;

    background-color: rgba(5,10,18,.85);
    color: var(--kolor-jasny);
    font-size: 3rem;
    padding: .5rem .65rem;

    z-index: 10;
    cursor: pointer;
    display: none;
    border: 1px solid rgba(255,255,255,.3);
}

.burger:hover{
    background-color: #152b42;
}

.nakladka{
    background-color: #050a12;
    position: fixed;
    z-index: 10;

    width: 0;
    height: 100%;
    top: 0;
    right: 0;

    overflow: hidden;

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

    opacity: .97;
}

.zamknijX{
    position: absolute;
    top: 2rem;
    right: 2rem;

    font-size: 3.2rem;
    color: var(--kolor-jasny);
    background-color: rgba(255,255,255,.12);
    padding: .2rem 1rem .45rem;

    cursor: pointer;
}

.zamknijX:hover{
    background-color: rgba(255,255,255,.22);
    transform: scale(1.05);
}

.nakladka ol{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.nakladka ol li a{
    display: block;
    text-align: center;
    padding: 1.2rem;
    color: var(--kolor-jasny);
    font-weight: 800;
    letter-spacing: .16em;
}

.nakladka ol li a:hover{
    background-color: rgba(255,255,255,.12);
}

/* WSZYSTKIE SEKCJE */
section{
    scroll-margin-top: 0;
    padding: 9rem 6vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow-x: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.zawartosc{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;

    display: flex;
    gap: 4rem;
}

/* SEKCJA 1 — HERO */
#pierwsza{
    min-height: 52vw;
    padding-top: 10rem;
    padding-bottom: 8rem;
    background-image: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05), rgba(0,0,0,.02)), url("../img/hero.jpg");
    background-position: center center;
}

#pierwsza .zawartosc{
    align-items: flex-start;
    justify-content: flex-start;
}

.hero-tekst{
    margin-top: 3vw;
    margin-left: 1vw;
}

.hero-logo{
    width: clamp(22rem, 18vw, 36rem);
    margin-bottom: .8rem;
}

/* SEKCJA 2 — OSIĄGI */
#druga{
    padding: 3.2rem 6vw;
    background-color: #111d28;
}

#druga .zawartosc{
    justify-content: center;
    align-items: center;
    gap: clamp(4rem, 7vw, 12rem);
}

.statystyka{
    text-align: center;
}

.statystyka h3{
    margin-bottom: .2rem;
    font-size: clamp(3.3rem, 3vw, 5.2rem);
    line-height: 100%;
    font-weight: 400;
    letter-spacing: .12em;
}

.statystyka h3 span{
    margin-left: .6rem;
    font-size: .36em;
    letter-spacing: .14em;
}

.statystyka p{
    font-size: 1.05rem;
    line-height: 120%;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* SEKCJA 3 — INNOWACJE */
#trzecia{
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 0;
    padding-right: 0;
    background-color: #000000;
}

.naglowek-sekcji{
    padding: 0 2rem;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

#trzecia .zawartosc{
    max-width: 1100px;
    padding: 1.8rem;
    background-color: #111d28;
    gap: 2.2rem;
}

.karta-technologii{
    flex: 1;
}

.karta-technologii img{
    width: 100%;
    height: 28rem;
    object-fit: cover;
    margin-bottom: 2.8rem;
}

.karta-technologii h3{
    font-size: 1.7rem;
    line-height: 125%;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.karta-technologii .opis-karty{
    font-size: 1.05rem;
    line-height: 145%;
    letter-spacing: .12em;
}

/* SEKCJE Z OBRAZEM */
#czwarta,
#piata,
#szosta{
    min-height: 52vw;
    justify-content: flex-start;
    padding-top: 10rem;
}

#czwarta{
    background-image: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.15), rgba(0,0,0,.05)), url("../img/design-side.jpg");
    background-position: center center;
}

#piata{
    background-image: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.20), rgba(0,0,0,.04)), url("../img/interior.jpg");
    background-position: center center;
}

#szosta{
    background-image: linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.46), rgba(0,0,0,.10)), url("../img/front.jpg");
    background-position: center center;
}

#szosta .zawartosc{
    justify-content: space-between;
    align-items: flex-start;
}

#szosta .formularz-kontaktowy{
    max-width: 44rem;
    margin-left: auto;
}

.tekst-na-zdjeciu{
    max-width: 48rem;
    margin-left: 1vw;
}

.tekst-na-zdjeciu p{
    max-width: 34rem;
    font-size: 1.25rem;
    line-height: 155%;
}

/* STOPKA */
footer{
    padding: 3rem 6vw;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .zawartosc{
    max-width: 1100px;
    justify-content: flex-start;
    align-items: center;
}

.footer-info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.footer-logo{
    width: clamp(14rem, 12vw, 24rem);
}

.footer-info p{
    font-size: 1.6rem;
    letter-spacing: .18em;
}

.copyright{
    font-size: 1rem !important;
    opacity: .75;
}

.formularz-kontaktowy{
    flex: 1;
    padding: 3rem;
    border: 1px solid rgba(255,255,255,.22);
    background-color: rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
}

.formularz-kontaktowy h2{
    font-size: clamp(2.2rem, 2vw, 3.4rem);
}

form{
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

input,
textarea,
button{
    width: 100%;
    font-family: "Coda", sans-serif;
    letter-spacing: .14em;
    outline: none;
}

input,
textarea{
    padding: 1.4rem 1.6rem;
    color: var(--kolor-jasny);
    border: 1px solid rgba(255,255,255,.25);
    background-color: rgba(255,255,255,.08);
}

textarea{
    min-height: 13rem;
    resize: vertical;
}

input::placeholder,
textarea::placeholder{
    color: rgba(255,255,255,.62);
}

button{
    padding: 1.4rem 1.8rem;
    border: 1px solid rgba(255,255,255,.55);
    background-color: transparent;
    color: var(--kolor-jasny);
    font-weight: 800;
    cursor: pointer;
}

button:hover{
    background-color: var(--kolor-jasny);
    color: #000000;
}

@media (max-width:899px){

    nav{
        display: none;
    }

    .burger{
        display: block;
    }

    section{
        padding: 6rem 2rem;
    }

    .zawartosc{
        flex-direction: column;
        gap: 3rem;
    }

    #pierwsza{
        min-height: 76rem;
        padding-top: 8rem;
        background-image: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20), rgba(0,0,0,.78)), url("../img/hero-mobile.jpg");
        background-position: center top;
        justify-content: flex-start;
    }

    .hero-tekst{
        margin-top: 0;
        margin-left: 0;
    }

    .hero-logo{
        width: 20rem;
    }

    #druga .zawartosc{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3rem 2rem;
    }

    .statystyka{
        flex: 1 0 40%;
    }

    #trzecia .zawartosc{
        flex-direction: row;
        justify-content: flex-start;
        overflow-x: scroll;
        scrollbar-width: none;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .karta-technologii{
        flex: 1 0 50%;
        scroll-snap-align: center;
    }

    .karta-technologii img{
        height: 22rem;
    }

    #czwarta,
    #piata,
    #szosta{
        min-height: 72rem;
        padding-top: 7rem;
    }

    #czwarta{
        background-image: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.15), rgba(0,0,0,.70)), url("../img/design-mobile.jpg");
        background-position: center bottom;
    }

    #piata{
        background-image: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.18), rgba(0,0,0,.72)), url("../img/interior-mobile.jpg");
        background-position: center bottom;
    }

    #szosta{
        min-height: auto;
        background-image: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.36), rgba(0,0,0,.82)), url("../img/front-mobile.jpg");
        background-position: center bottom;
    }

    #szosta .zawartosc{
        gap: 32rem;
    }

    #szosta .formularz-kontaktowy{
        max-width: 100%;
        margin-left: 0;
    }

    .tekst-na-zdjeciu{
        margin-left: 0;
    }

    footer .zawartosc{
        flex-direction: column;
    }

    .footer-info{
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
    }
}

@media (max-width:600px){

    h1{
        font-size: 4.2rem;
    }

    h2{
        font-size: 2.5rem;
    }

    #pierwsza{
        min-height: 72rem;
    }

    .statystyka h3{
        font-size: 3.4rem;
    }

    .statystyka p,
    .karta-technologii .opis-karty,
    .tekst-na-zdjeciu p{
        font-size: 1rem;
    }

    .karta-technologii{
        flex: 1 0 88%;
    }

    .formularz-kontaktowy{
        padding: 2rem;
    }
}