/* ── i18n: скрываем body пока не применены переводы ── */
html[data-i18n-pending] body {
    opacity: 0;
}
html body {
    transition: opacity 0.15s ease;
}

/* Global Styles */
:root {
    --font-primary: 'Raleway', sans-serif;
    --color-text-dark: #111111;
    --color-text-light: #FFFFFF;
    --color-gray: #666666;
    --color-accent: var(--color-accent);
    /* Псевдо-тень карточек (stage-card, cta-stripe и др.) */
    --color-shade-fill: #eaeaea;
    --color-shade-border: #c8c8c8;
    --container-width: 1400px;
    --container-padding: 40px;
    --header-height: 52px;

    /* Type scale */
    --fs-display:   clamp(2.5rem, 5vw, 4rem);        /* hero: 40→64px */
    --fs-h1:        clamp(1.375rem, 2.2vw, 2rem);    /* 22→32px */
    --fs-h2:        clamp(1.125rem, 1.65vw, 1.5rem); /* 18→24px */
    --fs-h3:        clamp(1rem, 1.25vw, 1.125rem);   /* 16→18px */
    --fs-lead:      clamp(0.9375rem, 1.1vw, 1.0625rem); /* 15→17px */
    --fs-body:      clamp(0.9375rem, 1.1vw, 1rem);   /* 15→16px */
    --fs-secondary: clamp(0.9375rem, 1.1vw, 1rem);   /* 15→16px */
    --fs-label:     clamp(0.75rem, 0.85vw, 0.875rem);/* 12→14px */
    --fs-micro:     0.65rem;

    /* Fluid spacing */
    --section-padding-block:  clamp(3rem, 8vw, 8rem);
    --gap-section:            clamp(1rem, 3vw, 2.5rem);
    --card-padding:           1rem;
}

/* Планшеты: уменьшенные отступы */
@media (max-width: 1024px) {
    :root {
        --container-padding: 24px;
    }
}

/* Планшеты: card-padding */
@media (min-width: 568px) {
    :root {
        --card-padding: 1.5rem;
    }
}

/* Десктоп: card-padding */
@media (min-width: 1024px) {
    :root {
        --card-padding: 2rem;
    }
}

/* Мобильные */
@media (max-width: 568px) {
    :root {
        --container-padding: 12px;
    }
}


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

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-dark);
    background-color: #eaecf3;
    overflow-x: clip;
}

body.menu-open {
    overflow: hidden !important;
    touch-action: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

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

ul {
    list-style: none;
}

/* Header — dark design (reference) */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0;
    background-color: #1A1A1A;
    transform: translateY(0);
    transition: transform 0.25s ease, background-color 0.35s ease, box-shadow 0.35s ease;
    height: var(--header-height);
}

/* Transparent header on services2 / career / projects / contacts page — только вверху */
.services2-page .main-header,
.career-page .main-header,
.projects-page .main-header,
.contacts-page .main-header {
    background-color: transparent;
}

/* Состояние при скролле вниз: белый фон, серая тень */
.main-header.is-scrolled {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
}

.services2-page .main-header.is-scrolled,
.career-page .main-header.is-scrolled,
.projects-page .main-header.is-scrolled,
.contacts-page .main-header.is-scrolled {
    background-color: #ffffff;
}

/* Линия под меню — в scrolled серый */
.main-header.is-scrolled::after {
    background-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 1024px) {
    .lang-switcher-wrap {
        margin-right: 0;
    }
    /* Порядок элементов: [лого] [тема] → авто-отступ → [языки] [бургер] */
    .mobile-menu-toggle { order: 10; }   /* правый край */
    .lang-switcher-wrap  { order: 5;  }  /* левее бургера */
}

.main-header.is-hidden {
    transform: translateY(-100%);
}

.header-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    height: var(--header-height);
}

/* Thin line spanning full width under the menu */
.main-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    transition: background-color 0.35s ease;
}

.logo {
    position: relative;
    height: var(--header-height);
    display: flex;
    align-items: center;
    z-index: 1001;
}

.logo img.logo-desktop,
.logo img.logo-mobile {
    height: 32px;
    transition: opacity 0.3s ease;
}

.logo img.logo-desktop {
    display: block;
}

.logo img.logo-mobile {
    display: none;
}

/* Логотипы для состояния scrolled — скрыты по умолчанию */
.logo img.logo-desktop-scrolled,
.logo img.logo-mobile-scrolled {
    display: none;
    height: 32px;
}

/* Scrolled: показываем цветные логотипы */
.main-header.is-scrolled .logo img.logo-desktop {
    display: none;
}

.main-header.is-scrolled .logo img.logo-desktop-scrolled {
    display: block;
}

/* Планшеты и телефоны (≤1024px): сокращённый логотип */
@media (max-width: 1024px) {
    .logo img.logo-desktop,
    .logo img.logo-desktop-scrolled {
        display: none !important;
    }

    .logo img.logo-mobile {
        display: block !important;
    }

    .main-header.is-scrolled .logo img.logo-mobile {
        display: none !important;
    }

    .main-header.is-scrolled .logo img.logo-mobile-scrolled {
        display: block !important;
    }
}

/* Только телефоны (≤568px): дополнительные правки отступов */
@media (max-width: 568px) {
    .lang-switcher-wrap {
        margin-left: 0;
        margin-right: 0;
    }
}

.main-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    align-items: stretch;
}

.main-nav ul {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: stretch;
    height: 100%;
}

.main-nav li {
    position: relative;
    display: flex;
    align-items: center;
}

/* Underline for active and hover — aligned with the bottom thin line */
.main-nav li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #ffffff;
    transition: width 0.35s ease, background-color 0.35s ease;
}

.main-nav li:hover::after {
    width: 100%;
}

.main-nav li.active::after {
    width: 100%;
}

.main-nav a {
    font-size: var(--fs-label);
    font-weight: 600;
    color: #ffffff;
    transition: color 0.3s ease;
    text-transform: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.main-nav a span {
    display: inline-block;
    transition: color 0.3s ease;
}

.main-nav a.active,
.main-nav a.active span {
    color: #ffffff;
}

/* Scrolled: чёрный текст, красный при hover — весь текст сразу за 0.2s, без побуквенной анимации */
.main-header.is-scrolled .main-nav a,
.main-header.is-scrolled .main-nav a span {
    color: #111111;
    transition: color 0.2s ease;
    transition-delay: 0 !important;
}

.main-header.is-scrolled .main-nav a:hover,
.main-header.is-scrolled .main-nav a:hover span {
    color: #d12a2a;
}

.main-header.is-scrolled .main-nav a.active,
.main-header.is-scrolled .main-nav a.active span {
    color: #d12a2a;
}

.main-header.is-scrolled .main-nav a.active:hover,
.main-header.is-scrolled .main-nav a.active:hover span {
    color: #d12a2a;
}

/* Подчёркивание: в scrolled — красное при hover и для active */
.main-header.is-scrolled .main-nav li::after {
    background-color: #d12a2a;
}

.main-header.is-scrolled .main-nav li:hover::after,
.main-header.is-scrolled .main-nav li.active::after {
    background-color: #d12a2a;
}

/* Mobile Menu Toggle Button — 1 span + ::before/::after для иконки гамбургера */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s ease;
}

.mobile-menu-toggle::before,
.mobile-menu-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -9px;
    width: 18px;
    height: 1px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-menu-toggle::before {
    top: 12px;
}

.mobile-menu-toggle::after {
    bottom: 12px;
}

.mobile-menu-toggle span {
    display: block;
    width: 18px;
    height: 1px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-toggle.active {
    border-color: #ffffff;
}

.mobile-menu-toggle.active span {
    opacity: 0;
}

.mobile-menu-toggle.active::before {
    top: 17px;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active::after {
    bottom: 17px;
    transform: rotate(-45deg);
}

/* Scrolled: гамбургер и линии — чёрные */
.main-header.is-scrolled .mobile-menu-toggle {
    border-color: rgba(0, 0, 0, 0.3);
}

.main-header.is-scrolled .mobile-menu-toggle::before,
.main-header.is-scrolled .mobile-menu-toggle::after,
.main-header.is-scrolled .mobile-menu-toggle span {
    background-color: #111111;
}

.main-header.is-scrolled .mobile-menu-toggle:hover {
    border-color: rgba(0, 0, 0, 0.5);
}

.main-header.is-scrolled .mobile-menu-toggle.active {
    border-color: #111111;
}

/* ── Language Switcher ──────────────────────────────────── */
.lang-switcher-wrap {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
}

.lang-switcher {
    display: flex;
    align-items: center;
}

.lang-btn {
    background: transparent;
    border: none;
    border-left: 1px solid transparent;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 5px 9px;
    line-height: 1;
    transition: color 0.2s ease;
}

.lang-btn + .lang-btn {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.lang-btn:hover {
    color: rgba(255, 255, 255, 0.85);
}

.lang-btn.is-active {
    color: #ffffff;
}

.main-header.is-scrolled .lang-btn {
    color: rgba(0, 0, 0, 0.4);
}

.main-header.is-scrolled .lang-btn + .lang-btn {
    border-left-color: rgba(0, 0, 0, 0.15);
}

.main-header.is-scrolled .lang-btn:hover {
    color: rgba(0, 0, 0, 0.75);
}

.main-header.is-scrolled .lang-btn.is-active {
    color: var(--color-accent);
}

/* ── Lang switcher < 1024px: dropdown ───────────────────────── */
@media (max-width: 1024px) {

    /* Обёртка: relative-контейнер, высота = кнопка */
    .lang-switcher-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* По умолчанию — только активный язык */
    .lang-switcher .lang-btn:not(.is-active) {
        display: none;
    }

    /* Активная кнопка + шеврон */
    .lang-btn.is-active {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .lang-btn.is-active::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 3.5px solid transparent;
        border-right: 3.5px solid transparent;
        border-top: 4px solid currentColor;
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }

    /* Активная кнопка ВСЕГДА первая в колонке (независимо от позиции в DOM) */
    .lang-switcher-wrap.is-open .lang-btn.is-active {
        order: -1;
    }

    /* Шеврон переворачивается при открытии */
    .lang-switcher-wrap.is-open .lang-btn.is-active::after {
        transform: rotate(180deg);
    }

    /* Открытый дропдаун: top:0, ширина = min-content (узко, по тексту) */
    .lang-switcher-wrap.is-open .lang-switcher {
        position: absolute;
        top: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;  /* чипы тянутся до ширины контейнера */
        width: min-content;    /* контейнер узкий — по самому широкому слову */
        z-index: 300;
    }

    /* Общие стили в открытом дропдауне */
    .lang-switcher-wrap.is-open .lang-btn {
        display: flex;
        justify-content: center;  /* текст по центру, как в дизайне */
        align-items: center;
        border-left: none !important;
        font-size: 11px;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }

    /* Неактивные (чипы): большая тач-зона, прозрачный фон */
    .lang-switcher-wrap.is-open .lang-btn:not(.is-active) {
        display: flex;
        padding: 13px 14px;
        min-height: 44px;
        color: rgba(255, 255, 255, 0.65);
        background: transparent;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .lang-switcher-wrap.is-open .lang-btn:not(.is-active):hover,
    .lang-switcher-wrap.is-open .lang-btn:not(.is-active):active {
        color: #ffffff;
        background: rgba(8, 8, 12, 0.88);
    }

    /* Scrolled: плашки в стиле белого хедера */
    .main-header.is-scrolled .lang-switcher-wrap.is-open .lang-btn:not(.is-active) {
        color: rgba(0, 0, 0, 0.5);
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
    }
    .main-header.is-scrolled .lang-switcher-wrap.is-open .lang-btn:not(.is-active):hover,
    .main-header.is-scrolled .lang-switcher-wrap.is-open .lang-btn:not(.is-active):active {
        color: rgba(0, 0, 0, 0.8);
    }
}

/* Hero Section */
.hero {
    height: 100vh;
    min-height: 700px;
    background-image: url('../assets/mounatain backgound gray.jpg');
    background-size: cover;
    background-position: center top;
    /* Anchor to top to show sky */
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
}

.hero.hero-services {
    height: 522px;
    min-height: 522px;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background-image: none;
}

/* Фоновый слой — cover + анимируется через transform */
.hero.hero-services .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.15);
    z-index: 0;
}

/* Фоновые изображения по страницам */
.services-page .hero.hero-services .hero-bg,
.services2-page .hero.hero-services .hero-bg {
    background-image: url('../assets/images/servises1.webp');
}

.projects-page .hero.hero-services .hero-bg {
    background-image: url('../assets/images/projects.webp');
}

.hero.hero-services::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    pointer-events: none;
}

.projects-page .hero-content h1 {
    color: #ffffff;
}

/* =====================================================
   SECTION STRATEGY — services.html
   ===================================================== */
.section-strategy {
    display: none;
    background-color: #ffffff;
    padding: clamp(1rem, 2vw, 2rem) 0 var(--section-padding-block);
}

/* Верхний двухколоночный блок */
.strategy-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    margin-bottom: 64px;
}

.strategy-heading {
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 16px 0 0 0;
    letter-spacing: -0.02em;
}

.strategy-intro-left .company-label {
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.strategy-intro-left,
.strategy-intro-right {
    min-width: 0;
}

.strategy-intro-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}

.strategy-intro-bold {
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.65;
    color: var(--color-text-dark);
    margin: 0;
    text-align: justify;
}

.strategy-intro-text {
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.65;
    color: #666666;
    margin: 0;
    text-align: justify;
}

/* Сетка карточек — оформление как у stage-card-wrap */
.strategy-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: stretch;
}

.strategy-card-wrap {
    position: relative;
    background: var(--color-shade-fill);
    border-radius: 20px;
    border: 1px solid var(--color-shade-border);
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transform-origin: center center;
    transition: background-color 0.35s ease, border-color 0.35s ease,
                transform 0.35s ease, box-shadow 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .strategy-card-wrap:hover {
        background-color: #d12a2a;
        border-color: #d12a2a;
        transform: scale(1.08);
        box-shadow: 0 20px 56px rgba(0, 0, 0, 0.16);
    }
}

.strategy-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    border: none;
    box-shadow: none;
    padding: 32px 36px 36px 32px;
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
    flex: 1;
    min-height: 0;
}


.strategy-card-letter {
    display: block;
    margin-bottom: 20px;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1;
    color: #d12a2a;
}

.strategy-card-icon {
    position: absolute;
    top: 28px;
    right: 28px;
    line-height: 0;
}

.strategy-card-icon img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: none;
    transition: filter 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .strategy-card:hover .strategy-card-icon img {
        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(2500%) hue-rotate(350deg) brightness(0.95) contrast(0.9);
    }
}

.strategy-card-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 16px 0;
    color: #111111;
    position: relative;
}

.strategy-card-title-en {
    color: rgba(77, 76, 76, 0.7);
}

.strategy-card-title-ru {
    color: #111111;
}

@media (hover: hover) and (pointer: fine) {
    .strategy-card-wrap:hover .strategy-card-title-en {
        color: #d12a2a;
    }
}

.strategy-card-desc {
    font-size: var(--fs-secondary);
    font-weight: 600;
    line-height: 1.65;
    color: #666666;
    margin: 0;
    flex: 1;
}

@media (max-width: 1280px) {
    .strategy-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .section-strategy {
        padding: 24px 0 64px;
    }
    .strategy-intro {
        gap: 40px;
        margin-bottom: 48px;
    }
    .strategy-card-title {
        margin-bottom: 14px;
    }
    .strategy-card-desc {
        line-height: 1.6;
    }
    /* Как у stages — блок и sticky-карточки */
    .strategy-cards {
        display: block;
    }
    .strategy-card-wrap {
        position: sticky;
        margin-bottom: 48px;
    }
    .strategy-card-wrap:last-child {
        margin-bottom: 20px;
    }
    .strategy-card-wrap:nth-child(1) { top: 16px; z-index: 1; }
    .strategy-card-wrap:nth-child(2) { top: 36px; z-index: 2; }
    .strategy-card-wrap:nth-child(3) { top: 56px; z-index: 3; }
    .strategy-card-wrap:nth-child(4) { top: 76px; z-index: 4; }
    .strategy-card-wrap:nth-child(5) { top: 96px; z-index: 5; }
}

@media (max-width: 568px) {
    .section-strategy {
        padding: 24px 0 52px;
        overflow: visible;
    }
    .section-strategy .container {
        overflow: visible;
    }
    .strategy-intro {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 40px;
        position: relative;
    }

    /* Крупная декоративная кавычка над заголовком — убрана */
    .strategy-intro-left::before {
        display: none;
    }

    /* Отступ под заголовком */
    .strategy-intro-left .strategy-heading {
        margin-bottom: 28px;
    }

    /* Правый блок — с красной левой чертой */
    .strategy-intro-right {
        border-left: 2px solid #ED1C24;
        padding-left: 18px;
        gap: 14px;
    }

    .strategy-intro-text {
        color: #888888;
    }
    /* Как у stages-grid-sticky / stages-grid */
    .strategy-cards-sticky {
        position: sticky;
        top: 0;
        overflow: visible;
        width: 100%;
    }
    .strategy-cards {
        display: block;
        overflow: visible;
        width: 100%;
    }
    .strategy-card-wrap {
        position: sticky;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 32px;
        background: var(--color-shade-fill);
        border-radius: 20px;
    }
    .strategy-card-wrap:last-child {
        margin-bottom: 0;
    }
    .strategy-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 20px 20px 24px;
        margin-bottom: 16px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 20px;
        box-shadow: none;
        overflow: hidden;
    }
    .strategy-card-wrap:nth-child(1) { top: 16px; z-index: 1; }
    .strategy-card-wrap:nth-child(2) { top: 36px; z-index: 2; }
    .strategy-card-wrap:nth-child(3) { top: 56px; z-index: 3; }
    .strategy-card-wrap:nth-child(4) { top: 76px; z-index: 4; }
    .strategy-card-wrap:nth-child(5) { top: 96px; z-index: 5; }
    .strategy-card-icon {
        top: 16px;
        right: 16px;
    }
    .strategy-card-icon img {
        width: 52px;
        height: 52px;
    }
    .strategy-card-title {
        margin-bottom: 14px;
    }
    .strategy-card-desc {
        line-height: 1.6;
    }
}


/* =====================================================
   SECTION SMART CARDS (новый дизайн) — services.html
   ===================================================== */
.section-smart-cards {
    background-color: #eaecf3;
    padding: clamp(0.5rem, 1vw, 1rem) 0 var(--section-padding-block);
}

.smart-cards-main {
    position: relative;
}

.section-smart-cards .section-label.smart-side-label {
    position: absolute;
    right: 0;
    top: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(17, 17, 17, 0.1);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    user-select: none;
    margin-bottom: 0;
}

.section-smart-cards .strategy-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(1fr + 56px));
    margin-top: 0;
    margin-bottom: 12px;
}

.section-smart-cards .strategy-intro-right {
    padding-right: 56px;
}

.section-smart-cards .smart-cards-label {
    font-size: var(--fs-micro);
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.smart-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.smart-card {
    flex: 0 1 calc(20% - 14px);
    min-width: 180px;
    background: #ffffff;
    border-radius: 4px;
    padding: var(--card-padding);
    position: relative;
    overflow: hidden;
}

.smart-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.5s ease;
    z-index: 0;
    border-radius: 4px;
}

.smart-card:nth-child(1)::before {
    background-image: linear-gradient(rgba(145, 22, 22, 0.78), rgba(145, 22, 22, 0.78)), url('../assets/images/Specific 1.webp');
}

.smart-card:nth-child(2)::before {
    background-image: linear-gradient(rgba(145, 22, 22, 0.78), rgba(145, 22, 22, 0.78)), url('../assets/images/Measurable 03.webp');
}

.smart-card:nth-child(3)::before {
    background-image: linear-gradient(rgba(145, 22, 22, 0.78), rgba(145, 22, 22, 0.78)), url('../assets/images/Measurable 04.webp');
}

.smart-card:nth-child(4)::before {
    background-image: linear-gradient(rgba(145, 22, 22, 0.78), rgba(145, 22, 22, 0.78)), url('../assets/images/Relevant 01.webp');
}

.smart-card:nth-child(5)::before {
    background-image: linear-gradient(rgba(145, 22, 22, 0.78), rgba(145, 22, 22, 0.78)), url('../assets/images/Time-bound 04.webp');
}

.smart-card > * {
    position: relative;
    z-index: 1;
}

.smart-card-letter {
    display: block;
    margin-bottom: 12px;
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1;
    color: #d12a2a;
    transition: color 0.35s ease;
}

.smart-card-icon {
    margin-bottom: 20px;
    line-height: 0;
}

.smart-card-icon img {
    width: 52px;
    height: 52px;
    display: block;
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(5000%) hue-rotate(350deg) brightness(0.95) contrast(0.9);
    transition: filter 0.4s ease;
}

.smart-card .smart-card-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 14px;
    line-height: 1.35;
    transition: color 0.4s ease;
}

.smart-card .smart-card-title span {
    color: var(--color-gray);
    font-weight: 400;
    transition: color 0.4s ease;
}

.smart-card .smart-card-desc {
    font-size: var(--fs-secondary);
    color: var(--color-gray);
    line-height: 1.65;
    transition: color 0.4s ease;
}

.smart-card:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

.smart-card:hover .smart-card-letter {
    color: #ffffff;
}

.smart-card:hover .smart-card-icon img {
    filter: brightness(0) invert(1);
}

.smart-card:hover .smart-card-title,
.smart-card:hover .smart-card-title span,
.smart-card:hover .smart-card-desc {
    color: #ffffff;
}

.smart-carousel-dots { display: none; }

@media (max-width: 1280px) {
    .smart-cards-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .smart-card {
        flex: 0 0 calc(33.333% - 11px);
    }
}

@media (max-width: 1024px) {
    .smart-card {
        flex: 0 0 calc(50% - 8px);
    }
    /* Отключаем реакцию на наведение курсора */
    .smart-card:hover::before {
        opacity: 0;
        transform: scale(1);
    }
    .smart-card:hover .smart-card-letter {
        color: #d12a2a;
    }
    .smart-card:hover .smart-card-icon img {
        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(5000%) hue-rotate(350deg) brightness(0.95) contrast(0.9);
    }
    .smart-card:hover .smart-card-title {
        color: var(--color-text-dark);
    }
    .smart-card:hover .smart-card-title span,
    .smart-card:hover .smart-card-desc {
        color: var(--color-gray);
    }
}

/* 568–1024: заголовок 50%, правый блок на всю ширину */
@media (min-width: 569px) and (max-width: 1024px) {
    .section-smart-cards .strategy-intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .section-smart-cards .strategy-intro-left {
        width: 50%;
        max-width: 50%;
    }
    .section-smart-cards .strategy-intro-right {
        width: 100%;
        max-width: 100%;
        padding-right: 36px; /* отступ от вертикального лейбла «МЕТОДОЛОГИЯ» */
    }
    .section-smart-cards .strategy-intro-bold,
    .section-smart-cards .strategy-intro-text {
        width: 100%;
        max-width: 100%;
    }
}

/* ── Smart-cards carousel 569–1024px: 2 карточки + peek ── */
@media (min-width: 569px) and (max-width: 1024px) {
    .section-smart-cards {
        overflow: hidden;
    }

    .smart-cards-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 12px 16px 28px;
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        cursor: grab;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .smart-cards-grid::-webkit-scrollbar { display: none; }
    .smart-cards-grid:active { cursor: grabbing; }

    .section-smart-cards .smart-card {
        flex: 0 0 calc(43% - 16px);
        max-width: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        position: static;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
        will-change: transform, opacity;
        transition: transform 0.06s ease-out, opacity 0.06s ease-out, box-shadow 0.3s ease;
    }

    .section-smart-cards .smart-card:nth-child(1),
    .section-smart-cards .smart-card:nth-child(2),
    .section-smart-cards .smart-card:nth-child(3),
    .section-smart-cards .smart-card:nth-child(4),
    .section-smart-cards .smart-card:nth-child(5) { z-index: auto; }

    .section-smart-cards .smart-card,
    .section-smart-cards .smart-card.srv-in-view {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .smart-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin-top: 4px;
    }
    .smart-carousel-dots .dot {
        height: 7px;
        width: 7px;
        border-radius: 4px;
        background: rgba(17, 17, 17, 0.18);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.3s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }
    .smart-carousel-dots .dot.active {
        background: #d12a2a;
        width: 22px;
    }
}

@media (max-width: 568px) {
    /* ── Секция ── */
    .section-smart-cards {
        overflow: hidden;
        padding-bottom: 40px;
    }
    .section-smart-cards .strategy-intro {
        margin-bottom: 12px;
    }
    .section-smart-cards .strategy-intro-right {
        padding-right: 0;
        position: static;
    }
    .section-smart-cards .section-label.smart-side-label {
        display: none;
    }

    /* ── Карусель-трек ── */
    .smart-cards-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;   /* сбрасываем justify-content: center из 1280px-брейкпоинта */
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding: 12px 16vw 28px;
        margin-left:  calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        cursor: grab;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .smart-cards-grid::-webkit-scrollbar { display: none; }
    .smart-cards-grid:active { cursor: grabbing; }

    /* ── Карточка ── */
    .section-smart-cards .smart-card {
        flex: 0 0 68vw;
        max-width: none;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        position: static;
        border: 1px solid rgba(0, 0, 0, 0.07);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
        will-change: transform, opacity;
        transform-origin: center center;
        /* Плавное сглаживание поворота между scroll-событиями */
        transition: transform 0.06s ease-out, opacity 0.06s ease-out, box-shadow 0.3s ease;
    }
    /* Убираем стековые z-index */
    .section-smart-cards .smart-card:nth-child(1),
    .section-smart-cards .smart-card:nth-child(2),
    .section-smart-cards .smart-card:nth-child(3),
    .section-smart-cards .smart-card:nth-child(4),
    .section-smart-cards .smart-card:nth-child(5) { z-index: auto; }

    /* ── Анимация появления: полностью отключаем на мобайле ── */
    .section-smart-cards .smart-card,
    .section-smart-cards .smart-card.srv-in-view {
        opacity: 1;
        transform: none;
        animation: none;
        /* transition не переопределяем — используем из карточки выше (0.06s для плавного поворота) */
    }

    .section-smart-cards .smart-card-letter {
        font-size: 1.75rem;
    }

    /* ── Точки-индикаторы ── */
    .smart-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin-top: 4px;
    }
    .smart-carousel-dots .dot {
        height: 7px;
        width: 7px;
        border-radius: 4px;
        background: rgba(17, 17, 17, 0.18);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.3s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }
    .smart-carousel-dots .dot.active {
        background: #d12a2a;
        width: 22px;
    }
}

/* ─────────────────────────────────────────────────────
   Samsung Galaxy Z Fold 7 — узкий cover-screen (≤360px)
   Отдельный брекпоинт, не трогает ничего выше
   ───────────────────────────────────────────────────── */
/* ── Smart-cards carousel ≤360px (Z Fold cover-screen) ── */
@media (max-width: 360px) {
    .smart-cards-grid {
        gap: 6px;
        padding: 12px 11vw 28px;
    }
    .section-smart-cards .smart-card {
        flex: 0 0 78vw;
    }
}


/* =====================================================
   SECTION INDUSTRIES — тёмная секция с карточками отраслей
   ===================================================== */
.section-industries {
    position: relative;
    background-image: url('../assets/images/businessmen-going-upstairs.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 96px 0;
    overflow: hidden;
}

.section-industries::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    z-index: 0;
    pointer-events: none;
}

.section-industries .container {
    position: relative;
    z-index: 1;
}

.industries-wrap {
    display: flex;
    gap: 80px;
    align-items: center;
}

.industries-left {
    flex: 0 0 34%;
    min-width: 0;
}

.industries-heading {
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.12;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.025em;
    text-align: center;
}

.industries-right {
    flex: 1;
    min-width: 0;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Карточки: иконка + текст по центру, как в референсе */
.industry-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform-origin: center center;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-align: center;
}

.industry-card-icon {
    line-height: 0;
}

.industry-card-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.industry-card-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}

/* ---- Планшет 1024px: 2 колонки, 3 ряда, без переполнения ---- */
@media (max-width: 1024px) {
    .section-industries {
        padding: 64px 0;
    }
    .industries-wrap {
        flex-direction: column;
        gap: 32px;
        align-items: stretch;
    }
    .industries-left {
        flex: none;
        width: 100%;
    }
    .industries-right {
        width: 100%;
        min-width: 0;
    }
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .industry-card {
        gap: 14px;
        min-width: 0;
    }
    .industry-card-icon img {
        width: 44px;
        height: 44px;
    }
}

/* ---- Мобильный 568px: вертикальный стек ---- */
@media (max-width: 568px) {
    .section-industries {
        padding: 52px 0;
        background-attachment: scroll; /* fixed некорректен на iOS */
        overflow: visible; /* шестая карточка не обрезается */
    }
    .industries-wrap {
        flex-direction: column;
        gap: 32px;
        align-items: stretch;
    }
    .industries-left {
        flex: none;
        width: 100%;
    }
    .industries-right {
        width: 100%;
    }
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .industry-card {
        gap: 16px;
        align-items: center;
        text-align: center;
    }
    .industry-card-icon img {
        width: 52px;
        height: 52px;
    }
}

/* ========== Hero Services 2 (reference block) ========== */
.hero.hero-home {
    height: auto;
    min-height: 0;
    background: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
    transform-origin: center top;
    transform: scale(1.3);
}

/* Фоновое изображение только для главной страницы */
.hero.hero-home .hero-bg {
    background-image: url('../assets/images/businessmen-going-upstairs.webp');
}

.hero-animated .hero-bg {
    animation: heroZoomOut 4s ease-out;
}

@keyframes heroZoomOut {
    0% {
        transform: scale(2);
    }

    100% {
        transform: scale(1.3);
    }
}

@keyframes heroSlideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroSlideInUp {
    0% {
        opacity: 0;
        transform: translateY(200px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* Right curtain that slides away */
.hero.hero-home::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0%;
    background-color: rgba(234, 236, 243, 0.5);
    z-index: 3;
    pointer-events: none;
}

.hero.hero-home.hero-animated::after {
    width: 25%;
    animation: heroCurtainSlide 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes heroCurtainSlide {
    0% {
        width: 25%;
    }

    100% {
        width: 0%;
    }
}

@keyframes heroCurtainSlideMobile {
    0% {
        width: 33.333%;
    }

    100% {
        width: 0%;
    }
}

.hero-home-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 220px var(--container-padding) 230px;
}

.hero-home-content {
    max-width: 700px;
    text-align: left;
}

.hero-title {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero-animated .hero-title {
    animation: heroSlideInLeft 1s ease-out 1s both;
}

.hero.hero-home.hero-animated .hero-title {
    animation: none;
}

.hero-label {
    display: inline-block;
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    margin-bottom: 20px;
    border-left: 2px solid var(--color-accent);
    padding-left: 12px;
}

.hero-animated .hero-label {
    animation: heroSlideInLeft 1s ease-out 0.8s both;
}

.hero-title span {
    display: block;
}

.hero-desc {
    font-size: var(--fs-h2);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 24px;
    max-width: 520px;
    font-weight: 400;
}

.hero-animated .hero-desc {
    animation: heroSlideInLeft 1s ease-out 1.2s both;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hero.hero-home .hero-buttons {
    display: none;
}

.hero-animated .hero-buttons {
    animation: heroSlideInLeft 1s ease-out 1.5s both;
}


.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: var(--fs-secondary);
    font-weight: 500;
    font-family: var(--font-primary);
    border-radius: 999px;
    transition: color 0.4s ease;
}

.action-btn--primary {
    background-color: #ffffff;
    color: #111111;
    border: none;
    position: relative;
    overflow: hidden;
}

.action-btn--primary:hover {
    color: #ffffff;
}

.action-btn-text {
    position: relative;
    z-index: 2;
    transition: color 0.4s ease;
}

.action-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    transition: transform 0.5s ease;
    z-index: 1;
}

.action-btn--primary:hover .action-btn-icon {
    transform: scale(25);
}

.action-btn-icon::after {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M17 7v10M17 7H7' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.action-btn--primary:hover .action-btn-icon::after {
    transform: scale(calc(1 / 25));
}

.action-btn--secondary {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.action-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
}

/* ── Touch devices: disable hover effects, use :active ──────── */
@media (hover: none) {
    /* Отменяем все hover-состояния на кнопках */
    .action-btn--primary:hover,
    .action-btn--dark:hover {
        color: inherit;
    }
    .action-btn--secondary:hover {
        background-color: transparent;
        border-color: rgba(255, 255, 255, 0.9);
    }
    a.cta-btn.action-btn:hover,
    button.cta-btn.action-btn:hover {
        color: var(--color-text-dark);
        border-color: #d0d0d0;
    }
    .action-btn--primary:hover .action-btn-icon,
    .action-btn--dark:hover .action-btn-icon,
    a.cta-btn.action-btn:hover .action-btn-icon,
    button.cta-btn.action-btn:hover .action-btn-icon {
        transform: none !important;
    }
    .action-btn--primary:hover .action-btn-icon::after,
    .action-btn--dark:hover .action-btn-icon::after {
        transform: none !important;
    }
    a.cta-btn.action-btn:hover::after,
    button.cta-btn.action-btn:hover::after {
        animation: none !important;
    }
    /* Отключаем transition для icon, чтобы не мелькал при тапе */
    .action-btn-icon {
        transition: none;
    }
    .action-btn-icon::after {
        transition: none;
    }

    /* Визуальная обратная связь при нажатии */
    .action-btn:active {
        opacity: 0.75;
    }
    a.cta-btn.action-btn:active,
    button.cta-btn.action-btn:active {
        opacity: 0.8;
    }
}

/* Планшет в портрете, смартфоны и сенсорные планшеты — без анимации hover/active на CTA */
@media (max-width: 568px),
       ((max-width: 1024px) and (orientation: portrait)),
       ((max-width: 1024px) and (pointer: coarse)) {
    .action-btn--primary:hover {
        color: #111111;
    }
    .action-btn--dark:hover {
        color: #111111;
    }
    .action-btn--secondary:hover {
        background-color: transparent;
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.9);
    }
    .action-btn--primary:hover .action-btn-icon,
    .action-btn--dark:hover .action-btn-icon,
    a.cta-btn.action-btn:hover .action-btn-icon,
    button.cta-btn.action-btn:hover .action-btn-icon {
        transform: none !important;
    }
    .action-btn--primary:hover .action-btn-icon::after,
    .action-btn--dark:hover .action-btn-icon::after {
        transform: none !important;
    }
    a.cta-btn.action-btn:hover::after,
    button.cta-btn.action-btn:hover::after {
        animation: none !important;
    }

    a.cta-btn.action-btn:hover,
    button.cta-btn.action-btn:hover {
        color: var(--color-text-dark);
        border-color: #d0d0d0;
    }

    [data-theme="dark"] a.cta-btn.action-btn:hover,
    [data-theme="dark"] button.cta-btn.action-btn:hover {
        color: #e4e4e4;
        border-color: rgba(255, 255, 255, 0.18);
    }

    .action-btn-icon,
    .action-btn-icon::after {
        transition: none !important;
    }

    .action-btn:active,
    a.cta-btn.action-btn:active,
    button.cta-btn.action-btn:active {
        opacity: 1 !important;
    }

    .action-btn-text {
        transition: none;
    }
    .action-btn {
        transition: none;
    }
    a.cta-btn.action-btn,
    button.cta-btn.action-btn {
        transition: none;
    }
}

.hero-features {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px 40px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-animated .hero-features {
    animation: heroSlideInLeft 1s ease-out 2s both;
}

.hero-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-secondary);
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    font-weight: 400;
}

.hero-feature-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.hero-feature-check::after {
    content: '';
    width: 6px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    margin-bottom: 3px;
    margin-left: 1px;
}



/* Section below hero (white block, two columns) */
.section-company {
    background-color: #ffffff;
}

.company-container {
    padding: clamp(1rem, 2vw, 2rem) var(--container-padding) var(--section-padding-block);
    max-width: var(--container-width);
    margin: 0 auto;
}

.company-label {
    font-size: var(--fs-label);
    color: var(--color-accent);
    margin-bottom: 28px;
    font-weight: 600;
}

.company-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-section);
    align-items: start;
}

.company-col-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.company-col-left .company-image-wrap {
    margin-top: 0;
    max-width: 75%;
    align-self: center;
}

.company-col-right {
    grid-column: 2;
    align-self: center;
}

.company-title {
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-text-dark);
    margin: 0 auto 48px;
    max-width: 720px;
    text-align: center;
}

.company-text {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: #737373;
    margin: 0 0 1em 0;
}

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

.company-subtitle {
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0 0 1rem 0;
}

.company-text-block {
    margin-bottom: 0;
    overflow: visible;
    text-align: justify;
}

.company-signature {
    margin-top: 1.5rem;
    margin-right: 2rem;
    text-align: right;
}

.company-signature-img {
    display: inline-block;
    max-width: 180px;
    height: auto;
}

/* =====================================================
   БЛОК СТАТИСТИКИ: опыт + проекты
   ===================================================== */
.company-stats {
    display: flex;
    gap: 0;
    margin-top: 2rem;
    border-top: 1px solid #e8e8e8;
    padding-top: 1.5rem;
}

.stat-item {
    flex: 1 1 0;
    padding: 0 24px 0 0;
    border-right: 1px solid #e8e8e8;
}

.stat-item:last-child {
    padding: 0 0 0 24px;
    border-right: none;
}

.stat-icon-number {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.stat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(1200%) hue-rotate(350deg) brightness(0.95) contrast(0.9);
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-dark);
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: clamp(0.875rem, 1vw, 1rem); /* 14→16px */
    font-weight: 400;
    line-height: 1.4;
    color: #888888;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .stat-label {
        font-size: 0.9375rem; /* 15px */
        white-space: normal;
    }
}

.company-image-wrap {
    margin: 0;
    line-height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.company-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    transform: scale(1);
    transition: transform 5s cubic-bezier(0.22, 1, 0.36, 1);
}

.company-image-wrap.company-in-view .company-image {
    transform: scale(1.15);
}

/* Scroll-in animation: section-company — каждый блок анимируется отдельно при 5% видимости */
.company-container .company-label,
.company-container .company-title,
.company-container .company-image-wrap,
.company-container .company-subtitle,
.company-container .company-text-block .company-text,
.company-container .company-stats .stat-item,
.company-container .company-signature-img {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Видимое состояние — единое для всех */
.company-container .company-label.company-in-view,
.company-container .company-title.company-in-view,
.company-container .company-image-wrap.company-in-view,
.company-container .company-subtitle.company-in-view,
.company-container .company-text-block .company-text.company-in-view,
.company-container .company-stats .stat-item.company-in-view,
.company-container .company-signature-img.company-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   SECTION ABOUT INTRO — полукруг + круг + текст
   ===================================================== */

/*
 * ЛОГИКА ГЕОМЕТРИИ (десктоп):
 *   Круг диаметр:       320px
 *   Полукруг ширина:    100px  (≈31% от диаметра круга — узкий)
 *   Полукруг высота:    320px  (= диаметру круга)
 *   Полукруг border-r:  0 160px 160px 0  (радиус = высота/2 = 160px)
 *   Перекрытие:         60px   (круг заходит на полукруг, выступ полукруга = 40px)
 *   Блок ширина:        100 + 320 - 60 = 360px
 *   Полукруг left: 0, Круг right: 0
 *   Полукруг z-index: 2 (поверх круга)
 */

.section-intro {
    background-color: #ffffff;
    padding: 48px 0 8px;
    overflow: visible;
}

/* Контейнер: увеличенный padding справа — круг не выходит за границы */
.intro-container {
    display: flex;
    align-items: center;
    gap: 36px;
    padding-right: 120px !important;
}

/* --- Левая колонка: текст (шире, меньше отступ до визуала) --- */
.intro-text-col {
    flex: 0 0 68%;
    min-width: 0;
}

.intro-title {
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text-dark);
    margin: 0 0 20px 0;
}

.intro-desc {
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.7;
    color: #555555;
    margin: 0;
    position: relative;
    padding-left: 20px;
}
.intro-desc::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #ED1C24;
    border-radius: 1px;
}

/* --- Правая колонка: фото + бейдж опыта --- */
.intro-graphic-col {
    flex: 0 0 420px;
    margin-left: auto;
    align-self: stretch;
    min-height: 280px;
}

.intro-photo-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    overflow: visible;
}

.intro-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Бейдж «20 лет опыта» --- */
.intro-badge {
    position: absolute;
    top: 50%;
    left: -32px;
    width: 180px;
    height: 180px;
    background: #ffffff;
    border: 5px solid #111111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 3;
    box-sizing: border-box;
}

.intro-badge-number {
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    color: #111111;
    letter-spacing: -0.04em;
}

.intro-badge-text {
    font-size: var(--fs-label);
    font-weight: 600;
    color: #111111;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* --- Зеркальный квадрат справа --- */
.intro-badge-mirror {
    position: absolute;
    top: 50%;
    left: -32px;
    right: auto;
    width: 180px;
    height: 180px;
    border: none;
    z-index: 3;
    box-sizing: border-box;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.intro-badge-mirror::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    background-color: #ffffff;
    z-index: 1;
}

.intro-badge-mirror::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/advanteges1.webp');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    filter: grayscale(100%) brightness(0.55);
    z-index: 0;
}

.intro-badge-mirror-number {
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    z-index: 2;
    color: transparent;
    background-image: url('../assets/images/advanteges1.webp');
    background-size: 180px 180px;
    background-position: left center;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: grayscale(100%) brightness(0.55);
}

.intro-badge-mirror-text {
    font-size: var(--fs-label);
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.2;
    z-index: 2;
    color: transparent;
    background-image: url('../assets/images/advanteges1.webp');
    background-size: 180px 180px;
    background-position: left center;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: grayscale(100%) brightness(0.55);
}

/* =====================================================
   АНИМАЦИИ: about-intro — появление при скролле
   ===================================================== */
.intro-text-col .intro-title,
.intro-text-col .intro-desc {
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-text-col .intro-title {
    transform: translateY(60px);
    transition-delay: 0ms;
}

.intro-text-col .intro-desc {
    transform: translateY(60px);
    transition-delay: 150ms;
}

/* Анимация фото-колонки */
.intro-photo-wrap {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 80ms;
}

.intro-badge,
.intro-badge-mirror {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 350ms;
}

.intro-badge {
    transform: translateY(calc(-50% + 30px));
}

.intro-badge-mirror {
    transform: translateY(calc(-50% + 30px));
}

/* Активные (видимые) состояния */
.intro-title.intro-in-view,
.intro-desc.intro-in-view {
    opacity: 1;
    transform: translateY(0);
}

.intro-photo-wrap.intro-in-view {
    opacity: 1;
    transform: translateX(0);
}

.intro-badge.intro-in-view,
.intro-badge-mirror.intro-in-view {
    opacity: 1;
    transform: translateY(-50%);
}

/* =====================================================
   ПЛАНШЕТ (max-width: 1024px)
   Круг: 260px, полукруг: 130px (=260/2 ✓), overlap: 50px
   visual w: 130+260-50=340px
   ===================================================== */
@media (max-width: 1024px) {
    .section-intro {
        padding: 40px 0 44px;
    }

    .intro-container {
        gap: 32px;
        padding-right: 0 !important;
    }

    .intro-text-col {
        flex: 0 0 46%;
    }

    .intro-graphic-col {
        flex: 0 0 300px;
    }

    .intro-badge {
        width: 150px;
        height: 150px;
        left: -20px;
    }

    .intro-badge-mirror {
        width: 150px;
        height: 150px;
        left: -20px;
        right: auto;
    }

    .intro-badge-mirror-number {
        font-size: 58px;
        background-size: 150px 150px;
    }

    .intro-badge-mirror-text {
        font-size: 13px;
        background-size: 150px 150px;
    }

    .intro-badge-number {
        font-size: 58px;
    }

    .intro-badge-text {
        font-size: 13px;
    }

}

/* =====================================================
   МОБИЛЬНЫЙ (max-width: 568px) — вертикальная компоновка
   ===================================================== */
@media (max-width: 568px) {
    .section-intro {
        padding: 36px 0 60px;
    }

    .intro-container {
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
        padding-right: var(--container-padding) !important;
    }

    .intro-text-col {
        flex: none;
        width: 100%;
        order: 1;
    }

    .intro-graphic-col {
        order: 2;
        flex: none;
        width: 100%;
        margin-left: 0;
        min-height: 240px;
    }

    .intro-photo-wrap {
        min-height: 240px;
    }

    .intro-badge {
        width: 130px;
        height: 130px;
        left: -8px;
        border-width: 4px;
    }

    .intro-badge-mirror {
        width: 130px;
        height: 130px;
        top: auto;
        bottom: -30px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(30px);
    }

    .intro-badge-mirror.intro-in-view {
        transform: translateX(-50%) translateY(0);
    }

    .intro-badge-mirror-number {
        font-size: 50px;
        background-size: 130px 130px;
        background-position: center center;
    }

    .intro-badge-mirror-text {
        font-size: 12px;
        background-size: 130px 130px;
        background-position: center center;
    }

    .intro-badge-mirror::after {
        background-position: center center;
    }

    .intro-badge-number {
        font-size: 50px;
    }

    .intro-badge-text {
        font-size: 12px;
    }

}


@media (max-width: 1024px) {
    .hero-home-container {
        padding: 100px var(--container-padding) 72px;
    }

    .hero-label {
        margin-bottom: 16px;
    }

    .hero-title {
        margin-bottom: 16px;
    }

    .action-btn {
        padding: 12px 20px;
    }

    /* hero-services: снимаем десктопное ограничение ширины (60vw) */
    .hero.hero-services .hero-container {
        padding-top: 100px;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        width: 100%;
        max-width: 100%;
    }
    .hero.hero-services .hero-content {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }

}

/* ── Section-company: планшет 569–1024px ── */
@media (min-width: 569px) and (max-width: 1024px) {
    /* company-container становится главной сеткой:
       изображение слева на всю высоту, заголовок + контент справа */
    .company-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "img  title"
            "img  body";
        column-gap: clamp(20px, 3vw, 36px);
        row-gap: 0;
    }
    /* Заголовок выравниваем к низу своей ячейки и снимаем ограничение ширины */
    .company-title {
        grid-area: title;
        max-width: 100%;
        align-self: end;
        margin-bottom: clamp(16px, 2vw, 28px);
    }
    /* Растворяем company-two-col — его дети входят напрямую в сетку */
    .company-two-col {
        display: contents;
    }
    .company-col-left {
        grid-area: img;
        display: block;
    }
    /* Изображение на всю высоту секции */
    .company-col-left .company-image-wrap {
        max-width: 100%;
        height: 100%;
    }
    .company-col-left .company-image-wrap .company-image {
        height: 100%;
        object-fit: cover;
    }
    .company-col-right {
        grid-area: body;
        align-self: start;
    }
}

@media (max-width: 568px) {
    .hero-bg {
        transform: scale(1.3);
    }

    .hero-animated .hero-bg {
        animation-name: heroZoomOutMobile;
    }

    @keyframes heroZoomOutMobile {
        0% {
            transform: scale(2);
        }

        100% {
            transform: scale(1.3);
        }
    }

    .hero-overlay {
        background: rgba(0, 0, 0, 0.52);
    }

    .hero-home-container {
        padding: 100px var(--container-padding) 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
    }

    .hero-home-content {
        max-width: 100%;
    }

    .hero-label {
        display: inline-block;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        margin-bottom: 24px;
        color: rgba(255, 255, 255, 0.65);
        border-left: 2px solid var(--color-accent);
        padding-left: 10px;
    }

    .hero-title {
        line-height: 1.1;
        font-weight: 800;
        margin-bottom: 20px;
        letter-spacing: -0.025em;
    }

    .hero-title span {
        display: block;
    }

    .hero-desc {
        line-height: 1.55;
        margin-bottom: 28px;
        max-width: 90%;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.88);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .action-btn {
        padding: 14px 26px;
    }

    .action-btn--primary {
        padding: 14px 20px 14px 26px;
    }

    .action-btn--secondary {
        padding: 14px 30px;
    }

    .hero-features {
        display: none;
    }

    .company-title {
        margin-bottom: 32px;
    }

    .company-two-col {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0;
    }

    .company-col-left {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 28px;
    }

    .company-col-left .company-image-wrap {
        max-width: 100%;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }

    /* Gradient overlay на изображении */
    .company-image-wrap.company-image-overlay::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
        border-radius: 0 0 12px 12px;
        pointer-events: none;
    }

    .company-image {
        border-radius: 12px;
    }

    .company-col-right {
        grid-column: 1;
        grid-row: 2;
    }

    /* Подзаголовок — акцентная красная полоса слева */
    .company-subtitle {
        font-weight: 700;
        border-left: 2px solid var(--color-accent);
        padding-left: 14px;
        margin-bottom: 1.2rem;
        line-height: 1.35;
    }

    /* Второй абзац — акцентный блок */
    .company-text-block .company-text:nth-child(2) {
        background: #f5f5f5;
        border-left: 2px solid var(--color-accent);
        padding: 16px 18px;
        border-radius: 0 8px 8px 0;
        margin: 1.2em 0;
        font-style: italic;
        color: #555;
    }

    /* Первый и третий абзацы — обычный стиль с увеличенным отступом */
    .company-text-block .company-text {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 1.1em;
    }

    .company-signature {
        margin-top: 1.2rem;
        margin-right: 0;
        text-align: right;
    }

    .company-container {
        padding: 12px var(--container-padding) 48px;
    }

    .hero-animated .hero-title,
    .hero-animated .hero-label,
    .hero-animated .hero-desc,
    .hero-animated .hero-buttons {
        animation-name: heroSlideInUp;
    }
}


.hero.hero-services .hero-container {
    padding-top: 4rem;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    position: relative;
    z-index: 2;
    width: calc(60vw - var(--hero-left));
    max-width: 1100px;
}

.hero.hero-services .hero-content {
    max-width: 1100px;
}

/* ── hero-services: анимация появления ── */
.hero.hero-services.hero-animated .hero-bg {
    animation: heroServicesBgZoom 2s ease-out forwards;
}

@keyframes heroServicesBgZoom {
    0%   { transform: scale(1.15); }
    100% { transform: scale(1.0); }
}

/* hero-services и hero-home: единый стиль заголовка */
.hero.hero-services .hero-content h1.hero-title,
.hero.hero-home .hero-title {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.hero.hero-services .title-lines span,
.hero.hero-home .title-lines span {
    font-weight: 600;
}

.hero.hero-services.hero-animated .hero-title {
    animation: none;
}

.hero.hero-services .title-lines span,
.hero.hero-home .title-lines span {
    opacity: 0;
    transform: translateY(220px);
    animation: none;
}

.hero.hero-services.hero-animated .title-lines span,
.hero.hero-home.hero-animated .title-lines span {
    animation: heroServicesSlideUpFromBottom 0.7s ease-out both;
}

.hero.hero-services.hero-animated .title-lines span:nth-child(1),
.hero.hero-home.hero-animated .title-lines span:nth-child(1) {
    animation-delay: 0.25s;
}

.hero.hero-services.hero-animated .title-lines span:nth-child(2),
.hero.hero-home.hero-animated .title-lines span:nth-child(2) {
    animation-delay: 0.5s;
}

.hero.hero-services.hero-animated .title-lines span:nth-child(3),
.hero.hero-home.hero-animated .title-lines span:nth-child(3) {
    animation-delay: 0.75s;
}

/* hero-home: лейбл первым, затем заголовок; hero-desc — скрыт до анимации */
.hero.hero-home .hero-label {
    opacity: 0;
    transform: translateY(220px);
    animation: none;
}

.hero.hero-home .hero-desc {
    opacity: 0;
    transform: translateY(220px);
}

.hero.hero-home.hero-animated .hero-label {
    animation: heroServicesSlideUpFromBottom 0.7s ease-out 0.05s both;
}

.hero.hero-home.hero-animated .title-lines span:nth-child(1) {
    animation-delay: 0.35s;
}

.hero.hero-home.hero-animated .title-lines span:nth-child(2) {
    animation-delay: 0.6s;
}

@keyframes heroServicesSlideUpFromBottom {
    0%   { opacity: 0; transform: translateY(220px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Мгновенный показ hero: кнопка «Назад» / «← Все проекты» */
.hero.hero-restored .hero-label,
.hero.hero-restored .hero-desc,
.hero.hero-restored .hero-title,
.hero.hero-restored .hero-buttons,
.hero.hero-restored .title-lines span,
.hero.hero-restored .hero-bg {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

.section-spacer {
    padding: 0;
    background-color: #ffffff;
    overflow: hidden;
}

.section-spacer-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--container-padding) clamp(2rem, 5vw, 4rem) var(--container-padding);
    display: flex;
    align-items: center;
    gap: var(--gap-section);
    position: relative;
}


/* Текстовый блок */
.spacer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Текст секции-разделителя — как intro-title */
.section-spacer-text,
.spacer-lead {
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text-dark);
}
.spacer-lead {
    margin: 0 0 20px 0;
}

/* Горизонтальная линия скрыта — заменена вертикальной у spacer-sub */
.spacer-rule {
    display: none;
}

/* Второе предложение — как intro-desc, с вертикальной красной линией слева */
.spacer-sub {
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.7;
    color: rgba(77, 76, 76, 0.75);
    margin: 0;
    position: relative;
    padding-left: 20px;
}
.spacer-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #ED1C24;
    border-radius: 1px;
}

/* Разрешение окна браузера (для отладки) */
/* Вертикальная декоративная надпись справа */
.spacer-side-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(17, 17, 17, 0.1);
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: stretch;
    text-align: start;
    word-break: keep-all;
    overflow-wrap: normal;
    user-select: none;
}


/* Мобильный */
@media (max-width: 568px) {
    .section-spacer-inner {
        align-items: flex-start;
    }

    .spacer-side-label {
        display: none;
    }
}

/* =====================================================
   SECTION CLIENTS MARQUEE — бегущая строка логотипов
   ===================================================== */
.section-clients-marquee {
    background-color: #ffffff;
    padding: 0 0 56px;
    overflow: hidden;
}

/* --- Разделитель с текстом по центру --- */
.clients-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 48px;
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.clients-divider.clients-divider-in-view {
    opacity: 1;
    transform: translateY(0);
}

.section-clients-marquee.clients-marquee-in-view .clients-track-wrap {
    opacity: 1;
    transform: translateY(0);
}

/* Горизонтальная линия на весь контейнер */
.clients-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #e8e8e8;
}

/* Pill-бейдж с текстом */
.clients-divider-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 6px 20px;
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    font-size: var(--fs-label);
    font-weight: 500;
    color: #555555;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* --- Обёртка бегущей строки: скрывает то что за краями --- */
.clients-track-wrap {
    overflow: hidden;
    width: 100%;
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* Мягкое затухание по краям через mask */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}

/* --- Трек: flex-ряд, transform управляется JS (автоскролл + drag) --- */
.clients-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
}

.clients-track-wrap {
    cursor: grab;
    user-select: none;
}

.clients-track-wrap.is-dragging {
    cursor: grabbing;
}

/* --- Один элемент-логотип --- */
.clients-item {
    flex-shrink: 0;
    padding: 0 48px;
    border-right: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
}

.clients-item:last-child {
    border-right: none;
}

.clients-item img {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    /* Все логотипы в одном сером тоне */
    filter: saturate(0) brightness(0.35);
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease;
    display: block;
}

.clients-item:hover img {
    filter: saturate(1) brightness(1);
    opacity: 1;
}

/* --- @media: мобильная версия — увеличенная высота секции и содержимого --- */
@media (max-width: 568px) {
    .section-clients-marquee {
        padding: 32px 0 40px;
    }
    .clients-divider {
        margin-bottom: 40px;
    }
    .clients-item {
        padding: 0 32px;
        height: 88px;
    }
    .clients-item img {
        height: 42px;
        max-width: 140px;
    }
}


/* ========== Секция design 6 (пиксель в пиксель) ========== */
.section-advantages {
    background-color: #ffffff;
    padding: 0;
    overflow: hidden;
}

.advantages-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    min-height: 720px;
    align-items: stretch;
    box-sizing: border-box;
}

.advantages-content {
    grid-column: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
    padding: 64px 24px 64px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.advantages-image-col {
    grid-column: 2;
    position: relative;
    z-index: 1;
    line-height: 0;
    height: 720px;
    min-width: 0;
    overflow: hidden;
}

.advantages-image-col .advantages-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.4) contrast(1.05);
}

.advantages-image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.4) contrast(1.05);
}

.advantages-divider {
    position: absolute;
    top: 0;
    left: 140px;
    right: 100px;
    height: 2px;
    background-color: #e8e8e8;
    z-index: 10;
}

.advantages-heading {
    font-family: var(--font-primary);
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.25;
    color: #222222;
    margin: -48px 0 96px 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

.advantage-cards {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

.advantage-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    padding: var(--card-padding);
    position: relative;
}

.advantage-card-icon {
    flex-shrink: 0;
    margin-bottom: 20px;
    line-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.advantage-card-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(1200%) hue-rotate(350deg) brightness(0.95) contrast(0.9);
    transform-origin: center bottom;
    transition: transform 0.2s ease-out;
}

/* Lift → drop → two fading bounces (относительные величины — малые иконки поднимаются меньше, большие выше) */
@keyframes advantage-icon-bounce {
    0% {
        transform: translateY(0);
    }

    26% {
        transform: translateY(-50%);
    }

    /* поднимается вверх */
    48% {
        transform: translateY(8%);
    }

    /* падает, приземление с проседанием */
    58% {
        transform: translateY(-4%);
    }

    /* первый подскок */
    66% {
        transform: translateY(2%);
    }

    /* второе проседание */
    74% {
        transform: translateY(-1%);
    }

    /* второй затухающий подскок */
    100% {
        transform: translateY(0);
    }
}

/* Bounce-анимация при наведении (относительные величины — масштабируется под размер иконки) */
.stat-item:hover .stat-icon,
.advantage-card:hover .advantage-card-icon img {
    animation: advantage-icon-bounce 0.75s ease-in-out forwards;
}

.advantage-card-title {
    font-family: var(--font-primary);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    color: #222222;
    margin: 0 0 14px 0;
    text-align: center;
}

.advantage-card-desc {
    font-family: var(--font-primary);
    font-size: var(--fs-secondary);
    font-weight: 400;
    line-height: 1.6;
    color: #666666;
    margin: 0;
    flex: 1;
    text-align: left;
}

/* Линия: появляется и прорисовывается слева направо */
.section-advantages .advantages-divider {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Progressive disclosure / Scroll storytelling — заголовок */
.section-advantages .advantages-heading {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Progressive disclosure: карточки — выезд слева направо, триггер при 50% видимости */
.section-advantages .advantage-cards .advantage-card {
    opacity: 0;
    transform: translateX(-180px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ≥1280px: появление по очереди */
@media (min-width: 1280px) {
    .section-advantages .advantage-cards .advantage-card:nth-child(1) { transition-delay: 0ms; }
    .section-advantages .advantage-cards .advantage-card:nth-child(2) { transition-delay: 150ms; }
    .section-advantages .advantage-cards .advantage-card:nth-child(3) { transition-delay: 300ms; }
}

/* Progressive disclosure: картинка — выезд справа из за экрана влево */
.section-advantages .advantages-image {
    opacity: 0;
    transform: translateX(120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-advantages .advantages-divider.advantages-in-view {
    opacity: 1;
    transform: scaleX(1);
}

.section-advantages .advantages-heading.advantages-in-view {
    opacity: 1;
    transform: translateY(0);
}

.section-advantages .advantages-image.advantages-in-view {
    opacity: 1;
    transform: translateX(0);
}

.section-advantages .advantage-card.advantages-in-view {
    opacity: 1;
    transform: translateX(0);
    transform-origin: bottom;
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s ease, box-shadow 0.35s ease;
    pointer-events: none;
}

.section-advantages .advantage-card.advantages-in-view.advantages-animation-done {
    pointer-events: auto;
}

.section-advantages .advantage-card.advantages-in-view.advantages-animation-done:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Планшеты и десктоп до 1024px: одна колонка, карточки столбиком; картинка — полноэкранный фон секции, заголовок белый */
@media (max-width: 1024px) {
    .section-advantages {
        position: relative;
        background-image: url('../assets/images/close-up-businessman-holding-briefcase.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #1a1a1a;
        padding-bottom: 48px;
    }

    .section-advantages::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 0;
        pointer-events: none;
    }

    .section-advantages .advantages-wrap {
        position: relative;
        z-index: 1;
        grid-template-columns: 1fr;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    /* Колонку с картинкой скрываем — фон секции уже показывает это изображение */
    .section-advantages .advantages-image-col {
        display: none;
    }

    /* Равные промежутки: начало секции → линия, линия → заголовок, заголовок → первая карточка (как на мобильной) */
    .section-advantages .advantages-content {
        padding: 58px 0 48px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        align-items: stretch;
        box-sizing: border-box;
    }

    .section-advantages .advantages-heading {
        color: #ffffff;
        margin-top: 0;
        margin-bottom: 28px;
    }

    .section-advantages .advantages-divider {
        background-color: rgba(255, 255, 255, 0.5);
        top: 28px;
    }

    .advantages-divider {
        left: 15%;
        right: 15%;
        width: auto;
    }

    .section-advantages .advantage-cards {
        margin: 0;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 20px;
        box-sizing: border-box;
    }

    .section-advantages .advantage-cards .advantage-card {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        flex: 0 0 auto;
        transform: translateY(32px);
        box-sizing: border-box;
    }

    .section-advantages .advantage-cards .advantage-card.advantages-in-view {
        transform: translateY(0);
    }
}

/* Десктоп: карточки advantages — от левого края контента с отступом ~100px от правого края секции */
@media (min-width: 1025px) {
    .section-advantages .advantage-cards {
        align-self: flex-start;
        width: calc(100vw - 200px);
        max-width: calc(var(--container-width) - 200px);
    }
}

@media (max-width: 568px) {
    .section-advantages .advantage-cards {
        flex-direction: column;
    }

    .section-advantages .advantage-card {
        min-width: 0;
    }

    .section-advantages .advantages-heading {
        margin-top: 28px;
        margin-bottom: 32px;
    }

    .section-advantages .advantages-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .section-advantages .advantages-content {
        padding: 40px 12px 32px;
    }

    .advantages-divider {
        left: 20%;
        right: 20%;
        top: 24px;
    }
}


.section-container {
    padding: 0 0 40px 40px;
    max-width: 720px;
    margin-left: max(0px, calc((100vw - 1400px) / 2));
    margin-right: auto;
}

.section-label {
    font-size: var(--fs-label);
    letter-spacing: 0.12em;
    color: rgba(77, 76, 76, 0.7);
    margin-bottom: 14px;
}

.section-heading {
    font-size: var(--fs-h2);
    line-height: 1.1;
    font-weight: 500;
    color: rgba(17, 17, 17, 1);
    margin-bottom: 16px;
}

.section-text {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: rgba(77, 76, 76, 0.9);
    max-width: none;
    margin-bottom: 8px;
}

.stages-section .section-text {
    max-width: 640px;
}

.history-signature {
    display: block;
    margin-top: 0;
    margin-left: auto;
    margin-right: 60px;
    height: 48px;
    width: auto;
    max-width: 100%;
}

.history-section {
    padding-bottom: 40px;
}

.section-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.669);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(77, 76, 76, 1);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.section-btn:hover {
    background-color: #a3a5a7;
    border-color: transparent;
    color: #ffffff;
}

.hero-container {
    --hero-left: max(0px, calc((100vw - 1400px) / 2));
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 7rem;
    /* Push content down from header */
    padding-bottom: 60px;
    align-items: flex-start;
    margin-left: var(--hero-left);
    margin-right: auto;
    width: calc(50vw - var(--hero-left));
    max-width: 660px;
}

.hero-content {
    width: 100%;
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    text-align: left;
}

.hero-content h1 {
    margin-left: 0;
    margin-right: 0;
}


.title-lines span {
    display: block;
    opacity: 0;
    transform: translateY(10px);
    animation: lineFadeUp 0.7s ease-out forwards;
}

.title-lines span:nth-child(1) {
    animation-delay: 0.1s;
}

.title-lines span:nth-child(2) {
    animation-delay: 0.25s;
}

.title-lines span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes lineFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .title-lines span {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Hero Stats - Bottom Right */
.hero-stats-panel {
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 100px 180px;
    pointer-events: none;
}

.hero-stats {
    display: flex;
    justify-content: flex-start;
    gap: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
    pointer-events: auto;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0));
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 6px;
}


/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero {
        min-height: 500px;
    }

    .hero-content h1.title-lines,
    .hero-content h1 .title-lines {
        position: relative;
        z-index: 1;
    }

    .hero-content h1 span {
        position: relative;
        z-index: 1;
    }

    .title-lines span {
        white-space: nowrap;
    }

    .hero-content {
        max-width: 100%;
    }

    .main-nav ul {
        gap: clamp(8px, 2vw, 25px);
    }

    .main-nav a {
        font-size: 13px;
    }
}

@media (min-width: 569px) and (max-width: 1024px) {
    /* Nav выходит из absolute-центрирования, занимает всё место между логотипом и правыми кнопками */
    .main-nav {
        position: static;
        flex: 1 1 0;
        transform: none;
        left: auto;
        justify-content: center;
        margin-left: 8px;
    }
    .main-nav ul {
        width: 100%;
        justify-content: center;
        gap: clamp(6px, 1.8vw, 22px);
    }
}

@media (max-width: 568px) {
    .logo {
        position: relative;
        left: 0;
        top: auto;
    }

    .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .logo img.logo-desktop {
        display: none;
    }

    .logo img.logo-mobile {
        display: block;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        right: 0;
        left: auto;
        width: 66.666%;
        height: calc(100vh - var(--header-height));
        max-height: none;
        background-color: #ffffff;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 999;
        overflow-y: auto;
        transform: translateX(100%);
        opacity: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .main-nav.is-open {
        transform: translateX(0);
    }

    .menu-overlay {
        position: fixed;
        top: calc(var(--header-height) - 20vh);
        left: 0;
        right: 0;
        bottom: auto;
        height: calc(100vh - var(--header-height) + 40vh);
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .menu-overlay.is-active {
        transform: translateX(0);
        pointer-events: auto;
        transition-delay: 0s;
    }

    .menu-overlay:not(.is-active) {
        transition-delay: 0.4s;
    }

    /* При уменьшенной высоте хедера (is-scrolled) — меню и оверлей без щели */
    .main-header.is-scrolled .main-nav {
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
    }

    .main-header.is-scrolled ~ .menu-overlay {
        top: calc(var(--header-height) - 20vh);
        height: calc(100vh - var(--header-height) + 40vh);
    }

    .main-nav.is-open {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    }

    .main-nav:not(.is-open) {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 32px 0 24px 0;
        align-items: stretch;
        justify-content: flex-start;
        align-self: flex-start;
        height: auto;
        width: 100%;
    }

    .main-nav li {
        display: block;
        position: relative;
        border-bottom: none;
        width: 100%;
    }

    .main-nav li::before {
        display: none;
    }

    .main-nav li::after {
        display: none;
    }

    .main-nav a {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        padding: 18px 24px;
        font-size: 16px;
        font-weight: 400;
        text-align: right;
        color: #111111;
        text-decoration: none;
        box-sizing: border-box;
    }

    .main-nav a::after {
        display: none;
    }

    .main-nav a span {
        color: #111111;
    }

    .main-nav li.active a,
    .main-nav li.active a span {
        color: #d12a2a;
        text-decoration: underline;
        text-underline-offset: 6px;
    }

    .main-nav li.active a::after {
        color: #d12a2a;
    }

    .nav-chevron {
        display: none;
    }

    .main-nav a:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
}


@media (max-width: 568px) {

    /* === Unified hero for both pages === */
    .hero {
        height: auto;
        min-height: 55vh;
        padding: 0;
        position: relative;
    }

    /* Services hero: override desktop padding for mobile */
    .hero.hero-services {
        padding: 0;
        min-height: 55vh;
        height: auto;
    }

    /* Dark gradient overlay — applies to both heroes */
    .hero::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 20%;
        background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 40%);
        z-index: 1;
        pointer-events: none;
    }

    .hero.hero-home::after {
        display: block;
        width: 0%;
        left: auto;
        right: 0;
        background-color: rgba(234, 236, 243, 0.5);
    }

    .hero.hero-home.hero-animated::after {
        width: 33.333%;
        animation: heroCurtainSlideMobile 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* Both hero containers: same top padding (clears header) */
    .hero-container {
        position: relative;
        z-index: 2;
        padding-top: 120px;
        padding-bottom: 0;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    /* Services hero container: match index (override desktop 4rem), full width, same padding as hero-home */
    .hero.hero-services .hero-container {
        padding-top: 120px;
        padding-bottom: 0;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        width: 100%;
        max-width: 100%;
    }

    .hero.hero-services .hero-content {
        max-width: 100%;
        width: 100%;
    }

    .hero-content {
        max-width: 100%;
        padding: 0;
        position: relative;
        z-index: 2;
    }

    .title-lines span {
        white-space: normal;
    }

    /* Stats panel: flows below content, no own background */
    .hero-stats-panel {
        position: relative;
        z-index: 2;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        padding: 0 var(--container-padding) 24px;
        align-items: stretch;
    }

    .hero-stats {
        flex-direction: row;
        gap: 30px;
        align-items: flex-start;
        width: 100%;
        padding: 16px 0 0;
        background: none;
        border-radius: 0;
        margin-top: 20px;
    }

    .stat-item {
        flex: 1;
    }

    /* === Content sections below heroes: matching top padding === */
    .section-container {
        padding-top: 40px;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        margin-left: 0;
    }

}



/* =====================================================
   SECTION CTA — «Давайте начнём»
   ===================================================== */

/* Внешняя секция: белый фон */
.section-cta {
    background-color: #ffffff;
    padding: 0 0 48px;
    margin: 0;
    overflow: visible;
}

/* .container внутри задаёт padding сверху и max-width */
.section-cta > .container {
    padding-top: 32px;
    padding-bottom: 0;
}

/* Анимация появления CTA (как у hero-home-below) */
.section-cta .cta-container {
    opacity: 0;
    transform: translateY(260px);
    transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1), transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-cta .cta-container.cta-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Обёртка: карточка + нижняя тень */
.cta-card-wrap {
    display: flex;
    flex-direction: column;
}

/* Карточка: обёртка */
.cta-inner {
    display: flex;
    align-items: stretch;
    min-height: 280px;
    position: relative;
}

/* Общий родитель: скругления, серая обводка, логотип справа как подложка */
.cta-inner-box {
    position: relative;
    flex: 1;
    min-height: 280px;
    background-color: #ffffff;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--color-shade-border);
    border-bottom: none;
    overflow: hidden;
}

/* Логотип справа — фон-подложка */
.cta-inner-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../assets/LOGO_S-grey.svg');
    background-size: 42%;
    background-position: right -8% center;
    background-repeat: no-repeat;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 48px 48px 56px;
    max-width: 58%;
}

.cta-heading {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-dark);
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.cta-desc {
    font-size: var(--fs-secondary);
    font-weight: 400;
    line-height: 1.65;
    color: #555555;
    margin: 0 0 32px 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .cta-desc br {
        display: none;
    }
}

/* Кнопка: прямоугольник как input, текст слева, иконка справа (ссылка или <button>) */
a.cta-btn.action-btn,
button.cta-btn.action-btn {
    border-radius: 6px !important;   /* перебиваем 999px из базового класса */
    background-color: #ffffff;
    color: var(--color-text-dark);
    border: 1px solid #d0d0d0;
    width: 100%;
    max-width: 560px;
    padding: 14px 16px 14px 24px;
    justify-content: space-between;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
    font-size: var(--fs-secondary);
    font-weight: 500;
    transition: border-color 0.3s ease, color 0.4s ease;
}

button.cta-btn.action-btn {
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

a.cta-btn.action-btn:hover,
button.cta-btn.action-btn:hover {
    border-color: #b0b0b0;
    color: #ffffff;
}

a.cta-btn .action-btn-icon,
button.cta-btn .action-btn-icon {
    background-color: rgba(255, 68, 51, 1);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* При наведении иконка «закрашивает» всю кнопку полностью */
a.cta-btn.action-btn:hover .action-btn-icon,
button.cta-btn.action-btn:hover .action-btn-icon {
    transform: scale(35);
}

/* Скрываем стрелку внутри кружка для cta-btn — используем button::after */
a.cta-btn .action-btn-icon::after,
button.cta-btn .action-btn-icon::after {
    content: none;
}

/* Стрелка cta-btn: живёт прямо в кнопке, не внутри масштабируемого кружка */
@keyframes sp-arrow-bounce {
    0%   { transform: scale(1); }
    45%  { transform: scale(4); }
    100% { transform: scale(1); }
}

a.cta-btn.action-btn::after,
button.cta-btn.action-btn::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M17 7v10M17 7H7' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    pointer-events: none;
}

a.cta-btn.action-btn:hover::after,
button.cta-btn.action-btn:hover::after {
    animation: sp-arrow-bounce 0.4s ease-in-out 0s both;
}

/* Нижняя тень по форме карточки — скругления снизу (левый и правый нижние углы) */
.cta-stripe {
    width: 100%;
    height: 18px;
    background-color: var(--color-shade-fill);
    border-radius: 0 0 16px 16px;
    border: 1px solid var(--color-shade-border);
    border-top: none;
    display: block;
    margin-top: 0;
}

/* ---- Планшет 1024px ---- */
@media (max-width: 1024px) {
    .section-cta > .container { padding-top: 24px; }
    .cta-content { padding: 48px 40px 48px 48px; }
    a.cta-btn.action-btn,
    button.cta-btn.action-btn { max-width: 480px; }
}

/* ---- Мобильный 568px ---- */
@media (max-width: 568px) {
    .section-cta > .container { padding-top: 20px; }
    .cta-inner { min-height: 0; }
    .cta-inner-box {
        flex-direction: column;
        min-height: 0;
        border-radius: 12px 12px 0 0;
    }
    .cta-stripe { border-radius: 0 0 12px 12px; height: 14px; }
    .cta-content { padding: 40px 28px 36px; max-width: 100%; }
    a.cta-btn.action-btn,
    button.cta-btn.action-btn { max-width: 50%; width: 50%; }
    .cta-inner-box::before {
        background-size: 680px auto;
        background-position: calc(100% + 180px) bottom;
        opacity: 0.4;
    }
}

/* Footer */
.site-footer {
    background-color: #dce0e8;
    color: #111111;
    padding: 48px 0 20px;
    /* Reduced padding */
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Reduced gap */
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    /* Reduced gap */
}

.footer-brand {
    max-width: 420px;
}

.footer-logo img {
    height: 30px;
    margin-bottom: 15px;
    /* Reduced margin */

    /* Logo white */
    opacity: 1;
}

.footer-desc {
    font-size: var(--fs-secondary);
    color: rgba(77, 76, 76, 0.9);
    line-height: 1.6;
}

.footer-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    /* Reduced margin */
    color: #111111;
}

.footer-nav ul,
.footer-contact ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Compact list */
}

.footer-nav a,
.footer-contact a,
.footer-contact li {
    font-size: var(--fs-secondary);
    color: rgba(77, 76, 76, 0.9);
    transition: color 0.3s ease;
}

.footer-nav a:hover,
.footer-contact a:hover {
    color: #d12a2a;
    /* Brand color hover */
}

.footer-nav a.is-current {
    color: #d12a2a;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    /* Light border */
    padding-top: 15px;
    /* Reduced padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright {
    font-size: var(--fs-secondary);
    color: rgba(77, 76, 76, 0.6);
}

/* Кнопка «Наверх» — круглая, справа на уровне футера */
.scroll-to-top {
    position: fixed;
    right: var(--container-padding);
    bottom: 120px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 800;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scroll-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.scroll-to-top svg {
    width: 20px;
    height: 20px;
    color: #111111;
}

@media (min-width: 569px) and (max-width: 1024px) {
    .footer-top {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: start;
        gap: 20px;
        flex-wrap: unset;
        justify-content: unset;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-nav {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .footer-nav ul {
        align-items: center;
    }

    .footer-contact {
        text-align: right;
    }

    .footer-contact ul {
        align-items: flex-end;
    }
}

@media (max-width: 568px) {
    .site-footer {
        padding: 30px 0 20px;
        width: 100%;
        overflow-x: hidden;
    }

    .site-footer .footer-container {
        padding: 0 var(--container-padding);
        max-width: 100%;
    }

    .footer-container {
        gap: 20px;
    }

    .footer-top {
        flex-direction: column;
        gap: 24px;
    }

    .footer-brand {
        max-width: 100%;
        text-align: center;
    }

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

    .footer-logo img {
        margin-bottom: 10px;
    }

    .footer-desc {
        text-align: center;
    }

    .footer-nav {
        display: none;
    }

    .footer-contact {
        text-align: center;
    }

    .footer-contact ul {
        align-items: center;
    }

    .footer-title {
        display: none;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .footer-copyright {
        font-size: 0.8rem;
    }

    .scroll-to-top {
        right: var(--container-padding);
        bottom: 80px;
        width: 44px;
        height: 44px;
    }

    .scroll-to-top svg {
        width: 18px;
        height: 18px;
    }
}

/* Stages Section */
.stages-section {
    padding: 24px 0 160px; /* +100px: компенсация margin-bottom -100px у stages-layout */
    background-color: #eaecf3;
    /* Match body bg */
}

.stages-section .container {
    padding-bottom: 0;
}

/* Обёртка: контент + sticky-лейбл справа (десктоп) */
.stages-with-label {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.stages-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 48px;
}

/* Шапка секции: заголовок слева — два равных столбца с текстом */
.stages-header-row {
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    transition: top 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.stages-header-row.stages-header-row--hidden {
    opacity: 0;
    transform: translateY(-24px);
    pointer-events: none;
}

.stages-header-inner {
    margin-bottom: 0;
}

/* Текст справа — второй столбец */
.stages-header-right {
    flex: 1 1 0%;
    min-width: 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease;
}

.stages-header-right.stages-header-right--hidden {
    opacity: 0;
    transform: translateY(-24px);
    pointer-events: none;
}


.stages-section .stages-header-right .section-text.stages-experience-text {
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-dark);
    max-width: none;
    margin: 0;
}

.stages-section .section-heading.stages-experience-title {
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 16px 0 0 0;
    letter-spacing: -0.02em;
}

/* Вертикальный лейбл справа — sticky на десктопе (как stage-card на мобильной) */
.stages-section .section-label.stages-side-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(17, 17, 17, 0.1);
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    align-items: center;
    user-select: none;
    margin-bottom: 0;
    position: sticky;
    top: 20px;
    transition: top 0.3s ease;
}

.stages-layout {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
    margin-top: 0;
    margin-bottom: -100px; /* Sticky заканчивается на 100px раньше конца секции */
}

.stages-content {
    max-width: 640px;
    overflow: visible;
}

.stages-grid-sticky {
    overflow: visible;
}

.stages-media {
    position: sticky;
    top: calc(50vh - var(--stages-media-half, 0px));
    align-self: start;
    height: var(--stages-media-height, auto);
    min-height: 320px;
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stages-media.stages-media-in-view {
    opacity: 1;
    transform: translateX(0);
}

.stages-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    object-fit: cover;
    transform-origin: center center;
}

.stages-image.is-active {
    opacity: 1;
}

.stages-image:first-child {
    transform: rotate(0deg);
}

.stages-image:nth-child(2) {
    transform: rotate(-30deg);
}

.stages-image:nth-child(3) {
    transform: rotate(-25deg);
}

.stages-image:nth-child(4) {
    transform: rotate(-60deg);
}

.stages-image:nth-child(5) {
    transform: rotate(-75deg);
}

.stages-grid {
    display: block;
    margin-top: 0;
    overflow: visible;
}

/* Внешняя обёртка — sticky-контейнер + серая подложка снизу */
.stage-card-wrap {
    position: sticky;
    background: var(--color-shade-fill);
    border-radius: 0;
    border: 1px solid var(--color-shade-border);
    margin-bottom: 48px;
    overflow: visible;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.stage-card-wrap:last-child {
    margin-bottom: 20px;
}

/* Узкий десктоп 1025–1279px */
.stage-card-wrap:nth-child(1) { top: 100px; z-index: 1; }
.stage-card-wrap:nth-child(2) { top: 120px; z-index: 2; }
.stage-card-wrap:nth-child(3) { top: 140px; z-index: 3; }
.stage-card-wrap:nth-child(4) { top: 160px; z-index: 4; }
.stage-card-wrap:nth-child(5) { top: 180px; z-index: 5; }

/* Широкий десктоп ≥1280px */
@media (min-width: 1280px) {
    .stage-card-wrap:nth-child(1) { top: 140px; }
    .stage-card-wrap:nth-child(2) { top: 160px; }
    .stage-card-wrap:nth-child(3) { top: 180px; }
    .stage-card-wrap:nth-child(4) { top: 200px; }
    .stage-card-wrap:nth-child(5) { top: 220px; }
}

.stage-card {
    position: relative;
    background: #ffffff;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 32px 36px 36px 32px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: box-shadow 0.3s ease;
    margin-bottom: 32px;
}

/* Контент: занимает всю ширину карточки */
.stage-card-body {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.stage-number-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.stage-card-icon {
    position: absolute;
    top: 28px;
    right: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    line-height: 0;
}

.stage-card-icon img {
    width: auto;
    height: 64px;
    max-width: 200px;
    min-width: 0;
    object-fit: contain;
    filter: none;
    transition: filter 0.35s ease;
}

/* Немного уменьшенная иконка только в 5‑й карточке этапов */
.stage-card-wrap:nth-child(5) .stage-card-icon img {
    height: 52px;
    max-width: 150px;
}

.stage-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(209, 42, 42, 0.18);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0;
    padding-top: 6px;
    transition: color 0.25s ease;
}

.stage-card:hover .stage-number {
    color: rgba(209, 42, 42, 0.35);
}

.stage-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 16px 0;
    color: #111111;
    position: relative;
    text-transform: uppercase;
}

.stage-title::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #d12a2a;
    border-radius: 0;
    margin-top: 16px;
    margin-bottom: 12px;
    width: 100%;
    transition: background-color 0.3s ease;
}

.stage-desc {
    font-size: var(--fs-secondary);
    font-weight: 600;
    line-height: 1.65;
    color: #666666;
    margin: 0 0 18px 0;
}

.stage-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 24px;
    display: grid;
    gap: 8px;
    position: static;
    flex: 1;
}

.stage-list li {
    padding-left: 20px;
    position: relative;
    font-size: var(--fs-secondary);
    line-height: 1.6;
    color: rgba(77, 76, 76, 0.9);
}

.stage-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border: 1.5px solid #d12a2a;
    border-radius: 0;
    background: none;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    /* Отменяем скрытие заголовка/текста — на планшете нет sticky-картинки рядом */
    .stages-header-row.stages-header-row--hidden,
    .stages-header-right.stages-header-right--hidden {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    /* Заголовок и текст — в столбец, статичные, без sticky */
    .stages-main {
        flex-direction: column;
        gap: 20px;
    }

    .stages-header-row {
        position: static;
        flex: 0 0 auto;
        width: 100%;
    }

    .stages-header-right {
        position: static;
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }

    .stages-section .stages-header-right .section-text.stages-experience-text {
        max-width: 100%;
    }

    /* Карточки на планшете — малые отступы как на мобильном */
    .stage-card-wrap:nth-child(1) { top: 16px; z-index: 1; }
    .stage-card-wrap:nth-child(2) { top: 36px; z-index: 2; }
    .stage-card-wrap:nth-child(3) { top: 56px; z-index: 3; }
    .stage-card-wrap:nth-child(4) { top: 76px; z-index: 4; }
    .stage-card-wrap:nth-child(5) { top: 96px; z-index: 5; }

    .stages-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .stages-content {
        max-width: none;
    }

    /* ── Планшет: full-width sticky-карточки (как на <568px) ──────────────── */

    /* overflow: visible нужен чтобы position: sticky карточек работал */
    .stages-section {
        overflow: visible;
        padding: 24px 0 32px;
    }
    .stages-section .container {
        overflow: visible;
        position: relative; /* нужен для absolute-позиционирования боковой надписи */
    }
    /* flex-direction: column — стакаем stages-main (шапка) и stages-layout (карточки) */
    .stages-with-label {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    /* Боковая надпись — убираем из потока, крепим справа по высоте секции */
    .stages-section .section-label.stages-side-label {
        position: absolute;
        right: 0;
        top: 24px;
        height: calc(100% - 64px);
        align-items: flex-start;
    }
    /* Все обёртки — block, overflow: visible чтобы sticky работал */
    .stages-layout {
        display: block;
        overflow: visible;
        width: 100%;
        margin-bottom: 0; /* Сброс -100px: все 5 карточек помещаются, 5-я не обрезается */
    }
    .stages-content {
        display: block;
        overflow: visible;
        max-width: 100%;
        width: 100%;
    }
    .stages-grid-sticky {
        position: sticky;
        top: 0;
        overflow: visible;
        width: 100%;
    }
    .stages-grid {
        display: block;
        overflow: visible;
        width: 100%;
    }

    /* Карточка-обёртка: sticky + full width */
    .stage-card-wrap {
        position: sticky;
        width: 100%;
        border-radius: 0;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 32px;
        background: var(--color-shade-fill);
        border-radius: 0;
    }
    .stage-card-wrap:last-child {
        margin-bottom: 0;
    }

    /* Белая карточка внутри */
    .stage-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 20px 20px 24px;
        margin-bottom: 16px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    /* Контент карточки — flex-wrap layout */
    .stage-card-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
    }

    /* Строка 1: номер + иконка */
    .stage-number-row {
        order: 1;
        flex: 0 0 100%;
        padding-right: 160px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        margin-bottom: 0;
    }
    .stage-number {
        flex: 0 0 auto;
        font-size: 2.25rem;
        font-weight: 800;
        line-height: 1;
        color: rgba(209, 42, 42, 0.18);
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        margin-bottom: 0;
        border: none;
        background: none;
        padding: 6px 0 0;
        display: inline-block;
        border-bottom: none;
        transition: color 0.25s ease;
    }
    .stage-number::before {
        content: none;
    }
    .stage-card-icon {
        flex: 0 0 auto;
        position: static;
        width: auto;
    }
    .stage-card-icon img {
        width: auto;
        height: 64px;
        max-width: 140px;
        object-fit: contain;
    }

    /* Строка 2: заголовок */
    .stage-title {
        order: 2;
        flex: 0 0 100%;
        padding-right: 160px;
        font-weight: 700;
        line-height: 1.25;
        margin-top: 14px;
        margin-bottom: 0;
    }

    /* Строка 3: описание */
    .stage-desc {
        order: 3;
        flex: 0 0 100%;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        font-weight: 600;
        margin-bottom: 14px;
        margin-top: 12px;
    }

    /* Строка 4: список */
    .stage-list {
        order: 4;
        flex: 0 0 100%;
        margin-top: 4px;
    }
    .stage-list li {
        line-height: 1.55;
    }

    /* Изображения купюр — правила вынесены в отдельный блок ниже глобального display:none */
    .stages-media {
        display: none;
    }
}

/* Individual Approach Section */
.section-approach {
    padding: 0 0 48px;
    background-color: #eaecf3;
}

.approach-card {
    position: relative;
    background-color: #dce0e8;
    border-radius: 0;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: stretch;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Обёртка контента + боковая метка (как section-spacer-inner) */
.approach-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Вертикальная боковая метка справа (как spacer-side-label, выравнена по правому краю контейнера) */
.approach-side-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(17, 17, 17, 0.1);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    margin-bottom: 0;
    /* Позиция как у spacer-side-label: правый край контейнера (карточка 95% — шире контейнера) */
    position: absolute;
    right: calc(47.5vw - var(--container-width) / 2 + var(--container-padding));
    top: 56px;
    bottom: 56px;
}

/* Фоновая картинка справа — полупрозрачная, parallax при прокрутке (как section-industries) */
.approach-card-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    pointer-events: none;
    background-image: url('../assets/images/servise4.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.38;
    mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}

/* Контент — текст слева */
.approach-card-content {
    flex: 1;
    width: 55%;
    /* Выравниваем левый край текста по .container:
       левый край плашки = 2.5vw, поэтому компенсируем разницу */
    padding: 56px 40px 56px max(var(--container-padding), calc((100vw - var(--container-width)) / 2 + var(--container-padding) - 2.5vw));
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Блок: заголовок + текст + боковая метка (свойства текстовых полей) */
.approach-text-block {
    display: flex;
    align-items: stretch;
    gap: 24px;
    flex: 1;
}

.approach-text-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.approach-text-block .approach-title {
    font-size: var(--fs-h2);
    line-height: 1.1;
    font-weight: 500;
    color: rgba(17, 17, 17, 1);
    margin: 0;
}

.approach-text-block .approach-text {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: #000000;
    margin: 0;
}


@media (max-width: 568px) {
    .section-approach {
        padding: 0 0 36px;
    }

    .approach-card {
        border-radius: 0;
        min-height: auto;
        width: 95%;
    }

    .approach-card-content {
        padding: 36px 20px 40px var(--container-padding);
        max-width: 100%;
    }

    .approach-side-label {
        display: none;
    }

    .approach-card-bg {
        width: 100%;
        opacity: 0.22;
        background-attachment: scroll; /* fixed некорректен на iOS */
    }

    .approach-cta a.cta-btn.action-btn,
    .approach-cta button.cta-btn.action-btn {
        width: 100%;
        max-width: 100%;
    }
}

/* ─── career-apply-section (career.html) ─── */
.career-apply-section {
    position: relative;
    background-color: #ffffff;
    padding: 80px 0;
}

.career-apply-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.12);
}

.career-apply-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.career-apply-content {
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
                transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.career-apply-content.contact-in-view {
    opacity: 1;
    transform: translateX(0);
}

.career-apply-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: #111111;
    line-height: 1.15;
    margin: 0 0 32px;
    position: relative;
}

.career-apply-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: calc(100% + 64px);
    height: 1px;
    background-color: var(--color-accent);
}

.career-apply-lead {
    font-size: var(--fs-body);
    color: rgba(77, 76, 76, 0.9);
    line-height: 1.65;
    margin: 0 0 32px;
}

.career-apply-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.career-form-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.career-form-status {
    font-size: 14px;
    line-height: 1.4;
    border-radius: 8px;
    padding: 0;
    transition: opacity 0.3s ease;
}

.career-form-status.is-success {
    color: #1a7a3f;
    padding: 10px 16px;
    background: rgba(26, 122, 63, 0.08);
    border: 1px solid rgba(26, 122, 63, 0.2);
}

.career-form-status.is-error {
    color: #c0392b;
    padding: 10px 16px;
    background: rgba(192, 57, 43, 0.07);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

/* Статус отправки формы — страница контактов */
.contact-form-status {
    font-size: 14px;
    line-height: 1.4;
    border-radius: 8px;
    margin-top: 12px;
    transition: opacity 0.3s ease;
}

.contact-form-status.is-success {
    color: #1a7a3f;
    padding: 10px 16px;
    background: rgba(26, 122, 63, 0.08);
    border: 1px solid rgba(26, 122, 63, 0.2);
}

.contact-form-status.is-error {
    color: #c0392b;
    padding: 10px 16px;
    background: rgba(192, 57, 43, 0.07);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.career-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.career-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.career-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
    letter-spacing: 0.01em;
}

.career-form-label--muted {
    font-weight: 400;
    color: rgba(17, 17, 17, 0.5);
    font-size: 12px;
    line-height: 1.4;
}

.career-form-input {
    border: none;
    border-bottom: 1px solid rgba(17, 17, 17, 0.2);
    padding: 10px 0;
    font-size: var(--fs-secondary);
    font-family: var(--font-primary);
    color: #111111;
    background: transparent;
    outline: none;
    transition: border-color 0.3s;
    width: 100%;
}

.career-form-input:focus {
    border-bottom-color: #111111;
}

.career-form-input::placeholder {
    color: rgba(17, 17, 17, 0.3);
}

.career-file-input {
    display: none;
}

.career-file-upload-area {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 2px;
}

.career-file-btn {
    display: inline-flex;
    align-items: center;
    background-color: #f0f0f0;
    color: #111111;
    font-size: 13px;
    font-family: var(--font-primary);
    font-weight: 500;
    padding: 9px 20px;
    border-radius: 6px;
    transition: background-color 0.25s;
}

.career-file-btn:hover {
    background-color: #e2e2e2;
}

/* dark submit button variant */
.action-btn--dark {
    background-color: #f0f0f0;
    color: #111111;
    border: none;
    position: relative;
    overflow: hidden;
    align-self: flex-start;
    cursor: pointer;
}

.action-btn--dark:hover {
    color: #ffffff;
}

.action-btn--dark:hover .action-btn-icon {
    transform: scale(25);
}

.action-btn--dark:hover .action-btn-icon::after {
    transform: scale(calc(1 / 25));
}

.career-apply-photo {
    border-radius: 28px 28px 28px 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
                transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}

.career-apply-photo.contact-in-view {
    opacity: 1;
    transform: translateX(0);
}

.career-apply-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
    display: block;
    transform: scale(1.45);
}

@media (max-width: 1024px) {
    .career-apply-section {
        padding: 60px 0;
    }

    .career-apply-title::after {
        display: none;
    }

    .career-apply-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .career-apply-photo {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 568px) {
    .career-apply-content,
    .career-apply-photo {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .career-apply-section {
        padding: 48px 0;
    }

    .career-form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.mobile-br {
    display: none;
}

@media (max-width: 568px) {
    .mobile-br {
        display: inline;
    }
}

/* Desktop: hide mobile stage images */
.stage-img-mobile {
    display: none;
}

/* Планшет 769–1024px: показываем изображения на карточках (override глобального display:none) */
@media (max-width: 1024px) {
    .stage-img-mobile {
        display: block;
        position: absolute;
        top: 16px;
        right: 16px;
        width: 160px;
        height: auto;
        object-fit: contain;
        opacity: 0;
        transform: translateX(30px) rotate(0deg);
        transition: opacity 0.7s ease-out,
                    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* 641–1024: увеличенные изображения, обрезка по границам карточки */
@media (min-width: 569px) and (max-width: 1024px) {
    .stage-card-wrap .stage-card {
        overflow: hidden;
    }
    .stage-img-mobile {
        width: 240px;
        object-fit: contain;
    }
    .stage-card-wrap:nth-child(1) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-30deg);
    }
    .stage-card-wrap:nth-child(2) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-30deg);
    }
    .stage-card-wrap:nth-child(3) .stage-img-mobile {
        right: 0;
    }
    .stage-card-wrap:nth-child(3) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-60deg);
    }
    .stage-card-wrap:nth-child(4) .stage-img-mobile {
        right: 0;
    }
    .stage-card-wrap:nth-child(4) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-90deg);
    }
    .stage-card-wrap:nth-child(5) .stage-img-mobile {
        right: 0;
    }
    .stage-card-wrap:nth-child(5) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-90deg);
    }
}

/* ─────────────────────────────────────────────────────────────
   Stages section — планшет 569–1024px: layout как у мобильной (flex-wrap)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 569px) and (max-width: 1024px) {

    /* Карточка: padding ближе к мобильному */
    .stage-card {
        padding: 24px 24px 28px;
    }

    /* flex-wrap layout: каждый элемент занимает полную строку */
    .stage-card-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
    }

    /* Строка 1 — номер + иконка (правый отступ = ширина картинки) */
    .stage-number-row {
        order: 1;
        flex: 0 0 100%;
        padding-right: calc(clamp(185px, 30%, 240px) + 24px);
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 0;
    }

    /* Иконка — встроенная в поток (не absolute) */
    .stage-card-icon {
        position: static;
        flex: 0 0 auto;
    }

    .stage-card-icon img {
        height: 64px;
        max-width: 140px;
    }

    .stage-card-wrap:nth-child(5) .stage-card-icon img {
        height: 52px;
        max-width: 110px;
    }

    /* Строка 2 — заголовок */
    .stage-title {
        order: 2;
        flex: 0 0 100%;
        padding-right: calc(clamp(185px, 30%, 240px) + 24px);
        margin-top: 14px;
        margin-bottom: 0;
    }

    /* Строка 3 — описание */
    .stage-desc {
        order: 3;
        flex: 0 0 100%;
        padding-right: calc(clamp(185px, 30%, 240px) + 24px);
        margin-top: 12px;
        margin-bottom: 14px;
    }

    /* Строка 4 — список */
    .stage-list {
        order: 4;
        flex: 0 0 100%;
        margin-top: 4px;
    }

    /* Абсолютная картинка — масштабируется динамически с карточкой */
    .stage-img-mobile {
        top: 24px;
        right: 16px;
        width: clamp(185px, 30%, 240px);
    }
}

@media (max-width: 568px) {
    .stages-section {
        overflow: visible;
        padding: 24px 0 32px;
    }

    .stages-section .container {
        overflow: visible;
    }

    /* ── Шапка секции: заголовок + текст (лейбл скрыт, как spacer-side-label) ── */

    .stages-section .section-label.stages-side-label {
        display: none;
    }

    .stages-with-label {
        flex-direction: column;
        align-items: stretch;
    }

    .stages-main {
        flex-direction: column;
        width: 100%;
    }

    .stages-header-row {
        margin-bottom: 0;
        position: static;
        width: 100%;
    }

    .stages-header-right {
        position: static;
        min-width: 0;
        width: 100%;
    }

    .stages-section .stages-header-right .section-text.stages-experience-text {
        font-weight: 500;
    }

    /* Заголовок — крупный, жирный, с акцентной подчёркивающей линией */
    .stages-section .section-heading {
        font-weight: 700;
        line-height: 1.15;
        margin-bottom: 0;
        margin-top: 0;
        position: relative;
        padding-bottom: 20px;
    }

    /* Красная черта под заголовком — скрыта в мобильной */
    .stages-section .section-heading.stages-experience-title::after {
        display: none;
    }

    /* Текст — вертикальная красная линия слева на высоту текста */
    .stages-section .stages-header-right .section-text.stages-experience-text {
        margin-top: 0;
        border-left: 2px solid var(--color-accent);
        padding-left: 16px;
        margin-bottom: 32px;
    }

    /* Убираем grid/flex у всех обёрток — sticky работает
       относительно секции, а не вложенного контейнера */
    .stages-layout {
        display: block;
        overflow: visible;
        margin-bottom: 0; /* Сброс: на мобильном нет sticky */
        width: 100%;
    }

    .stages-content {
        display: block;
        overflow: visible;
        max-width: 100%;
        width: 100%;
    }

    .stages-grid-sticky {
        position: sticky;
        top: 0;
        overflow: visible;
        width: 100%;
    }

    .stages-grid {
        display: block;
        overflow: visible;
        width: 100%;
    }

    .stage-card-wrap {
        position: sticky;
        width: 100%;
        border-radius: 0;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 32px;
        background: var(--color-shade-fill);
        border-radius: 0;
    }

    .stage-card-wrap:nth-child(1) { top: 16px; z-index: 1; }
    .stage-card-wrap:nth-child(2) { top: 36px; z-index: 2; }
    .stage-card-wrap:nth-child(3) { top: 56px; z-index: 3; }
    .stage-card-wrap:nth-child(4) { top: 76px; z-index: 4; }
    .stage-card-wrap:nth-child(5) { top: 96px; z-index: 5; }

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

    .stage-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 20px 20px 24px;
        margin-bottom: 16px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    /* ─── flex-wrap layout: номер+иконка строка 1, заголовок/текст ниже ─── */
    .stage-card-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
    }

    /* Строка 1 — номер + иконка в одной строке */
    .stage-number-row {
        order: 1;
        flex: 0 0 100%;
        padding-right: 160px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        margin-bottom: 0;
    }

    .stage-number {
        flex: 0 0 auto;
        font-size: 1.75rem;
        font-weight: 800;
        line-height: 1;
        color: rgba(209, 42, 42, 0.18);
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        margin-bottom: 0;
        border: none;
        background: none;
        padding: 6px 0 0;
        display: inline-block;
        border-bottom: none;
        transition: color 0.25s ease;
    }

    .stage-number::before {
        content: none;
    }

    .stage-card-icon {
        flex: 0 0 auto;
        position: static;
        width: auto;
    }

    .stage-card-icon img {
        width: auto;
        height: 64px;
        max-width: 140px;
        object-fit: contain;
    }

    /* Строка 2 — заголовок на всю ширину */
    .stage-title {
        order: 2;
        flex: 0 0 100%;
        padding-right: 160px;
        font-weight: 700;
        line-height: 1.25;
        margin-top: 14px;
        margin-bottom: 0;
    }

    .stage-title::after {
        display: block;
    }

    /* Строка 3 — описание */
    .stage-desc {
        order: 3;
        flex: 0 0 100%;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        font-weight: 600;
        margin-bottom: 14px;
        margin-top: 12px;
    }

    /* Строка 4 — список на всю ширину карточки (без отступа справа) */
    .stage-list {
        order: 4;
        flex: 0 0 100%;
        margin-top: 4px;
    }

    .stage-list li {
        line-height: 1.55;
    }

    /* Hide the animated images panel */
    .stages-media {
        display: none;
    }

    /* Изображение — абсолютно в правом верхнем углу */
    .stage-img-mobile {
        display: block;
        position: absolute;
        top: 32px;
        right: 16px;
        width: 160px;
        height: auto;
        object-fit: contain;
        opacity: 0;
        transform: translateX(30px) rotate(0deg);
        transition: opacity 0.7s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .stage-card-wrap:nth-child(1) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-30deg);
    }

    .stage-card-wrap:nth-child(2) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-30deg);
    }

    .stage-card-wrap:nth-child(3) .stage-img-mobile {
        right: 0;
    }
    .stage-card-wrap:nth-child(3) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-60deg);
    }

    .stage-card-wrap:nth-child(4) .stage-img-mobile {
        right: -5px;
    }
    .stage-card-wrap:nth-child(4) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-90deg);
    }

    .stage-card-wrap:nth-child(5) .stage-img-mobile {
        right: -5px;
    }
    .stage-card-wrap:nth-child(5) .stage-img-mobile.is-visible {
        opacity: 1;
        transform: rotate(-90deg);
    }

}

/* ─────────────────────────────────────────────────────────────
   Stages section — узкий/длинный экран ≤360px
   (идёт ПОСЛЕ блока 568px, чтобы переопределить его стили)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    /* Сокращаем боковые отступы контейнера */
    .stages-section .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Карточка: 2-колоночный grid (левый: текст, правый: картинка) */
    .stage-card {
        padding: 16px 12px 20px;
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 10px;
        align-items: start;
        overflow: hidden;
    }

    /* display:contents делает .stage-card-body «прозрачным» для grid —
       его дети (number-row, title, desc, list) становятся прямыми grid-items */
    .stage-card-body {
        display: contents;
    }

    /* Строка с номером и иконкой — левый столбец */
    .stage-number-row {
        grid-column: 1;
        padding-right: 0;
    }

    /* Заголовок — левый столбец */
    .stage-title {
        grid-column: 1;
        padding-right: 0;
        margin-top: 8px;
    }

    /* Описание и список — НА ВСЮ ШИРИНУ (оба столбца) */
    .stage-desc {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-top: 12px;
    }

    .stage-list {
        grid-column: 1 / -1;
    }

    /* Декоративная картинка — правый столбец, рядом с номером и заголовком */
    .stage-img-mobile {
        position: static;
        grid-column: 2;
        grid-row: 1 / 3; /* занимает строки number-row и title */
        align-self: start;
        top: auto;
        right: auto;
    }

    /* Иконка слева — компактнее */
    .stage-card-icon img {
        height: 44px;
        max-width: 72px;
    }

    /* Карточка 5 — широкая иконка (две пиктограммы), дополнительно сжимаем */
    .stage-card-wrap:nth-child(5) .stage-card-icon img {
        height: 44px;
        max-width: 90px;
    }
}

/* ─── Portfolio Section ─────────────────────────────────────── */
.portfolio-section {
    padding: 48px 0 80px;
    background-color: #eaecf3;
}

/* Шапка секции: заголовок слева + фильтры справа */
.portfolio-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}

.portfolio-header-left {
    flex-shrink: 0;
}

.portfolio-title {
    margin-top: 0;
    margin-bottom: 0;
}

/* ─── Category Filters ──────────────────────────────────────── */
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-end;
    padding-bottom: 4px;
}

.filter-btn {
    padding: 8px 18px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: 40px;
    color: rgba(17, 17, 17, 0.45);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    font-family: var(--font-primary, 'Inter', sans-serif);
    -webkit-tap-highlight-color: transparent;
}

.filter-btn:hover {
    color: #111111;
    border-color: rgba(17, 17, 17, 0.4);
}

.filter-btn.active {
    color: #ffffff;
    background: #111111;
    border-color: #111111;
}

/* ─── Projects Grid ─────────────────────────────────────────── */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

/* Первая видимая карточка — широкая (2 колонки), управляется JS */
.project-card.featured {
    grid-column: span 2;
}

.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    opacity: 0;
    transform: translateY(80px);
    animation: fadeInUp 0.55s ease-out forwards;
}

.project-card.hidden {
    display: none;
}

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

/* ─── Картинка ──────────────────────────────────────────────── */
.project-card-image {
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    background: #d0d1d8;
    position: relative;
    overflow: hidden;
}

.project-card.featured .project-card-image {
    aspect-ratio: 16 / 9;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

/* Заглушка когда картинки нет */
.project-card-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card-image-placeholder span {
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(17,17,17,0.08);
    letter-spacing: -0.04em;
    user-select: none;
    text-transform: uppercase;
}

.project-card:hover .project-card-image img {
    transform: scale(1.15);
}

/* ─── Контент под картинкой ─────────────────────────────────── */
.project-card-content {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    border-top: 1px solid rgba(17,17,17,0.07);
}

.project-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-card-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #d12a2a;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.project-card-year {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(17,17,17,0.35);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.project-card-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
    margin: 0;
    transition: color 0.2s ease;
}

.project-card:hover .project-card-title {
    color: #d12a2a;
}

.project-card-description {
    font-size: var(--fs-secondary);
    color: rgba(17,17,17,0.55);
    line-height: 1.55;
    margin: 0;
}

.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: auto;
}

.project-card-arrow {
    font-size: var(--fs-label);
    font-weight: 600;
    color: #d12a2a;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}

.project-card-arrow::after {
    content: '→';
    font-size: 1rem;
}

.project-card:hover .project-card-arrow {
    gap: 10px;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-card.featured {
        grid-column: span 2;
    }

    .portfolio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 40px;
    }
}

@media (max-width: 568px) {
    .portfolio-section {
        padding: 36px 0 56px;
    }

    .portfolio-header {
        margin-bottom: 32px;
    }

    .category-filters {
        gap: 6px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .project-card.featured {
        grid-column: span 1;
    }

    .project-card.featured .project-card-image {
        aspect-ratio: 4 / 3;
    }


    .project-card-content {
        padding: 20px 20px 24px;
    }
}

/* ================================================================
   PROJECT DETAIL PAGE (pd- prefix)
   ================================================================ */

/* Разделитель под hero (#pdSpacer): компактнее по вертикали, боковые как у .section-spacer-inner */
#pdSpacer .section-spacer-inner {
    padding-top: clamp(0.875rem, 2.25vw, 1.75rem);
    padding-bottom: clamp(1.125rem, 2.75vw, 2.25rem);
}

/* Порядок: сверху клиент/год (.spacer-sub), ниже summary (.spacer-lead) — отступ между ними */
#pdSpacer .spacer-lead {
    margin: 1.25rem 0 0;
}

/* ─── Hero ──────────────────────────────────────────────────── */
.pd-hero {
    height: 72vh;
    min-height: 480px;
    max-height: 720px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    overflow: hidden;
}

.pd-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
}

.pd-hero:hover .pd-hero-bg {
    transform: scale(1.02);
}

.pd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.28) 40%,
        rgba(0, 0, 0, 0.72) 100%
    );
    z-index: 1;
}

.pd-hero-body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 64px;
}

.pd-hero-content {
    max-width: 1100px;
    width: 100%;
    text-align: left;
}

/* Как .hero.hero-services: колонка слева, не по центру .container */
.pd-hero-body .container.hero-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    margin-left: var(--hero-left);
    margin-right: auto;
    width: calc(60vw - var(--hero-left));
    max-width: 1100px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Планшеты: больше места под заголовок — 3/4 ширины экрана (как у .container слева) */
@media (min-width: 569px) and (max-width: 1024px) {
    .pd-hero-body .container.hero-container {
        width: calc(100vw * 3 / 4 - var(--hero-left));
        max-width: 1100px;
    }
}

/* Только смартфоны: колонка героя на всю ширину, симметричные боковые отступы.
   Планшеты — см. правило выше; десктоп (>1024) — базовая колонка 60vw. */
@media (max-width: 568px) {
    .pd-hero-body .container.hero-container {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        box-sizing: border-box;
        align-items: stretch;
    }

    .pd-hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .pd-hero-title {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.pd-hero-category {
    display: inline-block;
    padding: 5px 14px;
    background: #d12a2a;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
    margin-bottom: 20px;
}

.pd-hero-title {
    font-size: clamp(2rem, 3.5vw + 0.5rem, 4.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.025em;
}

/* ─── Контент ───────────────────────────────────────────────── */
.pd-content {
    padding: 8px 0 0;
    background-color: #eaecf3;
}

/* ─── Кнопка назад: полоса между контентом и футером ────────── */
.pd-back-band {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 0;
}

.pd-back-band--desktop {
    display: none;
}

@media (min-width: 1025px) {
    .pd-back-band--mobile {
        display: none;
    }
    .pd-back-band--desktop {
        display: flex;
    }
}

/* ─── Кнопка назад ──────────────────────────────────────────── */
.pd-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(17, 17, 17, 0.4);
    text-decoration: none;
    margin: 0;
    transition: color 0.2s ease;
}

.pd-back-arrow {
    font-size: 1rem;
    display: inline-block;
    transition: transform 0.2s ease;
}

.pd-back:hover {
    color: #d12a2a;
}

.pd-back:hover .pd-back-arrow {
    transform: translateX(-5px);
}

/* ─── Двухколоночная раскладка ──────────────────────────────── */
.pd-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2px;
    align-items: start;
}

/* ─── Главная колонка: блоки ────────────────────────────────── */
.pd-section {
    background: #ffffff;
    padding: 28px 36px 36px 28px;
    margin-bottom: 2px;
}

.pd-section-label,
.pd-meta-card-label {
    font-size: clamp(0.75rem, 0.68rem + 0.32vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(77, 76, 76, 0.55);
    text-transform: uppercase;
    margin-bottom: 24px;
}

.pd-section-label {
    margin-bottom: 10px;
}

.pd-section-rule {
    width: 40px;
    height: 2px;
    background: #d12a2a;
    border-radius: 1px;
    margin-bottom: 12px;
}

.pd-section-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: #111111;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.pd-section-text {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8;
    color: rgba(17, 17, 17, 0.88);
    max-width: 100%;
    text-align: justify;
    text-align-last: left;
}

/* Несколько абзацев подряд — только вертикальный зазор, без линий */
.pd-section .pd-section-text + .pd-section-text {
    margin-top: 0.55rem;
}

/* ─── Боковая панель ────────────────────────────────────────── */
.pd-meta-card {
    background: #ffffff;
    padding: 40px 36px 40px 28px;
    position: sticky;
    top: 100px;
}

.pd-meta-list {
    display: flex;
    flex-direction: column;
}

.pd-meta-item {
    padding: 16px 0 8px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pd-meta-item:first-child {
    padding-top: 0;
}

.pd-meta-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pd-meta-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(77, 76, 76, 0.45);
}

.pd-meta-value {
    font-size: 1rem;
    font-weight: 600;
    color: #111111;
    line-height: 1.2;
    margin: 0;
    display: block;
}

.pd-meta-value--category {
    color: #d12a2a;
}

/* Пять плейсхолдеров-стадий в один ряд: (ширина блока − 4 зазора) / 5 */
.pd-meta-item--stages .pd-meta-stages {
    --pd-stage-gap: 2%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    gap: var(--pd-stage-gap);
    box-sizing: border-box;
}

.pd-meta-stage-wrap {
    position: relative;
    display: block;
    flex: 0 0 calc((100% - 4 * var(--pd-stage-gap)) / 5);
    width: calc((100% - 4 * var(--pd-stage-gap)) / 5);
    max-width: calc((100% - 4 * var(--pd-stage-gap)) / 5);
    line-height: 0;
}

.pd-meta-stage-thumb {
    box-sizing: border-box;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border: none;
    background: transparent;
}

.pd-meta-stage-wrap--placeholder {
}

.pd-meta-stage-wrap--placeholder .pd-meta-stage-tooltip {
    color: #9ca3af;
}

.pd-meta-stage-thumb--gray {
    object-fit: contain;
}

/* Текстовое перечисление стадий */
.pd-stages-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 0;
    margin: 4px 0 10px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    color: #111111;
}

.pd-stages-list-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.pd-stages-list-link:hover {
    color: #d12a2a;
}

.pd-stages-list-sep {
    font-size: 0.5em;
    line-height: 1;
    color: rgba(17, 17, 17, 0.3);
    padding: 0 5px;
    vertical-align: middle;
}

[data-theme="dark"] .pd-stages-list {
    color: #e4e4e4;
}
[data-theme="dark"] .pd-stages-list-sep {
    color: rgba(255, 255, 255, 0.25);
}

/* Тёмная версия скрыта по умолчанию; светлая — скрыта в тёмной теме */
.pd-meta-stage-thumb--dark {
    display: none;
}
[data-theme="dark"] .pd-meta-stage-thumb--light {
    display: none;
}
[data-theme="dark"] .pd-meta-stage-thumb--dark {
    display: block;
}

/* Кастомная подсказка — без задержки ОС, в отличие от атрибута title */
.pd-meta-stage-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #111111;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 20;
    transition: opacity 0.08s ease-out, visibility 0s linear 0.12s;
}

.pd-meta-stage-wrap--has-tip:hover .pd-meta-stage-tooltip,
.pd-meta-stage-wrap--has-tip:focus-within .pd-meta-stage-tooltip {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.06s ease-out, visibility 0s;
}

/* Ссылка внутри иконки стадии */
.pd-meta-stage-link {
    display: block;
    line-height: 0;
    border-radius: 4px;
    outline-offset: 3px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.pd-meta-stage-link:hover {
    opacity: 0.75;
}

/* ─── CTA в сайдбаре ────────────────────────────────────────── */
.pd-meta-cta {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid rgba(17, 17, 17, 0.07);
}

.pd-meta-cta-text {
    font-size: var(--fs-secondary);
    line-height: 1.6;
    color: rgba(77, 76, 76, 0.7);
    margin-bottom: 16px;
}

/* Кнопка CTA: на десктопе/ноутбуке — на всю ширину карточки;
   на планшете в одной колонке — половина; на смартфоне снова 100% (см. @media max 568 ниже) */
.pd-meta-cta a.cta-btn.action-btn {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1024px) and (min-width: 569px) {
    .pd-meta-cta a.cta-btn.action-btn {
        width: 50%;
        max-width: 50%;
    }
}

/* ─── Ошибка ────────────────────────────────────────────────── */
.pd-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
}

.pd-error h2 {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: rgba(77, 76, 76, 0.5);
    margin-bottom: 24px;
}

.pd-error-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d12a2a;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.pd-error-link:hover {
    gap: 14px;
}

/* ─── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .pd-layout {
        grid-template-columns: 1fr 300px;
    }
}

@media (max-width: 1024px) {
    .pd-layout {
        grid-template-columns: 1fr;
    }

    .pd-meta-card {
        position: static;
    }
}

@media (min-width: 569px) and (max-width: 1024px) {
    .pd-meta-item--stages .pd-meta-stages {
        width: 50%;
    }
}

@media (max-width: 568px) {
    .pd-hero {
        height: 56vh;
        min-height: 360px;
    }

    .pd-hero-body {
        padding-bottom: 44px;
    }

    .pd-hero-body .container.hero-container {
        padding-top: 0;
    }

    .pd-content {
        padding: 6px 0 0;
    }

    .pd-back-band {
        padding: 20px 0;
    }

    /* «Назад»: без scroll-reveal на мобилке (стрелка и текст всегда видны) */
    .pd-content .pd-back.pd-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pd-section {
        padding: 16px 20px 26px 16px;
    }

    .pd-meta-card {
        padding: 32px 20px 32px 16px;
    }
}


/* ─── Анимации: герой ───────────────────────────────────────────
   Запускаются сразу после вставки JS (CSS animation + both fill) */
@keyframes pdFadeUp {
    from { opacity: 0; transform: translateY(100px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pdFadeLeft {
    from { opacity: 0; transform: translateX(-100px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pd-hero-category {
    animation: pdFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.pd-hero-title {
    animation: pdFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* ─── Scroll-reveal: базовые состояния ──────────────────────────
   Элементы скрыты до попадания в зону видимости               */
.pd-reveal {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-reveal-up    { transform: translateY(120px); }
.pd-reveal-right { transform: translateX(160px); }
.pd-reveal-left  { transform: translateX(-100px); }

/* Красные линейки: масштаб по X */
.pd-reveal-scale {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Видимое состояние */
.pd-reveal.is-visible  { opacity: 1; transform: none; }
.pd-reveal-scale.is-visible { opacity: 1; transform: scaleX(1); }

/* Задержки */
.pd-delay-1 { transition-delay: 0.10s; }
.pd-delay-2 { transition-delay: 0.20s; }
.pd-delay-3 { transition-delay: 0.32s; }
.pd-delay-4 { transition-delay: 0.46s; }
.pd-delay-5 { transition-delay: 0.60s; }

/* На планшетах/мобильных: aside анимируется снизу, не сбоку */
@media (max-width: 1024px) {
    .pd-reveal-right { transform: translateY(120px); }
}

/* Смартфон: карточка метаданных без scroll-reveal (IO + rootMargin давали заметный «запоздалый» показ) */
@media (max-width: 568px) {
    .pd-layout .pd-meta-card.pd-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =====================================================
   SERVICES PAGE — Scroll-in animations
   ===================================================== */

/* --- section-spacer --- */
.spacer-lead,
.spacer-rule,
.spacer-sub,
.spacer-side-label {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.spacer-lead       { transition-delay: 0ms; }
.spacer-rule       { transition-delay: 120ms; }
.spacer-sub        { transition-delay: 220ms; }
.spacer-side-label { transition-delay: 340ms; }

.spacer-lead.srv-in-view,
.spacer-rule.srv-in-view,
.spacer-sub.srv-in-view,
.spacer-side-label.srv-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- section-strategy / section-smart-cards — intro (каждый блок со своим триггером) --- */
.strategy-intro .company-label,
.strategy-heading,
.strategy-intro-bold,
.strategy-intro-text,
.strategy-card-wrap {
    opacity: 0;
    transform: translateY(280px);
    transition: opacity 2.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.strategy-intro .company-label { transition-delay: 0ms; }
.strategy-heading              { transition-delay: 0ms; }
.strategy-intro-bold           { transition-delay: 0ms; }
.strategy-intro-text           { transition-delay: 0ms; }

.strategy-intro .company-label.srv-in-view,
.strategy-heading.srv-in-view,
.strategy-intro-bold.srv-in-view,
.strategy-intro-text.srv-in-view,
.strategy-card-wrap.srv-in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 2.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s ease,
                background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
    .strategy-card-wrap.srv-in-view:hover {
        transform: scale(1.08);
    }
}

/* --- section-industries --- */
.industries-heading,
.industry-card {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.industries-heading { transition-delay: 0ms; }

.industries-heading.srv-in-view,
.industry-card.srv-in-view {
    opacity: 1;
    transform: translateY(0);
}
.industry-card.srv-in-view {
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s ease,
                box-shadow 0.35s ease;
}
.industry-card.srv-in-view:hover {
    transform: scale(1.08);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.4);
}

/* --- section-smart-cards — текстовые блоки и карточки: 1.6s, easing cubic-bezier --- */
.section-smart-cards .strategy-heading,
.section-smart-cards .strategy-intro-bold,
.section-smart-cards .strategy-intro-text,
.section-smart-cards .smart-side-label,
.section-smart-cards .smart-cards-label {
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-smart-cards .smart-cards-label {
    opacity: 0;
    transform: translateY(120px);
}

.smart-side-label {
    opacity: 0;
    transform: translateY(120px);
}
.section-smart-cards .strategy-heading.srv-in-view,
.section-smart-cards .strategy-intro-bold.srv-in-view,
.section-smart-cards .strategy-intro-text.srv-in-view,
.section-smart-cards .smart-side-label.srv-in-view,
.section-smart-cards .smart-cards-label.srv-in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.section-smart-cards .smart-card {
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Планшет: быстрый transition для 3D-эффекта карусели */
@media (min-width: 569px) and (max-width: 1024px) {
    .section-smart-cards .smart-card {
        transition: transform 0.06s ease-out, opacity 0.06s ease-out, box-shadow 0.3s ease;
    }
}

.smart-card {
    opacity: 0;
    transform: translateY(260px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.smart-card.srv-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- stages-section header --- */
.stages-experience-title,
.stages-experience-text,
.stages-side-label {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stages-experience-title.srv-in-view,
.stages-experience-text.srv-in-view,
.stages-side-label.srv-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- stages-section cards --- */
.stage-card-wrap {
    opacity: 0;
    transform: translateY(160px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.7s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s ease, border-color 0.3s ease;
}

.stage-card-wrap.srv-in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 568px) {
    .section-smart-cards .smart-cards-label {
        font-weight: 600;
        text-align: center;
    }
    .stage-card-wrap {
        opacity: 1;
        transform: none;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    /* Карусель: карточки видны сразу, JS управляет transform/opacity */
    .smart-card {
        opacity: 1;
        transform: none;
        transition: box-shadow 0.3s ease;
    }
    .smart-card.srv-in-view {
        opacity: 1;
        transform: none;
    }
}

/* --- section-approach --- */
.approach-label,
.approach-title,
.approach-text {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.approach-label  { transition-delay: 0ms; }
.approach-title  { transition-delay: 100ms; }
.approach-text   { transition-delay: 200ms; }

.approach-label.srv-in-view,
.approach-title.srv-in-view,
.approach-text.srv-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Кнопка — только opacity: transform обрезается overflow:hidden карточки */
.approach-cta {
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}
.approach-cta.srv-in-view {
    opacity: 1;
}





/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА КОНТАКТОВ — contacts.html
═══════════════════════════════════════════════════════════ */

/* Hero — карта вместо фонового изображения */
.contacts-page .hero.hero-services {
    background-image: none;
    background-color: #1a1a1a;
    overflow: hidden;
}

/* Убираем zoom-анимацию фона — карте она не нужна */
.contacts-page .hero.hero-services.hero-animated .hero-bg {
    animation: none;
}

/* Перед-псевдоэлемент: тёмный градиент сверху поверх карты */
.contacts-page .hero.hero-services::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.0) 100%
    );
    z-index: 1;
}

/* Iframe-карта: абсолютное позиционирование, заполняет весь hero */
.contact-hero-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 0;
    display: block;
}

/* Контент hero (заголовок) поверх карты */
.contacts-page .hero.hero-services .hero-container {
    position: relative;
    z-index: 2;
}

/* Секция с контактной информацией и формой */
.contact-info-section {
    background-color: #ffffff;
    padding: 72px 0 80px;
}

/* ── Анимации появления: левая колонка и карточка формы ── */
.contact-info-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.contact-form-card {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}

.contact-info-left.contact-in-view,
.contact-form-card.contact-in-view {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 568px) {
    .contact-info-left,
    .contact-form-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.contact-info-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 64px;
    align-items: start;
}

/* ── Левая колонка: блоки информации ── */
.contact-info-left {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.contact-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-block-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.contact-block-line {
    font-size: var(--fs-body);
    color: #555555;
    line-height: 1.55;
}

.contact-block-line a {
    color: #555555;
    transition: color 0.2s;
}

.contact-block-line a:hover {
    color: #111111;
}

.contact-block-label {
    font-weight: 600;
    color: #111111;
    margin-right: 4px;
}

.contact-block-note {
    color: var(--color-accent);
    font-size: 0.8rem;
    font-style: italic;
}

/* Социальные иконки */
.contact-social {
    display: flex;
    gap: 14px;
    margin-top: 4px;
}

.contact-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #d0d0d0;
    color: #333333;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.contact-social-link:hover {
    border-color: #111111;
    background-color: #111111;
    color: #ffffff;
}

/* ── Правая колонка: карточка с формой ── */
.contact-form-wrap {
    width: 100%;
}

.contact-form-card {
    background-color: #f9f9fb;
    border-radius: 16px;
    padding: 44px 48px 48px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.07);
}

#contact-form-card {
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.contact-form-title {
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 700;
    color: #111111;
    margin-bottom: 32px;
    line-height: 1.2;
}

/* Сетка полей формы: 2 колонки */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    margin-bottom: 32px;
}

/* Поле на всю ширину */
.form-group--full {
    grid-column: 1 / -1;
}

/* Группа: метка + поле */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-group input,
.form-group textarea,
.form-group .form-select {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: #111111;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #d0d0d0;
    padding: 8px 0 10px;
    outline: none;
    transition: border-color 0.2s;
    resize: none;
    width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #bbbbbb;
    font-weight: 400;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group .form-select:focus {
    border-bottom-color: #111111;
}

/* Select — убираем системный вид, добавляем стрелку */
.form-group .form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 16px;
}

.form-group .form-select option {
    color: #111111;
    background-color: #ffffff;
}

.form-group textarea {
    min-height: 90px;
    line-height: 1.55;
}

/* Кнопка отправки — как CTA; ширина = одна колонка .contact-form-grid (как у select в ряду) */
#contact-inquiry-form button.contact-submit-btn.cta-btn.action-btn {
    width: calc((100% - 32px) / 2);
    max-width: none;
    box-sizing: border-box;
    align-self: flex-start;
}

/* ── Адаптив: планшет ── */
@media (max-width: 1024px) {
    .contact-info-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-info-left {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 40px;
        align-items: start;
    }

    /* Первый блок (Контакты) — занимает левую колонку, все строки */
    .contact-info-left .contact-block:first-child {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    /* Второй и третий блоки (Адрес, Часы работы) — правая колонка */
    .contact-info-left .contact-block:not(:first-child) {
        grid-column: 2;
    }

    .contact-form-card {
        width: 100%;
        padding: 36px 36px 40px;
        box-sizing: border-box;
    }
}

/* ── Адаптив: мобильный ── */
@media (max-width: 568px) {
    .contact-info-section {
        padding: 48px 0 56px;
    }

    .contact-info-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Смартфон: один столбец блоков (перебивает grid 1fr 1fr из ≤1024px) */
    .contact-info-left {
        display: flex;
        flex-direction: column;
        gap: 28px;
        width: 100%;
    }

    .contact-info-left .contact-block:first-child,
    .contact-info-left .contact-block:not(:first-child) {
        grid-column: unset;
        grid-row: unset;
    }

    .contact-map-section iframe {
        height: 300px;
    }

    .contact-form-card {
        padding: 28px var(--container-padding) 32px;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .form-group--full {
        grid-column: 1;
    }

    /* Кнопка: на всю ширину контента карточки; отступы по краям — padding у .contact-form-card */
    #contact-inquiry-form button.contact-submit-btn.cta-btn.action-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}


/* ╔═══════════════════════════════════════════════════════════
   ║  CAREER PAGE
   ╚═══════════════════════════════════════════════════════════ */

/* ── Hero: фоновое изображение ── */
.career-page .hero.hero-services .hero-bg {
    background-image: url('../assets/images/career_01.webp');
    background-position: center 30%;
}

/* ── Hero: лейбл "ТВОРЧЕСКИЙ ПУТЬ" — начальное состояние ── */
.career-page .hero.hero-services .hero-label {
    opacity: 0;
    transform: translateY(220px);
    animation: none;
}

.career-page .hero.hero-services.hero-animated .hero-label {
    animation: heroServicesSlideUpFromBottom 0.7s ease-out 0.05s both;
}

/* ── CTA: фон для карточки ── */
.career-cta-bg {
    background-image: url('../assets/images/close-up-businessman-holding-briefcase.webp') !important;
    background-position: center 20% !important;
}


/* ╔═══════════════════════════════════════════════════════════
   ║  CAREER WHY-SECTION  — общие стили
   ╚═══════════════════════════════════════════════════════════ */
.career-why-section {
    background: #ffffff;
}

/* ── career.html: орбитальный макет ────────────────────────── */
.career-page .career-why-section {
    padding: 88px 0 44px;
    overflow: hidden;
}

/* Scroll-reveal: заголовок */
.cw-orbit .cw-heading {
    opacity: 0;
    transform: translateX(-120px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cw-orbit .cw-heading.srv-in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Scroll-reveal: круг и карточки */
.cw-circle-wrap,
.cw-item {
    opacity: 0;
    transform: translateY(240px);
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cw-circle-wrap,
.cw-item--1, .cw-item--2, .cw-item--3,
.cw-item--4, .cw-item--5 { transition-delay: 0ms; }

.cw-circle-wrap.srv-in-view,
.cw-item.srv-in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 1025px) {
    .cw-item--r            { transform: translateX(180px); }
    .cw-item--r.srv-in-view { transform: translateX(0); }
    .cw-item--l            { transform: translateX(-180px); }
    .cw-item--l.srv-in-view { transform: translateX(0); }
}

/* Orbit flex */
.cw-orbit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.cw-orbit .cw-heading {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.1;
    color: rgba(17, 17, 17, 1);
    max-width: 560px;
}

.cw-orbital-group {
    position: relative;
    height: 760px;
    width: 100%;
    margin-top: 25px;
}

.cw-circle-wrap {
    position: absolute;
    left: calc(50% - 339px);
    top: -29px;
    width: 650px; height: 650px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    padding: 14px;
    box-sizing: content-box;
    z-index: 1;
}

.cw-circle-photo {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 48px rgba(0, 0, 0, 0.14);
}

.cw-circle-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.cw-item {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    z-index: 2;
}
.cw-item--r { flex-direction: row; }
.cw-item--l { flex-direction: row-reverse; text-align: right; }

.cw-icon {
    width: 72px; height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    background: #f6f8fc;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s ease;
}
.cw-item:hover .cw-icon { background: #edf0f8; }
.cw-icon img { width: 40px; height: 40px; object-fit: contain; }

.cw-text {
    max-width: 220px;
    display: flex; flex-direction: column; gap: 5px;
}
.cw-title {
    font-size: var(--fs-h3); font-weight: 700;
    line-height: 1.3; color: var(--color-text-dark); margin: 0;
}
.cw-desc {
    font-size: var(--fs-secondary); font-weight: 400;
    line-height: 1.65; color: var(--color-gray); margin: 0;
}

/* Позиции карточек (desktop) */
.cw-item--1 { left: calc(50% + 9px);   top: -52px; }
.cw-item--1 .cw-text { margin-top: -55px; max-width: 340px; }
.cw-item--2 { left: calc(50% + 288px); top: 228px; }
.cw-item--3 { left: calc(50% + 161px); top: 576px; }
.cw-item--4 { right: calc(50% + 161px); top: 576px; }
.cw-item--5 { right: calc(50% + 288px); top: 181px; }

@media (max-width: 1280px) {
    .career-page .career-why-section { padding-top: 40px; padding-bottom: 40px; }
    .cw-orbital-group { height: 640px; }
    .cw-circle-wrap {
        width: 552px; height: 552px;
        left: calc(50% - 288px); top: 0; padding: 12px;
    }
    .cw-item--1 { left: calc(50% + 108px);  top: 0; }
    .cw-item--2 { left: calc(50% + 252px);  top: 156px; }
    .cw-item--3 { left: calc(50% + 108px);  top: 495px; }
    .cw-item--4 { right: calc(50% + 128px); top: 495px; }
    .cw-item--5 { right: calc(50% + 242px); top: 185px; }
    .cw-item--1 .cw-text { margin-top: -28px; max-width: 260px; }
    .cw-text { max-width: 260px; }
    .cw-icon { width: 64px; height: 64px; }
    .cw-icon img { width: 34px; height: 34px; margin: -4px; }
}

@media (min-width: 569px) and (max-width: 1024px) {
    .career-page .career-why-section { padding: 64px 0 40px; overflow: visible; }
    .cw-orbit { gap: 32px; align-items: flex-start; }
    .cw-orbit .cw-heading { max-width: 100%; text-align: left; margin-top: -16px; }
    .cw-orbital-group {
        position: relative; height: 650px;
        margin-top: 0;
        margin-left: calc(-1 * var(--container-padding));
        width: calc(100% + var(--container-padding));
        display: block; padding: 0; overflow: visible;
    }
    .cw-circle-wrap {
        position: absolute; left: 0; top: 40px;
        width: 567px; height: 567px;
        border-radius: 50%;
        border: 1.5px solid rgba(0, 0, 0, 0.10);
        padding: 12px; box-sizing: border-box;
        background: transparent; overflow: hidden;
        transform: translateX(-50%);
    }
    .cw-circle-wrap.srv-in-view { transform: translateY(0) translateX(-50%); }
    .career-why-section .cw-circle-photo {
        width: 100%; height: 100%;
        border-radius: 50%; overflow: hidden;
        box-shadow: 0 6px 48px rgba(0, 0, 0, 0.14);
    }
    .career-why-section .cw-circle-photo img {
        width: 100%; height: 100%;
        object-fit: cover; object-position: center top; border-radius: 0;
    }
    .cw-item {
        flex-direction: row; text-align: left;
        align-items: center; gap: 12px;
        opacity: 1; transition: none;
    }
    .cw-item--1 .cw-text { margin-top: 0; }
    .cw-icon { width: 54px; height: 54px; flex-shrink: 0; transform: none; opacity: 1; transition: none; }
    .cw-icon img { width: 29px; height: 29px; margin: 0; }
    .cw-text { max-width: 260px; opacity: 1; transition: none; }
}

@media (max-width: 568px) {
    .career-page .career-why-section {
        padding: 72px 0 36px;
        background-image: url('../assets/images/advanteges2.webp');
        background-size: cover; background-position: center;
        background-repeat: no-repeat; background-attachment: scroll;
        position: relative;
    }
    .career-page .career-why-section::before {
        content: ''; position: absolute; inset: 0;
        background: rgba(0, 0, 0, 0.72); z-index: 0;
    }
    .career-page .career-why-section .container { position: relative; z-index: 1; }
    .cw-orbit .cw-heading { color: #ffffff; margin-bottom: 28px; }
    .cw-orbit { gap: 0; }
    .cw-orbital-group { position: static; height: auto; display: flex; flex-direction: column; gap: 10px; }
    .cw-circle-wrap { display: none; }
    .cw-item--1, .cw-item--2, .cw-item--3,
    .cw-item--4, .cw-item--5 { position: static; left: auto; right: auto; top: auto; transform: none; }
    .cw-item {
        flex-direction: row; align-items: center; gap: 16px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px; padding: 20px 18px;
    }
    .cw-icon { width: 80px; height: 80px; flex-shrink: 0; background: transparent; border: none; border-radius: 0; }
    .career-why-section .cw-item:hover .cw-icon { background: transparent; }
    .cw-icon img { width: 48px; height: 48px; margin: 0; filter: brightness(0) invert(1); opacity: 0.9; }
    .cw-item--l { flex-direction: row; text-align: left; }
    .cw-item--1 .cw-text { margin-top: 0; max-width: 100%; }
    .cw-text { max-width: 100%; }
    .cw-title { color: #ffffff; font-size: var(--fs-h3); font-weight: 700; }
    .cw-desc { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-secondary); }
}

/* dark mode orbital */
[data-theme="dark"] .cw-circle-wrap { border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cw-icon { background: var(--dt-elevated); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .cw-item:hover .cw-icon { background: #353e4c; }
[data-theme="dark"] .cw-icon img { filter: brightness(0) invert(1) opacity(0.7); }
[data-theme="dark"] .cw-desc { color: #c8c8c8; }
[data-theme="dark"] .cw-orbit .cw-heading { color: #e4e4e4; }

/* ╔═══════════════════════════════════════════════════════════
   ║  CAREER WHY-SECTION  — Dark Panel + Feature Rows
   ╚═══════════════════════════════════════════════════════════ */
.career-why-section {
    background: #ffffff;
}

.cw-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    min-height: 480px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ── Левая тёмная панель ── */
.cw-panel {
    background:
        linear-gradient(rgba(10,10,10,0.62), rgba(10,10,10,0.62)),
        url('../assets/images/close-up-businessman-holding-briefcase.webp') center / cover no-repeat;
    display: flex;
    align-items: center;
    padding: 64px 44px;
    position: relative;
    overflow: hidden;
}

.cw-panel::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05);
    pointer-events: none;
}


.cw-panel-content {
    position: relative;
    z-index: 1;
}

.cw-panel-label {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b5bdc1;
    margin-bottom: 20px;
}

.cw-panel .cw-heading {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 32px;
}

.cw-panel-accent {
    width: 40px;
    height: 3px;
    background: rgb(209, 42, 42);
    border-radius: 2px;
}

/* ── Правая часть: список строк ── */
.cw-feat-list {
    display: flex;
    flex-direction: column;
}

.cw-feat {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0 28px;
    align-items: start;
    flex: 1;
    padding: 44px 0 44px 48px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    cursor: default;
    position: relative;
    transition: background 0.25s ease;
}

.cw-feat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: rgb(209, 42, 42);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cw-feat:hover {
    background: rgba(209, 42, 42, 0.025);
}

.cw-feat:hover::before {
    transform: scaleY(1);
}

.cw-feat:last-child {
    border-bottom: none;
}

.cw-feat-num {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 0, 0, 0.07);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    transition: color 0.25s ease;
    align-self: start;
    padding-top: 6px;
}

.cw-feat:hover .cw-feat-num {
    color: rgba(209, 42, 42, 0.18);
}

.cw-feat-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cw-feat-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cw-feat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cw-feat-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(1200%) hue-rotate(350deg) brightness(0.95) contrast(0.9);
}

.cw-feat-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0;
    text-transform: uppercase;
}

.cw-feat-desc {
    font-size: var(--fs-secondary);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-gray);
    margin: 0;
    max-width: 100%;
    text-align: justify;
}

/* ── Планшет ── */
@media (max-width: 1024px) {
    .cw-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .cw-panel  { padding: 48px 32px; }
    .cw-feat   { padding: 36px 36px 36px 36px; gap: 0 20px; }
    .cw-feat-num { font-size: 2.25rem; }
}

/* ── Мобиль ── */
@media (max-width: 768px) {
    .cw-inner { grid-template-columns: 1fr; }

    .cw-panel {
        padding: 48px var(--container-padding);
        min-height: unset;
    }

    .cw-panel::before, .cw-panel::after { display: none; }

    .cw-panel .cw-heading { font-size: clamp(1.25rem, 5vw, 1.5rem); margin-bottom: 20px; }

    .cw-feat {
        grid-template-columns: 52px 1fr;
        gap: 0 16px;
        padding: 28px var(--container-padding);
    }

    .cw-feat-num { font-size: 1.75rem; }
    .cw-feat-desc { max-width: 100%; }
}

/* ── Мобиль ≤ 568px ── */
@media (max-width: 568px) {
    .cw-feat {
        grid-template-columns: 1fr;
    }

    .cw-feat-num {
        display: none;
    }
}

/* =====================================================
   Адаптивные размеры и начертания заголовков
   spacer-lead, stages-experience-title, industries-heading,
   strategy-heading, approach-title
   ===================================================== */

/* до 568px */
@media (max-width: 568px) {
    /* font-sizes handled by clamp() in :root */
    .stages-section .section-heading.stages-experience-title {
        font-weight: 400;
        line-height: 1.2;
    }

    /* Index page mobile typography */
    .hero.hero-home .hero-title {
        letter-spacing: -0.02em;
        line-height: 1.15;
    }
    .section-intro .intro-title {
        line-height: 1.45;
    }
    .section-intro .intro-desc {
        line-height: 1.6;
    }
    .section-company .company-title {
        line-height: 1.3;
        max-width: 100%;
    }
    .section-company .stat-number {
        font-size: 2rem;
    }
    .clients-divider-text {
        white-space: normal;
        padding: 8px 16px;
        text-align: center;
    }
    .section-advantages .advantage-card-desc {
        line-height: 1.55;
    }
    .section-cta a.cta-btn.action-btn,
    .section-cta button.cta-btn.action-btn {
        width: 100%;
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════
   КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ (.theme-toggle)
   ═══════════════════════════════════════════════════════════ */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    color: #ffffff;
    order: 5;
    flex-shrink: 0;
    margin-left: 12px;
    margin-right: var(--container-padding);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
    z-index: 1002;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
    border-color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
}

/* В scrolled-состоянии — тёмная рамка */
.main-header.is-scrolled .theme-toggle {
    border-color: rgba(0, 0, 0, 0.22);
    color: #111111;
}

.main-header.is-scrolled .theme-toggle:hover {
    border-color: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.05);
}

/* Светлая тема активна — показываем солнце */
.theme-icon--sun  { display: block; }
.theme-icon--moon { display: none; }

/* Тёмная тема активна — показываем луну */
[data-theme="dark"] .theme-icon--sun  { display: none; }
[data-theme="dark"] .theme-icon--moon { display: block; }

@media (max-width: 1024px) {
    .theme-toggle {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        order: 6; /* после lang-switcher(5), перед hamburger(10) */
        margin-left: 8px;
        margin-right: 8px;
    }
}

@media (max-width: 568px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
        margin-left: 6px;
    }
}


/* ═══════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА  — [data-theme="dark"]
   ═══════════════════════════════════════════════════════════ */

/* ── Палитра: холодный сине-серый ── */
[data-theme="dark"] {
    --color-text-dark:   #e4e4e4;
    --color-text-light:  #ffffff;
    --color-gray:        #888888;
    --color-shade-fill:  #232a33;
    --color-shade-border:#3a4250;
    --dt-bg:       #141821;
    --dt-surface:  #1a1f28;
    --dt-card:     #232a33;
    --dt-elevated: #2a323d;
    --dt-border:   rgba(255,255,255,0.08);
}

/* ── Body ── */
[data-theme="dark"] body {
    background-color: var(--dt-bg);
    color: #e4e4e4;
}

/* ── Хедер: scrolled-состояние ── */
[data-theme="dark"] .main-header.is-scrolled,
[data-theme="dark"] .services2-page .main-header.is-scrolled,
[data-theme="dark"] .career-page .main-header.is-scrolled,
[data-theme="dark"] .projects-page .main-header.is-scrolled,
[data-theme="dark"] .contacts-page .main-header.is-scrolled {
    background-color: rgba(20, 24, 33, 0.96) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .main-header.is-scrolled::after {
    background-color: var(--dt-border);
}

/* Навигация: non-scrolled — приглушённый/белый как у lang-btn */
[data-theme="dark"] .main-nav a,
[data-theme="dark"] .main-nav a span {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a:hover span {
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .main-nav li.active a,
[data-theme="dark"] .main-nav li.active a span,
[data-theme="dark"] .main-nav a.active,
[data-theme="dark"] .main-nav a.active span {
    color: #ffffff;
    text-decoration: none;
}
[data-theme="dark"] .main-nav li::after {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Навигация: scrolled — те же принципы, фон тёмный */
[data-theme="dark"] .main-header.is-scrolled .main-nav a,
[data-theme="dark"] .main-header.is-scrolled .main-nav a span {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .main-header.is-scrolled .main-nav a:hover,
[data-theme="dark"] .main-header.is-scrolled .main-nav a:hover span {
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .main-header.is-scrolled .main-nav li.active a,
[data-theme="dark"] .main-header.is-scrolled .main-nav li.active a span,
[data-theme="dark"] .main-header.is-scrolled .main-nav a.active,
[data-theme="dark"] .main-header.is-scrolled .main-nav a.active span {
    color: #ffffff;
    text-decoration: none;
}
[data-theme="dark"] .main-header.is-scrolled .main-nav li::after {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Кнопка-гамбургер в scrolled тёмной теме */
[data-theme="dark"] .main-header.is-scrolled .mobile-menu-toggle {
    border-color: rgba(255,255,255,0.28);
}
[data-theme="dark"] .main-header.is-scrolled .mobile-menu-toggle::before,
[data-theme="dark"] .main-header.is-scrolled .mobile-menu-toggle::after,
[data-theme="dark"] .main-header.is-scrolled .mobile-menu-toggle span {
    background-color: #e4e4e4;
}
[data-theme="dark"] .main-header.is-scrolled .mobile-menu-toggle.active {
    border-color: rgba(255,255,255,0.6);
}

/* Кнопка темы в scrolled */
[data-theme="dark"] .main-header.is-scrolled .theme-toggle {
    border-color: rgba(255,255,255,0.28);
    color: #e4e4e4;
}
[data-theme="dark"] .main-header.is-scrolled .theme-toggle:hover {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.07);
}

/* Переключатель языка в scrolled тёмной теме */
[data-theme="dark"] .main-header.is-scrolled .lang-btn {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .main-header.is-scrolled .lang-btn + .lang-btn {
    border-left-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .main-header.is-scrolled .lang-btn:hover {
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .main-header.is-scrolled .lang-btn.is-active {
    color: var(--color-accent);
}

/* Дропдаун языка в scrolled + тёмная тема — тёмный фон вместо белого */
@media (max-width: 1024px) {
    [data-theme="dark"] .main-header.is-scrolled .lang-switcher-wrap.is-open .lang-btn:not(.is-active) {
        color: rgba(255, 255, 255, 0.6);
        background: var(--dt-surface, #1a1f28);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    }
    [data-theme="dark"] .main-header.is-scrolled .lang-switcher-wrap.is-open .lang-btn:not(.is-active):hover,
    [data-theme="dark"] .main-header.is-scrolled .lang-switcher-wrap.is-open .lang-btn:not(.is-active):active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.07);
    }
}

/* Логотип: в тёмной теме scrolled — полный белый на десктопе */
[data-theme="dark"] .main-header.is-scrolled .logo img.logo-desktop-scrolled { display: none; }
[data-theme="dark"] .main-header.is-scrolled .logo img.logo-desktop           { display: block; }
/* ≤1024 в тёмной теме: буква S всегда LOGO_letter_S.svg (вверху и при скролле) */
@media (max-width: 1024px) {
    [data-theme="dark"] .main-header.is-scrolled .logo img.logo-mobile-scrolled { display: none !important; }
    [data-theme="dark"] .main-header.is-scrolled .logo img.logo-mobile           { display: block !important; }
}

/* ── Мобильное меню (тёмная тема) ── */
@media (max-width: 1024px) {
    /* Неактивные пункты — приглушённый белый, как у lang-btn */
    [data-theme="dark"] .main-nav a,
    [data-theme="dark"] .main-nav a span {
        color: rgba(255, 255, 255, 0.45);
    }
    /* Hover — немного ярче */
    [data-theme="dark"] .main-nav a:hover,
    [data-theme="dark"] .main-nav a:hover span {
        color: rgba(255, 255, 255, 0.85);
        background-color: rgba(255, 255, 255, 0.05);
    }
    [data-theme="dark"] .main-nav li.active a,
    [data-theme="dark"] .main-nav li.active a span,
    [data-theme="dark"] .main-nav a.active,
    [data-theme="dark"] .main-nav a.active span {
        color: #ffffff;
    }
}
@media (max-width: 568px) {
    [data-theme="dark"] .main-nav li.active a,
    [data-theme="dark"] .main-nav li.active a span,
    [data-theme="dark"] .main-nav a.active,
    [data-theme="dark"] .main-nav a.active span {
        text-decoration: underline;
        text-underline-offset: 6px;
        text-decoration-color: rgba(255, 255, 255, 0.4);
    }
}
@media (min-width: 569px) and (max-width: 1024px) {
    [data-theme="dark"] .main-nav {
        background-color: transparent;
    }
}
@media (max-width: 568px) {
    [data-theme="dark"] .main-nav {
        background-color: rgba(20, 24, 33, 0.96);
    }
}
/* Открытое меню на десктопе (перестраховка) */
[data-theme="dark"] .main-nav.is-open {
    background-color: rgba(20, 24, 33, 0.96);
}
[data-theme="dark"] .menu-overlay {
    background: rgba(0,0,0,0.72);
}

/* ── Footer logo: тема-зависимое переключение ── */
.footer-logo-img--dark { display: none; }
[data-theme="dark"] .footer-logo-img--light { display: none; }
[data-theme="dark"] .footer-logo-img--dark  { display: block; }

/* ── Section-intro ── */
[data-theme="dark"] .section-intro {
    background: #1a1f28;
}
[data-theme="dark"] .intro-title {
    color: #e4e4e4;
}
[data-theme="dark"] .intro-desc {
    color: #888;
}
[data-theme="dark"] .intro-badge-mirror {
    background-color: #232a33;
    border-color: var(--dt-border);
}
[data-theme="dark"] .intro-badge-mirror::before {
    background-color: #2a323d;
}
[data-theme="dark"] .intro-badge-mirror::after {
    filter: grayscale(100%) brightness(0.62);
}
[data-theme="dark"] .intro-badge-mirror-number {
    color: #e4e4e4;
}
[data-theme="dark"] .intro-badge-mirror-text {
    color: #e4e4e4;
}

/* ── Section-clients-marquee ── */
[data-theme="dark"] .section-clients-marquee {
    background-color: #1a1f28;
}
[data-theme="dark"] .clients-divider::before {
    background-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .clients-divider-text {
    background-color: #232a33;
    border-color: rgba(255,255,255,0.12);
    color: #e4e4e4;
}
[data-theme="dark"] .clients-item img {
    filter: brightness(0) invert(1) opacity(0.4);
}

/* ── Section-advantages ── */
[data-theme="dark"] .section-advantages,
[data-theme="dark"] .section-advantages .advantages-wrap {
    background-color: var(--dt-surface);
}
[data-theme="dark"] .advantages-heading {
    color: #e4e4e4;
}
[data-theme="dark"] .advantages-divider {
    background-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .advantage-card {
    background-color: var(--dt-card);
    border-color: var(--dt-border);
}
[data-theme="dark"] .advantage-card-title {
    color: #e4e4e4;
}
[data-theme="dark"] .advantage-card-desc {
    color: #c8c8c8;
}
[data-theme="dark"] .advantage-card-icon img {
    filter: brightness(0) invert(1) brightness(0.53);
}

/* ≤1024: как в светлой теме — фон секции = фото + overlay; без сплошной dt-surface */
@media (max-width: 1024px) {
    [data-theme="dark"] .section-advantages,
    [data-theme="dark"] .section-advantages .advantages-wrap {
        background-color: transparent;
    }
}

/* ── Section-company ── */
[data-theme="dark"] .section-company,
[data-theme="dark"] .section-spacer.section-company {
    background-color: #1a1f28;
}
[data-theme="dark"] .company-title {
    color: #e4e4e4;
}
[data-theme="dark"] .company-subtitle {
    color: #e4e4e4;
}
[data-theme="dark"] .company-text {
    color: #c8c8c8;
}
/* Акцентный абзац «За два десятка лет...» */
[data-theme="dark"] .company-text-block .company-text:nth-child(2) {
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-left-color: #d12a2a;
}
[data-theme="dark"] .stat-number {
    color: #e4e4e4;
}
[data-theme="dark"] .stat-label {
    color: #c8c8c8;
}
[data-theme="dark"] .stat-icon {
    filter: brightness(0) invert(1) brightness(0.53);
}
[data-theme="dark"] .company-stats {
    border-color: var(--dt-border);
}
[data-theme="dark"] .stat-item {
    border-color: var(--dt-border);
}
/* Как цвет текста акцентного абзаца (.company-text:nth-child(2) → #ccc) */
[data-theme="dark"] .company-signature-img {
    filter: brightness(0) invert(1) brightness(0.8);
}

/* ── Section-spacer ── (как .career-why-section, не dt-surface) */
[data-theme="dark"] .section-spacer {
    background-color: #232a33;
}
[data-theme="dark"] .section-spacer-text,
[data-theme="dark"] .spacer-lead {
    color: #e4e4e4;
}
[data-theme="dark"] .spacer-sub {
    color: #c8c8c8;
}
[data-theme="dark"] .spacer-side-label {
    color: rgba(255,255,255,0.08);
}
/* ── Section-strategy ── */
[data-theme="dark"] .section-strategy {
    background-color: var(--dt-surface);
}
[data-theme="dark"] .strategy-heading,
[data-theme="dark"] .strategy-intro-left .company-label,
[data-theme="dark"] .section-smart-cards .smart-cards-label {
    color: #e4e4e4;
}
[data-theme="dark"] .strategy-intro-bold {
    color: #c0c0c0;
}
[data-theme="dark"] .strategy-intro-text {
    color: #888;
}

/* ── Section-smart-cards ── */
[data-theme="dark"] .section-smart-cards {
    background-color: var(--dt-bg);
}
[data-theme="dark"] .smart-card {
    background: var(--dt-card);
    border-color: var(--dt-border) !important;
}
[data-theme="dark"] .smart-card-letter {
    color: #888;
}
[data-theme="dark"] .smart-card .smart-card-title {
    color: #e4e4e4;
}
[data-theme="dark"] .smart-card .smart-card-title span {
    color: #c8c8c8;
}
[data-theme="dark"] .smart-card .smart-card-desc {
    color: #c8c8c8;
}
[data-theme="dark"] .smart-card-icon img {
    filter: brightness(0) invert(1) brightness(0.53);
}
[data-theme="dark"] .smart-card:hover .smart-card-letter {
    color: #888;
}
[data-theme="dark"] .smart-card:hover .smart-card-icon img {
    filter: brightness(0) invert(1) brightness(0.53);
}
[data-theme="dark"] .smart-card:hover .smart-card-title {
    color: #e4e4e4;
}
[data-theme="dark"] .smart-card:hover .smart-card-title span,
[data-theme="dark"] .smart-card:hover .smart-card-desc {
    color: #c8c8c8;
}

/* ── Section-stages ── */
[data-theme="dark"] .stages-section {
    background: linear-gradient(180deg, #1a1f28 0%, #141821 100%);
}
[data-theme="dark"] .stage-card-wrap {
    background: var(--color-shade-border);
    border: 1px solid var(--color-shade-border);
}
[data-theme="dark"] .stage-card {
    background: #232a33;
    border: 1px solid var(--color-shade-border);
}
[data-theme="dark"] .stage-number {
    color: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .stage-card:hover .stage-number {
    color: rgba(209, 42, 42, 0.35);
}
[data-theme="dark"] .stage-title {
    color: #e4e4e4;
}
[data-theme="dark"] .stage-desc {
    color: #c8c8c8;
}
[data-theme="dark"] .stage-list li {
    color: #c8c8c8;
}
[data-theme="dark"] .stage-list li::before {
    background: none;
    border-color: #888;
}
[data-theme="dark"] .stage-card-icon img {
    filter: brightness(0) invert(1) brightness(0.894);
}
/* Старые имена (если используются) */
[data-theme="dark"] .stage-card-title,
[data-theme="dark"] .stages-experience-title {
    color: #e4e4e4;
}
[data-theme="dark"] .stage-card-desc,
[data-theme="dark"] .stages-experience-text {
    color: #888;
}
[data-theme="dark"] .stage-card-number {
    color: rgba(255,255,255,0.05);
}

/* ── Section-approach ── */
[data-theme="dark"] .section-approach {
    background-color: var(--dt-bg);
}
/* Как в светлой: подложка + фото (.approach-card-bg), без сплошной dt-card поверх */
[data-theme="dark"] .approach-card {
    background-color: #353c48;
}
[data-theme="dark"] .approach-card-content {
    background: linear-gradient(
        90deg,
        rgba(26, 31, 40, 0.96) 0%,
        rgba(26, 31, 40, 0.78) 38%,
        rgba(26, 31, 40, 0.35) 58%,
        transparent 78%
    );
}
[data-theme="dark"] .approach-card-bg {
    opacity: 0.42;
}
[data-theme="dark"] .approach-title {
    color: #e4e4e4;
}
[data-theme="dark"] .approach-desc {
    color: #888;
}
[data-theme="dark"] .approach-side-label {
    color: rgba(255,255,255,0.05);
}

@media (max-width: 568px) {
    [data-theme="dark"] .approach-card-bg {
        opacity: 0.28;
    }
    [data-theme="dark"] .approach-card-content {
        background: linear-gradient(
            180deg,
            rgba(26, 31, 40, 0.96) 0%,
            rgba(26, 31, 40, 0.62) 48%,
            rgba(26, 31, 40, 0.18) 100%
        );
    }
}

/* ── Section-industries ── */
[data-theme="dark"] .section-industries::before {
    background: rgba(0,0,0,0.55);
}
[data-theme="dark"] .industry-card {
    border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .industry-card:hover {
    background-color: rgba(255,255,255,0.08);
}

/* ── Section-portfolio ── */
[data-theme="dark"] .portfolio-section {
    background-color: var(--dt-bg);
}
[data-theme="dark"] .project-card {
    background-color: var(--dt-card);
}
[data-theme="dark"] .project-card-content {
    border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .project-card-title {
    color: #9ca3af;
}
[data-theme="dark"] .project-card:hover .project-card-title {
    color: #f0f0f0;
}
[data-theme="dark"] .project-card-description {
    color: rgba(200, 200, 200, 0.95);
}
[data-theme="dark"] .project-card-year {
    color: rgba(255,255,255,0.35);
}
[data-theme="dark"] .project-card-label {
    color: #888;
}
[data-theme="dark"] .project-card-arrow {
    color: #a0a0a0;
}
[data-theme="dark"] .filter-btn {
    border-color: rgba(255,255,255,0.14);
    color: rgba(228,228,228,0.45);
}
[data-theme="dark"] .filter-btn:hover {
    color: #e4e4e4;
    border-color: rgba(255,255,255,0.4);
}
[data-theme="dark"] .filter-btn.active {
    background-color: #e4e4e4;
    color: #141821;
    border-color: transparent;
}

/* ── CTA section ── */
[data-theme="dark"] .section-cta {
    background-color: #1a1f28;
}
[data-theme="dark"] .cta-inner-box {
    background-color: #2a323d;
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .cta-inner-box::before {
    opacity: 0.12;
}
[data-theme="dark"] .cta-heading {
    color: #f0f0f0;
}
[data-theme="dark"] .cta-desc {
    color: #c8c8c8;
}
[data-theme="dark"] .cta-stripe {
    background-color: #141821;
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] a.cta-btn.action-btn,
[data-theme="dark"] button.cta-btn.action-btn {
    background-color: #1a1f28;
    border-color: rgba(255,255,255,0.18);
    color: #e4e4e4;
}
[data-theme="dark"] a.cta-btn.action-btn:hover,
[data-theme="dark"] button.cta-btn.action-btn:hover {
    color: #ffffff;
    border-color: transparent;
}

/* ── Project-detail page ── */
[data-theme="dark"] .pd-content {
    background-color: var(--dt-bg);
}
[data-theme="dark"] .pd-section {
    background: var(--dt-card);
}
[data-theme="dark"] .pd-section-title {
    color: #e4e4e4;
}
[data-theme="dark"] .pd-section-label,
[data-theme="dark"] .pd-meta-card-label {
    color: rgba(228, 228, 228, 0.72);
}
[data-theme="dark"] .pd-section-text {
    color: rgba(228, 228, 228, 0.88);
}
[data-theme="dark"] .pd-meta-card {
    background: var(--dt-card);
}
[data-theme="dark"] .pd-meta-item {
    border-bottom-color: var(--dt-border);
}
[data-theme="dark"] .pd-meta-label {
    color: rgba(255,255,255,0.35);
}
[data-theme="dark"] .pd-meta-value {
    color: #e4e4e4;
}
[data-theme="dark"] .pd-meta-stage-thumb {
    border: none;
    background: transparent;
}
[data-theme="dark"] .pd-meta-stage-tooltip {
    color: #f0f0f0;
    background: rgba(17, 17, 17, 0.95);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .pd-meta-stage-wrap--placeholder .pd-meta-stage-tooltip {
    color: #ffffff;
}
[data-theme="dark"] .pd-meta-cta {
    border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pd-meta-cta-text {
    color: #a0a0a0;
}
[data-theme="dark"] .pd-back {
    color: rgba(228,228,228,0.4);
}
[data-theme="dark"] .pd-back:hover {
    color: #d12a2a;
}

/* ── Contacts page ── */
[data-theme="dark"] .contact-info-section {
    background-color: var(--dt-surface);
}
[data-theme="dark"] .contact-form-card {
    background-color: var(--dt-card);
    box-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
[data-theme="dark"] .contact-form-title,
[data-theme="dark"] .contact-info-title {
    color: #f0f0f0;
}
[data-theme="dark"] .contact-info-text,
[data-theme="dark"] .contact-info-value {
    color: #c8c8c8;
}
[data-theme="dark"] .form-group label {
    color: #c8c8c8;
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group .form-select {
    color: #f0f0f0;
    border-bottom-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: #888;
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group .form-select:focus {
    border-bottom-color: rgba(255,255,255,0.5);
}
[data-theme="dark"] .form-group .form-select option {
    color: #141821;
    background-color: #e4e4e4;
}
[data-theme="dark"] .contact-social-link {
    border-color: rgba(255,255,255,0.18);
    color: #888;
}
[data-theme="dark"] .contact-social-link:hover {
    border-color: #e4e4e4;
    background-color: #e4e4e4;
    color: #141821;
}

/* ── Career page ── */
[data-theme="dark"] .career-section,
[data-theme="dark"] .career-apply-section {
    background-color: var(--dt-surface);
}
[data-theme="dark"] .career-title,
[data-theme="dark"] .career-role-title {
    color: #e4e4e4;
}
[data-theme="dark"] .career-desc,
[data-theme="dark"] .career-role-desc {
    color: #888;
}
[data-theme="dark"] .career-card {
    background-color: var(--dt-card);
    border-color: var(--dt-border);
}
[data-theme="dark"] .career-card-title {
    color: #e4e4e4;
}
[data-theme="dark"] .career-card-desc {
    color: #888;
}
[data-theme="dark"] .cf-label {
    color: #666;
}
[data-theme="dark"] .cf-input {
    color: #e4e4e4;
    border-bottom-color: rgba(255,255,255,0.15);
    background: transparent;
}
[data-theme="dark"] .cf-input::placeholder {
    color: #444;
}
[data-theme="dark"] .cf-input:focus {
    border-bottom-color: rgba(255,255,255,0.5);
}
[data-theme="dark"] .cf-submit-btn,
[data-theme="dark"] .cf-file-btn {
    background-color: var(--dt-card);
    color: #e4e4e4;
}

/* ── Footer ── */
[data-theme="dark"] .site-footer {
    background-color: #141821;
    color: #e4e4e4;
}
[data-theme="dark"] .footer-title {
    color: #e4e4e4;
}
[data-theme="dark"] .footer-desc,
[data-theme="dark"] .footer-contact li {
    color: rgba(136,136,136,0.9);
}
[data-theme="dark"] .footer-nav a,
[data-theme="dark"] .footer-contact a {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .footer-nav a:hover,
[data-theme="dark"] .footer-contact a:hover {
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .footer-nav a.is-current {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .footer-bottom {
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .footer-copyright {
    color: rgba(136,136,136,0.6);
}

/* ── Scroll-to-top button ── */
[data-theme="dark"] .scroll-to-top {
    background-color: #232a33;
    border-color: var(--dt-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
[data-theme="dark"] .scroll-to-top svg {
    color: #e4e4e4;
}

/* ── Боковые надписи ── */
[data-theme="dark"] .section-label {
    color: rgba(255,255,255,0.06);
}

/* ── Общие текстовые элементы (все страницы) ── */
[data-theme="dark"] .section-heading {
    color: #e4e4e4;
}
[data-theme="dark"] .section-text {
    color: #888888;
}
[data-theme="dark"] .action-btn--dark {
    background-color: var(--dt-card);
    color: #e4e4e4;
}
[data-theme="dark"] .action-btn--dark:hover {
    background-color: var(--dt-elevated);
}

/* ── Strategy-cards (services) ── */
[data-theme="dark"] .strategy-card {
    background-color: var(--dt-card);
}
[data-theme="dark"] .strategy-card-wrap {
    border-color: var(--dt-border);
}
[data-theme="dark"] .strategy-card-title,
[data-theme="dark"] .strategy-card-title-ru {
    color: #e4e4e4;
}
[data-theme="dark"] .strategy-card-title-en {
    color: #888888;
}
[data-theme="dark"] .strategy-card-desc {
    color: #888888;
}
[data-theme="dark"] .strategy-card-icon img {
    filter: brightness(0) invert(1) opacity(0.55);
}

/* ── Career: секция «Почему мы» ── */
/* Только background-color: шорткат background сбрасывал background-image
   у .career-page .career-why-section на мобильных (фото как в светлой теме). */
[data-theme="dark"] .career-why-section {
    background-color: #232a33;
}
[data-theme="dark"] .cw-feat {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .cw-feat:hover {
    background: rgba(209, 42, 42, 0.04);
}
[data-theme="dark"] .cw-feat-num {
    color: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .cw-feat:hover .cw-feat-num {
    color: rgba(209, 42, 42, 0.35);
}
[data-theme="dark"] .cw-feat-title {
    color: #e4e4e4;
}
[data-theme="dark"] .cw-feat-desc {
    color: #999;
}
[data-theme="dark"] .cw-feat-icon img {
    filter: brightness(0) invert(1) opacity(0.7);
}

/* ── Career: apply секция ── */
[data-theme="dark"] .career-apply-lead {
    color: #e0e0e0;
}

/* ── Career: форма заявки ── */
[data-theme="dark"] .career-form-label {
    color: #888888;
}
[data-theme="dark"] .career-form-label--muted {
    color: rgba(228,228,228,0.35);
}
[data-theme="dark"] .career-form-input {
    color: #e4e4e4;
    border-bottom-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .career-form-input:focus {
    border-bottom-color: rgba(255,255,255,0.5);
}
[data-theme="dark"] .career-form-input::placeholder {
    color: #444444;
}
[data-theme="dark"] .career-file-btn {
    background-color: var(--dt-card);
    color: #e4e4e4;
}
[data-theme="dark"] .career-file-btn:hover {
    background-color: var(--dt-elevated);
}

/* ── Contacts: блоки контактной информации ── */
[data-theme="dark"] .contact-block-title {
    color: #f0f0f0;
}
[data-theme="dark"] .contact-block-line,
[data-theme="dark"] .contact-block-line a {
    color: #c8c8c8;
}
[data-theme="dark"] .contact-block-line a:hover {
    color: #e4e4e4;
}
[data-theme="dark"] .contact-block-label {
    color: #f0f0f0;
}

/* ── Плавное переключение ── */
body,
.main-header, .main-nav,
.section-intro,
.section-clients-marquee, .clients-divider-text,
.section-advantages, .advantages-wrap, .advantage-card,
.section-company, .section-spacer, .section-strategy,
.section-smart-cards, .smart-card,
.stages-section, .stage-card-wrap,
.section-approach, .approach-card, .approach-card-content,
.section-industries,
.portfolio-section, .project-card, .filter-btn,
.section-cta, .cta-inner-box, .cta-stripe,
.contact-info-section, .contact-form-card, .contact-submit-btn,
.career-section, .career-apply-section, .career-card,
.site-footer,
.scroll-to-top,
.pd-content, .pd-section, .pd-meta-card,
.strategy-card, .strategy-card-title,
.career-form-input, .career-file-btn,
.contact-block-title, .contact-block-line,
.cw-heading, .section-heading, .section-text {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}