/* ========================================================================
 * sections_polish.css — v1.0 SECTIONS POLISH (probiwaem.ru)
 *
 * Premium micro-interactions для всех контентных секций (НЕ hero):
 *   #stats   — alive numbers + per-cell glow + icon bounce
 *   #recent  — card hover lift + cursor ripple
 *   #example — pulse indicator + cinematic CTA
 *   #how     — scene transitions polish (cubic-bezier), scroll indicator
 *   #findings — bar stagger-bounce, heatmap diagonal wave, carousel tilt
 *   #what    — icon breath + 360° on enter + title gradient sweep
 *   #pro     — same as #what + flip pricing arrows
 *   #faq     — accordion right-shift, smooth height, plus → 90deg rotate
 *
 * Архитектура:
 *   - Полностью изолирован от hero (`.hero_*`), motion.js, interaction_polish.*
 *   - Все анимации gated на `prefers-reduced-motion`
 *   - GPU-friendly: только `transform`, `opacity`, `filter`
 *   - Theme-friendly: используем CSS-vars (--accent, --accent-3, --bad ...)
 *
 * Загрузка: <link rel="stylesheet" href="/static/sections_polish.css">
 * после style.css + how_section.css + findings_section.css.
 * ====================================================================== */

/* ============================================================
   0. SECTION RHYTHM — единая шкала --section-y по breakpoints
   ============================================================ */
:root {
    /* По умолчанию — desktop. Переопределяется media-queries ниже.
       Используем где явно нужна единая высота padding'а. Базовое правило
       .section { padding: 96px 0 } в style.css трогаем минимально. */
    --section-y: 80px;
    --section-y-wide: 64px;
}
@media (max-width: 900px) {
    :root { --section-y: 72px; }
}
@media (max-width: 720px) {
    :root { --section-y: 56px; }
}
@media (min-width: 1440px) {
    :root { --section-y: 80px; --section-y-wide: 80px; }
}
@media (min-width: 1720px) {
    :root { --section-y-wide: 96px; }
}

/* ============================================================
   1. SECTION SEAM — gradient line + mint dot между секциями
   ============================================================
   Использует ::before на .pb-reveal sections (всё кроме первой —
   первая отделена hero). Тонкая, не отвлекает.
*/
.section-stats,
#example.section,
#how.section,
#findings.section,
#what.section,
#pro.section,
.section-showcase,
.section-faq {
    position: relative;
}
.section-stats::before,
#example.section::before,
#how.section::before,
#findings.section::before,
#what.section::before,
#pro.section::before,
.section-showcase::before,
.section-faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(85%, 1100px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(76, 226, 193, 0.08) 25%,
        rgba(var(--accent-rgb), 0.18) 50%,
        rgba(76, 226, 193, 0.08) 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}
/* Mint dot at the seam center — accent point. */
.section-stats::after,
#example.section::after,
#how.section::after,
#findings.section::after,
#what.section::after,
#pro.section::after,
.section-showcase::after,
.section-faq::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-3, #4ce2c1);
    box-shadow: 0 0 12px rgba(76, 226, 193, 0.55),
                0 0 24px rgba(76, 226, 193, 0.18);
    pointer-events: none;
    z-index: 2;
    opacity: 0.75;
}
/* Disable on stats — стат-блок сразу после hero, дополнительный разделитель шумит */
.section-stats::before,
.section-stats::after { display: none; }

@media (max-width: 720px) {
    /* На мобиле seam dot становится крупнее (читаемее) но фейдится */
    .section-stats::after,
    #example.section::after,
    #how.section::after,
    #findings.section::after,
    #what.section::after,
    #pro.section::after,
    .section-showcase::after,
    .section-faq::after {
        top: -3px;
        width: 6px;
        height: 6px;
    }
}

/* ============================================================
   2. SECTION ENTER ANIMATION — slight scale-in + opacity
   ============================================================
   Дополняет существующий .pb-reveal (translateY → opacity).
   Добавляем тонкий scale 0.96 → 1.0 для премиум-чувства.
*/
.pb-reveal.section-stats,
#example.pb-reveal,
#findings.pb-reveal,
#what.pb-reveal,
#pro.pb-reveal,
.section-faq.pb-reveal {
    transform-origin: center top;
}
.pb-reveal.section-stats:not(.is-revealed),
#example.pb-reveal:not(.is-revealed),
#findings.pb-reveal:not(.is-revealed),
#what.pb-reveal:not(.is-revealed),
#pro.pb-reveal:not(.is-revealed),
.section-faq.pb-reveal:not(.is-revealed) {
    transform: translateY(20px) scale(0.985);
}

/* ============================================================
   3. SHARED CARD HOVER — все .fx-card / .feat-card / .lr-card
   ============================================================
   Lift + inner glow + animated gradient border on hover.
   Click ripple (CSS-only) origin from cursor — задаётся через
   custom props в sections_polish.js.
*/
.fx-card,
.feat-card,
.lr-card {
    transition:
        transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.3s ease;
}

/* Inner radial glow — позиционируется по cursor (--mx/--my, JS). */
.feat-card,
.fx-card {
    position: relative;
    isolation: isolate;
}
.feat-card::after,
.fx-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        300px circle at var(--mx, 50%) var(--my, 50%),
        rgba(76, 226, 193, 0.10),
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}
.feat-card:hover::after,
.fx-card:hover::after { opacity: 1; }
/* Контент должен оставаться выше radial-glow */
.feat-card > *,
.fx-card > * { position: relative; z-index: 1; }

.feat-card:hover,
.fx-card:hover,
.lr-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 48px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(76, 226, 193, 0.10),
        0 0 24px -4px rgba(76, 226, 193, 0.18);
}

/* Animated gradient border ring on hover — only while hovered */
.feat-card,
.fx-card {
    background-clip: padding-box;
}
.feat-card::before,
.fx-card::before {
    /* Note: .fx-card::before уже определён в findings_section.css
       (статичный градиент-бордер). НЕ переопределяем там — добавляем
       только rotating outer ring через outline trick.
       Чтобы не конфликтовать, делаем дополнительный wrapper-effect
       через box-shadow в pseudo-state .is-hovered (JS-добавляемый). */
}
.feat-card.is-hovered,
.fx-card.is-hovered {
    animation: pbCardRing 4s linear infinite;
}
@keyframes pbCardRing {
    0%   { box-shadow:
            0 18px 48px -16px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(76, 226, 193, 0.25),
            0 0 22px -2px rgba(76, 226, 193, 0.18); }
    33%  { box-shadow:
            0 18px 48px -16px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(var(--accent-rgb), 0.30),
            0 0 22px -2px rgba(var(--accent-rgb), 0.20); }
    66%  { box-shadow:
            0 18px 48px -16px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(var(--accent-2-rgb), 0.25),
            0 0 22px -2px rgba(var(--accent-2-rgb), 0.18); }
    100% { box-shadow:
            0 18px 48px -16px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(76, 226, 193, 0.25),
            0 0 22px -2px rgba(76, 226, 193, 0.18); }
}

/* Inner element stagger-shift on hover */
.feat-card:hover .feat-icon { transform: translateY(-2px); }
.feat-icon {
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.4s ease;
}
.feat-card:hover .feat-icon {
    filter: drop-shadow(0 4px 12px rgba(76, 226, 193, 0.45));
}

/* Title gradient sweep on hover */
.feat-title {
    background-image: linear-gradient(
        90deg,
        var(--text) 0%,
        var(--text) 40%,
        var(--accent-3, #4ce2c1) 50%,
        var(--accent, #ffc94a) 60%,
        var(--text) 70%,
        var(--text) 100%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feat-card:hover .feat-title { background-position: 0 0; }
/* Fallback для браузеров без background-clip:text — оставляем normal color */
@supports not (background-clip: text) {
    .feat-title {
        background-image: none;
        color: var(--text);
        -webkit-text-fill-color: initial;
    }
}

/* Subtle text shimmer на feat-desc — слабая opacity wave */
.feat-card .feat-desc {
    background-image: linear-gradient(
        90deg,
        var(--muted) 0%,
        var(--muted) 45%,
        rgba(255, 255, 255, 0.85) 50%,
        var(--muted) 55%,
        var(--muted) 100%
    );
    background-size: 250% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: pbDescShimmer 9s linear infinite;
    animation-play-state: paused;
}
.feat-card.is-on .feat-desc { animation-play-state: running; }
@supports not (background-clip: text) {
    .feat-card .feat-desc {
        background-image: none;
        color: var(--muted);
        -webkit-text-fill-color: initial;
        animation: none;
    }
}
@keyframes pbDescShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

/* Click ripple (CSS-only) — JS добавляет .is-rippling + sets --rx/--ry */
.feat-card::before,
.fx-card::before {
    /* существующий ::before в findings_section.css — не трогаем; */
}
.feat-card .pb-ripple,
.fx-card .pb-ripple,
.lr-card .pb-ripple {
    position: absolute;
    pointer-events: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 226, 193, 0.55) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    animation: pbRipple 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    z-index: 5;
    will-change: transform, opacity;
}
@keyframes pbRipple {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}

/* Icon continuous breath — каждой carde свой phase */
.feat-card .feat-icon {
    animation: pbIconBreath 4.6s ease-in-out infinite;
    animation-delay: var(--breath-delay, 0s);
}
.feat-grid > .feat-card:nth-child(1) .feat-icon { --breath-delay: 0s; }
.feat-grid > .feat-card:nth-child(2) .feat-icon { --breath-delay: 1.1s; }
.feat-grid > .feat-card:nth-child(3) .feat-icon { --breath-delay: 2.2s; }
.feat-grid > .feat-card:nth-child(4) .feat-icon { --breath-delay: 0.55s; }
.feat-grid > .feat-card:nth-child(5) .feat-icon { --breath-delay: 1.65s; }
.feat-grid > .feat-card:nth-child(6) .feat-icon { --breath-delay: 2.75s; }
@keyframes pbIconBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
/* На hover суммируем translateY (приоритет hover-effect) */
.feat-card:hover .feat-icon {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.06);
}

/* Icon rotate 360° on first reveal (когда .is-on добавляется) */
.feat-card.is-on .feat-icon {
    animation: pbIconBreath 4.6s ease-in-out infinite,
               pbIconReveal 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-delay: var(--breath-delay, 0s), 0s;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, forwards;
}
@keyframes pbIconReveal {
    0%   { transform: rotate(0deg) scale(0.85); opacity: 0.3; }
    60%  { transform: rotate(220deg) scale(1.08); opacity: 1; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

/* ============================================================
   4. #stats — alive numbers, per-cell glow, icon row
   ============================================================ */
.stats-band .stat-cell {
    cursor: default;
    transition:
        transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.35s ease,
        filter 0.35s ease;
    isolation: isolate;
}
.stats-band .stat-cell::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: radial-gradient(
        ellipse 90% 70% at 50% 100%,
        var(--stat-glow, rgba(76, 226, 193, 0.10)),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
    animation: pbStatGlow 5.5s ease-in-out infinite;
    animation-delay: var(--stat-phase, 0s);
}
.stats-band .stat-cell:nth-child(1) {
    --stat-glow: rgba(76, 226, 193, 0.12);
    --stat-phase: 0s;
}
.stats-band .stat-cell:nth-child(2) {
    --stat-glow: rgba(var(--accent-2-rgb), 0.12);
    --stat-phase: 1.3s;
}
.stats-band .stat-cell:nth-child(3) {
    --stat-glow: rgba(var(--accent-rgb), 0.12);
    --stat-phase: 2.6s;
}
.stats-band .stat-cell:nth-child(4) {
    --stat-glow: rgba(var(--accent-4-rgb), 0.12);
    --stat-phase: 3.9s;
}
@keyframes pbStatGlow {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}
.stats-band .stat-cell > * { position: relative; z-index: 1; }

/* Hover any cell: that one scales + glow intensifies; neighbors dim */
.stats-band:hover .stat-cell { filter: brightness(0.65) saturate(0.7); }
.stats-band .stat-cell:hover {
    transform: scale(1.04);
    filter: brightness(1.05) saturate(1.05) !important;
    background-color: rgba(255, 255, 255, 0.02);
}
.stats-band .stat-cell:hover::before { opacity: 1.4; animation-play-state: paused; }
/* Не работает на сжатом 1-col mobile (нет смысла) */
@media (max-width: 720px) {
    .stats-band:hover .stat-cell { filter: none; }
    .stats-band .stat-cell:hover { transform: scale(1.02); }
}

/* Icon row above each stat number — рисуется через ::after на stat-num.
   На широких экранах. На mobile только цифра + лейбл, чтобы не загружать. */
.stat-cell .stat-num {
    position: relative;
    padding-top: 0;
}
.stat-cell .stat-num::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.55;
    transition: transform 0.3s ease, opacity 0.3s ease;
    animation: pbStatIconBounce 3.6s ease-in-out infinite;
    animation-delay: var(--stat-phase, 0s);
}
.stats-band .stat-cell:nth-child(1) .stat-num::before {
    /* briefcase / маркетплейс — представляет 4 источника */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ce2c1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='13' rx='2'/><path d='M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2'/></svg>");
}
.stats-band .stat-cell:nth-child(2) .stat-num::before {
    /* radar / 30 признаков */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5d8f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 12 L19 5'/><circle cx='12' cy='12' r='2'/></svg>");
}
.stats-band .stat-cell:nth-child(3) .stat-num::before {
    /* clock / 15 sec */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc94a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
.stats-band .stat-cell:nth-child(4) .stat-num::before {
    /* wallet / 0₽ */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8H5a2 2 0 010-4h14v4M21 8a2 2 0 012 2v8a2 2 0 01-2 2H3a2 2 0 01-2-2V6'/><circle cx='17' cy='14' r='1'/></svg>");
}
@keyframes pbStatIconBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.stats-band .stat-cell:hover .stat-num::before {
    opacity: 1;
    transform: translateY(-3px) scale(1.05);
}
@media (max-width: 720px) {
    /* На mobile иконки убираем — экономим высоту */
    .stat-cell .stat-num::before { display: none; }
}

/* ============================================================
   5. #example — live pulse indicator + verdict ring-pulse + arrow translate
   ============================================================ */
.lr-tag {
    position: relative;
}
/* Существующий .lr-tag::before делает мигающую точку. Усиливаем — pulse-ring. */
.lr-tag::before {
    position: relative;
    z-index: 2;
}
.lr-tag::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid rgba(76, 226, 193, 0.55);
    transform: translateY(-50%) scale(1);
    animation: pbLrPulseRing 1.8s ease-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes pbLrPulseRing {
    0%   { transform: translateY(-50%) scale(0.6); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(3.2); opacity: 0; }
}

/* Verdict block — soft ring around %-num */
.lr-verdict {
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.35s ease;
}
.lr-verdict::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-2-rgb), 0.25);
    transform: translate(-2px, -50%);
    animation: pbVerdictRing 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pbVerdictRing {
    0%, 100% { opacity: 0.4; transform: translate(-2px, -50%) scale(0.92); }
    50%      { opacity: 0.85; transform: translate(-2px, -50%) scale(1.05); }
}
@media (max-width: 560px) {
    .lr-verdict::after { display: none; }
}

/* CTA: arrow translates right; button glows */
.lr-cta-primary {
    transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.22s ease,
        box-shadow 0.35s ease;
}
.lr-cta-primary svg {
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lr-cta-primary:hover svg {
    transform: translateX(8px);
}
.lr-cta-primary:hover {
    box-shadow:
        0 0 0 4px rgba(var(--accent-rgb), 0.18),
        0 14px 32px -10px rgba(var(--accent-rgb), 0.7);
}

/* lr-card hover lift */
.lr-card {
    transition:
        transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.4s ease;
}
.lr-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 28px 64px -22px rgba(0, 0, 0, 0.6),
        0 0 24px -6px rgba(76, 226, 193, 0.15);
}

/* ============================================================
   6. #how — scene crossfade smoother + scroll indicator
   ============================================================
   how_section.css имеет .hxw-scene transition 0.42-0.55s. Хотим
   500ms cubic-bezier(0.2, 0.8, 0.2, 1). Override.
*/
.hxw-scene {
    transition:
        opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Scene 1 caret — мигает всегда (даже между URL rotations) */
.hxw-s1-caret {
    animation: hxwBlinkSteady 1s steps(2, end) infinite !important;
}
@keyframes hxwBlinkSteady {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
/* После typing — caret продолжает мигать на конце текста (visibility всегда) */
.hxw-s1-input .hxw-s1-caret { opacity: 1; }
.hxw-s1-input:not(.is-typing) .hxw-s1-caret {
    animation: hxwBlinkSteady 0.9s steps(2, end) infinite !important;
}

/* Scene 2 labels — fade in as bar reaches its value */
.hxw-s2-bar-row .hxw-s2-bar-val {
    transition: opacity 0.3s ease 0.3s, color 0.25s ease !important;
}
.hxw-s2-bar-row:not(.is-scanning) .hxw-s2-bar-val { opacity: 0.55; }
.hxw-s2-bar-row.is-scanning .hxw-s2-bar-val {
    opacity: 1;
    transition-delay: 0.65s !important;
}
.hxw-s2-bar-row .hxw-s2-bar-name {
    opacity: 0.5;
    transition: opacity 0.4s ease 0.2s;
}
.hxw-s2-bar-row.is-scanning .hxw-s2-bar-name { opacity: 1; }

/* Scene 3 particles — particle trail with gradient fade.
   Note: фактический radial-gradient ставится из how_section.js (palette
   per particle). Здесь только усиливаем halo через box-shadow на
   currentColor (color также set в JS). */
.hxw-s3-particle {
    box-shadow:
        0 0 8px currentColor,
        0 0 20px currentColor,
        0 0 38px rgba(255, 255, 255, 0.08);
}

/* Scroll indicator — vertical dot at right edge of #how */
#how.section-how {
    position: relative;
}
.hxw-scroll-ind {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 18px;
    width: 2px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.hxw-scroll-ind.is-visible { opacity: 1; }
.hxw-scroll-ind::before {
    content: "";
    position: absolute;
    inset: 18% 0;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.07) 12%,
        rgba(255, 255, 255, 0.07) 88%,
        transparent
    );
    border-radius: 1px;
}
.hxw-scroll-ind-dot {
    position: absolute;
    top: var(--y, 0%);
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-3, #4ce2c1);
    box-shadow: 0 0 10px rgba(76, 226, 193, 0.6);
    transition: top 0.18s ease-out;
}
@media (max-width: 1100px) {
    .hxw-scroll-ind { display: none; }
}

/* ============================================================
   7. #findings — bar stagger-bounce, heatmap diagonal wave, carousel tilt
   ============================================================ */

/* Big-number card — hover scale, sparkline already animates on reveal */
.fx-card--big .fx-bignum {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-card--big:hover .fx-bignum { transform: scale(1.02); }

/* Bar chart — stagger fill with mini overshoot (bounce-back at top) */
.fx-card--bars .fx-bar-fill {
    transition:
        height 1.1s cubic-bezier(0.34, 1.40, 0.64, 1) !important;
}
.fx-card--bars.is-revealed .fx-bar-col:nth-child(1) .fx-bar-fill { transition-delay: 0ms !important; }
.fx-card--bars.is-revealed .fx-bar-col:nth-child(2) .fx-bar-fill { transition-delay: 50ms !important; }
.fx-card--bars.is-revealed .fx-bar-col:nth-child(3) .fx-bar-fill { transition-delay: 100ms !important; }
.fx-card--bars.is-revealed .fx-bar-col:nth-child(4) .fx-bar-fill { transition-delay: 150ms !important; }

/* Tooltip slides up smoother */
.fx-bar-col[data-tip]:hover::before {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    animation: pbTipSlide 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pbTipSlide {
    from { transform: translateX(-50%) translateY(0); opacity: 0; }
    to   { transform: translateX(-50%) translateY(-6px); opacity: 1; }
}

/* Heatmap diagonal wave (top-left → bottom-right). cells data-v already
   set; we layer additional stagger via delays. */
.fx-card--heat.is-revealed .fx-heat-cell {
    transition:
        opacity 0.35s cubic-bezier(0.4, 0.2, 0.2, 1),
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease !important;
}

/* Carousel slide tilt during transition + momentum slide */
.fx-slide {
    transition:
        opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transform-origin: center;
}
.fx-slide:not(.is-current) {
    transform: translateX(20px) rotateY(8deg) !important;
}
.fx-slide.is-current {
    transform: translateX(0) rotateY(0) !important;
}
.fx-carousel-track {
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* Ambient rotating conic-gradient bg на findings cards (low opacity) */
.fx-card {
    overflow: hidden;
}
.fx-card .fx-amb {
    position: absolute;
    inset: -30%;
    background: conic-gradient(
        from 0deg,
        rgba(76, 226, 193, 0.04) 0deg,
        rgba(var(--accent-rgb), 0.05) 120deg,
        rgba(var(--accent-2-rgb), 0.04) 240deg,
        rgba(76, 226, 193, 0.04) 360deg
    );
    animation: pbAmbRotate 28s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
@keyframes pbAmbRotate {
    to { transform: rotate(360deg); }
}
.fx-card .fx-amb { will-change: transform; }
.fx-card > *:not(.fx-amb) { position: relative; z-index: 1; }

/* ============================================================
   8. #pro — $ price flip animation (если найдём $-price)
   ============================================================ */
.feat-card .fv-num,
.feat-card .fv-counter,
.feat-card .fv-seller {
    perspective: 600px;
}
.feat-card:hover .fv-num {
    animation: pbFlip 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes pbFlip {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

/* ============================================================
   9. #faq — accordion polish
   ============================================================ */
.faq summary {
    transition:
        color 0.25s ease,
        padding-left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.3s ease;
    position: relative;
}
.faq details summary {
    border-left: 2px solid transparent;
    transition:
        color 0.25s ease,
        padding-left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.3s ease,
        border-color 0.3s ease;
}
.faq details:hover summary {
    color: var(--accent, #ffc94a);
    padding-left: 28px;
}
.faq details[open] summary {
    border-left-color: var(--accent, #ffc94a);
    background: linear-gradient(
        90deg,
        rgba(var(--accent-rgb), 0.04) 0%,
        transparent 60%
    );
}

/* Plus/minus: rotate 90deg with smoother bezier */
.faq summary::after {
    transition:
        transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
        background-size 0.3s ease !important;
}

/* Smooth height-open: details native height-toggle is instant in browsers,
   so we add opacity+transform on the <p> for graceful reveal. */
.faq details p {
    transform: translateY(-4px);
    opacity: 0;
    transition:
        transform 0.4s cubic-bezier(0.2, 1, 0.3, 1) 0.05s,
        opacity 0.4s cubic-bezier(0.2, 1, 0.3, 1) 0.05s;
}
.faq details[open] p {
    transform: translateY(0);
    opacity: 1;
}

/* ============================================================
   10. #recent — recent-card hover micro-shift + cursor ripple
   ============================================================ */
#recent .recent-card {
    transition:
        transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.4s ease,
        filter 0.3s ease;
    position: relative;
}
#recent .recent-card:hover {
    filter: brightness(1.06) saturate(1.04);
}
/* Recent card text shift on hover */
#recent .recent-card:hover .recent-card-name {
    transform: translateY(-1px);
}
#recent .recent-card-name {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   11. PADDING CONSISTENCY — final sections rhythm
   ============================================================
   .section базово padding: 96px 0 в style.css. Уже под mobile есть
   override до 64px / 44px. Здесь только wide-screen fine-tune
   через --section-y-wide.
*/
@media (min-width: 1100px) {
    #example.section,
    #findings.section,
    #what.section,
    #pro.section,
    .section-faq {
        padding-top: var(--section-y, 80px);
        padding-bottom: var(--section-y, 80px);
    }
}
@media (min-width: 1440px) {
    #example.section,
    #findings.section,
    #what.section,
    #pro.section,
    .section-faq {
        padding-top: var(--section-y-wide, 80px);
        padding-bottom: var(--section-y-wide, 80px);
    }
}

/* ============================================================
   12. TOUCH DEVICES — skip cursor-based effects
   ============================================================ */
@media (hover: none), (pointer: coarse) {
    .feat-card::after,
    .fx-card::after { display: none; }
    .feat-card.is-hovered,
    .fx-card.is-hovered { animation: none !important; }
    .feat-card .pb-ripple,
    .fx-card .pb-ripple,
    .lr-card .pb-ripple { display: none; }
}

/* ============================================================
   13. REDUCED MOTION — full gate
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .feat-card,
    .fx-card,
    .lr-card,
    .stats-band .stat-cell,
    .stats-band .stat-cell::before,
    .stat-cell .stat-num::before,
    .feat-card .feat-icon,
    .feat-card.is-on .feat-icon,
    .feat-card .feat-desc,
    .lr-tag::after,
    .lr-verdict::after,
    .hxw-scene,
    .hxw-s1-caret,
    .hxw-s2-bar-val,
    .hxw-s2-bar-name,
    .fx-card--big .fx-bignum,
    .fx-card--bars .fx-bar-fill,
    .fx-card--heat.is-revealed .fx-heat-cell,
    .fx-slide,
    .fx-card .fx-amb,
    .faq summary,
    .faq details p,
    .faq details summary,
    .faq summary::after,
    .lr-cta-primary,
    .lr-cta-primary svg,
    #recent .recent-card,
    #recent .recent-card-name {
        animation: none !important;
        transition: none !important;
    }
    .feat-card:hover,
    .fx-card:hover,
    .lr-card:hover,
    .stats-band .stat-cell:hover,
    #recent .recent-card:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
    .feat-card .pb-ripple,
    .fx-card .pb-ripple,
    .lr-card .pb-ripple { display: none !important; }
    .feat-title {
        background-image: none !important;
        color: var(--text) !important;
        -webkit-text-fill-color: initial !important;
    }
    .feat-card .feat-desc {
        background-image: none !important;
        color: var(--muted) !important;
        -webkit-text-fill-color: initial !important;
    }
    .hxw-scroll-ind { display: none !important; }
    .fx-card .fx-amb { display: none !important; }
    .fx-slide:not(.is-current) {
        transform: none !important;
    }
    .lr-verdict::after,
    .lr-tag::after { display: none !important; }
    .stats-band .stat-cell::before { opacity: 0.4 !important; }
}

/* ============================================================
   14. FALLBACKS (safari, older browsers)
   ============================================================ */
@supports not (animation-timeline: scroll()) {
    /* nothing — мы не используем animation-timeline (browser support мал)
       но оставляем feature-detection как маркер */
}