/* ==========================================================
   IT Monkee - Halloween Theme Override
   Spooky-tech accents for October.
   ========================================================== */

:root {
    --halloween-orange: #ff7a18;
    --halloween-green: #39ff88;
    --halloween-purple: #7b2cff;
    --halloween-black: #060308;
    --halloween-amber: #ffd166;
}

.topbar {
    background:
        linear-gradient(90deg, rgba(5,5,5,.96), rgba(19,8,28,.94), rgba(5,5,5,.96));
    border-bottom-color: rgba(255,122,24,.22);
    box-shadow: 0 8px 28px rgba(0,0,0,.34);
}

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

.logo {
    position: relative;
}

.logo::after {
    content: "";
    position: absolute;
    left: 12px;
    top: -11px;
    width: 46px;
    height: 42px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: rotate(-8deg);
    transform-origin: 58% 88%;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.36));
    background-image: url("data:image/svg+xml,%3Csvg width='96' height='82' viewBox='0 0 96 82' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 54C30 38 42 18 48 5C55 22 68 39 79 54C61 48 39 48 20 54Z' fill='%23210b2f' stroke='%23050505' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M39 34C50 37 59 35 68 27' fill='none' stroke='%23ff7a18' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M14 55C31 48 66 48 82 55V64C63 70 33 70 14 64V55Z' fill='%23210b2f' stroke='%23050505' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M22 57C37 53 59 53 74 57' fill='none' stroke='%23ff7a18' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hero,
.hero-slider,
.page-hero {
    background-color: var(--halloween-black);
}

.hero::after,
.hero-slider::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 76% 22%, rgba(255,122,24,.20), transparent 20%),
        radial-gradient(circle at 22% 30%, rgba(57,255,136,.10), transparent 18%),
        linear-gradient(135deg, rgba(123,44,255,.12), transparent 46%),
        radial-gradient(circle, rgba(255,122,24,.18) 1px, transparent 1.8px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 94px 94px;
    background-position: center, center, center, 24px 22px;
    opacity: .42;
    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: .10;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 190px 190px;
    background-position: 38px 42px;
    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='%2339ff88' stroke-opacity='.7' stroke-width='3'%3E%3Cpath d='M20 72C32 42 56 42 72 72'/%3E%3Cpath d='M22 72H74'/%3E%3Cpath d='M48 42V24'/%3E%3Cpath d='M40 28C44 22 52 22 56 28'/%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(--halloween-orange);
}

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

.hero h1 span,
.hero-slider h1 span,
.monkeeguard-content h2 span {
    text-shadow:
        0 0 20px rgba(255,122,24,.25),
        0 0 34px rgba(57,255,136,.10);
}

.btn-primary,
.portal-btn:hover {
    background: linear-gradient(135deg, var(--halloween-orange), #b84c0c 52%, #1f7a48);
    box-shadow: 0 0 30px rgba(255,122,24,.24);
}

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

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

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

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

.cta-box {
    border-color: rgba(255,122,24,.30);
    box-shadow:
        0 24px 50px rgba(0,0,0,.08),
        inset 0 3px 0 var(--halloween-orange);
}

.site-footer {
    background:
        linear-gradient(180deg, #020202, #12081d);
    border-top-color: rgba(255,122,24,.16);
}

.footer-social a:hover {
    background: var(--halloween-orange);
    border-color: var(--halloween-orange);
    box-shadow: 0 8px 20px rgba(255,122,24,.24);
}

@media (max-width: 700px) {
    .logo::after {
        left: 9px;
        top: -12px;
        width: 40px;
        height: 36px;
    }

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

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