:root{
  --primary:#09263C;
  --primary2:#102D44;
  --bg:#F5F5F5;
  --bg2:#EEF2F5;
  --text:#0F172A;
  --accent:#3B82F6;
  --card:#FFFFFF;
  --radius:18px;
  --shadow: 0 10px 30px rgba(2, 6, 23, .10);
  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:72px 0}
.section.alt{background:var(--bg2)}
.muted{opacity:.8}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:44px; width:auto; display:block}
.brand span{font-weight:800; letter-spacing:1px; color:var(--primary)}
/* center menu */
.navwrap{flex:1; display:flex; justify-content:center}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center}
nav a{
  text-decoration:none;
  padding:10px 10px;
  border-radius:10px;
  color:var(--primary);
  font-weight:650;
  transition: color .15s ease, background .15s ease;
}
nav a:hover{color:var(--primary2); background:rgba(9,38,60,.06)}

.cta{
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 16px;
  border-radius:999px;
  font-weight:750;
  border:1px solid rgba(9,38,60,.15);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* per uwagi: ciemne tło + jasny tekst, hover odwrotnie */
.cta.primary{
  background:var(--primary);
  color:#F5F5F5;
  border-color:var(--primary);
}
.cta.primary:hover{
  background:#F5F5F5;
  color:var(--primary);
  border-color:rgba(9,38,60,.35);
}

.hero{
  padding:48px 0 56px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 40% 60%;
  gap:28px;
  align-items:center;
  min-height: 66vh;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  border:1px solid rgba(15,23,42,.06);
}
h1{font-size:44px; line-height:1.08; margin:0 0 12px; color:var(--primary)}
.lead{font-size:18px; line-height:1.6; margin:0 0 18px; opacity:.92}

.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.badge{
  font-size:13px; font-weight:650;
  border:1px solid rgba(9,38,60,.14);
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.7);
}

.embed{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,.06);
  background:#000;
}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px}
.sectionTitle h2{margin:0; font-size:30px; color:var(--primary)}
.sectionTitle p{margin:0; max-width:62ch; opacity:.85}

.grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:14px;
}
.feature{
  background:var(--card);
  border-radius:16px;
  border:1px solid rgba(15,23,42,.06);
  padding:16px 14px;
  display:flex; gap:12px; align-items:center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.feature:hover{transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,6,23,.10)}
.icon{
  width:38px; height:38px;
  border-radius:12px;
  display:grid; place-items:center;
  background:rgba(9,38,60,.06);
  flex:0 0 auto;
}
.icon img{width:22px; height:22px}
.feature strong{display:block; color:var(--primary); font-size:15px; line-height:1.2}

.contactGrid{
  display:grid;
  grid-template-columns: 60% 40%;
  gap:18px;
  align-items:start;
}
label{display:block; font-weight:650; color:var(--primary); margin:0 0 6px}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font:inherit;
}
textarea{min-height:140px; resize:vertical}
.field{margin-bottom:12px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.help{font-size:13px; opacity:.78; margin-top:6px}
.error{font-size:13px; color:#B91C1C; margin-top:6px}
.success{font-size:14px; color:#166534; margin-top:10px}
.notice{font-size:14px; opacity:.9; margin-top:10px}

.check{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.7);
}
.check input{width:18px; height:18px; margin-top:3px}

.map{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,.06);
  aspect-ratio: 16/7;
  background:#fff;
}
.map iframe{width:100%; height:100%; border:0}

footer{
  padding:26px 0;
  border-top:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.75);
}
footer .foot{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  text-align:center; font-size:14px; opacity:.86;
}
footer a{text-decoration:none; border-bottom:1px dashed rgba(9,38,60,.35)}
footer a:hover{border-bottom-color:transparent}

/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns: repeat(3, minmax(0, 1fr))}
  .heroGrid{grid-template-columns: 1fr; min-height:auto}
  h1{font-size:36px}
  .contactGrid{grid-template-columns:1fr}
  .map{aspect-ratio: 16/10}
}
@media (max-width: 620px){
  nav ul{gap:8px}
  nav a{padding:10px 8px}
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .row{grid-template-columns:1fr}
  .section{padding:56px 0}
}
@media (max-width: 520px){
  .navwrap{display:none} /* mobile layout zrobimy później */
  .brand span{display:none}
}


/* --- ETAP 3 poprawki --- */
.badges{flex-wrap:nowrap}
.badge{white-space:nowrap}

.sectionTitle.center{justify-content:center; text-align:center}
.sectionTitle.center p{margin-top:6px}

#funkcje .sectionTitle h2{font-size:26px}

.ftext{display:flex; flex-direction:column; gap:6px}
.fdesc{font-size:13px; line-height:1.35; opacity:.82}

.featuresGrid{grid-template-columns: repeat(4, minmax(0, 1fr));}

.cardTitle{
  margin:0 0 14px;
  color:var(--primary);
  font-size:18px;
}

.contactList{
  list-style:none;
  padding:0;
  margin:6px 0 0;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:16px;
}
.contactList li{display:flex; align-items:center; gap:14px;}
.contactList a{color:var(--primary); text-decoration:none;}
.contactList a:hover{color:var(--primary2);}
.ci{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(59,130,246,.14);
  color:#1D4ED8;
  font-size:18px;
}

/* Center last row when there are 2 items (desktop 4-col grid) */
@media (min-width: 981px){
  .featuresGrid > .feature:nth-last-child(2){grid-column:2;}
  .featuresGrid > .feature:nth-last-child(1){grid-column:3;}
}

/* Responsive adjustments */
@media (max-width: 980px){
  .featuresGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .badges{flex-wrap:wrap}
}


/* --- ETAP 4 poprawki --- */
h1{font-size:38px}
@media (max-width: 980px){ h1{font-size:32px} }
.badge{font-size:12px; padding:7px 10px}

/* Kontakt dropdown */
.menuDropdown{position:relative; display:inline-flex}
.dropdownPanel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 36px rgba(2,6,23,.12);
  display:none;
}
.menuDropdown:hover .dropdownPanel,
.menuDropdown:focus-within .dropdownPanel{display:block}
.dropdownItem{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--primary);
  font-weight:650;
}
.dropdownItem:hover{background:rgba(9,38,60,.06); color:var(--primary2)}
@media (max-width: 520px){
  .dropdownPanel{right:auto; left:0}
}



/* --- ETAP 5 poprawki --- */

/* Hero background with visible photo + overlay */
.hero{
  position:relative;
  background: url('../img/hero-v37.webp') center / cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(245,245,245,.86) 60%, rgba(238,242,245,.92) 100%);
}
.hero .container{position:relative; z-index:1}

/* Smaller H1 and badges */
h1{font-size:34px; max-width:22ch}
@media (max-width: 980px){ h1{font-size:28px} }
.badge{font-size:11px; padding:6px 9px}
.badges{gap:8px}

/* Feature cards: title next to icon, description below */
.feature{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.ftop{
  display:flex;
  align-items:center;
  gap:12px;
}
.ftop strong{
  margin:0;
  color:var(--primary);
  font-size:15px;
  line-height:1.15;
}
.fdesc{
  font-size:13px;
  line-height:1.4;
  opacity:.82;
}

/* Contact icons without background */
.ci{
  background: none !important;
  border-radius: 0 !important;
  width:auto !important;
  height:auto !important;
  display:inline-block !important;
  color: var(--primary) !important;
  font-size:20px !important;
}


/* --- ETAP 6 poprawki --- */

/* Header over hero image */
body.topHero{padding-top:76px}
header{
  position:fixed;
  left:0; right:0; top:0;
  background:transparent;
  border-bottom:none;
  backdrop-filter:none;
}
header.scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(15,23,42,.06);
}

/* Make hero start from top behind menu */
.hero{
  padding-top: calc(48px + 10px);
  margin-top: -76px;
}

/* Center features: icon+title+desc */
.feature{text-align:center}
.ftop{justify-content:center}
.fdesc{max-width:38ch; margin:0 auto}

/* Contact title spacing (extra ~half line) */
.cardTitle{margin-bottom:22px}

/* Map section smaller vertical padding */
#mapa.section{padding:36px 0}


/* --- ETAP 7 poprawki --- */

/* 1) Larger gap between icon/title and description in features */
.feature{gap:18px}
.fdesc{margin-top:12px}

/* 2) Nav dropdown (Kontakt in menu) */
.navDropdown{position:relative}
.navSubmenu{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  list-style:none;
  margin:0;
  padding:10px;
  min-width:200px;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.1);
  box-shadow:0 14px 32px rgba(2,6,23,.12);
  display:none;
  z-index:100;
}
.navSubmenu a{
  display:block;
  padding:8px 12px;
  text-decoration:none;
  font-weight:600;
  color:var(--primary);
  border-radius:10px;
}
.navSubmenu a:hover{background:rgba(9,38,60,.06)}
.navDropdown:hover .navSubmenu,
.navDropdown:focus-within .navSubmenu{display:block}

/* 3) Hero heading same size as section h2 + justified text */
.hero h1{
  font-size:26px;
  line-height:1.25;
  max-width:none;
}
.hero .lead,
.hero .muted{
  text-align:justify;
}


/* --- ETAP 8 poprawki --- */

/* Center hero headline */
.hero h1{ text-align:center; }

/* Bigger gap between text column and video */
.heroGrid{ gap:56px; }
@media (max-width: 980px){
  .heroGrid{ gap:32px; }
}

/* Badges width ends with description width */
.hero .badges{
  justify-content:flex-start;
  max-width:62ch;  /* match sectionTitle p width */
}
.hero .lead, .hero .muted{max-width:62ch; margin-left:auto; margin-right:auto;}
.hero .badges{margin-left:auto; margin-right:auto;}
.hero .badges{flex-wrap:nowrap; overflow:hidden;}
.hero .badge{max-width:100%;}

/* Nav submenu without extra panel background */
.navSubmenu{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  min-width:auto;
}
.navSubmenu a{
  background:transparent;
  border-radius:0;
  padding:8px 0;
}
.navSubmenu a:hover{
  background:transparent;
  text-decoration:underline;
}


/* --- ETAP 9 poprawki --- */

/* HERO 40 / 60 – consistent width */
.heroGrid{
  grid-template-columns: 40% 60%;
  max-width: 1180px;
  margin-left:auto;
  margin-right:auto;
}

/* Prevent video from visually overpowering text */
.embed{
  max-width: 100%;
}
.embed iframe{
  max-width:100%;
}

/* Limit text column width so section doesn't feel too wide */
.heroGrid > div:first-child{
  max-width: 460px;
}


/* --- ETAP 10 poprawki --- */

/* Tighter HERO width so 40/60 looks proportional on wide screens */
.heroGrid{
  max-width: 1100px;
  gap:48px;
}
.heroGrid > div:first-child{max-width: 420px;}
.embed{max-width: 660px; margin-left:auto;}

/* Footer + CTA color update */
:root{ --cta:#242A56; }

.cta.primary{
  background:var(--cta);
  border-color:var(--cta);
  color:#F5F5F5;
}
.cta.primary:hover{
  background:#F5F5F5;
  color:var(--cta);
  border-color:rgba(36,42,86,.45);
}

footer{
  background: var(--cta);
  border-top: none;
}
footer .foot{
  color:#F5F5F5;
  opacity:1;
}
footer a{
  color:#F5F5F5;
  border-bottom:1px dashed rgba(245,245,245,.55);
}
footer a:hover{
  border-bottom-color:transparent;
}


/* --- ETAP 11 poprawki --- */

/* Header: button higher/right & consistent height */
body.topHero{padding-top:64px}
.navbar{padding:10px 0}
.brand img{height:40px}

/* Keep CTA in top-right without extra shift */
.cta{padding:10px 16px}

/* HERO: strict 40/60, align tops, prevent shifting */
.hero{margin-top:-64px; padding-top:64px;}
.heroGrid{
  max-width: var(--max);
  grid-template-columns: 40% 60%;
  gap:28px;             /* back to tight */
  align-items:start;    /* H1 top aligns with video */
}
.heroGrid > div:first-child{max-width:none;}
.hero .embed{max-width:none; margin-left:0;} /* remove right-shift */

/* Make text start same height as video */
.hero h1{margin-top:0}

/* Badges line up with text width and do not float weirdly */
.hero .lead, .hero .muted, .hero .badges{max-width:44ch; margin-left:0; margin-right:0;}
.hero .badges{justify-content:flex-start;}

/* Ensure next section starts aligned (no extra gap) */
.hero{padding-bottom:40px}


/* --- ETAP 12 poprawki --- */
/* Przywrócenie sensownego odstępu między menu a HERO (bez niechcianej zmiany) */

:root{ --headerH: 74px; }

/* header zostaje fixed i przezroczysty nad tłem */
body.topHero{ padding-top: 0 !important; }

header{
  position:fixed;
  top:0; left:0; right:0;
}

/* HERO zaczyna się od góry strony (tło pod menu),
   ale treść jest odsunięta tylko minimalnie (mniej niż wcześniej) */
.hero{
  margin-top: 0 !important;
  padding-top: calc(var(--headerH) + 18px) !important;
}

/* Nagłówek i wideo startują równo */
.heroGrid{ align-items: start; }
.hero h1{ margin-top: 0; }


/* --- ETAP 13 poprawki --- */
/* Powrót do dystansu między menu a HERO jak w ETAP 9 + wyrównanie marginesów */

/* Header wraca do sticky (jak wcześniej w ETAP9) */
header{
  position:sticky !important;
  top:0;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:saturate(160%) blur(10px) !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
}
body.topHero{padding-top:0 !important;}
.hero{
  margin-top:0 !important;
  padding-top:48px !important;
}

/* HERO 40/60 i równe marginesy (tylko container decyduje) */
.heroGrid{
  grid-template-columns: 40% 60% !important;
  max-width:none !important;
  margin:0 !important;
  gap:28px !important;
  align-items:start !important;
}
.embed{margin-left:0 !important; max-width:none !important;}

/* Ujednolicenie szerokości tekstów w kolumnie 40% (nagłówek = opis) */
.heroGrid > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:center;  /* blok tekstu wyśrodkowany w kolumnie */
}
.heroGrid > div:first-child > h1,
.heroGrid > div:first-child > .lead,
.heroGrid > div:first-child > .muted,
.heroGrid > div:first-child > .badges{
  width:100%;
  max-width:44ch;      /* wspólna szerokość */
  margin-left:auto;
  margin-right:auto;
}
.hero h1{ text-align:center; margin-top:0; }
.hero .lead, .hero .muted{ text-align:justify; }
.hero .badges{ justify-content:flex-start; }


/* --- ETAP 14 poprawki --- */

/* Hero: jedna wspólna szerokość dla całej lewej kolumny (nagłówek + oba opisy + badge) */
.heroGrid > div:first-child{align-items:stretch !important;}
.heroText{
  width:100%;
  max-width:44ch;
  margin:0 auto;
}
.heroText > *{width:100%}

/* Badge: nie ucinaj ostatniego (Wygląd) */
.hero .badges{
  overflow:visible !important;
  flex-wrap:nowrap;
  gap:6px;
}
.hero .badge{
  font-size:10.5px;
  padding:5px 8px;
  white-space:nowrap;
}


/* --- ETAP 15 poprawki --- */

/* Większy dystans od góry dla HERO (sekcja z filmem) */
.hero{
  padding-top:72px !important; /* było 48px */
}

/* Menu: jednolite tło od startu (bez różnic na początku) */
header{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:saturate(160%) blur(10px) !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
}
header.scrolled{
  background:rgba(255,255,255,.92) !important;
}

/* Sekcja kategorii (Oferta/Funkcje) – tło #EFF2FF */
#funkcje.section.alt{
  background:#EFF2FF !important;
}


/* --- ETAP 16 poprawki (bardziej widoczne + cache-bust) --- */

/* Wyraźnie większy dystans od góry dla HERO */
.hero{
  padding-top:110px !important;
}

/* Ujednolicone tło menu (lekko transparentne, zawsze takie samo) */
header,
header.scrolled{
  background:rgba(255,255,255,.90) !important;
}

/* Sekcja kategorii tło */
#funkcje.section.alt{
  background:#EFF2FF !important;
}


/* --- ETAP 17 TEST (wizualny podział 40/60) --- */
.heroTest{
  grid-template-columns: 40% 60% !important;
  gap:0 !important;
  align-items:stretch !important;
  min-height: 66vh;
}
.testLeft, .testRight{
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:48px;
  color:#0F172A;
}
.testLeft{ background: #FFD400; }   /* żółty */
.testRight{ background: #1D4ED8; color:#F5F5F5; } /* niebieski */


/* --- ETAP 18 TEST: video in 60% column --- */
.videoWrap{
  padding:5px;
  background:#1D4ED8; /* temporary background for visibility */
  display:flex;
  align-items:center;
  justify-content:center;
}
.videoWrap iframe{
  width:100%;
  height:100%;
  min-height:360px;
  border-radius:16px;
}


/* --- ETAP 19 TEST: refined video padding, keep aspect ratio --- */
.videoWrap{
  padding:30px 15px 15px 15px; /* top right bottom left */
}

/* keep aspect ratio of iframe */
.videoWrap iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
}


/* --- ETAP 20: hero image from top + sticky header on scroll --- */
header{
  position:fixed;
  top:0; left:0; right:0;
  background:transparent;
  border-bottom:none;
  transition:background .25s ease, box-shadow .25s ease;
  z-index:1000;
}
header.scrolled{
  background:#ffffff;
  box-shadow:0 4px 20px rgba(15,23,42,.08);
}
.hero{
  margin-top:0;
  padding-top:120px;
  background-position:center top;
}


/* --- ETAP 21: transparent video column + white menu always --- */

/* remove blue background */
.videoWrap{
  background: transparent !important;
}

/* menu always white */
header,
header.scrolled{
  background:#ffffff !important;
}


/* --- ETAP 22: menu transparent over hero, white on scroll --- */
header{
  background: transparent !important;
  border-bottom:none !important;
  box-shadow:none !important;
}
header.scrolled{
  background:#ffffff !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
  box-shadow:0 4px 20px rgba(15,23,42,.08) !important;
}


/* --- ETAP 23: header transparent over hero only --- */
body:not(.scrolled) header{
  background: transparent !important;
  box-shadow:none !important;
  border-bottom:none !important;
}

/* when scrolled -> white */
body.scrolled header{
  background:#ffffff !important;
  box-shadow:0 4px 20px rgba(15,23,42,.08) !important;
}


/* --- ETAP 24: wymuszenie transparentnego menu na starcie + białe po scrollu --- */

/* NAJWIĘKSZY priorytet: transparent na starcie */
html body:not(.scrolled) header,
html body:not(.scrolled) header.scrolled{
  background: rgba(255,255,255,0) !important;
  box-shadow: none !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}

/* Po scrollu: białe */
html body.scrolled header,
html body.scrolled header.scrolled{
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.08) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  backdrop-filter: saturate(160%) blur(10px) !important;
}

/* Żeby przycisk/napisy były czytelne na zdjęciu */
html body:not(.scrolled) nav a{ color: var(--primary) !important; }


/* --- ETAP 25: DEFINITYWNE menu: transparent na starcie, białe po scrollu --- */

/* default: transparent */
header{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}

/* after scroll */
header.isWhite{
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.08) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  backdrop-filter: saturate(160%) blur(10px) !important;
}


/* --- ETAP 26: Header tło jak w wersji 7 (działające) --- */
header,
header.isWhite,
header.scrolled{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: saturate(160%) blur(10px) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: none !important;
}


/* --- ETAP 27: CLEAN header overlay (transparent on hero, white after scroll) --- */

/* 1) Header zawsze nad zdjęciem */
html body header{
  position: fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  z-index: 10000 !important;
}

/* 2) Domyślnie: TRANSPARENT (nad zdjęciem) — nawet jeśli inne klasy istnieją */
html body header,
html body header.scrolled,
html body header.isWhite{
  background: rgba(255,255,255,0) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* 3) Po scrollu: białe tło (tylko gdy .isWhite) */
html body header.isWhite{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.08) !important;
  backdrop-filter: saturate(160%) blur(10px) !important;
}

/* 4) Treść strony nie chowa się pod headerem */
html body .hero{
  margin-top: 0 !important;
  padding-top: 120px !important; /* wysokość headera + oddech */
  background-position: center top;
}


/* --- ETAP 28: przywrócony tekst w żółtej kolumnie (40%) --- */
.testLeft{
  padding: 32px 28px;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.testLeft .heroText{
  max-width: 44ch;
}
.testLeft h1{
  margin: 0 0 16px;
  text-align: left;
  color: var(--primary);
  font-size: 34px;
  line-height: 1.15;
}
.testLeft .lead,
.testLeft .muted{
  margin: 0 0 14px;
  text-align: justify;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.testLeft .badges{
  margin-top: 18px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.testLeft .badge{
  font-size: 12px;
  padding: 7px 10px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(9,38,60,.18);
}


/* --- ETAP 29 (REAL): typografia nagłówka + wyrównanie z filmem --- */

/* 1) Nagłówek HERO: taki sam rozmiar jak "Poznaj możliwości swojego domu" */
.testLeft h1{
  font-size:26px !important;   /* jak #funkcje h2 */
  text-align:center !important;
}

/* 2) Wyrównanie od góry: start nagłówka = start filmu (iframe) */
.heroTest{align-items:start !important;}
.testLeft{padding-top:30px !important;}  /* jak videoWrap top padding */
.testLeft .heroText{margin-top:0 !important;}
.videoWrap{align-items:flex-start !important;} /* iframe start at top inside padding */

/* 3) Cache bust helper (tylko informacyjnie) */


/* --- ETAP 30: badge size + spacing, hero margin, disable yellow bg --- */

/* 1) Badges: smaller font and half spacing */
.hero .badges,
.testLeft .badges{
  gap:5px !important; /* było ~10px */
}

.hero .badge,
.testLeft .badge{
  font-size:11px !important; /* zmniejszone o jeden stopień */
  padding:6px 8px !important;
}

/* 2) Zmniejszenie dolnego marginesu sekcji HERO */
.hero{
  padding-bottom:24px !important; /* było większe */
  margin-bottom:0 !important;
}

/* 3) Wyłączenie żółtego tła (kolumna 40%) */
.testLeft{
  background: transparent !important;
}


/* --- ETAP 31: unified container alignment (header vs hero) --- */

/* wspólny kontener szerokości */
.container{
  max-width:1200px;
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}

/* header i hero MUSZĄ używać tego samego kontenera */
header .container,
.hero .container{
  padding-left:24px !important;
  padding-right:24px !important;
}

/* usunięcie dodatkowych offsetów */
.hero{
  padding-left:0 !important;
  padding-right:0 !important;
}


/* --- ETAP 32 DEBUG: HERO padding & margins --- */

/* Wyraźne tło do debugowania */
.testLeft{
  background: #FFD800 !important; /* żółte debug */
}

/* Reset WSZYSTKICH offsetów w lewej kolumnie */
.testLeft,
.testLeft *{
  margin-left:0 !important;
  padding-left:0 !important;
}

/* Kontener hero bez dodatkowych przesunięć */
.hero .container{
  padding-left:24px !important;
  padding-right:24px !important;
}

/* Tekst hero wyrównany dokładnie do kontenera */
.testLeft h1,
.testLeft p,
.testLeft .badges{
  max-width:100% !important;
}

/* Upewnienie się że grid zaczyna się równo */
.heroTest{
  align-items:flex-start !important;
}


/* --- ETAP 33: badges aligned to text width + lower hero height + remove yellow --- */

/* Remove yellow debug background */
.testLeft{ background: transparent !important; }

/* Align badges to text width (same block as paragraphs) */
.testLeft .heroText{
  max-width:44ch !important;
  margin:0;           /* align to column start */
}
.testLeft .badges{
  width:100% !important;
  max-width:44ch !important;
  margin-top:14px;
  justify-content:flex-start;
  gap:6px !important;
}

/* Slightly smaller badges */
.testLeft .badge{
  font-size:11px !important;
  padding:6px 9px !important;
}

/* Lower overall hero height / photo height */
.heroTest{
  min-height: 52vh !important; /* was 66vh */
}
.testLeft, .testRight{
  min-height: 340px !important; /* reduce card height */
}

/* ETAP36: clean hero image */
.hero{
  
  background-color: transparent !important;
}
.hero::before{ background: transparent !important; }


/* --- ETAP 38: przywrócenie wysokości sekcji HERO do zaakceptowanej (nie 100vh) --- */

/* hero/test height closer to ETAP33 */
.heroTest{
  min-height: 52vh !important;
}
.testLeft, .testRight{
  min-height: 340px !important;
}

/* jeśli gdzieś było ustawione 100vh, wymuszamy auto */
.hero{
  min-height: auto !important;
}


/* --- ETAP 39: Mobile menu + CTA hidden + video above text --- */

/* Hamburger button (hidden on desktop) */
.mobileToggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(9,38,60,.18);
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(160%) blur(10px);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.burger{
  width:18px;
  height:2px;
  background:var(--primary);
  position:relative;
  display:block;
}
.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:var(--primary);
}
.burger::before{ top:-6px; }
.burger::after{ top:6px; }

/* Mobile dropdown menu (hidden by default) */
.mobileMenu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:18px;
  left:18px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 16px 36px rgba(2,6,23,.12);
  padding:10px;
}
.mobileMenu a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--primary);
  font-weight:700;
}
.mobileMenu a:hover{ background:rgba(9,38,60,.06); color:var(--primary2); }

/* When open */
header.menuOpen .mobileMenu{ display:block; }
header.menuOpen .burger{ background:transparent; }
header.menuOpen .burger::before{ transform:rotate(45deg); top:0; }
header.menuOpen .burger::after{ transform:rotate(-45deg); top:0; }

/* Mobile breakpoint */
@media (max-width: 520px){
  /* 1) hide right CTA */
  .cta.primary{ display:none !important; }

  /* 2) hide desktop center nav */
  .navwrap{ display:none !important; }

  /* 3) show hamburger */
  .mobileToggle{ display:inline-flex; }

  /* ensure navbar positions dropdown correctly */
  header{ position:fixed; }
  .navbar{ position:relative; }

  /* 3) video above text on mobile */
  .heroGrid{ grid-template-columns: 1fr !important; }
  .heroGrid .embed{ order:-1; }
}


/* --- ETAP 40: mobile video first + badges one line within text width --- */
@media (max-width: 520px){
  /* Ensure VIDEO is first */
  .heroGrid{
    display:flex !important;
    flex-direction:column !important;
  }
  .heroGrid .embed{
    order:-1 !important;
    width:100%;
  }

  /* Badges: keep in one line, never exceed text width */
  .badges{
    max-width: 44ch;      /* same text block width */
    width:100%;
    flex-wrap:nowrap !important;
    gap:4px !important;   /* tighter spacing */
    overflow:hidden;      /* do not spill outside */
  }
  .badge{
    font-size:10px !important;
    padding:5px 7px !important;
    white-space:nowrap;
  }
}


/* --- ETAP 41: correct selector for video-first on mobile (testRight/videoWrap) --- */
@media (max-width: 520px){
  .heroGrid.heroTest{
    display:flex !important;
    flex-direction:column !important;
  }
  .testRight{
    order:-1 !important;
    width:100%;
  }
}