/* ==========================================================
   IT Monkee - Cybersecurity Awareness Theme Override
   October campaign styling for security and MonkeeGuard.
   ========================================================== */

:root {
    --cyber-green: #24f58c;
    --cyber-blue: #38bdf8;
    --cyber-navy: #03111d;
    --cyber-alert: #e50914;
    --cyber-ink: #02070c;
}

.topbar {
    background:
        linear-gradient(90deg, rgba(2,7,12,.96), rgba(3,17,29,.95), rgba(2,7,12,.96));
    border-bottom-color: rgba(36,245,140,.20);
    box-shadow: 0 8px 30px rgba(0,0,0,.32);
}

.topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyber-blue), var(--cyber-green), var(--cyber-alert), transparent);
    opacity: .9;
    pointer-events: none;
}

.hero,
.hero-slider,
.page-hero {
    background-color: var(--cyber-ink);
}

.hero::after,
.hero-slider::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36,245,140,.07) 1px, transparent 1px),
        radial-gradient(circle at 74% 28%, rgba(36,245,140,.16), transparent 24%),
        radial-gradient(circle at 20% 36%, rgba(56,189,248,.12), transparent 22%);
    background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
    background-position: center;
    opacity: .58;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.hero::before,
.hero-slider::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 180px 180px;
    background-position: 36px 32px;
    background-image: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2324f58c' stroke-opacity='.62' stroke-width='3'%3E%3Cpath d='M20 26H46V46H74'/%3E%3Cpath d='M20 68H42V52H74'/%3E%3Ccircle cx='20' cy='26' r='5' fill='%2324f58c' fill-opacity='.44'/%3E%3Ccircle cx='74' cy='46' r='5' fill='%2338bdf8' fill-opacity='.44'/%3E%3Ccircle cx='74' cy='52' r='5' fill='%2324f58c' fill-opacity='.44'/%3E%3Ccircle cx='20' cy='68' r='5' fill='%2338bdf8' fill-opacity='.44'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.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(--cyber-green);
}

.eyebrow::before {
    background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-green));
}

.hero h1 span,
.hero-slider h1 span,
.monkeeguard-content h2 span {
    text-shadow:
        0 0 20px rgba(36,245,140,.26),
        0 0 36px rgba(56,189,248,.12);
}

.btn-primary,
.portal-btn:hover {
    background: linear-gradient(135deg, var(--cyber-alert), #8f0610 46%, #076d4e);
    box-shadow:
        0 0 30px rgba(36,245,140,.18),
        0 0 18px rgba(229,9,20,.18);
}

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

.monkeeguard-section {
    background:
        linear-gradient(135deg, #02070c, #03111d);
    border-top-color: rgba(36,245,140,.22);
    border-bottom-color: rgba(56,189,248,.18);
}

.monkeeguard-panel::before {
    content: "SECURITY MONTH";
    position: absolute;
    right: 20px;
    top: -14px;
    z-index: 2;
    padding: 7px 11px;
    background: #03111d;
    border: 1px solid rgba(36,245,140,.46);
    color: var(--cyber-green);
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

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

.guard-screen {
    background:
        linear-gradient(160deg, rgba(36,245,140,.08), rgba(56,189,248,.03)),
        #061018;
}

.guard-title {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(36,245,140,.20);
}

.pricing-badge,
.service-icon {
    box-shadow: 0 0 18px rgba(56,189,248,.16);
}

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

.cta-box {
    border-color: rgba(36,245,140,.28);
    box-shadow:
        0 24px 50px rgba(0,0,0,.08),
        inset 0 3px 0 var(--cyber-green);
}

.site-footer {
    background:
        linear-gradient(180deg, #020202, var(--cyber-navy));
    border-top-color: rgba(36,245,140,.16);
}

.footer-social a:hover {
    background: #076d4e;
    border-color: var(--cyber-green);
    box-shadow: 0 8px 20px rgba(36,245,140,.22);
}

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

    .hero::before,
    .hero-slider::before,
    .page-hero::before {
        opacity: .10;
        background-size: 230px 230px;
    }

    .monkeeguard-panel::before {
        right: 14px;
        top: -12px;
    }
}