/* Custom Tailwind Configuration (Ensure colors and fonts are loaded) */
        :root {
            --color-primary: #0F2A44; /* Deep Teal/Navy */
            --color-secondary: #4FD1C5; /* Soft Cyan/Mint */
            --color-bg: #F8F9FB; /* Soft off-white */
            --color-text: #2B2B2B; /* Charcoal */
        }
        
        /* Apply custom fonts and base colors */
        body {
            background-color: var(--color-bg);
            color: var(--color-text);
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }

        /* Utility class for main headings */
        .heading-font {
            font-family: 'Poppins', sans-serif;
        }

        /* Sticky Header Blur Effect */
        .sticky-header {
            transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
        }
        .scrolled {
            background-color: rgba(248, 249, 251, 0.95); /* Soft off-white with transparency */
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
        }

        /* Navigation link underline animation */
        .nav-link {
            position: relative;
            padding-bottom: 4px;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            background-color: var(--color-primary);
            transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
            left: 0;
        }

        /* Button Hover Effect */
        .btn-primary {
            transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
        }
        .btn-primary:hover {
            background-color: #0d253a; /* Darker primary */
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -4px rgba(15, 42, 68, 0.4);
        }
        .btn-secondary:hover {
            background-color: #43b8a9; /* Darker secondary */
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -4px rgba(79, 209, 197, 0.4);
        }

        /* Animation Classes */
        .animate-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Simulated Tech Illustration (Hero) */
        .tech-illustration {
            animation: float 4s ease-in-out infinite alternate;
        }
        @keyframes float {
            0% { transform: translate(0, 0); }
            100% { transform: translate(0, -10px); }
        }

        /* Hide pages by default, managed by JS */
        .page-section {
            display: none;
            min-height: calc(100vh - 80px - 400px); /* Account for header and footer heights */
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Modal backdrop for quick view/login */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            z-index: 50;
        }