/* ============================================================
   MANAGED IT SERVICES – PAGE-SPECIFIC STYLES ONLY
   Uses global hero, grid, card, CTA, typography, sections
============================================================ */

/* ---------------------------
   HERO OVERRIDES
---------------------------- */
.xaas-hero-inner {
    --hero-bg: radial-gradient(circle at 20% 40%, rgba(0,122,255,0.22), rgba(0,0,0,0.95));
    padding-bottom: 80px;
}

.xaas-hero-inner .xaas-hero-lead {
    max-width: 640px;
    margin-bottom: 32px;
}

/* CTA override for this hero */
.xaas-hero-ctas .xaas-btn-primary {
    background: #007bff;
}

.xaas-hero-ctas .xaas-btn-secondary {
    background: transparent;
    border: 2px solid #3da3ff;
    color: #3da3ff;
}
.xaas-hero-ctas .xaas-btn-secondary:hover {
    background: rgba(61,163,255,0.1);
}

/* ---------------------------
   VALUE BLOCKS (Why Managed IT)
---------------------------- */

.xaas-managedit-values {
    padding: var(--section-space, 80px) 0;
}

.xaas-value-card {
    border-left: 4px solid var(--xaas-blue, #4aa8ff);
}

/* ---------------------------
   PILLARS (What We Provide)
---------------------------- */

.xaas-managedit-pillars {
    padding: var(--section-space, 80px) 0;
}

.xaas-pillar-card ul li::before {
    color: var(--xaas-blue, #4aa8ff);
}

/* ---------------------------
   SERVICE AREAS
---------------------------- */

.xaas-managedit-areas {
    padding: var(--section-space, 80px) 0;
}

.xaas-area-grid div {
    border-left-color: var(--xaas-blue, #4aa8ff);
}

/* ---------------------------
   CTA SECTIONS
---------------------------- */

.xaas-managedit-cta .xaas-btn-primary {
    background-color: var(--xaas-blue, #4aa8ff);
    padding: 16px 32px;
    font-size: 18px;
}

@media (max-width: 800px) {
    .cta-desktop { display: none; }
    .cta-mobile { display: block; }
}