/* =========================================================
   HERO NEW (index_new.html) — окремий стиль, не перетинається
   з класами із styles_new.css / styles.css, щоб не зламати
   вигляд index.html. Верстка "гумова", як і на сайті:
   desktop-розрахунок відносно 1440px, tablet — 768px,
   mobile — 480px (ті самі базові ширини, що й у styles_new.css).

   Одиниці — не голий vw: .heroN займає рівно 100vh (як і в старій
   верстці — без скролу), тож усі розміри й відступи всередині мають
   орієнтуватись і на ширину, і на висоту вікна, інакше на низьких
   вікнах (типовий ноутбук 1366x768 і подібні) контент не влазить і
   overflow:hidden просто обрізає низ (кнопки, посилання).

   Тому кожен розмір/відступ — calc(N * var(--u)), де --u:
   min(1vw, Rvh). R підібраний так, щоб дорівнювати рівно
   ширина_кадру/висота_кадру з Figma для цього брейкпоінту — тобто
   на "рідному" для макета співвідношенні сторін (десь 1440:873)
   --u веде себе як звичайний vw (дизайн виглядає так само, як і
   скрізь на сайті), а на вужчому по висоті вікні (більшість
   реальних десктопних вікон ширші за це співвідношення) --u
   плавно переходить на vh і пропорційно стискає весь блок, щоб
   він гарантовано влазив у висоту екрана без обрізання.
   ========================================================= */

.heroN {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #EDE1DA;
    height: 100vh;
    /* 1440 / 873 — співвідношення кадру "сайт" у Figma (desktop) */
    --u: min(1vw, 1.6495vh);
}

.heroN__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
}

/* Logo */
.heroN__logo {
    display: inline-flex;
    align-items: center;
}

.heroN__logoMark {
    display: block;
    flex-shrink: 0;
}

.heroN__logoWord {
    display: block;
    flex-shrink: 0;
}

/* Title */
.heroN__title {
    display: flex;
    flex-direction: column;
    font-family: WOG;
    font-style: normal;
    color: #000;
}

.heroN__titleLine1 {
    display: block;
    font-weight: 700;
    line-height: .9;
}

.heroN__titleLine2 {
    display: block;
    font-weight: 500;
    line-height: 1.4;
}

.heroN__brDesktop {
    display: none;
}

/* Subtitle */
.heroN__subtitle {
    font-family: WOG;
    font-weight: 500;
    color: #212121;
    line-height: 1.25;
}

/* Download block */
.heroN__downloadLabel {
    font-family: WOG;
    font-weight: 500;
    color: #212121;
    text-transform: uppercase;
}

.heroN__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.heroN__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #212121;
    box-sizing: border-box;
    transition: .5s;
}

.heroN__btn:hover {
    -webkit-animation: swingEase .5s ease;
    animation: swingEase .5s ease;
    -webkit-animation-iteration-count: .5;
    animation-iteration-count: .5;
}

.heroN__btn svg {
    height: 87.23%;
    width: auto;
}

/* Rules link */
.heroN__rules a {
    font-family: WOG;
    font-weight: 400;
    color: #212121;
    text-decoration: underline;
    transition: .5s;
}

.heroN__rules a:hover {
    color: #000;
}

/* Phone image */
.heroN__phone {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.heroN__phone img {
    display: block;
    width: 100%;
    height: 100%;
    /* img/phone_new.png — це вихідний (НЕ обрізаний) кадр з Figma:
       навколо самого телефону там навмисно великі прозорі поля.
       Саме завдяки їм бокс може бути "завеликим" (виходити за текст
       по горизонталі — так само, як і в самому макеті Figma) — cover
       просто показує прозорі пікселі там, де немає телефону, і крізь
       них видно фон/текст під картинкою. Якби картинку обрізати
       впритул до телефону, вона зайняла б весь бокс і лягла на текст. */
    object-fit: cover;
}

/* =========================================================
   DESKTOP (базова ширина 1440px)
   ========================================================= */
.heroN__inner {
    padding: calc(4.79 * var(--u)) calc(7.08 * var(--u)) calc(4 * var(--u)) calc(7.08 * var(--u));
}

.heroN__logoMark {
    width: calc(5.77 * var(--u));
    height: calc(4.71 * var(--u));
}

.heroN__logoWord {
    width: calc(8.67 * var(--u));
    margin-left: calc(.78 * var(--u));
}

.heroN__title {
    margin-top: calc(3.76 * var(--u));
}

.heroN__titleLine1 {
    font-size: calc(7.36 * var(--u));
}

.heroN__titleLine2 {
    font-size: calc(4.375 * var(--u));
}

.heroN__brDesktop {
    display: block;
}

.heroN__subtitle {
    margin-top: calc(1.04 * var(--u));
    font-size: calc(1.67 * var(--u));
    max-width: calc(47.71 * var(--u));
}

.heroN__download {
    margin-top: calc(4.24 * var(--u));
}

.heroN__downloadLabel {
    font-size: calc(1.94 * var(--u));
    margin-bottom: calc(.97 * var(--u));
}

.heroN__buttons {
    gap: calc(1.81 * var(--u));
}

.heroN__btn {
    width: calc(14.58 * var(--u));
    height: calc(3.26 * var(--u));
    border-radius: calc(3.59 * var(--u));
}

.heroN__rules {
    margin-top: calc(1.42 * var(--u));
}

.heroN__rules a {
    font-size: calc(1.11 * var(--u));
}

.heroN__phone {
    left: 32.78%;
    top: 8.8%;
    width: 77.34%;
    /* max(...) — щоб на широкому й невисокому вікні бокс не ставав
       відносно "ширшим" за саму картинку (інакше cover обрізає її
       зверху): друге число — це width%/1.3, підлога, яка вмикається
       лише коли звичайних 110.53% висоти замало. На типових вікнах
       (десктоп, план­шет, мобіл­ка) перемагає перше число — поведінка
       та сама, що й була. */
    height: max(110.53%, 59.49vw);
    transform: rotate(4.02deg);
}

/* =========================================================
   TABLET (базова ширина 768px, <= 1000px / <= 820px)
   ========================================================= */
@media (max-width: 820px) {
    .heroN {
        /* 768 / 995 — співвідношення кадру "планшет" у Figma */
        --u: min(1vw, 0.7719vh);
    }

    .heroN__inner {
        padding: calc(11.59 * var(--u)) calc(6.64 * var(--u)) calc(6 * var(--u)) calc(6.64 * var(--u));
    }

    .heroN__logoMark {
        width: calc(10.83 * var(--u));
        height: calc(8.83 * var(--u));
    }

    .heroN__logoWord {
        width: calc(16.25 * var(--u));
        margin-left: calc(1.46 * var(--u));
    }

    .heroN__title {
        margin-top: calc(11.35 * var(--u));
    }

    .heroN__titleLine1 {
        font-size: calc(7.6 * var(--u));
    }

    .heroN__titleLine2 {
        font-size: calc(6.77 * var(--u));
    }

    .heroN__brDesktop {
        display: none;
    }

    .heroN__subtitle {
        margin-top: calc(7.29 * var(--u));
        font-size: calc(3.125 * var(--u));
        max-width: calc(49.74 * var(--u));
    }

    .heroN__download {
        margin-top: calc(9.375 * var(--u));
    }

    .heroN__downloadLabel {
        font-size: calc(3.125 * var(--u));
        margin-bottom: calc(3.08 * var(--u));
    }

    .heroN__buttons {
        gap: calc(3.11 * var(--u));
    }

    .heroN__btn {
        width: calc(23.32 * var(--u));
        height: calc(5.22 * var(--u));
        border-radius: calc(5.75 * var(--u));
    }

    .heroN__rules {
        margin-top: calc(2.01 * var(--u));
    }

    .heroN__rules a {
        font-size: calc(2.08 * var(--u));
    }

    .heroN__phone {
        left: 19.87%;
        top: 38.76%;
        width: 110.79%;
        height: max(74.09%, 85.22vw);
        transform: rotate(1.04deg);
    }
}

/* =========================================================
   MOBILE (базова ширина 480px)
   ========================================================= */
@media (max-width: 480px) {
    .heroN {
        /* 480 / 717 — співвідношення кадру "мобайл" у Figma */
        --u: min(1vw, 0.6695vh);
    }

    .heroN__inner {
        padding: calc(10.42 * var(--u)) calc(5.42 * var(--u)) calc(6 * var(--u)) calc(5.42 * var(--u));
    }

    .heroN__logoMark {
        width: calc(13.79 * var(--u));
        height: calc(11.25 * var(--u));
    }

    .heroN__logoWord {
        width: calc(20.71 * var(--u));
        margin-left: calc(1.86 * var(--u));
    }

    .heroN__title {
        margin-top: calc(5.83 * var(--u));
    }

    .heroN__titleLine1 {
        font-size: calc(12.08 * var(--u));
    }

    .heroN__titleLine2 {
        font-size: calc(6.67 * var(--u));
    }

    .heroN__subtitle {
        margin-top: calc(8.75 * var(--u));
        font-size: calc(3.33 * var(--u));
        max-width: calc(47.08 * var(--u));
    }

    .heroN__download {
        margin-top: calc(14.58 * var(--u));
    }

    .heroN__downloadLabel {
        font-size: calc(2.5 * var(--u));
        margin-bottom: calc(1.875 * var(--u));
    }

    .heroN__buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(4.36 * var(--u));
    }

    .heroN__btn {
        width: calc(30.78 * var(--u));
        height: calc(6.89 * var(--u));
        border-radius: calc(7.59 * var(--u));
    }

    .heroN__rules {
        margin-top: calc(3.735 * var(--u));
    }

    .heroN__rules a {
        font-size: calc(1.66 * var(--u));
    }

    .heroN__phone {
        left: -1.02%;
        top: 39.59%;
        width: 135.76%;
        height: max(78.74%, 104.43vw);
        transform: rotate(-1.04deg);
    }
}

@-webkit-keyframes swingEase {
    15% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
    50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
    65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
    80% { -webkit-transform: translateY(2px); transform: translateY(2px); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes swingEase {
    15% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
    50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
    65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
    80% { -webkit-transform: translateY(2px); transform: translateY(2px); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}