/* ==========================================================
   IT Monkee - Memorial Day Theme Override
   Respectful patriotic accents for late May.
   ========================================================== */

:root {
    --memorial-red: #bf0d1f;
    --memorial-blue: #1f4f8f;
    --memorial-navy: #061126;
    --memorial-white: #f5f7fb;
    --memorial-gold: #d8b15a;
}

.topbar {
    background:
        linear-gradient(90deg, rgba(5,5,5,.95), rgba(6,17,38,.94), rgba(5,5,5,.95));
    border-bottom-color: rgba(245,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(--memorial-red) 18%,
            var(--memorial-white) 44%,
            var(--memorial-blue) 70%,
            transparent);
    opacity: .82;
    pointer-events: none;
}

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

.hero::after,
.hero-slider::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(115deg, rgba(191,13,31,.08) 0 14%, transparent 14% 30%, rgba(245,247,251,.045) 30% 34%, transparent 34% 52%, rgba(31,79,143,.10) 52% 70%, transparent 70%),
        radial-gradient(circle at 78% 18%, rgba(216,177,90,.16), transparent 24%);
    opacity: .42;
    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: #d7e8ff;
}

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

.hero h1 span,
.hero-slider h1 span,
.monkeeguard-content h2 span {
    text-shadow: 0 0 22px rgba(31,79,143,.22);
}

.btn-primary,
.portal-btn:hover {
    background: linear-gradient(135deg, var(--memorial-red), #8f0a18 52%, var(--memorial-blue));
    box-shadow: 0 0 30px rgba(31,79,143,.22);
}

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

.service-card.featured,
.featured-pricing,
.guard-screen,
.about-panel,
.feature-checklist {
    border-color: rgba(245,247,251,.24);
    box-shadow:
        0 20px 50px rgba(0,0,0,.16),
        0 0 34px rgba(31,79,143,.10);
}

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

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

.cta-box {
    border-color: rgba(31,79,143,.24);
    box-shadow:
        0 24px 50px rgba(0,0,0,.08),
        inset 0 3px 0 var(--memorial-blue);
}

.site-footer {
    background:
        linear-gradient(180deg, #020202, var(--memorial-navy));
    border-top-color: rgba(245,247,251,.14);
}

.footer-social a:hover {
    background: var(--memorial-blue);
    border-color: var(--memorial-blue);
    box-shadow: 0 8px 20px rgba(31,79,143,.24);
}

@media (max-width: 700px) {
    .hero::after,
    .hero-slider::after,
    .page-hero::after {
        opacity: .30;
    }
}