/* ==========================================================================
   LIGHTEVENT.PL — PORTRETY I KARYKATURY NA ŻYWO (style.css v2.0)
   100% zgodność wizualna z https://lightevent.pl/fotobudka-tradycyjna/
   ========================================================================== */

:root {
	--theme-palette-color-1: #ecc03a;
	--theme-palette-color-2: #d4a24f;
	--theme-palette-color-3: #0E1720;
	--theme-palette-color-4: #181818;
	--theme-palette-color-5: #edeff2;
	--theme-palette-color-6: #f9fafb;
	--theme-palette-color-7: #FDFDFD;
	--theme-palette-color-8: #ffffff;
	--le-gold: #ecc03a;
	--le-gold-warm: #d4a24f;
	--le-navy: #0E1720;
	--le-dark: #181818;
	--le-green: #00c853;
	--le-green-hover: #03b048;
	--le-font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--le-font-serif: "Aleo", Georgia, serif;
	--le-font-btn: "Merriweather Sans", "Lato", sans-serif;
	--le-font-sub: "Montserrat", "Lato", sans-serif;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--le-font-sans);
	color: #3a424a;
	background-color: #ffffff;
	overflow-x: hidden;
}

/* ==========================================================================
   MARQUEE W HEADERZE BLOCKSY (1:1 z lightevent.pl)
   ========================================================================== */
.scroll-container {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	background: transparent;
	max-width: 100%;
}

.scroll-link {
	display: inline-block;
	padding-left: 100%;
	font-size: 17px;
	font-weight: bold;
	color: #ffffff !important;
	text-decoration: none !important;
	letter-spacing: 0.5px;
	animation: scroll-left 20s linear infinite;
	animation-play-state: running;
	transition: color 0.3s ease;
}

.scroll-link:hover {
	animation-play-state: paused;
	color: #dddddd !important;
}

@keyframes scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* Reset szerokości kontenera artykułu, aby sekcje i Hero były 100% pełnej szerokości od lewej do prawej (full-bleed 100vw) */
#main.le-main-fullwidth,
.le-portrety-page,
.entry-content.is-layout-constrained > .le-portrety-page {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.le-portrety-page > section {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ct-container-full[data-vertical-spacing] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.le-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.le-text-center {
	text-align: center;
}

/* ==========================================================================
   1. BANER HERO PODSTRONY (1:1 z fotobudka-tradycyjna: .elementor-element-5e9956a)
   ========================================================================== */
.le-hero-banner {
	position: relative;
	background-color: #010101;
	background-image: url("https://portino.pl/assets/img/hero-biznes.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0px 0px 150px 150px rgba(0, 0, 0, 0.72) inset;
	min-height: 420px;
	padding: 150px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.le-hero-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(9, 10, 12, 0.32);
	pointer-events: none;
}

.le-hero-banner__zigzag {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	z-index: 3;
	pointer-events: none;
}

.le-hero-banner__zigzag svg {
	display: block;
	width: calc(300% + 1.3px);
	height: 19px;
}

.le-hero-banner__zigzag--bottom {
	top: auto;
	bottom: 0;
	transform: rotate(180deg);
}

.le-hero-banner__box {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 780px;
	background-color: #181818A1;
	border: 2px solid #FFFFFF59;
	padding: 30px 40px 25px 40px;
	text-align: center;
	backdrop-filter: blur(3px);
}

.le-hero-banner__kicker {
	background-color: #ffffff;
	border: 1px solid #ffffff;
	padding: 0 0 0 10px;
	margin-bottom: 18px;
	font-family: "Lato", sans-serif;
	font-size: 28px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.7em;
	letter-spacing: 10px;
	color: #181818;
}

.le-hero-banner__title {
	margin: 0 0 0 -7px;
	font-family: "Lato", sans-serif;
	font-size: clamp(38px, 6vw, 80px);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1em;
	color: #ffffff !important;
	letter-spacing: 1px;
}

/* ==========================================================================
   2. GRANATOWA SEKCJA WPROWADZAJĄCA (1:1 z fotobudka-tradycyjna: #0E1720)
   ========================================================================== */
.le-intro-split {
	position: relative;
	background-color: var(--le-navy);
	color: #ffffff;
	overflow: hidden;
}

.le-intro-split__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	min-height: 680px;
}

.le-intro-split__copy {
	padding: 90px 50px 180px max(24px, calc((100vw - 1220px) / 2));
}

.le-intro-split__eyebrow {
	margin: 0 0 0 15px;
	padding: 0 0 0 70px;
	font-family: var(--le-font-sub);
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.2em;
	color: #ffffff !important;
	letter-spacing: 1px;
}

.le-dotted-divider {
	width: 55px;
	border-top: 4px dotted var(--le-gold-warm);
	margin: -10px 0 32px 0;
}

.le-intro-split__big-title {
	margin: 0;
	font-family: var(--le-font-serif);
	font-size: clamp(3.2rem, 5.5vw, 5.6rem);
	font-weight: 700;
	line-height: 1.02em;
	color: #ffffff !important;
}

.le-intro-split__subtitle {
	margin: 40px 0 24px 0;
	font-family: var(--le-font-serif);
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
	font-weight: 600;
	line-height: 1.3em;
	color: #ffffff !important;
}

.le-intro-split__copy p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 16.5px;
	line-height: 1.72;
	margin: 0 0 18px 0;
}

.le-intro-split__gold-heading {
	margin: 42px 0 22px 0;
	font-family: var(--le-font-serif);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15em;
	color: var(--le-gold) !important;
}

.le-intro-split__actions {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 18px;
}

/* Złoty przycisk LightEvent (1:1 z fotobudka-tradycyjna: Merriweather Sans 19px, #ecc03a) */
.le-gold-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background-color: var(--le-gold);
	color: #181818 !important;
	font-family: var(--le-font-btn);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none !important;
	border: none;
	border-radius: 3px;
	padding: 15px 38px;
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.le-gold-btn:hover {
	background-color: #f5cc47;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(236, 192, 58, 0.3);
	color: #181818 !important;
}

.le-outline-light-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 3px;
	padding: 14px 24px;
	font-family: var(--le-font-sans);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.le-outline-light-btn:hover {
	border-color: var(--le-gold);
	color: var(--le-gold);
}

/* Prawa kolumna: Pokaz slajdów scen z eventu */
.le-intro-split__media {
	position: relative;
	min-height: 520px;
	overflow: hidden;
}

.le-scene-rotator {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 540px;
	background: #080d13;
}

.le-scene-rotator__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	opacity: 0;
	transition: opacity 0.8s ease, transform 6s ease;
	transform: scale(1.03);
}

.le-scene-rotator__img.is-active {
	opacity: 1;
	transform: scale(1);
}

.le-scene-rotator__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 23, 32, 0.25) 0%, rgba(14, 23, 32, 0.05) 50%, rgba(14, 23, 32, 0.88) 100%);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 28px 28px 135px 28px;
	z-index: 2;
}

.le-scene-rotator__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.le-pill-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(14, 23, 32, 0.85);
	border: 1px solid rgba(236, 192, 58, 0.55);
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

.le-pill-badge svg {
	color: var(--le-gold);
	flex-shrink: 0;
}

.le-scene-rotator__bar {
	background: rgba(14, 23, 32, 0.86);
	border-left: 4px solid var(--le-gold);
	padding: 14px 18px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	backdrop-filter: blur(6px);
}

.le-scene-rotator__bar p {
	margin: 0;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
}

.le-scene-rotator__dots {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.le-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	padding: 0;
	transition: all 0.25s ease;
}

.le-dot.is-active {
	background: var(--le-gold);
	transform: scale(1.25);
}

/* Trójkątny separator dolny (1:1 z fotobudka-tradycyjna) */
.le-intro-split__triangle {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	line-height: 0;
	z-index: 3;
	pointer-events: none;
}

.le-intro-split__triangle svg {
	display: block;
	width: 100%;
	height: 95px;
}

/* ==========================================================================
   3. SEKCJA DLACZEGO WARTO (1:1 z fotobudka-tradycyjna #dlaczego_warto)
   ========================================================================== */
.le-why-section {
	background: #ffffff;
	padding: 80px 0 70px 0;
}

.le-why-grid {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	gap: 54px;
	align-items: center;
}

.le-why-media {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px 24px 32px 24px;
}

.le-video-card {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 18px 45px rgba(14, 23, 32, 0.16);
	background: #0E1720;
}

.le-video-player {
	display: block;
	width: 100%;
	max-height: 540px;
	object-fit: cover;
}

.le-image-card {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(14, 23, 32, 0.12);
}

.le-image-card img {
	display: block;
	width: 100%;
	height: auto;
}

.le-section-heading {
	font-family: var(--le-font-serif);
	font-size: clamp(1.9rem, 3vw, 2.55rem);
	font-weight: 700;
	line-height: 1.2;
	color: #181818;
	margin: 0 0 16px 0;
}

.le-why-content .le-section-heading {
	text-align: center;
}

.le-gold-line-center {
	width: 80px;
	height: 3px;
	background: var(--le-gold);
	margin: 16px auto 22px auto;
}

.le-quote {
	text-align: center;
	font-size: 16.5px;
	color: #54595F;
	margin: 0 0 36px 0;
}

.le-benefits-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 24px;
}

.le-benefit-box {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.le-benefit-box__icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	color: var(--le-gold);
	margin-top: 2px;
}

.le-benefit-box__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.le-benefit-box__body h3 {
	font-family: var(--le-font-serif);
	font-size: 1.22rem;
	font-weight: 700;
	color: #181818;
	margin: 0 0 8px 0;
	line-height: 1.25;
}

.le-benefit-box__body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: #54595F;
}

.le-why-cta {
	margin-top: 36px;
	display: flex;
	justify-content: flex-end;
}

/* ==========================================================================
   4. JAK TO DZIAŁA – 4 KROKI Z PRAWDZIWYMI WIDEO
   ========================================================================== */
.le-steps-section {
	background-color: #f9fafb;
	padding: 85px 0;
	border-top: 1px solid #edeff2;
	border-bottom: 1px solid #edeff2;
}

.le-section-header-center {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 52px auto;
}

.le-kicker-tag {
	display: inline-block;
	background: rgba(236, 192, 58, 0.18);
	color: #966e08;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 4px;
	margin-bottom: 12px;
}

.le-kicker-tag--gold {
	background: rgba(236, 192, 58, 0.2);
	color: var(--le-gold);
}

.le-section-lead {
	font-size: 17px;
	line-height: 1.65;
	color: #54595F;
	margin: 0;
}

.le-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.le-step-card {
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e6e9ef;
	box-shadow: 0 10px 28px rgba(14, 23, 32, 0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.le-step-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 38px rgba(14, 23, 32, 0.12);
}

.le-step-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: #0E1720;
	overflow: hidden;
}

.le-step-card__media video,
.le-step-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.le-step-card__num {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	background: var(--le-gold);
	color: #181818;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 1px;
	padding: 5px 11px;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Symulator telefonu w Kroku 02 */
.le-step-card__media--form {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 18px 20px 18px;
	background: linear-gradient(145deg, #0E1720 0%, #1c2b3a 100%);
}

.le-phone-Simulator {
	width: 100%;
	background: #ffffff;
	border-radius: 16px;
	padding: 18px 16px;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
	color: #181818;
}

.le-phone-Simulator__top {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #7A7A7A;
	margin-bottom: 12px;
	text-align: center;
}

.le-phone-Simulator__field {
	margin-bottom: 12px;
}

.le-phone-Simulator__field label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: #54595F;
	margin-bottom: 4px;
}

.le-typing-box {
	background: #f4f6f9;
	border: 1px solid #dce1e8;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 700;
	color: #181818;
	min-height: 38px;
}

.le-typing-box--accent {
	border-color: var(--le-gold-warm);
	background: #fffdf5;
}

.le-phone-Simulator__btn {
	margin-top: 14px;
	background: var(--le-gold);
	color: #181818;
	text-align: center;
	font-size: 13px;
	font-weight: 800;
	padding: 10px;
	border-radius: 8px;
}

.le-step-card__body {
	padding: 22px 20px 24px 20px;
	flex: 1;
}

.le-step-card__body h3 {
	font-family: var(--le-font-serif);
	font-size: 1.2rem;
	font-weight: 700;
	color: #181818;
	margin: 0 0 10px 0;
}

.le-step-card__body p {
	margin: 0;
	font-size: 14.8px;
	line-height: 1.6;
	color: #54595F;
}

/* ==========================================================================
   5. 16 STYLÓW ARTYSTYCZNYCH + PRZEŁĄCZNIK + SUWAK PORÓWNANIA
   ========================================================================== */
.le-styles-section {
	background: #ffffff;
	padding: 90px 0;
}

.le-style-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.le-style-tab {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #f3f5f8;
	color: #181818;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 13px 28px;
	font-family: var(--le-font-sans);
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.25s ease;
}

.le-style-tab svg {
	color: #966e08;
	flex-shrink: 0;
	transition: color 0.25s ease;
}

.le-style-tab.is-active svg {
	color: var(--le-gold);
}

.le-style-tab:hover {
	border-color: var(--le-gold);
}

.le-style-tab.is-active {
	background: var(--le-navy);
	color: var(--le-gold);
	border-color: var(--le-gold);
	box-shadow: 0 8px 22px rgba(14, 23, 32, 0.18);
}

.le-style-description {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 38px auto;
	font-size: 16.5px;
	line-height: 1.6;
	color: #54595F;
	min-height: 52px;
	transition: opacity 0.2s ease;
}

.le-style-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 64px;
}

.le-portrait-frame {
	margin: 0;
	background: #fdfbf7;
	border: 1px solid #e5dec9;
	border-radius: 14px;
	padding: 16px 16px 18px 16px;
	box-shadow: 0 12px 30px rgba(14, 23, 32, 0.08);
	text-align: center;
}

.le-portrait-frame__img-wrap {
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #f2ece1;
	margin-bottom: 12px;
}

.le-portrait-frame__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.28s ease, transform 0.35s ease;
}

.le-portrait-frame figcaption {
	font-size: 14px;
	font-weight: 700;
	color: #3a424a;
}

/* Suwak porównania Węgiel vs Olej */
.le-compare-block {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 44px;
	align-items: center;
	background: var(--le-navy);
	color: #ffffff;
	border-radius: 20px;
	padding: 44px;
	margin-bottom: 48px;
}

.le-compare-block__info h3 {
	font-family: var(--le-font-serif);
	font-size: 1.9rem;
	color: #ffffff !important;
	margin: 0 0 14px 0;
}

.le-compare-block__info p {
	font-size: 16px;
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.86);
	margin: 0 0 24px 0;
}

.le-compare-persons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.le-person-chip {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}

.le-person-chip.is-active,
.le-person-chip:hover {
	background: var(--le-gold);
	color: #181818;
	border-color: var(--le-gold);
}

.le-compare-slider {
	position: relative;
	max-width: 440px;
	margin: 0 auto;
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	overflow: hidden;
	border: 3px solid rgba(236, 192, 58, 0.55);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
	user-select: none;
}

.le-compare-slider__after,
.le-compare-slider__before {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.le-compare-slider__before-wrap {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.le-compare-slider__tag {
	position: absolute;
	bottom: 14px;
	z-index: 3;
	background: rgba(14, 23, 32, 0.85);
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 999px;
	pointer-events: none;
}

.le-compare-slider__tag--left { left: 14px; }
.le-compare-slider__tag--right { right: 14px; }

.le-compare-slider__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	width: 3px;
	background: var(--le-gold);
	transform: translateX(-50%);
	z-index: 4;
	pointer-events: none;
}

.le-compare-slider__handle span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--le-gold);
	color: #181818;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.le-compare-slider__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: ew-resize;
	z-index: 5;
	margin: 0;
}

.le-all-styles-bar {
	background: #f9fafb;
	border: 1px solid #e6e9ef;
	border-radius: 14px;
	padding: 28px 32px;
	text-align: center;
}

.le-all-styles-bar h4 {
	margin: 0 0 18px 0;
	font-family: var(--le-font-serif);
	font-size: 1.25rem;
	color: #181818;
}

.le-all-styles-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.le-all-styles-tags span {
	background: #ffffff;
	border: 1px solid #dce1e8;
	color: #181818;
	font-size: 14px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
}

/* ==========================================================================
   6. ŚCIANA GOŚCI I WIELKI PLAKAT (SYMULATOR 3x3)
   ========================================================================== */
.le-wall-section {
	position: relative;
	background: var(--le-navy);
	color: #ffffff;
	padding: 95px 0;
}

.le-wall-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.le-wall-copy h2 {
	font-family: var(--le-font-serif);
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	color: #ffffff !important;
	margin: 8px 0 18px 0;
	line-height: 1.2;
}

.le-wall-copy p {
	color: rgba(255, 255, 255, 0.88);
	font-size: 16.5px;
	line-height: 1.68;
	margin: 0 0 20px 0;
}

.le-check-list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px 0;
}

.le-check-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 14px;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.le-check-list li::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--le-gold);
	font-weight: 900;
}

.le-wall-photo-preview {
	display: flex;
	align-items: center;
	gap: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 14px;
}

.le-wall-photo-preview img {
	width: 110px;
	height: 85px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.le-wall-photo-preview span {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.45;
}

.le-poster-board {
	background: #fdfbf6;
	color: #181818;
	border-radius: 16px;
	padding: 24px;
	border: 6px solid #2b221d;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.le-poster-board__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid #e6decb;
	padding-bottom: 12px;
	margin-bottom: 16px;
}

.le-poster-board__header strong {
	display: block;
	font-family: var(--le-font-serif);
	font-size: 17px;
	color: #181818;
}

.le-poster-board__header span {
	font-size: 12px;
	color: #6c655c;
}

.le-poster-board__counter {
	background: #181818;
	color: var(--le-gold);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
}

.le-poster-board__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}

.le-poster-slot {
	position: relative;
	aspect-ratio: 1 / 1.08;
	background: #f3efe6;
	border: 1px dashed #c8beaa;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.le-poster-slot__empty {
	font-size: 12px;
	color: #8c8270;
	padding: 8px;
}

.le-poster-slot.is-filled {
	border-style: solid;
	border-color: #d8ceb8;
	background: #ffffff;
	animation: popInTile 0.35s ease;
}

@keyframes popInTile {
	0% { transform: scale(0.82); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

.le-poster-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.le-poster-slot__bubble {
	position: absolute;
	bottom: 6px;
	left: 6px;
	right: 6px;
	background: rgba(255, 255, 255, 0.94);
	color: #181818;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 6px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.le-poster-board__controls {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.le-poster-board__controls .le-gold-btn {
	flex: 1;
	padding: 13px 18px;
	font-size: 15px;
}

.le-poster-board__controls .le-outline-light-btn {
	color: #181818;
	border-color: #b8b0a0;
}

/* ==========================================================================
   7. PAKIETY CENOWE (1:1 z eael-pricing style-1 na fotobudka-tradycyjna)
   ========================================================================== */
.le-pricing-section {
	background: #ffffff;
	padding: 85px 0 60px 0;
}

.le-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: stretch;
}

.eael-pricing.style-1 {
	position: relative;
	text-align: center;
	width: 100%;
}

.eael-pricing.style-1 .eael-pricing-item {
	border: 1px solid rgba(9, 9, 9, 0.1);
	padding: 34px 28px;
	border-radius: 5px;
	background: #ffffff;
	transition: 0.4s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}

.eael-pricing.style-1 .eael-pricing-item:hover,
.eael-pricing.style-1 .eael-pricing-item.featured {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14), 0 10px 10px rgba(0, 0, 0, 0.08);
}

.eael-pricing.style-1 .eael-pricing-item.ribbon-2::before {
	content: "Polecany";
	position: absolute;
	background: var(--le-green);
	color: #ffffff;
	top: 24px;
	right: -28px;
	transform: rotate(45deg);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 32px;
	z-index: 5;
}

.eael-pricing.style-1 .eael-pricing-item .header {
	padding-bottom: 15px;
	margin-bottom: 15px;
	position: relative;
}

.eael-pricing.style-1 .eael-pricing-item .header::after {
	content: "";
	position: absolute;
	width: 140px;
	height: 1px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: rgba(9, 9, 9, 0.1);
}

.eael-pricing.style-1 .eael-pricing-item .header .title {
	font-family: var(--le-font-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	color: #181818;
}

.eael-pricing.style-1 .eael-pricing-item .eael-pricing-tag {
	padding: 18px 0;
	margin-bottom: 15px;
	position: relative;
}

.eael-pricing.style-1 .eael-pricing-item .Price-tag,
.eael-pricing.style-1 .eael-pricing-item .price-tag {
	font-size: 36px;
	font-weight: 800;
	color: #181818;
}

.eael-pricing.style-1 .eael-pricing-item .price-period {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #888888;
}

.eael-pricing.style-1 .eael-pricing-item .body ul {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
}

.eael-pricing.style-1 .eael-pricing-item .body ul li {
	padding: 11px 0;
	font-size: 14.5px;
	color: #54595F;
	border-bottom: 1px solid rgba(9, 9, 9, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.eael-pricing.style-1 .eael-pricing-item .body ul li .li-icon {
	color: var(--le-green);
	font-weight: 900;
}

.eael-pricing.style-1 .eael-pricing-item .body ul li.disable-item {
	text-decoration: line-through;
	opacity: 0.45;
}

.eael-pricing.style-1 .eael-pricing-item .body ul li.disable-item .li-icon {
	color: #ef5350;
}

.eael-pricing .eael-pricing-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 25px;
	background: var(--le-green);
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 4px;
	transition: background 0.25s ease;
}

.eael-pricing .eael-pricing-button:hover {
	background: var(--le-green-hover);
}

/* ==========================================================================
   8. DODATKI (#dodatki) + 9. GALERIA 4 KOLUMN + 10. MŁODY BAND + 11. CTA
   ========================================================================== */
.le-addons-section {
	background: #f9fafb;
	padding: 75px 0;
	border-top: 1px solid #edeff2;
}

.le-addons-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 42px;
}

.le-addon-item {
	background: #ffffff;
	border: 1px solid #e6e9ef;
	border-radius: 12px;
	padding: 26px;
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.le-addon-item__icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--le-navy);
	color: var(--le-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 6px 16px rgba(14, 23, 32, 0.14);
}

.le-addon-item__body h3 {
	font-family: var(--le-font-serif);
	font-size: 1.25rem;
	margin: 0 0 8px 0;
	color: #181818;
}

.le-addon-item__body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: #54595F;
}

/* 9. 4-kolumnowa galeria wideo + zdjęcia (1:1 z fotobudka-tradycyjna) */
.le-quad-showcase {
	background: #ffffff;
	padding: 70px 0;
}

.le-quad-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.le-quad-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.le-quad-col video,
.le-quad-col img {
	width: 100%;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 10px 24px rgba(14, 23, 32, 0.1);
}

.le-quad-col video {
	aspect-ratio: 9 / 16;
	background: #0E1720;
}

.le-quad-col img {
	aspect-ratio: 3 / 4;
}

/* 10. Sekcja rabatowa z zespołem Młody Band (1:1 z fotobudka-tradycyjna) */
.le-band-promo {
	background: var(--le-navy);
	color: #ffffff;
}

.le-band-promo__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 460px;
}

.le-band-promo__image {
	background-image: url("https://portino.pl/assets/img/hero-pracownia.webp");
	background-size: cover;
	background-position: center;
	min-height: 360px;
}

.le-band-promo__copy {
	padding: 70px 54px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.le-band-promo__sub {
	font-family: var(--le-font-serif);
	font-size: 1.65rem;
	color: #ffffff !important;
	margin: 0 0 10px 0;
}

.le-band-promo__title {
	font-family: var(--le-font-serif);
	font-size: 2.5rem;
	color: var(--le-gold) !important;
	margin: 0;
}

.le-band-promo__copy p {
	color: rgba(255, 255, 255, 0.88);
	font-size: 16px;
	line-height: 1.68;
	margin: 0 0 18px 0;
}

.le-band-promo__actions {
	margin-top: 14px;
}

/* 11. Dolne wezwanie do działania z logo LightEvent */
.le-bottom-cta {
	background: #ffffff;
	padding: 75px 0 85px 0;
}

.le-bottom-cta__logo {
	display: block;
	margin: 0 auto 22px auto;
	max-width: 260px;
	height: auto;
}

.le-bottom-cta__text {
	max-width: 720px;
	margin: 0 auto 30px auto;
	font-size: 17px;
	line-height: 1.68;
	color: #54595F;
}

/* ==========================================================================
   RESPONSYWNOŚĆ (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1024px) {
	.le-intro-split__grid,
	.le-why-grid,
	.le-compare-block,
	.le-wall-grid,
	.le-band-promo__grid {
		grid-template-columns: 1fr;
	}

	.le-intro-split__copy {
		padding: 60px 24px 50px 24px;
	}

	.le-steps-grid,
	.le-quad-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.le-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.le-hero-banner {
		padding: 95px 16px;
		min-height: 300px;
	}

	.le-hero-banner__box {
		padding: 22px 18px;
	}

	.le-hero-banner__kicker {
		font-size: 15px;
		letter-spacing: 4px;
	}

	.le-benefits-grid,
	.le-steps-grid,
	.le-style-trio,
	.le-addons-grid,
	.le-quad-grid {
		grid-template-columns: 1fr;
	}

	.le-compare-block {
		padding: 26px 18px;
	}

	.le-band-promo__copy {
		padding: 44px 20px;
	}

	.le-intro-split__actions,
	.le-why-cta {
		justify-content: center;
	}
}