html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0a0a0a;
  color: #e0e0e0;
  overflow-x: hidden;
}
header, nav, main, footer {
  padding: 2rem;
}
.logo-text {
  display: flex;
  align-items: center;  
  gap: 15px;            
}

.logo {
  width: 50px;  
  height: auto;
}

nav {
  display: flex;
  gap: 1.5rem;
  background-color: #111;
  border-bottom: 1px solid #333;
  flex-wrap: wrap;
}
nav a {
  color: #00e5ff;
  text-decoration: none;
  transition: color 0.3s;
}
nav a:hover {
  color: #00ffff;
  text-shadow: 0 0 8px #00e5ff;
}
section {
  margin-bottom: 4rem;
}
h1, h2, h3 {
  color: #00e5ff;
}

/* SEKTORY */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.sector-card {
  background: linear-gradient(145deg, #1b1b1b, #141414);
  border: 1px solid #2c2c2c;
  border-radius: 12px;
  padding: 1.5rem;
  min-height: 220px;
  box-shadow: 0 4px 12px rgba(0, 229, 255, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sector-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 229, 255, 0.3);
}

/* FORMULARZ */
form {
  background-color: #111;
  padding: 2rem;
  border-radius: 12px;
  max-width: 500px;
  border: 1px solid #2c2c2c;
  margin-bottom: 2rem;
}
form input, form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background-color: #0a0a0a;
  border: 1px solid #333;
  color: #e0e0e0;
  border-radius: 8px;
  resize: none;
}
form button {
  background-color: #0a0a0a;
  border: 1px solid #333;
  color: #e0e0e0;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 229, 255, 0.3);
}


/* IKONY KONTAKTOWE */
.contact-icons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.icon-box {
  width: 50px;
  height: 50px;
  background-color: #111;
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
.icon {
  font-size: 1.8rem;
  color: #00e5ff;
  transition: transform 0.3s ease, color 0.3s ease;
}
.icon:hover {
  transform: scale(1.2);
  color: #00ffff;
  text-shadow: 0 0 10px #00e5ff;
}
.icon-box img {
  width: 60%;
  height: auto;
  object-fit: contain;
  display: block;  
  transition: transform 0.3s ease, filter 0.3s ease;  
}

.icon-box img {
  background: transparent !important;
}

.icon-box img:hover {
  transform: scale(1.2);
  filter: brightness(1.0);
  filter: drop-shadow(0 0 3px #00e5ff) drop-shadow(0 0 5px #00ffff);
}

.icon-box img {
  background-color: transparent;
}

/* PORTFOLIO */
.portfolio-flex {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.portfolio-flex p {
  max-width: 600px;
  flex: 1;
  word-break: break-word;
}
.portfolio-flex img {
  max-width: 300px;
  border-radius: 12px;
}

/* ANIMACJE */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* WAVE BACKGROUND */
header {
  position: relative;
  overflow: hidden;
}
header svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.photo-frame {
  border: 2px solid #00e5ff;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 0 8px #00e5ff, 0 0 20px #00ffff;
  max-width: 400px;
}

/* PARTICLES */
#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.neon {
  color: #00e5ff;
  text-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff, 0 0 20px #00ffff;
}
h1.neon {
  font-family: 'Quantico', sans-serif;
}

@media (max-width: 768px) {
  .portfolio-flex {
    flex-direction: column;
  }
}
#status-message {
      display: none;
      padding: 10px;
      border-radius: 5px;
      margin-top: 15px;
      max-width: 500px;
      box-sizing: border-box;
      opacity: 1;
      transition: opacity 1s ease;
    }

    #status-message.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    #status-message.error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }