/* =============================================================
   ГЛАВНАЯ СТРАНИЦА
   Подключается только на Index — остальным страницам не нужна.
   ============================================================= */

/* ------------------------------------------------------------
   Первый экран
   ------------------------------------------------------------ */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
    background: linear-gradient(155deg, #37AEFF 0%, var(--brand-blue) 48%, var(--brand-blue-600) 100%);
    color: var(--white);
}

.hero__inner {
    position: relative;
    z-index: var(--z-content);
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
    display: grid;
    gap: clamp(var(--space-6), 4vw, var(--space-9));
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

.hero__eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--brand-yellow);
    color: var(--ink-900);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
}

.hero__title {
    font-size: var(--fs-display);
    color: var(--white);
    letter-spacing: -0.015em;
    max-width: 16ch;
}

.hero__text {
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.9);
    max-width: 48ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.hero__media {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Жёлтый круг за иллюстрацией — раньше это был div на 459px с абсолютными координатами */
.hero__media::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: min(88%, 26rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--brand-yellow);
}

.hero__media img {
    position: relative;
    width: auto;
    max-height: clamp(16rem, 12rem + 22vw, 34rem);
    object-fit: contain;
}

/* --- Декоративный слой --- */

.hero__decor {
    position: absolute;
    inset: 0;
    z-index: var(--z-decor);
    pointer-events: none;
    overflow: hidden;
}

.decor {
    position: absolute;
    display: block;
}

.decor--ring {
    border-radius: 50%;
    border: 7px solid var(--brand-yellow);
}

.decor--dot {
    border-radius: 50%;
    background: var(--brand-yellow);
}

/* «Плюсы» из двух белых полос — были парой повёрнутых div-ов на каждый знак */
.decor--cross::before,
.decor--cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
}

.decor--cross::before {
    width: 100%;
    height: 8px;
}

.decor--cross::after {
    width: 8px;
    height: 100%;
}

.decor--a { width: 64px; height: 64px; top: 8%;  left: 4%; }
.decor--b { width: 46px; height: 46px; top: 72%; left: 12%; border-width: 6px; }
.decor--c { width: 72px; height: 72px; top: 22%; right: 6%; border-width: 8px; }
.decor--d { width: 22px; height: 22px; top: 52%; left: 2%; }
.decor--e { width: 54px; height: 54px; top: 14%; left: 38%; rotate: 18deg; }
.decor--f { width: 38px; height: 38px; top: 80%; right: 22%; rotate: -14deg; }

/* Мягкое свечение в правом верхнем углу */
.decor--sun {
    width: min(60vw, 34rem);
    aspect-ratio: 1;
    top: -18%;
    right: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 219, 88, 0.4) 0%, rgba(255, 219, 88, 0) 68%);
}

/* На узких экранах текст занимает верх блока, а иллюстрация — низ.
   Поэтому мелкий декор убираем, а кольца уводим к краю и вниз, к картинке. */
@media (max-width: 767px) {
    .decor--e,
    .decor--f,
    .decor--d {
        display: none;
    }

    .decor--a { width: 40px; height: 40px; border-width: 5px; top: 2%;  left: auto; right: 7%; }
    .decor--b { width: 30px; height: 30px; border-width: 4px; top: 86%; left: 8%; }
    .decor--c { width: 44px; height: 44px; border-width: 5px; top: 74%; right: 6%; }
}

/* ------------------------------------------------------------
   Сетка карточек «Всё в одной игре»
   ------------------------------------------------------------ */

.card-grid {
    display: grid;
    gap: clamp(var(--space-4), 2vw, var(--space-6));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card__media {
    aspect-ratio: 4 / 3;
    background: var(--brand-blue-050);
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.card__title {
    font-size: var(--fs-h3);
}

.card__text {
    color: var(--text-soft);
    font-size: var(--fs-body);
}

/* ------------------------------------------------------------
   Двухколоночные блоки (текст + картинка)
   ------------------------------------------------------------ */

.split {
    display: grid;
    gap: clamp(var(--space-6), 4vw, var(--space-9));
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* На десктопе картинка уходит вправо, на мобилке всегда остаётся сверху */
    .split--reverse .split__media {
        order: 2;
    }
}

.split__media {
    display: flex;
    justify-content: center;
}

.split__media img {
    width: 100%;
    max-width: 30rem;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

.split__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

/* --- Цифры --- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--space-4);
    width: 100%;
    margin-top: var(--space-3);
}

.stats__item {
    padding: var(--space-4);
    background: var(--brand-blue-050);
    border-radius: var(--radius-md);
}

.stats__value {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--accent);
    line-height: 1.1;
}

.stats__label {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-soft);
}

/* ------------------------------------------------------------
   Встроенная игра
   ------------------------------------------------------------ */

.play {
    background: var(--bg);
}

.play__frame {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

.play__frame iframe {
    width: 100%;
    /* Вместо 100vh: на мобилке экран не должен целиком занимать iframe */
    height: clamp(24rem, 18rem + 34vw, 46rem);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--ink-050);
}

/* ------------------------------------------------------------
   Скачивание приложения
   ------------------------------------------------------------ */

.download {
    position: relative;
    background: var(--brand-blue-900) url("../img/phone-section-back.png") center / cover no-repeat;
    color: var(--white);
}

/* Затемнение, чтобы белый текст читался поверх любой фотографии */
.download::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 63, 108, 0.85) 0%, rgba(11, 63, 108, 0.6) 100%);
}

.download > * {
    position: relative;
    z-index: var(--z-content);
}

.download__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.download__note {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.7);
}