/* ==========================================================================
   Responsive — mobile & tablet adaptation (Figma node 5:31, 375px mobile)
   Desktop layout lives in style.css (unconditional, >=1025px) and is NOT
   touched here. Everything below is media-queried overrides only.

   Breakpoints:
   - <=1024px : shared resets (neutralize desktop absolute canvas) + tablet
   - <=767px  : mobile layout per Figma mobile mockup
   - <=359px  : small-phone tweaks (320/360)
   ========================================================================== */

/* ==========================================================================
   1. SHARED (<=1024px) — turn the fixed 1440 desktop canvas into flow layout
   ========================================================================== */
@media (max-width: 1024px) {

    :root { --container-padding: 24px; }

    /* Off-canvas menu & full-bleed blocks must never create page h-scroll */
    html { overflow-x: clip; }
    body { overflow-x: clip; }

    /* ---- Header: simplified bar (logo + burger), nav becomes overlay ---- */
    .header { position: absolute; height: 72px; }
    .header.is-sticky { height: 72px; padding-bottom: 0; }
    .header__inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: none;
        height: 72px;
        padding: 16px var(--container-padding);
    }
    .logo { position: static; width: auto; height: 36px; }
    .logo img { width: auto; height: 36px; }

    .header__contacts { display: none; }
    .header__actions { display: none; }

    .header__burger {
        position: static;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 9px;
        border-radius: var(--radius);
        z-index: 60;
    }
    .header__burger span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform .3s ease, opacity .3s ease;
    }
    .header.is-menu-open .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .header.is-menu-open .header__burger span:nth-child(2) { opacity: 0; }
    .header.is-menu-open .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Full-screen nav overlay */
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(86vw, 360px);
        height: 100%;
        background: var(--color-dark);
        padding: 88px 28px 32px;
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        pointer-events: none;
        transition: clip-path .3s ease, visibility 0s linear .3s;
        z-index: 55;
        overflow-y: auto;
        box-shadow: -16px 0 48px rgba(0,0,0,0.35);
    }
    .header.is-menu-open .nav {
        clip-path: inset(0);
        visibility: visible;
        pointer-events: auto;
        transition: clip-path .3s ease;
    }
    .nav__list { display: flex; flex-direction: column; gap: 0; }
    .nav__item {
        position: static;
        flex: none;
        width: 100%;
        height: auto;
        padding: 0;
    }
    .nav__item::before, .nav__item::after { content: none; }
    .nav__link {
        width: 100%;
        height: auto;
        padding: 16px 0;
        font-size: 18px;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        color: rgba(255,255,255,0.92);
    }
    .nav__arrow { opacity: .5; }

    /* ---- Hero: flow layout, content anchored to bottom ---- */
    .hero {
        height: auto;
        min-height: 600px;
    }
    .hero__slider { position: relative; inset: auto; height: auto; min-height: 600px; }
    .hero__slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    /* keep the active slide in the document flow so the section has height */
    .hero__slide.is-active { position: relative; }
    .hero__overlay { backdrop-filter: none; }

    .hero__content {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 88px var(--container-padding) 56px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .hero__slide[data-hex-set] .hero__eyebrow,
    .hero__slide[data-hex-set] .hero__title,
    .hero__slide[data-hex-set] .hero__text,
    .hero__slide[data-hex-set] .hero__content .btn,
    .hero__eyebrow, .hero__title, .hero__text, .hero__content .btn {
        position: static;
        left: auto; top: auto; right: auto;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0;
    }
    .hero__eyebrow { letter-spacing: -0.02em; }
    .hero__title { letter-spacing: -0.72px; }

    /* Hex collage — small cluster, upper area, behind text */
    .hero__hex {
        left: auto;
        right: 0;
        top: 60px;
        bottom: auto;
        width: 70%;
        height: auto;
        transform: none;
    }
    .hero__hex-img { width: 42%; height: auto; }
    .hero__slide[data-hex-set] .hero__hex-img--top  { left: auto; right: 4%;  top: 0;    }
    .hero__slide[data-hex-set] .hero__hex-img--mid  { left: 2%;   right: auto; top: 22%;  }
    .hero__slide[data-hex-set] .hero__hex-img--bot  { left: auto; right: 4%;  top: 44%;  }

    .hero__progress { width: 100%; left: 0; right: 0; }
    .hero__progress-bar { max-width: 100%; }

    /* ---- Section paddings (desktop used id-specific 29/120) ---- */
    #services, #about, #catalog, #partners, #projects, #news {
        padding: 56px 0;
    }
    .section__head { margin-bottom: 32px; }
    #services .section__head,
    #catalog .section__head,
    #partners .section__head,
    #projects .section__head,
    #news .section__head,
    #about .section__head,
    #contacts .section__head { margin-bottom: 32px; }

    .section__title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(28px, 6vw, 36px);
        margin-bottom: 24px;
    }
    #services .section__title,
    #catalog .section__title,
    #partners .section__title,
    #projects .section__title,
    #news .section__title { width: 100%; max-width: 100%; }
    #services .section__title,
    #catalog .section__title,
    #projects .section__title { margin-bottom: 24px; }
    .section__title--lg { font-size: clamp(28px, 6vw, 36px); }
    .section__title--inline { max-width: none; }

    .section__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 32px;
    }

    /* ---- About: stack, content first then full-bleed square image ---- */
    .about {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    .about__content { order: 1; padding-top: 0; }
    .about__image {
        order: 2;
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 0;
        margin-inline: calc(-1 * var(--container-padding));
    }
    .about__title { font-size: clamp(28px, 6vw, 36px); }

    /* ---- Stats: 2-column vertical honeycomb ---- */
    .section--stats { padding: 0 0 56px; }
    .section--stats .container { position: static; height: auto; }
    .section--stats .section__title--lg {
        position: static;
        left: auto; top: auto;
        width: auto;
        margin: 0 0 28px;
        font-size: clamp(28px, 6vw, 36px);
    }
    .stats {
        position: relative;
        left: auto; top: auto;
        width: 100%;
        max-width: none;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 327 / 824;
    }
    .stat {
        position: absolute;
        width: 56.12%;
        height: auto;
        aspect-ratio: 183.5 / 160;
        padding: 12px 20px;
    }
    .stat:nth-child(odd)  { left: 0; }
    .stat:nth-child(even) { left: 43.88%; }
    .stat:nth-child(1) { top: 0; }
    .stat:nth-child(2) { top: 10.07%; }
    .stat:nth-child(3) { top: 20.15%; }
    .stat:nth-child(4) { top: 30.22%; }
    .stat:nth-child(5) { top: 40.29%; }
    .stat:nth-child(6) { top: 50.36%; }
    .stat:nth-child(7) { top: 60.44%; }
    .stat:nth-child(8) { top: 70.51%; }
    .stat:nth-child(9) { top: 80.58%; }
    .stat__num { font-size: clamp(20px, 5.5vw, 24px); margin-bottom: 6px; }
    .stat__label { font-size: 12px; max-width: 140px; }

    /* ---- Catalog: horizontal scroll of category cards ---- */
    .catalog {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 18px;
        column-gap: 18px;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        scrollbar-width: none;
    }
    .catalog::-webkit-scrollbar { display: none; }
    .catalog__col { display: contents; }
    .catalog__col:nth-child(n) .catalog__group { margin-top: 0; }
    .catalog__group + .catalog__group { margin-top: 0 !important; }
    .catalog__group {
        flex: 0 0 280px;
        max-width: 280px;
        background: var(--color-bg);
        border-radius: var(--radius-md);
        padding: 18px;
        scroll-snap-align: start;
    }
    .catalog__group-title { font-size: 18px; margin-bottom: 12px; }
    #catalog .catalog__list a { color: #666; }

    /* ---- Partners: keep marquee, smaller cells ---- */
    #partners .section__row .btn { margin-top: 0; }
    .partner { flex: 0 0 200px; height: 200px; padding: 20px; }

    /* ---- Projects: horizontal scroll, one card per view ---- */
    #projects .projects__cta { margin-bottom: 32px; }
    .projects__track {
        display: flex;
        grid-template-columns: none;
        width: auto;
        gap: 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .projects__track::-webkit-scrollbar { display: none; }
    .project {
        flex: 0 0 100%;
        scroll-snap-align: start;
        height: clamp(380px, 110vw, 480px);
    }
    .projects .slider-nav {
        position: static;
        right: auto; bottom: auto;
        margin-top: 24px;
        justify-content: flex-end;
        width: 100%;
    }

    /* ---- News: horizontal scroll cards ---- */
    .news__track {
        display: flex;
        grid-template-columns: none;
        gap: 18px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .news__track::-webkit-scrollbar { display: none; }
    .article {
        flex: 0 0 80%;
        height: auto;
        scroll-snap-align: start;
    }
    .article__image { aspect-ratio: 303 / 210; margin-bottom: 12px; }
    .article__title { font-size: 16px; }
    #news .slider-nav { position: static; right: auto; top: auto; }

    /* ---- Contacts: stack info above form ---- */
    .section--contacts { height: auto; padding: 56px 0 64px; }
    #contacts { padding: 56px 0 64px; }
    .contacts {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 48px;
        height: auto;
        margin: 0;
    }
    .contacts__info { width: 100%; }
    .contacts__phone { font-size: 36px; }
    .contacts__messengers { gap: 6px; }
    .messenger {
        flex: 1 1 0;
        width: auto;
        max-width: 120px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .messenger img { width: 32px; height: 32px; }

    .contacts__form {
        width: 100%;
        height: auto;
        padding: 24px;
    }
    .form__title { font-size: 20px; }
    .form__row { grid-template-columns: 1fr; }
    .contacts__bg { display: none; }

    /* ---- Footer: vertical, left aligned ---- */
    .footer { padding: 36px 0; }
    .footer__menu {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: left;
    }
    .footer__menu li { height: auto; justify-content: flex-start; }
    .footer__menu a { display: inline-block; }
}

/* ==========================================================================
   2. TABLET (768px – 1024px) — multi-column upgrades over the mobile base
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    .container { max-width: 768px; }

    .hero__content { padding-left: 0; padding-right: 0; }

    /* Services 3 across */
    .services { grid-template-columns: repeat(3, 1fr); }

    /* About back to side-by-side */
    .about {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }
    .about__content { order: 0; }
    .about__image {
        order: 0;
        margin-inline: 0;
        border-radius: var(--radius-lg);
    }

    /* Stats honeycomb centered, capped */
    .stats { max-width: 460px; }

    /* Projects: two per view */
    .project { flex: 0 0 calc(50% - 9px); height: 420px; }

    /* News: two-ish per view */
    .article { flex: 0 0 calc(50% - 9px); }

    /* Contacts side by side */
    .contacts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: start;
    }
    .messenger { max-width: 88px; }

    /* Footer 4 columns */
    .footer__menu { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* ==========================================================================
   3. MOBILE (<=767px) — exact mobile mockup specifics
   ========================================================================== */
@media (max-width: 767px) {

    .section__title,
    .section__title--lg,
    .section--stats .section__title--lg {
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -0.72px;
    }

    .hero,
    .hero__slider,
    .hero__slide,
    .hero__slide.is-active {
        height: 812px;
        min-height: 812px;
    }

    .header { height: 72px; }
    .header__inner {
        height: 72px;
        padding: 16px 24px;
    }
    .header__inner::after {
        content: "";
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 0;
        height: 1px;
        background: rgba(255,255,255,0.24);
    }
    .logo {
        width: 98px;
        height: 36px;
    }
    .logo img {
        content: url("../assets/img/hero/mobile/logo.svg");
        width: 98px;
        height: 36px;
    }
    .header__burger {
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: var(--radius-pill);
        background: #fff;
    }
    .header__burger span { display: none; }
    .header__burger::before {
        content: "";
        width: 24px;
        height: 24px;
        background: url("../assets/img/hero/mobile/menu-arrow.svg") center / contain no-repeat;
    }
    .header.is-menu-open {
        position: fixed;
        inset: 0;
        height: 100dvh;
        min-height: 812px;
        z-index: 90;
        background: #201b26;
        color: #fff;
    }
    .header.is-menu-open .header__inner {
        height: 56px;
        padding: 16px 24px 0;
    }
    .header.is-menu-open .header__inner::after { content: none; }
    .header.is-menu-open .logo {
        position: fixed;
        left: 24px;
        top: 16px;
        z-index: 93;
    }
    .header.is-menu-open .header__burger {
        position: fixed;
        right: 24px;
        top: 16px;
        z-index: 93;
    }
    .header.is-menu-open .header__burger::before {
        background-image: url("../assets/img/menu/mobile/close.svg");
    }
    .nav {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        min-height: 812px;
        padding: 115px 24px 124px;
        background: #201b26;
        box-shadow: none;
        clip-path: none;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
        z-index: 91;
        transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
    }
    .header.is-menu-open .nav {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .3s ease, opacity .3s ease;
    }
    .nav__list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .nav__item {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .nav__link {
        height: 48px;
        padding: 0 0 18px;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.22);
        font-size: 24px;
        line-height: 1.25;
        letter-spacing: -0.48px;
        font-weight: 500;
        color: #fff;
    }
    .nav__item:last-child .nav__link { border-bottom: 0; }
    .nav__arrow {
        width: 24px;
        height: 24px;
        margin: 3px 0 0;
        opacity: 1;
        filter: none;
        background: url("../assets/img/menu/mobile/chevron.svg") center / 6px 12px no-repeat;
        transform: rotate(90deg);
        transition: transform .3s ease;
    }
    .nav__item.is-open .nav__arrow { transform: rotate(-90deg); }
    .nav__item:nth-child(n+5) .nav__arrow { display: none; }
    .nav__submenu {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 18px;
    }
    .nav__item.is-open .nav__submenu { display: flex; }
    .nav__submenu-link {
        display: flex;
        width: 100%;
        height: 41px;
        padding: 0 0 18px;
        align-items: flex-start;
        border-bottom: 1px solid rgba(255,255,255,0.18);
        font-size: 18px;
        line-height: 1.25;
        letter-spacing: -0.36px;
        font-weight: 400;
        color: rgba(255,255,255,0.75);
    }
    .nav__submenu-link:last-child { border-bottom: 0; }
    .header.is-menu-open .header__actions {
        position: fixed;
        top: auto;
        left: 24px;
        right: 24px;
        bottom: 24px;
        width: auto;
        height: auto;
        z-index: 93;
        display: block;
    }
    .header.is-menu-open .header__search { display: none; }
    .header.is-menu-open .header__actions .btn {
        width: 100%;
        height: 42px;
        min-height: 42px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #fff;
        color: #6b3d99;
    }
    .header.is-menu-open .header__actions .btn__text {
        padding: 0;
        font-size: 14px;
        line-height: 1.25;
        letter-spacing: -0.28px;
        font-weight: 400;
    }

    .hero__slider {
        position: relative;
        inset: auto;
    }
    .hero__slide {
        position: absolute;
        inset: 0;
        justify-content: flex-start;
        background-size: cover;
        background-position: center;
    }
    .hero__slide.is-active { position: absolute; }
    .hero__slide[data-hex-set="1"] {
        background-image: url("../assets/img/hero/mobile/slide-1-bg.png") !important;
    }
    .hero__slide[data-hex-set="2"] {
        background-image: url("../assets/img/hero/mobile/slide-2-bg.png") !important;
    }
    .hero__slide[data-hex-set="3"] {
        background-image: url("../assets/img/hero/mobile/slide-3-bg.png") !important;
    }
    .hero__overlay {
        background: url("../assets/img/hero/mobile/slide-1-mask.svg") center / 100% 100% no-repeat;
        backdrop-filter: none;
    }
    .hero__slide[data-hex-set="2"] .hero__overlay {
        background-image: url("../assets/img/hero/mobile/slide-2-mask.svg");
    }
    .hero__slide[data-hex-set="3"] .hero__overlay {
        background-image: url("../assets/img/hero/mobile/slide-3-mask.svg");
    }
    .hero__hex {
        left: 0;
        top: 0;
        right: auto;
        bottom: auto;
        width: 375px;
        height: 812px;
        transform: none;
        z-index: 1;
    }
    .hero__hex-img {
        width: 184px;
        height: 212px;
        object-fit: fill;
        transform: rotate(-90deg);
        transform-origin: center center;
    }
    .hero__slide[data-hex-set="1"] .hero__hex-img--top {
        content: url("../assets/img/hero/mobile/slide-1-hex-top.png");
        left: 239px;
        top: 58px;
    }
    .hero__slide[data-hex-set="1"] .hero__hex-img--mid {
        content: url("../assets/img/hero/mobile/slide-1-hex-mid.png");
        left: 74px;
        top: 154px;
    }
    .hero__slide[data-hex-set="1"] .hero__hex-img--bot {
        content: url("../assets/img/hero/mobile/slide-1-hex-bottom.png");
        left: 239px;
        top: 250px;
    }
    .hero__slide[data-hex-set="2"] .hero__hex-img--top {
        content: url("../assets/img/hero/mobile/slide-2-hex-top.png");
        left: 239px;
        top: 58px;
    }
    .hero__slide[data-hex-set="2"] .hero__hex-img--mid {
        content: url("../assets/img/hero/mobile/slide-2-hex-mid.png");
        left: 74px;
        top: 154px;
    }
    .hero__slide[data-hex-set="2"] .hero__hex-img--bot {
        content: url("../assets/img/hero/mobile/slide-2-hex-bottom.png");
        left: 239px;
        top: 250px;
    }
    .hero__slide[data-hex-set="3"] .hero__hex-img--top {
        content: url("../assets/img/hero/mobile/slide-3-hex-top.png");
        left: 239px;
        top: 58px;
    }
    .hero__slide[data-hex-set="3"] .hero__hex-img--mid {
        content: url("../assets/img/hero/mobile/slide-3-hex-mid.png");
        left: 74px;
        top: 154px;
    }
    .hero__slide[data-hex-set="3"] .hero__hex-img--bot {
        content: url("../assets/img/hero/mobile/slide-3-hex-bottom.png");
        left: 239px;
        top: 250px;
    }

    .hero__content {
        position: absolute;
        left: 24px;
        top: 363px;
        transform: none;
        width: 327px;
        max-width: 327px;
        height: 373px;
        padding: 0;
        display: block;
        z-index: 2;
    }
    .hero__slide[data-hex-set="2"] .hero__content {
        top: 399px;
        height: 337px;
    }
    .hero__slide[data-hex-set="3"] .hero__content {
        top: 325px;
        height: 411px;
    }
    .hero__slide[data-hex-set] .hero__eyebrow,
    .hero__slide[data-hex-set] .hero__title,
    .hero__slide[data-hex-set] .hero__text,
    .hero__slide[data-hex-set] .hero__content .btn,
    .hero__eyebrow,
    .hero__title,
    .hero__text,
    .hero__content .btn {
        position: absolute;
        left: 0;
        right: auto;
        width: 327px;
        max-width: 327px;
        margin: 0;
    }
    .hero__slide[data-hex-set] .hero__eyebrow,
    .hero__eyebrow {
        top: 0;
        height: 15px;
        font-size: 12px;
        line-height: 1.25;
        letter-spacing: -0.24px;
        font-weight: 450;
        color: rgba(255,255,255,0.8);
    }
    .hero__slide[data-hex-set] .hero__title,
    .hero__title {
        top: 33px;
        height: 152px;
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -0.72px;
        font-weight: 600;
    }
    .hero__slide[data-hex-set="3"] .hero__title {
        height: 190px;
    }
    .hero__slide[data-hex-set] .hero__text,
    .hero__text {
        top: 209px;
        height: 90px;
        font-size: 14px;
        line-height: 1.25;
        letter-spacing: -0.28px;
        font-weight: 400;
        color: #fff;
    }
    .hero__slide[data-hex-set="2"] .hero__text {
        top: 209px;
        height: 54px;
    }
    .hero__slide[data-hex-set="3"] .hero__text {
        top: 247px;
        height: 90px;
    }
    .hero__slide[data-hex-set] .hero__content .btn,
    .hero__content .btn {
        top: 323px;
        width: 207px;
        height: 50px;
        border-radius: 4px;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px 0 0;
        background: #f2f2f2;
    }
    .hero__slide[data-hex-set="2"] .hero__content .btn {
        top: 287px;
        width: 226px;
    }
    .hero__slide[data-hex-set="3"] .hero__content .btn {
        top: 361px;
        width: 207px;
    }
    .hero__content .btn__text {
        padding: 0 24px;
        font-size: 14px;
        line-height: 1.25;
        letter-spacing: -0.28px;
    }
    .hero__content .btn__icon {
        width: 42px;
        height: 42px;
        margin: 0;
        border-radius: 2px;
    }
    .hero__content .btn__icon img {
        content: url("../assets/img/hero/mobile/arrow-button.svg");
        width: 12px;
        height: 12px;
    }

    .hero__progress {
        width: 100%;
        height: 1px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.2);
    }
    .hero__progress-bar {
        height: 4px;
        transform: translateY(-3px);
    }

    .scroll-top {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        margin: 48px 24px 72px auto;
        background: var(--color-primary);
        border: none;
        flex-shrink: 0;
    }
    .scroll-top img {
        content: url("../assets/img/hero/mobile/scroll-arrow.svg");
        filter: brightness(0) invert(1);
        transform: rotate(180deg);
    }

    #services {
        height: auto;
        padding: 24px 0 72px;
    }

    #about {
        height: 1194px;
        padding: 24px 0 0;
    }

    .section--stats {
        height: 1091px;
        padding: 72px 0 0;
    }

    #catalog {
        height: auto;
        padding: 24px 0 40px;
    }
    #catalog .section__title {
        position: relative;
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -0.72px;
        padding-right: 44px;
        margin-bottom: 48px;
    }
    #catalog .section__counter {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        vertical-align: baseline;
    }

    #partners {
        height: 676px;
        padding: 24px 0 0;
    }

    #projects {
        height: 934px;
        padding: 24px 0 0;
    }
    #projects .section__head { margin-bottom: 57px; }
    #projects .section__label { font-size: 12px; }
    #projects .section__title {
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -0.72px;
        margin-bottom: 24px;
    }
    #projects .projects__cta {
        width: 245px;
        margin-bottom: 48px;
        font-size: 14px;
        letter-spacing: -0.28px;
    }
    #projects .btn__icon {
        width: 42px;
        height: 42px;
        margin: 4px 4px 4px 0;
    }
    #projects .section__divider { margin-bottom: 24px; }
    .project { height: 480px; }
    .project__body {
        left: 18px;
        right: 18px;
        bottom: 18px;
        gap: 12px;
    }
    .project__title { font-size: 18px; letter-spacing: -0.36px; }
    .project__meta { gap: 6px; }

    #news {
        height: 643px;
        padding: 24px 0 0;
    }
    #news .section__head { margin-bottom: 57px; }
    #news .section__label { font-size: 12px; }
    #news .section__title {
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -0.72px;
        margin-bottom: 0;
    }
    #news .section__row { margin-bottom: 48px; }
    #news .slider-nav { gap: 6px; }
    #news .section__divider { margin-bottom: 24px; }
    .article { flex: 0 0 303px; }
    .news__track {
        margin-inline: 0;
        padding-inline: 0;
    }

    #contacts {
        height: auto;
        padding: 24px 0 0;
    }

    .footer {
        height: 276px;
        padding: 36px 0;
    }

    /* Buttons: mobile medium = 50px tall */
    .btn { height: 50px; }
    .hero__content .btn,
    #about .btn,
    #partners .section__row .btn,
    #projects .projects__cta,
    #contacts .contacts__form .btn {
        height: 50px;
    }

    /* Services: 2-column card grid */
    .services { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .service { min-height: 0; padding: 18px; gap: 12px; }
    .service__title { font-size: 14px; line-height: 1.25; }

    /* About paragraphs */
    .about__text p:first-child { font-size: 18px; line-height: 1.15; }
    .about__text p { font-size: 16px; }

    /* Catalog links smaller */
    #catalog .catalog__list a { font-size: 14px; }

    /* Article date */
    .article__date { font-size: 12px; }

    /* Contacts text sizes */
    .contacts__label { font-size: 14px; }
    .contacts__email,
    .contacts__address { font-size: 16px; }
    .form__subtitle { font-size: 14px; }
    .form__field input,
    .form__field textarea { padding: 12px; }
}

/* ==========================================================================
   4. SMALL PHONES (<=359px) — 320 / very narrow
   ========================================================================== */
@media (max-width: 359px) {
    :root { --container-padding: 16px; }

    .services { gap: 10px; }
    .service { padding: 14px; }
    .partner { flex: 0 0 168px; height: 168px; }
    .catalog__group { flex-basis: 248px; max-width: 248px; }
    .article { flex: 0 0 min(303px, 100%); }
}

/* ==========================================================================
   5. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hero__slide,
    .nav,
    .header__burger span { transition: none; }
}