:root { --main-blue: #2563eb; }
html { scroll-behavior: smooth; }

.hero-bg { 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1557597774-9d2739f85a76?auto=format&fit=crop&w=1350&q=80'); 
    background-size: cover; background-position: center;
    border-bottom: 6px solid var(--main-blue);
}

.nav-link { position: relative; transition: color 0.3s; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: -4px; left: 0; background-color: var(--main-blue);
    transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

.whatsapp-float { 
    position: fixed; bottom: 2rem; right: 2rem; background: #25d366; 
    width: 65px; height: 65px; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    color: white; z-index: 1000; box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.pulse-animation { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.section-title { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; text-align: center; margin-bottom: 4rem; font-style: italic; color: #0f172a; }

/* KAFELKI USŁUG */
.service-card {
    background: white; padding: 2.5rem; border-radius: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-top: 6px solid var(--main-blue);
    transition: all 0.3s ease; text-align: center;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

/* PROJEKTY */
.project-card { background: #1e293b; border-radius: 1.5rem; overflow: hidden; transition: all 0.4s ease; border-bottom: 5px solid var(--main-blue); }
.project-card:hover { transform: translateY(-12px); }
.project-card img { width: 100%; height: 220px; object-fit: cover; }

/* FORM */
.contact-container { background: white; padding: 2.5rem; border-radius: 2.5rem; border: 2px solid var(--main-blue); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
.form-input { 
    width: 100%; padding: 1.1rem; background: #f8fafc; border: 1px solid #e2e8f0; 
    border-radius: 1rem; font-weight: 800; text-transform: uppercase; font-size: 0.75rem; transition: all 0.2s;
}
.form-input:focus { outline: none; border-color: var(--main-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }

.btn-primary { background: var(--main-blue); color: white; padding: 1.2rem 2.5rem; border-radius: 1rem; font-weight: 900; text-transform: uppercase; transition: 0.3s; display: inline-block; cursor: pointer; }
.btn-primary:hover { transform: scale(1.03); background: #1d4ed8; }

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }