/* ===== base ===== */
:root {
    --pad: 50px;
    /* левый отступ для контента + логотипа */
    --cta-w: 275px;
    --cta-h: 100px;
}

* {
    box-sizing: border-box;
}
body,
html {
    height: 100%;
}
body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #fff;
    background: #0b0f1a url("../img/bg.webp") center/cover no-repeat;
    overflow-x: hidden;
}

/* ===== page layer ===== */
.page {
    position: relative;
    min-height: 100dvh;
    width: 100%;
}

/* ========================= */
/*          LOGO             */
/* ========================= */
.logo {
    position: fixed;
    left: var(--pad);
    top: var(--pad);
    z-index: 10;
    display: flex;
}
.logo img {
    width: 131px;
    height: auto;
}

/* ========================= */
/*      CONTENT RIGHT        */
/* ========================= */
.right-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;

    /* ✔ ВАЖНО: фиксированный левый отступ */
    margin-left: var(--pad);

    /* немного отступов сверху/справа */
    padding-top: clamp(120px, 16vh, 220px);
    padding-right: min(6vw, 64px);
    padding-bottom: clamp(24px, 6vh, 80px);
}

/* текстовая картинка */
.headline {
    width: clamp(260px, 65vw, 970px);
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2));
}

/* ========================= */
/*         CTA BUTTON        */
/* ========================= */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* ===== АДАПТИВНЫЕ РАЗМЕРЫ КНОПКИ ===== */
    width: clamp(200px, 26vw, 275px);
    height: clamp(70px, 9vw, 100px);

    background: #FF7C1E;
    border-radius: 1327.33px;
    transform: rotate(-5deg);
    text-decoration: none;
    color: #fff;
    margin-left: 75px;

    /* ===== АДАПТИВНЫЙ ТЕКСТ КНОПКИ ===== */
    font-family: 'Bebas Neue', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 38px);
    line-height: clamp(32px, 4.6vw, 45px);

    letter-spacing: 0.5px;
    text-transform: uppercase;

    box-shadow: 0 78.3125px 31.8559px rgba(255, 124, 30, 0.04), 0 43.8019px 26.5466px rgba(255, 124, 30, 0.13), 0 19.91px 19.91px rgba(255, 124, 30, 0.21), 0 5.30932px 10.6186px rgba(255, 124, 30, 0.25), inset -2.65466px -2.65466px 5.30932px rgba(0,0,0,0.4), inset 2.65466px 2.65466px 5.30932px rgba(255,255,255,0.25);

    animation: ctaPopGlow 2.2s ease-in-out infinite;
    transition: background 0.2s ease, transform 0.12s ease;
}

.cta:hover {
    background: #FF9050;
    box-shadow: 0 78.3125px 31.8559px rgba(255, 124, 30, 0.04), 0 43.8019px 26.5466px rgba(255, 124, 30, 0.13), 0 19.91px 19.91px rgba(255, 124, 30, 0.21), 0 5.30932px 10.6186px rgba(255, 124, 30, 0.25), inset -2.65466px -2.65466px 5.30932px rgba(0,0,0,0.4), inset 2.65466px 2.65466px 5.30932px rgba(255,255,255,0.25);
}

.cta:active {
    background: #F85A00;
    box-shadow: 0 78.3125px 31.8559px rgba(255, 124, 30, 0.04), 0 43.8019px 26.5466px rgba(255, 124, 30, 0.13), 0 19.91px 19.91px rgba(255, 124, 30, 0.21), 0 5.30932px 10.6186px rgba(255, 124, 30, 0.25);
}

@keyframes ctaPopGlow {
    0% {
        transform: rotate(-5deg) scale(1);
        box-shadow: 0 0 0 rgba(255,124,30,0), 0 78px 32px rgba(255,124,30,0.04), 0 44px 26px rgba(255,124,30,0.13), 0 20px 20px rgba(255,124,30,0.21), inset -2.6px -2.6px 5.3px rgba(0,0,0,0.4), inset 2.6px 2.6px 5.3px rgba(255,255,255,0.25);
    }

    50% {
        transform: rotate(-5deg) scale(1.06);
        /* ✔ увеличение = эффект "оторвалась" */
        box-shadow:0 0 45px rgba(255,124,30,0.55),
        /* ✔ свечение наружу */
        0px 78px 32px rgba(255,124,30,0.04), 0px 44px 26px rgba(255,124,30,0.13), 0px 20px 20px rgba(255,124,30,0.21), inset -2.6px -2.6px 5.3px rgba(0,0,0,0.4), inset 2.6px 2.6px 5.3px rgba(255,255,255,0.25);
    }

    100% {
        transform: rotate(-5deg) scale(1);
        box-shadow: 0 0 0 rgba(255,124,30,0), 0 78px 32px rgba(255,124,30,0.04), 0 44px 26px rgba(255,124,30,0.13), 0 20px 20px rgba(255,124,30,0.21), inset -2.6px -2.6px 5.3px rgba(0,0,0,0.4), inset 2.6px 2.6px 5.3px rgba(255,255,255,0.25);
    }
}

/* ========================= */
/*       HAND IMAGE          */
/* ========================= */
.hand {
    position: fixed;
    right: 0;
    bottom: -15px;
    width: min(1255px, 57vw);
    height: auto;
    z-index: 1;
    pointer-events: none;
    transform-origin: 90% 96%;
    filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {
    0% {
        transform: translateY(0) rotate(0.2deg);
    }
    50% {
        transform: translateY(-10px) rotate(-0.2deg);
    }
    100% {
        transform: translateY(0) rotate(0.2deg);
    }
}

/* ========================= */
/*        RESPONSIVE         */
/* ========================= */

@media (max-width: 1024px) {
    .hand {
        width: min(1150px, 68vw);
    }
}

@media (max-width: 1024px) and (min-height: 900px) {
    .hand {
        width: 95vw;
    }
}

@media (max-width: 768px) {
    .hand {
        width: 88vw;
        right: -100px;
    }

    .right-wrap {
        margin-left: var(--pad);
        max-width: 92vw;
    }

    .cta {
        width: 200px;
        height: 75px;
        font-size: 24px;
        margin-left: 40px;
    }
}

@media (max-width: 560px) {

  :root { --pad: 20px; }

  /* логотип по центру, 88px */
  .logo{
    position: fixed;
    left: 50%;
    top: var(--pad);
    transform: translateX(-50%);
    z-index: 10;
  }
  .logo img{ width: 88px; }

  /* левый блок (txt + кнопка) сверху, по центру */
  .right-wrap{
    margin-left: 0;
    padding-right: 16px;
    /* отодвигаем вниз, чтобы не перекрыть логотип */
    padding-top: calc(var(--pad) + 36px + 24px);
    padding-bottom: 18px;
    align-items: center;
    gap: 16px;
    max-width: 100vw;
  }

  /* txt по центру, ширина 360 (но не больше экрана) */
  .headline{
    width: min(360px, 90vw);
    height: auto;
    margin: 0 auto;
  }

  /* кнопка по центру, 270×56, шрифт 20px */
  .cta{
    width: 270px;
    height: 56px;
    font-size: 20px;
    line-height: 24px;
    margin-left: 0;
    margin-inline: auto;  /* центрируем */
  }

  /* рука снизу справа, прижата к правому краю */
    .hand {
        position: fixed;
        right: -60px;
        bottom: -20px;
        width: 520px;
        height: auto;
    }

}