/* ==========================================================
   IT Monkee - Veterans Day Theme Override
   Respectful patriotic accents for a veteran-owned business.
   ========================================================== */

:root {
    --veterans-red: #c8102e;
    --veterans-blue: #21468b;
    --veterans-navy: #071226;
    --veterans-white: #f4f7fb;
    --veterans-gold: #d8b15a;
}

.topbar {
    background:
        linear-gradient(90deg, rgba(5,5,5,.95), rgba(7,18,38,.94), rgba(5,5,5,.95));
    border-bottom-color: rgba(244,247,251,.16);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
}

.topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--veterans-blue) 14%,
            var(--veterans-white) 36%,
            var(--veterans-red) 58%,
            var(--veterans-gold) 78%,
            transparent);
    opacity: .86;
    pointer-events: none;
}

.hero,
.hero-slider,
.page-hero {
    background-color: #030712;
}

.hero::after,
.hero-slider::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(115deg, rgba(33,70,139,.12) 0 18%, transparent 18% 34%, rgba(244,247,251,.045) 34% 38%, transparent 38% 58%, rgba(200,16,46,.10) 58% 74%, transparent 74%),
        radial-gradient(circle at 78% 22%, rgba(216,177,90,.14), transparent 24%),
        radial-gradient(circle, rgba(244,247,251,.24) 1px, transparent 1.8px);
    background-size: 100% 100%, 100% 100%, 120px 120px;
    background-position: center, center, 26px 24px;
    opacity: .36;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.hero .hero-inner,
.page-hero > * {
    position: relative;
    z-index: 2;
}

.hero-slider .hero-slide {
    z-index: 1;
}

.hero-slider .hero-slide.active {
    z-index: 2;
}

.eyebrow,
.section-label,
.section-heading span {
    color: #dbe9ff;
}

.eyebrow::before {
    background: linear-gradient(90deg, var(--veterans-blue), var(--veterans-white), var(--veterans-red));
}

.hero h1 span,
.hero-slider h1 span,
.monkeeguard-content h2 span {
    text-shadow:
        0 0 18px rgba(33,70,139,.24),
        0 0 28px rgba(216,177,90,.10);
}

.btn-primary,
.portal-btn:hover {
    background: linear-gradient(135deg, var(--veterans-red), #8d0b20 52%, var(--veterans-blue));
    box-shadow: 0 0 30px rgba(33,70,139,.22);
}

.btn-primary:hover,
.service-card a:hover,
.footer-column a:hover,
.footer-contact a:hover,
.navlinks a:hover {
    color: #dbe9ff;
}

.service-card.featured,
.featured-pricing,
.guard-screen,
.about-panel,
.feature-checklist {
    border-color: rgba(216,177,90,.28);
    box-shadow:
        0 20px 50px rgba(0,0,0,.16),
        0 0 34px rgba(33,70,139,.10);
}

.pricing-badge,
.service-icon {
    box-shadow: 0 0 18px rgba(216,177,90,.14);
}

.slider-dots .dot.active {
    background: linear-gradient(90deg, var(--veterans-blue), var(--veterans-white), var(--veterans-red));
}

.cta-box {
    border-color: rgba(216,177,90,.26);
    box-shadow:
        0 24px 50px rgba(0,0,0,.08),
        inset 0 3px 0 var(--veterans-gold);
}

.site-footer {
    background:
        linear-gradient(180deg, #020202, var(--veterans-navy));
    border-top-color: rgba(216,177,90,.18);
}

.footer-column:first-child p[style*="Veteran Owned"] {
    color: var(--veterans-gold) !important;
    text-shadow: 0 0 16px rgba(216,177,90,.16);
}

.footer-social a:hover {
    background: var(--veterans-blue);
    border-color: var(--veterans-blue);
    box-shadow: 0 8px 20px rgba(33,70,139,.24);
}

@media (max-width: 700px) {
    .hero::after,
    .hero-slider::after,
    .page-hero::after {
        opacity: .28;
        background-size: 100% 100%, 100% 100%, 150px 150px;
    }
}