.advantages {
	scroll-snap-align: none;
}
.advantages h2 {
    position: sticky;
    top: var(--hh);
	z-index: 3;
	padding: 15px 0 10px;
/*	backdrop-filter: blur(5px);*/
	background: linear-gradient(180deg, #ffff 90%, #fff0 100%);
	filter: none;
}
.advantage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
	timeline-scope: --advantage-tl;
}
.advantage:last-of-type {
	min-height: 50vh;
	margin-bottom: 4vh;
} 
.advantage h3 {
    position: sticky;
    top: calc(64px + var(--hh));
	z-index: 1;
	font: 500 1.375rem "Roboto", Helvetica, Arial, sans-serif;
	padding: 15px 0;
	margin: 0;
	background: linear-gradient(180deg, #ffffffdd 90%, #ffffff00 100%);
}
@media (min-width: 435px) {
	.advantage h3 {
		top: calc(66px + var(--hh));
	}	
}
@media (min-height: 600px) and (max-width: 487px) {
	.advantage h3 {
		top: calc(70px + var(--hh));
	}	
}
 .advantage h3 svg {
	position: absolute;
	right: 0;
	top: 7px;
	opacity: .7;
	width: 40px;
	height: 35px;	
}
@media (min-width: 640px) {
 .advantage h3 svg {
	width: 45px;
	height: 40px;
	top: 5px;
 }
}

.advantage .container {
	font: 300 1.1rem/1.5 "Roboto", Helvetica, Arial, sans-serif;
	margin: 0;
    color: #555;
}
.advantages .btns {
	height: 20vh;
	position: relative;
	z-index: 2;
    background: #fff;
	background: linear-gradient(180deg, #fff0 0%, #ffff 15%);
}
.advantage p {
    position: relative;
    z-index: 2;
    margin: 0;
	padding: 20px 0;
	background: linear-gradient(180deg, #fff5 80%, #fff0 100%);
}	

@media (min-width: 1024px) and (min-height: 600px) {
 .advantages h2 {
	padding: 40px 0 25px;
 } 
 .advantage h3 {
	top: calc(var(--i) * 3.2rem + 5vh + var(--hh));
	flex: 1 1 49%;
	padding: 22px 0 0 45px;
	font-weight: 500;
	font-size: 1.5rem;
 }
 .advantage h3 svg {
	left: 0;
	top: 8px;
	opacity: 1;
 }
 .advantage h3 path { 
	stroke-width: 7;
 }
 
 .advantage_list {
    display: flex;
    flex-wrap: wrap;
	align-items: baseline; /*flex-start;*/
 }

 .advantage {
	display: contents;
 }
 .advantage:last-of-type {
	min-height: 100vh;
 } 
 .advantage p {
    margin: 0 0 30px 0;
 }
 
 .advantage > div {
	flex: 1 1 49%;
	min-height: 70vh;
	min-height: calc(95vh - 3.2rem - var(--hh));
 }
 @media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
	.advantage > div {
		min-height: 300vh;
    } 
  }
 } 

 .advantage .container {	
    font-size: 1.375rem;
	padding: 0 0 50px;
	background: #fff9;
 }
 .advantage:last-of-type .container {
	min-height: 56.5vh;
	padding-bottom: 0;
 }
 .advantage .container strong { 
	font-weight: 400;
 }
 
 .advantages .btns {
	height: auto;
	padding: 4vh 0 5.3vh;
    flex-basis: 100%;
	align-content: end;
    position: sticky;
    top: 0;
 }	

}


@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
  
	 .advantage > div {
		view-timeline: --adv-select-tl block;
	 }
	 .advantage span[style*="--n"] {
		background: 
			/* highlight text color */
			linear-gradient(90deg, #e7f0ff 0 0) 
			0 / 0 no-repeat 
			/* faded text color */
			transparent;

		animation: select_text .1s steps(var(--n, 100)) forwards;
		animation-timeline: --adv-select-tl;
		animation-range: cover 20% cover 35%;
	 }
	 @media (min-width: 1024px) and (min-height: 600px) {
	  .advantage span[style*="--n"] {
		animation-range: cover 30% cover 60%;
	  }	
	 }
	 @keyframes select_text { 
		to { 
			background-size: calc(var(--n, 100) * 1ch);
			color: #000;
		}
	 }

	 .advantage {
		timeline-scope: --adv-check-tl;
	 }
	 .advantage .container {
		view-timeline: --adv-check-tl block;
		position: sticky;
		top: calc(3.3rem + 5vh + var(--hh));
	 }
	 
	 .advantage h3 {
		animation: run_animation steps(1) both;
		animation-timeline: --adv-check-tl;
		animation-range: cover 48% cover 48%;
		--animate: false;
	 }
	 .advantage h3 path {
		stroke-dasharray: 100;
		stroke-dashoffset: 100;
		transition: stroke-dashoffset .3s linear;
		transition-delay: 15s;
	 }
	 @media (min-width: 1024px) and (min-height: 600px) {
	  .advantage h3 {
		animation-range: cover 20% cover 20%;
	  }
	  .advantage h3 path {
		transition-delay: 5s;
	  }
	 }
	 @container style(--animate: true) {
		.advantage h3 path {
			stroke-dashoffset: 200;
			transition-delay: 0s;
		}
	 }
	 @keyframes run_animation { 
		to { --animate: true; } 
	 }
	 
 }/* @supports */ 
}/* @media */


/* --------------------- картинки ------------------------------ */

@property --num {
	syntax: "<integer>";
	initial-value: 0;
	inherits: false;
}
.client-amount {
	--num: var(--client-amount);
	counter-reset: num var(--num);
	height: calc(100vw - 40px);									/*	410px; */
	position: relative;
}
.pics_holder {
	position: absolute;
	top: 53%;
	left: 50%;
	translate: -50% -50%;
	width: 100%;
}
.pics_holder > img {
	width: 70%;
	height: auto;
	top: 50%;
	animation: rotate_clients 120s infinite linear;
}
.pics_holder > img:nth-of-type(2) {
	width: 84.5%;
	transform: rotate(126deg);
	opacity: .8;
	animation-direction: reverse;
	animation-duration: 90s;
}
.pics_holder > img:nth-of-type(3) {
	width: 100%;
	transform: rotate(240deg);
	opacity: .6;
	animation-duration: 30s;
}
.client-amount::after {
	content: counter(num);
	top: 50%;
	font: 600 2.5rem Arial, sans-serif;
	color: #333;
}
.counter_presription {
	top: calc(50% - 2rem);
}
.counter_subsription {
	top: calc(50% + 2.75rem);
}
.counter_presription,
.counter_subsription {
	font-size: 1rem;
    font-weight: 400;
	text-align: center;
}
.pics_holder > img,
.client-amount::after,
.counter_presription,
.counter_subsription {
	position: absolute;
	left: 50%;
	translate: -50% -50%;
}

@media (min-width: 1024px) and (min-height: 600px) {
 .client-amount {
    height: 410px;
    width: 410px;
    margin: 0 auto;
 }
 .client-amount::after {
	font-size: 2.85rem;
 }
 .counter_presription {
	top: calc(50% - 2.3rem);
 }
 .counter_subsription {
	top: calc(50% + 3rem);
 } 
}
 
@media (prefers-reduced-motion: no-preference) {

  @keyframes rotate_clients {
	to {
		transform: rotate(360deg);
	}
  }

  @supports (animation-timeline: scroll()) {
  
	 .advantage .container {
		animation: run_animation steps(1) both;
		animation-timeline: --adv-check-tl;
		animation-range: cover 0% cover 5%;
		--animate: false;
	 }	 

	 .client-amount {
		--num: 0;
	 }

	 @container style(--animate: true) {
		.client-amount {
			animation: counter 3s forwards ease-out;
		}
		.client-amount::after {
			animation: grow 3s forwards ease-out;
		}
		@keyframes counter {
			to {
				--num: var(--client-amount);
			}
		}
		@keyframes grow {
			from {
				scale: .5;
			}
			to {
				scale: 1;
			}
		}
	 }

	 .pics_holder {
	 	animation: rings_scale .1s forwards;
		animation-timeline: --adv-select-tl;
		animation-range-start: entry 0%;
		animation-range-end: exit 100%;
	 }
	 @keyframes rings_scale { 
		0% { 
			scale: .1;
			opacity: 0;
		}
		20% {
			scale: .7;
			opacity: 1;
		}
		70% {
			scale: 1;
			opacity: .8;
		}
		80%,100% { 
			scale: 2;
			opacity: 0;
		}
	}
	@media (min-width: 1024px) and (min-height: 600px) {
	 @keyframes rings_scale { 
		0% { 
			scale: .1;
			opacity: 0;
		}
		30% {
			scale: .9;
			opacity: 1;
		}
		85% {
			scale: 1.25;
			opacity: .8;
		}
		90%,100% { 
			scale: 2;
			opacity: 0;
		}
	 }	
	}
	
 }/* @supports */ 
}/* @media */ 

.awards {
	margin: 4vh auto 0;
	max-width: 450px;
	width: 100%;
	aspect-ratio: 3/2;
	position: relative;
}
.awards > img {
    box-shadow: 4px 6px 5px 0px rgba(99,99,99,0.66);
	position: absolute;
	height: auto;
}
.awards > img:nth-child(1) {
	right: 5px;					/* because shadow */
	top: 15%;
	width: 32%;
}
.awards > img:nth-child(2) {
	left: 68%;
	top: 7.5%;
	translate: -50%;
	width: 32%;
}
.awards > img:nth-child(3) {
	left: 50%;
	top: 0;
	translate: -50%;
	width: 37%;
}
.awards > img:nth-child(4) {
	width: 45%;
	left: 55%;
	translate: -50%;
	bottom: 2%;
}
.awards > img:nth-child(5) {
	width: 42%;
	left: 0;
	bottom: 10%;
    border-radius: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {

   .awards {
		view-timeline: --awards-tl;
		--awards-flag: false;

		animation: awards_animation steps(1) both;
		animation-timeline: --awards-tl;
		animation-range-end: entry 50%; 
   }
   @keyframes awards_animation {
		to {
			--awards-flag: true;
		}
   }
	
   .awards > img {
	opacity: .01;
	transition: transform .5s ease-out, opacity .2s ease-out;
	transition-delay: 5s; 
   }
   .awards > img:nth-child(1) {
	transform: translate(100%, 80%);
   }
   .awards > img:nth-child(2) {
	transform: translate(100%, -30%);
   }
   .awards > img:nth-child(3) {
	transform: translate(-15%, -20%);
   }
   .awards > img:nth-child(4) {
	transform: translate(-25%, 100%);
   }
   .awards > img:nth-child(5) {
	transform: translate(-75%, 20%);
   }
   @container style(--awards-flag: true) {
    .awards > img {
		transform: translate(0, 0) !important;
		opacity: 1;
		transition-delay: 0s;
    }
   }
 
 }
}