/* ===== 1. Цвета и базовый текст ================================= */
:root{
   --logo-blue:#003456; --logo-olive:#808000;
   --accent-purple:#490064; --accent-green:#00A86B;
   --text:#003456; --btn-hover:#350D82;
}
html{scroll-behavior:smooth}
body{margin:0;font:400 16px/1.55 'Inter',sans-serif;color:var(--text)}

/* ===== 2. Контейнер и секции =================================== */
.container{width:92%;max-width:1300px;margin:0 auto}
.section{padding:40px 0}
.section.alt{background:rgba(0,52,86,.05)}
@media(max-width:900px){.container{width:100%;padding:0 16px;box-sizing:border-box}}

/* ===== 3. Шапка ================================================= */
.topbar{
   position:sticky;top:0;z-index:10;
   display:flex;justify-content:space-between;align-items:center;
   padding:12px 6%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05)
}
.logo-img{height:40px;width:auto}
#mainMenu ul{margin:0;padding:0;display:flex;gap:25px;list-style:none}
#mainMenu a{color:var(--text);font-weight:500;text-decoration:none}
.lang-switch{display:flex;gap:8px}
.lang-switch button{border:none;background:none;cursor:pointer;font-weight:600;color:var(--accent-purple)}
.lang-switch button:hover{color:var(--accent-green)}
.lang-switch button.active{font-weight:700;color:var(--accent-green);text-decoration:underline}
@media(max-width:640px){#mainMenu ul{display:none}}

/* ===== 4. Кнопка =============================================== */
.btn{
   display:inline-block;padding:12px 28px;border:none;border-radius:4px;
   background:var(--accent-green);color:#fff;font-weight:600;transition:.25s
}
.btn:hover{background:var(--btn-hover)}

/* ===== 5. HERO  (flex-две колонки) ============================== */
.hero{padding:90px 0 60px}
.hero-flex{display:flex;gap:64px;align-items:flex-start}
.hero-copy{flex:1 1 0;max-width:640px}
.hero-pic{flex:0 0 600px}
.hero-pic img{
   width:600px;height:300px;object-fit:cover;border-radius:14px;
   box-shadow:0 8px 32px rgba(0,0,0,.09)
}

/* MOBILE hero */
@media(max-width:900px){
   .hero{padding-bottom:24px;text-align:center}
   .hero-flex{flex-direction:column;gap:36px}
   .hero-pic,.hero-pic img{width:90vw;max-width:340px;height:auto;object-fit:contain;margin:0 auto}
   .hero-copy{max-width:none}
   h1.hero-title{font-size:1.9rem}
}

/* ===== 6. ABOUT  =============================================== */
#about .grid-2{
   display:grid;grid-template-columns:600px 1fr;gap:64px;align-items:flex-start
}
#about .grid-2>:first-child{grid-column:2}      /* текст */
#about .grid-2>:last-child {grid-column:1}      /* фото */
#about img.rounded{
   width:600px;height:600px;object-fit:cover;border-radius:14px;
   box-shadow:0 8px 32px rgba(0,0,0,.09);display:block
}
@media(max-width:900px){
   #about{padding-top:24px}
   #about .grid-2{grid-template-columns:1fr;gap:32px}
   #about .grid-2>:first-child{grid-column:1}
   #about img.rounded{width:90vw;max-width:340px;height:auto;margin:0 auto}
}

/* ===== 7. SOLUTION  ============================================ */
.solution-cols{
   display:grid;grid-template-columns:1fr 600px;gap:64px;align-items:flex-start;margin-bottom:48px
}
.solution-img img{
   width:600px;height:300px;object-fit:cover;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.08)
}
.solution-steps ol{margin:0 0 0 22px;padding:0}
.solution-steps li{margin:0 0 10px}

.keypoints{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px}
.k-card{text-align:center}.k-icon{width:70px;height:70px;margin-bottom:14px}
.solution-cta{text-align:center;margin-top:40px}.solution-cta .btn{min-width:280px}

@media(max-width:900px){
   .solution-cols{grid-template-columns:1fr;row-gap:32px}
   .solution-img img{width:90vw;max-width:340px;height:auto;margin:0 auto}
   .keypoints{grid-template-columns:1fr;gap:32px}
}

/* ===== 8. Списки с маркерами ================================== */
ul.custom{list-style:none;margin:0;padding:0 0 0 .8em}
ul.custom li{position:relative}
ul.custom li::before{position:absolute;left:-1.2em;font-weight:700}
.check-list li::before{content:"✔";color:var(--accent-green)}
.diamond   li::before{content:"◆";color:var(--accent-purple)}

/* ===== 9. Дополнительные элементы ============================= */
blockquote{background:#f7f9fb;border-left:4px solid var(--accent-purple);padding:18px;margin:0;border-radius:4px}
blockquote cite{font-style:italic;color:var(--accent-green)}
.footer{background:#003456;color:#fff;text-align:center;padding:20px 0;font-size:.9rem}
.footer a{color:#fff;text-decoration:underline}
.rounded{width:100%;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
/* ─── HERO: вертикальное выравнивание колонок (десктоп) ─── */
@media (min-width:901px){
    .hero-flex{
        align-items: center;   /* было flex-start */
    }
}
/* ===== HERO =================================================== */
.hero            { padding:90px 0 60px; }
.hero-title      { margin:0 0 32px; font-size:2.4rem; } /* H1 как раньше */

/* две колонки под заголовком */
.hero-row{
    display:flex;
    gap:64px;
    align-items:center;          /* одинаковый верхний край */
}

/* левая колонка */
.hero-copy{
    flex:1 1 0;
    max-width:640px;
}

/* правая колонка – картинка 600×300 */
.hero-pic{
    flex:0 0 600px;
}
.hero-pic img{
    width:600px;
    height:300px;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.09);
}

/* ---------- мобильная адаптация (<900 px) ---------- */
@media (max-width:900px){
    .hero           { padding-bottom:24px;text-align:center; }
   
    .hero-row       { flex-direction:column;gap:36px; }
    .hero-copy      { max-width:none; text-align:left !important; }

    .hero-pic,
    .hero-pic img   { width:90vw;max-width:340px;height:auto;object-fit:contain;margin:0 auto; }
}
/* hero-title было добавлено только ради отступа и меньшего размера */
.hero-title{
    /* font-size:1.9rem;   ← вот эту строку можно убрать */
    /* margin-bottom:24px; ← и эту, если не нужен особый отступ */
}

/* ——— Фикс цвета H1 в HERO ——— */
.hero-title{
    color: var(--accent-purple) !important;   /* #490064 */
}

/* === ABOUT  (портрет слева, текст справа, фиолетовые заголовки) === */
@media (min-width:901px){

    /* 1. Две колонки: 600-px фото   |   растягивающийся текст   */
    #about .grid-2{
        display:grid;
        grid-template-columns:600px 1fr;  /* портрет | текст  */
        gap:64px;
        align-items:flex-start;
    }

    /* 2. ПОРЯДОК:   первый div = картинка (левая колонка),
                     второй div  = текст     (правая колонка)       */
    #about .grid-2 > :first-child{grid-column:1}   /* картинка  */
    #about .grid-2 > :last-child {grid-column:2}   /* текст      */
}

/* 3. Цвет h2 и h3 внутри блока about — фирменный фиолетовый     */
#about h2,
#about h3{
    color: var(--accent-purple) !important;   /* #490064 */
}

/* === Solution tweaks ========================================= */

/* 1. делаем h2 заголовок фиолетовым (если вдруг перекрашивался) */
#solution h2{
    color: var(--accent-purple);    /* #490064 */
}

/* 2. расстояние между иконкой и текстом: 25 px вместо 14 */
.k-icon{
    margin-bottom:25px;             /* было 14px */
}

/* ─── Solution → карточки преимуществ: ровно 25 px между иконкой и h4 ── */
.k-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px;            /* расстояние между СМЕЖНЫМИ элементами */
}

.k-icon{                 /* сама иконка без лишнего margin */
    width:70px;
    height:70px;
    margin:0;            /* обнуляем любые внешние отступы */
}

/* убираем верхний margin у h4 внутри карточки,
   чтобы за расстояние отвечал только flex-gap              */
.k-card h4{margin-top:0;}

/* ─── Solution / карточки преимуществ ────────────────────────── */
.k-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;                 /* иконка ↕ заголовок = 12 px */
}

.k-icon{
    width:70px;height:70px;
    margin:0;                 /* убираем внешний отступ      */
}

/* h-заголовок карточки = фиолетовый + сжимаем отступы */
.k-card h4{
    margin:0;                 /* обнуляем оба margin    */
    color:var(--accent-purple);
}

/* абзац сразу под заголовком: 8 px сверху */
.k-card p{
    margin:8px 0 0;
}

/* ===== TESTIMONIALS: горизонтальная лента с прокруткой ===== */
.feedback-grid{
    /* превращаем сетку в горизонтальную ленту */
    display:flex;
    gap:24px;                      /* расстояние между карточками   */
    overflow-x:auto;               /* включаем горизонт. скролл      */
    scroll-snap-type:x mandatory;  /* «прилипание» карточек          */
    padding-bottom:10px;           /* чтобы полоса скролла не залипала вплотную */
}

.feedback-grid blockquote{
    flex:0 0 320px;                /* фикс-ширина карточки 320 px    */
    min-width:320px;
    background:#f7f9fb;
    border-left:4px solid var(--accent-purple);
    padding:18px;border-radius:4px;margin:0;
    scroll-snap-align:start;       /* начало карточки прилипает      */
}

/* небольшие косметические улучшения полосы прокрутки  (необязательно) */
.feedback-grid::-webkit-scrollbar{height:6px}
.feedback-grid::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.25);border-radius:3px
}
/* Firefox */
.feedback-grid{scrollbar-color:rgba(0,0,0,.25) transparent;scrollbar-width:thin}

/* ── Модальное окно Impressum ────────────────────────────── */
.modal{
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    display:flex;                     /* центрируем содержимое  */
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.6);
    visibility:hidden;                /* скрыто по-умолчанию    */
    opacity:0;
    transition:.25s;
}
.modal.open{                          /* класс .open → показать */
    visibility:visible;
    opacity:1;
}
.modal-content{
    background:#fff;padding:40px 32px;border-radius:6px;
    max-width:600px;width:90%;text-align:left;
}

/* === Testimonials: сделать заголовок снова фиолетовым ========== */
#testimonials h2{
    color: var(--accent-purple);   /* #490064 */
}

/* === ABOUT: портрет слева, текст справа (десктоп) ============== */
@media (min-width: 901px){
    /* контейнер = две колонки:  600px  |  авто-ширина текста  */
    #about .grid-2{
        display:grid;
        grid-template-columns:600px 1fr;
        gap:64px;
        align-items:flex-start;
    }

    /* порядок:  картинка (любая) в колонку 1,  текст — в колонку 2 */
    #about .grid-2 img.rounded{grid-column:1;}
    #about .grid-2 > div:not(:has(img)){grid-column:2;}      /* текстовый DIV */

    /* размеры и стиль фото */
    #about img.rounded{
        width:600px;
        height:600px;
        object-fit:cover;
        border-radius:14px;
        box-shadow:0 8px 32px rgba(0,0,0,.09);
    }
}
/* мобильная версия остаётся одноколоночной — ничего не трогаем */
/* === ABOUT: фото слева, текст справа (десктоп) =============== */
@media (min-width:901px){

    /* две колонки: 600 px  |  авто-текст */
    #about .grid-2{
        display:grid;
        grid-template-columns:600px 1fr;
        gap:64px;
        align-items:flex-start;
    }

    /* переставляем:   1-й div (текст) → 2-я колонка
                       2-й div (фото)  → 1-я колонка          */
    #about .grid-2 > div:nth-child(1){grid-column:2;}
    #about .grid-2 > div:nth-child(2){grid-column:1;}

    /* размеры и стиль портрета */
    #about img.rounded{
        width:600px;height:600px;
        object-fit:cover;
        border-radius:14px;
        box-shadow:0 8px 32px rgba(0,0,0,.09);
    }
}

/* === ABOUT: фото слева, текст справа в одной строке =========== */
@media (min-width:901px){
    #about .grid-2{
        display:grid;
        grid-template-columns:600px minmax(0,1fr);
        gap:64px;
        align-items:flex-start;
    }

    /* 1-й div (текст)  → колонка 2, строка 1 */
    #about .grid-2 > div:nth-child(1){
        grid-column:2;
        grid-row:1;
    }

    /* 2-й div (фото)   → колонка 1, строка 1 */
    #about .grid-2 > div:nth-child(2){
        grid-column:1;
        grid-row:1;
    }

    #about img.rounded{
        width:600px;height:600px;object-fit:cover;
        border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.09);
    }
}
/* === ABOUT: подгоняем высоту портрета под высоту текста ======= */
@media (min-width:901px){
    #about img.rounded{
        width:auto;               /* ширина берётся пропорционально */
        max-width:600px;          /* но не шире 600                 */
        height:auto;              /* без жёсткой высоты             */
        max-height:500px;         /* высота ≈ высоте текстового блока */
        object-fit:cover;
        border-radius:14px;
        box-shadow:0 8px 32px rgba(0,0,0,.09);
    }
}

/* === ABOUT: текст выравниваем по верхнему краю фото ============ */
@media (min-width:901px){
    /* текстовый блок = первый div внутри сетки */
    #about .grid-2 > div:nth-child(1){
        grid-column:2;          /* уже правая колонка  */
        grid-row:1;             /* та же строка, что фото */
        align-self:flex-start;  /* ключ: верхний край ! */
    }
}
/* === ABOUT: убираем верхний margin у h2, чтобы текст поднялся === */
@media (min-width:901px){
    /* первый h2 внутри правой колонки */
    #about .grid-2 > div:nth-child(1) h2{
        margin-top:0;          /* обнуляем стандартный отступ */
    }
}

/* === Contact: вернуть фирменный цвет заголовка ================ */
#contact h2{
    color: var(--accent-purple);   /* #490064 */
}

/* ═════════  ABOUT  (портрет 600 px слева, текст 600 px справа) ═════════ */
@media (min-width: 901px){

    /* 1. Чуть шире рабочая зона, чтобы 600+600+gap влезли */
    .container{
        max-width:1280px;                 /* было 1200-1300 */
    }

    /* 2. Сетка 600 | 600  и порядок колонок                */
    #about .grid-2{
        display:grid !important;
        grid-template-columns:600px 600px !important;  /* фото | текст  */
        gap:64px;
        align-items:flex-start;
    }
    /* первый DIV (текст) → правая колонка */
    #about .grid-2 > div:nth-child(1){
        grid-column:2 !important;
        grid-row:1   !important;
    }
    /* второй DIV (фото)  → левая колонка  */
    #about .grid-2 > div:nth-child(2){
        grid-column:1 !important;
        grid-row:1   !important;
    }

    /* 3. Заголовок без верхнего отступа, чтобы ровно по верху фото */
    #about .grid-2 h2{margin-top:0;}

    /* 4. Размер и стиль портрета (остались прежними) */
    #about img.rounded{
        width:600px;height:600px;object-fit:cover;
        border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.09);
    }
}
/* === ABOUT  | портрет слева 600 px, текст выровнен по правым картинкам === */
@media (min-width: 901px){

    /* превращаем контейнер в FLEX-строку и сразу меняем порядок:
       фото → слева  |  текст → справа                                        */
    #about .grid-2{
        display:flex;
        flex-direction:row-reverse;   /* текст первым, но разворачиваем строку */
        gap:64px;                     /* то же расстояние, что в других блоках */
    }

    /* фото: фиксированная ширина 600 px, высота авто (не шире/выше 600)       */
    #about .grid-2 img.rounded{
        flex:0 0 600px;
        width:600px; height:600px;     /* строгое окно                         */
        object-fit:cover;
        border-radius:14px;
        box-shadow:0 8px 32px rgba(0,0,0,.09);
    }

    /* текст: занимает весь оставшийся горизонтальный размер                  */
    #about .grid-2 > div:first-child{   /* это уже текст благодаря row-reverse */
        flex:1 1 0;
    }

    /* убираем лишний верхний отступ у заголовка h2, чтобы верх совпал с фото */
    #about h2{ margin-top:0; }
}

/* ─── ABOUT: 600-px фото + 600-px текст, в одной строке ───────── */
@media (min-width:901px){

    /* a) 2 колонки 600 | 600, привычный gap 64 px                */
    #about .grid-2{
        display:grid;
        grid-template-columns:600px 600px;   /* фото | текст */
        gap:64px;
        align-items:flex-start;
    }

    /* b) если в HTML сначала идёт фото <div>, а потом текст-<div> */
    #about .grid-2 > div:first-child  {grid-column:1;grid-row:1;}  /* фото  */
    #about .grid-2 > div:last-child   {grid-column:2;grid-row:1;}  /* текст */
    /* ------------------------------------------------------------ */

    /* c) фото: ровно 600 × 600, тень, скругление                  */
    #about img.rounded{
        width:600px;height:600px;object-fit:cover;
        border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.09);
    }

    /* d) убираем верхний margin у заголовка, чтобы верх совпал с фото */
    #about h2{margin-top:0;}

    /* e) страховка: самому текстовому столбцу жёстко 600 px       */
    #about .grid-2 > div:last-child{
        width:600px;max-width:600px;
    }
}

.hero-sub{
margin:8px 0 0;
font-size:1.15rem;        /* чуть меньше, чем основной слоган */
font-weight:500;
color:var(--text);
}


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

/* 1. Кнопка и картинка «садятся» на одну нижнюю линию */
.hero-row{
    align-items:flex-end !important;     /* было center */
}

/* 2. Внутри левой колонки делаем колонку-flex
      + автоматически даём 20 px между соседними элементами
      (первый абзац, второй абзац, кнопка)                       */
.hero-copy{
    display:flex !important;
    flex-direction:column;
    gap:20px;                              /* нужный промежуток */
}

/* 3. Первый абзац («Я помогу…») увеличиваем,
      чтобы он не выглядел меньше второго.                      */
.hero-copy p:first-child{
    font-size:1.15rem;                     /* такой же размер, как у .hero-sub */
    font-weight:500;
}

/* =============================================================== */


/* ===== HERO: увеличиваем шрифт абзацев ========================= */
@media (min-width:901px){          /* только для десктопа */
    .hero-copy p,                  /* оба абзаца */
    .hero-sub{
        font-size:1.35rem;         /* было 1.15rem → + ~17 % */
        line-height:1.45;          /* чуть плотнее, чтобы не «проваливалось» */
    }
}

/* ═════════ HERO: правка типографики и кнопки ═════════ */

/* 1. Оба абзаца под заголовком – одинаковый, крупный размер     */
.hero-copy p{
    font-size:1.35rem;      /* было 1.15 / 1.00 → теперь одинаково */
    line-height:1.45;
    margin:0;               /* убираем лишние внешние отступы      */
}

/* 2. «Сжимаем» зазор между H1 и абзацами, а также между абзацами */
.hero-title{ margin-bottom:20px; }   /* было 32 px                */
.hero-copy{                         /* колонка  →  вертикальный   */
    display:flex;
    flex-direction:column;
    gap:16px;                      /* вместо 20 px                */
}

/* 3. Центрирование текста в кнопке */
.btn{
    display:inline-flex;            /* вместо inline-block         */
    align-items:center;             /* по вертикали                */
    justify-content:center;         /* по горизонтали              */
    padding:14px 32px;              /* симметричные отступы        */
    line-height:1;                  /* чтобы текст не “сползал”    */
}

/* 4. Чуть меньше свободного места между колонками hero-блока     */
.hero-row{ gap:48px; }              /* было 64 px                  */

/* 5. На больших экранах левый столбец «растягивается» полностью  */
@media (min-width:901px){
     .hero-copy{ flex:1 1 0; }      /* занимает всё доступное место*/
}

/* ═══ HERO: одинаковый крупный текст + нормальные отступы ═══ */

/* 1. Делаем оба абзаца (и обычный, и .hero-sub) ОДИНАКОВОГО размера */
.hero-copy p,
.hero-copy p:first-child,   /* переопределяем более специфичное правило */
.hero-sub{
    font-size:1.4rem !important;   /* единый размер, явно больше */
    line-height:1.45;
    margin:0;
}

/* 2. Сокращаем вертикальные «провалы» внутри левой колонки */
.hero-copy{
    display:flex;
    flex-direction:column;
    gap:14px;                   /* между абзацами и кнопкой */
}

/* 3. Колонки выравниваем по ВЕРХУ, а не по низу */
@media (min-width:901px){
    .hero-row{
        align-items:flex-start !important;     /* вместо flex-end */
        gap:48px;                              /* можно менять по вкусу */
    }
}

/* 4. Текст в кнопке – чётко по центру */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 32px;
    line-height:1;
}

/* ═══ HERO: +20 px вниз и кнопка у нижнего края фото ═══ */
@media (min-width:901px){              /* правим только широкие экраны */
    
    /* 1. смещаем левый столбец ↓ на 20 px */
    .hero-copy{
        margin-top:20px;              /* нужный сдвиг */
        min-height:300px;             /* ≥ высоты картинки (300 px)   */
    }

    /* 2. внутри колонки текст остаётся сверху,
          а кнопка «прилипает» к низу */
    .hero-copy .btn{
        margin-top:auto;              /* всё свободное место – над кнопкой */
    }
}

/* ═══ HERO: точная подстройка (-20 ↔︎ +10 px к шрифтам) ═════════ */
@media (min-width:901px){                      /* десктоп */

    /* 1. Колонка-flex: 20 px «внутрь», а не наружу  */
    .hero-copy{
        padding-top:20px;      /* опускаем контент   */
        margin-top:0;          /* отменяем старое    */
        min-height:300px;      /* = высота картинки  */
        display:flex;
        flex-direction:column;
    }

    /* 2. Кнопка «прилипает» к низу колонки */
    .hero-copy .btn{ margin-top:auto; }

    /* 3. +10 px к шрифту заголовка */
    .hero-title{
        font-size:3rem;        /* было 2.4rem ≈ 38 px → 48 px  */
    }

    /* 4. +10 px к обоим абзацам */
    .hero-copy p,
    .hero-sub{
        font-size:2rem !important;   /* было 1.4rem ≈ 22 px → 32 px */
        line-height:1.35;
    }
}

/* ═══ HERO: точная выравнивающая правка (v-final) ═══════════════ */
@media (min-width:901px){   /* только десктоп-ширина */

    /* 0. 300-px картинка остаётся эталоном высоты */
    .hero-pic img{ height:300px; }          /* напоминание */

    /* 1. ЛЕВЫЙ СТОЛБЕЦ
          – сдвигаем вниз на 20 px  (top:20px)
          – снижаем высоту на те же 20 px  (height:280px)
          → нижняя граница колонки совпадает с нижней границей фото */
    .hero-copy{
        position:relative;
        top:20px;                   /* сдвиг ↓ 20 px */
        height:280px;               /* 300 – 20  */
        display:flex;
        flex-direction:column;
        padding:0;                  /* убираем прежний padding */
        margin:0;                   /* и margin */
        min-height:unset;           /* отменяем старое правило */
    }

    /* 2. Кнопка «прилипает» к низу колонки */
    .hero-copy .btn{ margin-top:auto; }

    /* 3. Шрифты:  −5 px от предыдущего варианта
          (итог:  H1 ≈ 43 px, абзацы ≈ 27 px)                   */
    .hero-title{ font-size:2.7rem !important; }      /* ≈ 43 px */

    .hero-copy p,
    .hero-copy p:first-child,
    .hero-sub{
        font-size:1.7rem !important;                   /* ≈ 27 px */
        line-height:1.35;
    }
}

/* ═══ HERO: убираем пустоту под картинкой на мобильных ═══ */
@media (max-width:900px){
    /* 1. картинка занимает ровно свою высоту,
          не резервируя 600 px пространства */
    .hero-pic{
        flex:0 0 auto !important;   /* вместо 0 0 600px */
    }

    /* (необязательно) можно чуть уменьшить вертикальный отступ */
    .hero-row{ gap:28px; }          /* было 36px */
}

/* ═══ HERO: text-right / button-center – ТОЛЬКО смартфоны (≤640 px) ═══ */
@media (max-width:640px){

    /* 1. Абзацы и заголовок блока Hero – по правому краю */
    .hero        { text-align:left !important; }
    .hero-copy   { align-items:flex-start; }   /* flex-элементы по левому краю */

    /* 2. Кнопку выравниваем отдельно – по центру экрана */
    .hero-copy .btn{
        align-self:center;                  /* центр внутри flex-колонки  */
    }
}