/* Cloud Security Services — Saral Cyber Team (page-specific overrides) */

body.cy-cloud .ms-hero {
    background: linear-gradient(135deg, rgba(8,47,73,0.75) 0%, rgba(3,105,161,0.65) 50%, rgba(21,94,117,0.55) 100%), url('/static/assets/cyber/cloud-security-hero.jpg') center/cover no-repeat;
    padding-top: var(--space-5);
}
body.cy-cloud .ms-cta {
    background: linear-gradient(135deg, #082f49 0%, #0369a1 100%);
}
body.cy-cloud .ms-hero-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #38bdf8;
}
body.cy-cloud .ms-hero h1 span {
    color: #38bdf8;
}
body.cy-cloud .ms-card {
    --card-accent: linear-gradient(135deg, #082f49, #0369a1, #0e7490);
}
body.cy-cloud .ms-card-icon,
body.cy-cloud .ms-why-icon,
body.cy-cloud .ms-process-num,
body.cy-cloud .ms-case-visual-icon {
    background: linear-gradient(135deg, #082f49, #0369a1, #0e7490);
}
body.cy-cloud .ms-insight-tag,
body.cy-cloud .ms-case-tag {
    background: #e0f2fe;
    color: #0369a1;
}
body.cy-cloud .ms-btn-primary {
    background: #0284c7;
}
body.cy-cloud .ms-btn-primary:hover {
    background: #38bdf8;
    color: #0f172a;
}
body.cy-cloud .ms-faq h2 {
    color: #0f172a;
}


body.cy-cloud .cy-section-divider {
    position: relative;
    height: 48px;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(56,189,248,0.22) 0 1.25px, transparent 1.6px) 0 0 / 22px 22px,
        radial-gradient(circle, rgba(56,189,248,0.10) 0 1px, transparent 1.4px) 11px 11px / 22px 22px,
        linear-gradient(90deg, transparent 8%, rgba(56,189,248,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-cloud .cy-section-divider::before,
body.cy-cloud .cy-section-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid rgba(56,189,248,0.55);
    background: rgba(56,189,248,0.12);
}
body.cy-cloud .cy-section-divider::before { left: 18%; }
body.cy-cloud .cy-section-divider::after { right: 18%; }

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