/* PODSTAWOWE USTAWIENIA */
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
    html { scroll-behavior: smooth; }
    body { color: #1e293b; background: #f8f9fb; line-height: 1.6; }

    /* MENU */
    header {
      position: absolute;
      top: 0; width: 100%; z-index: 999;
      background: transparent;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 15px 0;
    }
    header.scrolled {
      position: fixed;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(15px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
      padding: 8px 0;
    }
    .nav-container {
      max-width: 1200px; margin: auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 30px;
    }
    .logo a { display: block; text-decoration: none; border: none; }
    .logo img { width: 220px; transition: 0.4s; display: block; }
    header.scrolled .logo img { width: 180px; }
    
    nav { display: flex; align-items: center; }
    nav a {
      color: rgba(255, 255, 255, 0.95);
      margin-left: 25px; text-decoration: none;
      font-weight: 400; font-size: 15px; letter-spacing: 0.5px; transition: 0.3s;
    }
    header.scrolled nav a { color: #1e293b; }
    nav a:hover { color: #0ea5e9 !important; }
    .nav-btn {
      background: #0ea5e9; color: #fff !important;
      padding: 10px 22px; border-radius: 50px;
      font-weight: 600; font-size: 14px; margin-left: 30px;
    }
/* HERO */
.hero{
  padding:220px 20px 140px;
  text-align:center;color:#fff;
  background:linear-gradient(rgba(15,23,42,.6),rgba(15,23,42,.7)),url('../image/hero.jpg') center/cover;
}
.hero h1{font-size:42px;margin-bottom:20px}

/* CTA */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #0ea5e9;
  color: #fff;
  text-align: center;
  padding: 15px;
  font-weight: 700;
  z-index: 9000; /* Musi być najwyżej ze wszystkiego */
  text-decoration: none;
  display: none; /* Domyślnie ukryty */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}


/* SERVICES */
.container{max-width:1200px;margin:auto;padding:80px 20px}
h2{text-align:center;margin-bottom:40px}

.services-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.service-card{
  background:#fff;padding:25px;border-radius:15px;
  cursor:pointer;transition:.3s;border:1px solid #eee;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 10px 40px rgba(0,0,0,0.1);
}

/* ukryte */
.more {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  transition: all 0.4s;
}

.more.show {
  visibility: visible;
  height: auto;
  padding: 25px; /* Przywróć padding karty */
  border: 1px solid #eee; /* Przywróć border karty */
  margin: 0; /* Grid sam obsłuży odstępy */
}

/* REALIZACJE */
.realizacje-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.realizacja-card{background:#fff;border-radius:15px;overflow:hidden}
.realizacja-img{width:100%;height:200px;object-fit:cover}
.realizacja-info{padding:20px}

/* KONTAKT */
.contact-wrapper{
  display:grid;grid-template-columns:1fr 1.5fr;
  background:#fff;border-radius:15px;overflow:hidden;
}
.contact-sidebar{
	background-image: url('../image/form.jpg');
	color:#0ea5e9;
	font-size:20px;
	padding:30px;
	  /* KLUCZOWE WŁAŚCIWOŚCI: */
    background-size: cover;    /* Wypełnia cały element, przycinając nadmiar */
    background-position: center; /* Środek zdjęcia zawsze na środku elementu */
    background-repeat: no-repeat; /* Nie powtarza zdjęcia (nie robi "kafelków")*/
	}
.contact-main{padding:30px}
input,textarea{
  width:100%;padding:10px;margin-bottom:15px;
  border:none;border-bottom:2px solid #ddd;
}
.submit-btn{
  background:#0ea5e9;color:#fff;border:none;
  padding:14px;border-radius:10px;width:100%;
}

/* MAPA */
.map-section{height:400px;margin-top:60px}
.map-section iframe{width:100%;height:100%}

/* MODAL */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  display:flex;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;
  transition:.3s;z-index:2000;
}
.modal.active{
  opacity:1;pointer-events:auto;
}
.modal-content{
  background:#fff;padding:30px;border-radius:20px;
  max-width:700px;width:90%;
  transform:scale(.9);transition:.3s;
}
.modal.active .modal-content{transform:scale(1)}
.modal-close{
  float:right;font-size:20px;cursor:pointer;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;margin-top:20px;
}
.gallery img{
  width:100%;height:100px;object-fit:cover;border-radius:8px;
}

/* MOBILE */
@media(max-width:900px){
  .contact-wrapper{grid-template-columns:1fr}
}

/* HAMBURGER */
.hamburger{
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:5px;
  position: relative;
  z-index: 2001;
}
.hamburger span{
  width:25px;
  height:3px;
  background:#fff;
  transition:.3s;
}
/* Zmiana koloru pasków hamburgera na ciemny, gdy header jest "scrolled" */
header.scrolled .hamburger span {
  background: #1e293b;
}



/* MOBILE MENU */
@media(max-width:900px){

  .hamburger{
    display:flex;
  }
  
  .sticky-cta {
    display: block; /* Pokazuje się tylko na telefonach */
  }
  

  nav{
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    height:100vh;
    background:#0f172a;
    flex-direction:column;
    padding:80px 20px;
    transition:.3s;
	z-index: 2000;
  }

  nav.active{
    right:0;
  }
  
  nav .nav-btn {
    /*margin-top: auto;  Przesunie przycisk na sam dół menu mobilnego */
    width: 100%;
    text-align: center;
  }

  nav a{
    display:block;
    margin:15px 0;
    font-size:18px;
	color: #fff !important;
  }
  

}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:3000;
}

.lightbox.active{
  opacity:1;
  pointer-events:auto;
}

.lightbox img{
  max-width:90%;
  max-height:80%;
  border-radius:10px;
  transform:scale(.9);
  transition:.3s;
}

.lightbox.active img{
  transform:scale(1);
}

.lightbox-close{
  position:absolute;
  top:20px;
  right:30px;
  font-size:28px;
  cursor:pointer;
  color:#fff;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  color:#fff;
  cursor:pointer;
  padding:20px;
}

.lightbox-nav.left{left:10px}
.lightbox-nav.right{right:10px}

/* klikalne miniatury */
.gallery img{
  cursor:pointer;
  transition:.3s;
}
.gallery img:hover{
  transform:scale(1.05);
}

.quote-btn{
  display:inline-block;
  background:#0ea5e9;
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
  box-shadow:0 0 20px rgba(14,165,233,0.4);
}

.quote-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(14,165,233,0.7);
}

/* Główne tło loadera */
#loader {
  position: fixed; inset: 0; background: #020617;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 10000; overflow: hidden; transition: opacity 0.8s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

#networkCanvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
#networkCanvas.visible { opacity: 1; }

.smarthome-network { position: relative; width: 100vw; height: 75vh; }

/* HUB (Logo) */
.hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
  width: 130px; height: 130px; background: #0f172a;
  border: 2px solid #0ea5e9; border-radius: 25px;
  display: flex; justify-content: center; align-items: center;
  z-index: 100; box-shadow: 0 0 40px rgba(14, 165, 233, 0.4);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hub.visible { transform: translate(-50%, -50%) scale(1); }
.hub img { width: 85%; }

/* Ikonki (Nodes) */
.node-point {
  position: absolute; width: 55px; height: 55px;
  background: #0f172a; border: 2px solid #1e293b; border-radius: 15px;
  display: flex; justify-content: center; align-items: center;
  color: #fff; font-size: 24px; z-index: 101;
  opacity: 0; transform: scale(4); 
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.node-point.placed { opacity: 1; transform: scale(1); }

/* Pozycje ikon */
.pos-l1 { top: 15%; left: 15%; }
.pos-l2 { top: 50%; left: 10%; margin-top: -27px; }
.pos-l3 { bottom: 15%; left: 18%; }
.pos-r1 { top: 10%; right: 20%; }
.pos-r2 { top: 45%; right: 8%; }
.pos-r3 { bottom: 20%; right: 15%; }

/* Statusy tekstowe */
#status-container { position: absolute; bottom: 10%; text-align: center; }
#status-text { color: #0ea5e9; font-size: 14px; letter-spacing: 4px; text-transform: uppercase; }
.status-building { animation: pulseAnim 1s infinite; }
.status-ready { color: #22c55e !important; text-shadow: 0 0 15px #22c55e; }
@keyframes pulseAnim { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.node-point i {
    filter: drop-shadow(0 0 5px currentColor); /* Ikona zacznie "świecić" swoim kolorem */
    transition: 0.3s;
}

/* Mocniejszy błysk, gdy impuls przelatuje przez ikonę */
.node-point {
	position: absolute;
    background: radial-gradient(circle, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(14, 165, 233, 0.3);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* Styl dla podpisu */
.node-point::after {
    content: attr(data-label); /* Pobiera tekst z HTML */
    position: absolute;
    bottom: -25px; /* Odległość pod ikoną */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #64748b; /* Szary, techniczny kolor */
    font-size: 10px;
    font-family: monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s ease 1s; /* Pojawi się sekundę po ikonie */
}

/* Pokazuje podpis, gdy ikona jest już na miejscu */
.node-point.placed::after {
    opacity: 1;
}