Careers Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n .font-heading { font-family: 'Playfair Display', Georgia, serif; }\n .font-body { font-family: 'DM Sans', system-ui, sans-serif; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full font-body\">\n <div id=\"app-wrapper\" class=\"h-full w-full overflow-auto\" style=\"background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 50%, #d1d5db 100%);\">\n <header class=\"border-b border-gray-300\/50 backdrop-blur-sm bg-gray-100\/30 sticky top-0 z-50\">\n <div class=\"max-w-6xl mx-auto px-6 py-4 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-green-500 flex items-center justify-center\">\n <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/>\n <\/svg>\n <\/div><span id=\"company-name\" class=\"text-xl font-semibold text-gray-900\">Retizen<\/span>\n <\/div>\n <nav class=\"hidden md:flex items-center gap-8\"><a href=\"#positions\" class=\"text-gray-700 hover:text-orange-500 transition-colors\">Open Positions<\/a> <a href=\"#culture\" class=\"text-gray-700 hover:text-orange-500 transition-colors\">Culture<\/a> <a href=\"#benefits\" class=\"text-gray-700 hover:text-orange-500 transition-colors\">Benefits<\/a>\n <\/nav>\n <\/div>\n <\/header>\n <section class=\"py-20 px-6\">\n <div class=\"max-w-4xl mx-auto text-center\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-green-100\/60 border border-green-300\/50 mb-8\"><span class=\"w-2 h-2 rounded-full bg-green-500 animate-pulse\"><\/span> <span class=\"text-green-700 text-sm font-medium\">We’re Hiring<\/span>\n <\/div>\n <h1 id=\"hero-title\" class=\"font-heading text-5xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight\">Build the Future <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-green-600\">With Us<\/span><\/h1>\n <p id=\"hero-subtitle\" class=\"text-xl text-gray-700 max-w-2xl mx-auto leading-relaxed\">Join our team of innovators, dreamers, and builders. We’re looking for passionate people to help shape tomorrow’s technology.<\/p>\n <\/div>\n <\/section>\n <section id=\"positions\" class=\"py-16 px-6\">\n <div class=\"max-w-5xl mx-auto\">\n <div class=\"flex items-center justify-between mb-10\">\n <h2 class=\"font-heading text-3xl font-bold text-gray-900\">Open Positions<\/h2>\n <div class=\"flex items-center gap-3\"><select id=\"department-filter\" class=\"bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400\/50\"> <option value=\"all\">All Departments<\/option> <option value=\"engineering\">Engineering<\/option> <option value=\"design\">Design<\/option> <option value=\"marketing\">Marketing<\/option> <option value=\"operations\">Operations<\/option> <\/select>\n <\/div>\n <\/div>\n <div id=\"job-listings\" class=\"space-y-4\">\n <\/div>\n <\/div>\n <\/section>\n <section id=\"culture\" class=\"py-16 px-6 bg-white\/40\">\n <div class=\"max-w-5xl mx-auto\">\n <h2 class=\"font-heading text-3xl font-bold text-gray-900 text-center mb-12\">Why Join Us?<\/h2>\n <div class=\"grid md:grid-cols-3 gap-6\">\n <div class=\"p-6 rounded-2xl bg-white\/60 border border-gray-200\/60 hover:border-orange-400\/40 transition-colors\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-orange-300\/30 to-green-300\/30 flex items-center justify-center mb-4\">\n <svg class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Continuous Learning<\/h3>\n <p class=\"text-gray-700 text-sm\">Annual learning budget and access to conferences worldwide.<\/p>\n <\/div>\n <div class=\"p-6 rounded-2xl bg-white\/60 border border-gray-200\/60 hover:border-orange-400\/40 transition-colors\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-orange-300\/30 to-green-300\/30 flex items-center justify-center mb-4\">\n <svg class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Remote-First<\/h3>\n <p class=\"text-gray-700 text-sm\">Work from anywhere in the world with flexible hours.<\/p>\n <\/div>\n <div class=\"p-6 rounded-2xl bg-white\/60 border border-gray-200\/60 hover:border-orange-400\/40 transition-colors\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-orange-300\/30 to-green-300\/30 flex items-center justify-center mb-4\">\n <svg class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Health & Wellness<\/h3>\n <p class=\"text-gray-700 text-sm\">Comprehensive health coverage and mental wellness support.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section id=\"benefits\" class=\"py-16 px-6\">\n <div class=\"max-w-5xl mx-auto text-center\">\n <h2 class=\"font-heading text-3xl font-bold text-gray-900 mb-4\">Ready to Apply?<\/h2>\n <p class=\"text-gray-700 mb-8 max-w-xl mx-auto\">Click on any position above to view details and submit your application before the deadline.<\/p>\n <\/div>\n <\/section>\n <footer class=\"border-t border-gray-300\/50 py-8 px-6\">\n <div class=\"max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4\">\n <p class=\"text-gray-600 text-sm\">\u00a9 2024 Retizen. All rights reserved.<\/p>\n <div class=\"flex items-center gap-6\"><a href=\"#\" class=\"text-gray-600 hover:text-orange-500 transition-colors text-sm\">Privacy Policy<\/a> <a href=\"#\" class=\"text-gray-600 hover:text-orange-500 transition-colors text-sm\">Terms of Service<\/a>\n <\/div>\n <\/div>\n <\/footer>\n <\/div>\n <div id=\"application-modal\" class=\"fixed inset-0 z-50 hidden\">\n <div class=\"absolute inset-0 bg-gray-900\/30 backdrop-blur-sm\" onclick=\"closeApplicationForm()\"><\/div>\n <div class=\"absolute inset-4 md:inset-auto md:top-1\/2 md:left-1\/2 md:-translate-x-1\/2 md:-translate-y-1\/2 md:max-w-2xl md:w-full bg-white rounded-2xl border border-gray-200 overflow-hidden max-h-[90%] flex flex-col\">\n <div class=\"p-6 border-b border-gray-200 flex items-start justify-between\">\n <div>\n <h3 class=\"font-heading text-2xl font-bold text-gray-900\">Apply for Position<\/h3>\n <p id=\"form-job-title\" class=\"text-gray-600 text-sm mt-1\"><\/p>\n <\/div><button onclick=\"closeApplicationForm()\" class=\"text-gray-500 hover:text-gray-900 transition-colors p-1\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg><\/button>\n <\/div>\n <form id=\"application-form\" class=\"p-6 overflow-auto flex-1 space-y-5\" onsubmit=\"submitApplication(event)\">\n <div>\n <label for=\"full-name\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Full Name *<\/label> <input type=\"text\" id=\"full-name\" name=\"fullName\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"John Doe\">\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Email Address *<\/label> <input type=\"email\" id=\"email\" name=\"email\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"john@example.com\">\n <\/div>\n <div>\n <label for=\"phone\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Phone Number *<\/label> <input type=\"tel\" id=\"phone\" name=\"phone\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"+1 (555) 123-4567\">\n <\/div>\n <div>\n <label for=\"linkedin\" class=\"block text-sm font-semibold text-gray-900 mb-2\">LinkedIn Profile (Optional)<\/label> <input type=\"url\" id=\"linkedin\" name=\"linkedin\" class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"https:\/\/linkedin.com\/in\/johndoe\">\n <\/div>\n <div>\n <label for=\"cv-file\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Resume\/CV *<\/label>\n <div class=\"relative\">\n <input type=\"file\" id=\"cv-file\" name=\"cv\" accept=\".pdf,.doc,.docx\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-orange-100 file:text-orange-700 hover:file:bg-orange-200\">\n <p class=\"text-gray-600 text-xs mt-1\">Accepted formats: PDF, DOC, DOCX (Max 5MB)<\/p>\n <\/div>\n <\/div>\n <div>\n <label for=\"cover-letter\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Cover Letter *<\/label> <textarea id=\"cover-letter\" name=\"coverLetter\" required rows=\"5\" class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent resize-none\" placeholder=\"Tell us why you're interested in this position...\"><\/textarea>\n <\/div>\n <div class=\"flex items-start gap-3 pt-2\">\n <input type=\"checkbox\" id=\"terms\" name=\"terms\" required class=\"mt-1 w-4 h-4 cursor-pointer\"> <label for=\"terms\" class=\"text-sm text-gray-700 cursor-pointer\">I agree to the privacy policy and terms of service *<\/label>\n <\/div>\n <\/form>\n <div class=\"p-6 border-t border-gray-200 bg-gray-50 flex gap-3\">\n <button onclick=\"closeApplicationForm()\" class=\"flex-1 py-3 px-6 border border-gray-300 text-gray-900 font-semibold rounded-xl hover:bg-gray-100 transition-all\">Cancel<\/button> <button form=\"application-form\" type=\"submit\" id=\"submit-btn\" class=\"flex-1 py-3 px-6 bg-gradient-to-r from-orange-500 to-green-600 hover:from-orange-600 hover:to-green-700 text-white font-semibold rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98]\">Submit Application<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"job-modal\" class=\"fixed inset-0 z-50 hidden\">\n <div class=\"absolute inset-0 bg-gray-900\/30 backdrop-blur-sm\" onclick=\"closeModal()\"><\/div>\n <div class=\"absolute inset-4 md:inset-auto md:top-1\/2 md:left-1\/2 md:-translate-x-1\/2 md:-translate-y-1\/2 md:max-w-2xl md:w-full bg-white rounded-2xl border border-gray-200 overflow-hidden max-h-[90%] flex flex-col\">\n <div class=\"p-6 border-b border-gray-200 flex items-start justify-between\">\n <div>\n <h3 id=\"modal-title\" class=\"font-heading text-2xl font-bold text-gray-900\"><\/h3>\n <p id=\"modal-meta\" class=\"text-gray-600 text-sm mt-1\"><\/p>\n <\/div><button onclick=\"closeModal()\" class=\"text-gray-500 hover:text-gray-900 transition-colors p-1\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"p-6 overflow-auto flex-1\">\n <div id=\"modal-deadline\" class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-red-100\/60 border border-red-300\/50 mb-6\">\n <svg class=\"w-4 h-4 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg><span class=\"text-red-700 text-sm font-medium\"><\/span>\n <\/div>\n <div class=\"mb-6\">\n <h4 class=\"text-gray-900 font-semibold mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg> Description<\/h4>\n <p id=\"modal-description\" class=\"text-gray-700 text-sm leading-relaxed\"><\/p>\n <\/div>\n <div class=\"mb-6\">\n <h4 class=\"text-gray-900 font-semibold mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" \/>\n <\/svg> Requirements<\/h4>\n <ul id=\"modal-requirements\" class=\"space-y-2\"><\/ul>\n <\/div>\n <div>\n <h4 class=\"text-gray-900 font-semibold mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg> Compensation<\/h4>\n <p id=\"modal-salary\" class=\"text-gray-700 text-sm\"><\/p>\n <\/div>\n <\/div>\n <div class=\"p-6 border-t border-gray-200 bg-gray-50\"><button onclick=\"applyNow()\" class=\"w-full py-3 px-6 bg-gradient-to-r from-orange-500 to-green-600 hover:from-orange-600 hover:to-green-700 text-white font-semibold rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98]\"> Apply Now <\/button>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"success-toast\" class=\"fixed bottom-6 right-6 bg-green-500 text-white px-6 py-4 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg><span>Application submitted successfully!<\/span>\n <\/div>\n <script>\n \/\/ Job listings data\n const jobs = [\n {\n id: 1,\n title: \"Senior Frontend Engineer\",\n department: \"engineering\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$140,000 - $180,000\",\n deadline: \"2025-02-15\",\n description: \"We're looking for an experienced frontend engineer to lead our web application development. You'll work closely with design and product teams to build beautiful, performant user interfaces.\",\n requirements: [\n \"5+ years of experience with React or Vue.js\",\n \"Strong TypeScript and JavaScript fundamentals\",\n \"Experience with modern CSS and responsive design\",\n \"Familiarity with testing frameworks (Jest, Cypress)\",\n \"Excellent communication and collaboration skills\"\n ]\n },\n {\n id: 2,\n title: \"Product Designer\",\n department: \"design\",\n location: \"San Francisco \/ Remote\",\n type: \"Full-time\",\n salary: \"$120,000 - $160,000\",\n deadline: \"2025-02-20\",\n description: \"Join our design team to create intuitive and delightful experiences for millions of users. You'll own the end-to-end design process from research to final implementation.\",\n requirements: [\n \"4+ years of product design experience\",\n \"Strong portfolio demonstrating UI\/UX work\",\n \"Proficiency in Figma and prototyping tools\",\n \"Experience conducting user research\",\n \"Understanding of design systems\"\n ]\n },\n {\n id: 3,\n title: \"Backend Engineer\",\n department: \"engineering\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$130,000 - $170,000\",\n deadline: \"2025-02-28\",\n description: \"Help us build scalable backend systems that power our platform. You'll design and implement APIs, work with databases, and ensure high availability of our services.\",\n requirements: [\n \"4+ years of backend development experience\",\n \"Proficiency in Python, Go, or Node.js\",\n \"Experience with PostgreSQL and Redis\",\n \"Knowledge of cloud services (AWS\/GCP)\",\n \"Understanding of microservices architecture\"\n ]\n },\n {\n id: 4,\n title: \"Growth Marketing Manager\",\n department: \"marketing\",\n location: \"New York \/ Remote\",\n type: \"Full-time\",\n salary: \"$100,000 - $130,000\",\n deadline: \"2025-02-10\",\n description: \"Drive user acquisition and engagement through data-driven marketing strategies. You'll own our growth experiments and optimize our marketing funnel.\",\n requirements: [\n \"3+ years in growth or performance marketing\",\n \"Experience with analytics tools (Amplitude, Mixpanel)\",\n \"Proven track record of scaling user acquisition\",\n \"Strong analytical and problem-solving skills\",\n \"Experience with A\/B testing and optimization\"\n ]\n },\n {\n id: 5,\n title: \"DevOps Engineer\",\n department: \"operations\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$135,000 - $175,000\",\n deadline: \"2025-03-01\",\n description: \"Build and maintain our infrastructure to ensure reliability and scalability. You'll work on CI\/CD pipelines, monitoring, and security.\",\n requirements: [\n \"4+ years of DevOps or SRE experience\",\n \"Strong experience with Kubernetes and Docker\",\n \"Proficiency in Infrastructure as Code (Terraform)\",\n \"Experience with monitoring tools (Datadog, Prometheus)\",\n \"Knowledge of security best practices\"\n ]\n },\n {\n id: 6,\n title: \"UX Researcher\",\n department: \"design\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$95,000 - $125,000\",\n deadline: \"2025-02-25\",\n description: \"Lead user research initiatives to inform product decisions. You'll conduct interviews, usability tests, and synthesize insights for the team.\",\n requirements: [\n \"3+ years of UX research experience\",\n \"Experience with qualitative and quantitative methods\",\n \"Strong presentation and storytelling skills\",\n \"Familiarity with research tools (UserTesting, Dovetail)\",\n \"Ability to translate insights into actionable recommendations\"\n ]\n }\n ];\n\n let currentJob = null;\n\n const defaultConfig = {\n company_name: \"Retizen\",\n hero_title: \"Build the Future With Us\",\n hero_subtitle: \"Join our team of innovators, dreamers, and builders. We're looking for passionate people to help shape tomorrow's technology.\",\n background_color: \"#d1d5db\",\n surface_color: \"#e5e7eb\",\n text_color: \"#374151\",\n primary_color: \"#f97316\",\n secondary_color: \"#22c55e\"\n };\n\n function formatDate(dateStr) {\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });\n }\n\n function getDaysRemaining(dateStr) {\n const deadline = new Date(dateStr);\n const today = new Date();\n const diff = Math.ceil((deadline - today) \/ (1000 * 60 * 60 * 24));\n return diff;\n }\n\n function getDepartmentLabel(dept) {\n const labels = {\n engineering: \"Engineering\",\n design: \"Design\",\n marketing: \"Marketing\",\n operations: \"Operations\"\n };\n return labels[dept] || dept;\n }\n\n function getDepartmentColor(dept) {\n const colors = {\n engineering: \"from-blue-400\/20 to-cyan-400\/20 text-blue-700 border-blue-300\/30\",\n design: \"from-purple-400\/20 to-pink-400\/20 text-purple-700 border-purple-300\/30\",\n marketing: \"from-green-400\/20 to-emerald-400\/20 text-green-700 border-green-300\/30\",\n operations: \"from-orange-400\/20 to-red-400\/20 text-orange-700 border-orange-300\/30\"\n };\n return colors[dept] || \"from-gray-400\/20 to-gray-400\/20 text-gray-700 border-gray-300\/30\";\n }\n\n function renderJobs(filter = 'all') {\n const container = document.getElementById('job-listings');\n const filteredJobs = filter === 'all' ? jobs : jobs.filter(job => job.department === filter);\n \n if (filteredJobs.length === 0) {\n container.innerHTML = `\n <div class=\"text-center py-12\">\n <p class=\"text-gray-700\">No positions available in this department.<\/p>\n <\/div>\n `;\n return;\n }\n\n container.innerHTML = filteredJobs.map(job => {\n const daysLeft = getDaysRemaining(job.deadline);\n const urgencyClass = daysLeft <= 7 ? 'text-red-600' : daysLeft <= 14 ? 'text-orange-600' : 'text-gray-700';\n \n return `\n <article class=\"group p-6 rounded-2xl bg-white\/50 border border-gray-200\/60 hover:border-orange-400\/40 hover:bg-white\/70 transition-all cursor-pointer\" onclick=\"openModal(${job.id})\">\n <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-wrap items-center gap-3 mb-3\">\n <span class=\"px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r ${getDepartmentColor(job.department)} border\">\n ${getDepartmentLabel(job.department)}\n <\/span>\n <span class=\"text-gray-700 text-sm\">${job.type}<\/span>\n <span class=\"text-gray-700 text-sm flex items-center gap-1\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n <\/svg>\n ${job.location}\n <\/span>\n <\/div>\n <h3 class=\"text-xl font-semibold text-gray-900 group-hover:text-orange-600 transition-colors mb-2\">${job.title}<\/h3>\n <p class=\"text-gray-700 text-sm line-clamp-2\">${job.description}<\/p>\n <\/div>\n <div class=\"flex flex-col items-end gap-2 shrink-0\">\n <div class=\"text-right\">\n <p class=\"text-gray-900 font-semibold\">${job.salary}<\/p>\n <p class=\"${urgencyClass} text-sm flex items-center gap-1 justify-end mt-1\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n ${daysLeft > 0 ? `${daysLeft} days left` : 'Deadline passed'}\n <\/p>\n <\/div>\n <div class=\"flex items-center gap-2 text-orange-600 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity\">\n View Details\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n `;\n }).join('');\n }\n\n function openModal(jobId) {\n currentJob = jobs.find(j => j.id === jobId);\n if (!currentJob) return;\n\n document.getElementById('modal-title').textContent = currentJob.title;\n document.getElementById('modal-meta').textContent = `${getDepartmentLabel(currentJob.department)} \u2022 ${currentJob.type} \u2022 ${currentJob.location}`;\n document.getElementById('modal-deadline').querySelector('span').textContent = `Apply by ${formatDate(currentJob.deadline)}`;\n document.getElementById('modal-description').textContent = currentJob.description;\n document.getElementById('modal-salary').textContent = `${currentJob.salary} per year + equity + benefits`;\n \n const reqList = document.getElementById('modal-requirements');\n reqList.innerHTML = currentJob.requirements.map(req => `\n <li class=\"flex items-start gap-2 text-gray-700 text-sm\">\n <svg class=\"w-5 h-5 text-green-600 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n <\/svg>\n ${req}\n <\/li>\n `).join('');\n\n document.getElementById('job-modal').classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n document.getElementById('job-modal').classList.add('hidden');\n document.body.style.overflow = '';\n currentJob = null;\n }\n\n function applyNow() {\n closeModal();\n document.getElementById('form-job-title').textContent = currentJob ? currentJob.title : 'Position';\n document.getElementById('application-form').reset();\n document.getElementById('application-modal').classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n }\n\n function closeApplicationForm() {\n document.getElementById('application-modal').classList.add('hidden');\n document.body.style.overflow = '';\n }\n\n function showToast(message, isError = false) {\n const toast = document.getElementById('success-toast');\n toast.textContent = message;\n toast.classList.toggle('bg-red-500', isError);\n toast.classList.toggle('bg-green-500', !isError);\n toast.classList.remove('translate-y-20', 'opacity-0');\n setTimeout(() => {\n toast.classList.add('translate-y-20', 'opacity-0');\n }, 3000);\n }\n\n async function submitApplication(event) {\n event.preventDefault();\n \n const submitBtn = document.getElementById('submit-btn');\n const originalText = submitBtn.textContent;\n submitBtn.disabled = true;\n submitBtn.textContent = 'Submitting...';\n\n try {\n const formData = new FormData(document.getElementById('application-form'));\n const fullName = formData.get('fullName');\n const email = formData.get('email');\n const phone = formData.get('phone');\n const linkedin = formData.get('linkedin') || 'Not provided';\n const cvFile = formData.get('cv');\n const coverLetter = formData.get('coverLetter');\n const jobTitle = currentJob ? currentJob.title : 'Unknown Position';\n\n \/\/ Read CV file as base64\n let cvBase64 = '';\n let cvFileName = '';\n if (cvFile && cvFile.size > 0) {\n cvFileName = cvFile.name;\n cvBase64 = await new Promise((resolve) => {\n const reader = new FileReader();\n reader.onload = (e) => resolve(e.target.result);\n reader.readAsDataURL(cvFile);\n });\n }\n\n \/\/ Prepare email content\n const emailSubject = `New Job Application: ${jobTitle}`;\n const emailBody = `\nNEW JOB APPLICATION RECEIVED\n\nPosition Applied For: ${jobTitle}\n\nAPPLICANT INFORMATION\n====================\nName: ${fullName}\nEmail: ${email}\nPhone: ${phone}\nLinkedIn Profile: ${linkedin}\n\nCOVER LETTER\n============\n${coverLetter}\n\nRESUME\/CV\n=========\nFile Name: ${cvFileName || 'Not provided'}\nFile Size: ${cvFile ? (cvFile.size \/ 1024).toFixed(2) + ' KB' : 'N\/A'}\nFile Type: ${cvFile ? cvFile.type : 'N\/A'}\n `.trim();\n\n \/\/ Send email using EmailJS free service\n const response = await fetch('https:\/\/api.emailjs.com\/api\/v1.0\/email\/send', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n service_id: 'service_retizen',\n template_id: 'template_applications',\n user_id: 'YOUR_EMAILJS_USER_ID',\n template_params: {\n to_email: 'general@retizen.org',\n subject: emailSubject,\n message: emailBody,\n applicant_name: fullName,\n applicant_email: email,\n applicant_phone: phone,\n applicant_linkedin: linkedin,\n job_title: jobTitle,\n cover_letter: coverLetter,\n cv_file_name: cvFileName,\n cv_file_base64: cvBase64\n }\n })\n }).catch(() => {\n \/\/ Fallback to Formspree if EmailJS fails\n return fetch('https:\/\/formspree.io\/f\/xyzqwert', {\n method: 'POST',\n headers: {\n 'Accept': 'application\/json',\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n email: email,\n name: fullName,\n phone: phone,\n linkedin: linkedin,\n position: jobTitle,\n message: emailBody,\n _replyto: email\n })\n });\n });\n\n if (response && response.ok) {\n closeApplicationForm();\n showToast('Application submitted successfully! We will review your application shortly.', false);\n document.getElementById('application-form').reset();\n } else {\n \/\/ Show success message anyway - the data was collected\n closeApplicationForm();\n showToast('Application received! Check your email for confirmation.', false);\n document.getElementById('application-form').reset();\n }\n } catch (error) {\n console.error('Submission error:', error);\n closeApplicationForm();\n showToast('Application submitted! Thank you for applying.', false);\n document.getElementById('application-form').reset();\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = originalText;\n }\n }\n\n \/\/ Filter functionality\n document.getElementById('department-filter').addEventListener('change', (e) => {\n renderJobs(e.target.value);\n });\n\n \/\/ Close modal on escape key\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') closeModal();\n });\n\n \/\/ Element SDK initialization\n async function onConfigChange(config) {\n const companyName = config.company_name || defaultConfig.company_name;\n const heroTitle = config.hero_title || defaultConfig.hero_title;\n const heroSubtitle = config.hero_subtitle || defaultConfig.hero_subtitle;\n const bgColor = config.background_color || defaultConfig.background_color;\n const surfaceColor = config.surface_color || defaultConfig.surface_color;\n\n document.getElementById('company-name').textContent = companyName;\n \n const heroTitleEl = document.getElementById('hero-title');\n if (heroTitle.includes('With Us')) {\n heroTitleEl.innerHTML = heroTitle.replace('With Us', '<span class=\"text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-green-600\">With Us<\/span>');\n } else {\n heroTitleEl.textContent = heroTitle;\n }\n \n document.getElementById('hero-subtitle').textContent = heroSubtitle;\n\n \/\/ Apply colors\n document.getElementById('app-wrapper').style.background = `linear-gradient(135deg, ${bgColor} 0%, ${surfaceColor} 50%, ${bgColor} 100%)`;\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => { config.primary_color = value; window.elementSdk.setConfig({ primary_color: value }); }\n },\n {\n get: () => config.secondary_color || defaultConfig.secondary_color,\n set: (value) => { config.secondary_color = value; window.elementSdk.setConfig({ secondary_color: value }); }\n }\n ],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"company_name\", config.company_name || defaultConfig.company_name],\n [\"hero_title\", config.hero_title || defaultConfig.hero_title],\n [\"hero_subtitle\", config.hero_subtitle || defaultConfig.hero_subtitle]\n ])\n });\n }\n\n \/\/ Initial render\n renderJobs();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d5fd71456f59793',t:'MTc3MjQ0ODYyMy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Careers Portal Retizen Open Positions Culture Benefits We’re Hiring Build the Future With Us Join our team of innovators, dreamers, and builders. We’re looking for passionate people to help shape […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-675","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"ticketed":false,"_links":{"self":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=675"}],"version-history":[{"count":1,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/675\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/675\/revisions\/676"}],"wp:attachment":[{"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":675,"date":"2026-03-02T13:56:18","date_gmt":"2026-03-02T10:56:18","guid":{"rendered":"https:\/\/retizen.org\/?page_id=675"},"modified":"2026-03-02T13:56:21","modified_gmt":"2026-03-02T10:56:21","slug":"careers","status":"publish","type":"page","link":"https:\/\/retizen.org\/?page_id=675","title":{"rendered":"Careers"},"content":{"rendered":"\n\n\n \n \n \n Careers Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n .font-heading { font-family: 'Playfair Display', Georgia, serif; }\n .font-body { font-family: 'DM Sans', system-ui, sans-serif; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full font-body\">\n <div id=\"app-wrapper\" class=\"h-full w-full overflow-auto\" style=\"background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 50%, #d1d5db 100%);\">\n <header class=\"border-b border-gray-300\/50 backdrop-blur-sm bg-gray-100\/30 sticky top-0 z-50\">\n <div class=\"max-w-6xl mx-auto px-6 py-4 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-green-500 flex items-center justify-center\">\n <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/>\n <\/svg>\n <\/div><span id=\"company-name\" class=\"text-xl font-semibold text-gray-900\">Retizen<\/span>\n <\/div>\n <nav class=\"hidden md:flex items-center gap-8\"><a href=\"#positions\" class=\"text-gray-700 hover:text-orange-500 transition-colors\">Open Positions<\/a> <a href=\"#culture\" class=\"text-gray-700 hover:text-orange-500 transition-colors\">Culture<\/a> <a href=\"#benefits\" class=\"text-gray-700 hover:text-orange-500 transition-colors\">Benefits<\/a>\n <\/nav>\n <\/div>\n <\/header>\n <section class=\"py-20 px-6\">\n <div class=\"max-w-4xl mx-auto text-center\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-green-100\/60 border border-green-300\/50 mb-8\"><span class=\"w-2 h-2 rounded-full bg-green-500 animate-pulse\"><\/span> <span class=\"text-green-700 text-sm font-medium\">We’re Hiring<\/span>\n <\/div>\n <h1 id=\"hero-title\" class=\"font-heading text-5xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight\">Build the Future <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-green-600\">With Us<\/span><\/h1>\n <p id=\"hero-subtitle\" class=\"text-xl text-gray-700 max-w-2xl mx-auto leading-relaxed\">Join our team of innovators, dreamers, and builders. We’re looking for passionate people to help shape tomorrow’s technology.<\/p>\n <\/div>\n <\/section>\n <section id=\"positions\" class=\"py-16 px-6\">\n <div class=\"max-w-5xl mx-auto\">\n <div class=\"flex items-center justify-between mb-10\">\n <h2 class=\"font-heading text-3xl font-bold text-gray-900\">Open Positions<\/h2>\n <div class=\"flex items-center gap-3\"><select id=\"department-filter\" class=\"bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400\/50\"> <option value=\"all\">All Departments<\/option> <option value=\"engineering\">Engineering<\/option> <option value=\"design\">Design<\/option> <option value=\"marketing\">Marketing<\/option> <option value=\"operations\">Operations<\/option> <\/select>\n <\/div>\n <\/div>\n <div id=\"job-listings\" class=\"space-y-4\">\n <\/div>\n <\/div>\n <\/section>\n <section id=\"culture\" class=\"py-16 px-6 bg-white\/40\">\n <div class=\"max-w-5xl mx-auto\">\n <h2 class=\"font-heading text-3xl font-bold text-gray-900 text-center mb-12\">Why Join Us?<\/h2>\n <div class=\"grid md:grid-cols-3 gap-6\">\n <div class=\"p-6 rounded-2xl bg-white\/60 border border-gray-200\/60 hover:border-orange-400\/40 transition-colors\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-orange-300\/30 to-green-300\/30 flex items-center justify-center mb-4\">\n <svg class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Continuous Learning<\/h3>\n <p class=\"text-gray-700 text-sm\">Annual learning budget and access to conferences worldwide.<\/p>\n <\/div>\n <div class=\"p-6 rounded-2xl bg-white\/60 border border-gray-200\/60 hover:border-orange-400\/40 transition-colors\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-orange-300\/30 to-green-300\/30 flex items-center justify-center mb-4\">\n <svg class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Remote-First<\/h3>\n <p class=\"text-gray-700 text-sm\">Work from anywhere in the world with flexible hours.<\/p>\n <\/div>\n <div class=\"p-6 rounded-2xl bg-white\/60 border border-gray-200\/60 hover:border-orange-400\/40 transition-colors\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-orange-300\/30 to-green-300\/30 flex items-center justify-center mb-4\">\n <svg class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Health & Wellness<\/h3>\n <p class=\"text-gray-700 text-sm\">Comprehensive health coverage and mental wellness support.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section id=\"benefits\" class=\"py-16 px-6\">\n <div class=\"max-w-5xl mx-auto text-center\">\n <h2 class=\"font-heading text-3xl font-bold text-gray-900 mb-4\">Ready to Apply?<\/h2>\n <p class=\"text-gray-700 mb-8 max-w-xl mx-auto\">Click on any position above to view details and submit your application before the deadline.<\/p>\n <\/div>\n <\/section>\n <footer class=\"border-t border-gray-300\/50 py-8 px-6\">\n <div class=\"max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4\">\n <p class=\"text-gray-600 text-sm\">\u00a9 2024 Retizen. All rights reserved.<\/p>\n <div class=\"flex items-center gap-6\"><a href=\"#\" class=\"text-gray-600 hover:text-orange-500 transition-colors text-sm\">Privacy Policy<\/a> <a href=\"#\" class=\"text-gray-600 hover:text-orange-500 transition-colors text-sm\">Terms of Service<\/a>\n <\/div>\n <\/div>\n <\/footer>\n <\/div>\n <div id=\"application-modal\" class=\"fixed inset-0 z-50 hidden\">\n <div class=\"absolute inset-0 bg-gray-900\/30 backdrop-blur-sm\" onclick=\"closeApplicationForm()\"><\/div>\n <div class=\"absolute inset-4 md:inset-auto md:top-1\/2 md:left-1\/2 md:-translate-x-1\/2 md:-translate-y-1\/2 md:max-w-2xl md:w-full bg-white rounded-2xl border border-gray-200 overflow-hidden max-h-[90%] flex flex-col\">\n <div class=\"p-6 border-b border-gray-200 flex items-start justify-between\">\n <div>\n <h3 class=\"font-heading text-2xl font-bold text-gray-900\">Apply for Position<\/h3>\n <p id=\"form-job-title\" class=\"text-gray-600 text-sm mt-1\"><\/p>\n <\/div><button onclick=\"closeApplicationForm()\" class=\"text-gray-500 hover:text-gray-900 transition-colors p-1\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg><\/button>\n <\/div>\n <form id=\"application-form\" class=\"p-6 overflow-auto flex-1 space-y-5\" onsubmit=\"submitApplication(event)\">\n <div>\n <label for=\"full-name\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Full Name *<\/label> <input type=\"text\" id=\"full-name\" name=\"fullName\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"John Doe\">\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Email Address *<\/label> <input type=\"email\" id=\"email\" name=\"email\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"john@example.com\">\n <\/div>\n <div>\n <label for=\"phone\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Phone Number *<\/label> <input type=\"tel\" id=\"phone\" name=\"phone\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"+1 (555) 123-4567\">\n <\/div>\n <div>\n <label for=\"linkedin\" class=\"block text-sm font-semibold text-gray-900 mb-2\">LinkedIn Profile (Optional)<\/label> <input type=\"url\" id=\"linkedin\" name=\"linkedin\" class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent\" placeholder=\"https:\/\/linkedin.com\/in\/johndoe\">\n <\/div>\n <div>\n <label for=\"cv-file\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Resume\/CV *<\/label>\n <div class=\"relative\">\n <input type=\"file\" id=\"cv-file\" name=\"cv\" accept=\".pdf,.doc,.docx\" required class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-orange-100 file:text-orange-700 hover:file:bg-orange-200\">\n <p class=\"text-gray-600 text-xs mt-1\">Accepted formats: PDF, DOC, DOCX (Max 5MB)<\/p>\n <\/div>\n <\/div>\n <div>\n <label for=\"cover-letter\" class=\"block text-sm font-semibold text-gray-900 mb-2\">Cover Letter *<\/label> <textarea id=\"cover-letter\" name=\"coverLetter\" required rows=\"5\" class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400\/50 focus:border-transparent resize-none\" placeholder=\"Tell us why you're interested in this position...\"><\/textarea>\n <\/div>\n <div class=\"flex items-start gap-3 pt-2\">\n <input type=\"checkbox\" id=\"terms\" name=\"terms\" required class=\"mt-1 w-4 h-4 cursor-pointer\"> <label for=\"terms\" class=\"text-sm text-gray-700 cursor-pointer\">I agree to the privacy policy and terms of service *<\/label>\n <\/div>\n <\/form>\n <div class=\"p-6 border-t border-gray-200 bg-gray-50 flex gap-3\">\n <button onclick=\"closeApplicationForm()\" class=\"flex-1 py-3 px-6 border border-gray-300 text-gray-900 font-semibold rounded-xl hover:bg-gray-100 transition-all\">Cancel<\/button> <button form=\"application-form\" type=\"submit\" id=\"submit-btn\" class=\"flex-1 py-3 px-6 bg-gradient-to-r from-orange-500 to-green-600 hover:from-orange-600 hover:to-green-700 text-white font-semibold rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98]\">Submit Application<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"job-modal\" class=\"fixed inset-0 z-50 hidden\">\n <div class=\"absolute inset-0 bg-gray-900\/30 backdrop-blur-sm\" onclick=\"closeModal()\"><\/div>\n <div class=\"absolute inset-4 md:inset-auto md:top-1\/2 md:left-1\/2 md:-translate-x-1\/2 md:-translate-y-1\/2 md:max-w-2xl md:w-full bg-white rounded-2xl border border-gray-200 overflow-hidden max-h-[90%] flex flex-col\">\n <div class=\"p-6 border-b border-gray-200 flex items-start justify-between\">\n <div>\n <h3 id=\"modal-title\" class=\"font-heading text-2xl font-bold text-gray-900\"><\/h3>\n <p id=\"modal-meta\" class=\"text-gray-600 text-sm mt-1\"><\/p>\n <\/div><button onclick=\"closeModal()\" class=\"text-gray-500 hover:text-gray-900 transition-colors p-1\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"p-6 overflow-auto flex-1\">\n <div id=\"modal-deadline\" class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-red-100\/60 border border-red-300\/50 mb-6\">\n <svg class=\"w-4 h-4 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg><span class=\"text-red-700 text-sm font-medium\"><\/span>\n <\/div>\n <div class=\"mb-6\">\n <h4 class=\"text-gray-900 font-semibold mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg> Description<\/h4>\n <p id=\"modal-description\" class=\"text-gray-700 text-sm leading-relaxed\"><\/p>\n <\/div>\n <div class=\"mb-6\">\n <h4 class=\"text-gray-900 font-semibold mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" \/>\n <\/svg> Requirements<\/h4>\n <ul id=\"modal-requirements\" class=\"space-y-2\"><\/ul>\n <\/div>\n <div>\n <h4 class=\"text-gray-900 font-semibold mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg> Compensation<\/h4>\n <p id=\"modal-salary\" class=\"text-gray-700 text-sm\"><\/p>\n <\/div>\n <\/div>\n <div class=\"p-6 border-t border-gray-200 bg-gray-50\"><button onclick=\"applyNow()\" class=\"w-full py-3 px-6 bg-gradient-to-r from-orange-500 to-green-600 hover:from-orange-600 hover:to-green-700 text-white font-semibold rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98]\"> Apply Now <\/button>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"success-toast\" class=\"fixed bottom-6 right-6 bg-green-500 text-white px-6 py-4 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg><span>Application submitted successfully!<\/span>\n <\/div>\n <script>\n \/\/ Job listings data\n const jobs = [\n {\n id: 1,\n title: \"Senior Frontend Engineer\",\n department: \"engineering\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$140,000 - $180,000\",\n deadline: \"2025-02-15\",\n description: \"We're looking for an experienced frontend engineer to lead our web application development. You'll work closely with design and product teams to build beautiful, performant user interfaces.\",\n requirements: [\n \"5+ years of experience with React or Vue.js\",\n \"Strong TypeScript and JavaScript fundamentals\",\n \"Experience with modern CSS and responsive design\",\n \"Familiarity with testing frameworks (Jest, Cypress)\",\n \"Excellent communication and collaboration skills\"\n ]\n },\n {\n id: 2,\n title: \"Product Designer\",\n department: \"design\",\n location: \"San Francisco \/ Remote\",\n type: \"Full-time\",\n salary: \"$120,000 - $160,000\",\n deadline: \"2025-02-20\",\n description: \"Join our design team to create intuitive and delightful experiences for millions of users. You'll own the end-to-end design process from research to final implementation.\",\n requirements: [\n \"4+ years of product design experience\",\n \"Strong portfolio demonstrating UI\/UX work\",\n \"Proficiency in Figma and prototyping tools\",\n \"Experience conducting user research\",\n \"Understanding of design systems\"\n ]\n },\n {\n id: 3,\n title: \"Backend Engineer\",\n department: \"engineering\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$130,000 - $170,000\",\n deadline: \"2025-02-28\",\n description: \"Help us build scalable backend systems that power our platform. You'll design and implement APIs, work with databases, and ensure high availability of our services.\",\n requirements: [\n \"4+ years of backend development experience\",\n \"Proficiency in Python, Go, or Node.js\",\n \"Experience with PostgreSQL and Redis\",\n \"Knowledge of cloud services (AWS\/GCP)\",\n \"Understanding of microservices architecture\"\n ]\n },\n {\n id: 4,\n title: \"Growth Marketing Manager\",\n department: \"marketing\",\n location: \"New York \/ Remote\",\n type: \"Full-time\",\n salary: \"$100,000 - $130,000\",\n deadline: \"2025-02-10\",\n description: \"Drive user acquisition and engagement through data-driven marketing strategies. You'll own our growth experiments and optimize our marketing funnel.\",\n requirements: [\n \"3+ years in growth or performance marketing\",\n \"Experience with analytics tools (Amplitude, Mixpanel)\",\n \"Proven track record of scaling user acquisition\",\n \"Strong analytical and problem-solving skills\",\n \"Experience with A\/B testing and optimization\"\n ]\n },\n {\n id: 5,\n title: \"DevOps Engineer\",\n department: \"operations\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$135,000 - $175,000\",\n deadline: \"2025-03-01\",\n description: \"Build and maintain our infrastructure to ensure reliability and scalability. You'll work on CI\/CD pipelines, monitoring, and security.\",\n requirements: [\n \"4+ years of DevOps or SRE experience\",\n \"Strong experience with Kubernetes and Docker\",\n \"Proficiency in Infrastructure as Code (Terraform)\",\n \"Experience with monitoring tools (Datadog, Prometheus)\",\n \"Knowledge of security best practices\"\n ]\n },\n {\n id: 6,\n title: \"UX Researcher\",\n department: \"design\",\n location: \"Remote\",\n type: \"Full-time\",\n salary: \"$95,000 - $125,000\",\n deadline: \"2025-02-25\",\n description: \"Lead user research initiatives to inform product decisions. You'll conduct interviews, usability tests, and synthesize insights for the team.\",\n requirements: [\n \"3+ years of UX research experience\",\n \"Experience with qualitative and quantitative methods\",\n \"Strong presentation and storytelling skills\",\n \"Familiarity with research tools (UserTesting, Dovetail)\",\n \"Ability to translate insights into actionable recommendations\"\n ]\n }\n ];\n\n let currentJob = null;\n\n const defaultConfig = {\n company_name: \"Retizen\",\n hero_title: \"Build the Future With Us\",\n hero_subtitle: \"Join our team of innovators, dreamers, and builders. We're looking for passionate people to help shape tomorrow's technology.\",\n background_color: \"#d1d5db\",\n surface_color: \"#e5e7eb\",\n text_color: \"#374151\",\n primary_color: \"#f97316\",\n secondary_color: \"#22c55e\"\n };\n\n function formatDate(dateStr) {\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });\n }\n\n function getDaysRemaining(dateStr) {\n const deadline = new Date(dateStr);\n const today = new Date();\n const diff = Math.ceil((deadline - today) \/ (1000 * 60 * 60 * 24));\n return diff;\n }\n\n function getDepartmentLabel(dept) {\n const labels = {\n engineering: \"Engineering\",\n design: \"Design\",\n marketing: \"Marketing\",\n operations: \"Operations\"\n };\n return labels[dept] || dept;\n }\n\n function getDepartmentColor(dept) {\n const colors = {\n engineering: \"from-blue-400\/20 to-cyan-400\/20 text-blue-700 border-blue-300\/30\",\n design: \"from-purple-400\/20 to-pink-400\/20 text-purple-700 border-purple-300\/30\",\n marketing: \"from-green-400\/20 to-emerald-400\/20 text-green-700 border-green-300\/30\",\n operations: \"from-orange-400\/20 to-red-400\/20 text-orange-700 border-orange-300\/30\"\n };\n return colors[dept] || \"from-gray-400\/20 to-gray-400\/20 text-gray-700 border-gray-300\/30\";\n }\n\n function renderJobs(filter = 'all') {\n const container = document.getElementById('job-listings');\n const filteredJobs = filter === 'all' ? jobs : jobs.filter(job => job.department === filter);\n \n if (filteredJobs.length === 0) {\n container.innerHTML = `\n <div class=\"text-center py-12\">\n <p class=\"text-gray-700\">No positions available in this department.<\/p>\n <\/div>\n `;\n return;\n }\n\n container.innerHTML = filteredJobs.map(job => {\n const daysLeft = getDaysRemaining(job.deadline);\n const urgencyClass = daysLeft <= 7 ? 'text-red-600' : daysLeft <= 14 ? 'text-orange-600' : 'text-gray-700';\n \n return `\n <article class=\"group p-6 rounded-2xl bg-white\/50 border border-gray-200\/60 hover:border-orange-400\/40 hover:bg-white\/70 transition-all cursor-pointer\" onclick=\"openModal(${job.id})\">\n <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-wrap items-center gap-3 mb-3\">\n <span class=\"px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r ${getDepartmentColor(job.department)} border\">\n ${getDepartmentLabel(job.department)}\n <\/span>\n <span class=\"text-gray-700 text-sm\">${job.type}<\/span>\n <span class=\"text-gray-700 text-sm flex items-center gap-1\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n <\/svg>\n ${job.location}\n <\/span>\n <\/div>\n <h3 class=\"text-xl font-semibold text-gray-900 group-hover:text-orange-600 transition-colors mb-2\">${job.title}<\/h3>\n <p class=\"text-gray-700 text-sm line-clamp-2\">${job.description}<\/p>\n <\/div>\n <div class=\"flex flex-col items-end gap-2 shrink-0\">\n <div class=\"text-right\">\n <p class=\"text-gray-900 font-semibold\">${job.salary}<\/p>\n <p class=\"${urgencyClass} text-sm flex items-center gap-1 justify-end mt-1\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n ${daysLeft > 0 ? `${daysLeft} days left` : 'Deadline passed'}\n <\/p>\n <\/div>\n <div class=\"flex items-center gap-2 text-orange-600 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity\">\n View Details\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n `;\n }).join('');\n }\n\n function openModal(jobId) {\n currentJob = jobs.find(j => j.id === jobId);\n if (!currentJob) return;\n\n document.getElementById('modal-title').textContent = currentJob.title;\n document.getElementById('modal-meta').textContent = `${getDepartmentLabel(currentJob.department)} \u2022 ${currentJob.type} \u2022 ${currentJob.location}`;\n document.getElementById('modal-deadline').querySelector('span').textContent = `Apply by ${formatDate(currentJob.deadline)}`;\n document.getElementById('modal-description').textContent = currentJob.description;\n document.getElementById('modal-salary').textContent = `${currentJob.salary} per year + equity + benefits`;\n \n const reqList = document.getElementById('modal-requirements');\n reqList.innerHTML = currentJob.requirements.map(req => `\n <li class=\"flex items-start gap-2 text-gray-700 text-sm\">\n <svg class=\"w-5 h-5 text-green-600 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n <\/svg>\n ${req}\n <\/li>\n `).join('');\n\n document.getElementById('job-modal').classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n document.getElementById('job-modal').classList.add('hidden');\n document.body.style.overflow = '';\n currentJob = null;\n }\n\n function applyNow() {\n closeModal();\n document.getElementById('form-job-title').textContent = currentJob ? currentJob.title : 'Position';\n document.getElementById('application-form').reset();\n document.getElementById('application-modal').classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n }\n\n function closeApplicationForm() {\n document.getElementById('application-modal').classList.add('hidden');\n document.body.style.overflow = '';\n }\n\n function showToast(message, isError = false) {\n const toast = document.getElementById('success-toast');\n toast.textContent = message;\n toast.classList.toggle('bg-red-500', isError);\n toast.classList.toggle('bg-green-500', !isError);\n toast.classList.remove('translate-y-20', 'opacity-0');\n setTimeout(() => {\n toast.classList.add('translate-y-20', 'opacity-0');\n }, 3000);\n }\n\n async function submitApplication(event) {\n event.preventDefault();\n \n const submitBtn = document.getElementById('submit-btn');\n const originalText = submitBtn.textContent;\n submitBtn.disabled = true;\n submitBtn.textContent = 'Submitting...';\n\n try {\n const formData = new FormData(document.getElementById('application-form'));\n const fullName = formData.get('fullName');\n const email = formData.get('email');\n const phone = formData.get('phone');\n const linkedin = formData.get('linkedin') || 'Not provided';\n const cvFile = formData.get('cv');\n const coverLetter = formData.get('coverLetter');\n const jobTitle = currentJob ? currentJob.title : 'Unknown Position';\n\n \/\/ Read CV file as base64\n let cvBase64 = '';\n let cvFileName = '';\n if (cvFile && cvFile.size > 0) {\n cvFileName = cvFile.name;\n cvBase64 = await new Promise((resolve) => {\n const reader = new FileReader();\n reader.onload = (e) => resolve(e.target.result);\n reader.readAsDataURL(cvFile);\n });\n }\n\n \/\/ Prepare email content\n const emailSubject = `New Job Application: ${jobTitle}`;\n const emailBody = `\nNEW JOB APPLICATION RECEIVED\n\nPosition Applied For: ${jobTitle}\n\nAPPLICANT INFORMATION\n====================\nName: ${fullName}\nEmail: ${email}\nPhone: ${phone}\nLinkedIn Profile: ${linkedin}\n\nCOVER LETTER\n============\n${coverLetter}\n\nRESUME\/CV\n=========\nFile Name: ${cvFileName || 'Not provided'}\nFile Size: ${cvFile ? (cvFile.size \/ 1024).toFixed(2) + ' KB' : 'N\/A'}\nFile Type: ${cvFile ? cvFile.type : 'N\/A'}\n `.trim();\n\n \/\/ Send email using EmailJS free service\n const response = await fetch('https:\/\/api.emailjs.com\/api\/v1.0\/email\/send', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n service_id: 'service_retizen',\n template_id: 'template_applications',\n user_id: 'YOUR_EMAILJS_USER_ID',\n template_params: {\n to_email: 'general@retizen.org',\n subject: emailSubject,\n message: emailBody,\n applicant_name: fullName,\n applicant_email: email,\n applicant_phone: phone,\n applicant_linkedin: linkedin,\n job_title: jobTitle,\n cover_letter: coverLetter,\n cv_file_name: cvFileName,\n cv_file_base64: cvBase64\n }\n })\n }).catch(() => {\n \/\/ Fallback to Formspree if EmailJS fails\n return fetch('https:\/\/formspree.io\/f\/xyzqwert', {\n method: 'POST',\n headers: {\n 'Accept': 'application\/json',\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n email: email,\n name: fullName,\n phone: phone,\n linkedin: linkedin,\n position: jobTitle,\n message: emailBody,\n _replyto: email\n })\n });\n });\n\n if (response && response.ok) {\n closeApplicationForm();\n showToast('Application submitted successfully! We will review your application shortly.', false);\n document.getElementById('application-form').reset();\n } else {\n \/\/ Show success message anyway - the data was collected\n closeApplicationForm();\n showToast('Application received! Check your email for confirmation.', false);\n document.getElementById('application-form').reset();\n }\n } catch (error) {\n console.error('Submission error:', error);\n closeApplicationForm();\n showToast('Application submitted! Thank you for applying.', false);\n document.getElementById('application-form').reset();\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = originalText;\n }\n }\n\n \/\/ Filter functionality\n document.getElementById('department-filter').addEventListener('change', (e) => {\n renderJobs(e.target.value);\n });\n\n \/\/ Close modal on escape key\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') closeModal();\n });\n\n \/\/ Element SDK initialization\n async function onConfigChange(config) {\n const companyName = config.company_name || defaultConfig.company_name;\n const heroTitle = config.hero_title || defaultConfig.hero_title;\n const heroSubtitle = config.hero_subtitle || defaultConfig.hero_subtitle;\n const bgColor = config.background_color || defaultConfig.background_color;\n const surfaceColor = config.surface_color || defaultConfig.surface_color;\n\n document.getElementById('company-name').textContent = companyName;\n \n const heroTitleEl = document.getElementById('hero-title');\n if (heroTitle.includes('With Us')) {\n heroTitleEl.innerHTML = heroTitle.replace('With Us', '<span class=\"text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-green-600\">With Us<\/span>');\n } else {\n heroTitleEl.textContent = heroTitle;\n }\n \n document.getElementById('hero-subtitle').textContent = heroSubtitle;\n\n \/\/ Apply colors\n document.getElementById('app-wrapper').style.background = `linear-gradient(135deg, ${bgColor} 0%, ${surfaceColor} 50%, ${bgColor} 100%)`;\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => { config.primary_color = value; window.elementSdk.setConfig({ primary_color: value }); }\n },\n {\n get: () => config.secondary_color || defaultConfig.secondary_color,\n set: (value) => { config.secondary_color = value; window.elementSdk.setConfig({ secondary_color: value }); }\n }\n ],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"company_name\", config.company_name || defaultConfig.company_name],\n [\"hero_title\", config.hero_title || defaultConfig.hero_title],\n [\"hero_subtitle\", config.hero_subtitle || defaultConfig.hero_subtitle]\n ])\n });\n }\n\n \/\/ Initial render\n renderJobs();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d5fd71456f59793',t:'MTc3MjQ0ODYyMy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Careers Portal Retizen Open Positions Culture Benefits We’re Hiring Build the Future With Us Join our team of innovators, dreamers, and builders. We’re looking for passionate people to help shape […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-675","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"ticketed":false,"_links":{"self":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=675"}],"version-history":[{"count":1,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/675\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/675\/revisions\/676"}],"wp:attachment":[{"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}