@charset "UTF-8"; 
/*
@font-face {font-family: VKSansDisplayLight; src: url(/fonts/woff/VKSans/VKSansDisplayLight.woff2) format('woff2'); font-display: swap;}
@font-face {font-family: NotoSansSemiBold; src: url(/fonts/woff/NotoSans/NotoSansSemiBold.woff2) format('woff2'); font-display: swap;}
*/
:root{
	--font:system-ui, -apple-system, sans-serif;
	--font-bold: sans-serif, system-ui, -apple-system;
	--cl-blue:#3a8dd8;
	--fsize: 1vw + 1vh;
}
*{margin:0; padding:0;user-select: none;}

/* xxxxxxxx */
.fx_col{display: flex;flex-direction: column;}.fx_row{display: flex;}.fx_c{align-items:center;} .fx_cj{justify-content: center;} .sb{justify-content: space-between;}
.fx_row_col{display: flex;flex-direction: row; flex-wrap: wrap;}
.maxw{width: -webkit-fill-available;} .p05{padding: 0.5em;} .p01{padding: 1em;}
.g05{gap:0.5em;}
.s1{width:1em;height:1em;}.s15{width:1.5em;height:1.5em;}.s2{width:2em;height:2em;}.s3{width:3em;height:3em;}
/* xxxxxxxx */

a:any-link{color:inherit;font-style: normal;}
b{/*font-weight:500;*/}/*b{font-family:NotoSansSemiBold; font-weight:unset;}*/

body{display: flex; flex-direction: column; align-items: center;font-family: var(--font);color: #000; min-height: 100svh;  background: radial-gradient(#ffffff 20%, #c3e2ff); text-align: center;font-size: clamp(1.1rem, 2vw, 1.4rem);}
.conteiner{margin: 1em; max-width: 1200px;}
main{display: flex; flex-direction: column; align-items: center; gap: 1rem;}

h1,h2{font-family:var(--font-bold); /*font-weight: 500;*/}
h1{font-size: clamp(1.3rem, 4.5vw, 1.6rem); text-align:center;  text-wrap-style: balance;letter-spacing:1px;}
h2{font-size: 1.2em; text-align:center; letter-spacing:1px;}


.shadow_wrapper{filter: drop-shadow(-8px 5px 8px rgba(100, 100, 100, 0.3));}
.sect{
	width: -webkit-fill-available;background-color: #ffffffde; padding: clamp(0.8em, 2vh, 2em) clamp(1em, 6vw, 4em); border: 1px solid #c1c1c1;	border-radius: 20px;backdrop-filter: blur(1px);max-width: 768px;
	p{margin-top: 1em; line-height: 1.4em;text-align: -webkit-match-parent;text-wrap-style: balance;text-align: justify;}
	button{
		background-color: var(--cl-blue);padding: 0.5em 1em;color:#fff; font-size:inherit;border-radius: 10px; border:none;
		width:min(100%, 300px);
		transition: background-color .2s;margin-left: auto; margin-right: auto;
	}
	em{position: absolute;top: 0.5em; left: 0.5em;}
}
/*
.sect[data-icon]::before{	
	content:attr(data-icon);position: absolute;top: 0.5em; left: 0.5em; font-size: larger;
}
*/
.a_but{display: block;
	background: url(../img/telegramm_white.svg) var(--cl-blue);background-size: contain;background-repeat:no-repeat;background-position: right;
    text-decoration: none;color: white;border-radius: 10px;padding: 0.5em 1em; margin-top: 0.5em;
	transition: background-color .2s;max-width: 300px; margin-left: auto; margin-right: auto;
}
.a_but:hover{background-color: #4a9be5;}	
.marker_green{
	list-style: none;padding-left: 0;
	li{position: relative;margin-bottom: 1em;padding-left: 1em;line-height: 1.4em;}
	li::before {content: "\2714";position: absolute;color: #0fc80f;left: -0.5em;top: 0.6em;transform: translateY(-50%);}
}
.txt_just{text-align: justify;}

.smartphone{
	--br: 27px;
	--br-in: 22px;
	container-type: inline-size;display: flex;flex-direction: column;justify-content: space-between;
	background: radial-gradient(circle at top left, #bfc654, transparent 60%), radial-gradient(circle at bottom right, #bfc654, transparent 60%), #69bf8e;
	height:clamp(256px, 55svh, 512px); 	aspect-ratio: 9 / 19.5;
	border: 0.6vh outset #1a1a1a; border-radius:var(--br);	margin: 0.5em auto;	
	.top_panel{
		background-color:#ffffffde; min-height:3.5cqh; border-radius:var(--br-in) var(--br-in) 0 0;border-bottom: 1px solid #dadada;
		.camera{background: linear-gradient(165deg, #353535, #4d4d4d);width: 40%;height: 45%; border-radius: 0 0 30px 30px; margin: 0 auto;}
	}
	.wrap_chat{padding-left: 3px;scroll-behavior:smooth;overflow: auto;scrollbar-width: none;}
	.chat{padding:4px;flex-grow: 1;align-content: center;font-size: 4.5cqw;}
	/*.chat.animation{animation-name: scrollChat;animation-duration: 4s;animation-iteration-count:1;animation-direction: alternate;animation-timeline: scroll(root)}*/
	
	.message{/*font-family:sans-serif;*/overflow-x: hidden; background-color:#fff;border-radius: 6px; padding:4px; text-align:left;margin-right: 12%;margin-top: 1.2em;}	
	.wrap_but{text-align: left;}
	.inline_button{
		height: 2.5em; align-self: flex-start;padding: 0 0.5em;font-size: 4.5cqw;background-color: #0000001f;border-radius: 8px;border: none;outline: none;color: white;width: -webkit-fill-available; margin-right: 12%; overflow: hidden;
	}
	.bottom_panel{
		display: flex;justify-content: center;align-items: center;gap: 18cqw;background-color:#558c5c80;min-height:3.5cqh;border-radius: 0 0 var(--br-in) var(--br-in);color:#ffffffc9;
		& .rect, & .round, & .back{display:inline-block; width: 1cqh; height: 1cqh; border:1px solid #d5d5d5;}
	}
}

.rect{border-radius: 2px;}.round{border-radius:50%}.back{border-radius: 50% 0 0 50%; corner-shape: bevel;}
.icon{display: inline-block;  background-size: contain; background-position:center;}
.tg{background-image: url(../img/tg_blue.svg);}
.gg{background-image: url(../img/ggreen.svg);}
.email{background-image: url(../img/email.svg);}
.address{background-image: url(../img/address.svg);}
.demo{background-image: url(../img/demo.svg);}
.account{background-image: url(../img/person.svg);}
.support{background-image: url(../img/support.svg);}
.link{background-image: url(../img/link.svg);}
.dialog{background-image: url(../img/dialog.svg);}
.notif{background-image: url(../img/notif.svg);}
.traffic{background-image: url(../img/traffic.svg);}

.inpfield{
	border: 1px solid #c1c1c1;padding: 0.5em;text-align: left;font-family: inherit;font-size: 1em;width: -webkit-fill-available; border-radius: 10px; height: 6em;color:#333; resize: none;
}
.inpfield::placeholder{font-size:0.9em;}
.inpfield:focus{outline: 1px solid #3a8dd8;}
footer{
	display:flex; flex-direction:column; justify-content:center;gap:0.5em;align-items: center;color: #fff; background: linear-gradient(180deg, #888888, #333333); font-size: medium;
	.img_icon{filter: invert(1); width: 1.5em; height: 1.5em; transform: translateY(0.3em);}
}
form[inert]{ 
	textarea{background-color:#e0e0e0;}
	button{background-color:#8493a0;}
}
.rotate{transform: rotate(360deg)};

@keyframes scrollChat { from {transform: translateY(0);} to {transform: translateY(-60%);}}

@media (min-width: 1200px) {
  footer{flex-direction:row;justify-content: space-between;}
}