/* ========================================
   RESET I USTAWIENIA GLOBALNE
   Zerowanie stylów i podstawowe elementy
======================================== */
html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}

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

:root{
--primary:#1965E0;
--video:#497FD5;
--light:#E4F1FC;
--bg:#ffffff;
--text:#000000;
--muted:#666666;
--card:#ffffff;
}

body{
font-family:'Inter',sans-serif;
background-image:
url("../img/vector-bg-1.png"),
url("../img/vector-bg-2.png"),
url("../img/vector-bg-3.png"),
linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(99, 102, 241, 0.15) 66.44%, rgba(210, 92, 246, 0.15) 100%);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:
right top,
right 102rem,
left bottom,
center,
center;
background-size:
clamp(80px, 12vw, 170px) auto,
clamp(180px, 24vw, 360px) auto,
clamp(180px, 26vw, 380px) auto,
cover,
cover;
color:var(--text);
line-height:1.5;
}

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

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

ul{
list-style:none;
}


/* ========================================
   KLASY POMOCNICZE
   Kontener, sekcje i przyciski
======================================== */

.zawartosc{
width:min(1200px,92%);
margin-inline:auto;
}

.section{
padding:4rem 0;
}

.section__title{
font-size:2rem;
font-weight: 600;
text-align:center;
margin-bottom:3rem;
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:1rem 1.5rem;
border-radius:15px;
font-weight:600;
transition:.2s;
}


.button--primary{
background: linear-gradient(90deg, #6366F1 0%, #D25CF6 100%);
color:#fff;
}

.button--outline{
background:#fff;
border:1px solid var(--video);
color:var(--video);
font-weight: 600;
}

.sekcja {
    position: relative;
}

.sekcja::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: clamp(120px, 20vw, 260px);
    height: auto;
    aspect-ratio: 1 / 1;

    background: url("img/Vector-footer.png") no-repeat;
    background-size: contain;

    pointer-events: none;
}



/* ========================================
   HEADER
   Logo, menu i nawigacja
======================================== */

.header{
padding:1.5rem 0;
position:sticky;
top:0;
background:unset;
backdrop-filter:blur(10px);
z-index:100;
}

.header__wrapper{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
}

.logo{
font-size:2rem;
font-weight:800;
}

.menu-toggle{
border:none;
background:none;
font-size:2rem;
cursor:pointer;
display:block;
}

.nav{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
padding:1rem;
border-top:1px solid #e5e5e5;
}

.nav.active{
display:block;
}

.nav__list{
display:flex;
flex-direction:column;
gap:1rem;
}

.desktop-button{
display:none;
}


/* ========================================
   pierwsze
   Sekcja główna strony
======================================== */

.pierwsze{
padding:2rem 0 4rem;
}

.pierwsze__wrapper{
display:grid;
gap:2rem;
}

.gradient-text{
    background: linear-gradient(90deg, #F472B6 0%, #FB923C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text2{
    background: linear-gradient(90deg, #6366F1 52.4%, #D25CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.button-video{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.8rem 1.5rem;
border-radius:56px;
font-weight:600;
transition:.2s;
}



.pierwsze__badge{
display:inline-block;
background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 44.31%, rgba(210, 92, 246, 0.15) 100%);
padding:16px 32px;
width: 100%;
border-radius:45px;
color:var(--text);
font-size:.85rem;
margin-bottom:3rem;
}

.pierwsze__title{
font-size:2.5rem;
line-height:1.1;
margin-bottom:1.5rem;
font-weight: 600;
}

.pierwsze__description{
font-size:1.1rem;
color:var(--text);
margin-bottom:2rem;
font-weight: 400;
}

.pierwsze__stores{
display:flex;
gap:1rem;
flex-wrap:wrap;
margin-bottom:2rem;
}

.pierwsze__stores img{
height:50px;
}

.pierwsze__stores1:hover{
    transform:translateY(-3px);
}
.pierwsze__stores2:hover{
    transform:translateY(-3px);
}

.pierwsze__video{
display:flex;
flex-wrap:wrap;
gap:1rem;
}

.tag{
background:transparent;
border:1px solid #497FD5;
padding:.75rem 1rem;
border-radius:12px;
font-size:.9rem;
font-width: 600;
color: #497FD5;
}

.drugie{
display:flex;
align-items:center;
justify-content:center;
}

.pierwsze__play {
    display: flex;
    align-items: center;
    background: transparent;
    gap: 12px;
}


.pierwsze__play-icon {
    width: 32px;
    height: 32px;

    border: 1px solid #497FD5;
    border-radius: 50%;

    background: transparent;

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

.pierwsze__play-icon svg {
    width: 16px;
    height: 16px;

    fill: transparent;
    stroke: #497FD5;
    stroke-width: 2;
}

.pierwsze__play:hover{
    background: linear-gradient(90deg, #6366F1 0%, #D25CF6 100%);
    color:#fff;
}

.pierwsze__play:hover .pierwsze__play-icon{
    border-color:#fff;
}

.pierwsze__play:hover .pierwsze__play-icon svg{
    stroke:#fff;
}

.pierwsze__play,
.pierwsze__play-icon,
.pierwsze__play-icon svg{
    transition: all 0.3s ease;
}


/* ========================================
   cechy
   Najważniejsze funkcje aplikacji
======================================== */

.cechy{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:1.5rem;
}

.cecha-card{

background: linear-gradient(154.18deg, rgba(99, 102, 241, 0.1) 2.52%, rgba(210, 92, 246, 0.1) 105.36%);
padding:2rem 1rem;
border-radius:24px;
box-shadow:0 4px 20px rgba(0,0,0,.05);
text-align:center;
flex:0 1 260px;
}

.cecha-card__icon{
width:60px;
height:60px;
margin:0 auto 1rem;
}

.cecha-card h3{
    margin-bottom:0.75rem;
    height:48px;
    font-weight: 600;
    font-size:1rem;
    display:flex;
    align-items:start;
    justify-content:center;
}



.cecha-card p{
color:var(--text);
font-size:.75rem;
font-weight: 300;
}

@media(max-width:900px){

    .cecha-card h3 {
        margin-bottom:unset;
    height: 48px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: start;
    justify-content: center;
}
}

@media(max-width:600px){

    .cechy{
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        padding:1rem 0 1.5rem;
        scroll-snap-type:x mandatory;
    }

    .cecha-card{
        flex:1 0 90%;
        scroll-snap-align:center;
    }
}

/* ========================================
   kroki
   Kroki działania aplikacji
======================================== */

.kroki{
display:grid;
gap:2rem;
}

.step{
text-align:center;
}

.step__circle{
width:80px;
height:80px;
background:var(--light);
border-radius:50%;
margin:0 auto 1rem;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.step__circle span{
position:absolute;
top:-8px;
right:-8px;
background:var(--primary);
color:#fff;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}



/* ========================================
   jak_to_dziala
   Proces załatwiania spraw
======================================== */

#jak_to_dziala .section__title {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 6rem;
}

.jak_to_dziala{
    padding: 6rem 0;
}

.jak_to_dziala__wrapper{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:2rem;

    position:relative;
}

.jak_to_dziala__wrapper::before{
    content:'';

    position:absolute;

    top:-35px;
    left:12%;
    width:76%;

    border-top:3px dashed #F472B6;

    z-index:1;
}

.jak_to_dziala__item{
    text-align:center;

    position:relative;
    z-index:2;
}

.jak_to_dziala__top{
    position:relative;

    width:80px;
    margin:0 auto 2rem;
}

.jak_to_dziala__circle{
    width:80px;
    height:80px;
    justify-content: center;
    display: flex;
    vertical-align: middle;
    border-radius:50%;
    background: linear-gradient(90deg, rgba(244, 114, 182, 0.1) 0%, rgba(251, 146, 60, 0.1) 100%);
}

.jak_to_dziala__circle img{
    max-width: 80%;
    display: block;
}

.jak_to_dziala__circle img.proc-60{
    max-width: 60%;
    display: block;
}

.jak_to_dziala__number{
    position:absolute;

    top:-50px;
    left:50%;

    transform:translateX(-50%);

    width:36px;
    height:36px;

    border-radius:50%;

    background: linear-gradient(90deg, #6366F1 0%, #D25CF6 100%);

    color:#fff;

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

    font-weight:700;

    z-index:3;
}

.jak_to_dziala__item h3{
    font-size: 1rem;
    min-height: 40px;
    font-weight: 600;
    
}

.jak_to_dziala__item p{
    color:#666;
    font-size: .75rem;
    line-height:1.6;
    padding-bottom: 1rem;
}

@media(min-width:800px) and (max-width:1256px){

    .jak_to_dziala{
        padding:5rem 0;
    }

    .jak_to_dziala .zawartosc{
        width:min(820px,88%);
    }

    .jak_to_dziala__wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6rem 5rem;
        align-items:start;
    }

    .jak_to_dziala__wrapper::before{
        top:-35px;
        left:calc(25% - 18px);
        width:calc(50% + 36px);
        border-top:3px dashed #F472B6;
        z-index:1;
    }

    .jak_to_dziala__wrapper::after{
        content:'';
        position:absolute;
        top:-35px;
        right:calc(25% - 21px);
        height:35px;
        border-left:3px dashed #F472B6;
        z-index:1;
    }

    .jak_to_dziala__item{
        overflow:visible;
    }

    .jak_to_dziala__item:nth-child(3){
        grid-column:2;
        grid-row:2;
    }

    .jak_to_dziala__item:nth-child(4){
        grid-column:1;
        grid-row:2;
    }

    .jak_to_dziala__item:nth-child(3)::before{
        content:'';
        position:absolute;
        top:-35px;
        right:50%;
        width:calc(100% + 5rem);
        border-top:3px dashed #F472B6;
        z-index:1;
    }

    .jak_to_dziala__item:nth-child(2)::after{
        content:'';
        position:absolute;
        top:80px;
        left:50%;
        height:calc(100% + 1rem);
        transform:translateX(-50%);
        border-left:3px dashed #F472B6;
        z-index:1;
    }

    .jak_to_dziala__top{
        position:relative;
        width:80px;
        margin:0 auto 2rem;
        z-index:3;
    }

    .jak_to_dziala__circle{
        position:relative;
        z-index:3;
    }

    .jak_to_dziala__number{
        top:-50px;
        left:50%;
        transform:translateX(-50%);
    }

    .jak_to_dziala__content{
        position:relative;
        z-index:3;
        padding:10px;
        background:#ffffff;
        border-radius:30px;
    }

    .jak_to_dziala__item h3{
        min-height:40px;
        position:relative;
        z-index:3;
    }

    .jak_to_dziala__item p{
        padding-bottom:1rem;
        position:relative;
        z-index:3;
    }
}



@media(max-width:799px){

    .jak_to_dziala__wrapper{
        grid-template-columns:1fr;
        gap:0;
    }

    .jak_to_dziala__wrapper::before{
        display:none;
    }

    .jak_to_dziala__item{
        position:relative;

        text-align:center;

        padding-bottom:4rem;
    }

    .jak_to_dziala__item::after{

        content:'';

        position:absolute;

        top:80px;
        bottom:0;

        left:50%;

        transform:translateX(-50%);

        border-left:3px dashed #F472B6;

        z-index:1;
    }

    .jak_to_dziala__item:last-child::after{
        display:none;
    }

    .jak_to_dziala__top{
        position:relative;

        width:80px;
        margin:0 auto 2rem;

        z-index:3;
    }

    .jak_to_dziala__content,
    .jak_to_dziala__item h3,
    .jak_to_dziala__item p{
               padding: 10px;
        position: relative;
        z-index: 3;
        background: #ffffff;
        border-radius: 30px;
    }


    

}


/* ========================================
   sprawy
   Jakie sprawy można załatwić
======================================== */

.sprawy__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1.5rem;
}


.sprawy__grid a{

    justify-content: center;
    display: flex;
    vertical-align: middle;
    border: 1px solid #E8E8E8;
    align-items:center; /* pion */
    border-radius:24px;
    box-shadow: 0px 0px 6.4px 0px #572F970D;
    gap:10px;
    padding:.8rem 1.6rem;
    text-align:center;
    text-decoration:none;
    color:#572F97;
    background:#ffffff;
    transition:.3s;
}

.sprawy__grid a:hover{
    background: linear-gradient(90deg, #6366F1 0%, #D25CF6 100%);
    color:#fff;
}


/* ========================================
  separator
======================================== */

.separator{
    text-align:center;
    margin:80px 0;
}

.separator__link{
    display:inline-flex;
    align-items:center;
    gap:20px;

    font-weight:600;
    color:#111;
    text-decoration:none;

    position:relative;
    padding-bottom:40px;
}

.separator__link::after{
    content:"";
    position:absolute;
    left:-100px;
    right:-100px;
    bottom:0;

    height:3px;
    background:linear-gradient(
        90deg,
        #F472B6 0%,
        #FB923C 100%
    );

    
}

.separator__icon{
    width:48px;
    height:48px;

    border-radius:50%;
    background:linear-gradient(
        90deg,
        #6366F1 0%,
        #D25CF6 100%
    );

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

.separator__icon svg{
    width:20px;
    height:20px;

    fill:none;
    stroke:#fff;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:translateX(1px);
}
@media(max-width:600px){
.separator__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #F472B6 0%, #FB923C 100%);
}
}
/* ========================================
   dla_kogo
   Dla kogo jest aplikacja
======================================== */

.dla_kogo{
padding:3rem 0 0 0;
}

.dla_kogo__grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:3rem;
}

.dla_kogo-card{

    background:#FFF;

    border-radius:28px;

    padding:2rem;

    display:grid;

    grid-template-columns:250px 1fr;

   
}

.dla_kogo-card__image{

    background:transparent;

    

    min-height:220px;
}

.dla_kogo-card__image .img1{

    margin-left: -17px;
}

.dla_kogo-card__image .img2{

    margin-left: -10px;
}


.dla_kogo-card ul{
    list-style:disc;
    margin-left: 20px;
    margin-top:2rem;
}

.dla_kogo-card li{
    margin-bottom:.5rem;
}
.dla_kogo-card li::marker{
    color:#497FD5;
    font-size:1.4rem;
}


@media(max-width:1100px){
    .dla_kogo-card{

    background:#FFF;

    border-radius:28px;

    padding:2rem;

    display:grid;

    grid-template-columns:unset ;

   
}

.dla_kogo-card__image .img1{

    margin-left: unset;
}

.dla_kogo-card__image .img2{

    margin-left: unset;
}

.dla_kogo-card__image{

    background:transparent;

    

}
}


/* ========================================
   korzysci
   Korzyści dla użytkowników
======================================== */

.korzysci__grid{

    background:#FFFFFF;

    border-radius:28px;

    padding:3rem;

    display:grid;

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

    gap:3rem;
}

.korzysc{
    display:flex;
    gap:2rem;
}

.korzysc h3{
    color:var(--primary);
    font-weight: 600;
}

.korzysc__icon{

    width:60px;
    height:60px;
    flex-shrink:0;
}

@media(max-width:900px){

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

    .dla_kogo-card{
        grid-template-columns:1fr;
    }

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

}


/* ========================================
   CTA APP
   Sekcja pobrania aplikacji
======================================== */

.cta-app{
    padding:0 0 3rem 0;
}

.cta-app__wrapper{
    background: linear-gradient(90deg, #6366F1 42.31%, #D25CF6 100%);
    border-radius:28px;
    padding:40px 50px;
grid-template-columns:repeat(3,1fr);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;

    color:#fff;
}
.cta-app__content {
        width: 70%;
}

.cta-app__content h2{
    font-size:2rem;
    line-height:1.15;
    margin-bottom:20px;
    font-weight:700;
}

.cta-app__content p{
    font-size:24px;
    font-weight:600;
    opacity:0.95;
}

.cta-app__stores{
    display:flex;
        justify-content:flex-end;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.cta-app__store{


    background:#000;
    border-radius:16px;

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

    transition:0.3s;
}

.cta-app__store:hover{
    transform:translateY(-3px);
}

.cta-app__store img{
    height: 65px;
}

.cta-app__rating{
    width:100%;
    display:flex;
        justify-content:flex-end;
    align-items:center;
    gap:12px;

    font-size:16px;
    color:#DCE7FF;
}

.cta-app__stars{
    color:#FFD54A;
    font-size:22px;
    letter-spacing:3px;
}

.cta-app__score{
    font-weight:600;
}

.cta-app__downloads{
    white-space:nowrap;
}

/* RESPONSIVE */

@media(max-width:992px){

       .cta-app__wrapper{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .cta-app__stores{
        justify-content:center;
    }

    .cta-app__rating{
        justify-content:center;
    }

    .cta-app__content h2{
        font-size:34px;
    }
}

@media(max-width:576px){

    .cta-app__wrapper{
        padding:30px 24px;
    }

    .cta-app__content h2{
        font-size:28px;
    }

    .cta-app__content p{
        font-size:18px;
    }

    .cta-app__store{
        width:210px;
        height:64px;
    }

    .cta-app__rating{
        flex-wrap:wrap;
        gap:8px;
    }
}


/* ========================================
   FOOTER
   Stopka strony
======================================== */

.footer{
padding:2rem 0;
border-top:1px solid #e5e5e5;
}

.footer__wrapper{
display:grid;
gap:2rem;
}

.footer h4{
margin-bottom:1rem;
}

.footer li{
margin-bottom:.5rem;
color:var(--muted);
}

.footer p{
color:var(--muted);
}

.copyright{
    padding:2rem 0;
    color:var(--muted);
    text-align: center;
}

.ml-80{
    margin-left: 80px;
}

@media(max-width:768px){

    .footer img {display: unset;}

.ml-80{
    margin-left: unset;
}
footer {
    text-align: center;
}
}
/* ========================================
   TABLET I DESKTOP (768px+)
======================================== */

@media(min-width:768px){@media(min-width:768px){

.menu-toggle{
display:none;
}

.nav{
display:block;
position:static;
background:none;
padding:0;
border:none;
width:auto;
}

.nav__list{
flex-direction:row;
align-items:center;
}

.desktop-button{
display:inline-flex;
}

.pierwsze__wrapper{
grid-template-columns:1fr 1fr;
align-items:center;
gap:4rem;
}

.pierwsze__title{
font-size:2.5rem;
}

.cechy{
justify-content:center;
}

.cecha-card{
flex-basis:calc((100% - 3rem) / 3);
}

.kroki{
grid-template-columns:repeat(4,1fr);
}

.footer__wrapper{
grid-template-columns:2fr 1fr 1fr 1fr;
}

.section{
padding:3rem 0;
}

}


/* ========================================
   DUŻE EKRANY (1200px+)
======================================== */

@media(min-width:1200px){@media(min-width:1200px){

.cechy{
justify-content:center;
}

.cecha-card{
flex-basis:calc((100% - 7.5rem) / 6);
}

.pierwsze__title{
font-size:3.9rem;
}

}