/* ==========================================================
   IT Monkee - Independence Day Theme Override
   Patriotic, energetic accents for July 4th.
   ========================================================== */

:root {
    --july-red: #e50914;
    --july-blue: #2457d6;
    --july-navy: #050b1f;
    --july-white: #f7fbff;
    --july-sky: #9fd8ff;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: .42;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle, rgba(247,251,255,.95) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(229,9,20,.85) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(36,87,214,.85) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(247,251,255,.65) 0 1.5px, transparent 2px);
    background-size: 6px 6px, 6px 6px, 6px 6px, 4px 4px;
    background-position:
        18% 26%,
        20% 24%,
        16% 23%,
        22% 28%;
    animation: july-firework-left 4.8s ease-out infinite;
}

body::after {
    opacity: .36;
    background-position:
        82% 31%,
        84% 29%,
        79% 28%,
        86% 34%;
    animation-name: july-firework-right;
    animation-delay: -2.2s;
    animation-duration: 5.8s;
}

@keyframes july-firework-left {
    0% {
        opacity: 0;
        transform: scale(.35);
        filter: blur(0);
        background-position: 19% 27%, 19% 27%, 19% 27%, 19% 27%;
    }

    18% {
        opacity: .65;
        transform: scale(1);
        background-position: 18% 22%, 24% 26%, 15% 30%, 21% 33%;
    }

    42% {
        opacity: .28;
        transform: scale(1.12);
        filter: blur(.4px);
        background-position: 16% 18%, 28% 27%, 12% 34%, 23% 38%;
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
        filter: blur(1px);
        background-position: 15% 16%, 30% 28%, 10% 36%, 24% 40%;
    }
}

@keyframes july-firework-right {
    0% {
        opacity: 0;
        transform: scale(.35);
        filter: blur(0);
        background-position: 82% 31%, 82% 31%, 82% 31%, 82% 31%;
    }

    20% {
        opacity: .55;
        transform: scale(1);
        background-position: 80% 25%, 87% 31%, 78% 36%, 84% 39%;
    }

    44% {
        opacity: .24;
        transform: scale(1.12);
        filter: blur(.4px);
        background-position: 78% 21%, 90% 32%, 75% 39%, 85% 43%;
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
        filter: blur(1px);
        background-position: 77% 19%, 92% 33%, 73% 41%, 86% 45%;
    }
}

.topbar {
    background:
        linear-gradient(90deg, rgba(5,5,5,.94), rgba(5,11,31,.94), rgba(5,5,5,.94));
    border-bottom-color: rgba(247,251,255,.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(--july-red) 16%,
            var(--july-white) 38%,
            var(--july-blue) 62%,
            var(--july-red) 84%,
            transparent);
    opacity: .9;
    pointer-events: none;
}

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

.hero::after,
.hero-slider::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(247,251,255,.42) 1px, transparent 1.8px),
        linear-gradient(125deg, rgba(229,9,20,.10) 0 12%, transparent 12% 28%, rgba(247,251,255,.05) 28% 32%, transparent 32% 50%, rgba(36,87,214,.12) 50% 68%, transparent 68%);
    background-size: 92px 92px, 100% 100%;
    background-position: 18px 26px, center;
    opacity: .34;
    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: var(--july-sky);
}

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

.hero h1 span,
.hero-slider h1 span,
.monkeeguard-content h2 span {
    text-shadow:
        0 0 18px rgba(36,87,214,.26),
        0 0 30px rgba(229,9,20,.12);
}

.btn-primary,
.portal-btn:hover {
    background: linear-gradient(135deg, var(--july-red), #a70610 46%, var(--july-blue));
    box-shadow: 0 0 30px rgba(36,87,214,.24);
}

.btn-primary:hover,
.service-card a:hover,
.footer-column a:hover,
.footer-contact a:hover,
.navlinks a:hover {
    color: var(--july-sky);
}

.service-card.featured,
.featured-pricing,
.guard-screen,
.about-panel,
.feature-checklist {
    border-color: rgba(159,216,255,.28);
    box-shadow:
        0 20px 50px rgba(0,0,0,.16),
        0 0 34px rgba(36,87,214,.12);
}

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

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

.cta-box {
    border-color: rgba(36,87,214,.28);
    box-shadow:
        0 24px 50px rgba(0,0,0,.08),
        inset 0 3px 0 var(--july-blue);
}

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

.footer-social a:hover {
    background: var(--july-blue);
    border-color: var(--july-blue);
    box-shadow: 0 8px 20px rgba(36,87,214,.24);
}

@media (max-width: 700px) {
    body::before,
    body::after {
        opacity: .24;
        animation-duration: 6.5s;
    }

    .hero::after,
    .hero-slider::after,
    .page-hero::after {
        opacity: .24;
        background-size: 120px 120px, 100% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
        opacity: .16;
    }
}