@font-face{
	src:url('/assets/fonts/Roboto/static/Roboto-Medium.ttf');
	font-family:Roboto-Medium;
}

@font-face{
	src:url('/assets/fonts/Roboto/static/Roboto-Regular.ttf');
	font-family:Roboto-Regular;
}

@font-face{
	src:url('/assets/fonts/Google_Sans/static/GoogleSans-Medium.ttf');
	font-family:GoogleSans-Medium;
}

@font-face{
	src:url('/assets/fonts/Google_Sans/static/GoogleSans-Regular.ttf');
	font-family:GoogleSans-Regular;
}


@font-face{
	src:url('/assets/fonts/Google_Sans/static/GoogleSans-Bold.ttf');
	font-family:GoogleSans-Bold;
}

@font-face{
	src:url('/assets/fonts/Google_Sans/static/GoogleSans-SemiBold.ttf');
	font-family:GoogleSans-SemiBold;
}

@font-face{
	src:url('/assets/fonts/Google_Sans/static/GoogleSans-Italic.ttf');
	font-family:GoogleSans-Italic;
}


body, html{
	margin:0;
	padding:0;
	background-color:#f3f3f3;
	/*background-image: linear-gradient(180deg, #f9f9f9 30%, #e9e7ff 100%);*/
	/*background-image: linear-gradient(180deg, #f7f7f7 30%, #e7ecff 100%);*/
	background-image: linear-gradient(180deg, #ffffff 30%, #e7ecff 100%);
	
	background-attachment: fixed;
	font-family:GoogleSans-Medium;
}


.main-test{
	height:200px;
	background-color:#f3f3f3;
}




.main-content{
	font-family:GoogleSans-Regular;
	min-height:100vh;
}


.mob-nav-block{
	display:none;/*flex*/
	justify-content: center;
	align-items: center;
	background-color:#fff;
	padding:6px;
	width:40px;
	height:40px;
	white-space:nowrap;
	border-radius:30px;
	margin:0px 0px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	flex-shrink: 0;
	cursor:pointer;
	/*opacity:.5;*/
	/*transform:scale(1)*/
}

.mob-nav{
	display:none;
	font-family:GoogleSans-Medium;
	padding-top:46px;
	/*box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;*/
	font-size:14px;
	color:#4f489f;
}
.long-link-block{
	display:flex;
	background-color:#fff;
	padding:6px;
	width:100%;
	max-width:1000px;
	min-width:250px;
	white-space:nowrap;
	height:40px;
	border-radius:30px;
	margin:0px 0px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


.cut-btn{
	display: flex;
	flex-shrink: 0;
	border:none;
	padding:0;
	margin:0;
	color:#fff;
	background-color:#3bc792;
	padding:0px 18px;
	border-radius:30px;
	box-shadow: rgb(49 163 118 / 82%) 0px 1px 3px 0px, rgb(90 194 197) 0px 0px 0px 1px;
	font-size:14px;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	transition:background 150ms ease;
}

.cut-btn:hover{
	background-color:#0fb375;
	box-shadow: rgb(43 99 77 / 82%) 0px 1px 3px 0px, rgb(90 194 197) 0px 0px 0px 1px;
}


ul{
	margin:0;
	padding:0;
	list-style: none;
}

li{
	padding:0;
	margin:0;
	/*border-bottom:1px solid #f1f1f1;*/
	/*padding:16px 16px;*/
}

h4{
	color:#4e4a6d;
	font-family:GoogleSans-Bold;
    margin-bottom: 0px;
    padding: 0px;
	font-size: 16px;
}

h3{
	color:#4e4a6d;
	font-family:GoogleSans-Bold;
	text-align:center;
    margin-bottom: 0px;
}

h2{
	color:#4e4a6d;
	font-family:GoogleSans-Bold;
	text-align:center;
    /*margin-bottom: 0px;*/
	margin: 40px 0px;
}

.dotted-line{
	text-align:center;
	line-height: 1.4em;
	color: #aaa;
	font-size: 4px;
	/*text-shadow: 0px 1px 8px rgb(72 199 149);*/
	margin:60px 0px;
}

.d-start{
	color: #48c795;
}




.showing-wrap {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 600ms ease, transform 600ms ease;
	width:100%;
}

/* Когда элемент становится видимым */
.showing-wrap.show {
    opacity: 1;
    transform: translateY(0);
}

.showing-wrap-2 {
    opacity: 0.2;
    transition: opacity 800ms ease, transform 600ms ease;
	/*width:100%;*/
	/*box-sizing: border-box;*/

}

/* Когда элемент становится видимым */
.showing-wrap-2.show {
    opacity: 1;
}

nav a{
	color:#fff;
}

.card-multi{
	display:flex;
	width:100%;
	min-width:300px;
	max-width:1800px;
	min-height:50px;
	margin-bottom:6px;
	gap:26px;
	box-sizing: border-box;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin-top:12px;
}

.promo-preview-multi{
	display:flex;
	flex-shrink: 0;
	width:100%;
	height:160px;
	border-radius:10px;
	justify-content: center;
    align-items: center;
}

.promo-text-multi{
	line-height:1.5em;
}

.multi-wrap{
	
	display:flex;
	gap:20px;
	flex-wrap: wrap;
	background:#fff;
	border-radius:18px;
	border: 1px solid #e5e5e5;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding: 26px;
	width:240px;
	justify-content: center;
	transition: all 300ms ease;

}

.multi-wrap:hover{
	
	transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);

}


.card {
    display: flex;
    /* 1. Разрешаем перенос элементов */
    flex-wrap: wrap; 
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 950px;
    min-height: 200px;
    border: 1px solid #e5e5e5;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 6px;
    box-sizing: border-box;
    gap: 26px;
    padding: 26px;
    margin-top: 20px;
}

.promo-preview {
    display: flex;
    width: 100%;
    flex: 1 1 180px; /* Растет, сужается, базис 300px */
    max-width: 320px;
    /*height: 200px;*/
    height: auto;
	min-height:200px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    background-size: cover; /* Чтобы градиент/фон ложились красиво */
}

.promo-text {
    line-height: 1.6em;
    flex: 1 1 300px; 
    min-width: 0; /* Позволяет флекс-элементу сжиматься корректно */
}
@media (max-width: 768px) {
    .promo-preview {
        max-width: 100%; /* Картинка растянется на всю ширину на мобильных */
    }
}


.card-post{
	display:flex;
	background:#fff;
	border-radius:18px;
	width:100%;
	min-width:300px;
	max-width:1000px;
	min-height:200px;
	border: 1px solid #e5e5e5;
	/*box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;*/
	/*box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;*/
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	/*margin-bottom:20px;*/
	margin-bottom:6px;
    box-sizing: border-box;
	gap:26px;
	padding: 26px;
	margin-top:20px;
	flex-wrap: wrap;
}


.promo-preview-post{
	display:flex;
	flex-shrink: 0;
	width:100%;
	border-radius:10px;
	justify-content: center;
    align-items: center;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
	overflow:hidden;
}

.promo-text-post{
	display:flex;
	width:100%;
	line-height:1.5em;
	text-align:center;
	justify-content: center;
}

.card-multi-post{
	display:flex;
	width:100%;
	min-width:300px;
	max-width:1800px;
	min-height:50px;
	margin-bottom:6px;
	gap:26px;
	box-sizing: border-box;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin-top:20px;
}

.promo-preview-multi-post{
	display:flex;
	flex-shrink: 0;
	width:100%;
	border-radius:6px;
	justify-content: center;
    align-items: center;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
	cursor:pointer;
	overflow:hidden;

}

.promo-text-multi-post{
	line-height:1.5em;
}

.multi-wrap-post{
	
	display:flex;
	gap:20px;
	flex-wrap: wrap;
	background:#fff;
	border-radius:18px;
	border: 1px solid #e5e5e5;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding: 26px;
	width:100%;
	max-width:300px;
	justify-content: center;
	transition: all 300ms ease;

}

.multi-wrap-post:hover{
	
	transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);

}


.card-finish{
	display:flex;
	border-radius:18px;
	width:100%;
	margin-bottom:6px;
    box-sizing: border-box;
	gap:26px;
	padding: 26px;
	margin-top:10px;
	justify-content: center;
}

.finish-btn{
	display:flex;
	color:#fff;
	width:300px;
	height:80px;
	background: #000;
	border-radius:12px;
	padding:10px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	font-size:20px;
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	font-family:GoogleSans-Bold;
	cursor: pointer;
	transition: all 300ms ease;
	text-shadow: 0px 1px 2px rgb(57 55 206 / 40%);
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.finish-btn:hover{
	transform: translateY(-4px);
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


.results-area{
	/*display:flex;*/
	display:none;
	box-sizing: border-box;
	width:100%;
	justify-content: center;
	margin-top:0px;
	padding-left:16px;
	padding-right:16px;
	padding-bottom:40px;
	border-bottom: 1px solid #e5e4ef;
	flex-wrap: wrap;
}

.results-wrap{
	display:flex;
	flex-wrap: wrap;
	gap:14px;
	width:100%;
	min-width:240px;
	max-width:960px;
	padding:26px 26px;
	background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
	border-radius:18px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}


.result-item{
	display: grid;
	background-color:#fff;
	align-items: center;
	padding:6px;
	padding-left:14px;
	width:100%;
	border-radius:8px;
	font-size:14px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	grid-template-columns:0.3fr min-content 1fr min-content;
	white-space: nowrap;
	gap:14px;
    opacity:0;
    transform: translateY(-12px);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
	
}

.result-item.show{
    opacity:1;
    transform: translateY(0);
}

.col-action{
	display: flex;
	gap: 2px;
}

.action-qr{
	display:flex;
	border-radius:6px;
	padding:2px;
	height:24px;
	width:24px;
	justify-content: center;
	align-items: center;
	background:#fff;
	cursor: pointer;
}

.action-copy{
	display:flex;
	border-radius:6px;
	padding:2px;
	height:24px;
	width:24px;
	justify-content: center;
	align-items: center;
	background:#fff;
	cursor: pointer;
}






#scrollTopBtn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #6a5acd, #7b3fe4);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0.3s ease,
                box-shadow 0.25s ease;

    z-index: 1000;
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

#scrollTopBtn:active {
    transform: scale(0.95);
}

/* FOOTER */


.site-footer{
    background:#fff;
    padding:40px 26px 32px;
    text-align:center;
    font-size:14px;

    box-shadow:
        rgba(50,50,93,0.12) 0px -6px 20px,
        rgba(0,0,0,0.08) 0px -2px 8px;
}

.footer-nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
    margin-bottom:18px;
}

.footer-nav a{
    text-decoration:none;
    color:#5c5c66;
    font-size:14px;
    transition:0.2s;
}

.footer-nav a:hover{
    color:#000;
}

.footer-copy{
    font-size:12px;
    color:#8a8a95;
}

.copy-icon{
    font-family:tahoma;
    position:relative;
    top:-1px;
    font-size:10px;
}

/*------------------*/

.button-text{
	display:inline;
}

.button-icon{
	display:none;
}




























header{
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Плавный переход */
	backdrop-filter: blur(6px);
}

header.is-shrunk .red-block {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 0 solid transparent; /* Чтобы граница не "прыгала" */
}

.header-shadow{
	
}

.header-shadow.show-shadow{
	box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 20px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.red-block{
	color:#fff;
	padding-bottom: 20px;
	box-sizing: border-box;
	/*border: 1px solid red;*/
    overflow: hidden; /* Важно для скрытия контента */
    max-height: 100px; /* Укажите примерную высоту вашего блока */
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

.header-nav{
	display: flex;
	height:54px;
	justify-content: center;
    align-items: flex-end;
	gap:26px;
	font-family: GoogleSans-Medium;
	font-size: 15px;
	text-shadow: rgba(57, 55, 206, 0.4) 0px 1px 2px;
	white-space: nowrap;
	padding: 0 56px;
}

.logo-block{
	position:relative;
	top:12px;
}

.shorten-input{
	width: 100%;
}

.lime-block{
	border-bottom: 1px solid #e5e4ef;
}

.space-block{
	height:44px;
}

.input-block{
	height:46px;
	background:#fff;
}

.input-wrap{
	display:flex;
	justify-content: center;
	position:relative;
	top: -26px;
	gap:10px;
	margin: 0px 10px;
}

.mob-menu{
	display:none;
	justify-content: center;
    align-items: center;
	background:#fff;
    width: 40px;
    height: 40px;
    padding: 6px;
    white-space: nowrap;
    border-radius: 30px;
    margin: 0px 0px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    flex-shrink: 0;
    cursor: pointer;
	
}

.pre-input{
	display:flex;
	background: #fff;
	width:100%;
	min-width:100px;
	max-width:1000px;
	height:40px;
	border:none;
	padding:6px;
	border-radius: 30px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	white-space: nowrap;
	margin:0;
}


.cut-input{
	padding:10px 20px;
	min-width:100px;
	width:100%;
	border:none;
	border-radius:30px; font-size:14px;
	color:#554fa3;
}

.cut-input:focus{
    outline: none;
}

.main-content{
    /* Добавляем отступ, чтобы контент не заезжал под хедер сразу */
    padding-top: 165px; 
}

footer{
	background:#aaa;
	color:#000;
	text-align:center;
	padding:10px;
}

.test{
	display:flex;
	height:200px;
	border-bottom: 1px solid #ccc; 
	align-items: center;
    justify-content: center;
}

.menu{
	display:flex;
	justify-content: space-between;
	gap:25px;
	width:100%;
	max-width:800px;
}

.nav-items{
	display:flex;
	gap:26px;
	margin:0;
	padding:0;
}

@media (max-width: 680px){
    header {
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); 
        background: none !important; /* Робимо фон хедера прозорим на мобілці */
    }
   .lime-block {
        background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
	.mob-menu{
		display:flex;
	}
	
    .red-block {
        display: none !important; /* На мобилках оставляем жесткое скрытие */
    }
    .main-content {
        padding-top: 100px;
    }
	
    .menu {
        display: flex; 
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        flex-direction: column;
        gap: 0;
        /*padding: 0 20px;*/
		padding:0;
        background: #ffffff; /* Чистий білий фон */
        width: 100%;
        box-sizing: border-box;
        transition: all 0.1s ease-in-out;
        box-shadow: 0 10px 15px -5px rgba(0,0,0,0.1); /* М'яка тінь знизу */
    }

    .menu.is-open {
        max-height: 350px;
        opacity: 1;
        /*padding: 10px 20px 20px 20px;*/
		padding:0;
    }

    .menu ul {
        flex-direction: column;
        gap: 0 !important;
        list-style: none;
    }
    
    .menu li {
        cursor: pointer;
        padding: 12px 20px;
        border-bottom: 1px solid #f0f0f0; /* Легкі розділювачі */
        font-family: sans-serif;
        font-size: 16px;
    }
	
    .menu li a{
        color: #333; /* Темний колір тексту для контрасту */
    }

    .menu li:last-child {
        /*border-bottom: none;*/
    }
	
	.button-text{
		display:none;
	}
	
	
	.button-icon{
		display:block;
	}
	
}