/*


*/

/* ---------- Глобальные сбросы ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; overflow-x: hidden; }

body{
    margin: 0;
    background: #000;             /* чёрный фон */
    color: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Переменные ---------- */
:root{
    --badge-w-min: 140px;      /* телефоны */
    --badge-w-max: 200px;      /* как на 1-й картинке */
    --content-max: 600px;      /* ширина карточки на больших экранах */
    --cta-gap: 16px;           /* чуть больше зазор между кнопками */
    --cta-pad-x: clamp(12px, 4vw, 24px);
    --cta-pad-y: 16px;
    --cta-reserved-h: 130px;   /* резерв под панель кнопок на моб. */
}

/* ---------- Контейнер страницы ---------- */
.landing{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* ---------- Десктоп/планшет (дефолт) ---------- */
.card-stage{
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: 16px;
}

.image-frame{
    width: min(100%, var(--content-max));
    max-height: none;
}

.card-image{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;      /* на вебе без обрезки */
    display: block;
    border-radius: 12px;
}

/* ---------- Панель с кнопками ---------- */
.store-cta{
    position: sticky;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--cta-gap);
    padding: var(--cta-pad-y) var(--cta-pad-x);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 20%, #000 60%);
    padding-bottom: calc(var(--cta-pad-y) + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,.35);
    z-index: 10;
}

.store-link{ display: inline-block; }

.store-badge{
    display: block;
    width: clamp(var(--badge-w-min), 22vw, var(--badge-w-max));
    height: auto;
}

@media (hover: hover){
    .store-link:hover .store-badge{ opacity: .85; transition: opacity .15s ease-in-out; }
}

/* ---------- Мобильные правки (без кропа и без горизонтального скролла) ---------- */
@media (max-width: 768px){
    .card-stage{
        padding: 0;                /* без лишних отступов вокруг картинки */
    }

    .image-frame{
        width: 100%;               /* важно: не 100vw, чтобы не было горизонтального скролла */
        height: calc(100svh - var(--cta-reserved-h));
        max-height: calc(100svh - var(--cta-reserved-h));
    }

    .card-image{
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;       /* без обрезки */
        border-radius: 0;          /* в край */
    }

    .store-cta{
        gap: var(--cta-gap);
        padding: 12px var(--cta-pad-x);
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 10%, #000 55%);
    }
}

/* ---------- Уточнение для больших экранов ---------- */
@media (min-width: 769px){
    .card-stage{ padding: 24px; }
    .image-frame{ max-height: none; }
}