@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: #f6f9fc; /* soft white-blue base */
        }

        .heading-font {
            font-family: 'Playfair Display', serif;
        }

        /* card, container, and accent overrides for light theme */
        .bg-soft-white {
            background-color: #ffffff;
        }

        .bg-soft-blue {
            background-color: #eef4fa;
        }

        .text-soft-blue {
            color: #1a4c7a;
        }

        .border-soft-blue {
            border-color: #b6d0e8;
        }

        .step {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slide {
            animation: slideIn 0.6s ease forwards;
        }
        
        .slide-out {
            animation: slideOut 0.5s ease forwards;
        }
        
        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(-30px);
            }
        }
        
        .slide-out-right {
            animation: slideOutRight 0.5s ease forwards;
        }
        
        @keyframes slideOutRight {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(30px);
            }
        }
        
        .slide-out-up {
            animation: slideOutUp 0.5s ease forwards;
        }
        
        @keyframes slideOutUp {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #1a6bb0, #4b8fcb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .card-gradient {
            background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
        }
        
        button:focus-visible {
            outline: 3px solid #2b7bb6;
            outline-offset: 2px;
        }

        .profit-blue {
            color: #1a6bb0;
        }

        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 30px -12px rgba(0, 40, 80, 0.15);
        }

        /* light theme specific overrides */
        .bg-zinc-950, .bg-zinc-900, .bg-zinc-800, .bg-zinc-700 {
            background-color: #ffffff !important;
        }

        .text-zinc-400, .text-zinc-500 {
            color: #4b5b6e !important;
        }
        
        .text-darkorange {
            color: #FF8C00 !important;
        }

        .text-zinc-300 {
            color: #7a8b9f !important;
        }

        .border-zinc-800, .border-zinc-700 {
            border-color: #dce5ed !important;
        }

        .bg-emerald-500, .bg-emerald-400, .bg-emerald-900\/30 {
            background-color: #2b7bb6 !important;
        }

        .bg-emerald-500\/10 {
            background-color: rgba(43, 123, 182, 0.08) !important;
        }
7
        .text-emerald-400, .text-emerald-300, .profit-green {
            color: #1a6bb0 !important;
        }

        .text-emerald-300 {
            color: #3a8ac9 !important;
        }

        .border-emerald-500\/30 {
            border-color: rgba(43, 123, 182, 0.25) !important;
        }

        .bg-amber-500, .bg-amber-400, .bg-amber-900\/30 {
            background-color: #d48c2c !important;
        }

        .text-amber-400 {
            color: #b8792a !important;
        }

        .border-amber-500\/30 {
            border-color: rgba(212, 140, 44, 0.25) !important;
        }

        .bg-rose-500, .text-rose-400 {
            background-color: #c4556b !important;
            color: #b1455b !important;
        }

        .border-rose-500\/30 {
            border-color: rgba(196, 85, 107, 0.25) !important;
        }

        .text-white {
            color: #1f2a3a !important;
        }

        .text-black {
            color: #0b1c2e !important;
        }

        .bg-white {
            background-color: #ffffff !important;
        }

        .bg-gradient-to-r {
            background-image: linear-gradient(to right, #4b8fcb, #6aa6d9) !important;
        }

        .shadow-emerald-500\/30 {
            --tw-shadow-color: rgba(43, 123, 182, 0.25);
        }

        .bg-zinc-900\/70 {
            background-color: rgba(245, 249, 252, 0.85) !important;
        }

        .bg-zinc-950 {
            background: #f6f9fc !important;
        }

        /* fixed top bar light */
        .fixed.top-0.bg-zinc-900 {
            background-color: #ffffff !important;
            box-shadow: 0 2px 12px rgba(0, 20, 40, 0.06);
        }

        .bg-zinc-800 {
            background-color: #dce5ed !important;
        }

        .border-emerald-500 {
            border-color: #2b7bb6 !important;
        }

        .bg-emerald-500.text-black {
            color: #ffffff !important;
        }

        .bg-emerald-500.text-black:hover {
            background-color: #2269a0 !important;
        }

        .bg-white.text-black {
            background-color: #ffffff !important;
            color: #0b1c2e !important;
            border: 1px solid #d0dde8;
        }

        .bg-white.text-black:hover {
            background-color: #e6f0fa !important;
        }

        .bg-soft-white {
            background: #ffffff;
        }

        .bg-soft-blue {
            background: #eef4fa;
        }

        .text-soft-blue {
            color: #1a4c7a;
        }

        .border-soft-blue {
            border-color: #b6d0e8;
        }

        .ring-soft-blue {
            --tw-ring-color: #b6d0e8;
        }

        .hover\:bg-emerald-400:hover {
            background-color: #3a8ac9 !important;
        }

        .hover\:bg-emerald-600:hover {
            background-color: #1f5f8f !important;
        }
        
        #contact-panel {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-origin: bottom right;
        }
        
        #contact-panel.show {
            display: block;
            opacity: 1;
            transform: scale(1);
        }
        
        /* Pulse animation for notification badge */
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .notification-badge {
            animation: pulse 2s infinite;
        }
        
        /* Input focus effects */
        input:focus, textarea:focus {
            box-shadow: 0 0 0 3px rgba(43, 123, 182, 0.1);
        }
        
        /* Hover animation for contact cards */
        .contact-card {
            transition: all 0.3s ease;
        }
        
        .contact-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
        }
        
        
        /* Slow bounce animation for floating card */
        @keyframes bounce-slow {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-8px);
            }
        }
        
        .animate-bounce-slow {
            animation: bounce-slow 3s ease-in-out infinite;
        }
        
        @keyframes badge-pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        .badge-pulse {
            animation: badge-pulse 2s ease-in-out infinite;
        }
        
        /* Shimmer effect for premium badges */
        @keyframes badge-shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }
        
        .badge-shimmer {
            background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
            background-size: 200% 100%;
            animation: badge-shimmer 2s linear infinite;
        }
        
        /* Image container responsive handling */
        .screen-image-container {
            position: relative;
            width: 100%;
            max-width: 392px;
            margin: 0 auto;
        }
        
        /* Aspect ratio maintainer */
        .aspect-ratio-box {
            aspect-ratio: 392 / 584;
            width: 100%;
            overflow: hidden;
        }
        
        /* Responsive image scaling */
        .responsive-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        
        /* Glass morphism for badges */
        .glass-badge {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        /* Floating card shadow enhancement */
        .floating-card {
            box-shadow: 0 20px 60px -15px rgba(26, 107, 176, 0.15);
        }
        
        .listicle {
            list-style: none;
            padding: 0;
            margin: 25px 0;
        }
        
        .listicle li {
            position: relative;
            padding: 14px 18px 14px 50px;
            margin-bottom: 12px;
            background: #ffffff;
            border: 1px solid #e8eef5;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
            color: #2c3e50;
            font-size: 16px;
            line-height: 1.5;
            transition: all 0.25s ease;
        }
        
        .listicle li::before {
            content: "✓";
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #28a745;
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 22px;
            font-size: 13px;
        }
        
        .listicle li:last-child::before {
            background: #FFA500;
        }
        
        .listicle-list li:hover {
            transform: translateX(6px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        
        /* Responsive breakpoints */
        @media (max-width: 768px) {
            .screen-image-container {
                max-width: 100%;
                padding: 0 1rem;
            }
            
            .floating-stats-card {
                display: none !important;
            }
            #logoContainer {
                display: none;
            }
        }
        
        @media (max-width: 480px) {
            .badge-text {
                font-size: 0.7rem;
                padding: 0.5rem 0.75rem;
            }
        }
        
        /* Solution-specific animations */
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-10px) rotate(1deg);
            }
        }
        
        .solution-image-container {
            animation: float 6s ease-in-out infinite;
        }
        
        /* Benefit badges hover effect */
        .benefit-badge {
            transition: all 0.3s ease;
        }
        
        .benefit-badge:hover {
            transform: translateX(5px);
            border-color: #1a6bb0;
            background: #eef4fa;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .solution-image-container {
                max-width: 100%;
                padding: 0 1rem;
            }
            
            .benefit-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 480px) {
            .benefit-grid {
                grid-template-columns: 1fr;
            }
            
            .solution-badge {
                font-size: 0.7rem;
                padding: 0.4rem 0.75rem;
            }
        }
        
        /* Add to your style section */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .logo-image {
            width: 2rem;
            height: 2rem;
            object-fit: contain;
            flex-shrink: 0;
        }
        
        .logo-text {
            font-weight: 600;
            font-size: 1.25rem;
            letter-spacing: -0.025em;
            color: #1a4c7a;
        }
        
        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .logo-text {
                color: #ffffff;
            }
        }
        
        /* Hover effect */
        .logo-container:hover .logo-image {
            transform: rotate(-5deg) scale(1.05);
            transition: transform 0.3s ease;
        }
        
        /* M-PESA card enhancements */
        .mpesa-card {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        .mpesa-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.15);
        }
        
        /* Step number animation */
        .step-number {
            transition: all 0.3s ease;
        }
        
        .step-number:hover {
            transform: scale(1.1);
        }
        
        /* Pulse animation for the phone preview */
        @keyframes pulse-dot {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.5;
                transform: scale(0.8);
            }
        }
        
        .animate-pulse-dot {
            animation: pulse-dot 2s infinite;
        }
        
        /* Copy button feedback */
        .copy-success {
            background-color: #10b981;
            color: white;
        }
        
        .copy-success i {
            color: white !important;
        }
        
        /* Amount cards hover effect */
        .amount-card {
            transition: all 0.3s ease;
        }
        
        .amount-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
        }
        
        /*#paywall,
        #screen-1,
        #screen-2,
        #screen-3,
        
        #screen-5,
        #screen-6 {
            scroll-margin-top: 120px;
        }
        
        #screen-4 {
            scroll-margin-top: 160px;
        }*/
                
        /* Menu Dropdown Animation */
        #menu-dropdown {
            transform-origin: top right;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        #menu-dropdown.show {
            display: block;
            opacity: 1;
            transform: scale(1);
        }
        
        /* Hamburger Animation */
        #menu-toggle.active #menu-bar1 {
            transform: rotate(45deg) translate(2px, 2px);
        }
        
        #menu-toggle.active #menu-bar2 {
            opacity: 0;
            transform: scaleX(0);
        }
        
        #menu-toggle.active #menu-bar3 {
            transform: rotate(-45deg) translate(2px, -2px);
        }
        
        /* Menu Item Hover Effects */
        .menu-item {
            position: relative;
            transition: all 0.2s ease;
        }
        
        .menu-item:hover {
            background: #eef4fa;
            padding-left: 1.25rem;
        }
        
        .menu-item .menu-icon {
            transition: all 0.3s ease;
        }
        
        .menu-item:hover .menu-icon {
            transform: scale(1.1) rotate(-5deg);
        }
        
        /* Menu Progress Indicator */
        .menu-progress-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #dce5ed;
            transition: all 0.3s ease;
        }
        
        .menu-progress-dot.active {
            background: #2b7bb6;
            transform: scale(1.2);
        }
        
        .menu-progress-dot.completed {
            background: #2b7bb6;
            opacity: 0.5;
        }
        
        /* Mobile Responsive */
        @media (max-width: 640px) {
            #menu-dropdown {
                width: calc(100vw - 2rem);
                right: -0.5rem;
                max-height: calc(100vh - 5rem);
                overflow-y: auto;
            }
            
            #menu-dropdown .px-4 {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }
        
        /* Dark Mode Support */
        @media (prefers-color-scheme: dark) {
            #menu-dropdown {
                background: #1f2a3a;
                border-color: #2a3a4a;
            }
            
            #menu-dropdown .bg-gradient-to-r {
                background: #1a2a3a;
                border-color: #2a3a4a;
            }
            
            #menu-dropdown .text-[#0b1c2e] {
                color: #e8edf2;
            }
            
            #menu-dropdown .text-[#4b5b6e] {
                color: #8a9baa;
            }
            
            #menu-dropdown .hover\:bg-\\[\\#eef4fa\\]:hover {
                background: #2a3a4a;
            }
            
            #menu-dropdown .bg-\\[\\#f6f9fc\\] {
                background: #1a2a3a;
            }
            
            #menu-dropdown .bg-\\[\\#2b7bb6\\]\\/10 {
                background: rgba(43, 123, 182, 0.2);
            }
        }
        
        
        /* Loading Screen Animations */
        @keyframes spin-slow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes pulse-soft {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
        }
        
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-spin-slow {
            animation: spin-slow 1.5s linear infinite;
        }
        
        .animate-pulse-soft {
            animation: pulse-soft 2s ease-in-out infinite;
        }
        
        #loading-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        
        #loading-screen.hidden {
            display: none !important;
        }
        
        #loading-tip.show {
            opacity: 1;
            animation: fade-in-up 0.5s ease forwards;
        }
        
        /* Shimmer loading effect for skeleton */
        .shimmer {
            background: linear-gradient(90deg, #f0f4f8 25%, #e6ecf2 50%, #f0f4f8 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        
        /* Optional: Skeleton loading for content */
        .skeleton-text {
            height: 12px;
            border-radius: 6px;
            background: #e6ecf2;
            margin-bottom: 8px;
        }
        
        .skeleton-text:last-child {
            margin-bottom: 0;
        }
        
        .skeleton-text.w-75 { width: 75%; }
        .skeleton-text.w-50 { width: 50%; }
        .skeleton-text.w-25 { width: 25%; }
        
        
        /* Card hover effects */
        .card-gradient {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }   
        
        .card-gradient:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
        }
        
        /* Day card animation */
        @keyframes day-pop {
            0% { transform: scale(0.95); opacity: 0.5; }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .day-update {
            animation: day-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        
        /* Summary card pulse */
        @keyframes summary-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .summary-update {
            animation: summary-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        /* Button loading state */
        .simulating {
            pointer-events: none;
            opacity: 0.7;
        }
        
        .simulating .fa-play {
            animation: spin-slow 1s linear infinite;
        }
        
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #eef4fa;
        }
        ::-webkit-scrollbar-thumb {
            background: #2b7bb6;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #1a6bb0;
        }
        @media (max-width: 640px) {
            .step .max-w-2xl {
                padding: 1rem;
            }
            button {
                min-height: 60px;
                padding: 1rem 1.5rem !important;
                font-size: 1.125rem !important;
            }
        }
        
        /* Mobile footer adjustments */
        @media (max-width: 640px) {
            .footer-nav {
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.5rem;
            }
            
            .footer-nav a,
            .footer-nav button {
                padding: 0.5rem 0.75rem;
                font-size: 0.8125rem;
            }
            
            .footer-divider {
                display: none;
            }
            
            .footer-bottom {
                flex-direction: column;
                gap: 0.5rem;
                text-align: center;
            }
            
            .footer-social {
                justify-content: center;
            }
        }
        
        /* Hover animation for nav items */
        .footer-nav-item {
            position: relative;
        }
        
        .footer-nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: #1a6bb0;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .footer-nav-item:hover::after {
            width: 70%;
        }