/* ==========================================================
   IT Monkee - Thanksgiving Theme Override
   Warm harvest accents for Nov 12 through Thanksgiving Day.
   ========================================================== */

:root {
    --thanks-rust: #b84c0c;
    --thanks-amber: #f2a51a;
    --thanks-gold: #ffd166;
    --thanks-brown: #2a1308;
    --thanks-cream: #fff4df;
}

.topbar {
    background:
        linear-gradient(90deg, rgba(5,5,5,.95), rgba(42,19,8,.94), rgba(5,5,5,.95));
    border-bottom-color: rgba(242,165,26,.20);
    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(--thanks-rust), var(--thanks-gold), var(--thanks-amber), transparent);
    opacity: .86;
    pointer-events: none;
}

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

.hero::after,
.hero-slider::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 78% 24%, rgba(242,165,26,.18), transparent 22%),
        radial-gradient(circle at 18% 34%, rgba(184,76,12,.14), transparent 20%),
        linear-gradient(135deg, rgba(255,209,102,.10), transparent 44%),
        radial-gradient(circle, rgba(255,209,102,.18) 1px, transparent 1.8px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 104px 104px;
    background-position: center, center, center, 22px 26px;
    opacity: .40;
    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: .12;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 190px 190px;
    background-position: 36px 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='%23ffd166' stroke-opacity='.7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 64C47 58 57 44 61 25C45 31 35 43 30 64Z'/%3E%3Cpath d='M30 64C42 52 51 41 61 25'/%3E%3Cpath d='M34 54C25 48 22 38 25 28C35 34 39 43 34 54Z'/%3E%3Cpath d='M34 54C31 44 28 36 25 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(--thanks-gold);
}

.eyebrow::before {
    background: linear-gradient(90deg, var(--thanks-rust), var(--thanks-gold));
}

.hero h1 span,
.hero-slider h1 span,
.monkeeguard-content h2 span {
    text-shadow:
        0 0 20px rgba(242,165,26,.24),
        0 0 34px rgba(184,76,12,.12);
}

.btn-primary,
.portal-btn:hover {
    background: linear-gradient(135deg, var(--thanks-rust), #8f3609 48%, var(--thanks-amber));
    box-shadow: 0 0 30px rgba(242,165,26,.20);
}

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

.service-card.featured,
.featured-pricing,
.guard-screen,
.about-panel,
.feature-checklist {
    border-color: rgba(242,165,26,.30);
    box-shadow:
        0 20px 50px rgba(0,0,0,.16),
        0 0 34px rgba(242,165,26,.10);
}

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

.slider-dots .dot.active {
    background: linear-gradient(90deg, var(--thanks-rust), var(--thanks-gold));
}

.cta-box {
    border-color: rgba(242,165,26,.28);
    box-shadow:
        0 24px 50px rgba(0,0,0,.08),
        inset 0 3px 0 var(--thanks-amber);
}

.site-footer {
    background:
        linear-gradient(180deg, #020202, var(--thanks-brown));
    border-top-color: rgba(242,165,26,.16);
}

.footer-social a:hover {
    background: var(--thanks-rust);
    border-color: var(--thanks-rust);
    box-shadow: 0 8px 20px rgba(242,165,26,.24);
}

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

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