* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: #f2f3f4;
    font-family: Arial, Helvetica, sans-serif;
    color: #080808;
}

.app {
    position: relative;
    width: 100%;
    max-width: 430px;
    height: 790px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}


/* =========================
   ВЕРХНИЙ БЛОК
   ========================= */

.hero {
    position: relative;
    height: 255px;
    overflow: hidden;
    background: #fff;
}

.brand-logo {
    position: absolute;
    z-index: 5;

    left: 22px;
    top: 26px;

    width: 220px;
    height: auto;
}


/* ПИЦЦА — УВЕЛИЧЕНА НА 10% */

.pizza {
    position: absolute;
    z-index: 2;

    top: -5px;
    right: -72px;

    width: 330px;
    height: 281px;

    object-fit: cover;
    object-position: 68% 38%;
}


.hero h1 {
    position: absolute;
    z-index: 6;

    left: 22px;
    bottom: 15px;

    margin: 0;

    font-size: 27px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.7px;
}


/* =========================
   КАРТОЧКИ
   ========================= */

.menu {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 0 16px;
}

.card {
    width: 100%;
    height: 74px;

    display: flex;
    align-items: center;

    padding: 0 18px 0 12px;

    border: 0;
    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 5px 19px rgba(0,0,0,.07),
        0 0 0 1px rgba(0,0,0,.02);

    color: #080808;
    text-align: left;
    cursor: pointer;
}

.card:active {
    transform: scale(.985);
}


/* =========================
   ИКОНКИ
   ========================= */

.iconbox {
    flex: 0 0 55px;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #fff0f1;
}

.iconbox svg {
    width: 35px;
    height: 35px;

    fill: #f21f2d;
}


/* =========================
   ТЕКСТ
   ========================= */

.label {
    flex: 1;

    padding-left: 17px;

    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
}

.arrow {
    color: #555;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    line-height: 1;
    font-weight: 300;
}


/* =========================
   ШАШЕЧКИ
   ЗАФИКСИРОВАНЫ — НЕ МЕНЯЕМ
   ========================= */

.checker-wave {
    position: absolute;
    z-index: 4;

    left: -9px;
    bottom: -9px;

    width: 445px;
    height: auto;

    pointer-events: none;
}


/* =========================
   УЗКИЕ ТЕЛЕФОНЫ
   ========================= */

@media (max-width: 380px) {

    .app {
        height: 760px;
    }

    .hero {
        height: 238px;
    }

    .brand-logo {
        left: 18px;
        top: 23px;
        width: 200px;
    }

    /* ПИЦЦА +10% */

    .pizza {
        width: 308px;
        height: 262px;

        right: -72px;
        top: -5px;
    }

    .hero h1 {
        left: 18px;
        bottom: 13px;

        font-size: 25px;
    }

    .menu {
        padding: 0 13px;
        gap: 9px;
    }

    .card {
        height: 70px;
        border-radius: 17px;
    }

    .iconbox {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .iconbox svg {
        width: 33px;
        height: 33px;
    }

    .label {
        padding-left: 15px;
        font-size: 17px;
    }

    /* ШАШЕЧКИ НЕ МЕНЯЕМ */

    .checker-wave {
        width: 405px;
        left: -8px;
        bottom: -8px;
    }
}

/* Убираем чёрный артефакт слева от шашечной графики */
.app::after {
    content: "";
    position: absolute;
    z-index: 9;
    left: 0;
    bottom: 145px;
    width: 14px;
    height: 20px;
    background: #fff;
    pointer-events: none;
}


/* ============================================================
   АДАПТАЦИЯ ПОД ВЫСОТУ ЭКРАНА MAX MINI APP
   ============================================================ */

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

.app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

/* Телефоны с небольшой доступной высотой внутри MAX */
@media (max-height: 740px) {

    .hero {
        height: 215px;
    }

    .brand-logo {
        top: 20px;
        width: 195px;
    }

    .pizza {
        width: 295px;
        height: 251px;
        right: -64px;
        top: -7px;
    }

    .hero h1 {
        bottom: 12px;
        font-size: 25px;
    }

    .menu {
        gap: 7px;
    }

    .card {
        height: 64px;
        border-radius: 16px;
    }

    .iconbox {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
    }

    .iconbox svg {
        width: 30px;
        height: 30px;
    }

    .label {
        font-size: 17px;
    }

    .checker-wave {
        width: 405px;
        bottom: -9px;
    }
}


/* Совсем низкая рабочая область */
@media (max-height: 650px) {

    .hero {
        height: 185px;
    }

    .brand-logo {
        top: 15px;
        width: 175px;
    }

    .pizza {
        width: 265px;
        height: 226px;
        right: -58px;
        top: -10px;
    }

    .hero h1 {
        bottom: 10px;
        font-size: 23px;
    }

    .menu {
        gap: 6px;
        padding: 0 13px;
    }

    .card {
        height: 58px;
    }

    .iconbox {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .iconbox svg {
        width: 28px;
        height: 28px;
    }

    .label {
        font-size: 16px;
    }

    .checker-wave {
        width: 375px;
    }
}


/* ============================================================
   ЭКРАН ФОРМЫ
   ============================================================ */

.form-screen {
    position: absolute;
    z-index: 100;
    inset: 0;

    display: none;
    flex-direction: column;

    background: #fff;
}

.form-screen.active {
    display: flex;
}

.form-header {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 72px;
    padding: 12px 18px;

    border-bottom: 1px solid rgba(0,0,0,.07);
}

.back-button {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    padding: 0;
    border: 0;
    border-radius: 14px;

    background: #fff0f1;
    color: #f21f2d;

    font-size: 38px;
    line-height: 40px;
    font-weight: 400;

    cursor: pointer;
}

.form-title {
    flex: 1;

    padding: 0 46px 0 14px;

    font-size: 22px;
    line-height: 1.15;
    font-weight: 800;

    text-align: center;
}

.form-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 24px 18px;
}

.form-label {
    margin-bottom: 10px;

    font-size: 17px;
    font-weight: 700;
}

.message-text {
    width: 100%;
    height: 190px;

    padding: 16px;

    resize: none;

    border: 1px solid rgba(0,0,0,.12);
    border-radius: 18px;
    outline: none;

    background: #f7f7f8;
    color: #080808;

    font: inherit;
    font-size: 17px;
    line-height: 1.4;
}

.message-text:focus {
    border-color: #f21f2d;
    background: #fff;
}

.form-error {
    min-height: 24px;
    padding-top: 9px;

    color: #f21f2d;

    font-size: 14px;
    font-weight: 600;
}

.submit-button {
    width: 100%;
    height: 58px;

    margin-top: auto;

    border: 0;
    border-radius: 18px;

    background: #f21f2d;
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:active {
    transform: scale(.985);
}

.submit-button:disabled {
    opacity: .55;
}


/* ============================================================
   ФОТО В ОБРАЩЕНИИ
   ============================================================ */

.photo-input {
    display: none;
}

.photo-button {
    width: 100%;
    min-height: 52px;

    margin-top: 12px;
    padding: 0 16px;

    border: 0;
    border-radius: 16px;

    background: #fff0f1;
    color: #f21f2d;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
}

.photo-button:active {
    transform: scale(.985);
}

.photo-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

    margin-top: 10px;
}

.photo-preview:empty {
    display: none;
    margin: 0;
}

.photo-item {
    position: relative;

    width: 100%;
    aspect-ratio: 1;

    overflow: hidden;

    border-radius: 12px;
    background: #f2f2f2;
}

.photo-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.photo-remove {
    position: absolute;

    top: 4px;
    right: 4px;

    width: 25px;
    height: 25px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(0,0,0,.7);
    color: #fff;

    font-size: 18px;
    line-height: 23px;

    cursor: pointer;
}

/* При фотографиях немного уменьшаем поле,
   чтобы кнопка отправки оставалась на экране */

.form-content:has(.photo-preview:not(:empty)) .message-text {
    height: 145px;
}

@media (max-height: 650px) {
    .form-content {
        padding-top: 16px;
        padding-bottom: 14px;
    }

    .message-text {
        height: 135px;
    }

    .form-content:has(.photo-preview:not(:empty)) .message-text {
        height: 105px;
    }

    .photo-button {
        min-height: 46px;
        margin-top: 9px;
    }

    .photo-preview {
        margin-top: 7px;
    }
}


/* ============================================================
   ФРАНШИЗА
   ============================================================ */

.franchise-screen {
    position: absolute;
    z-index: 110;
    inset: 0;

    display: none;
    flex-direction: column;

    background: #fff;
}

.franchise-screen.active {
    display: flex;
}

.franchise-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 28px 20px 24px;
}

.step-counter {
    margin-bottom: 13px;

    color: #f21f2d;

    font-size: 15px;
    font-weight: 800;
}

.step-title {
    margin-bottom: 22px;

    font-size: 23px;
    line-height: 1.25;
    font-weight: 800;
}

.franchise-input {
    width: 100%;
    height: 58px;

    padding: 0 16px;

    border: 1px solid rgba(0,0,0,.12);
    border-radius: 17px;
    outline: none;

    background: #f7f7f8;
    color: #080808;

    font-size: 17px;
}

.franchise-input:focus {
    border-color: #f21f2d;
    background: #fff;
}

@media (max-height: 650px) {

    .franchise-content {
        padding-top: 20px;
        padding-bottom: 16px;
    }

    .step-title {
        margin-bottom: 16px;
        font-size: 21px;
    }
}


/* ============================================================
   РАБОТА
   ============================================================ */

.job-screen {
    position: absolute;
    z-index: 120;
    inset: 0;

    display: none;
    flex-direction: column;

    background: #fff;
}

.job-screen.active {
    display: flex;
}

.job-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 28px 20px 24px;
}

@media (max-height: 650px) {
    .job-content {
        padding-top: 20px;
        padding-bottom: 16px;
    }
}


/* ============================================================
   ЕДИНЫЙ ФИНАЛЬНЫЙ ЭКРАН
   ============================================================ */

.result-screen {
    position: absolute;
    z-index: 500;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;
    background: #fff;

    padding: 28px 24px 0;
    text-align: center;
}

.result-logo {
    width: 185px;
    height: auto;

    margin-top: 10px;
}

.result-main {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding-bottom: 85px;
}

.result-heart {
    margin-bottom: 15px;

    font-size: 58px;
    line-height: 1;
}

.result-title {
    margin: 0 0 12px;

    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
}

.result-text {
    max-width: 310px;

    margin: 0;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
}

.result-number {
    margin-top: 14px;

    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.result-home {
    width: 100%;
    max-width: 330px;
    min-height: 58px;

    margin-top: 28px;
    padding: 0 22px;

    border: 0;
    border-radius: 19px;

    background: #f21f2d;
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.result-home:active {
    transform: scale(.985);
}

.result-checker {
    position: absolute;

    left: 50%;
    bottom: -7px;

    width: 445px;
    height: auto;

    transform: translateX(-50%);

    pointer-events: none;
}

@media (max-height: 700px) {

    .result-screen {
        padding-top: 18px;
    }

    .result-logo {
        width: 155px;
        margin-top: 0;
    }

    .result-main {
        padding-bottom: 65px;
    }

    .result-heart {
        margin-bottom: 10px;
        font-size: 48px;
    }

    .result-title {
        font-size: 25px;
    }

    .result-home {
        margin-top: 20px;
        min-height: 54px;
    }
}


/* ============================================================
   ГЛАВНАЯ — УПЛОТНЕНИЕ ВЕРХА И БОЛЕЕ ЧЁТКИЕ КАРТОЧКИ
   ============================================================ */

/* Карточки немного контрастнее */
.card {
    border: 1px solid #eeeeee;

    box-shadow:
        0 6px 18px rgba(0,0,0,.09),
        0 1px 3px rgba(0,0,0,.04);
}


/* Основной экран MAX */
@media (max-height: 740px) and (min-height: 651px) {

    .hero {
        height: 185px;
    }

    .brand-logo {
        top: 5px;
    }

    .pizza {
        top: -22px;
    }

    .hero h1 {
        bottom: 10px;
    }

    .menu {
        padding-top: 8px;
    }
}


/* Низкие экраны оставляем компактными */
@media (max-height: 650px) {

    .menu {
        padding-top: 7px;
    }
}


/* Убираем лишнюю пустоту над логотипом на основном экране MAX */
@media (max-height: 740px) and (min-height: 651px) {

    .brand-logo {
        top: -40px;
    }

    .pizza {
        top: -67px;
    }
}


/* ============================================================
   УТВЕРЖДЁННЫЙ ДИЗАЙН ФОРМ PIZZA HEART
   ============================================================ */

.approved-form-screen {
    overflow: hidden;
    background: #f6f7f8;
}


/* ---------- КРАСНАЯ ШАПКА ---------- */

.approved-header {
    position: relative;
    z-index: 20;

    flex: 0 0 205px;
    height: 205px;

    background: #ed1c2e;

    color: #fff;
    text-align: center;
}

.approved-step-header {
    flex-basis: 225px;
    height: 225px;
}


/* ---------- НАЗАД ---------- */

.approved-back {
    position: absolute;

    top: 20px;
    left: 18px;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;
    border-radius: 13px;

    background: rgba(255,255,255,.13);
    color: #fff;

    font-size: 39px;
    line-height: 42px;
    font-weight: 300;

    cursor: pointer;
}


/* ---------- ЛОГОТИП ---------- */

.approved-logo {
    display: block;

    width: 126px;
    height: auto;

    margin: 0 auto;

    padding-top: 20px;

    /* brand-logo чёрный на прозрачном:
       делаем его белым внутри красной шапки */
    filter: brightness(0) invert(1);
}


/* ---------- НАЗВАНИЕ ---------- */

.approved-title {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 24px;

    font-size: 24px;
    line-height: 1.05;
    font-weight: 800;

    text-transform: uppercase;
}


/* ---------- ПРОГРЕСС ---------- */

.approved-step-header .approved-title {
    bottom: 63px;
}

.approved-progress-row {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 15px;

    text-align: left;
}

.approved-progress-row .step-counter {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
    font-weight: 800;
}

.approved-progress {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: 20px;

    background: rgba(255,255,255,.30);
}

.approved-progress-fill {
    width: 20%;
    height: 100%;

    border-radius: inherit;

    background: #fff;

    transition: width .25s ease;
}

#franchiseProgress {
    width: 25%;
}

#jobProgress {
    width: 20%;
}


/* ---------- СВЕТЛАЯ РАБОЧАЯ ОБЛАСТЬ ---------- */

.approved-content {
    position: relative;
    z-index: 5;

    display: flex;
    flex: 1;
    flex-direction: column;

    min-height: 0;

    padding: 20px 20px 105px;

    background: #f6f7f8;
}


/* скругление перехода из красной шапки */

.approved-header + .approved-content {
    margin-top: -1px;

    border-radius: 20px 20px 0 0;
}


/* ---------- КАРТОЧКА ПОШАГОВОЙ ФОРМЫ ---------- */

.approved-step-content .step-title,
.approved-step-content .franchise-input {
    position: relative;
    z-index: 2;
}

.approved-step-content {
    display: block;

    margin: 16px 16px 0;
    padding: 20px 18px;

    flex: 0 0 auto;

    border: 1px solid #eeeeee;
    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 7px 20px rgba(0,0,0,.07),
        0 1px 3px rgba(0,0,0,.025);
}


/* Вопрос */

.approved-step-content .step-title {
    margin: 0 0 18px;

    font-size: 21px;
    line-height: 1.25;
    font-weight: 800;
}


/* Поле */

.approved-step-content .franchise-input {
    width: 100%;
    height: 57px;

    padding: 0 15px;

    border: 1px solid #d9dde1;
    border-radius: 15px;
    outline: none;

    background: #f8f9fa;

    font-size: 16px;
}

.approved-step-content .franchise-input:focus {
    border-color: #ed1c2e;
    background: #fff;
}


/* ---------- ОШИБКИ ---------- */

.approved-content .form-error {
    position: relative;
    z-index: 10;

    margin-top: 8px;
}


/* ---------- КНОПКА ---------- */

.approved-content > .approved-submit {
    position: fixed;
    z-index: 30;

    left: 20px;
    right: 20px;
    bottom: 84px;

    width: auto;
    height: 58px;

    margin: 0;

    border-radius: 18px;

    box-shadow: 0 7px 18px rgba(237,28,46,.18);
}


/* Для пошаговой карточки кнопка визуально вынесена вниз экрана */

.approved-step-content > .approved-submit {
    position: fixed;

    left: 20px;
    right: 20px;
    bottom: 84px;

    width: auto;
    height: 58px;

    margin: 0;

    z-index: 30;
}


/* ---------- ШАШЕЧКИ ---------- */

/*
   Используем ТОТ ЖЕ checker-wave.png,
   что на утверждённой главной.
*/

.approved-checker {
    position: absolute;
    z-index: 10;

    left: 50%;
    bottom: -9px;

    width: 445px;
    max-width: none;
    height: auto;

    transform: translateX(-50%);

    pointer-events: none;
}


/* ============================================================
   ОТЗЫВ / ВОПРОС / ИДЕЯ
   ============================================================ */

.form-screen .approved-content {
    padding-top: 20px;
}

.form-screen .form-label {
    display: block;

    margin-bottom: 10px;

    font-size: 18px;
    font-weight: 800;
}

.form-screen .message-text {
    width: 100%;
    height: 160px;

    padding: 15px;

    border: 1px solid #d9dde1;
    border-radius: 15px;
    outline: none;

    background: #f8f9fa;

    font-size: 16px;
    line-height: 1.4;

    resize: none;
}

.form-screen .message-text:focus {
    border-color: #ed1c2e;
    background: #fff;
}

.form-screen .photo-button {
    min-height: 52px;

    margin-top: 12px;

    border: 1px solid #e7e8ea;
    border-radius: 15px;

    background: #fff;

    font-weight: 700;
}

.form-screen .photo-preview {
    position: relative;
    z-index: 12;
}


/* ============================================================
   НИЗКИЕ ЭКРАНЫ
   ============================================================ */

@media (max-height: 700px) {

    .approved-header {
        flex-basis: 175px;
        height: 175px;
    }

    .approved-step-header {
        flex-basis: 195px;
        height: 195px;
    }

    .approved-logo {
        width: 105px;
        padding-top: 14px;
    }

    .approved-back {
        top: 14px;

        width: 44px;
        height: 44px;

        font-size: 35px;
    }

    .approved-title {
        bottom: 19px;
        font-size: 21px;
    }

    .approved-step-header .approved-title {
        bottom: 57px;
    }

    .approved-step-content {
        margin-top: 12px;
        padding: 16px;
    }

    .approved-step-content .step-title {
        margin-bottom: 13px;
        font-size: 19px;
    }

    .approved-step-content .franchise-input {
        height: 52px;
    }

    .form-screen .message-text {
        height: 115px;
    }

    .approved-content > .approved-submit,
    .approved-step-content > .approved-submit {
        bottom: 70px;
        height: 54px;
    }

    .approved-checker {
        width: 405px;
    }
}


/* ============================================================
   ФИНАЛЬНЫЙ УТВЕРЖДЁННЫЙ СТИЛЬ ФОРМ
   BLACK PIZZA HEART
   ============================================================ */


/* ЧЁРНАЯ ШАПКА */

.approved-header {
    background: #000;
}


/* Кнопка назад */

.approved-back {
    background: #2b2b2b;
    color: #fff;
}


/* ЛОГОТИП:
   белый текст, красное сердце.
   Убираем старый filter, который делал красное сердце белым. */

.approved-logo {
    filter: none;
}


/* Основные кнопки */

.approved-content > .approved-submit,
.approved-step-content > .approved-submit {
    background: #000;
    color: #fff;

    border: 0;

    box-shadow:
        0 7px 18px rgba(0,0,0,.16);
}


/* Прикрепить фото — полностью чёрное */

.form-screen .photo-button {
    color: #080808;
}

.form-screen .photo-button *,
.form-screen .photo-button span {
    color: #080808;
}


/* Фокус полей тоже переводим с красного на чёрный */

.form-screen .message-text:focus,
.approved-step-content .franchise-input:focus {
    border-color: #080808;
}


/* ПРОГРЕСС Франшиза / Работа */

.approved-progress {
    background: rgba(255,255,255,.25);
}

.approved-progress-fill {
    background: #fff;
}


/* ============================================================
   ШАШЕЧКИ
   отдельная нижняя зона — НЕ ЗАЕЗЖАЮТ НА КНОПКУ
   ============================================================ */

.approved-checker {
    z-index: 10;

    bottom: -28px;

    width: 445px;
}


/* Кнопка заметно выше шашечек */

.approved-content > .approved-submit,
.approved-step-content > .approved-submit {
    bottom: 112px;
    z-index: 30;
}


/* Даём нижней части достаточно пространства */

.approved-content {
    padding-bottom: 145px;
}


/* Низкие экраны */

@media (max-height: 700px) {

    .approved-content > .approved-submit,
    .approved-step-content > .approved-submit {
        bottom: 100px;
    }

    .approved-content {
        padding-bottom: 132px;
    }

    .approved-checker {
        bottom: -30px;
        width: 405px;
    }
}

/* ============================================================
   ФИНАЛЬНАЯ КОРРЕКЦИЯ: КНОПКА + ШАШЕЧКИ
   ============================================================ */

.approved-content > .approved-submit,
.approved-step-content > .approved-submit {
    bottom: 122px;
}

.approved-checker {
    bottom: -55px;
}

@media (max-height: 700px) {
    .approved-content > .approved-submit,
    .approved-step-content > .approved-submit {
        bottom: 110px;
    }

    .approved-checker {
        bottom: -52px;
    }
}


/* ============================================================
   ФИНАЛЬНАЯ ГЛАВНАЯ — BLACK PIZZA HEART
   ============================================================ */

.hero {
    position: relative;

    height: 270px;

    overflow: hidden;

    background: #000;

    border-radius: 0 0 24px 24px;
}


/* Белый фирменный логотип + красное сердце */

.hero .brand-logo {
    position: absolute;
    z-index: 5;

    left: 25px;
    top: 32px;

    width: 205px;
    height: auto;

    content: url("/assets/brand-logo-dark.png");
}


/* Пицца справа */

.hero .pizza {
    position: absolute;
    z-index: 2;

    top: -12px;
    right: -66px;

    width: 310px;
    height: 265px;

    object-fit: cover;
    object-position: 67% 38%;
}


/* Мягкое затемнение между пиццей и текстом */

.hero::after {
    content: "";

    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.18) 48%,
            rgba(0,0,0,0) 72%
        );

    pointer-events: none;
}


/* Заголовок */

.hero h1 {
    position: absolute;
    z-index: 6;

    left: 25px;
    bottom: 48px;

    margin: 0;

    color: #fff;

    font-size: 27px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.6px;
}


/* Подзаголовок */

.hero-subtitle {
    position: absolute;
    z-index: 6;

    left: 25px;
    bottom: 19px;

    color: rgba(255,255,255,.70);

    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}


/* Карточки немного заходят на hero,
   как в утверждённом макете */

.menu {
    position: relative;
    z-index: 10;

    margin-top: -4px;

    padding-top: 12px;
}


/* ============================================================
   АДАПТАЦИЯ ПОД MAX
   ============================================================ */

@media (max-height: 740px) and (min-height: 651px) {

    .hero {
        height: 230px;
    }

    .hero .brand-logo {
        left: 22px;
        top: 20px;

        width: 175px;
    }

    .hero .pizza {
        top: -16px;
        right: -58px;

        width: 275px;
        height: 235px;
    }

    .hero h1 {
        left: 22px;
        bottom: 43px;

        font-size: 25px;
    }

    .hero-subtitle {
        left: 22px;
        bottom: 17px;

        font-size: 14px;
    }

    .menu {
        padding-top: 9px;
    }
}


/* Совсем низкая рабочая область */

@media (max-height: 650px) {

    .hero {
        height: 195px;
    }

    .hero .brand-logo {
        left: 19px;
        top: 14px;

        width: 150px;
    }

    .hero .pizza {
        top: -18px;
        right: -52px;

        width: 240px;
        height: 205px;
    }

    .hero h1 {
        left: 19px;
        bottom: 38px;

        font-size: 22px;
    }

    .hero-subtitle {
        left: 19px;
        bottom: 14px;

        font-size: 13px;
    }

    .menu {
        padding-top: 7px;
    }
}


/* ============================================================
   ГЛАВНАЯ — СКРУГЛЕНИЕ БАННЕРА СО ВСЕХ СТОРОН
   ============================================================ */

.hero {
    border-radius: 24px;
}


/* Telegram Mini App: верхняя безопасная зона */
body {
    padding-top: calc(
        var(--tg-safe-area-inset-top, 0px) +
        var(--tg-content-safe-area-inset-top, 0px)
    );
}

.app {
    height: calc(
        100vh -
        var(--tg-safe-area-inset-top, 0px) -
        var(--tg-content-safe-area-inset-top, 0px)
    );
}



/* ============================================================
   TELEGRAM — ФИНАЛЬНАЯ АДАПТАЦИЯ ГЛАВНОЙ
   ============================================================ */

/* Обычный экран */
.hero {
    height: 225px;
}

.hero .brand-logo {
    left: 22px;
    top: 20px;
    width: 175px;
}

.hero .pizza {
    top: -14px;
    right: -58px;
    width: 275px;
    height: 235px;
}

.hero h1 {
    left: 22px;
    bottom: 43px;
    font-size: 25px;
}

.hero-subtitle {
    left: 22px;
    bottom: 17px;
    font-size: 14px;
}

/* Desktop Telegram */
@media (min-width: 601px) {
    .app {
        height: min(770px, calc(
            100vh -
            var(--tg-safe-area-inset-top, 0px) -
            var(--tg-content-safe-area-inset-top, 0px)
        ));
    }
}


/* ============================================================
   TELEGRAM DESKTOP — КОМПАКТНАЯ ГЛАВНАЯ
   Телефон не затрагивает
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .hero {
        height: 190px;
    }

    .hero .brand-logo {
        left: 20px;
        top: 15px;
        width: 150px;
    }

    .hero .pizza {
        top: -14px;
        right: -50px;
        width: 235px;
        height: 200px;
    }

    .hero h1 {
        left: 20px;
        bottom: 36px;
        font-size: 22px;
    }

    .hero-subtitle {
        left: 20px;
        bottom: 14px;
        font-size: 13px;
    }

    .menu {
        gap: 7px;
        padding-top: 8px;
        padding-left: 13px;
        padding-right: 13px;
    }

    .card {
        height: 58px;
        border-radius: 15px;
    }

    .iconbox {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px;
    }

    .iconbox svg {
        width: 28px;
        height: 28px;
    }

    .label {
        font-size: 16px;
        padding-left: 14px;
    }

    .checker-wave {
        width: 405px;
        bottom: -8px;
    }
}

/* Telegram Desktop — ещё компактнее верхний баннер */
@media (hover: hover) and (pointer: fine) {

    .hero {
        height: 170px;
    }

    .hero .brand-logo {
        left: 18px;
        top: 12px;
        width: 135px;
    }

    .hero .pizza {
        top: -13px;
        right: -45px;
        width: 215px;
        height: 183px;
    }

    .hero h1 {
        left: 18px;
        bottom: 33px;
        font-size: 20px;
    }

    .hero-subtitle {
        left: 18px;
        bottom: 12px;
        font-size: 12px;
    }
}

/* Telegram Desktop — боковые отступы верхнего баннера */
@media (hover: hover) and (pointer: fine) {
    .hero {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* Telegram Mobile — боковые отступы верхнего баннера */
@media (hover: none), (pointer: coarse) {
    .hero {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }
}