.tf-hero{ --tf-blue:#3273eb; --tf-acc:#eb6049; }

.e-con.tf-hero{
	position:relative; overflow:hidden;
	background:var(--tf-blue) !important;
	height:100vh;                                  /* c-hero--fs */
	padding:0; display:block;
}

/* ---- фото-блок (c-hero__slider): фіксований розмір + clip-path ---- */
.tf-hero-media{ position:absolute; top:0; left:0; z-index:1; padding:0; opacity: .7; }
.tf-hero-media,
.tf-hero-media .tf-hero-slider,
.tf-hero-media .elementor-widget-container,
.tf-hero-slider .elementor-slides-wrapper,
.tf-hero-slider .swiper,
.tf-hero-slider .swiper-slide{ height:100% !important; }

/* сам клип + розмір ставимо на медіа-контейнер */
.tf-hero-media{
	width:20.3125rem; height:28.75rem;             /* base (c-hero__slider) */
	clip-path:url(#shapeXs);
}
.tf-hero-slider .swiper-slide-bg{ background-size:cover; background-position:center; }
/* синій оверлей на фото (opacity .7 сині, як c-hero__slider) */
.tf-hero-media::after{ content:""; position:absolute; inset:0; background:rgba(50,115,235,.3); pointer-events:none; }

/* ---- білий контур (c-hero__shape): SVG-фон, знизу-праворуч ---- */
.e-con.tf-hero::before{
	content:""; position:absolute; top:0; left:0; z-index:3; pointer-events:none;
	width:19.375rem; height:30rem;                 /* base c-hero__shape */
	background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDUuMjA5IiBoZWlnaHQ9IjYyNi40MjgiPjxwYXRoIGRhdGEtbmFtZT0iUGF0aCAyNDEiIGQ9Ik0zMzMuNTI2IDYyNS40MjhoMjQ5LjcwNmEyMC45NzcgMjAuOTc3IDAgMCAwIDIwLjk3Ny0yMC45NzhWMzMzLjUyOGEyMC45ODQgMjAuOTg0IDAgMCAwLTYuMTQ0LTE0LjgzM0wyODYuNTE3IDcuMTQ0QTIwLjk4NyAyMC45ODcgMCAwIDAgMjcxLjY4NCAxSDIxLjk3OEEyMC45NzggMjAuOTc4IDAgMCAwIDEgMjEuOTc4djI3MC45MjRhMjAuOTcyIDIwLjk3MiAwIDAgMCA2LjE0NiAxNC44MzNsMzExLjU0NiAzMTEuNTQ5YTIwLjk3OCAyMC45NzggMCAwIDAgMTQuODM0IDYuMTQ0eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==") no-repeat 100% 100%;
	background-size: auto;
}

/* ---- заголовок (.ultra) — абсолютно, як c-hero__title ---- */
.e-con.tf-hero-title-wrap{ position:static; padding:0; }
.tf-hero-title{ position:absolute; z-index:8; left:1.5625rem; top:20.3125rem; max-width:14ch; }
.tf-hero-title .elementor-heading-title{ margin:0; color:#fff; font-weight:800; font-size:2.25rem; line-height:1; }

/* ---- контент (чеклист + кнопка) справа-внизу ---- */
.e-con.tf-hero-content{
	position:absolute; z-index:8; right:1.5625rem; bottom:2.5rem;
	display:flex; flex-direction:column; align-items:flex-start;     gap: 37px;
	padding: 0;
	max-width: 28.5rem;
}
.tf-hero-list .elementor-icon-list-items{ margin:0; padding:0; }
.tf-hero-list .elementor-icon-list-item{ display:flex; align-items:flex-start; margin:0; padding:0; border:0; color:#fff; font-size:.8125rem; line-height:1.4; }
.tf-hero-list .elementor-icon-list-item + .elementor-icon-list-item{ margin-top:1.25rem; }
.tf-hero-list .elementor-icon-list-icon{
	flex:0 0 1rem; width:1rem; height:1rem; margin:.15rem .625rem 0 0;
	background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS43NjciIGhlaWdodD0iMTUuNzY3Ij48cGF0aCBkYXRhLW5hbWU9IlBhdGggMTE2IiBkPSJNNy44ODQgMGE3Ljg4NCA3Ljg4NCAwIDEgMCA3Ljg4NCA3Ljg4NEE3Ljg4NyA3Ljg4NyAwIDAgMCA3Ljg4NCAwem0wIDE0LjE5MWE2LjMwNyA2LjMwNyAwIDEgMSA2LjMwNy02LjMwNyA2LjMxNSA2LjMxNSAwIDAgMS02LjMwNyA2LjMwN3pNMTEuNSA0LjQgNi4zIDkuNiA0LjI2NSA3LjU2IDMuMTUzIDguNjcybDMuMTUzIDMuMTUzIDYuMzA3LTYuMzA3eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==") no-repeat 50%/contain;
}

.tf-hero-list .elementor-icon-list-item:not(:last-child){
	margin-bottom: 16px;
}

.tf-hero-list .elementor-icon-list-icon svg,
.tf-hero-list .elementor-icon-list-icon i{ display:none; }
.tf-hero-list .elementor-icon-list-text{ color:#fff; }



/* Кнопка (c-btn--ghost) з ефектом заливки колом */
.tf-hero-cta .elementor-button{
	position:relative;
	overflow:hidden;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:3.75rem;
	padding:0 2.1875rem;
	border:.0625rem solid var(--tf-accent);
	border-radius:.625rem;
	background-color:transparent;
	color:var(--tf-accent);
	font-size:.8125rem;
	font-weight:500;
	letter-spacing:.15em;
	line-height:3.625rem;
	text-transform:uppercase;
	transition:color .5s cubic-bezier(.22,.61,.36,1),
	border-color .5s cubic-bezier(.22,.61,.36,1);
}

/* саме "коло" (js-btn-bg) */
.tf-hero-cta .elementor-button::before{
	content:"";
	position:absolute;
	z-index:-1;
	top:var(--y,50%);
	left:var(--x,50%);
	width:0;
	height:0;
	border-radius:50%;
	background: #fff;
	transform:translate(-50%,-50%);
	transition:width .4s ease-in-out, height .4s ease-in-out;
}

/* текст завжди над колом */
.tf-hero-cta .elementor-button .elementor-button-content-wrapper{
	position:relative;
	z-index:1;
}

/* hover: коло розтікається, бордер синій, текст білий */
.tf-hero-cta .elementor-button:hover,
.tf-hero-cta .elementor-button:focus{
	color: #eb6049 !important;
	border-color: #fff;
	background-color:transparent;
}
.tf-hero-cta .elementor-button:hover::before,
.tf-hero-cta .elementor-button:focus::before{
	width:250%;
	height:250%;
}

@media (min-width:768px){
	.tf-hero-media{ width:38.5625rem; height:44.6875rem; clip-path:url(#shapeSm); }
	.e-con.tf-hero::before{ width:37.5rem; height:46.25rem;
		background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NjYiIGhlaWdodD0iMTAxNS4yNjIiPjxwYXRoIGRhdGEtbmFtZT0iUGF0aCAyNDUiIGQ9Ik01MzguNDI4IDEwMTMuNzYyaDM5Mi4yQTMzLjg3MSAzMy44NzEgMCAwIDAgOTY0LjUgOTc5Ljg5VjUzOC40MjdhMzMuODgyIDMzLjg4MiAwIDAgMC05LjkyMS0yMy45NTJMNDUxLjUyMyAxMS40MTlhMzMuODg3IDMzLjg4NyAwIDAgMC0yMy45NTEtOS45MjFoLTM5Mi4yQTMzLjg3MyAzMy44NzMgMCAwIDAgMS41IDM1LjM3MnY0NDEuNDYxYTMzLjg2NCAzMy44NjQgMCAwIDAgOS45MjQgMjMuOTUybDUwMy4wNTMgNTAzLjA1NmEzMy44NzMgMzMuODczIDAgMCAwIDIzLjk1MSA5LjkyMXoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjMiLz48L3N2Zz4="); }
		.e-con.tf-hero-content{ 
			right: 6rem;
			bottom: 0.5rem;
		}
		.tf-hero-list .elementor-icon-list-item{ font-size:.875rem; }
		.tf-hero-list .elementor-icon-list-item + .elementor-icon-list-item{ margin-top:1.875rem; }
		.tf-hero-title{ left:6rem; top:23.4375rem; }
		.tf-hero-title .elementor-heading-title{ font-size:4rem; line-height:4.3125rem; }
	}
	@media (min-width:992px){
		.tf-hero-media{ width:38rem; height:38rem; clip-path:url(#shapeMd); }
		.e-con.tf-hero::before{ width:35.625rem; height:40rem; }
		.tf-hero-list .elementor-icon-list-item{ font-size:.9375rem; }
		.tf-hero-title{ left:6rem;         top: 17.4375rem; }
		.e-con.tf-hero-content{ 
			right: 2rem;
			bottom: 2.5rem;
		}
	}
	@media (min-width:1200px){
		.tf-hero-media{ width:44rem; height:36rem; clip-path:url(#shapeLg); }
		.e-con.tf-hero::before{ width:41.25rem; height:37.5rem; }
		.tf-hero-title{ top:18.75rem; }
		.tf-hero-title .elementor-heading-title{ font-size:4.75rem; line-height:5.125rem; 

		}

		.e-con.tf-hero-content {
			right: 10rem;
			bottom: 3.5rem;
		}

		.tf-hero-title{ left: 16rem; top: 13.75rem; }
		.tf-hero-cta{
			width: 16rem;
		}
		
	}
	@media (min-width:1550px){
		.tf-hero-media{ width:60rem; height:44.5rem; clip-path:url(#shapeXl); }
		.e-con.tf-hero::before{ width:56.25rem; height:47.5rem;
			background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjgwLjAzNiIgaGVpZ2h0PSIxNzM5LjAzIj48cGF0aCBkYXRhLW5hbWU9IlBhdGggMTU5IiBkPSJNOTI1Ljk4NCAxNzM3LjUzaDY5NC4yMzFhNTguMzE5IDU4LjMxOSAwIDAgMCA1OC4zMjEtNTguMzIyVjkyNS45ODRhNTguMzM5IDU4LjMzOSAwIDAgMC0xNy4wODItNDEuMjRMNzk1LjI5MSAxOC41ODFhNTguMzQ4IDU4LjM0OCAwIDAgMC00MS4yNC0xNy4wODJINTkuODIxQTU4LjMyMyA1OC4zMjMgMCAwIDAgMS40OTkgNTkuODIxdjc1My4yMjJhNTguMzA3IDU4LjMwNyAwIDAgMCAxNy4wODggNDEuMjRsODY2LjE1NyA4NjYuMTY1YTU4LjMyMiA1OC4zMjIgMCAwIDAgNDEuMjQgMTcuMDgyeiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMyIvPjwvc3ZnPg=="); }
			.tf-hero-list .elementor-icon-list-item{ font-size:1.125rem; }
			.tf-hero-title .elementor-heading-title{ font-size:6.25rem; line-height:6.75rem; }
			.tf-hero-title{ left: 40rem; top: 13.75rem; }
			.e-con.tf-hero-content{ 
				right: 10rem;
				bottom: 11.5rem;
			}
		}
		@media (min-width:1800px){
			.tf-hero-media{ width:69.375rem; height:53.75rem; clip-path:url(#shapeXxl); }
			.e-con.tf-hero::before{ width:65.625rem; height:53.75rem; }
			.tf-hero-title{ 
				left: 43rem;
				top: 18.25rem;
			}



		}

		@media (min-width: 768px) and (max-width: 992px) {
			.e-con.tf-hero {
				height: 116vh;
			}
		}

/* ---- мобільний (≤767px): стек, без absolute ---- */
@media (max-width:767px){
	.e-con.tf-hero{
		display:flex;
		flex-direction:column;
		height:auto;                     /* не 100vh */
		min-height:0;
		padding:0 0 3rem;
	}




	/* 2. заголовок */
	.e-con.tf-hero-title-wrap{
		position:static;
		order:2;
		padding:2.5rem 1.5625rem 0;
		padding-top: 33rem;
	}
	.tf-hero-title{
		position:static;
		left:auto; top:auto;
		max-width:none;
		width: 100%;
	}
	.tf-hero-title .elementor-heading-title{
		font-size:2.25rem; line-height:1;
	}

	/* 3. чеклист + кнопка */
	.e-con.tf-hero-content{
		position:static;
		order:3;
		right:auto; bottom:auto;
		width:auto; max-width:none;
		padding:1.875rem 1.5625rem 0;
		gap:1.5625rem;
	}
}