/* Fourth pass: performance + motion.
   Все анимации — только transform/opacity (композитные, без layout/paint),
   тяжёлые эффекты вырублены под prefers-reduced-motion. */

/* ── Фон: канвас-«созвездие точек» ─────────────────────────────── */
#particle-canvas {
    display: none !important;
}

/* Чёткий слой: маленький патч 560×560, ездит за курсором композитным transform
   (совет MDN: маленький канвас вместо полноэкранного) */
#fx-sharp {
    display: none !important;
}

/* ── Прогресс прокрутки ────────────────────────────────────────── */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 140;
    background: linear-gradient(90deg, #e2742d, #f0aa6c 60%, #e2a23a);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* ── Появление шапки при загрузке ──────────────────────────────── */
.header { animation: headerIn .65s cubic-bezier(.22, .9, .32, 1.1) both; }
@keyframes headerIn {
    from { transform: translateX(-50%) translateY(-160%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

/* ── Hero: рукописное подчёркивание акцентного слова ───────────── */
.hero h1 em {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 94%;
    background-size: 0% .09em;
    animation: inkDraw .9s cubic-bezier(.6, 0, .3, 1) .7s forwards;
}
@keyframes inkDraw { to { background-size: 100% .09em; } }

/* ── Пульс-кольцо на главной CTA ───────────────────────────────── */
/* Пульс через transform/opacity — композитор, ноль перерисовок
   (box-shadow-версия перерисовывала кнопку каждый кадр) */
.hero-actions .btn-accent::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid rgba(226, 116, 45, .55);
    opacity: 0;
    transform: scale(1);
    animation: ctaPulse 2.8s cubic-bezier(.3, 0, .4, 1) 1.8s infinite;
    pointer-events: none;
}
@keyframes ctaPulse {
    0%   { opacity: .7; transform: scale(1); }
    60%  { opacity: 0;  transform: scale(1.16); }
    100% { opacity: 0;  transform: scale(1); }
}

/* ── Покачивание плавающей TG-кнопки (translate не конфликтует
      с hover-scale по transform) ─────────────────────────────────── */
.tg-float { animation: floatBob 3.4s ease-in-out infinite alternate; }
@keyframes floatBob {
    from { translate: 0 0; }
    to   { translate: 0 -7px; }
}

/* ── Мягкое дыхание-гало вокруг популярного тарифа ─────────────── */
.price-card.popular { z-index: 2; }
.price-card.popular::after {
    content: '';
    position: absolute;
    inset: -16px;
    z-index: -1;
    border-radius: 28px;
    background: radial-gradient(closest-side, rgba(226, 116, 45, .30), transparent 72%);
    animation: haloBreath 3.6s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes haloBreath {
    from { opacity: .35; }
    to   { opacity: .9; }
}

/* ── Живость мелочей ───────────────────────────────────────────── */
.f-icon { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.feature-card:hover .f-icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

.trust-icon { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.trust-item:hover .trust-icon { transform: translateY(-4px) scale(1.1); }

.gallery-item img { transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
.gallery-item:hover img { transform: scale(1.045); }

.reward-rule-card .rr-icon { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.reward-rule-card:hover .rr-icon { transform: scale(1.14) rotate(6deg); }

.footer-socials a { transition: transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.footer-socials a:hover { transform: translateY(-3px); }

/* ── Направленные варианты reveal (классы вешает JS) ───────────── */
.reveal.reveal-left  { transform: translateX(-38px); }
.reveal.reveal-right { transform: translateX(38px); }
.reveal.reveal-zoom  { transform: translateY(18px) scale(.95); }
.reveal.active,
.reveal.reveal-left.active,
.reveal.reveal-right.active,
.reveal.reveal-zoom.active { transform: none; }

/* ── Курсор: как системный, но фирменный (статичный SVG = 0 нагрузки) ── */
@media (pointer: fine) {
    html, body {
        cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M3 1.8V18.6L7.7 14.6L10.6 21.4L13.9 20L11 13.4L17.2 13Z' transform='translate(0.9 1.2)' fill='rgba(37,36,31,0.25)'/%3E%3Cpath d='M3 1.8V18.6L7.7 14.6L10.6 21.4L13.9 20L11 13.4L17.2 13Z' fill='%2325241f' stroke='%23fff6ea' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default;
    }
    a, button, .btn, label, summary, .faq-head, .payment-option, .gallery-item, .mn-item, .toggle-opt, .tg-contact, .tg-float {
        cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M3 1.8V18.6L7.7 14.6L10.6 21.4L13.9 20L11 13.4L17.2 13Z' transform='translate(0.9 1.2)' fill='rgba(160,70,15,0.30)'/%3E%3Cpath d='M3 1.8V18.6L7.7 14.6L10.6 21.4L13.9 20L11 13.4L17.2 13Z' fill='%23e2742d' stroke='%23fffdf8' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer;
    }
    input:not([type='radio']):not([type='checkbox']), textarea { cursor: text; }
}

/* ── Прожектор внутри карточек ─────────────────────────────────── */
.feature-card, .review-card, .trust-item, .price-card { position: relative; }
.card-spot {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(226, 116, 45, .16), transparent 65%);
    z-index: 1;
}
.price-card:hover .card-spot,
.feature-card:hover .card-spot,
.review-card:hover .card-spot,
.trust-item:hover .card-spot { opacity: 1; }

/* ── Лёгкий режим: включается сам, если машина не тянет ────────── */
body.perf-lite .ambient-orb,
body.perf-lite .hero-actions .btn-accent::before,
body.perf-lite .hero-actions .btn-accent::after,
body.perf-lite .price-card.popular::before,
body.perf-lite .price-card.popular::after,
body.perf-lite .trust-number,
body.perf-lite .stat-num,
body.perf-lite .sunbeam,
body.perf-lite .marquee-track,
body.perf-lite .hero-float-card,
body.perf-lite .section-kicker,
body.perf-lite .hero-eyebrow,
body.perf-lite .tg-float { animation: none !important; }
body.perf-lite .section-heading p .rw { animation: none !important; opacity: 1 !important; }

/* Меньше полноэкранных композит-слоёв: этот радиальный фон остался от тёмной темы */
body::before { content: none; }

/* Шумовая текстура — ещё один полноэкранный слой в композите каждого кадра */
.ambient-scene::after { content: none; }

/* Демо-режим скриншотов: показать канвас даже при reduced-motion */
body.bg-demo #particle-canvas { display: block !important; }

/* ГЛАВНЫЙ убийца скролл-FPS: backdrop-filter пересэмплирует блюр под элементом
   на каждом прокрученном кадре. У шапки фон и так почти непрозрачный (.96),
   у карточек — свой градиент; визуально потеря нулевая, выигрыш огромный */
.header, .btn-login, .hero-stats, .price-card, .mobile-nav, .pricing-promo-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hero-img { will-change: transform; }

/* ── Магнитные кнопки (translate компонуется с hover-transform) ── */
.magnetic { transition: translate .2s cubic-bezier(.2, .8, .3, 1); will-change: translate; }

/* ── Автоблик главной CTA раз в ~3.5с ──────────────────────────── */
.hero-actions .btn-accent::after {
    left: 0;
    transition: none;
    transform: translateX(-130%);
    animation: autoShine 3.4s ease-in-out 2.2s infinite;
}
@keyframes autoShine {
    0% { transform: translateX(-130%); }
    38%, 100% { transform: translateX(130%); }
}

/* ── Каскадное появление слов заголовка (спаны вешает JS) ──────── */
.hero h1 .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.55em);
    animation: wordRise .65s cubic-bezier(.2, .8, .25, 1) calc(.15s + var(--i, 0) * .085s) forwards;
}
@keyframes wordRise { to { opacity: 1; transform: translateY(0); } }

/* ── Золото в цифрах: тёмный читаемый градиент + мягкий блик ───── */
/* Все стопы тёмные — цифры читаются в любой точке анимации
   (светлые #ffd166-концы делали половину цифры невидимой на светлом фоне) */
.trust-number, .stat-num {
    background: linear-gradient(100deg, #8a4a08 0%, #c96f16 42%, #f2a63b 50%, #c96f16 58%, #8a4a08 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldSweep 6s linear infinite;
}
@keyframes goldSweep { to { background-position: -200% 0; } }

/* Подписи под цифрами: тёмнее — прежний светло-серый тонул на полупрозрачном фоне */
.trust-label { color: #57503f; }
.stat-label { color: #6b6254; }

/* ── Секция цифр: светлая и ПОЛУпрозрачная, как остальные секции ── */
.trust-section {
    background:
        radial-gradient(circle at 70% 0%, rgba(226, 116, 45, .10), transparent 24rem),
        linear-gradient(135deg, rgba(247, 240, 228, .58), rgba(239, 231, 216, .48) 70%);
}
.trust-section .section-title,
.section-heading-dark .section-title { color: #25241f; }
.section-heading-dark .section-kicker { color: #b45309; }
.trust-item { border-right-color: rgba(37, 36, 31, .12); }
.trust-icon {
    color: #b45309;
    background: rgba(226, 116, 45, .10);
    border-color: rgba(226, 116, 45, .22);
}
@media (max-width: 900px) {
    .trust-item { border-right: 0; border-bottom: 1px solid rgba(37, 36, 31, .12); }
    .trust-item:last-child { border-bottom: 0; }
}

/* Золотые волоски-границы секции цифр */
.trust-section { position: relative; }
.trust-section::before,
.trust-section .container::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 166, 35, .5), transparent);
    pointer-events: none;
}
.trust-section::before { top: 0; }
.trust-section .container::after { bottom: -60px; left: 20%; right: 20%; opacity: .6; }

/* ── Солнечные лучи: гигантский конус медленно вращается за hero ── */
.sunbeam {
    position: absolute;
    top: -26rem;
    left: 50%;
    width: 90rem;
    height: 90rem;
    margin-left: -45rem;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0% 6%,   rgba(245, 166, 35, .16) 9% 11%,  transparent 14% 22%,
        rgba(226, 116, 45, .13) 25% 27%, transparent 30% 40%,
        rgba(245, 166, 35, .15) 43% 45%, transparent 48% 58%,
        rgba(226, 116, 45, .12) 61% 63%, transparent 66% 76%,
        rgba(245, 166, 35, .14) 79% 81%, transparent 84% 100%);
    -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 70%);
    mask: radial-gradient(closest-side, #000 22%, transparent 70%);
    /* Статично: вращение слоя 1440×1440 — постоянный композит-налог на слабых GPU */
}

/* ── Парящие чипы над hero-скриншотом ──────────────────────────── */
.hero-visual { position: relative; }
.hero-float-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 253, 248, .96);
}
.hfc-a { top: 5%; right: -3%; }
.hfc-b { bottom: 9%; left: -5%; animation-delay: -2.4s; }
.hero-float-card i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .65rem;
    color: #e2742d;
    background: rgba(226, 116, 45, .13);
    font-size: 1rem;
}
.hero-float-card b { display: block; font-size: .95rem; color: #25241f; line-height: 1.2; }
.hero-float-card span { display: block; font-size: .72rem; color: #6f6a5f; }
@media (max-width: 992px) { .hero-float-card { display: none; } }

/* ── Бегущая строка ────────────────────────────────────────────── */
.marquee {
    overflow: hidden;
    padding: .95rem 0;
    border-top: 1px solid rgba(37, 36, 31, .10);
    border-bottom: 1px solid rgba(37, 36, 31, .10);
    background: rgba(255, 253, 248, .55);
}
.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marqueeMove 28s linear infinite;
    white-space: nowrap;
}
.marquee-track span {
    margin-right: 2.4rem;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #4d4335;
}
.marquee-track i { margin-right: 2.4rem; color: #e2742d; font-size: .7rem; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ── Тёплое свечение заголовка hero ────────────────────────────── */
.hero h1 { text-shadow: 0 10px 44px rgba(226, 116, 45, .22); }

/* ── Полиш-пакет: иконки, карточки, кнопки ─────────────────────── */
::selection { background: rgba(226, 116, 45, .28); color: #25241f; }

:focus-visible { outline: 2px solid #e2742d; outline-offset: 2px; border-radius: 4px; }

.f-icon {
    background: linear-gradient(135deg, rgba(226, 116, 45, .16), rgba(245, 166, 35, .07));
    border: 1px solid rgba(226, 116, 45, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 6px 16px rgba(226, 116, 45, .08);
}

/* Современные stroke-иконки (инлайн-SVG вместо жирных заливок FA) */
.f-icon svg, .trust-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rr-icon.rr-1, .rh-place.rh-1 { background: linear-gradient(145deg, #fde68a, #f59e0b); color: #6b3a05; }
.rr-icon.rr-2, .rh-place.rh-2 { background: linear-gradient(145deg, #f1f5f9, #cbd5e1); color: #475569; }
.rr-icon.rr-3, .rh-place.rh-3 { background: linear-gradient(145deg, #fdba74, #cd7f32); color: #5c2c0e; }

.btn-accent,
.price-card.popular .btn-accent {
    background: linear-gradient(135deg, #f5a623, #e2742d);
}
.btn-accent:hover,
.price-card.popular .btn-accent:hover {
    background: linear-gradient(135deg, #ffb63a, #ef8138);
}

.price-card { transition: transform .35s cubic-bezier(.2, .8, .3, 1), border-color .3s ease, box-shadow .35s ease; }
.price-card:hover { border-color: rgba(226, 116, 45, .4); }

.review-card {
    position: relative;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(53, 44, 31, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.review-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(53, 44, 31, .10); }
.review-card::before {
    content: '\201C';
    position: absolute;
    top: 2px;
    right: 16px;
    font-family: Georgia, serif;
    font-size: 4.6rem;
    line-height: 1;
    color: rgba(226, 116, 45, .14);
    pointer-events: none;
}

.faq-item { transition: border-color .3s ease, background .3s ease; }
/* FAQ — плоский список (стиль редизайна): открытый пункт подсвечиваем мягкой
   тёплой заливкой, а не кислотной оранжевой границей + чужеродной тенью */
.faq-item.faq-open {
    border-bottom-color: rgba(37, 36, 31, .18);
    box-shadow: none;
    background: linear-gradient(180deg, rgba(226, 116, 45, .06), rgba(226, 116, 45, 0) 85%);
    border-radius: 14px 14px 0 0;
}
.faq-item.faq-open .faq-icon { box-shadow: none; }

/* ── Модалка оплаты: перф + полиш ──────────────────────────────── */
.modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 13, 10, .66);
}
#modal-email.modal { background: rgba(15, 13, 10, .74); }

#modal-email .checkout-summary h2 {
    background: linear-gradient(120deg, #25241f 35%, #b45309);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#modal-email .checkout-plan small {
    color: #b45309;
    font-size: 1.12rem;
}
#modal-email .checkout-plan {
    border-color: rgba(245, 166, 35, .30);
    background: rgba(245, 166, 35, .10);
}

#modal-email .email-actions {
    position: sticky;
    bottom: -1px;
    z-index: 2;
    margin-top: 18px;
    padding-top: .85rem;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0), #fffdf8 40%);
}
#modal-email .email-actions .btn-accent {
    background: linear-gradient(135deg, #f5a623, #e2742d);
    box-shadow: 0 10px 26px rgba(226, 116, 45, .32);
}
#modal-email .email-actions .btn-accent:hover {
    background: linear-gradient(135deg, #ffb63a, #ef8138);
    box-shadow: 0 14px 32px rgba(226, 116, 45, .42);
}

/* Мобильная модалка: компактная шапка — форма видна сразу, без простыни */
@media (max-width: 768px) {
    #modal-email .checkout-shell { display: block; min-height: 0; }
    #modal-email .checkout-summary {
        padding: 1.3rem 3.2rem 1.15rem 1.3rem;
    }
    #modal-email .checkout-summary h2 { margin-top: .35rem; font-size: 1.45rem; max-width: none; letter-spacing: -.02em; }
    #modal-email .checkout-summary > .checkout-titlebar > div > p { display: none; }
    #modal-email .checkout-benefits { display: none; }
    #modal-email .checkout-summary::after { display: none; }
    #modal-email .checkout-plan {
        margin-top: .8rem;
        padding: .8rem 1rem;
        display: flex;
        align-items: baseline;
        gap: .6rem;
        flex-wrap: wrap;
    }
    #modal-email .checkout-plan span { display: none; }
    #modal-email .checkout-plan strong { font-size: 1.1rem; }
    #modal-email .checkout-plan small { margin-top: 0; font-size: 1.05rem; }
    #modal-email .checkout-form { padding: 1.35rem 1.2rem 1.6rem; }
    #modal-email .checkout-section-title h3 { font-size: 1.15rem; }
    .checkout-assurance { margin-bottom: 1.1rem; }
}

/* ── Animated Shiny Text: блик панорамой по кикерам секций ─────── */
.section-kicker, .hero-eyebrow, .checkout-kicker {
    background: linear-gradient(110deg, #b45309 38%, #ffce7a 50%, #b45309 62%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kickerShine 4.5s linear infinite;
}
.section-heading-dark .section-kicker {
    background-image: linear-gradient(110deg, #f5a76e 38%, #ffe3b0 50%, #f5a76e 62%);
}
@keyframes kickerShine { to { background-position: -240% 0; } }

/* ── Скролл-ревил по словам (spans .rw вешает JS) ──────────────── */
@supports (animation-timeline: view()) {
    .section-heading p .rw {
        opacity: .16;
        animation: rwIn linear both;
        animation-timeline: view();
        animation-range: entry 40% cover 42%;
    }
    @keyframes rwIn { to { opacity: 1; } }
}

/* ── Spotlight-карточки (Linear/Aceternity): свечение под курсором ── */
.spot-card { position: relative; }
.spot-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%),
        rgba(226, 116, 45, .15), transparent 62%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.spot-card:hover::after { opacity: 1; }

/* ── Border beam: луч бежит по рамке популярного тарифа ────────── */
@property --beamAngle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.price-card.popular::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    padding: 2px;
    background: conic-gradient(from var(--beamAngle),
        transparent 0deg 286deg,
        rgba(245, 166, 35, .55) 320deg,
        #e2742d 342deg,
        rgba(245, 166, 35, .55) 352deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: beamRun 3.8s linear infinite;
    opacity: 1;
    transition: none;
    pointer-events: none;
}
@keyframes beamRun { to { --beamAngle: 360deg; } }

/* ── Топ недели: интервалы и читаемость ────────────────────────── */
/* «Неделя 2026-14» слипалась с датами периода */
.rh-header { gap: 14px; }
.rh-header .rh-week-label { flex-shrink: 0; margin-right: 8px; }
.rh-header > span:last-child { text-align: right; }

/* Бейджи наград: серебро/бронза были блёклыми на светлых карточках */
.reward-badge.rw-2 { color: #64748b; border-color: rgba(100, 116, 139, .45); background: rgba(148, 163, 184, .18); }
.reward-badge.rw-3 { color: #9a5b21; border-color: rgba(154, 91, 33, .4); background: rgba(205, 127, 50, .16); }

/* Подиум: чуть больше воздуха и глубины */
.podium-item { box-shadow: 0 12px 32px rgba(53, 44, 31, .08); }
.p-name { font-size: 1.02rem; }
.p-score { color: #b45309; }
.lb-points { color: #b45309; }

/* ── ТГ-иконка в шапке: тёплый чип вместо чёрной пилюли ────────── */
.header .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.05rem;
    color: #b45309;
    background: rgba(226, 116, 45, .10);
    border: 1px solid rgba(226, 116, 45, .25);
    box-shadow: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.header .contact-icon i { color: inherit; }
.header .contact-icon:hover {
    color: #fff;
    background: #e2742d;
    border-color: #e2742d;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(226, 116, 45, .3);
}
.header .contact-icon:hover i { color: #fff; }

/* ── Доступность: всё выключается одним махом ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    #particle-canvas, #fx-sharp { display: none !important; }
    .header,
    .hero h1 em,
    .hero-actions .btn-accent::before,
    .hero-actions .btn-accent::after,
    .hero h1 .w,
    .tg-float,
    .trust-number,
    .stat-num,
    .sunbeam,
    .marquee-track,
    .hero-float-card,
    .section-kicker,
    .hero-eyebrow,
    .checkout-kicker,
    .price-card.popular::before,
    .price-card.popular::after { animation: none !important; }
    .section-heading p .rw { animation: none !important; opacity: 1 !important; }
    .hero h1 em { background-size: 100% .09em; }
    .hero h1 .w { opacity: 1; transform: none; }
    .reveal,
    .reveal.reveal-left,
    .reveal.reveal-right,
    .reveal.reveal-zoom { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 768px) {
    /* На телефонах канвас и пульс не нужны: экономим батарею */
    #particle-canvas, #fx-sharp { display: none; }
    .hero-actions .btn-accent::before { animation: none; }
    .price-card.popular::after { animation: none; opacity: .55; }
}

/* ── MapKlad 2.0: статичный фон и финальный визуальный слой ────────
   Фон больше не перерисовывается в requestAnimationFrame: глубину дают
   несколько обычных градиентов, которые браузер растеризует один раз. */
:root {
    --accent-color: #c93640;
    --accent-hover: #a92933;
    --accent-text: #fffafa;
    --v2-orange: #c93640;
    --v2-orange-dark: #9f2730;
    --v2-canvas: #f2efeb;
    --paper: #faf8f4;
    --ink: #242327;
    --line: rgba(36, 35, 39, .13);
    --border-color: rgba(36, 35, 39, .13);
}

body {
    color: #242327;
    background: #f2efeb;
}

.ambient-scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background:
        radial-gradient(ellipse 54rem 38rem at 4% 8%, rgba(201, 54, 64, .17), transparent 68%),
        radial-gradient(ellipse 48rem 34rem at 96% 18%, rgba(81, 86, 97, .12), transparent 72%),
        radial-gradient(ellipse 45rem 34rem at 72% 82%, rgba(166, 119, 99, .10), transparent 70%),
        linear-gradient(145deg, #f6f3ef 0%, #efebe7 52%, #f7f4f1 100%);
}

.ambient-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image:
        linear-gradient(rgba(36, 35, 39, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 35, 39, .035) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 58% 26%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 58% 26%, #000 0%, transparent 72%);
}

.ambient-scene::after,
.ambient-orb,
.sunbeam,
#particle-canvas,
#fx-sharp,
body.bg-demo #particle-canvas {
    display: none !important;
    content: none !important;
}

/* Длинные секции ниже первого экрана не участвуют в раскладке и отрисовке,
   пока пользователь к ним не приблизился. */
main > .section,
main > .trust-section,
.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
}

.header {
    background: rgba(250, 248, 244, .96);
    border-color: rgba(36, 35, 39, .12);
    box-shadow: 0 14px 42px rgba(55, 45, 46, .10);
}

.header.is-scrolled {
    background: rgba(250, 248, 244, .98);
    border-color: rgba(201, 54, 64, .16);
    box-shadow: 0 16px 44px rgba(55, 45, 46, .14);
}

.logo i,
.hero-proof i,
.hero-eyebrow,
.section-kicker,
.marquee-track i {
    color: var(--accent-color) !important;
}

.hero {
    isolation: isolate;
}

.hero h1 {
    max-width: 10.5ch;
    color: #242327;
    letter-spacing: -.055em;
    text-shadow: none;
}

.hero h1 em {
    color: var(--accent-color);
}

.hero-text > p {
    max-width: 35rem;
    color: #62606a !important;
}

.hero-stats {
    padding: 1.05rem 1.25rem;
    border-color: rgba(36, 35, 39, .11);
    background: rgba(250, 248, 244, .58);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
}

.stat-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(36, 35, 39, .12);
}

.stat-num,
.trust-number {
    color: #ad2c35;
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none !important;
}

.stat-label,
.trust-label {
    color: #6b6870;
    letter-spacing: .075em;
}

.btn-accent,
#email-submit {
    color: #fff;
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 10px 24px rgba(169, 41, 51, .18);
}

.btn-accent:hover,
#email-submit:hover {
    color: #fff;
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 12px 28px rgba(169, 41, 51, .24);
}

.btn-secondary {
    color: #29282d;
    background: rgba(250, 248, 244, .42);
    border-color: rgba(36, 35, 39, .16);
}

.btn-secondary:hover {
    color: #242327;
    background: rgba(250, 248, 244, .88);
    border-color: rgba(201, 54, 64, .30);
}

.hero-img {
    will-change: auto;
    border-color: rgba(36, 35, 39, .18);
    box-shadow: 0 34px 72px rgba(49, 39, 42, .20), 0 8px 22px rgba(49, 39, 42, .10);
}

.f-icon,
.trust-icon {
    color: var(--accent-color);
    background: rgba(201, 54, 64, .09);
    border-color: rgba(201, 54, 64, .18);
    box-shadow: none;
}

.feature-card,
.review-card,
.reward-rule-card {
    border-color: rgba(36, 35, 39, .11);
    box-shadow: 0 14px 36px rgba(55, 45, 46, .055);
}

.feature-card:hover,
.review-card:hover,
.reward-rule-card:hover {
    border-color: rgba(201, 54, 64, .24);
    box-shadow: 0 18px 42px rgba(55, 45, 46, .085);
}

#scroll-progress {
    height: 2px;
    background: linear-gradient(90deg, #9f2730, #d94d56 62%, #9f2730);
}

::selection {
    color: #242327;
    background: rgba(201, 54, 64, .24);
}

:focus-visible {
    outline-color: var(--accent-color);
}

/* Оставляем одноразовые reveal-переходы и marquee. Постоянные декоративные
   анимации не должны держать отдельные композитные слои в простое. */
.hero-actions .btn-accent::before,
.hero-actions .btn-accent::after,
.tg-float,
.price-card.popular::before,
.price-card.popular::after,
.section-kicker,
.hero-eyebrow,
.checkout-kicker {
    animation: none !important;
}

.magnetic,
.tilt-card {
    translate: none !important;
    transform: none;
    will-change: auto;
}

.card-spot {
    display: none;
}

@media (max-width: 768px) {
    .container,
    .hero-container,
    .hero-text {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .hero-text > p {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 0;
        margin-inline: 0;
        padding: 1rem 0;
    }
    .hero-stats .stat-item {
        min-width: 0;
        padding-inline: 1rem;
    }
    .hero-stats .stat-divider {
        display: none;
    }
    .hero-stats .stat-item:last-child {
        border-left: 1px solid rgba(36, 35, 39, .12);
    }
    .hero-stats .stat-label {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .ambient-scene {
        background:
            radial-gradient(ellipse 32rem 26rem at 5% 8%, rgba(201, 54, 64, .14), transparent 68%),
            linear-gradient(150deg, #f6f3ef, #efebe7 60%, #f7f4f1);
    }
    .ambient-scene::before { opacity: .18; }
    main > .section,
    main > .trust-section,
    .footer { contain-intrinsic-size: auto 920px; }
}

/* ── Fluid data layout: динамические значения никогда не обрезаются ── */
.hero-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    width: min(100%, 36rem);
    gap: 0;
}

.hero-stats .stat-item,
.trust-item,
.drop-stat-item,
.podium-item,
.lb-row,
.rh-winner {
    min-width: 0;
}

.hero-stats .stat-item {
    padding-inline: 1.15rem;
}

.stat-num,
.drop-stat-value,
.trust-number,
.lb-points,
.p-score {
    max-width: 100%;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.stat-num {
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.05;
}

.stat-label,
.trust-label,
.drop-stat-title {
    max-width: none;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.trust-number {
    font-size: clamp(2.65rem, 6vw, 5.25rem);
    line-height: .95;
}

.drop-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.drop-stat-title {
    min-height: 0;
}

.p-name,
.lb-user,
.rh-name,
.rh-header,
.rh-raffle > span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.p-name {
    display: flex;
    min-height: 2.5em;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
    text-wrap: balance;
}

.lb-row {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
}

.lb-points {
    justify-self: end;
    text-align: right;
}

.rh-header {
    flex-wrap: wrap;
    gap: .35rem 1rem;
}

.rh-header > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.rh-name {
    min-width: 0;
}

.rh-raffle {
    align-items: flex-start;
}

@media (max-width: 560px) {
    .hero-stats {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .hero-stats .stat-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .75rem;
        padding: .95rem 1rem;
    }

    .hero-stats .stat-num {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .hero-stats .stat-label {
        grid-column: 1;
        grid-row: 1;
    }

    .hero-stats .stat-divider {
        display: block;
        width: auto;
        height: 1px;
        margin-inline: 1rem;
    }

    .hero-stats .stat-item:last-child {
        border-left: 0;
    }

    .trust-item {
        min-height: 0;
        padding: 1.6rem 1rem;
    }

    .trust-number {
        font-size: clamp(2.35rem, 15vw, 4rem);
    }

    .podium-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
    }

    .podium-item,
    .podium-item.p-first {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: .3rem .75rem;
        padding: 1rem !important;
        text-align: left;
        overflow: visible;
    }

    .podium-item.p-first { order: 1; }
    .podium-item.p-second { order: 2; }
    .podium-item.p-third { order: 3; }

    .podium-item .p-medal {
        position: static;
        grid-column: 1;
        grid-row: 1 / 4;
        width: 2.75rem;
        height: 2.75rem;
        transform: none;
    }

    .podium-item .p-name {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        margin: 0;
        justify-content: flex-start;
        text-align: left;
    }

    .podium-item .p-score {
        display: block;
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        text-align: left;
        font-size: clamp(1rem, 5vw, 1.35rem);
    }

    .podium-item .p-badges {
        grid-column: 2;
        grid-row: 3;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0;
    }

    .lb-row {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: .35rem .7rem;
        padding: .85rem 1rem;
    }

    .lb-rank {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .lb-user {
        grid-column: 2;
        grid-row: 1;
    }

    .lb-points {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        text-align: left;
    }

    .rh-winner {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        gap: .45rem .65rem;
        align-items: center;
        padding: .8rem 1rem;
    }

    .rh-place {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .rh-name {
        grid-column: 2 / 4;
        grid-row: 1;
    }

    .rh-trophy-col {
        grid-column: 2;
        grid-row: 2;
    }

    .rh-reward {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .rh-raffle {
        padding-inline: 1rem;
    }

    .rh-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
}

/* ── Static cartography: выразительный фон без покадровой отрисовки ── */
.ambient-scene {
    background:
        radial-gradient(ellipse 52rem 38rem at -4% 4%, rgba(201, 54, 64, .19), transparent 66%),
        radial-gradient(ellipse 38rem 30rem at 92% 8%, rgba(201, 54, 64, .11), transparent 68%),
        radial-gradient(ellipse 48rem 36rem at 98% 54%, rgba(67, 72, 82, .13), transparent 72%),
        radial-gradient(ellipse 44rem 32rem at 28% 92%, rgba(166, 119, 99, .10), transparent 72%),
        linear-gradient(145deg, #f7f4f0 0%, #eeeae6 50%, #f8f5f2 100%);
}

.ambient-scene::before {
    opacity: .48;
    background-image:
        radial-gradient(circle, rgba(36, 35, 39, .12) .7px, transparent .8px),
        linear-gradient(rgba(36, 35, 39, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 35, 39, .035) 1px, transparent 1px);
    background-size: 14px 14px, 56px 56px, 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 58% at 68% 20%, #000 0%, transparent 76%);
    mask-image: radial-gradient(ellipse 70% 58% at 68% 20%, #000 0%, transparent 76%);
}

.ambient-scene::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    opacity: .72;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 760'%3E%3Cg fill='none' stroke='%239f2730' stroke-opacity='.24' stroke-width='1.25'%3E%3Cpath d='M1015 62C851 4 675 35 597 122c-79 88-42 191 80 236 120 44 278 7 329-84 40-71-14-144-111-169-99-26-213 8-244 72-28 57 23 110 101 121 75 10 152-25 164-75 10-42-32-75-87-75-53 0-99 29-99 65 0 30 35 50 73 43 34-6 55-28 48-47'/%3E%3Cpath d='M925 390c-128-42-282-13-343 71-57 79-8 164 104 188 108 23 232-20 255-91 20-61-43-117-130-118-82-1-157 45-149 99 7 47 74 76 135 57 54-17 78-60 49-91-25-28-79-32-111-8'/%3E%3Cpath d='M503 63c-90 9-157 65-147 126 11 65 105 101 193 70 79-28 110-91 62-134-43-39-123-43-173-10-45 30-43 74 4 95'/%3E%3C/g%3E%3Cg fill='none' stroke='%23242327' stroke-opacity='.13' stroke-width='.9'%3E%3Cpath d='M-24 588c117-80 285-83 374-14 94 72 61 177-66 217'/%3E%3Cpath d='M20 624c92-57 217-52 276 6 57 56 22 127-69 149'/%3E%3Cpath d='M78 653c58-28 128-18 151 21 22 36-16 73-72 73'/%3E%3Cpath stroke-dasharray='5 10' d='M94 190C278 249 420 350 550 516c73 94 167 145 286 163'/%3E%3C/g%3E%3Cg fill='%23c93640'%3E%3Ccircle cx='648' cy='180' r='4'/%3E%3Ccircle cx='552' cy='517' r='4'/%3E%3Ccircle cx='836' cy='679' r='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c93640' stroke-opacity='.58' stroke-width='1'%3E%3Cpath d='M632 180h32M648 164v32M536 517h32M552 501v32'/%3E%3C/g%3E%3Cg fill='%23242327' fill-opacity='.34' font-family='monospace' font-size='11' letter-spacing='2'%3E%3Ctext x='679' y='171'%3EMAPKLAD / 07%3C/text%3E%3Ctext x='570' y='508'%3ESECTOR 54.20%3C/text%3E%3Ctext x='704' y='706'%3E56.838 · 60.605%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right -2rem top 1rem;
    background-size: min(76vw, 68rem) auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 98%);
}

@media (max-width: 768px) {
    .ambient-scene::after {
        opacity: .48;
        background-position: 42% 2rem;
        background-size: 48rem auto;
    }
    .ambient-scene::before { opacity: .30; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-scene,
    .ambient-scene::before,
    .ambient-scene::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Atlas artwork: объёмная статичная композиция вместо тонких контуров ── */
.ambient-scene {
    background:
        radial-gradient(ellipse 44rem 36rem at -4% 3%, rgba(201, 54, 64, .24), transparent 66%),
        radial-gradient(ellipse 50rem 38rem at 98% 14%, rgba(201, 54, 64, .17), transparent 70%),
        radial-gradient(ellipse 52rem 40rem at 88% 76%, rgba(49, 49, 55, .15), transparent 72%),
        linear-gradient(145deg, #f8f5f1 0%, #ede8e5 51%, #f8f5f2 100%);
}

.ambient-scene::before {
    opacity: .36;
}

.ambient-scene::after {
    opacity: .96;
    background-position: center top;
    background-size: cover;
    -webkit-mask-image: none;
    mask-image: none;
}

@media (max-width: 768px) {
    .ambient-scene::after {
        opacity: .58;
        background-position: 66% top;
        background-size: auto 100%;
    }
}

/* ── Kinetic light sculpture: живой фон без тяжёлой полноэкранной графики ── */
.ambient-scene {
    z-index: -3;
    isolation: isolate;
    background:
        radial-gradient(ellipse 42rem 34rem at 8% 4%, rgba(201, 54, 64, .22), transparent 68%),
        radial-gradient(ellipse 48rem 38rem at 96% 8%, rgba(63, 165, 184, .17), transparent 70%),
        radial-gradient(ellipse 56rem 42rem at 76% 92%, rgba(111, 78, 158, .14), transparent 72%),
        linear-gradient(142deg, #fbf8f4 0%, #eee8e8 48%, #f8f3ee 100%);
}

.ambient-scene::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image:
        radial-gradient(circle, rgba(42, 35, 39, .15) .7px, transparent .85px),
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .74) 48%, transparent 58%);
    background-size: 18px 18px, 100% 100%;
    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 68% 22%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 78% 68% at 68% 22%, #000 0%, transparent 78%);
}

.ambient-scene::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    width: 92vmax;
    height: 92vmax;
    top: -53vmax;
    right: -39vmax;
    border-radius: 50%;
    opacity: .52;
    background: conic-gradient(
        from 22deg,
        transparent 0deg 28deg,
        rgba(201, 54, 64, .38) 52deg,
        transparent 86deg 132deg,
        rgba(67, 174, 190, .27) 158deg,
        transparent 194deg 264deg,
        rgba(115, 74, 160, .22) 292deg,
        transparent 332deg 360deg
    );
    animation: mkPrismOrbit 28s linear infinite;
    -webkit-mask-image: radial-gradient(circle, transparent 0 34%, #000 48%, transparent 72%);
    mask-image: radial-gradient(circle, transparent 0 34%, #000 48%, transparent 72%);
}

.sunbeam {
    content: normal !important;
    display: block !important;
    position: absolute;
    width: 132vmax;
    height: 25vmax;
    left: -31vmax;
    top: 38%;
    border-radius: 50%;
    opacity: .54;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, .56) 18%,
        rgba(214, 49, 63, .27) 43%,
        rgba(96, 69, 150, .16) 56%,
        rgba(66, 173, 189, .18) 72%,
        transparent 100%
    );
    transform: translate3d(-7%, 0, 0) rotate(-17deg);
    animation: mkSilkSweep 16s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}

.ambient-orb {
    content: normal !important;
    display: block !important;
    position: absolute;
    border-radius: 43% 57% 61% 39% / 58% 39% 61% 42%;
    opacity: .72;
    filter: none;
    mix-blend-mode: multiply;
}

.ambient-orb::before,
.ambient-orb::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
}

.ambient-orb::before {
    inset: 7%;
    border: 1px solid rgba(255, 255, 255, .46);
    background:
        radial-gradient(circle at 31% 24%, rgba(255, 255, 255, .82) 0 1.2%, transparent 7%),
        linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 42% 66%, rgba(255, 255, 255, .10));
    box-shadow: inset 0 0 0 1px rgba(49, 35, 48, .035);
}

.ambient-orb::after {
    width: 24%;
    height: 8%;
    top: 15%;
    left: 23%;
    opacity: .72;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .88), transparent 72%);
    transform: rotate(-31deg);
}

.ambient-orb-a {
    width: min(48rem, 58vw);
    height: min(48rem, 58vw);
    top: -16rem;
    right: -9rem;
    left: auto;
    background: radial-gradient(circle at 36% 38%, rgba(255, 221, 202, .88), rgba(235, 77, 72, .30) 34%, rgba(158, 27, 47, .09) 62%, transparent 72%);
    animation: mkOrbA 18s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}

.ambient-orb-b {
    width: min(39rem, 50vw);
    height: min(39rem, 50vw);
    top: 52%;
    right: 8%;
    left: auto;
    background: radial-gradient(circle at 45% 38%, rgba(157, 227, 229, .50), rgba(55, 157, 177, .20) 42%, rgba(46, 68, 90, .08) 66%, transparent 74%);
    border: 1px solid rgba(72, 161, 178, .15);
    box-shadow: inset 2rem 1.5rem 5rem rgba(255, 255, 255, .14), 0 3rem 8rem rgba(63, 118, 139, .08);
    animation: mkOrbB 22s cubic-bezier(.45, .05, .55, .95) -7s infinite alternate;
}

.ambient-orb-c {
    width: min(31rem, 44vw);
    height: min(31rem, 44vw);
    top: 14%;
    left: -12rem;
    background: radial-gradient(circle at 58% 42%, rgba(171, 129, 222, .25), rgba(92, 60, 135, .10) 55%, transparent 72%);
    border: 1px solid rgba(116, 80, 160, .10);
    animation: mkOrbC 20s cubic-bezier(.45, .05, .55, .95) -11s infinite alternate;
}

#particle-canvas {
    display: block !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: .82;
    pointer-events: none;
    mix-blend-mode: multiply;
}

#fx-sharp {
    display: none !important;
}

.background-paused .ambient-scene::after,
.background-paused .sunbeam,
.background-paused .ambient-orb {
    animation-play-state: paused !important;
}

@keyframes mkPrismOrbit {
    from { transform: rotate(0deg) scale(.94); }
    50% { opacity: .68; }
    to { transform: rotate(360deg) scale(1.06); }
}

@keyframes mkSilkSweep {
    from { transform: translate3d(-7%, -5%, 0) rotate(-17deg) scaleY(.84); opacity: .34; }
    52% { opacity: .63; }
    to { transform: translate3d(7%, 8%, 0) rotate(-11deg) scaleY(1.16); opacity: .46; }
}

@keyframes mkOrbA {
    from { transform: translate3d(-5%, -4%, 0) rotate(-9deg) scale(.92); }
    to { transform: translate3d(9%, 12%, 0) rotate(17deg) scale(1.13); }
}

@keyframes mkOrbB {
    from { transform: translate3d(8%, 7%, 0) rotate(10deg) scale(.88); }
    to { transform: translate3d(-12%, -10%, 0) rotate(-15deg) scale(1.16); }
}

@keyframes mkOrbC {
    from { transform: translate3d(-9%, 10%, 0) rotate(-13deg) scale(.9); }
    to { transform: translate3d(16%, -7%, 0) rotate(19deg) scale(1.12); }
}

@media (max-width: 768px) {
    .ambient-scene::after {
        width: 110vmax;
        height: 110vmax;
        top: -64vmax;
        right: -65vmax;
        opacity: .40;
    }
    .sunbeam {
        top: 32%;
        opacity: .38;
    }
    .ambient-orb-a { width: 34rem; height: 34rem; right: -20rem; }
    .ambient-orb-b { width: 30rem; height: 30rem; right: -16rem; }
    .ambient-orb-c { width: 24rem; height: 24rem; left: -16rem; }
    #particle-canvas { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-scene::after,
    .sunbeam,
    .ambient-orb {
        animation: none !important;
    }
    #particle-canvas { display: none !important; }
}

/* ── Aurora Lite: три готовых слоя, во время движения только transform ── */
.ambient-scene {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(54rem, 110dvh, 68rem);
    isolation: isolate;
    background:
        radial-gradient(ellipse 36rem 30rem at 4% 7%, rgba(204, 54, 65, .17), transparent 70%),
        radial-gradient(ellipse 44rem 34rem at 91% 12%, rgba(69, 151, 169, .14), transparent 72%),
        radial-gradient(ellipse 48rem 36rem at 72% 96%, rgba(126, 80, 153, .11), transparent 74%),
        linear-gradient(142deg, #fbf8f4 0%, #eee9ea 48%, #f8f4ef 100%);
}

.ambient-scene::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    opacity: .30;
    background-image:
        radial-gradient(circle, rgba(45, 38, 44, .16) .65px, transparent .8px),
        linear-gradient(118deg, transparent 0 42%, rgba(255, 255, 255, .68) 50%, transparent 58%);
    background-size: 20px 20px, 100% 100%;
    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 68% 18%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 78% 68% at 68% 18%, #000 0%, transparent 78%);
}

.ambient-scene::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    width: min(56rem, 72vw);
    height: min(56rem, 72vw);
    top: -22rem;
    right: -15rem;
    border-radius: 50%;
    opacity: .52;
    background: conic-gradient(
        from 18deg,
        transparent 0deg 34deg,
        rgba(201, 54, 64, .66) 58deg,
        rgba(255, 151, 105, .30) 79deg,
        transparent 106deg 178deg,
        rgba(70, 166, 183, .44) 205deg,
        transparent 238deg 294deg,
        rgba(119, 77, 157, .36) 322deg,
        transparent 348deg 360deg
    );
    -webkit-mask-image: radial-gradient(circle, transparent 0 43%, #000 44% 58%, transparent 60%);
    mask-image: radial-gradient(circle, transparent 0 43%, #000 44% 58%, transparent 60%);
    animation: none;
}

.sunbeam {
    display: block !important;
    position: absolute;
    width: min(78rem, 96vw);
    height: min(18rem, 24vw);
    left: 22%;
    top: 44%;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 52% 48% 58% 42% / 55% 46% 54% 45%;
    opacity: .47;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .48), transparent 24% 76%, rgba(255, 255, 255, .20)),
        linear-gradient(100deg, transparent 3%, rgba(203, 55, 67, .34) 32%, rgba(112, 77, 158, .22) 56%, rgba(64, 168, 185, .25) 78%, transparent 97%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .54);
    transform: translate3d(-5%, -4%, 0) rotate(-14deg) scaleY(.88);
    animation: mkLiteRibbon 1.45s cubic-bezier(.22, 1, .36, 1) .18s both;
}

.ambient-orb {
    display: block !important;
    position: absolute;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
}

.ambient-orb-a {
    width: min(29rem, 38vw);
    height: min(29rem, 38vw);
    top: 8%;
    right: 5%;
    left: auto;
    border: 1px solid rgba(201, 54, 64, .13);
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .86) 0 1%, transparent 8%),
        radial-gradient(circle at 40% 38%, rgba(255, 184, 159, .31), rgba(201, 54, 64, .11) 48%, transparent 72%);
    box-shadow: inset 1.4rem 1rem 4rem rgba(255, 255, 255, .18), 0 2rem 6rem rgba(126, 45, 61, .06);
    animation: none;
}

.ambient-orb-b {
    width: min(24rem, 31vw);
    height: min(24rem, 31vw);
    top: 65%;
    right: 7%;
    left: auto;
    border: 1px solid rgba(69, 151, 169, .12);
    background:
        radial-gradient(circle at 35% 29%, rgba(255, 255, 255, .76) 0 1.2%, transparent 9%),
        radial-gradient(circle at 46% 42%, rgba(150, 223, 225, .29), rgba(67, 146, 169, .10) 52%, transparent 73%);
    box-shadow: inset 1.2rem 1rem 3.4rem rgba(255, 255, 255, .16), 0 2rem 6rem rgba(55, 111, 135, .05);
    animation: none;
}

.ambient-orb-c {
    width: min(17rem, 23vw);
    height: min(17rem, 23vw);
    top: 27%;
    left: -7rem;
    border: 1px solid rgba(119, 77, 157, .09);
    background: radial-gradient(circle at 58% 42%, rgba(176, 139, 211, .19), rgba(104, 70, 140, .07) 54%, transparent 73%);
    box-shadow: none;
    animation: none;
}

.ambient-orb::before {
    inset: 8%;
    border-color: rgba(255, 255, 255, .34);
    background: linear-gradient(135deg, rgba(255, 255, 255, .11), transparent 42% 70%, rgba(255, 255, 255, .06));
    box-shadow: inset 0 0 0 1px rgba(49, 35, 48, .025);
}

.ambient-orb::after {
    opacity: .48;
}

.ambient-orb-a,
.ambient-orb-b {
    transform-origin: center;
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.water-glint,
.water-ripple {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.water-glint {
    width: 31%;
    height: 24%;
    top: 18%;
    left: 20%;
    opacity: .72;
    background:
        radial-gradient(ellipse at 38% 42%, rgba(255, 255, 255, .92) 0 5%, rgba(255, 255, 255, .38) 20%, transparent 67%);
    transform-origin: center;
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.water-ripple {
    inset: 17%;
    opacity: 0;
    border: 1px solid rgba(255, 255, 255, .68);
    box-shadow: inset 0 0 0 1px rgba(70, 143, 160, .08);
}

.ambient-orb.water-tracking,
.ambient-orb.water-tracking .water-glint {
    transition: none;
    will-change: transform;
}

#particle-canvas,
#fx-sharp,
body.bg-demo #particle-canvas {
    display: none !important;
}

@keyframes mkLiteOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes mkLiteRibbon {
    from { transform: translate3d(-7%, -7%, 0) rotate(-15deg) scaleY(.82); opacity: .10; }
    68% { opacity: .54; }
    to { transform: translate3d(5%, 6%, 0) rotate(-10deg) scaleY(1.08); opacity: .47; }
}

@keyframes mkLiteFloatA {
    from { transform: translate3d(-3%, -4%, 0) rotate(-7deg) scale(.96); }
    to { transform: translate3d(7%, 8%, 0) rotate(11deg) scale(1.06); }
}

@keyframes mkLiteFloatB {
    from { transform: translate3d(6%, 5%, 0) rotate(7deg) scale(.95); }
    to { transform: translate3d(-8%, -7%, 0) rotate(-10deg) scale(1.07); }
}

@media (max-width: 768px), (update: slow) {
    .ambient-scene::after,
    .sunbeam,
    .ambient-orb {
        animation: none !important;
    }
    .ambient-scene::after {
        width: 42rem;
        height: 42rem;
        top: -26rem;
        right: -29rem;
        opacity: .34;
    }
    .sunbeam {
        width: 54rem;
        height: 12rem;
        left: -4rem;
        top: 34%;
        opacity: .30;
    }
    .ambient-orb-a { width: 25rem; height: 25rem; right: -15rem; }
    .ambient-orb-b { width: 20rem; height: 20rem; right: -13rem; }
    .ambient-orb-c { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-scene::after,
    .sunbeam,
    .ambient-orb {
        animation: none !important;
    }
}

/* Реальные размеры секций считаются до прокрутки: без скачков intrinsic placeholders. */
main > .section,
main > .trust-section,
.footer {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
}