{"id":5585,"date":"2026-05-24T12:38:52","date_gmt":"2026-05-24T10:38:52","guid":{"rendered":"https:\/\/thelightinglab.es\/ai-powered-feedback-tool\/"},"modified":"2026-05-27T23:46:54","modified_gmt":"2026-05-27T21:46:54","slug":"ai-powered-feedback-tool","status":"publish","type":"page","link":"https:\/\/thelightinglab.es\/en\/ai-powered-feedback-tool\/","title":{"rendered":"AI Powered Feedback Tool"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nAcceso Feedback Tool - The Lighting Lab<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --black: #0a0a0a;\r\n --card-bg: #141414;\r\n --border: rgba(255,255,255,0.08);\r\n --white: #ffffff;\r\n --orange: #f18410;\r\n --yellow: #f2b137;\r\n --radius: 20px;\r\n --radius-sm: 12px;\r\n --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n min-height: 100vh;\r\n background: var(--black);\r\n color: var(--white);\r\n font-family: 'DM Sans', sans-serif;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'\/%3E%3C\/svg%3E\");\r\n opacity: 0.025;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .tll-access-page {\r\n position: relative;\r\n z-index: 1;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 56px 24px;\r\n background:\r\n radial-gradient(ellipse at 50% 18%, rgba(241,132,16,0.12), transparent 46%),\r\n radial-gradient(ellipse at 50% 88%, rgba(255,255,255,0.04), transparent 54%);\r\n }\r\n\r\n .tll-access-card {\r\n width: min(100%, 720px);\r\n background: linear-gradient(135deg, rgba(20,20,20,0.96), rgba(10,10,10,0.98));\r\n border: 1px solid rgba(241,132,16,0.18);\r\n border-radius: var(--radius);\r\n padding: 46px;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 28px 90px rgba(0,0,0,0.65), 0 0 70px rgba(241,132,16,0.08);\r\n }\r\n\r\n .tll-access-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(241,132,16,0.5), var(--yellow), transparent);\r\n }\r\n\r\n .tll-access-topline {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 18px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .tll-access-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 7px;\r\n color: var(--yellow);\r\n background: rgba(242,177,55,0.1);\r\n border: 1px solid rgba(242,177,55,0.28);\r\n border-radius: 100px;\r\n padding: 7px 16px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .tll-access-kicker::before {\r\n content: '';\r\n width: 6px; height: 6px;\r\n border-radius: 50%;\r\n background: var(--yellow);\r\n box-shadow: 0 0 8px var(--yellow);\r\n }\r\n\r\n .tll-language-switch-wrap {\r\n display: inline-flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 5px;\r\n text-decoration: none;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .tll-language-switch-label {\r\n color: rgba(255,255,255,0.42);\r\n font-size: 10px;\r\n font-weight: 700;\r\n line-height: 1;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n transition: color var(--transition);\r\n }\r\n\r\n .tll-language-switch {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 999px;\r\n border: 1px solid rgba(255,255,255,0.12);\r\n background: rgba(255,255,255,0.04);\r\n transition: all var(--transition);\r\n box-shadow: 0 8px 24px rgba(0,0,0,0.25);\r\n }\r\n\r\n .tll-language-switch-wrap:hover .tll-language-switch-label {\r\n color: var(--yellow);\r\n }\r\n\r\n .tll-language-switch-wrap:hover .tll-language-switch {\r\n transform: translateY(-2px);\r\n border-color: rgba(242,177,55,0.38);\r\n background: rgba(242,177,55,0.08);\r\n box-shadow: 0 12px 34px rgba(241,132,16,0.22);\r\n }\r\n\r\n .tll-language-switch img {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n .tll-access-title {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(42px, 5vw, 58px);\r\n line-height: 0.95;\r\n letter-spacing: 0.01em;\r\n color: var(--white);\r\n margin-bottom: 18px;\r\n }\r\n\r\n .tll-access-title span {\r\n background: linear-gradient(135deg, var(--orange), var(--yellow));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .tll-access-copy {\r\n max-width: 560px;\r\n font-size: 17px;\r\n line-height: 1.75;\r\n color: rgba(255,255,255,0.52);\r\n margin-bottom: 30px;\r\n }\r\n\r\n \/*\r\n ELEMENTOR:\r\n 1. Al contenedor que incluye este HTML + el Form Widget, dale la clase: tll-access-shell\r\n 2. En el widget Form > Avanzado > Clases CSS, pon: tll-access-form-real\r\n 3. Estos estilos hacen que el formulario real fluya dentro del mismo recuadro, sin m\u00e1rgenes negativos.\r\n *\/\r\n .tll-access-shell {\r\n width: min(100%, 720px) !important;\r\n margin: 0 auto !important;\r\n padding: 46px !important;\r\n background: linear-gradient(135deg, rgba(20,20,20,0.96), rgba(10,10,10,0.98)) !important;\r\n border: 1px solid rgba(241,132,16,0.18) !important;\r\n border-radius: var(--radius) !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n box-shadow: 0 28px 90px rgba(0,0,0,0.65), 0 0 70px rgba(241,132,16,0.08) !important;\r\n }\r\n\r\n .tll-access-shell::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(241,132,16,0.5), var(--yellow), transparent);\r\n pointer-events: none;\r\n }\r\n\r\n .tll-access-shell .tll-access-page {\r\n min-height: 0;\r\n display: block;\r\n padding: 0;\r\n background: none;\r\n }\r\n\r\n .tll-access-shell .tll-access-card {\r\n width: 100%;\r\n background: transparent;\r\n border: 0;\r\n border-radius: 0;\r\n padding: 0;\r\n overflow: visible;\r\n box-shadow: none;\r\n }\r\n\r\n .tll-access-shell .tll-access-card::before {\r\n display: none;\r\n }\r\n\r\n .tll-access-shell .tll-access-copy {\r\n margin-bottom: 0;\r\n }\r\n\r\n .tll-access-form-real {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 30px 0 0 !important;\r\n padding: 0 !important;\r\n position: relative !important;\r\n z-index: 5 !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-widget-container,\r\n .tll-access-form-real form {\r\n width: 100%;\r\n }\r\n\r\n .tll-access-form-real .elementor-form-fields-wrapper {\r\n display: grid !important;\r\n grid-template-columns: minmax(0, 1fr) auto !important;\r\n gap: 12px !important;\r\n align-items: start !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-field-type-email {\r\n grid-column: 1 !important;\r\n }\r\n\r\n .tll-access-form-real .e-form__buttons {\r\n grid-column: 2 !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-field-type-acceptance {\r\n grid-column: 1 \/ -1 !important;\r\n order: 3 !important;\r\n margin-top: 2px !important;\r\n }\r\n\r\n .tll-access-form-real input[type=\"email\"] {\r\n width: 100% !important;\r\n min-height: 58px !important;\r\n border-radius: var(--radius-sm) !important;\r\n border: 1px solid rgba(255,255,255,0.1) !important;\r\n background: rgba(255,255,255,0.04) !important;\r\n color: var(--white) !important;\r\n font-family: 'DM Sans', sans-serif !important;\r\n font-size: 16px !important;\r\n padding: 0 18px !important;\r\n outline: none !important;\r\n transition: all var(--transition) !important;\r\n }\r\n\r\n .tll-access-form-real input[type=\"email\"]::placeholder {\r\n color: rgba(255,255,255,0.28) !important;\r\n }\r\n\r\n .tll-access-form-real input[type=\"email\"]:focus {\r\n border-color: rgba(241,132,16,0.45) !important;\r\n background: rgba(241,132,16,0.035) !important;\r\n box-shadow: 0 0 0 3px rgba(241,132,16,0.08) !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-button {\r\n min-height: 58px !important;\r\n border: none !important;\r\n border-radius: var(--radius-sm) !important;\r\n padding: 0 26px !important;\r\n cursor: pointer !important;\r\n background: linear-gradient(135deg, var(--orange), var(--yellow)) !important;\r\n color: var(--black) !important;\r\n font-family: 'DM Sans', sans-serif !important;\r\n font-size: 14px !important;\r\n font-weight: 800 !important;\r\n letter-spacing: 0.06em !important;\r\n text-transform: uppercase !important;\r\n box-shadow: 0 8px 28px rgba(241,132,16,0.3) !important;\r\n transition: all var(--transition) !important;\r\n white-space: nowrap !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 36px rgba(241,132,16,0.45) !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-field-option {\r\n display: flex !important;\r\n align-items: flex-start !important;\r\n gap: 10px !important;\r\n color: rgba(255,255,255,0.48) !important;\r\n font-size: 13px !important;\r\n line-height: 1.5 !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-field-option input[type=\"checkbox\"] {\r\n width: 16px !important;\r\n height: 16px !important;\r\n margin-top: 3px !important;\r\n border-radius: 4px !important;\r\n appearance: none !important;\r\n -webkit-appearance: none !important;\r\n background: rgba(255,255,255,0.08) !important;\r\n border: 1px solid rgba(255,255,255,0.22) !important;\r\n cursor: pointer !important;\r\n flex-shrink: 0 !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-field-option input[type=\"checkbox\"]:checked {\r\n background: linear-gradient(135deg, var(--orange), var(--yellow)) !important;\r\n border-color: rgba(242,177,55,0.7) !important;\r\n }\r\n\r\n .tll-access-form-real a {\r\n color: var(--yellow) !important;\r\n text-decoration-color: rgba(242,177,55,0.5) !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-message {\r\n color: var(--yellow) !important;\r\n font-family: 'DM Sans', sans-serif !important;\r\n font-size: 13px !important;\r\n margin-top: 12px !important;\r\n }\r\n\r\n \/*\r\n ELEMENTOR:\r\n Pon esta clase en el contenedor que tiene la tool completa:\r\n tll-feedback-tool-section\r\n\r\n La tool estar\u00e1 oculta hasta que el Form Widget real de Elementor\r\n confirme el env\u00edo con submit_success.\r\n *\/\r\n body:not(.tll-tool-unlocked) .tll-feedback-tool-section {\r\n display: none !important;\r\n visibility: hidden !important;\r\n height: 0 !important;\r\n min-height: 0 !important;\r\n overflow: hidden !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n body.tll-tool-unlocked .tll-feedback-tool-section {\r\n display: block !important;\r\n visibility: visible !important;\r\n height: auto !important;\r\n overflow: visible !important;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .tll-access-page {\r\n padding: 32px 14px;\r\n align-items: flex-start;\r\n }\r\n\r\n .tll-access-shell {\r\n width: calc(100% - 28px) !important;\r\n padding: 32px 22px !important;\r\n }\r\n\r\n .tll-access-card {\r\n padding: 32px 22px;\r\n }\r\n\r\n .tll-access-shell .tll-access-card {\r\n padding: 0;\r\n }\r\n\r\n .tll-access-topline {\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .tll-language-switch-wrap {\r\n transform: none;\r\n }\r\n\r\n .tll-language-switch {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n\r\n .tll-language-switch img {\r\n width: 23px;\r\n height: 23px;\r\n }\r\n\r\n .tll-language-switch-label {\r\n font-size: 9px;\r\n }\r\n\r\n .tll-access-title {\r\n font-size: clamp(38px, 12vw, 52px);\r\n }\r\n\r\n .tll-access-copy {\r\n font-size: 15px;\r\n }\r\n\r\n .tll-access-form-real {\r\n width: 100% !important;\r\n margin: 28px 0 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-form-fields-wrapper {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-field-type-email,\r\n .tll-access-form-real .e-form__buttons,\r\n .tll-access-form-real .elementor-field-type-acceptance {\r\n grid-column: 1 !important;\r\n }\r\n\r\n .tll-access-form-real .elementor-button {\r\n width: 100% !important;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"tll-access-page\">\r\n <section class=\"tll-access-card\">\r\n <div class=\"tll-access-topline\">\r\n <div class=\"tll-access-kicker\">Free access<\/div>\r\n\r\n <a\r\n class=\"tll-language-switch-wrap\"\r\n href=\"https:\/\/thelightinglab.es\/ai-powered-feedback-tool\/\"\r\n aria-label=\"Traducir a espa\u00f1ol\"\r\n title=\"Traducir a espa\u00f1ol\"\r\n >\r\n <span class=\"tll-language-switch-label\">Traducir a espa\u00f1ol<\/span>\r\n <span class=\"tll-language-switch\" aria-hidden=\"true\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/flagcdn.com\/w80\/es.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n \/>\r\n <\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <h1 class=\"tll-access-title\">AI-POWERED <span>FEEDBACK TOOL<\/span><\/h1>\r\n <p class=\"tll-access-copy\">\r\n To access the tool, please leave us your email.\r\n You will receive immediate access and you will be able to upload your image to receive the analysis. Remember this feedback DO NOT replace human feedback from a senior artist.\r\n <\/p>\r\n <\/section>\r\n <\/main>\r\n\r\n <!--\r\n En Elementor:\r\n - Dale al contenedor que envuelve este HTML + el Form Widget la clase CSS: tll-access-shell\r\n - Coloca el Form Widget real justo debajo de este HTML, dentro de ese mismo contenedor.\r\n - Dale al Form Widget la clase CSS: tll-access-form-real\r\n - Configura MailerLite desde el widget real de Elementor.\r\n - Dale al contenedor de la tool completa la clase CSS: tll-feedback-tool-section\r\n -->\r\n <script>\r\n (function() {\r\n function unlockFeedbackTool() {\r\n document.body.classList.add('tll-tool-unlocked');\r\n\r\n const tool = document.querySelector('.tll-feedback-tool-section');\r\n if (tool) {\r\n setTimeout(() => tool.scrollIntoView({ behavior: 'smooth', block: 'start' }), 250);\r\n }\r\n }\r\n\r\n if (window.jQuery) {\r\n window.jQuery(document).on('submit_success', function(event) {\r\n const submittedForm = event.target;\r\n if (submittedForm && submittedForm.closest('.tll-access-form-real')) {\r\n unlockFeedbackTool();\r\n }\r\n });\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e38a36 elementor-widget__width-initial elementor-widget-tablet__width-inherit tll-access-form-real elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"7e38a36\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"button_width":"33","step_next_label":"Next","step_previous_label":"Previous","step_type":"number_text","step_icon_shape":"circle"}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" id=\"ai_feedback_tool_en\" name=\"Newsletter\" aria-label=\"Newsletter\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"5585\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"7e38a36\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"AI Powered Feedback Tool - The Lighting Lab\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"5585\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-name elementor-col-66\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tEmail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-sm elementor-field-textual\" placeholder=\"Email\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-acceptance elementor-field-group elementor-column elementor-field-group-field_806a138 elementor-col-66\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_806a138\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tPrivacy\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-subgroup\">\n\t\t\t<span class=\"elementor-field-option\">\n\t\t\t\t<input type=\"checkbox\" name=\"form_fields[field_806a138]\" id=\"form-field-field_806a138\" class=\"elementor-field elementor-size-sm elementor-acceptance-field\">\n\t\t\t\t<label for=\"form-field-field_806a138\"><span style=\"font-size:0.8rem\">I have read and accept the <a href=\"https:\/\/thelightinglab.es\/en\/privacy-policy\/\" target=\"_blank\" style=\"color:var(--e-global-color-primary)\" ><u>privacy policy<\/u><\/a>. *<\/span><\/label>\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-33 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Subscribe<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9854dc7 e-con-full tll-feedback-tool-section e-flex e-con e-child\" data-id=\"9854dc7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ed650d elementor-widget elementor-widget-html\" data-id=\"7ed650d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n<title>AI Feedback Tool \u2014 The Lighting Lab<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600;700&display=swap');\r\n\r\n :root {\r\n --black: #0a0a0a;\r\n --card-bg: #141414;\r\n --border: rgba(255,255,255,0.08);\r\n --white: #ffffff;\r\n --off-white: #d4d4d4;\r\n --orange: #f18410;\r\n --yellow: #f2b137;\r\n --blue-dark: #182940;\r\n --blue-light: #85c1d9;\r\n --radius: 20px;\r\n --radius-sm: 12px;\r\n --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: var(--black);\r\n color: var(--white);\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 16px;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'\/%3E%3C\/svg%3E\");\r\n opacity: 0.025;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .ambient-glow {\r\n position: fixed;\r\n top: -30vh; left: 50%;\r\n transform: translateX(-50%);\r\n width: 80vw; height: 60vh;\r\n background: radial-gradient(ellipse at center, rgba(241,132,16,0.07) 0%, transparent 70%);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 WRAPPER \u2500\u2500\u2500 *\/\r\n .tll-wrapper {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 1360px;\r\n margin: 0 auto;\r\n padding: 24px 32px 110px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 LOGO \u2500\u2500\u2500 *\/\r\n .tll-logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 40px;\r\n }\r\n .tll-logo svg { width: 36px; height: 36px; }\r\n .tll-logo-text {\r\n font-weight: 700;\r\n font-size: 13px;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n line-height: 1.2;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 HERO CARD \u2500\u2500\u2500 *\/\r\n .tll-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n position: relative;\r\n overflow: hidden;\r\n transition: border-color var(--transition), box-shadow var(--transition);\r\n }\r\n .tll-card:hover {\r\n border-color: rgba(241,132,16,0.15);\r\n box-shadow: 0 0 60px rgba(241,132,16,0.05), 0 24px 80px rgba(0,0,0,0.5);\r\n }\r\n .tll-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(241,132,16,0.4), var(--yellow), rgba(241,132,16,0.4), transparent);\r\n opacity: 0;\r\n transition: opacity var(--transition);\r\n }\r\n .tll-card:hover::before { opacity: 1; }\r\n\r\n \/* \u2500\u2500\u2500 HERO INNER: two-col \u2500\u2500\u2500 *\/\r\n .hero-inner {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 0;\r\n min-height: 420px;\r\n }\r\n\r\n \/* LEFT col *\/\r\n .hero-left {\r\n padding: 62px 56px 62px 62px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n \/* RIGHT col \u2014 slider *\/\r\n .hero-right {\r\n position: relative;\r\n align-self: center;\r\n height: 420px;\r\n border-left: 1px solid var(--border);\r\n border-radius: 0 var(--radius) var(--radius) 0;\r\n overflow: hidden;\r\n min-height: 420px;\r\n max-height: 420px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 BADGE \u2500\u2500\u2500 *\/\r\n .tll-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 7px;\r\n background: rgba(242,177,55,0.1);\r\n border: 1px solid rgba(242,177,55,0.3);\r\n color: var(--yellow);\r\n \/* #edit this to make the badge font larger# *\/\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n padding: 6px 16px;\r\n border-radius: 100px;\r\n margin-bottom: 22px;\r\n width: fit-content;\r\n }\r\n .tll-badge::before {\r\n content: '';\r\n width: 6px; height: 6px;\r\n border-radius: 50%;\r\n background: var(--yellow);\r\n box-shadow: 0 0 8px var(--yellow);\r\n animation: pulse 2s infinite;\r\n }\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.4; transform: scale(0.85); }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 TITLE \u2500\u2500\u2500 *\/\r\n .tll-title {\r\n font-family: 'Bebas Neue', sans-serif;\r\n \/* #edit this to make the main title larger# *\/\r\n font-size: clamp(72px, 6.6vw, 116px);\r\n line-height: 0.93;\r\n letter-spacing: 0.01em;\r\n color: var(--white);\r\n margin-bottom: 22px;\r\n }\r\n .tll-title span {\r\n background: linear-gradient(135deg, var(--orange), var(--yellow));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .tll-body {\r\n \/* #edit this to make the main copy larger# *\/\r\n font-size: 18px;\r\n color: rgba(255,255,255,0.55);\r\n line-height: 1.78;\r\n margin-bottom: 30px;\r\n }\r\n .tll-body strong { color: var(--white); font-weight: 600; }\r\n\r\n \/* \u2500\u2500\u2500 STUDIOS \u2500\u2500\u2500 *\/\r\n .tll-studios {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 6px;\r\n }\r\n .tll-studio-tag {\r\n \/* #edit this to make the studio tags larger# *\/\r\n font-size: 12.5px;\r\n font-weight: 500;\r\n letter-spacing: 0.05em;\r\n color: rgba(255,255,255,0.35);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n border-radius: 100px;\r\n padding: 5px 12px;\r\n transition: all var(--transition);\r\n }\r\n .tll-studio-tag:hover { color: var(--yellow); border-color: rgba(242,177,55,0.3); background: rgba(242,177,55,0.05); }\r\n\r\n \/* \u2500\u2500\u2500 COMPARISON SLIDER (fills right col) \u2500\u2500\u2500 *\/\r\n .comparison-wrapper {\r\n position: absolute;\r\n inset: 0;\r\n user-select: none;\r\n touch-action: none;\r\n cursor: col-resize;\r\n background: #0d0d0d;\r\n }\r\n .comparison-wrapper img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: contain;\r\n background: #0d0d0d;\r\n display: block;\r\n pointer-events: none;\r\n }\r\n .comparison-after { z-index: 1; }\r\n .comparison-before { z-index: 2; clip-path: inset(0 50% 0 0); }\r\n\r\n .comparison-handle {\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n left: 50%;\r\n z-index: 10;\r\n width: 2px;\r\n background: linear-gradient(180deg, transparent 0%, var(--orange) 20%, var(--yellow) 50%, var(--orange) 80%, transparent 100%);\r\n transform: translateX(-50%);\r\n box-shadow: 0 0 18px rgba(241,132,16,0.6);\r\n transition: box-shadow 0.2s;\r\n }\r\n .comparison-handle-circle {\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 42px; height: 42px;\r\n border-radius: 50%;\r\n background: var(--white);\r\n box-shadow: 0 0 24px rgba(241,132,16,0.5);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: all 0.2s;\r\n }\r\n .comparison-handle-circle svg { width: 20px; height: 20px; }\r\n .comparison-wrapper:hover .comparison-handle { box-shadow: 0 0 28px rgba(241,132,16,0.8); }\r\n .comparison-wrapper:hover .comparison-handle-circle { transform: translate(-50%, -50%) scale(1.1); }\r\n\r\n .comparison-label {\r\n position: absolute;\r\n z-index: 20;\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n padding: 5px 12px;\r\n border-radius: 100px;\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n }\r\n .label-before { top: 16px; left: 16px; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.15); color: #ccc; }\r\n .label-after { top: 16px; right: 16px; background: rgba(241,132,16,0.2); border: 1px solid rgba(241,132,16,0.4); color: var(--yellow); }\r\n\r\n \/* \u2500\u2500\u2500 FORM SECTION (below hero card) \u2500\u2500\u2500 *\/\r\n .form-section {\r\n padding: 52px 62px 62px;\r\n border-top: 1px solid var(--border);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 MINI FEATURES (horizontal strip) \u2500\u2500\u2500 *\/\r\n .tll-mini-features {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(0, 1fr));\r\n gap: 12px;\r\n margin-bottom: 34px;\r\n }\r\n .tll-mini-feat {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n background: rgba(255,255,255,0.03);\r\n border: 1px solid rgba(255,255,255,0.07);\r\n border-radius: var(--radius-sm);\r\n padding: 18px 18px 19px;\r\n min-height: 150px;\r\n min-width: 0;\r\n transition: all var(--transition);\r\n cursor: default;\r\n }\r\n .tll-mini-feat:hover {\r\n border-color: rgba(241,132,16,0.2);\r\n background: rgba(241,132,16,0.04);\r\n }\r\n .tll-mini-feat-icon {\r\n width: 34px; height: 34px;\r\n border-radius: 9px;\r\n background: rgba(241,132,16,0.1);\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n .tll-mini-feat-icon svg { width: 16px; height: 16px; stroke: var(--orange); }\r\n .tll-mini-feat-copy { display: flex; flex-direction: column; gap: 6px; }\r\n \/* #edit this to make the four card titles larger# *\/\r\n .tll-mini-feat-label { font-size: 16px; font-weight: 600; line-height: 1.25; color: rgba(255,255,255,0.78); }\r\n \/* #edit this to make the four card descriptions larger# *\/\r\n .tll-mini-feat-desc { font-size: 15px; line-height: 1.58; color: rgba(255,255,255,0.46); }\r\n\r\n \/* \u2500\u2500\u2500 FORM GRID \u2500\u2500\u2500 *\/\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 18px;\r\n align-items: start;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 UPLOAD + TEXTAREA left \u2500\u2500\u2500 *\/\r\n .form-left { display: flex; flex-direction: column; gap: 18px; width: 100%; }\r\n\r\n .tll-upload-zone {\r\n border: 2px dashed rgba(255,255,255,0.12);\r\n border-radius: var(--radius-sm);\r\n padding: 54px 28px;\r\n min-height: 240px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all var(--transition);\r\n position: relative;\r\n background: rgba(255,255,255,0.02);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .tll-upload-zone:hover, .tll-upload-zone.drag-over {\r\n border-color: var(--orange);\r\n background: rgba(241,132,16,0.05);\r\n box-shadow: 0 0 30px rgba(241,132,16,0.08) inset;\r\n }\r\n .tll-upload-zone input[type=\"file\"] {\r\n position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;\r\n }\r\n .tll-upload-icon {\r\n width: 52px; height: 52px;\r\n margin: 0 auto 16px;\r\n border-radius: 12px;\r\n background: rgba(241,132,16,0.1);\r\n border: 1px solid rgba(241,132,16,0.2);\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .tll-upload-icon svg { width: 24px; height: 24px; stroke: var(--orange); }\r\n \/* #edit this to make the upload text larger# *\/\r\n .tll-upload-title { font-size: 19px; font-weight: 600; color: var(--white); margin-bottom: 5px; }\r\n .tll-upload-sub { font-size: 15px; color: rgba(255,255,255,0.34); }\r\n .tll-file-name { font-size: 15px; color: var(--yellow); margin-top: 10px; font-weight: 500; }\r\n\r\n .tll-textarea {\r\n background: rgba(255,255,255,0.03);\r\n border: 1px solid rgba(255,255,255,0.1);\r\n border-radius: var(--radius-sm);\r\n color: var(--white);\r\n font-family: 'DM Sans', sans-serif;\r\n \/* #edit this to make the textarea font larger# *\/\r\n font-size: 17px;\r\n line-height: 1.7;\r\n padding: 20px 22px;\r\n resize: vertical;\r\n min-height: 190px;\r\n width: 100%;\r\n transition: all var(--transition);\r\n outline: none;\r\n }\r\n .tll-textarea::placeholder { color: rgba(255,255,255,0.22); }\r\n .tll-textarea:focus {\r\n border-color: rgba(241,132,16,0.4);\r\n background: rgba(241,132,16,0.03);\r\n box-shadow: 0 0 0 3px rgba(241,132,16,0.08);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SUBMIT right \u2500\u2500\u2500 *\/\r\n .form-right { display: flex; flex-direction: column; gap: 14px; width: 100%; }\r\n\r\n .tll-submit {\r\n width: 100%;\r\n padding: 21px;\r\n \/* #edit this to make the button font larger# *\/\r\n font-size: 17px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n border-radius: var(--radius-sm);\r\n border: none;\r\n cursor: pointer;\r\n background: linear-gradient(135deg, var(--orange), var(--yellow));\r\n color: var(--black);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all var(--transition);\r\n box-shadow: 0 8px 28px rgba(241,132,16,0.3);\r\n }\r\n .tll-submit::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: linear-gradient(135deg, var(--yellow), var(--orange));\r\n opacity: 0;\r\n transition: opacity var(--transition);\r\n }\r\n .tll-submit:hover::before { opacity: 1; }\r\n .tll-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(241,132,16,0.45); }\r\n .tll-submit:active { transform: translateY(0); }\r\n .tll-submit span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; }\r\n .tll-submit .btn-arrow { transition: transform var(--transition); }\r\n .tll-submit:hover .btn-arrow { transform: translateX(4px); }\r\n\r\n \/* #edit this to make the note under the button larger# *\/\r\n .form-note { font-size: 14px; color: rgba(255,255,255,0.26); text-align: center; line-height: 1.55; }\r\n .tll-reviews-counter {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n width: 100%;\r\n padding: 12px 14px;\r\n border: 1px solid rgba(242,177,55,0.22);\r\n border-radius: var(--radius-sm);\r\n background: rgba(242,177,55,0.07);\r\n color: rgba(255,255,255,0.72);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.04em;\r\n text-transform: uppercase;\r\n }\r\n .tll-reviews-counter span { color: var(--yellow); }\r\n\r\n \/* \u2500\u2500\u2500 LOADING \u2500\u2500\u2500 *\/\r\n .tll-loading {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n padding: 20px;\r\n color: rgba(255,255,255,0.45);\r\n font-size: 15.5px;\r\n font-weight: 500;\r\n letter-spacing: 0.05em;\r\n }\r\n .tll-loading.visible { display: flex; }\r\n .tll-spinner {\r\n width: 18px; height: 18px;\r\n border: 2px solid rgba(241,132,16,0.2);\r\n border-top-color: var(--orange);\r\n border-radius: 50%;\r\n animation: spin 0.7s linear infinite;\r\n }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n \/* \u2500\u2500\u2500 FEEDBACK BOX \u2500\u2500\u2500 *\/\r\n .tll-feedback-box {\r\n display: none;\r\n background: linear-gradient(135deg, rgba(24,41,64,0.4), rgba(14,14,14,0.8));\r\n border: 1px solid rgba(133,193,217,0.2);\r\n border-radius: var(--radius-sm);\r\n padding: 32px;\r\n margin-top: 24px;\r\n }\r\n .tll-feedback-box.visible { display: block; animation: fadeUp 0.4s ease forwards; }\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(12px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .tll-feedback-header {\r\n display: flex; align-items: center; gap: 10px;\r\n margin-bottom: 14px; padding-bottom: 12px;\r\n border-bottom: 1px solid rgba(255,255,255,0.06);\r\n }\r\n .tll-feedback-icon {\r\n width: 30px; height: 30px;\r\n border-radius: 7px;\r\n background: linear-gradient(135deg, var(--orange), var(--yellow));\r\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\r\n }\r\n .tll-feedback-icon svg { width: 14px; height: 14px; stroke: var(--black); fill: none; }\r\n .tll-feedback-label { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); }\r\n .tll-feedback-preview {\r\n display: none;\r\n margin-bottom: 20px;\r\n border-radius: var(--radius-sm);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n background: #0d0d0d;\r\n overflow: hidden;\r\n }\r\n .tll-feedback-preview.visible { display: block; }\r\n .tll-feedback-preview-label {\r\n padding: 11px 14px;\r\n border-bottom: 1px solid rgba(255,255,255,0.06);\r\n color: rgba(255,255,255,0.38);\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n }\r\n .tll-feedback-preview-media {\r\n display: block;\r\n width: 100%;\r\n max-height: 560px;\r\n object-fit: contain;\r\n background: #0d0d0d;\r\n }\r\n \/* #edit this to make the final feedback larger# *\/\r\n .tll-feedback-text { font-size: 18px; line-height: 1.85; color: rgba(255,255,255,0.82); white-space: pre-wrap; }\r\n\r\n \/* \u2500\u2500\u2500 DEEP CTA \u2500\u2500\u2500 *\/\r\n .tll-deep-cta {\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 12px;\r\n padding: 38px 28px;\r\n background: radial-gradient(ellipse at top, rgba(241,132,16,0.08), transparent 70%),\r\n linear-gradient(135deg, rgba(20,20,20,0.9), rgba(14,14,14,0.95));\r\n border: 1px solid rgba(241,132,16,0.2);\r\n border-radius: var(--radius-sm);\r\n margin-top: 16px;\r\n }\r\n .tll-deep-cta.visible { display: flex; animation: fadeUp 0.5s ease forwards; }\r\n .tll-deep-cta-label { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.3); }\r\n .tll-deep-cta h3 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(24px, 3vw, 34px); letter-spacing: 0.02em; color: var(--white); }\r\n .tll-deep-cta p { font-size: 16px; color: rgba(255,255,255,0.42); max-width: 440px; }\r\n\r\n .tll-btn {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;\r\n border-radius: 100px;\r\n padding: 13px 28px;\r\n cursor: pointer; border: none; text-decoration: none;\r\n transition: all var(--transition);\r\n white-space: nowrap; position: relative; overflow: hidden;\r\n }\r\n .tll-btn::after {\r\n content: ''; position: absolute; inset: 0;\r\n background: rgba(255,255,255,0.12); opacity: 0;\r\n transition: opacity 0.2s; border-radius: 100px;\r\n }\r\n .tll-btn:active::after { opacity: 1; }\r\n .tll-btn-primary { background: var(--white); color: var(--black); box-shadow: 0 4px 18px rgba(255,255,255,0.1); }\r\n .tll-btn-primary:hover,\r\n .tll-btn-primary:hover * {\r\n color: var(--white) !important;\r\n }\r\n .tll-btn-primary:hover { background: var(--orange); color: var(--white) !important; box-shadow: 0 4px 28px rgba(241,132,16,0.4); transform: translateY(-2px); }\r\n .tll-btn-ghost {\r\n background: rgba(255,255,255,0.04);\r\n color: rgba(255,255,255,0.76);\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .tll-btn-ghost:hover,\r\n .tll-btn-ghost:hover * {\r\n color: var(--white) !important;\r\n }\r\n .tll-btn-ghost:hover {\r\n border-color: rgba(241,132,16,0.35);\r\n background: rgba(241,132,16,0.08);\r\n transform: translateY(-2px);\r\n }\r\n .tll-btn-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 ERROR \u2500\u2500\u2500 *\/\r\n .tll-error { display: none; background: rgba(220,50,50,0.08); border: 1px solid rgba(220,50,50,0.25); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; color: #ff7b7b; margin-top: 8px; }\r\n .tll-error.visible { display: block; }\r\n .tll-limit-modal {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n z-index: 9999;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 24px;\r\n background: rgba(5,5,5,0.82);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n }\r\n .tll-limit-modal.visible { display: flex; animation: fadeUp 0.3s ease forwards; }\r\n .tll-limit-card {\r\n width: min(100%, 620px);\r\n background: radial-gradient(ellipse at top, rgba(241,132,16,0.08), transparent 70%), linear-gradient(135deg, rgba(20,20,20,0.96), rgba(10,10,10,0.98));\r\n border: 1px solid rgba(241,132,16,0.24);\r\n border-radius: var(--radius);\r\n padding: 36px;\r\n text-align: center;\r\n position: relative;\r\n box-shadow: 0 28px 90px rgba(0,0,0,0.65), 0 0 70px rgba(241,132,16,0.08);\r\n }\r\n .tll-limit-close {\r\n position: absolute;\r\n top: 14px;\r\n right: 14px;\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n background: rgba(255,255,255,0.04);\r\n color: rgba(255,255,255,0.7);\r\n cursor: pointer;\r\n font-size: 20px;\r\n line-height: 1;\r\n }\r\n .tll-limit-label {\r\n display: inline-flex;\r\n color: var(--yellow);\r\n background: rgba(242,177,55,0.1);\r\n border: 1px solid rgba(242,177,55,0.28);\r\n border-radius: 100px;\r\n padding: 6px 15px;\r\n font-size: 11px;\r\n font-weight: 800;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n margin-bottom: 18px;\r\n }\r\n .tll-limit-card h3 {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(34px, 5vw, 54px);\r\n line-height: 0.95;\r\n letter-spacing: 0.01em;\r\n margin-bottom: 16px;\r\n }\r\n .tll-limit-card h3 span {\r\n background: linear-gradient(135deg, var(--orange), var(--yellow));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .tll-limit-card p {\r\n color: rgba(255,255,255,0.55);\r\n font-size: 16px;\r\n line-height: 1.75;\r\n max-width: 500px;\r\n margin: 0 auto 24px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SCROLLBAR \u2500\u2500\u2500 *\/\r\n ::-webkit-scrollbar { width: 6px; }\r\n ::-webkit-scrollbar-track { background: var(--black); }\r\n ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }\r\n ::-webkit-scrollbar-thumb:hover { background: rgba(241,132,16,0.4); }\r\n\r\n \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n @media (max-width: 860px) {\r\n .hero-inner { grid-template-columns: 1fr; }\r\n .hero-right { align-self: stretch; height: auto; max-height: none; border-left: none; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); min-height: 300px; aspect-ratio: 16\/9; position: relative; }\r\n .comparison-wrapper { position: absolute; }\r\n .hero-left { padding: 46px 38px 38px; }\r\n .form-section { padding: 38px; }\r\n .tll-mini-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n }\r\n @media (max-width: 600px) {\r\n .tll-wrapper { padding: 36px 14px 80px; }\r\n .hero-left { padding: 34px 24px 30px; }\r\n .tll-title { font-size: clamp(52px, 15vw, 72px); }\r\n .tll-body { font-size: 16px; }\r\n .form-section { padding: 28px 22px 38px; }\r\n .tll-mini-features { grid-template-columns: 1fr; gap: 6px; }\r\n .tll-mini-feat { min-height: auto; }\r\n .tll-upload-zone { min-height: 190px; padding: 38px 18px; }\r\n .tll-textarea { min-height: 160px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"ambient-glow\"><\/div>\r\n\r\n<div class=\"tll-wrapper\">\r\n\r\n <!-- MAIN CARD -->\r\n <div class=\"tll-card\" id=\"hero\">\r\n\r\n <!-- TOP: two-col hero -->\r\n <div class=\"hero-inner\">\r\n\r\n <!-- LEFT: copy -->\r\n <div class=\"hero-left\">\r\n <div class=\"tll-badge\">New AI Tool<\/div>\r\n\r\n <h1 class=\"tll-title\">AI-Powered<br><span>Feedback Tool<\/span><\/h1>\r\n\r\n <p class=\"tll-body\">\r\n We have developed a new AI-powered feedback tool trained on real reviews from our community and mentors at\r\n <strong>The Lighting Lab<\/strong>, with years of industry experience in\r\n animation, VFX and video games at studios such as Sony Pictures Imageworks,\r\n Disney Animation Studios, Netflix Animation, MachineGames, and more.\r\n <br><br>\r\n Upload your render, frame or demoreel completely <strong>free of charge<\/strong> and receive\r\n cinematic feedback on <strong>composition, lighting, color and\r\n storytelling<\/strong> in seconds.\r\n <br><br>\r\n This AI-powered feedback is designed to provide guidance and a second opinion, but it is not intended to replace personalized feedback from senior artists and mentors working in the industry.\r\n<\/p>\r\n\r\n <div class=\"tll-studios\">\r\n <span class=\"tll-studio-tag\">Sony Pictures Imageworks<\/span>\r\n <span class=\"tll-studio-tag\">Disney Animation<\/span>\r\n <span class=\"tll-studio-tag\">Netflix Animation<\/span>\r\n <span class=\"tll-studio-tag\">MachineGames<\/span>\r\n <span class=\"tll-studio-tag\">& more<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT: comparison slider -->\r\n <div class=\"hero-right\">\r\n <div class=\"comparison-wrapper\" id=\"comparisonSlider\">\r\n <img decoding=\"async\" class=\"comparison-after\"\r\n src=\"https:\/\/thelightinglab.es\/wp-content\/uploads\/2026\/05\/1698230128658-paintover-1.png\"\r\n alt=\"After\" draggable=\"false\" \/>\r\n <img decoding=\"async\" class=\"comparison-before\" id=\"beforeImg\"\r\n src=\"https:\/\/thelightinglab.es\/wp-content\/uploads\/2026\/05\/1698230128658-2.jpg\"\r\n alt=\"Before\" draggable=\"false\" \/>\r\n <div class=\"comparison-handle\" id=\"compHandle\">\r\n <div class=\"comparison-handle-circle\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#111\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"15 18 9 12 15 6\" transform=\"translate(-2,0)\"\/>\r\n <polyline points=\"9 18 15 12 9 6\" transform=\"translate(2,0)\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <span class=\"comparison-label label-before\">Before<\/span>\r\n <span class=\"comparison-label label-after\">After AI<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/hero-inner -->\r\n\r\n <!-- BOTTOM: form section -->\r\n <div class=\"form-section\" id=\"form-section\">\r\n\r\n <!-- Mini feature pills -->\r\n <div class=\"tll-mini-features\">\r\n <div class=\"tll-mini-feat\">\r\n <div class=\"tll-mini-feat-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83\"\/><\/svg>\r\n <\/div>\r\n <div class=\"tll-mini-feat-copy\">\r\n <span class=\"tll-mini-feat-label\">Lighting<\/span>\r\n <span class=\"tll-mini-feat-desc\">Analyzes light direction, contrast, exposure, separation, mood and shape readability.<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tll-mini-feat\">\r\n <div class=\"tll-mini-feat-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"\/><\/svg>\r\n <\/div>\r\n <div class=\"tll-mini-feat-copy\">\r\n <span class=\"tll-mini-feat-label\">Composition<\/span>\r\n <span class=\"tll-mini-feat-desc\">Detects issues with focal point, visual hierarchy, framing, balance, tangents and clarity.<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tll-mini-feat\">\r\n <div class=\"tll-mini-feat-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"tll-mini-feat-copy\">\r\n <span class=\"tll-mini-feat-label\">Color<\/span>\r\n <span class=\"tll-mini-feat-desc\">Reviews color harmony, temperature, saturation, color contrast and palette consistency.<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tll-mini-feat\">\r\n <div class=\"tll-mini-feat-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"tll-mini-feat-copy\">\r\n <span class=\"tll-mini-feat-label\">Storytelling<\/span>\r\n <span class=\"tll-mini-feat-desc\">Evaluates visual intent, emotion, narrative clarity and whether the image communicates what it should.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Form grid -->\r\n <form id=\"feedbackForm\" onsubmit=\"return false;\">\r\n <div class=\"form-grid\">\r\n\r\n <!-- Left: upload + textarea -->\r\n <div class=\"form-left\">\r\n <div class=\"tll-upload-zone\" id=\"uploadZone\">\r\n <input type=\"file\" id=\"imageInput\" accept=\"image\/jpeg,image\/png,image\/webp,video\/mp4\" \/>\r\n <div class=\"tll-upload-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"16 16 12 12 8 16\"\/>\r\n <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\"\/>\r\n <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"tll-upload-title\">Drag your image or video here<\/div>\r\n <div class=\"tll-upload-sub\">JPG, PNG, WEBP, MP4 \u00b7 Max. 40MB<\/div>\r\n <div class=\"tll-file-name\" id=\"fileName\"><\/div>\r\n <\/div>\r\n\r\n <textarea\r\n class=\"tll-textarea\"\r\n id=\"messageInput\"\r\n placeholder=\"Tell us what you want to improve: lighting, composition, color, storytelling...\"\r\n rows=\"4\"\r\n ><\/textarea>\r\n <\/div>\r\n\r\n <!-- Right: submit -->\r\n <div class=\"form-right\">\r\n <button type=\"button\" class=\"tll-submit\" id=\"submitBtn\" onclick=\"submitFeedback()\">\r\n <span>\r\n Analyze my image NOW\r\n <svg class=\"btn-arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"tll-reviews-counter\" id=\"reviewsCounter\">Remaining reviews: <span id=\"reviewsRemaining\">2<\/span><\/div>\r\n <div class=\"form-note\">Free analysis \u00b7 No sign up<br>Result in seconds<\/div>\r\n\r\n <!-- Loading -->\r\n <div class=\"tll-loading\" id=\"loadingState\">\r\n <div class=\"tll-spinner\"><\/div>\r\n Analizando\u2026\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/form>\r\n\r\n <!-- Error -->\r\n <div class=\"tll-error\" id=\"errorBox\"><\/div>\r\n\r\n <!-- Feedback result -->\r\n <div class=\"tll-feedback-box\" id=\"feedbackBox\">\r\n <div class=\"tll-feedback-header\">\r\n <div class=\"tll-feedback-icon\">\r\n <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\r\n <\/div>\r\n <div class=\"tll-feedback-label\">Feedback IA \u2014 The Lighting Lab<\/div>\r\n <\/div>\r\n <div class=\"tll-feedback-preview\" id=\"feedbackPreview\">\r\n <div class=\"tll-feedback-preview-label\">Image sent<\/div>\r\n <div id=\"feedbackPreviewMedia\"><\/div>\r\n <\/div>\r\n <div class=\"tll-feedback-text\" id=\"feedbackText\"><\/div>\r\n <\/div>\r\n\r\n <!-- Deep CTA -->\r\n <div class=\"tll-deep-cta\" id=\"deepCta\">\r\n <div class=\"tll-deep-cta-label\">Want to go further?<\/div>\r\n <h3>Feedback m\u00e1s profundo<\/h3>\r\n <p>One-on-one session with a senior industry mentor. No filters, straight to the point.<\/p>\r\n <div class=\"tll-btn-row\">\r\n <a id=\"calendlyBtn\" href=\"PASTE_CALENDLY_URL_HERE\" target=\"_blank\" class=\"tll-btn tll-btn-primary\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\r\n I want to book a call\r\n <\/a>\r\n <a id=\"mentoriasBtn\" href=\"https:\/\/thelightinglab.es\/en\/3d-lighting-mentorships\/\" target=\"_blank\" class=\"tll-btn tll-btn-ghost\">\r\n 3D Lighting Mentorships\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/form-section -->\r\n\r\n <\/div><!-- \/tll-card -->\r\n\r\n<\/div><!-- \/tll-wrapper -->\r\n<div class=\"tll-limit-modal\" id=\"limitModal\" aria-hidden=\"true\">\r\n <div class=\"tll-limit-card\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"limitModalTitle\">\r\n <button type=\"button\" class=\"tll-limit-close\" onclick=\"hideLimitModal()\" aria-label=\"Cerrar\">\u00d7<\/button>\r\n <div class=\"tll-limit-label\">Reached limit<\/div>\r\n <h3 id=\"limitModalTitle\">You have used your <span>free reviews<\/span><\/h3>\r\n <p>\r\n You've reached the limit of reviews. Our students have unlimited access to this tool.\r\nIf you'd like professional feedback from one of our mentors, schedule a call with us here and we'll discuss how we can help you.\r\n <\/p>\r\n <div class=\"tll-btn-row\">\r\n <a id=\"limitCalendlyBtn\" href=\"PASTE_CALENDLY_URL_HERE\" target=\"_blank\" class=\"tll-btn tll-btn-primary\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\r\n Agendar llamada\r\n <\/a>\r\n <a id=\"limitCoursesBtn\" href=\"https:\/\/thelightinglab.es\/en\/courses\/\" target=\"_blank\" class=\"tll-btn tll-btn-ghost\">\r\n Ver nuestros cursos\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const N8N_WEBHOOK_URL = \"https:\/\/primary-production-a2379.up.railway.app\/webhook\/47ed85bf-541d-4fc8-af09-23b5a4434b23\";\r\n const CALENDLY_URL = \"https:\/\/calendly.com\/thelightinglab-info\/30min\";\r\n const MENTORIAS_URL = \"https:\/\/thelightinglab.es\/en\/3d-lighting-mentorships\/\";\r\n const COURSES_URL = \"https:\/\/thelightinglab.es\/en\/courses\/\";\r\n document.getElementById('calendlyBtn').href = CALENDLY_URL;\r\n document.getElementById('limitCalendlyBtn').href = CALENDLY_URL;\r\n document.getElementById('mentoriasBtn').href = MENTORIAS_URL;\r\n document.getElementById('limitCoursesBtn').href = COURSES_URL;\r\n\r\n \/\/ REVIEW LIMITS\r\n const TLL_FREE_LIMIT = 2;\r\n const TLL_STORAGE_KEY = 'tll_free_reviews_used';\r\n const reviewsCounter = document.getElementById('reviewsCounter');\r\n const reviewsRemaining = document.getElementById('reviewsRemaining');\r\n const limitModal = document.getElementById('limitModal');\r\n\r\n function isTllUserLoggedIn() {\r\n return Boolean(window.TLL_USER && window.TLL_USER.is_logged_in);\r\n }\r\n\r\n function getFreeReviewsUsed() {\r\n return Math.max(0, Number(localStorage.getItem(TLL_STORAGE_KEY) || 0));\r\n }\r\n\r\n function setFreeReviewsUsed(value) {\r\n localStorage.setItem(TLL_STORAGE_KEY, String(Math.max(0, value)));\r\n }\r\n\r\n function getReviewsRemaining() {\r\n return Math.max(0, TLL_FREE_LIMIT - getFreeReviewsUsed());\r\n }\r\n\r\n function updateReviewsCounter() {\r\n if (!reviewsCounter || !reviewsRemaining) return;\r\n if (isTllUserLoggedIn()) {\r\n reviewsCounter.innerHTML = 'Remaining reviews: <span>ilimitadas<\/span>';\r\n return;\r\n }\r\n reviewsRemaining.textContent = getReviewsRemaining();\r\n }\r\n\r\n function canUseTool() {\r\n return isTllUserLoggedIn() || getReviewsRemaining() > 0;\r\n }\r\n\r\n function consumeGuestReview() {\r\n if (isTllUserLoggedIn()) return;\r\n setFreeReviewsUsed(getFreeReviewsUsed() + 1);\r\n updateReviewsCounter();\r\n }\r\n\r\n function showLimitModal() {\r\n if (!limitModal) return;\r\n limitModal.classList.add('visible');\r\n limitModal.setAttribute('aria-hidden', 'false');\r\n }\r\n\r\n function hideLimitModal() {\r\n if (!limitModal) return;\r\n limitModal.classList.remove('visible');\r\n limitModal.setAttribute('aria-hidden', 'true');\r\n }\r\n\r\n updateReviewsCounter();\r\n\r\n \/\/ \u2500\u2500 FILE UPLOAD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const imageInput = document.getElementById('imageInput');\r\n const uploadZone = document.getElementById('uploadZone');\r\n const fileNameEl = document.getElementById('fileName');\r\n const feedbackPreview = document.getElementById('feedbackPreview');\r\n const feedbackPreviewMedia = document.getElementById('feedbackPreviewMedia');\r\n let selectedFile = null;\r\n let previewUrl = null;\r\n const TLL_ALLOWED_FILE_TYPES = ['image\/jpeg', 'image\/png', 'image\/webp', 'video\/mp4'];\r\n const TLL_MAX_FILE_SIZE = 40 * 1024 * 1024;\r\n\r\n function isAllowedFeedbackFile(file) {\r\n return file && TLL_ALLOWED_FILE_TYPES.includes(file.type);\r\n }\r\n\r\n function clearSelectedFile() {\r\n selectedFile = null;\r\n fileNameEl.textContent = '';\r\n imageInput.value = '';\r\n if (previewUrl) URL.revokeObjectURL(previewUrl);\r\n previewUrl = null;\r\n feedbackPreviewMedia.innerHTML = '';\r\n feedbackPreview.classList.remove('visible');\r\n }\r\n\r\n function handleSelectedFile(file) {\r\n if (!file) return;\r\n if (!isAllowedFeedbackFile(file)) {\r\n clearSelectedFile();\r\n showError('For now, the tool only accepts JPG, PNG, WEBP, or MP4 videos.');\r\n return;\r\n }\r\n if (file.size > TLL_MAX_FILE_SIZE) {\r\n clearSelectedFile();\r\n showError('The file is over 40MB. Please upload a smaller version in JPG, PNG, WEBP, or MP4 format.');\r\n return;\r\n }\r\n hideError();\r\n selectedFile = file;\r\n fileNameEl.textContent = '\u2713 ' + selectedFile.name;\r\n updateUploadedPreview(selectedFile);\r\n }\r\n\r\n function updateUploadedPreview(file) {\r\n if (previewUrl) URL.revokeObjectURL(previewUrl);\r\n previewUrl = URL.createObjectURL(file);\r\n feedbackPreviewMedia.innerHTML = '';\r\n\r\n const media = file.type.startsWith('video\/') ? document.createElement('video') : document.createElement('img');\r\n media.className = 'tll-feedback-preview-media';\r\n media.src = previewUrl;\r\n if (media.tagName === 'VIDEO') {\r\n media.controls = true;\r\n media.muted = true;\r\n media.playsInline = true;\r\n } else {\r\n media.alt = 'Image uploaded for feedback';\r\n }\r\n feedbackPreviewMedia.appendChild(media);\r\n feedbackPreview.classList.add('visible');\r\n }\r\n\r\n imageInput.addEventListener('change', () => {\r\n if (imageInput.files[0]) {\r\n handleSelectedFile(imageInput.files[0]);\r\n }\r\n });\r\n uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.classList.add('drag-over'); });\r\n uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('drag-over'));\r\n uploadZone.addEventListener('drop', (e) => {\r\n e.preventDefault(); uploadZone.classList.remove('drag-over');\r\n const f = e.dataTransfer.files[0];\r\n if (f) {\r\n handleSelectedFile(f);\r\n }\r\n });\r\n\r\n \/\/ \u2500\u2500 SUBMIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n async function submitFeedback() {\r\n const submitBtn = document.getElementById('submitBtn');\r\n const loadingState = document.getElementById('loadingState');\r\n const feedbackBox = document.getElementById('feedbackBox');\r\n const feedbackText = document.getElementById('feedbackText');\r\n const deepCta = document.getElementById('deepCta');\r\n const messageInput = document.getElementById('messageInput');\r\n\r\n if (!canUseTool()) { showLimitModal(); return; }\r\n if (!selectedFile) { showError('Please upload an image before continuing.'); return; }\r\n if (!isAllowedFeedbackFile(selectedFile)) {\r\n clearSelectedFile();\r\n showError('For now, the tool only accepts JPG, PNG, WEBP, or MP4 videos.');\r\n return;\r\n }\r\n hideError();\r\n submitBtn.style.display = 'none';\r\n loadingState.classList.add('visible');\r\n feedbackBox.classList.remove('visible');\r\n deepCta.classList.remove('visible');\r\n\r\n const formData = new FormData();\r\n formData.append(\"message\", messageInput.value || \"\");\r\n formData.append(\"image\", selectedFile);\r\n formData.append(\"is_logged_in\", isTllUserLoggedIn() ? \"true\" : \"false\");\r\n formData.append(\"user_email\", window.TLL_USER?.email || \"\");\r\n formData.append(\"user_id\", window.TLL_USER?.user_id || \"\");\r\n formData.append(\"guest_reviews_used\", String(getFreeReviewsUsed()));\r\n\r\n try {\r\n const res = await fetch(N8N_WEBHOOK_URL, { method: 'POST', body: formData });\r\n if (!res.ok) throw new Error(`Error del servidor: ${res.status}`);\r\n const ct = res.headers.get('content-type') || '';\r\n let result;\r\n if (ct.includes('application\/json')) {\r\n const j = await res.json();\r\n result = j.feedback || j.output || j.message || JSON.stringify(j, null, 2);\r\n } else {\r\n result = await res.text();\r\n }\r\n consumeGuestReview();\r\n feedbackText.textContent = result;\r\n feedbackBox.classList.add('visible');\r\n deepCta.classList.add('visible');\r\n feedbackBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n } catch (err) {\r\n showError('Algo fue mal: ' + err.message + '. Por favor int\u00e9ntalo de nuevo.');\r\n } finally {\r\n loadingState.classList.remove('visible');\r\n submitBtn.style.display = '';\r\n }\r\n }\r\n\r\n function showError(msg) { const e = document.getElementById('errorBox'); e.textContent = msg; e.classList.add('visible'); }\r\n function hideError() { document.getElementById('errorBox').classList.remove('visible'); }\r\n\r\n \/\/ \u2500\u2500 COMPARISON SLIDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n (function() {\r\n const slider = document.getElementById('comparisonSlider');\r\n const handle = document.getElementById('compHandle');\r\n const beforeImg = document.getElementById('beforeImg');\r\n let dragging = false;\r\n\r\n function setPos(x) {\r\n const r = slider.getBoundingClientRect();\r\n let p = ((x - r.left) \/ r.width) * 100;\r\n p = Math.min(97, Math.max(3, p));\r\n handle.style.left = p + '%';\r\n beforeImg.style.clipPath = `inset(0 ${100 - p}% 0 0)`;\r\n }\r\n\r\n slider.addEventListener('mousedown', (e) => { dragging = true; setPos(e.clientX); e.preventDefault(); });\r\n window.addEventListener('mousemove', (e) => { if (dragging) setPos(e.clientX); });\r\n window.addEventListener('mouseup', () => { dragging = false; });\r\n slider.addEventListener('touchstart', (e) => { dragging = true; setPos(e.touches[0].clientX); }, { passive: true });\r\n window.addEventListener('touchmove', (e) => { if (dragging) setPos(e.touches[0].clientX); }, { passive: true });\r\n window.addEventListener('touchend', () => { dragging = false; });\r\n\r\n \/\/ init at 50%\r\n function init() {\r\n const r = slider.getBoundingClientRect();\r\n if (r.width > 0) { setPos(r.left + r.width * 0.5); }\r\n else { requestAnimationFrame(init); }\r\n }\r\n requestAnimationFrame(init);\r\n })();\r\n\r\n \/\/ \u2500\u2500 ENTRANCE ANIMATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) { e.target.style.opacity = '1'; e.target.style.transform = 'translateY(0)'; }\r\n });\r\n }, { threshold: 0.06 });\r\n\r\n document.querySelectorAll('.tll-card, .tll-mini-feat').forEach(el => {\r\n el.style.opacity = '0';\r\n el.style.transform = 'translateY(22px)';\r\n el.style.transition = 'opacity 0.55s ease, transform 0.55s ease, border-color 0.35s ease, box-shadow 0.35s ease';\r\n obs.observe(el);\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Acceso Feedback Tool – The Lighting Lab Free access Traducir a espa\u00f1ol AI-POWERED FEEDBACK TOOL To access the tool, please leave us your email. You will receive immediate access and you will be able to upload your image to receive the analysis. Remember this feedback DO NOT replace human feedback from a senior artist. AI […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5585","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AI Powered Feedback Tool - The Lighting Lab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thelightinglab.es\/ai-feedback-tool\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AI Powered Feedback Tool - The Lighting Lab\" \/>\n<meta property=\"og:description\" content=\"Acceso Feedback Tool – The Lighting Lab Free access Traducir a espa\u00f1ol AI-POWERED FEEDBACK TOOL To access the tool, please leave us your email. You will receive immediate access and you will be able to upload your image to receive the analysis. Remember this feedback DO NOT replace human feedback from a senior artist. AI […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thelightinglab.es\/ai-feedback-tool\/\" \/>\n<meta property=\"og:site_name\" content=\"The Lighting Lab\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-27T21:46:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thelightinglab.es\/wp-content\/uploads\/2026\/05\/1698230128658-2.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/\",\"url\":\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/\",\"name\":\"AI Powered Feedback Tool - The Lighting Lab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thelightinglab.es\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1698230128658-2.jpg\",\"datePublished\":\"2026-05-24T10:38:52+00:00\",\"dateModified\":\"2026-05-27T21:46:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thelightinglab.es\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1698230128658-2.jpg\",\"contentUrl\":\"https:\\\/\\\/thelightinglab.es\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1698230128658-2.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/ai-feedback-tool\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/thelightinglab.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AI Powered Feedback Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/#website\",\"url\":\"https:\\\/\\\/thelightinglab.es\\\/\",\"name\":\"The Lighting Lab\",\"description\":\"The Lighting Lab\",\"publisher\":{\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thelightinglab.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/#organization\",\"name\":\"The Lighting Lab\",\"url\":\"https:\\\/\\\/thelightinglab.es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thelightinglab.es\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/logo-blanco.png\",\"contentUrl\":\"https:\\\/\\\/thelightinglab.es\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/logo-blanco.png\",\"width\":957,\"height\":392,\"caption\":\"The Lighting Lab\"},\"image\":{\"@id\":\"https:\\\/\\\/thelightinglab.es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AI Powered Feedback Tool - The Lighting Lab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thelightinglab.es\/ai-feedback-tool\/","og_locale":"en_US","og_type":"article","og_title":"AI Powered Feedback Tool - The Lighting Lab","og_description":"Acceso Feedback Tool – The Lighting Lab Free access Traducir a espa\u00f1ol AI-POWERED FEEDBACK TOOL To access the tool, please leave us your email. You will receive immediate access and you will be able to upload your image to receive the analysis. Remember this feedback DO NOT replace human feedback from a senior artist. AI […]","og_url":"https:\/\/thelightinglab.es\/ai-feedback-tool\/","og_site_name":"The Lighting Lab","article_modified_time":"2026-05-27T21:46:54+00:00","og_image":[{"url":"https:\/\/thelightinglab.es\/wp-content\/uploads\/2026\/05\/1698230128658-2.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thelightinglab.es\/ai-feedback-tool\/","url":"https:\/\/thelightinglab.es\/ai-feedback-tool\/","name":"AI Powered Feedback Tool - The Lighting Lab","isPartOf":{"@id":"https:\/\/thelightinglab.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thelightinglab.es\/ai-feedback-tool\/#primaryimage"},"image":{"@id":"https:\/\/thelightinglab.es\/ai-feedback-tool\/#primaryimage"},"thumbnailUrl":"https:\/\/thelightinglab.es\/wp-content\/uploads\/2026\/05\/1698230128658-2.jpg","datePublished":"2026-05-24T10:38:52+00:00","dateModified":"2026-05-27T21:46:54+00:00","breadcrumb":{"@id":"https:\/\/thelightinglab.es\/ai-feedback-tool\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thelightinglab.es\/ai-feedback-tool\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thelightinglab.es\/ai-feedback-tool\/#primaryimage","url":"https:\/\/thelightinglab.es\/wp-content\/uploads\/2026\/05\/1698230128658-2.jpg","contentUrl":"https:\/\/thelightinglab.es\/wp-content\/uploads\/2026\/05\/1698230128658-2.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/thelightinglab.es\/ai-feedback-tool\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/thelightinglab.es\/"},{"@type":"ListItem","position":2,"name":"AI Powered Feedback Tool"}]},{"@type":"WebSite","@id":"https:\/\/thelightinglab.es\/#website","url":"https:\/\/thelightinglab.es\/","name":"The Lighting Lab","description":"The Lighting Lab","publisher":{"@id":"https:\/\/thelightinglab.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thelightinglab.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/thelightinglab.es\/#organization","name":"The Lighting Lab","url":"https:\/\/thelightinglab.es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thelightinglab.es\/#\/schema\/logo\/image\/","url":"https:\/\/thelightinglab.es\/wp-content\/uploads\/2023\/04\/logo-blanco.png","contentUrl":"https:\/\/thelightinglab.es\/wp-content\/uploads\/2023\/04\/logo-blanco.png","width":957,"height":392,"caption":"The Lighting Lab"},"image":{"@id":"https:\/\/thelightinglab.es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/pages\/5585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/comments?post=5585"}],"version-history":[{"count":39,"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/pages\/5585\/revisions"}],"predecessor-version":[{"id":5641,"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/pages\/5585\/revisions\/5641"}],"wp:attachment":[{"href":"https:\/\/thelightinglab.es\/en\/wp-json\/wp\/v2\/media?parent=5585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}