/*
 * Primary call-to-action buttons shown on the dark hero / CTA sections.
 *   .np-btn-primary-custom : homepage + city service pages (loaded via layouts.homelayouts.header)
 *   .np-btn.np-btn-accent  : services/managed-it-services-houston (marketing_contact)
 * White button with brand-purple text; light lavender on hover.
 * Per-page layout tweaks (mobile width, font-size) stay in each page's own <style>.
 */

.np-btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    background: #fff;
    border: 2px solid #fff;
    color: #270678 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: .3s ease;
}

.np-btn.np-btn-accent {
    background: #fff;
    border: 2px solid #fff;
    color: #270678;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.np-btn-primary-custom:hover,
.np-btn.np-btn-accent:hover {
    background: #f1edff;
    border-color: #f1edff;
    color: #270678 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
    transform: translateY(-1px);
}