/* =========================
   NETPROTEGO - PREMIUM STYLE
   ========================= */

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

body{
    font-family: 'Inter', sans-serif;
    background: radial-gradient(circle at top right,#112446 0%,transparent 35%),

    radial-gradient(circle at bottom left,#0B3E45 0%,transparent 30%),

    #060B16;
    color: #FFFFFF;
    overflow-x: hidden;
    padding-top:90px;
}

.skip-link{

    position:absolute;

    top:-100px;

    left:16px;

    z-index:2000;

    padding:12px 16px;

    border-radius:8px;

    background:#FFFFFF;

    color:#060B16;

    font-weight:700;

    text-decoration:none;

    transition:top .2s ease;

}

.skip-link:focus{

    top:16px;

}

/* =========================
   CONTAINER
   ========================= */

.container{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/*==================================
HEADER PREMIUM
==================================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:.35s;

    background:rgba(8,16,31,.65);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.header-container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* LOGO */

.logo{

display:flex;

align-items:center;

gap:15px;

text-decoration:none;

}

.logo img{

height:52px;

width:auto;

transition:.35s;

}

.logo span{

font-family:'Audiowide',sans-serif;

font-size:29px;

font-weight:400;

letter-spacing:1px;

color:white;

transition:.35s;

}

.logo:hover span{

color:#3EF2C5;

}

.logo:hover img{

transform:rotate(-8deg) scale(1.05);

}
/* NAV */

nav{

display:flex;

gap:40px;

}

nav a{

position:relative;

text-decoration:none;

color:white;

font-weight:500;

font-size:15px;

letter-spacing:.5px;

transition:.35s;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:0;

height:2px;

background:linear-gradient(90deg,#2F80FF,#3EF2C5);

transition:.35s;

border-radius:10px;

}

nav a:hover{

color:#3EF2C5;

}

nav a:hover::after{

width:100%;

}

nav a.active{

color:#3EF2C5;

font-weight:600;

}
/* =========================
   HERO SECTION
   ========================= */

.hero{
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    position: relative;
}

.hero-content{
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.subtitle{
    color: #3EF2C5;
    letter-spacing: 3px;
    font-size: 13px;
    margin-bottom: 15px;
}

.hero h1{
    font-size: 48px;
    line-height:1.25;
    margin-bottom: 20px;
    letter-spacing:.5px;
}

.description{
    color: #AEB7C8;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* BUTTON */

.button{
    display: inline-block;
    padding: 14px 28px;
    background: linear-gradient(135deg, #2F80FF, #3EF2C5);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(47,128,255,0.25);
    position:relative;
    overflow:hidden;
}

.button::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:.7s;

}

.button:hover::before{

left:120%;

}

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

/* HERO CARD */

.hero-card{
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 25px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.hero-card h3{
    margin-bottom: 15px;
    font-size: 18px;
}

.hero-card ul{
    list-style: none;
}

.hero-card ul li{
    padding: 6px 0;
    color: #AEB7C8;
    font-size: 14px;
}

/* =========================
   ANIMACJA TŁA (delikatna siatka)
   ========================= */

.hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.25;
    z-index: -1;
}

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

@media (max-width: 900px){

    .hero-content{
        grid-template-columns: 1fr;
        text-align: center;
    }

    nav{
        display: none;
    }

    .hero h1{
        font-size: 34px;
    }

    .logo img{
        animation:logoFloat 5s ease-in-out infinite;
        height: 34px;
    }

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

    .section-title{
        font-size: 28px;
    }

    .why-grid{

    grid-template-columns:1fr;
    }

    .services-grid{

    grid-template-columns:1fr;

    }

    .projects-grid{

    grid-template-columns:1fr;

    }
    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .footer-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-left p{

        margin:auto;

    }

    .footer-logo{

        justify-content:center;

    }

    .logo span{

        font-size:24px;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-right{

        grid-template-columns:1fr 1fr;

    }

}
/* =========================
   SECTION COMMON
   ========================= */

.section{
    padding: 100px 0;
}

.section-subtitle{
    color: #3EF2C5;
    letter-spacing: 3px;
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px;
}

.section-title{
    font-size: 36px;
    text-align: center;
    margin-bottom: 60px;
}

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

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

.service-card{
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 25px;
    border-radius: 16px;
    transition: 0.3s;
    backdrop-filter: blur(10px);
}

.service-card:hover{
    transform: translateY(-5px);
    border-color: rgba(47,128,255,0.4);
    box-shadow: 0 15px 40px rgba(47,128,255,0.15);
    box-shadow: 0 25px 60px rgba(47,128,255,.15);
    transform: translateY(-12px);
}

.service-card .icon{
    font-size: 28px;
    margin-bottom: 15px;
}

.service-card h3{
    margin-bottom: 10px;
    font-size: 18px;
}

.service-card p{
    color: #AEB7C8;
    font-size: 14px;
    line-height: 1.5;
}

/* ===================================
   WHY SECTION
=================================== */

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

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

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

    border-radius:18px;

    padding:40px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:#2F80FF;

    box-shadow:0 20px 50px rgba(47,128,255,.15);

}

.why-number{

    font-size:54px;

    font-weight:800;

    color:rgba(62,242,197,.12);

    position:absolute;

    top:15px;

    right:20px;

}

.why-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.why-card p{

    color:#AEB7C8;

    line-height:1.8;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 20% 30%,rgba(47,128,255,.18),transparent 35%),
    radial-gradient(circle at 80% 70%,rgba(62,242,197,.15),transparent 30%);

    z-index:-3;

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:50px 50px;

    z-index:-2;

}

.hero-content{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:center;

}

.hero-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(47,128,255,.15);

    color:#3EF2C5;

    letter-spacing:2px;

    font-size:12px;

    margin-bottom:30px;

}

.hero h1{

    font-size:58px;

    line-height:1.15;

    margin-bottom:30px;

    max-width:720px;

}

.description{

    font-size:18px;

    line-height:1.9;

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.button-outline{

    padding:15px 35px;

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

    color:white;

    text-decoration:none;

    border-radius:12px;

    transition:.35s;

}

.button-outline:hover{

    background:#2F80FF;

}

.hero-features{

    display:flex;

    gap:35px;

    margin-top:70px;

}

.hero-features h3{

    font-size:17px;

    margin-bottom:6px;

}

.hero-features span{

    color:#AEB7C8;

    font-size:14px;

}

/*=========================================
NETWORK
=========================================*/

.network{

    width:520px;

    height:520px;

    margin:auto;

    position:relative;

}

.center-node{

    width:130px;

    height:130px;

    border-radius:50%;

    position:absolute;

    left:50%;

    top:50%;

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

    background:#0D1424;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 0 70px rgba(47,128,255,.35);

}

.center-node img{

    width:75px;

    /* Logo ma własne, prostokątne proporcje — nie może dziedziczyć
       wysokości centralnego, okrągłego węzła. */
    height:auto;

    max-width:75px;

    object-fit:contain;

    display:block;

}

.node{

    position:absolute;

    width:90px;

    height:90px;

    border-radius:50%;

    background:#111B31;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:34px;

    color:white;

    transition:.4s;

}

.node:hover{

    transform:scale(1.15);

    background:#2F80FF;

}

.n1{top:0;left:50%;transform:translateX(-50%);}
.n2{top:90px;right:0;}
.n3{bottom:90px;right:0;}
.n4{bottom:0;left:50%;transform:translateX(-50%);}
.n5{bottom:90px;left:0;}
.n6{top:90px;left:0;}

/*=================================
SERVICES PREMIUM
=================================*/

.services{

    position:relative;

}

.section-description{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

    color:#AEB7C8;

    line-height:1.8;

    font-size:18px;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:22px;

    background:#0E1628;

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

    transition:.45s;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(145deg,

    rgba(47,128,255,.10),

    transparent 60%);

    opacity:0;

    transition:.45s;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:#2F80FF;

    box-shadow:

    0 25px 70px rgba(47,128,255,.18);

}

.service-card:hover::before{

    opacity:1;

}

.service-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:

    linear-gradient(135deg,#2F80FF,#3EF2C5);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:30px;

}

.service-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.service-card p{

    color:#AEB7C8;

    line-height:1.8;

}

.service-card>*{

    position:relative;

    z-index:2;

}

.js .service-card{

opacity:0;

transform:translateY(50px);

}

.js .service-card.show{

opacity:1;

transform:translateY(0);

transition:

opacity .8s ease,

transform .8s ease;

}

/*=================================
PROJECTS
=================================*/



/*.projects-grid{

display:grid;

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

gap:25px;

}

.project-card{

position:relative;

overflow:hidden;

border-radius:20px;

height:320px;

cursor:pointer;

}

.project-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}*/

/*==========================================
SLIDER REALIZACJI
==========================================*/

.projects-slider{

position:relative;

max-width:900px;

margin:60px auto 0;

}

.slider-track{

display:flex;

width:100%;

transition:transform .6s ease;

will-change:transform;

}

.slide{

flex:0 0 100%;

height:clamp(440px,50vw,600px);

position:relative;

overflow:hidden;

transition:.6s;

}

.slide img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s;

}

.slide-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:45px;

background:linear-gradient(

transparent,

rgba(6,11,22,.96)

);

opacity:0;

transition:.45s;

}

.slide:hover img{

transform:scale(1.06);

}

.slide:hover .slide-overlay{

opacity:1;

}

.slide-overlay p{

font-size:18px;

line-height:1.8;

max-width:700px;

color:white;

}

.slider-btn{

width:60px;

height:60px;

border-radius:50%;

border:none;

background:#111B31;

color:white;

cursor:pointer;

font-size:28px;

transition:.35s;

position:absolute;

top:50%;

z-index:2;

transform:translateY(-50%);

box-shadow:0 8px 24px rgba(0,0,0,.35);

}

.slider-btn:hover{

background:#2F80FF;

}

.slider-btn.prev{

left:20px;

}

.slider-btn.next{

right:20px;

}

.slider-wrapper{

    width:100%;

    min-width:0;

    overflow:hidden;

    border-radius:24px;

}

/*==================================
DOTS
==================================*/

.slider-dots{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

}

.dot{

width:12px;

height:12px;

border-radius:50%;

background:#49546B;

transition:.35s;

}

.dot.active{

background:#2F80FF;

transform:scale(1.2);

}

/*==================================
PROGRESS
==================================*/

.slider-progress{

width:320px;

height:4px;

margin:25px auto 0;

background:#1B2435;

border-radius:50px;

overflow:hidden;

}

.slider-progress-bar{

width:0;

height:100%;

background:linear-gradient(90deg,#2F80FF,#3EF2C5);

animation:progress 6s linear infinite;

}

@keyframes progress{

from{

width:0;

}

to{

width:100%;

}

}

.project-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:28px;

background:linear-gradient(

transparent,

rgba(6,11,22,.96)

);

backdrop-filter:blur(8px);

transform:translateY(40px);

opacity:0;

transition:.45s;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-card:hover .project-overlay{

opacity:1;

transform:translateY(0);

}

.project-overlay h3{

margin-bottom:8px;

}

.project-overlay span{

color:#AEB7C8;

font-size:14px;

}

.js .fade-up{

opacity:0;

transform:translateY(60px);

transition:all .9s ease;

}

.js .fade-up.show{

opacity:1;

transform:translateY(0);

}

/*==================================
CONTACT
==================================*/

.contact-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:60px;

margin-top:60px;

}

.contact-card{

display:flex;

align-items:center;

gap:20px;

padding:30px;

background:#0E1628;

border-radius:20px;

margin-bottom:25px;

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

transition:.35s;

}

.contact-card:hover{

transform:translateY(-5px);

border-color:#2F80FF;

}

.contact-card i{

font-size:28px;

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2F80FF,#3EF2C5);

border-radius:16px;

}

.contact-card h3{

margin-bottom:5px;

}

.contact-card a{

color:white;

text-decoration:none;

}

.contact-card span{

color:#AEB7C8;

}

.contact-card address,
.footer-contact address{

font-style:normal;

color:#AEB7C8;

line-height:1.6;

}

.contact-card address a{

color:white;

}

.contact-form{

background:#0E1628;

padding:45px;

border-radius:25px;

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

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,
.contact-form textarea{

background:#111B31;

border:1px solid transparent;

padding:18px;

border-radius:14px;

color:white;

font-size:15px;

transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

outline:none;

border-color:#2F80FF;

}

.contact-form textarea{

resize:none;

}

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

.footer{

margin-top:120px;

background:#08101F;

border-top:1px solid rgba(255,255,255,.05);

}

.footer-content{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:70px;

padding:70px 0;

}

.footer-left{

    display:flex;

    flex-direction:column;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:22px;

}

.footer-logo img{

    height:52px;

    width:auto;

}

.footer-logo span{

    font-family:'Audiowide',sans-serif;

    font-size:30px;

    color:white;

    letter-spacing:1px;

}

.footer-left p{

    max-width:430px;

    color:#AEB7C8;

    line-height:1.9;

    margin:0;

}

.footer h2{

margin-bottom:20px;

font-size:18px;

}

.footer-links{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-links a{

color:#AEB7C8;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#2F80FF;

}

.footer-contact p{

margin-bottom:12px;

color:#AEB7C8;

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,.05);

padding:25px;

text-align:center;

color:#AEB7C8;

font-size:14px;

}

/*==================================
TO TOP
==================================*/

#toTop{

position:fixed;

right:35px;

bottom:35px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#2F80FF;

color:white;

font-size:24px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

box-shadow:0 10px 30px rgba(47,128,255,.35);

}

#toTop.show{

opacity:1;

visibility:visible;

}

#toTop:hover{

transform:translateY(-4px);

}

.footer-logo{

display:flex;

align-items:center;

gap:15px;

margin-bottom:30px;

}

.footer-logo img{

height:52px;

width:auto;

}

.footer-logo span{

font-family:'Audiowide',sans-serif;

font-size:28px;

color:white;

letter-spacing:1px;

}

.header-small{

background:rgba(6,11,22,.92);

box-shadow:0 10px 40px rgba(0,0,0,.35);

}

.header-small .header-container{

height:75px;

}

.header-small .logo img{

height:45px;

}

.header-small .logo span{

font-size:25px;

}

.menu-toggle{

display:none;

width:50px;

height:50px;

border:none;

background:none;

color:white;

font-size:34px;

cursor:pointer;

}

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

@media(max-width:992px){

.menu-toggle{

display:block;

z-index:1200;

}

nav{

position:fixed;

top:90px;

right:-100%;

width:300px;

height:calc(100vh - 90px);

background:#08101F;

display:flex;

flex-direction:column;

padding:50px 40px;

gap:30px;

transition:.4s;

border-left:1px solid rgba(255,255,255,.05);

}

nav.open{

right:0;

}

nav a{

font-size:18px;

}

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

100%{

transform:translateY(0);

}

}

/*==================================
WHY
==================================*/

.why-grid{

display:grid;

grid-template-columns:1.3fr .9fr;

gap:70px;

margin-top:70px;

align-items:center;

}

.why-item{

display:flex;

gap:22px;

margin-bottom:35px;

}

.why-item i{

font-size:28px;

color:#3EF2C5;

margin-top:5px;

}

.why-item h3{

margin-bottom:10px;

}

.why-item p{

color:#AEB7C8;

line-height:1.8;

}

.why-right{

display:grid;

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

gap:25px;

}

.counter-card{

padding:40px;

background:#0E1628;

border-radius:22px;

text-align:center;

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

transition:.35s;

}

.counter-card:hover{

transform:translateY(-8px);

border-color:#2F80FF;

}

.counter-card .counter-value{

font-size:52px;

margin-bottom:15px;

background:linear-gradient(135deg,#2F80FF,#3EF2C5);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

color:transparent;

}

.counter-card span{

color:#AEB7C8;

}

#form-result{

margin-top:20px;

font-weight:600;

font-size:15px;

}

.success{

color:#3EF2C5;

}

.error{

color:#ff5c5c;

}

.button:disabled{

    opacity:.7;

    cursor:not-allowed;

}

/*==================================
PRIVACY
==================================*/

.privacy-consent{

margin-top:5px;

margin-bottom:10px;

}

.privacy-consent label{

display:flex;

align-items:flex-start;

gap:12px;

cursor:pointer;

}

.privacy-consent input{

margin-top:5px;

width:18px;

height:18px;

accent-color:#2F80FF;

}

.privacy-consent span{

font-size:14px;

line-height:1.7;

color:#AEB7C8;

}

.privacy-consent a{

color:#3EF2C5;

text-decoration:none;

}

.privacy-consent a:hover{

text-decoration:underline;

}

/*==================================
PRIVACY POLICY
==================================*/

.privacy-box{

background:#0E1628;

padding:45px;

border-radius:24px;

margin-top:50px;

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

}

.privacy-box p{

color:#AEB7C8;

line-height:2;

margin-bottom:20px;

}

.privacy-box strong{

color:white;

}

.service-list{

list-style:none;

margin:25px 0;

padding:0;

}

.service-list li{

display:flex;

align-items:center;

gap:10px;

margin-bottom:12px;

color:#AEB7C8;

}

.service-list i{

color:#3EF2C5;

font-size:18px;

}

.service-link{

display:inline-flex;

align-items:center;

gap:10px;

margin-top:20px;

font-weight:600;

text-decoration:none;

color:#3EF2C5;

transition:.3s;

}

.service-link:hover{

gap:18px;

}

.service-card:hover i{

transform:scale(1.15);

}

.service-card i{

transition:.35s;

}

/* Uzupełnienie reguł mobilnych po definicjach desktopowych. */
@media (max-width:900px){

    .hero{
        min-height:auto;
        padding:80px 0;
    }

    .hero-content,
    .why-grid,
    .contact-wrapper,
    .footer-content{
        grid-template-columns:1fr;
    }

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

    .hero-content{
        gap:45px;
        text-align:center;
    }

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

    .network{
        width:420px;
        height:420px;
    }

    .why-grid{
        gap:45px;
    }

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

    .footer-logo{
        justify-content:center;
    }

    .footer-left p{
        margin:auto;
    }
}

@media (max-width:600px){

    .container{
        width:calc(100% - 32px);
    }

    .section{
        padding:70px 0;
    }

    .hero h1{
        font-size:34px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-buttons .button,
    .hero-buttons .button-outline{
        text-align:center;
    }

    .network{
        width:290px;
        height:290px;
    }

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

    .why-grid > *{
        min-width:0;
    }

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

    .counter-card{
        min-width:0;
        padding:24px 12px;
    }

    .counter-card .counter-value{
        font-size:42px;
    }

    .center-node{
        width:90px;
        height:90px;
    }

    .center-node img{
        width:55px;

        height:auto;

        max-width:55px;
    }

    .node{
        width:58px;
        height:58px;
        font-size:22px;
    }

    .n2,
    .n6{
        top:50px;
    }

    .n3,
    .n5{
        bottom:50px;
    }

    .service-card,
    .contact-form,
    .privacy-box{
        padding:28px;
    }

    .contact-card{
        padding:22px;
    }

    .projects-slider{
        display:block;
        position:relative;
        gap:10px;
    }

    .slider-btn{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:42px;
        height:42px;
        font-size:22px;
    }

    .slider-btn.prev{
        left:12px;
    }

    .slider-btn.next{
        right:12px;
    }

    .slide{
        height:260px;
    }

    .slide-overlay{
        padding:24px;
    }

    .slider-progress{
        width:100%;
    }

    #toTop{
        right:16px;
        bottom:16px;
    }
}

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

:focus-visible{
    outline:3px solid #3EF2C5;
    outline-offset:3px;
}