* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
    padding-top: var(--header-h);
}

:root {
	--bg1: #0a3a72;
	--bg2: #072b58;
	--accent: #ff6b00;
	--primary: #0074ff;
	--chip: #0e4a86;
	--chip-ghost: #0a3f72;
	--yellow: #ffd400;
	--text: #ffffff;
	--muted: #b9c6d9;
	--ring: #0b69ff33;
	--header-h: 120px;
	--container: 1300px;     
	--gutter: 24px;          
	--nav-gap: 14px;
}

html, body {
	background: #ffffff;
	color: #0f1b2e;
}

a {
	color: inherit;
	text-decoration: none;
}

.container {
	max-width: var(--container);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.site-header {
	position: fixed;    
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(180deg, var(--bg1), var(--bg2));
	color: var(--text);
}

.topbar {
	backdrop-filter: saturate(120%) blur(6px);
	background: #0a2f5a66;
	border-bottom: 1px solid #0d3a72;
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	flex-wrap: nowrap;
	overflow: visible;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}


.topbar {
	position: relative;
	z-index: 50;
}
.bottombar {
	position: relative;
	z-index: 40;
}
.top-left,
.top-mid,
.top-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	white-space: nowrap;
}
.divider {
	width: 1px;
	height: 18px;
	background: #0f4b86;
	display: inline-block;
	margin: 0 4px;
	opacity: .85;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--chip);
	padding: 8px 12px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 12px;
	color: #fff;
}
.chip.ghost { background: var(--chip-ghost); border: 1px solid #0e4a86; }
.chip.yellow { background: var(--yellow); color: #1a1a1a; font-weight: 700; }

.meta-link {
	padding: 6px 10px;
	border-radius: 999px;
	background: #0a3f7240;
	color: #fff;
	font-weight: 500;
    white-space: nowrap;
	font-size: 12px;
}
.meta-link.time {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	letter-spacing: .02em;
	font-size: 12px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 700;
}
.btn-orange { background: var(--accent); color: #fff; }
.btn-blue   { background: var(--primary); color: #fff; }

.icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-size: cover;
	        mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
}
.icon-download {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM5 19h14v2H5z"/></svg>');
	        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM5 19h14v2H5z"/></svg>');
}
.icon-shield {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l7 4v6c0 5-3.5 9.7-7 10-3.5-.3-7-5-7-10V6l7-4z"/></svg>');
	        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l7 4v6c0 5-3.5 9.7-7 10-3.5-.3-7-5-7-10V6l7-4z"/></svg>');
}
.icon-gift {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 12v8a2 2 0 0 1-2 2h-5v-10h7zM11 22H6a2 2 0 0 1-2-2v-8h7v10zM21 8h-5.1A3 3 0 1 0 12 5a3 3 0 1 0-3.9 3H3v2h18V8z"/></svg>');
	        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 12v8a2 2 0 0 1-2 2h-5v-10h7zM11 22H6a2 2 0 0 1-2-2v-8h7v10zM21 8h-5.1A3 3 0 1 0 12 5a3 3 0 1 0-3.9 3H3v2h18V8z"/></svg>');
}
.icon-coins {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3c-4.4 0-8 1.3-8 3s3.6 3 8 3 8-1.3 8-3-3.6-3-8-3zm-8 6v3c0 1.7 3.6 3 8 3s8-1.3 8-3V9c-1.9 1.4-5 2-8 2s-6.1-.6-8-2zm0 6v3c0 1.7 3.6 3 8 3s8-1.3 8-3v-3c-1.9 1.4-5 2-8 2s-6.1-.6-8-2z"/></svg>');
	        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3c-4.4 0-8 1.3-8 3s3.6 3 8 3 8-1.3 8-3-3.6-3-8-3zm-8 6v3c0 1.7 3.6 3 8 3s8-1.3 8-3v-3c-1.9 1.4-5 2-8 2s-6.1-.6-8-2z"/></svg>');
}

.flag {
	display: inline-block;
	width: 18px;
	height: 12px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px #0003 inset;
}
.flag.ua { background: linear-gradient(#005bbb 0 50%, #ffd500 50% 100%); }

.bottombar {
	background: #083a72;
	box-shadow: inset 0 -1px #0d3a72;
	color: #fff;

	display: flex;
	flex-direction: column; 
}

.bottom-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 24px;
	min-height: 60px;
	overflow-x: hidden;
}
.logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	white-space: nowrap;
}
.logo-img { height: 28px; display: block; }

.main-nav {
	grid-column: 2 / 3;
}
.main-nav .menu {
	display: inline-flex;
	align-items: center;
	gap: var(--nav-gap);
	white-space: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav .menu > li {
	flex: 0 0 auto;
}
.nav-link {
	padding: 10px 14px;
	border-radius: 999px;
	background: transparent;
	font-weight: 600;
	color: #fff;
	display: inline-block;
}
.nav-link.pill {
	border: 2px solid #ffd400;
}

.logo-spacer { display: none; }

.burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid #0e4a86;
	background: #0a3f72;
	cursor: pointer;
	color: #fff;
}
.burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	margin: 3px 0;
	border-radius: 2px;
}

.burger-toggle { position: absolute; left: -9999px; }
.overlay {
	position: fixed; inset: 0; background: #0006;
	opacity: 0; pointer-events: none; transition: .2s; z-index: 29;
}
.drawer {
	position: fixed; inset: 0 0 0 auto;
	transform: translateX(100%); transition: transform .25s ease;
	z-index: 1000; width: min(86%, 360px);
}
.drawer-inner {
	height: 100%; padding: 18px; background: #072b58;
	overflow: auto; display: flex; flex-direction: column; gap: 18px; color:#fff;
}
.drawer-group { display: flex; gap: 10px; flex-wrap: nowrap; }
.drawer-nav { 
	display: block; 
}
.drawer-nav .menu-vertical {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.drawer-nav .menu-vertical > li { 
	min-width: 0; 
}

.burger-toggle:checked ~ .overlay { opacity: 1; pointer-events: auto; }
.burger-toggle:checked ~ .drawer  { transform: none; }

.mobile-auth {
	display: none;
	gap: 12px;
	padding: 10px var(--gutter) 14px; 
}
.mobile-auth .btn {
	flex: 1 1 0;
	padding: 12px 14px;
	border-radius: 999px;
	font-weight: 800;
}

.chip:focus, .btn:focus, .nav-link:focus, .burger:focus, .meta-link:focus {
	outline: 3px solid var(--ring);
	outline-offset: 2px;
	border-radius: 12px;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 1024px) {
	.topbar-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.bottom-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 768px) {
	.topbar { display: none; }
	.bottom-inner {
		grid-template-columns: 44px 1fr 44px;
		justify-items: center;
	}
	.burger { display: inline-flex; flex-direction: column; justify-self: start; }
	.logo   { grid-column: 2 / 3; justify-self: center; }
	.logo-img { height: 26px; margin-left: 10   px; }
	.logo-spacer { display: block; width: 44px; height: 1px; } 
	.main-nav { display: none; }
	.mobile-auth { display: flex; }
}
.dropdown {
	position: relative;
}
.dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.dropdown .caret {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid rgba(255,255,255,.9);
	border-bottom: 2px solid rgba(255,255,255,.9);
	transform: rotate(45deg);
	margin-left: 6px;
	opacity: .9;
	transition: transform .15s ease;
}
.dropdown[open] .caret {
	transform: rotate(-135deg);
}

/* меню */
.dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	min-width: 220px;
	padding: 8px 0;
	background: #0a3f72;            /* подложка */
	border: 1px solid #0e4a86;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	list-style: none;
}
.dropdown-menu li { list-style: none; }

.dropdown-item {
	display: block;
	padding: 12px 16px;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-item:hover { background: #0b4a86; }
.dropdown-item.is-active { color: var(--yellow); font-weight: 700; }

/* иконка-шестерня */
.icon-gear {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2.1-1.6c.2-.1.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.8-.6-1.6-1-2.5-1.3l-.4-2.7c0-.2-.2-.4-.5-.4h-4c-.2 0-.4.2-.5.4l-.4 2.7c-.9.3-1.7.7-2.5 1.3l-2.5-1c-.2-.1-.5 0-.6.2l-2 3.5c-.1.2-.1.5.1.6l2.1 1.6c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2.1 1.6c-.2.1-.2.4-.1.6l2 3.5c.1.2.4.3.6.2l2.5-1c.8.6 1.6 1 2.5 1.3l.4 2.7c0 .2.2.4.5.4h4c.2 0 .4-.2.5-.4l.4-2.7c.9-.3 1.7-.7 2.5-1.3l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6l-2.1-1.6ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"/></svg>') center/cover no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2.1-1.6c.2-.1.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.8-.6-1.6-1-2.5-1.3l-.4-2.7c0-.2-.2-.4-.5-.4h-4c-.2 0-.4.2-.5.4l-.4 2.7c-.9.3-1.7.7-2.5 1.3l-2.5-1c-.2-.1-.5 0-.6.2l-2 3.5c-.1.2-.1.5.1.6l2.1 1.6c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2.1 1.6c-.2.1-.2.4-.1.6l2 3.5c.1.2.4.3.6.2l2.5-1c.8.6 1.6 1 2.5 1.3l.4 2.7c0 .2.2.4.5.4h4c.2 0 .4-.2.5-.4l.4-2.7c.9-.3 1.7-.7 2.5-1.3l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6l-2.1-1.6ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"/></svg>') center/cover no-repeat;
}

.slider {
	width: 100%;
}

.slider__container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 0px;
}

.slider__wrapper {
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	background: #052c55;
}

.slider__wrapper,
.slider__track,
.slide {
	height: clamp(260px, 36vw, 460px);
}

.slider__track {
	display: flex;
	transition: transform .45s ease;
	will-change: transform;
}

.slide {
	min-width: 100%;
	position: relative;
}

.slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	display: block;
}

.slide__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
	z-index: 1;
	pointer-events: none;
}

.slide__content {
	position: absolute;
	top: 50%;
	left: 40px;
	right: 40px;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	gap: 14px;
	max-width: 760px;
	width: auto;
	color: var(--text, #fff);
}

.slide__badge {
	display: inline-flex;
	align-self: flex-start;
	background: #0a3f72cc;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
	width: max-content;
	margin: 0;
}

.slide__title {
	font-size: clamp(18px, 2.2vw, 28px);
	font-weight: 800;
	line-height: 1.2;
}

.slide__text {
	color: var(--muted, #b9c6d9);
	font-size: clamp(13px, 1.2vw, 16px);
	max-width: 58ch;
}

.slide__cta {
	display: inline-flex !important;
	width: auto !important;
	align-self: flex-start;
	justify-content: center;
}


.slider__dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 3;
}

.slider__dots .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	border: 0;
	cursor: pointer;
}

.slider__dots .dot.is-active {
	background: #ffd400;
}


@media (max-width: 480px) {
	.slider__dots { bottom: 12px; }
}

@media (max-width: 768px) {
	.slide__content { left: 16px; right: 16px; }
    .slider__container {
	padding: 0 0px;
}
}

.slider__wrapper,
.slider__track,
.slide {
	touch-action: pan-y; 
}


.top-games {
    max-width: 1300px;
	margin: 0 auto;
    border-top:   3px solid #0074ff;
	border-left:   3px solid #0074ff;
	border-right:  3px solid #0074ff;   
    padding-bottom: 10px;
    background-color: #052c55;
}

.top-games .container + .container .tg-rail::-webkit-scrollbar-track {
	background: rgba(11, 47, 86, .16);
}
.top-games .container + .container .tg-rail {
	scrollbar-color: #ffd400 rgba(11, 47, 86, .16);
}

.tg-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
    padding-top: 20px;
}

.tg-title {
	font-weight: 800;
	font-size: 20px;
	color: #b9c6d9;
	letter-spacing: .02em;
}

.tg-more {
	font-weight: 800;
	font-size: 14px;
	color: #ffd400;
	text-decoration: none;
}
.tg-more:hover {
	text-decoration: underline;
}

.tg-rail {
	display: grid;
	grid-auto-flow: column;            
	grid-auto-columns: 120px;           
	grid-template-rows: repeat(2, 120px);
	column-gap: 16px;
	row-gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 6px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.tg-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tg-thumb {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 12px;
	overflow: hidden;                 
	background: #0b2f56;
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.tg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (hover:hover) {
	.tg-overlay {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		gap: 8px;
		background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6));
		opacity: 0;
		transition: opacity .18s ease;
	}
	.tg-thumb:hover .tg-overlay {
		opacity: 1;
	}
	.tg-actions {
		display: none;
	}
}

.tg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0px 12px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.tg-btn.demo { background: #0e4a86; }
.tg-btn.play { background: #ff6b00; }

@media (hover:none) {
	.tg-actions {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		margin-top: 6px;
	}

	.tg-btn {
		height: 28px;
		padding: 0 10px;
		border-radius: 999px;
		font-weight: 800;
		font-size: 11px;
		box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
	}

	.tg-rail {
		column-gap: 10px;
		row-gap: 10px;
	}

	.tg-rail {
		grid-template-rows: repeat(2, 150px); 
	}
}

@media (max-width: 360px) and (hover:none) {
	.tg-rail {
		grid-auto-columns: 96px;
		grid-template-rows: repeat(2, 142px); 
	}

	.tg-thumb {
		width: 96px;
		height: 96px;
	}

	.tg-btn {
		height: 26px;
		padding: 0 8px;
		font-size: 10px;
	}

	.tg-actions {
		gap: 5px;
		margin-top: 6px;
	}
}

main.content {
	max-width: 1300px;
	margin: -8px auto 24px;
	padding-left: var(--gutter, 16px);
	padding-right: var(--gutter, 16px);
    background-color: #b9c6d9;
	border-left:   3px solid #0074ff;
	border-right:  3px solid #0074ff;
	border-bottom: 3px solid #0074ff;
}

main.content h1,
main.content h2,
main.content h3 {
	color: #0b2f56;
	line-height: 1.2;
	font-weight: 800;
	margin: 20px 0 12px;
}

h1 {
    padding-top: 20px;
}

main.content h1 { font-size: clamp(24px, 3vw, 36px); margin-top: 8px; }
main.content h2 { font-size: clamp(20px, 2.4vw, 28px); }
main.content h3 { font-size: clamp(18px, 2vw, 22px); }

main.content p {
	color: #223142;
	line-height: 1.65;
	font-size: clamp(14px, 1.15vw, 16px);
	margin: 10px 0 10px;
}

main.content img {
	display: block;
    margin: 0 auto;
    max-width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	object-fit: contain;
}

main.content ul,
main.content ol {
	margin: 10px 0 16px 0;
	padding-left: 1.25em; 
	color: #223142;
}

main.content li {
	margin: 6px 0;
}

main.content ul { list-style: disc; }
main.content ol { list-style: decimal; }

main.content a {
	color: #0b69ff;
	text-decoration: none;
	border-bottom: 1px solid rgba(11, 105, 255, .35);
}
main.content a:hover {
	border-bottom-color: rgba(11, 105, 255, .7);
}

@media (max-width: 768px) {
	main.content {
		margin: -8px auto 20px;
	}
	main.content img {
		border-radius: 10px;
	}
}
@media (max-width: 480px) {
	main.content {
		margin: -8px auto 16px;
	}
	main.content img {
		border-radius: 8px;
	}
}

main.content div:has(> table) {
	overflow-x: auto;					
	-webkit-overflow-scrolling: touch;
	margin: 12px 0 18px;

	padding: 8px 0;					
}

main.content table {
	width: 100%;
	min-width: 760px;			
	border-collapse: collapse;
	background: #fff;
	color: #223142;
}

main.content caption {
	caption-side: top;
	text-align: left;
	font-weight: 800;
	color: #0b2f56;
	letter-spacing: .02em;
	padding: 4px 0 8px;
}

main.content thead th {
	position: sticky;					
	top: 0;
	z-index: 1;
	background: #f6f8fb;
	color: #0b2f56;
	font-weight: 800;
	font-size: 13px;
	text-align: left;
	padding: 10px 12px;
	white-space: nowrap;
	border-bottom: 1px solid rgba(11,47,86,.18);
}

main.content tbody td {
	padding: 10px 12px;
	font-size: 14px;
	border-bottom: 1px solid rgba(11,47,86,.12);
	vertical-align: middle;
	white-space: nowrap;				
}

main.content tbody tr:nth-child(odd) {
	background: #fbfcfe;
}

main.content tbody tr:hover {
	background: #f1f5fb;
}

main.content td:first-child,
main.content th:first-child {
	padding-left: 16px;
}
main.content td:last-child,
main.content th:last-child {
	padding-right: 16px;
}

@media (max-width: 768px) {
	main.content thead th,
	main.content tbody td {
		padding: 8px 10px;
		font-size: 13px;
	}
	main.content table {
		min-width: 640px;
	}
}

@media (max-width: 420px) {
	main.content table {
		min-width: 560px;
	}
	main.content caption {
		font-size: 14px;
	}
}

.site-footer {
	background: linear-gradient(180deg, #0a3a72, #072b58);
	color: #ffffff;
	border-top: 1px solid #0a2f5a66;
}

.footer-top {
	padding: 28px 0 12px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 24px;
	align-items: start;
}

.footer-brand .footer-logo {
	display: inline-flex;
	align-items: center;
	margin-bottom: 10px;
}
.footer-brand .footer-logo img {
	height: 28px;
	width: auto;
	display: block;
}
.footer-brand p {
	color: #b9c6d9;
	font-size: 14px;
	line-height: 1.6;
	max-width: 44ch;
	margin: 0;
}

.footer-col .footer-col-title {
	display: inline-block;
	margin: 4px 0 12px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .02em;
	color: #ffd400;
}
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.footer-col a {
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	opacity: .9;
}
.footer-col a:hover {
	opacity: 1;
	text-decoration: underline;
}

.footer-bottom {
	border-top: 1px solid #0a2f5a66;
	background: rgba(0, 0, 0, .06);
}
.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
}
.footer-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #b9c6d9;
}
.footer-meta a {
	color: #b9c6d9;
	text-decoration: none;
}
.footer-meta a:hover {
	color: #ffffff;
	text-decoration: underline;
}
.footer-meta .dot {
	opacity: .5;
}

.footer-lang {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.footer-lang a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #ffffff;
	opacity: .9;
	text-decoration: none;
}
.footer-lang a:hover {
	opacity: 1;
	text-decoration: underline;
}

.flag.ua {
	display: inline-block;
	width: 18px;
	height: 12px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px #0003 inset;
	background: linear-gradient(#005bbb 0 50%, #ffd500 50% 100%);
}

.site-footer a:focus {
	outline: 3px solid rgba(11, 105, 255, .3);
	outline-offset: 2px;
	border-radius: 8px;
}


@media (max-width: 992px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.footer-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-brand,
	.footer-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-brand .footer-logo {
		display: inline-flex;
		justify-content: center;
	}

	.footer-brand p {
		text-align: center;
	}

	.footer-col ul {
		place-items: center;         
    }
	.footer-bottom-inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
		gap: 10px;
		text-align: center;
	}

	.footer-meta {
		justify-content: center;
		flex-wrap: wrap;
	}

	.footer-lang {
		justify-content: center;
	}

	.footer-brand .footer-logo img {
		height: 24px;
	}
}

.scroll-top {
	position: fixed;
	right: 16px;
	bottom: 88px; /* выше чата */
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid #0a2f5a66;
	background: #0a3a72;
	color: #fff;
	font-weight: 800;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(0,0,0,.25);
	z-index: 60;
	transition: transform .15s ease, opacity .15s ease;
}
.scroll-top:hover { transform: translateY(-2px); }
.scroll-top.show { display: inline-flex; opacity: 1; }

.support-chat {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 60;
}

.chat-panel[hidden],
.chat-overlay[hidden] {
	display: none !important;
}

.chat-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	z-index: 59;
}

.chat-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #0a2f5a66;
	background: #ff6b00;
	color: #fff;
	font-weight: 800;
	border-radius: 999px;
	padding: 10px 14px;
	box-shadow: 0 10px 22px rgba(0,0,0,.25);
	cursor: pointer;
}
.chat-toggle .chat-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: #00d27a; box-shadow: 0 0 0 2px #0a3a72 inset;
}
.chat-toggle .chat-label { font-size: 13px; }

chat-panel {
	position: absolute;
	right: 0;
	bottom: 60px;
	width: min(360px, 92vw);
	background: #072b58;
	border: 1px solid #0a2f5a66;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 36px rgba(0,0,0,.35);
	display: grid;
	grid-template-rows: auto 1fr auto;
	color: #fff;
}

.chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: #0a3a72;
	border-bottom: 1px solid #0a2f5a66;
}
.chat-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13px;
}
.chat-status-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: #00d27a;
	box-shadow: 0 0 0 2px #0a3a72 inset;
}
.chat-close {
	background: transparent; border: 0; color: #fff; cursor: pointer;
	font-size: 16px; line-height: 1; opacity: .9;
}
.chat-close:hover { opacity: 1; }

/* body */
.chat-body {
	height: 320px;
	overflow: auto;
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 12px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 40%),
		#072b58;
}
.msg { display: grid; gap: 4px; max-width: 86%; }
.msg-bot { justify-self: start; }
.msg-user { justify-self: end; }
.bubble {
	background: #0a3f72;
	border: 1px solid #0a2f5a66;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
}
.msg-user .bubble {
	background: #0b69ff;
	border-color: #0b69ff;
}
.s-time { color: #b9c6d9; font-size: 11px; opacity: .9; }

.chat-input {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	padding: 10px;
	background: #072b58;
	border-top: 1px solid #0a2f5a66;
}
.chat-input input {
	height: 38px;
	border-radius: 10px;
	border: 1px solid #0a2f5a66;
	background: #0a3a72;
	color: #fff;
	padding: 0 12px;
	font-size: 14px;
}
.chat-input input::placeholder { color: #b9c6d9; }
.send-btn {
	height: 38px;
	width: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid #0a2f5a66;
	background: #ffd400;
	color: #1a1a1a;
	font-weight: 800;
	cursor: pointer;
}

.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i {
	width: 6px; height: 6px; border-radius: 50%;
	background: #b9c6d9; opacity: .8; display: inline-block;
	animation: blink 1.2s infinite ease-in-out;
}
.typing i:nth-child(2){ animation-delay: .2s; }
.typing i:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.25;transform:translateY(0)} 40%{opacity:1;transform:translateY(-2px)} }

@media (max-width: 480px) {
	.support-chat { right: 12px; bottom: 12px; }
	.chat-panel  { width: min(92vw, 360px); }
}

.chat-input .send-link {
	background: none;
	border: 0;
	color: #ffd400;
	text-decoration: underline;
	font-weight: 800;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 4px;
	cursor: pointer;
	align-self: center;
}

.chat-input .send-link:hover {
	color: #ffdf40;
	text-decoration: underline;
}

.chat-input .send-link:focus {
	outline: 3px solid rgba(11,105,255,.3);
	outline-offset: 2px;
	border-radius: 6px;
}

.chat-input .send-link svg {
	display: block;
}