<!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">
    <meta name="x-apple-disable-message-reformatting">
    <title>Digital Blueprint</title>
    <meta name="color-scheme" content="light">
    <meta name="supported-color-schemes" content="light">
    
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css2?family=outfit:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <!--<![endif]-->

    <style type="text/css">
        /* RESET */
        * { box-sizing: border-box; }
        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: #F3F5F9; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Outfit', Helvetica, Arial, sans-serif; color: #111827; }
        
        /* UTILITIES */
        .wrapper { width: 100%; table-layout: fixed; background-color: #F3F5F9; }
        .main-container { max-width: 600px; margin: 0 auto; background-color: #F3F5F9; }
        /* Premium Card Style: Softer shadow, border transition */
        .card { 
            background-color: #FFFFFF; 
            border-radius: 16px; 
            width: 100%; 
            transform: translateY(0px) ;
            border: 1px solid #E5E7EB; 
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); 
            transition: all 0.4s ease;
        }


        /* Hover Effect for Cards (Apple Mail/Web) */
        .card:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
            border-color: #BAE6FD !important;
        }
        
        /* TYPOGRAPHY */
        .text-dark { color: #111827; }
        .text-blue { color: #0EA5E9; }
        .text-gray { color: #6B7280; }
        
        /* BUTTONS */
        .btn-blue { 
            background-color: #0EA5E9; 
            border: 2px solid #0EA5E9;
            border-radius: 50px; 
            color: #ffffff !important; 
            display: inline-block; 
            padding: 10px 24px; 
            text-decoration: none; 
            font-weight: 600; 
            font-size: 14px; 
            text-align: center; 
            mso-padding-alt: 0; 
            transition: all 0.2s ease;
        }
        .btn-blue:hover {
            background-color: #0284C7;
            border-color: #0284C7;
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
            transform: scale(1.05);
        }
        
        /* ICONS */
        .icon { width: 48px; height: 48px; display: block; }

        

        /* 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: 36px !important; line-height: 1.1 !important; }
            .card-spacer { display: none !important; }
            /* Disable hover lift on mobile to prevent stuck states, keep subtle shadow */
            .card:hover { transform: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
        }
    </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: Arial, sans-serif !important; }
    </style>
    <![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #F3F5F9;">
    <center class="wrapper">
        
        <!-- HEADER SECTION -->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" class="main-container">
            <tr>
                <td class="mobile-padding" style="padding: 40px 30px 20px;">
                    <!-- Top Tagline -->
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left">
                                <p style="margin: 0 0 5px; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; color: #111827;">
                                    This Isn't an Email. <span style="color: #0EA5E9;">&gt;</span>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                <h1 class="hero-title" style="margin: 0 0 30px; font-family: 'Outfit', sans-serif; font-size: 42px; font-weight: 800; color: #0F172A; text-transform: uppercase; line-height: 1; letter-spacing: -1px;">
                                    It's Your Digital<br>Blueprint.
                                </h1>
                            </td>
                        </tr>
                    </table>
                    
                    <!-- HERO CARD (White, Rounded) -->
                    <!--[if mso]>
                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="width:540px;height:120px;" arcsize="10%" stroke="t" strokecolor="#E5E7EB" fillcolor="#FFFFFF">
                    <w:anchorlock/>
                    <v:textbox inset="0,0,0,0">
                    <div style="padding:20px;">
                    <![endif]-->
                    <div class="card " style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); overflow: hidden;">
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td style="padding: 20px;">
                                    <p style="margin: 0 0 15px; font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; color: #374151; letter-spacing: 0.5px;">
                                        WEBSITE = STATUS.
                                    </p>
                                    <h2 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 16px; color: #4B5563;">YOUR VISION, WE BUILT.</h2>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </div>
                    </v:textbox>
                    </v:roundrect>
                    <![endif]-->
                </td>
                    
            </tr>
            <tr>
                <td class="mobile-padding" style="padding: 40px 30px 20px;">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td>
                                    <p class="text" style="font-family: 'Outfit', sans-serif; color: #6B7280; font-size: 16px; line-height: 1.7; margin-bottom: 20px;">
                                        Hello {{Name}},
                                    </p>
                                    <p class="text" style="font-family: 'Outfit', sans-serif; color: #6B7280; font-size: 16px; line-height: 1.7; margin-bottom: 20px;">
                                        Standard websites are placeholders. We build <span class="text-accent" style="color: #0EA5E9; font-weight: 500;">digital experiences</span>.
                                    </p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            
            <!-- SERVICES TITLE -->
            <tr>
                <td align="center" style="padding: 20px 0;">
                    <h2 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 700; color: #111827;">Services</h2>
                </td>
            </tr>
            
            <!-- SERVICES GRID -->
            <tr>
                <td class="mobile-padding" style="padding: 0 30px;">
                    <!-- 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">
                                <![endif]-->
                                
                                <!-- SERVICE 1 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 260px; vertical-align: top;">
                                    <div class="card" style="border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding: 16px;">
                                                    <!-- Icon -->
                                                    <img src="https://img.icons8.com/ios/100/0ea5e9/code.png" alt="Code" width="40" height="40" style="display: block; margin-bottom: 15px;">
                                                    
                                                    <h3 style="margin: 0 0 10px; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; color: #111827; line-height: 1.2;">
                                                        Custom Web Development
                                                    </h3>
                                                    <p style="margin: 0 0 20px; font-family: 'Outfit', sans-serif; font-size: 13px; color: #6B7280; line-height: 1.4; min-height: 54px;">
                                                        We can web development professional development and custommile services.
                                                    </p>
                                                    
                                                    <!-- Button -->
                                                    <!--[if mso]>
                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:36px;v-text-anchor:middle;width:120px;" arcsize="50%" stroke="f" fillcolor="#0EA5E9">
                                                    <w:anchorlock/>
                                                    <center>
                                                    <![endif]-->
                                                    <a href="https://example.com" class="btn-blue">Learn More</a>
                                                    <!--[if mso]>
                                                    </center>
                                                    </v:roundrect>
                                                    <![endif]-->
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                
                                <!--[if (gte mso 9)|(IE)]>
                                </td><td width="20"></td><td width="250" valign="top">
                                <![endif]-->
                                <div class="card-spacer" style="display: inline-block; width: 8px;"></div>

                                <!-- SERVICE 2 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 260px; vertical-align: top;">
                                    <div class="card" style="border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding: 16px;">
                                                    <!-- Icon -->
                                                    <img src="https://img.icons8.com/ios/100/0ea5e9/shopping-cart.png" alt="Cart" width="40" height="40" style="display: block; margin-bottom: 15px;">
                                                    
                                                    <h3 style="margin: 0 0 10px; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; color: #111827; line-height: 1.2;">
                                                        E-Commerce
                                                    </h3>
                                                    <p style="margin: 0 0 20px; font-family: 'Outfit', sans-serif; font-size: 13px; color: #6B7280; line-height: 1.4; min-height: 54px;">
                                                        We built websetting products and ensure great shipping and onces for approx browsing.
                                                    </p>
                                                    
                                                    <!-- Button -->
                                                    <!--[if mso]>
                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:36px;v-text-anchor:middle;width:120px;" arcsize="50%" stroke="f" fillcolor="#0EA5E9">
                                                    <w:anchorlock/>
                                                    <center>
                                                    <![endif]-->
                                                    <a href="https://example.com" class="btn-blue">Learn More</a>
                                                    <!--[if mso]>
                                                    </center>
                                                    </v:roundrect>
                                                    <![endif]-->
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </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">
                                <![endif]-->
                                
                                <!-- SERVICE 3 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 260px; vertical-align: top;">
                                    <div class="card" style="border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding: 16px;">
                                                    <!-- Icon -->
                                                    <img src="https://img.icons8.com/ios/100/0ea5e9/search.png" alt="SEO" width="40" height="40" style="display: block; margin-bottom: 15px;">
                                                    
                                                    <h3 style="margin: 0 0 10px; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; color: #111827; line-height: 1.2;">
                                                        SEO
                                                    </h3>
                                                    <p style="margin: 0 0 20px; font-family: 'Outfit', sans-serif; font-size: 13px; color: #6B7280; line-height: 1.4; min-height: 54px;">
                                                        Search SEO aucees your content se barst effects and communication.
                                                    </p>
                                                    
                                                    <!-- Button -->
                                                    <!--[if mso]>
                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:36px;v-text-anchor:middle;width:120px;" arcsize="50%" stroke="f" fillcolor="#0EA5E9">
                                                    <w:anchorlock/>
                                                    <center>
                                                    <![endif]-->
                                                    <a href="https://example.com" class="btn-blue">Learn More</a>
                                                    <!--[if mso]>
                                                    </center>
                                                    </v:roundrect>
                                                    <![endif]-->
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                
                                <!--[if (gte mso 9)|(IE)]>
                                </td><td width="20"></td><td width="250" valign="top">
                                <![endif]-->
                                <div class="card-spacer" style="display: inline-block; width: 8px;"> </div>

                                <!-- SERVICE 4 -->
                                <div class="mobile-stack" style="display: inline-block; width: 100%; max-width: 260px; vertical-align: top;">
                                    <div class="card" style="border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td style="padding: 16px;">
                                                    <!-- Icon -->
                                                    <img src="https://img.icons8.com/ios/100/0ea5e9/brain.png" alt="UI" width="40" height="40" style="display: block; margin-bottom: 15px;">
                                                    
                                                    <h3 style="margin: 0 0 10px; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; color: #111827; line-height: 1.2;">
                                                        Psychological UI/UX
                                                    </h3>
                                                    <p style="margin: 0 0 20px; font-family: 'Outfit', sans-serif; font-size: 13px; color: #6B7280; line-height: 1.4; min-height: 54px;">
                                                        Opmate your UI/UX psychological or expertison and mxsioumaa to empreate your CTA.
                                                    </p>
                                                    
                                                    <!-- Button -->
                                                    <!--[if mso]>
                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:36px;v-text-anchor:middle;width:120px;" arcsize="50%" stroke="f" fillcolor="#0EA5E9">
                                                    <w:anchorlock/>
                                                    <center>
                                                    <![endif]-->
                                                    <a href="https://example.com" class="btn-blue">Learn More</a>
                                                    <!--[if mso]>
                                                    </center>
                                                    </v:roundrect>
                                                    <![endif]-->
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                
                                <!--[if (gte mso 9)|(IE)]>
                                </td></tr></table>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>


            <!-- CTA SECTION -->
            <tr>
                <td align="center" style="padding: 50px 20px;">
                    <p style="margin: 0 0 10px; font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; color: #111827;">
                        Your competition is using a template.
                    </p>
                    <p style="margin: 0 0 30px; font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; color: #0EA5E9;">
                        It's time to build a masterpiece.
                    </p>
                    
                    <!-- BIG CTA 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:54px;v-text-anchor:middle;width:240px;" arcsize="50%" stroke="f" fillcolor="#0EA5E9">
                    <w:anchorlock/>
                    <center>
                    <![endif]-->
                    <a href="http://web.shriiitrackingsolution.in/" class="btn-blue" style="padding: 15px 40px; font-size: 16px; box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);">Architect Your Vision</a>
                    <!--[if mso]>
                    </center>
                    </v:roundrect>
                    <![endif]-->
                </td>
            </tr>

            <!-- FOOTER -->
            <tr>
                <td style="border-top: 1px solid #E5E7EB; padding: 40px 20px; text-align: center; background-color: #F3F5F9;">
                    <h3 style="margin: 0 0 15px; font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 800; color: #111827;">
                        Shriii Tracking Solution
                    </h3>
                    <p style="margin: 0 0 15px; font-family: 'Outfit', sans-serif; font-size: 14px; color: #6B7280;">
                        Crafted with <span style="color: #0EA5E9;">&#x2764;</span> in Vadodara, Gujarat
                    </p>
                    <p style="margin: 0 0 20px; font-family: 'Outfit', sans-serif; font-size: 12px; line-height: 1.6; color: #9CA3AF;">
                        Shriii Tracking Solution &copy; 2026. All rights reserved.
                    </p>
                    <p style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 12px; color: #9CA3AF;">
                        <a href="{{UNSUBSCRIBE_LINK}}" style="color: #0EA5E9; text-decoration: underline; font-weight: 600;">Unsubscribe</a>
                        &nbsp; | &nbsp;
                        <a href="https://yourdomain.com/subscribe.html" style="color: #0EA5E9; text-decoration: underline; font-weight: 600;">Subscribe Again</a>
                    </p>
                </td>
            </tr>
            
        </table>
    </center>
</body>
</html>
