@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');

:root {
	--cont: 100vw;
	--cont-x: 0rem;
}

.body-a {
/*	--main-rec: rgba(45, 58, 81, .08);*/
	--main-rec: transparent;
	--main-color: #2e3a51;
	--bg-feat: white;
	--bg-prod: white;
	--bg-ar-prod: #f0f0f0;
	--sh-ar-feat: 0 0 .5rem rgba(0, 0, 0, .075);
	--bg-ar-feat: white;
	--sh-ar-prod: unset;
	--bg-footer: #f0f0f0;
	--app-tree-bg: #f0f0f0;
}

.body-a * {
	color: var(--main-color);
}

* {
	font-family: "Prompt", sans-serif;
	font-style: normal;
}

img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

.g-0 {
	--cont-x: 1.5rem;
}

.box-flex {
	--grid-cont: .75;
	display: flex;
	overflow: auto;
	margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
    position: relative;
}

.box-flex>article {
	flex: 0 0 auto;
	width: calc((var(--cont) * var(--grid-cont)) - (var(--grid-cont) * var(--cont-x)));
	padding: 1rem .75rem;
}

.box-flex article img{
	max-width: 100%;
}

.box-flex figure{
	height: 100%;
	flex-direction: column;
}

.box-flex img{
	transition: scale .1s, rotate .1s ;
}

.box-flex figure:hover img{
	scale: 1.075;
	rotate: 2deg;
}

#product-categories article>.row{
	background: var(--bg-ar-prod);
	box-shadow: var(--sh-ar-prod);
}

#product-categories  {
	background: var(--bg-prod);
}

#features {
	background: var(--bg-feat);
}

#features article>.row{
	background: var(--bg-ar-feat);
	box-shadow: var(--sh-ar-feat);
}

article>.row {
	border-radius: 1rem;
	padding-top: .5rem;
}

h3 {
	font-weight: 700;
}

.box-flex figure>div{
	margin-bottom: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

.box-flex figcaption{
	padding: 0 .75rem;
	font-size: 1.25rem;
	flex-grow: 1; 
	display: flex; 
	justify-content: center;
	align-items: center;
}

.box-flex p{
	margin-bottom: .5rem;
	font-weight: 500;
}

.prod-scroll{
	position: relative;
	overflow: hidden;
}
.sh-scroll {
	position: absolute;
	height: calc( 100% - 2.25rem);
	background: white;
	width: 10px;
	top: 1rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
}

.fix-left { right: calc(100% + 20px); }

.fix-right { left: 100%; }

.strong{
	font-weight: 600;
}

footer{
	background: var(--bg-footer);
}

.body-b #product-categories .container,
.body-b #features .container {
	max-width: unset;
	padding-left: 0;
	padding-right: 0;
}

.app-tree {
	--at-locate: 0%;
	--at-delay: 0s;
	--img-size: 100px;
	--fnt-size: 1.25rem;
	background: var(--app-tree-bg);
	border-radius: 1.5rem
}

.app-tree figure{
	--run-time: 1s;
	opacity: 1;
	margin-bottom: 0;
}

.app-tree[data-ani="t"] figure {
	animation: upApp 0s forwards;
}

.app-tree div:not(:last-child)>figure {
/*	padding-bottom: 2rem;*/
	padding-bottom: 1rem;
}

.applications img{
	position: absolute;
	--top : 10%;
	--dd : .15s;
	top: var(--top);
	left: 0;
}
.app-tree[data-ani="t"] img{
	animation: topName var(--run-time) calc( var(--d) + var(--run-time) + var(--dd) + var(--at-delay)) forwards;
}

.applications img:nth-child(2) {
	--top : 50%;
	--dd : .25s;
}

.applications img:nth-child(3) {
	--top : -25%;
	--dd : .75s;
}

.app-tree figure>a{
	display: block;
	opacity: 0;
	scale: 0;
	margin: 0 auto;
	width: var(--img-size);
	height: var(--img-size);
	background: white;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	border-radius: calc(var(--img-size) * 0.1066666666666667);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.app-tree[data-ani="t"] figure>a{
	animation: toCircle calc(var(--run-time) + .15s) calc(var(--d) + var(--at-delay)) forwards;
}

.app-tree figcaption{
	overflow: hidden;
	transform-origin: top center;
	opacity: 0;
	padding-top: 1rem;
	font-size: var(--fnt-size);
	font-weight: 600;
}

.app-tree[data-ani="t"] figcaption{
	animation: fadeIn .5s calc(var(--run-time) * 2 + var(--d) + var(--at-delay)) forwards;
}

.strong.super {
	font-weight: 900;
}

.applications img{
	width: var(--img-size);
	max-width: var(--img-size);
}

.app-tree figure::after{
	--h-line: 0;
	position: absolute;
	content: '';
	display: block;
	height: 0;
	width: 0;
	border-left: 3px dashed var(--main-color);
	transform-origin: top;
	opacity: .25;
	left: calc( 50%  + 1.5px);
	top: 0rem;
}

.app-tree[data-ani="t"] figure::after {
	animation: creatLineDashed calc(var(--run-time) *.5) calc( var(--d) + var(--at-delay)) forwards;
}

.app-tree[data-ani="t"] h3.super {
	animation: upApp var(--at-delay) forwards;
}

#banner h1 {
	font-weight: 600;
	text-align: center;
	font-size: 2rem;
}

#banner {
	font-size: 1.25rem;
}


.btn-pk>div:first-child a {
	background: var(--main-color);
	color: white;
}

.btn-pk>div:nth-child(2) a {
	background: white;
	font-weight: 600;
}

#banner a{
	text-decoration: unset;
	padding: .5rem 0;
	display: block;
	border-radius: .75rem;
}

#banner .imgs{
	background: var(--main-rec);
	border-radius: 2rem;
	position: relative;
}

#banner>.row>div:first-child{
	z-index: 5;
}
#banner>.row>div:last-child{
	z-index: 1;
}

header {
	background: #dde0e7;
}

.imgs {
	--w-img-p: 287px;
	--o-f: -24px;
	--o-t: 13%;
	--t-v: -.1;
	height: 600px;
}

.interface{
	--my-size: calc(var(--w-img-p) * .8);
	width: var(--w-img-p);
	position: absolute;
	top: var(--o-t);
	animation: phoneMove 0s infinite linear;
}

.interface img{
	width: 100%;
	max-width: 100%;
	position: relative;
	z-index: 5;
}

.interface img:nth-child(2){
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	height: calc(100% - 1rem);
	border-radius: 3rem;
	object-fit: cover;
	object-position: top;
	animation: screenMoveS 0s infinite linear;
}

.interface img:nth-child(3){
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
/*	height: calc(100% - 1rem);
	border-radius: 3rem;
	object-fit: cover;
	object-position: top;
	animation: screenMove 0s infinite linear;*/
}


.intf-vend {
	top: calc( var(--t-v) * var(--o-f));
	left: calc(50% - (var(--w-img-p) * .5));
}

.intf-shop {
	width: var(--my-size);
	left: calc( -1 * var(--o-f));
	top: var(--o-t);
}

.intf-cons {
	width: var(--my-size);
	left: calc((100% - var(--my-size)) + var(--o-f));
	top: var(--o-t);
}

.download-app h2{
	font-size: 2rem;
	font-weight: bolder;
	padding: 1.5rem 0;
	color: var(--color-app);
}

.download-app h3{
	padding-bottom: 1.5rem;
	color: var(--color-app);
}

.download-app p{
	margin-bottom: 0;
}

.download-app strong{
	display: block;
	padding: 1.5rem 0;
	font-size: 1.25rem;
}

.download-app img{
	width: 100%;
}

.download-app .n-col img:first-child{
	margin-bottom: .75rem;
}

#download-vendor h3{
	font-size: 1.25rem;
}

#download-shop h3{
	font-size: 1.25rem;
}

#download-vendor {
	--color-app: #1f62f2;
}

#download-shop {
	--color-app: #ff5959;
	background: var(--bg-footer);
}

#download-consumer {
	--color-app: #24bb4d;
}

.privacy-cl p{
	text-align: justify;
}

.privacy-cl h2, .privacy-cl h1 {
	font-weight: 600;
}

footer {
	font-size: .8rem;
}

footer h4, footer h5{
	padding-bottom: .5rem;
	font-weight: bold;
}

footer p {
	font-size: .95rem;
}

footer ul {
	list-style: none;
	padding-left: 0;
}

footer a{
	text-decoration: none;
}
footer li+li{
	padding-top: .5rem;
}

.f-footer{
	border-top: 2px solid white;
}

.f-footer span{
	opacity: .5;
}


.privacy-cl .header {
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(240,241,244,1) 25%, rgba(221,224,231,1) 100%);
}

.b {
	font-weight: bolder;
}

























@media (min-width: 346px) {
	.box-flex {
		--grid-cont: .45;
	}
	.app-tree {
		--img-size: 120px;
	}
}

@media (min-width: 576px) {
	:root {
		--cont: 540px;
	}
	.app-tree {
		--at-locate: 150%;
		--at-delay: 1s;
		--img-size: 100px;
		--fnt-size: 1.15rem;
		background-color: transparent;
		background-image: url(../img/bg-all-app.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	.app-tree figure{
		padding-bottom: 0;
	}
	.app-tree figure::after{
		--h-line: 5.25rem;
		display: block;
		left: 50%;
		top: -7rem;
	}
	.applications .col-sm-4:nth-child(1) figure::after,
	.applications .col-sm-4:nth-child(3) figure::after{
		--h-line: 5.75rem;
		top: -5.5rem;
	}
	.applications .col-sm-4:nth-child(1) figure::after{
		left: unset;
		rotate: 38deg;
		right: -3.75rem;
	}
	.applications .col-sm-4:nth-child(3) figure::after{
		rotate: -38deg;
		left: -3.75rem;
	}
	#banner h1, .privacy-cl h1 {
		font-size: 2.5rem;
	}
	header {
		background: rgb(255,255,255);
		background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(240,241,244,1) 25%, rgba(221,224,231,1) 100%);
	}
	#ecosystem-overview {
		--size-of-circle: 115px;
	}
	.app-tree h3.super {
		transform: translateY(var(--at-locate));
		font-size: calc(1rem + 1.25vw);
		height: var(--size-of-circle);
		width: var(--size-of-circle);
		line-height: var(--size-of-circle);
		border-radius: 50%;
		overflow: hidden;
		background: white;
		box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
		margin: 0 auto;
	}
	.interface{
		animation: phoneMove 10s infinite linear;
	}
	.interface img:nth-child(2){
		animation: screenMoveS 10s infinite linear;
	}
	.intf-shop, .intf-shop img:nth-child(2) {
		animation-delay: -33.33s;
	}

	.intf-cons, .intf-cons img:nth-child(2) {
		animation-delay: -66.66s;
	}

	.imgs {
		height: 320px;
		--w-img-p: 160px;
		--o-f: 20px;
		--o-t: 25px;
		--t-v: -.3;
	}
	.download-app .n-col{
		width: 495px;
	}
	#download-vendor h3,
	#download-shop h3,
	#download-consumer h3{
		font-size: 1.5rem;
	}
	#download-vendor h2,
	#download-shop h2,
	#download-consumer h2{
		font-size: 3rem;
	}
	.download-app strong{
		font-size: 1.5rem;
	}

}

@media (min-width: 768px) {
	:root {
		--cont: 720px;
	}
	.box-flex {
		--grid-cont: .315; /*.3333333333;*/
	}
	.box-flex figure>div{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.app-tree {
		--img-size: 120px;
		--fnt-size: 1.25rem;
	}
	.app-tree figure::after{
		--h-line: 8.5rem;
		top: -10rem;
	}
	.applications .col-sm-4:nth-child(1) figure::after,
	.applications .col-sm-4:nth-child(3) figure::after{
		--h-line: 8rem;
		top: -6.5rem;
	}
	.applications .col-sm-4:nth-child(1) figure::after{
		rotate: 45deg;
		right: -4.25rem;
	}
	.applications .col-sm-4:nth-child(3) figure::after{
		rotate: -45deg;
		left: -4.25rem;
	}
	#banner h1, .privacy-cl h1 {
		font-size: 3rem;
		text-align: left;
	}
	#ecosystem-overview {
		--size-of-circle: 135px;
	}
	.imgs {
		height: 350px;
		--w-img-p: 175px;
	}
}

@media (min-width: 992px) {
	:root {
		--cont: 960px;
	}
	.box-flex {
		--grid-cont: .192; /*.2;*/
	}
	.box-flex>article {
		padding: 1rem;
	}
	.app-tree {
		--img-size: 130px;
	}
	.btn-pk{
		margin-right: -4rem;
	}
	#ecosystem-overview {
		--size-of-circle: 145px;
	}
	.download-app h3 {
		color: var(--main-color);
	}
	.imgs {
		height: unset;
		--w-img-p: 247px;
		--o-f: 6px;
		--o-t: 75px;
		--t-v: .3;
	}
	
}

@media (min-width: 1200px) {
	:root {
		--cont: 1140px;
	}
	.box-flex figure>div{
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.app-tree {
		--img-size: 140px;
		--fnt-size: 1.5rem;
	}
	#banner h1, .privacy-cl h1 {
		font-size: 3.5rem;
	}
	#ecosystem-overview {
		--size-of-circle: 155px;
	}
	.imgs {
		--w-img-p: 287px;
		--o-f: -24px;
		--o-t: 75px;
		--t-v: .09;
	}

}

@media (min-width: 1400px) {
	:root {
		--cont: 1320px;
	}
	.box-flex {
		--grid-cont: .1615 /*.1666666666666667;*/
	}
	.app-tree {
		--img-size: 150px;
	}
	.imgs {
		--o-t: 55px;
		--t-v: -.1;
	}
}























@keyframes toCircle {
	0% {
		scale: 0;
		opacity: 0;
		border-radius: 50%;
	}
	5% {
		opacity: 1;
	}
	80% {
		scale: 1;
		border-radius: 50%;
	}
	100% {
		scale: 1;
		opacity: 1;
		border-radius: calc(var(--img-size) * 0.1066666666666667);
	}
	
}

@keyframes upApp {
	0%,30%{ transform: translateY(var(--at-locate)); }
	100% { transform: translateY(0); }
}

@keyframes fadeIn {
	0%{ 
		scale: 1 0;
		opacity: 0;
	}
	100% {
		scale: 1 1;
		opacity: 1;
	}
}

@keyframes topName {
	0% { top: var(--top); }
	100% { top: 0 }
}

@keyframes creatLineDashed {
	0% { height: 0; }
	100% { height: var(--h-line); }
}

@keyframes phoneMove {
	0%, 16.6666667%, 100%{
		width: var(--w-img-p);
		top: calc( var(--t-v) * var(--o-t));
		left: calc(50% - (var(--w-img-p) * .5));
		z-index: 8;
		filter: brightness(1) blur(0);
	}
	25.11111% {left: calc( (100% - ((var(--w-img-p) - (.5 * (var(--w-img-p) - var(--my-size))) ) )) + var(--o-f) );}
	33.3333334%,50% {
		width: var(--my-size);
		left: calc((100% - var(--my-size)) + var(--o-f));
		top: var(--o-t);
		z-index: 5;
		filter: brightness(.8) blur(2.5px);
	}
	80% { z-index:6 }
	66.6666668%,83.333335% {
		width: var(--my-size);
		left: calc(-1 * var(--o-f));
		top: var(--o-t);
		filter: brightness(.8) blur(2.5px);
	}
	92.11111% {
		left: calc(-1 * var(--o-f));
	}
}

/*@keyframes screenMove {
	4%, 100%, 62% {
		object-position: top;
	}

	12%, 54% {
		object-position: bottom;
	}
}*/

@keyframes screenMove {
	2%, 0%, 100%, 82% {
		object-position: top;
	}

	10%, 12% { object-position: center; }

	20%, 37% {
		object-position: bottom;
	}
}

@keyframes screenMoveS {
	2%, 0%, 100%, 82% {
		object-position: top;
	}

	20%, 37% {
		object-position: bottom;
	}
}