        /* Custom Color Palette */
        :root {
            --bg-light: #f7f9fb; /* Light Mist Gray */
            --primary-teal: #008080; /* Deep Teal */
            --secondary-green: #38a169; /* Soft Green */
            --highlight-gold: #b8860b; /* Muted Gold */
            --text-charcoal: #2c3e50; /* Charcoal Gray */
            --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-charcoal);
            scroll-behavior: smooth;
        }
        h1, h2, h3, h4 {
            font-family: 'Poppins', sans-serif;
            color: var(--text-charcoal);
        }
        .hero-heading {
            font-family: 'DM Serif Display', serif;
            font-weight: 400;
        }
        .stats-font {
            font-family: 'Roboto Mono', monospace;
        }

        /* Accent Styles */
        .text-primary { color: var(--primary-teal); }
        .bg-primary { background-color: var(--primary-teal); }
        .text-secondary { color: var(--secondary-green); }

        /* Button Styles */
        .btn-primary {
            background-color: var(--primary-teal);
            color: white;
            border-radius: 9999px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 128, 128, 0.3);
        }
        .btn-primary:hover {
            background-color: #006b6b;
            box-shadow: 0 6px 15px rgba(0, 128, 128, 0.4);
        }

        /* Card Styles */
        .card-soft {
            background-color: white;
            border-radius: 1.5rem; /* rounded-3xl */
            box-shadow: var(--shadow-soft);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-soft:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        /* Custom animation for hero background lines */
        @keyframes flowUp {
            0% { transform: translateY(100%); opacity: 0.5; }
            100% { transform: translateY(-50%); opacity: 0; }
        }
        .hero-line-animation {
            animation: flowUp 15s linear infinite;
        }

        /* Modal specific styling */
        .modal-content-area {
            max-height: 90vh;
            overflow-y: auto;
        }
