/* =========================
   RESPONSIVE
   Wyczyść cały responsive.css i wklej ten plik jako całość
========================= */

/* =========================
   <= 1300px — hero przechodzi na 1 kolumnę
========================= */
@media(max-width:1300px){

    .hero{
        padding-top:140px;
         padding-bottom:40px;
        min-height:auto;
    }

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

    .hero-content{
        max-width:900px;
        margin:0 auto;
        text-align:center;
    }

    .hero-content p{
        max-width:760px;
        margin:0 auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-image{
        width:100%;
        max-width:760px;
        margin:0 auto;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero-photo-box{
        width:100%;
        max-width:760px;
    }

    .hero-photo{
        width:100%;
        max-width:760px;
        display:block;
        margin:0;
    }

    .stats{
        width:100%;
        max-width:760px;
        margin-top:0;
    }


    .about{
        padding:0 0 55px;
    }

    .section-heading{
        margin-bottom:40px;
    }

    .services{
        padding-top:25px;
    }
}

/* =========================
   <= 1200px — sekcje 1 kolumna / ukrycie grafik pomocniczych
========================= */
@media(max-width:1200px){

    .about-grid,
    .mentor-grid,
    .contact-box{
        grid-template-columns:1fr;
        gap:55px;
    }

    .about-content{
        max-width:820px;
        margin:0 auto;
    }

    .about-visual,
    .mentor-image,
    .contact-image{
        display:none;
    }

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

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

    .timeline-line{
        display:none;
    }

    .contact-box{
        padding:55px;
    }
}

/* =========================
   <= 992px — menu / karty usług
========================= */
@media(max-width:992px){

    header .btn{
        display:none;
    }

    nav{
        gap:24px;
    }

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

    .about-list{
        grid-template-columns:1fr;
    }

    .section-heading h2,
    .mentor-content h2{
        font-size:40px;
    }

    .footer-content{
        grid-template-columns:1fr;
        gap:32px;
    }
}

/* =========================
   <= 768px — tablet / mobile
========================= */
@media(max-width:768px){

.technologies{
margin-top:-70px;
}

.process{
margin-top:-70px;
}

   .about-content > .btn,
    .contact-content > .btn{
        display: table;
        margin: 0 auto;
text-align:center;
    }

.contact{
margin-top:-80px;
}

    .header{
        height:76px;
    }

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

    nav{
        position:fixed;
        top:76px;
        left:4%;
        right:4%;
        display:flex;
        flex-direction:column;
        gap:0;
        background:white;
        border:1px solid var(--border);
        border-radius:22px;
        box-shadow:0 25px 60px rgba(30,40,80,.14);
        overflow:hidden;
        opacity:0;
        transform:translateY(-15px);
        pointer-events:none;
        transition:.3s;
    }

    nav.active{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    nav a{
        padding:18px 22px;
        border-bottom:1px solid var(--border);
    }

    nav a:last-child{
        border-bottom:none;
    }

    .hero{
        padding-top:115px;
        padding-bottom:25px;
    }

    .hero-grid{
        gap:40px;
    }

    .hero-content{
        text-align:center;
    }

    .hero-tag{
        width:fit-content;
        max-width:100%;
        margin:0 auto 22px;
        text-align:center;
    }

    .hero h1{
        font-size:clamp(34px,8vw,52px);
        line-height:1.08;
        max-width:100%;
        word-break:normal;
        overflow-wrap:anywhere;
    }

    .hero p{
        max-width:100%;
        margin:0 auto;
        font-size:16px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-photo-box{
        width:100%;
        max-width:560px;
        border-radius:220px 220px 28px 28px;
    }

    .hero-photo{
        width:100%;
        height:auto;
        display:block;
    }

    .stats{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
    }


    .about{
        padding:0 0 38px;
    }

    .about-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-content{
        text-align:left;
    }

    .section-heading{
        margin-bottom:35px;
    }

    .section-heading h2,
    .mentor-content h2,
    .contact-content h2{
        font-size:32px;
    }

    .services{
        padding:12px 0 70px;
    }

    .mentor,
    .process{
        padding:70px 0;
    }

    .technologies{
        padding:70px 0;
    }

    .tech-grid,
    .timeline{
        grid-template-columns:1fr;
    }

    .service-card,
    .tech-card,
    .step{
        padding:30px;
    }

    .contact{
        padding:70px 0 90px;
    }

    .contact-box{
        padding:30px;
        border-radius:28px;
    }

    .footer-inner{
        flex-direction:column;
    }
}

/* =========================
   <= 570px — małe telefony / tekst hero
========================= */
@media(max-width:570px){

.services{
    margin-top:20px;
}

    .hero-content{
        overflow:visible;
        width:100%;
        max-width:100%;
        padding:0 4px;
    }

    .hero h1{
        font-size:32px;
        line-height:1.13;
        max-width:100%;
        overflow-wrap:normal;
        word-break:normal;
    }

    .hero p{
        max-width:100%;
        overflow-wrap:normal;
    }

    .hero-image{
        width:100%;
        max-width:100%;
        padding:0 4px;
    }

    .hero-photo-box{
        width:100%;
        max-width:100%;
        border-radius:90px 90px 22px 22px;
    }

    .stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
        max-width:100%;
        padding:18px 14px;
        gap:12px;
    }

    .stat-item{
        min-width:0;
    }

    .stat-item p{
        overflow-wrap:normal;
        word-break:normal;
    }
}

/* =========================
   <= 520px — telefon
========================= */
@media(max-width:520px){

 .contact-item {
        align-items: flex-start;
        gap: 14px;
    }

    .contact-item p,
    .contact-item a {
        font-size: 15px;
        line-height: 1.45;
    }

    .container{
        width:92%;
    }

    .hero{
        padding-top:105px;
        padding-bottom:25px;
    }



    .hero h1{
        font-size:clamp(28px,10vw,42px);
        line-height:1.08;
    }

    .hero p{
        font-size:15px;
        line-height:1.75;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:14px;
    }

    .btn{
        width:min(220px,100%);
    }

    .hero-photo-box{
        max-width:100%;
        border-radius:90px 90px 22px 22px;
    }

    .stats{
        column-gap:22px;
        row-gap:28px;
        padding:24px 22px;
    }

    .stat-item{
        grid-template-columns:48px minmax(0,1fr);
        column-gap:12px;
    }

    .stat-icon{
        width:48px;
        height:48px;
        font-size:20px;
        border-radius:14px;
    }

    .stat-item h3{
        font-size:30px;
    }

    .stat-item p{
        font-size:14px;
    }

    .about{
        padding:0 0 28px;
    }

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

    .services{
        padding:0 0 56px;
    }

    .mentor,
    .process,
    .technologies{
        padding:56px 0;
    }

    .footer{
        padding:48px 0 20px;
    }

    .footer-brand .logo{
        font-size:1.8rem;
        margin-bottom:12px;
    }

    .footer-brand p,
    .footer-company p{
        font-size:.95rem;
        line-height:1.7;
    }

    .footer-company h4{
        margin-bottom:14px;
    }

    .footer-bottom{
        margin-top:28px;
        padding-top:18px;
    }

    .footer-bottom p{
        font-size:.85rem;
    }
}

/* =========================
   <= 420px — statystyki w 1 kolumnie
========================= */
@media(max-width:420px){

    .stats{
        grid-template-columns:1fr;
        padding:28px 26px;
        gap:22px;
    }

    .stat-item{
        grid-template-columns:52px 1fr;
        column-gap:16px;
    }

    .stat-text h3{
        font-size:32px;
    }

    .stat-text p{
        font-size:15px;
        line-height:1.45;
    }
}

@media(max-width:768px){
    .hero-scroll{
        margin-top:28px;
        transform:scale(.85);
    }
}