/* Penetration Testing & VAPT — Saral Cyber Team (page-specific overrides) */

body.cy-vapt .ms-hero {
    background: linear-gradient(135deg, rgba(28,25,23,0.78) 0%, rgba(127,29,29,0.65) 48%, rgba(154,52,18,0.55) 100%), url('/static/assets/cyber/vapt-hero.jpg') center/cover no-repeat;
    padding-top: var(--space-5);
}
body.cy-vapt .ms-cta {
    background: linear-gradient(135deg, #1c1917 0%, #9a3412 100%);
}
body.cy-vapt .ms-hero-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #fb923c;
}
body.cy-vapt .ms-hero h1 span {
    color: #fb923c;
}
body.cy-vapt .ms-card {
    --card-accent: linear-gradient(135deg, #7f1d1d, #9a3412, #1c1917);
}
body.cy-vapt .ms-card-icon,
body.cy-vapt .ms-why-icon,
body.cy-vapt .ms-process-num,
body.cy-vapt .ms-case-visual-icon {
    background: linear-gradient(135deg, #7f1d1d, #9a3412, #1c1917);
}
body.cy-vapt .ms-insight-tag,
body.cy-vapt .ms-case-tag {
    background: #ffedd5;
    color: #c2410c;
}
body.cy-vapt .ms-btn-primary {
    background: #ea580c;
}
body.cy-vapt .ms-btn-primary:hover {
    background: #fb923c;
    color: #0f172a;
}
body.cy-vapt .ms-faq h2 {
    color: #0f172a;
}


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

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