/* ===== Общие переменные ===== */
:root {
    --bg: #0a0a0f;                      /* --bg - Цвет фона страницы */
    --card-bg: #13131a;                /* --card-bg - Цвет фона карточек */
    --border: #1e1e2e;                 /* --border - Цвет границ */
    --text: #e0e0e0;                   /* --text - Цвет основного текста */
    --muted: #888;                     /* --muted - Цвет второстепенного текста */
    --accent-purple: #8b5cf6;          /* --accent-purple - Фиолетовый акцент */
    --accent-gold: #f59e0b;            /* --accent-gold - Золотой акцент */
    --accent-emerald: #00b894;         /* --accent-emerald - Изумрудный акцент */
    --accent-emerald-dark: #008b6b;    /* --accent-emerald-dark - Тёмный изумруд для ховера */
    --shadow: 0 8px 32px rgba(0,0,0,0.5); /* --shadow - Тень для карточек */
}

* {
    margin: 0;                         /* margin - Обнуление внешних отступов */
    padding: 0;                        /* padding - Обнуление внутренних отступов */
    box-sizing: border-box;            /* box-sizing - Включаем border-box для всех элементов */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* font-family - Шрифт */
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;                  /* line-height - Высота строки */
    min-height: 100vh;                 /* min-height - Минимальная высота = 100% окна */
    padding: 20px;
    display: block;                    /* display - Блочный режим (отключаем flex) */
}

.page-center {
    display: flex;                     /* display - Flex-контейнер */
    justify-content: center;           /* justify-content - Выравнивание по горизонтали */
    align-items: center;               /* align-items - Выравнивание по вертикали */
    min-height: 100vh;
    padding: 20px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);   /* border - Граница (толщина, тип, цвет) */
    border-radius: 16px;               /* border-radius - Радиус скругления */
    padding: 40px;
    max-width: 450px;                  /* max-width - Максимальная ширина */
    width: 100%;                       /* width - Ширина 100% от родителя */
    text-align: center;                /* text-align - Выравнивание текста по центру */
    box-shadow: var(--shadow);
}

.card .icon {
    font-size: 64px;                   /* font-size - Размер шрифта */
    margin-bottom: 16px;               /* margin-bottom - Отступ снизу */
}

.card h1 {
    font-size: 28px;
    margin: 0 0 12px 0;                /* margin - Внешние отступы (сверху 0, справа 0, снизу 12px, слева 0) */
    background: linear-gradient(135deg, var(--accent-gold), #fbbf24); /* background - Градиентный фон */
    -webkit-background-clip: text;      /* -webkit-background-clip - Обрезка фона по тексту (для градиента) */
    -webkit-text-fill-color: transparent; /* -webkit-text-fill-color - Прозрачный текст (виден только фон) */
}

.card p {
    color: var(--muted);
    line-height: 1.6;
    margin: 16px 0;                    /* margin - Отступы сверху/снизу по 16px */
}

.card .btn {
    display: inline-block;
    margin-top: 20px;                  /* margin-top - Отступ сверху */
    padding: 12px 32px;                /* padding - Внутренние отступы (вертикаль/горизонталь) */
    background: var(--accent-gold);
    color: #000;
    border-radius: 8px;
    text-decoration: none;             /* text-decoration - Убираем подчёркивание */
    font-weight: 600;                  /* font-weight - Жирность шрифта (полужирный) */
    transition: background 0.2s;       /* transition - Плавное изменение фона при ховере */
    border: none;
    cursor: pointer;                   /* cursor - Курсор-указатель */
}

.card .btn:hover {
    background: #d97706;               /* background - Цвет фона при наведении (тёмно-золотой) */
}

.card .footer {
    margin-top: 24px;
    font-size: 0.85rem;
    color: #666;
}

.card .footer a {
    color: var(--accent-gold);
    text-decoration: none;
}

.card.verify h1 {
    background: linear-gradient(135deg, var(--accent-purple), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card.verify .btn {
    background: var(--accent-purple);
    color: #fff;
}

.card.verify .btn:hover {
    background: #7c3aed;
}

.card.verify .footer a {
    color: var(--accent-purple);
}

/* ================================================================
   НОВЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ И СТРАНИЦ ИНСТРУМЕНТОВ
   ================================================================ */

.hero-tools {
    text-align: center;
    padding: 60px 20px 40px;           /* padding - (см. выше) */
    background: linear-gradient(180deg, rgba(0, 184, 148, 0.08) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
}

.hero-tools h1 {
    font-size: clamp(2.2rem, 6vw, 3.8rem); /* font-size - Адаптивный размер (минимум, оптимум, максимум) */
    font-weight: 800;                 /* font-weight - Жирность (экстра-жирный) */
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--accent-emerald), #55efc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-tools .subtitle {
    font-size: 1.2rem;
    color: var(--muted);
    max-width: 700px;
    margin: 0 auto 24px;               /* margin - Отступы: сверху 0, по горизонтали auto, снизу 24px */
}

.hero-tools .platform-icons {
    display: flex;
    justify-content: center;
    gap: 16px;                         /* gap - Расстояние между элементами */
    flex-wrap: wrap;                   /* flex-wrap - Перенос на новую строку при необходимости */
    margin-bottom: 28px;
}

.hero-tools .platform-icons span {
    background: var(--card-bg);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--muted);
}

.hero-tools .download-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-download {
    display: inline-block;
    padding: 14px 36px;
    background: var(--accent-emerald);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;                 /* font-weight - Жирность (жирный) */
    font-size: 1.05rem;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}

.btn-download:hover {
    background: var(--accent-emerald-dark);
}

.btn-download i {
    margin-right: 8px;                /* margin-right - Отступ справа для иконки */
}

.hero-tools .screenshot-placeholder {
    margin: 32px auto 0;              /* margin - Отступ сверху 32px, по бокам auto, снизу 0 */
    max-width: 780px;
    height: 320px;                    /* height - Высота */
    background: var(--card-bg);
    border: 2px dashed var(--border); /* border - Пунктирная граница */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 1.1rem;
}

.tools-section {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

.tools-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
}

.tool-grid {
    display: grid;                    /* display - Сетка */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* grid-template-columns - Автоматическое заполнение колонками шириной от 250px */
    gap: 24px;
}

.tool-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    transition: transform 0.15s, border-color 0.15s; /* transition - Плавное изменение трансформации и цвета границы */
}

.tool-card:hover {
    transform: translateY(-4px);      /* transform - Подъём карточки при ховере */
    border-color: var(--accent-purple);
}

.tool-card .tool-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.tool-card h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.tool-card p {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.tool-card .tool-meta {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tool-card .tool-meta .platform-badge {
    background: #1e1e2e;              /* background - Цвет фона бейджа */
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: var(--muted);
    border: 1px solid var(--border);
}

.tool-card .btn-detail {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 6px;
    background: var(--accent-purple);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.tool-card .btn-detail:hover {
    background: #7c3aed;
}

.tool-card.coming-soon {
    opacity: 0.6;                     /* opacity - Прозрачность (60%) */
    border-style: dashed;             /* border-style - Пунктирная граница */
}

.tool-card.coming-soon .btn-detail {
    background: #1e1e2e;
    color: var(--muted);
    cursor: default;                  /* cursor - Обычный курсор (не pointer) */
}

.tool-card.coming-soon .btn-detail:hover {
    background: #1e1e2e;
}

.demo-section {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
}

.demo-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 32px;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.demo-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.demo-item .video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;             /* aspect-ratio - Соотношение сторон (16:9) */
    background: #1a1a24;              /* background - Цвет фона плейсхолдера */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.95rem;
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.demo-item p {
    color: var(--muted);
    font-size: 0.95rem;
}

.feedback-section {
    max-width: 600px;
    margin: 60px auto;
    padding: 0 20px;
}

.feedback-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 24px;
}

.feedback-form {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
}

.feedback-form label {
    display: block;                   /* display - Блочный элемент */
    margin-top: 16px;
    font-weight: 600;
    font-size: 0.95rem;
}

.feedback-form input,
.feedback-form select,
.feedback-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    background: #1a1a24;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;             /* font-family - Наследуем шрифт от родителя */
}

.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
    outline: none;                    /* outline - Убираем стандартную обводку */
    border-color: var(--accent-purple);
}

.feedback-form textarea {
    min-height: 120px;                /* min-height - Минимальная высота */
    resize: vertical;                 /* resize - Разрешаем изменение размера только по вертикали */
}

.feedback-form .btn-submit {
    margin-top: 20px;
    padding: 12px 32px;
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

.feedback-form .btn-submit:hover {
    background: #7c3aed;
}

.footer {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--border); /* border-top - Верхняя граница */
}

.footer a {
    color: var(--accent-purple);
    text-decoration: none;
    margin: 0 8px;                    /* margin - Отступы по бокам */
}

.legal-page {
    font-family: sans-serif;
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    color: var(--text);
    background: var(--bg);
}

.legal-page h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.legal-page h2 {
    margin: 24px 0 8px;               /* margin - Отступы: сверху 24px, по бокам 0, снизу 8px */
    font-size: 1.4rem;
}

.legal-page p {
    margin: 12px 0;
    color: var(--muted);
}

.tool-page-header {
    max-width: 900px;
    margin: 40px auto 20px;
    padding: 0 20px;
}

.tool-page-header h1 {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.tool-page-header .breadcrumb {
    color: var(--muted);
    font-size: 0.9rem;
}

.tool-page-content {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.tool-page-content .platform-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 24px;
}

.tool-page-content .platform-list span {
    background: var(--card-bg);
    padding: 4px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: 0.9rem;
}

.tool-page-content .screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.tool-page-content .screenshot-gallery .placeholder {
    aspect-ratio: 4 / 3;
    background: #1a1a24;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.tool-page-content .download-section {
    margin: 32px 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tool-page-content .download-section .btn-download {
    background: var(--accent-emerald);
}

.tool-page-content .download-section .btn-download:hover {
    background: var(--accent-emerald-dark);
}

.tool-page-content .reviews {
    margin: 40px 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.tool-page-content .reviews .review-item {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.tool-page-content .reviews .review-item:last-child {
    border-bottom: none;
}

.tool-page-content .reviews .review-item .review-author {
    font-weight: 600;
    color: var(--text);
}

.tool-page-content .reviews .review-item .review-text {
    color: var(--muted);
    margin-top: 4px;
}

.gradient-emerald-purple {
    background: linear-gradient(135deg, var(--accent-emerald), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.site-header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;    /* justify-content - Равномерное распределение между элементами */
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.site-header .logo {
    font-size: 1.3rem;
    font-weight: 700;
}

.site-header nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.site-header nav a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}

.site-header nav a.active {
    color: var(--text);
    font-weight: 600;
}

.site-header nav a:hover {
    color: var(--accent-emerald);
}

/* ===== Блок новостей (как Our tools) ===== */
.news-section {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

.news-section h2 {
    font-size: 2.0rem;
    margin-bottom: 20px;
}

.news-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.news-row {
    display: flex;
    align-items: center;
    gap: 40px;
}

.news-row.reverse {
    flex-direction: row-reverse;
}

.news-image {
    flex: 1;
    min-width: 0;
}

.news-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.news-content {
    flex: 1;
}

.news-content h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.news-content .date {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
    display: block;
}

.news-content p {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.news-content .read-more {
    color: var(--accent-purple);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.news-content .read-more:hover {
    color: var(--accent-emerald);
}

/* Адаптив */
@media (max-width: 768px) {
    .news-row {
        flex-direction: column !important;
        gap: 20px;
    }
    .news-image {
        width: 100%;
    }
}

/* ===== Горизонтальный скролл для скриншотов (как в Play Market) ===== */
.screenshot-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;           /* прилипание по горизонтали */
    padding: 8px 0 16px 0;                   /* отступы для скролла */
    -webkit-overflow-scrolling: touch;       /* плавный скролл на iOS */
    scrollbar-width: thin;                   /* тонкий скроллбар для Firefox */
    scrollbar-color: var(--accent-emerald) var(--card-bg);
}

.screenshot-scroll::-webkit-scrollbar {
    height: 6px;
}

.screenshot-scroll::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 10px;
}

.screenshot-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-emerald);
    border-radius: 10px;
}

.screenshot-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-emerald-dark);
}

.screenshot-item {
    flex: 0 0 auto;                          /* фиксированная ширина, не сжимается */
    width: calc(50% - 8px);                  /* 2 элемента на экране с учётом gap 16px */
    max-width: 300px;                        /* чтобы не слишком большие на широких экранах */
    min-width: 250px;                        /* минимальный размер на мобильных */
    scroll-snap-align: start;                /* прилипание к началу элемента */
    overflow: hidden;
    transition: transform 0.2s;
}

.screenshot-item img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: block;
    transition: transform 0.2s;
}

.screenshot-item img:hover {
    transform: scale(1.02);
    border-color: var(--accent-emerald);
}

/* Мобильная адаптация: на узких экранах показываем 1.5 элемента */
@media (max-width: 600px) {
    .screenshot-item {
        width: calc(80% - 8px);
        min-width: 200px;
    }
}