/* ============================================================
   body-commerce-what-changing — "Що змінюється з AI від Neuron24"
   Розмітка: commerce-changing.html | Скрипт: commerce-changing.js
   ============================================================ */

.body-commerce-what-changing *,
.body-commerce-what-changing *::before,
.body-commerce-what-changing *::after { box-sizing: border-box; }

.body-commerce-what-changing {
    --bcw-blue:    #2196FF;
    --bcw-accent:  #2d7ff9;
    --bcw-row:     rgba(12, 28, 60, .55);
    --bcw-row-bd:  rgba(120, 150, 210, .18);
    --bcw-text:    #d7e2f4;
    --bcw-maxw:    1180px;

    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    /* темно-синій фон + крапкова текстура (what-is-changing.png інлайном у HTML) */
    background-color: #071a3d;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--bcw-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 56px 24px 64px;
}

.body-commerce-what-changing .bcw-inner {
    position: relative;
    z-index: 1;
    max-width: var(--bcw-maxw);
    margin: 0 auto;
}

/* ---------- title ---------- */
.body-commerce-what-changing .bcw-title {
    margin: 0 0 36px;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: #ffffff;
}
.body-commerce-what-changing .bcw-title .bcw-accent { color: var(--bcw-accent); }

/* ---------- grid ---------- */
.body-commerce-what-changing .bcw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
}

.body-commerce-what-changing .bcw-col {
    border-radius: 12px;
    overflow: hidden;
}

/* heads */
.body-commerce-what-changing .bcw-head {
    padding: 22px 28px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}
.body-commerce-what-changing .bcw-col--before .bcw-head {
    background: linear-gradient(180deg, #6b7589, #586478);
    color: #eef1f6;
}
.body-commerce-what-changing .bcw-col--after .bcw-head {
    background: linear-gradient(180deg, #38a0ff, #1f8bf5);
}

/* rows */
.body-commerce-what-changing .bcw-row {
    padding: 22px 28px;
    font-size: 15px;
    line-height: 1.5;
    border-top: 1px solid var(--bcw-row-bd);
}
.body-commerce-what-changing .bcw-col--before .bcw-row { background: rgba(20, 34, 64, .45); }
.body-commerce-what-changing .bcw-col--after  .bcw-row { background: rgba(18, 42, 86, .55); }
.body-commerce-what-changing .bcw-rows .bcw-row:first-child { border-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
    .body-commerce-what-changing { padding: 44px 18px 52px; }
    .body-commerce-what-changing .bcw-title { font-size: 21px; }
    .body-commerce-what-changing .bcw-grid { grid-template-columns: 1fr; gap: 22px; }
    .body-commerce-what-changing .bcw-head { padding: 18px 20px; font-size: 16px; }
    .body-commerce-what-changing .bcw-row { padding: 18px 20px; font-size: 14px; }
}

/* ---------- поява при скролі (вмикається скриптом) ---------- */
.body-commerce-what-changing.bcw-anim .bcw-title,
.body-commerce-what-changing.bcw-anim .bcw-col {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
.body-commerce-what-changing.bcw-anim .bcw-col--before { transition-delay: .08s; }
.body-commerce-what-changing.bcw-anim .bcw-col--after  { transition-delay: .16s; }
.body-commerce-what-changing.bcw-anim.is-in .bcw-title,
.body-commerce-what-changing.bcw-anim.is-in .bcw-col {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .body-commerce-what-changing.bcw-anim .bcw-title,
    .body-commerce-what-changing.bcw-anim .bcw-col {
        opacity: 1;
        transform: none;
        transition: none;
    }
}