@font-face {
    font-family: TTCommons;
    src: url(../local/templates/.default/fonts/TTCommons-Light.woff2) format("woff2"),
         url(../local/templates/.default/fonts/TTCommons-Light.woff) format("woff");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: TTCommons;
    src: url(../local/templates/.default/fonts/TTCommons-Regular.woff2) format("woff2"),
         url(../local/templates/.default/fonts/TTCommons-Regular.woff) format("woff");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: TTCommons;
    src: url(../local/templates/.default/fonts/TTCommons-Medium.woff2) format("woff2"),
         url(../local/templates/.default/fonts/TTCommons-Medium.woff) format("woff");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: TTCommons;
    src: url(../local/templates/.default/fonts/TTCommons-Bold.woff2) format("woff2"),
         url(../local/templates/.default/fonts/TTCommons-Bold.woff) format("woff");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: HeliosExt;
    src: url(../local/templates/.default/fonts/HeliosExt-Bold.woff2) format("woff2"),
         url(../local/templates/.default/fonts/HeliosExt-Bold.woff) format("woff");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: HeliosExt;
    src: url(../local/templates/.default/fonts/HeliosExt-Regular.woff2) format("woff2"),
         url(../local/templates/.default/fonts/HeliosExt-Regular.woff) format("woff");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: HeliosExtLight;
    src: url(../local/templates/.default/fonts/HeliosExt-Light.woff2) format("woff2"),
         url(../local/templates/.default/fonts/HeliosExt-Light.woff) format("woff");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

:root {
    --container: 1440px;
    --page-width: 100%;
    --Gold: #C2A878;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-gray: #8B8B8B;
    --color-border: #A29D95;
    --color-light-gray: #FAFAFA;
    --font-helios: 'HeliosExt', sans-serif;
    --font-helios-light: 'HeliosExtLight', sans-serif;
    --font-commons: 'TTCommons', sans-serif;
    --font-inter: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-commons);
    color: var(--color-black);
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    z-index: 1;
    width: 100%;
}

/* ===== HEADER ===== */
.header {
    display: flex;
    flex-direction: column;
    padding: 20px 0 25px;
    gap: 50px;
    position: absolute;
    border-bottom: 1px solid #999999;
    width: 100%;
    z-index: 23;
}
.header .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    width: 100%;
    position: relative;
    min-height: 70px;
}
.topbar__left {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.topbar__phone {
    font-family: var(--font-commons);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: middle;
}
.phone-block a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.topbar__callback {
    font-family: var(--font-commons);
    color: var(--color-white);
    cursor: pointer;
    font-weight: 300;
    font-size: 14px;
    line-height: 18.67px;
    letter-spacing: 0%;
    text-align: left;
    vertical-align: middle;
}
.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 216px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo img {
    max-width: 100%;
    max-height: 100%;
}
p.obichka {
    font-family: var(--font-commons);
    font-weight: 400;
  
    font-size: 16px;

    line-height: 100%;
    letter-spacing: 0%;
}
.list {
    display: flex;
    gap: 50px;
}
.list-text {
    display: flex;
    flex-direction: column;
    width: 1240px;
    gap: 6px;
    justify-content: space-between;
}
.list-text div {
    display: flex;
    flex-direction: column;
  
    gap: 6px;

}
.matik {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.list-text h2 {
    font-family: HeliosExt;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
}
p.proba {
    font-family: HeliosExt;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #999999;
}
/* ===== HERO ===== */
.hero {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    position: relative;
    height: 100vh;
    background: var(--color-black);
}
.hero__content {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 784px;
    width: 100%;
    padding-bottom: 50px;
}
.hero__title {
    font-family: var(--font-helios);
    color: var(--color-white);
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
}
p.hero__desc {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-top: -50px;
}
.hero__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 542px;
    width: 100%;
}
.hero__item {
    display: flex;
    align-items: center;
    gap: 11px;
}
.hero__item::before {
    content: '';
    width: 2px;
    height: 2px;
    background: var(--color-white);
    flex-shrink: 0;
}
.hero__item-text {
    font-family: var(--font-helios-light);
    color: var(--color-white);
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    max-width: 254px;
    width: 100%;
    height: 47px;
    background: radial-gradient(107.07% 184.66% at 100% 49.36%, #F9E0A6 0%, #C2A878 33%, #8E713B 66%, #C2A878 100%), #C2A878;
    border: 1px solid #C2A878;
    box-shadow: inset -1px 1px 0px #CCB280;
}
.btn--white {
    background: var(--color-white);
}
.btn--white .btn__text {
    color: var(--color-black);
}
.btn__text {
    font-family: var(--font-helios-light);
    color: var(--color-black);
    font-weight: 300;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
}
.hero .container {
    max-width: var(--container);
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
.trust-bar {
    display: flex;
    align-items: center;
    gap: 19px;
    max-width: 784px;
    width: 100%;
    padding-top: 120px;
    position: absolute;
    bottom: 50px;
}
.trust-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.trust-item__value {
    font-family: var(--font-helios);
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-white);
}
.trust-item__label {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;
    color: var(--color-white);
}
.trust-divider {
    width: 0;
    height: 40px;
    border: 1px solid var(--color-white);
}

/* ===== CATEGORIES ===== */
.categories {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0 130px;
    gap: 60px;
    position: relative;
    background: var(--color-black);
    overflow: hidden;
}
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;
    position: relative;
}
.section-title {
    font-family: var(--font-helios);
    color: var(--color-white);
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0.7px;
    text-align: center;
    text-transform: uppercase;
}
.section-subtitle {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    letter-spacing: -0.5px;
    color: var(--color-white);
}
.svg-icon .path-default, .svg-icon .path-hover { transition: opacity 0.4s ease-in-out; }
.svg-icon .path-default { fill: #999999; opacity: 1; }
.svg-icon .path-hover { opacity: 0; }
.svg-icon:hover .path-default, .svg-icon.active .path-default { opacity: 0; }
.svg-icon:hover .path-hover, .svg-icon.active .path-hover { opacity: 1; }
.gold-icon .path-default, .gold-icon .path-hover { transition: opacity 0.3s ease-in-out; }
.gold-icon .path-default { fill: #999999; opacity: 1; }
.gold-icon .path-hover { fill: url(#gold-gradient); opacity: 0; }
.gold-icon:hover .path-default, .gold-icon.active .path-default { opacity: 0; }
.gold-icon:hover .path-hover, .gold-icon.active .path-hover { opacity: 1; }
.categories__grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    margin-top: 50px;
}
.categories__row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 50px;
    flex-wrap: wrap;
}
.category-card {
    display: flex;
    flex-direction: row;
    gap: 50px;
    width: 446px;
    cursor: pointer;
    align-items: center;
}
.svg-categ {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
}
.category-card svg {
    max-width: 113px;
    height: auto;
}
.category-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 270px;
}
.category-card__title {
    font-family: var(--font-helios);
    text-align: left;
    text-transform: uppercase;
    color: var(--color-white);
    font-weight: 400;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
}
.category-card__price {
    font-family: var(--font-commons);
    font-weight: 300;
    font-size: 16px;
    line-height: 101.5%;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}
.categories__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 0;
    gap: 10px;
    width: 100%;
    text-align: center;
}
.link--underline {
    font-family: var(--font-commons);
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    text-decoration-line: underline;
    text-transform: lowercase;
    color: var(--color-black);
    cursor: pointer;
}
.category-card:hover .category-card__title {
    background: linear-gradient(135deg, #F9E0A6, #8E713B, #C2A878);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.category-card:hover .category-card__title {
    background: linear-gradient(135deg, #F9E0A6, #8E713B, #C2A878);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.category-card:hover  .path-hover, .svg-icon.active .path-hover {
    opacity: 1;
}
/* ===== PRODUCTION ===== */
.production {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: black;
    display: flex;
    justify-content: center;
}

.production .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0px;
    position: relative;
    z-index: 2;
}
p.modal_min {
    font-weight: 300;
    font-style: Light;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #999;

}
.blur1, .blur2 {
    position: absolute;
    top: 183px;
    height: 500px;
    width: 200px;
    pointer-events: none;
    z-index: 3;
}
.blur1 {
    left: 0;
    background: linear-gradient(90deg, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 0) 100%);
}
.blur2 {
    right: 0;
    background: linear-gradient(270deg, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 0) 100%);
}
.production__header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}
.production__title {
    font-family: var(--font-helios);
    color: white;
    margin-bottom: 50px;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0.7px;
    text-align: center;
    text-transform: uppercase;
}
.gallery h2.section-title {
    color: black;
}
.productionSwiper {
    width: 100%;
    overflow: hidden;
    padding: 0;
    width: calc(100% + 420px);
    position: relative;
    left: 0px;
}

.productionSwiper .swiper-wrapper { align-items: stretch; }
.productionSwiper .swiper-slide {
    width: 340px !important;
    height: 340px !important;
    margin-right: 20px !important;
    flex-shrink: 0;
}
.production-card {
    display: flex;
    flex-direction: column;
    width: 340px;
    height: 340px;
    flex-shrink: 0;
    background: #fff;

    overflow: hidden;
    position: relative;
}
.production-card__header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    height: 40px;
    position: relative;
    z-index: 2;
    background: white;
    padding: 10px;
    flex-shrink: 0;
    justify-content: space-between;
}
.production-card__header svg {
    width: 20px;
    flex-shrink: 0;
}
.production-card__num, .production-card__text_2 {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 16px;
    line-height: 18px;
    color: var(--color-black);
}
.text-title {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 18px;
    line-height: 22px;
    color: var(--color-black);
}
.textp {
    display: flex;
    gap: 5px;
    max-width: 330px;
}
.production-card__image {
    width: 100%;
    height: 340px;
    background: #e0e0e0;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.production-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.production-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    min-height: 256px;
}
.production-card:hover .production-card__overlay {
    opacity: 1;
    transform: translateY(0);
}
.production-card__text {
    font-family: var(--font-commons);
    color: #F5F5F5;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.production-card:hover .production-card__text {
    opacity: 1;
    transform: translateY(0);
}

/* ===== WHY US ===== */
.why {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
    gap: 60px;
    position: relative;
    overflow: hidden;
    background:black;
}
.why__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.why__title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 831px;
    width: 100%;
}
.why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    width: 100%;
    margin-top: 25px;
}
.why-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    text-align: left;
    padding: 25px 0;
}
.why-card__icon {
    width: 80px;
    height: 80px;
    background: var(--color-white);
    border-radius: 50%;
    flex-shrink: 0;
}
.why-card__text {
    font-family: var(--font-helios-light);
    color: var(--color-white);
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* ===== ORDER FORM ===== */
.order {
    overflow: visible;
    position: relative;
    isolation: isolate;
    background: white;
    z-index: 1;
}
section.order::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(https://russam.ru/images/rs1912background.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: top right;
    z-index: -2;
    pointer-events: none;
}
section.order::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #FAFAFA 0%, #FAFAFA 29.22%, rgba(250, 250, 250, 0) 100%);
    z-index: -1;
    pointer-events: none;
}
.order__container {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0;
    gap: 83px;
}
.order__content {
    display: flex;
    flex-direction: column;
    gap: 44.5px;
    max-width: 748px;
    width: 100%;
    padding: 100px 0;
}
.order__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.order__title {
    font-family: var(--font-helios-light);
    color: var(--color-black);
    width: 100%;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.order__text, .order__phone {
    font-family: var(--font-commons);
    color: var(--color-black);
    max-width: 469px;
    width: 100%;
    font-weight: 300;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
}
.order__form-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 60px 40px;
    gap: 10px;
    max-width: 535px;
    width: 100%;
    background: var(--color-white);
    border: 1px solid #a29d95;
    position: absolute;
    right: 0;
    top: -50px;
    z-index: 2312;
}
.form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}
.form__input {
    display: flex;
    align-items: center;
    padding: 7px 18px;
    gap: 10px;
    width: 100%;
    height: 47px;
    border: 1px solid var(--color-border);
    font-family: var(--font-commons);
    font-weight: 300;
    font-size: 18px;
    color: var(--color-border);
    background: transparent;
}
.form__input::placeholder { color: var(--color-border); }
.form__row {
    display: flex;
    gap: 10px;
    width: 100%;
    height: 56px;
}
.form__file {
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    flex: 1;
    height: 47px;
    border: 1px solid var(--color-border);
    font-family: var(--font-commons);
    font-weight: 300;
    font-size: 18px;
    color: var(--color-border);
    cursor: pointer;
    background: none;
}
.form__file-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 38px;
    height: 47px;
    background: var(--color-black);
    border: none;
    cursor: pointer;
}
.form__file-btn__text {
    font-family: var(--font-helios);
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--color-white);
}
.form__note {
    font-family: var(--font-commons);
    color: var(--color-border);
    width: 100%;
    font-weight: 300;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
}
.form__textarea {
    width: 100%;
    height: 140px;
    border: 1px solid var(--color-border);
    padding: 15px 18px;
    font-family: var(--font-commons);
    font-weight: 300;
    font-size: 18px;
    color: var(--color-border);
    resize: none;
    background: transparent;
}
.form__textarea::placeholder { color: var(--color-border); }
.form__submit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    background: var(--color-black);
    border: none;
    cursor: pointer;
}
.form__submit__text {
    font-family: var(--font-helios);
    font-weight: 400;
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
}

/* ===== GALLERY ===== */
.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
    gap: 25px;
    isolation: isolate;
    z-index: 8;
}

.gallery .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.gallery__title {
    font-family: var(--font-helios);
    font-weight: 400;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 0.7px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-black);
    width: 100%;
    margin-bottom: 25px;
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(28, 1fr);
    gap: 24px;
    width: 100%;
}

.gallery__item {
    box-sizing: border-box;
    overflow: hidden;
    background: #D9D9D9;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery__item:hover img {
    transform: scale(1.05);
}

.gallery__item--small {
    grid-column: span 4;
    height: 185.14px;
}

.gallery__item--large {
    grid-column: span 7;
    height: 342px;
}

.gallery__extra {
    display: none;
}

.gallery__extra.visible {
    display: block;
}

.gallery__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
}

.gallery__more.hidden {
    display: none;
}

.gallery__more .link--underline {
    font-family: var(--font-commons);
    color: #999999;
    transition: color 0.3s ease;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    text-transform: lowercase;
    text-decoration: underline;
}

.gallery__more .link--underline:hover {
    color: var(--color-black);
}

/* ===== CLIENTS ===== */
.clients {
    padding: 100px 0;
    position: relative;
    background: black;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.clients__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 50px;
}
.clients__logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    justify-items: center;
    align-items: center;
    width: 100%;
    position: relative; 
    z-index: 1;
}
.client-logo {
    min-height: 123px;
    width: 100%;
    max-width: 322px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== VISIT ===== */
.visit {
    padding: 100px 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background: white;
}
section.visit::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(https://russam.ru/images/rs1912background.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: top right;
    z-index: -2;
    pointer-events: none;
}
section.visit::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #FAFAFA 0%, #FAFAFA 29.22%, rgba(250, 250, 250, 0) 100%);
    z-index: -1;
    pointer-events: none;
}
.visit__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0px;
    position: relative;
    z-index: 2;
}
img.visitjpg {
    position: absolute;
    top: -100px;
    right: 0;
}
.visit__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 65px;
    max-width: 756px;
    width: 100%;
}
.visit__text-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.visit__title {
    font-family: var(--font-helios);
    color: var(--color-black);
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
button.btn.btn--black {
    font-family: HeliosExtLight;
    font-weight: 300;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    background: black !important;
    border: 1px solid black;
    box-shadow: none;
}
.btn.btn--black span.btn__text { color: var(--color-white); }
.visit__desc {
    font-family: var(--font-commons);
    color: var(--color-black);
    width: 100%;
    font-weight: 300;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-top: 12px;
}

/* ===== FAQ ===== */
.faq {
    padding: 80px 0;
    background: var(--color-white);
}
.faq .container { padding: 0 50px; }
.faq__header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    margin-bottom: 50px;
}
.faq__title {
    font-family: var(--font-helios);
    color: var(--color-black);
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.faq__subtitle {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-black);
}
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}
.faq-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 50px;
}
.faq-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    width: 100%;
    cursor: pointer;
    padding: 5px 0;
    transition: all 0.3s ease;
}
.faq-item__question-text {
    font-family: var(--font-helios);
    color: var(--color-black);
    flex: 1;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.faq-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.faq-item__icon svg {
    display: block;
    transition: all 0.3s ease;
}
.faq-item__icon svg path { transition: fill 0.3s ease; }
.faq-item--active .faq-item__icon { transform: rotate(180deg); }
.faq-item--active .faq-item__icon svg path { fill: #000000; }
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease, padding 0.8s ease;
    padding: 0;
    width: 100%;
}
.faq-item--active .faq-item__answer {
    max-height: 1000px;
    padding: 25px 0px;
}
.faq-item__answer-text {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
}

/* ===== CONTACT CTA ===== */
.contact-cta {
    padding: 53px 0;
    background: var(--color-black);
}
.contact-cta__container { padding: 0 50px; }
.contact-cta__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    max-width: 953px;
    width: 100%;
    margin: 0 auto;
}
.contact-cta__title {
    font-family: var(--font-helios);
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--color-white);
    text-align: center;
}
.contact-cta__text {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.18px;
    text-align: center;
    color: var(--color-white);
    max-width: 541px;
    width: 100%;
}
.contact-cta__buttons {
    display: flex;
    gap: 20px;
}
.contact-cta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 115px;
    cursor: pointer;
}
.contact-cta__btn-icon {
    width: 50px;
    height: 50px;
    background: var(--color-white);
    border-radius: 50%;
}
.contact-cta__btn-text {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
}

/* ===== CONTACTS ===== */
.contacts {
    padding: 0;
    background: var(--color-white);
    position: relative;
}
.contacts__container {
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
.contacts__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 433px;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 50px;
    padding-top: 50px;
}
.contacts__title {
    font-family: var(--font-helios);
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--color-black);
}
.contacts__details {
    font-family: var(--font-helios-light);
    font-weight: 300;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.18px;
    color: var(--color-black);
}
.rowsched { display: flex; gap: 20px; }
.contacts__map {
    position: relative;
    right: 0;
    width: 535px;
    height: 327px;
}
.text-nav h2 {
    font-family: HeliosExt;
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: uppercase;
    margin-bottom: 38px;
}
.text-nav li {
    font-family: var(--font-commons);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 6px;
}
.text-nav ul {
    padding: 0; margin: 0; margin-left: 17px; margin-bottom: 15px;
}
.text-nav p {
    font-family: var(--font-commons);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 25px;
}
.thumb {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
section.categories::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #FFFFFF;
    z-index: 1;
}
.content-cat { display: flex; gap: 50px; padding: 100px 0; position:relative;}
.contacts__map .map-style, .contacts__map .ymaps-2-1-79-map {
    width: 100% !important; height: 100% !important; min-height: 327px;
}
ymaps.ymaps-2-1-79-map-copyrights-promo { display: none !important; }

/* ===== FOOTER ===== */
.footer {
    background: var(--color-black);
    padding: 100px 0 25px 0;
}
.footer__top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; width: 100%; flex-wrap: wrap;
}
.footer__cols { display: flex; gap: 40px; flex: 1; justify-content: space-between; }
.footer__col { display: flex; flex-direction: column; gap: 20px; }
.footer__link {
    font-family: var(--font-helios-light); font-weight: 300; font-size: 12px; line-height: 18px;
    text-transform: uppercase; color: var(--color-white); text-decoration: none; cursor: pointer;
}
.footer__link:hover { text-decoration: underline; }
.footer__link--title {
    font-family: var(--font-helios); font-weight: 400; font-size: 14px; line-height: 20px;
    text-transform: uppercase; color: var(--color-white);
}
.footer__contact-block {
    display: flex; flex-direction: column; max-width: 290px; width: 100%; min-height: 370px; gap: 50px;
}
.footer__phone-block { display: flex; flex-direction: column; gap: 11px; width: 100%; }
.footer__phone-label {
    font-family: var(--font-commons); font-weight: 300; font-size: 16px; line-height: 16px; color: var(--color-white);
}
.footer__phone {
    font-family: var(--font-helios-light); font-weight: 300; font-size: 32px; line-height: 44px; color: var(--color-white);
}
.footer__schedule { display: flex; flex-direction: column; gap: 0; position: relative; }
.budni { display: flex; gap: 20px; }
.footer__schedule-row {
    font-family: var(--font-commons); font-weight: 300; font-size: 16px; line-height: 16px;
    color: var(--color-white); display: inline-block;
}
.footer__address-block { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.footer__address-text {
    font-family: var(--font-commons); font-weight: 300; font-size: 16px; line-height: 16px; color: var(--color-white);
}
.footer__account-block { display: flex; flex-direction: column; gap: 20px; max-width: 345px; width: 100%; }
.footer__account-title {
    font-family: var(--font-helios); font-weight: 400; font-size: 14px; line-height: 20px;
    text-transform: uppercase; color: var(--color-white);
}
.footer__bottom {
    display: flex; flex-direction: column; align-items: flex-start; padding: 25px 0 10px;
    gap: 14px; width: 100%; border-top: 1px solid var(--color-white); margin-top: 50px;
}
.footer__legal {
    font-family: var(--font-inter); font-weight: 300; font-size: 10px; line-height: 15px;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-white);
}

/* ===== SWIPER NAVIGATION ===== */
.swiper-button-next, .swiper-button-prev {
    color: var(--color-black); background: rgba(255, 255, 255, 0.9); width: 44px; height: 44px;
    border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); top: 50%; transform: translateY(-50%); z-index: 10;
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 16px; font-weight: 700; }
.swiper-button-next { right: 10px; }
.swiper-button-prev { left: 10px; }
.swiper-pagination { bottom: -30px; }
.swiper-pagination-bullet { background: var(--color-gray); opacity: 0.5; }
.swiper-pagination-bullet-active { background: var(--color-black); opacity: 1; }

/* ===== MODAL ===== */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); z-index: 1000; justify-content: center; align-items: center; padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal {
    background: #fff;
    max-width: 913px;
    width: 560px;
    padding: 48px;
    position: relative;
    max-height: max-content;
    overflow-y: auto;
}

.modal-close {
    position: absolute; top: 20px; right: 24px; font-size: 28px; cursor: pointer;
    background: none; border: none; color: #999; line-height: 1; font-weight: 300;
}
.modal-close:hover { color: #000; }
.modal h2 {
    font-family: var(--font-helios);
    margin: 0 0 18px;
    width: auto;
    display: flex;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: uppercase;
}
.modal-desc {
    font-family: var(--font-commons); color: #000; margin: 0 0 14px; font-weight: 400;
    font-size: 16px; line-height: 100%; letter-spacing: 0%;
}
.modal-features {
    list-style: none; padding: 0; margin: 0 0 24px; font-family: var(--font-commons);
    color: #000; font-weight: 400; font-size: 16px; line-height: 100%; letter-spacing: 0%;
    display: flex; flex-direction: column; gap: 6px;
}
.modal-features li::before { content: '›'; margin-right: 6px; color: #000; }
.modal-cta {
    display: flex; background: #111; color: #fff; border: none; padding: 0; font-family: var(--font-helios);
    cursor: pointer; margin-bottom: 48px; transition: background 0.2s; font-weight: 400; font-size: 14px;
    line-height: 48px; letter-spacing: 0%; text-align: center; vertical-align: middle; text-transform: uppercase;
    width: 320px; height: 50px; align-items: center; justify-content: center;
}
.modal-cta:hover { background: #333; }
.modal-tabs { display: flex; gap: 0; margin-bottom: 36px; border-bottom: 1px solid #e0e0e0; }
.modal-tab {
    font-family: var(--font-commons); cursor: pointer; background: none; border: none; position: relative;
    transition: color 0.2s; font-weight: 400; font-size: 16px; line-height: 48px; letter-spacing: 0%;
    text-align: center; min-width: 271px; height: 39px; justify-content: center; display: flex;
    align-items: center; color: #A29D95; border-top: 1px solid; border-bottom: 1px solid;
}
button.modal-tab:last-child { border-left: 1px solid; border-right: 1px solid; }
button.modal-tab:first-child { border-left: 1px solid; border-right: 1px solid; }
.modal-tab:hover { color: #333; }
.modal-tab.active { color: #fff; background: black; border: 1px solid #000; }
.modal-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 48px; justify-content: space-around; }
.modal-grid-item { width: 120px; text-align: center; }
.modal-grid-item__img {
    width: 120px; height: 120px; background: #d4d4d4; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.modal-grid-item__img img { width: 100%; height: 100%; object-fit: cover; }
.modal-grid-item__label {
    color: #000; font-family: var(--font-commons); font-weight: 400; font-size: 16px;
    line-height: 100%; letter-spacing: 0%; text-align: center;
}
.modal-examples-title {
    font-family: var(--font-helios); font-size: 13px; text-transform: uppercase;
    letter-spacing: 1.5px; color: #111; margin: 0 0 16px;
}
.modal-examples { display: flex; flex-wrap: wrap; justify-content: space-between; }
.modal-examples img { width: auto; object-fit: cover; background: #d4d4d4; }
.tab-content { display: none; }
.tab-content.active { display: flex; }

/* ============================================
   МОБИЛЬНАЯ ГАЛЕРЕЯ
   ============================================ */
.gallery__mobile {
    display: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 10px;
}

.gallery__mobile-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.gallery__mobile-row--top,
.gallery__mobile-row--bottom {
    justify-content: space-between;
}

.gallery__mobile-row--center {
    justify-content: center;
}

.gallery__mobile-item {
    overflow: hidden;
    background: #D9D9D9;
    position: relative;
}

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

.gallery__mobile-item--small {
    flex: 1;
    aspect-ratio: 1 / 1;
    max-width: calc(33.333% - 8px);
}

.gallery__mobile-item--large {
    width: 100%;
    max-width: 100%;
}

.gallery__mobile-extra {
    display: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.gallery__mobile-extra.open {
    display: flex;
}

.gallery__mobile-extra-item {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.gallery__mobile-extra.open .gallery__mobile-extra-item {
    animation: fadeInUp 0.4s ease forwards;
}

.gallery__mobile-extra.open .gallery__mobile-extra-item:nth-child(1) { animation-delay: 0.05s; }
.gallery__mobile-extra.open .gallery__mobile-extra-item:nth-child(2) { animation-delay: 0.1s; }
.gallery__mobile-extra.open .gallery__mobile-extra-item:nth-child(3) { animation-delay: 0.15s; }
.gallery__mobile-extra.open .gallery__mobile-extra-item:nth-child(4) { animation-delay: 0.2s; }
.gallery__mobile-extra.open .gallery__mobile-extra-item:nth-child(5) { animation-delay: 0.25s; }
.gallery__mobile-extra.open .gallery__mobile-extra-item:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   АНИМАЦИИ ПОЯВЛЕНИЯ
   ============================================ */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Отключение анимаций для reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    .animate-on-scroll.visible {
        transition: none !important;
    }
    
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .scale-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .gallery__extra.visible {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .gallery__mobile-extra-item {
        animation: none !important;
        opacity: 1 !important;
    }
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

.fade-in.visible {
    opacity: 1;
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger задержки для дочерних элементов */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; }

.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Специфические задержки для hero */
.hero__title.animate-on-scroll {
    transition-delay: 0.3s;
}

.hero__list .hero__item {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.hero__list.visible .hero__item:nth-child(1) { transition-delay: 0.1s; }
.hero__list.visible .hero__item:nth-child(2) { transition-delay: 0.22s; }
.hero__list.visible .hero__item:nth-child(3) { transition-delay: 0.34s; }

.hero__list.visible .hero__item {
    opacity: 1;
    transform: translateY(0);
}

.hero__content .btn.animate-on-scroll {
    transition-delay: 0.6s;
}

.why-card.animate-on-scroll {
    transition-delay: calc(var(--delay, 0) * 0.12s);
}

/* Анимация для элементов галереи при раскрытии */
.gallery__extra.visible {
    animation: galleryFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gallery__extra.visible:nth-child(1) { animation-delay: 0.05s; }
.gallery__extra.visible:nth-child(2) { animation-delay: 0.1s; }
.gallery__extra.visible:nth-child(3) { animation-delay: 0.15s; }
.gallery__extra.visible:nth-child(4) { animation-delay: 0.2s; }
.gallery__extra.visible:nth-child(5) { animation-delay: 0.25s; }
.gallery__extra.visible:nth-child(6) { animation-delay: 0.3s; }
.gallery__extra.visible:nth-child(7) { animation-delay: 0.35s; }
.gallery__extra.visible:nth-child(8) { animation-delay: 0.4s; }
.gallery__extra.visible:nth-child(9) { animation-delay: 0.45s; }
.gallery__extra.visible:nth-child(10) { animation-delay: 0.5s; }

@keyframes galleryFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Мобильная версия: сокращаем анимации */
@media (max-width: 768px) {
    .animate-on-scroll {
        transform: translateY(20px);
        transition-duration: 0.6s;
    }
    
    .hero__item {
        transform: translateY(20px) !important;
    }
    
    .slide-in-left,
    .slide-in-right {
        transform: translateX(0) !important;
    }
    
    .slide-in-left.visible,
    .slide-in-right.visible {
        transform: translateX(0) !important;
    }
    
    .scale-in {
        transform: scale(0.95) !important;
    }
    
    .scale-in.visible {
        transform: scale(1) !important;
    }
    
    .stagger-children > * {
        transform: translateY(15px);
        transition-duration: 0.5s;
    }
    
    .gallery__extra.visible {
        animation-duration: 0.4s;
    }
}

/* ============================================
   МЕДИА-ЗАПРОСЫ (существующие)
   ============================================ */

@media (max-width: 1400px) {
    .contacts__map { width: 50%; }
    .blur1, .blur2 { width: 100px; }
}
@media (max-width: 1200px) {
    .order__container { flex-direction: column; gap: 40px; padding: 40px 50px; }
    .order__content { gap: 40px; }
    .order__form-wrapper { max-width: 100%; border-left: none; border-right: none; border-top: 1px solid #a29d95; border-bottom: 1px solid #a29d95; }
    .footer__top { flex-direction: column; gap: 40px; }
    .footer__cols { flex-wrap: wrap; gap: 40px; }
    .footer__contact-block { max-width: 100%; min-height: auto; gap: 30px; }
    .footer__account-block { max-width: 100%; }
    .why__grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    .clients__logos { grid-template-columns: repeat(2, 1fr); }
    .categories__row { flex-wrap: wrap; justify-content: center; }
    .contacts__map { position: relative; top: 0; width: 100%; height: 400px; margin-top: 30px; }
    .contacts__container { flex-direction: column; align-items: stretch; }
    .contacts__info { max-width: 100%; }
    .visit__bg { display: none; }
    .visit__overlay { width: 100%; background: rgba(0, 0, 0, 0.8); }
    .blur1, .blur2 { width: 60px; }
    .productionSwiper .swiper-slide { width: 340px !important; margin-right: 20px !important; }
    .production-card { width: 340px; height: 440px; }
    .production-card__image { height: 350px; }
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
     width: 100%;
    height: 47px;
    background: radial-gradient(107.07% 184.66% at 100% 49.36%, #F9E0A6 0%, #C2A878 33%, #8E713B 66%, #C2A878 100%), #C2A878;
    border: 1px solid #C2A878;
    box-shadow: inset -1px 1px 0px #CCB280;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}
.main-photo .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.main-photo .swiper-slide a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
p.span {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    color: #999;
    border-top: 1px solid #999;
}
@media (max-width: 992px) {
    .blur1, .blur2 { width: 40px; }
}
button.btn.btn--black.onlymob {
    display: none;
}
@media (max-width: 768px) {
    .container.clients__container {
        padding: 0;
    }
    .order button.btn.btn--black {
        display: flex;
        max-width: none;
    }
    .contacts__map {
        position: relative;
        top: 0;
        width: calc(100% + 40px);
        height: 400px;
        margin-top: 30px;
        margin-left: -20px;
        margin-right: -20px !important;
    }
    .container { padding: 0 20px; }
    .header .container, .categories .container, .production .container, .why .container,
    .gallery .container, .clients__container, .visit__container, .faq .container,
    .contact-cta__container, .contacts__container, .footer__content { padding: 0 20px; z-index: 123123;}
    .blur1, .blur2 { display: none; }
    .topbar {
        flex-direction: row;
        gap: 10px;
        padding: 10px 0 0;
    }
    .topbar__callback, .topbar__phone { display: none; }
    .visit__content {
        gap: 12px;
        width: 100%;
        padding: 0 20px;
        margin-bottom: 25px;
    }
    .visit__text-block { gap: 12px; }
    .form__file svg { width: 14px; }
    .logo { width: 110px; height: auto; position: static; transform: none; }
    .hero__title { font-size: 28px; line-height: 36px; }
    .hero__content {
        gap: 25px;
        padding-top: 0;
        padding-bottom:0;
    }
    .trust-bar {
        padding-top: 25px;
        max-width: 390px;
    }
    .btn { max-width: 100%; height: 43px; }
    .btn__text { font-weight: 400; font-size: 12px; line-height: 12px; letter-spacing: 0%; text-align: center; vertical-align: middle; text-transform: uppercase; }
    .trust-bar { flex-wrap: wrap; gap: 10px; justify-content: space-between; }
    .trust-item { width: 96px; }
    .trust-item__value { font-family: var(--font-helios); color: var(--color-white); font-weight: 400; font-size: 12px; line-height: 100%; letter-spacing: 0%; }
    .trust-item.midd { width: 130px !important; }
    .hero__item-text { font-family: var(--font-helios-light); color: var(--color-black); font-weight: 300; font-size: 10px; line-height: 100%; letter-spacing: 0%; }
    .hero__list { gap: 6px; }
    .trust-item__label { font-family: var(--font-helios-light); color: var(--color-white); font-weight: 300; font-size: 10px; line-height: 100%; letter-spacing: 0%; margin-top: 5px; }
    .section-title { font-size: 28px; line-height: 36px; }
    .categories__row {
        flex-direction: row;
        align-items: center;
        gap: 25px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .category-card {
        max-width: 50%;
        min-width: auto;
        width: 141px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .visit__desc {
        font-family: var(--font-commons);
        color: var(--color-black);
        width: 100%;
        margin-top: 12px;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    button.btn.btn--black {
        display: none;
    }
    .category-card__title {
        font-family: var(--font-helios);
        color: var(--color-white);
        font-weight: 400;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        text-transform: uppercase;
    }
    .category-card__price { font-family: var(--font-commons); color: rgba(0, 0, 0, 0.5); font-weight: 300; font-size: 12px; line-height: 101%; letter-spacing: 0%; text-align: center; }
    .category-card__content { gap: 6px; }
    .section-subtitle { font-family: var(--font-helios-light); color: var(--color-gray); font-weight: 300; font-size: 12px; line-height: 14px; letter-spacing: -0.5px; text-align: center; vertical-align: middle; }
    section.why.container { padding: 50px 20px; }
    .why__title-block { gap: 6px; }
    .order__content { gap: 12px; padding-bottom: 0; }
    p.order__phone {
        display: block;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        margin-bottom: 12px;
    }
    .text-nav button.btn.btn--black {
        display: flex;
        width: 100% !important;
        max-width: none;
    }
    .why-card__text { font-family: var(--font-helios-light); color: var(--color-white); font-weight: 300; font-size: 12px; line-height: 14px; letter-spacing: 0%; text-align: center; }
    .why {
        gap: 45px;
        padding: 61px 0 20px;
    }
    .production__title { font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0.7px; text-transform: uppercase; padding-left: 20px; }
    .why__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        align-items: center;
        justify-content: space-between;
    }
    .why-card {
        gap: 25px;
        width: 159px;
        flex-direction: column;
    }
    .why-card__icon { width: 60px; height: 60px; }
    .order__title {
        font-family: HeliosExt;
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.7px;
        text-transform: uppercase;
    }
    .order__content {
        padding: 50px 0;
    }
    .order { background: white; padding-bottom: 0; }
        section.faq.container, section.gallery.container {
        padding: 50px 20px;
        background: white;
    }
    .clients { background: var(--color-black); padding: 50px 20px; }
    .order__text {
        max-width: 100%;
        color: #000;
        font-weight: 400;
        font-style: Regular;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    .form__row { flex-direction: row; height: auto; }
    .form__file-btn__text { font-family: var(--font-helios); color: var(--color-white); font-weight: 400; font-size: 12px; line-height: 100%; letter-spacing: 0%; text-transform: uppercase; }
    .form__file { width: 100%; height: 34px; font-size: 14px; line-height: 48px; }
    .form__file-btn { height: 34px; width: 94px; }
    .form__note { font-size: 14px; line-height: 16px; }
    .form__textarea { height: auto; font-size: 14px; line-height: 16px; }
    .gallery__row { flex-direction: column; }
    .clients__logos { grid-template-columns: 4 1fr; gap: 20px; }
    .client-logo { max-width: 150px; min-height: 40px; }
    .visit__title {
        font-family: HeliosExt;
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.7px;
        text-transform: uppercase;
    }
    .visit {
        position: relative;
        padding: 50px 0;
        overflow: hidden;
        background-size: auto 100%;
        min-height: auto;
        padding-bottom:0;
    }
    img.visitjpg {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
    }
    .container.visit__container {
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .btn {
        width: 100%;
    }
    .faq__title {
        vertical-align: middle;
        max-width: 310px;
        text-align: left;
        font-family: HeliosExt;
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0px;
        text-transform: uppercase;
    }
    .faq__subtitle { font-family: var(--font-helios-light); color: #8B8B8B; font-weight: 300; font-size: 12px; line-height: 14px; letter-spacing: -0.5px; text-align: center; vertical-align: middle; }
    .faq__header { gap: 6px; margin-bottom: 25px; }
    .faq-item__question-text {
        color: var(--color-black);
        flex: 1;
        font-family: HeliosExt;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        text-transform: uppercase;
    }
    .faq-item {
        padding-bottom: 25px;
    }
    .faq__list {
        gap: 25px;
    }
    .list {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    .list svg {
        width: 50px;
        height: 50px;
    }
    .matik {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .list-text {
        display: flex;
        flex-direction: column;
        max-width: 281px;
        gap: 6px;
    }
    .list-text h2 {
        font-family: HeliosExt;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    p.proba {
        color: #999999;
        font-family: HeliosExt;
        font-weight: 400;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    p.obichka {
        font-family: var(--font-commons);
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    .faq-item__answer-text { font-family: var(--font-helios-light); color: #8B8B8B; font-weight: 300; font-size: 12px; line-height: 100%; letter-spacing: 0%; vertical-align: middle; }
    .contact-cta__title { font-weight: 400; font-size: 20px; line-height: 48px; letter-spacing: 0.7px; text-align: center; text-transform: uppercase; }
    .contact-cta__text { font-family: var(--font-helios-light); color: var(--color-white); max-width: 541px; width: 100%; font-weight: 300; font-size: 12px; line-height: 120%; letter-spacing: -0.18px; text-align: center; }
    .contact-cta__btn svg path { fill: #999; }
    .contact-cta__buttons { display: flex; gap: 20px; width: 100%; justify-content: center; margin-top: 20px; }
    .contact-cta__content { gap: 6px; }
    .contacts__title { font-weight: 300; font-size: 20px; line-height: 24px; letter-spacing: 0.7px; text-align: center; vertical-align: middle; text-transform: uppercase; }
    .contacts__info { display: flex; flex-direction: column; gap: 20px; width: 100%; position: relative; z-index: 1; padding-bottom: 40px; padding-top: 40px; }
    .contacts__details { font-family: var(--font-helios-light); color: #8B8B8B; font-weight: 300; font-size: 12px; line-height: 14px; letter-spacing: -0.5px; text-align: center; vertical-align: middle; }
    .footer { background: var(--color-black); padding: 40px 0; text-align: center; }
    .footer__schedule { margin: 0 auto; }
    .footer__phone { font-size: 24px; line-height: 32px; }
    .footer__cols {
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }
    .swiper-button-next, .swiper-button-prev { display: none !important; }
    .productionSwiper { margin: 0 -20px; padding: 0 20px 40px 20px; width: calc(100% + 40px); left: 0px; }
    .productionSwiper .swiper-slide { width: 300px !important; margin-right: 15px !important; }
    .production-card { width: 300px; height: 400px; }
    .production-card__image { height: 310px; }
    .production-card__header { height: 80px; padding: 0 20px; }
    .order__form-wrapper { padding: 30px 20px; box-shadow: 0px 1px 20.4px 1px #00000017; border: 0; }
    .gallery__grid { display: none !important; }
    .gallerySwiper { display: block !important; }
    .gallery__more { display: none !important; }
}
.footer__col.mobilidesc {
    display: none;
}
@media (max-width: 480px) {
    .modal {
        position: relative;
        width: calc(100% + 40px);
        max-width: max-content;
        min-height: auto;
        background: #FFFFFF;
        padding: 50px;
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin: 0;
        margin-left: -20px;
        margin-right: -20px;
    }
    button.btn.btn--black.tratata.callbackje {
        display: none;
    }
    .text-nav h2 {
        font-family: HeliosExt;
        margin-bottom: 25px;
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0%;
        vertical-align: middle;
        text-transform: uppercase;
    }
    .hero__item-text {
        font-family: var(--font-helios-light);
        color: var(--color-white);
        font-weight: 300;
        font-size: 10px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    .content-cat {
        display: flex;
        gap: 25px;
        padding: 25px 0;
        flex-direction: column;
    }
    .main-photo img {
        width: 100%;
    }
    p.hero__desc { font-family: var(--font-helios-light); font-weight: 300; font-size: 14px; line-height: 100%; letter-spacing: 0%; margin-top: -20px; }
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 0 50px;
        gap: 50px;
        position: relative;
        background: black;
    }
    .header::before { display: none; }
    .section-title {
        font-family: HeliosExtLight;
        font-weight: 300;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.7px;
        text-align: center;
        vertical-align: middle;
        text-transform: uppercase;
    }
    .hero__title {
        text-align: left;
        vertical-align: middle;
        font-family: HeliosExt;
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0%;
        text-transform: uppercase;
    }
    .production {
        padding: 50px 0;
        position: relative;
        overflow: hidden;
        background: black;
        display: flex;
        justify-content: center;
    }
    .why__grid { grid-template-columns: 1fr; }
    .clients__logos { grid-template-columns: repeat(4, 1fr); gap: 15px; }
    .production .container { padding-left: 0 !important; }
    .gallery__item img { width: 100%; }
    .client-logo { max-width: 120px; min-height: 30px; }
    .client-logo img { width: 100%; }
    .order__form-wrapper { padding: 30px 20px; box-shadow: 0px 1px 20.4px 1px #00000017; border: 0; }
    .form__submit { padding: 15px 30px; height: 43px; }
    .form__submit__text { font-weight: 400; font-size: 12px; line-height: 48px; letter-spacing: 0%; text-align: center; vertical-align: middle; text-transform: uppercase; }
    .footer__schedule-row { font-size: 14px; }
    .productionSwiper { margin: 0; padding: 0px; width: calc(100% + 40px); }
    .productionSwiper .swiper-slide { width: 280px !important; margin-right: 12px !important; }
    .production-card__text_2 { font-family: var(--font-helios-light); color: var(--color-black); font-weight: 300; font-size: 16px; line-height: 18px; letter-spacing: 0%; vertical-align: middle; }
    .production-card__overlay { min-height: 240px; }
    .production-card__image { height: 280px; }
    .production-card__header {
        height: 48px;
        padding: 0 5px;
        background: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .form__input { height: 34px; font-size: 14px; line-height: 48px; }
    .production-card__text { font-family: var(--font-commons); color: #F5F5F5; font-weight: 300; font-size: 14px; line-height: 100%; letter-spacing: 0%; vertical-align: middle; }
    .text-title { font-size: 14px; }
    .modal { padding: 30px 20px; }
    .modal h2 { order: 1; font-size: 20px; line-height: 24px; }
    .modal-desc { color: #A29D95; order: 2; font-size: 12px; line-height: 14px; }
    ul.modal-features { display: none; }
    .modal-grid-item { width: 100px; }
    .modal-grid-item__img { width: 100px; height: 100px; }
    .modal-tab { min-width: auto; height: auto; font-size: 12px; line-height: 21px; border: 0; background: none; border-right: 1px solid #A29D95; color: #A29D95; padding: 0 10px; }
    .modal-tabs { border-bottom: 0; order: 4; }
    .modal-grid { order: 5; }
    .modal-grid-item__label { font-size: 12px; line-height: 14px; }
    .modal-cta { width: 100%; height: 43px; font-size: 12px; order: 6; }
    button.modal-tab:first-child { border-left: 0; border-right: 1px solid #A29D95; }
    button.modal-tab:last-child { border-left: 0; border-right: 0; }
    .modal-tab.active { color: #000; background: none; border: 0; }
    .modal-examples, h4.modal-examples-title { display: none; }
    div#modalContent { box-sizing: border-box; display: flex; flex-direction: column; }
}

@media (min-width: 1921px) {
    .blur2 { right: 0; background: linear-gradient(270deg, rgba(250, 250, 250, 1) 75%, rgba(250, 250, 250, 0) 100%); }
    .blur1, .blur2 { width: 20%; }
}

video.header-video {
    position: absolute;
    width: auto;
    bottom: 0;
    height: auto;
    max-width: 100%;
}

.header-video.video2 { top: -1px; }

@media (max-width: 480px) {
    .category-card svg {height:54px}
    .trust-divider {
        width: 0;
        height: 40px;
        border: 1px solid var(--color-white);
    }
    .header-video.video2 {
        top: -1px;
        display: none;
    }
    .categories {
        overflow: visible;
        background: none;
    }
    .hero {
        align-items: flex-start;
        height: 100vh;
    }
    video.header-video.main-video {
        top: -50px;
    }
    body {
        font-family: var(--font-commons);
        color: var(--color-black);
        background: black;
    }
    .categories .section-header {
        margin-top: 10px;
    }
    section.category-desc {
        background: white;
    }
    .header {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 50px;
        position: absolute;
        background: black;
        padding-bottom: 0;
    }
    .productionSwiper .swiper-slide {
        width: 343px !important;
        margin-right: 12px !important;
        height: 343px !important;
    }
    .production-card {
        width: 343px;
        height: auto;
        background: white;
    }
    .order__form-wrapper {
        display: flex;
        flex-wrap: wrap;
        padding: 60px 40px;
        gap: 10px;
        max-width: 535px;
        width: 100%;
        background: var(--color-white);
        border: 1px solid #a29d95;
        position: absolute;
        right: 0;
        top: -50px;
        z-index: 2312;
        display: none;
    }
    .order__container {
        flex-direction: column;
        gap: 40px;
        padding: 0;
    }
}

@media (max-width: 391px) {
    .trust-bar {
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        bottom: 50px;
        max-width: 360px;
    }
    .trust-item {
        width: 80px;
    }
    .hero__content {
        gap: 25px;
        padding-top: 0;
    }
}

@media (max-width: 375px) {
    .hero__content {
        gap: 10px;
        padding-top: 0;
    }
    .trust-item {
        width: 80px;
    }
    .trust-bar {
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        max-width: 340px;
        bottom: 0;
    }
    .trust-divider {
        width: 0;
        height: 40px;
        border: 1px solid var(--color-white);
    }
    .why-card {
        gap: 25px;
        width: 145px;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .topbar__left img {
        width: 30px;
    }
    .gallery__grid {
        display: none !important;
    }
    .gallery__mobile {
        display: flex !important;
    }
    .gallery__more {
        display: block !important;
        margin-top: 20px;
    }
    .gallery__more .link--underline {
        color: #999999;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .gallery__mobile {
        gap: 10px;
        padding: 0 5px;
    }
    .swiper-slide {
        max-height: 350px;
    }
    .gallery__mobile-row {
        gap: 10px;
    }
    .gallery__mobile-item--small {
        max-width: calc(33.333% - 7px);
    }
    .gallery__mobile-extra {
        gap: 10px;
    }
}

/* ===== СЛАЙДЕР С МИНИАТЮРАМИ ===== */
.photo-nav {
    max-width: 400px;
    width: 100%;
}

.swiperslider {
    position: relative;
}

.main-photo {
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.main-photo .swiper-slide {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-photo .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-slide {
    height: 400px;
}
.thumb {
    margin-top: 15px;
    overflow: hidden;
}

.thumb .swiper-slide {
    width: 71px !important;
    height: 71px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.thumb .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb .swiper-slide.swiper-slide-thumb-active {
    border-color: #000000;
    opacity: 1;
}

.thumb .swiper-slide:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .thumb .swiper-slide {
        width: 60px !important;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .thumb .swiper-slide {
        width: 50px !important;
        height: 50px;
    }
}

/* Модальное окно */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    overflow-y: auto;
}

.modal-overlay.open {
    display: flex;
}

.modal__checkbox {
    position: relative;
    transition: all 0.3s ease;
}

.modal__checkbox .checkbox-error {
    display: none;
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 6px;
    width: 100%;
    line-height: 1.3;
}

.modal__checkbox.error .checkbox-error {
    display: block;
    width: 100%;
}
.modal__checkbox.error .modal__checkbox__mark {
    border-color: #ff4d4f !important;
}

.modal__checkbox.error span:not(.modal__checkbox__mark):not(.checkbox-error) {
    color: #ff4d4f !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.modal__checkbox.shake {
    animation: shake 0.4s ease-in-out;
}
.modal__checkbox span {
    font-family:var(--font-commons);
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}
.modal__close {
    position: absolute;
    top: 50px;
    right: 50px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
}

.modal__close svg {
    width: 100%;
    height: 100%;
}

.modal__form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.modal__title {
    font-family: 'HeliosExt', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.modal__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
    order: 2;
}

.modal__input {
    width: 100%;
    padding: 14px 18px 12px 18px;
    border: 1px solid #999999;
    font-family: 'TT Commons', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    color: #000000;
    background: #FFFFFF;
    outline: none;
    box-sizing: border-box;
    height: 47px;
}

.modal__input::placeholder {
    color: #999999;
}

.modal__input:focus {
    border-color: #000000;
}

.modal__file-row {
    display: flex;
    gap: 12px;
    width: 100%;
    height: 47px;
}

.modal__file-btn {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 0 0 12px;
    border: 1px solid #999999;
    background: none;
    cursor: pointer;
    flex: 1;
    font-family: 'TT Commons', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    color: #999999;
    overflow: hidden;
}

.modal__file-btn svg {
    flex-shrink: 0;
}

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

.modal__file-select {
    padding: 16px 36px;
    background: #000000;
    border: none;
    font-family: 'HeliosExtLight', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    white-space: nowrap;
    height: 47px;
}

.modal__file-select:hover {
    background: #333333;
}

.modal__note {
    font-family: 'TT Commons', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #999999;
    margin: 0;
    width: 100%;
}

.modal__textarea {
    width: 100%;
    padding: 11px 18px 87px 18px;
    border: 1px solid #999999;
    font-family: 'TT Commons', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    color: #000000;
    background: #FFFFFF;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    min-height: 140px;
}

.modal__textarea::placeholder {
    color: #999999;
}

.modal__textarea:focus {
    border-color: #000000;
}

.modal__submit {
    width: 100%;
    padding: 16px 36px;
    background: #000000;
    border: none;
    font-family: 'HeliosExtLight', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    height: 47px;
}

.modal__submit:hover {
    background: #333333;
}

.modal__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: 'TT Commons', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    color: #999999;
    width: 100%;
    flex-wrap: wrap;
}

.modal__checkbox input[type="checkbox"] {
    display: none;
}

.modal__checkbox__mark {
    width: 18px;
    height: 18px;
    border: 1px solid #999999;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__checkbox input:checked + .modal__checkbox__mark::after {
    content: '✓';
    color: #000000;
    font-size: 14px;
}

.modal__thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 250px;
    gap: 20px;
}

.modal__thanks-title {
    font-family: 'HeliosExt', sans-serif;
    font-weight: 400;
    font-size: 40px;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.modal__thanks-text {
    color: #000;
    margin: 0;
    max-width: 400px;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

@media (max-width: 600px) {
    .footer__contact-block {
        order: 1;
    }
    .modal {
        padding: 30px 20px;
        min-height: auto;
        gap: 30px;
    }
    .footer__col.mobili {
        display: none;
    }
    .modal__close {
        top: 20px;
        right: 20px;
    }
    .modal__title {
        font-size: 24px;
    }
    .modal__file-row {
        flex-wrap: wrap;
        height: auto;
    }
    .modal__file-btn {
        height: 47px;
        width: 100%;
    }
    .modal__file-select {
        width: 100%;
        justify-content: center;
    }
    .modal__checkbox {
        font-size: 14px;
    }
}

.category-desc {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-bottom: 1px solid #999999;
}

.category-desc.open {
    display: block;
    opacity: 1;
}

section.categories.show-triangle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #FFFFFF;
    z-index: 1;
}

section.categories:not(.show-triangle)::after {
    display: none;
}

.category-desc__close {
    position: absolute;
    top: 100px;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    z-index: 10;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.category-desc__close:hover {
    opacity: 1;
}

.category-desc__close svg {
    width: 100%;
    height: 100%;
}
#callbackJeModal .modal {
    min-height: max-content;
}

@media (max-width: 768px) {
    .modal {
        background: #fff;
        max-width: 913px;
        width: calc(100% + 40px);
        padding: 48px;
        position: relative;
        height: 100%;
        overflow-y: auto;
        margin-left: -20px;
        margin-right: -20px;
    }
    .category-desc__close {
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
    }
    .categories {
        padding: 50px 0;
    }
    .text-nav {
        position: relative;
    }
}
.footer__col.mobili {
    display: none;
}
.video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.header-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.clients video.header-video.fg-video.desktop-video {
    bottom: -182px !important;
}
.topg-video {
    z-index: 1;
    object-fit: cover;
}

.bg-video {
    z-index: 2;
    min-width: 0;
    min-height: 0;
}

.fg-video {
    z-index: 3;
    top: auto;
    left: 50%;
    bottom: -285px !important;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    min-width: 0;
    min-height: 0;
}
.production video.header-video {
    bottom: -190px !important;
    z-index: 1;
}
.why video.header-video {
    bottom: -175px !important;
}

/* Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.menu-desktop {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  max-width: 100%;
  height: 100vh;
  background: #FAFAFA;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  overflow-y: auto;
}

.menu-desktop.active {
  transform: translateX(0);
}

.menu-desktop__content {
  padding: 50px;
  padding-top: 70px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.menu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #FAFAFA;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  overflow-y: auto;
}

.menu-mobile.active {
  transform: translateY(0);
}

.menu-mobile__content {
  padding: 25px;
  padding-top: 60px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.menu-close {
  position: absolute;
  top: 25px;
  right: 25px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  transition: transform 0.2s ease;
}

.menu-close:hover {
  transform: rotate(90deg);
}

.menu-section {
  margin-bottom: 25px;
}

.menu-title {
  font-family: 'HeliosExt', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000000;
  margin: 0 0 10px 0;
}

.menu-title-link {
  font-family: 'HeliosExt', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

.menu-title-link:hover {
  color: #C2A878;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 25px;
}

.menu-list li {
  margin-bottom: 0;
}

.menu-link {
  display: block;
  padding: 6px 0 6px 0;
  font-family: 'TT Commons', sans-serif;
  font-size: 16px;
  color: #999999;
  text-decoration: none;
  border-bottom: 1px solid #999999;
  transition: all 0.2s ease;
}

.menu-link:hover {
  color: #000000;
}

.menu-divider {
  border-bottom: 1px solid #999999;
  margin: 25px 0;
}

.menu-contacts {
  margin-top: 50px;
  padding-top: 0;
}

.menu-phone-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.menu-phone {
  font-family: 'HeliosExt', sans-serif;
  font-size: 24px;
  color: #000000;
  text-decoration: none;
}

.menu-schedule {
    margin-bottom: 25px;
    width: 195px;
    margin-left: 32px;
}

.schedule-row {
  display: flex;
  justify-content: space-between;
  font-family: 'TT Commons', sans-serif;
  font-size: 16px;
  color: #000000;
  margin-bottom: 4px;
}

.menu-address {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'TTCommons', sans-serif;
  font-size: 16px;
  color: #999999;
}
.list img {
    width: 110px;
    height: 110px;
}
.vidosina {
    width: 1920px;
    position: absolute;
    height: 100%;
}

img.tophero {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 70vh;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}
.categories video.header-video.topg-video.desktop-video {
    top: 0;
    transform: none;
    margin-top: 100px;
    left: 0;
}
@media (max-width: 768px) {
    p.span {
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        padding-top: 5px;
    }
    img.tophero {
        z-index: 2;
        right: auto;
        max-height: 100%;
        object-fit: contain;
        min-width: 0;
        min-height: 0;
        position: relative;
        bottom: auto;
        height: auto;
        width: 100%;
        top: auto;
        transform: none;
    }
    .vidosina {
        overflow: hidden;
        width: 100%;
    }
    section#category-details {
        background: white;
        z-index: 22;
        position: relative;
    }
    section#materials {
        background: white;
        z-index: 22;
        position: relative;
    }
    .clients .fg-video {
        bottom: -47px !important;
    }
    .why video.header-video {
        bottom: -36px !important;
    }
    .production video.header-video.fg-video.mobile-video {
        bottom: -47px !important;
        z-index: 22;
    }
    .menu-desktop {
        display: none;
    }
    .menu-mobile {
        display: block;
    }
    video.header-video.bg-video {
        max-width: 360px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 150px !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        z-index: 2;
    }
    .fg-video {
        bottom: -90px !important;
    }
    .hero .container {
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 30px;
    }
    .trust-bar {
        position: relative;
        bottom: 0;
    }
}

@media (max-width: 375px) {
    video.header-video.bg-video {
        max-width: 360px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 50px !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        z-index: 2;
    }
    .trust-item.midd {
        width: 110px !important;
    }
    .hero {
        align-items: flex-start;
        height: 100vh;
        padding-top: 70px;
    }
}

@media (min-width: 769px) {
    .menu-title {
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    .menu-phone {
        font-weight: 400;
        font-size: 24px;
        line-height: 100%;
    }
    .menu-title-link {
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0%;
    }
    p.span {
        color: #999;
        border-top: 1px solid #999;
        font-family: var(--font-commons);
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        padding-top: 5px;
    }
    .menu-mobile {
        display: none;
    }
    .menu-desktop {
        display: block;
    }
}

body.menu-open {
    overflow: hidden;
}

.gallery__extra {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery__extra.visible {
    display: block;
    opacity: 1;
}

.gallery__mobile-extra {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery__mobile-extra.open {
    display: flex;
    opacity: 1;
}

@media (max-width: 768px) {
    .gallery__mobile-extra {
        display: none;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .gallery__mobile-extra.open {
        display: flex;
        opacity: 1;
    }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ КАТЕГОРИЙ ===== */
@media (max-width: 768px) {
    .category-card[data-category-id="1"] { order: 1; }
    .category-card[data-category-id="3"] { order: 2; }
    .category-card[data-category-id="5"] { order: 3; }
    .category-card[data-category-id="4"] { order: 4; }
    .category-card[data-category-id="2"] { order: 5; }
    .category-card[data-category-id="6"] { order: 6; }
}

button.btn.btn--black {
    font-family: HeliosExtLight;
    font-weight: 300;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    background: black !important;
    border: 1px solid black;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

button.btn.btn--black::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 40%,
        rgba(194, 168, 120, 0.3) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    transform: rotate(25deg);
    transition: all 0.6s ease;
    pointer-events: none;
}

button.btn.btn--black:hover::before {
    left: 120%;
}

button.btn.btn--black:hover {
    border-color: rgba(194, 168, 120, 0.5);
    box-shadow: 0 0 20px rgba(194, 168, 120, 0.08);
}

button.btn.btn--black:hover .btn__text {
    color: rgba(255, 255, 255, 0.95);
}

button.btn.btn--black:active {
    transform: scale(0.97);
}
.topbar__right img {
    width: 30px;
}

.btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.15) 70%,
        transparent 100%
    );
    transform: rotate(20deg);
    transition: all 0.7s ease;
    pointer-events: none;
}

.btn:hover::before {
    left: 120%;
}

.btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 20%;
    height: 200%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 150, 0.1) 40%,
        rgba(255, 235, 200, 0.3) 50%,
        rgba(255, 215, 150, 0.1) 60%,
        transparent 100%
    );
    transform: rotate(20deg);
    transition: all 0.9s ease 0.1s;
    pointer-events: none;
}

.btn:hover::after {
    left: 140%;
}

.btn:hover {
    box-shadow: inset -1px 1px 0px #CCB280,
                0 4px 30px rgba(194, 168, 120, 0.5);
    transform: translateY(-2px);
}

.btn:active {
    transform: scale(0.95);
}

.btn__text {
    position: relative;
    z-index: 1;
}

/* ============================================
   АНИМАЦИИ ПОЯВЛЕНИЯ (ДОБАВИТЬ В КОНЕЦ ФАЙЛА)
   ============================================ */

/* Базовые классы для анимаций */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Отключение анимаций для reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .stagger-children > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
        animation: none !important;
    }
    
    .gallery__extra.visible {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .gallery__mobile-extra-item {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .hero__list .hero__item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

.fade-in.visible {
    opacity: 1;
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger задержки для дочерних элементов */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; }

.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Специфические задержки для hero */
.hero__title.animate-on-scroll {
    transition-delay: 0.3s;
}

.hero__list .hero__item {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.hero__list.visible .hero__item:nth-child(1) { transition-delay: 0.1s; }
.hero__list.visible .hero__item:nth-child(2) { transition-delay: 0.22s; }
.hero__list.visible .hero__item:nth-child(3) { transition-delay: 0.34s; }

.hero__list.visible .hero__item {
    opacity: 1;
    transform: translateY(0);
}

.hero__content .btn.animate-on-scroll {
    transition-delay: 0.6s;
}

.why-card.animate-on-scroll {
    transition-delay: calc(var(--delay, 0) * 0.12s);
}

/* Анимация для элементов галереи при раскрытии */
.gallery__extra.visible {
    animation: galleryFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gallery__extra.visible:nth-child(1) { animation-delay: 0.05s; }
.gallery__extra.visible:nth-child(2) { animation-delay: 0.1s; }
.gallery__extra.visible:nth-child(3) { animation-delay: 0.15s; }
.gallery__extra.visible:nth-child(4) { animation-delay: 0.2s; }
.gallery__extra.visible:nth-child(5) { animation-delay: 0.25s; }
.gallery__extra.visible:nth-child(6) { animation-delay: 0.3s; }
.gallery__extra.visible:nth-child(7) { animation-delay: 0.35s; }
.gallery__extra.visible:nth-child(8) { animation-delay: 0.4s; }
.gallery__extra.visible:nth-child(9) { animation-delay: 0.45s; }
.gallery__extra.visible:nth-child(10) { animation-delay: 0.5s; }

@keyframes galleryFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Мобильная версия: сокращаем анимации */
@media (max-width: 768px) {
    .animate-on-scroll {
        transform: translateY(20px);
        transition-duration: 0.6s;
    }
    
    .hero__item {
        transform: translateY(20px) !important;
    }
    
    .slide-in-left,
    .slide-in-right {
        transform: translateX(0) !important;
    }
    
    .slide-in-left.visible,
    .slide-in-right.visible {
        transform: translateX(0) !important;
    }
    
    .scale-in {
        transform: scale(0.95) !important;
    }
    
    .scale-in.visible {
        transform: scale(1) !important;
    }
    
    .stagger-children > * {
        transform: translateY(15px);
        transition-duration: 0.5s;
    }
    
    .gallery__extra.visible {
        animation-duration: 0.4s;
    }
}