html,
body{
    overflow-x:hidden;
    max-width:100%;
}

html,
body{
    overflow-x:hidden;
}

/* =======================
   RESET
======================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", sans-serif;
    background: #050505;
    color: #ffffff;
    line-height: 1.6;
}

/* =======================
   NAVBAR
======================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);

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

    padding: 15px 8%;
    border-bottom: 1px solid #1f1f1f;
}

.logo img {
    height: 70px;
}

.navbar ul {
    display: flex;
    gap: 30px;
    list-style: none;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.navbar a:hover {
    color: #ff0000;
}

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

.hero {
    min-height: 60vh;

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

    background:
    linear-gradient(
    135deg,
    #050505 0%,
    #111111 40%,
    #5a0000 100%);

    padding: 50px;
}
.hero-content {
    max-width: 900px;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;

    background: linear-gradient(
    90deg,
    #ff0000,
    #ffffff);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.3rem;
    color: #ddd;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: .3s;
}

.btn-primary {
    background: #ff0000;
    color: white;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px red;
}

.btn-secondary {
    border: 2px solid #ff0000;
    color: white;
}

.btn-secondary:hover {
    background: #ff0000;
}

/* =======================
   SEKCJE
======================= */

section {
    padding: 90px 8%;
}

.container {
    max-width: 1400px;
    margin: auto;
}

section h2 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 50px;
    color: #ff0000;
}

/* =======================
   O NAS
======================= */

.features {
    display: grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap: 25px;
}

.feature-box {
    background: #101010;
    padding: 30px;
    border-radius: 15px;
    transition: .3s;
    border: 1px solid #222;
}

.feature-box:hover {
    transform: translateY(-5px);
    border-color: #ff0000;
}

.feature-box h3 {
    margin-bottom: 15px;
    color: #ff0000;
}

/* =======================
   USŁUGI
======================= */

.services-grid {
    display: grid;
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap: 25px;
}

.service-card {
	box-shadow: 0 0 15px rgba(255,0,0,.08);
    background: #101010;
    padding: 30px;
    border-radius: 15px;

    border: 1px solid #222;
    transition: .3s;
}

.service-card:hover {
	box-shadow: 0 0 25px rgba(255,0,0,.25);
    border-color: red;
    transform: translateY(-5px);
}

.service-card h3 {
    color: red;
    margin-bottom: 15px;
}

/* =======================
   FAQ
======================= */

.faq-item {
    background: #101010;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 12px;
}

.faq-item h3 {
    color: #ff0000;
    margin-bottom: 10px;
}

/* =======================
   KONTAKT
======================= */

.contact-grid {
    display: grid;
    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap: 40px;
}

form {
    display: flex;
    flex-direction: column;
}

input,
textarea {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    border: none;
    background: #101010;
    color: white;
}

textarea {
    min-height: 180px;
}

button {
    background: red;
    color: white;
    border: none;

    padding: 15px;

    font-size: 1rem;
    font-weight: bold;

    border-radius: 8px;
    cursor: pointer;

    transition: .3s;
}

button:hover {
    box-shadow: 0 0 20px red;
}

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

footer {
    text-align: center;
    padding: 30px;
    border-top: 1px solid #222;
    background: #050505;
}

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

@media(max-width:768px){

.navbar ul{
    gap:15px;
}

.navbar a{
    font-size:15px;
}

}

@media(max-width:768px){

.logo img{
    height:55px;
}

.hero h1{
    font-size:2.3rem;
}

.navbar{
    flex-direction:column;
    gap:20px;
}

.navbar ul{
    flex-wrap:wrap;
    justify-content:center;
}

.hero-buttons{
    flex-direction:column;
}
.cookie-content{

flex-direction:column;
text-align:center;

}
}

/* =======================
   ANIMACJE
======================= */

.hidden{
opacity:0;
transform:translateY(50px);
transition:all .8s ease;
}

.show{
opacity:1;
transform:translateY(0);
}

/* =======================
   TOP BUTTON
======================= */

#topButton{

position:fixed;
bottom:25px;
left:25px;

width:55px;
height:55px;

border:none;
border-radius:50%;

background:red;
color:white;

font-size:24px;
font-weight:bold;

cursor:pointer;

opacity:0;
visibility:hidden;

transition:.3s;

z-index:10001;

}


#topButton.visible{

opacity:1;
visibility:visible;

}

#topButton:hover{

box-shadow:0 0 25px red;

}

/* =======================
   FLOATING BUTTONS
======================= */

.floating-buttons{

position:fixed;

right:20px;
bottom:20px;

display:flex;
flex-direction:column;

gap:12px;

z-index:9999;

}

.float-btn{

width:60px;
height:60px;

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

padding:0;
margin:0;

border-radius:50%;

background:red;

color:white;

font-size:28px;
line-height:1;

text-decoration:none;

box-shadow:0 0 15px rgba(255,0,0,.5);

transition:.3s;

position:relative;

overflow:visible;

}

.float-btn:hover{

transform:scale(1.1);

box-shadow:0 0 25px red;

}

/* =======================
   RODO
======================= */

.rodo-box{

margin:15px 0;

font-size:14px;

color:#ddd;

}

.rodo-box label{

display:flex;

align-items:flex-start;

gap:10px;

cursor:pointer;

line-height:1.5;

}

.rodo-box input{

width:auto;
margin-top:4px;

}

.rodo-box a{
    color:#ff0000;
    text-decoration:none;
    font-weight:600;
}

.rodo-box a:hover{
    text-decoration:underline;
}

footer a{
    color:#ff0000;
    text-decoration:none;
}

footer a:hover{
    text-decoration:underline;
}

.hero-logo{
max-width:420px;
width:100%;
height:auto;
display:block;
margin:0 auto 30px auto;


filter:drop-shadow(0 0 20px rgba(255,0,0,.2));


}


.hero-slogan{
    font-size:1.4rem;
    color:#ddd;
    margin-bottom:40px;
    font-weight:500;
}

.facebook-btn{
    background:#1877f2;
    font-size:30px;
    font-weight:bold;
}

.facebook-btn:hover{
    box-shadow:0 0 25px #1877f2;
}

#cookie-banner{

position:fixed;

bottom:0;
left:0;

width:100%;

background:#111;

padding:10px 15px;
border-top:2px solid red;

z-index:10000;

}

.cookie-content{

max-width:1200px;

margin:auto;

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;

}

.cookie-content p{
    font-size:14px;
    margin:0;
}

.cookie-buttons{

display:flex;
gap:10px;

}

#accept-cookies{

background:red;
color:white;

}

#reject-cookies{

background:#333;
color:white;

}



input:focus,
textarea:focus{

outline:none;

border:1px solid #ff0000;

box-shadow:0 0 10px rgba(255,0,0,.3);


}

@media(max-width:768px){


    .float-btn::before{

content:attr(data-tooltip);

position:absolute;

right:75px;
top:50%;

transform:translateY(-50%);

background:#111;
color:#fff;

padding:8px 12px;

border-radius:8px;

white-space:nowrap;

opacity:0;
visibility:hidden;

pointer-events:none;

transition:opacity .3s;

border:1px solid #333;

font-size:14px;

z-index:10001;

/* DODAJ TO */
display:none;

}
}

@media(min-width:769px){

.float-btn::before{
    display:block;
}

}

@media(max-width:768px){

.floating-buttons{
    bottom:90px;
}

}

@media(max-width:768px){

.float-btn{

width:40px;
height:40px;

font-size:18px;

}

.floating-buttons{

right:10px;
bottom:15px;

gap:8px;

}

}

.contact-form-title{

color:#ff0000;

margin-bottom:20px;

text-align:center;

font-size:1.8rem;

}

#seo-content{

padding-top:40px;

}

#seo-content p{

max-width:1000px;

margin:0 auto 20px auto;

font-size:1.1rem;

line-height:1.9;

color:#ddd;

}