<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>thesign</title>
    <meta name="description" content="thesign is the design practice of Be | Shaping the Future, an ENG Company.We build systems, experiences, and strategies that shape what's next.">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://thesign.be-tse.it/">
    <meta property="og:title" content="thesign">
    <meta property="og:description" content="thesign is the design practice of Be | Shaping the Future, an ENG Company.We build systems, experiences, and strategies that shape what's next.">
    <meta property="og:image" content="https://thesign.be-tse.it/assets/metagraph.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://thesign.be-tse.it/">
    <meta property="twitter:title" content="thesign">
    <meta property="twitter:description" content="thesign is the design practice of Be | Shaping the Future, an ENG Company.We build systems, experiences, and strategies that shape what's next.">
    <meta property="twitter:image" content="https://thesign.be-tse.it/assets/metagraph.png">
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
    <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=Inter+Tight:wght@400&family=Space+Grotesk:wght@300;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            height: 100dvh;
            width: 100vw;
            position: fixed;
            background-color: #141414;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        #root {
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            position: fixed;
            overflow: hidden;
            background-color: #141414;
        }

        .container {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .background {
            position: absolute;
            inset: 0;
        }

        .background-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .background-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .background-dark {
            position: absolute;
            background: rgba(20, 20, 20, 0.7);
            inset: 0;
        }

        .content {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 66px;
            align-items: center;
        }

        .logo {
            width: 400px;
            height: 123px;
            background-image: url('assets/thesign.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            mix-blend-mode: soft-light;
            filter: invert(1);
            flex-shrink: 0;
        }

        .page-title {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 48px;
            color: #FAFAFA;
            text-align: center;
            margin: 0;
            line-height: 1.2;
        }

        .page-subtitle {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 300;
            font-size: 18px;
            color: rgba(250, 250, 250, 0.85);
            text-align: center;
            line-height: 1.6;
            max-width: 600px;
        }

        .text-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
            text-align: center;
            width: 100%;
        }

        .first-text {
            font-family: 'Inter Tight', sans-serif;
            font-weight: 400;
            position: relative;
            flex-shrink: 0;
            font-size: 18px;
            color: #FAFAFA;
            width: 100%;
        }

        .second-text {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 300;
            position: relative;
            flex-shrink: 0;
            font-size: 14px;
            color: rgba(250, 250, 250, 0.8);
            width: 100%;
        }

        .typewriter-wrapper {
            position: relative;
        }

        .typewriter-invisible {
            visibility: hidden;
        }

        .typewriter-visible {
            position: absolute;
            left: 0;
            top: 0;
            text-decoration: inherit;
        }

        .button {
            position: absolute;
            background: #141414;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-radius: 100px;
            cursor: pointer;
            border: none;
            transition: background-color 0.2s;
        }

        .button:hover {
            background: #1a1a1a;
        }

        .button-text {
            font-family: 'Inter Tight', sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;
            white-space: pre;
        }

        .notify-button {
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 150px;
        }

        .close-button {
            right: 31px;
            top: 31px;
            width: 116px;
            height: 37px;
            z-index: 20;
            gap: 0;
            justify-content: space-between;
        }

        .close-icon {
            width: 24px;
            height: 24px;
            color: rgba(250, 250, 250, 0.8);
        }

        .overlay {
            position: absolute;
            inset: 0;
            backdrop-filter: blur(4px);
            background: rgba(0, 0, 0, 0.2);
        }

        .form-container {
            position: absolute;
            bottom: 50px;
            display: flex;
            flex-direction: column;
            gap: 28px;
            align-items: center;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }

        .chat-block {
            position: relative;
            flex-shrink: 0;
            width: 100%;
        }

        .chat-block-inner {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .chat-text-wrapper {
            box-sizing: border-box;
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            padding-left: 20px;
            padding-right: 0;
            position: relative;
            width: 100%;
        }

        .chat-text {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 300;
            flex-grow: 1;
            position: relative;
            flex-shrink: 0;
            font-size: 14px;
            color: #FAFAFA;
            min-width: 1px;
            min-height: 1px;
        }

        .chat-text-bold {
            font-weight: 700;
        }

        .chat-text a {
            text-decoration: underline;
            text-decoration-skip-ink: none;
            text-underline-position: from-font;
            color: #FAFAFA;
        }

        .email-bubble {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-end;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
            width: 100%;
        }

        .email-bubble-inner {
            background: #141414;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 5px 10px;
            position: relative;
            border-radius: 100px;
            flex-shrink: 0;
        }

        .email-bubble-text {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 300;
            position: relative;
            flex-shrink: 0;
            font-size: 14px;
            text-align: center;
            color: #FAFAFA;
            white-space: pre;
        }

        .input-container {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            position: relative;
            border-radius: 100px;
            flex-shrink: 0;
            width: 300px;
        }

        .input-border {
            position: absolute;
            border: 1px solid rgba(250, 250, 250, 0.6);
            inset: 0;
            pointer-events: none;
            border-radius: 100px;
        }

        .email-input {
            font-family: 'Inter Tight', sans-serif;
            font-weight: 400;
            position: relative;
            flex-shrink: 0;
            font-size: 16px;
            color: #FAFAFA;
            background: transparent;
            border: none;
            outline: none;
            flex: 1;
        }

        .email-input::placeholder {
            color: rgba(250, 250, 250, 0.4);
        }

        .email-input:disabled {
            opacity: 0.4;
        }

        .submit-button {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background: transparent;
            border: none;
            padding: 0;
            transform: rotate(90deg) scaleY(-1);
        }

        .submit-button:disabled {
            cursor: not-allowed;
        }

        .arrow-icon {
            width: 24px;
            height: 24px;
            transition: opacity 0.2s;
        }

        .disabled-input {
            opacity: 0.1;
            pointer-events: none;
        }

        .hidden {
            display: none;
        }

        .grecaptcha-badge {
            visibility: hidden !important;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translateX(-8px);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translateX(8px);
            }
        }

        .shake {
            animation: shake 0.5s ease-in-out;
        }

        /* Desktop styles */
        @media (min-width: 768px) {
            .text-content {
                max-width: 400px;
            }

            .first-text {
                min-height: 22px;
            }

            .second-text {
                min-height: 42px;
            }
        }

        .recaptcha-text {
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 300;
            font-size: 10px;
            color: rgba(250, 250, 250, 0.4);
            text-align: center;
            width: 100%;
        }

        .recaptcha-text a {
            color: rgba(250, 250, 250, 0.6);
            text-decoration: none;
        }

        .recaptcha-text a:hover {
            text-decoration: underline;
        }

        /* Mobile styles */
        @media (max-width: 767px) {
            .content {
                padding: 0 20px;
                max-width: 100vw;
            }

            .logo {
                width: 300px;
                height: 92px;
            }

            .page-title {
                font-size: 32px;
            }

            .page-subtitle {
                font-size: 14px;
                max-width: 320px;
            }

            .text-content {
                max-width: 300px;
            }

            .recaptcha-text {
                max-width: 300px;
                bottom: 15px;
            }

            .first-text {
                min-height: 22px;
            }

            .second-text {
                min-height: 63px;
            }
        }
    </style>
    <script src="https://www.google.com/recaptcha/api.js?render=6LfMZFEsAAAAANuvi3T5yjcPD51POTrr-Js4Uo-g"></script>
<script>var __uzdbm_1 = "4e25a437-691c-48d8-93b4-fdd1c1e9393a";var __uzdbm_2 = "MWI5YTIzM2MtZDJhaS00MjI4LWJlMzctZDc4ODU3ODM0NzdkJDY2LjEwMi45LjEzMQ==";var __uzdbm_3 = "7f90004e25a437-691c-48d8-93b4-fdd1c1e9393a1-17715718368170-002d7910843745ebf9310";var __uzdbm_4 = "false";var __uzdbm_5 = "uzmx";var __uzdbm_6 = "7f9000741a5aba-72c0-457b-bab7-42eec57bc1131-17715718368170-8612d5e00a866cd510";var __uzdbm_7 = "be-tse.it";</script> <script>   (function (w, d, e, u, c, g, a, b) {     w["SSJSConnectorObj"] = w["SSJSConnectorObj"] || {       ss_cid: c,       domain_info: "auto",     };     w[g] = function (i, j) {       w["SSJSConnectorObj"][i] = j;     };     a = d.createElement(e);     a.async = true;     if (       navigator.userAgent.indexOf('MSIE') !== -1 ||       navigator.appVersion.indexOf('Trident/') > -1     ) {       u = u.replace("/advanced/", "/advanced/ie/");     }     a.src = u;     b = d.getElementsByTagName(e)[0];     b.parentNode.insertBefore(a, b);   })(     window, document, "script", "https://bi-connect.be-tse.it/18f5227b-e27b-445a-a53f-f845fbe69b40/stormcaster.js", "d2ak", "ssConf"   );   ssConf("c1", "https://bi-connect.be-tse.it");   ssConf("c3", "c99a4269-161c-4242-a3f0-28d44fa6ce24");   ssConf("au", "bi-connect.be-tse.it");   ssConf("cu", "validate.perfdrive.com, ssc"); </script></head>

<body>
    <div id="root">
        <div class="container">
            <!-- Background -->
            <div class="background">
                <div class="background-overlay">
                    <img alt="" class="background-image" src="assets/bg-form.png" />
                    <div class="background-dark"></div>
                </div>
            </div>

            <!-- Content -->
            <div class="content">
                <div id="logo" class="logo"></div>
                <div class="text-content">
                    <div class="first-text" id="first-text"></div>
                    <div class="second-text" id="second-text"></div>
                </div>
            </div>

            <!-- Notify Me Button -->
            <button id="notify-button" class="button notify-button">
                <span class="button-text">Notify me</span>
            </button>

            <!-- Close Button -->
            <button id="close-button" class="button close-button hidden">
                <span class="button-text">Close</span>
                <svg class="close-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18" />
                    <path d="m6 6 12 12" />
                </svg>
            </button>

            <!-- Overlay -->
            <div id="overlay" class="overlay hidden"></div>

            <!-- Form Container -->
            <div id="form-container" class="form-container hidden">
                <!-- Chat blocks will be added here dynamically -->
            </div>

            <small class="recaptcha-text">This site is protected by reCAPTCHA and the Google
                <a href="https://policies.google.com/privacy">Privacy Policy</a> and
                <a href="https://policies.google.com/terms">Terms of Service</a> apply.
            </small>
        </div>
    </div>

    <script>
        // Arrow SVG path
        const arrowPaths = {
            p214fa6a0: "M16 4V15C16 17.75 13.802 20 11.115 20V20H11.145H6",
            p370c5980: "M11.952 8.048L16 4L20.048 8.048"
        };

        // State
        let isMobile = window.innerWidth < 768;
        let step = 'initial'; // 'initial', 'form', 'chat'
        let email = '';
        let errorMessages = [];
        let showSecondBlock = false;
        let isTextComplete = false;

        // Utility: Typewriter function
        function typewriter(element, text, speed, delay, onComplete) {
            let index = 0;
            const invisibleSpan = document.createElement('span');
            invisibleSpan.className = 'typewriter-invisible';
            invisibleSpan.textContent = text;

            const visibleSpan = document.createElement('span');
            visibleSpan.className = 'typewriter-visible';
            visibleSpan.textContent = '';

            const wrapper = document.createElement('span');
            wrapper.className = 'typewriter-wrapper';
            wrapper.style.textDecoration = 'inherit';
            wrapper.appendChild(invisibleSpan);
            wrapper.appendChild(visibleSpan);

            element.appendChild(wrapper);

            setTimeout(() => {
                const interval = setInterval(() => {
                    if (index < text.length) {
                        visibleSpan.textContent += text[index];
                        index++;
                    } else {
                        clearInterval(interval);
                        if (onComplete) onComplete();
                    }
                }, speed);
            }, delay);
        }

        // Utility: Email validation
        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }

        // Initialize typewriter texts
        function initTexts() {
            const firstText = document.getElementById('first-text');
            const secondText = document.getElementById('second-text');

            // First text
            typewriter(firstText, 'Where strategy meets design', 50, 0, () => {
                // Second text after first completes
                if (isMobile) {
                    // Mobile: 3 lines
                    typewriter(secondText, 'A new design practice built to', 30, 300);
                    setTimeout(() => {
                        secondText.appendChild(document.createElement('br'));
                        typewriter(secondText, 'shape systems, experiences,', 30, 0);
                    }, 300 + (34 * 30));
                    setTimeout(() => {
                        secondText.appendChild(document.createElement('br'));
                        typewriter(secondText, 'and strategy.', 30, 0);
                    }, 300 + (34 * 30) + (28 * 30));
                } else {
                    // Desktop: 2 lines
                    typewriter(secondText, 'A new design practice built to shape systems,', 30, 300);
                    setTimeout(() => {
                        secondText.appendChild(document.createElement('br'));
                        typewriter(secondText, 'experiences, and strategy.', 30, 0);
                    }, 300 + (47 * 30));
                }
            });
        }

        // Show form
        function showForm() {
            step = 'form';
            document.getElementById('notify-button').classList.add('hidden');
            document.getElementById('close-button').classList.remove('hidden');
            document.getElementById('overlay').classList.remove('hidden');

            const formContainer = document.getElementById('form-container');
            formContainer.classList.remove('hidden');
            formContainer.innerHTML = `
                <div class="chat-block" id="first-block">
                    <div class="chat-block-inner">
                        <div class="chat-text-wrapper">
                            <div class="chat-text" id="first-chat-text"></div>
                        </div>
                    </div>
                </div>
                
                <div class="input-container" id="email-form">
                    <div class="input-border"></div>
                    <input type="text" id="email-input" class="email-input" placeholder="Enter your email" disabled>
                    <button type="button" id="submit-button" class="submit-button" disabled>
                        <svg class="arrow-icon" style="opacity: 0.4" fill="none" viewBox="0 0 24 24">
                            <path d="${arrowPaths.p214fa6a0}" stroke="#FAFAFA" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                            <path d="${arrowPaths.p370c5980}" stroke="#FAFAFA" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                        </svg>
                    </button>
                </div>
            `;

            setTimeout(() => {
                const firstChatText = document.getElementById('first-chat-text');
                typewriter(firstChatText, 'Drop your email below and', 20, 0);
                setTimeout(() => {
                    firstChatText.appendChild(document.createElement('br'));
                    typewriter(firstChatText, "we'll ping you the moment we launch.", 20, 0, () => {
                        setTimeout(() => {
                            showSecondBlock = true;

                            const secondBlock = document.createElement('div');
                            secondBlock.className = 'chat-block';
                            secondBlock.innerHTML = `
                                <div class="chat-block-inner">
                                    <div class="chat-text-wrapper">
                                        <div class="chat-text" id="second-chat-text"></div>
                                    </div>
                                </div>
                            `;
                            formContainer.insertBefore(secondBlock, document.getElementById('email-form'));

                            const secondChatText = document.getElementById('second-chat-text');
                            typewriter(secondChatText, "We'll only use it for this notification.", 20, 0);
                            setTimeout(() => {
                                secondChatText.appendChild(document.createElement('br'));
                                typewriter(secondChatText, "No spam, we promise!", 20, 0);
                            }, 1000);
                            setTimeout(() => {
                                secondChatText.appendChild(document.createElement('br'));
                                const linkSpan = document.createElement('span');
                                typewriter(linkSpan, '[', 20, 0);
                                secondChatText.appendChild(linkSpan);

                                setTimeout(() => {
                                    const link = document.createElement('a');
                                    link.href = 'https://www.be-tse.it/wp-content/uploads/2016/01/Website_Privacy_Policy_ENG.pdf';
                                    link.target = '_blank';
                                    typewriter(link, 'read our Privacy Policy', 20, 0);
                                    secondChatText.appendChild(link);

                                    setTimeout(() => {
                                        const closeBracket = document.createElement('span');
                                        typewriter(closeBracket, ']', 20, 0, () => {
                                            isTextComplete = true;
                                            const emailInput = document.getElementById('email-input');
                                            const submitButton = document.getElementById('submit-button');
                                            emailInput.disabled = false;
                                            submitButton.disabled = false;
                                            emailInput.focus();
                                        });
                                        secondChatText.appendChild(closeBracket);
                                    }, 570);
                                }, 30);
                            }, 1500);
                        }, 500);
                    });
                }, 700);
            }, 300);

            // Add event listeners
            const emailInput = document.getElementById('email-input');
            const submitButton = document.getElementById('submit-button');
            const arrowIcon = submitButton.querySelector('.arrow-icon');

            emailInput.addEventListener('input', (e) => {
                email = e.target.value;
                if (email) {
                    arrowIcon.style.opacity = '1';
                } else {
                    arrowIcon.style.opacity = '0.4';
                }
            });

            submitButton.addEventListener('click', handleSubmit);
            emailInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') handleSubmit();
            });
        }

        // Handle submit
        function handleSubmit() {
            if (!email || !validateEmail(email)) {
                // Show error
                const errorBlock = document.createElement('div');
                errorBlock.className = 'chat-block';
                errorBlock.innerHTML = `
                    <div class="chat-block-inner">
                        <div class="chat-text-wrapper">
                            <div class="chat-text" id="error-text-${Date.now()}"></div>
                        </div>
                    </div>
                `;

                const formContainer = document.getElementById('form-container');
                formContainer.insertBefore(errorBlock, document.getElementById('email-form'));

                const errorText = errorBlock.querySelector('.chat-text');
                typewriter(errorText, "Hmm! That doesn't look like a valid email", 20, 0);
                setTimeout(() => {
                    errorText.appendChild(document.createElement('br'));
                    typewriter(errorText, "address. Did you make a typo?", 20, 0);
                }, 1050);

                // Shake effect
                const emailForm = document.getElementById('email-form');
                emailForm.classList.add('shake');
                setTimeout(() => {
                    emailForm.classList.remove('shake');
                    document.getElementById('email-input').value = '';
                    email = '';
                    document.querySelector('.arrow-icon').style.opacity = '0.4';
                }, 500);
                return;
            }

            // Disable UI during submission
            const submitButton = document.getElementById('submit-button');
            const emailInput = document.getElementById('email-input');
            submitButton.disabled = true;
            emailInput.disabled = true;

            // Execute reCAPTCHA
            grecaptcha.ready(function() {
                grecaptcha.execute('6LfMZFEsAAAAANuvi3T5yjcPD51POTrr-Js4Uo-g', {
                    action: 'submit'
                }).then(function(token) {
                    // Send request with token
                    fetch('send_email.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                email: email,
                                recaptcha_token: token
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showChat();
                            } else {
                                throw new Error(data.message || 'Errore durante l\'invio');
                            }
                        })
                        .catch(error => {
                            // Re-enable on error
                            submitButton.disabled = false;
                            emailInput.disabled = false;

                            // Show error message logic here if needed or reuse existing
                            console.error('Error:', error);

                            const errorBlock = document.createElement('div');
                            errorBlock.className = 'chat-block';
                            errorBlock.innerHTML = `
                            <div class="chat-block-inner">
                                <div class="chat-text-wrapper">
                                    <div class="chat-text" id="error-text-api-${Date.now()}"></div>
                                </div>
                            </div>
                        `;
                            const formContainer = document.getElementById('form-container');
                            formContainer.insertBefore(errorBlock, document.getElementById('email-form'));
                            const errorText = errorBlock.querySelector('.chat-text');
                            typewriter(errorText, "Something went wrong. Please try again.", 20, 0);
                        });
                });
            });

        }

        // Show chat
        function showChat() {
            step = 'chat';
            const formContainer = document.getElementById('form-container');

            // Keep existing blocks, make static
            formContainer.innerHTML = `
                <div class="chat-block">
                    <div class="chat-block-inner">
                        <div class="chat-text-wrapper">
                            <div class="chat-text">
                                <p style="margin: 0;">Drop your email below and</p>
                                <p style="margin: 0;">we'll ping you the moment we launch.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="chat-block">
                    <div class="chat-block-inner">
                        <div class="chat-text-wrapper">
                            <div class="chat-text">
                                <p style="margin: 0;">We'll only use it for this notification.</p>
                                <p style="margin: 0;">No spam, we promise!</p>
                                <p style="margin: 0;">[<a href="/privacy-policy">read our Privacy Policy</a>]</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="email-bubble">
                    <div class="email-bubble-inner">
                        <p class="email-bubble-text">${email}</p>
                    </div>
                </div>
                
                <div class="input-container disabled-input">
                    <div class="input-border"></div>
                    <input type="text" class="email-input" placeholder="Enter your email" disabled>
                    <button type="button" class="submit-button" disabled style="transform: rotate(90deg) scaleY(-1);">
                        <svg class="arrow-icon" fill="none" viewBox="0 0 24 24">
                            <path d="${arrowPaths.p214fa6a0}" stroke="#FAFAFA" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                            <path d="${arrowPaths.p370c5980}" stroke="#FAFAFA" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                        </svg>
                    </button>
                </div>
            `;

            setTimeout(() => {
                const confirmBlock = document.createElement('div');
                confirmBlock.className = 'chat-block';
                confirmBlock.innerHTML = `
                    <div class="chat-block-inner">
                        <div class="chat-text-wrapper">
                            <div class="chat-text" id="confirm-text"></div>
                        </div>
                    </div>
                `;
                formContainer.insertBefore(confirmBlock, formContainer.lastElementChild);

                const confirmText = document.getElementById('confirm-text');
                const boldSpan = document.createElement('span');
                boldSpan.className = 'chat-text-bold';
                typewriter(boldSpan, "You're on the list!", 20, 0);
                confirmText.appendChild(boldSpan);

                setTimeout(() => {
                    confirmText.appendChild(document.createElement('br'));
                    const lightSpan = document.createElement('span');
                    typewriter(lightSpan, "Keep an eye on your inbox for updates.", 20, 0);
                    confirmText.appendChild(lightSpan);
                }, 450);

                setTimeout(() => {
                    confirmText.appendChild(document.createElement('br'));
                    confirmText.appendChild(document.createElement('br'));
                    const closeLink = document.createElement('button');
                    closeLink.style.textDecoration = 'underline';
                    closeLink.style.cursor = 'pointer';
                    closeLink.style.background = 'transparent';
                    closeLink.style.border = 'none';
                    closeLink.style.padding = '0';
                    closeLink.style.color = '#FAFAFA';
                    closeLink.style.fontFamily = "'Space Grotesk', sans-serif";
                    closeLink.style.fontWeight = '300';
                    closeLink.style.fontSize = '14px';
                    closeLink.onclick = handleClose;
                    typewriter(closeLink, "All set, you can close this view.", 20, 0);
                    confirmText.appendChild(closeLink);
                }, 1250);
            }, 1500);
        }

        // Handle close
        function handleClose() {
            step = 'initial';
            email = '';
            errorMessages = [];
            showSecondBlock = false;
            isTextComplete = false;

            document.getElementById('notify-button').classList.remove('hidden');
            document.getElementById('close-button').classList.add('hidden');
            document.getElementById('overlay').classList.add('hidden');
            document.getElementById('form-container').classList.add('hidden');
            document.getElementById('form-container').innerHTML = '';
        }

        // Event listeners
        document.getElementById('notify-button').addEventListener('click', showForm);
        document.getElementById('close-button').addEventListener('click', handleClose);
        document.getElementById('overlay').addEventListener('click', handleClose);

        // Initialize
        initTexts();
    </script>
</body>

</html>