/* =========================
   GLOBAL
========================= */

:root{
  --bg-main:#edf1f7;
  --bg-light:#e6eaf1;
  --bg-dark:#0f1724;
  --bg-darker:#0b1220;
  --brand:#0d6efd;
  --brand-soft:#e2ecff;
  --text-main:#0f1724;
  --text-muted:#64748b;
  --card-bg:#ffffff;
  --radius:16px;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Poppins",sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
}

a{
  color:var(--brand);
}

.muted{
  color:var(--text-muted);
}

.subtle{
  color:#6b7280;
}

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

.site-nav{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #dde3ee;
}

.brand-title{
  font-weight:700;
  letter-spacing:-0.4px;
}

.nav-link{
  font-weight:500;
}

@media (max-width: 991px) {
  /* Wymusza wyrównanie wszystkich elementów listy do lewej */
  .navbar-nav {
    align-items: flex-start !important;
    padding-top: 15px;
  }

  /* Ustawia linki, aby zaczynały się dokładnie od tej samej linii */
  .nav-item {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 5px 0;
  }

  /* Opcjonalnie: wyrównanie przycisku Kontakt do lewej strony */
  .nav-item .btn {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
  }
}

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

.hero{
  padding:140px 0 100px;
  background:linear-gradient(
    135deg,
    #0f1724 0%,
    #13203a 60%,
    #0d6efd 160%
  );
  color:#fff;
}

.hero .lead{
  color:#cbd5e1;
}

.cta-btn{
  background:linear-gradient(90deg,#0d6efd,#3b82f6);
  border:none;
  color:#fff;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
}

.more-block{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--radius);
  padding:24px;
}
.more-block h5{
  color:black;
}

.more-block p{
  color: black;
}

.plat-chip{
  background:rgba(255,255,255,0.12);
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
}

.navbar .btn-realizacja {
    display: inline-block !important;
    background: linear-gradient(90deg, #ff7a18, #af002d) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 25px;
    padding: 8px 20px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    border: none;
}
.navbar .btn-realizacja:hover {
    background: linear-gradient(90deg, #af002d, #ff7a18) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    color: #fff !important;
}



/* =========================
   SECTIONS
========================= */

section{
  position:relative;
}

/* SERVICES */

#services{
  background:var(--bg-light);
}

.section-title{
  font-weight:700;
  font-size:1.8rem;
}

.sep{
  display:inline-block;
  width:48px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#0d6efd,#60a5fa);
}

/* SERVICE CARDS */

.service-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(15,23,42,0.14);
}

.service-badge{
  background:linear-gradient(90deg,#0d6efd,#3b82f6);
  color:#fff;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
}

/* =========================
   PLATFORMS
========================= */

#platforms{
  background:linear-gradient(
      135deg,
    #0f1724 0%,
    #13203a 60%,
    #0d6efd 160%
  );
}

.gradient-panel{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
}

.gradient-panel .title{
  font-weight:600;
}

/* =========================
   ABOUT
========================= */

#o-nas{
  background:var(--bg-main);
}

/* =========================
   FAQ – FULL BLUE PREMIUM
========================= */

section.bg-light:has(.faq){
  background:linear-gradient(
      135deg,
    #0f1724 0%,
    #13203a 60%,
    #0d6efd 160%
  );
}

/* Wrapper */
.faq{
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(14px);
  border-radius:20px;
  padding:24px;
  box-shadow:
    0 30px 60px rgba(15,23,42,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* Accordion item */
.faq .accordion-item{
  background:transparent;
  border:none;
  overflow:hidden;
}

/* Button (QUESTION) */
.faq .accordion-button{
  background:rgba(255,255,255,0.18);
  color:#ffffff;
  font-weight:600;
  border-radius:14px;
  padding:18px 20px;
  transition:
    background .35s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

/* Hover effect */
.faq .accordion-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(15,23,42,0.25);
  background:rgba(255,255,255,0.25);
}

/* Active (opened) */
.faq .accordion-button:not(.collapsed){
  background:linear-gradient(
    135deg,
    #1d4ed8,
    #2563eb
  );
  box-shadow:
    0 18px 40px rgba(15,23,42,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* Remove Bootstrap focus */
.faq .accordion-button:focus{
  box-shadow:none;
}

/* Arrow */
.faq .accordion-button::after{
  filter:invert(1);
  transition:transform .35s ease;
}

/* Rotate arrow */
.faq .accordion-button:not(.collapsed)::after{
  transform:rotate(180deg);
}

/* BODY (ANSWER) */
.faq .accordion-body{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.08)
  );
  color:#eaf2ff;
  font-size:0.95rem;
  line-height:1.6;
  padding:18px 20px 22px;
  border-radius:0 0 14px 14px;

  animation:faqFade .45s ease;
}

/* Animation */
@keyframes faqFade{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Spacing between items */
.faq .accordion-item + .accordion-item{
  margin-top:14px;
}

/* Title above FAQ */
section.bg-light .section-title,
section.bg-light .subtle{
  color:#ffffff;
}

/* Separator */
section.bg-light .sep{
  background:rgba(255,255,255,0.8);
}

/* =========================
   CONTACT
========================= */

#kontakt{
  background:var(--bg-light);
}

.contact-card{
  background:#fff;
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 12px 30px rgba(15,23,42,0.1);
}


.contact-side{
  padding-top: 8px;
}

.contact-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list li{
  margin-bottom: 8px;
}


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

footer{
  background:var(--bg-darker);
  color:#9ca3af;
  padding:40px 0;
}

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