/* ==========================================================================
   Лендінг «Дистрибуція електроінструментів» (/distribution/)
   Сторінка рендериться з $this->layout = false, тому глобальні normalize
   і styles.css сюди не потрапляють — reset та базова типографіка нижче.
   Брейкпоінти: 601 / 769 / 1025 / 1441 (як у решті проєкту).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */
html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'Cera Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
    font-variant-numeric: lining-nums;
    letter-spacing: 0.01px;
}

h1, h2, h3, h4, h5, h6, p, figure {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

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

button,
input,
textarea,
select {
    margin: 0;
    font-family: inherit;
    font-size: 16px;
    line-height: inherit;
    color: inherit;
    -webkit-appearance: none;
}

button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: visible;
    text-transform: none;
}

[hidden] {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------ 2. Контейнер і утиліти */
.page-container {
    width: 100%;
    max-width: 1430px;
    margin: 0 auto;
    padding: 0 15px;
}

.distribution {
    position: relative;
    overflow: hidden;
}

/* Запас під фіксований хедер для переходів за якорем. JS позиціонує сам,
   але це страхує нативний перехід — до того, як скрипт відпрацює. */
#assortment,
#logistics,
#presence {
    scroll-margin-top: 60px;
}

@media only screen and (min-width: 769px) {
    #assortment,
    #logistics,
    #presence {
        scroll-margin-top: 70px;
    }
}

.distribution__btn {
    display: inline-block;
    margin: 0;
    padding: 12px 30px;
    border: none;
    border-radius: 3px;
    background-color: #ff2f00;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    transition: background-color .2s;
}

.distribution__btn:hover,
.distribution__btn:focus {
    background-color: #d72700;
}

.distribution__title {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
    color: #333;
}

@media only screen and (min-width: 1025px) {
    .distribution__title {
        font-size: 48px;
    }
}

/* ------------------------------------------------------------- 3. Хедер */
.dheader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}

/* Фон і блюр липкого хедера живуть на псевдоелементі, а не на самому .dheader.
   backdrop-filter створює containing block для position: fixed нащадків — якби
   він лишався на хедері, мобільна панель після скролу рахувала б inset: 0 від
   хедера і відкривалась смужкою вгорі замість повного екрана. */
.dheader::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: transparent;
    transition: background-color .2s;
}

.dheader--sticky::before {
    background-color: rgba(28, 28, 28, .7);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}

.dheader__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap задає мінімальну відстань між групами — навіть коли space-between
       вичерпав вільне місце, меню не наїде на підпис біля лого */
    gap: 20px;
    min-height: 51px;
    /* 12px — у макеті мобільний хедер 61px при підписі у два рядки (36px) */
    padding: 12px 0;
}

@media only screen and (min-width: 1360px) {
    .dheader__wrap {
        gap: 24px;
    }
}

@media only screen and (min-width: 1440px) {
    .dheader__wrap {
        gap: 30px;
    }
}

@media only screen and (min-width: 769px) {
    .dheader__wrap {
        padding: 15px 0;
    }
}

.dheader__brand {
    display: flex;
    align-items: center;
    /* min-width: 0 — щоб підпис поруч із лого міг переноситись, а не розпирати рядок */
    min-width: 0;
}

/* Від 769px підпис в один рядок і бренд не стискається: місце під фразу
   зарезервовано, решта хедера підлаштовується під те, що лишилось. */
@media only screen and (min-width: 769px) {
    .dheader__brand {
        flex: 0 0 auto;
    }
}

.dheader__logo {
    display: block;
    flex-shrink: 0;
    width: 85px;
    height: auto;
}

@media only screen and (min-width: 769px) {
    .dheader__logo {
        width: 109px;
    }
}

/* У макеті підпис є і на мобільному: 12px у два рядки (span 236x36,
   текст 195x36), роздільник 1x13. На десктопі — 14px в один рядок, 1x25. */
.dheader__logo-text {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e7e7e7;
}

.dheader__logo-text::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 13px;
    margin: 0 10px 0 9px;
    background-color: #e7e7e7;
    opacity: .5;
}

@media only screen and (min-width: 769px) {
    .dheader__logo-text {
        font-size: 14px;
        line-height: 1;
        letter-spacing: normal;
        white-space: nowrap;
    }

    .dheader__logo-text::before {
        height: 25px;
        margin: 0 21px 0 17px;
    }
}

.dheader__nav {
    display: none;
}

/* Рядок хедера: лого 109 + підпис 299 + меню 468 (два рядки) + соцмережі 180
   + кнопка 191 + три проміжки по 24 = 1319px контенту, тобто 1349px вікна.
   Українська найдовша; нижче 1360px переходимо на бургер. */
@media only screen and (min-width: 1360px) {
    .dheader__nav {
        display: flex;
        flex-shrink: 0;
        gap: 24px;
        align-items: center;
    }
}

/* Із соцмережами в рядку пункти в один рядок не влазять за жодної ширини
   (1426px проти 1400px контейнера), тому верстаємо їх у два. */
.dheader__nav-link {
    max-width: 140px;
    font-size: 14px;
    line-height: 1.25;
    color: #fff;
    transition: color .2s;
}

.dheader__nav-link:hover {
    color: #ff2f00;
}

.dheader__socials {
    display: none;
}

@media only screen and (min-width: 1360px) {
    .dheader__socials {
        display: flex;
        flex-shrink: 0;
        gap: 20px;
        align-items: center;
    }
}

.dheader__social {
    display: block;
    width: 30px;
    height: 30px;
    transition: opacity .2s;
}

.dheader__social:hover {
    opacity: .75;
}

.dheader__social img {
    display: block;
    width: 30px;
    height: 30px;
}

.dheader__btn {
    display: none;
}

@media only screen and (min-width: 769px) {
    .dheader__btn {
        display: inline-block;
    }
}

/* Поки меню згорнуте в бургер, кнопка притискається до нього праворуч,
   інакше space-between лишає її висіти посеред рядка. */
@media only screen and (max-width: 1359px) {
    .dheader__btn {
        margin-left: auto;
    }
}

/* Бургер: тільки до 1025px */
.dheader__burger {
    position: relative;
    z-index: 2;
    display: block;
    width: 28px;
    height: 20px;
    flex-shrink: 0;
}

@media only screen and (min-width: 1360px) {
    .dheader__burger {
        display: none;
    }
}

.dheader__burger span,
.dheader__burger::before,
.dheader__burger::after {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: transform .25s, opacity .25s;
}

.dheader__burger::before {
    top: 0;
}

.dheader__burger span {
    top: 9px;
}

.dheader__burger::after {
    bottom: 0;
}

.dheader__burger[aria-expanded='true']::before {
    transform: translateY(9px) rotate(45deg);
}

.dheader__burger[aria-expanded='true'] span {
    opacity: 0;
}

.dheader__burger[aria-expanded='true']::after {
    transform: translateY(-9px) rotate(-45deg);
}

.dheader__mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 80px 30px 40px;
    background-color: rgba(28, 28, 28, .97);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s, visibility .3s;
}

.dheader__mobile.is-open {
    transform: translateX(0);
    visibility: visible;
}

@media only screen and (min-width: 1360px) {
    .dheader__mobile {
        display: none;
    }
}

/* Регістр і накреслення — як у десктопному меню (.dheader__nav-link),
   більший кегль лишаємо: це розмір під палець, а не інший текст. */
.dheader__mobile-link {
    font-size: 22px;
    line-height: 1.25;
    color: #fff;
    transition: color .2s;
}

.dheader__mobile-link:hover {
    color: #ff2f00;
}

.dheader__mobile-socials {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.dheader__mobile .distribution__btn {
    align-self: flex-start;
}

/* --------------------------------------------------------- 4. Герой */
.dhero {
    position: relative;
    display: flex;
    /* stretch, а не center: контейнер має зайняти всю висоту секції,
       інакше auto-маржини на .dhero__content нічого не центрують. */
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    /* Верхній відступ — запас під фіксований хедер (~70px) */
    padding: 65px 0 50px;
    background-color: rgba(20, 20, 20, .7);
    overflow: hidden;
}

@media only screen and (min-width: 1025px) {
    .dhero {
        padding: 100px 0 80px;
    }
}

.dhero__inner {
    display: flex;
    flex-direction: column;
}

.dhero__video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Контент центрований по вертикалі, але тільки у місці, що лишилось
   під посиланням: auto-маржини притискають посилання до верху. */
.dhero__content {
    margin-top: auto;
    margin-bottom: auto;
}

/* Посилання «Повернутись до покупок». Портовано з career-лендінга
   (frontend/vue/src/styles/landings/career-new/_banner.sass, .return-link).
   Іконку беремо звідти ж, щоб не дублювати файл. */
.dhero__return {
    /* align-self, щоб посилання не розтягувалось на всю ширину колонки
       і клікабельною лишалась тільки сама фраза */
    align-self: flex-start;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
    margin: 10px 0 20px;
    padding-left: 37px;
    font-size: 14px;
    line-height: 26px;
    color: #fff;
    text-decoration: none;
}

.dhero__return:hover {
    text-decoration: underline;
}

.dhero__return::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-image: url("/img/career-new/exit.svg");
    background-position: center;
    background-repeat: no-repeat;
}

.dhero__title {
    margin: 0 0 30px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    color: #fff;
}

@media only screen and (min-width: 769px) {
    .dhero__title {
        font-size: 48px;
    }
}

@media only screen and (min-width: 1025px) {
    .dhero__title {
        max-width: 1400px;
        margin-bottom: 60px;
        font-size: 56px;
    }
}

/* У макеті тайтл — 4 рядки по 90px у боксі 1400px, тобто 72px при lh 1.25 */
@media only screen and (min-width: 1441px) {
    .dhero__title {
        font-size: 72px;
    }
}

.dhero__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Ряд стає горизонтальним із 1200px: із забороною переносу він більше не
   стискається, а мінімальна ширина — 1026px (uk) і 1135px (pl) разом
   із роздільниками. Нижче список лишається вертикальним, як на мобільному. */
@media only screen and (min-width: 1200px) {
    .dhero__list {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
}

.dhero__list-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
}

.dhero__list-item:not(:last-child) {
    margin-bottom: 20px;
}

.dhero__list-item::before {
    content: url('/img/svgo/list-pin.svg');
    margin-right: 15px;
}

/* Точка розриву задана в перекладі через <br>. На мобільному список
   вертикальний і кожен пункт має свій рядок, тому розрив там гасимо. */
.dhero__list-item br {
    display: none;
}

@media only screen and (min-width: 1200px) {
    .dhero__list-item {
        font-size: 20px;
        line-height: 25px;
    }

    .dhero__list-item:not(:last-child) {
        margin-bottom: 0;
    }

    /* Рівно два рядки будь-якою мовою: переносити можна тільки по <br>.
       max-width тут не годиться — під польські «2 000+ profesjonalistów»
       і «zadowolonych klientów» він давав третій рядок. */
    .dhero__list-item span {
        white-space: nowrap;
    }

    .dhero__list-item br {
        display: inline;
    }

    .dhero__list-item::before {
        content: '';
        display: block;
        flex-shrink: 0;
        width: 2px;
        height: 44px;
        margin: 0 24px;
        background-color: #fff;
        opacity: .3;
    }

    .dhero__list-item:first-child::before {
        display: none;
    }
}

/* 40px — відступ роздільників із макета; на вужчих екранах він не лишає
   місця під польські підписи, тому вмикається лише коли контейнер повний. */
@media only screen and (min-width: 1440px) {
    .dhero__list-item::before {
        margin: 0 40px;
    }
}

/* Кнопка героя — тільки до 769px, вище заклик є в хедері.
   239x49, по центру, 16px/400 — розміри з макета. */
.dhero__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 239px;
    height: 49px;
    margin: 30px auto 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
}

@media only screen and (min-width: 769px) {
    .dhero__btn {
        display: none;
    }
}

/* ------------------------------------------------- 5. Точки монтування форм
   Форми підключає сторонній сервіс. Тут лише контейнери з унікальними
   селекторами; min-height утримує висоту з макета до інжекту форми.        */
.dform {
    padding: 60px 0;
    background-color: #fff;
}

@media only screen and (min-width: 1025px) {
    .dform {
        padding: 100px 0;
    }
}

.distribution-form-mount {
    width: 100%;
    min-height: 420px;
}

@media only screen and (min-width: 1025px) {
    .distribution-form-mount {
        min-height: 252px;
    }
}

#distribution-form-partner {
    min-height: 480px;
}

@media only screen and (min-width: 1025px) {
    #distribution-form-partner {
        min-height: 380px;
    }
}

/* ------------------------------------------------- 6. Категорії продукції */
.dcategories {
    position: relative;
    padding: 60px 0 0;
    background-image: linear-gradient(88.69deg, #222 0.51%, #393939 47.44%, #242422 99.53%);
    overflow: hidden;
}

@media only screen and (min-width: 1025px) {
    .dcategories {
        padding: 120px 0 0;
    }
}

.dcategories__top {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media only screen and (min-width: 1025px) {
    .dcategories__top {
        flex-direction: row;
        justify-content: space-between;
        gap: 30px;
    }
}

.dcategories__intro {
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: #fff;
}

@media only screen and (min-width: 1025px) {
    .dcategories__intro {
        flex: 0 0 443px;
        max-width: 443px;
    }
}

.dcategories__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
}

@media only screen and (min-width: 1025px) {
    .dcategories__title {
        font-size: 48px;
    }
}

.dcategories__list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.dcategories__aside {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media only screen and (min-width: 1025px) {
    .dcategories__aside {
        flex: 0 1 968px;
        max-width: 968px;
    }
}

.dcategories__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 22px;
    align-items: flex-start;
    justify-content: space-between;
}

@media only screen and (min-width: 601px) {
    .dcategories__stats {
        gap: 22px;
    }
}

.dcategories__stat {
    display: flex;
    flex: 1 1 140px;
    flex-direction: column;
    /* відбивка між іконкою (або числом) і підписом */
    gap: 10px;
    align-items: center;
    color: #fff;
    text-align: center;
}

/* У макеті всі п'ять показників стоять в один рядок у колонці 968px */
@media only screen and (min-width: 1025px) {
    .dcategories__stat {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Верхній елемент кожного показника — 60px, щоб підписи стояли на одній лінії */
/* Обидва показники центруються в боксі 60px, тому «1 200+» і «5» стоять на
   одній висоті, а «до» та «років» опиняються на середині великого числа
   замість того, щоб висіти по його нижньому краю. */
.dcategories__stat-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

@media only screen and (min-width: 1025px) {
    .dcategories__stat-number {
        font-size: 48px;
    }
}

/* Всередині «до 5 років» цифра вже в рядку з min-height — обнуляємо */
.dcategories__stat-inline .dcategories__stat-number {
    min-height: 0;
}

.dcategories__stat-label {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.15;
}

/* 24px — розмір із макета на 1920; на проміжних ширинах колонка вужча */
@media only screen and (min-width: 1441px) {
    .dcategories__stat-label {
        font-size: 24px;
    }
}

/* «до 5 років» — цифра великим, слова дрібним */
.dcategories__stat-inline {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    text-transform: uppercase;
}

.dcategories__stat-word {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

@media only screen and (min-width: 1025px) {
    .dcategories__stat-word {
        font-size: 20px;
    }
}

/* Іконки-маски: у макеті це білі гліфи, задані alpha-маскою */
.dcategories__stat-icon {
    width: 60px;
    height: 60px;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.dcategories__stat-icon--factory {
    -webkit-mask-image: url('/distribution-landing/img/icons/factory.png');
    mask-image: url('/distribution-landing/img/icons/factory.png');
}

.dcategories__stat-icon--quality {
    -webkit-mask-image: url('/distribution-landing/img/icons/quality.png');
    mask-image: url('/distribution-landing/img/icons/quality.png');
}

.dcategories__stat-marks {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.dcategories__stat-mark {
    display: block;
    width: auto;
    height: 56px;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.dcategories__stat-mark--eac {
    width: 53px;
    -webkit-mask-image: url('/distribution-landing/img/icons/mark-eac.png');
    mask-image: url('/distribution-landing/img/icons/mark-eac.png');
}

.dcategories__stat-mark--ce {
    width: 68px;
    -webkit-mask-image: url('/distribution-landing/img/icons/mark-ce.png');
    mask-image: url('/distribution-landing/img/icons/mark-ce.png');
}

.dcategories__text {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    text-align: center;
}

/* Декорація впирається в низ секції: у самої секції немає padding-bottom,
   а негативний margin-top підтягує зображення під контент — так само,
   як .products__bg на лендінгу франшизи.

   Знизу у файлах є повністю прозора смуга (bg.png — 50px із 1919 ширини,
   bg-mobile.png — 25px із 375), через яку інструменти не діставали до краю.
   Компенсуємо негативним margin-bottom у відсотках: відсоток рахується від
   ширини контейнера, а висота зображення масштабується так само, тому
   співвідношення тримається на будь-якій ширині екрана. */
.dcategories__picture {
    display: block;
}

.dcategories__bg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: -6.667%;
}

@media only screen and (min-width: 769px) {
    .dcategories__bg {
        margin-bottom: -2.606%;
    }
}

/* Раніше тут був margin-top: -65px, і абзац налазив на зображення.
   Тепер декорація просто відбивається від контенту. */
@media only screen and (min-width: 1025px) {
    .dcategories__bg {
        margin-top: 24px;
    }
}

/* ----------------------------------------------------- 7. Фото-тікер
   Чистий CSS-marquee, перенесений з .photo-ticker старого лендінга.      */
.dticker {
    display: flex;
    width: 100%;
    height: 150px;
    margin: 40px 0;
    overflow: hidden;
}

@media only screen and (min-width: 601px) {
    .dticker {
        height: 225px;
    }
}

@media only screen and (min-width: 769px) {
    .dticker {
        height: 350px;
        margin: 100px 0 0;
    }
}

.dticker__row {
    display: flex;
    animation-name: dticker;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.dticker__cell {
    padding: 0 6px;
}

@media only screen and (min-width: 1025px) {
    .dticker__cell {
        padding: 0 15px;
    }
}

.dticker__img {
    width: 62vw;
    max-width: unset;
    height: 100%;
    object-fit: cover;
}

@media only screen and (min-width: 769px) {
    .dticker__img {
        width: 525px;
    }
}

@keyframes dticker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dticker__row {
        animation: none;
    }
}

/* ------------------------------------------------------- 8. Логістика */
.dlogistics {
    padding: 60px 0;
}

@media only screen and (min-width: 1025px) {
    .dlogistics {
        padding: 100px 0;
    }
}

.dlogistics__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

@media only screen and (min-width: 1025px) {
    .dlogistics__inner {
        gap: 80px;
    }
}

.dlogistics__title {
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: #333;
}

@media only screen and (min-width: 1025px) {
    .dlogistics__title {
        font-size: 28px;
    }
}

.dlogistics__list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 30px;
    width: 100%;
    list-style: none;
}

@media only screen and (min-width: 1025px) {
    .dlogistics__list {
        flex-wrap: nowrap;
        gap: 30px;
    }
}

.dlogistics__item {
    display: flex;
    flex: 1 1 calc(50% - 15px);
    flex-direction: column;
    gap: 20px;
    align-items: center;
    min-width: 0;
}

@media only screen and (min-width: 1025px) {
    .dlogistics__item {
        flex: 1 0 0;
        gap: 30px;
    }
}

.dlogistics__icon {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.dlogistics__text {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #333;
}

@media only screen and (min-width: 1025px) {
    .dlogistics__text {
        font-size: 16px;
    }
}

/* ------------------------------------------- 9. Міжнародна присутність
   Графіка — суцільні зображення з макета: 1920x786 на десктопі і 375x601
   на мобільному, розміри збігаються з фреймами один в один. Фон у них
   світлий, тому текст тут темний, на відміну від решти темних секцій.
   Панель тексту стоїть по лівому краю контейнера — у макеті це x=260
   при полотні 1920, тобто рівно край контейнера 1400.                     */
.dpresence {
    position: relative;
    /* 60.5% = 227/375 із мобільного макета. Відсоток рахується від ширини,
       тому карта і текст під нею масштабуються разом на будь-якому екрані. */
    padding: 60.5% 0 40px;
    background-color: #ebebeb;
    background-image: url('/distribution-landing/img/international-presence-mobile.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    color: #333;
}

/* Від 768px — десктопна композиція: карта на всю ширину, текст ліворуч.

   background-size: cover, а не 100% auto: секція завжди заповнена, смуги під
   картою не буває на жодній ширині. Прив'язка right center лишає видимою праву
   частину з мапою та маркерами — обрізається лівий край, де в зображенні і так
   порожня світла панель.

   Під текст підкладаємо світлий градієнт. Це не самодіяльність: у макеті поверх
   карти лежить прямокутник Rectangle 754 (438x786 при x=519), тобто світла
   підкладка під текст закладена дизайном. Градієнт повторює її і тримає текст
   читабельним, коли cover на вузьких екранах підтягує карту ближче до тексту. */
@media only screen and (min-width: 768px) {
    .dpresence {
        padding: 13.07% 0 5.9%;
        background-image: url('/distribution-landing/img/international-presence.jpg');
        background-position: right center;
        background-size: cover;
    }

    .dpresence::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        background-image: linear-gradient(to right,
            #ebebeb 0%,
            #ebebeb 27%,
            rgba(235, 235, 235, 0) 50%);
    }

    .dpresence > .page-container {
        position: relative;
        z-index: 1;
    }
}

/* Чим вужчий екран, тим сильніше cover наближає карту — підкладка ширшає.
   Заодно зменшуємо відступи: що нижча секція, то ближче її пропорції до
   пропорцій зображення (2.44:1) і то менше cover ріже з лівого краю. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .dpresence {
        padding: 6% 0 3%;
    }

    .dpresence::before {
        background-image: linear-gradient(to right,
            #ebebeb 0%,
            #ebebeb 48%,
            rgba(235, 235, 235, 0) 72%);
    }
}

/* На мобільному текст займає всю ширину контейнера — у макеті це 345px
   при 375px екрана. Обмеження вмикається разом із десктопною композицією:
   460px — ширина панелі з макета, 46% — щоб на вузьких десктопах текст
   лишався в межах світлої підкладки. */
.dpresence__panel {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .dpresence__panel {
        max-width: min(460px, 46%);
    }
}

.dpresence__title {
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
}

/* 32px при lh 1.3 дає два рядки заввишки ~83px — бокс заголовка
   в макеті рівно 460x84. На 36px текст ішов у третій рядок. */
@media only screen and (min-width: 1025px) {
    .dpresence__title {
        margin-bottom: 20px;
        font-size: 32px;
        line-height: 1.3;
    }
}

.dpresence__text {
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.5;
}

@media only screen and (min-width: 1025px) {
    .dpresence__text {
        margin-bottom: 54px;
        font-size: 16px;
    }
}

/* 361x99 — власний розмір flags.png; на вузьких екранах масштабується */
.dpresence__flags {
    display: block;
    width: 361px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

@media only screen and (min-width: 1025px) {
    .dpresence__flags {
        margin-bottom: 30px;
    }
}

.dpresence__geography {
    font-size: 14px;
    line-height: 1.5;
    color: #909090;
}

/* ------------------------------------------------------- 10. Футер-CTA */
.dfooter {
    display: flex;
    flex-direction: column;
}

/* На мобільному форма йде першою, контакти під нею */
.dfooter__col--form {
    order: -1;
}

@media only screen and (min-width: 1025px) {
    .dfooter {
        flex-direction: row;
        min-height: 713px;
    }

    /* У рядку порядок як у макеті: контакти ліворуч, форма праворуч */
    .dfooter__col--form {
        order: 0;
    }
}

.dfooter__col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 30px;
}

@media only screen and (min-width: 1025px) {
    .dfooter__col {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 90px 70px;
    }

    /* Половини футера full-bleed — у кожної свій фон, тому .page-container
       тут не підходить. Замість нього вирівнюємо по його межах зовнішнім
       падінгом: відсотки в падінгу рахуються від ширини .dfooter (= ширина
       сторінки), тож 50% — це середина, а 700px — півширини контейнера
       (max-width 1430px мінус 2×15px падінгів). До 1540px виграє 70px
       з макета, далі контент тримається краю контейнера. */
    .dfooter__col--grey {
        padding-left: max(70px, calc(50% - 700px));
    }

    .dfooter__col--form {
        padding-right: max(70px, calc(50% - 700px));
    }
}

/* #e7e7e7 — колір із макета, знятий піпеткою з лівої половини футера */
.dfooter__col--grey {
    background-color: #e7e7e7;
    color: #333;
}

.dfooter__col--form {
    background-color: #fff;
    color: #333;
}

.dfooter__title {
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
}

@media only screen and (min-width: 1025px) {
    .dfooter__title {
        max-width: 600px;
        font-size: 48px;
    }
}

.dfooter__subtitle {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
    opacity: .7;
}

.dfooter__email {
    display: inline-block;
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 500;
    color: #333;
    transition: color .2s;
}

.dfooter__email:hover {
    color: #ff2f00;
}

@media only screen and (min-width: 1025px) {
    .dfooter__email {
        font-size: 24px;
    }
}

.dfooter__socials {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

/* Іконки намальовані білим під темний фон. Футер світлий, тому інвертуємо:
   гліф стає чорним, підложка кола — чорною з тією ж прозорістю 0.1. */
.dfooter__social {
    display: block;
    width: 30px;
    height: 30px;
    filter: invert(1);
    transition: opacity .2s;
}

.dfooter__social:hover {
    opacity: .75;
}

.dfooter__copyright {
    font-size: 14px;
    line-height: 1.5;
    opacity: .5;
}