<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>STS Digital Services</title>
    <meta name="color-scheme" content="light">
    <meta name="supported-color-schemes" content="light">
    
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!--<![endif]-->

    <style type="text/css">
        .card{
            min-height: 323px;
        }
        /* RESET */
        table { border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        td { padding: 0; vertical-align: top; }
        img { border: 0; -ms-interpolation-mode: bicubic; display: block; }
        body { margin: 0; padding: 0; min-width: 100%; width: 100% !important; background-color: #F3F4F6; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Lexend', Helvetica, Arial, sans-serif; color: #1F2937; }
        
        /* UTILITIES */
        .wrapper { width: 100%; table-layout: fixed; background-color: #F3F4F6; }
        .main-container { max-width: 600px; margin: 0 auto; background-color: #F3F4F6; }
        .card { background-color: #FFFFFF; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); width: 100%; }
        
        /* BLUE FLUID HEADER */
        .blue-header { background: linear-gradient(180deg, #003399 0%, #0055CC 100%); background-color: #0047AB; color: #ffffff; }
        
        /* SPLIT CARD STYLES */
        .card-top { background: linear-gradient(135deg, #0047AB 0%, #003399 100%); padding: 30px; text-align: center; }
        .card-icon-circle { background-color: rgba(255,255,255,0.2); border-radius: 50%; width: 60px; height: 60px; line-height: 60px; margin: 0 auto; color: #ffffff; font-size: 24px; backdrop-filter: blur(5px); padding: 13px; box-sizing: border-box; }
        .card-bottom { padding: 25px; text-align: center; background-color: #ffffff; }
        
        /* BUTTONS */
        .btn-pill { background: linear-gradient(90deg, #0047AB 0%, #0055CC 100%); border-radius: 50px; color: #ffffff; display: inline-block; padding: 12px 24px; text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 4px 10px rgba(0, 71, 171, 0.3); }
        .btn-pill:hover { background: #003399; transform: translateY(-1px); }

        /* RESPONSIVE */
        @media only screen and (max-width: 600px) {
            .mobile-stack { display: block !important; width: 100% !important; max-width: 100% !important; padding-bottom: 20px !important; }
            .mobile-padding { padding-left: 20px !important; padding-right: 20px !important; }
            .hero-title { font-size: 32px !important; }
        }
    </style>
    
    <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <style>
        body, table, td, p, a, h1, h2, h3, h4, h5, h6 { font-family: 'Segoe UI', Arial, sans-serif !important; }
    </style>
    <![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #F3F4F6;">
    <center class="wrapper">
        
        <!-- FLUID HEADER SECTION (Deep Blue) -->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" class="blue-header">
            <tr>
                <td align="center">
                    <!--[if (gte mso 9)|(IE)]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                    <tr>
                    <td align="center" valign="top">
                    <![endif]-->
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                        <tr>
                            <td class="mobile-padding" style="padding: 60px 40px; text-align: center;">
                                <h1 class="hero-title" style="margin: 0 0 10px; font-family: 'Lexend', sans-serif; font-size: 42px; font-weight: 800; color: #ffffff; line-height: 1.1; letter-spacing: -1px;">
                                    This Isn't an Email.
                                </h1>
                                <p style="margin: 0 0 40px; font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 400; color: #BFDBFE; text-transform: uppercase; letter-spacing: 2px;">
                                    It's Your Digital Blueprint.
                                </p>
                                
                                <!-- Blueprint Visual (CSS Representation) -->
                                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; background-color: rgba(255,255,255,0.1);">
                                    <tr>
                                        <td style="padding: 20px 30px;">
                                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                <tr>
                                                    <td align="left">
                                                        <p style="margin: 0; font-size: 20px; font-weight: 700; color: #ffffff;">Website = Status</p>
                                                        <p style="margin: 5px 0 0; font-size: 12px; color: #BFDBFE; text-transform: uppercase;">Your Vision, We Built.</p>
                                                    </td>
                                                    <td align="right" valign="middle">
                                                         <!-- Decorative lines -->
                                                         <span style="display:inline-block; width: 40px; height: 2px; background-color: #BFDBFE; vertical-align: middle;"></span>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>

        <!-- MAIN CONTENT CONTAINER -->
        <!--[if (gte mso 9)|(IE)]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
        <td align="center" valign="top">
        <![endif]-->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" class="main-container">
            <tr>
                <td class="mobile-padding" style="padding: 40px;">
                    
                    <!-- Intro -->
                    <p style="margin: 0 0 15px; font-size: 16px; line-height: 1.6; color: #4B5563;">
                        Hello {{Name}},
                    </p>
                    <p style="margin: 0 0 30px; font-size: 16px; line-height: 1.6; color: #4B5563;">
                        Standard websites are placeholders. We build <strong style="color: #0047AB;">digital experiences</strong>.
                    </p>
                    <h2 style="margin: 0 0 40px; font-size: 28px; font-weight: 800; color: #111827; line-height: 1.2;">
                        Precision-Built Websites.<br>
                        <span style="color: #0047AB;">Unstoppable Performance.</span>
                    </h2>

                    <!-- 2x2 GRID OF SPLIT CARDS -->
                    
                    <!-- ROW 1 -->
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td valign="top" style="padding-bottom: 20px;">
                                <!--[if (gte mso 9)|(IE)]>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                <td width="250" valign="top" style="padding-right: 20px;">
                                <![endif]-->
                                
                                <!-- CARD 1 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 250px; vertical-align: top; margin-right: 15px;">
                                    <table role="presentation" class="card" border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td class="card-top">
                                                <div class="card-icon-circle"><img width="34" height="34" src="https://img.icons8.com/pulsar-line/34/FFFFFF/backend-development.png" alt="backend-development"/></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="card-bottom">
                                                <h3 style="margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #1F2937;">Custom Web Dev</h3>
                                                <p style="margin: 0 0 20px; font-size: 13px; color: #6B7280; line-height: 1.5; min-height: 40px;">Custom websites built from scratch, matching your unique needs.</p>
                                                <a href="mailto:mahipalsinh@shriiitrackingsolution.in.com?subject=Inquiry:%20Custom%20Web%20Development" class="btn-pill">CLAIM RANK #1 &rarr;</a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                
                                <!--[if (gte mso 9)|(IE)]>
                                </td><td width="250" valign="top">
                                <![endif]-->
                                
                                <!-- CARD 2 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 250px; vertical-align: top;">
                                    <table role="presentation" class="card" border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td class="card-top">
                                                <div class="card-icon-circle"><img width="34" height="34" src="https://img.icons8.com/glyph-neue/34/FFFFFF/shop--v1.png" alt="backend-development"/></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="card-bottom">
                                                <h3 style="margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #1F2937;">E-Commerce</h3>
                                                <p style="margin: 0 0 20px; font-size: 13px; color: #6B7280; line-height: 1.5; min-height: 40px;">Powerful stores that make your brand unstoppable.</p>
                                                <a href="mailto:mahipalsinh@shriiitrackingsolution.in?subject=Inquiry:%20E-commerce" class="btn-pill">BUILD EMPIRE &rarr;</a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                
                                <!--[if (gte mso 9)|(IE)]>
                                </td></tr></table>
                                <![endif]-->
                            </td>
                        </tr>
                        
                        <!-- ROW 2 -->
                        <tr>
                            <td valign="top">
                                <!--[if (gte mso 9)|(IE)]>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                <td width="250" valign="top" style="padding-right: 20px;">
                                <![endif]-->
                                
                                <!-- CARD 3 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 250px; vertical-align: top; margin-right: 15px;">
                                    <table role="presentation" class="card" border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td class="card-top">
                                                <div class="card-icon-circle"><img width="34" height="34" src="https://img.icons8.com/deco-glyph/34/FFFFFF/bullish.png"/></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="card-bottom">
                                                <h3 style="margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #1F2937;">SEO Services</h3>
                                                <p style="margin: 0 0 20px; font-size: 13px; color: #6B7280; line-height: 1.5; min-height: 40px;">Improve Google rankings and drive real business growth.</p>
                                                <a href="mailto:mahipalsinh@shriiitrackingsolution.in?subject=Inquiry:%20SEO" class="btn-pill">FORGE WEAPON &rarr;</a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                
                                <!--[if (gte mso 9)|(IE)]>
                                </td><td width="250" valign="top">
                                <![endif]-->
                                
                                <!-- CARD 4 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 250px; vertical-align: top;">
                                    <table role="presentation" class="card" border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td class="card-top">
                                                <div class="card-icon-circle"><img width="34" height="34" src="https://img.icons8.com/external-vectorslab-glyph-vectorslab/34/FFFFFF/external-Creative-Design-web-design-and-development-vectorslab-glyph-vectorslab.png" alt="backend-development"/></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="card-bottom">
                                                <h3 style="margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #1F2937;">Psychological UI/UX</h3>
                                                <p style="margin: 0 0 20px; font-size: 13px; color: #6B7280; line-height: 1.5; min-height: 40px;">Modern designs that enhance engagement and convert.</p>
                                                <a href="mailto:mahipalsinh@shriiitrackingsolution.in?subject=Inquiry:%20UI/UX" class="btn-pill">DESIGN UI &rarr;</a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                
                                <!--[if (gte mso 9)|(IE)]>
                                </td></tr></table>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>

                    <!-- MAIN CTA -->
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 50px;">
                        <tr>
                            <td align="center">
                                <p style="margin: 0 0 20px; font-size: 18px; color: #1F2937;">
                                    Your competition is using a template. <br>
                                    <span style="color: #0047AB; font-weight: 700;">It's time to build a masterpiece.</span>
                                </p>
                                <!-- VML BUTTON -->
                                <!--[if mso]>
                                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://web.shriiitrackingsolution.in/" style="height:56px;v-text-anchor:middle;width:280px;" arcsize="50%" stroke="f" fillcolor="#0047AB">
                                <w:anchorlock/>
                                <center>
                                <![endif]-->
                                <a href="http://web.shriiitrackingsolution.in/" style="background-color: #0047AB; border-radius: 50px; color: #ffffff; display: inline-block; font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 700; line-height: 56px; text-align: center; text-decoration: none; width: 280px; box-shadow: 0 4px 15px rgba(0, 71, 171, 0.4);">
                                    Architect Your Vision
                                </a>
                                <!--[if mso]>
                                </center>
                                </v:roundrect>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>
                    
                </td>
            </tr>
            
            <!-- FOOTER -->
            <tr>
                <td style="background-color: #F3F4F6; padding: 40px; text-align: center; border-top: 1px solid #E5E7EB;">
                    <p style="margin: 0 0 10px; font-weight: 700; color: #9CA3AF; font-size: 16px;">
                        Shriii Tracking Solution
                    </p>
                    <p style="margin: 0 0 20px; color: #9CA3AF; font-size: 13px;">
                        Crafted with <span style="color: #0047AB;">&#x2764;</span> in Vadodara, Gujarat
                    </p>
                    <p style="margin: 0; color: #D1D5DB; font-size: 12px; line-height: 1.6;">
                        Shriii Tracking Solution &copy; 2025. All rights reserved.<br>
                        <a href="{{UNSUBSCRIBE_LINK}}" style="color: #9CA3AF; text-decoration: underline;">Unsubscribe</a>
                        &nbsp; | &nbsp;
                        <a href="https://yourdomain.com/subscribe.html" style="color: #0047AB; text-decoration: underline;">Subscribe Again</a>
                    </p>
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </center>
</body>
</html>
