/* ── 4 PLATFORM ADS ── */
.platforms {
    background: #fff;
    padding: 80px 0;
}

.platforms__title {
    font-size: 48px;
        font-weight: 600;
        margin-bottom: 56px;
        display: flex;
        justify-content: center;
}

.platforms__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

.platforms__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 40px 56px;
    gap: 36px;
    position: relative;
    align-items: center;
}

.platforms__item + .platforms__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #3b82f6 30%,
        #60a5fa 50%,
        #3b82f6 70%,
        transparent 100%
    );
    opacity: 0.5;
}

.platforms__label {
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.platforms__logo {
    width: auto;
    height: 80px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .platforms__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .platforms__item:nth-child(3) {
        border-top: 1px solid #e5e7eb;
    }
    .platforms__item:nth-child(4) {
        border-top: 1px solid #e5e7eb;
    }
    .platforms__item:nth-child(even) {
        border-left: 1px solid #e5e7eb;
    }
    .platforms__item:nth-child(odd):not(:first-child) {
        border-left: none;
    }
}

/* ─────────────────────────────────────── */

.ec-hero-platform {
    min-height: 110svh;
    padding-top: var(--navbar-h);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;

    /* ── Crosshair dashed grid (SVG tile 80x80) from home hero ── */
    background-color: #F6F7FB;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3C!-- H dashed --%3E%3Cline x1='7' y1='0' x2='73' y2='0' stroke='%23BAD2FF' stroke-opacity='.4' stroke-width='1' stroke-dasharray='4 5'/%3E%3C!-- V dashed --%3E%3Cline x1='0' y1='7' x2='0' y2='73' stroke='%23BAD2FF' stroke-opacity='.4' stroke-width='1' stroke-dasharray='4 5'/%3E%3C!-- TL corner --%3E%3Cline x1='0' y1='0' x2='6' y2='0' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='0' y2='6' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C!-- TR corner --%3E%3Cline x1='74' y1='0' x2='80' y2='0' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='80' y1='0' x2='80' y2='6' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C!-- BL corner --%3E%3Cline x1='0' y1='74' x2='0' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='0' y1='80' x2='6' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C!-- BR corner --%3E%3Cline x1='74' y1='80' x2='80' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3Cline x1='80' y1='74' x2='80' y2='80' stroke='%23BAD2FF' stroke-opacity='.25' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-position: 0 0;
    background-repeat: repeat;
}

.ec-hero-platform::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../images/multi_flatform/adsplatform-banner.jpg) right bottom / max(100%, 600px) auto no-repeat;
    pointer-events: none;
    z-index: 0;
}