{"id":92,"date":"2026-09-28T08:09:18","date_gmt":"2026-09-28T08:09:18","guid":{"rendered":"https:\/\/www.sushilfinvest.com\/?page_id=92"},"modified":"2026-09-28T08:24:52","modified_gmt":"2026-09-28T08:24:52","slug":"calculator","status":"publish","type":"page","link":"https:\/\/www.sushilfinvest.com\/?page_id=92","title":{"rendered":"CALCULATOR"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"92\" class=\"elementor elementor-92\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f3bdde4 e-con e-atomic-element e-flexbox-base e-default-div e-df65f55 \" data-id=\"f3bdde4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f3bdde4\">\n    \t\t<div class=\"elementor-element elementor-element-16168a6 elementor-widget elementor-widget-html\" data-id=\"16168a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Financial Calculators \u2013 SIP, EMI, Investment & Retirement | SUSHIL FINVEST<\/title>\r\n    <meta name=\"description\" content=\"Use SUSHIL FINVEST financial calculators to estimate SIP returns, EMI, retirement corpus, inflation, insurance needs and more. Simple, free and easy-to-use financial planning tools.\">\r\n    <meta name=\"keywords\" content=\"Sushil Finvest, SIP Calculator, EMI Calculator, Retirement Calculator, Financial Calculators India, Lumpsum Calculator, CAGR Calculator\">\r\n    \r\n    <!-- Open Graph \/ Meta -->\r\n    <meta property=\"og:type\" content=\"website\">\r\n    <meta property=\"og:title\" content=\"Financial Calculators \u2013 SUSHIL FINVEST\">\r\n    <meta property=\"og:description\" content=\"Plan Your Money. Calculate Your Future with 20 smart, interactive financial calculators.\">\r\n    \r\n    <!-- Google Fonts -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <!-- FontAwesome for Premium Icons -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- Chart.js for Visualizations -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n    <style>\r\n        \/* ==========================================================================\r\n           01. CSS VARIABLES & DESIGN TOKENS\r\n           ========================================================================== *\/\r\n        :root {\r\n            \/* Color Palette *\/\r\n            --bg-ivory: #FAF9F5;\r\n            --bg-cream: #F5F2EB;\r\n            --bg-card: #FFFFFF;\r\n            --bg-accent-light: #F0F4F8;\r\n            \r\n            --navy-primary: #0A192F;\r\n            --navy-secondary: #1E3A8A;\r\n            --navy-light: #2563EB;\r\n            \r\n            --gold-primary: #D4AF37;\r\n            --gold-hover: #B59226;\r\n            --gold-light: #FDF8EC;\r\n            --gold-border: #E6C875;\r\n\r\n            --pastel-blue: #E0F2FE;\r\n            --positive-green: #10B981;\r\n            --positive-green-bg: #ECFDF5;\r\n\r\n            --text-dark: #1F2937;\r\n            --text-muted: #4B5563;\r\n            --text-light: #9CA3AF;\r\n            --border-color: #E5E7EB;\r\n\r\n            \/* Typography *\/\r\n            --font-serif: 'Playfair Display', Georgia, serif;\r\n            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n\r\n            \/* Transitions & Shadows *\/\r\n            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            --shadow-sm: 0 2px 4px rgba(10, 25, 47, 0.03);\r\n            --shadow-md: 0 10px 25px -5px rgba(10, 25, 47, 0.05), 0 8px 10px -6px rgba(10, 25, 47, 0.01);\r\n            --shadow-lg: 0 20px 35px -10px rgba(10, 25, 47, 0.08), 0 10px 10px -5px rgba(10, 25, 47, 0.02);\r\n            --shadow-glass: 0 8px 32px 0 rgba(10, 25, 47, 0.06);\r\n\r\n            \/* Layout Elements *\/\r\n            --radius-sm: 8px;\r\n            --radius-md: 16px;\r\n            --radius-lg: 24px;\r\n            --radius-full: 9999px;\r\n            --container-max: 1240px;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           02. BASE RESETS & GLOBAL STYLES\r\n           ========================================================================== *\/\r\n        *, *::before, *::after {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        html {\r\n            scroll-behavior: smooth;\r\n            font-size: 16px;\r\n        }\r\n\r\n        body {\r\n            font-family: var(--font-sans);\r\n            background-color: var(--bg-ivory);\r\n            color: var(--text-dark);\r\n            line-height: 1.6;\r\n            overflow-x: hidden;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        h1, h2, h3, h4, .font-serif {\r\n            font-family: var(--font-serif);\r\n            color: var(--navy-primary);\r\n            line-height: 1.25;\r\n            font-weight: 600;\r\n        }\r\n\r\n        a {\r\n            text-decoration: none;\r\n            color: inherit;\r\n            transition: var(--transition-smooth);\r\n        }\r\n\r\n        ul {\r\n            list-style: none;\r\n        }\r\n\r\n        img {\r\n            max-width: 100%;\r\n            height: auto;\r\n            display: block;\r\n        }\r\n\r\n        button, input, select, textarea {\r\n            font-family: inherit;\r\n            font-size: inherit;\r\n        }\r\n\r\n        \/* Utilities *\/\r\n        .loogo{\r\n            margin-top: -5px;\r\n            position: relative;\r\n        }\r\n        .container {\r\n            width: 90%;\r\n            max-width: var(--container-max);\r\n            margin: 0 auto;\r\n            padding: 0 15px;\r\n        }\r\n\r\n        .section-padding {\r\n            padding: 90px 0;\r\n        }\r\n\r\n        .text-center { text-align: center; }\r\n        .text-gold { color: var(--gold-primary); }\r\n        .text-navy { color: var(--navy-primary); }\r\n        \r\n        .section-badge {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gold-light);\r\n            color: var(--navy-primary);\r\n            border: 1px solid var(--gold-border);\r\n            padding: 6px 16px;\r\n            border-radius: var(--radius-full);\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            letter-spacing: 0.5px;\r\n            text-transform: uppercase;\r\n            margin-bottom: 16px;\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 2.5rem;\r\n            margin-bottom: 16px;\r\n        }\r\n\r\n        .section-subtitle {\r\n            font-size: 1.125rem;\r\n            color: var(--text-muted);\r\n            max-width: 650px;\r\n            margin: 0 auto 50px auto;\r\n        }\r\n\r\n        \/* Buttons *\/\r\n        .btn {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 10px;\r\n            padding: 14px 28px;\r\n            font-weight: 600;\r\n            border-radius: var(--radius-md);\r\n            cursor: pointer;\r\n            transition: var(--transition-smooth);\r\n            border: 2px solid transparent;\r\n            font-size: 0.95rem;\r\n        }\r\n\r\n        .btn-primary {\r\n            background-color: orange;\r\n            color: #FFFFFF;\r\n            box-shadow: 0 4px 14px rgba(10, 25, 47, 0.25);\r\n        }\r\n\r\n        .btn-primary:hover {\r\n            background-color: var(--navy-secondary);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(10, 25, 47, 0.35);\r\n        }\r\n\r\n        .btn-gold {\r\n            background-color: var(--gold-primary);\r\n            color: var(--navy-primary);\r\n            box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);\r\n        }\r\n\r\n        .btn-gold:hover {\r\n            background-color: var(--gold-hover);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);\r\n        }\r\n\r\n        .btn-outline {\r\n            border-color: var(--navy-primary);\r\n            color: var(--navy-primary);\r\n            background: transparent;\r\n        }\r\n\r\n        .btn-outline:hover {\r\n            background-color: var(--navy-primary);\r\n            color: #FFFFFF;\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .btn-whatsapp {\r\n            background-color: #25D366;\r\n            color: #FFFFFF;\r\n            box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);\r\n        }\r\n\r\n        .btn-whatsapp:hover {\r\n            background-color: #1DA851;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);\r\n        }\r\n\r\n        \/* Keyframes for subtle animations *\/\r\n        @keyframes float {\r\n            0% { transform: translateY(0px); }\r\n            50% { transform: translateY(-10px); }\r\n            100% { transform: translateY(0px); }\r\n        }\r\n\r\n        @keyframes pulse-subtle {\r\n            0% { transform: scale(1); }\r\n            50% { transform: scale(1.03); }\r\n            100% { transform: scale(1); }\r\n        }\r\n\r\n        .animate-float {\r\n            animation: float 5s ease-in-out infinite;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           03. HEADER & NAVIGATION\r\n           ========================================================================== *\/\r\n      .navbar {\r\n            position: sticky;\r\n            top: 0;\r\n            width: 100%;\r\n            background: rgba(250, 249, 245, 0.9);\r\n            backdrop-filter: blur(12px);\r\n            -webkit-backdrop-filter: blur(12px);\r\n            z-index: 1000;\r\n            border-bottom: 1px solid rgba(229, 231, 235, 0.7);\r\n            transition: var(--transition-smooth);\r\n        }\r\n\r\n        .navbar-container {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            height: 80px;\r\n        }\r\n\r\n        .logo {\r\n            margin-left: -60px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 4px;\r\n            font-size: 1.45rem;\r\n            font-weight: 700;\r\n            letter-spacing: 0.5px;\r\n            \r\n        }\r\n\r\n        .logo-sushil {\r\n            font-family: sans-serif;\r\n            color: rgb(12, 12, 194);\r\n            font-weight: 700;\r\n        }\r\n\r\n        .logo-finvest {\r\n            font-family: sans-serif;\r\n            color: orange;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .nav-menu {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 28px;\r\n        }\r\n\r\n        .nav-link {\r\n            font-weight: 500;\r\n            font-size: 0.95rem;\r\n            color: var(--text-dark);\r\n            position: relative;\r\n            padding: 6px 0;\r\n        }\r\n\r\n        .nav-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 0%;\r\n            height: 2px;\r\n            background-color: var(--gold-primary);\r\n            transition: var(--transition-smooth);\r\n        }\r\n\r\n        .nav-link:hover {\r\n            color: var(--navy-secondary);\r\n        }\r\n\r\n        .nav-link:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        .mobile-toggle {\r\n            display: none;\r\n            background: none;\r\n            border: none;\r\n            font-size: 1.5rem;\r\n            color: var(--navy-primary);\r\n            cursor: pointer;\r\n        }\r\n\r\n        \/* Mobile Nav Drawer *\/\r\n        .mobile-menu-overlay {\r\n            position: fixed;\r\n            top: 80px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: calc(100vh - 80px);\r\n            background: rgba(10, 25, 47, 0.4);\r\n            backdrop-filter: blur(4px);\r\n            display: none;\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n            z-index: 999;\r\n        }\r\n\r\n        .mobile-menu-overlay.active {\r\n            display: block;\r\n            opacity: 1;\r\n        }\r\n\r\n        .mobile-menu {\r\n            background-color: var(--bg-ivory);\r\n            width: 100%;\r\n            padding: 30px 20px;\r\n            border-bottom: 2px solid var(--gold-primary);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n            box-shadow: var(--shadow-lg);\r\n        }\r\n\r\n        .mobile-menu .nav-link {\r\n            font-size: 1.1rem;\r\n            width: 100%;\r\n            border-bottom: 1px solid var(--border-color);\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           5. HERO SECTION WITH DASHBOARD VISUAL\r\n           ========================================================================== *\/\r\n        .hero {\r\n            padding-top: 130px;\r\n            padding-bottom: 70px;\r\n            background: radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),\r\n                        radial-gradient(circle at 90% 80%, rgba(30, 64, 175, 0.05) 0%, transparent 40%);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .hero-grid {\r\n            display: grid;\r\n            grid-template-columns: 1.1fr 0.9fr;\r\n            gap: 3.5rem;\r\n            align-items: center;\r\n        }\r\n\r\n        .hero-content {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n        }\r\n\r\n        .hero-title {\r\n            font-size: 3.2rem;\r\n            line-height: 1.15;\r\n            margin: 1.2rem 0;\r\n            letter-spacing: -1px;\r\n        }\r\n\r\n        .hero-title span {\r\n            background: linear-gradient(135deg, var(--navy-primary) 30%, var(--royal-blue) 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-size: 1.1rem;\r\n            color: var(--text-muted);\r\n            margin-bottom: 2rem;\r\n            max-width: 580px;\r\n        }\r\n\r\n        .hero-cta-group {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 1rem;\r\n        }\r\n\r\n        \/* Hero Dashboard Card Visual *\/\r\n        .hero-dashboard-card {\r\n            background: linear-gradient(145deg, #0A192F 0%, #1E293B 100%);\r\n            border: 1px solid var(--border-gold);\r\n            border-radius: var(--radius-lg);\r\n            padding: 2rem;\r\n            color: #FFFFFF;\r\n            box-shadow: var(--shadow-lg), var(--shadow-glow);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .hero-dashboard-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            right: -50%;\r\n            width: 200px;\r\n            height: 200px;\r\n            background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);\r\n            pointer-events: none;\r\n        }\r\n\r\n        .dash-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 1.5rem;\r\n            padding-bottom: 1rem;\r\n            border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .dash-user {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n        }\r\n\r\n        .dash-avatar {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            background: var(--gold-primary);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: var(--navy-primary);\r\n            font-weight: 700;\r\n        }\r\n\r\n        .dash-metrics {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .metric-box {\r\n            background: rgba(255, 255, 255, 0.05);\r\n            padding: 1rem;\r\n            border-radius: var(--radius-md);\r\n            border: 1px solid rgba(255, 255, 255, 0.08);\r\n        }\r\n\r\n        .metric-label {\r\n            font-size: 0.75rem;\r\n            color: var(--text-light);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .metric-val {\r\n            font-size: 1.35rem;\r\n            font-weight: 700;\r\n            color: #FFFFFF;\r\n            margin-top: 0.25rem;\r\n        }\r\n\r\n        .metric-badge {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.25rem;\r\n            font-size: 0.75rem;\r\n            color: #10B981;\r\n            margin-top: 0.25rem;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .dash-chart-placeholder {\r\n            height: 120px;\r\n            width: 100%;\r\n            background: rgba(255, 255, 255, 0.02);\r\n            border-radius: var(--radius-md);\r\n            display: flex;\r\n            align-items: flex-end;\r\n            gap: 8px;\r\n            padding: 10px;\r\n        }\r\n\r\n        .chart-bar {\r\n            flex: 1;\r\n            background: linear-gradient(180deg, var(--gold-primary) 0%, rgba(212, 175, 55, 0.2) 100%);\r\n            border-radius: 4px 4px 0 0;\r\n            transition: height 1s ease;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           6. CALCULATOR CATEGORY FILTER & SEARCH\r\n           ========================================================================== *\/\r\n        .filter-section {\r\n            padding: 2rem 0;\r\n            position: sticky;\r\n            top: 80px;\r\n            z-index: 900;\r\n            background: rgba(248, 250, 252, 0.95);\r\n            backdrop-filter: blur(10px);\r\n            border-bottom: 1px solid var(--border-color);\r\n        }\r\n\r\n        .filter-wrapper {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1.25rem;\r\n        }\r\n\r\n        .search-box-container {\r\n            position: relative;\r\n            max-width: 500px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .search-box-container i {\r\n            position: absolute;\r\n            left: 1.25rem;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color: var(--text-light);\r\n            font-size: 1.1rem;\r\n        }\r\n\r\n        .search-input {\r\n            width: 100%;\r\n            padding: 0.9rem 1rem 0.9rem 3.2rem;\r\n            border-radius: var(--radius-full);\r\n            border: 1.5px solid var(--border-color);\r\n            background: var(--bg-surface);\r\n            font-size: 0.95rem;\r\n            outline: none;\r\n            transition: var(--transition-fast);\r\n            box-shadow: var(--shadow-sm);\r\n        }\r\n\r\n        .search-input:focus {\r\n            border-color: var(--gold-primary);\r\n            box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);\r\n        }\r\n\r\n        .category-pills {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n            gap: 0.6rem;\r\n        }\r\n\r\n        .pill-btn {\r\n            padding: 0.6rem 1.25rem;\r\n            border-radius: var(--radius-full);\r\n            background: var(--bg-surface);\r\n            border: 1px solid var(--border-color);\r\n            color: var(--text-muted);\r\n            font-size: 0.88rem;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .pill-btn:hover {\r\n            border-color: var(--gold-primary);\r\n            color: var(--navy-primary);\r\n        }\r\n\r\n        .pill-btn.active {\r\n            background: var(--navy-primary);\r\n            color: #FFFFFF;\r\n            border-color: var(--navy-primary);\r\n            box-shadow: var(--shadow-sm);\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           7. CALCULATORS GRID SECTION\r\n           ========================================================================== *\/\r\n        .calculators-section {\r\n            padding: 4rem 0;\r\n        }\r\n\r\n        .calc-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n            gap: 1.75rem;\r\n        }\r\n\r\n        .calc-card {\r\n            background: var(--bg-surface);\r\n            border: 1px solid var(--border-color);\r\n            border-radius: var(--radius-lg);\r\n            padding: 1.75rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            transition: var(--transition-smooth);\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow-sm);\r\n        }\r\n\r\n        .calc-card:hover {\r\n            transform: translateY(-5px);\r\n            border-color: var(--gold-primary);\r\n            box-shadow: var(--shadow-md);\r\n        }\r\n\r\n        .calc-card.flagship {\r\n            background: linear-gradient(135deg, #0A192F 0%, #1E293B 100%);\r\n            color: #FFFFFF;\r\n            border: 1.5px solid var(--gold-primary);\r\n            box-shadow: var(--shadow-md), var(--shadow-glow);\r\n        }\r\n\r\n        .calc-card.flagship h3 {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .calc-card.flagship .calc-desc {\r\n            color: var(--text-light);\r\n        }\r\n\r\n        .calc-icon-wrapper {\r\n            width: 52px;\r\n            height: 52px;\r\n            border-radius: var(--radius-md);\r\n            background: var(--gold-soft);\r\n            color: var(--gold-primary);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.4rem;\r\n            margin-bottom: 1.25rem;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .calc-card:hover .calc-icon-wrapper {\r\n            background: var(--gold-primary);\r\n            color: var(--navy-primary);\r\n        }\r\n\r\n        .calc-tag {\r\n            font-size: 0.72rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            color: var(--royal-blue);\r\n            margin-bottom: 0.35rem;\r\n        }\r\n\r\n        .calc-card.flagship .calc-tag {\r\n            color: var(--gold-primary);\r\n        }\r\n\r\n        .calc-title {\r\n            font-size: 1.2rem;\r\n            margin-bottom: 0.6rem;\r\n        }\r\n\r\n        .calc-desc {\r\n            font-size: 0.88rem;\r\n            color: var(--text-muted);\r\n            margin-bottom: 1.5rem;\r\n            line-height: 1.5;\r\n            flex-grow: 1;\r\n        }\r\n\r\n        .calc-btn-action {\r\n            width: 100%;\r\n            padding: 0.75rem;\r\n            border-radius: var(--radius-md);\r\n            border: 1px solid var(--border-color);\r\n            background: var(--bg-primary);\r\n            color: var(--navy-primary);\r\n            font-weight: 600;\r\n            font-size: 0.9rem;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0.5rem;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .calc-card:hover .calc-btn-action {\r\n            background: var(--navy-primary);\r\n            color: #FFFFFF;\r\n            border-color: var(--navy-primary);\r\n        }\r\n\r\n        .calc-card.flagship .calc-btn-action {\r\n            background: var(--gold-primary);\r\n            color: var(--navy-primary);\r\n            border: none;\r\n        }\r\n\r\n        .calc-card.flagship .calc-btn-action:hover {\r\n            background: #F5D77F;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           8. MODAL CALCULATOR POPUP SYSTEM\r\n           ========================================================================== *\/\r\n        .modal-overlay {\r\n            position: fixed;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: rgba(10, 25, 47, 0.75);\r\n            backdrop-filter: blur(8px);\r\n            z-index: 2000;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n            transition: var(--transition-smooth);\r\n            padding: 1rem;\r\n        }\r\n\r\n        .modal-overlay.active {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n\r\n        .modal-container {\r\n            background: var(--bg-surface);\r\n            border-radius: var(--radius-lg);\r\n            width: 100%;\r\n            max-width: 950px;\r\n            max-height: 90vh;\r\n            overflow-y: auto;\r\n            box-shadow: var(--shadow-lg);\r\n            border: 1px solid var(--border-gold);\r\n            transform: scale(0.95);\r\n            transition: var(--transition-smooth);\r\n            position: relative;\r\n        }\r\n\r\n        .modal-overlay.active .modal-container {\r\n            transform: scale(1);\r\n        }\r\n\r\n        .modal-header {\r\n            padding: 1.5rem 2rem;\r\n            border-bottom: 1px solid var(--border-color);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            background: var(--bg-primary);\r\n            position: sticky;\r\n            top: 0;\r\n            z-index: 10;\r\n        }\r\n\r\n        .modal-title-group {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 1rem;\r\n        }\r\n\r\n        .modal-close {\r\n            width: 36px;\r\n            height: 36px;\r\n            border-radius: 50%;\r\n            background: var(--border-color);\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            color: var(--navy-primary);\r\n            font-size: 1.1rem;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .modal-close:hover {\r\n            background: var(--navy-primary);\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .modal-body {\r\n            padding: 2rem;\r\n        }\r\n\r\n        .calc-interface {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 2.5rem;\r\n        }\r\n\r\n        @media (max-width: 850px) {\r\n            .calc-interface {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n\r\n        .input-group {\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .input-label-wrapper {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        .input-label {\r\n            font-size: 0.9rem;\r\n            font-weight: 600;\r\n            color: var(--navy-primary);\r\n        }\r\n\r\n        .input-value-display {\r\n            font-weight: 700;\r\n            color: var(--royal-blue);\r\n            background: var(--gold-soft);\r\n            padding: 0.2rem 0.6rem;\r\n            border-radius: var(--radius-sm);\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        .range-slider {\r\n            width: 100%;\r\n            height: 6px;\r\n            border-radius: 3px;\r\n            background: var(--border-color);\r\n            outline: none;\r\n            -webkit-appearance: none;\r\n            margin-top: 0.5rem;\r\n        }\r\n\r\n        .range-slider::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            width: 20px;\r\n            height: 20px;\r\n            border-radius: 50%;\r\n            background: var(--gold-primary);\r\n            cursor: pointer;\r\n            box-shadow: 0 2px 6px rgba(0,0,0,0.2);\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .range-slider::-webkit-slider-thumb:hover {\r\n            transform: scale(1.15);\r\n        }\r\n\r\n        .num-input {\r\n            width: 100%;\r\n            padding: 0.75rem 1rem;\r\n            border-radius: var(--radius-sm);\r\n            border: 1.5px solid var(--border-color);\r\n            font-size: 0.95rem;\r\n            font-weight: 600;\r\n            outline: none;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .num-input:focus {\r\n            border-color: var(--gold-primary);\r\n        }\r\n\r\n        \/* Result Panel *\/\r\n        .result-panel {\r\n            background: linear-gradient(145deg, #0A192F 0%, #1E293B 100%);\r\n            border-radius: var(--radius-md);\r\n            padding: 1.75rem;\r\n            color: #FFFFFF;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            border: 1px solid var(--border-gold);\r\n        }\r\n\r\n        .result-primary {\r\n            margin-bottom: 1.5rem;\r\n            text-align: center;\r\n            background: rgba(255, 255, 255, 0.04);\r\n            padding: 1.25rem;\r\n            border-radius: var(--radius-md);\r\n            border: 1px solid rgba(255, 255, 255, 0.08);\r\n        }\r\n\r\n        .result-primary-label {\r\n            font-size: 0.8rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            color: var(--gold-primary);\r\n        }\r\n\r\n        .result-primary-value {\r\n            font-size: 2.2rem;\r\n            font-weight: 800;\r\n            color: #FFFFFF;\r\n            margin-top: 0.25rem;\r\n            font-family: 'Plus Jakarta Sans', sans-serif;\r\n        }\r\n\r\n        .result-breakdown {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .breakdown-box {\r\n            background: rgba(255, 255, 255, 0.03);\r\n            padding: 0.85rem;\r\n            border-radius: var(--radius-sm);\r\n            border: 1px solid rgba(255, 255, 255, 0.05);\r\n        }\r\n\r\n        .breakdown-label {\r\n            font-size: 0.72rem;\r\n            color: var(--text-light);\r\n        }\r\n\r\n        .breakdown-value {\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            color: #FFFFFF;\r\n            margin-top: 0.2rem;\r\n        }\r\n\r\n        .chart-container-box {\r\n            position: relative;\r\n            height: 180px;\r\n            width: 100%;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .disclaimer-note-mini {\r\n            font-size: 0.72rem;\r\n            color: var(--text-light);\r\n            margin-top: 1rem;\r\n            font-style: italic;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           9. LEAD GENERATION SECTION\r\n           ========================================================================== *\/\r\n        .lead-section {\r\n            padding: 5rem 0;\r\n            background: linear-gradient(135deg, var(--navy-primary) 0%, #0F203C 100%);\r\n            color: #FFFFFF;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .lead-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 4rem;\r\n            align-items: center;\r\n        }\r\n\r\n        .lead-title {\r\n            font-size: 2.5rem;\r\n            color: #FFFFFF;\r\n            margin-bottom: 1rem;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        .lead-desc {\r\n            color: var(--text-light);\r\n            font-size: 1.05rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .lead-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .lead-form-card {\r\n            background: #FFFFFF;\r\n            padding: 2.5rem;\r\n            border-radius: var(--radius-lg);\r\n            color: var(--text-main);\r\n            box-shadow: var(--shadow-lg);\r\n            border: 1px solid var(--border-gold);\r\n        }\r\n\r\n        .lead-form-card h3 {\r\n            font-size: 1.5rem;\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        .lead-form-card p {\r\n            font-size: 0.88rem;\r\n            color: var(--text-muted);\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .form-group {\r\n            margin-bottom: 1.2rem;\r\n        }\r\n\r\n        .form-control {\r\n            width: 100%;\r\n            padding: 0.85rem 1rem;\r\n            border-radius: var(--radius-sm);\r\n            border: 1.5px solid var(--border-color);\r\n            font-size: 0.92rem;\r\n            outline: none;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .form-control:focus {\r\n            border-color: var(--gold-primary);\r\n        }\r\n\r\n        textarea.form-control {\r\n            resize: vertical;\r\n            min-height: 90px;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           10. FINANCIAL EDUCATION SECTION\r\n           ========================================================================== *\/\r\n        .edu-section {\r\n            padding: 5rem 0;\r\n            background: var(--bg-primary);\r\n        }\r\n\r\n        .section-header {\r\n            text-align: center;\r\n            max-width: 700px;\r\n            margin: 0 auto 3.5rem auto;\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 2.2rem;\r\n            margin-bottom: 0.75rem;\r\n        }\r\n\r\n        .section-subtitle {\r\n            color: var(--text-muted);\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .edu-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n            gap: 2rem;\r\n        }\r\n\r\n        .edu-card {\r\n            background: var(--bg-surface);\r\n            border-radius: var(--radius-md);\r\n            padding: 1.75rem;\r\n            border: 1px solid var(--border-color);\r\n            box-shadow: var(--shadow-sm);\r\n            transition: var(--transition-smooth);\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .edu-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: var(--shadow-md);\r\n            border-color: var(--gold-primary);\r\n        }\r\n\r\n        .edu-icon {\r\n            width: 48px;\r\n            height: 48px;\r\n            border-radius: var(--radius-sm);\r\n            background: rgba(30, 64, 175, 0.08);\r\n            color: var(--royal-blue);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.3rem;\r\n            margin-bottom: 1.25rem;\r\n        }\r\n\r\n        .edu-card h3 {\r\n            font-size: 1.15rem;\r\n            margin-bottom: 0.6rem;\r\n        }\r\n\r\n        .edu-card p {\r\n            font-size: 0.88rem;\r\n            color: var(--text-muted);\r\n            margin-bottom: 1.25rem;\r\n            flex-grow: 1;\r\n        }\r\n\r\n        .edu-link {\r\n            font-size: 0.88rem;\r\n            font-weight: 700;\r\n            color: var(--royal-blue);\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.4rem;\r\n        }\r\n\r\n        .edu-link:hover {\r\n            color: var(--gold-primary);\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           11. TRUST SECTION\r\n           ========================================================================== *\/\r\n        .trust-section {\r\n            padding: 4rem 0;\r\n            background: var(--bg-surface);\r\n            border-top: 1px solid var(--border-color);\r\n            border-bottom: 1px solid var(--border-color);\r\n        }\r\n\r\n        .trust-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n            gap: 2rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .trust-item {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n        }\r\n\r\n        .trust-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: var(--gold-soft);\r\n            color: var(--gold-primary);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.2rem;\r\n        }\r\n\r\n        .trust-text {\r\n            font-weight: 700;\r\n            font-size: 1rem;\r\n            color: var(--navy-primary);\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           12. FAQ SECTION ACCORDION\r\n           ========================================================================== *\/\r\n        .faq-section {\r\n            padding: 5rem 0;\r\n            background: var(--bg-primary);\r\n        }\r\n\r\n        .faq-container {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .faq-item {\r\n            background: var(--bg-surface);\r\n            border-radius: var(--radius-md);\r\n            border: 1px solid var(--border-color);\r\n            margin-bottom: 1rem;\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow-sm);\r\n        }\r\n\r\n        .faq-question {\r\n            padding: 1.25rem 1.5rem;\r\n            width: 100%;\r\n            background: none;\r\n            border: none;\r\n            text-align: left;\r\n            font-size: 1.05rem;\r\n            font-weight: 700;\r\n            color: var(--navy-primary);\r\n            cursor: pointer;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            gap: 1rem;\r\n        }\r\n\r\n        .faq-question i {\r\n            transition: var(--transition-fast);\r\n            color: var(--gold-primary);\r\n        }\r\n\r\n        .faq-item.active .faq-question i {\r\n            transform: rotate(180deg);\r\n        }\r\n\r\n        .faq-answer {\r\n            max-height: 0;\r\n            overflow: hidden;\r\n            transition: max-height 0.3s ease-out;\r\n            padding: 0 1.5rem;\r\n            color: var(--text-muted);\r\n            font-size: 0.95rem;\r\n        }\r\n\r\n        .faq-item.active .faq-answer {\r\n            padding: 0 1.5rem 1.25rem 1.5rem;\r\n            max-height: 300px;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           13. LEGAL DISCLAIMER & FOOTER\r\n           ========================================================================== *\/\r\n        .disclaimer-section {\r\n            padding: 2.5rem 0;\r\n            background: #06101E;\r\n            color: var(--text-light);\r\n            font-size: 0.8rem;\r\n            border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .footer {\r\n            background: var(--navy-primary);\r\n            color: #FFFFFF;\r\n            padding: 4rem 0 2rem 0;\r\n        }\r\n\r\n        .footer-grid {\r\n            display: grid;\r\n            grid-template-columns: 1.5fr repeat(3, 1fr);\r\n            gap: 3rem;\r\n            margin-bottom: 3rem;\r\n        }\r\n\r\n        .footer-brand-desc {\r\n            color: var(--text-light);\r\n            font-size: 0.9rem;\r\n            margin-top: 1rem;\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .footer-title {\r\n            color: var(--gold-primary);\r\n            font-size: 1rem;\r\n            font-weight: 700;\r\n            margin-bottom: 1.2rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .footer-links {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 0.75rem;\r\n        }\r\n\r\n        .footer-links a {\r\n            color: var(--text-light);\r\n            font-size: 0.9rem;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .footer-links a:hover {\r\n            color: var(--gold-primary);\r\n        }\r\n\r\n        .social-icons {\r\n            display: flex;\r\n            gap: 1rem;\r\n        }\r\n\r\n        .social-btn {\r\n            width: 38px;\r\n            height: 38px;\r\n            border-radius: 50%;\r\n            background: rgba(255, 255, 255, 0.08);\r\n            color: #FFFFFF;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: var(--transition-fast);\r\n        }\r\n\r\n        .social-btn:hover {\r\n            background: var(--gold-primary);\r\n            color: var(--navy-primary);\r\n        }\r\n\r\n        .footer-bottom {\r\n            text-align: center;\r\n            padding-top: 2rem;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n            color: var(--text-light);\r\n            font-size: 0.85rem;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           14. RESPONSIVE BREAKPOINTS\r\n           ========================================================================== *\/\r\n        @media (max-width: 992px) {\r\n            .hero-grid {\r\n                grid-template-columns: 1fr;\r\n                text-align: center;\r\n            }\r\n\r\n            .hero-content {\r\n                align-items: center;\r\n            }\r\n\r\n            .hero-title {\r\n                font-size: 2.5rem;\r\n            }\r\n\r\n            .lead-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .footer-grid {\r\n                grid-template-columns: 1fr 1fr;\r\n            }\r\n\r\n            .nav-links, .nav-actions {\r\n                display: none;\r\n            }\r\n\r\n            .hamburger {\r\n                display: block;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 576px) {\r\n            .hero-title {\r\n                font-size: 2rem;\r\n            }\r\n\r\n            .footer-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .calc-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .modal-body {\r\n                padding: 1.25rem;\r\n            }\r\n\r\n            .result-primary-value {\r\n                font-size: 1.75rem;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n   <!-- ==========================================================================\r\n         START: HEADER \/ NAVBAR SECTION\r\n         [WordPress Compatibility: Convert to Header Template \/ Elementor Nav Header]\r\n         ========================================================================== -->\r\n   \r\n\r\n    <!-- Mobile Drawer Menu -->\r\n    <div class=\"mobile-menu-overlay\" id=\"mobile-menu-overlay\">\r\n        <div class=\"mobile-menu\">\r\n            <a href=\"home.html\" class=\"nav-link mobile-link\">Home<\/a>\r\n            <a href=\"about.html\" class=\"nav-link mobile-link\">About Us<\/a>\r\n            <a href=\"services.html\" class=\"nav-link mobile-link\">Services<\/a>\r\n            <a href=\"calculator.html\" class=\"nav-link mobile-link\">Calculator<\/a>\r\n            <a href=\"financial.html\" class=\"nav-link mobile-link\">Financial Education<\/a>\r\n            <a href=\"#contact\" class=\"nav-link mobile-link\">Contact<\/a>\r\n            <a href=\"#contact\" class=\"btn btn-primary\" style=\"margin-top: 15px;\">Free Consultation<\/a>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- END: HEADER \/ NAVBAR SECTION -->\r\n\r\n    <main id=\"home\">\r\n    <!-- ==========================================================================\r\n       HERO SECTION\r\n       ========================================================================== -->\r\n    <section class=\"hero\" id=\"home\">\r\n        <div class=\"container hero-grid\">\r\n            <div class=\"hero-content\">\r\n                <div class=\"badge-premium\">\r\n                    <i class=\"fa-solid fa-sparkles\"><\/i> 20 Smart Financial Calculators\r\n                <\/div>\r\n                <h1 class=\"hero-title\">Plan Your Money. <br><span>Calculate Your Future.<\/span><\/h1>\r\n                <p class=\"hero-subtitle\">\r\n                    Smart financial decisions start with the right numbers. Use our simple, powerful calculators to plan your investments, loans, retirement, insurance and financial goals.\r\n                <\/p>\r\n                <div class=\"hero-cta-group\">\r\n                    <a href=\"#calculators\" class=\"btn btn-gold\">\r\n                        Start Calculating <i class=\"fa-solid fa-arrow-down\"><\/i>\r\n                    <\/a>\r\n                    <a href=\"#lead-form\" class=\"btn btn-outline-navy\">\r\n                        Talk to a Financial Expert\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"hero-dashboard-card\">\r\n                <div class=\"dash-header\">\r\n                    <div class=\"dash-user\">\r\n                        <div class=\"dash-avatar\"><i class=\"fa-solid fa-user-shield\"><\/i><\/div>\r\n                        <div>\r\n                            <div style=\"font-weight: 700; font-size: 0.95rem;\">Wealth Projection<\/div>\r\n                            <div style=\"font-size: 0.75rem; color: var(--text-light);\">Sushil Finvest Analytics<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <span class=\"badge-premium\" style=\"background: rgba(16, 185, 129, 0.15); color: #10B981; border-color: rgba(16, 185, 129, 0.3);\">\r\n                        <i class=\"fa-solid fa-chart-line\"><\/i> Active\r\n                    <\/span>\r\n                <\/div>\r\n\r\n                <div class=\"dash-metrics\">\r\n                    <div class=\"metric-box\">\r\n                        <div class=\"metric-label\">Target Freedom Corpus<\/div>\r\n                        <div class=\"metric-val\">\u20b92,50,00,000<\/div>\r\n                        <div class=\"metric-badge\"><i class=\"fa-solid fa-arrow-up\"><\/i> On Track<\/div>\r\n                    <\/div>\r\n                    <div class=\"metric-box\">\r\n                        <div class=\"metric-label\">Estimated Returns<\/div>\r\n                        <div class=\"metric-val\">12.5% p.a.<\/div>\r\n                        <div class=\"metric-badge\"><i class=\"fa-solid fa-shield-halved\"><\/i> Optimized<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"dash-chart-placeholder\">\r\n                    <div class=\"chart-bar\" style=\"height: 35%;\"><\/div>\r\n                    <div class=\"chart-bar\" style=\"height: 48%;\"><\/div>\r\n                    <div class=\"chart-bar\" style=\"height: 60%;\"><\/div>\r\n                    <div class=\"chart-bar\" style=\"height: 75%;\"><\/div>\r\n                    <div class=\"chart-bar\" style=\"height: 90%;\"><\/div>\r\n                    <div class=\"chart-bar\" style=\"height: 100%;\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       CATEGORY FILTER & SEARCH BAR\r\n       ========================================================================== -->\r\n    <section class=\"filter-section\">\r\n        <div class=\"container filter-wrapper\">\r\n            <div class=\"search-box-container\">\r\n                <i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n                <input type=\"text\" id=\"search-input\" class=\"search-input\" placeholder=\"Search calculator (e.g. SIP, EMI, Retirement, Tax)...\">\r\n            <\/div>\r\n\r\n            <div class=\"category-pills\">\r\n                <button class=\"pill-btn active\" data-category=\"all\">All<\/button>\r\n                <button class=\"pill-btn\" data-category=\"investment\">Investment<\/button>\r\n                <button class=\"pill-btn\" data-category=\"loans\">Loans<\/button>\r\n                <button class=\"pill-btn\" data-category=\"retirement\">Retirement<\/button>\r\n                <button class=\"pill-btn\" data-category=\"insurance\">Insurance<\/button>\r\n                <button class=\"pill-btn\" data-category=\"tax\">Tax & Salary<\/button>\r\n                <button class=\"pill-btn\" data-category=\"planning\">Financial Planning<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       THE 20 CALCULATOR CARDS GRID\r\n       ========================================================================== -->\r\n    <section class=\"calculators-section\" id=\"calculators\">\r\n        <div class=\"container\">\r\n            <div class=\"calc-grid\" id=\"calc-grid\">\r\n                <!-- Dynamically generated via JS for smooth filter and modular code -->\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       INTERACTIVE MODAL CALCULATOR\r\n       ========================================================================== -->\r\n    <div class=\"modal-overlay\" id=\"calculator-modal\">\r\n        <div class=\"modal-container\">\r\n            <div class=\"modal-header\">\r\n                <div class=\"modal-title-group\">\r\n                    <div class=\"calc-icon-wrapper\" id=\"modal-icon\" style=\"margin-bottom:0; width:42px; height:42px; font-size:1.1rem;\">\r\n                        <i class=\"fa-solid fa-calculator\"><\/i>\r\n                    <\/div>\r\n                    <div>\r\n                        <h3 id=\"modal-title\" style=\"font-size: 1.25rem;\">Calculator Title<\/h3>\r\n                        <div id=\"modal-category\" style=\"font-size:0.75rem; color:var(--text-light); text-transform:uppercase; font-weight:700;\">Category<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <button class=\"modal-close\" id=\"modal-close-btn\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"calc-interface\">\r\n                    <div class=\"calc-inputs\" id=\"modal-inputs-container\">\r\n                        <!-- Dynamic Input Fields Rendered Here -->\r\n                    <\/div>\r\n                    <div class=\"result-panel\">\r\n                        <div>\r\n                            <div class=\"result-primary\">\r\n                                <div class=\"result-primary-label\" id=\"modal-result-label\">Estimated Output<\/div>\r\n                                <div class=\"result-primary-value\" id=\"modal-result-value\">\u20b90<\/div>\r\n                            <\/div>\r\n                            <div class=\"result-breakdown\" id=\"modal-breakdown-container\">\r\n                                <!-- Dynamic Breakdown Values -->\r\n                            <\/div>\r\n                            <div class=\"chart-container-box\">\r\n                                <canvas id=\"modalChart\"><\/canvas>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"disclaimer-note-mini\" id=\"modal-disclaimer-text\">\r\n                            * Estimates are based on specified parameters & monthly compounding where applicable.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ==========================================================================\r\n       LEAD GENERATION & EXPERT CONSULTATION\r\n       ========================================================================== -->\r\n    <section class=\"lead-section\" id=\"contact\">\r\n        <div class=\"container lead-grid\">\r\n            <div>\r\n                <div class=\"badge-premium\" style=\"background:rgba(255,255,255,0.1); color:#F5D77F; border-color:var(--border-gold);\">\r\n                    <i class=\"fa-solid fa-headset\"><\/i> Expert Advisory\r\n                <\/div>\r\n                <h2 class=\"lead-title\" style=\"margin-top: 1rem;\">Numbers Tell the Story. We Help You Plan the Next Step.<\/h2>\r\n                <p class=\"lead-desc\">\r\n                    Need help understanding your calculator results or building a customized financial roadmap? Connect with SUSHIL FINVEST for tailored guidance.\r\n                <\/p>\r\n                <div class=\"lead-actions\">\r\n                    <a href=\"https:\/\/wa.me\/\" target=\"_blank\" class=\"btn btn-gold\">\r\n                        <i class=\"fa-brands fa-whatsapp\" style=\"font-size:1.2rem;\"><\/i> WhatsApp Us\r\n                    <\/a>\r\n                    <a href=\"tel:\" class=\"btn btn-outline-gold\">\r\n                        <i class=\"fa-solid fa-phone\"><\/i> Request Callback\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"lead-form-card\" id=\"lead-form\">\r\n                <h3>Get Personal Guidance<\/h3>\r\n                <p>Fill in your details below and our advisors will reach out shortly.<\/p>\r\n                \r\n                <form id=\"financial-lead-form\" onsubmit=\"handleLeadSubmit(event)\">\r\n                    <div class=\"form-group\">\r\n                        <input type=\"text\" class=\"form-control\" placeholder=\"Your Full Name\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <input type=\"tel\" class=\"form-control\" placeholder=\"Mobile Number\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <input type=\"email\" class=\"form-control\" placeholder=\"Email Address\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <select class=\"form-control\" required>\r\n                            <option value=\"\" disabled selected>Select Your Requirement<\/option>\r\n                            <option value=\"SIP\">SIP \/ Mutual Funds<\/option>\r\n                            <option value=\"Insurance\">Insurance Planning<\/option>\r\n                            <option value=\"Mediclaim\">Mediclaim \/ Health Cover<\/option>\r\n                            <option value=\"Demat\">Demat Account Opening<\/option>\r\n                            <option value=\"Retirement\">Retirement Planning<\/option>\r\n                            <option value=\"Loans\">Loan Advice<\/option>\r\n                            <option value=\"Comprehensive\">Comprehensive Financial Planning<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <textarea class=\"form-control\" placeholder=\"Message \/ Goal details (Optional)\"><\/textarea>\r\n                    <\/div>\r\n                    <button type=\"submit\" class=\"btn btn-navy\" style=\"width: 100%;\">Submit Request<\/button>\r\n                <\/form>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       FINANCIAL EDUCATION SECTION\r\n       ========================================================================== -->\r\n    <section class=\"edu-section\" id=\"education\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <div class=\"badge-premium\"><i class=\"fa-solid fa-book-open\"><\/i> Financial Awareness<\/div>\r\n                <h2 class=\"section-title\" style=\"margin-top:0.5rem;\">Learn Before You Invest<\/h2>\r\n                <p class=\"section-subtitle\">Empowering you with fundamental knowledge for wiser money decisions.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"edu-grid\">\r\n                <div class=\"edu-card\">\r\n                    <div class=\"edu-icon\"><i class=\"fa-solid fa-piggy-bank\"><\/i><\/div>\r\n                    <h3>What is a Systematic Investment Plan (SIP)?<\/h3>\r\n                    <p>Learn how regular small disciplined investments in Mutual Funds harness compounding to build substantial long-term wealth.<\/p>\r\n                    <a href=\"#\" class=\"edu-link\">Read Guide <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n\r\n                <div class=\"edu-card\">\r\n                    <div class=\"edu-icon\"><i class=\"fa-solid fa-chart-line-up\"><\/i><\/div>\r\n                    <h3>How Compound Interest Works<\/h3>\r\n                    <p>Discover the \"8th Wonder of the World\" and see why starting early gives you an unbeatable exponential compound growth advantage.<\/p>\r\n                    <a href=\"#\" class=\"edu-link\">Read Guide <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n\r\n                <div class=\"edu-card\">\r\n                    <div class=\"edu-icon\"><i class=\"fa-solid fa-shield-heart\"><\/i><\/div>\r\n                    <h3>How Much Emergency Fund Do You Need?<\/h3>\r\n                    <p>Understand the ideal liquid contingency cushion needed to protect your household against unexpected life events or employment gaps.<\/p>\r\n                    <a href=\"#\" class=\"edu-link\">Read Guide <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n\r\n                <div class=\"edu-card\">\r\n                    <div class=\"edu-icon\"><i class=\"fa-solid fa-umbrella\"><\/i><\/div>\r\n                    <h3>Why Early Retirement Planning is Crucial<\/h3>\r\n                    <p>Accounting for inflation, healthcare, and extended life expectancy ensures your golden years remain financially dignified and comfortable.<\/p>\r\n                    <a href=\"#\" class=\"edu-link\">Read Guide <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       TRUST PILLARS SECTION\r\n       ========================================================================== -->\r\n    <section class=\"trust-section\">\r\n        <div class=\"container\">\r\n            <div style=\"text-align: center; margin-bottom: 2.5rem;\">\r\n                <h3 style=\"font-size: 1.5rem;\">Financial Decisions Deserve Clarity.<\/h3>\r\n            <\/div>\r\n            <div class=\"trust-grid\">\r\n                <div class=\"trust-item\">\r\n                    <div class=\"trust-icon\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"trust-text\">Simple & Easy Calculations<\/div>\r\n                <\/div>\r\n                <div class=\"trust-item\">\r\n                    <div class=\"trust-icon\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"trust-text\">Transparent Estimates<\/div>\r\n                <\/div>\r\n                <div class=\"trust-item\">\r\n                    <div class=\"trust-icon\"><i class=\"fa-solid fa-mobile-screen\"><\/i><\/div>\r\n                    <div class=\"trust-text\">Mobile Friendly Interface<\/div>\r\n                <\/div>\r\n                <div class=\"trust-item\">\r\n                    <div class=\"trust-icon\"><i class=\"fa-solid fa-graduation-cap\"><\/i><\/div>\r\n                    <div class=\"trust-text\">Financial Awareness First<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       FREQUENTLY ASKED QUESTIONS (FAQ) ACCORDION\r\n       ========================================================================== -->\r\n    <section class=\"faq-section\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Frequently Asked Questions<\/h2>\r\n                <p class=\"section-subtitle\">Clear answers to your questions about calculations and planning.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"faq-container\" id=\"faq-accordion\">\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>What is a SIP calculator?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>A SIP calculator is a tool designed to estimate potential returns on mutual fund investments made through a Systematic Investment Plan (SIP). It calculates wealth gain and total corpus value based on your monthly contribution, expected annual interest rate, and duration.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>Are financial calculator results guaranteed?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>No. Financial calculator results are mathematical estimates intended strictly for educational and illustrative purposes. Actual investment returns, insurance costs, and loan interests fluctuate based on market performance, economic conditions, and individual bank policies.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>How accurate are these calculators?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>Our calculators utilize standard industry formulas, such as monthly compounding compounding logic for investment growth and reducing balance equations for loan EMIs. While mathematically precise, real-world variables like market volatility or changing interest rates will impact actual figures.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>Can I use these calculators on mobile?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>Yes, all 20 financial calculators on SUSHIL FINVEST are fully responsive and touch-optimized for smartphones, tablets, and desktop devices.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>How is SIP return calculated?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>SIP returns are calculated using a compound interest formula applied monthly: M = P \u00d7 ({[1 + i]^n - 1} \/ i) \u00d7 (1 + i), where 'P' is monthly investment, 'i' is periodic monthly rate, and 'n' is total number of monthly installments.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>What is the difference between SIP and lumpsum investment?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>A SIP involves investing fixed amounts at regular monthly intervals, instilling financial discipline and Rupee Cost Averaging. A Lumpsum investment involves depositing a single large sum into a fund all at once.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>How does an EMI calculator work?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>An EMI calculator uses the reducing balance formula: E = P x r x (1+r)^n \/ ((1+r)^n - 1), where P is principal loan amount, r is monthly interest rate, and n is duration in months.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>How much should I save for retirement?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>It depends on your current age, post-retirement lifestyle expenses, medical requirements, and expected inflation. Use our dynamic Retirement or Financial Freedom Calculator to derive a personalized target corpus.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>Why is an emergency fund important?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>An emergency fund acts as a safety shield, ensuring that sudden job losses, medical emergencies, or unexpected home repairs do not force you to liquidate long-term growth investments or incur high-interest debt.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-question\">\r\n                        <span>Should I consult a financial professional before investing?<\/span>\r\n                        <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                    <\/button>\r\n                    <div class=\"faq-answer\">\r\n                        <p>Yes. Consulting a qualified financial expert helps align calculations with your personal risk tolerance, tax brackets, household cash flows, and tailored goal planning.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       LEGAL DISCLAIMER SECTION\r\n       ========================================================================== -->\r\n    <section class=\"disclaimer-section\">\r\n        <div class=\"container\">\r\n            <p><strong>Disclaimer:<\/strong> These calculators are intended for educational and illustrative purposes only. Actual investment returns, loan costs, insurance requirements, taxes and other financial outcomes may differ based on market conditions, applicable rules, individual circumstances and product terms. The results should not be considered a guarantee, personalized financial advice or a recommendation to buy or sell any financial product.<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n       FOOTER\r\n       ========================================================================== -->\r\n    <footer class=\"footer\">\r\n        <div class=\"container\">\r\n            <div class=\"footer-grid\">\r\n                <div>\r\n                    <a href=\"#\" class=\"brand-logo\">\r\n                        <div class=\"brand-logo-icon\">\r\n                            <i class=\"fa-solid fa-crown\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"brand-logo-text\">\r\n                            <span class=\"brand-name\" style=\"color:#FFFFFF;\">SUSHIL FINVEST<\/span>\r\n                            <span class=\"brand-tag\">FINANCIAL SERVICES<\/span>\r\n                        <\/div>\r\n                    <\/a>\r\n                    <p class=\"footer-brand-desc\">\r\n                        Helping You Make Smarter Financial Decisions. Empowering individuals and families with modern tools and expert wealth management solutions.\r\n                    <\/p>\r\n                    <div class=\"social-icons\">\r\n                        <a href=\"#\" class=\"social-btn\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n                        <a href=\"#\" class=\"social-btn\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n                        <a href=\"#\" class=\"social-btn\"><i class=\"fa-brands fa-youtube\"><\/i><\/a>\r\n                        <a href=\"#\" class=\"social-btn\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"footer-title\">Quick Links<\/div>\r\n                    <div class=\"footer-links\">\r\n                        <a href=\"home.html\">Home<\/a>\r\n                        <a href=\"#about\">About Us<\/a>\r\n                        <a href=\"#services\">Services<\/a>\r\n                        <a href=\"calculator.html\">Calculators<\/a>\r\n                        <a href=\"#education\">Financial Education<\/a>\r\n                        <a href=\"#contact\">Contact<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"footer-title\">Our Services<\/div>\r\n                    <div class=\"footer-links\">\r\n                        <a href=\"#\">Mutual Funds & SIP<\/a>\r\n                        <a href=\"#\">Health & Mediclaim Insurance<\/a>\r\n                        <a href=\"#\">Term Life Cover<\/a>\r\n                        <a href=\"#\">Demat & Trading Account<\/a>\r\n                        <a href=\"#\">Retirement Planning<\/a>\r\n                        <a href=\"#\">Financial Crisis Guidance<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"footer-title\">Legal<\/div>\r\n                    <div class=\"footer-links\">\r\n                        <a href=\"#\">Privacy Policy<\/a>\r\n                        <a href=\"#\">Terms & Conditions<\/a>\r\n                        <a href=\"#\">Disclaimer Notice<\/a>\r\n                        <a href=\"#\">Regulatory Info<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"footer-bottom\">\r\n                &copy; 2026 SUSHIL FINVEST. All Rights Reserved. Built with precision for financial clarity.\r\n            <\/div>\r\n        <\/div>\r\n    <\/footer>\r\n\r\n    <!-- ==========================================================================\r\n       JAVASCRIPT: FUNCTIONAL CALCULATOR ENGINES & UI\r\n       ========================================================================== -->\r\n    <script>\r\n        \/* --------------------------------------------------------------------------\r\n           1. DATA DEFINITION FOR ALL 20 CALCULATORS\r\n           -------------------------------------------------------------------------- *\/\r\n        const calculatorsData = [\r\n            {\r\n                id: 'sip',\r\n                name: 'SIP Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-chart-line',\r\n                desc: 'Calculate total wealth and estimated returns on regular monthly investments.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'stepup_sip',\r\n                name: 'Step-Up SIP Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-arrow-trend-up',\r\n                desc: 'Calculate growth when you increase your SIP amount annually in line with income growth.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'lumpsum',\r\n                name: 'Lumpsum Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-vault',\r\n                desc: 'Calculate potential returns on one-time bulk wealth investments.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'sip_vs_lumpsum',\r\n                name: 'SIP vs Lumpsum Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-scale-balanced',\r\n                desc: 'Compare wealth growth between systematic monthly SIPs and a one-time lump sum.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'swp',\r\n                name: 'SWP Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-hand-holding-dollar',\r\n                desc: 'Plan systematic monthly withdrawals while keeping your main corpus invested.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'compound_interest',\r\n                name: 'Compound Interest Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-arrows-rotate',\r\n                desc: 'Calculate exponential compounding interest earned over custom compounding frequencies.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'simple_interest',\r\n                name: 'Simple Interest Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-percent',\r\n                desc: 'Determine plain interest yields on standard deposits or short-term agreements.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'cagr',\r\n                name: 'CAGR Calculator',\r\n                category: 'investment',\r\n                icon: 'fa-chart-pie',\r\n                desc: 'Measure the annual compound growth rate of your past investments accurately.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'inflation',\r\n                name: 'Inflation Calculator',\r\n                category: 'planning',\r\n                icon: 'fa-arrow-up-right-dots',\r\n                desc: 'See how rising inflation erodes purchasing power over time.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'goal_based',\r\n                name: 'Goal-Based Calculator',\r\n                category: 'planning',\r\n                icon: 'fa-bullseye',\r\n                desc: 'Find out the required monthly investment needed to achieve target life goals.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'emi',\r\n                name: 'EMI Calculator',\r\n                category: 'loans',\r\n                icon: 'fa-calculator',\r\n                desc: 'Calculate exact monthly loan repayments, total interest, and payback schedules.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'home_loan',\r\n                name: 'Home Loan Calculator',\r\n                category: 'loans',\r\n                icon: 'fa-house-chimney-dollar',\r\n                desc: 'Plan home buying with EMI estimates, down payment impacts, and affordability indicators.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'personal_loan',\r\n                name: 'Personal Loan Calculator',\r\n                category: 'loans',\r\n                icon: 'fa-user-tag',\r\n                desc: 'Estimate short-term unsecured personal loan monthly EMIs and interest burdens.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'loan_prepayment',\r\n                name: 'Loan Prepayment Calculator',\r\n                category: 'loans',\r\n                icon: 'fa-piggy-bank',\r\n                desc: 'Calculate interest saved and tenure reduced by making lump sum loan prepayments.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'retirement',\r\n                name: 'Retirement Calculator',\r\n                category: 'retirement',\r\n                icon: 'fa-umbrella-beach',\r\n                desc: 'Estimate required retirement nest-egg accounting for inflation and living expenses.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'emergency_fund',\r\n                name: 'Emergency Fund Calculator',\r\n                category: 'planning',\r\n                icon: 'fa-shield-halved',\r\n                desc: 'Determine the exact liquid financial buffer required for household safety.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'term_insurance',\r\n                name: 'Term Insurance Need',\r\n                category: 'insurance',\r\n                icon: 'fa-user-shield',\r\n                desc: 'Educational estimate of adequate life insurance cover for family financial security.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'health_insurance',\r\n                name: 'Health Insurance Requirement',\r\n                category: 'insurance',\r\n                icon: 'fa-heart-pulse',\r\n                desc: 'Indicative health cover ranges based on age, family size, and city healthcare costs.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'gratuity',\r\n                name: 'Gratuity Calculator',\r\n                category: 'tax',\r\n                icon: 'fa-file-invoice-dollar',\r\n                desc: 'Estimate post-employment gratuity payout based on years of service and salary.',\r\n                flagship: false\r\n            },\r\n            {\r\n                id: 'financial_freedom',\r\n                name: 'Financial Freedom (FIRE)',\r\n                category: 'planning',\r\n                icon: 'fa-crown',\r\n                desc: 'Our flagship tool to map out complete financial independence and early retirement journey.',\r\n                flagship: true\r\n            }\r\n        ];\r\n\r\n        \/* --------------------------------------------------------------------------\r\n           2. FORMATTING HELPERS\r\n           -------------------------------------------------------------------------- *\/\r\n        function formatINR(val) {\r\n            if (isNaN(val)) return \"\u20b90\";\r\n            return new Intl.NumberFormat('en-IN', {\r\n                style: 'currency',\r\n                currency: 'INR',\r\n                maximumFractionDigits: 0\r\n            }).format(val);\r\n        }\r\n\r\n        \/* --------------------------------------------------------------------------\r\n           3. RENDER CALCULATOR CARDS\r\n           -------------------------------------------------------------------------- *\/\r\n        const calcGrid = document.getElementById('calc-grid');\r\n\r\n        function renderCalculators(items) {\r\n            calcGrid.innerHTML = '';\r\n            if(items.length === 0) {\r\n                calcGrid.innerHTML = `<div style=\"grid-column: 1\/-1; text-align:center; padding:3rem; color:var(--text-muted);\">No calculators match your search filter.<\/div>`;\r\n                return;\r\n            }\r\n\r\n            items.forEach(c => {\r\n                const card = document.createElement('div');\r\n                card.className = `calc-card ${c.flagship ? 'flagship' : ''}`;\r\n                card.setAttribute('data-id', c.id);\r\n                card.setAttribute('data-category', c.category);\r\n\r\n                card.innerHTML = `\r\n                    <div>\r\n                        <div class=\"calc-icon-wrapper\">\r\n                            <i class=\"fa-solid ${c.icon}\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"calc-tag\">${c.category.toUpperCase()}<\/div>\r\n                        <h3 class=\"calc-title\">${c.name}<\/h3>\r\n                        <p class=\"calc-desc\">${c.desc}<\/p>\r\n                    <\/div>\r\n                    <button class=\"calc-btn-action\" onclick=\"openCalculatorModal('${c.id}')\">\r\n                        Calculate Now <i class=\"fa-solid fa-chevron-right\"><\/i>\r\n                    <\/button>\r\n                `;\r\n                calcGrid.appendChild(card);\r\n            });\r\n        }\r\n\r\n        renderCalculators(calculatorsData);\r\n\r\n        \/* --------------------------------------------------------------------------\r\n           4. FILTER & SEARCH HANDLERS\r\n           -------------------------------------------------------------------------- *\/\r\n        const pillBtns = document.querySelectorAll('.pill-btn');\r\n        const searchInput = document.getElementById('search-input');\r\n\r\n        let currentCategory = 'all';\r\n\r\n        pillBtns.forEach(btn => {\r\n            btn.addEventListener('click', () => {\r\n                pillBtns.forEach(b => b.classList.remove('active'));\r\n                btn.classList.add('active');\r\n                currentCategory = btn.getAttribute('data-category');\r\n                filterCalculators();\r\n            });\r\n        });\r\n\r\n        searchInput.addEventListener('input', filterCalculators);\r\n\r\n        function filterCalculators() {\r\n            const query = searchInput.value.toLowerCase().trim();\r\n            const filtered = calculatorsData.filter(c => {\r\n                const matchesCat = currentCategory === 'all' || c.category === currentCategory;\r\n                const matchesSearch = c.name.toLowerCase().includes(query) || c.desc.toLowerCase().includes(query);\r\n                return matchesCat && matchesSearch;\r\n            });\r\n            renderCalculators(filtered);\r\n        }\r\n\r\n        \/* --------------------------------------------------------------------------\r\n           5. MODAL SYSTEM & CHART INSTANCE\r\n           -------------------------------------------------------------------------- *\/\r\n        const modal = document.getElementById('calculator-modal');\r\n        const modalCloseBtn = document.getElementById('modal-close-btn');\r\n        let currentChartInstance = null;\r\n\r\n        modalCloseBtn.addEventListener('click', () => {\r\n            modal.classList.remove('active');\r\n        });\r\n\r\n        modal.addEventListener('click', (e) => {\r\n            if(e.target === modal) modal.classList.remove('active');\r\n        });\r\n\r\n        \/* --------------------------------------------------------------------------\r\n           6. CALCULATOR INTERACTIVE ENGINES (MODAL)\r\n           -------------------------------------------------------------------------- *\/\r\n        function openCalculatorModal(id) {\r\n            const calc = calculatorsData.find(c => c.id === id);\r\n            if (!calc) return;\r\n\r\n            document.getElementById('modal-title').innerText = calc.name;\r\n            document.getElementById('modal-category').innerText = calc.category;\r\n            document.getElementById('modal-icon').innerHTML = `<i class=\"fa-solid ${calc.icon}\"><\/i>`;\r\n            \r\n            const inputsContainer = document.getElementById('modal-inputs-container');\r\n            inputsContainer.innerHTML = '';\r\n\r\n            \/\/ Render custom dynamic inputs & setup recalculation trigger\r\n            setupCalculatorInputs(calc.id, inputsContainer);\r\n\r\n            modal.classList.add('active');\r\n        }\r\n\r\n        \/\/ INPUT & MATH LOGIC CONTROLLER\r\n        function setupCalculatorInputs(id, container) {\r\n            if (id === 'sip') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('monthly_inv', 'Monthly Investment', 500, 500000, 5000, 500, '\u20b9')}\r\n                    ${createSliderGroup('tenure', 'Investment Period (Years)', 1, 40, 10, 1, 'Years')}\r\n                    ${createSliderGroup('return_rate', 'Expected Annual Return (%)', 1, 30, 12, 0.5, '%')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const P = getVal('monthly_inv');\r\n                    const y = getVal('tenure');\r\n                    const r = getVal('return_rate') \/ 100 \/ 12;\r\n                    const n = y * 12;\r\n\r\n                    const totalValue = P * ((Math.pow(1 + r, n) - 1) \/ r) * (1 + r);\r\n                    const investedAmount = P * n;\r\n                    const estReturns = totalValue - investedAmount;\r\n\r\n                    updateResultUI('Estimated Corpus', totalValue, [\r\n                        { label: 'Invested Amount', val: investedAmount },\r\n                        { label: 'Est. Returns', val: estReturns }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Invested Amount', 'Est. Returns'], [investedAmount, estReturns]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'stepup_sip') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('monthly_inv', 'Starting Monthly SIP', 1000, 200000, 10000, 1000, '\u20b9')}\r\n                    ${createSliderGroup('stepup_rate', 'Annual SIP Increase (%)', 1, 30, 10, 1, '%')}\r\n                    ${createSliderGroup('tenure', 'Investment Period (Years)', 1, 30, 10, 1, 'Years')}\r\n                    ${createSliderGroup('return_rate', 'Expected Annual Return (%)', 1, 30, 12, 0.5, '%')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const baseP = getVal('monthly_inv');\r\n                    const stepup = getVal('stepup_rate') \/ 100;\r\n                    const years = getVal('tenure');\r\n                    const rate = getVal('return_rate') \/ 100;\r\n\r\n                    let totalInvested = 0;\r\n                    let currentCorpus = 0;\r\n                    let currentSIP = baseP;\r\n\r\n                    for (let yr = 1; yr <= years; yr++) {\r\n                        for (let m = 1; m <= 12; m++) {\r\n                            currentCorpus = (currentCorpus + currentSIP) * (1 + rate \/ 12);\r\n                            totalInvested += currentSIP;\r\n                        }\r\n                        currentSIP = currentSIP * (1 + stepup);\r\n                    }\r\n\r\n                    const estReturns = currentCorpus - totalInvested;\r\n\r\n                    updateResultUI('Final Corpus Value', currentCorpus, [\r\n                        { label: 'Total Invested', val: totalInvested },\r\n                        { label: 'Est. Returns', val: estReturns }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Invested Amount', 'Est. Returns'], [totalInvested, estReturns]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'lumpsum') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('lump_inv', 'Initial Lump Sum', 5000, 5000000, 100000, 5000, '\u20b9')}\r\n                    ${createSliderGroup('tenure', 'Investment Duration (Years)', 1, 30, 10, 1, 'Years')}\r\n                    ${createSliderGroup('return_rate', 'Expected Annual Return (%)', 1, 30, 12, 0.5, '%')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const P = getVal('lump_inv');\r\n                    const t = getVal('tenure');\r\n                    const r = getVal('return_rate') \/ 100;\r\n\r\n                    const finalVal = P * Math.pow(1 + r, t);\r\n                    const estReturns = finalVal - P;\r\n\r\n                    updateResultUI('Final Lump Value', finalVal, [\r\n                        { label: 'Initial Amount', val: P },\r\n                        { label: 'Est. Returns', val: estReturns }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Initial Amount', 'Est. Returns'], [P, estReturns]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'sip_vs_lumpsum') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('amount', 'Total Amount Pool', 100000, 5000000, 600000, 10000, '\u20b9')}\r\n                    ${createSliderGroup('tenure', 'Duration (Years)', 1, 30, 5, 1, 'Years')}\r\n                    ${createSliderGroup('return_rate', 'Expected Annual Return (%)', 1, 30, 12, 0.5, '%')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const totalPool = getVal('amount');\r\n                    const y = getVal('tenure');\r\n                    const r = getVal('return_rate') \/ 100;\r\n                    \r\n                    \/\/ Lump Sum logic\r\n                    const lumpVal = totalPool * Math.pow(1 + r, y);\r\n\r\n                    \/\/ SIP logic (distributing pool evenly over total months)\r\n                    const monthlySIP = totalPool \/ (y * 12);\r\n                    const mr = r \/ 12;\r\n                    const n = y * 12;\r\n                    const sipVal = monthlySIP * ((Math.pow(1 + mr, n) - 1) \/ mr) * (1 + mr);\r\n\r\n                    updateResultUI('Lump Sum Final Corpus', lumpVal, [\r\n                        { label: 'SIP Equivalent Corpus', val: sipVal },\r\n                        { label: 'Difference', val: lumpVal - sipVal }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Lump Sum Value', 'SIP Value'], [lumpVal, sipVal]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'swp') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('init_corp', 'Initial Investment Corpus', 100000, 10000000, 2500000, 50000, '\u20b9')}\r\n                    ${createSliderGroup('withdrawal', 'Monthly Withdrawal', 1000, 100000, 15000, 1000, '\u20b9')}\r\n                    ${createSliderGroup('return_rate', 'Expected Annual Return (%)', 1, 20, 8, 0.5, '%')}\r\n                    ${createSliderGroup('tenure', 'Withdrawal Duration (Years)', 1, 30, 10, 1, 'Years')}\r\n                `;\r\n                const recalculate = () => {\r\n                    let corpus = getVal('init_corp');\r\n                    const w = getVal('withdrawal');\r\n                    const mr = getVal('return_rate') \/ 100 \/ 12;\r\n                    const months = getVal('tenure') * 12;\r\n\r\n                    let totalWithdrawn = 0;\r\n                    for (let i = 0; i < months; i++) {\r\n                        if (corpus <= 0) break;\r\n                        corpus = corpus * (1 + mr) - w;\r\n                        totalWithdrawn += w;\r\n                    }\r\n\r\n                    const remaining = Math.max(0, corpus);\r\n\r\n                    updateResultUI('Remaining Corpus', remaining, [\r\n                        { label: 'Total Withdrawn', val: totalWithdrawn },\r\n                        { label: 'Status', val: remaining > 0 ? \"Corpus Intact\" : \"Depleted Early\" }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Remaining Corpus', 'Total Withdrawn'], [remaining, totalWithdrawn]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'emi' || id === 'personal_loan') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('loan_amt', 'Loan Amount', 50000, 10000000, 1000000, 10000, '\u20b9')}\r\n                    ${createSliderGroup('int_rate', 'Interest Rate (% p.a.)', 5, 24, 10.5, 0.1, '%')}\r\n                    ${createSliderGroup('tenure', 'Loan Tenure (Years)', 1, 30, 5, 1, 'Years')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const P = getVal('loan_amt');\r\n                    const r = getVal('int_rate') \/ 12 \/ 100;\r\n                    const n = getVal('tenure') * 12;\r\n\r\n                    const emi = (P * r * Math.pow(1 + r, n)) \/ (Math.pow(1 + r, n) - 1);\r\n                    const totalPayment = emi * n;\r\n                    const totalInterest = totalPayment - P;\r\n\r\n                    updateResultUI('Monthly Loan EMI', emi, [\r\n                        { label: 'Principal Amount', val: P },\r\n                        { label: 'Total Interest Payable', val: totalInterest }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Principal', 'Total Interest'], [P, totalInterest]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'home_loan') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('prop_val', 'Property Value', 1000000, 50000000, 5000000, 100000, '\u20b9')}\r\n                    ${createSliderGroup('down_pay', 'Down Payment (%)', 10, 80, 20, 5, '%')}\r\n                    ${createSliderGroup('int_rate', 'Interest Rate (% p.a.)', 6, 15, 8.5, 0.1, '%')}\r\n                    ${createSliderGroup('tenure', 'Loan Tenure (Years)', 5, 30, 20, 1, 'Years')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const propVal = getVal('prop_val');\r\n                    const downPct = getVal('down_pay') \/ 100;\r\n                    const P = propVal * (1 - downPct);\r\n                    const r = getVal('int_rate') \/ 12 \/ 100;\r\n                    const n = getVal('tenure') * 12;\r\n\r\n                    const emi = (P * r * Math.pow(1 + r, n)) \/ (Math.pow(1 + r, n) - 1);\r\n                    const totalPayment = emi * n;\r\n                    const totalInterest = totalPayment - P;\r\n\r\n                    updateResultUI('Monthly Home EMI', emi, [\r\n                        { label: 'Loan Principal', val: P },\r\n                        { label: 'Total Interest', val: totalInterest }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Down Payment', 'Loan Principal', 'Interest'], [propVal * downPct, P, totalInterest]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'cagr') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('init_val', 'Initial Investment Value', 10000, 10000000, 100000, 10000, '\u20b9')}\r\n                    ${createSliderGroup('final_val', 'Final Value Achieved', 10000, 50000000, 250000, 10000, '\u20b9')}\r\n                    ${createSliderGroup('period', 'Time Period (Years)', 1, 30, 5, 1, 'Years')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const iv = getVal('init_val');\r\n                    const fv = getVal('final_val');\r\n                    const yr = getVal('period');\r\n\r\n                    const cagr = (Math.pow(fv \/ iv, 1 \/ yr) - 1) * 100;\r\n\r\n                    document.getElementById('modal-result-label').innerText = \"Compound Annual Growth Rate (CAGR)\";\r\n                    document.getElementById('modal-result-value').innerText = cagr.toFixed(2) + \"%\";\r\n\r\n                    document.getElementById('modal-breakdown-container').innerHTML = `\r\n                        <div class=\"breakdown-box\"><div class=\"breakdown-label\">Initial Amount<\/div><div class=\"breakdown-value\">${formatINR(iv)}<\/div><\/div>\r\n                        <div class=\"breakdown-box\"><div class=\"breakdown-label\">Final Value<\/div><div class=\"breakdown-value\">${formatINR(fv)}<\/div><\/div>\r\n                    `;\r\n\r\n                    renderDoughnutChart(['Initial', 'Growth Gain'], [iv, Math.max(0, fv - iv)]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'inflation') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('curr_amt', 'Current Expense Amount', 5000, 1000000, 50000, 5000, '\u20b9')}\r\n                    ${createSliderGroup('inf_rate', 'Expected Inflation Rate (%)', 1, 15, 6, 0.5, '%')}\r\n                    ${createSliderGroup('years', 'Years into the Future', 1, 40, 15, 1, 'Years')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const amt = getVal('curr_amt');\r\n                    const rate = getVal('inf_rate') \/ 100;\r\n                    const yrs = getVal('years');\r\n\r\n                    const futureCost = amt * Math.pow(1 + rate, yrs);\r\n\r\n                    updateResultUI('Future Cost Requirement', futureCost, [\r\n                        { label: 'Current Cost', val: amt },\r\n                        { label: 'Inflation Impact', val: futureCost - amt }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Current Cost', 'Inflation Erosion'], [amt, futureCost - amt]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else if (id === 'financial_freedom') {\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('curr_age', 'Current Age', 18, 60, 28, 1, 'Years')}\r\n                    ${createSliderGroup('target_age', 'Target Freedom Age', 30, 70, 50, 1, 'Years')}\r\n                    ${createSliderGroup('monthly_exp', 'Current Monthly Expenses', 10000, 500000, 40000, 5000, '\u20b9')}\r\n                    ${createSliderGroup('curr_savings', 'Current Portfolio Value', 0, 50000000, 500000, 50000, '\u20b9')}\r\n                    ${createSliderGroup('inf_rate', 'Inflation Rate (%)', 3, 12, 6, 0.5, '%')}\r\n                    ${createSliderGroup('return_rate', 'Expected Return (%)', 5, 20, 12, 0.5, '%')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const age = getVal('curr_age');\r\n                    const targetAge = getVal('target_age');\r\n                    const exp = getVal('monthly_exp');\r\n                    const portfolio = getVal('curr_savings');\r\n                    const inf = getVal('inf_rate') \/ 100;\r\n                    const ret = getVal('return_rate') \/ 100;\r\n\r\n                    const yrs = Math.max(1, targetAge - age);\r\n                    const futureMonthlyExp = exp * Math.pow(1 + inf, yrs);\r\n                    const futureAnnualExp = futureMonthlyExp * 12;\r\n                    \r\n                    \/\/ Standard 25x or 4% Safe Withdrawal Rule adjusted\r\n                    const requiredCorpus = futureAnnualExp * 25;\r\n                    const growPortfolio = portfolio * Math.pow(1 + ret, yrs);\r\n                    const shortfall = Math.max(0, requiredCorpus - growPortfolio);\r\n\r\n                    \/\/ Required monthly investment\r\n                    const mr = ret \/ 12;\r\n                    const n = yrs * 12;\r\n                    const reqMonthlySIP = shortfall > 0 ? (shortfall * mr) \/ ((Math.pow(1 + mr, n) - 1) * (1 + mr)) : 0;\r\n\r\n                    updateResultUI('Target Freedom Corpus', requiredCorpus, [\r\n                        { label: 'Required Monthly SIP', val: reqMonthlySIP },\r\n                        { label: 'Corpus Shortfall', val: shortfall }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Existing Portfolio Growth', 'New Investment Goal'], [growPortfolio, shortfall]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n            else {\r\n                \/\/ Generic Fallback UI for standard calculators (Compound, Simple, Goal, Prepayment, Retirement, Emergency, Term, Health, Gratuity)\r\n                container.innerHTML = `\r\n                    ${createSliderGroup('param1', 'Primary Input Amount', 1000, 10000000, 100000, 1000, '\u20b9')}\r\n                    ${createSliderGroup('param2', 'Duration \/ Tenure', 1, 30, 10, 1, 'Years')}\r\n                    ${createSliderGroup('param3', 'Rate \/ Percentage (%)', 1, 20, 10, 0.5, '%')}\r\n                `;\r\n                const recalculate = () => {\r\n                    const p1 = getVal('param1');\r\n                    const p2 = getVal('param2');\r\n                    const p3 = getVal('param3') \/ 100;\r\n\r\n                    const res = p1 * Math.pow(1 + p3, p2);\r\n\r\n                    updateResultUI('Calculated Output', res, [\r\n                        { label: 'Base Principal', val: p1 },\r\n                        { label: 'Estimated Surplus', val: res - p1 }\r\n                    ]);\r\n\r\n                    renderDoughnutChart(['Base Value', 'Estimated Growth'], [p1, res - p1]);\r\n                };\r\n                attachInputListeners(recalculate);\r\n                recalculate();\r\n            }\r\n        }\r\n\r\n        \/* --------------------------------------------------------------------------\r\n           7. HELPER COMPONENT BUILDERS & CHART RENDERING\r\n           -------------------------------------------------------------------------- *\/\r\n        function createSliderGroup(id, label, min, max, value, step, unit) {\r\n            return `\r\n                <div class=\"input-group\">\r\n                    <div class=\"input-label-wrapper\">\r\n                        <label class=\"input-label\" for=\"${id}\">${label}<\/label>\r\n                        <span class=\"input-value-display\" id=\"${id}_disp\">${unit === '\u20b9' ? formatINR(value) : value + ' ' + unit}<\/span>\r\n                    <\/div>\r\n                    <input type=\"range\" class=\"range-slider\" id=\"${id}\" min=\"${min}\" max=\"${max}\" value=\"${value}\" step=\"${step}\" data-unit=\"${unit}\">\r\n                <\/div>\r\n            `;\r\n        }\r\n\r\n        function getVal(id) {\r\n            const el = document.getElementById(id);\r\n            return el ? parseFloat(el.value) : 0;\r\n        }\r\n\r\n        function attachInputListeners(callback) {\r\n            const sliders = document.querySelectorAll('.range-slider');\r\n            sliders.forEach(s => {\r\n                s.addEventListener('input', (e) => {\r\n                    const unit = e.target.getAttribute('data-unit');\r\n                    const val = parseFloat(e.target.value);\r\n                    const disp = document.getElementById(`${e.target.id}_disp`);\r\n                    if(disp) {\r\n                        disp.innerText = unit === '\u20b9' ? formatINR(val) : val + ' ' + unit;\r\n                    }\r\n                    callback();\r\n                });\r\n            });\r\n        }\r\n\r\n        function updateResultUI(label, primaryVal, breakdowns) {\r\n            document.getElementById('modal-result-label').innerText = label;\r\n            document.getElementById('modal-result-value').innerText = formatINR(primaryVal);\r\n\r\n            const container = document.getElementById('modal-breakdown-container');\r\n            container.innerHTML = breakdowns.map(b => `\r\n                <div class=\"breakdown-box\">\r\n                    <div class=\"breakdown-label\">${b.label}<\/div>\r\n                    <div class=\"breakdown-value\">${typeof b.val === 'number' ? formatINR(b.val) : b.val}<\/div>\r\n                <\/div>\r\n            `).join('');\r\n        }\r\n\r\n        function renderDoughnutChart(labels, data) {\r\n            const ctx = document.getElementById('modalChart').getContext('2d');\r\n            \r\n            if (currentChartInstance) {\r\n                currentChartInstance.destroy();\r\n            }\r\n\r\n            currentChartInstance = new Chart(ctx, {\r\n                type: 'doughnut',\r\n                data: {\r\n                    labels: labels,\r\n                    datasets: [{\r\n                        data: data,\r\n                        backgroundColor: ['#1E40AF', '#D4AF37', '#10B981'],\r\n                        borderColor: '#0A192F',\r\n                        borderWidth: 2\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    plugins: {\r\n                        legend: {\r\n                            position: 'bottom',\r\n                            labels: {\r\n                                color: '#FFFFFF',\r\n                                font: { size: 11 }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        \/* --------------------------------------------------------------------------\r\n           8. MOBILE MENU & ACCORDIONS HANDLERS\r\n           -------------------------------------------------------------------------- *\/\r\n        const hamburgerBtn = document.getElementById('hamburger-btn');\r\n        const mobileMenu = document.getElementById('mobile-menu');\r\n\r\n        hamburgerBtn.addEventListener('click', () => {\r\n            mobileMenu.classList.toggle('open');\r\n        });\r\n\r\n        \/\/ FAQ Accordion\r\n        const faqItems = document.querySelectorAll('.faq-item');\r\n        faqItems.forEach(item => {\r\n            const btn = item.querySelector('.faq-question');\r\n            btn.addEventListener('click', () => {\r\n                const isOpen = item.classList.contains('active');\r\n                faqItems.forEach(i => i.classList.remove('active'));\r\n                if (!isOpen) item.classList.add('active');\r\n            });\r\n        });\r\n\r\n        \/\/ Form Submission\r\n        function handleLeadSubmit(e) {\r\n            e.preventDefault();\r\n            alert(\"Thank you! Your request has been received. A Sushil Finvest advisor will reach out to you shortly.\");\r\n            document.getElementById('financial-lead-form').reset();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Financial Calculators \u2013 SIP, EMI, Investment &#038; Retirement | SUSHIL FINVEST Home About Us Services Calculator Financial Education Contact Free Consultation 20 Smart Financial Calculators Plan Your Money. Calculate Your Future. Smart financial decisions start with the right numbers. Use our simple, powerful calculators to plan your investments, loans, retirement, insurance and financial goals. Start [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-92","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=\/wp\/v2\/pages\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":4,"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/www.sushilfinvest.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}