/* Endpoint Detection & Response (EDR/XDR) — Saral Cyber Team (page-specific overrides) */

body.cy-edr .ms-hero {
    background: linear-gradient(135deg, rgba(2,44,34,0.78) 0%, rgba(6,78,59,0.65) 48%, rgba(15,118,110,0.58) 100%), url('/static/assets/cyber/edr-xdr-hero.jpg') center/cover no-repeat;
    padding-top: var(--space-5);
}
body.cy-edr .ms-cta {
    background: linear-gradient(135deg, #022c22 0%, #047857 100%);
}
body.cy-edr .ms-hero-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #34d399;
}
body.cy-edr .ms-hero h1 span {
    color: #34d399;
}
body.cy-edr .ms-card {
    --card-accent: linear-gradient(135deg, #064e3b, #065f46, #022c22);
}
body.cy-edr .ms-card-icon,
body.cy-edr .ms-why-icon,
body.cy-edr .ms-process-num,
body.cy-edr .ms-case-visual-icon {
    background: linear-gradient(135deg, #064e3b, #065f46, #022c22);
}
body.cy-edr .ms-insight-tag,
body.cy-edr .ms-case-tag {
    background: #d1fae5;
    color: #047857;
}
body.cy-edr .ms-btn-primary {
    background: #059669;
}
body.cy-edr .ms-btn-primary:hover {
    background: #34d399;
    color: #0f172a;
}
body.cy-edr .ms-faq h2 {
    color: #0f172a;
}


body.cy-edr .cy-section-divider {
    position: relative;
    height: 48px;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(52,211,153,0.22) 0 1.25px, transparent 1.6px) 0 0 / 22px 22px,
        radial-gradient(circle, rgba(52,211,153,0.10) 0 1px, transparent 1.4px) 11px 11px / 22px 22px,
        linear-gradient(90deg, transparent 8%, rgba(52,211,153,0.55) 50%, transparent 92%);
    background-repeat: repeat, repeat, no-repeat;
    background-size: 22px 22px, 22px 22px, 100% 1px;
    background-position: 0 0, 11px 11px, center;
}
body.cy-edr .cy-section-divider::before,
body.cy-edr .cy-section-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid rgba(52,211,153,0.55);
    background: rgba(52,211,153,0.12);
}
body.cy-edr .cy-section-divider::before { left: 18%; }
body.cy-edr .cy-section-divider::after { right: 18%; }

@media (max-width: 768px) {
    body.cy-edr .ms-hero {
        min-height: auto;
        padding: var(--space-4) 1.25rem var(--space-5);
    }
    body.cy-edr .ms-hero h1 {
        font-size: 1.8rem;
    }
}