:root {
            --primary-blue: #131D5E;
            --secondary-blue: #2D4ED8;
            --brand-50: #EEF1FA;
            --brand-100: #D6DDF1;
            --brand-500: #3B5BDB;
            --brand-600: #2D4ED8;
            --brand-700: #1E3AAD;
            --brand-800: #172B83;
            --brand-900: #131D5E;
            --brand-950: #0B1238;
            --dark-gray: #1f2937;
            --light-gray: #f3f4f6;
        }

        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            direction: ltr;
        }

        .hero-gradient {
            background: linear-gradient(135deg, rgba(45, 78, 216, 0.85) 0%, rgba(19, 29, 94, 0.92) 55%, rgba(11, 18, 56, 0.95) 100%);
        }

        .industrial-pattern {
            background-image: url('https://www.transparenttextures.com/patterns/concrete-wall.png');
            background-blend-mode: overlay;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .timeline-item {
            position: relative;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            inset-inline-start: -38px;
            top: 8px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--brand-500);
            border: 3px solid var(--brand-900);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease forwards;
        }

        .delay-100 {
            animation-delay: 0.1s;
        }

        .delay-200 {
            animation-delay: 0.2s;
        }

        .delay-300 {
            animation-delay: 0.3s;
        }

        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            inset-inline-start: 0;
            background-color: var(--brand-800);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .product-category-btn.active:hover {
            background-color: var(--brand-900);
            color: #ffffff;
        }

        .map-container {
            filter: grayscale(30%) contrast(110%) brightness(95%);
        }