/* Первый экран главной, 01.10.2026. Раньше текст, цифры, цена, две пары кнопок
   и карточка автора шли одной колонкой: на компьютере кнопки уезжали за сгиб.
   Теперь слева смысл и действие, справа фото, под ними — что входит в работу. */
/* в теме фон задан селектором section.main — он весомее одного класса,
   поэтому здесь тоже с тегом, иначе правило не применяется */
/* в теме у section.main стоит min-height и верхний отступ — от них снизу
   оставалась пустая полоса фона */
/* никаких отступов: сцена упирается в следующий блок, иначе снизу
   оставалась голубая полоса пустого фона */
section.hz-main{ background:#E9F1FA; padding:0; margin:0;
    min-height:0; overflow:hidden; }
.hz-hero{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:52px; align-items:center; padding:52px 0; min-height:620px; }
.hz-main .hz-hero__h1{ margin:0 0 20px; font-size:52px; line-height:1.1; font-weight:800; color:#0F1A2E; }
.hz-hero__lid{ margin:0 0 10px; max-width:640px; font-size:23px; line-height:1.35; font-weight:500;
    color:#0F1A2E; text-wrap:pretty; letter-spacing:-.008em; }
.hz-hero__lid-dop{ margin:0 0 28px; max-width:600px; font-size:16.5px; line-height:1.6; font-weight:400;
    color:#5D6584; text-wrap:pretty; }
.hz-hero__stats{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 28px; }
.hz-stat{ display:flex; align-items:center; gap:12px; padding:14px 20px; background:#FFF; border-radius:14px;
          box-shadow:0 6px 20px rgba(15,26,46,.07); text-decoration:none; }
a.hz-stat:hover{ box-shadow:0 10px 26px rgba(0,93,172,.16); }
.hz-stat__num{ font-size:30px; font-weight:800; line-height:1; color:#005DAC; }
.hz-stat__txt{ font-size:13px; line-height:1.3; color:#5D6584; }
.hz-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 18px; }
.hz-cta,.hz-cta2{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
                  height:60px; padding:0 28px; border-radius:14px; font-size:17px; font-weight:600; text-decoration:none; }
.hz-cta{ background:#005DAC; color:#FFF !important; -webkit-text-fill-color:#FFF; box-shadow:0 10px 24px rgba(0,93,172,.28); }
.hz-cta:hover{ background:#0b4d89; }
.hz-cta2{ background:#FFF; color:#0F1A2E !important; -webkit-text-fill-color:#0F1A2E; border:1px solid #D9E2F0; }
.hz-cta2:hover{ border-color:#005DAC; color:#005DAC !important; -webkit-text-fill-color:#005DAC; }
/* сцена во всю ширину экрана: фото — подложка первого экрана, а не картинка
   в углу. Текст читается за счёт светлой вуали слева (::before). */
section.hz-main{ position:relative; }
/* сцена шире контейнера (во всю ширину окна), но ровно по высоте первого экрана:
   ниже идут полоса преимуществ и текст — их фото перекрывать не должно */
.hz-hero{ position:relative; }
.hz-hero__scena{ position:absolute; top:0; bottom:0; left:50%; width:100vw;
    transform:translateX(-50%); z-index:0; pointer-events:none; }
.hz-hero__scena img{ width:100%; height:100%; object-fit:cover;
    /* кадр прижат к верху: при широком блоке cover срезает по 10% сверху и снизу,
       и голова уходила под обрез — теперь обрезается только низ стола */
    object-position:right 12%; display:block; }
.hz-hero::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
    transform:translateX(-50%); z-index:1; pointer-events:none;
    background:linear-gradient(90deg,
        rgba(247,250,253,.97) 0%, rgba(247,250,253,.95) 28%,
        rgba(247,250,253,.70) 42%, rgba(247,250,253,.16) 56%, rgba(247,250,253,0) 68%); }
/* сцена абсолютна относительно секции, поэтому сам .hz-hero остаётся в потоке
   и не становится для неё точкой отсчёта — иначе фото накрывает текст */
.hz-hero__text{ position:relative; z-index:2; }
/* визитка — прямо на фото, в правом нижнем углу сцены */
.hz-vizitka{ position:absolute; right:3%; bottom:26px; z-index:2; width:330px; padding:18px 20px;
    background:rgba(255,255,255,.93); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:14px;
    box-shadow:0 12px 32px rgba(15,26,46,.18); pointer-events:auto; }
.hz-vizitka__imya{ font-size:17px; font-weight:700; color:#0F1A2E; line-height:1.3; }
.hz-vizitka__rol{ margin-top:3px; font-size:11px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:#005DAC; line-height:1.4; }
.hz-vizitka__txt{ margin:10px 0 0; font-size:13px; line-height:1.5; color:#44506E; }
.hz-vizitka__txt a{ color:#005DAC; text-decoration:underline; }
/* полоса «что входит» — та же карточка, что и на макете, приподнята над фоном */

.hz-hero__author{ margin:24px auto 0; max-width:980px; }

/* широкие мониторы: высота первого экрана растёт вместе с шириной,
   иначе cover срезает по трети кадра и фото теряет голову */
@media (min-width: 1600px){ .hz-hero{ min-height:680px; } }
@media (min-width: 1920px){ .hz-hero{ min-height:760px; } }
@media (min-width: 2300px){ .hz-hero{ min-height:880px; } }
/* ноутбуки и планшеты: кнопки и плашки компактнее, иначе левая колонка
   не вмещает их в ряд и они рассыпаются столбиком */
@media (max-width: 1400px){
    /* на ноутбуках левой колонке не хватало ширины и кнопки рассыпались столбиком */
    .hz-hero{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:34px; }
    /* и вуаль тянем правее: текст занимает больше ширины и иначе ложится на лицо */
    /* 02.10.2026: вуаль доходила до 86 % ширины и на ноутбуках 1024-1400 px
       полностью закрывала фотографию — первый экран выглядел пустым.
       Теперь растворяется к 72 %: текст читается, человек на фото виден. */
    .hz-hero::before{ background:linear-gradient(90deg,
        rgba(247,250,253,.98) 0%, rgba(247,250,253,.95) 36%,
        rgba(247,250,253,.72) 50%, rgba(247,250,253,.22) 62%, rgba(247,250,253,0) 72%); }
    .hz-hero__scena img{ object-position:72% 12%; }
    .hz-cta,.hz-cta2{ height:56px; padding:0 20px; font-size:16px; }
    .hz-hero__cta{ gap:12px; }
    .hz-stat{ padding:12px 16px; gap:10px; }
    .hz-stat__num{ font-size:27px; }
    .hz-hero__stats{ gap:12px; }
}
@media (max-width: 991px){
    .hz-cta,.hz-cta2{ height:58px; padding:0 24px; font-size:16.5px; }
}
@media (max-width: 1200px){
    .hz-main .hz-hero__h1{ font-size:44px; }
    .hz-hero{ gap:36px; }
}
@media (max-width: 991px){
    /* текст раскрывается в ту же сетку (display:contents), поэтому отступы
       задаёт только gap — собственные margin элементов здесь удваивали пробелы */
    .hz-hero{ grid-template-columns:1fr; gap:18px; padding:32px 0 28px; min-height:0; }
    .hz-hero__lid,.hz-hero__lid-dop,.hz-hero__stats,.hz-hero__cta,
    .hz-main .hz-hero__h1{ margin-bottom:0; }
    .hz-main .hz-hero__h1{ font-size:36px; }
    .hz-hero__lid{ font-size:21px; line-height:1.38; margin-bottom:9px; font-weight:500; }
    .hz-hero__lid-dop{ font-size:16px; margin-bottom:22px; }
    /* На телефоне цифры подняты над фотографией (02.10.2026): три плашки
       разбивают сплошной текст сразу после обещания, а фото идёт следом. */
    .hz-hero__text{ display:contents; } .hz-hero__h1{ order:2 } .hz-hero__lid{ order:3 } .hz-hero__lid-dop{ order:4 }
    .hz-hero__stats{ order:5 } .hz-hero__scena{ order:6 } .hz-hero__cta{ order:7 }
    /* на узком экране вуаль не нужна: сцена идёт отдельной картинкой в потоке */
    .hz-hero::before{ display:none; }
    /* в потоке сцене не нужны ни вынос на всю ширину окна, ни сдвиг по центру */
    .hz-hero__scena{ position:static; left:auto; width:100%; transform:none; }
    /* на узком экране кадр ближе: иначе человек на панораме выходит мелким */
    .hz-hero__scena img{ height:auto; aspect-ratio:auto; object-fit:contain;
        object-position:center; border-radius:16px; }
    .hz-hero__scena picture{ display:block; }
    .hz-vizitka{ position:static; width:auto; margin-top:14px; -webkit-backdrop-filter:none; backdrop-filter:none;
        background:#FFF; box-shadow:0 8px 24px rgba(15,26,46,.10); }
}
@media (max-width: 600px){
    section.hz-main{ padding-bottom:0; }
    .hz-hero{ gap:16px; padding:24px 0 22px; }
    .hz-main .hz-hero__h1{ font-size:29px; line-height:1.18; margin-bottom:14px; }
    .hz-hero__lid{ font-size:19.5px; line-height:1.38; margin-bottom:8px; font-weight:500;
        padding:0; background:none; border:0; color:#0F1A2E; text-wrap:pretty; }
    .hz-hero__lid-dop{ font-size:15.5px; line-height:1.55; margin:0; color:#5D6584; padding:0; }
    .hz-hero__stats{ gap:8px; }
    .hz-stat{ flex:1 1 calc(33.333% - 6px); flex-direction:column; align-items:flex-start; gap:3px; padding:13px 12px;
        border-radius:12px; border:1px solid #E4EBF5; box-shadow:0 4px 14px rgba(15,26,46,.06); }
    .hz-stat__num{ font-size:22px; }
    .hz-stat__txt{ font-size:11px; }
    .hz-hero__cta{ gap:10px; }
    .hz-cta,.hz-cta2{ width:100%; height:54px; font-size:16px; padding:0 18px; }
    /* на узком экране принудительные переносы сжимали текст в левую половину,
       а справа оставалась пустая карточка — строки идут во всю ширину */
}