:root {
            --med-white: #ffffff;
            --sage: #f2f7f5;
            --sage-dark: #6b8c7f;
            --trust-blue: #0ea5e9;
            --teal: #14b8a6;
            --navy: #0f172a;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--med-white);
            color: #334155;
            scroll-behavior: smooth;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .heading { font-family: 'Sora', sans-serif; }
        .manrope { font-family: 'Manrope', sans-serif; }

        .nav-blur {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .dark-mode {
            background-color: #020617;
            color: #f8fafc;
        }
        .dark-mode .nav-blur { background: rgba(2, 6, 23, 0.95); border-color: rgba(255,255,255,0.1); }
        .dark-mode .bg-white { background-color: #1e293b; color: #f1f5f9; }
        .dark-mode .bg-slate-50 { background-color: #0f172a; }
        .dark-mode .text-navy { color: #f1f5f9; }
        .dark-mode .border-slate-100, .dark-mode .border-slate-200 { border-color: rgba(255,255,255,0.05); }

        .health-card {
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .health-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1);
        }

        .gradient-hero {
            background: radial-gradient(circle at top right, rgba(20, 184, 166, 0.08), transparent 40%),
                        radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.08), transparent 40%);
        }

        .modal-active { overflow: hidden; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade { animation: fadeIn 0.8s ease-out forwards; }

        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }