/* =========================================================
   CADTRIX – FINAL STYLE.CSS (SPÓJNE + SEO/UX READY)
   - Premium header + mobile menu
   - Sub-hero premium (gradient 90deg, lewy layout)
   - Mniej pustki między sekcjami
   - Mocniejsze H2 (linia pod tytułem)
   - Karty efektów / karty kontaktu / FAQ
   - Sticky CTA na mobile
========================================================= */

/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:#122335;
  line-height:1.6;
  background:#fff;
  padding-top:140px; /* FIX: fixed header */
}
@media(max-width:768px){
  body{padding-top:120px;}
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* ================= CONTAINER ================= */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ================= HEADER ================= */
header{
  position:fixed;
  top:0;left:0;
  width:100%;
  z-index:2000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 48px;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:all .3s ease;
}
header.is-scrolled{
  padding:10px 48px;
  background:rgba(255,255,255,0.97);
}

.logo{
  display:flex;
  align-items:center;
}
.logo img{
  height:96px;
  width:auto;
  transition:all .3s ease;
}
header.is-scrolled .logo img{
  height:64px;
}

/* NAV */
nav{
  display:flex;
  gap:28px;
  align-items:center;
}
nav a{
  font-weight:500;
  position:relative;
  padding:4px 0;
}
nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:-6px;
  width:0;height:2px;
  background:#0B5ED7;
  border-radius:2px;
  transition:.25s;
}
nav a:hover::after{width:100%;}
nav a:hover{color:#0B5ED7;}

/* HAMBURGER */
.menu-toggle{
  display:none;
  font-size:26px;
  cursor:pointer;
  color:#122335;
}

/* MOBILE NAV */
@media(max-width:768px){
  header{padding:12px 18px;}
  header.is-scrolled{padding:8px 18px;}

  .logo img{height:72px;}
  header.is-scrolled .logo img{height:56px;}

  .menu-toggle{display:block;}

  nav{
    position:absolute;
    top:100%;
    left:18px;
    right:18px;
    background:#fff;
    flex-direction:column;
    gap:16px;
    padding:20px;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    display:none;
  }
  nav.active{display:flex;}
}

/* ================= SEKCJE (FIX: mniej pustki) ================= */
section{padding:60px 0;} /* było za dużo – teraz czytelniej */
@media(max-width:768px){section{padding:46px 0;}}

/* Pierwsza sekcja po hero – mniejszy odstęp */
.sub-hero + section{padding-top:40px;}

/* ================= TYTUŁY SEKCJI (FIX: premium) ================= */
.section-title{
  text-align:center;
  font-size:32px;
  margin-bottom:32px; /* mniej pustki */
  position:relative;
}
.section-title::after{
  content:"";
  display:block;
  width:60px;
  height:4px;
  background:#0B5ED7;
  margin:14px auto 0;
  border-radius:2px;
}
@media(max-width:768px){
  .section-title{font-size:26px;}
}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:12px;
  background:#0B5ED7;
  color:#fff;
  font-weight:600;
  transition:.25s;
  border:none;
}
.btn:hover{background:#084298;}
.btn-dark{backgrounddD}
.btn-dark{background:#122335;}
.btn-dark:hover{background:#0b1623;}

/* ================= HERO (HOME) ================= */
.hero{
  min-height:calc(100vh - 140px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}
.hero h1{font-size:42px;margin-bottom:12px;line-height:1.12;}
.hero p{font-size:20px;color:#1f2f44;margin-bottom:26px;}
@media(max-width:768px){
  .hero h1{font-size:32px;}
  .hero p{font-size:18px;}
}

/* ================= SUB-HERO (PODSTRONY) – PREMIUM ================= */
.sub-hero{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  color:#122335;
  background-size:cover;
  background-position:center;
  padding:120px 0 80px;
}

/* Gradient pod tekstem – przemysłowy vibe */
.sub-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.85) 40%,
    rgba(255,255,255,0.45) 70%,
    rgba(255,255,255,0.10) 100%
  );
  z-index:1;
}

/* Kontent po lewej */
.sub-hero .container{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin-left:8%;
}

/* H1 */
.sub-hero h1{
  font-size:clamp(34px,4vw,48px);
  font-weight:700;
  margin-bottom:14px;
  line-height:1.15;
}

/* Lead */
.sub-hero p{
  max-width:680px;
  font-size:17px;
  line-height:1.6;
  margin-bottom:22px;
  color:#2a3b52;
}

/* CTA premium (FIX #3) */
.sub-hero .btn{
  font-size:15px;
  padding:14px 22px;
}
.sub-hero .btn{
  box-shadow:0 8px 24px rgba(11,94,215,0.25);
}
.sub-hero .btn-dark{
  box-shadow:0 8px 24px rgba(18,35,53,0.22);
}

/* Mobile hero */
@media(max-width:768px){
  .sub-hero{
    min-height:300px;
    padding:100px 0 70px;
  }

  .sub-hero .container{
    margin-left:auto;
    margin-right:auto;
    padding:0 20px;
  }

  .sub-hero::before{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.70) 70%,
      rgba(255,255,255,0.40) 100%
    );
  }
}

/* ================= BLOKI TEKSTU ================= */
.content p{margin:0 0 14px 0;color:#33465f;}
.content ul{padding-left:18px;margin:10px 0 0;}
.content li{margin:8px 0;color:#33465f;}
.content h3{margin:18px 0 10px;color:#122335;}

/* ================= SEKCJA JASNA (tło) ================= */
.services{background:#f5faff;}

/* ================= KARTY: efekty / ogólne ================= */
.effect-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  margin-top:18px;
}
.effect-card{
  background:#f5faff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.effect-card strong{
  display:block;
  margin-bottom:6px;
  font-size:17px;
  color:#122335;
}
.effect-card p{
  margin:0;
  color:#3c4d63;
}

/* ================= CTA BOX (pod sekcjami) ================= */
.cta{
  margin-top:22px;
  padding:18px;
  border-radius:14px;
  background:#f5faff;
  border:1px solid rgba(11,94,215,.15);
}
.cta h3{margin:0 0 8px 0;}
.cta p{margin:0;color:#3c4d63;}

/* ================= FAQ ================= */
.faq{max-width:900px;margin:0 auto;}
.faq details{
  background:#fff;
  border-radius:12px;
  padding:18px 22px;
  margin-bottom:14px;
  box-shadow:0 8px 25px rgba(0,0,0,.06);
}
.faq summary{font-weight:600;cursor:pointer;color:#122335;}
.faq p{margin-top:12px;color:#3c4d63;}

/* ================= CONTACT (karty) ================= */
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:26px;
  align-items:start;
}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
}

.card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;
}
.card-header{
  padding:18px 22px;
  background:#f5faff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.card-header h2{margin:0;font-size:18px;}
.card-body{padding:20px 22px;}

.contact-row{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.contact-row:last-child{border-bottom:none;}
.contact-row i{
  color:#0B5ED7;
  font-size:18px;
  width:22px;
  min-width:22px;
  margin-top:2px;
}
.contact-row strong{color:#122335;}
.contact-row a{
  color:#0B5ED7;
  font-weight:600;
}
.contact-row a:hover{text-decoration:underline;}

/* ================= FOOTER ================= */
footer{
  background:#122335;
  color:#fff;
  padding:46px 20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
footer a{font-weight:600;}
footer a:hover{text-decoration:underline;color:#0B5ED7;}

/* ================= MOBILE CTA ================= */
.mobile-cta{display:none;}
@media(max-width:768px){
  .mobile-cta{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    display:flex;
    gap:12px;
    z-index:3000;
  }
  .mobile-cta a{
    flex:1;
    padding:14px;
    border-radius:16px;
    color:#fff;
    font-weight:600;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.20);
  }
  .mobile-cta a:first-child{background:#122335;}
  .mobile-cta a:last-child{background:#0B5ED7;}
  body{padding-bottom:90px;}
}