/*
 * Лендинг: выбор сферы в первом экране, «Для кого», «Было → стало», счётчики и анимации.
 * Без JS всё видно сразу: скрывающие стили включаются только классом html.js-motion.
 */

:root {
    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --m-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Первый экран: меняющееся слово ---------- */
/* Место под три строки: при смене сферы блок под заголовком не прыгает. */
.hero h1 {
    min-height: calc(3 * 1.14em);
}
.hero-word {
    position: relative;
    display: inline-block;
    color: var(--green);
    transition: opacity 0.28s ease, transform 0.38s var(--m-ease), filter 0.28s ease;
}

.hero-word::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.04em;
    height: 0.22em;
    border-radius: 0.2em;
    background: color-mix(in srgb, var(--green) 22%, transparent);
    z-index: -1;
    transform-origin: left;
    transition: transform 0.5s var(--m-ease) 0.1s;
}

.hero-word.is-leaving {
    opacity: 0;
    transform: translateY(-0.35em);
    filter: blur(4px);
}

.hero-word.is-entering {
    opacity: 0;
    transform: translateY(0.35em);
    filter: blur(4px);
    transition: none;
}

.hero-word.is-leaving::after,
.hero-word.is-entering::after {
    transform: scaleX(0);
}

/* ---------- Выбор сферы ---------- */
.seg {
    margin: 18px 0 22px;
}

.seg__label {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.seg__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seg__chip {
    position: relative;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--card-soft);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--m-spring), box-shadow 0.25s ease;
}

.seg__chip:hover {
    border-color: var(--green);
    transform: translateY(-2px);
}

.seg__chip:active {
    transform: scale(0.96);
}

.seg__chip.is-on {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(31, 122, 58, 0.6);
}

.seg__chip:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Полоска автопрокрутки: показывает, что сферы меняются сами */
.seg.is-auto .seg__chip.is-on::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.75);
    transform-origin: left;
    animation: seg-timer var(--seg-interval, 3200ms) linear both;
}

@keyframes seg-timer {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.seg__terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 14px 0 0;
    font-size: 0.86rem;
}

.seg__terms-label {
    color: var(--text-muted);
}

.seg__term-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.seg__term {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--green-light);
    color: var(--accent-ink);
    font-weight: 650;
}

.seg__term.is-new {
    animation: term-in 0.45s var(--m-spring) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes term-in {
    from { opacity: 0; transform: translateY(6px) scale(0.9); }
}

@media (max-width: 959px) {
    .seg__chips,
    .seg__terms {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .seg__chips {
        gap: 6px;
    }

    .seg__chip {
        padding: 7px 11px;
        font-size: 0.82rem;
    }
}

/* Видео «во всю ширину» на телефоне выступало за экран на несколько пикселей. */
.film {
    overflow-x: clip;
}

/* ---------- Счётчики ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}

@media (min-width: 860px) {
    .stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 40px;
    }
}

.stat {
    display: grid;
    gap: 4px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-soft);
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
}

.stat__num {
    color: var(--green);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.stat__text {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

/* ---------- Для кого ---------- */
.industries {
    padding: 64px 0 56px;
    background: var(--section-alt);
}

.industries__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 720px) {
    .industries__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .industries__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.industry {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 18px 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    text-align: left;
    font: inherit;
    box-shadow: 0 6px 18px rgba(15, 15, 15, 0.04);
    transition: transform 0.35s var(--m-ease), box-shadow 0.35s ease, border-color 0.25s ease;
}

.industry:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--green) 40%, var(--border));
    box-shadow: 0 18px 34px -16px rgba(20, 90, 42, 0.35);
}

.industry__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: var(--green-light);
    font-size: 1.45rem;
    line-height: 1;
    transition: transform 0.45s var(--m-spring);
}

.industry:hover .industry__icon {
    transform: rotate(-8deg) scale(1.12);
}

.industry h3,
.industry__name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.industry p,
.industry__text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.industry--other {
    cursor: pointer;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--green) 45%, var(--border));
    background: linear-gradient(160deg, var(--green-light) 0%, var(--card-bg) 75%);
}

.industry--other .industry__icon {
    background: var(--green);
    color: #fff;
    font-weight: 700;
}

.industry--other .industry__text {
    color: var(--accent-ink);
    font-weight: 600;
}

.industry--other:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .industry {
        padding: 14px 12px 12px;
    }

    .industry__icon {
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }
}

/* ---------- Было → стало ---------- */
.before-after {
    padding: 56px 0 64px;
    background: var(--section-cta);
}

.ba {
    display: grid;
    gap: 16px;
    align-items: stretch;
}

@media (min-width: 860px) {
    .ba {
        grid-template-columns: 1fr auto 1fr;
        gap: 20px;
    }
}

.ba__col {
    padding: 22px 22px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

.ba__col--after {
    border-color: color-mix(in srgb, var(--green) 35%, var(--border));
    background: linear-gradient(165deg, var(--green-light) 0%, var(--card-bg) 70%);
}

.ba__label {
    margin: 0 0 12px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ba__col--after .ba__label {
    color: var(--green);
}

.ba__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ba__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.ba__list li::before {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
}

.ba__col--before li::before {
    content: "✕";
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.ba__col--before li span {
    position: relative;
    color: var(--text-muted);
}

/* Зачёркивание «было» */
.ba__col--before li span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    height: 1.5px;
    background: rgba(220, 38, 38, 0.55);
    transform: scaleX(1);
    transform-origin: left;
}

.ba__col--after li::before {
    content: "✓";
    background: var(--green);
    color: #fff;
}

.ba__arrow {
    display: grid;
    place-items: center;
    color: var(--green);
    font-size: 2rem;
    font-weight: 700;
}

@media (max-width: 859px) {
    .ba__arrow {
        transform: rotate(90deg);
        font-size: 1.6rem;
        line-height: 1;
    }
}

/* ============================================================
   Анимации (только когда JS включил html.js-motion)
   ============================================================ */
.js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.7s var(--m-ease);
    transition-delay: calc(var(--i, 0) * 45ms);
}

.js-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* «Было»: зачёркиваем по очереди, «стало»: галочки выпрыгивают */
.js-motion .ba__col--before li span::after {
    transform: scaleX(0);
    transition: transform 0.5s var(--m-ease);
    transition-delay: calc(0.5s + var(--i, 0) * 0.22s);
}

.js-motion .ba.is-in .ba__col--before li span::after {
    transform: scaleX(1);
}

.js-motion .ba__col--after li {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.45s ease, transform 0.55s var(--m-ease);
    transition-delay: calc(1.6s + var(--i, 0) * 0.18s);
}

.js-motion .ba.is-in .ba__col--after li {
    opacity: 1;
    transform: none;
}

.js-motion .ba__col--after li::before {
    transform: scale(0);
    transition: transform 0.45s var(--m-spring);
    transition-delay: calc(1.75s + var(--i, 0) * 0.18s);
}

.js-motion .ba.is-in .ba__col--after li::before {
    transform: scale(1);
}

.js-motion .ba__arrow {
    animation: ba-nudge 1.8s ease-in-out infinite;
}

@keyframes ba-nudge {
    0%, 100% { translate: 0 0; }
    50% { translate: 6px 0; }
}

@media (max-width: 859px) {
    @keyframes ba-nudge {
        0%, 100% { translate: 0 0; }
        50% { translate: 0 6px; }
    }
}

/* Помощник: сообщения появляются по очереди, как в живом чате */
.js-motion .assistant-chat__msg,
.js-motion .assistant-chat__confirm {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity 0.35s ease, transform 0.45s var(--m-spring);
}

.js-motion .assistant-chat__msg.is-shown,
.js-motion .assistant-chat__confirm.is-shown {
    opacity: 1;
    transform: none;
}

/* Скриншоты в первом экране: лёгкий 3D-наклон за курсором */
.js-motion .hero__visual {
    perspective: 1400px;
}

.js-motion .hero__visual .product-stage {
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.5s var(--m-ease);
    transform-style: preserve-3d;
}

/* Кнопки и карточки: мягкий отклик */
.site-btn {
    transition: transform 0.25s var(--m-ease), box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-btn:hover {
    transform: translateY(-2px);
}

.site-btn:active {
    transform: scale(0.97);
}

.task-card,
.step-card,
.plan {
    transition: transform 0.35s var(--m-ease), box-shadow 0.35s ease, border-color 0.25s ease;
}

.task-card:hover,
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -16px rgba(20, 90, 42, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .js-motion [data-reveal],
    .js-motion .ba__col--after li,
    .js-motion .assistant-chat__msg,
    .js-motion .assistant-chat__confirm {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .js-motion .ba__col--before li span::after,
    .js-motion .ba__col--after li::before {
        transform: none !important;
        transition: none !important;
    }

    .hero-word,
    .seg__term.is-new,
    .js-motion .ba__arrow,
    .seg.is-auto .seg__chip.is-on::after {
        animation: none !important;
        transition: none !important;
    }

    .js-motion .hero__visual .product-stage {
        transform: none !important;
    }
}