/* Custom Styles */
        body {
            font-family: 'Poppins', 'Inter', sans-serif;
            color: #212529; /* brand-gray-900 */
            background-color: #ffffff;
        }
        .page-section {
            display: none;
            animation: fadeIn 0.5s ease-out forwards;
        }
        .page-section.active {
            display: block;
        }
        
        /* Enhanced Hero Gradient - Darker Blue with Server Room Background */
        .hero-gradient {
            background: linear-gradient(135deg, #3b4d9f 0%, #1a237e 100%);
            position: relative;
            overflow: hidden;
        }
        
        /* Server room background image */
        .hero-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1920&q=80') center/cover no-repeat;
            opacity: 0.12;
            z-index: 0;
        }
        
        /* Subtle overlay for better text readability */
        .hero-gradient::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center, rgba(59, 77, 159, 0.3) 0%, rgba(26, 35, 126, 0.7) 100%);
            z-index: 1;
        }
        
        /* Animated Background Shapes - Lighter, more subtle */
        .hero-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            animation: float 20s infinite ease-in-out;
            opacity: 0.15;
            z-index: 2;
        }
        .hero-shape-1 {
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, #3b4d9f 0%, #1a237e 100%);
            top: -10%;
            right: 10%;
            animation-delay: 0s;
        }
        .hero-shape-2 {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
            bottom: -5%;
            left: 10%;
            animation-delay: 5s;
        }
        .hero-shape-3 {
            width: 250px;
            height: 250px;
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            top: 50%;
            left: 60%;
            animation-delay: 10s;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(50px, -50px);
            }
        }
        
        /* Network connection pattern - MSP themed */
        .tech-pattern {
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.4;
            z-index: 3;
        }
        
        /* Ensure hero content appears above background layers */
        .hero-gradient .container {
            position: relative;
            z-index: 10;
        }
        
        /* Page Hero Styles - Apply to all page hero sections */
        .page-hero {
            background: linear-gradient(135deg, #3b4d9f 0%, #1a237e 100%);
            position: relative;
            overflow: hidden;
            color: white;
        }
        
        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1920&q=80') center/cover no-repeat;
            opacity: 0.06;
            z-index: 0;
        }
        
        /* Dark overlay for better text contrast */
        .page-hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center, rgba(26, 35, 126, 0.4) 0%, rgba(26, 35, 126, 0.75) 100%);
            z-index: 1;
        }
        
        .page-hero .container {
            position: relative;
            z-index: 10;
        }
        
        /* Text styling for page heroes - Enhanced readability */
        .page-hero h1 {
            text-shadow: 0 3px 25px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        
        .page-hero p {
            color: rgba(255, 255, 255, 0.98);
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.4);
        }
        
        .page-hero ul li {
            color: rgba(255, 255, 255, 0.98);
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.4);
        }
        
        /* Remove tech pattern from page-hero sections for better readability */
        .page-hero .tech-pattern {
            display: none;
        }
        
        /* Glass Morphism Effect */
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* Text Glow Effect */
        .text-glow {
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        /* Better text readability on gradients */
        .hero-text {
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
        }
        
        .section-text {
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
        }
        
        /* Icon Hover Effects */
        .icon-hover {
            transition: all 0.3s ease;
        }
        .icon-hover:hover {
            transform: translateY(-5px) scale(1.1);
        }
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
            cursor: pointer;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #008ae6; /* brand-blue-600 */
            transition: width 0.3s ease;
        }
        .nav-link.active,
        .nav-link:hover {
            color: #008ae6; /* brand-blue-600 */
        }
        .nav-link.active::after {
            width: 100%;
        }
        .nav-link-footer {
             transition: color 0.3s ease;
             color: #ced4da; /* brand-gray-400 */
        }
        .nav-link-footer:hover {
             color: #ffffff;
        }
        .nav-link-logo {
            cursor: pointer;
        }

        /* Mobile Nav */
        .mobile-nav-link {
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .mobile-nav-link.active,
        .mobile-nav-link:hover {
            background-color: #e0f0fe; /* brand-blue-100 */
            color: #008ae6; /* brand-blue-600 */
        }
        
        /* Custom Button Styles */
        .btn {
            @apply inline-block px-6 py-3 rounded-2xl font-semibold text-center transition-all duration-300 ease-in-out;
        }
        .btn-primary {
            @apply bg-gradient-to-r from-brand-blue-600 to-brand-blue-700 text-white shadow-xl hover:shadow-2xl font-bold;
            border: 2px solid #0072c4;
            position: relative;
            overflow: hidden;
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }
        .btn-primary:hover::before {
            left: 100%;
        }
        .btn-primary:hover {
            @apply shadow-2xl -translate-y-1;
            border-color: #005a9e;
            background: linear-gradient(135deg, #0072c4 0%, #005a9e 100%);
        }
        .btn-secondary {
            @apply bg-gradient-to-r from-brand-gray-800 to-gray-900 text-white shadow-xl hover:shadow-2xl font-bold;
            border: 2px solid #4b5563;
            position: relative;
            overflow: hidden;
        }
        .btn-secondary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s;
        }
        .btn-secondary:hover::before {
            left: 100%;
        }
        .btn-secondary:hover {
            @apply shadow-2xl -translate-y-1;
            border-color: #1f2937;
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
        }
        .btn-outline {
            @apply bg-transparent border-2 border-brand-blue-600 text-brand-blue-600 rounded-2xl;
        }
        .btn-outline:hover {
            @apply bg-brand-blue-600 text-white;
        }
        .btn-lg {
             @apply px-8 py-4 text-lg rounded-2xl;
        }
        
        /* Form Button Enhancements - Ensure form buttons get the fancy treatment */
        button.btn, button[type="submit"].btn {
            border-radius: 1rem !important;
            padding: 0.75rem 2rem !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
        }

        /* Image Optimization */
        img {
            max-width: 100%;
            height: auto;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }
        
        /* Logo Optimization */
        .nav-link-logo img,
        footer img {
            image-rendering: high-quality;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        
        /* External Image Optimization */
        img[src*="unsplash.com"],
        img[src*="wikimedia.org"],
        img[src*="upload.wikimedia.org"] {
            loading: lazy;
        }

        /* Section Backgrounds */
        .section-bg-light {
            background-color: #f8f9fa; /* brand-gray-50 */
        }
        .section-bg-white {
            background-color: #ffffff;
        }

        /* Accordions */
        .faq-item[data-state="open"] .faq-question,
        .bi-item[data-state="open"] .bi-question {
            /* color: #008ae6; */ /* brand-blue-600 - Removed color change on open for cleaner look */
        }
        .faq-item[data-state="open"] .faq-icon,
        .bi-item[data-state="open"] .bi-icon {
            transform: rotate(180deg);
        }
        .faq-icon, .bi-icon {
            transition: transform 0.3s ease;
        }
        .faq-answer, .bi-answer {
            overflow: hidden;
             /* Using animation keyframes now */
        }
       
        /* Use CSS variables for Radix-like height animation if needed, or rely on keyframes */
        /* If not using Radix library, keyframes provide animation */
        
        /* Specific BI item styling */
         .bi-item[data-state="open"] .bi-question {
            background-color: #f0f8ff; /* brand-blue-50 */
            border-left-color: #008ae6; /* brand-blue-600 */
        }
        
        /* Custom Image Placeholders */
        .img-placeholder {
            @apply w-full h-full flex items-center justify-center rounded-lg text-white text-center;
            background: linear-gradient(135deg, #0072c4, #00a9e0);
        }
        .img-placeholder-logo {
            @apply w-full h-full flex items-center justify-center rounded-lg bg-brand-gray-100 text-brand-gray-500;
            border: 1px dashed #ced4da; /* brand-gray-400 */
        }
        
        /* Blog Post Formatting */
        .blog-content h2 {
            @apply text-3xl font-bold text-brand-gray-800 mt-10 mb-5 border-l-4 border-brand-blue-500 pl-4;
        }
        .blog-content h3 {
            @apply text-2xl font-semibold text-brand-gray-700 mt-8 mb-4;
        }
        .blog-content p {
            @apply text-lg leading-relaxed text-brand-gray-700 mb-6; /* Slightly larger base text */
        }
        .blog-content ul {
            @apply list-disc list-outside pl-8 mb-6 text-brand-gray-700 space-y-3 text-lg;
        }
        .blog-content ol {
            @apply list-decimal list-outside pl-8 mb-6 text-brand-gray-700 space-y-3 text-lg;
        }
        .blog-content li {
            @apply leading-relaxed pb-1; /* Added slight bottom padding */
        }
        .blog-content blockquote {
            @apply border-l-4 border-brand-blue-500 pl-6 py-3 my-8 italic text-xl text-brand-gray-600 bg-brand-blue-50 rounded-r-lg; /* Added rounding */
        }
        .blog-content code {
            @apply bg-brand-gray-100 text-brand-gray-800 px-2 py-1 rounded-md text-base font-mono; /* Explicit font */
        }
        .blog-content pre {
            @apply bg-brand-gray-900 text-white p-4 rounded-lg overflow-x-auto my-6 text-sm font-mono; /* Explicit font */
        }
        .blog-content a:not(.btn) { /* Ensure buttons aren't affected */
            @apply text-brand-blue-600 hover:underline;
        }
        .blog-content strong {
            @apply font-semibold text-brand-gray-800; /* Darker bold */
        }
        /* Enhanced blog content styling for better readability */
        .blog-content {
            max-width: 900px;
            margin: 0 auto;
        }
        .blog-content > * {
            max-width: 100%;
        }
        .blog-content h2 {
            font-size: 2rem;
            font-weight: 800;
            color: #111827;
            margin-top: 2rem;
            margin-bottom: 1rem;
            padding: 1.5rem;
            border-left: 5px solid #0072c4;
            background: linear-gradient(to right, #EBF5FF 0%, rgba(235, 245, 255, 0.2) 50%, transparent 100%);
            border-radius: 0.5rem;
            line-height: 1.3;
        }
        .blog-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1F2937;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            padding: 0.75rem 0;
            display: flex;
            align-items: center;
        }
        .blog-content h3::before {
            content: '▹';
            color: #0072c4;
            margin-right: 0.75rem;
            font-size: 1.5rem;
            line-height: 1;
        }
        .blog-content p {
            font-size: 1.125rem;
            line-height: 1.875;
            color: #374151;
            margin-bottom: 1.5rem;
        }
        .blog-content ul {
            margin-top: 1rem;
            margin-bottom: 1.5rem;
            padding-left: 2rem;
            list-style: none;
        }
        .blog-content ul li {
            margin-bottom: 0.75rem;
            padding-left: 1.5rem;
            position: relative;
            font-size: 1.05rem;
            line-height: 1.75;
        }
        .blog-content ul li::before {
            content: '▹';
            position: absolute;
            left: 0;
            color: #0072c4;
            font-weight: bold;
            font-size: 1rem;
        }
        .blog-content ol {
            margin-top: 1rem;
            margin-bottom: 1.5rem;
            padding-left: 2rem;
            list-style: decimal;
        }
        .blog-content ol li {
            margin-bottom: 0.75rem;
            padding-left: 0.5rem;
            font-size: 1.05rem;
            line-height: 1.75;
        }
        .blog-content ol li::marker {
            color: #0072c4;
            font-weight: bold;
        }
        /* Increased spacing between elements */
        .blog-content h2 + p, .blog-content h3 + p, .blog-content p + p, .blog-content p + ul, .blog-content ul + p, .blog-content ol + p, .blog-content p + ol {
            @apply mt-6;
        }
         .blog-content ul + h3, .blog-content ol + h3, .blog-content p + h3,
         .blog-content ul + h2, .blog-content ol + h2, .blog-content p + h2 {
             @apply mt-10;
         }


        /* Case Study Card */
        .case-study-card {
            @apply bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 flex flex-col;
        }
        .case-study-card:hover {
            @apply shadow-2xl -translate-y-1;
        }
        .case-study-card .p-8 {
             flex-grow: 1; /* Make content area grow */
        }

        /* Clip path for hero image decoration */
        .clip-path-polygon-left {
            clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
        }

        /* Blog Sidebar Active Link */
        .blog-category-link.active {
            font-weight: 700;
            color: #0072c4; /* brand-blue-700 */
        }
        
        /* Ensure smooth scroll */
        html {
            scroll-behavior: smooth;
        }
        
        /* Basic Radix style override if needed */
        [data-state='open'] > div { /* Target content div directly */
           animation: accordion-down 0.3s ease-out;
        }
        [data-state='closed'] > div {
           animation: accordion-up 0.3s ease-out;
        }


/* ===== END OF CUSTOM STYLES ===== */