@import url("fonts.css");
@import url("reset.css");


/*-----------------------------------------------------------------------------*/
/*Colors
/*-----------------------------------------------------------------------------*/
:root {
    --background: #151212;
    --background_transparent: rgba(21, 18, 18, 0.97);
    --background_gradient: rgba(21, 18, 18, 0);
    --font: #ffffff;
    --element: #2a2a2a;
    --element_gradient: rgba(42, 42, 42, 0);
    --element_rgba: rgba(42, 42, 42 , .9);
    --active: #474747;
    --active_hover: #3e3e3e;
    --link: #a5a5a5 ;
    --bright: #f9b61a;
    --bright_transparent: rgba(249, 182, 26, .3);

    --selection: #79580c;
    --red: #c72b2b;
    --green: #379C62;
    --orange: #d17536;
    --violet: #825df2;
    --blue: #5b97e8;
}


/*-----------------------------------------------------------------------------*/
/*Animations
/*-----------------------------------------------------------------------------*/
.animated__float {
    will-change: transform;
    animation: animated-float-1 6s ease-in-out infinite alternate;
}

.animated__float:nth-of-type(1) {
    animation: animated-float-1 6s ease-in-out infinite alternate;
}

.animated__float:nth-of-type(2) {
    animation: animated-float-2 8s ease-in-out infinite alternate;
}

@keyframes animated-float-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(10px, -15px) rotate(1deg);
    }
    100% {
        transform: translate(-5px, -8px) rotate(-0.5deg);
    }
}

@keyframes animated-float-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-12px, 12px) rotate(-1.5deg);
    }
    100% {
        transform: translate(8px, -5px) rotate(0.8deg);
    }
}

@keyframes animated-float-3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-10px, 4px) rotate(-1.2deg);
    }
    100% {
        transform: translate(10px, -7px) rotate(1.5deg);
    }
}


/*-----------------------------------------------------------------------------*/
/*Scroll bars
/*-----------------------------------------------------------------------------*/
body::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--active);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--active_hover);
}

div::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

div::-webkit-scrollbar-track {
    background: transparent;
}

textarea::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

textarea::-webkit-scrollbar-track {
    background: transparent;
}

textarea::-webkit-resizer {
    position: relative;
    border-radius: 8px 0px 20px 0px;
    background: var(--background) url("/assets/images/icons/arrow_dark.svg") no-repeat center / 90%;
}

ul::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

ul::-webkit-scrollbar-track {
    background: transparent;
}

::selection {
    background: var(--selection);
    color: var(--font);
}


/*-----------------------------------------------------------------------------*/
/*Base styles
/*-----------------------------------------------------------------------------*/
html {
    min-width: 300px;
}
body {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    overflow-x: hidden;
    background-color: var(--background);
    color: var(--font);
    font-size: 13px;
    letter-spacing: .06rem;
    line-height: 1.6;
    font-family: 'regular', sans-serif;
}

.no_scroll {
    overflow: hidden;
}

.container {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
}

a {
    color: var(--link);
    transition: opacity 0.15s ease;
}

a:active {
    opacity: .7;
}

button {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

button:active {
    opacity: .7;
}

h1,
h2,
h3,
h4 {
    font-family: 'black', sans-serif;
    line-height: 1.4;
    letter-spacing: .14rem;
}

h1,
h2 {
    line-height: 1.15;
    font-size: 28px;
}

content {
    flex-grow: 1;
}

.utter::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.touchable {
    transition: opacity 0.15s ease;
}

.touchable:active {
    opacity: .7;
}

@media only screen and (max-width: 1100px) {
    content {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 480px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    h1, h2 {
        line-height: 1.3;
        font-size: 26px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Preloader
/*-----------------------------------------------------------------------------*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background_transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 100;
    transition: opacity .15s ease, visibility 0s ease .16s;
}

.preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes rotateplane {
	0% {
		-webkit-transform: perspective(120px);
	}

	50% {
		-webkit-transform: perspective(120px) rotateY(180deg);
	}

	100% {
		-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
	}

}

@keyframes rotateplane {
	0% {
		-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	}

	50% {
		-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	}

	100% {
		-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}

}

@keyframes fade_in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.preloader_inner {
    position: relative;
    opacity: 0;
    width: 50px;
    height: 50px;
    background: transparent;
    animation: fade_in .15s .3s forwards;
}

.preloader_inner .square {
    display: block;
    color: #000;
    font-family: "black", sans-serif;
    font-size: 36px;
	width: 50px;
	height: 50px;
    border-radius: 10px;
	background-color: var(--bright);
	animation: rotateplane 1.2s infinite ease-in-out;
}


/*-----------------------------------------------------------------------------*/
/*Infoline
/*-----------------------------------------------------------------------------*/
.infoline {
    height: 35px;
    background-color: var(--red);
    overflow: hidden;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.infoline__inner {
    display: flex;
    font-size: 14px;
    line-height: 35px;
}

.infoline__inner span {
    flex: 0 0 auto;
    padding: 0 20px;
    animation: infoline var(--marqueeTime) infinite linear;
}

@keyframes infoline {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(var(--marqueeDistance));
    }
}


/*-----------------------------------------------------------------------------*/
/*Header
/*-----------------------------------------------------------------------------*/
header {
    z-index: 10;
    -webkit-user-select: none;
    user-select: none;
}

.header__wrapper {
    display: flex;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 20px;
}

.header__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 46px;
    margin-right: 30px;
    font-family: 'black', sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.header__logo img {
    height: 100%;
}

.header__logo__name {
    font-size: 25px;
    line-height: 1.2;
    color: var(--font);
    text-transform: uppercase;
    line-height: 1;
    color: var(--bright);
}

.header__logo__name span {
    display: block;
}

.header__logo__name span:first-child {
    font-size: 12.8px;
}

.header__logo__name span:last-child {
    font-size: 15px;
    color: var(--font);
    margin-top: 3px;
}

.header__nav {
    display: flex;
    margin-right: auto;
}

.header__nav li a {
    font-size: 14px;
    padding: 14px;
    color: var(--font);
}


.header__basket {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    height: 46px;
    background-color: var(--element);
    border-radius: 15px;
    padding: 14px 18px;
    margin-left: 12px;
}

.header__basket img {
    height: 18px;
}


.header__basket__count {
    display: none;
    position: absolute;
    height: 20px;
    right: 0;
    margin-top: -43px;
    padding: 0 8px;
    background-color: var(--active);
    border-radius: 15px;
    color: var(--font);
    line-height: 20px;
    font-size: 12px;
    font-family: 'regular', sans-serif;
}

.header__basket__count.active {
    display: block;
}

.header__profile {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    height: 46px;
    background-color: var(--element);
    border-radius: 15px;
    padding: 14px 18px;
    margin-left: 15px;
}

.header__profile.active {
    background-color: var(--active);
}

.header__profile img {
    height: 18px;
}

.header__profile__arrow {
    display: flex;
    align-items: center;
    width: 25px;
    height: 22px;
    padding: 5px 4px;
    margin-left: 7px;
    background-color: var(--active);
    border-radius: 15px;
    transition: transform .1s ease;
}

.header__profile__arrow img {
    margin-top: 1px;
}

.header__profile.active .header__profile__arrow {
    transform: rotate(-180deg);
}

.header__burger {
    display: none;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background-color: var(--element);
    margin-left: 12px;
    border-radius: 15px;
}

.header__burger__lines {
    transform: rotate(0deg);
    width: 20px;
    height: 17px;
}

.header__burger__lines span {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--font);
    border-radius: 2px;
    transform: rotate(0deg);
    transition: .15s ease;
}

.header__burger__lines span:nth-child(1) {
    top: 2px
}

.header__burger__lines span:nth-child(2),
.header__burger__lines span:nth-child(3) {
    top: 8px
}

.header__burger__lines span:nth-child(4) {
    top: 14px
}

.header__burger.active .header__burger__lines span:nth-child(1),
.header__burger.active .header__burger__lines span:nth-child(4) {
    top: 8px;
    left: 50%;
    width: 0;
}

.header__burger.active .header__burger__lines span:nth-child(2) {
    transform: rotate(45deg);
}

.header__burger.active .header__burger__lines span:nth-child(3) {
    transform: rotate(-45deg);
}

.header__profile__menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    margin-top: -10px;
    margin-right: 40px;
    width: 200px;
    padding: 20px;
    background-color: var(--active);
    border-radius: 15px;
    font-size: 12px;
    font-family: 'regular', sans-serif;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
    -webkit-user-select: none;
    user-select: none;
    z-index: 10;
    transition: visibility 0s, opacity 0.15s ease;
}

.header__profile__menu.active {
    visibility: visible;
    opacity: 1;
}

.header__profile__row {
    display: flex;
    justify-content: space-between;
}

.header__profile__row:not(:first-child) {
    margin-top: 10px;
}

.header__profile__row .two {
    width: 48%;
}

.header__profile__row .three {
    width: 31%;
}

.header__profile__row .four {
    width: 23%;
}

.header__profile__lang {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    background-color: var(--background);
    border-radius: 15px;
    color: var(--font);
}

.header__profile__lang span {
    padding-top: 1px;
}

.header__profile__lang.active {
    background-color: var(--link);
}

.header__profile__lang img {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 8px;
}

@media only screen and (max-width: 1100px) {
    .header__burger {
        display: flex;
    }

    .header__nav,
    .header__profile {
        display: none;
    }

    .header__logo {
        margin-right: auto;
    }
}

@media only screen and (max-width: 350px) {
    .header__logo__name {
        display: none;
    }
}


/*-----------------------------------------------------------------------------*/
/*Breadcrumbs
/*-----------------------------------------------------------------------------*/
section.breadcrumbs {
    padding: 20px 0 10px;
}

.breadcrumbs__list {
    display: flex;
    overflow: hidden;
}

.breadcrumbs__item {
    position: relative;
    margin-right: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--link);
    transition: opacity .15s ease;
}

.breadcrumbs__item:first-child {
    margin-right: 15px;
}

.breadcrumbs__item .breadcrumbs__link {
    display: inline-block;
    padding: 8px 12px;
    background-color: var(--element);
    border-radius: 10px;
    font-size: 12.5px;
}

.breadcrumbs__item:not(:last-child):not(:first-child):after {
    content: "";
    position: absolute;
    padding: 2px;
    right: -11px;
    top: 50%;
    transform: translateY(-55%) rotate(-45deg);
    border: solid var(--link);
    border-width: 0 1px 1px 0;
    display: inline-block;
}

.breadcrumbs__item:not(:last-child):active a {
    opacity: .7;
}

@media only screen and (max-width: 600px) {
    .breadcrumbs__item:not(:nth-child(1)):not(:nth-child(3)),
    .breadcrumbs__item:not(:last-child):not(:first-child):after {
        display: none;
    }
}


/*-----------------------------------------------------------------------------*/
/*Footer
/*-----------------------------------------------------------------------------*/
footer {
    margin-top: 60px;
    padding-bottom: 40px;
    -webkit-user-select: none;
    user-select: none;
}

.footer__wrapper {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.footer__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 46px;
    margin-right: 5px;
    font-family: 'black', sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.footer__logo img {
    height: 100%;
    margin-right: 10px;
}

.footer__column {
    margin-right: auto;
}

.footer__nav {
    display: flex;
    margin-top: 3px;
}

.footer__nav li a {
    padding: 5px 10px;
    font-size: 13px;
    color: var(--font);
}

.footer__copyright {
    padding: 0 10px;
    font-size: 10px;
    color: var(--link);
}


.footer__basket {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    height: 46px;
    background-color: var(--element);
    border-radius: 15px;
    padding: 14px 18px;
    margin-left: 12px;
}

.footer__basket img {
    height: 18px;
}


.footer__basket__count {
    display: none;
    position: absolute;
    height: 20px;
    right: 0;
    margin-top: -43px;
    padding: 0 8px;
    background-color: var(--active);
    border-radius: 15px;
    color: var(--font);
    line-height: 20px;
    font-size: 12px;
    font-family: 'regular', sans-serif;
}

.footer__basket__count.active {
    display: block;
}

@media only screen and (max-width: 1100px) {
    footer {
        display: none;
    }
}


/*-----------------------------------------------------------------------------*/
/*Mobile menu
/*-----------------------------------------------------------------------------*/
.header__menu::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 44px;
    height: 44px;
    right: 63px;
    top: 53px;
    background-color: var(--background_transparent);
    border-radius: 50%;
    opacity: 1;
    transform: scale(1) translate(50%, -50%);
    transform-origin: top right;
    transition: transform .15s ease, opacity 1ms ease .15s;
}

.header__menu.active::before {
    opacity: 1;
    transform: scale(100) translate(20%, -20%);
    transition: transform .5s ease, opacity .5ms ease;
}


.mobile_menu {
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    z-index: 20;
    height: calc(100% - var(--headerHeight));
    top: var(--headerHeight);
    overflow-y: auto;
}

.mobile_menu.active {
    visibility: visible;
}

.mobile_menu .container {
    padding: 0 40px;
    overflow-x: visible;
}

.mobile_menu__content {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
}

.mobile_nav__menu {
    padding: 0;
}

.mobile_menu__nav li {
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .15s ease, transform .15s ease;
}

.mobile_menu__nav li a {
    display: block;
    padding: 15px 0 ;
    font-size: 17px;
    font-family: 'bold', sans-serif;
    color: var(--font);
    line-height: 1.3;
}

.mobile_menu.active .mobile_menu__nav li {
    opacity: 1;
    transform: translateX(0);
}

.mobile_menu__nav li:first-child {
    transition-delay: 3ms;
}

.mobile_menu__nav li:nth-child(2) {
    transition-delay: 15ms;
}

.mobile_menu__nav li:nth-child(3) {
    transition-delay: 10ms;
}

.mobile_menu__nav li:nth-child(4) {
    transition-delay: 35ms;
}

.mobile_menu__nav li:nth-child(5) {
    transition-delay: 45ms;
}

.mobile_menu__nav li:nth-child(6) {
    transition-delay: 60ms;
}

.mobile_menu__nav li:nth-child(7) {
    transition-delay: 70ms;
}

.mobile_menu__row {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.mobile_menu__row .two {
    width: 48%;
}

.mobile_menu__row .three {
    width: 31%;
}

.mobile_menu__row .four {
    width: 23%;
}

.mobile_menu__row:nth-of-type(1) {
    opacity: 0;
    transition: opacity .3s ease;
    transition-delay: 50ms;
}

.mobile_menu__row:nth-of-type(2) {
    opacity: 0;
    transition: opacity .3s ease;
    transition-delay: 70ms;
}

.mobile_menu.active .mobile_menu__row {
    opacity: 1;
}

.mobile_menu__lang {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-size: 14px;
    border-radius: 15px;
    background-color: var(--element);
    font-family: 'regular', sans-serif;
    color: var(--font);
}

.mobile_menu__lang.active {
    background-color: var(--active);
}

.mobile_menu__lang img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.mobile_menu__lang span {
    padding: 0 15px;
}


.mobile_menu__footer {
    margin-top: 32px;
    opacity: 0;
    font-size: 14px;
    color: var(--link);
    transition: opacity .3s ease, transform .3s ease;
    transition-delay: 100ms;
}

.mobile_menu.active .mobile_menu__footer {
    opacity: 1;
}

@media only screen and (max-width: 480px) {
    header .container::before {
        right: 43px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom button
/*-----------------------------------------------------------------------------*/
.custom_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    padding: 7px 20px;
    margin-top: 10px;
    font-size: 14px;
    font-family: 'regular', sans-serif;
    line-height: 1.2;
    background: var(--element);
    color: var(--font);
    border-radius: 15px;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}

.custom_button:active {
    opacity: .7;
}

.custom_button.disabled {
    opacity: .4;
}

.custom_button span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.custom_button .icon {
    height: 18px;
}

.custom_button.color_transparent {
    color: var(--link);
    background: transparent;
    border: 3px solid var(--element);
}

.custom_button.font_bold {
    font-family: "bold", sans-serif;
}

.custom_button.color_dark {
    background: var(--background);
}

.custom_button.color_light {
    background: var(--active);
}

.custom_button.color_bright {
    background: var(--bright);
    color: var(--background);
}

.custom_button.weight_light {
    height: 38px;
}

.custom_button.weight_regular {
    height: 46px;
}

.custom_button.weight_bold {
    height: 60px;
}

.custom_button.weight_black {
    height: 70px;
}

.custom_button.form {
    margin-top: 14px;
    font-size: 18px;
    font-family: 'black', sans-serif;
}

.custom_button.top_15 {
    margin-top: 15px;
}

.custom_button.top_0 {
    margin-top: 0;
}

.custom_button.width_240 {
    max-width: 240px;
}

.custom_button.width_140 {
    max-width: 140px;
}

.custom_button.width_auto {
    width: auto;
    padding: 0 20px;
}

.custom_button.align-left {
    justify-content: flex-start;
}


/*-----------------------------------------------------------------------------*/
/*Custom section
/*-----------------------------------------------------------------------------*/
.custom_section {
    margin-top: 50px;
}

content > .custom_section:first-child {
    margin-top: 30px;
}

.custom_section.top_20 {
    margin-top: 20px;
}

.custom_section.alter .container {
    background-color: var(--element);
    border-radius: 30px;
    padding: 10px;
}

.custom_section__wrapper {
    display: flex;
    justify-content: space-between;
}

.custom_section__wrapper.wrap {
    flex-wrap: wrap;
}

.custom_section__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
}

.custom_section__title h2 {
    padding-right: 20px;
}

.custom_section__area {
    width: 100%;
    margin-top: 15px;
    padding: 25px 30px;
    background-color: var(--element);
    border-radius: 30px;
}

.custom_section__area.cut_down {
    padding-bottom: 16px;
}

.custom_section__area h2 {
    font-size: 26px;
}

@media only screen and (max-width: 900px) {
    content > .custom_section:first-child {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 720px) {
    .custom_section {
        margin-top: 40px;
    }

    .custom_section.upper {
        margin-top: 10px;
    }

    .custom_section__title .custom_button {
        width: auto;
        flex-shrink: 0;
    }

    .custom_section__area {
        padding: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .custom_section__title {
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .custom_section__title .custom_button {
        margin-top: 10px;
        width: 100%;
        max-width: 100%;
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom tag
/*-----------------------------------------------------------------------------*/
.custom_tag {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--active);
    border-radius: 15px;
    font-size: 13px;
    font-family: "medium", sans-serif;
    white-space: nowrap;
}


/*-----------------------------------------------------------------------------*/
/*Custom input
/*-----------------------------------------------------------------------------*/
.custom_input {
    text-align: left;
}

.custom_input__value {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 140px;
    padding: 7px 12px 6.25px;
    background: var(--element);
    font-size: 14px;
    font-family: 'regular', sans-serif;
    border-radius: 15px;
    border: 2px solid transparent;
    transition: border .15s ease;
}

.custom_input__value.color_light {
    background: var(--active);
}

.custom_input__value.color_dark {
    background: var(--background);
}

.custom_input.focused .custom_input__value {
    border: 2px solid var(--active);
}

.custom_input.error .custom_input__value {
    border: 2px solid var(--red);
}

.custom_input__button {
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: 5px;
    background-color: var(--active);
    border-radius: 10px;
    cursor: pointer;
    transition: opacity .15s ease;
}

.filled .custom_input__button {
    visibility: visible;
    opacity: 1;
}

.custom_input__button:active {
    opacity: .7;
}

.custom_input__button img {
    height: 16px;
}

.custom_input__button.notice img {
    height: 20px;
}

.custom_input__button.eye img {
    height: 22px;
}

.custom_input__placeholder,
.custom_input__title {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-family: 'regular', sans-serif;
    line-height: 1.25;
    color: var(--link);
    width: calc(100% - 18px); 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: color .15s ease, font-size .15s ease, top .15s ease, transform .15s ease;
}

.custom_input:has(.custom_sign) .custom_input__placeholder {
    left: 54px;
}

.filled .custom_input__placeholder,
.focused .custom_input__placeholder,
.custom_input__title {
    top: 7px;
    font-size: 10px;
    transform: translateY(0);
}

.custom_input__input,
.custom_input__info {
    width: 100%;
    padding: 14px 10px 4px 6px;
    font-family: 'regular', sans-serif;
    font-size: 15px;
    line-height: 1.25;
    background-color: var(--element);
    transition: border-radius .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.color_light .custom_input__info {
    background-color: var(--active);
}

.color_dark .custom_input__info,
.color_dark .custom_input__value,
.color_dark .custom_input__input {
    background-color: var(--background);
}

.custom_input:has(.custom_sign) .custom_input__input {
    padding-left: 0;
}

.custom_input__message {
    position: relative;
    visibility: hidden;
    opacity: 0;
    height: 0;
    padding: 0 15px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--red);
    font-family: 'regular', sans-serif;
    transition: opacity .15s ease, padding .15s ease;
}

.custom_input.error .custom_input__message {
    height: auto;
    top: 0;
    padding: 5px 15px 0;
    visibility: visible;
    opacity: 1;
}


/*-----------------------------------------------------------------------------*/
/*Custom question
/*-----------------------------------------------------------------------------*/
.custom_question {
    width: 100%;
    margin-top: 15px;
    background-color: var(--element);
    border-radius: 15px;
}

.custom_question__title {
    display: flex;
    align-items: center;
    padding: 24px;
    cursor: pointer;
    font-family: 'regular', sans-serif;
}

.custom_question__answer {
    display: none;
    padding: 0 20px 25px 74px;
}

.custom_question.active .custom_question__answer {
    display: block;
}

.custom_question__question {
    font-size: 13px;
    margin-left: 7px;
    line-height: 1.4;
}

.custom_question__answer p {
    font-size: 13px;
    padding-top: 10px;
}

.custom_question__answer>p:first-child,
.custom_question__answer>h3:first-child,
.custom_question__answer>li:first-child {
    padding-top: 0;
}

.custom_question__links {
    display: none;
    padding: 0 20px 25px 70px;
}

.custom_question.active .custom_question__links {
    display: block;
}

.custom_question__links__list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
}

.custom_question__link {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--active);
    border-radius: 15px;
    font-size: 13px;
    color: var(--font);
    font-family: 'regular', sans-serif;
    margin-top: 10px;
    margin-right: 10px;
    white-space: nowrap;
}

.custom_question:has(.custom_question__links) .custom_question__answer {
    padding-bottom: 5px;
}

@media only screen and (max-width: 420px) {
    .custom_question__answer,
    .custom_question__links {
        display: none;
        padding: 0 30px 30px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom sign
/*-----------------------------------------------------------------------------*/
.custom_sign {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    background-color: var(--active);
    border-radius: 10px;
    text-align: center;
    flex-grow: 0;
    flex-shrink: 0;
    transition: background-color .15s ease;
}

.custom_sign img {
    width: 55%;
}

.custom_sign img.mail {
    width: 50%;
}

.custom_sign img.telegram {
    width: 58%;
    margin-left: -2px;
}

.custom_sign.question img {
    width: 57%;
    position: relative;
    margin-top: 1px;
}

.custom_sign.question img {
    transition: transform .15s ease, margin-top .15s ease;
}

.custom_sign.question.active img {
    transform: rotate(-180deg);
    margin-top: 0px;
}


/*-----------------------------------------------------------------------------*/
/*Custom overlay
/*-----------------------------------------------------------------------------*/
.custom_overlay {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--element);
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.custom_overlay__preloader,
.custom_overlay__message {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.custom_overlay.active,
.custom_overlay__preloader.active,
.custom_overlay__message.active {
    visibility: visible;
    opacity: 1;
}

.custom_overlay__message.active {
    visibility: visible;
    opacity: 1;
}

.custom_overlay__message {
    z-index: 4;
    visibility: hidden;
}

.custom_overlay__content {
    padding: 40px;
    font-size: 13px;
    text-align: center;
}

.custom_overlay__content h3 {
    font-size: 20px;
    font-family: "bold", sans-serif;
}

.custom_overlay__content .message {
    margin-top: 10px;
}

.custom_overlay__message.button .custom_overlay__content {
    padding: 0 20px;
    font-family: 'regular', sans-serif;
    font-size: 14px;
}

.custom_overlay__message.button.error {
    background-color: var(--red);
}


/*-----------------------------------------------------------------------------*/
/*Custom contact
/*-----------------------------------------------------------------------------*/
.custom_contact__input {
    position: relative;
    margin-bottom: 10px;
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: border .15s ease;
}

.custom_contact__input.focused {
    border: 3px solid var(--active);
}

.custom_contact__input.error {
    border: 3px solid var(--red);
}

.custom_contact__input .custom_input__placeholder {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    font-size: 17px;
    font-family: 'black', sans-serif;
    line-height: 1.25;
    color: var(--link);
    z-index: 1;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: font-size .15s ease, top .15s ease, transform .15s ease;
}

.custom_contact__input.textarea .custom_input__placeholder {
    top: 40px;
}

.custom_contact__input.filled .custom_input__placeholder,
.custom_contact__input.focused .custom_input__placeholder {
    top: 15px;
    font-size: 13px;
    transform: translateY(0);
}

.custom_contact__input .custom_input__input {
    display: block;
    width: 100%;
    padding: 32px 30px 25px 30px;
    font-family: 'bold', sans-serif;
    font-size: 17px;
    line-height: 1.25;
    color: var(--font);
    background: var(--element);
}

.custom_contact__input textarea {
    resize: vertical;
    height: 250px;
    min-height: 150px;
    max-height: 500px;
}

.custom_contact__input.textarea::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 35px;
    background: linear-gradient(to top, var(--element_gradient), var(--element) 15%);
    pointer-events: none;
    z-index: 0;
    border-radius: 20px 20px 0 0;
}


/*-----------------------------------------------------------------------------*/
/*Custom contact
/*-----------------------------------------------------------------------------*/
.custom_contact {
    margin-top: 15px;
}

.custom_contact__wrapper {
    margin-top: 5px;
    display: flex;
    align-items: center;
}

.custom_contact__link span {
    color: var(--link);
}


/*-----------------------------------------------------------------------------*/
/*Custom filter
/*-----------------------------------------------------------------------------*/
.custom_filter__categories {
    margin-top: 15px;
    padding-bottom: 8px;
    display: flex;
    overflow-x: auto;
    line-height: 1.2;
}

.custom_filter__category {
    flex-shrink: 0;
    padding: 15px 24px;
    padding-right: 30px;
    margin-right: 10px;
    background-color: var(--element);
    border-radius: 15px;
    cursor: pointer;
    transition: opacity .15s ease;
}

.custom_filter__category:last-child {
    margin-right: 0;
}

.custom_filter__category:active {
    opacity: .7;
}

.custom_filter__category.active {
    background-color: var(--active);
}

.custom_filter__category__title {
    font-family: 'regular', sans-serif;
}

.custom_filter__category__info {
    margin-top: 5px;
    font-size: 13px;
    color: var(--link)
}

.custom_filter__message {
    transition: opacity .15s ease;
}

.custom_filter__message.hidden {
    height: 0;
    visibility: hidden;
    opacity: 0;
}

.custom_filter__message.hidden .notification__area {
    height: 0;
}

.custom_filter__element.hidden {
    display: none;
}


/*-----------------------------------------------------------------------------*/
/*Notification
/*-----------------------------------------------------------------------------*/
.notification {
    height: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
}

.notification__area {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 10px;
    position: relative;
    border-radius: 30px;
    text-align: center;
}

.notification__title h1 {
    font-size: 32px;
}

.notification__title.weight_black h1 {
    font-size: 40px;
}

.notification__line {
    background: var(--active);
    height: 3px;
    margin: 10px auto 15px;
    width: 70px;
}

.notification__buttons {
    margin-top: 10px;
}

.notification__buttons.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.notification__button.action {
    margin-top: 10px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

content:has(section.notification) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media only screen and (max-width: 480px) {
    .notification__title h1 {
        font-size: 24px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Support
/*-----------------------------------------------------------------------------*/
.support__contact {
    width: 48%;
    position: relative;
    margin-left: -3px;
    margin-top: 15px;
    border-radius: 15px;
    overflow: hidden;
}

.support__info {
    width: 48%;
    margin-top: 15px;
}

.support__info__main p {
    padding-bottom: 10px;
    font-size: 13px;
}

.support__info__main p:last-child {
    padding-bottom: 5px;
}

@media only screen and (max-width: 900px) {
    .support__wrapper {
        flex-wrap: wrap;
        margin-right: 0;
    }

    .support__contact {
        width: calc(100% + 6px);
        order: 2;
        margin-top: 25px;
    }

    .support__info {
        width: 100%;
        order: 1;
        margin-top: 10px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom ul
/*-----------------------------------------------------------------------------*/
.custom_ul li {
    font-size: 13px;
    padding-top: 8px;
    text-indent: -9px;
    padding-left: 18px;
}

.custom_ul li::before {
    content: "• ";
    position: relative;
    top: -0.5px;
    display: inline-block;
    margin-right: 8px;
    font-size: 13px;
}


/*-----------------------------------------------------------------------------*/
/*Specification page
/*-----------------------------------------------------------------------------*/
.specification__content p {
    padding-top: 10px;
}

.specification__content h3 {
    padding-top: 25px;
    /* font-family: 'bold', sans-serif;
    text-transform: uppercase; */
}

.specification__content li {
    font-size: 13px;
    padding-top: 10px;
    text-indent: -9px;
    padding-left: 18px;
}

.specification__content li::before {
    content: "• ";
    position: relative;
    top: -0.5px;
    display: inline-block;
    margin-right: 8px;
    font-size: 13px;
}


/*-----------------------------------------------------------------------------*/
/*Сustom info
/*-----------------------------------------------------------------------------*/
.custom_info {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
}

.custom_info img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 10px;
}

.custom_info span {
    display: inline-block;
    margin-top: -2px;
}


/*-----------------------------------------------------------------------------*/
/*Custom line
/*-----------------------------------------------------------------------------*/
.custom_line {
    width: 120px;
    height: 5px;
    border-radius: 2px;
    background-color: var(--bright);
    margin-top: 20px;
}

.custom_line.direction_right {
    margin-left: auto;
}

.custom_line.direction_center {
    margin-left: auto;
    margin-right: auto;
}

.custom_line.size_small {
    width: 80px;
    height: 4px;
    margin-top: 10px;
}

.custom_line.size_mini {
    width: 60px;
    height: 3px;
    margin-top: 8px;
}


.why_matter .custom_section__wrapper {
    border-radius: 30px;
    text-align: right;
}

.why_matter__image {
    max-width: 520px;
    margin-right: 30px;
    border-radius: 30px;
    background-color: var(--element);
    border: 10px solid var(--element);
    overflow: hidden;
    align-self: center;
}

.why_matter_info {
    align-self: flex-start;
    max-width: 590px;
    padding: 10px 0px;
}

.why_matter_info p {
    margin-top: 20px;
    font-size: 15px;
}

@media only screen and (max-width: 900px) {
    .why_matter .custom_section__wrapper {
        flex-wrap: wrap;
        text-align: left;
        background-color: var(--background);
        padding: 0;
    }

    .why_matter .custom_line.direction_right {
        margin-left: 0;
        margin-right: auto;
    }

    .why_matter__image {
        max-width: 460px;
        margin-right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .why_matter_info {
        margin-top: 30px;
        padding-bottom: 0;
        padding-top: 0;
    }

    .first_screen__info h1 {
        margin-top: 15px;
        font-size: 36px;
    }
}

@media only screen and (max-width: 720px) {
    .why_matter {
        margin-top: 30px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom horizontal list
/*-----------------------------------------------------------------------------*/
.custom_horizontal_list {
    overflow-x: auto;
    padding-bottom: 20px;
}

.custom_horizontal_list::-webkit-scrollbar {
    width: 4px;
    height: 24px;
}

.custom_horizontal_list::-webkit-scrollbar-thumb {
    border-radius: 20px;
}

.custom_horizontal_list::-webkit-scrollbar-track {
    background: var(--element);
    border-radius: 20px;
}

.custom_horizontal_list.color_dark::-webkit-scrollbar-track {
    background-color: var(--background);
}

@media only screen and (max-width: 1100px) {
    .custom_horizontal_list::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: calc(100% - 80px);
        height: 24px;
    }
}

@media only screen and (max-width: 480px) {
    .custom_horizontal_list::after {
        width: calc(100% - 40px);
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom service card
/*-----------------------------------------------------------------------------*/
.custom_section.services .custom_section__wrapper:not(.wrap) {
    justify-content: flex-start;
}

.custom_service_card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 30%;
    min-width: 340px;
    padding: 10px;
    background-color: var(--element);
    border-radius: 20px;
}

.custom_section__wrapper .custom_service_card {
    margin-top: 15px;
    margin-right: 3.33%;
}

.custom_section__wrapper.wrap .custom_service_card {
    margin-top: 20px;
    margin-right: 0;
    min-width: 31.5%;
}

.custom_section__wrapper.wrap .custom_service_card:not(:first-child) {
    margin-top: 24px;
}

.custom_section__wrapper .custom_service_card:last-child {
    margin-right: 0;
}

.custom_service_card__header {
    padding: 10px;
    text-align: center;
}

.custom_service_card__title {
    font-family: "bold", sans-serif;
    font-size: 16px;
}

.custom_service_card__essence {
    margin-top: 10px;
}

.custom_service_card__body {
    position: relative;
    bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--background);
}

.custom_service_card__body__image {
    position: absolute;
    bottom: 0;
    z-index: 0;
    border-radius: 15px;
    overflow: hidden;
    margin-top: auto;
    align-self: flex-end;
}

.custom_service_card__body__image::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--background), var(--element_gradient) 180%);
}

.custom_service_card__description {
    padding: 20px;
    z-index: 1;
}

.custom_service_card__info {
    margin-bottom: 20px;
}

.custom_service_card__info .title {
    color: var(--bright);
}

.custom_service_card__info li::before {
    content: "•";
    position: relative;
    margin-right: 5px;
    top: -1px;
}

.custom_service_card__details {
    z-index: 1;
    margin: auto 20px 20px;
}

@media only screen and (max-width: 1100px) {
    .custom_section__wrapper.wrap .custom_service_card {
        width: 48%;
    }
}

@media only screen and (max-width: 600px) {
    .custom_section__wrapper.wrap .custom_service_card {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .custom_service_card {
        width: 100%;
        margin-right: 20px;
        margin-top: 15px;
        min-width: 100%;
    }

    .custom_section__wrapper .custom_service_card {
        margin-right: 20px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom example card
/*-----------------------------------------------------------------------------*/
.custom_section.examples .custom_section__wrapper {
    justify-content: flex-start;
}

.custom_example_card {
    position: relative;
    width: 23%;
    min-width: 220px;
    flex-shrink: 0;
    margin-right: 2.66%;
    margin-top: 15px;
    background-color: var(--background);
    overflow: hidden;
}

.custom_section__wrapper .custom_example_card:last-child {
    margin-right: 0;
}

.custom_example_card__image {
    overflow: hidden;
    border-radius: 20px;
}

.custom_example_card__info {
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    border-radius: 18px;
    background-color: var(--element_rgba);
    transition: opacity .15s ease;
}

.custom_example_card:hover .custom_example_card__info,
.custom_example_card:active .custom_example_card__info {
    visibility: visible;
    opacity: 1;
}

.custom_example_card__info .name {
    font-family: "bold", sans-serif;
    padding-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.custom_example_card__info .service {
    margin-top: 5px;
    padding: 2px 10px;
    align-self: flex-start;
    color: var(--bright);
    background-color: var(--bright_transparent);
    border-radius: 10px;
}

.custom_example_card__info .view {
    align-self: flex-start;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--link);
    margin-top: 5px;
}

@media only screen and (max-width: 720px) {
    .custom_example_card {
        margin-right: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .custom_example_card__info {
        justify-content: center;
    }

    .custom_example_card__info {
        padding: 10px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Service page
/*-----------------------------------------------------------------------------*/
.services_nav {
    margin-top: 10px;
    min-width: 260px;
    line-height: 1.4;
}

.services_current {
    margin-top: 10px;
    padding: 20px;
    background-color: var(--active);
    border-radius: 15px;
}

.services_current__title {
    font-size: 14px;
}

.services_current__essence {
    margin-top: 8px;
}

.services_about {
    margin-top: 20px;
    padding-left: 40px;
}

.services_about__description h1 {
    font-size: 22px;
    padding-bottom: 5px;
}

.services_about__description p {
    padding-top: 10px;
}

.services_about__description h3 {
    padding-top: 20px;
    font-size: 14px;
    font-family: "regular", sans-serif;
    color: var(--bright);
}

.services_about__products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15px;
}

.services_about__products .custom_product_card {
    margin-top: 15px;
}

@media only screen and (max-width: 780px) {
    .services_nav {
        display: none;
    }

    .services_about {
        padding-left: 0;
        margin-top: 0;
    }

    .services__title {
        display: none;
    }

    .services_about__description h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 480px) {
    .services_about__description h1 {
        font-size: 26px;
    }
}


/*-----------------------------------------------------------------------------*/
/*Custom product card
/*-----------------------------------------------------------------------------*/
.custom_product_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    width: 49%;
    min-width: 340px;
    padding: 10px;
    background-color: var(--element);
    border-radius: 20px;
}

.custom_product_card__info {
    position: relative;
    overflow: hidden;
    padding: 10px 20px;
    flex-grow: 1;
    background-color: var(--background);
    border-radius: 20px;
    margin-right: 10px;
}

.custom_product_card__info div:not(.custom_product_card__image) {
    position: relative;
    z-index: 1;
}

.custom_product_card__image {
    position: absolute;
    width: 100%;
    object-fit: contain;
    left: 0;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 0;
    border-radius: 15px;
    overflow: hidden;
    margin-top: auto;
    align-self: flex-center;
}

.custom_product_card__image::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--background), var(--element_gradient) 300%);
}

.custom_product_card__info .title {
    font-family: "bold";
    font-size: 16px;
}

.custom_product_card__info .price {
    font-family: "bold";
    font-size: 14px;
    color: var(--bright);
}

.custom_product_card__basket {
    align-self: stretch;
}

.custom_product_card__basket .custom_button {
    height: 100%;
}


@media only screen and (max-width: 780px) {
    .custom_product_card {
        width: 100%;
        min-width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .custom_product_card {
        flex-wrap: wrap;
    }

    .custom_product_card__info {
        margin-right: 0;
    }

    .custom_product_card__basket {
        width: 100%;
        margin-top: 10px;
    }

    .custom_product_card__basket .custom_button {
        height: 40px;
    }
}



/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/

/*-----------------------------------------------------------------------------*/
/* Homepage first screen — required by current WTC Games layout
/*-----------------------------------------------------------------------------*/
h1 .color_bright,
h2 .color_bright {
    color: var(--bright);
}

.first_screen__image {
    max-width: 520px;
    border-radius: 30px;
    border: 10px solid var(--element);
    aspect-ratio: 520 / 350;
    overflow: hidden;
    align-self: center;
}

.first_screen__info {
    padding-right: 20px;
    max-width: 500px;
    margin-top: 10px;
}

.first_screen__info h1 {
    margin-top: 15px;
    font-size: 48px;
}

.first_screen__info p {
    margin-top: 20px;
    font-size: 15px;
}

@media only screen and (max-width: 900px) {
    .first_screen__image {
        display: none;
    }

    .first_screen__info {
        max-width: 100%;
        margin-top: 0;
    }
}

/*-----------------------------------------------------------------------------*/
/* WTC Games Typography System v1
/* Larger, clearer body copy while keeping the branded game/display typography.
/*-----------------------------------------------------------------------------*/
:root {
    --font-readable: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-ui: "bold", "regular", sans-serif;
    --font-display: "black", sans-serif;
}

/* Readable content foundation */
body {
    font-family: var(--font-readable);
    font-size: 16px;
    line-height: 1.58;
    letter-spacing: .012em;
    font-weight: 500;
}

/* Keep the WTC visual identity for display/UI elements */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    letter-spacing: .075em;
}

h1 {
    font-size: clamp(38px, 3vw, 50px);
    line-height: 1.08;
}

h2 {
    font-size: clamp(27px, 2vw, 34px);
    line-height: 1.12;
}

h3 {
    font-size: 20px;
    line-height: 1.25;
}

h4 {
    font-size: 17px;
    line-height: 1.3;
}

/* Header / navigation */
.header__nav li a {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .025em;
}

.header__profile__menu {
    font-family: var(--font-readable);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: .01em;
}

.header__basket__count,
.footer__basket__count {
    font-family: var(--font-readable);
    font-size: 12px;
    letter-spacing: 0;
}

/* Buttons stay branded, but are easier to read */
.custom_button {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: .025em;
}

.custom_button.form {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: .055em;
}

/* Main sections */
.custom_section__title h2 {
    font-size: clamp(27px, 2vw, 34px);
}

.custom_section__area {
    font-size: 16px;
    line-height: 1.6;
}

.custom_section__area h2 {
    font-size: 30px;
}

/* Hero / homepage */
.first_screen__info p {
    max-width: 58ch;
    font-family: var(--font-readable);
    font-size: 17px;
    line-height: 1.58;
    letter-spacing: .006em;
    font-weight: 500;
}

.why_matter_info p {
    max-width: 62ch;
    margin-left: auto;
    font-family: var(--font-readable);
    font-size: 17px;
    line-height: 1.62;
    letter-spacing: .006em;
    font-weight: 500;
}

/* Service catalog cards */
.custom_service_card__header {
    padding: 13px 13px 11px;
}

.custom_service_card__title {
    font-family: var(--font-ui);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: .018em;
}

.custom_service_card__essence {
    margin-top: 11px;
    font-family: var(--font-readable);
    font-size: 15px;
    line-height: 1.52;
    letter-spacing: .006em;
    font-weight: 500;
}

.custom_service_card__description {
    padding: 22px;
    font-family: var(--font-readable);
    font-size: 15.5px;
    line-height: 1.58;
    letter-spacing: .004em;
    font-weight: 500;
}

.custom_service_card__info {
    margin-bottom: 22px;
}

.custom_service_card__info .title {
    display: inline-block;
    margin-bottom: 3px;
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: .018em;
}

.custom_service_card__info li,
.custom_service_card__info p {
    font-family: var(--font-readable);
    font-size: 15.5px;
    line-height: 1.58;
    letter-spacing: .004em;
}

.custom_service_card__details {
    margin: auto 20px 20px;
}

/* Individual service pages */
.services_current__title {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.35;
}

.services_current__essence {
    font-family: var(--font-readable);
    font-size: 15px;
    line-height: 1.55;
}

.services_about__description {
    font-family: var(--font-readable);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: .006em;
}

.services_about__description h1 {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1.12;
}

.services_about__description h3 {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .018em;
}

.custom_product_card__info .title {
    font-family: var(--font-ui);
    font-size: 17px;
}

.custom_product_card__info .price {
    font-family: var(--font-ui);
    font-size: 15px;
}

/* FAQ */
.custom_question__title {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: .012em;
}

.custom_question__question {
    font-size: 16px;
    line-height: 1.45;
}

.custom_question__answer,
.custom_question__answer p,
.custom_question__answer li {
    font-family: var(--font-readable);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: .004em;
}

.custom_question__link {
    font-family: var(--font-ui);
    font-size: 14px;
}

/* Contact form */
.custom_contact__input .custom_input__placeholder {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: .045em;
}

.custom_contact__input.filled .custom_input__placeholder,
.custom_contact__input.focused .custom_input__placeholder {
    font-size: 12px;
}

.custom_contact__input .custom_input__input {
    font-family: var(--font-readable);
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: .006em;
    font-weight: 600;
}

.custom_contact,
.custom_contact__wrapper,
.custom_contact__link {
    font-family: var(--font-readable);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: .006em;
}

/* Common form controls outside the contact form */
.custom_input__placeholder,
.custom_input__title {
    font-family: var(--font-ui);
    font-size: 14px;
    letter-spacing: .015em;
}

.custom_input__input,
.custom_input__info,
.custom_input__message,
input,
textarea,
select {
    font-family: var(--font-readable);
}

.custom_input__input,
.custom_input__info {
    font-size: 16px;
    line-height: 1.4;
}

/* Support / content-heavy areas */
.support__info,
.support__info__main p,
.specification__content,
.specification__content p,
.specification__content li,
.custom_ul li,
.custom_info span {
    font-family: var(--font-readable);
    font-size: 16px;
    line-height: 1.62;
    letter-spacing: .004em;
}

.specification__content h3 {
    font-family: var(--font-ui);
    font-size: 18px;
    line-height: 1.4;
}

/* Footer */
.footer__nav li a {
    font-family: var(--font-ui);
    font-size: 14px;
    letter-spacing: .018em;
}

.footer__copyright {
    font-family: var(--font-readable);
    font-size: 12px;
    letter-spacing: .01em;
}

/* Account / checkout / order workflow.
   !important is intentional here: these pages currently contain their own
   inline stylesheet blocks loaded after main.css. */
.account-card,
.account-order,
.checkout-card,
.checkout-summary,
.order-card,
.order-item,
.order-meta,
.conversation,
.wtc-paypal-card,
.order-success-card {
    font-family: var(--font-readable) !important;
    font-size: 16px !important;
    line-height: 1.58 !important;
    letter-spacing: .004em !important;
}

.account-meta__row span,
.account-order__label,
.checkout-summary__meta,
.checkout-note,
.order-item__product,
.order-detail span,
.order-meta__row span,
.timeline__date,
.conversation__meta {
    font-family: var(--font-readable) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    letter-spacing: .01em !important;
}

.account-unread {
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
}

.order-item__name {
    font-family: var(--font-ui) !important;
    font-size: 20px !important;
}

.timeline__status,
.conversation__sender {
    font-family: var(--font-ui) !important;
}

/* Admin: make it a working interface, not tiny legal copy */
html[id^="admin_"] body {
    font-family: var(--font-readable) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: .004em !important;
}

html[id^="admin_"] h1,
html[id^="admin_"] h2,
html[id^="admin_"] h3 {
    font-family: var(--font-display) !important;
}

html[id^="admin_"] h1 {
    font-size: 32px !important;
}

html[id^="admin_"] h2 {
    font-size: 24px !important;
}

.ad-nav a,
.aso-admin-nav a,
.asod-admin-nav a,
.au-nav a,
.aus-nav a {
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
}

.ad-stat span,
.ad-label,
.aso-label,
.asod-label,
.au-label,
.aus-label {
    font-family: var(--font-readable) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .025em !important;
}

.ad-stat strong {
    font-family: var(--font-readable) !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

.ad-number,
.aso-number,
.au-email,
.aus-order strong {
    font-family: var(--font-ui) !important;
    font-size: 15px !important;
}

.ad-email,
.au-name,
.aso-row,
.asod-card,
.aus-card,
.au-row,
.ad-order,
.ad-user {
    font-family: var(--font-readable) !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    letter-spacing: .003em !important;
}

.aso-attention,
.ad-attention,
.au-tag,
.au-id,
.admin-nav-session__name,
.asod-chat__meta {
    font-family: var(--font-readable) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

.aus-help {
    font-family: var(--font-readable) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Preserve branded labels/buttons inside admin */
html[id^="admin_"] .custom_button,
html[id^="admin_"] button {
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
}

/* Keep long text readable */
.first_screen__info p,
.why_matter_info p,
.support__info__main,
.services_about__description,
.specification__content {
    text-wrap: pretty;
}

/* Desktop screens benefit most from the increase */
@media only screen and (min-width: 1400px) {
    body {
        font-size: 16.5px;
    }

    .header__nav li a {
        font-size: 15.5px;
    }

    .custom_service_card__description,
    .custom_service_card__info li,
    .custom_service_card__info p {
        font-size: 16px;
    }

    .first_screen__info p,
    .why_matter_info p {
        font-size: 17.5px;
    }
}

/* Tablets */
@media only screen and (max-width: 900px) {
    body {
        font-size: 15.5px;
    }

    h1 {
        font-size: clamp(34px, 7vw, 44px);
    }

    h2 {
        font-size: clamp(25px, 5vw, 31px);
    }

    .first_screen__info p,
    .why_matter_info p {
        font-size: 16px;
    }

    .custom_service_card__description,
    .custom_service_card__info li,
    .custom_service_card__info p {
        font-size: 15px;
    }
}

/* Phones */
@media only screen and (max-width: 520px) {
    body {
        font-size: 15px;
        line-height: 1.55;
    }

    h1 {
        font-size: 34px;
    }

    h2,
    .custom_section__title h2 {
        font-size: 26px;
    }

    .custom_button {
        font-size: 14px;
    }

    .custom_service_card__title {
        font-size: 17px;
    }

    .custom_service_card__essence,
    .custom_service_card__description,
    .custom_service_card__info li,
    .custom_service_card__info p {
        font-size: 15px;
    }

    .custom_contact__input .custom_input__placeholder {
        font-size: 16px;
    }

    html[id^="admin_"] body {
        font-size: 14px !important;
    }

    .ad-stat strong {
        font-size: 27px !important;
    }
}

/*-----------------------------------------------------------------------------*/
/* WTC Games Typography Refinement v1.1
/*-----------------------------------------------------------------------------*/

body {
    font-weight: 400;
}

.first_screen__info p,
.why_matter_info p,
.custom_service_card__essence,
.custom_service_card__description,
.custom_service_card__info li,
.custom_service_card__info p,
.services_current__essence,
.services_about__description,
.services_about__description p,
.services_about__description li,
.custom_question__answer,
.custom_question__answer p,
.custom_question__answer li,
.custom_contact,
.custom_contact__wrapper,
.custom_contact__link,
.support__info,
.support__info__main p,
.specification__content,
.specification__content p,
.specification__content li,
.custom_ul li,
.custom_info span {
    font-weight: 400;
    color: rgba(255,255,255,.88);
}

.first_screen__info p,
.why_matter_info p {
    font-weight: 450;
}

.custom_service_card__title {
    font-weight: 700;
}

.custom_service_card__essence {
    color: rgba(255,255,255,.78);
}

.custom_service_card__description {
    line-height: 1.62;
}

.custom_service_card__info .title {
    font-weight: 700;
}

.services_about__description {
    line-height: 1.7;
}

.services_about__description h3 {
    margin-top: 22px;
    margin-bottom: 9px;
    font-weight: 700;
}

.services_about__description p + p {
    margin-top: 12px;
}

.services_current__title {
    font-weight: 700;
}

.services_current__essence {
    font-weight: 400;
    color: rgba(255,255,255,.78);
}

.custom_contact__input .custom_input__input {
    font-weight: 500;
}

.custom_contact__wrapper {
    color: rgba(255,255,255,.88);
}

html[id^="admin_"] body {
    font-weight: 400 !important;
}

.ad-email,
.au-name,
.aso-row,
.asod-card,
.aus-card,
.au-row,
.ad-order,
.ad-user {
    font-weight: 400 !important;
}

.ad-stat span,
.ad-label,
.aso-label,
.asod-label,
.au-label,
.aus-label {
    color: rgba(255,255,255,.52) !important;
    font-weight: 500 !important;
}

.ad-number,
.aso-number,
.au-email,
.aus-order strong,
.order-item__name,
.timeline__status {
    font-weight: 700 !important;
}

@media only screen and (min-width: 1200px) {
    .first_screen__info p {
        max-width: 54ch;
    }

    .why_matter_info p {
        max-width: 58ch;
    }

    .services_about__description {
        max-width: 72ch;
    }
}

/*-----------------------------------------------------------------------------*/
/* WTC Games Admin UI Polish v1
/*-----------------------------------------------------------------------------*/

/* Dashboard KPI cards: a little more depth, without turning them into widgets. */
.ad-stat {
    position: relative;
    overflow: hidden;
    min-height: 82px;
    transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.ad-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(255,191,24,.72);
}

.ad-stat:hover {
    border-color: rgba(255,191,24,.24);
    background: #272727;
    transform: translateY(-1px);
}

.ad-stat span {
    color: rgba(255,255,255,.65) !important;
}

.ad-stat strong {
    margin-top: 2px;
}

/* Dashboard/list containers */
.ad-card,
.aso-order,
.au-row {
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ad-order,
.ad-user {
    border: 1px solid rgba(255,255,255,.055);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ad-order:hover,
.ad-user:hover {
    background: #1c1c1c;
    border-color: rgba(255,191,24,.18);
    transform: translateY(-1px);
}

.aso-order:hover,
.au-row:hover {
    background: #272727;
    border-color: rgba(255,191,24,.18);
}

/* "All orders / All users" should read as a secondary action, not a text link. */
.ad-card__head a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 9px;
    background: #1a1a1a;
    color: rgba(255,255,255,.82) !important;
    opacity: 1 !important;
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 12px;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.ad-card__head a:hover {
    border-color: rgba(255,191,24,.42);
    color: #ffbf18 !important;
    background: rgba(255,191,24,.055);
}

/* Primary row actions.
   "Открыть" now clearly looks clickable on Dashboard, Orders and Users. */
.ad-link,
.aso-open,
.au-open,
.aus-order a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    box-sizing: border-box;
    border: 1px solid rgba(255,191,24,.48) !important;
    border-radius: 9px;
    background: rgba(255,191,24,.08);
    color: #ffbf18 !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-family: var(--font-ui) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.ad-link:hover,
.aso-open:hover,
.au-open:hover,
.aus-order a:hover {
    background: #ffbf18;
    border-color: #ffbf18 !important;
    color: #111 !important;
    transform: translateY(-1px);
}

/* Give the action column a little breathing room. */
.aso-order__action,
.account-order__action {
    justify-self: end;
}

/* More readable order/user metadata */
.ad-label,
.aso-label,
.au-label,
.aus-label {
    color: rgba(255,255,255,.66) !important;
}

.ad-email,
.aso-email,
.au-email {
    color: rgba(255,255,255,.94);
}

/* Small pills should feel intentional. */
.aso-tag,
.au-tag {
    border: 1px solid rgba(255,255,255,.07);
    background: #181818;
}

/* Unread/attention remains the strongest signal. */
.aso-attention,
.ad-attention {
    box-shadow: 0 0 0 1px rgba(255,191,24,.2);
}

/* Admin top nav: make logout visually separate from section navigation. */
.admin-nav-session {
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.08);
}

.admin-nav-session__name {
    color: rgba(255,255,255,.6) !important;
    opacity: 1 !important;
}

.admin-nav-logout {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 9px !important;
    background: #242424 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
}

.admin-nav-logout:hover {
    border-color: rgba(255,191,24,.35) !important;
    color: #ffbf18 !important;
}

/* Search/filter panels should be visually distinct from result cards. */
.aso-search,
.au-tools {
    border-color: rgba(255,255,255,.095);
    background: #202020;
}

/* Pagination links become compact controls. */
.aso-pagination a,
.au-pagination a {
    display: inline-flex;
    min-height: 32px;
    padding: 0 10px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: #202020;
    text-decoration: none;
}

.aso-pagination a:hover,
.au-pagination a:hover {
    border-color: rgba(255,191,24,.35);
    color: #ffbf18;
}

@media (max-width: 1050px) {
    .aso-order__action {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .ad-link,
    .aso-open,
    .au-open,
    .aus-order a {
        min-height: 40px;
        padding: 0 15px;
    }

    .admin-nav-session {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-top: 8px;
        border-left: 0;
    }
}