<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="color-scheme" content="dark">
    <meta name="supported-color-schemes" content="dark">
    <title>Website = Status</title>

    <!-- Google Fonts: Space Grotesk for a more "Tech" feel -->
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!--<![endif]-->

    <style>
        /* BASE RESET */
        html, body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
            background-color: #050505;
        }
        * { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
        div[style*="margin: 16px 0"] { margin: 0 !important; }
        table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; }
        table { border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important; }
        img { -ms-interpolation-mode:bicubic; }
        a { text-decoration: none; }

        /* TYPOGRAPHY */
        body, table, td, p, a, li, blockquote {
            font-family: 'Space Grotesk', 'Courier New', Courier, monospace; /* Monospace fallback for tech feel */
            color: #b0b0b0;
        }
        
        /* UTILITIES */
        .desktop-hide { display: none; font-size: 0; max-height: 0; overflow: hidden; mso-hide: all; }
        
        /* ANIMATIONS (Progressive Enhancement) */
        @media (prefers-reduced-motion: no-preference) {
            .scan-line {
                position: relative;
                overflow: hidden;
            }
            .scan-line::after {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(0, 255, 204, 0.2), transparent);
                animation: scan 3s infinite;
            }
            @keyframes scan {
                0% { left: -100%; }
                50% { left: 100%; }
                100% { left: 100%; }
            }
            
            .hover-glow:hover {
                box-shadow: 0 0 15px #00ffcc, inset 0 0 10px rgba(0, 255, 204, 0.2);
                border-color: #00ffcc !important;
                transform: scale(1.02);
            }
            
            .ticker-text {
                animation: ticker 10s linear infinite;
                white-space: nowrap;
            }
            @keyframes ticker {
                0% { transform: translateX(100%); }
                100% { transform: translateX(-100%); }
            }
        }

        /* MOBILE STYLES */
        @media only screen and (max-width: 600px) {
            .email-container { width: 100% !important; max-width: 100% !important; }
            .stack-column {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                padding: 0 !important;
            }
            .mobile-center { text-align: center !important; }
            .mobile-padding { padding: 20px !important; }
            .mobile-hide { display: none !important; }
            .desktop-hide { display: block !important; font-size: auto !important; max-height: none !important; overflow: visible !important; }
            
            /* Re-order flex visual for alternating rows on mobile */
            .dir-rtl { direction: ltr !important; }
            
            .hero-text { font-size: 32px !important; line-height: 38px !important; }
        }
    </style>

    <!--[if mso]>
    <style type="text/css">
        body, table, td, p, a, h1, h2, h3 { font-family: 'Courier New', Courier, monospace !important; }
    </style>
    <![endif]-->
</head>

<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #050505;">
    <center style="width: 100%; background-color: #050505;">
        
        <!-- PREHEADER -->
        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
            System Status: ONLINE. Digital Blueprint Loaded. // Website = Status.
            &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        </div>

        <!-- MAIN CONTAINER -->
        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto;" class="email-container">
            
            <!-- TOP TICKER BAR -->
            <tr>
                <td style="background-color: #00ffcc; padding: 4px 0; overflow: hidden;">
                    <!--[if mso]>
                    <p style="margin:0; text-align:center; font-size:10px; font-weight:bold; color:#000000; letter-spacing:2px;">/// SYSTEM STATUS: ONLINE /// DIGITAL BLUEPRINT LOADED ///</p>
                    <![endif]-->
                    <!--[if !mso]><!-->
                    <div style="width: 100%; overflow: hidden; white-space: nowrap;">
                        <p class="ticker-text" style="margin: 0; font-family: 'Space Grotesk', monospace; font-size: 10px; font-weight: 700; color: #000000; letter-spacing: 2px; text-transform: uppercase;">
                             /// WEBSITE = STATUS /// YOUR VISION, WE BUILT /// DIGITAL EXPERIENCES LOADING /// 
                        </p>
                    </div>
                    <!--<![endif]-->
                </td>
            </tr>

            <!-- HEADER / LOGO -->
            <tr>
                <td style="padding: 40px 20px 20px; text-align: left;">
                    <span style="font-size: 12px; letter-spacing: 2px; color: #555;">[ TERMINAL_01 ]</span>
                    <h1 style="margin: 10px 0 0; font-size: 24px; color: #ffffff; font-weight: 700; letter-spacing: -0.5px;">
                        This Isn't an Email.
                    </h1>
                    <p style="margin: 5px 0 0; font-size: 14px; color: #00ffcc; text-transform: uppercase;">
                        &gt; It's Your Digital Blueprint_
                    </p>
                </td>
            </tr>

            <!-- HERO SECTION: ASYMMETRIC HUD -->
            <tr>
                <td style="padding: 0 20px 40px;">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 1px dashed #333; background-color: #0a0a0a;">
                        <tr>
                            <!-- Left: Status Text -->
                            <td class="stack-column" valign="middle" width="60%" style="padding: 30px;">
                                <h2 class="hero-text" style="margin: 0; font-size: 42px; line-height: 42px; color: #ffffff; font-weight: 700;">
                                    WEBSITE <br>
                                    <span style="color: #00ffcc;">= STATUS</span>
                                </h2>
                                <p style="margin: 15px 0 0; font-size: 12px; color: #888; font-family: monospace;">
                                    // YOUR_VISION.EXE <br>
                                    // WE_BUILT.EXE
                                </p>
                            </td>
                            <!-- Right: Abstract Graphic -->
                            <td class="stack-column" valign="middle" width="40%" style="background-color: #0f0f0f; border-left: 1px dashed #333;">
                                <div style="padding: 30px; text-align: center;">
                                    <!-- Simple CSS Geometric Shape -->
                                    <div class="scan-line" style="display: inline-block; width: 60px; height: 60px; border: 2px solid #00ffcc; border-radius: 50%; position: relative;">
                                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: rgba(0, 255, 204, 0.2); border-radius: 50%;"></div>
                                    </div>
                                    <p style="margin: 10px 0 0; font-size: 10px; color: #00ffcc; letter-spacing: 2px;">ONLINE</p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <!-- INTRO -->
            <tr>
                <td style="padding: 0 20px 40px;">
                    <p style="margin: 0 0 20px; color: #ffffff;">Hello {{Name}},</p>
                    <p style="margin: 0; line-height: 1.6;">
                        Standard websites are placeholders. We build <span style="color: #00ffcc; border-bottom: 1px solid #00ffcc;">digital experiences</span>.
                    </p>
                    <div style="margin-top: 30px; padding: 20px; border-left: 4px solid #00ffcc; background: linear-gradient(90deg, rgba(0,255,204,0.05) 0%, rgba(0,0,0,0) 100%);">
                        <h3 style="margin: 0; font-size: 18px; color: #ffffff; letter-spacing: 1px;">PRECISION-BUILT WEBSITES.</h3>
                        <h3 style="margin: 5px 0 0; font-size: 18px; color: #ffffff; letter-spacing: 1px;">UNSTOPPABLE PERFORMANCE.</h3>
                    </div>
                </td>
            </tr>

            <!-- SERVICE ROW 1: Custom Web (Icon Left) -->
            <tr>
                <td style="padding: 0 20px 20px;">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <!-- Icon Box -->
                            <td class="stack-column" width="80" valign="top">
                                <div style="width: 60px; height: 60px; border: 1px solid #333; background-color: #0a0a0a; text-align: center; line-height: 60px; color: #00ffcc; font-size: 24px;">
                                    &lt;/&gt;
                                </div>
                            </td>
                            <!-- Content -->
                            <td class="stack-column" valign="top" style="padding-left: 20px;">
                                <h3 style="margin: 0 0 5px; color: #ffffff; font-size: 18px;">Custom Web Development</h3>
                                <p style="margin: 0 0 10px; font-size: 14px; color: #999; line-height: 1.5;">
                                    Custom websites built from scratch, perfectly matching your unique needs.
                                </p>
                                <a href="#" style="color: #00ffcc; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">[ Claim Rank #1 ]</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <!-- DIVIDER LINE -->
            <tr>
                <td style="padding: 0 20px 20px;">
                    <div style="height: 1px; background-color: #222; width: 100%;"></div>
                </td>
            </tr>

            <!-- SERVICE ROW 2: E-Commerce (Icon Right - Alternating) -->
            <tr>
                <td style="padding: 0 20px 20px;">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" class="dir-rtl" style="direction: rtl;">
                        <tr>
                            <!-- Icon Box -->
                            <td class="stack-column" width="80" valign="top" style="direction: ltr;">
                                <div style="width: 60px; height: 60px; border: 1px solid #333; background-color: #0a0a0a; text-align: center; line-height: 60px; color: #00ffcc; font-size: 24px; margin-left: auto;">
                                    $
                                </div>
                            </td>
                            <!-- Content -->
                            <td class="stack-column" valign="top" style="padding-right: 20px; direction: ltr; text-align: right;">
                                <h3 style="margin: 0 0 5px; color: #ffffff; font-size: 18px;">E-Commerce Website</h3>
                                <p style="margin: 0 0 10px; font-size: 14px; color: #999; line-height: 1.5;">
                                    We build powerful e-Commerce websites that make your brand unstoppable.
                                </p>
                                <a href="#" style="color: #00ffcc; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">[ Build My Empire ]</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <!-- DIVIDER LINE -->
            <tr>
                <td style="padding: 0 20px 20px;">
                    <div style="height: 1px; background-color: #222; width: 100%;"></div>
                </td>
            </tr>

            <!-- SERVICE ROW 3: SEO (Icon Left) -->
            <tr>
                <td style="padding: 0 20px 20px;">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <!-- Icon Box -->
                            <td class="stack-column" width="80" valign="top">
                                <div style="width: 60px; height: 60px; border: 1px solid #333; background-color: #0a0a0a; text-align: center; line-height: 60px; color: #00ffcc; font-size: 24px;">
                                    &#8593;
                                </div>
                            </td>
                            <!-- Content -->
                            <td class="stack-column" valign="top" style="padding-left: 20px;">
                                <h3 style="margin: 0 0 5px; color: #ffffff; font-size: 18px;">SEO Services</h3>
                                <p style="margin: 0 0 10px; font-size: 14px; color: #999; line-height: 1.5;">
                                    Improve your Google rankings with expert SEO strategies that drive traffic.
                                </p>
                                <a href="#" style="color: #00ffcc; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">[ Forge My Weapon ]</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <!-- DIVIDER LINE -->
            <tr>
                <td style="padding: 0 20px 20px;">
                    <div style="height: 1px; background-color: #222; width: 100%;"></div>
                </td>
            </tr>

            <!-- SERVICE ROW 4: UI/UX (Icon Right - Alternating) -->
            <tr>
                <td style="padding: 0 20px 40px;">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" class="dir-rtl" style="direction: rtl;">
                        <tr>
                            <!-- Icon Box -->
                            <td class="stack-column" width="80" valign="top" style="direction: ltr;">
                                <div style="width: 60px; height: 60px; border: 1px solid #333; background-color: #0a0a0a; text-align: center; line-height: 60px; color: #00ffcc; font-size: 24px; margin-left: auto;">
                                    &#10024;
                                </div>
                            </td>
                            <!-- Content -->
                            <td class="stack-column" valign="top" style="padding-right: 20px; direction: ltr; text-align: right;">
                                <h3 style="margin: 0 0 5px; color: #ffffff; font-size: 18px;">Psychological UI/UX</h3>
                                <p style="margin: 0 0 10px; font-size: 14px; color: #999; line-height: 1.5;">
                                    Modern, user-friendly UI/UX designs that enhance engagement.
                                </p>
                                <a href="#" style="color: #00ffcc; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">[ Design My Interface ]</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <!-- CTA SECTION -->
            <tr>
                <td align="center" style="padding: 20px 20px 50px; background-color: #080808; border-top: 1px solid #222;">
                    <p style="font-size: 14px; color: #888; margin-bottom: 25px; letter-spacing: 1px;">
                        WARNING: Your competition is using a template. <br>
                        <span style="color: #ffffff;">INITIATE MASTERPIECE PROTOCOL.</span>
                    </p>

                    <!-- HOVER GLOW BUTTON -->
                    <!--[if mso]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://social.shriiitrackingsolution.in/" style="height:50px;v-text-anchor:middle;width:260px;" stroke="t" strokecolor="#00ffcc" fillcolor="#000000">
                    <w:anchorlock/>
                    <center style="color:#00ffcc;font-family:'Courier New',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;">
                        ARCHITECT YOUR VISION
                    </center>
                    </v:rect>
                    <![endif]-->
                    <!--[if !mso]><!-->
                    <a href="https://social.shriiitrackingsolution.in/" class="hover-glow" style="display: inline-block; padding: 15px 30px; border: 2px solid #00ffcc; color: #00ffcc; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; background-color: #000000;">
                        Architect Your Vision
                    </a>
                    <!--<![endif]-->
                </td>
            </tr>

            <!-- FOOTER -->
            <tr>
                <td align="center" style="padding: 40px 20px; border-top: 1px solid #111;">
                    <p style="margin: 0 0 10px; font-size: 12px; color: #444;">
                        // SHRIII TRACKING SOLUTION
                    </p>
                    <p style="margin: 0 0 20px; font-size: 10px; color: #444;">
                        CRAFTED_IN: VADODARA, GUJARAT
                    </p>
                    <p style="margin: 0; font-size: 10px; color: #333;">
                        <a href="#" style="color: #666; text-decoration: underline;">UNSUBSCRIBE</a> | 
                        <a href="#" style="color: #666; text-decoration: underline;">RE-SUBSCRIBE</a>
                    </p>
                </td>
            </tr>

        </table>
    </center>
</body>
</html>
