/* ==========================================================================
   Секции страниц: герой главной, герой внутренних страниц, особые блоки
   ========================================================================== */

/* ---------- Блики первого экрана (как у героя ton.org) ----------
   Слой 660px начинается от самого верха страницы, под прозрачной шапкой. */

.hero-glow-container {
    position: absolute;
    top: calc(var(--header-h) * -1);
    left: 0;
    right: 0;
    height: 660px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.hero-glow, .hero-glow-mobile { position: absolute; top: 0; height: 660px; }
.hero-glow { left: 50%; width: max(1440px, 100%); transform: translateX(-50%); }
.hero-glow-mobile { display: none; left: 0; width: 100%; }
@media (max-width: 767px) {
    .hero-glow { display: none; }
    .hero-glow-mobile { display: block; }
}

/* ---------- Герой главной ---------- */

.hero { position: relative; isolation: isolate; padding-block: 96px 120px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; }
.hero__text { display: grid; gap: 28px; }
.hero__text .lead { font-size: 20px; }

.hero__stack { position: relative; height: 640px; }
.hero__stack .phone { position: absolute; width: 290px; max-width: none; }
.hero__stack .phone:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%); z-index: 3; }
.hero__stack .phone:nth-child(2) { left: 4%; top: 90px; transform: rotate(-7deg) scale(.86); z-index: 2; opacity: .9; }
.hero__stack .phone:nth-child(3) { right: 4%; top: 90px; transform: rotate(7deg) scale(.86); z-index: 2; opacity: .9; }
.hero__stack::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -60px; height: 220px; z-index: 4;
    background: linear-gradient(transparent, var(--color-background) 80%);
    pointer-events: none;
}

@media (max-width: 1099px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__stack { height: 560px; max-width: 640px; width: 100%; margin-inline: auto; }
    .hero__stack .phone { width: 250px; }
}
@media (max-width: 639px) {
    .hero { padding-block: 48px 64px; }
    .hero__text .lead { font-size: 17px; }
    .hero__stack { height: 420px; }
    .hero__stack .phone { width: 190px; }
    .hero__stack .phone:nth-child(2) { left: -6%; top: 60px; }
    .hero__stack .phone:nth-child(3) { right: -6%; top: 60px; }
}

/* ---------- Герой внутренних страниц ---------- */

.page-hero { position: relative; isolation: isolate; padding-block: 96px 40px; }
.page-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; }
.page-hero__text { display: grid; gap: 24px; padding-bottom: 72px; }
.page-hero__media { display: flex; justify-content: center; gap: 20px; align-items: flex-end; height: 520px; overflow: hidden; mask-image: linear-gradient(#000 70%, transparent); }
.page-hero__media .phone { max-width: 270px; flex: 0 0 270px; align-self: flex-start; }
.page-hero__media .phone + .phone { margin-top: 70px; }
.page-hero--center .page-hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.page-hero--center .page-hero__text { justify-items: center; padding-bottom: 32px; }
.page-hero--center .lead { margin-inline: auto; }

@media (max-width: 1023px) {
    .page-hero { padding-top: 64px; }
    .page-hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .page-hero__text { padding-bottom: 0; }
    .page-hero__media { height: 440px; }
    .page-hero__media .phone { flex-basis: 230px; }
}
@media (max-width: 639px) {
    .page-hero { padding-top: 40px; }
    .page-hero__media { height: 360px; gap: 12px; }
    .page-hero__media .phone { flex-basis: 170px; }
    .page-hero__media .phone + .phone { margin-top: 40px; }
}

/* ---------- Блок «Безопасность» по центру (как Security на ton.org) ---------- */

.statement { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: 200px 160px; }
.statement .h-hero { max-width: 900px; margin-inline: auto; }
.statement .lead { margin: 24px auto 0; }
.statement .btn-row { justify-content: center; margin-top: 36px; }
.statement__ring {
    position: absolute; left: 50%; top: 50%; z-index: -1;
    width: 760px; height: 760px; translate: -50% -50%;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, transparent 64%, rgb(30 174 251 / 10%) 65%, transparent 66%),
        radial-gradient(closest-side, transparent 82%, rgb(147 165 184 / 8%) 83%, transparent 84%),
        radial-gradient(closest-side, rgb(30 174 251 / 12%), transparent 70%);
}
@media (max-width: 639px) { .statement { padding-block: 120px 96px; } .statement__ring { width: 480px; height: 480px; } }

/* ---------- Результат AML (крупная цифра + шкалы) ---------- */

.score-card { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; padding: 40px; border-radius: var(--r-lg); background: var(--color-surface-tint-a); box-shadow: var(--edge); }
.score-card__num { display: grid; justify-items: center; gap: 8px; text-align: center; }
.score-card__num b { font-size: 88px; line-height: 1; font-weight: 500; color: var(--color-risk); letter-spacing: -0.03em; }
.score-card__num span:not(.pill) { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
@media (max-width: 767px) { .score-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; } }

/* ---------- Сравнение двух продуктов (Pro / Protect) ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo .card { gap: 18px; }
.duo .card .btn-row { margin-top: 8px; }
@media (max-width: 899px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Заголовок секции с действием справа ---------- */

.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.head-row .section-head { margin-bottom: 0; }
@media (max-width: 639px) { .head-row { flex-direction: column; align-items: flex-start; } }

/* ---------- Страница «Скачать» ---------- */

.download-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--r-xl); overflow: hidden; background: var(--color-divider); box-shadow: var(--edge); }
.download-card > div { background: var(--color-surface-tint); padding: 48px; display: grid; gap: 18px; align-content: start; }
.download-card .waitlist-form { margin-top: 8px; }
@media (max-width: 899px) { .download-card { grid-template-columns: 1fr; } .download-card > div { padding: 32px 24px; } }