/* ============================================================
   ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ
   ============================================================ */

body {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}


/* ============================================================
   КОНТЕЙНЕР DESKTOP
   ============================================================ */

.portfolio-container {
    width: 1200px;
    margin: 48px auto;
    padding: 0;
}


/* ============================================================
   НАВИГАЦИЯ (МЕНЮ)
   ============================================================ */

.main-menu {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 96px; 
    width: 100%;
}


/* ============================================================
   1. СТИЛИ ДЛЯ ПЕРЕКЛЮЧАТЕЛЯ ЯЗЫКА (eng / рус)
   ============================================================ */

.lang-switch-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.lang-btn {
    background: none;
    border: none;
    color: #FFF5E0;
    cursor: pointer;
    font-family: inherit;
    font-size: 20px;
    padding: 0 2px;
    font-weight: 600;    
    transition: color 0.2s ease;
}

/* Активный язык подсвечивается золотисто-желтым */
.lang-btn.active {
    color: #f3c653;
    font-family: inherit;
    font-weight: 600;
}

.lang-divider {
    color: #FFF5E0;
}


/* ============================================================
   1. DESKTOP / MOBILE
   ============================================================ */

/* 1. Скрываем блок мобильной версии на десктопе */
.mobile-version {
    display: none;
}

/* 2. Гарантируем серый цвет и неразрывность для текста в десктопе */
.desktop-version .card-item span {
    color: #807E7A;
    white-space: nowrap;
}


/* ============================================================
   КНОПКИ НАВИГАЦИИ
   ============================================================ */

.menu-btn {
    display: inline-flex; 
    align-items: center;  
    justify-content: center; 
    height: 60px; 
    box-sizing: border-box; 
    
    background-color: #1F1E1D; 
    color: #FFF5E0;
    text-decoration: none;
    padding: 0 20px; 
    border-radius: 40px; 
    
    font-size: 20px; 
    font-weight: 600; 
    letter-spacing: -0.01em; 
    transition: 0.2s; 
}

.menu-btn:hover {
    background-color: #FFD685; 
    color: #1F1E1D; 
}

.menu-btn:active {
    opacity: 0.5; 
}


/* ============================================================
   ГЛАВНЫЙ ЭКРАН (Заголовок и фото)
   ============================================================ */

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 96px; 
}

.hero-title img {
    width: 685px; 
    height: 280px; 
    object-fit: contain; 
}

.hero-photo img {
    width: 384px; 
    height: 398px; 
    border-radius: 24px; 
    object-fit: cover; 
}


/* ============================================================
   КАРТОЧКИ
   ============================================================ */

.info-cards {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 24px; 
    margin-bottom: 160px;
}

.card {
    background-color: #1F1E1D; 
    padding: 32px; 
    border-radius: 24px; 
}

.experience-card {
    grid-column: 1 / -1; 
}


/* ============================================================
   ЗАГОЛОВКИ ВНУТРИ КАРТОЧЕК
   ============================================================ */

.card h2 {
    color: #FFD685; 
    margin-top: 0;
    margin-bottom: 32px; 
    font-size: 32px; 
    font-weight: 600; 
    letter-spacing: -0.01em;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 24px; 
    font-size: 20px; 
    font-weight: 600;
    color: #FFF5E0;
    letter-spacing: -0.01em;
}


/* ============================================================
   СТРОКИ С ИНФОРМАЦИЕЙ ВНУТРИ КАРТОЧЕК
   ============================================================ */

.card-item {
    display: flex;
    align-items: flex-start;
    gap: 24px; 
    margin-bottom: 32px; 
    font-size: 20px; 
    line-height: 1.5;
    font-weight: 500; 
    letter-spacing: -0.01em;
}


.card-item > :first-child {
    flex-shrink: 0;
}

.contacts-card .card-item > :first-child { width: 106px; }
/* Ширина подписи WhatsApp определяется самим текстом */
.contacts-card .card-item[data-lang-only="en"] > .desktop-contact-label {
    width: max-content;
}
/* Выравнивание дефиса Email по дефису WhatsApp */
html[lang="en"] .contacts-card .card-item:not([data-lang-only="en"]) > .desktop-contact-label {
    width: 120px;
}
.education-card .card-item > :first-child { width: 110px; }
.experience-card .card-item > :first-child { width: 139px; }

.card-item:last-child {
    margin-bottom: 0;
}


/* ============================================================
   ССЫЛКИ В КОНТАКТАХ
   ============================================================ */

.card-item a {
    color: #FFF5E0; 
    font-weight: 600; 
    text-decoration: underline; 
    transition: 0.2s;
}

.card-item a:hover {
    color: #FFD685; 
    text-decoration: none; 
}


/* ============================================================
   СЕРЫЙ ТЕКСТ
   ============================================================ */

.grey-text {
    color: #807E7A; 
    white-space: nowrap; 
}


/* ============================================================
   РАЗДЕЛИТЕЛЬ
   ============================================================ */

.vector-dash {
    margin-top: 13px; 
    width: 48px; 
    flex-shrink: 0; 
}


/* ============================================================
   ИНФОРМАЦИЯ О РАБОТЕ
   ============================================================ */

.job-info h4 {
    margin: 0 0 12px 0; 
    font-size: 20px; 
    font-weight: 600; 
    color: #FFF5E0; 
    letter-spacing: -0.01em;
}

.job-info p {
    margin: 0;
    font-size: 20px;
    color: #807E7A; 
    font-weight: 500; 
    letter-spacing: -0.01em;
}

/* ==========================================================================
   СЕКЦИЯ ПРОЕКТОВ (ДЕСКТОП)
   ========================================================================== */

/* Контейнер одного проекта: между его блоками строго 96px, между проектами 160px */
.project-card {
    display: flex;
    flex-direction: column;
    gap: 96px;              /* отступ 96px между всеми внутренними блоками */
    width: 1200px;
    margin: 0 auto 160px auto; /* 160px между разными проектами */
}

.project-card:last-child {
    margin-bottom: 0;
}

/* --- 1. ШАПКА ПРОЕКТА (Project_top) --- */
.project-top {
    display: flex;
    justify-content: space-between; /* Категория слева, теги справа */
    align-items: center;
    width: 100%;
}

/* Базовый класс для категории (слева) */
.project-category {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 12px 24px;
    height: 60px;
    background: #1F1E1D;
    border-radius: 36px;
    color: #FFF5E0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Базовый класс для тегов (справа) */
.project-tags {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24px;
    gap: 12px;
    height: 60px;
    border: 2px solid #807E7A;
    border-radius: 36px;
    color: #807E7A;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Круглая точка-разделитель между тегами */
.tag-dot {
    width: 5px;
    height: 5px;
    background-color: #807E7A;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- 2. ОСНОВНОЙ БЛОК (Фото слева, текст справа) --- */
.project-main {
    display: flex;
    align-items: flex-start;
    gap: 125px; /* отступ 125px от фото до текста */
    width: 100%;
}


.project-cover {
    flex-shrink: 0; /* фото держит свои точные размеры */
}

/* Обложка проекта 1: 588×562 */
.project-1 .project-cover img {
    width: 588px;
    height: 562px;
    border-radius: 24px;
}

/* Текстовая колонка */
.project-content {
    flex: 1;
}

.project-title {
    margin: 0 0 48px 0; /* отступ 48px от заголовка до первого абзаца */
    font-size: 32px;
    font-weight: 600;
    color: #FFD685;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.project-text p {
    margin: 0 0 24px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #FFF5E0;
    line-height: 24px;
    letter-spacing: normal;
}

.project-text p:last-child {
    margin-bottom: 0;
}


/* --- 3. РАЗДЕЛИТЕЛЬ (Delimiter) --- */
.project-delimiter {
    width: 1200px;
    height: 6px;
    background: #1F1E1D;
    border-radius: 36px;
    flex-shrink: 0;
}

/* --- 4. ГАЛЕРЕЯ ФОТО ПРОЕКТА --- */
.project-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}

.project-gallery img {
    width: 588px;
    height: 380px;
    border-radius: 24px;
    object-fit: cover;
    display: block;
}

/* ============================================================
   ОБЩИЕ СТИЛИ КНОПОК ПРОЕКТОВ И ЛЕНДИНГОВ
   ============================================================ */

.project-toggle-btn,
.project-expand-btn,
.project-collapse-btn,
.landing-expand-projects-btn,
.landing-collapse-projects-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    width: 588px;
    height: 60px;

    margin: 0;
    padding: 12px 24px;
    align-self: flex-start;

    background: #FFD685;
    color: #1F1E1D;
    border: none;
    border-radius: 36px;

    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;

    cursor: pointer;
}

/* Индивидуальные настройки анимации */

.project-toggle-btn {
    transition: 0.2s ease;
}

.project-expand-btn,
.project-collapse-btn {
    transition: background 0.2s ease;
}

.landing-expand-projects-btn,
.landing-collapse-projects-btn {
    transition: opacity 0.2s ease;
}

/* Наведение */

.project-toggle-btn:hover,
.project-expand-btn:hover,
.project-collapse-btn:hover,
.landing-expand-projects-btn:hover,
.landing-collapse-projects-btn:hover {
    opacity: 0.5;
}

/* Фокус с клавиатуры */

.project-expand-btn:focus-visible,
.project-collapse-btn:focus-visible {
    outline: 2px solid #FFD685;
    outline-offset: 4px;
}

/* Кнопки сворачивания изначально скрыты */

.project-collapse-btn,
.landing-collapse-projects-btn {
    display: none;
}

/* Скрытые материалы проекта */
.project-hidden-content {
    display: flex;
    flex-direction: column;
    gap: 96px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition:
        max-height 0.7s ease,
        opacity 0.5s ease;
}

/* Раскрытое состояние */
.project-hidden-content.is-visible {
    max-height: 5000px;
    opacity: 1;
}

/* Убираем лишний gap у скрытого блока */
.project-hidden-content:not(.is-visible) {
    margin-top: -96px;
}



/* ===== ВТОРОЙ ПРОЕКТ: ВЕРХНЯЯ ГАЛЕРЕЯ ===== */

.project-2 .project-cover {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 588px;
    flex-shrink: 0;
}

/* Главное фото */

.project-2 .project-cover > picture {
    display: block;
    width: 100%;
    height: 330px;
    min-width: 0;
    overflow: hidden;
    border-radius: 24px;
}

.project-2 .project-cover > picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* Два нижних фото */

.project-2 .project-cover-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.project-2 .project-cover-bottom img {
    display: block;
    width: 100%;
    height: 263px;
    object-fit: cover;
    border-radius: 24px;
    min-width: 0;
}


/* ===== ВТОРОЙ ПРОЕКТ: СЕТКА ОСНОВНОГО БЛОКА ===== */

.project-2 .project-main {
    display: grid;
    grid-template-columns: 588px minmax(0, 1fr);
    column-gap: 125px;
    align-items: start;
    width: 1200px;
}

.project-2 .project-content {
    width: 100%;
    min-width: 0;
    padding-top: 0;
}

.project-2 .project-title {
    line-height: 90%;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}


/* ===== ВТОРОЙ ПРОЕКТ: ДОПОЛНИТЕЛЬНАЯ ГАЛЕРЕЯ ===== */

.project-2-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 380px);
    gap: 24px;
    width: 100%;
}

/* Обёртки не должны создавать дополнительные ячейки */

.project-2-gallery .gallery-column-full,
.project-2-gallery .gallery-column-half {
    display: contents;
}

/* Каждая фотография — отдельный элемент сетки */

.project-2-gallery picture {
    display: block;
    width: 100%;
    height: 380px;
    min-width: 0;
    overflow: hidden;
    border-radius: 24px;
}

.project-2-gallery picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* Большое фото занимает два ряда */

.project-2-gallery .gallery-column-full picture {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 784px;
}


/* ===== ВТОРОЙ ПРОЕКТ: ЛЕНДИНГ И МИНИ-ПРИЛОЖЕНИЕ ===== */

.project-2-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* Текст */

.project-2-details-text {
    width: 792.91px;
    max-width: 100%;
}

.project-2-details-text p {
    margin: 0 0 24px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}

.project-2-details-text p:last-child {
    margin-bottom: 0;
}


/* Три изображения */

.project-2-app-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: 96px;
    row-gap: 24px;
    width: 100%;
    margin-top: 96px;
}

/* Большое изображение ноутбука */

.project-2-app-gallery > picture {
    display: block;
    width: 100%;
    min-width: 0;
}

.project-2-app-gallery > picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Два изображения телефонов */

.project-2-app-gallery-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.project-2-app-gallery-right picture {
    display: block;
    width: calc(50% - 12px);
    min-width: 0;
}

.project-2-app-gallery-right picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}



/* ===== ПРОЕКТ 3: WI-FI 7 ===== */

/* Общая сетка проекта */
.project-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    width: 1200px;
    margin-bottom: 160px;
}

/* Шапка проекта на всю ширину */
.project-3 .project-top {
    grid-column: 1 / -1;
    margin-bottom: 72px;
}

/* Основной блок: баннер и описание */
.project-3 .project-main {
    grid-column: 1 / -1;
    margin-bottom: 72px;
}

.project-3 .project-cover {
    width: 588px;
    flex-shrink: 0;
}

.project-3 .project-cover img {
    display: block;
    width: 588px;
    height: 428px;
    object-fit: cover;
    border-radius: 24px;
}

.project-3 .project-title {
    line-height: 90%;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* Разделитель на всю ширину */
.project-3 .project-delimiter {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 72px;
}

/* Изображения становятся элементами общей сетки */
.project-3 .project-gallery {
    display: contents;
}

/* Сохраняем трёхколоночную сетку внутри скрытого блока */
.project-3 .project-hidden-content {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 24px;
    row-gap: 24px;
}

/* Сетка появляется только при раскрытии */
.project-3 .project-hidden-content.is-visible {
    display: grid;
}

.project-3 .project-gallery img {
    display: block;
    width: 100%;
    height: 335px;
    min-width: 0;
    object-fit: cover;
    border-radius: 24px;
}

/* Три описания под соответствующими изображениями */
.project-3 .project-hidden-content > .project-content {
    min-width: 0;
    width: 100%;
}

.project-3 > .project-content .project-title {
    margin: 0 0 24px 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: #FFF5E0;
}

.project-3 .project-hidden-content > .project-content .project-text p {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
}

/* Кнопка после всех трёх описаний */
.project-3 .project-toggle-btn {
    grid-column: 1 / span 2;
    margin-top: 72px;
}


/* Проект 3 — заголовки и описания карточек */
.project-3 > .project-content {
    min-width: 0;
    width: 100%;
    padding-top: 24px;
    box-sizing: border-box;
    align-self: start;
}

/* Заголовки трёх концепций */
.project-3 .project-hidden-content > .project-content .project-title {
    margin: 0 0 24px 0;
    margin-top: 0;
    min-height: 2.2em;
    display: flex;
    align-items: flex-start;
    font-size: 32px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

/* Кнопка сворачивания проекта 3 */
.project-3 .project-collapse-btn {
    grid-column: 1 / span 2;
    margin-top: 72px;
}


/* ============================================================
   ПРОЕКТ 4 — DESKTOP
   ============================================================ */


/* ===== ПЕРВЫЙ ЭКРАН ===== */

.project-4 .project-main {
    display: grid;
    grid-template-columns: 588px 486px;
    column-gap: 125px;
    align-items: start;
    width: 1199px;
}

/* Обложка */

.project-4 .project-cover {
    position: relative;
    width: 588px;
    height: 550px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 24px;
}

.project-4 .project-cover > picture {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.project-4 .project-cover > picture img {
    display: block;
    position: absolute;
    width: 603.23px;
    height: 562.2px;
    max-width: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border-radius: 0;
}

/* Текстовая колонка */

.project-4 .project-main > .project-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 486px;
    height: 550px;
    min-width: 0;
    padding: 0;
    flex: none;
}

.project-4 .project-main > .project-content > .project-title {
    width: 486px;
    height: 80px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFD685;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.project-4 .project-main > .project-content > .project-text {
    width: 486px;
    height: 422px;
    min-width: 0;
}

.project-4 .project-main > .project-content > .project-text p {
    margin: 0 0 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}

.project-4 .project-main > .project-content > .project-text p:last-child {
    margin-bottom: 0;
}


/* ===== ВТОРОЙ БЛОК — GOODLINE ГОРОД ===== */

.project-4-section-app {
    display: grid;
    grid-template-columns: 384px 690px;
    justify-content: space-between;
    align-items: start;
    width: 1200px;
}

/* Текстовая колонка */

.project-4-section-app > .project-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 384px;
    min-width: 0;
    padding: 0;
}

.project-4-section-app .project-title {
    width: 384px;
    margin: 0;
    color: #FFF5E0;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.project-4-section-app .project-text {
    width: 384px;
}

.project-4-section-app .project-text p {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    color: #FFF5E0;
}

.project-4-section-app .project-text p:last-child {
    margin-bottom: 0;
}

/* Три изображения */

.project-4-section-app .project-gallery {
    display: grid;
    grid-template-columns: repeat(3, 220px);
    gap: 15px;
    width: 690px;
    min-width: 0;
}

.project-4-section-app .project-gallery > picture {
    display: block;
    width: 220px;
    height: 442px;
}

.project-4-section-app .project-gallery > picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}


/* ===== АДАПТАЦИЯ ДЛЯ ВЕБ-ПЛАТФОРМ ===== */

.project-4-web-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 1200px;
    flex: none;
    box-sizing: border-box;
}

.project-4-web-text .project-title {
    width: 100%;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

.project-4-web-text .project-text {
    width: 100%;
}

.project-4-web-text .project-text p {
    margin: 0 0 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}

.project-4-web-text .project-text p:last-child {
    margin-bottom: 0;
}


/* Галерея веб-платформ */

.project-4-web-gallery {
    display: grid;
    grid-template-columns: 690px 486px;
    grid-template-rows: 348px 348px;
    gap: 24px;
    width: 1200px;
    height: 720px;
    flex: none;
}

.project-4-web-gallery > picture {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 24px;
}

.project-4-web-gallery > picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

.project-4-web-gallery > picture:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.project-4-web-gallery > picture:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.project-4-web-gallery > picture:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}


/* ===== ВИДЕО ЗАСТАВКИ ===== */

.project-4-video {
    position: relative;
    display: block;
    width: 1200px;
    height: 672px;
    overflow: hidden;
    border-radius: 24px;
    flex: none;
    text-decoration: none;
    background: #1F1E1D;
}

.project-4-video-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.project-4-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.2s ease, transform 0.2s ease;
}

.project-4-video-play svg {
    display: block;
    width: 42px;
    height: 45px;
    margin-left: 5px;
}

.project-4-video:hover .project-4-video-play {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.05);
}


/* ===== ФИНАЛЬНЫЙ ТЕКСТОВЫЙ БЛОК ===== */

.project-4-final-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 1200px;
    flex: none;
    gap: 0;
    box-sizing: border-box;
}

.project-4-final-text > .project-title {
    width: 100%;
    margin: 0 0 32px;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.project-4-final-text > .project-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0 0 48px;
}

.project-4-final-text > .project-text p {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #FFF5E0;
}

.project-4-final-text > .project-responsibility-title {
    margin: 0 0 32px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #FFF5E0;
}

.project-4-final-text > .project-4-responsibility-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.project-4-final-text .project-4-responsibility-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 24px;
    color: #FFF5E0;
}

.project-4-final-text .project-4-responsibility-bullet {
    display: block;
    flex: 0 0 6px;
    width: 6px;
    margin: 0;
    padding: 0;
    line-height: 24px;
    color: #FFF5E0;
}


/* ============================================================
   ПОЛИГРАФИЯ — ДЕСКТОП
   ============================================================ */

/* Основная карточка полиграфии */
.project-card.printing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 96px;
    width: 1200px;
    margin: 0 auto 160px;
    box-sizing: border-box;
}

/* Верхняя строка категории и тегов */
.printing > .project-top {
    width: 100%;
}


/* ============================================================
   ПЕРВАЯ СЕТКА — 4 ВИДИМЫЕ РАБОТЫ
   ============================================================ */

.printing-grid {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    column-gap: 24px;
    row-gap: 98px;
    width: 1200px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    align-items: start;
}


/* ============================================================
   ВТОРАЯ СЕТКА — СКРЫТЫЕ РАБОТЫ
   ============================================================ */

.printing .project-hidden-content {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    column-gap: 24px;
    row-gap: 98px;
    width: 1200px;
    padding: 0;
    box-sizing: border-box;
    align-items: start;

    /* Сохраняем общую анимацию раскрытия */
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition:
        max-height 0.7s ease,
        opacity 0.5s ease;
}

/* Раскрытое состояние */
.printing .project-hidden-content.is-visible {
    max-height: 5000px;
    opacity: 1;
}


/* ============================================================
   КАРТОЧКИ РАБОТ
   ============================================================ */

/* Отдельная работа */
.printing-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 588px;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Изображение 588 × 680 */
.printing-cover {
    width: 588px;
    height: 680px;
    overflow: hidden;
    border-radius: 24px;
    flex: none;
}

.printing-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}


/* ============================================================
   ТЕКСТОВОЕ ОПИСАНИЕ
   ============================================================ */

/* Заголовок + текст */
.printing-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 588px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Заголовок */
.printing-title {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

/* Описание */
.printing-text {
    width: 100%;
    margin: 0;
    padding: 0;
}

.printing-text p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}


/* ============================================================
   ШИРОКИЕ РАБОТЫ
   ============================================================ */

/* Две работы, занимающие всю ширину сетки */
.printing-item-wide {
    grid-column: 1 / -1;
    width: 1200px;
}

/* Две фотографии внутри широкой карточки */
.printing-gallery {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    gap: 24px;
    width: 1200px;
    margin: 0;
    padding: 0;
}

.printing-gallery img {
    display: block;
    width: 588px;
    height: 680px;
    object-fit: cover;
    border-radius: 24px;
}

/* Широкое описание под парой фотографий */
.printing-item-wide .printing-content {
    width: 1200px;
}




/* ============================================================
   DIGITAL — ДЕСКТОП
   ============================================================ */

.project-card.digital {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 96px;
    width: 1200px;
    margin: 0 auto 160px;
    box-sizing: border-box;
}

/* Верхняя строка категории и тегов */

.digital > .project-top {
    width: 100%;
}

/* Сетка: две колонки по 588 px */

.digital-grid {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    column-gap: 24px;
    row-gap: 96px;
    width: 1200px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    align-items: start;
}

/* Обычная карточка */

.digital-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 588px;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Карточка на всю ширину */

.digital-item-wide {
    grid-column: 1 / -1;
    width: 1200px;
}

/* Одно изображение */

.digital-cover {
    width: 588px;
    height: 338px;
    overflow: hidden;
    border-radius: 24px;
    flex: none;
}

.digital-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Обёртки изображений */

.digital-cover picture {
    display: block;
    width: 100%;
    height: 100%;
}

.digital-gallery picture {
    display: block;
    width: 588px;
    height: 338px;
    overflow: hidden;
}

/* Две фотографии в широкой карточке */

.digital-gallery {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    gap: 32px;
    width: 1200px;
    margin: 0;
    padding: 0;
}

.digital-gallery img {
    display: block;
    width: 588px;
    height: 338px;
    object-fit: cover;
    border-radius: 24px;
}

/* Текстовая часть */

.digital-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Заголовок */

.digital-title {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

/* Описание */

.digital-text {
    width: 100%;
    margin: 0;
    padding: 0;
}

.digital-text p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}

/* Кнопка под сеткой */

.digital > .digital-toggle-btn {
    align-self: center;
    margin: 0;
}



/* ============================================================
   ПРОЕКТ 8 — 3D-ГРАФИКА
   ============================================================ */

/* Сетка карточек */
.three-d-grid {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    column-gap: 24px;
    row-gap: 96px;
    width: 1200px;
    align-items: start;
}

/* Общая карточка */
.three-d-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 588px;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Широкие карточки на всю сетку */
.three-d-item-wide {
    grid-column: 1 / -1;
    width: 1200px;
}

/* Изображение */
.three-d-cover {
    width: 100%;
    height: 540px;
    overflow: hidden;
    border-radius: 24px;
    flex: none;
}

.three-d-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Высоты широких изображений */

/* 1. Реклама бизнес-форума */
.three-d-grid > .three-d-item-wide:first-child .three-d-cover {
    height: 674px;
}

/* 4. Городской арт-объект */
.three-d-hidden-content .three-d-item-wide:first-child .three-d-cover {
    height: 600px;
}

/* 7. Хэллоуинское промо */
.three-d-hidden-content .three-d-item-wide:last-child .three-d-cover {
    height: 600px;
}

/* Текстовая часть */
.three-d-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Заголовок */
.three-d-title {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

/* Описание */
.three-d-text {
    width: 100%;
    margin: 0;
    padding: 0;
}

.three-d-text p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}



/* ============================================================
   MOTION DESIGN — DESKTOP
   ============================================================ */

.project-card.motion-design {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 96px;
    width: 1200px;
    margin: 0 auto 160px;
    box-sizing: border-box;
}

.motion-design > .project-top {
    width: 100%;
}

/* Сетка работ */

.motion-grid {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    column-gap: 24px;
    row-gap: 96px;
    width: 1200px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    align-items: start;
}

/* Карточка */

.motion-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 588px;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Видео */

.motion-cover {
    position: relative;
    width: 588px;
    height: 588px;
    overflow: hidden;
    border-radius: 24px;
    flex: none;
    background: #1F1E1D;
}

.motion-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Кнопка воспроизведения */

.motion-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

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

    width: 112px;
    height: 112px;
    padding: 0;

    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);

    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.motion-play svg {
    display: block;
    width: 42px;
    height: 45px;
    margin-left: 5px;
}

.motion-cover:hover .motion-play {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.05);
}

/* Встроенный видеоплеер */

.motion-cover iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Текст */

.motion-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.motion-title {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

.motion-text {
    width: 100%;
    margin: 0;
    padding: 0;
}

.motion-text p {
    margin: 0;
    padding: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}


/* ============================================================
   СКРЫТАЯ СЕТКА MOTION DESIGN
   ============================================================ */

.motion-hidden-content > .motion-grid {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    column-gap: 24px;
    row-gap: 96px;
    width: 1200px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    align-items: start;
}


/* ============================================================
   ПОСЛЕДНЯЯ РАБОТА — ШИРОКАЯ КАРТОЧКА
   Работает и в основной, и в скрытой сетке
   ============================================================ */

.motion-grid > .motion-item-wide {
    grid-column: 1 / -1;
    width: 1200px;
    max-width: none;
    min-width: 0;
}

/* Широкое видео */

.motion-grid > .motion-item-wide > .motion-cover {
    width: 1200px;
    height: 675px;
    max-width: none;
}

/* Широкий текстовый блок */

.motion-grid > .motion-item-wide > .motion-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 1200px;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

/* Заголовок и описание */

.motion-grid > .motion-item-wide .motion-title,
.motion-grid > .motion-item-wide .motion-text,
.motion-grid > .motion-item-wide .motion-text p {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}




/* ============================================================
   ПРОЕКТ: СОЦСЕТИ — DESKTOP
   ============================================================ */

.project-card.social-media {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 96px;
    width: 1200px;
    margin: 0 auto 160px;
    box-sizing: border-box;
}

.social-slider-dots {
    display: none;
}

.social-media > .project-top {
    width: 100%;
}

/* Общая карточка проекта */

.social-project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 588px;
    min-width: 0;
    box-sizing: border-box;
}

.social-project-wide {
    width: 1200px;
}

/* Сетка из двух самостоятельных проектов */

.social-project-grid {
    display: grid;
    grid-template-columns: repeat(2, 588px);
    column-gap: 24px;
    row-gap: 96px;
    width: 1200px;
    align-items: start;
    box-sizing: border-box;
}

/* Одиночные изображения проектов 2, 3, 7 и 8 */

.social-media .social-single-cover {
    width: 588px;
    height: 735px;
    min-width: 588px;
    min-height: 735px;
    max-width: none;
    overflow: hidden;
    border-radius: 24px;
    flex: 0 0 588px;
    box-sizing: border-box;
}

.social-media .social-single-cover picture {
    display: block;
    width: 100%;
    height: 100%;
}

.social-media .social-single-cover picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* ============================================================
   ГОРИЗОНТАЛЬНЫЙ СЛАЙДЕР
   ============================================================ */

.social-slider {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 1200px;
    height: 394px;
    padding: 0;
    box-sizing: border-box;
}

.social-slider-viewport {
    width: 996px;
    height: 394px;
    overflow: hidden;
    flex: 0 0 996px;
    padding: 0;
    order: 1;
    box-sizing: border-box;
}

.social-slider-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: max-content;
    height: 394px;
    transition: transform 0.45s ease;
}

/* Карточки с изображениями */

.social-slider-track picture {
    display: block;
    width: 316px;
    height: 394px;
    flex: 0 0 316px;
    overflow: hidden;
    border-radius: 24px;
}

.social-slider-track picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* ============================================================
   СТРЕЛКИ СЛАЙДЕРА
   ============================================================ */

.social-arrow {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;

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

    width: 78px;
    height: 78px;
    padding: 0;

    background: #1F1E1D;
    border: none;
    border-radius: 100px;

    flex: 0 0 78px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.social-arrow-left {
    order: 0;
}

.social-arrow-right {
    order: 2;
}

.social-arrow svg {
    display: block;
    width: 34.45px;
    height: 22.09px;
    overflow: visible;
}

.social-arrow svg path {
    fill: none;
    stroke: #FFF5E0;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-arrow:hover {
    opacity: 0.5;
}

/* Неактивные стрелки на ПК остаются видимыми, но менее яркими */

.social-arrow:disabled {
    opacity: 0.5;
    cursor: default;
}

.social-arrow:not(:disabled):hover {
    background: #FFD685;
    opacity: 1;
}

.social-arrow:not(:disabled):hover svg path {
    stroke: #1F1E1D;
}

/* ============================================================
   ТЕКСТ ПРОЕКТА
   ============================================================ */

.social-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.social-title {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

.social-text {
    width: 100%;
    margin: 0;
    padding: 0;
}

.social-text p {
    margin: 0;
    padding: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #FFF5E0;
}

/* Скрытые проекты */

.social-media .project-hidden-content {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   ПРОЕКТ: ЛЕНДИНГИ — DESKTOP
   ============================================================ */

.project-card.landing-projects {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 96px;
    width: 1200px;
    margin: 0 auto 160px;
    box-sizing: border-box;
}

.landing-projects > .project-top {
    width: 100%;
}


/* ============================================================
   ОДИН ПРОЕКТ
   ============================================================ */

.landing-project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 1200px;
    box-sizing: border-box;
}




/* ============================================================
   ИЗОБРАЖЕНИЯ ЛЕНДИНГОВ
   ============================================================ */

/* Область просмотра */

.landing-image-viewport {
    width: 1200px;
    height: var(--preview-height, 680px);
    max-height: var(--preview-height, 680px);
    overflow: hidden;
    border-radius: 24px;
    box-sizing: border-box;
    transition: max-height 0.7s ease;
}

/* Полное изображение лендинга */

.landing-full-picture {
    display: block;
    width: 1200px;
    margin: 0;
    padding: 0;
}

.landing-full-image {
    display: block;
    position: relative;
    top: var(--image-offset, 0px);

    width: 1200px;
    height: auto;
    max-width: none;

    object-fit: contain;
    object-position: top;
    border-radius: 24px;
}


/* ============================================================
   ИНДИВИДУАЛЬНЫЕ ПАРАМЕТРЫ ПРОЕКТОВ
   ============================================================ */

/* Проект 1 — Лендинг для подключения ПВЗ */

.landing-projects > .landing-project:nth-of-type(2) {
    --preview-height: 680px;
    --image-offset: -11.26px;
}

/* Проект 2 — Каникулы с Goodline */

.landing-projects > .landing-project:nth-of-type(3) {
    --preview-height: 800px;
    --image-offset: -60px;
}

/* Проект 3 — Wi-Fi авторизация */

.landing-hidden-projects > .landing-project:nth-of-type(1) {
    --preview-height: 680px;
    --image-offset: -13.5px;
}

/* Проект 4 — 100 000 ₽ на благоустройство дома */

.landing-hidden-projects > .landing-project:nth-of-type(2) {
    --preview-height: 680px;
    --image-offset: 0px;
}

/* Проект 5 — Переход на 1С:Фреш */

.landing-hidden-projects > .landing-project:nth-of-type(3) {
    --preview-height: 700px;
    --image-offset: -15.57px;
}


/* ============================================================
   РАСКРЫТОЕ СОСТОЯНИЕ — ПОКАЗЫВАЕМ ВСЮ СТРАНИЦУ
   ============================================================ */

.landing-projects .landing-project .landing-image-viewport.is-expanded {
    height: auto;
    max-height: 20000px;
}



/* ============================================================
   НАЗВАНИЕ И ОПИСАНИЕ ПРОЕКТА
   ============================================================ */

.landing-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 1200px;
    box-sizing: border-box;
}

.landing-title {
    width: 100%;
    margin: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 90%;
    letter-spacing: -0.01em;
    color: #FFF5E0;
}

.landing-text {
    width: 100%;
}

.landing-text p {
    margin: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #FFF5E0;
}


/* ============================================================
   КНОПКА «ПОСМОТРЕТЬ ЛЕНДИНГ ЦЕЛИКОМ»
   ============================================================ */

.landing-full-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 588px;
    height: 60px;
    padding: 12px 24px;
    box-sizing: border-box;

    background: transparent;
    border: 2px solid #FFD685;
    border-radius: 36px;

    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #FFD685;

    cursor: pointer;
    flex: none;

    transition: background 0.2s ease, color 0.2s ease;
}

/* Наведение */

.landing-full-btn:hover {
    opacity: 0.5;
}



/* ============================================================
   СКРЫТЫЕ ПРОЕКТЫ 3–5
   ============================================================ */

.landing-hidden-projects {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 96px;

    width: 1200px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition:
        max-height 0.7s ease,
        opacity 0.5s ease;
}

/* Открытое состояние */

.landing-hidden-projects.is-visible {
    max-height: 50000px;
    opacity: 1;
}

/* Компенсируем gap родительского блока, пока проекты скрыты */

.landing-hidden-projects:not(.is-visible) {
    margin-top: -96px;
}


/* Показываем после раскрытия проектов */

.landing-hidden-projects.is-visible .landing-collapse-projects-btn {
    display: flex;
}



/* ============================================================
   ПОДВАЛ САЙТА
   ============================================================ */

.portfolio-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    width: 1200px;
    margin: 0 auto;
    padding-bottom: 48px;

    box-sizing: border-box;
}

/* Подпись */

.footer-copy {
    justify-self: start;

    margin: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #FFF5E0;
}

/* Контейнер кнопок */

.footer-contacts {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 16px;
}

/* Общие стили кнопок */

.footer-contact-btn {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    gap: 8px;

    height: 48px;
    padding: 0 16px;

    box-sizing: border-box;
    border: none;
    border-radius: 36px;

    background: #1F1E1D;
    color: #FFF5E0;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}

/* Иконки */

.footer-contact-icon {
    display: block;
    flex: 0 0 18px;

    width: 18px;
    height: 18px;

    object-fit: contain;
}

/* Белые иконки в обычном состоянии */

.footer-telegram-btn .footer-contact-icon,
.footer-email-btn .email-icon {
    filter: brightness(0) invert(1);
}

/* Иконка копирования скрыта до нажатия */

.footer-email-btn .copied-icon {
    display: none;
}

/* Наведение на обычные кнопки */

.footer-telegram-btn:hover,
.footer-email-btn:not(.is-copied):hover {
    opacity: 0.6;
}

/* Состояние после копирования */

.footer-email-btn.is-copied {
    width: 138px;
    height: 50px;
    padding: 12px 24px;
    gap: 12px;

    background: #FFD685;
    color: #1F1E1D;

    opacity: 1;
}

/* Меняем иконки */

.footer-email-btn.is-copied .email-icon {
    display: none;
}

.footer-email-btn.is-copied .copied-icon {
    display: block;
    color: #1F1E1D;
}

/* Текст после копирования */

.footer-email-btn.is-copied .email-btn-text {
    color: #1F1E1D;
}

/* WhatsApp (английская версия): размеры иконки по макету 30.04 × 30 px,
   цвет #FFF5E0 задан в самом SVG, пропорции сохраняются (viewBox) */

.footer-whatsapp-icon {
    display: block;
    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    object-fit: contain;
}

.footer-whatsapp-btn:hover {
    opacity: 0.6;
}


/* =========================================================
   ЯЗЫКОВОЕ ПЕРЕКЛЮЧЕНИЕ — КОНТАКТЫ
   ========================================================= */

.desktop-contact-label {
    display: inline;
}

.mobile-contact-label {
    display: none;
}

@media (max-width: 768px) {
    .desktop-contact-label {
        display: none;
    }

    .mobile-contact-label {
        display: inline;
    }
}

/* =========================================================
   ПЕРЕКЛЮЧЕНИЕ ЯЗЫКОВ — КОНТАКТЫ
   ========================================================= */

/* По умолчанию показываем только русские контакты */
[data-lang-only="en"] {
    display: none !important;
}

/* При английском языке скрываем русские контакты */
html[lang="en"] [data-lang-only="ru"] {
    display: none !important;
}

/* При английском языке показываем WhatsApp */
html[lang="en"] [data-lang-only="en"] {
    display: flex !important;
}

/* Подписи WhatsApp для разных размеров экрана */
.desktop-contact-label {
    display: inline;
}

.mobile-contact-label {
    display: none;
}

@media (max-width: 768px) {
    .desktop-contact-label {
        display: none;
    }

    .mobile-contact-label {
        display: inline;
    }
}


/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ ПОДВАЛА
   ============================================================ */

@media (max-width: 768px) {

    .portfolio-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        width: 100%;
        max-width: 343px;

        margin: 0 auto;
        padding: 0 0 32px;

        gap: 24px;
        box-sizing: border-box;
    }

    .footer-copy {
        width: 100%;
        margin: 0;

        text-align: left;

        font-size: 16px;
        line-height: 20px;
    }

    .footer-contacts {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        width: 100%;
        gap: 16px;
    }

    .footer-contact-btn {
        height: 50px;
        padding: 0 20px;
    }

    .footer-email-btn.is-copied {
        width: 138px;
        height: 50px;
        padding: 12px 24px;
        gap: 12px;
    }
}





/* ============================================================
   Плавная прокрутка
   ============================================================ */
html {
    scroll-behavior: smooth;
}

/* ============================================================
   КНОПКА ПРОКРУТКИ НАВЕРХ
   ============================================================ */

.button-up {
    display: none;
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 1000;

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

    width: 78px;
    height: 78px;
    padding: 0;

    background: #FFF5E0;
    opacity: 0.5;
    border: none;
    border-radius: 50%;

    cursor: pointer;
    transition: opacity 0.2s ease;
}

.button-up svg {
    display: block;
    width: 38.45px;
    height: 20.73px;
    overflow: visible;
}

.button-up svg path {
    fill: none;
    stroke: #1F1E1D;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button-up:hover {
    opacity: 0.8;
}


/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ — ЭКРАНЫ ДО 768 PX
   ============================================================ */

@media (max-width: 768px) {

    /* ========================================================
       1. ОСНОВНОЙ КОНТЕЙНЕР И НАВИГАЦИЯ
       ======================================================== */

    .portfolio-container {
        width: 343px;
        margin: 24px auto;
    }

    .main-menu {
        display: none;
    }


    /* ========================================================
       2. ГЛАВНЫЙ ЭКРАН
       ======================================================== */

    .hero {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        margin-bottom: 64px;
    }

    .hero-title img {
        width: 343px;
        height: 140px;
    }

    .hero-photo img {
        width: 343px;
        height: 227px;
        border-radius: 16px;
    }


    /* ========================================================
       3. ИНФОРМАЦИОННЫЕ КАРТОЧКИ
       ======================================================== */

    .info-cards {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 128px;
    }

    .card {
        display: flex;
        flex-direction: column;
        width: 343px;
        box-sizing: border-box;
        padding: 16px 15px;
        border-radius: 16px;
        gap: 10px;
    }

    .card h2 {
        font-size: 24px;
        margin: 0 0 14px;
    }

    .card h3 {
        font-size: 16px;
        margin-bottom: 4px;
        color: #FFF5E0;
    }

    .vector-dash {
        display: none;
    }

    .grey-text {
        color: #807E7A;
        font-size: 16px;
        font-weight: 500;
    }


    /* ========================================================
       4. ПЕРЕКЛЮЧЕНИЕ DESKTOP / MOBILE
       ======================================================== */

    .desktop-version {
        display: none !important;
    }

    .mobile-version {
        display: block !important;
    }

    .mobile-version p.grey-text {
        margin-bottom: 0;
    }


    /* ========================================================
       5. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
       ======================================================== */

    .lang-switch-mobile {
        display: flex !important;
        justify-content: center;
        gap: 12px;
        margin-bottom: 64px;
    }

    .mobile-lang-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 164px;
        height: 50px;
        box-sizing: border-box;
        padding: 0;
        flex-shrink: 0;
        background-color: #1F1E1D;
        color: #FFF5E0;
        border: none;
        border-radius: 40px;
        font-family: 'Montserrat', sans-serif;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .mobile-lang-btn.active {
        background-color: #FFD685;
        color: #1F1E1D;
    }


    /* ========================================================
       6. ОБРАЗОВАНИЕ
       ======================================================== */

    .education-card .card-item {
        display: flex;
        flex-direction: row;
        gap: 4px;
        margin-bottom: 0;
    }

    .education-card h3:nth-child(1) {
        order: 1;
        margin: 0;
        color: #FFF5E0;
        font-size: 16px;
        font-weight: 700;
    }

    .education-card .card-item .grey-text {
        order: 3;
        color: #807E7A;
        font-size: 16px;
        font-weight: 500;
    }


    /* ========================================================
       7. ОПЫТ РАБОТЫ
       ======================================================== */

    .experience-card .experience-item {
        margin-bottom: 24px;
    }

    .experience-card .experience-item:last-child {
        margin-bottom: 0;
    }

    .experience-card .experience-item h4 {
        margin: 0 0 6px;
        color: #FFF5E0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
    }

    .experience-card .experience-item p {
        margin: 0;
        color: #807E7A;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
    }


    /* ========================================================
       8. КОНТАКТЫ
       ======================================================== */

    .contacts-card {
        gap: 16px;
    }

    .contacts-card .card-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 312px;
        height: 20px;
        margin-bottom: 0;
        gap: 16px;
    }

    .contacts-card .card-item .grey-text {
        width: auto;
        color: #807E7A;
        font-size: 16px;
        font-weight: 500;
    }

    .contacts-card .card-item a {
        color: #FFF5E0;
        font-size: 16px;
        font-weight: 600;
        text-decoration: underline;
    }


    /* ========================================================
       9. ОБЩИЕ СТИЛИ ПРОЕКТОВ
       ======================================================== */

    .project-card {
        width: 100%;
        max-width: 343px;
        margin: 0 auto 128px;
        gap: 64px;
    }

    /* Скрытый блок: корректируем отрицательный отступ для мобильной версии */
    .project-hidden-content:not(.is-visible) {
        margin-top: -64px;
    }

    /* Единый отступ между шапкой и содержимым всех проектов */
    .project-card > .project-top,
    .project-card > .project-main {
        margin-bottom: 0;
    }

    .project-card:last-child {
        margin-bottom: 0;
    }

    /* Шапка проекта */

    .project-top {
        justify-content: flex-start;
    }

    .project-tags {
        display: none;
    }

    .project-category {
        width: 164px;
        height: 50px;
        box-sizing: border-box;
        padding: 12px 24px;
        font-size: 16px;
        line-height: 20px;
    }

    /* Основной блок */

    .project-main {
        flex-direction: column;
        gap: 24px;
    }

    .project-cover {
        width: 100%;
    }

    .project-cover img {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }

    /* Заголовки и текст */

    .project-title {
        margin: 0 0 24px;
        font-size: 24px;
        line-height: 1.25;
    }

    .project-text p {
        margin: 0 0 24px;
        font-size: 16px;
        line-height: 1.5;
    }

    .project-text p:last-child {
        margin-bottom: 0;
    }

    /* Разделители */

    .project-delimiter {
        width: 100%;
        max-width: 343px;
        height: 3px;
    }

    /* Галереи */

    .project-gallery {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .project-gallery img {
        width: 100%;
        max-width: 343px;
        height: 243px;
        border-radius: 16px;
    }

    /* Кнопки */

    .project-expand-btn,
    .project-collapse-btn {
        width: 100%;
        max-width: 343px;
        height: 50px;
        padding: 12px 24px;
        font-size: 16px;
        line-height: 20px;
    }

    /* Расстояния внутри раскрытых проектов */

    .project-hidden-content {
        gap: 64px;
    }


    /* ========================================================
       10. ПРОЕКТ 1
       ======================================================== */

    .project-1 .project-cover img {
        width: 100%;
        max-width: 343px;
        height: 243px;
        border-radius: 16px;

    }
    .project-1 > .project-main {
        flex-direction: column-reverse;
        gap: 64px;
    }

    .project-1 .project-main .project-title {
        margin-bottom: 24px;
    }

    .project-1 .project-main .project-text p {
        margin-bottom: 24px;
    }

    .project-1 .project-main .project-text p:last-child {
        margin-bottom: 0;
    }


    /* ========================================================
       11. ПРОЕКТ 2
       ======================================================== */

    /* Сначала текст, затем главное фото */

    .project-2 .project-main {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        gap: 56px;
    }

    .project-2 .project-cover {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    
    .project-2 .project-cover > picture {
        display: block;
        width: 100%;
        max-width: 343px;
        height: 243px;
        flex: 0 0 243px;
        overflow: hidden;
        border-radius: 16px;
    }

    .project-2 .project-cover > picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 16px;
    }


    /* Скрываем два дополнительных фото обложки */

    .project-2 .project-cover-bottom {
        display: none;
    }

    /* Переносы строк для разных версий */
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: inline;
    }


    
    /* Дополнительная галерея */

    .project-2 .project-2-gallery {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 343px;
        gap: 16px;
    }

    .project-2 .project-2-gallery .gallery-column-full,
    .project-2 .project-2-gallery .gallery-column-half {
        display: contents;
    }

    /* Обычные фотографии */

    .project-2 .project-2-gallery picture {
        display: block;
        width: 100%;
        max-width: 343px;
        height: 243px;
        flex: 0 0 243px;
        overflow: hidden;
        border-radius: 16px;
    }

    .project-2 .project-2-gallery picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 16px;
    }

    /* Первое большое фото */

    .project-2 .project-2-gallery .gallery-column-full picture {
        height: 447px;
        flex: 0 0 447px;
    }

    /* Контейнер текста и галереи лендинга */

    .project-2 .project-2-details {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 64px;
    }

    /* Текстовое описание */

    .project-2 .project-2-details-text {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 343px;
        gap: 24px;
    }

    .project-2 .project-2-details-text p {
        margin: 0;
        font-size: 16px;
        line-height: 24px;
    }

    /* Лендинг и экраны приложения */

    .project-2 .project-2-app-gallery {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin-top: 0;
    }

    /* Изображение ноутбука */

    .project-2 .project-2-app-gallery > picture {
        display: block;
        width: 100%;
        max-width: 343px;
        height: 197px;
        flex: 0 0 197px;
        overflow: hidden;
    }

    .project-2 .project-2-app-gallery > picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* Два экрана мобильного приложения */

    .project-2 .project-2-app-gallery-right {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        gap: 15px;
    }

    .project-2 .project-2-app-gallery-right > picture {
        display: block;
        width: calc((100% - 15px) / 2);
        max-width: 164px;
        height: 330px;
        flex: 0 0 calc((100% - 15px) / 2);
        overflow: hidden;
    }

    .project-2 .project-2-app-gallery-right > picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }



    /* ========================================================
    ПРОЕКТ 3 — WI-FI 7
    ======================================================== */

    .project-3 {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin-bottom: 128px;
    }

    /* Основной блок: сначала текст, затем главное фото */
    .project-3 .project-main {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        gap: 64px;
        margin-bottom: 0;
    }

    /* Главное фото */
    .project-3 .project-cover {
        width: 100%;
        flex-shrink: 0;
    }

    .project-3 .project-cover img {
        display: block;
        width: 100%;
        max-width: 343px;
        height: 243px;
        object-fit: cover;
        border-radius: 16px;
    }

    /* Заголовок и описание основного блока */
    .project-3 .project-main .project-title {
        margin: 0 0 24px;
        font-size: 24px;
        line-height: 1.25;
    }

    .project-3 .project-main .project-text p {
        margin: 0 0 24px;
        font-size: 16px;
        line-height: 24px;
    }

    .project-3 .project-main .project-text p:last-child {
        margin-bottom: 0;
    }

    /* Кнопка раскрытия */
    .project-3 .project-expand-btn {
        width: 100%;
        max-width: 343px;
    }


    /* ========================================================
    РАСКРЫТЫЙ БЛОК — ТРИ КОНЦЕПЦИИ
    ======================================================== */

    .project-3 .project-hidden-content.is-visible {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 64px;
    }

    /* Разделитель */
    .project-3 .project-hidden-content > .project-delimiter {
        order: 1;
        width: 100%;
        max-width: 343px;
        margin: 0;
    }

    
    /* Убираем отдельную сетку галереи */

    .project-3 .project-hidden-content .project-gallery {
        display: contents;
    }

    /* Порядок изображений.
       Важно: flex-элементы здесь — picture, а не img. */

    .project-3 .project-hidden-content .project-gallery > picture:nth-of-type(1) {
        order: 2;
    }

    .project-3 .project-hidden-content .project-gallery > picture:nth-of-type(2) {
        order: 4;
    }

    .project-3 .project-hidden-content .project-gallery > picture:nth-of-type(3) {
        order: 6;
    }

    /* Общие параметры изображений */

    .project-3 .project-hidden-content .project-gallery > picture {
        display: block;
        width: 100%;
        max-width: 343px;
        height: 243px;
        overflow: hidden;
        border-radius: 16px;
    }

    .project-3 .project-hidden-content .project-gallery > picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 16px;
    }

    /* Порядок текстовых блоков */

    .project-3 .project-hidden-content > .project-content:nth-child(3) {
        order: 3;
    }

    .project-3 .project-hidden-content > .project-content:nth-child(4) {
        order: 5;
    }

    .project-3 .project-hidden-content > .project-content:nth-child(5) {
        order: 7;
    }

    /* Заголовки концепций */

    .project-3 .project-hidden-content > .project-content {
    margin-top: -40px;
    }

    .project-3 .project-hidden-content > .project-content .project-title {
        display: block;
        min-height: 0;
        margin: 0 0 24px;
        font-size: 24px;
        line-height: 1.15;
    }

    /* Описания концепций */

    .project-3 .project-hidden-content > .project-content .project-text p {
        margin: 0;
        font-size: 16px;
        line-height: 24px;
    }

    /* Кнопка сворачивания */

    .project-3 .project-collapse-btn {
        order: 8;
        width: 100%;
        max-width: 343px;
        margin-top: 0;
    }

    .project-3 .project-title-no-br br {
        display: none;
    }



    /* ========================================================
       13. ПРОЕКТ 4 — МОБИЛЬНАЯ ВЕРСИЯ
       ======================================================== */

    /* Основной экран: сначала текст, затем обложка */

    .project-4 .project-main {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        gap: 64px;
    }

    .project-4 .project-main > .project-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 24px;
    }

    .project-4 .project-main > .project-content > .project-title {
        width: 100%;
        height: auto;
        margin: 0;
        font-size: 24px;
        line-height: 1.2;
    }

    .project-4 .project-main > .project-content > .project-text {
        width: 100%;
        height: auto;
    }

    .project-4 .project-main > .project-content > .project-text p {
        margin: 0 0 24px;
        font-size: 16px;
        line-height: 24px;
    }

    .project-4 .project-main > .project-content > .project-text p:last-child {
        margin-bottom: 0;
    }

    /* Основное изображение */

    .project-4 .project-cover {
        position: relative;
        width: 100%;
        max-width: 343px;
        height: 243px;
        overflow: hidden;
        border-radius: 16px;
    }

    .project-4 .project-cover > picture {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    .project-4 .project-cover > picture img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
        transform: none;
        left: auto;
        top: auto;
        border-radius: 16px;
    }

    /* Кнопка раскрытия */

    .project-4 > .project-expand-btn {
        width: 100%;
        max-width: 343px;
        margin: 0;
    }


    /* ===== РАСКРЫТЫЙ БЛОК ===== */

    .project-4 .project-hidden-content.is-visible {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 64px;
    }

    /* Разделители */

    .project-4 .project-hidden-content > .project-delimiter {
        width: 100%;
        max-width: 343px;
        margin: 0;
    }


    /* ===== GOODLINE ГОРОД ===== */

    .project-4-section-app {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 64px;
    }

    .project-4-section-app > .project-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 24px;
    }

    .project-4-section-app .project-title {
        width: 100%;
        margin: 0;
        font-size: 24px;
        line-height: 1.2;
    }

    .project-4-section-app .project-text {
        width: 100%;
    }

    .project-4-section-app .project-text p {
        margin: 0 0 24px;
        font-size: 16px;
        line-height: 24px;
    }

    .project-4-section-app .project-text p:last-child {
        margin-bottom: 0;
    }

    /* Три изображения друг под другом */

    .project-4-section-app .project-gallery {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 16px;
    }

    .project-4-section-app .project-gallery > picture {
        display: block;
        width: 100%;
        max-width: 343px;
        height: auto;
        overflow: hidden;
    }

    .project-4-section-app .project-gallery > picture img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 343px;
        object-fit: contain;
        border-radius: 16px;
    }


    /* ===== АДАПТАЦИЯ ДЛЯ ВЕБ-ПЛАТФОРМ ===== */

    .project-4-web-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 24px;
    }

    .project-4-web-text .project-title {
        width: 100%;
        margin: 0;
        font-size: 24px;
        line-height: 1.2;
    }

    .project-4-web-text .project-text {
        width: 100%;
    }

    .project-4-web-text .project-text p {
        margin: 0 0 24px;
        font-size: 16px;
        line-height: 24px;
    }

    .project-4-web-text .project-text p:last-child {
        margin-bottom: 0;
    }

    /* Три изображения друг под другом */

    .project-4-web-gallery {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        height: auto;
        gap: 16px;
    }

    .project-4-web-gallery > picture {
        display: block;
        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 0;
        border-radius: 16px;
        overflow: hidden;
    }

    .project-4-web-gallery > picture img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 16px;
    }


    /* ===== ЗАСТАВКА ДЛЯ ПОДКАСТА ===== */

    .project-4-final-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }

    .project-4-final-text > .project-title {
        width: 100%;
        margin: 0 0 24px;
        font-size: 24px;
        line-height: 1.2;
    }

    .project-4-final-text > .project-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0 0 24px;
    }

    .project-4-final-text > .project-text p {
        font-size: 16px;
        line-height: 24px;
    }

    .project-4-final-text > .project-responsibility-title {
        margin: 0 0 24px;
        font-size: 18px;
        line-height: 24px;
    }

    .project-4-final-text > .project-4-responsibility-list {
        gap: 16px;
    }
    /* Проект 4 — список зоны ответственности на мобильных */

    .project-4-final-text > .project-4-responsibility-list {
        gap: 0;
    }

    .project-4-final-text .project-4-responsibility-item {
        line-height: 24px;
    }

    .project-4-final-text .project-4-responsibility-item {
        font-size: 16px;
        line-height: 24px;
    }

    /* Видео */

    .project-4 .project-4-video {
        position: relative;
        width: 100%;
        max-width: 343px;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 16px;
    }

    .project-4 .project-4-video-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }

    .project-4 .project-4-video-play {
        width: 64px;
        height: 64px;
    }

    .project-4 .project-4-video-play svg {
        width: 24px;
        height: 26px;
        margin-left: 3px;
    }

    /* Кнопка сворачивания */

    .project-4 .project-collapse-btn {
        width: 100%;
        max-width: 343px;
        margin: 0;
    }


    /* ========================================================
    ПОЛИГРАФИЯ — МОБИЛЬНАЯ ВЕРСИЯ
    ======================================================== */

    /* Общий контейнер */

    .project-card.printing {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0 auto 128px;
    }

    /* Первая сетка: четыре работы друг под другом */

    .printing-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 64px;
    }

    /* Общая карточка работы */

    .printing-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
    }

    /* Изображения одиночных работ */

    .printing-cover {
        display: block;
        width: 100%;
        max-width: 343px;
        height: auto;
        overflow: hidden;
        border-radius: 16px;
        flex: none;
    }

    .printing-cover picture {
        display: block;
        width: 100%;
        height: auto;
    }

    .printing-cover img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 16px;
    }

    /* Исправление ширины текста широких работ */

    .printing .printing-item-wide > .printing-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .printing .printing-item-wide .printing-title,
    .printing .printing-item-wide .printing-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Текстовая часть */

    .printing-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 24px;
        margin: 0;
        padding: 0;
    }

    /* Заголовок */

    .printing-title {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.2;
    }

    /* Описание */

    .printing-text {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .printing-text p {
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 24px;
    }

    /* Широкие работы */

    .printing-item-wide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        gap: 24px;
    }

    /* Галереи из двух изображений */

    .printing-gallery {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 16px;
        margin: 0;
        padding: 0;
    }

    .printing-gallery picture {
        display: block;
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: 16px;
    }

    .printing-gallery img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 16px;
    }

    /* Кнопки раскрытия и сворачивания */

    .printing > .project-expand-btn,
    .printing .project-collapse-btn {
        width: 100%;
        max-width: 343px;
        height: 50px;
        font-size: 16px;
        line-height: 20px;
    }

    /* Скрытая сетка: также превращаем в вертикальный список */

    .printing .project-hidden-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 64px;
        grid-template-columns: none;
        padding: 0;
        box-sizing: border-box;
    }

    /* Кнопка сворачивания */

    .printing .project-collapse-btn {
        align-self: flex-start;
        margin: 0;
    }



    /* ========================================================
    DIGITAL — МОБИЛЬНАЯ ВЕРСИЯ
    ======================================================== */

    /* Общий контейнер */

    .project-card.digital {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0 auto 128px;
    }

    /* Основная сетка */

    .digital-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 64px;
        margin: 0;
        padding: 0;
    }

    /* Карточки работ */

    .digital-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
    }

    /* Широкая карточка первой работы */

    .digital-item-wide {
        width: 100%;
        max-width: 343px;
    }

    /* Одиночные изображения */

    .digital-cover {
        display: block;
        width: 100%;
        max-width: 343px;
        height: auto;
        overflow: hidden;
        border-radius: 16px;
        flex: none;
    }

    .digital-cover picture {
        display: block;
        width: 100%;
        height: auto;
    }

    .digital-cover img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 16px;
    }

    /* Галерея первой работы */

    .digital-gallery {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 16px;
        margin: 0;
        padding: 0;
    }

    .digital-gallery picture {
        display: block;
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: 16px;
    }

    .digital-gallery img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 16px;
    }

    /* Текстовая часть */

    .digital-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Заголовки */

    .digital-title {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.2;
        box-sizing: border-box;
    }

    /* Описание */

    .digital-text {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .digital-text p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 24px;
        box-sizing: border-box;
    }

    /* Скрытые работы */

    .digital .project-hidden-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        padding: 0;
        box-sizing: border-box;
    }

    /* Сетка внутри скрытого блока */

    .digital .project-hidden-content .digital-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
    }

    /* Кнопки */

    .digital > .project-expand-btn,
    .digital .project-collapse-btn {
        width: 100%;
        max-width: 343px;
        height: 50px;
        font-size: 16px;
        line-height: 20px;
    }

    /* Убираем принудительный перенос в заголовке */
    .digital-hidden-content .digital-item:nth-child(2) .digital-title br {
        display: none;
    }


    /* ========================================================
    3D-ГРАФИКА — МОБИЛЬНАЯ ВЕРСИЯ
    ======================================================== */

    /* Общий контейнер */

    .project-card.three-d {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0 auto 128px;
    }

    /* Основная сетка */

    .three-d-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0;
        padding: 0;
    }

    /* Карточки работ */

    .three-d-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
    }

    /* Широкие карточки */

    .three-d-item-wide {
        width: 100%;
        max-width: 343px;
    }

    /* Изображения */

    .three-d-cover {
        display: block;
        width: 100%;
        max-width: 343px;
        height: auto;
        overflow: hidden;
        border-radius: 16px;
        flex: none;
    }

    .three-d-cover picture {
        display: block;
        width: 100%;
        height: auto;
    }

    .three-d-cover img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 16px;
    }

    /* Текстовая часть */

    .three-d-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Заголовки */

    .three-d-title {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.2;
        box-sizing: border-box;
    }

    /* Описание */

    .three-d-text {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .three-d-text p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 24px;
        box-sizing: border-box;
    }

    /* Скрытые работы */

    .three-d .project-hidden-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        padding: 0;
        box-sizing: border-box;
    }

    /* Сетка внутри скрытого блока */

    .three-d .project-hidden-content .three-d-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
    }

    /* Кнопки раскрытия и сворачивания */

    .three-d > .project-expand-btn,
    .three-d .project-collapse-btn {
        width: 100%;
        max-width: 343px;
        height: 50px;
        font-size: 16px;
        line-height: 20px;
    }

    /* Исправляем высоту широких изображений 3D на мобильных */

    .three-d .three-d-grid > .three-d-item-wide:first-child .three-d-cover,
    .three-d .three-d-hidden-content .three-d-item-wide:first-child .three-d-cover,
    .three-d .three-d-hidden-content .three-d-item-wide:last-child .three-d-cover {
        height: auto;
    }



    /* ========================================================
    MOTION DESIGN — МОБИЛЬНАЯ ВЕРСИЯ
    ======================================================== */

    /* Общий контейнер */

    .project-card.motion-design {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0 auto 128px;
        box-sizing: border-box;
    }

    /* Плашка с названием категории */

    .motion-design > .project-top .project-category {
        width: 200px;
        min-width: 200px;
        height: 50px;
        padding: 12px 24px;
        font-size: 16px;
        line-height: 20px;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Сетка работ — одна колонка */

    .motion-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Карточка работы */

    .motion-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Видеопревью */

    .motion-cover {
        position: relative;
        width: 100%;
        max-width: 343px;
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 16px;
        flex: none;
        background: #1F1E1D;
    }

    .motion-cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

    /* Кнопка воспроизведения */

    .motion-play {
        width: 64px;
        height: 64px;
    }

    .motion-play svg {
        width: 24px;
        height: 26px;
        margin-left: 3px;
    }

    /* Встроенный видеоплеер */

    .motion-cover iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Текстовая часть */

    .motion-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Заголовок */

    .motion-title {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.2;
        box-sizing: border-box;
    }

    /* Описание */

    .motion-text {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .motion-text p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 24px;
        box-sizing: border-box;
    }

    /* Скрытые работы */

    .motion-design .project-hidden-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        padding: 0;
        box-sizing: border-box;
    }

    /* Сетка внутри раскрытого блока */

    .motion-design .project-hidden-content .motion-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
    }

    /* Кнопки раскрытия и сворачивания */

    .motion-design > .project-expand-btn,
    .motion-design .project-collapse-btn {
        width: 100%;
        max-width: 343px;
        height: 50px;
        margin: 0;
        font-size: 16px;
        line-height: 20px;
    }

    /* Убираем принудительные переносы в заголовках */
    .motion-design .motion-title br {
        display: none;
    }

    /* ========================================================
    ПОСЛЕДНЯЯ РАБОТА — АДАПТАЦИЯ ШИРОКОЙ КАРТОЧКИ
    ======================================================== */

    /* Контейнер карточки */
    .motion-design .motion-grid > .motion-item-wide {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 343px;
        min-width: 0;
    }

    /* Видео — сохраняем пропорции 16:9 */
    .motion-design .motion-grid > .motion-item-wide > .motion-cover {
        width: 100%;
        max-width: 343px;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Текстовая часть */
    .motion-design .motion-grid > .motion-item-wide > .motion-content {
        width: 100%;
        max-width: 343px;
        min-width: 0;
    }

    /* Заголовок и описание */
    .motion-design .motion-grid > .motion-item-wide .motion-title,
    .motion-design .motion-grid > .motion-item-wide .motion-text,
    .motion-design .motion-grid > .motion-item-wide .motion-text p {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }



    /* ========================================================
    СОЦСЕТИ — МОБИЛЬНАЯ ВЕРСИЯ
    ======================================================== */

    /* Общий контейнер */

    .project-card.social-media {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0 auto 128px;
        box-sizing: border-box;
    }

    /* Категория */

    .social-media > .project-top .project-category {
        width: 164px;
        min-width: 164px;
        height: 50px;
        white-space: nowrap;
    }

    /* Все работы */

    .social-project,
    .social-project-wide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Исходная сетка одиночных работ */

    .social-project-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Одиночные фотографии */

    .social-media .social-single-cover {
        display: block;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        min-height: 0;
        height: auto;
        aspect-ratio: 275 / 343;
        overflow: hidden;
        border-radius: 16px;
        flex: none;
        box-sizing: border-box;
    }

    .social-media .social-single-cover picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .social-media .social-single-cover picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }

    /* ========================================================
    СЛАЙДЕР
    ======================================================== */

    .social-slider {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        max-width: 343px;
        height: auto;
        padding: 0;
        box-sizing: border-box;
    }

    /* Окно просмотра */

    .social-slider-viewport {
        display: block;
        order: 0;
        width: 275px;
        max-width: 275px;
        height: 343px;
        flex: 0 0 343px;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    /* Лента */

    .social-slider-track {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 24px;
        width: max-content;
        height: 343px;
        transition: transform 0.45s ease;
    }

    /* Карточки слайдера */

    .social-slider-track picture {
        display: block;
        width: 275px;
        height: 343px;
        flex: 0 0 275px;
        overflow: hidden;
        border-radius: 16px;
    }

    .social-slider-track picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }

    /* Стрелки поверх карточки */

    .social-arrow {
        position: absolute;
        top: 147.5px;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #1F1E1D;
        z-index: 3;
    }

    .social-arrow-left {
        left: 0;
        right: auto;
    }

    .social-arrow-right {
        left: auto;
        right: 0;
    }

    .social-arrow svg {
        display: block;
        width: 22.35px;
        height: 14.33px;
    }

    /* На мобильных неактивные стрелки полностью скрываются */

    .social-arrow:disabled {
        display: none;
    }
    
    /* ========================================================
    ТОЧКИ ПЕРЕКЛЮЧЕНИЯ
    ======================================================== */

    .social-slider-dots {
        position: static;
        order: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: auto;
        height: 10px;
        margin: 0 auto;
        padding: 0;
    }

    .social-slider-dot {
        display: block;
        flex: 0 0 10px;
        width: 10px;
        height: 10px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 214, 133, 0.3);
        cursor: pointer;
    }

    .social-slider-dot.is-active {
        background: #FFD685;
    }

    /* ========================================================
    ТЕКСТ
    ======================================================== */

    .social-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .social-title {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.2;
        box-sizing: border-box;
    }

    .social-text {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .social-text p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 24px;
        box-sizing: border-box;
    }

    /* Убираем принудительные переносы в заголовках */

    .social-title br {
        display: none;
    }

    /* ========================================================
    РАСКРЫТИЕ ОСТАЛЬНЫХ РАБОТ
    ======================================================== */

    .social-media .project-hidden-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        padding: 0;
        box-sizing: border-box;
    }

    .social-media > .project-expand-btn,
    .social-media .project-collapse-btn {
        width: 100%;
        max-width: 343px;
        height: 50px;
        margin: 0;
        font-size: 16px;
        line-height: 20px;
    }



    /* ========================================================
       ЛЕНДИНГИ — МОБИЛЬНАЯ ВЕРСИЯ
       ======================================================== */

    /* Общий контейнер */

    .project-card.landing-projects {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0 auto 128px;
        box-sizing: border-box;
    }

    /* Шапка проекта */

    .landing-projects > .project-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .landing-projects > .project-top .project-category {
        width: 164px;
        min-width: 164px;
        height: 50px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    /* ========================================================
       ОДИН ПРОЕКТ
       ======================================================== */

    .landing-project {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* ========================================================
       ИЗОБРАЖЕНИЯ ЛЕНДИНГОВ
       ======================================================== */

    /* Область просмотра */

    .landing-image-viewport {
        display: block;
        position: relative;
        width: 100%;
        max-width: 343px;
        height: var(--mobile-preview-height, 343px);
        max-height: var(--mobile-preview-height, 343px);
        overflow: hidden;
        border-radius: 16px;
        box-sizing: border-box;
        transition: max-height 0.7s ease;
    }

    /* Полная версия лендинга */

    .landing-full-picture {
        display: block;
        width: 100%;
        max-width: 343px;
        margin: 0;
        padding: 0;
    }

    .landing-full-image {
        display: block;
        position: relative;
        top: 0;
        width: 100%;
        max-width: 343px;
        height: auto;
        object-fit: contain;
        object-position: top;
        border-radius: 16px;
    }

    /* Раскрытое состояние */

    .landing-projects .landing-project .landing-image-viewport.is-expanded {
        height: auto;
        max-height: 50000px;
    }

    
    /* ========================================================
    ИНДИВИДУАЛЬНЫЕ ПАРАМЕТРЫ МОБИЛЬНЫХ ПРЕВЬЮ
    ======================================================== */

    /* Проект 1 — ПВЗ */

    .landing-projects > .landing-project:nth-of-type(2) {
        --mobile-preview-height: 343px;
    }

    /* Проект 2 — Каникулы с Goodline */

    .landing-projects > .landing-project:nth-of-type(3) {
        --mobile-preview-height: 300px;
    }

    /* Проект 3 — Wi-Fi авторизация */

    .landing-hidden-projects > .landing-project:nth-of-type(1) {
        --mobile-preview-height: 399px;
    }

    /* Проект 4 — Благоустройство дома */

    .landing-hidden-projects > .landing-project:nth-of-type(2) {
        --mobile-preview-height: 384px;
    }

    /* Проект 5 — Переход на 1С */

    .landing-hidden-projects > .landing-project:nth-of-type(3) {
        --mobile-preview-height: 372px;
    }


    /* ========================================================
       ТЕКСТОВАЯ ЧАСТЬ
       ======================================================== */

    .landing-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 343px;
        min-width: 0;
        gap: 24px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .landing-title {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.2;
        box-sizing: border-box;
    }

    .landing-text {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .landing-text p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 24px;
        box-sizing: border-box;
    }

    /* ========================================================
       КНОПКА ПРОСМОТРА ПОЛНОГО ЛЕНДИНГА
       ======================================================== */

    .landing-full-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 343px;
        height: 50px;
        padding: 12px 16px;
        box-sizing: border-box;
        border: 2px solid #FFD685;
        border-radius: 36px;
        background: transparent;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #FFD685;
        cursor: pointer;
        flex: none;
    }

    /* ========================================================
       СКРЫТЫЕ ПРОЕКТЫ 3–5
       ======================================================== */

    .landing-hidden-projects {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 343px;
        gap: 64px;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        box-sizing: border-box;
        transition:
            max-height 0.7s ease,
            opacity 0.5s ease;
    }

    /* Раскрытое состояние */

    .landing-hidden-projects.is-visible {
        max-height: 50000px;
        opacity: 1;
    }

    /* Компенсация расстояния, пока проекты скрыты */

    .landing-hidden-projects:not(.is-visible) {
        margin-top: -64px;
    }

    /* ========================================================
       КНОПКИ РАСКРЫТИЯ ОСТАЛЬНЫХ ПРОЕКТОВ
       ======================================================== */

    .landing-expand-projects-btn,
    .landing-collapse-projects-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 343px;
        height: 50px;
        margin: 0;
        padding: 12px 16px;
        box-sizing: border-box;
        border: none;
        border-radius: 36px;
        background: #FFD685;
        color: #1F1E1D;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        cursor: pointer;
    }

    /* Кнопка сворачивания появляется только после раскрытия */

    .landing-collapse-projects-btn {
        display: none;
    }

    .landing-hidden-projects.is-visible .landing-collapse-projects-btn {
        display: flex;
    }


    /* На мобильных отключаем курсор и кнопку прокрутки наверх */
    .button-up {
    display: none !important;
}

}