[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"use-cases-recruiting-landing-page-es":3,"iframe_data":139,"raw_iframe_data_https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Frecruiting-landing-page\u002Frecruiting-landing-page.html":140},{"id":4,"title":5,"best_practices":6,"copy_starters":22,"cover":45,"description":46,"extension":47,"faq":48,"h1":5,"key_facts":63,"meta":68,"order":69,"problems_this_solves":70,"rawbody":80,"sections":81,"seo":103,"seo_keywords":106,"stem":126,"tags":127,"who_it_is_for":129,"__hash__":137,"rawPath":138},"use_cases_es\u002Fuse_cases\u002Fes\u002Frecruiting-landing-page.json","Crea una Landing Page de Plataforma de Empleo que Atraiga Talento",{"title":7,"do":8,"avoid":15},"Mejores Prácticas",{"title":9,"items":10},"HACER",[11,12,13,14],"Incluye una barra de búsqueda de empleo prominente en la hero para que los visitantes actúen inmediatamente","Muestra logotipos de empresas y métricas clave (empleos activos, candidatos) para generar credibilidad","Usa CTAs separados para buscadores y empleadores para servir a ambas audiencias","Destaca ofertas de empleo reales o categorías para demostrar que la plataforma está activa",{"title":16,"items":17},"EVITAR",[18,19,20,21],"Evita titulares vagos como 'Te Ayudamos a Encontrar Empleo' — usa copy específico y orientado al beneficio","No ocultes la barra de búsqueda o el CTA de registro debajo del fold","Salta las fotos de stock genéricas — usa imágenes auténticas de lugares de trabajo y profesionales reales","Nunca ignores una audiencia — tanto buscadores como empleadores necesitan caminos claros hacia la acción",{"title":23,"description":24,"items":25},"Inicios de Texto","Úsalos como inspiración para tu propio texto. Personalízalos para que coincidan con la voz de tu marca y tu oferta específica.",[26,29,32,42],{"label":27,"content":28},"Titular","Encuentra Tu Próxima Carrera Soñada",{"label":30,"content":31},"Subtitular","Únete a [Número]+ profesionales y [Número]+ empresas que contratan en nuestra plataforma.",{"label":33,"content":34},"Puntos de Valor",[35,38,40],{"icon":36,"content":37},"check","Matching impulsado por IA basado en tus habilidades y preferencias",{"icon":36,"content":39},"Acceso directo a gerentes de contratación en empresas top",{"icon":36,"content":41},"Gratuito para buscadores — sin costos ocultos",{"label":43,"content":44},"Call to Action","Buscar Empleos","https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Frecruiting.webp","Conecta buscadores de empleo y empleadores con empleos destacados, logotipos de empresas, funcionalidad de búsqueda y CTAs para doble audiencia.","json",{"title":49,"items":50},"Preguntas Frecuentes",[51,54,57,60],{"label":52,"content":53},"¿Es gratuito para buscadores de empleo?","Sí, los buscadores pueden crear un perfil, explorar empleos y postularse sin costo. Las funciones premium como el impulso de visibilidad del perfil pueden estar disponibles de pago.",{"label":55,"content":56},"¿Cómo publican empleos los empleadores?","Los empleadores se registran, verifican su empresa y pueden publicar empleos a través del panel. Los precios y planes se detallan en la sección 'Para Empleadores'.",{"label":58,"content":59},"¿Las empresas y empleos están verificados?","Cada empleador en la plataforma es evaluado para garantizar oportunidades legítimas. Las ofertas de empleo se revisan para mantener calidad y relevancia.",{"label":61,"content":62},"¿Cómo funciona el matching de empleos?","Nuestro algoritmo impulsado por IA empareja candidatos con posiciones basándose en habilidades, experiencia y preferencias profesionales. También puedes explorar y filtrar empleos manualmente.",{"title":64,"goal":65,"section_count":66,"drafting_time":67},"Datos Clave","Reclutamiento","6 secciones","2-4 min para el borrador",{},11,{"title":71,"description":72,"items":73},"Problemas que Resuelve","Una landing page de reclutamiento sirve a dos audiencias simultáneamente, generando confianza tanto para buscadores como para empleadores e impulsando registros y publicaciones de empleos.",[74,75,76,77,78,79],"Atrae buscadores con una hero con búsqueda y propuesta de valor clara","Genera confianza del empleador a través de logotipos, badges de verificación y estadísticas de colocación","Impulsa registros duales con CTAs específicos para buscadores y empleadores","Demuestra actividad de la plataforma con contadores de empleos en vivo y métricas de candidatos","Reduce la fricción con una barra de búsqueda prominente que permite a los visitantes actuar inmediatamente","Proporciona una primera impresión profesional para contactos de prensa y alianzas","{\n  \"title\": \"Crea una Landing Page de Plataforma de Empleo que Atraiga Talento\",\n  \"description\": \"Conecta buscadores de empleo y empleadores con empleos destacados, logotipos de empresas, funcionalidad de búsqueda y CTAs para doble audiencia.\",\n  \"order\": 11,\n  \"cover\": \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Frecruiting.webp\",\n  \"tags\": [\n    \"Reclutamiento\",\n    \"Empleo\"\n  ],\n  \"sections\": {\n    \"title\": \"Plano de la Página (Blueprint)\",\n    \"description\": \"Este caso de uso incluye 6 secciones clave diseñadas para guiar a los visitantes desde el conocimiento hasta la acción.\",\n    \"items\": [\n      {\n        \"title\": \"Hero\",\n        \"description\": \"Lidera con un titular para doble audiencia, una barra de búsqueda de empleo (palabras clave + ubicación) y CTAs tanto para buscadores como para empleadores.\"\n      },\n      {\n        \"title\": \"Empleos Destacados\",\n        \"description\": \"Presenta una selección de las principales ofertas de empleo o categorías con nombres de empresas, títulos y ubicaciones para demostrar actividad.\"\n      },\n      {\n        \"title\": \"Prueba Social\",\n        \"description\": \"Muestra logotipos de empresas empleadoras en la plataforma, métricas clave (empleos activos, candidatos registrados) y historias de éxito.\"\n      },\n      {\n        \"title\": \"Propuesta de Valor\",\n        \"description\": \"Articula claramente los beneficios para ambas audiencias: matching inteligente para buscadores y candidatos de calidad para empleadores.\"\n      },\n      {\n        \"title\": \"CTA de Registro\",\n        \"description\": \"Ofrece CTAs distintos para buscadores ('Crea Tu Perfil') y empleadores ('Publica un Empleo') en múltiples puntos de la página.\"\n      },\n      {\n        \"title\": \"FAQ\",\n        \"description\": \"Responde preguntas sobre precios, verificación de empleos, cómo funciona el matching y si es gratuito para buscadores.\"\n      }\n    ]\n  },\n  \"who_it_is_for\": {\n    \"title\": \"Para quién está dirigido\",\n    \"items\": [\n      \"Plataformas de empleo que atraen tanto candidatos como empleadores\",\n      \"Agencias de reclutamiento que construyen una presencia en línea de marca\",\n      \"Startups de reclutamiento que lanzan un nuevo marketplace de talento\",\n      \"Empresas de tecnología de RRHH que promocionan herramientas o plataformas de contratación\",\n      \"Sitios de carrera de nicho dirigidos a industrias o roles específicos\"\n    ]\n  },\n  \"problems_this_solves\": {\n    \"title\": \"Problemas que Resuelve\",\n    \"description\": \"Una landing page de reclutamiento sirve a dos audiencias simultáneamente, generando confianza tanto para buscadores como para empleadores e impulsando registros y publicaciones de empleos.\",\n    \"items\": [\n      \"Atrae buscadores con una hero con búsqueda y propuesta de valor clara\",\n      \"Genera confianza del empleador a través de logotipos, badges de verificación y estadísticas de colocación\",\n      \"Impulsa registros duales con CTAs específicos para buscadores y empleadores\",\n      \"Demuestra actividad de la plataforma con contadores de empleos en vivo y métricas de candidatos\",\n      \"Reduce la fricción con una barra de búsqueda prominente que permite a los visitantes actuar inmediatamente\",\n      \"Proporciona una primera impresión profesional para contactos de prensa y alianzas\"\n    ]\n  },\n  \"copy_starters\": {\n    \"title\": \"Inicios de Texto\",\n    \"description\": \"Úsalos como inspiración para tu propio texto. Personalízalos para que coincidan con la voz de tu marca y tu oferta específica.\",\n    \"items\": [\n      {\n        \"label\": \"Titular\",\n        \"content\": \"Encuentra Tu Próxima Carrera Soñada\"\n      },\n      {\n        \"label\": \"Subtitular\",\n        \"content\": \"Únete a [Número]+ profesionales y [Número]+ empresas que contratan en nuestra plataforma.\"\n      },\n      {\n        \"label\": \"Puntos de Valor\",\n        \"content\": [\n          {\n            \"icon\": \"check\",\n            \"content\": \"Matching impulsado por IA basado en tus habilidades y preferencias\"\n          },\n          {\n            \"icon\": \"check\",\n            \"content\": \"Acceso directo a gerentes de contratación en empresas top\"\n          },\n          {\n            \"icon\": \"check\",\n            \"content\": \"Gratuito para buscadores — sin costos ocultos\"\n          }\n        ]\n      },\n      {\n        \"label\": \"Call to Action\",\n        \"content\": \"Buscar Empleos\"\n      }\n    ]\n  },\n  \"best_practices\": {\n    \"title\": \"Mejores Prácticas\",\n    \"do\": {\n      \"title\": \"HACER\",\n      \"items\": [\n        \"Incluye una barra de búsqueda de empleo prominente en la hero para que los visitantes actúen inmediatamente\",\n        \"Muestra logotipos de empresas y métricas clave (empleos activos, candidatos) para generar credibilidad\",\n        \"Usa CTAs separados para buscadores y empleadores para servir a ambas audiencias\",\n        \"Destaca ofertas de empleo reales o categorías para demostrar que la plataforma está activa\"\n      ]\n    },\n    \"avoid\": {\n      \"title\": \"EVITAR\",\n      \"items\": [\n        \"Evita titulares vagos como 'Te Ayudamos a Encontrar Empleo' — usa copy específico y orientado al beneficio\",\n        \"No ocultes la barra de búsqueda o el CTA de registro debajo del fold\",\n        \"Salta las fotos de stock genéricas — usa imágenes auténticas de lugares de trabajo y profesionales reales\",\n        \"Nunca ignores una audiencia — tanto buscadores como empleadores necesitan caminos claros hacia la acción\"\n      ]\n    }\n  },\n  \"seo_keywords\": {\n    \"title\": \"Palabras Clave SEO\",\n    \"description\": \"Usa estas palabras clave para optimizar tu página para motores de búsqueda y mejorar la visibilidad.\",\n    \"items\": [\n      {\n        \"list_name\": \"Palabra Clave Primaria\",\n        \"keywords\": [\n          \"landing page de plataforma de empleo\"\n        ]\n      },\n      {\n        \"list_name\": \"Palabras Clave Secundarias\",\n        \"keywords\": [\n          \"landing page de reclutamiento\",\n          \"página de inscripción de portal de empleo\",\n          \"landing page de plataforma de carrera\"\n        ]\n      },\n      {\n        \"list_name\": \"Palabras Clave Long-Tail\",\n        \"keywords\": [\n          \"cómo crear una landing page de plataforma de empleo\",\n          \"mejor plantilla de landing page de reclutamiento\",\n          \"mejores prácticas de landing page de portal de empleo\"\n        ]\n      }\n    ]\n  },\n  \"key_facts\": {\n    \"title\": \"Datos Clave\",\n    \"goal\": \"Reclutamiento\",\n    \"section_count\": \"6 secciones\",\n    \"drafting_time\": \"2-4 min para el borrador\"\n  },\n  \"faq\": {\n    \"title\": \"Preguntas Frecuentes\",\n    \"items\": [\n      {\n        \"label\": \"¿Es gratuito para buscadores de empleo?\",\n        \"content\": \"Sí, los buscadores pueden crear un perfil, explorar empleos y postularse sin costo. Las funciones premium como el impulso de visibilidad del perfil pueden estar disponibles de pago.\"\n      },\n      {\n        \"label\": \"¿Cómo publican empleos los empleadores?\",\n        \"content\": \"Los empleadores se registran, verifican su empresa y pueden publicar empleos a través del panel. Los precios y planes se detallan en la sección 'Para Empleadores'.\"\n      },\n      {\n        \"label\": \"¿Las empresas y empleos están verificados?\",\n        \"content\": \"Cada empleador en la plataforma es evaluado para garantizar oportunidades legítimas. Las ofertas de empleo se revisan para mantener calidad y relevancia.\"\n      },\n      {\n        \"label\": \"¿Cómo funciona el matching de empleos?\",\n        \"content\": \"Nuestro algoritmo impulsado por IA empareja candidatos con posiciones basándose en habilidades, experiencia y preferencias profesionales. También puedes explorar y filtrar empleos manualmente.\"\n      }\n    ]\n  },\n  \"seo\": {\n    \"title\": \"Crear Landing Page de Reclutamiento | Landing-Page\",\n    \"description\": \"Crea una landing page de reclutamiento con IA en minutos. Búsqueda de empleo y métricas clave para atraer talento.\"\n  },\n  \"h1\": \"Crea una Landing Page de Plataforma de Empleo que Atraiga Talento\"\n}",{"title":82,"description":83,"items":84},"Plano de la Página (Blueprint)","Este caso de uso incluye 6 secciones clave diseñadas para guiar a los visitantes desde el conocimiento hasta la acción.",[85,88,91,94,97,100],{"title":86,"description":87},"Hero","Lidera con un titular para doble audiencia, una barra de búsqueda de empleo (palabras clave + ubicación) y CTAs tanto para buscadores como para empleadores.",{"title":89,"description":90},"Empleos Destacados","Presenta una selección de las principales ofertas de empleo o categorías con nombres de empresas, títulos y ubicaciones para demostrar actividad.",{"title":92,"description":93},"Prueba Social","Muestra logotipos de empresas empleadoras en la plataforma, métricas clave (empleos activos, candidatos registrados) y historias de éxito.",{"title":95,"description":96},"Propuesta de Valor","Articula claramente los beneficios para ambas audiencias: matching inteligente para buscadores y candidatos de calidad para empleadores.",{"title":98,"description":99},"CTA de Registro","Ofrece CTAs distintos para buscadores ('Crea Tu Perfil') y empleadores ('Publica un Empleo') en múltiples puntos de la página.",{"title":101,"description":102},"FAQ","Responde preguntas sobre precios, verificación de empleos, cómo funciona el matching y si es gratuito para buscadores.",{"title":104,"description":105},"Crear Landing Page de Reclutamiento | Landing-Page","Crea una landing page de reclutamiento con IA en minutos. Búsqueda de empleo y métricas clave para atraer talento.",{"title":107,"description":108,"items":109},"Palabras Clave SEO","Usa estas palabras clave para optimizar tu página para motores de búsqueda y mejorar la visibilidad.",[110,114,120],{"list_name":111,"keywords":112},"Palabra Clave Primaria",[113],"landing page de plataforma de empleo",{"list_name":115,"keywords":116},"Palabras Clave Secundarias",[117,118,119],"landing page de reclutamiento","página de inscripción de portal de empleo","landing page de plataforma de carrera",{"list_name":121,"keywords":122},"Palabras Clave Long-Tail",[123,124,125],"cómo crear una landing page de plataforma de empleo","mejor plantilla de landing page de reclutamiento","mejores prácticas de landing page de portal de empleo","use_cases\u002Fes\u002Frecruiting-landing-page",[65,128],"Empleo",{"title":130,"items":131},"Para quién está dirigido",[132,133,134,135,136],"Plataformas de empleo que atraen tanto candidatos como empleadores","Agencias de reclutamiento que construyen una presencia en línea de marca","Startups de reclutamiento que lanzan un nuevo marketplace de talento","Empresas de tecnología de RRHH que promocionan herramientas o plataformas de contratación","Sitios de carrera de nicho dirigidos a industrias o roles específicos","7wHCLumjScMGmio4-Y1V1yRqqz8TS36j_8MoOGNW_gA","\u002Frecruiting-landing-page","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Horizon Habits — Build Better Days | iOS & Android\u003C\u002Ftitle>\n  \u003Cmeta name=\"description\" content=\"A delightful habit & routine app with streaks, focus timers, mood tracking, and AI nudges. No ads. 4.8★ average. Download free on iOS and Android.\">\n  \n  \u003C!-- Open Graph -->\n  \u003Cmeta property=\"og:title\" content=\"Horizon Habits — Build Better Days\">\n  \u003Cmeta property=\"og:description\" content=\"A delightful habit & routine app with streaks, focus timers, mood tracking, and AI nudges. No ads. 4.8★ average.\">\n  \u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fapp-icon-1024.png\">\n  \n  \u003C!-- Twitter Card -->\n  \u003Cmeta name=\"twitter:card\" content=\"summary_large_image\">\n  \u003Cmeta name=\"twitter:title\" content=\"Horizon Habits — Build Better Days\">\n  \u003Cmeta name=\"twitter:description\" content=\"A delightful habit & routine app with streaks, focus timers, mood tracking, and AI nudges.\">\n  \n  \u003C!-- Tailwind CSS CDN -->\n  \u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>\n  \n  \u003C!-- Tailwind Config -->\n  \u003Cscript>\n    tailwind.config = {\n      theme: {\n        extend: {\n          colors: {\n            background: '#fafafa',\n            foreground: '#0a0a0a',\n            primary: '#2563eb',\n            'primary-foreground': '#ffffff',\n            secondary: '#f1f5f9',\n            'secondary-foreground': '#1e293b',\n            accent: '#0ea5e9',\n            'accent-foreground': '#ffffff',\n            muted: '#f8fafc',\n            'muted-foreground': '#64748b',\n            card: '#ffffff',\n            'card-foreground': '#0a0a0a',\n            border: '#e2e8f0',\n            success: '#10b981',\n            'success-foreground': '#ffffff',\n          },\n          fontFamily: {\n            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],\n          },\n          borderRadius: {\n            'lg': '0.75rem',\n            'xl': '1rem',\n            '2xl': '1.5rem',\n            '3xl': '2rem',\n          },\n        }\n      }\n    }\n  \u003C\u002Fscript>\n  \n  \u003C!-- Google Fonts -->\n  \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n  \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n  \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n  \n  \u003C!-- Custom Styles -->\n  \u003Cstyle>\n    html {\n      scroll-behavior: smooth;\n    }\n    \n    @media (prefers-reduced-motion: prefer-reduced-motion) {\n      html {\n        scroll-behavior: auto;\n      }\n    }\n    \n    body {\n      font-feature-settings: \"rlig\" 1, \"calt\" 1;\n    }\n    \n    .text-balance {\n      text-wrap: balance;\n    }\n    \n    .text-pretty {\n      text-wrap: pretty;\n    }\n    \n    @media (prefers-color-scheme: dark) {\n      :root {\n        --color-background: #0a0a0a;\n        --color-foreground: #fafafa;\n        --color-card: #18181b;\n        --color-border: #27272a;\n      }\n    }\n  \u003C\u002Fstyle>\n  \n  \u003C!-- Structured Data -->\n  \u003Cscript type=\"application\u002Fld+json\">\n  {\n    \"@context\": \"https:\u002F\u002Fschema.org\",\n    \"@type\": \"Organization\",\n    \"name\": \"Horizon Labs, Inc.\",\n    \"url\": \"https:\u002F\u002Fhorizonhabits.example\",\n    \"logo\": \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Flogo-horizon.jpg\",\n    \"contactPoint\": {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+1-628-555-0186\",\n      \"contactType\": \"Customer Support\",\n      \"email\": \"support@horizonhabits.example\"\n    },\n    \"sameAs\": [\n      \"https:\u002F\u002Fwww.instagram.com\u002Fhorizonhabits\",\n      \"https:\u002F\u002Ftwitter.com\u002Fhorizonhabits\",\n      \"https:\u002F\u002Fwww.youtube.com\u002F@horizonhabits\"\n    ]\n  }\n  \u003C\u002Fscript>\n  \n  \u003Cscript type=\"application\u002Fld+json\">\n  {\n    \"@context\": \"https:\u002F\u002Fschema.org\",\n    \"@type\": \"MobileApplication\",\n    \"name\": \"Horizon Habits\",\n    \"operatingSystem\": \"iOS 15+, Android 9+\",\n    \"applicationCategory\": \"HealthApplication\",\n    \"aggregateRating\": {\n      \"@type\": \"AggregateRating\",\n      \"ratingValue\": \"4.8\",\n      \"ratingCount\": \"8412\"\n    },\n    \"offers\": {\n      \"@type\": \"Offer\",\n      \"price\": \"0\",\n      \"priceCurrency\": \"USD\"\n    },\n    \"screenshot\": \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fscreenshot-today-view.jpg\"\n  }\n  \u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody class=\"bg-background text-foreground antialiased\">\n\n  \u003C!-- Sticky Mobile Action Bar -->\n  \u003Cdiv id=\"mobile-action-bar\" class=\"fixed bottom-0 left-0 right-0 z-50 bg-card border-t border-border p-4 shadow-lg md:hidden\" style=\"display: none;\">\n    \u003Cdiv class=\"flex gap-3\">\n      \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fios\u002Fhorizon-habits', '_blank')\" class=\"flex-1 bg-primary text-primary-foreground font-semibold py-3 px-4 rounded-lg hover:bg-primary\u002F90 transition-colors flex items-center justify-center gap-2\">\n        \u003Ci data-lucide=\"apple\" class=\"w-5 h-5\">\u003C\u002Fi>\n        iOS\n      \u003C\u002Fbutton>\n      \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fandroid\u002Fhorizon-habits', '_blank')\" class=\"flex-1 bg-secondary text-secondary-foreground font-semibold py-3 px-4 rounded-lg hover:bg-secondary\u002F90 transition-colors flex items-center justify-center gap-2\">\n        \u003Ci data-lucide=\"play\" class=\"w-5 h-5\">\u003C\u002Fi>\n        Android\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cmain class=\"min-h-screen\">\n    \n    \u003C!-- Hero Section -->\n    \u003Csection class=\"relative overflow-hidden bg-gradient-to-b from-muted to-background py-16 md:py-24 lg:py-32\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Cdiv class=\"grid gap-12 lg:grid-cols-2 lg:gap-16 items-center\">\n          \u003C!-- Content -->\n          \u003Cdiv class=\"flex flex-col gap-6 text-center lg:text-left\">\n            \u003Ch1 class=\"text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl lg:text-7xl\">\n              Habits That Finally Stick\n            \u003C\u002Fh1>\n            \u003Cp class=\"text-lg text-muted-foreground text-pretty md:text-xl lg:text-2xl leading-relaxed\">\n              Horizon Habits turns routines into tiny wins—streaks, focus timers, mood check-ins, and smart nudges that meet you where you are. No ads. No noise.\n            \u003C\u002Fp>\n\n            \u003C!-- CTAs -->\n            \u003Cdiv class=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start\">\n              \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fios\u002Fhorizon-habits', '_blank')\" class=\"inline-flex items-center justify-center gap-2 bg-primary text-primary-foreground font-semibold py-3 px-6 rounded-lg text-base hover:bg-primary\u002F90 transition-colors\">\n                \u003Ci data-lucide=\"apple\" class=\"w-5 h-5\">\u003C\u002Fi>\n                Get on iOS\n              \u003C\u002Fbutton>\n              \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fandroid\u002Fhorizon-habits', '_blank')\" class=\"inline-flex items-center justify-center gap-2 bg-transparent border-2 border-border text-foreground font-semibold py-3 px-6 rounded-lg text-base hover:bg-muted transition-colors\">\n                \u003Ci data-lucide=\"play\" class=\"w-5 h-5\">\u003C\u002Fi>\n                Get on Android\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n\n            \u003C!-- Micro-assurance -->\n            \u003Cp class=\"text-sm text-muted-foreground\">Free to start • No ads • Data never sold\u003C\u002Fp>\n\n            \u003C!-- Trust strip -->\n            \u003Cdiv class=\"flex flex-col gap-2 text-sm text-muted-foreground border-t border-border pt-6\">\n              \u003Cp class=\"font-medium\">Average 4.8★ from 8,412 reviews\u003C\u002Fp>\n              \u003Cp>Featured on Product Hunt • Syncs with Apple Health & Google Fit\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Hero Visual -->\n          \u003Cdiv class=\"relative flex justify-center lg:justify-end\">\n            \u003Cdiv class=\"relative w-full max-w-md\">\n              \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fhero-app-mockup.jpg\" alt=\"Horizon Habits app interface showing Weekly Review & Streaks\" class=\"rounded-3xl shadow-2xl w-full\" loading=\"eager\">\n              \u003Cp class=\"text-center text-sm text-muted-foreground mt-4\">Weekly Review & Streaks\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Value Pillars Section -->\n    \u003Csection id=\"why\" class=\"py-16 md:py-24 bg-background\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-12 md:text-4xl text-balance\">Why You'll Love It\u003C\u002Fh2>\n        \u003Cdiv class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Cdiv class=\"flex items-center gap-3\">\n              \u003Cdiv class=\"p-2 rounded-lg bg-primary\u002F10\">\n                \u003Ci data-lucide=\"flame\" class=\"h-6 w-6 text-primary\">\u003C\u002Fi>\n              \u003C\u002Fdiv>\n              \u003Ch3 class=\"text-xl font-semibold\">Streaks That Motivate\u003C\u002Fh3>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">Visual rings and gentle reminders keep you consistent without guilt traps.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Cdiv class=\"flex items-center gap-3\">\n              \u003Cdiv class=\"p-2 rounded-lg bg-primary\u002F10\">\n                \u003Ci data-lucide=\"timer\" class=\"h-6 w-6 text-primary\">\u003C\u002Fi>\n              \u003C\u002Fdiv>\n              \u003Ch3 class=\"text-xl font-semibold\">Focus That Flows\u003C\u002Fh3>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">Pomodoro-style timers with session notes and distraction logging.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Cdiv class=\"flex items-center gap-3\">\n              \u003Cdiv class=\"p-2 rounded-lg bg-primary\u002F10\">\n                \u003Ci data-lucide=\"heart\" class=\"h-6 w-6 text-primary\">\u003C\u002Fi>\n              \u003C\u002Fdiv>\n              \u003Ch3 class=\"text-xl font-semibold\">Mood Meets Habit\u003C\u002Fh3>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">Quick mood check-ins to spot which routines boost your energy.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Cdiv class=\"flex items-center gap-3\">\n              \u003Cdiv class=\"p-2 rounded-lg bg-primary\u002F10\">\n                \u003Ci data-lucide=\"sparkles\" class=\"h-6 w-6 text-primary\">\u003C\u002Fi>\n              \u003C\u002Fdiv>\n              \u003Ch3 class=\"text-xl font-semibold\">AI Nudges (Optional)\u003C\u002Fh3>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">On-device suggestions adapt frequency and time-of-day based on your history.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Cdiv class=\"flex items-center gap-3\">\n              \u003Cdiv class=\"p-2 rounded-lg bg-primary\u002F10\">\n                \u003Ci data-lucide=\"smartphone\" class=\"h-6 w-6 text-primary\">\u003C\u002Fi>\n              \u003C\u002Fdiv>\n              \u003Ch3 class=\"text-xl font-semibold\">Beautifully Simple\u003C\u002Fh3>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">One thumb. Big targets. Dark mode that's actually dark.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- How It Works Section -->\n    \u003Csection id=\"how-it-works\" class=\"py-16 md:py-24 bg-muted\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-12 md:text-4xl text-balance\">How It Works\u003C\u002Fh2>\n        \u003Cdiv class=\"grid gap-8 md:grid-cols-3 max-w-5xl mx-auto\">\n          \u003Cdiv class=\"flex flex-col gap-4 text-center\">\n            \u003Cdiv class=\"mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground text-2xl font-bold\">\n              1\n            \u003C\u002Fdiv>\n            \u003Ch3 class=\"text-xl font-semibold\">Pick 3 Tiny Habits\u003C\u002Fh3>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">Start with easy wins (water, stretch, read 5 minutes).\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-4 text-center\">\n            \u003Cdiv class=\"mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground text-2xl font-bold\">\n              2\n            \u003C\u002Fdiv>\n            \u003Ch3 class=\"text-xl font-semibold\">Run Focus Sessions\u003C\u002Fh3>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">Timers & check-ins build momentum.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-4 text-center\">\n            \u003Cdiv class=\"mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground text-2xl font-bold\">\n              3\n            \u003C\u002Fdiv>\n            \u003Ch3 class=\"text-xl font-semibold\">Review & Adjust\u003C\u002Fh3>\n            \u003Cp class=\"text-muted-foreground leading-relaxed\">Weekly review suggests tweaks to keep the streak alive.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Features Section -->\n    \u003Csection id=\"features\" class=\"py-16 md:py-24 bg-background\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-12 md:text-4xl text-balance\">Feature Highlights\u003C\u002Fh2>\n        \u003Cdiv class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto\">\n          \u003Cdiv class=\"flex flex-col gap-3 p-6 rounded-2xl bg-card border border-border hover:border-primary\u002F50 transition-colors\">\n            \u003Ci data-lucide=\"layout-grid\" class=\"h-8 w-8 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-lg font-semibold\">Routine Cards\u003C\u002Fh3>\n            \u003Cp class=\"text-sm text-muted-foreground leading-relaxed\">Morning, Work, Evening; reorder with drag & drop.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-3 p-6 rounded-2xl bg-card border border-border hover:border-primary\u002F50 transition-colors\">\n            \u003Ci data-lucide=\"bell\" class=\"h-8 w-8 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-lg font-semibold\">Smart Reminders\u003C\u002Fh3>\n            \u003Cp class=\"text-sm text-muted-foreground leading-relaxed\">Time-window alerts, gentle nudges after commute or meals.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-3 p-6 rounded-2xl bg-card border border-border hover:border-primary\u002F50 transition-colors\">\n            \u003Ci data-lucide=\"bar-chart-3\" class=\"h-8 w-8 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-lg font-semibold\">Stats & Insights\u003C\u002Fh3>\n            \u003Cp class=\"text-sm text-muted-foreground leading-relaxed\">Heatmaps, best time-of-day, habit–mood correlation.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-3 p-6 rounded-2xl bg-card border border-border hover:border-primary\u002F50 transition-colors\">\n            \u003Ci data-lucide=\"users\" class=\"h-8 w-8 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-lg font-semibold\">Social Circles (Private)\u003C\u002Fh3>\n            \u003Cp class=\"text-sm text-muted-foreground leading-relaxed\">Share streaks with 5 friends; no global feeds, no compare games.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-3 p-6 rounded-2xl bg-card border border-border hover:border-primary\u002F50 transition-colors\">\n            \u003Ci data-lucide=\"link-2\" class=\"h-8 w-8 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-lg font-semibold\">Integrations\u003C\u002Fh3>\n            \u003Cp class=\"text-sm text-muted-foreground leading-relaxed\">Apple Health, Google Fit, Apple Calendar, Google Calendar.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-3 p-6 rounded-2xl bg-card border border-border hover:border-primary\u002F50 transition-colors\">\n            \u003Ci data-lucide=\"database\" class=\"h-8 w-8 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-lg font-semibold\">Backups\u003C\u002Fh3>\n            \u003Cp class=\"text-sm text-muted-foreground leading-relaxed\">iCloud \u002F Google Drive; export CSV anytime.\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Social Proof Section -->\n    \u003Csection id=\"social-proof\" class=\"py-16 md:py-24 bg-muted\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-8 md:text-4xl text-balance\">Loved by Thousands\u003C\u002Fh2>\n\n        \u003C!-- Rating badges -->\n        \u003Cdiv class=\"flex flex-col sm:flex-row gap-6 justify-center items-center mb-12\">\n          \u003Cdiv class=\"flex items-center gap-2 px-6 py-3 rounded-full bg-card border border-border\">\n            \u003Ci data-lucide=\"star\" class=\"h-5 w-5 fill-yellow-400 text-yellow-400\">\u003C\u002Fi>\n            \u003Cspan class=\"font-semibold\">4.8★ on iOS\u003C\u002Fspan>\n            \u003Cspan class=\"text-sm text-muted-foreground\">(6,203 ratings)\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"flex items-center gap-2 px-6 py-3 rounded-full bg-card border border-border\">\n            \u003Ci data-lucide=\"star\" class=\"h-5 w-5 fill-yellow-400 text-yellow-400\">\u003C\u002Fi>\n            \u003Cspan class=\"font-semibold\">4.7★ on Android\u003C\u002Fspan>\n            \u003Cspan class=\"text-sm text-muted-foreground\">(2,209 ratings)\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Testimonial carousel -->\n        \u003Cdiv class=\"max-w-3xl mx-auto\">\n          \u003Cdiv class=\"bg-card rounded-2xl p-8 border border-border\">\n            \u003Cp id=\"testimonial-quote\" class=\"text-xl md:text-2xl text-center mb-4 text-balance\">\"The first habit app that didn't make me feel bad. ⭐⭐⭐⭐⭐\"\u003C\u002Fp>\n            \u003Cp id=\"testimonial-author\" class=\"text-center text-muted-foreground\">— J. Ortega\u003C\u002Fp>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Carousel dots -->\n          \u003Cdiv class=\"flex justify-center gap-2 mt-6\">\n            \u003Cbutton onclick=\"changeTestimonial(0)\" class=\"h-2 w-8 rounded-full bg-primary transition-all\" aria-label=\"Go to testimonial 1\">\u003C\u002Fbutton>\n            \u003Cbutton onclick=\"changeTestimonial(1)\" class=\"h-2 w-2 rounded-full bg-border transition-all\" aria-label=\"Go to testimonial 2\">\u003C\u002Fbutton>\n            \u003Cbutton onclick=\"changeTestimonial(2)\" class=\"h-2 w-2 rounded-full bg-border transition-all\" aria-label=\"Go to testimonial 3\">\u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Gallery Section -->\n    \u003Csection id=\"gallery\" class=\"py-16 md:py-24 bg-background\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-12 md:text-4xl text-balance\">See It in Action\u003C\u002Fh2>\n\n        \u003C!-- Screenshots -->\n        \u003Cdiv class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12\">\n          \u003Cdiv class=\"flex flex-col gap-2\">\n            \u003Cdiv class=\"relative aspect-[9\u002F16] rounded-xl overflow-hidden border border-border\">\n              \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fscreenshot-today-view.jpg\" alt=\"Today View\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-xs text-center text-muted-foreground\">Today View\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-2\">\n            \u003Cdiv class=\"relative aspect-[9\u002F16] rounded-xl overflow-hidden border border-border\">\n              \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fscreenshot-focus-timer.jpg\" alt=\"Focus Timer\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-xs text-center text-muted-foreground\">Focus Timer\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-2\">\n            \u003Cdiv class=\"relative aspect-[9\u002F16] rounded-xl overflow-hidden border border-border\">\n              \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fscreenshot-mood-checkin.jpg\" alt=\"Mood Check-in\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-xs text-center text-muted-foreground\">Mood Check-in\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-2\">\n            \u003Cdiv class=\"relative aspect-[9\u002F16] rounded-xl overflow-hidden border border-border\">\n              \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fscreenshot-weekly-review.jpg\" alt=\"Weekly Review\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-xs text-center text-muted-foreground\">Weekly Review\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-2\">\n            \u003Cdiv class=\"relative aspect-[9\u002F16] rounded-xl overflow-hidden border border-border\">\n              \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fscreenshot-insights.jpg\" alt=\"Insights\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-xs text-center text-muted-foreground\">Insights\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex flex-col gap-2\">\n            \u003Cdiv class=\"relative aspect-[9\u002F16] rounded-xl overflow-hidden border border-border\">\n              \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fapp-page\u002Fscreenshot-settings.jpg\" alt=\"Settings\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-xs text-center text-muted-foreground\">Settings\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Video CTA -->\n        \u003Cdiv class=\"text-center\">\n          \u003Cbutton onclick=\"openVideoModal()\" class=\"inline-flex items-center justify-center gap-2 bg-transparent border-2 border-border text-foreground font-semibold py-3 px-6 rounded-lg hover:bg-muted transition-colors\">\n            \u003Ci data-lucide=\"play\" class=\"w-5 h-5\">\u003C\u002Fi>\n            Watch 45s Trailer\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Video Modal -->\n        \u003Cdiv id=\"video-modal\" class=\"fixed inset-0 z-50 hidden items-center justify-center bg-black\u002F80 p-4\">\n          \u003Cdiv class=\"relative w-full max-w-4xl\">\n            \u003Cbutton onclick=\"closeVideoModal()\" class=\"absolute -top-12 right-0 text-white hover:text-gray-300\" aria-label=\"Close video\">\n              \u003Ci data-lucide=\"x\" class=\"h-8 w-8\">\u003C\u002Fi>\n            \u003C\u002Fbutton>\n            \u003Cvideo controls autoplay class=\"w-full rounded-lg\" src=\"https:\u002F\u002Fvideo.example.com\u002Fhorizon\u002Ftrailer-45s.mp4\">\n              \u003Ctrack kind=\"captions\">\n              Your browser does not support the video tag.\n            \u003C\u002Fvideo>\n            \u003Cp class=\"text-center text-white mt-4 text-sm\">\n              \u003Ca href=\"https:\u002F\u002Fvideo.example.com\u002Fhorizon\u002Ftrailer-45s.mp4\" class=\"underline\">Download video for low bandwidth\u003C\u002Fa>\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Pricing Section -->\n    \u003Csection id=\"pricing\" class=\"py-16 md:py-24 bg-muted\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-8 md:text-4xl text-balance\">Simple, Honest Pricing\u003C\u002Fh2>\n\n        \u003C!-- Toggle -->\n        \u003Cdiv class=\"flex justify-center items-center gap-4 mb-12\">\n          \u003Cspan id=\"monthly-label\" class=\"font-semibold\">Monthly\u003C\u002Fspan>\n          \u003Cbutton onclick=\"togglePricing()\" class=\"relative inline-flex h-8 w-14 items-center rounded-full bg-primary transition-colors\" role=\"switch\" aria-checked=\"false\">\n            \u003Cspan id=\"toggle-switch\" class=\"inline-block h-6 w-6 transform rounded-full bg-white transition-transform translate-x-1\">\u003C\u002Fspan>\n          \u003C\u002Fbutton>\n          \u003Cspan id=\"annual-label\" class=\"text-muted-foreground\">\n            Annual \u003Cspan class=\"text-success text-sm\">(2 months free)\u003C\u002Fspan>\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Pricing cards -->\n        \u003Cdiv class=\"grid md:grid-cols-2 gap-8 max-w-5xl mx-auto\">\n          \u003C!-- Free -->\n          \u003Cdiv class=\"flex flex-col gap-6 p-8 rounded-2xl bg-card border border-border\">\n            \u003Cdiv>\n              \u003Ch3 class=\"text-2xl font-bold mb-2\">Free\u003C\u002Fh3>\n              \u003Cp class=\"text-4xl font-bold\">$0\u003C\u002Fp>\n            \u003C\u002Fdiv>\n            \u003Cul class=\"flex flex-col gap-3 flex-grow\">\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 text-success mt-0.5 flex-shrink-0\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">Core habits, streaks, focus timer\u003C\u002Fspan>\n              \u003C\u002Fli>\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 text-success mt-0.5 flex-shrink-0\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">Mood check-ins\u003C\u002Fspan>\n              \u003C\u002Fli>\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 text-success mt-0.5 flex-shrink-0\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">iCloud\u002FGoogle Drive backup\u003C\u002Fspan>\n              \u003C\u002Fli>\n            \u003C\u002Ful>\n            \u003Cdiv class=\"flex flex-col gap-2\">\n              \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fios\u002Fhorizon-habits', '_blank')\" class=\"w-full bg-transparent border-2 border-border text-foreground font-semibold py-3 px-6 rounded-lg hover:bg-muted transition-colors\">\n                Start Free on iOS\n              \u003C\u002Fbutton>\n              \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fandroid\u002Fhorizon-habits', '_blank')\" class=\"w-full bg-transparent border-2 border-border text-foreground font-semibold py-3 px-6 rounded-lg hover:bg-muted transition-colors\">\n                Start Free on Android\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Pro -->\n          \u003Cdiv class=\"flex flex-col gap-6 p-8 rounded-2xl bg-primary text-primary-foreground border-2 border-primary relative\">\n            \u003Cdiv class=\"absolute -top-4 left-1\u002F2 -translate-x-1\u002F2 px-4 py-1 bg-accent text-accent-foreground rounded-full text-sm font-semibold\">\n              Most Popular\n            \u003C\u002Fdiv>\n            \u003Cdiv>\n              \u003Ch3 class=\"text-2xl font-bold mb-2\">Horizon Pro\u003C\u002Fh3>\n              \u003Cp id=\"pro-price\" class=\"text-4xl font-bold\">$4.99\u002Fmo\u003C\u002Fp>\n              \u003Cp id=\"pro-savings\" class=\"text-sm opacity-90 mt-1\" style=\"display: none;\">Save $30 annually\u003C\u002Fp>\n            \u003C\u002Fdiv>\n            \u003Cul class=\"flex flex-col gap-3 flex-grow\">\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 flex-shrink-0 mt-0.5\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">Unlimited routines & custom icons\u003C\u002Fspan>\n              \u003C\u002Fli>\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 flex-shrink-0 mt-0.5\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">Advanced insights & habit–mood correlations\u003C\u002Fspan>\n              \u003C\u002Fli>\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 flex-shrink-0 mt-0.5\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">Calendar integrations & priority reminders\u003C\u002Fspan>\n              \u003C\u002Fli>\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 flex-shrink-0 mt-0.5\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">AI Nudges & Weekly Review deep dives\u003C\u002Fspan>\n              \u003C\u002Fli>\n              \u003Cli class=\"flex items-start gap-2\">\n                \u003Ci data-lucide=\"check\" class=\"h-5 w-5 flex-shrink-0 mt-0.5\">\u003C\u002Fi>\n                \u003Cspan class=\"text-sm\">Private Social Circles (up to 10 friends)\u003C\u002Fspan>\n              \u003C\u002Fli>\n            \u003C\u002Ful>\n            \u003Cdiv class=\"flex flex-col gap-2\">\n              \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fios\u002Fhorizon-habits', '_blank')\" class=\"w-full bg-white text-primary font-semibold py-3 px-6 rounded-lg hover:bg-white\u002F90 transition-colors\">\n                Start Free on iOS\n              \u003C\u002Fbutton>\n              \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fandroid\u002Fhorizon-habits', '_blank')\" class=\"w-full bg-white text-primary font-semibold py-3 px-6 rounded-lg hover:bg-white\u002F90 transition-colors\">\n                Start Free on Android\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-xs opacity-90 text-center\">\n              Payment processed by App Store \u002F Google Play. Cancel anytime in your store settings.\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Privacy Section -->\n    \u003Csection id=\"privacy\" class=\"py-16 md:py-24 bg-background\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-12 md:text-4xl text-balance\">Privacy & Data You Can Trust\u003C\u002Fh2>\n        \u003Cdiv class=\"grid gap-6 md:grid-cols-2 max-w-4xl mx-auto mb-8\">\n          \u003Cdiv class=\"flex items-start gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Ci data-lucide=\"shield\" class=\"h-6 w-6 text-primary flex-shrink-0 mt-1\">\u003C\u002Fi>\n            \u003Cp class=\"leading-relaxed\">No ads • No data sold\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex items-start gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Ci data-lucide=\"lock\" class=\"h-6 w-6 text-primary flex-shrink-0 mt-1\">\u003C\u002Fi>\n            \u003Cp class=\"leading-relaxed\">End-to-end encryption for sync and backups\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex items-start gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Ci data-lucide=\"eye\" class=\"h-6 w-6 text-primary flex-shrink-0 mt-1\">\u003C\u002Fi>\n            \u003Cp class=\"leading-relaxed\">Health data read\u002Fwrite is opt-in; visible data map in Settings\u003C\u002Fp>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"flex items-start gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Ci data-lucide=\"download\" class=\"h-6 w-6 text-primary flex-shrink-0 mt-1\">\u003C\u002Fi>\n            \u003Cp class=\"leading-relaxed\">Export your data anytime (CSV); delete account in-app with one tap\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"text-center\">\n          \u003Cp class=\"text-sm text-muted-foreground\">\n            Security pages:\n            \u003Ca href=\"\u002Fprivacy\" class=\"underline hover:text-foreground\">Privacy\u003C\u002Fa>\n            •\n            \u003Ca href=\"\u002Fdata-map\" class=\"underline hover:text-foreground\">Data Map\u003C\u002Fa>\n            •\n            \u003Ca href=\"\u002Fsub-processors\" class=\"underline hover:text-foreground\">Sub-processors\u003C\u002Fa>\n            •\n            \u003Ca href=\"\u002Fstatus\" class=\"underline hover:text-foreground\">Status\u003C\u002Fa>\n          \u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Compatibility Section -->\n    \u003Csection id=\"compatibility\" class=\"py-16 md:py-24 bg-muted\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-12 md:text-4xl text-balance\">Works Where You Do\u003C\u002Fh2>\n        \u003Cdiv class=\"grid md:grid-cols-3 gap-8 max-w-5xl mx-auto\">\n          \u003C!-- iOS -->\n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Ci data-lucide=\"apple\" class=\"h-10 w-10 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-xl font-semibold\">iOS\u003C\u002Fh3>\n            \u003Cul class=\"text-sm text-muted-foreground space-y-2 leading-relaxed\">\n              \u003Cli>• iPhone & iPad, iOS 15+\u003C\u002Fli>\n              \u003Cli>• Widgets, Live Activities\u003C\u002Fli>\n              \u003Cli>• Lock Screen shortcuts\u003C\u002Fli>\n              \u003Cli>• Apple Watch companion (streak glance)\u003C\u002Fli>\n            \u003C\u002Ful>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Android -->\n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Ci data-lucide=\"smartphone\" class=\"h-10 w-10 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-xl font-semibold\">Android\u003C\u002Fh3>\n            \u003Cul class=\"text-sm text-muted-foreground space-y-2 leading-relaxed\">\n              \u003Cli>• Android 9+\u003C\u002Fli>\n              \u003Cli>• Home screen widgets\u003C\u002Fli>\n              \u003Cli>• Wear OS tile (streak glance)\u003C\u002Fli>\n            \u003C\u002Ful>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Languages -->\n          \u003Cdiv class=\"flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border\">\n            \u003Ci data-lucide=\"globe\" class=\"h-10 w-10 text-primary\">\u003C\u002Fi>\n            \u003Ch3 class=\"text-xl font-semibold\">Accessibility\u003C\u002Fh3>\n            \u003Cul class=\"text-sm text-muted-foreground space-y-2 leading-relaxed\">\n              \u003Cli>• English, Spanish, Japanese\u003C\u002Fli>\n              \u003Cli>• Dark\u002FLight modes\u003C\u002Fli>\n              \u003Cli>• Dynamic type sizes\u003C\u002Fli>\n            \u003C\u002Ful>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- FAQ Section -->\n    \u003Csection id=\"faq\" class=\"py-16 md:py-24 bg-background\">\n      \u003Cdiv class=\"container mx-auto px-4\">\n        \u003Ch2 class=\"text-3xl font-bold text-center mb-12 md:text-4xl text-balance\">Frequently Asked Questions\u003C\u002Fh2>\n        \u003Cdiv class=\"max-w-3xl mx-auto space-y-4\">\n          \u003Cdiv class=\"border border-border rounded-xl overflow-hidden bg-card\">\n            \u003Cbutton onclick=\"toggleFAQ(0)\" class=\"w-full flex items-center justify-between p-6 text-left hover:bg-muted\u002F50 transition-colors\" aria-expanded=\"false\">\n              \u003Cspan class=\"font-semibold pr-4\">Is the AI on-device?\u003C\u002Fspan>\n              \u003Ci data-lucide=\"chevron-down\" class=\"h-5 w-5 flex-shrink-0 transition-transform faq-icon\">\u003C\u002Fi>\n            \u003C\u002Fbutton>\n            \u003Cdiv class=\"faq-answer hidden px-6 pb-6 text-muted-foreground leading-relaxed\">\n              Suggestions run on-device where possible; server models opt-in with anonymized metrics.\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"border border-border rounded-xl overflow-hidden bg-card\">\n            \u003Cbutton onclick=\"toggleFAQ(1)\" class=\"w-full flex items-center justify-between p-6 text-left hover:bg-muted\u002F50 transition-colors\" aria-expanded=\"false\">\n              \u003Cspan class=\"font-semibold pr-4\">Do I need an account?\u003C\u002Fspan>\n              \u003Ci data-lucide=\"chevron-down\" class=\"h-5 w-5 flex-shrink-0 transition-transform faq-icon\">\u003C\u002Fi>\n            \u003C\u002Fbutton>\n            \u003Cdiv class=\"faq-answer hidden px-6 pb-6 text-muted-foreground leading-relaxed\">\n              Local-only works; account enables multi-device sync and backups.\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"border border-border rounded-xl overflow-hidden bg-card\">\n            \u003Cbutton onclick=\"toggleFAQ(2)\" class=\"w-full flex items-center justify-between p-6 text-left hover:bg-muted\u002F50 transition-colors\" aria-expanded=\"false\">\n              \u003Cspan class=\"font-semibold pr-4\">Will I lose data if I uninstall?\u003C\u002Fspan>\n              \u003Ci data-lucide=\"chevron-down\" class=\"h-5 w-5 flex-shrink-0 transition-transform faq-icon\">\u003C\u002Fi>\n            \u003C\u002Fbutton>\n            \u003Cdiv class=\"faq-answer hidden px-6 pb-6 text-muted-foreground leading-relaxed\">\n              Not if you enable iCloud\u002FGoogle Drive backups or export CSV.\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"border border-border rounded-xl overflow-hidden bg-card\">\n            \u003Cbutton onclick=\"toggleFAQ(3)\" class=\"w-full flex items-center justify-between p-6 text-left hover:bg-muted\u002F50 transition-colors\" aria-expanded=\"false\">\n              \u003Cspan class=\"font-semibold pr-4\">Can I share with friends?\u003C\u002Fspan>\n              \u003Ci data-lucide=\"chevron-down\" class=\"h-5 w-5 flex-shrink-0 transition-transform faq-icon\">\u003C\u002Fi>\n            \u003C\u002Fbutton>\n            \u003Cdiv class=\"faq-answer hidden px-6 pb-6 text-muted-foreground leading-relaxed\">\n              Yes—Private Social Circles (invite-only, no public feeds).\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"border border-border rounded-xl overflow-hidden bg-card\">\n            \u003Cbutton onclick=\"toggleFAQ(4)\" class=\"w-full flex items-center justify-between p-6 text-left hover:bg-muted\u002F50 transition-colors\" aria-expanded=\"false\">\n              \u003Cspan class=\"font-semibold pr-4\">Refunds?\u003C\u002Fspan>\n              \u003Ci data-lucide=\"chevron-down\" class=\"h-5 w-5 flex-shrink-0 transition-transform faq-icon\">\u003C\u002Fi>\n            \u003C\u002Fbutton>\n            \u003Cdiv class=\"faq-answer hidden px-6 pb-6 text-muted-foreground leading-relaxed\">\n              Managed by App Store \u002F Google Play policies.\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \n          \u003Cdiv class=\"border border-border rounded-xl overflow-hidden bg-card\">\n            \u003Cbutton onclick=\"toggleFAQ(5)\" class=\"w-full flex items-center justify-between p-6 text-left hover:bg-muted\u002F50 transition-colors\" aria-expanded=\"false\">\n              \u003Cspan class=\"font-semibold pr-4\">Accessibility?\u003C\u002Fspan>\n              \u003Ci data-lucide=\"chevron-down\" class=\"h-5 w-5 flex-shrink-0 transition-transform faq-icon\">\u003C\u002Fi>\n            \u003C\u002Fbutton>\n            \u003Cdiv class=\"faq-answer hidden px-6 pb-6 text-muted-foreground leading-relaxed\">\n              Supports VoiceOver\u002FTalkBack, large text, and reduced motion.\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003C!-- Final CTA Section -->\n    \u003Csection class=\"py-16 md:py-24 bg-gradient-to-b from-muted to-background\">\n      \u003Cdiv class=\"container mx-auto px-4 text-center\">\n        \u003Cp class=\"text-2xl md:text-3xl font-semibold mb-8 text-balance\">Tiny wins, compounding every day.\u003C\u002Fp>\n        \u003Cdiv class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n          \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fios\u002Fhorizon-habits', '_blank')\" class=\"inline-flex items-center justify-center gap-2 bg-primary text-primary-foreground font-semibold py-3 px-6 rounded-lg text-base hover:bg-primary\u002F90 transition-colors\">\n            \u003Ci data-lucide=\"apple\" class=\"w-5 h-5\">\u003C\u002Fi>\n            Get on iOS\n          \u003C\u002Fbutton>\n          \u003Cbutton onclick=\"window.open('https:\u002F\u002Fapps.example.com\u002Fandroid\u002Fhorizon-habits', '_blank')\" class=\"inline-flex items-center justify-center gap-2 bg-transparent border-2 border-border text-foreground font-semibold py-3 px-6 rounded-lg text-base hover:bg-muted transition-colors\">\n            \u003Ci data-lucide=\"play\" class=\"w-5 h-5\">\u003C\u002Fi>\n            Get on Android\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n  \u003C\u002Fmain>\n\n  \u003C!-- Footer -->\n  \u003Cfooter class=\"border-t border-border bg-card py-12\">\n    \u003Cdiv class=\"container mx-auto px-4\">\n      \u003Cdiv class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-4 mb-8\">\n        \u003C!-- Company -->\n        \u003Cdiv>\n          \u003Ch3 class=\"font-semibold mb-4\">Company\u003C\u002Fh3>\n          \u003Cul class=\"space-y-2 text-sm text-muted-foreground\">\n            \u003Cli>\u003Ca href=\"\u002Fprivacy\" class=\"hover:text-foreground\">Privacy\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"\u002Fterms\" class=\"hover:text-foreground\">Terms\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"\u002Fsecurity\" class=\"hover:text-foreground\">Security\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"\u002Fdata-map\" class=\"hover:text-foreground\">Data Map\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"\u002Fstatus\" class=\"hover:text-foreground\">Status\u003C\u002Fa>\u003C\u002Fli>\n          \u003C\u002Ful>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Resources -->\n        \u003Cdiv>\n          \u003Ch3 class=\"font-semibold mb-4\">Resources\u003C\u002Fh3>\n          \u003Cul class=\"space-y-2 text-sm text-muted-foreground\">\n            \u003Cli>\u003Ca href=\"\u002Fpress\" class=\"hover:text-foreground\">Press Kit\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"mailto:support@horizonhabits.example\" class=\"hover:text-foreground\">Contact\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"tel:+16285550186\" class=\"hover:text-foreground\">+1 (628) 555-0186\u003C\u002Fa>\u003C\u002Fli>\n          \u003C\u002Ful>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Social -->\n        \u003Cdiv>\n          \u003Ch3 class=\"font-semibold mb-4\">Follow Us\u003C\u002Fh3>\n          \u003Cdiv class=\"flex gap-4\">\n            \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fhorizonhabits\" class=\"text-muted-foreground hover:text-foreground\" aria-label=\"Instagram\">\n              \u003Ci data-lucide=\"instagram\" class=\"h-5 w-5\">\u003C\u002Fi>\n            \u003C\u002Fa>\n            \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhorizonhabits\" class=\"text-muted-foreground hover:text-foreground\" aria-label=\"Twitter\">\n              \u003Ci data-lucide=\"twitter\" class=\"h-5 w-5\">\u003C\u002Fi>\n            \u003C\u002Fa>\n            \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@horizonhabits\" class=\"text-muted-foreground hover:text-foreground\" aria-label=\"YouTube\">\n              \u003Ci data-lucide=\"youtube\" class=\"h-5 w-5\">\u003C\u002Fi>\n            \u003C\u002Fa>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Address -->\n        \u003Cdiv>\n          \u003Ch3 class=\"font-semibold mb-4\">Horizon Labs, Inc.\u003C\u002Fh3>\n          \u003Caddress class=\"text-sm text-muted-foreground not-italic leading-relaxed\">\n            120 2nd St, Suite 500\u003Cbr>\n            San Francisco, CA 94105\n          \u003C\u002Faddress>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"border-t border-border pt-8 text-center text-sm text-muted-foreground\">\n        \u003Cp>© 2025 Horizon Labs, Inc. All rights reserved.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Ffooter>\n\n  \u003C!-- Lucide Icons CDN -->\n  \u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Flucide@latest\">\u003C\u002Fscript>\n  \u003Cscript>\n    \u002F\u002F Initialize Lucide icons\n    lucide.createIcons();\n    \n    \u002F\u002F Testimonial data\n    const testimonials = [\n      { quote: \"The first habit app that didn't make me feel bad. ⭐⭐⭐⭐⭐\", author: \"J. Ortega\" },\n      { quote: \"Mood + routine insights are gold.\", author: \"Priya S.\" },\n      { quote: \"Timers + weekly reviews = momentum.\", author: \"Marco D.\" }\n    ];\n    \n    let currentTestimonialIndex = 0;\n    \n    function changeTestimonial(index) {\n      currentTestimonialIndex = index;\n      document.getElementById('testimonial-quote').textContent = '\"' + testimonials[index].quote + '\"';\n      document.getElementById('testimonial-author').textContent = '— ' + testimonials[index].author;\n      \n      \u002F\u002F Update dots\n      const dots = document.querySelectorAll('[onclick^=\"changeTestimonial\"]');\n      dots.forEach((dot, i) => {\n        if (i === index) {\n          dot.className = 'h-2 w-8 rounded-full bg-primary transition-all';\n        } else {\n          dot.className = 'h-2 w-2 rounded-full bg-border transition-all';\n        }\n      });\n    }\n    \n    \u002F\u002F Pricing toggle\n    let isAnnual = false;\n    \n    function togglePricing() {\n      isAnnual = !isAnnual;\n      const toggleSwitch = document.getElementById('toggle-switch');\n      const proPrice = document.getElementById('pro-price');\n      const proSavings = document.getElementById('pro-savings');\n      const monthlyLabel = document.getElementById('monthly-label');\n      const annualLabel = document.getElementById('annual-label');\n      \n      if (isAnnual) {\n        toggleSwitch.classList.remove('translate-x-1');\n        toggleSwitch.classList.add('translate-x-7');\n        proPrice.textContent = '$29.99\u002Fyr';\n        proSavings.style.display = 'block';\n        monthlyLabel.classList.remove('font-semibold');\n        monthlyLabel.classList.add('text-muted-foreground');\n        annualLabel.classList.remove('text-muted-foreground');\n        annualLabel.classList.add('font-semibold');\n      } else {\n        toggleSwitch.classList.remove('translate-x-7');\n        toggleSwitch.classList.add('translate-x-1');\n        proPrice.textContent = '$4.99\u002Fmo';\n        proSavings.style.display = 'none';\n        monthlyLabel.classList.add('font-semibold');\n        monthlyLabel.classList.remove('text-muted-foreground');\n        annualLabel.classList.add('text-muted-foreground');\n        annualLabel.classList.remove('font-semibold');\n      }\n    }\n    \n    \u002F\u002F FAQ toggle\n    function toggleFAQ(index) {\n      const faqItems = document.querySelectorAll('.faq-answer');\n      const faqIcons = document.querySelectorAll('.faq-icon');\n      const faqButtons = document.querySelectorAll('[onclick^=\"toggleFAQ\"]');\n      \n      const isOpen = !faqItems[index].classList.contains('hidden');\n      \n      if (isOpen) {\n        faqItems[index].classList.add('hidden');\n        faqIcons[index].classList.remove('rotate-180');\n        faqButtons[index].setAttribute('aria-expanded', 'false');\n      } else {\n        faqItems[index].classList.remove('hidden');\n        faqIcons[index].classList.add('rotate-180');\n        faqButtons[index].setAttribute('aria-expanded', 'true');\n      }\n    }\n    \n    \u002F\u002F Video modal\n    function openVideoModal() {\n      const modal = document.getElementById('video-modal');\n      modal.classList.remove('hidden');\n      modal.classList.add('flex');\n      lucide.createIcons();\n    }\n    \n    function closeVideoModal() {\n      const modal = document.getElementById('video-modal');\n      modal.classList.add('hidden');\n      modal.classList.remove('flex');\n      const video = modal.querySelector('video');\n      video.pause();\n    }\n    \n    \u002F\u002F Mobile action bar - show on scroll\n    let lastScrollTop = 0;\n    const actionBar = document.getElementById('mobile-action-bar');\n    \n    window.addEventListener('scroll', function() {\n      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n      \n      if (scrollTop > 300) {\n        actionBar.style.display = 'block';\n      } else {\n        actionBar.style.display = 'none';\n      }\n      \n      lastScrollTop = scrollTop;\n    });\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>Loading preview\u003C\u002Ftitle>\n    \u003Cstyle>\n      body {\n        margin: 0;\n        min-height: 100vh;\n        display: grid;\n        place-items: center;\n        background: linear-gradient(180deg, #f7f4ee 0%, #fbfaf7 100%);\n        color: #171717;\n        font-family: Arial, sans-serif;\n      }\n      .preview-shell {\n        width: min(560px, calc(100vw - 32px));\n        border: 1px solid #e7e1d6;\n        border-radius: 22px;\n        background: rgba(255, 255, 255, 0.96);\n        box-shadow: 0 24px 60px rgba(36, 25, 12, 0.12);\n        padding: 32px 28px;\n      }\n      .preview-label {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        margin-bottom: 16px;\n        color: #8a8377;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n      }\n      .preview-title {\n        margin: 0 0 10px;\n        font-size: 28px;\n        line-height: 1.1;\n      }\n      .preview-copy {\n        margin: 0;\n        color: #5f5a52;\n        font-size: 15px;\n        line-height: 1.6;\n      }\n    \u003C\u002Fstyle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv class=\"preview-shell\">\n      \u003Cdiv class=\"preview-label\">Preview\u003C\u002Fdiv>\n      \u003Ch1 class=\"preview-title\">Interactive preview loads after the page opens.\u003C\u002Fh1>\n      \u003Cp class=\"preview-copy\">The static build skips remote template fetches so prerender can complete reliably. The full preview is loaded on the client.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>",1777539818991]