.products-v5 {
    --product-green: #16aa3a;
    --product-orange: #ef6c00;
    --product-cyan: #00a6ad;
    --product-yellow: #f2bd00;
    padding: clamp(88px, 9vw, 150px) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 2%, rgba(42, 151, 218, .08), transparent 26%),
        linear-gradient(180deg, #fff 0%, #f3f7fb 100%);
}

.products-v5__inner {
    width: min(1380px, calc(100% - 64px));
    margin-inline: auto;
}

.products-v5__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: min(1180px, 100%);
    margin: 0 auto clamp(42px, 5vw, 72px);
}

.products-v5__eyebrow {
    margin: 0 0 3px;
    color: #b8c2cf;
    font: 700 clamp(34px, 5vw, 76px)/1 "Arial", sans-serif;
    letter-spacing: .12em;
}

.products-v5__heading h2 {
    margin: 0;
    color: #111b29;
    font-size: clamp(34px, 3.3vw, 52px);
    line-height: 1.25;
    letter-spacing: .08em;
}

.products-v5__cases {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #8697aa;
    color: #26384c;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    transition: color .25s, border-color .25s;
}

.products-v5__cases:hover {
    color: #0877c9;
    border-color: #0877c9;
}

.products-v5__list {
    display: grid;
    gap: 3px;
}

.product-row {
    --product-color: var(--product-green);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    align-items: center;
    min-height: clamp(190px, 16.5vw, 248px);
    overflow: hidden;
    color: #142033;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .98), rgba(241, 246, 251, .96)),
        #fff;
    box-shadow: 0 15px 46px rgba(22, 48, 78, .07);
}

.product-row--train { --product-color: var(--product-orange); }
.product-row--security { --product-color: var(--product-cyan); }
.product-row--call { --product-color: var(--product-yellow); }

.product-row::before,
.product-row::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.product-row::before {
    inset: 0 auto 0 0;
    width: clamp(90px, 12vw, 180px);
    opacity: .96;
    background: linear-gradient(145deg, var(--product-color), color-mix(in srgb, var(--product-color), white 30%));
    clip-path: polygon(0 0, 82% 0, 25% 100%, 0 100%);
}

.product-row::after {
    top: -60%;
    right: -2%;
    width: 48%;
    height: 220%;
    opacity: .14;
    background: linear-gradient(90deg, transparent, var(--product-color), transparent);
    transform: rotate(24deg);
}

.product-row--reverse {
    grid-template-columns: 1.16fr .84fr;
}

.product-row--reverse::before {
    right: 0;
    left: auto;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 75% 100%);
}

.product-row__accent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(58px, 8vw, 126px);
    width: 1px;
    background: var(--product-color);
    transform: skewX(-27deg);
    transform-origin: center;
}

.product-row--reverse .product-row__accent {
    right: clamp(58px, 8vw, 126px);
    left: auto;
}

.product-row__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 8% 26px 24%;
}

.product-row--reverse .product-row__copy {
    grid-column: 2;
    padding: 26px 22% 26px 9%;
}

.product-row__number {
    color: var(--product-color);
    font: 800 clamp(36px, 4vw, 57px)/1 "Arial", sans-serif;
    letter-spacing: .05em;
}

.product-row__number::after {
    content: "";
    display: block;
    width: 105%;
    height: 2px;
    margin: 7px 0 10px;
    background: currentColor;
}

.product-row__copy strong {
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.4;
    letter-spacing: .06em;
}

.product-row__more {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: #66778b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s;
}

.product-row__more i {
    color: var(--product-color);
    font-size: 18px;
    font-style: normal;
}

.product-row__visual {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 100%;
    min-height: inherit;
    padding: 12px 7%;
}

.product-row--reverse .product-row__visual {
    grid-column: 1;
    grid-row: 1;
}

.product-row__visual::after {
    content: "";
    position: absolute;
    right: 12%;
    bottom: 14%;
    left: 12%;
    height: 13%;
    border-radius: 50%;
    background: rgba(20, 41, 64, .17);
    filter: blur(18px);
    transform: scaleY(.45);
}

.product-row__visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: clamp(160px, 15vw, 222px);
    object-fit: contain;
    filter: drop-shadow(0 18px 15px rgba(10, 30, 54, .13));
    transition: transform .48s cubic-bezier(.2, .75, .25, 1), filter .48s;
}

.product-row:hover .product-row__visual img {
    transform: translateY(-7px) scale(1.025);
    filter: drop-shadow(0 26px 20px rgba(10, 30, 54, .2));
}

.product-row:hover .product-row__more {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .products-v5__inner { width: calc(100% - 36px); }
    .product-row,
    .product-row--reverse { grid-template-columns: .92fr 1.08fr; }
    .product-row__copy { padding-left: 22%; }
    .product-row--reverse .product-row__copy { padding-right: 20%; }
}

@media (max-width: 640px) {
    .products-v5 { padding: 76px 0; }
    .products-v5__heading { align-items: flex-end; margin-bottom: 34px; }
    .products-v5__eyebrow { font-size: 28px; letter-spacing: .08em; }
    .products-v5__heading h2 { font-size: 31px; }
    .products-v5__cases { gap: 8px; font-size: 11px; white-space: nowrap; }
    .products-v5__list { gap: 10px; }
    .product-row,
    .product-row--reverse {
        grid-template-columns: 1fr;
        min-height: 320px;
    }
    .product-row::before { width: 110px; height: 100%; }
    .product-row--reverse::before {
        right: auto;
        left: 0;
        clip-path: polygon(0 0, 82% 0, 25% 100%, 0 100%);
    }
    .product-row__accent,
    .product-row--reverse .product-row__accent { right: auto; left: 72px; }
    .product-row__copy,
    .product-row--reverse .product-row__copy {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding: 28px 24px 0 76px;
    }
    .product-row__number { font-size: 40px; }
    .product-row__number::after { margin: 6px 0 8px; }
    .product-row__copy strong { font-size: 24px; }
    .product-row__more { display: none; }
    .product-row__visual,
    .product-row--reverse .product-row__visual {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        min-height: 0;
        height: 200px;
        padding: 38px 16px 8px 48px;
    }
    .product-row__visual img { height: 158px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-row__visual img,
    .product-row__more { transition: none; }
}