/* -----------------------------------------------------------------
   1. Global & Utilities Overrides
----------------------------------------------------------------- */

:root {
    --solution-navy: #0B0E2A;
    --solution-glow: #1E2D64;
    --solution-purple: #7B2CBF;
}

.bg-solution-navy {
    background-color: var(--solution-navy);
    background: radial-gradient(circle at center, var(--solution-glow) 0%, var(--solution-navy) 100%);
    color: #FFFFFF;
}

.noise-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

/* -----------------------------------------------------------------
   2. Typography & Header Overrides
----------------------------------------------------------------- */

.text-brand-red {
    color: #ba070b;
}

.border-solution-purple {
    border-color: var(--solution-purple);
}

.bg-solution-purple {
    background-color: var(--solution-purple);
}

.customspacing {
    letter-spacing: 2rem;
}
@media (max-width: 767px) {
    .customspacing {
        letter-spacing: 0.3rem;
    }
}

.solution-menu {
  background-color: rgba(var(--black-rgb), 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* -----------------------------------------------------------------
   3. Breakpoints & Responsive Logic
----------------------------------------------------------------- */

.bg-brand-red { background-color: #ba070b; }
.h05 { height: 0.125rem; }

/* Mobile Menu Styles */
#togglemenu.active {
  opacity: 1;
  pointer-events: auto;
  display: flex !important;
}

/* Two-Line Toggle Animation */
#menu-toggle.active .menu-line:nth-child(1) {
  transform: translateY(0.35rem) rotate(45deg);
}

#menu-toggle.active .menu-line:nth-child(2) {
  transform: translateY(-0.1rem) rotate(-45deg);
}

/* Mobile Overrides */
@media (max-width: 767px) {
  .mb\:flex { display: flex !important; }
}

/* Ultrawide / Large Screens */
@media (min-width: 2000px) {
.ultra-w {
    padding-left: 17rem;
}

}


/* -----------------------------------------------------------------
   4. Custom Mouse Cursor
----------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* Hide default cursor */
    body, a, button, input, textarea, select, .cursor-pointer {
        cursor: none !important;
    }

    .ape-cursor,
    .ape-follower {
        position: fixed;
        top: 0;
        left: 0;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        /* 
           Using mix-blend-mode: difference with white background 
           makes the cursor appear Black on White backgrounds (matching black4)
           and White on Dark backgrounds (visibility).
        */
        mix-blend-mode: difference;
        background-color: #ba070b;
        display: block;
        will-change: transform;
    }

    .ape-cursor {
        width: 0.8rem;
        height: 0.8rem;
    }

    .ape-follower {
        width: 3.5rem;
        height: 3.5rem;
        opacity: 0.3; /* Minimalist opacity */
    }

}

/* Hide custom cursor on touch devices */
@media (hover: none), (pointer: coarse) {
    .ape-cursor, .ape-follower {
        display: none !important;
    }
}