/* ------------------- */
/* Custom Properties   */
/* ------------------- */
:root {
   --color-primary: #212529;
   --color-accent: #E6A349;
   --color-accent-dark: #d18f3a;
   --color-light: #F8F9FA;
   --color-white: #FFFFFF;
   --color-text: #343a40;
   --color-text-light: #6c757d;
   --color-border: #dee2e6;
   --color-error: #dc3545;
   --color-success: #28a745;

   --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

   --container-width: 1200px;
   --spacing-unit: 1rem;
   --border-radius: 8px;
   --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
   --transition-speed: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   --slider-transition: 0.5s ease-in-out;
}

/* ------------------- */
/* Reset & Base        */
/* ------------------- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   font-size: 100%;
   scroll-padding-top: 100px;
}

body {
   font-family: var(--font-family);
   line-height: 1.7;
   color: var(--color-text);
   background-color: var(--color-white);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Blokada przewijania tła gdy menu jest otwarte */
body.body-nav-open {
   overflow: hidden;
   height: 100vh;
   touch-action: none;
   /* Dla mobile */
}

img,
picture,
svg,
video {
   display: block;
   max-width: 100%;
}

/* ------------------- */
/* Utility Classes     */
/* ------------------- */
.container {
   width: 90%;
   max-width: var(--container-width);
   margin-inline: auto;
}

section {
   padding-block: clamp(3rem, 10vh, 5rem);
}

.section-title {
   text-align: center;
   margin-bottom: 3rem;
}

.section-title h2 {
   font-size: clamp(2rem, 5vw, 2.5rem);
   color: var(--color-primary);
   margin-bottom: 0.5rem;
}

.section-title p {
   font-size: 1.125rem;
   color: var(--color-text-light);
   max-width: 65ch;
   margin-inline: auto;
}

.btn {
   display: inline-block;
   padding: 0.8rem 2rem;
   border-radius: var(--border-radius);
   text-decoration: none;
   font-weight: 600;
   transition: transform var(--transition-speed), background-color var(--transition-speed), color var(--transition-speed);
   border: 2px solid transparent;
   cursor: pointer;
   text-align: center;
}

.btn-primary {
   background-color: var(--color-accent);
   color: var(--color-white);
}

.btn-primary:hover {
   background-color: var(--color-accent-dark);
   transform: translateY(-3px);
}

.btn-secondary {
   background-color: transparent;
   color: var(--color-primary);
   border-color: var(--color-accent);
}

.btn-secondary:hover {
   background-color: var(--color-accent);
   color: var(--color-white);
}

.btn-primary-nav {
   background-color: var(--color-accent);
   color: var(--color-white);
   padding: 0.5rem 1.25rem;
}

/* ------------------- */
/* Header              */
/* ------------------- */
.header {
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 1000;
   background-color: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--color-border);
   padding: var(--spacing-unit) 0;
   transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.header.scrolled {
   background-color: rgba(255, 255, 255, 0.98);
   box-shadow: var(--box-shadow);
   border-bottom-color: transparent;
}

.header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   font-size: 1.5rem;
   font-weight: 800;
   color: var(--color-primary);
   text-decoration: none;
   z-index: 1002;
   /* Powyżej menu mobilnego */
   position: relative;
}

.logo span {
   color: var(--color-accent);
}

.nav-links {
   list-style: none;
   display: flex;
   align-items: center;
   gap: calc(var(--spacing-unit) * 2);
}

.nav-link {
   color: var(--color-primary);
   text-decoration: none;
   font-weight: 500;
   position: relative;
   padding-bottom: 5px;
}

.nav-link::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 2px;
   background-color: var(--color-accent);
   transition: width var(--transition-speed);
}

.nav-link:hover::after,
.nav-link.active::after {
   width: 100%;
}

.nav-link.active {
   color: var(--color-accent);
}

.hamburger {
   display: none;
   cursor: pointer;
   background: none;
   border: none;
   z-index: 1002;
   /* Powyżej menu mobilnego */
   padding: 10px;
   position: relative;
}

.hamburger span {
   display: block;
   width: 25px;
   height: 3px;
   margin: 5px 0;
   background-color: var(--color-primary);
   transition: all var(--transition-speed);
   border-radius: 3px;
}

/* ------------------- */
/* Hero Section        */
/* ------------------- */
.hero {
   background-color: var(--color-primary);
   color: var(--color-white);
   text-align: center;
   padding-block: clamp(5rem, 20vh, 10rem);
   position: relative;
   overflow: hidden;
   /* Dodanie lekkiego gradientu dla lepszego wyglądu */
   background: linear-gradient(135deg, #212529 0%, #2b3035 100%);
}

.hero-content {
   position: relative;
   z-index: 2;
}

.hero-title {
   font-size: clamp(2.5rem, 6vw, 4rem);
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 1rem;
}

.slogan {
   font-size: 1.25rem;
   color: rgba(255, 255, 255, 0.85);
   margin-bottom: 2.5rem;
   max-width: 60ch;
   margin-inline: auto;
}

.cta-buttons {
   display: flex;
   justify-content: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.hero .btn-secondary {
   color: var(--color-white);
   border-color: var(--color-accent);
}

/* ------------------- */
/* Services Section    */
/* ------------------- */
.services {
   background-color: var(--color-light);
}

.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: calc(var(--spacing-unit) * 2);
}

.service-card {
   background-color: var(--color-white);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   padding: calc(var(--spacing-unit) * 2);
   text-align: center;
   border-top: 4px solid var(--color-accent);
   transition: transform var(--transition-speed), box-shadow var(--transition-speed);
   height: 100%;
}

.service-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.service-card .icon {
   line-height: 1;
   margin-bottom: 1rem;
   display: inline-block;
   color: var(--color-accent);
}

.service-card .icon svg {
   width: 48px;
   height: 48px;
   stroke-width: 1.5px;
}

.service-card h3 {
   color: var(--color-primary);
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
}

/* ------------------- */
/* B2B Section         */
/* ------------------- */
.b2b-section {
   background-color: var(--color-white);
}

.b2b-section .about-content {
   max-width: 900px;
   margin: 0 auto;
}

.b2b-section .advantages-list li {
   font-weight: 400;
}


/* ------------------- */
/* Portfolio Section   */
/* ------------------- */
.portfolio {
   background-color: var(--color-white);
}

.portfolio-item {
   border-radius: var(--border-radius);
   overflow: hidden;
   position: relative;
   cursor: pointer;
}

.portfolio-item::after {
   content: '🔍';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.8);
   font-size: 2.5rem;
   color: var(--color-white);
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 50%;
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: all var(--transition-speed);
}

.portfolio-item:hover::after {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
}

.portfolio-item img {
   width: 100%;
   height: 500px;
   object-fit: cover;
   transition: transform var(--transition-speed), filter var(--transition-speed);
}

.portfolio-item:hover img {
   transform: scale(1.05);
   filter: brightness(0.8);
}

/* ------------------- */
/* Kariera Section     */
/* ------------------- */
.kariera-content {
   max-width: 800px;
   margin: 0 auto;
   background-color: var(--color-white);
   padding: 2.5rem;
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
}

.kariera-content h3 {
   color: var(--color-primary);
   font-size: 1.75rem;
   margin-bottom: 0.5rem;
   text-align: center;
}

/* ------------------- */
/* Portfolio Slider    */
/* ------------------- */
.portfolio-slider-container {
   position: relative;
   max-width: 1000px;
   margin: 0 auto;
   padding-bottom: 2rem;
}

.portfolio-slider {
   overflow: hidden;
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
}

.slider-track {
   display: flex;
   transform: translateX(var(--slide-translation, 0%));
   transition: transform var(--slider-transition);
}

.slide {
   min-width: 100%;
   flex-shrink: 0;
}

.slide .portfolio-item {
   margin-bottom: 0;
   border-radius: 0;
}

.slider-btn {
   background-color: rgba(0, 0, 0, 0.3);
   border: none;
   font-family: inherit;
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   padding: 1rem;
   color: white;
   font-weight: bold;
   font-size: 2rem;
   transition: 0.3s;
   user-select: none;
   -webkit-user-select: none;
   z-index: 10;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}

.slider-btn:hover {
   background-color: rgba(0, 0, 0, 0.6);
   color: var(--color-accent);
}

.slider-prev {
   left: 1rem;
}

.slider-next {
   right: 1rem;
}

.slider-dots {
   text-align: center;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}

.slider-dot {
   cursor: pointer;
   height: 12px;
   width: 12px;
   margin: 0 5px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color var(--transition-speed);
   border: none;
   padding: 0;
}

.slider-dot.active,
.slider-dot:hover {
   background-color: var(--color-accent);
}


/* ------------------- */
/* About Section       */
/* ------------------- */
.about {
   background-color: var(--color-light);
}

.about-content {
   display: grid;
   grid-template-columns: 1fr;
   gap: calc(var(--spacing-unit) * 3);
   align-items: center;
   max-width: 800px;
   margin: 0 auto;
}

.advantages-list {
   list-style: none;
   padding-left: 0;
   margin-top: 1.5rem;
}

.advantages-list li {
   position: relative;
   padding-left: 30px;
   margin-bottom: 1rem;
   font-weight: 500;
}

.advantages-list li::before {
   content: '✔';
   position: absolute;
   left: 0;
   color: var(--color-accent);
   font-weight: bold;
}

/* ------------------- */
/* Contact Section     */
/* ------------------- */
.contact {
   background-color: var(--color-white);
}

.contact-wrapper {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: calc(var(--spacing-unit) * 3);
}

.contact-form .form-group {
   margin-bottom: 1.5rem;
   display: flex;
   flex-direction: column;
}

.form-group.honeypot {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 0;
   width: 0;
   z-index: -1;
}


.contact-form label {
   margin-bottom: 0.5rem;
   font-weight: 600;
   color: var(--color-primary);
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   padding: 0.8rem 1rem;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   font-family: var(--font-family);
   font-size: 1rem;
   transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
   outline: none;
   border-color: var(--color-accent);
   box-shadow: 0 0 0 3px rgba(230, 163, 73, 0.25);
}

.contact-form textarea {
   resize: vertical;
}

.error-message {
   color: var(--color-error);
   font-size: 0.875rem;
   margin-top: 0.25rem;
   min-height: 1.2em;
}

.form-group input.invalid,
.form-group textarea.invalid {
   border-color: var(--color-error);
}

#form-status {
   margin-top: 1rem;
   font-weight: 600;
}

#form-status.success {
   color: var(--color-success);
}

#form-status.error {
   color: var(--color-error);
}

.contact-info {
   background-color: var(--color-light);
   padding: 2rem;
   border-radius: var(--border-radius);
}

.contact-info h3 {
   color: var(--color-primary);
}

.contact-info ul {
   list-style: none;
   margin-top: 1rem;
}

.contact-info li {
   margin-bottom: 1rem;
}

.contact-info a {
   color: var(--color-accent);
   text-decoration: none;
   font-weight: 600;
   overflow-wrap: break-word;
   /* Zabezpieczenie przed długimi emailami */
}

.contact-info a:hover {
   text-decoration: underline;
}

.map-container {
   width: 100%;
   height: 300px;
   border-radius: var(--border-radius);
   overflow: hidden;
   margin-top: 2rem;
   box-shadow: var(--box-shadow);
   background-color: #eee;
   /* Placeholder color */
}

.map-container iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}


/* ------------------- */
/* Footer              */
/* ------------------- */
.footer {
   background-color: var(--color-primary);
   color: var(--color-light);
   padding: calc(var(--spacing-unit) * 3) 0;
   text-align: center;
}

.footer-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.5rem;
}

.footer .logo {
   color: var(--color-white);
   z-index: 1;
}

.social-links {
   display: flex;
   gap: 1.5rem;
}

.social-links a {
   color: var(--color-white);
   transition: color var(--transition-speed), transform var(--transition-speed);
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.social-links a:hover {
   color: var(--color-accent);
   transform: scale(1.1);
}

.social-links a svg {
   width: 100%;
   height: 100%;
}

.copyright {
   margin-top: 1rem;
   font-size: 0.9rem;
   color: var(--color-text-light);
}

/* ------------------- */
/* Scroll to Top Button*/
/* ------------------- */
.scroll-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 50px;
   height: 50px;
   background-color: var(--color-accent);
   color: var(--color-white);
   border: none;
   border-radius: 50%;
   font-size: 1.5rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: opacity var(--transition-speed), visibility var(--transition-speed), transform var(--transition-speed);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   z-index: 900;
}

.scroll-to-top.visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* ------------------- */
/* Lightbox Modal      */
/* ------------------- */
.lightbox-modal {
   display: none;
   position: fixed;
   z-index: 2000;
   padding-top: 60px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.95);
}

.lightbox-modal[aria-hidden="true"] {
   display: none;
}

.lightbox-modal[aria-hidden="false"] {
   display: block;
}

.lightbox-content {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 900px;
   max-height: 80vh;
   object-fit: contain;
   animation: zoomIn 0.3s;
}

@keyframes zoomIn {
   from {
      transform: scale(0.9);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

.lightbox-close {
   background: none;
   border: none;
   font-family: inherit;
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
   cursor: pointer;
   z-index: 2001;
   line-height: 1;
   padding: 10px;
}

.lightbox-close:hover,
.lightbox-close:focus {
   color: var(--color-accent);
}

.lightbox-prev,
.lightbox-next {
   background: none;
   border: none;
   font-family: inherit;
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: auto;
   padding: 1rem;
   color: white;
   font-weight: bold;
   font-size: 2.5rem;
   transition: 0.3s;
   user-select: none;
   -webkit-user-select: none;
   z-index: 2001;
}

.lightbox-prev {
   left: 0;
}

.lightbox-next {
   right: 0;
}

.lightbox-prev:hover,
.lightbox-next:hover {
   color: var(--color-accent);
}


/* ------------------- */
/* Klasy pomocnicze    */
/* ------------------- */
.mt-1-5 {
   margin-top: 1.5rem;
}

.mt-2 {
   margin-top: 2rem;
}

.mb-2 {
   margin-bottom: 2rem;
}

.justify-start {
   justify-content: flex-start;
}

.text-center {
   text-align: center;
}

#kariera .job-title {
   text-align: center;
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--color-primary);
}

#kariera .job-location {
   text-align: center;
   margin-bottom: 2rem;
}

#kariera .job-apply-prompt {
   margin-top: 2rem;
   text-align: center;
   font-size: 1.1rem;
   color: var(--color-text-light);
   max-width: 60ch;
   margin-inline: auto;
}

/* ------------------- */
/* A11y & Motion       */
/* ------------------- */
@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }

   .slider-track {
      transition: none;
   }
}

.btn:focus-visible,
.nav-link:focus-visible,
.hamburger:focus-visible,
.slider-btn:focus-visible,
.slider-dot:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible,
.lightbox-close:focus-visible,
.scroll-to-top:focus-visible,
.social-links a:focus-visible {
   outline: 3px solid var(--color-accent);
   outline-offset: 3px;
   box-shadow: 0 0 0 4px var(--color-white);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
   outline: none;
}


/* ------------------- */
/* RESPONSYWNOŚĆ (Mobile) */
/* ------------------- */

@media (max-width: 992px) {

   .about-content,
   .contact-wrapper {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 768px) {

   /* --- MOBILE NAVIGATION REWORK (FULL SCREEN) --- */
   .nav-links {
      position: fixed;
      top: 0;
      left: 0;
      /* Full screen width */
      width: 100%;
      height: 100vh;
      background-color: rgba(255, 255, 255, 0.98);
      /* Mniej przeźroczyste */
      backdrop-filter: blur(15px);
      /* Efekt szkła */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      gap: 2.5rem;
      /* Większe odstępy */

      /* Animacja wjazdu */
      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px);
      /* Delikatne przesunięcie */
      transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
      z-index: 1001;
   }

   .nav-links.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   .nav-link {
      font-size: 1.5rem;
      /* Duża czcionka dla palca */
      color: var(--color-primary);
      width: 100%;
      text-align: center;
      display: block;
      padding: 10px 0;
   }

   .nav-link:hover,
   .nav-link:focus {
      color: var(--color-accent);
   }

   /* Przycisk Wycena w menu mobilnym */
   .nav-links .btn-primary-nav {
      margin-top: 1rem;
      width: 80%;
      /* Szeroki przycisk */
      max-width: 300px;
      padding: 1rem;
      font-size: 1.2rem;
      background-color: var(--color-accent);
      color: white;
      border-radius: 50px;
      /* Nowoczesny kształt */
      box-shadow: 0 5px 15px rgba(230, 163, 73, 0.4);
   }

   /* --- HAMBURGER ANIMATION --- */
   .hamburger {
      display: block;
   }

   .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
      background-color: var(--color-primary);
   }

   .hamburger.active span:nth-child(2) {
      opacity: 0;
   }

   .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
      background-color: var(--color-primary);
   }

   /* --- INNE POPRAWKI MOBILNE --- */
   .portfolio-item img {
      height: 250px;
      /* Mniejsze zdjęcia na mobile */
   }

   .slider-btn {
      font-size: 1.2rem;
      width: 40px;
      height: 40px;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.5);
      /* Bardziej widoczne */
   }

   .slider-prev {
      left: 0;
      border-radius: 0 50% 50% 0;
   }

   .slider-next {
      right: 0;
      border-radius: 50% 0 0 50%;
   }

   .slider-dot {
      width: 12px;
      height: 12px;
      margin: 0 8px;
      /* Łatwiej trafić */
   }

   .lightbox-content {
      width: 95%;
   }

   .lightbox-prev,
   .lightbox-next {
      font-size: 2rem;
      padding: 1rem;
      background-color: rgba(0, 0, 0, 0.3);
      /* Tło pod strzałkami */
      height: 100%;
      /* Cała wysokość klikalna */
      display: flex;
      align-items: center;
   }

   .lightbox-prev {
      left: 0;
   }

   .lightbox-next {
      right: 0;
   }

   .lightbox-close {
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
   }
}

@media print {
   body {
      background-color: var(--color-white);
      color: #000;
   }

   .header,
   .hero .cta-buttons,
   .contact-form,
   .contact-info,
   .footer,
   .scroll-to-top,
   .lightbox-modal,
   .portfolio-slider-container {
      display: none;
   }

   section {
      padding: 2rem 0;
      box-shadow: none;
      border: none;
   }

   h1,
   h2,
   h3,
   a {
      color: #000;
   }

   .service-card {
      box-shadow: none;
      border: 1px solid var(--color-border);
   }
}