/**
 * Home Page (Index)
 * Built from existing components (project-card, image-card, tg-orbit, button)
 */

.home-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: -40px;
}

/* Hero background shader */
.home-hero__bg {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    will-change: transform;
    contain: layout style paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Light theme (Calm): hide hero shader background and restore title to original position */
[data-theme="calm"] .home-hero__bg {
    display: none;
}

[data-theme="calm"] .home-hero__title {
    margin-top: 80px;
}

.home-hero__bg-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.home-hero__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    mix-blend-mode: screen;
}

.home-hero__bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: screen;
}

.home-hero__bg-cover {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 55%,
        rgba(16, 15, 16, 0.25) 80%,
        var(--color-background, #100f10) 95%
    );
    pointer-events: none;
}

.home-hero__container {
    position: relative;
    padding-top: 80px;
    padding-bottom: 24px;
    min-height: 920px; /* keeps hero mass similar to design */
    z-index: 1;
    pointer-events: none;
}

.home-hero__container > * {
    pointer-events: auto;
}

/* Планшет и десктоп: аватар во второй колонке, как было */
.home-hero__profile {
    grid-column: 2 / span 1;
}

.image-card--avatar .image-card__image {
    padding: 0;
}

.image-card--avatar .image-card__image {
    position: relative;
    overflow: hidden;
}

.image-card--avatar .image-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Останавливаем GIF анимацию по умолчанию */
    animation-play-state: paused;
}

/* При наведении запускаем анимацию через JavaScript */
.image-card--avatar:hover .image-card__image img {
    /* JavaScript будет управлять воспроизведением */
}

.home-hero__title {
    grid-column: 1 / -1;
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
    position: relative;
}

.home-hero__title-main {
    margin: 0;
    grid-column: 1 / -1;
    display: contents;
    font-family: var(--font-display);
    font-size: var(--font-size-display-1-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-1-desktop);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--color-content);
}

.home-hero__title-line {
    display: block;
}

.home-hero__title-line--product {
    /* PRODUCT начинается с 3-й колонки */
    grid-column: 3 / span 10;
    text-align: left;
}

.home-hero__title-line--brand {
    /* & BRAND начинается с 6-й колонки */
    grid-column: 6 / span 7;
    text-align: left;
}

.home-hero__title-line--designer {
    /* DESIGNER начинается с 4-й колонки */
    grid-column: 4 / span 9;
    text-align: left;
}

.home-hero__title-main em {
    font-style: italic;
    text-transform: none;
}

.home-hero__intro {
    grid-column: 7 / span 6;
    margin-top: 240px; /* было 40px, добавлено 200px */
}

.home-hero__intro-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body-1-desktop);
    font-weight: 300;
    line-height: var(--line-height-body-1-desktop);
    letter-spacing: -0.02em;
    color: var(--color-content);
}

.home-hero__tg {
    grid-column: 1 / span 1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Выравниваем по вертикали со словом "DESIGNER" - третья строка заголовка */
    align-self: start;
}

.home-section-title {
    grid-column: 7 / span 6;
    font-family: var(--font-display);
    font-size: var(--font-size-display-3-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-3-desktop);
    color: var(--color-content);
    text-align: left;
    margin: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: -0.02em;
}

.home-projects {
    padding-top: 80px;
    padding-bottom: 80px;
}

.home-projects .home-section-title {
    margin-top: 300px;
}

/* Наследуем колонки контейнера (subgrid) — одна сетка, те же ширины колонок что в Hero/Services */
.home-projects__grid {
    grid-column: 1 / -1;
    margin-top: 40px;
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--grid-gap);
    align-items: start;
}

.home-projects__item--branding .project-card {
    width: 100%;
    max-width: 100%;
}

.home-projects__item--branding .project-card__image {
    aspect-ratio: 1 / 1;
    height: auto;
}

.home-projects__item--img .image-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 0;
}

/* Desktop only (1025px+): планшет — отдельный блок ниже */
@media (min-width: 1025px) {
    .home-hero__title {
        margin-top: 80px;
    }
    /* Базовые размеры колонок - выравнивание по сетке */
    /* Карточки проекта занимают 4 колонки */
    .home-projects__item--branding { 
        grid-column: span 4; 
    }
    
    /* Карточки с картинками занимают 1 колонку */
    .home-projects__item--img { 
        grid-column: span 1; 
    }
    
    /* Высокая вертикальная карточка */
    .home-projects__item--tall .branding-card__image {
        aspect-ratio: 1 / 1;
        height: auto;
    }
    
    /* Первая image-card в 3-й колонке на уровне с текстом intro */
    .home-projects__item--first-img {
        grid-column: 3 / span 1;
        margin-top: -620px; /* Поднята относительно обычной сетки */
        position: relative;
        z-index: 10; /* Убеждаемся, что карточка видна */
    }

    /* Work-card под первой image-card: 1-я колонка, 4 колонки шириной, на 200px ниже */
    .home-projects__item--under-first {
        grid-column: 1 / span 4;
        margin-top: -420px; /* На 200px ниже, чем image-card (-620px + 200px) */
        position: relative;
        z-index: 5;
    }

    /* Вторая project-card: 9–12 колонка, на 200px ниже первой project-card (и на 400px ниже image-card) */
    .home-projects__item--under-first-right {
        grid-column: 9 / span 4;
        margin-top: -220px; /* -420px + 200px = еще на 200px ниже первой project-card */
        position: relative;
        z-index: 5;
    }

    /* Третья project-card: 4–7 колонка, на 200px ниже второй project-card */
    .home-projects__item--under-first-center {
        grid-column: 4 / span 4;
        margin-top: -20px; /* -220px + 200px = еще на 200px ниже второй project-card */
        position: relative;
        z-index: 5;
    }

    /* Дополнительная image-card на уровне середины третьей project-card, со 2-й колонки */
    .home-projects__item--mid-third-img {
        grid-column: 2 / span 1;
        margin-top: -230px; /* поднята на 300px выше (было 70px, теперь -230px) */
        position: relative;
        z-index: 6;
    }

    /* Image-card на уровне низа последней image-card, в 11-й колонке */
    .home-projects__item--bottom-img {
        grid-column: 11 / span 1;
        margin-top: -157px; /* поднята на 50px выше (было -107px, теперь -157px) */
        position: relative;
        z-index: 6;
    }

    /* Work-card на 100px ниже последней image-card, начиная с 7-й колонки */
    .home-projects__item--below-bottom-img {
        grid-column: 7 / span 4;
        margin-top: 43px; /* опущена еще на 50px ниже (было -7px, теперь 43px) */
        position: relative;
        z-index: 5;
    }

    /* Image-card на уровне середины последней project-card, в 4-й колонке */
    .home-projects__item--mid-last-branding {
        grid-column: 4 / span 1;
        margin-top: -249px; /* поднята еще на 150px выше (было -99px, теперь -249px) */
        position: relative;
        z-index: 6;
    }

    /* Project-card на 300px ниже последней project-card, начиная с первой колонки */
    .home-projects__item--below-last-branding {
        grid-column: 1 / span 4;
        margin-top: 43px; /* поднята на 300px выше (было 343px, теперь 43px) */
        position: relative;
        z-index: 5;
    }

    /* Image-card в 6-й колонке */
    .home-projects__item--col-6 {
        grid-column: 6 / span 1;
        margin-top: 243px; /* опущена еще на 100px ниже (было 143px, теперь 243px) */
        position: relative;
        z-index: 6;
    }

    /* Work-card начиная с 9-й колонки */
    .home-projects__item--col-9 {
        grid-column: 9 / span 4;
        margin-top: 243px; /* опущена на 200px ниже (было 43px, теперь 243px) */
        position: relative;
        z-index: 5;
    }

    .home-projects__item--img .image-card__image {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    /* Legacy mosaic (index.php) */
    .home-projects__item--w1 { grid-column: 1 / span 4; }
    .home-projects__item--w2 { grid-column: 5 / span 4; margin-top: 280px; }
    .home-projects__item--w3 { grid-column: 9 / span 4; margin-top: 0; }
    .home-projects__item--w4 { grid-column: 1 / span 4; margin-top: 200px; }
    .home-projects__item--w5 { grid-column: 5 / span 4; margin-top: 320px; }
    .home-projects__item--w6 { grid-column: 9 / span 4; margin-top: 220px; }
    .home-projects__item--i1 { grid-column: 2 / span 1; margin-top: 540px; }
    .home-projects__item--i2 { grid-column: 8 / span 1; margin-top: 80px; }
    .home-projects__item--i3 { grid-column: 11 / span 1; margin-top: 420px; }
    .home-projects__item--i4 { grid-column: 1 / span 1; margin-top: 820px; }
    .home-projects__item--i5 { grid-column: 6 / span 1; margin-top: 980px; }
    .home-projects__item--i6 { grid-column: 10 / span 1; margin-top: 1040px; }
}

.home-services {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 120px; /* было 200px, подняли секцию на 80px выше */
    position: relative; /* для абсолютного позиционирования картинки */
}

/* Картинка слева (колонки 2-5), скрыта по умолчанию, абсолютно позиционирована чтобы не влиять на layout */
.home-services__image-wrapper {
    grid-column: 2 / span 4; /* колонки 2-5 включительно */
    position: absolute;
    top: 80px; /* опущена на 80px ниже */
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.home-services__image-wrapper.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Используем standard-card компонент */
.home-services__image-wrapper .standard-card {
    width: 100%;
    height: 391px; /* увеличена на 20px (было 371px) */
}

.home-services__image-wrapper .standard-card__image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Right: title + two columns */
.home-services__right {
    grid-column: 7 / span 6; /* начинается с 7-й колонки */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.home-services__title {
    grid-column: 1 / -1; /* занимает все колонки внутри right */
    margin: 0 0 20px; /* уменьшен отступ для приближения пунктов к заголовку */
    font-family: var(--font-display);
    font-size: var(--font-size-display-3-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-3-desktop);
    color: var(--color-content);
    text-align: left; /* выравнивание по левому краю */
    letter-spacing: -0.02em;
}

.home-services__cols {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: 60px;
}

.home-services__col--left {
    grid-column: 1 / 3; /* колонки 1-2 внутри cols (соответствует колонкам 7-8 в общей сетке) */
}

.home-services__col--right {
    grid-column: 3 / 5; /* колонки 3-4 внутри cols (соответствует колонкам 9-10 в общей сетке), gap автоматически применяется между элементами */
}

.home-services__col {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body-2-desktop);
    font-weight: 300;
    line-height: var(--line-height-body-2-desktop);
    letter-spacing: -0.02em;
    color: var(--color-content);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.home-services__col li {
    cursor: pointer;
    transition: color 0.5s ease;
}

.home-services__col li:hover {
    color: var(--color-subaccent);
    transition: color 0s ease;
}

.home-cta {
    padding-top: 80px;
    padding-bottom: 80px;
    display: grid;
    place-items: center;
    row-gap: 32px;
}

.home-cta__title {
    grid-column: 1 / -1;
    margin: 100px 0 0 0; /* опущен на 100px ниже */
    font-family: var(--font-display);
    font-size: var(--font-size-display-2-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-2-desktop);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-content);
    text-align: center;
}

.home-cta__button {
    grid-column: 1 / -1;
    text-decoration: none;
    justify-self: center; /* выравнивание по центру */
}

/* ========== Планшет (769–1024px): расположение в точности как на десктопе ========== */
/* Типографика и размеры компонентов — планшетные (variables.css переопределяет desktop-токены). */
@media (min-width: 769px) and (max-width: 1024px) {
    /* ——— Hero (как десктоп) ——— */
    .home-hero__container {
        padding-top: 80px;
        padding-bottom: 24px;
        min-height: 920px;
    }
    .home-hero__profile {
        grid-column: 2 / span 1;
    }
    .home-hero__title {
        grid-column: 1 / -1;
        margin-top: 80px;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--grid-gap);
        position: relative;
    }
    .home-hero__title-main {
        margin: 0;
        grid-column: 1 / -1;
        display: contents;
    }
    .home-hero__title-line--product { grid-column: 3 / span 10; text-align: left; }
    .home-hero__title-line--brand { grid-column: 6 / span 7; text-align: left; }
    .home-hero__title-line--designer { grid-column: 4 / span 9; text-align: left; }
    .home-hero__intro {
        grid-column: 7 / span 6;
        margin-top: 240px;
    }
    .home-hero__tg {
        grid-column: 1 / span 1;
        grid-row: 3;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        align-self: start;
    }

    /* ——— Projects: заголовок и сетка (как десктоп) ——— */
    .home-projects {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .home-projects .home-section-title {
        margin-top: 300px;
        grid-column: 7 / span 6;
    }
    .home-projects__grid {
        grid-column: 1 / -1;
        margin-top: 40px;
        display: grid;
        grid-template-columns: subgrid;
        gap: var(--grid-gap);
        align-items: start;
    }
    .home-projects__item--branding { grid-column: span 4; }
    .home-projects__item--img { grid-column: span 1; }

    /* Projects: каждая карточка — те же колонки и отступы, что на десктопе */
    .home-projects__item--first-img {
        grid-column: 3 / span 1;
        margin-top: -620px;
        position: relative;
        z-index: 10;
    }
    .home-projects__item--under-first {
        grid-column: 1 / span 4;
        margin-top: -420px;
        position: relative;
        z-index: 5;
    }
    .home-projects__item--under-first-right {
        grid-column: 9 / span 4;
        margin-top: -220px;
        position: relative;
        z-index: 5;
    }
    .home-projects__item--under-first-center {
        grid-column: 4 / span 4;
        margin-top: -20px;
        position: relative;
        z-index: 5;
    }
    .home-projects__item--mid-third-img {
        grid-column: 2 / span 1;
        margin-top: -230px;
        position: relative;
        z-index: 6;
    }
    .home-projects__item--bottom-img {
        grid-column: 11 / span 1;
        margin-top: -157px;
        position: relative;
        z-index: 6;
    }
    .home-projects__item--below-bottom-img {
        grid-column: 7 / span 4;
        margin-top: 43px;
        position: relative;
        z-index: 5;
    }
    .home-projects__item--mid-last-branding {
        grid-column: 4 / span 1;
        margin-top: -249px;
        position: relative;
        z-index: 6;
    }
    .home-projects__item--below-last-branding {
        grid-column: 1 / span 4;
        margin-top: 43px;
        position: relative;
        z-index: 5;
    }
    .home-projects__item--col-6 {
        grid-column: 6 / span 1;
        margin-top: 243px;
        position: relative;
        z-index: 6;
    }
    .home-projects__item--col-9 {
        grid-column: 9 / span 4;
        margin-top: 243px;
        position: relative;
        z-index: 5;
    }
    .home-projects__item--w1 { grid-column: 1 / span 4; }
    .home-projects__item--w2 { grid-column: 5 / span 4; margin-top: 280px; }
    .home-projects__item--w3 { grid-column: 9 / span 4; margin-top: 0; }
    .home-projects__item--w4 { grid-column: 1 / span 4; margin-top: 200px; }
    .home-projects__item--w5 { grid-column: 5 / span 4; margin-top: 320px; }
    .home-projects__item--w6 { grid-column: 9 / span 4; margin-top: 220px; }
    .home-projects__item--i1 { grid-column: 2 / span 1; margin-top: 540px; }
    .home-projects__item--i2 { grid-column: 8 / span 1; margin-top: 80px; }
    .home-projects__item--i3 { grid-column: 11 / span 1; margin-top: 420px; }
    .home-projects__item--i4 { grid-column: 1 / span 1; margin-top: 820px; }
    .home-projects__item--i5 { grid-column: 6 / span 1; margin-top: 980px; }
    .home-projects__item--i6 { grid-column: 10 / span 1; margin-top: 1040px; }

    .home-projects__item--branding .project-card__image,
    .home-projects__item--img .image-card__image {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    /* ——— Services (как десктоп) ——— */
    .home-services {
        padding-top: 80px;
        padding-bottom: 80px;
        margin-top: 120px;
        position: relative;
    }
    .home-services__image-wrapper {
        grid-column: 2 / span 4;
        position: absolute;
        top: 80px;
        width: 100%;
    }
    .home-services__right {
        grid-column: 7 / span 6;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--grid-gap);
    }
    /* Key Services на планшете: по 3 колонки каждая (7–9 и 10–12) */
    .home-services__cols {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--grid-gap);
        margin-top: 60px;
    }
    .home-services__col--left { grid-column: 1; }   /* 7–9 */
    .home-services__col--right { grid-column: 2; }  /* 10–12 */

    /* ——— CTA (как десктоп) ——— */
    .home-cta {
        padding-top: 80px;
        padding-bottom: 80px;
        display: grid;
        place-items: center;
        row-gap: 32px;
    }
    .home-cta__title {
        grid-column: 1 / -1;
        margin: 100px 0 0 0;
    }
    .home-cta__button {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* Mobile — вёрстка по Figma (node 2102-4334) */
@media (max-width: 768px) {
    /* Hero: аватар слева, заголовок столбиком, интро по центру, tg-orbit по центру внизу */
    .home-hero__container {
        padding-top: 40px;
        min-height: auto;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--grid-gap);
    }

    /* Мобилка: аватар на первые две колонки, пропорции сохраняются, отступ сверху как слева (12px) */
    .home-hero__profile {
        grid-column: 1 / span 2;
        min-width: 0;
        margin-top: 32px; /* было -28px, опускаем еще на 60px */
    }

    .home-hero__profile .image-card {
        width: 100%;
    }

    .home-hero__profile .image-card__image {
        aspect-ratio: auto;
        height: auto;
    }

    .home-hero__profile .image-card__image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .home-hero__title {
        grid-column: 1 / -1;
        margin-top: 174px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    [data-theme="calm"] .home-hero__title {
        margin-top: 174px;
    }

    .home-hero__title-main {
        margin: 0;
        display: block;
        width: max-content;
        font-size: var(--font-size-display-1-mobile);
        letter-spacing: -0.04em;
        text-align: left;
    }

    /* Мобильные сдвиги строк (как на десктопе, но усиленный отступ для & BRAND) */
    .home-hero__title-line {
        display: block;
        text-align: left;
        grid-column: unset;
    }

    .home-hero__title-line--product {
        margin-left: 0;
        grid-column: unset;
    }

    .home-hero__title-line--designer {
        margin-left: var(--title-line-offset, 0.12em);
        grid-column: unset;
    }

    .home-hero__title-line--brand {
        margin-left: calc(8 * var(--title-line-offset, 0.12em));
        grid-column: unset;
    }

    .home-hero__tg {
        grid-column: 1 / -1;
        grid-row: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;           /* на всю ширину сетки */
        align-self: stretch;   /* не сжиматься под контент родителя */
        margin-top: 40px;
        margin-bottom: 32px;
    }

    .home-hero__intro {
        grid-column: 1 / -1;
        margin-top: 16px;
        text-align: center;
    }

    .home-hero__intro-text {
        font-size: var(--font-size-body-1-mobile);
        line-height: var(--line-height-body-1-mobile);
    }

    /* Projects: мобилка — 6 колонок, branding 4 колонки чередуются 1→3, image 1/3 branding по центру двух свободных */
    .home-projects,
    .home-services,
    .home-cta {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .home-projects .home-section-title {
        grid-column: 1 / -1;
        text-align: center;
        margin-top: 0;
    }

    .home-projects__grid {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: calc(var(--grid-gap) + 50px);
        align-items: start;
    }

    /* Work cards: 4 колонки, чередование — с 1-й и с 3-й */
    .home-projects__item--under-first      { grid-column: 1 / span 4; grid-row: 1; margin-top: 0; }
    .home-projects__item--under-first-right { grid-column: 3 / span 4; grid-row: 2; margin-top: 0; }
    .home-projects__item--under-first-center { grid-column: 1 / span 4; grid-row: 3; margin-top: 0; }
    .home-projects__item--below-bottom-img { grid-column: 3 / span 4; grid-row: 4; margin-top: 0; }
    .home-projects__item--below-last-branding  { grid-column: 1 / span 4; grid-row: 5; margin-top: 0; }
    .home-projects__item--col-9           { grid-column: 3 / span 4; grid-row: 6; margin-top: 0; }

    /* Image cards: по центру двух свободных колонок, ширина 1/3 от branding (4/3 колонки) */
    .home-projects__item--first-img    { grid-column: 5 / span 2; grid-row: 1; margin-top: 0; justify-self: center; align-self: center; }
    .home-projects__item--mid-third-img { grid-column: 1 / span 2; grid-row: 2; margin-top: 0; justify-self: center; align-self: center; }
    .home-projects__item--bottom-img   { grid-column: 5 / span 2; grid-row: 3; margin-top: 0; justify-self: center; align-self: center; }
    .home-projects__item--mid-last-branding { grid-column: 1 / span 2; grid-row: 4; margin-top: 0; justify-self: center; align-self: center; }
    .home-projects__item--col-6        { grid-column: 5 / span 2; grid-row: 5; margin-top: 0; justify-self: center; align-self: center; }

    /* Ячейка image-card — центрируем, ширина 1.5 колонки (ячейка = 2 колонки) */
    .home-projects__item--img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 1.3 колонки: (ширина сетки минус отступы) / 6 * 1.3. Контейнер padding 12px с боков, 5 гэпов между 6 колонками */
    .home-projects__item--img .image-card {
        width: calc((100vw - 24px - 5 * var(--grid-gap)) / 6 * 1.3) !important;
        min-width: 0;
        flex-shrink: 0;
    }

    .home-projects__item--branding .project-card__image {
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 160px;
    }

    .home-projects__item--img .image-card__image {
        aspect-ratio: 1 / 1;
        height: auto;
        width: 100%;
    }

    .home-projects__item--img .app-card {
        flex-shrink: 0;
    }

    /* Key Services: картинка по наведению скрыта, заголовок по центру, 2 колонки по 3 пункта, текст по центру */
    .home-services__image-wrapper {
        display: none;
    }

    .home-services__right {
        grid-column: 1 / -1;
        text-align: center;
    }

    .home-services__title {
        margin-bottom: 24px;
        font-size: var(--font-size-display-3-mobile);
        line-height: var(--line-height-display-3-mobile);
        text-align: center;
    }

    .home-services__cols {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-top: 0;
    }

    .home-services__col--left,
    .home-services__col--right {
        grid-column: unset;
    }

    .home-services__col {
        font-size: var(--font-size-body-2-mobile);
        line-height: var(--line-height-body-2-mobile);
        gap: 24px;
        text-align: center;
        align-items: center;
    }

    /* CTA: заголовок и кнопка по центру */
    .home-cta {
        text-align: center;
    }

    .home-cta__title {
        margin: 100px 0 0 0;
        font-size: var(--font-size-display-2-mobile);
        line-height: var(--line-height-display-2-mobile);
    }

    .home-cta__button {
        justify-self: center;
    }
}