@media (max-width: 768px) {

    /* ===== СЕКЦІЯ: БАЗОВИЙ LAYOUT ===== */

    .section__inner {
        padding: 20px 20px 40px;
    }

    .section__inner--split {
        flex-direction: column;
        gap: 12px;
    }

    .section__title-col {
        flex: none;
        width: 100%;
        gap: 8px;
    }

    .section__viewport {
        flex: 1;
        min-height: 0;
        width: 100%;
        gap: 12px;
    }

    /* ===== ТИПОГРАФІКА ===== */

    .section__title {
        font-size: 28px;
        line-height: 34px;
    }

    .section__lead {
        font-size: 16px;
        line-height: 20px;
    }

    /* ===== РЯДИ КАРТОК ===== */

    .cards-row {
        gap: 12px;
    }

    .cards-row--2 {
        grid-template-columns: 1fr;
    }

    .cards-row--2-side {
        grid-template-columns: 1fr 1fr;
    }

    /* cards-row--3: перша картка — на всю ширину, дві наступні — поруч */
    .cards-row--3 {
        grid-template-columns: 1fr 1fr;
    }

    .cards-row--3 .card:first-child {
        grid-column: 1 / -1;
    }

    .cards-row--3-col {
        grid-template-columns: 1fr;
    }

    .cards-row--3-col .card:first-child {
        grid-column: auto;
    }

    .cards-row--1-1-2 {
        grid-template-columns: 1fr 1fr;
    }

    .cards-row--1-1-2 .card:last-child {
        grid-column: 1 / -1;
    }

    /* ===== БАЗОВА КАРТКА ===== */

    .card {
        padding: 20px 20px 30px;
        gap: 10px;
    }

    .card__number {
        font-size: 28px;
        line-height: 34px;
    }

    .card__caption {
        font-size: 13px;
        line-height: 16px;
    }

    .card__lead {
        font-size: 16px;
        line-height: 20px;
    }

    .card__label {
        font-size: 13px;
        line-height: 16px;
    }

    /* ===== ШИРОКІ КАРТКИ З ЗОБРАЖЕННЯМ ===== */

    .card--wide {
        flex-direction: column;
    }

    .card--wide:not(.card--wide-reverse):not(.card--wide-s2) .card__textblock,
    .card__textblock {
        flex: none;
        width: 100%;
    }

    .card__image {
        position: relative;
        inset: auto;
        width: 100%;
        height: 160px;
    }

    .card__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    /* ===== СЕКЦІЯ 2: картка «Запустили» (macbook + текст) ===== */

    .card--wide-s2 {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 20px;
    }

    .card--wide-s2 .card__textblock {
        flex: none;
        width: 100%;
    }

    .card--wide-s2 .card__image {
        order: -1;
        position: relative;
        inset: auto;
        width: 242px;
        height: 183px;
        flex-shrink: 0;
        align-self: center;
    }

    .card--wide-s2 .card__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* ===== СЕКЦІЯ 8: macbook + статистика ===== */

    .card__image--macbook {
        display: none;
    }

    .card--wide-equal {
        height: auto;
        gap: 20px;
    }

    /* --- ГЛОУ ЗА МАКБУКОМ (мобайл) --- */
    .card--wide-equal::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: radial-gradient(ellipse 80% 90% at 50% 75%, rgba(160, 160, 190, 0.9) 0%, transparent 70%);
    }

    .m8-pic {
        display: block;
        position: relative;
        z-index: 1;
        width: 280px;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }


    /* ===== СПИСОК (секція 9) ===== */

    .card.card--list {
        gap: 20px;
    }

    .card__items,
    .card__items--3col {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

    .card__items li {
        font-size: 13px;
        line-height: 16px;
    }

    /* ===== СЕКЦІЯ 5: КАРТКА «НАЛАГОДИЛИ» ===== */

    .card--wide-s5 .card__textblock {
        width: 100%;
        flex-shrink: 0;
    }

    .card--wide-s5 .card__image {
        position: relative;
        inset: auto;
        width: calc(100% + 60px);
        margin-left: -30px;
        margin-bottom: -20px;
        height: auto;
        flex-shrink: 0;
    }

    .card--wide-s5 .card__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .m-br {
        display: inline;
    }

    /* Переноси, що працюють тільки на ВЕБ — на мобільному ховаємо,
       щоб браузер сам обирав природні точки переносу під ширину */
    .d-br {
        display: none;
    }

    /* ===== СЕКЦІЯ 8: картка «Розробили» (бронежилет) ===== */
    .m8-card .card__image {
        position: relative;
        inset: auto;
        width: 164px;
        height: 115px;
        margin: -20px -20px -30px auto;
    }

    .m8-card .card__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right bottom;
    }

    /* ===== СЕКЦІЯ 10: картка «Інтеграція» ===== */
    .m10-card .card__image {
        position: relative;
        inset: auto;
        width: 211px;
        height: 145px;
        margin: -20px -20px -30px auto;
    }

    .m10-card .card__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right bottom;
    }

    /* ===== ВІДЕО КАРТКА ===== */

    .video-card {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .card__video {
        object-fit: contain;
    }

    /* ===== HERO ===== */

    .section--hero .section__inner {
        padding: 20px 20px 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Логотипи — переносимо знизу нагору, позиції по боках лишаються */
    .hero__logos {
        order: -1;
    }

    /* Заголовок + лід — по вертикалі центр екрана, текст ліворуч (як і був) */
    .hero__content {
        gap: 20px;
        margin: auto 0;
    }

    .hero__title {
        font-size: 34px;
        line-height: 40px;
    }

    .hero__subtitle {
        font-size: 16px;
        line-height: 20px;
        max-width: 100%;
    }

    .logo-ua {
        height: 25px;
    }

    /* Кнопка «нагору» — фіксована праворуч внизу (точні параметри з Figma) */
    .scroll-top {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        aspect-ratio: 1 / 1;
        border-radius: 50px;
        background: rgba(50, 101, 34, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow:
            inset 0 -3px 5px 4px rgba(255, 255, 255, 0.1),
            inset 0 2px 4px rgba(255, 255, 255, 0.1);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 100;
        padding: 0;
    }
    .scroll-top.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
    .scroll-top svg {
        width: 20px;
        height: 20px;
        stroke: var(--color-white);
        stroke-width: 2;
        fill: none;
    }

    .logo {
        height: 18px;
    }

    /* ===== СУЦІЛЬНИЙ СКРОЛ «КОЛБАСА» + FIXED-ФОН З КРОСФЕЙДОМ ===== */

    /* Вимикаємо scroll-snap і фіксовану висоту — сторінка скролиться суцільно */
    html {
        height: auto;
        overflow: visible;
    }

    body {
        height: auto;
        overflow-y: visible;
        scroll-snap-type: none;
    }

    .section {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow: visible;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .section--hero,
    .section--hero .section__inner {
        min-height: var(--vh, 100svh);
    }

    .section__viewport {
        height: auto;
        overflow: visible;
    }

    .section__inner {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
    }
    /* fixed-стопка фонів + кросфейд успадковуються з sections.css (.section__bg) */
}