.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%);
}
.advantage > div {
	position: relative;
}	
.advantage_ref {
	position: absolute;
	bottom: calc(100% + var(--hh) + 55px + 3.5rem);		/* + header + h2 + h3  heights */
}	

@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_ref {
	bottom: 100vh;
 }
 
 .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 10s;
	 }
	 @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: 52%;
	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;
		}
		80% {
			scale: 1.15;
			opacity: .8;
		}
		90%,100% { 
			scale: 2;
			opacity: 0;
		}
	 }	
	}
	
 }/* @supports */ 
}/* @media */ 

.license, .docs {
	width: 100%;
	aspect-ratio: 3/2;	
	height: 35vh;
	min-height: 200px;
	position: relative;
}
.license > a {	
	display: block;
	height: 100%;
	aspect-ratio: 265/380;
	margin: auto;
	transition: transform .5s;
}
.license > a:hover {	
	transform: scale(1.2);
}
.license img {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	height: 30vh;
	max-height: 90%;
	width: auto;
    box-shadow: 4px 6px 5px 0px rgba(99,99,99,0.33);
	/* cursor: pointer; */
}
.license img:first-child {
	z-index: 1;
	backface-visibility: hidden;
}

.docs img {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -165% -70%;
	width: 26vw;
    max-width: 145px;
    height: auto;
	border: 1px solid rgba(0,0,0,.2);
    box-shadow: 4px 6px 5px 0px rgba(99,99,99,0.33);
	transition-delay: 5s; 
}
.docs img:nth-child(2) {
	translate: -89% -60%;
}
.docs img:nth-child(3) {
	translate: -16% -50%;
}
.docs img:nth-child(n+4) {
	translate: 63% -40%;
}
.docs img:nth-child(n+5) {
    transform-origin: 2px;
    box-shadow: none;
}
.docs img:nth-child(n+6) {
	backface-visibility: hidden;
}
   
.docs:hover img:nth-child(4) {
	transition-delay: 0s;
}
.docs:hover img:nth-child(n+5) {
	transform: perspective(1000px) rotateY(-179deg);
	transition: transform .75s ease-out 0s;
}

.disc img {
	max-width: 350px;
	width: 70%;
	height: auto;
	margin: 3vh auto;
}

.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%;
}

.aniwrap {
	text-align: center;
}	
   
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {

   .aniwrap {
		view-timeline: --aniwrap-tl;
		--anim_flag: false;

		animation: show_animation steps(1) both;
		animation-timeline: --aniwrap-tl;
		animation-range-end: entry 50%; 
   }
   @keyframes show_animation {
		to {
			--anim_flag: true;
		}
   }

   .awards > img, .docs img, .disc img {
	opacity: .01;
	transition: transform .5s ease-out, opacity .2s ease-out, filter .25s linear, scale .2s linear;
	transition-delay: 5s; 
   }
   .awards > img {
	filter: blur(3px);
   }	
   .docs img {
	transform: translate(100%, 50%);
   }
   .docs img:nth-child(n+5) {
	transform: translate(100%, 50%) perspective(1000px) rotateY(-179deg);
   }
   
   .disc img {
	filter: blur(3px);
	scale: 1.05;
   }
   
   .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%);
   }
   .license img {
	opacity: 0;
	transition: all 3s cubic-bezier(.32,.78,.57,.97) 5s;
   }
  
   @container style(--anim_flag: true) {
    .license img {
		transform: rotateY(-360deg);
		opacity: 1;
		transition-delay: 0s;
    }
    .docs img {
		transform: translate(0, 0);
		opacity: 1;
		transition-delay: 0s;
    }
	.docs img:nth-child(2) {
		transition-delay: 0.33s;
	}
	.docs img:nth-child(3) {
		transition-delay: 0.66s;
	}
	.docs img:nth-child(n+4) {
		transition-delay: 1s;
	}
    .docs img:nth-child(n+5) {
		transform: translate(0, 0) perspective(1000px) rotateY(0deg);
    }
	
	.disc img {
		opacity: 1;
		scale: 1;
		filter: blur(0px);
		transition-delay: .3s;
	}

    .awards > img {
		transform: translate(0, 0) !important;
		opacity: 1;
		filter: blur(0);
		transition-delay: 0s;
    }
   }
 
 }
}