*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    body{
    font-family: 'Inter', sans-serif;
    background:white;
    color:#0f172a;
    line-height:1.6;
    }
    
    .container{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
    }
    
    header{
    border-bottom:1px solid #eee;
    }
    
    .nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    }
    
    .logo{
    font-weight:700;
    font-size:20px;
    }
    
    nav a{
    margin-left:20px;
    text-decoration:none;
    color:#333;
    }
    
    .hero{
    padding:80px 0;
    }
    
    .hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px;
    }
    
    .hero h1{
    font-size:48px;
    margin-bottom:20px;
    }
    
    .hero p{
    font-size:18px;
    margin-bottom:30px;
    color:#555;
    }
    
    .hero-buttons a{
    margin-right:15px;
    }
    
    .btn-primary{
    background:#2563eb;
    color:white;
    padding:12px 24px;
    border-radius:6px;
    text-decoration:none;
    }
    
    .btn-secondary{
    border:1px solid #2563eb;
    color:#2563eb;
    padding:12px 24px;
    border-radius:6px;
    text-decoration:none;
    }
    
    .services{
    background:#f8fafc;
    }
    
    .services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:40px;
    }
    
    .service{
    background:white;
    padding:30px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
    }
    
    .tech-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:40px;
    }
    
    .tech-grid span{
    background:#f1f5f9;
    padding:15px;
    text-align:center;
    border-radius:8px;
    }
    
    .about{
    background:white;
    text-align:center;
    }
    
    .contact{
    background:#f8fafc;
    text-align:center;
    }
    
    footer{
    border-top:1px solid #eee;
    text-align:center;
    padding:20px;
    color:#777;
    }

    .logo-img {
        height: 88px;              /* możesz regulować */
        width: auto;
        filter: drop-shadow(0 0 10px rgba(79, 209, 255, 0.35));
        transition: transform 0.3s ease, filter 0.3s ease;
      }
      
      .logo-link:hover .logo-img {
        transform: scale(1.05);
        filter: drop-shadow(0 0 16px rgba(79, 209, 255, 0.7));
      }

      /* NAVBAR */

.navbar{

    position:sticky;
    top:0;
    
    background:rgba(255,255,255,0.85);
    
    backdrop-filter: blur(10px);
    
    border-bottom:1px solid rgba(0,0,0,0.05);
    
    z-index:1000;
    
    transition: all 0.3s ease;
    
    }
    
    .nav-container{
    
    max-width:1200px;
    margin:auto;
    
    display:flex;
    justify-content:space-between;
    align-items:center;
    
    padding:18px 20px;
    
    }
    
    .logo img{
    height:88px;
    }
    
    .menu{
    
    display:flex;
    align-items:center;
    gap:30px;
    
    }
    
    .menu a{
    
    text-decoration:none;
    font-weight:500;
    
    color:#0f172a;
    
    position:relative;
    
    transition:0.3s;
    
    }
    
    
    /* hover underline animation */
    
    .menu a::after{
    
    content:"";
    
    position:absolute;
    bottom:-6px;
    left:0;
    
    width:0%;
    height:2px;
    
    background:#2563eb;
    
    transition:0.3s;
    
    }
    
    .menu a:hover::after{
    
    width:100%;
    
    }
    
    
    /* kontakt button */
    
    .nav-btn{
    
    background:#2563eb;
    color:white;
    
    padding:10px 18px;
    
    border-radius:8px;
    
    }
    
    .nav-btn:hover{
    
    background:#1e4ed8;
    
    }
    
    
    /* scroll effect */
    
    .navbar.scrolled{
    
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    
    }

    /* TEAM */

.team{

    background:#f8fafc;
    padding:100px 20px;
    
    }
    
    .section-title{
    
    text-align:center;
    font-size:36px;
    margin-bottom:60px;
    
    }
    
    .team-grid{
    
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:50px;
    
    max-width:1000px;
    margin:auto;
    
    }
    
    .team-card{
    
    background:white;
    
    padding:40px;
    
    border-radius:18px;
    
    text-align:center;
    
    box-shadow:
    0 10px 40px rgba(0,0,0,0.08);
    
    transition:0.3s;
    
    }
    
    .team-card:hover{
    
    transform:translateY(-8px);
    
    box-shadow:
    0 20px 60px rgba(0,0,0,0.12);
    
    }
    
    .avatar{
    
    width:120px;
    height:120px;
    
    margin:auto;
    margin-bottom:20px;
    
    border-radius:50%;
    
    padding:4px;
    
    background:linear-gradient(
    135deg,
    #22c1c3,
    #2563eb
    );
    
    }
    
    .avatar img{
    
    width:100%;
    height:100%;
    
    object-fit:cover;
    
    border-radius:50%;
    
    border:4px solid white;
    
    }
    
    .team-card h3{
    
    font-size:22px;
    margin-bottom:6px;
    
    }
    
    .role{
    
    color:#2563eb;
    font-weight:600;
    
    display:block;
    
    margin-bottom:16px;
    
    }
    
    .team-card p{
    
    color:#555;
    
    font-size:15px;
    
    line-height:1.6;
    
    margin-bottom:18px;
    
    }
    
    .phone{
    
    color:#2563eb;
    font-weight:600;
    
    font-size:16px;
    
    }

    .services{

        padding:100px 20px;
        background:white;
        
        }
        
        .services-grid{
        
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        
        gap:35px;
        
        max-width:1200px;
        margin:auto;
        
        }
        
        .service-card{
        
        background:#f8fafc;
        
        padding:35px;
        
        border-radius:16px;
        
        box-shadow:0 10px 30px rgba(0,0,0,0.06);
        
        transition:0.3s;
        
        }
        
        .service-card:hover{
        
        transform:translateY(-6px);
        
        box-shadow:0 20px 50px rgba(0,0,0,0.12);
        
        }
        
        .service-card h3{
        
        margin-bottom:15px;
        font-size:20px;
        
        }
        
        .service-card p{
        
        color:#555;
        margin-bottom:15px;
        
        }
        
        .service-card ul{
        
        list-style:none;
        padding:0;
        
        }
        
        .service-card li{
        
        font-size:14px;
        color:#2563eb;
        
        margin-bottom:6px;
        
        }

        .technologies{

          background:#f8fafc;
          padding:100px 20px;
          
          }
          
          .tech-grid{
          
          display:grid;
          
          grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
          
          gap:35px;
          
          max-width:1200px;
          margin:auto;
          
          }
          
          .tech-category{
          
          background:white;
          
          padding:30px;
          
          border-radius:16px;
          
          box-shadow:0 8px 30px rgba(0,0,0,0.06);
          
          transition:0.3s;
          
          }
          
          .tech-category:hover{
          
          transform:translateY(-6px);
          
          box-shadow:0 20px 50px rgba(0,0,0,0.12);
          
          }
          
          .tech-category h3{
          
          margin-bottom:15px;
          
          font-size:20px;
          
          color:#2563eb;
          
          }
          
          .tech-category ul{
          
          list-style:none;
          
          padding:0;
          
          }
          
          .tech-category li{
          
          margin-bottom:6px;
          
          color:#444;
          
          font-size:14px;
          
          }

          .hero{

            padding:120px 20px;
            
            background:white;
            
            }
            
            .hero-grid{
            
            display:grid;
            
            grid-template-columns:1.2fr 1fr;
            
            gap:80px;
            
            align-items:center;
            
            max-width:1200px;
            margin:auto;
            
            }
            
            .hero-text h1{
            
            font-size:48px;
            
            line-height:1.2;
            
            margin-bottom:20px;
            
            }
            
            .hero-subtitle{
            
            font-size:20px;
            
            color:#2563eb;
            
            margin-bottom:20px;
            
            }
            
            .hero-description{
            
            color:#555;
            
            font-size:17px;
            
            margin-bottom:35px;
            
            max-width:520px;
            
            }
            
            .hero-buttons a{
            
            margin-right:15px;
            
            }
            
            .btn-primary{
            
            background:#2563eb;
            
            color:white;
            
            padding:14px 28px;
            
            border-radius:8px;
            
            text-decoration:none;
            
            font-weight:600;
            
            }
            
            .btn-primary:hover{
            
            background:#1d4ed8;
            
            }
            
            .btn-secondary{
            
            border:1px solid #2563eb;
            
            color:#2563eb;
            
            padding:14px 28px;
            
            border-radius:8px;
            
            text-decoration:none;
            
            font-weight:600;
            
            }
            
            .hero-stats{
            
            display:flex;
            
            flex-direction:column;
            
            gap:25px;
            
            }
            
            .stat{
            
            background:#f8fafc;
            
            padding:25px;
            
            border-radius:14px;
            
            box-shadow:0 8px 30px rgba(0,0,0,0.05);
            
            }
            
            .stat h2{
            
            font-size:32px;
            
            color:#2563eb;
            
            margin-bottom:5px;
            
            }
            
            .stat p{
            
            color:#444;
            
            font-size:14px;
            
            }

            .about{

              padding:100px 20px;
              
              background:#f8fafc;
              
              }
              
              .about-grid{
              
              display:grid;
              
              grid-template-columns:1.2fr 1fr;
              
              gap:70px;
              
              max-width:1200px;
              
              margin:auto;
              
              align-items:start;
              
              }
              
              .about h2{
              
              font-size:36px;
              
              margin-bottom:20px;
              
              }
              
              .about-lead{
              
              font-size:20px;
              
              color:#2563eb;
              
              margin-bottom:20px;
              
              }
              
              .about-text p{
              
              color:#555;
              
              line-height:1.7;
              
              margin-bottom:18px;
              
              }
              
              .about-features{
              
              display:grid;
              
              gap:25px;
              
              }
              
              .feature{
              
              background:white;
              
              padding:25px;
              
              border-radius:14px;
              
              box-shadow:0 10px 30px rgba(0,0,0,0.06);
              
              transition:0.3s;
              
              }
              
              .feature:hover{
              
              transform:translateY(-5px);
              
              box-shadow:0 20px 50px rgba(0,0,0,0.12);
              
              }
              
              .feature h3{
              
              margin-bottom:10px;
              
              color:#2563eb;
              
              }