/* =========================================
   GLOBAL
   ========================================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  overflow: hidden; /* scroll wyłącznie w #content */
  background: #2D3037;
  color: #fff;
}

/* =========================================
   LEFT MENU (FIXED)
   ========================================= */
#left_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: #2D3037;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1000;
}

/* logo */
#site_logo { padding: 40px; }
#site_logo img { width: 100%; height: auto; display: block; }

/* =========================================
   MAIN MENU
   ========================================= */
#main_menu { width: 100%; font-size: 13px; text-transform: uppercase; }
#main_menu ul { list-style: none; margin: 0; padding: 0; }
#main_menu li { border-top: 1px solid #3F464E; }
#main_menu li:last-child { border-bottom: 1px solid #3F464E; }

/* link zajmuje całe li, tło/hover/active na <a> */
#main_menu a.menu-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 15% 15px 15%;
  text-align: right;
  color: #fff;
  text-decoration: none;
  background-color: transparent;
  transition: background-color .6s ease, color .3s ease;
}
#main_menu a.menu-link:hover { background-color: #3F464E; color: #ed324a; }
#main_menu a.menu-link.active { background-color: #ed324a; color: #fff; font-weight: 700; }

/* =========================================
   CONTACT (BOTTOM OF MENU)
   ========================================= */
#quick_contact { background: #3F464E; padding: 16px 20px; }
#quick_contact a { color: #fff; text-decoration: none; }
#quick_contact div { margin: 8px 0; }
#phone, #mail { background-repeat: no-repeat; background-size: 18px 18px; padding-left: 40px; line-height: 20px; }
#phone { background-image: url('../images/phone.png'); }
#mail  { background-image: url('../images/email.png'); }

/* =========================================
   CONTENT AREA (SCROLLER + SNAP)
   ========================================= */
#content {
  position: relative;
  margin-left: 250px;              /* miejsce na lewy panel */
  width: calc(100vw - 250px);
  height: 100vh;
  background: #fff;
  color: #000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* snap */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* =========================================
   SECTIONS (FULLSCREEN + BACKGROUND IMAGE)
   ========================================= */
/* >>> jedyna definicja .section (usunęliśmy dublę 400px) */
.section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;

  /* snap */
  scroll-snap-align: start;
  scroll-snap-stop: always;

  /* tło obrazka – index.php ustawia inline background-image gdy half_bg=off */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
    
    
}

/* kontener na treść w sekcji */
.section .section-content { position: relative; z-index: 1; height: 100%; }

/* jeśli kiedyś użyjesz pełnoekranowego diva jako tła (poza half-bg) */
.section .section-content > .section-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  pointer-events: none; /* tło nie łapie klików */
}

/* =========================================
   HALF-BG (tło w środku .section-content, 50/50)
   ========================================= */
.section.half-bg{ background:none !important; }
.section.half-bg .section-content{ position:relative; display:flex; }
.section.half-bg .section-content > .section-bg{
  position:relative; z-index:0; flex:0 0 50%; min-height:inherit;
}
.section.half-bg.bg-left  .section-content{ flex-direction:row; }
.section.half-bg.bg-right .section-content{ flex-direction:row-reverse; }
.section.half-bg .section-content > *:not(.section-bg){
  position:relative; z-index:1; flex:1;
  padding:clamp(24px,5vw,64px); display:flex; align-items:center;
}

/* =========================================
   UTIL / RWD
   ========================================= */
@media (max-width: 900px) {
  #site_logo { padding: 24px; }
}
@media (max-width: 700px) {
  #left_menu { width: 220px; }
  #content   { margin-left: 220px; width: calc(100vw - 220px); }
  #main_menu a.menu-link { padding: 14px 12%; }
}
@media (max-width: 520px) {
  #left_menu { width: 200px; }
  #content   { margin-left: 200px; width: calc(100vw - 200px); }
}

/* =========================================
   DODATKOWY LAYOUT: prawa kolumna (nie używamy klas tła!)
   ========================================= */
.two-col{ display:flex; gap:24px; }
.two-col .left{ flex:1 1 auto; min-width:0; }
.two-col .right{ flex:0 0 280px; margin-left:auto; display:flex; flex-direction:column; gap:12px; }

/* =========================================
   HOME HERO (layout z kaflami)
   ========================================= */
.section--home{
  background-color:#000;
}
.home-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:24px;
  box-sizing:border-box;
  gap:16px;
  position:relative;
}
.home-badge{
  align-self:flex-end;
  background:#ed324a;
  color:#fff;
  padding:24px 28px;
  border-radius:0;
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
  max-width:420px;
  position:absolute;
  left:0;
  bottom:0;
}
.home-badge__title{
  font-size:26px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.home-badge__btn{
  display:inline-flex;
  padding:12px 18px;
}
.home-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  width:350px;
  box-sizing:border-box;
  position:absolute;
  top:0;
  right:0;
}
.home-cta__top{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#ed324a;
  color:#fff;
  text-decoration:none;
  padding:12px 16px;
  border-radius:0;
  font-weight:700;
  letter-spacing:0.02em;
  box-shadow:0 10px 26px rgba(0,0,0,0.22);
  width:100%;
  box-sizing:border-box;
  margin:0;
}
.home-cta__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  width:100%;
  box-sizing:border-box;
}
.home-cta__tile{
  background:#2d3037;
  color:#fff;
  padding:0;
  border-radius:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  aspect-ratio:1 / 1;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  font-weight:700;
  letter-spacing:0.01em;
  text-align:center;
}
.home-cta__tile:nth-child(1){ background:#2d3037; color:#fff; }
.home-cta__tile:nth-child(2){ background:#4a5057; color:#fff; }
.home-cta__tile:nth-child(3){ background:#4a5057; color:#fff; }
.home-cta__tile:nth-child(4){ background:#2d3037; color:#fff; }
.home-cta__icon{
  font-size:22px;
}

@media (max-width: 960px){
  .home-hero{ flex-direction:column; align-items:flex-start; padding:24px; }
  .home-cta{
    position:static;
    align-items:flex-start;
    width:100%;
  }
  .home-cta__grid{ width:100%; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}
/* =========================================
   SEKCJA: OFERTA/TECHNOLOGIA (układ z makiety)
   ========================================= */
.section--oferta, .section--technologia{
  background:#f5f5f5;
  color:#2d3037;
}
.section--oferta .section-content, .section--technologia .section-content{
  padding:clamp(24px,4vw,48px) clamp(24px,5vw,72px);
  box-sizing:border-box;
}
.section--oferta .section-content{
  padding:0;
}
.section--oferta .tech-left,
.section--oferta .tech-hero,
.section--oferta .benefit-card,
.section--oferta .tech-hero-cta{
  border-radius:0 !important;
}
.tech-layout{
  display:grid;
  grid-template-columns:60% 40%;
  gap:clamp(20px,3vw,36px);
  min-height:calc(100vh - 2px);
}
.section--oferta .tech-layout{
  grid-template-columns:1fr 1fr;
  gap:0;
}
.section--oferta .tech-right{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:0;
}
.section--oferta .tech-hero{
  flex:0 0 50%;
  height:50%;
  min-height:50%;
  width:100%;
  border-radius:0;
}
.section--oferta .tech-benefits{
  flex:1;
  width:100%;
  height:50%;
}
.tech-left{
  background:#fff;
  border-radius:12px;
  padding:clamp(20px,3vw,36px);
  box-shadow:0 14px 40px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:clamp(12px,2vw,18px);
}
.tech-kicker{
  display:inline-block;
  padding:8px 14px;
  background:#ed324a;
  color:#fff;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:6px;
  font-weight:700;
}
.tech-title{
  margin:0;
  font-size:clamp(26px,3vw,34px);
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.tech-body p{
  margin:0 0 14px 0;
  line-height:1.8;
}
.tech-body strong{ font-weight:700; }
.tech-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:auto;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:8px;
  font-weight:700;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.05em;
  text-decoration:none;
  border:2px solid transparent;
  transition:all .2s ease;
}
.btn-primary{
  background:#ed324a;
  color:#fff;
  border-color:#ed324a;
}
.btn-primary:hover{ background:#c51e32; border-color:#c51e32; }
.btn-ghost{
  background:#fff;
  color:#2d3037;
  border-color:#2d3037;
}
.btn-ghost:hover{ background:#2d3037; color:#fff; }

.tech-right{
  display:flex;
  flex-direction:column;
  gap:clamp(12px,2vw,18px);
}
.tech-hero{
  position:relative;
  min-height:320px;
  border-radius:12px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  box-shadow:0 14px 40px rgba(0,0,0,0.12);
}
.tech-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(237,50,74,0.68) 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode:multiply;
}
.tech-hero-label{
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  padding:18px 20px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:14px;
}
.tech-hero-cta{
  position:absolute;
  right:16px;
  top:16px;
  padding:10px 14px;
  background:#ed324a;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:6px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:11px;
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
}
.tech-hero-cta:hover{ background:#c51e32; }

.tech-benefits{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
}
.benefit-card{
  background:#2d3037;
  color:#fff;
  min-height:120px;
  border-radius:10px;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
}
.benefit-card:nth-child(1){ background:#ed324a; }
.benefit-card:nth-child(2){ background:#2d3037; }
.benefit-card:nth-child(3){ background:#f5f5f5; color:#2d3037; }
.benefit-card:nth-child(4){ background:#fff; color:#2d3037; }
.benefit-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid currentColor;
  font-weight:800;
  font-size:13px;
}
.benefit-label{
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:12px;
}

@media (max-width: 1024px){
  .tech-layout{ grid-template-columns:1fr; }
  .tech-right{ order:-1; }
}
@media (max-width: 640px){
  .tech-actions{ flex-direction:column; }
  .benefit-card{ min-height:110px; }
}