body {
    margin: 0;
    padding: 0;
    background-color: white;
    /*font-family: sans-serif;*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%; /* Запрещает iOS принудительно менять размер шрифта */
}

/* ЭТОТ БЛОК ЗАМЕНЯЕТ ТАБЛИЦЫ: Идеальное центрирование */
.page-wrapper {
    display: flex;           /* Включаем режим гибких контейнеров */
    justify-content: center; /* Центрируем контент по горизонтали */
    align-items: flex-start; /* Выравнивание по верхнему краю */
    min-height: 100vh;       /* Растягиваем контейнер на 100% высоты экрана */
}

/* Ограничитель ширины и центрирование контента */
.content-box {
    width: 100%;
    max-width: 640px;
    padding: 20px;
}

h1 {
    font-size: 28px;     /* Настройте размер под ваш вкус */
    font-weight: 600;
    color: #4B5563;
    margin-bottom: 40px; /* Отступ от названия сайта до первой карточки */
    text-align: center;  /* Или по центру, в зависимости от дизайна */
}

/* Общий ряд для текста и иконки */
.app-row {
    display: flex;
    align-items: flex-start;     /* Выравнивание по верхнему краю */
    justify-content: flex-start; /* Прижимает контент к левому краю */
    /* justify-content: space-between; !* Текст прижмется влево, иконка вправо *!*/
    gap: 38px;                   /* Расстояние между иконкой и началом текста */
}

/* Блок с иконкой (слева) */
.app-image-block {
    flex-shrink: 0; /* Не дает иконке сжиматься */
}

/* Иконка приложения для ПК */
.app-main-icon {
    width: 120px;        /* Ваш размер для десктопа */
    height: 120px;
    border-radius: 24px; /* Скругление углов */
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Легкая тень для объема */
}

/* Текстовый блок (справа) */
.app-text-block {
    flex: 1;          /* Занимает все оставшееся место справа */
    text-align: left; /* Сам текст выровнен по левому краю */
}

/* Контейнер карточки приложения */
.app-card {
    text-align: left;    /* Выравнивание текста по левому краю */
    max-width: 600px;
    margin: 0 auto;      /* Обнулили отступ сверху (первый ноль). auto оставляет блок по центру страницы. */
    padding: 0 20px 0 0; /* Обнулили внутренний отступ слева (последний ноль) */
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
}

/* Название (Name App) */
.app-name {
    font-size: 26px;
    font-weight: 600;
    color: #101010;
    margin-top: 0; /* Полностью убираем отступ сверху у самого заголовка */
    margin-bottom: 8px;
}

/* Подзаголовок (Subtitle) */
.app-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #4B5563;
    margin-bottom: 16px;
}

/* Описание (Description) */
.app-description {
    font-size: 15px;
    font-weight: 400;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Блок с круглыми иконками */
.app-icons-only {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Выравнивает кнопки по левому краю */
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

/* Стиль круглых кнопок */
.round-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Эффект при наведении */
.round-icon-btn:hover {
    background-color: #111827;
    color: #FFFFFF;
    stroke: #FFFFFF;
    border-color: #111827;
    transform: translateY(-2px);
}

.round-icon-btn svg {
    display: block;
}

.app-separator {
    border: none;              /* Убираем стандартную рамку */
    height: 1px;               /* Толщина линии ровно в 1 пиксель */
    background-color: #E5E7EB; /* Мягкий светло-серый цвет */
    margin-top: 40px;          /* Отступ от иконок до линии */
    margin-bottom: 40px;       /* Отступ от линии до следующего приложения */
    width: 100%;               /* Растягиваем линию на всю ширину карточки */
}

/* Изящный штрих: у последнего приложения в списке линию можно скрыть */
/*.app-card:last-child .app-separator {*/
/*    display: none;*/
/*}*/

.site-footer {
    display: flex;
    align-items: center;
    /*justify-content: flex-start; !* Выравнивание по левому краю *!*/
    justify-content: center; /* Центрируем футер на мобильных */
    gap: 12px;               /* Отступы между элементами */
    padding: 0 0 40px 0;     /* Полностью обнулили отступ сверху (первый ноль) */
    /*max-width: 600px;*/
    width: 100%;
    margin: 0 auto;          /* Центрирует сам контейнер подвала, как и карточки */
}

/* Стили для ссылок в подвале */
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;              /* Расстояние между иконкой и текстом */
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;        /* Такой же приятный серый цвет, как у Privacy Policy */
    text-decoration: none;
    transition: color 0.2s ease, stroke 0.2s ease;
    padding: 8px 4px;      /* Увеличивает невидимую зону клика вокруг ссылки */
}

/* Эффект при наведении мышкой */
.footer-link:hover {
    color: #111827; /* Текст становится темно-угольным */
}

/* Точка-разделитель между ссылками */
.footer-dot {
    color: #9CA3AF;
    font-weight: bold;
    user-select: none; /* Чтобы точка не выделялась при копировании текста */
}

/* Центрирование SVG внутри ссылки */
.footer-link svg {
    display: block;
}

/* АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ (до 600px) */
@media (max-width: 600px) {
    .app-row {
        flex-direction: column;  /* На мобильных выстраиваем элементы сверху вниз */
        align-items: flex-start; /* Всё выравнивается по левому краю */
        gap: 20px;               /* Уменьшаем отступ между иконкой и текстом */
    }

    /* Иконка приложения для мобильных */
    .app-main-icon {
        width: 80px;  /* Ваш размер для мобильной версии */
        height: 80px;
        border-radius: 18px;
    }

    /* Кнопки-иконки */
    .app-icons-only {
        justify-content: flex-start;
        /*justify-content: center; !* На мобильных центрируем только кнопки *!*/
        gap: 12px;
    }

    /*.site-footer {*/
    /*    justify-content: center; !* Центрируем футер на мобильных *!*/
    /*}*/
}

/* Ссылки в документах */
.doc-link {
    color: #007aff;
    text-decoration: none;
}

.doc-link:hover { text-decoration: underline; }