/* Booking Modal */
        .modal-overlay { display: none; position: fixed; top: ; left: ; right: ; bottom: ; background: rgba(,,,.75); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
        .modal-overlay.show { display: flex; }
        .modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 30px; position: relative; box-shadow:  20px 60px rgba(,,,.5); }
        .modal h3 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--foreground); margin-bottom: 5px; }
        .modal .modal-sub { color: var(--muted-foreground); font-size: .85rem; margin-bottom: 20px; }
        .modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; color: var(--muted-foreground); font-size: 1.5rem; cursor: pointer; line-height: 1; }
        .modal-close:hover { color: var(--primary); }
        .modal .contact-form input, .modal .contact-form select, .modal .contact-form textarea { margin-bottom: 12px; }
        .modal .service-pill { display: inline-block; background: rgba(61,202,200,.12); color: var(--primary); padding: 5px 14px; border-radius: 50px; font-size: .85rem; font-weight: 600; margin-bottom: 15px; }

        /* AI Chatbot */
        .chatbot-toggle { position: fixed; bottom: 95px; right: 20px; z-index: 999; width: 60px; height: 60px; background: linear-gradient(135deg, #3DCAC8, #2a9d9b); border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow:  4px 15px rgba(61,202,200,.4); transition: all .3s; }
        .chatbot-toggle:hover { transform: scale(1.1); box-shadow:  6px 25px rgba(61,202,200,.5); }
        .chatbot-window { position: fixed; bottom: 165px; right: 20px; width: 380px; max-width: calc(100vw - 40px); height: 480px; max-height: 60vh; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow:  10px 40px rgba(,,,.4); z-index: 998; display: none; flex-direction: column; overflow: hidden; }
        .chatbot-window.open { display: flex; }
        .chatbot-header { background: linear-gradient(135deg, #3DCAC8, #2a9d9b); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
        .chatbot-header .avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .chatbot-header h4 { font-size: .95rem; font-weight: 600; margin: ; }
        .chatbot-header p { font-size: .7rem; opacity: .9; margin: ; }
        .chatbot-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; }
        .chatbot-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: var(--background); }
        .chatbot-message { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: .85rem; line-height: 1.5; animation: fadeIn .3s ease; }
        .chatbot-message.bot { background: var(--card); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--foreground); }
        .chatbot-message.user { background: var(--primary); color: var(--primary-foreground); align-self: flex-end; border-bottom-right-radius: 4px; }
        .chatbot-input-area { display: flex; gap: 8px; padding: 12px; background: var(--card); border-top: 1px solid var(--border); }
        .chatbot-input-area input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 50px; background: var(--background); color: var(--foreground); font-size: .85rem; outline: none; }
        .chatbot-input-area input:focus { border-color: var(--primary); }
        .chatbot-input-area button { background: var(--primary); color: var(--primary-foreground); border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 1rem; flex-shrink: ; }
        .chatbot-input-area button:hover { background: #36BAB8; }
        .chatbot-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--background); border-top: 1px solid var(--border); }
        .chatbot-quick button { background: rgba(61,202,200,.12); color: var(--primary); border: 1px solid rgba(61,202,200,.3); border-radius: 50px; padding: 6px 12px; font-size: .75rem; cursor: pointer; transition: all .2s; }
        .chatbot-quick button:hover { background: var(--primary); color: var(--primary-foreground); }
        @keyframes fadeIn { from { opacity: ; transform: translateY(10px); } to { opacity: 1; transform: translateY(); } }
        @media (max-width: 480px) { .chatbot-window { width: calc(100vw - 40px); right: 20px; bottom: 165px; } }
    </style><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Synfador - Industrial Equipment Repair Services in Navi Mumbai</title>
    <meta name="description" content="Synfador offers expert industrial equipment repair & maintenance in Navi Mumbai. Crane service, hoist machine, VFD, PLC, panel service, wiring connection, tower crane. Call +91 8097634086" />
    <meta name="author" content="Emerald Upgrade Hub" />
    <meta name="keywords" content="industrial equipment repair, crane service Navi Mumbai, hoist repair, panel service, PLC programming, VFD service, wiring connection, tower crane, Synfador" />
    <link rel="canonical" href="https://synfador.com/" />
    <meta name="robots" content="index, follow" />
    <meta name="geo.region" content="IN-MH" />
    <meta name="geo.placename" content="Navi Mumbai" />

    <!-- Open Graph -->
    <meta property="og:title" content="Industrial Equipment Repair Services | Synfador" />
    <meta property="og:description" content="Expert industrial equipment repair and maintenance services in Navi Mumbai. Crane, hoist, VFD, PLC, panel & wiring services." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://synfador.com/" />
    <meta property="og:image" content="https://synfador.com/assets/synfador-logo.jpg" />
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="80" />
    <meta property="og:locale" content="en_IN" />
    <meta property="og:site_name" content="Synfador Industrial Services" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Industrial Equipment Repair Services | Synfador" />
    <meta name="twitter:description" content="Expert industrial equipment repair and maintenance services in Navi Mumbai." />
    <meta name="twitter:image" content="https://synfador.com/assets/synfador-logo.jpg" />

    <!-- JSON-LD Schema -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "LocalBusiness",
        "name": "Synfador - Emerald Upgrade Hub",
        "image": "https://synfador.com/assets/synfador-logo.jpg",
        "description": "Industrial equipment repair and maintenance services",
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "Navi Mumbai",
            "addressCountry": "IN"
        },
        "telephone": "+918097634086",
        "openingHours": "Mo-Su 07:00-19:00",
        "url": "https://synfador.com",
        "priceRange": "₹2,000 - ₹3,00,000"
    }
    </script>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --background: #171717;
            --foreground: #fafafa;
            --card: #242424;
            --card-foreground: #fafafa;
            --primary: #3DCAC8;
            --primary-foreground: #0a0a0a;
            --secondary: #3d3d3d;
            --secondary-foreground: #fafafa;
            --muted: #3d3d3d;
            --muted-foreground: #d4d4d4;
            --accent: #1a3d3d;
            --accent-foreground: #3DCAC8;
            --border: #525252;
            --ring: #3DCAC8;
            --radius: 0.75rem;
            --font-sans: 'Work Sans', 'Inter', sans-serif;
            --font-heading: 'Space Grotesk', sans-serif;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); overflow-x: hidden; }
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        /* Header */
        .header { background: var(--background); color: var(--foreground); padding: 15px 0; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); }
        .header .container { display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; gap: 10px; }
        .logo img { height: 45px; }
        .logo-text h1 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--foreground); letter-spacing: 2px; }
        .logo-text p { font-size: 0.7rem; color: var(--muted-foreground); opacity: 0.7; }
        .nav { display: flex; gap: 25px; }
        .nav a { color: var(--muted-foreground); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.3s; }
        .nav a:hover { color: var(--primary); }
        .mobile-menu-btn { display: none; background: none; border: none; color: var(--foreground); font-size: 1.5rem; cursor: pointer; }
        
        /* Hero */
        .hero { background: linear-gradient(135deg, var(--background) 0%, #1a1a1a 50%, var(--background) 100%); color: var(--foreground); padding: 100px 0 80px; text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
        .hero::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(61,202,200,0.06) 0%, transparent 60%); animation: pulse 8s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
        .hero-content { position: relative; z-index: 1; }
        .hero h2 { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; margin-bottom: 15px; color: var(--foreground); line-height: 1.2; }
        .hero h2 span { color: var(--primary); }
        .hero p { font-size: 1.1rem; color: var(--muted-foreground); max-width: 600px; margin: 0 auto 30px; line-height: 1.6; }
        .hero-btns { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
        .btn { padding: 12px 30px; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; }
        .btn-primary { background: var(--primary); color: var(--primary-foreground); }
        .btn-primary:hover { background: #36BAB8; transform: translateY(-2px); box-shadow: 0 5px 20px rgba(61,202,200,0.3); }
        .btn-secondary { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
        .btn-secondary:hover { background: rgba(255,255,255,0.05); transform: translateY(-2px); border-color: var(--primary); }
        .btn-whatsapp { background: #25D366; color: #fff; }
        .btn-whatsapp:hover { background: #1da851; transform: translateY(-2px); }
        
        /* Stats */
        .stats { background: var(--card); padding: 40px 0; border-bottom: 1px solid var(--border); }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
        .stat-item h3 { font-family: var(--font-heading); font-size: 2rem; color: var(--primary); font-weight: 700; }
        .stat-item p { color: var(--muted-foreground); font-size: 0.9rem; }
        
        /* Section */
        .section { padding: 70px 0; }
        .section-title { text-align: center; margin-bottom: 50px; }
        .section-title h2 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--foreground); margin-bottom: 10px; }
        .section-title p { color: var(--muted-foreground); font-size: 1rem; max-width: 500px; margin: 0 auto; }
        .section-title .accent { display: inline-block; width: 60px; height: 3px; background: var(--primary); border-radius: 2px; margin-top: 10px; }
        
        /* Services */
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }
        .service-card { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: all 0.3s; }
        .service-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 40px rgba(61,202,200,0.08); }
        .service-img { width: 100%; height: 200px; object-fit: cover; display: block; }
        .service-body { padding: 20px; }
        .service-body h3 { font-size: 1.2rem; font-weight: 700; color: var(--foreground); margin-bottom: 8px; }
        .service-body p { color: var(--muted-foreground); font-size: 0.85rem; line-height: 1.5; margin-bottom: 12px; opacity: 0.85; }
        .service-footer { display: flex; justify-content: space-between; align-items: center; }
        .service-price { font-size: 1.3rem; font-weight: 700; color: var(--primary); }
        .service-price small { font-size: 0.7rem; font-weight: 400; color: var(--muted-foreground); opacity: 0.6; }
        .service-book { padding: 8px 20px; background: var(--primary); color: var(--primary-foreground); border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.3s; }
        .service-book:hover { background: #36BAB8; }
        .service-icon { width: 50px; height: 50px; background: rgba(61,202,200,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 10px; }
        
        /* Products */
        .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .product-card { background: var(--card); border-radius: var(--radius); padding: 20px; text-align: center; border: 1px solid var(--border); transition: all 0.3s; }
        .product-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 5px 20px rgba(61,202,200,0.06); }
        .product-card h4 { font-size: 1rem; font-weight: 600; margin: 10px 0 5px; color: var(--foreground); }
        .product-card p { color: var(--muted-foreground); font-size: 0.8rem; margin-bottom: 10px; opacity: 0.85; }
        .product-card .price { color: var(--primary); font-weight: 700; font-size: 1.1rem; }
        .badge { display: inline-block; padding: 3px 10px; background: rgba(61,202,200,0.12); color: var(--primary); border-radius: 50px; font-size: 0.7rem; font-weight: 600; }
        
        /* Contact */
        .contact-section { background: var(--card); color: var(--foreground); border-top: 1px solid var(--border); }
        .contact-section .section-title h2 { color: var(--foreground); }
        .contact-section .section-title p { color: var(--muted-foreground); }
        .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
        .contact-info h4 { color: var(--primary); font-size: 1.1rem; margin-bottom: 15px; }
        .contact-info p { color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.6; margin-bottom: 8px; }
        .contact-info a { color: var(--primary); text-decoration: none; }
        .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.03); color: var(--foreground); font-size: 0.9rem; margin-bottom: 15px; outline: none; transition: border 0.3s; }
        .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--primary); }
        .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted-foreground); opacity: 0.6; }
        .contact-form select option { background: var(--card); color: var(--foreground); }
        .contact-form textarea { height: 100px; resize: vertical; }
        
        /* Footer */
        .footer { background: #0f0f0f; color: var(--muted-foreground); padding: 30px 0; text-align: center; font-size: 0.85rem; border-top: 1px solid var(--border); }
        .footer a { color: var(--primary); text-decoration: none; }
        .footer .social { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
        .footer .social a { color: var(--muted-foreground); font-size: 1.2rem; transition: color 0.3s; }
        .footer .social a:hover { color: var(--primary); }
        
        /* WhatsApp Float */
        .whatsapp-float { position: fixed; bottom: 20px; right: 20px; z-index: 99; }
        .whatsapp-float a { display: flex; width: 60px; height: 60px; background: #25D366; color: #fff; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 4px 15px rgba(37,211,102,0.3); transition: all 0.3s; text-decoration: none; }
        .whatsapp-float a:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(37,211,102,0.4); }
        
        /* Mobile */
        @media (max-width: 768px) {
            .nav { display: none; flex-direction: column; background: var(--card); position: absolute; top: 100%; left: 0; right: 0; padding: 20px; gap: 15px; border-top: 1px solid var(--border); }
            .nav.open { display: flex; }
            .mobile-menu-btn { display: block; }
            .hero h2 { font-size: 2rem; }
            .hero p { font-size: 0.95rem; }
            .services-grid { grid-template-columns: 1fr; }
            .products-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) {
            .products-grid { grid-template-columns: 1fr; }
            .hero h2 { font-size: 1.6rem; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
        }

        /* Toast */
        .toast { position: fixed; bottom: 100px; right: 20px; background: var(--card); color: var(--foreground); padding: 15px 25px; border-radius: var(--radius); font-size: 0.9rem; z-index: 1000; opacity: 0; transform: translateY(20px); transition: all 0.3s; border: 1px solid var(--border); }
        .toast.show { opacity: 1; transform: translateY(0); }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--background); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

        /* Booking Modal */
        .modal-overlay { display: none; position: fixed; top: ; left: ; right: ; bottom: ; background: rgba(,,,.75); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
        .modal-overlay.show { display: flex; }
        .modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 30px; position: relative; box-shadow:  20px 60px rgba(,,,.5); }
        .modal h3 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--foreground); margin-bottom: 5px; }
        .modal .modal-sub { color: var(--muted-foreground); font-size: .85rem; margin-bottom: 20px; }
        .modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; color: var(--muted-foreground); font-size: 1.5rem; cursor: pointer; line-height: 1; }
        .modal-close:hover { color: var(--primary); }
        .modal .contact-form input, .modal .contact-form select, .modal .contact-form textarea { margin-bottom: 12px; }
        .modal .service-pill { display: inline-block; background: rgba(61,202,200,.12); color: var(--primary); padding: 5px 14px; border-radius: 50px; font-size: .85rem; font-weight: 600; margin-bottom: 15px; }
        .form-row { display: flex; gap: 10px; }
        .form-row > * { flex: 1; }

        /* AI Chatbot */
        .chatbot-toggle { position: fixed; bottom: 90px; right: 20px; z-index: 999; width: 60px; height: 60px; background: linear-gradient(135deg, #3DCAC8, #2a9d9b); border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow:  4px 15px rgba(61,202,200,.4); transition: all .3s; }
        .chatbot-toggle:hover { transform: scale(1.1); box-shadow:  6px 25px rgba(61,202,200,.5); }
        .chatbot-window { position: fixed; bottom: 160px; right: 20px; width: 380px; max-width: calc(100vw - 40px); height: 480px; max-height: 60vh; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow:  10px 40px rgba(,,,.4); z-index: 998; display: none; flex-direction: column; overflow: hidden; }
        .chatbot-window.open { display: flex; }
        .chatbot-header { background: linear-gradient(135deg, #3DCAC8, #2a9d9b); color: #fff; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
        .chatbot-header h4 { font-size: 1rem; font-weight: 600; }
        .chatbot-header p { font-size: .7rem; opacity: .85; }
        .chatbot-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: ; line-height: 1; }
        .chatbot-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
        .chatbot-message { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: .85rem; line-height: 1.4; animation: fadeIn .3s ease; white-space: pre-wrap; }
        .chatbot-message.bot { background: var(--secondary); color: var(--secondary-foreground); border-bottom-left-radius: 4px; align-self: flex-start; }
        .chatbot-message.user { background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 4px; align-self: flex-end; }
        .chatbot-quick { display: flex; flex-wrap: wrap; gap: 6px; padding:  15px 10px; }
        .chatbot-quick button { background: rgba(61,202,200,.12); color: var(--primary); border: 1px solid rgba(61,202,200,.3); border-radius: 50px; padding: 6px 12px; font-size: .75rem; cursor: pointer; transition: all .2s; }
        .chatbot-quick button:hover { background: var(--primary); color: var(--primary-foreground); }
        .chatbot-input-area { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
        .chatbot-input-area input { flex: 1; padding: 10px 15px; border: 1px solid var(--border); border-radius: 50px; background: var(--background); color: var(--foreground); font-size: .9rem; outline: none; }
        .chatbot-input-area input:focus { border-color: var(--primary); }
        .chatbot-input-area button { background: var(--primary); color: var(--primary-foreground); border: none; border-radius: 50%; width: 42px; height: 42px; cursor: pointer; font-size: 1.1rem; flex-shrink: ; }
        .chatbot-input-area button:hover { background: #36BAB8; }
        @keyframes fadeIn { from { opacity: ; transform: translateY(10px); } to { opacity: 1; transform: translateY(); } }
        @media (max-width: 480px) { .chatbot-window { width: calc(100vw - 40px); right: 20px; bottom: 160px; } .whatsapp-float { bottom: 90px; } }
    </style>
</head>
<body>

    <!-- Header -->
    <header class="header">
        <div class="container">
            <a href="/" class="logo" style="text-decoration:none">
                <img src="/assets/synfador-logo.jpg" alt="Synfador Logo" style="height:50px;width:auto;border-radius:6px">
            </a>
            <button class="mobile-menu-btn" onclick="document.querySelector('.nav').classList.toggle('open')">☰</button>
            <nav class="nav">
                <a href="/">Home</a>
                <a href="#services">Services</a>
                <a href="#products">Products</a>
                <a href="#contact">Contact</a>
                <a href="#contact" class="btn btn-primary" style="padding:8px 20px;font-size:0.85rem">Book Now</a>
            </nav>
        </div>
    </header>

    <!-- Hero -->
    <section class="hero">
        <div class="container hero-content">
            <h2>Industrial Equipment<br><span>Repair Services</span></h2>
            <p>Expert industrial equipment repair and maintenance services in Navi Mumbai. Specializing in crane repair, hoist machine, VFD, PLC, panel services and more.</p>
            <div class="hero-btns">
                <a href="#services" class="btn btn-primary">📋 Our Services</a>
                <a href="https://wa.me/918097634086?text=Hi!%20I%20need%20industrial%20equipment%20repair%20service.%20Please%20share%20details." class="btn btn-whatsapp" target="_blank">💬 WhatsApp Now</a>
                <a href="#contact" class="btn btn-secondary">📞 Contact Us</a>
            </div>
        </div>
    </section>

    <!-- Stats -->
    <section class="stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item"><h3>2,000+</h3><p>Projects Completed</p></div>
                <div class="stat-item"><h3>9+</h3><p>Specialized Services</p></div>
                <div class="stat-item"><h3>100%</h3><p>Customer Satisfaction</p></div>
                <div class="stat-item"><h3>Navi Mumbai</h3><p>Service Area</p></div>
            </div>
        </div>
    </section>

    <!-- Services -->
    <section class="section" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Our Services</h2>
                <p>Comprehensive industrial equipment repair and maintenance solutions</p>
                <div class="accent"></div>
            </div>
            <div class="services-grid" id="servicesGrid"></div>
        </div>
    </section>

    <!-- Products -->
    <section class="section" id="products" style="background:#171717">
        <div class="container">
            <div class="section-title">
                <h2>Spare Parts &amp; Products</h2>
                <p>Quality spare parts and components for industrial equipment</p>
                <div class="accent"></div>
            </div>
            <div class="products-grid" id="productsGrid"></div>
        </div>
    </section>

    <!-- Contact -->
    <section class="section contact-section" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>Contact us for a free quote or consultation</p>
                <div class="accent"></div>
            </div>
            <div class="contact-grid">
                <div class="contact-info">
                    <h4>📍 Location</h4>
                    <p>Navi Mumbai, Maharashtra, India</p>
                    <h4 style="margin-top:25px">📞 Phone</h4>
                    <p><a href="tel:+918097634086">+91 8097634086</a></p>
                    <h4 style="margin-top:25px">💬 WhatsApp</h4>
                    <p><a href="https://wa.me/918097634086" target="_blank">Click to chat on WhatsApp</a></p>
                    <h4 style="margin-top:25px">🕐 Working Hours</h4>
                    <p>Mon - Sun: 7:00 AM - 7:00 PM</p>
                    <h4 style="margin-top:25px">📧 Email</h4>
                    <p><a href="mailto:info@synfador.com">info@synfador.com</a></p>
                </div>
                <div>
                    <form class="contact-form" id="contactForm" onsubmit="return submitContact(event)">
                        <input type="text" id="name" placeholder="Your Name *" required>
                        <input type="tel" id="phone" placeholder="Phone Number *" required>
                        <input type="email" id="email" placeholder="Email Address *" required>
                        <input type="text" id="company" placeholder="Company Name">
                        <select id="service">
                            <option value="">Select Service</option>
                            <option value="crane">Crane Service</option>
                            <option value="hoist">Hoist Machine</option>
                            <option value="tower-crane">Tower Crane</option>
                            <option value="panel">Panel Service</option>
                            <option value="ppm-panel">PPM Panel</option>
                            <option value="hoist-crane-tpa">Hoist Crane TPA</option>
                            <option value="plc">PLC Systems</option>
                            <option value="vfd">VFD Systems</option>
                            <option value="wiring">Wiring Connection</option>
                            <option value="other">Other</option>
                        </select>
                        <input type="datetime-local" id="time" placeholder="Preferred Date & Time">
                        <textarea id="message" placeholder="Describe your requirement..."></textarea>
                        <button type="submit" class="btn btn-primary" style="border:none;cursor:pointer;width:100%;justify-content:center">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="social">
                <a href="https://wa.me/918097634086" target="_blank" title="WhatsApp">💬</a>
                <a href="tel:+918097634086" title="Phone">📞</a>
                <a href="mailto:info@synfador.com" title="Email">✉️</a>
            </div>
            <p>&copy; 2026 <a href="/">Synfador</a> - Emerald Upgrade Hub. All rights reserved.</p>
            <p style="margin-top:5px;font-size:0.75rem">Industrial Equipment Repair Services in Navi Mumbai</p>
        </div>
    </footer>

    <!-- WhatsApp Float -->
    <div class="whatsapp-float">
        <a href="https://wa.me/918097634086?text=Hi!%20I%20need%20industrial%20equipment%20repair%20service.%20Please%20share%20details." target="_blank" title="Chat on WhatsApp">💬</a>
    </div>

    <!-- Toast -->
    <div class="toast" id="toast"></div>

    <script>
        // Services Data
        const services = [
            { id: "crane", title: "Crane Service", price: "₹5,000", description: "Expert crane repair and maintenance services including overhead cranes, EOT cranes, and gantry cranes.", icon: "🏗️" },
            { id: "hoist", title: "Hoist Machine", price: "₹3,000", description: "Professional hoist machine repair and maintenance for all types of electric and manual hoists.", icon: "🔧" },
            { id: "tower-crane", title: "Tower Crane", price: "₹3,000 - ₹15,000", description: "Tower crane installation, repair and maintenance services for construction sites.", icon: "🏗️" },
            { id: "panel", title: "Panel Service", price: "₹4,500 - ₹3,00,000", description: "Electrical panel repair and installation services for industrial control panels and MCC panels.", icon: "⚡" },
            { id: "ppm-panel", title: "PPM Panel", price: "₹2,500", description: "Preventive maintenance for panels - regular inspection, cleaning, and component testing.", icon: "⚡" },
            { id: "hoist-crane-tpa", title: "Hoist Crane TPA", price: "₹4,000", description: "Third party audit for hoist crane - safety inspection and certification services.", icon: "📋" },
            { id: "plc", title: "PLC Systems", price: "₹10,000 - ₹1,00,000", description: "PLC programming and repair services for industrial automation systems.", icon: "💻" },
            { id: "vfd", title: "VFD Systems", price: "₹3,000 - ₹1,00,000", description: "Variable frequency drive services - installation, programming, and repair.", icon: "📊" },
            { id: "wiring-connection", title: "Wiring Connection", price: "₹4,500", description: "Professional electrical wiring and connection services for industrial equipment.", icon: "🔌" }
        ];

        // Products Data
        const products = [
            { title: "Bore Bearing Assembly", price: "₹2,500", badge: "In Stock", desc: "Precision bore bearing assembly for industrial machinery" },
            { title: "Braking Resistor", price: "₹3,000", badge: "Available", desc: "High quality braking resistor for crane and hoist systems" },
            { title: "Linear Motion Guide", price: "₹4,000", badge: "In Stock", desc: "Linear motion guide rails for precision equipment" },
            { title: "Electromagnetic Brake", price: "₹3,500", badge: "Available on Request", desc: "Electromagnetic brake systems for industrial applications" },
            { title: "Tower Crane Spare Kit", price: "₹8,000", badge: "Available", desc: "Complete spare parts kit for tower cranes" },
            { title: "PLC Controller", price: "₹5,000", badge: "Available on Request", desc: "Programmable Logic Controller for industrial automation" }
        ];

        // Render Services
        function renderServices() {
            const grid = document.getElementById('servicesGrid');
            services.forEach(s => {
                const imgMap = { 'crane': 'crane-service', 'hoist': 'hoist-service', 'tower-crane': 'crane-service', 'panel': 'panel-service', 'ppm-panel': 'ppm-panel-service', 'hoist-crane-tpa': 'hoist-crane-tpa-service', 'plc': 'plc-service', 'vfd': 'vfd-service', 'wiring-connection': 'wiring-connection' };
                const imgPath = `/assets/${imgMap[s.id] || 'crane-service'}.svg`;
                grid.innerHTML += `
                    <div class="service-card">
                        <img src="${imgPath}" alt="${s.title}" class="service-img" loading="lazy" onerror="this.style.display='none'">
                        <div class="service-body">
                            <div class="service-icon">${s.icon}</div>
                            <h3>${s.title}</h3>
                            <p>${s.description}</p>
                            <div class="service-footer">
                                <div>
                                    <div class="service-price">${s.price}</div>
                                    <small>Price may vary</small>
                                </div>
                                <a href="https://wa.me/918097634086?text=Hi!%20I%20need%20${encodeURIComponent(s.title)}%20service.%20Please%20share%20details." target="_blank" class="service-book">💬 Book Now</a>
                            </div>
                        </div>
                    </div>
                `;
            });
        }

        // Render Products
        function renderProducts() {
            const grid = document.getElementById('productsGrid');
            products.forEach(p => {
                grid.innerHTML += `
                    <div class="product-card">
                        <span class="badge">${p.badge}</span>
                        <h4>${p.title}</h4>
                        <p>${p.desc}</p>
                        <div class="price">${p.price}</div>
                        <a href="https://wa.me/918097634086?text=Hi!%20I%20want%20to%20buy%20${encodeURIComponent(p.title)}.%20Please%20share%20details." target="_blank" class="btn btn-primary" style="margin-top:10px;padding:8px 15px;font-size:0.8rem">💬 Enquire</a>
                    </div>
                `;
            });
        }

        // Contact Form
        function submitContact(e) {
            e.preventDefault();
            const name = document.getElementById('name').value;
            const phone = document.getElementById('phone').value;
            const company = document.getElementById('company').value;
            const email = document.getElementById('email').value;
            const service = document.getElementById('service').value;
            const message = document.getElementById('message').value;
            
            const serviceName = document.getElementById('service').options[document.getElementById('service').selectedIndex]?.text || 'industrial equipment';
            const text = `Hi! I am ${name} from ${company || 'N/A'} (${phone}). I need ${serviceName} service.${email ? ' Email: ' + email : ''}${message ? ' Details: ' + message : ''}`;
            
            window.open(`https://wa.me/918097634086?text=${encodeURIComponent(text)}`, '_blank');
            
            showToast('✅ Redirecting to WhatsApp...');
            return false;
        }

        // Toast
        function showToast(msg) {
            const t = document.getElementById('toast');
            t.textContent = msg;
            t.classList.add('show');
            setTimeout(() => t.classList.remove('show'), 3000);
        }

        // Init
        renderServices();
        renderProducts();
    </script>

</body>
</html>