/* =========================================================
  🧩 WRAPPER
========================================================= */ 
.header { padding:var(--space-16) 0; transform:none; transition:none; transition: transform var(--transition-time) ease, opacity var(--transition-time) ease, padding var(--transition-time) ease; }

/* =========================================================
  🧩 LOGO
========================================================= */ 
.header .logo { display:flex; align-items:center; gap:var(--space-16); }
.header .logo img { width:auto; height:var(--space-48); }

/* =========================================================
  🧩 NAVBAR
========================================================= */ 
.header .nav { flex:1; display:flex; align-items:center; position:relative; }
.header .nav ul { gap:var(--nav-elements-gap); height: 100%; display:flex; flex-direction:row; flex: 1; justify-content:center; align-items:center; list-style:none; padding:0; margin:0; }
.header .nav .cta { text-decoration:none; }
.header .nav ul li { position:relative; display:flex; height:100%; justify-content:center; align-items:center;}
.header .nav ul li a { padding:var(--space-4); }

.sticky-nav { position: fixed; top:0; transform: translateX(0%) translateY(0); min-width:100%; z-index:100; }

.header.sticky-nav { padding: var(--space-8) var(--wrapper-padding); }

.header.sticky-nav .wrapped { padding:var(--space-8) var(--wrapper-padding); }

/* efekt startowy dla sticky */
.header.sticky-nav.hidden { position:relative; transform: translateX(0%) translateY(-200%); opacity: 0.5; }
.header.sticky-nav.hidden .wrapped { padding: 0 var(--wrapper-padding); padding-top:var(--space-8); }

/* =========================================================
  🧩 KV
========================================================= */
.kv { margin:auto; display:flex; flex-direction:column; }
.hero { display:flex; }
.hero .wrapped { display:flex; gap:var(--section-gap); justify-content: center; align-items: center; margin:auto;}
.hero .hero__left { display:flex; gap:var(--space-24); flex-direction:column; flex-shrink: 0; }
.hero .hero__left .text { display:flex; flex-direction:column; gap:var(--space-16); }
.hero .hero__left #animated-text { width:auto; padding-right:1px; }
.hero .hero__left ul { display:flex; flex-direction:row; gap:var(--space-32); margin-top:var(--space-8) ; }

    
.hero .hero__image { display:flex; align-items:center; margin:0 0 -1px; text-align:left; }
.hero .hero__image img { display:flex; width:auto; aspect-ratio:781/934; margin:auto; }
.hero .hero__actions { display:flex; width:100%; gap:var(--elements-gap); }

 /* hero kv */
.hero::before { content:""; position:absolute; inset:0; z-index:-1; }
.hero > * { position: relative; z-index: 1; }

/* =========================================================
  🧩 RWD
========================================================= */
@media (min-width: 1px) and (max-width: 640px) {
.header.sticky-nav.hide { transform: translateY(-100%); opacity: 0; }
	.header .wrapped { padding:0 var(--wrapper-padding); width:100%; }
	.header-placeholder { height: var(--header-height, 48px); display:none; }
	
	.header.sticky-nav .wrapped { padding:var(--space-8) calc(var(--wrapper-padding) / 2); }

	/* nav */
	.header .nav { display:none; }
	.header .cta,	
	.header .nav ul { display:none; }

	/* kv */
	.hero { padding-top: var(--wrapper-padding); }
	.hero .wrapped { flex-direction:column; padding:var(--space-12) var(--wrapper-padding) 0; width:100%; max-width:600px; }
	.hero .hero__left { width:100%; }
	.hero .hero__left .text h1 { text-align:left; }
	.hero .hero__left .text p { max-width:600px; text-align:left; }
	.hero .hero__left .text p br { display:none; }
	.hero .hero__image { width:90%; }
	.hero .hero__image img { max-height: 480px; max-width: 100%; width:auto; height:auto; aspect-ratio:521 / 622; }
	.hero .hero__actions { width:100%; flex-wrap: wrap; margin:0; gap:calc(var(--elements-gap)/1.5); }
	.hero .btn { flex: 1 1 230px; }
}

@media (min-width: 1px) and (max-width: 320px) {
	.hero .hero__image { width:85%; }
	.hero .hero__image img { width:auto; max-height:80vw; }
	.hero .hero__left .text h1 { text-align:left; }
	.hero .hero__actions { margin:auto; }
}

@media (min-width: 641px) and (max-width: 1023px) {
	.hero { padding-top: var(--wrapper-padding); }
	.header .wrapped { padding:0 var(--wrapper-padding); width:100%; }
	
	.header.sticky-nav .wrapped { padding:var(--space-8) calc(var(--wrapper-padding) / 2); }

	.header-placeholder { height: var(--header-height, 48px); display:none; }

	.header .logo img { width:auto; height:var(--space-48); }
	.header.sticky-nav .logo img { width:auto; height:var(--space-42); }
	.header .nav { width:100%; justify-content:end; }
	.header .nav ul { display:none; }

	/* kv */
	.hero .wrapped { flex-direction:column; padding:var(--space-12) var(--wrapper-padding) 0; width:100%;  }
	.hero .hero__left { padding:0 calc(var(--box-padding) * 1.5); width:100%; }
	.hero .hero__left .text p { max-width:540px; text-align:left; margin:0; }
	.hero .hero__left .text p br { display:none; }

	.hero .hero__left .text h1 { text-align:left; }
	.hero .hero__actions { margin:0; }

	.hero .hero__image { width:80%; }
	.hero .hero__image img { width:auto; height:auto; max-height:500px; aspect-ratio:781/934; }

	.hero .hero__actions { width:100%; flex-wrap:wrap; max-width:540px; }
	.hero .btn { flex: 1 1 220px;  }
}
/*
@media (min-width: 901px) and (max-width: 1023px) {
	.header .wrapped { padding:0 var(--wrapper-padding); width:100%; }
	.header-placeholder { height: var(--header-height, 48px); display:none; }

	.header .logo img { width:auto; height:var(--space-42); }
	.header.sticky-nav .logo img { width:auto; height:var(--space-36); }
	.header.sticky-nav .nav ul { gap: calc(1rem + 0.65vw); }

	.header .nav ul { gap: var(--space-16); }
	.header .nav ul li a::after { bottom:10px; }

	/* kv 
	.hero .wrapped { flex-direction:row; padding:var(--space-12) var(--wrapper-padding) 0; width:100%; }
	.hero .hero__left { width:50%; min-width:450px; margin: 0; padding:0 }
	.hero .hero__left .text { width:100%; }
	.hero .hero__left .text p { width:90%; }
	.hero .hero__left .text p br { display:none; }
	.hero .hero__image { width:45%; margin-left: 0px; }
	.hero .hero__image img { max-height:44vw; }
	.hero .hero__actions { flex-wrap:wrap; width:95%; max-width:420px; gap:calc(var(--elements-gap)/2) var(--elements-gap); }
	.hero .btn { flex: 1 1 220px;  }
} */

@media (min-width: 1024px) and (max-width: 1199px) {
	.header .wrapped { padding:0 var(--wrapper-padding); width:100%; }
	.header-placeholder { height: var(--header-height, 48px); display:none; }

	.header.sticky-nav .wrapped { padding:var(--space-8) calc(var(--wrapper-padding) / 2); }

	.header .logo img { width:auto; height:var(--space-42); }
	.header.sticky-nav .logo img { width:auto; height:var(--space-36); }
	.header.sticky-nav .nav ul { gap:calc(var(--nav-elements-gap)/1.5); }

	.header .nav ul { gap: var(--space-24); }
	.header .nav ul li a::after { bottom:10px; }

	/* kv */
	.hero .wrapped { flex-direction:row; padding:var(--space-12) var(--wrapper-padding) 0; width:100%; }
	.hero .hero__left { width:57.5%; padding-left:calc(var(--box-padding) * 1.5); }	
	.hero .hero__left .text p br { display:none; }

	.hero .hero__image { width:45%; }
	.hero .hero__image img { max-height:460px; margin-left:-5vw; }
	.hero .hero__image img { min-height:460px; height:45vw; max-height:570px; }
	.hero .btn { min-width:180px; width:auto;  }
	.hero .hero__actions { max-width:480px; }

}

@media (min-width: 1200px) {
	.header .wrapped { padding:0 var(--wrapper-padding); width:100%; }
	.header-placeholder { height: var(--header-height, 48px); display:none; }

	.header.sticky-nav .logo img { width:auto; height:var(--space-42); }

	/* nav */
	.header .nav ul li a::after { bottom:12px; }

	/* kv */
	.hero .wrapped { flex-direction:row; padding:var(--space-32) var(--wrapper-padding) 0; max-width:var(--width-wrap-1400); width:100%; }
	.hero .hero__left { width:55%; max-width:660px; padding-left:calc(var(--box-padding) / 2); }
	.hero .hero__image { width:45%; margin-left: -50px; }
	.hero .hero__image img { min-height:570px; height:45vw; max-height:600px; margin-left: max(-0.5vw, -20px); }
	.hero .btn { width:100%; max-width:270px; }
}

@media (min-width: 1480px) {
	.hero .hero__left .text { gap:var(--space-24); }
	.hero .hero__left { gap:var(--space-28); }
	.hero .hero__image img { max-height: 640px; }
}