/* ============================================================
   body-commerce-info — три картки з номерами
   Розмітка: commerce-info.html | Скрипт: commerce-info.js
   ============================================================ */

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

.body-commerce-info {
    --bci-blue:   #2196FF;
    --bci-blue-2: #1f8bf5;
    --bci-navy:   #15264a;
    --bci-gray:   #4a5161;
    --bci-maxw:   1060px;

    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    /* світлий голубий фон + крапкова текстура по краях (back.png інлайном у HTML) */
    background-color: #e9f2fc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--bci-navy);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 70px 24px 76px;
}

.body-commerce-info .bci-inner {
    position: relative;
    z-index: 1;
    max-width: var(--bci-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
}

/* ---------- card ---------- */
.body-commerce-info .bci-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 54px 28px 30px;        /* зверху місце під номер */
    margin-top: 30px;               /* щоб кружок виступав над карткою */
    box-shadow: 0 18px 40px rgba(40, 80, 150, .10);
}

/* number badge */
.body-commerce-info .bci-num {
    position: absolute;
    top: -30px;
    left: 28px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(180deg, #36a0ff, #1f8bf5);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(33, 150, 255, .40);
    border: 4px solid #eaf3fd;
}

.body-commerce-info .bci-card-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--bci-blue);
}
.body-commerce-info .bci-card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bci-gray);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .body-commerce-info .bci-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
    .body-commerce-info { padding: 54px 16px 56px; }
    .body-commerce-info .bci-card { padding: 50px 22px 26px; }
    .body-commerce-info .bci-num { width: 54px; height: 54px; font-size: 22px; top: -27px; }
}

/* ---------- поява при скролі (вмикається скриптом) ---------- */
.body-commerce-info.bci-anim .bci-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
.body-commerce-info.bci-anim .bci-card:nth-child(1) { transition-delay: .05s; }
.body-commerce-info.bci-anim .bci-card:nth-child(2) { transition-delay: .13s; }
.body-commerce-info.bci-anim .bci-card:nth-child(3) { transition-delay: .21s; }
.body-commerce-info.bci-anim.is-in .bci-card {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .body-commerce-info.bci-anim .bci-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}