{"id":16,"date":"2026-07-05T12:22:14","date_gmt":"2026-07-05T12:22:14","guid":{"rendered":"https:\/\/i-imageproject.it\/?page_id=16"},"modified":"2026-07-05T13:52:52","modified_gmt":"2026-07-05T13:52:52","slug":"lumin","status":"publish","type":"page","link":"https:\/\/i-imageproject.it\/","title":{"rendered":"LUMIN"},"content":{"rendered":"\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&#038;family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&#038;display=swap\" rel=\"stylesheet\">\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n  <script src=\"https:\/\/unpkg.com\/@studio-freight\/lenis@1.0.42\/dist\/lenis.min.js\"><\/script>\n  <style>\n    html,body{margin:0;padding:0;background:#060A0E;}\n    ::selection{background:#29D6C8;color:#060A0E;}\n    @keyframes cueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}\n    @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}\n    @keyframes scanSweep{0%{transform:translateY(-140px)}50%{transform:translateY(140px)}100%{transform:translateY(-140px)}}\n    @keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}\n    @keyframes dashFlow{to{stroke-dashoffset:-24}}\n    @keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}}\n    @keyframes glowDrift{0%,100%{transform:translate(0,0) scale(1);opacity:.8}33%{transform:translate(4%,-3%) scale(1.08);opacity:1}66%{transform:translate(-3%,3%) scale(.96);opacity:.7}}\n    @keyframes starTwinkle{0%,100%{opacity:.5}50%{opacity:.25}}\n    body{overscroll-behavior:none;}\n\n    \/* ============ RESPONSIVE \u2014 tablet \u22641024 \/ mobile \u2264820 \u00b7 desktop untouched ============ *\/\n    @media (max-width:1024px){\n      #megaMenu>div{grid-template-columns:1fr 1fr !important;}\n      #megaMenu{padding:90px 28px 32px !important;}\n      #footer>div:nth-of-type(2){grid-template-columns:1fr 1fr !important;}\n      #modalPanel>div:nth-of-type(2){grid-template-columns:1fr !important;gap:44px !important;}\n    }\n    @media (max-width:820px){\n      \/* nav *\/\n      #nav{padding:12px 18px !important;}\n      #nav>div{gap:18px !important;}\n      #servicesNavBtn,.navPatient,.navPhone{display:none !important;}\n      .navCta{padding:10px 16px !important;font-size:12px !important;white-space:nowrap !important;flex:none !important;}\n      #nav>div:last-child{gap:12px !important;}\n      \/* full-screen menu: big links only *\/\n      #menuOverlay>div{padding:96px 24px 32px !important;}\n      #menuOverlay>div>div:first-child{display:none !important;}\n      #menuOverlay>div>div:last-child{flex-direction:column !important;align-items:flex-start !important;gap:44px !important;}\n      #menuOverlay>div>div:last-child>div:first-child{width:100% !important;}\n      #menuOverlay>div>div:last-child>div:last-child{grid-template-columns:1fr !important;gap:6px !important;}\n      #menuOverlay>div>div:last-child>div:last-child>div{font-size:clamp(40px,10vw,64px) !important;}\n      \/* hero *\/\n      #heroContent{padding:0 22px 52px !important;}\n      #heroContent h1{font-size:clamp(40px,10.5vw,116px) !important;}\n      #heroContent>div:last-child{flex-direction:column !important;align-items:flex-start !important;gap:22px !important;}\n      #heroContent>div:last-child>div:last-child{max-width:100% !important;}\n      #heroContent>div:last-child>div:first-child{width:100% !important;flex-direction:column !important;align-items:stretch !important;gap:12px !important;}\n      #heroContent>div:last-child>div:first-child>div.hw{text-align:center !important;font-size:13px !important;padding:14px 18px !important;white-space:nowrap !important;}\n      #heroContent>div:last-child>div:first-child>button{width:100% !important;padding:15px 18px !important;font-size:14px !important;white-space:nowrap !important;}\n      \/* value cards *\/\n      #cardsProgress{left:22px !important;top:82px !important;}\n      .hPanel{flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;gap:26px !important;padding:104px 22px 36px !important;}\n      .hPanel .charX{font-size:clamp(34px,9vw,53px) !important;}\n      .hPanel>div:last-child{width:min(300px,70vw) !important;margin:0 auto !important;}\n      \/* about *\/\n      #aboutSec{padding:90px 22px 100px !important;}\n      #aboutSec>div{grid-template-columns:1fr !important;gap:36px !important;}\n      #aboutImg{height:340px !important;}\n      \/* services *\/\n      #servSec>div:first-child{width:100% !important;opacity:.3;}\n      #servTitleWrap{left:22px !important;right:22px !important;}\n      .servTitle{font-size:clamp(42px,11vw,70px) !important;}\n      #servSec>div:nth-of-type(3){left:22px !important;right:22px !important;width:auto !important;top:92px !important;}\n      #servSec>div:nth-of-type(4){display:none !important;}\n      #servSec>button{right:22px !important;bottom:18px !important;}\n      \/* tech *\/\n      #techSec>div:first-child{display:none !important;}\n      #techSec>div:nth-of-type(2){left:22px !important;right:22px !important;top:88px !important;}\n      .techName{font-size:25px !important;}\n      \/* team *\/\n      #teamHeadline{padding-left:22px !important;font-size:clamp(104px,32vw,420px) !important;}\n      #teamTrack{padding:0 22px !important;gap:7vw !important;}\n      #teamTrack>div:first-child{width:70vw !important;}\n      .teamCard{width:min(420px,84vw) !important;margin-top:0 !important;}\n      .teamCard>div:first-child{height:44vh !important;}\n      \/* why choose us *\/\n      #whySec{padding:110px 0 40px !important;}\n\n      #statsWrap{height:auto !important;margin-top:36px !important;display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:16px !important;padding:0 22px !important;}\n      .bubble{position:static !important;width:150px !important;height:150px !important;}\n      .bubble>div:first-child{font-size:38px !important;}\n      .bubble>div:last-child{font-size:10px !important;}\n      #statsWrap>div:not(.bubble){display:none !important;}\n      \/* footer *\/\n      #footer{padding:96px 22px 28px !important;}\n      #footer>div:nth-of-type(2){grid-template-columns:1fr !important;gap:40px !important;margin-top:56px !important;}\n      #footer>div:nth-of-type(3){flex-direction:column !important;align-items:flex-start !important;gap:10px !important;margin-top:60px !important;}\n      \/* modal *\/\n      #modalPanel>div:nth-of-type(2){grid-template-columns:1fr !important;gap:40px !important;padding:80px 22px 20px !important;}\n      #modalPanel .form-live>div:nth-of-type(2){grid-template-columns:1fr !important;}\n      #modalTitle{font-size:clamp(34px,10vw,80px) !important;padding:0 22px 10px !important;}\n    }\n  [data-hv=\"1\"]:hover{box-shadow:0 0 30px rgba(41,214,200,.4) !important;}\n[data-hv=\"2\"]:hover{opacity:.8 !important;}\n[data-hv=\"3\"]:hover{border-color:#29D6C8 !important;color:#29D6C8 !important;}\n[data-hv=\"4\"]:hover{color:#29D6C8 !important;}\n[data-hv=\"5\"]:hover{background:#159A90 !important;}\n[data-hv=\"6\"]:hover{box-shadow:0 0 24px rgba(41,214,200,.4) !important;}\n[data-hv=\"7\"]:hover{box-shadow:0 0 26px rgba(41,214,200,.45) !important;}\n[data-hv=\"8\"]:hover{color:#3E7BFA !important;}\n[data-hv=\"9\"]:hover{border-color:#29D6C8 !important;box-shadow:0 0 20px rgba(41,214,200,.35) !important;}\n[data-hv=\"10\"]:hover{border-color:#29D6C8 !important;color:#29D6C8 !important;box-shadow:0 0 18px rgba(41,214,200,.3) !important;}\n[data-hv=\"11\"]:focus{border-bottom:1px solid #29D6C8 !important;}\n[data-hv=\"12\"]:focus{border-color:#29D6C8 !important;box-shadow:0 0 18px rgba(41,214,200,.2) !important;}\n\n\/* ===== WordPress full-bleed breakout ===== *\/\nhtml,body{margin:0 !important;padding:0 !important;background:#060A0E !important;max-width:none !important;overflow-x:hidden;}\n.wp-site-blocks,.entry-content,.wp-block-post-content,main,article{max-width:none !important;width:100% !important;margin:0 !important;padding:0 !important;}\n.wp-block-html{max-width:none !important;margin:0 !important;padding:0 !important;}\n.entry-content > *,.wp-block-post-content > *{max-width:none !important;}\n#lumenRoot{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}\n<\/style>\n\n<div id=\"lumenRoot\">\n\n\n<div id=\"page\" style=\"font-family:'Instrument Sans',sans-serif;color:#1B2226;background:#060A0E;overflow-x:clip;\">\n\n  <!-- ============ NAV ============ -->\n  <nav id=\"nav\" style=\"position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:14px 36px;background:transparent;transition:background .4s ease, box-shadow .4s ease;--nc:#F2F6F7;color:var(--nc);\">\n    <div style=\"display:flex;align-items:center;gap:56px;\">\n      <div style=\"display:flex;align-items:center;gap:12px;\">\n        <div style=\"width:30px;height:30px;border-radius:50%;border:1.5px solid #29D6C8;display:grid;place-items:center;box-shadow:0 0 18px rgba(41,214,200,.45);\">\n          <div style=\"width:8px;height:8px;border-radius:50%;background:#29D6C8;box-shadow:0 0 10px rgba(41,214,200,.9);\"><\/div>\n        <\/div>\n        <div style=\"font-weight:600;line-height:1.05;font-size:15px;letter-spacing:.01em;\">Lumen<br><span style=\"font-weight:400;opacity:.75;\">Dental Atelier<\/span><\/div>\n      <\/div>\n      <div style=\"display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500;\">\n        <div data-menu-toggle style=\"display:flex;align-items:center;gap:8px;cursor:pointer;\">Menu <span id=\"menuIcon\" style=\"letter-spacing:-1px;\">\u2261<\/span><\/div>\n        <div id=\"servicesNavBtn\" data-services-toggle style=\"display:flex;align-items:center;gap:6px;cursor:pointer;\">Servizi <span style=\"font-size:11px;transform:translateY(1px);\">\u25be<\/span><\/div>\n      <\/div>\n    <\/div>\n    <div style=\"display:flex;align-items:center;gap:32px;\">\n      <a href=\"#footer\" class=\"navPatient\" style=\"color:inherit;text-decoration:none;font-size:15px;font-weight:500;\">Modulo paziente \u2197<\/a>\n      <div class=\"navPhone\" style=\"font-size:15px;font-weight:500;line-height:1.2;\">+39 02 5550 0144<br><span style=\"font-size:12px;opacity:.6;font-weight:400;\">Milano \u00b7 Brera \u25be<\/span><\/div>\n      <button data-open-modal class=\"navCta\" style=\"border:none;cursor:pointer;background:#0E1519;color:#F2F6F7;border-radius:40px;padding:14px 26px;font:600 15px 'Instrument Sans',sans-serif;display:flex;align-items:center;gap:12px;border:1px solid rgba(41,214,200,.35);box-shadow:0 0 22px rgba(41,214,200,.18);\" data-hv=\"1\">Prenota una chiamata <span style=\"color:#29D6C8;\">+<\/span><\/button>\n    <\/div>\n  <\/nav>\n\n  <!-- services mega menu -->\n  <div id=\"megaMenu\" style=\"position:fixed;top:0;left:24px;right:24px;z-index:89;display:none;background:#ECEEF0;border-radius:0 0 28px 28px;padding:96px 48px 40px;box-shadow:0 40px 80px rgba(0,0,0,.5);\">\n    <div style=\"display:grid;grid-template-columns:200px repeat(4,1fr);gap:28px;align-items:start;\">\n      <div style=\"font-size:15px;color:#7C8A90;\">Servizi \u2715<\/div>\n      <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\"><div style=\"height:180px;border-radius:6px;background:url('https:\/\/images.unsplash.com\/photo-1606811971618-4486d14f3f99?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-weight:600;font-size:16px;\">Odontoiatria Estetica \u2197<\/div><\/div>\n      <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\"><div style=\"height:180px;border-radius:6px;background:url('https:\/\/images.unsplash.com\/photo-1606811841689-23dfddce3e95?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-weight:600;font-size:16px;\">Odontoiatria Restaurativa \u2197<\/div><\/div>\n      <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\"><div style=\"height:180px;border-radius:6px;background:url('https:\/\/images.unsplash.com\/photo-1588776814546-1ffcf47267a5?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-weight:600;font-size:16px;\">Igiene e Prevenzione \u2197<\/div><\/div>\n      <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\"><div style=\"height:180px;border-radius:6px;background:url('https:\/\/images.unsplash.com\/photo-1559839734-2b71ea197ec2?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-weight:600;font-size:16px;\">Estetica del Viso \u2197<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ============ FULL-SCREEN MENU ============ -->\n  <div id=\"menuOverlay\" style=\"position:fixed;inset:0;z-index:88;display:none;background:radial-gradient(90% 90% at 40% 40%, #0B1216 0%, #060A0E 70%);color:#F2F6F7;overflow:hidden;\">\n    <div style=\"position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:120px 64px 48px;box-sizing:border-box;\">\n\n      <!-- top right: services strip -->\n      <div style=\"display:flex;justify-content:flex-end;\">\n        <div style=\"width:min(1060px,72vw);\">\n          <div class=\"menuFx\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(44px,4.6vw,76px);line-height:1;margin-bottom:34px;\">Servizi:<\/div>\n          <div class=\"menuFx\" style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:26px;\">\n            <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\" data-hv=\"2\"><div style=\"height:160px;border-radius:4px;background:url('https:\/\/images.unsplash.com\/photo-1606811971618-4486d14f3f99?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-size:15px;font-weight:500;\">Odontoiatria Estetica<\/div><\/div>\n            <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\" data-hv=\"2\"><div style=\"height:160px;border-radius:4px;background:url('https:\/\/images.unsplash.com\/photo-1606811841689-23dfddce3e95?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-size:15px;font-weight:500;\">Odontoiatria Restaurativa<\/div><\/div>\n            <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\" data-hv=\"2\"><div style=\"height:160px;border-radius:4px;background:url('https:\/\/images.unsplash.com\/photo-1588776814546-1ffcf47267a5?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-size:15px;font-weight:500;\">Igiene e Prevenzione<\/div><\/div>\n            <div data-scroll-to=\"#servSec\" style=\"cursor:pointer;\" data-hv=\"2\"><div style=\"height:160px;border-radius:4px;background:url('https:\/\/images.unsplash.com\/photo-1512290923902-8a9f81dc236c?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;filter:grayscale(1);\"><\/div><div style=\"margin-top:12px;font-size:15px;font-weight:500;\">Estetica del Viso<\/div><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- bottom: utilities left \u00b7 big links right -->\n      <div style=\"display:flex;justify-content:space-between;align-items:flex-end;gap:60px;\">\n        <div class=\"menuFx\" style=\"display:flex;flex-direction:column;gap:34px;width:min(420px,32vw);\">\n          <div style=\"display:flex;gap:14px;\">\n            <a href=\"#\" style=\"display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(242,246,247,.07);border:1px solid rgba(124,138,144,.3);color:#F2F6F7;text-decoration:none;\" data-hv=\"3\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"><\/rect><circle cx=\"12\" cy=\"12\" r=\"4.5\"><\/circle><circle cx=\"17.6\" cy=\"6.4\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"><\/circle><\/svg><\/a>\n            <a href=\"#\" style=\"display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(242,246,247,.07);border:1px solid rgba(124,138,144,.3);color:#F2F6F7;text-decoration:none;\" data-hv=\"3\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4.98 3.5C4.98 4.88 3.87 6 2.5 6S.02 4.88.02 3.5 1.13 1 2.5 1s2.48 1.12 2.48 2.5zM.4 8.1h4.2V23H.4V8.1zm7.1 0h4v2h.06c.56-1.06 1.93-2.18 3.97-2.18 4.25 0 5.03 2.8 5.03 6.44V23h-4.2v-7.4c0-1.77-.03-4.05-2.47-4.05-2.47 0-2.85 1.93-2.85 3.92V23H7.5V8.1z\"><\/path><\/svg><\/a>\n          <\/div>\n          <div style=\"display:flex;flex-direction:column;\">\n            <div data-scroll-to=\"#footer\" style=\"display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid rgba(242,246,247,.14);font-size:16px;cursor:pointer;\" data-hv=\"4\">Modulo paziente <span style=\"color:#29D6C8;\">\u2197<\/span><\/div>\n            <div data-scroll-to=\"#whySec\" style=\"display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid rgba(242,246,247,.14);border-bottom:1px solid rgba(242,246,247,.14);font-size:16px;cursor:pointer;\" data-hv=\"4\">FAQ <span style=\"color:#29D6C8;\">\u2197<\/span><\/div>\n          <\/div>\n        <\/div>\n\n        <div style=\"display:grid;grid-template-columns:auto auto;gap:8px 8vw;text-align:left;\">\n          <div class=\"menuFx\" data-scroll-to=\"#aboutSec\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(52px,6.4vw,110px);line-height:1.08;cursor:pointer;\" data-hv=\"4\">Chi Siamo<\/div>\n          <div class=\"menuFx\" data-scroll-to=\"#teamSec\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(52px,6.4vw,110px);line-height:1.08;cursor:pointer;\" data-hv=\"4\">Il Team<\/div>\n          <div class=\"menuFx\" data-scroll-to=\"#techSec\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(52px,6.4vw,110px);line-height:1.08;cursor:pointer;\" data-hv=\"4\">Tecnologia<\/div>\n          <div class=\"menuFx\" data-scroll-to=\"#footer\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(52px,6.4vw,110px);line-height:1.08;cursor:pointer;\" data-hv=\"4\">Contatti<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ============ HERO ============ -->\n  <section id=\"heroSec\" data-screen-label=\"Hero\" style=\"position:relative;height:100vh;overflow:hidden;background:#060A0E;\">\n    <canvas id=\"heroCanvas\" style=\"position:absolute;inset:0;width:100%;height:100%;display:block;\"><\/canvas>\n    <canvas id=\"particleCanvas\" style=\"position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.5;pointer-events:none;\"><\/canvas>\n    <div style=\"position:absolute;inset:0;background:linear-gradient(to top, rgba(6,10,14,.72), transparent 50%);pointer-events:none;\"><\/div>\n\n    <div id=\"heroContent\" style=\"position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 64px 72px;color:#F2F6F7;\">\n      <div class=\"hw\" style=\"font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#7C8A90;margin-bottom:22px;\">La Precisione Incontra la Biologia<\/div>\n      <h1 class=\"charXHero\" style=\"margin:0;font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(56px,7.4vw,116px);line-height:1.0;letter-spacing:-.01em;max-width:1100px;\">\n        <span class=\"hw\" style=\"display:inline-block;\">Odontoiatria<\/span> <span class=\"hw\" style=\"display:inline-block;\">di Precisione,<\/span><br>\n        <span class=\"hw\" style=\"display:inline-block;position:relative;font-style:italic;color:#29D6C8;text-shadow:0 0 24px rgba(41,214,200,.45);\">Splendidamente\n          <span id=\"accentBar\" style=\"position:absolute;left:2%;bottom:-6px;width:96%;height:2px;background:#29D6C8;box-shadow:0 0 14px rgba(41,214,200,.8);transform:scaleX(0);transform-origin:left;\"><\/span>\n        <\/span> <span class=\"hw\" style=\"display:inline-block;\">Progettata<\/span>\n      <\/h1>\n      <div style=\"display:flex;align-items:flex-end;justify-content:space-between;margin-top:40px;\">\n        <div style=\"display:flex;align-items:center;gap:18px;\">\n          <div class=\"hw\" style=\"font-family:monospace;font-size:14px;color:#B8F2EC;border:1px solid rgba(41,214,200,.5);border-radius:40px;padding:15px 26px;box-shadow:0 0 18px rgba(41,214,200,.22), inset 0 0 12px rgba(41,214,200,.08);\">&gt; prenota_consulenza<\/div>\n          <button data-open-modal class=\"hw\" style=\"cursor:pointer;border:none;background:#29D6C8;color:#060A0E;border-radius:40px;padding:16px 30px;font:600 15px 'Instrument Sans',sans-serif;box-shadow:0 0 28px rgba(41,214,200,.45);\" data-hv=\"5\">Prenota una chiamata +<\/button>\n        <\/div>\n        <div class=\"hw\" style=\"max-width:330px;font-size:15px;line-height:1.55;color:#9fb0b5;\">Implantologia avanzata, estetica e odontoiatria digitale \u2014 con la calma di un atelier privato.<\/div>\n      <\/div>\n    <\/div>\n\n    <div style=\"position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:#29D6C8;font-size:20px;animation:cueBounce 1.8s cubic-bezier(.22,1,.36,1) infinite;\">\u2193<\/div>\n  <\/section>\n\n  <!-- ============ VALUE CARDS \u2014 horizontal scroll ============ -->\n  <section id=\"cardsSec\" data-screen-label=\"Value Props\" style=\"position:relative;height:100vh;overflow:hidden;background:#060A0E;color:#F2F6F7;\">\n    <div aria-hidden=\"true\" style=\"position:absolute;inset:0;z-index:0;pointer-events:none;animation:glowDrift 18s ease-in-out infinite;background:radial-gradient(ellipse 70% 55% at 55% 45%, rgba(41,214,200,.10), transparent 65%), radial-gradient(ellipse 40% 35% at 20% 80%, rgba(41,214,200,.05), transparent 70%);\"><\/div>\n    <div aria-hidden=\"true\" style=\"position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;animation:starTwinkle 9s ease-in-out infinite;background-image:radial-gradient(1.5px 1.5px at 12% 22%, rgba(242,246,247,.35), transparent 100%),radial-gradient(1px 1px at 34% 68%, rgba(242,246,247,.22), transparent 100%),radial-gradient(1.5px 1.5px at 58% 14%, rgba(41,214,200,.30), transparent 100%),radial-gradient(1px 1px at 73% 52%, rgba(242,246,247,.25), transparent 100%),radial-gradient(1.5px 1.5px at 88% 30%, rgba(242,246,247,.28), transparent 100%),radial-gradient(1px 1px at 47% 86%, rgba(41,214,200,.22), transparent 100%),radial-gradient(1px 1px at 92% 78%, rgba(242,246,247,.20), transparent 100%),radial-gradient(1.5px 1.5px at 6% 60%, rgba(41,214,200,.18), transparent 100%);\"><\/div>\n    <div id=\"cardsProgress\" style=\"position:absolute;left:64px;top:96px;z-index:5;font-family:monospace;font-size:13px;color:#7C8A90;display:flex;align-items:center;gap:16px;\">\n      <span id=\"cardsCounter\" style=\"color:#29D6C8;\">01<\/span>\n      <span style=\"display:inline-block;width:120px;height:1px;background:rgba(124,138,144,.35);position:relative;\"><span id=\"cardsBar\" style=\"position:absolute;left:0;top:0;bottom:0;width:33.3%;background:#29D6C8;box-shadow:0 0 10px rgba(41,214,200,.7);\"><\/span><\/span>\n      <span>03<\/span>\n    <\/div>\n\n    <div id=\"cardsTrack\" style=\"display:flex;height:100%;width:300vw;will-change:transform;\">\n\n      <!-- 01 MATERIALI -->\n      <div class=\"hPanel\" style=\"width:100vw;height:100%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:60px;padding:120px 64px 80px;box-sizing:border-box;border-right:1px solid rgba(242,246,247,.06);\">\n        <div style=\"max-width:580px;\">\n          <div style=\"font-family:monospace;font-size:14px;color:#29D6C8;margin-bottom:30px;\">01 \/ MATERIALI<\/div>\n          <div class=\"charX\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(53px,5.5vw,86px);line-height:1.05;margin-bottom:26px;\">Materiali Premium<\/div>\n          <div style=\"font-size:19px;line-height:1.65;color:#7C8A90;max-width:480px;\">Zirconia, disilicato di litio e titanio biocompatibile \u2014 selezionati dai migliori laboratori del mondo, rifiniti nel nostro.<\/div>\n        <\/div>\n        <div style=\"flex:none;width:min(580px,44vw);display:grid;place-items:center;\">\n          <svg viewBox=\"0 0 480 480\" style=\"width:100%;height:auto;overflow:visible;\">\n            <circle cx=\"240\" cy=\"240\" r=\"200\" fill=\"none\" stroke=\"rgba(124,138,144,.25)\" stroke-width=\"1\"><\/circle>\n            <circle cx=\"240\" cy=\"240\" r=\"200\" fill=\"none\" stroke=\"rgba(41,214,200,.6)\" stroke-width=\"1.5\" stroke-dasharray=\"6 18\" style=\"animation:dashFlow 2.2s linear infinite;\"><\/circle>\n            <g style=\"animation:floatY 5s ease-in-out infinite;\">\n              <ellipse cx=\"240\" cy=\"300\" rx=\"120\" ry=\"26\" fill=\"none\" stroke=\"#7C8A90\" stroke-width=\"1.2\"><\/ellipse>\n              <text x=\"380\" y=\"305\" font-family=\"monospace\" font-size=\"12\" fill=\"#7C8A90\">titanio<\/text>\n            <\/g>\n            <g style=\"animation:floatY 5s ease-in-out .5s infinite;\">\n              <ellipse cx=\"240\" cy=\"240\" rx=\"120\" ry=\"26\" fill=\"rgba(41,214,200,.06)\" stroke=\"#29D6C8\" stroke-width=\"1.4\"><\/ellipse>\n              <text x=\"380\" y=\"245\" font-family=\"monospace\" font-size=\"12\" fill=\"#29D6C8\">disilicato<\/text>\n            <\/g>\n            <g style=\"animation:floatY 5s ease-in-out 1s infinite;\">\n              <ellipse cx=\"240\" cy=\"180\" rx=\"120\" ry=\"26\" fill=\"rgba(242,246,247,.05)\" stroke=\"#F2F6F7\" stroke-width=\"1.2\"><\/ellipse>\n              <text x=\"380\" y=\"185\" font-family=\"monospace\" font-size=\"12\" fill=\"#F2F6F7\">zirconia<\/text>\n            <\/g>\n            <line x1=\"240\" y1=\"120\" x2=\"240\" y2=\"360\" stroke=\"rgba(41,214,200,.35)\" stroke-width=\"1\" stroke-dasharray=\"2 6\"><\/line>\n          <\/svg>\n        <\/div>\n      <\/div>\n\n      <!-- 02 TECNOLOGIA -->\n      <div class=\"hPanel\" style=\"width:100vw;height:100%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:60px;padding:120px 64px 80px;box-sizing:border-box;border-right:1px solid rgba(242,246,247,.06);\">\n        <div style=\"max-width:580px;\">\n          <div style=\"font-family:monospace;font-size:14px;color:#29D6C8;margin-bottom:30px;\">02 \/ TECNOLOGIA<\/div>\n          <div class=\"charX\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(53px,5.5vw,86px);line-height:1.05;margin-bottom:26px;\">Tecnologia Avanzata<\/div>\n          <div style=\"font-size:19px;line-height:1.65;color:#7C8A90;max-width:480px;\">Scansione 3D, imaging cone-beam e fresatura CAD\/CAM interna per restauri in giornata, precisi al micron.<\/div>\n        <\/div>\n        <div style=\"flex:none;width:min(580px,44vw);display:grid;place-items:center;\">\n          <svg viewBox=\"0 0 480 480\" style=\"width:100%;height:auto;overflow:visible;\">\n            <g stroke=\"rgba(124,138,144,.22)\" stroke-width=\"1\">\n              <line x1=\"80\" y1=\"120\" x2=\"400\" y2=\"120\"><\/line><line x1=\"80\" y1=\"180\" x2=\"400\" y2=\"180\"><\/line>\n              <line x1=\"80\" y1=\"240\" x2=\"400\" y2=\"240\"><\/line><line x1=\"80\" y1=\"300\" x2=\"400\" y2=\"300\"><\/line>\n              <line x1=\"80\" y1=\"360\" x2=\"400\" y2=\"360\"><\/line>\n              <line x1=\"120\" y1=\"90\" x2=\"120\" y2=\"390\"><\/line><line x1=\"180\" y1=\"90\" x2=\"180\" y2=\"390\"><\/line>\n              <line x1=\"240\" y1=\"90\" x2=\"240\" y2=\"390\"><\/line><line x1=\"300\" y1=\"90\" x2=\"300\" y2=\"390\"><\/line>\n              <line x1=\"360\" y1=\"90\" x2=\"360\" y2=\"390\"><\/line>\n            <\/g>\n            <path d=\"M170 150 C170 110, 310 110, 310 150 C 330 200, 315 260, 300 320 C 292 355, 272 360, 265 325 C 258 295, 250 280, 240 280 C 230 280, 222 295, 215 325 C 208 360, 188 355, 180 320 C 165 260, 150 200, 170 150 Z\" fill=\"rgba(41,214,200,.05)\" stroke=\"#29D6C8\" stroke-width=\"1.6\" stroke-dasharray=\"4 4\" style=\"animation:dashFlow 1.6s linear infinite;\"><\/path>\n            <g style=\"animation:scanSweep 4s ease-in-out infinite;\">\n              <line x1=\"90\" y1=\"240\" x2=\"390\" y2=\"240\" stroke=\"#29D6C8\" stroke-width=\"1.5\"><\/line>\n              <rect x=\"90\" y=\"238\" width=\"300\" height=\"26\" fill=\"url(#scanGrad)\"><\/rect>\n            <\/g>\n            <defs><linearGradient id=\"scanGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"rgba(41,214,200,.25)\"><\/stop><stop offset=\"1\" stop-color=\"rgba(41,214,200,0)\"><\/stop><\/linearGradient><\/defs>\n            <text x=\"90\" y=\"80\" font-family=\"monospace\" font-size=\"12\" fill=\"#7C8A90\">&gt; scan_3d \u00b7 12 \u00b5m<\/text>\n            <circle cx=\"310\" cy=\"150\" r=\"4\" fill=\"#29D6C8\" style=\"animation:glowPulse 2s infinite;\"><\/circle>\n            <circle cx=\"180\" cy=\"320\" r=\"4\" fill=\"#29D6C8\" style=\"animation:glowPulse 2s .7s infinite;\"><\/circle>\n          <\/svg>\n        <\/div>\n      <\/div>\n\n      <!-- 03 CURA -->\n      <div class=\"hPanel\" style=\"width:100vw;height:100%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:60px;padding:120px 64px 80px;box-sizing:border-box;\">\n        <div style=\"max-width:580px;\">\n          <div style=\"font-family:monospace;font-size:14px;color:#29D6C8;margin-bottom:30px;\">03 \/ CURA<\/div>\n          <div class=\"charX\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(53px,5.5vw,86px);line-height:1.05;margin-bottom:26px;\">Cura Personalizzata<\/div>\n          <div style=\"font-size:19px;line-height:1.65;color:#7C8A90;max-width:480px;\">Un medico, un piano, un atelier. Ogni trattamento \u00e8 disegnato attorno alla tua biologia, ai tuoi tempi e ai tuoi obiettivi.<\/div>\n        <\/div>\n        <div style=\"flex:none;width:min(580px,44vw);display:grid;place-items:center;\">\n          <svg viewBox=\"0 0 480 480\" style=\"width:100%;height:auto;overflow:visible;\">\n            <circle cx=\"240\" cy=\"240\" r=\"60\" fill=\"none\" stroke=\"rgba(41,214,200,.8)\" stroke-width=\"1.4\"><\/circle>\n            <circle cx=\"240\" cy=\"240\" r=\"110\" fill=\"none\" stroke=\"rgba(124,138,144,.4)\" stroke-width=\"1\"><\/circle>\n            <circle cx=\"240\" cy=\"240\" r=\"160\" fill=\"none\" stroke=\"rgba(124,138,144,.28)\" stroke-width=\"1\"><\/circle>\n            <circle cx=\"240\" cy=\"240\" r=\"205\" fill=\"none\" stroke=\"rgba(124,138,144,.18)\" stroke-width=\"1\" stroke-dasharray=\"3 9\"><\/circle>\n            <circle cx=\"240\" cy=\"240\" r=\"7\" fill=\"#29D6C8\" style=\"animation:glowPulse 2.4s infinite;\"><\/circle>\n            <g style=\"transform-origin:240px 240px;animation:orbitSpin 14s linear infinite;\">\n              <circle cx=\"240\" cy=\"130\" r=\"5\" fill=\"#F2F6F7\"><\/circle>\n              <text x=\"252\" y=\"134\" font-family=\"monospace\" font-size=\"11\" fill=\"#7C8A90\">biologia<\/text>\n            <\/g>\n            <g style=\"transform-origin:240px 240px;animation:orbitSpin 20s linear reverse infinite;\">\n              <circle cx=\"240\" cy=\"80\" r=\"5\" fill=\"#B8F2EC\"><\/circle>\n              <text x=\"252\" y=\"84\" font-family=\"monospace\" font-size=\"11\" fill=\"#7C8A90\">tempi<\/text>\n            <\/g>\n            <g style=\"transform-origin:240px 240px;animation:orbitSpin 26s linear infinite;\">\n              <circle cx=\"240\" cy=\"35\" r=\"5\" fill=\"#29D6C8\"><\/circle>\n              <text x=\"252\" y=\"39\" font-family=\"monospace\" font-size=\"11\" fill=\"#7C8A90\">obiettivi<\/text>\n            <\/g>\n            <text x=\"205\" y=\"285\" font-family=\"monospace\" font-size=\"11\" fill=\"#B8F2EC\">tu \u00b7 al centro<\/text>\n          <\/svg>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- ============ ABOUT ============ -->\n  <section id=\"aboutSec\" data-screen-label=\"About\" style=\"background:#ECEEF0;padding:130px 64px 150px;\">\n    <div style=\"display:grid;grid-template-columns:420px 1fr;gap:80px;align-items:start;\">\n      <div id=\"aboutImg\" style=\"height:540px;border-radius:4px;background:url('https:\/\/images.unsplash.com\/photo-1560250097-0b93528c311a?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center 20%\/cover;filter:grayscale(1) blur(6px);transform:scale(.86);transform-origin:center;\"><\/div>\n      <div style=\"display:flex;flex-direction:column;gap:36px;padding-top:24px;\">\n        <div style=\"max-width:360px;font-size:16px;line-height:1.6;color:#4C5C63;\">Con decenni di esperienza combinata e una formazione avanzata continua, il nostro team offre cure fondate su conoscenza, precisione e una dedizione assoluta all\u2019eccellenza.<\/div>\n        <div id=\"avatarRow\" style=\"display:flex;align-items:center;\">\n          <div style=\"width:64px;height:64px;border-radius:50%;background:url('https:\/\/images.unsplash.com\/photo-1559839734-2b71ea197ec2?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;border:3px solid #ECEEF0;filter:grayscale(1);\"><\/div>\n          <div style=\"width:64px;height:64px;border-radius:50%;background:url('https:\/\/images.unsplash.com\/photo-1537368910025-700350fe46c7?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;border:3px solid #ECEEF0;margin-left:-14px;filter:grayscale(1);\"><\/div>\n          <div style=\"width:64px;height:64px;border-radius:50%;background:url('https:\/\/images.unsplash.com\/photo-1594824476967-48c8b964273f?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover;border:3px solid #ECEEF0;margin-left:-14px;filter:grayscale(1);\"><\/div>\n          <div style=\"width:64px;height:64px;border-radius:50%;background:#dfe3e6;border:3px solid #ECEEF0;margin-left:-14px;display:grid;place-items:center;font-family:'Instrument Serif',serif;font-size:19px;color:#1B2226;\">+20<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div style=\"display:grid;grid-template-columns:420px 1fr;gap:80px;margin-top:90px;\">\n      <div class=\"charX\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(40px,4.4vw,68px);line-height:1.05;color:#1B2226;\">Il nostro obiettivo \u00e8<\/div>\n      <div id=\"aboutInk\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(40px,4.4vw,68px);line-height:1.12;letter-spacing:-.005em;max-width:1050px;background:linear-gradient(to bottom,#1B2226 48%,#b9c2c6 52%);background-size:100% 220%;background-position:0% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;\">offrire cure odontoiatriche ed estetiche di livello mondiale, attraverso tecniche avanzate, trattamenti su misura e un servizio sartoriale che fa sentire ogni paziente davvero valorizzato.<\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ============ SERVICES (pinned) ============ -->\n  <section id=\"servSec\" data-screen-label=\"Services\" style=\"position:relative;height:100vh;overflow:hidden;background:#060A0E;color:#F2F6F7;\">\n    <div style=\"position:absolute;left:0;top:0;bottom:0;width:44%;overflow:hidden;\">\n      <div class=\"servImgLayer\" style=\"position:absolute;inset:0;z-index:1;background:url('https:\/\/images.unsplash.com\/photo-1612349317150-e413f6a5b16d?auto=format&#038;fit=crop&#038;w=1000&#038;q=70') center 20%\/cover;filter:grayscale(1);\"><\/div>\n      <div class=\"servImgLayer\" style=\"position:absolute;inset:0;z-index:1;visibility:hidden;background:url('https:\/\/images.unsplash.com\/photo-1629909613654-28e377c37b09?auto=format&#038;fit=crop&#038;w=1000&#038;q=70') center 25%\/cover;filter:grayscale(1);\"><\/div>\n      <div class=\"servImgLayer\" style=\"position:absolute;inset:0;z-index:1;visibility:hidden;background:url('https:\/\/images.unsplash.com\/photo-1606811971618-4486d14f3f99?auto=format&#038;fit=crop&#038;w=1000&#038;q=70') center 30%\/cover;filter:grayscale(1);\"><\/div>\n      <div class=\"servImgLayer\" style=\"position:absolute;inset:0;z-index:1;visibility:hidden;background:url('https:\/\/images.unsplash.com\/photo-1594824476967-48c8b964273f?auto=format&#038;fit=crop&#038;w=1000&#038;q=70') center 20%\/cover;filter:grayscale(1);\"><\/div>\n    <\/div>\n\n    <div id=\"servTitleWrap\" style=\"position:absolute;left:34%;bottom:6%;right:4%;height:44%;pointer-events:none;z-index:10;color:#29D6C8;text-shadow:0 4px 30px rgba(6,10,14,.85);\">\n      <div class=\"servTitle\" style=\"position:absolute;inset:0;display:flex;align-items:flex-end;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(70px,7.8vw,128px);line-height:.95;opacity:1;\">Odontoiatria<br>Estetica<\/div>\n      <div class=\"servTitle\" style=\"position:absolute;inset:0;display:flex;align-items:flex-end;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(70px,7.8vw,128px);line-height:.95;opacity:0;\">Odontoiatria<br>Restaurativa<\/div>\n      <div class=\"servTitle\" style=\"position:absolute;inset:0;display:flex;align-items:flex-end;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(70px,7.8vw,128px);line-height:.95;opacity:0;\">Igiene e<br>Prevenzione<\/div>\n      <div class=\"servTitle\" style=\"position:absolute;inset:0;display:flex;align-items:flex-end;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(70px,7.8vw,128px);line-height:.95;opacity:0;\">Estetica<br>del Viso<\/div>\n    <\/div>\n\n    <div style=\"position:absolute;right:64px;top:120px;width:400px;\">\n      <div id=\"servBlurb\" style=\"font-size:17px;line-height:1.55;font-weight:500;margin-bottom:36px;\">Trattamenti guidati dall\u2019arte che perfezionano forma, colore e simmetria per un sorriso naturalmente radioso.<\/div>\n      <div style=\"display:flex;flex-direction:column;\">\n        <div class=\"servItem\" style=\"display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid rgba(242,246,247,.14);font-size:16px;\">Faccette in Ceramica <span style=\"color:#29D6C8;\">\u2197<\/span><\/div>\n        <div class=\"servItem\" style=\"display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid rgba(242,246,247,.14);font-size:16px;\">Digital Smile Design <span style=\"color:#29D6C8;\">\u2197<\/span><\/div>\n        <div class=\"servItem\" style=\"display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid rgba(242,246,247,.14);font-size:16px;\">Sbiancamento Dentale <span style=\"color:#29D6C8;\">\u2197<\/span><\/div>\n        <div class=\"servItem\" style=\"display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid rgba(242,246,247,.14);border-bottom:1px solid rgba(242,246,247,.14);font-size:16px;\">Rimodellamento dello Smalto <span style=\"color:#29D6C8;\">\u2197<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <div style=\"position:absolute;left:36px;bottom:40px;font-size:15px;line-height:2;z-index:3;\">\n      <div style=\"color:#4C5C63;margin-bottom:8px;\">Servizi:<\/div>\n      <div class=\"servNav\" style=\"color:#F2F6F7;font-weight:600;\">Odontoiatria Estetica<\/div>\n      <div class=\"servNav\" style=\"color:#4C5C63;\">Odontoiatria Restaurativa<\/div>\n      <div class=\"servNav\" style=\"color:#4C5C63;\">Igiene e Prevenzione<\/div>\n      <div class=\"servNav\" style=\"color:#4C5C63;\">Estetica del Viso<\/div>\n    <\/div>\n\n    <button style=\"position:absolute;right:64px;bottom:48px;cursor:pointer;border:none;background:#ECEEF0;color:#1B2226;border-radius:40px;padding:16px 30px;font:600 15px 'Instrument Sans',sans-serif;display:flex;align-items:center;gap:10px;\" data-hv=\"6\">Scopri di pi\u00f9 <span style=\"color:#159A90;\">\uff0b<\/span><\/button>\n  <\/section>\n\n  <!-- ============ TECHNOLOGY (pinned) ============ -->\n  <section id=\"techSec\" data-screen-label=\"Technology\" style=\"position:relative;height:100vh;overflow:hidden;background:#ECEEF0;color:#1B2226;\">\n    <div style=\"position:absolute;left:64px;top:110px;bottom:90px;width:44%;display:flex;flex-direction:column;justify-content:center;gap:36px;\">\n      <div style=\"display:flex;align-items:baseline;gap:10px;\">\n        <div id=\"techCounter\" style=\"font-family:'Instrument Serif',serif;font-size:64px;line-height:1;\">01<\/div>\n        <div style=\"font-size:15px;color:#7C8A90;\">\/ 06<\/div>\n      <\/div>\n      <div id=\"techImg\" style=\"height:56%;max-height:460px;width:min(460px,100%);background:url('https:\/\/images.unsplash.com\/photo-1588776814546-1ffcf47267a5?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center\/cover #060A0E;border-radius:4px;box-shadow:0 30px 60px rgba(6,10,14,.25);\"><\/div>\n    <\/div>\n\n    <div style=\"position:absolute;right:64px;left:52%;top:120px;\">\n      <div style=\"font-size:14px;color:#7C8A90;padding-bottom:14px;border-bottom:1px solid rgba(27,34,38,.15);\">Tecnologia<\/div>\n      <div style=\"display:flex;flex-direction:column;\">\n        <div class=\"techItem\" style=\"display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid rgba(27,34,38,.12);\">\n          <div class=\"techName\" style=\"font-family:'Instrument Serif',serif;font-size:44px;line-height:1;color:#1B2226;\">Scansione Intraorale 3D<\/div>\n          <div class=\"techMore\" style=\"font-size:14px;color:#1B2226;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;opacity:1;cursor:pointer;\">Scopri di pi\u00f9<\/div>\n        <\/div>\n        <div class=\"techItem\" style=\"display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid rgba(27,34,38,.12);\">\n          <div class=\"techName\" style=\"font-family:'Instrument Serif',serif;font-size:32px;line-height:1;color:#adb8bd;\">Restauri CAD\/CAM<\/div>\n          <div class=\"techMore\" style=\"font-size:14px;color:#7C8A90;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;opacity:.35;cursor:pointer;\">Scopri di pi\u00f9<\/div>\n        <\/div>\n        <div class=\"techItem\" style=\"display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid rgba(27,34,38,.12);\">\n          <div class=\"techName\" style=\"font-family:'Instrument Serif',serif;font-size:32px;line-height:1;color:#adb8bd;\">TAC Cone-Beam 3D<\/div>\n          <div class=\"techMore\" style=\"font-size:14px;color:#7C8A90;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;opacity:.35;cursor:pointer;\">Scopri di pi\u00f9<\/div>\n        <\/div>\n        <div class=\"techItem\" style=\"display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid rgba(27,34,38,.12);\">\n          <div class=\"techName\" style=\"font-family:'Instrument Serif',serif;font-size:32px;line-height:1;color:#adb8bd;\">Laser per Tessuti Molli<\/div>\n          <div class=\"techMore\" style=\"font-size:14px;color:#7C8A90;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;opacity:.35;cursor:pointer;\">Scopri di pi\u00f9<\/div>\n        <\/div>\n        <div class=\"techItem\" style=\"display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid rgba(27,34,38,.12);\">\n          <div class=\"techName\" style=\"font-family:'Instrument Serif',serif;font-size:32px;line-height:1;color:#adb8bd;\">Digital Smile Design<\/div>\n          <div class=\"techMore\" style=\"font-size:14px;color:#7C8A90;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;opacity:.35;cursor:pointer;\">Scopri di pi\u00f9<\/div>\n        <\/div>\n        <div class=\"techItem\" style=\"display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;\">\n          <div class=\"techName\" style=\"font-family:'Instrument Serif',serif;font-size:32px;line-height:1;color:#adb8bd;\">Laboratorio di Fresatura Interno<\/div>\n          <div class=\"techMore\" style=\"font-size:14px;color:#7C8A90;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;opacity:.35;cursor:pointer;\">Scopri di pi\u00f9<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ============ TEAM \u2014 horizontal scroll ============ -->\n  <section id=\"teamSec\" data-screen-label=\"Team\" style=\"position:relative;height:100vh;overflow:hidden;background:#060A0E;color:#F2F6F7;\">\n    <div aria-hidden=\"true\" style=\"position:absolute;inset:0;z-index:0;pointer-events:none;animation:glowDrift 22s ease-in-out infinite;background:radial-gradient(ellipse 65% 50% at 50% 55%, rgba(41,214,200,.09), transparent 65%), radial-gradient(ellipse 35% 30% at 85% 20%, rgba(41,214,200,.05), transparent 70%);\"><\/div>\n    <div aria-hidden=\"true\" style=\"position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;animation:starTwinkle 11s ease-in-out infinite;background-image:radial-gradient(1.5px 1.5px at 16% 30%, rgba(242,246,247,.32), transparent 100%),radial-gradient(1px 1px at 40% 12%, rgba(242,246,247,.22), transparent 100%),radial-gradient(1.5px 1.5px at 64% 76%, rgba(41,214,200,.26), transparent 100%),radial-gradient(1px 1px at 80% 44%, rgba(242,246,247,.24), transparent 100%),radial-gradient(1.5px 1.5px at 92% 66%, rgba(242,246,247,.26), transparent 100%),radial-gradient(1px 1px at 28% 84%, rgba(41,214,200,.20), transparent 100%),radial-gradient(1px 1px at 8% 56%, rgba(242,246,247,.20), transparent 100%),radial-gradient(1.5px 1.5px at 52% 40%, rgba(41,214,200,.16), transparent 100%);\"><\/div>\n    <!-- giant headline layer, slides slower (parallax) behind the cards -->\n    <div id=\"teamHeadline\" style=\"position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;white-space:nowrap;z-index:1;padding-left:64px;font-family:'Instrument Serif',serif;font-size:clamp(160px,26vw,420px);line-height:.9;color:#F2F6F7;will-change:transform;pointer-events:none;\">Un Team di <span style=\"font-style:italic;color:#29D6C8;text-shadow:0 0 34px rgba(41,214,200,.4);margin-left:6vw;\">Esperti<\/span><\/div>\n\n    <div style=\"position:absolute;right:64px;top:96px;z-index:5;display:flex;align-items:center;gap:14px;font-family:monospace;font-size:13px;color:#7C8A90;\">\n      <span style=\"color:#29D6C8;\">IL TEAM<\/span><span style=\"opacity:.5;\">\u00b7 scorri \u2192<\/span>\n    <\/div>\n\n    <div id=\"teamTrack\" style=\"position:relative;z-index:2;display:flex;align-items:center;height:100%;width:max-content;gap:4vw;padding:0 64px;will-change:transform;\">\n      <!-- spacer so the headline breathes before cards arrive -->\n      <div style=\"flex:none;width:52vw;\"><\/div>\n\n      <div class=\"teamCard\" style=\"flex:none;width:min(560px,44vw);\">\n        <div style=\"position:relative;height:56vh;border-radius:4px;overflow:hidden;filter:grayscale(1);background:url('https:\/\/images.unsplash.com\/photo-1559839734-2b71ea197ec2?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center 15%\/cover;\">\n          <div style=\"position:absolute;inset:0;background:linear-gradient(to top, rgba(6,10,14,.78), transparent 45%);\"><\/div>\n          <div style=\"position:absolute;left:26px;right:26px;bottom:22px;display:flex;align-items:baseline;justify-content:space-between;gap:18px;\">\n            <div style=\"font-family:'Instrument Serif',serif;font-size:28px;\">Dr. Elena Marchetti<\/div>\n            <div style=\"font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#29D6C8;white-space:nowrap;\">Fondatrice \u00b7 Protesista<\/div>\n          <\/div>\n        <\/div>\n        <div style=\"margin-top:18px;font-size:15px;line-height:1.6;color:#7C8A90;max-width:480px;\">Nota per precisione, empatia e senso artistico. Crea sorrisi naturali e impeccabili con faccette avanzate, impianti e riabilitazioni complete.<\/div>\n      <\/div>\n\n      <div class=\"teamCard\" style=\"flex:none;width:min(560px,44vw);margin-top:-8vh;\">\n        <div style=\"position:relative;height:56vh;border-radius:4px;overflow:hidden;filter:grayscale(1);background:url('https:\/\/images.unsplash.com\/photo-1537368910025-700350fe46c7?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center 15%\/cover;\">\n          <div style=\"position:absolute;inset:0;background:linear-gradient(to top, rgba(6,10,14,.78), transparent 45%);\"><\/div>\n          <div style=\"position:absolute;left:26px;right:26px;bottom:22px;display:flex;align-items:baseline;justify-content:space-between;gap:18px;\">\n            <div style=\"font-family:'Instrument Serif',serif;font-size:28px;\">Dr. Marcus Hale<\/div>\n            <div style=\"font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#29D6C8;white-space:nowrap;\">Chirurgo Implantologo<\/div>\n          <\/div>\n        <\/div>\n        <div style=\"margin-top:18px;font-size:15px;line-height:1.6;color:#7C8A90;max-width:480px;\">Decenni di esperienza in restauri complessi e trasformazioni del sorriso. Unisce maestria tecnica e visione estetica nelle ricostruzioni ad arcata completa.<\/div>\n      <\/div>\n\n      <div class=\"teamCard\" style=\"flex:none;width:min(560px,44vw);margin-top:8vh;\">\n        <div style=\"position:relative;height:56vh;border-radius:4px;overflow:hidden;filter:grayscale(1);background:url('https:\/\/images.unsplash.com\/photo-1594824476967-48c8b964273f?auto=format&#038;fit=crop&#038;w=900&#038;q=70') center 15%\/cover;\">\n          <div style=\"position:absolute;inset:0;background:linear-gradient(to top, rgba(6,10,14,.78), transparent 45%);\"><\/div>\n          <div style=\"position:absolute;left:26px;right:26px;bottom:22px;display:flex;align-items:baseline;justify-content:space-between;gap:18px;\">\n            <div style=\"font-family:'Instrument Serif',serif;font-size:28px;\">Dr. Sofia Lindqvist<\/div>\n            <div style=\"font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#29D6C8;white-space:nowrap;\">Odontoiatra Estetica<\/div>\n          <\/div>\n        <\/div>\n        <div style=\"margin-top:18px;font-size:15px;line-height:1.6;color:#7C8A90;max-width:480px;\">Esperta rinomata in odontoiatria restaurativa e cosmetica avanzata. Fonde innovazione e arte per creare sorrisi funzionali e naturalmente belli.<\/div>\n      <\/div>\n\n      <!-- closing panel -->\n      <div style=\"flex:none;width:36vw;display:grid;place-items:center;\">\n        <button style=\"cursor:pointer;border:none;background:#ECEEF0;color:#1B2226;border-radius:40px;padding:17px 32px;font:600 15px 'Instrument Sans',sans-serif;display:flex;align-items:center;gap:10px;\" data-hv=\"7\">Conosci il Team <span style=\"color:#159A90;\">\uff0b<\/span><\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ============ WHY CHOOSE US ============ -->\n  <section id=\"whySec\" data-screen-label=\"Why Choose Us\" style=\"position:relative;background:#060A0E;color:#F2F6F7;padding:170px 0 60px;overflow:hidden;\">\n    <div style=\"position:absolute;left:-32vw;top:12%;width:64vw;height:64vw;border-radius:50%;border:1px solid rgba(124,138,144,.28);\"><\/div>\n    <div style=\"position:absolute;right:-32vw;top:12%;width:64vw;height:64vw;border-radius:50%;border:1px solid rgba(124,138,144,.28);\"><\/div>\n\n    <div style=\"position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding:0 40px;\">\n      <div style=\"font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#B8F2EC;\">Perch\u00e9 sceglierci?<\/div>\n      <div id=\"whyInk\" style=\"display:inline-block;font-family:'Instrument Serif',serif;font-size:clamp(64px,8.4vw,150px);line-height:1.0;letter-spacing:-.01em;background:linear-gradient(to bottom,#F2F6F7 48%,#39464d 52%);background-size:100% 220%;background-position:0% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;\">Siamo <span style=\"font-style:italic;-webkit-text-fill-color:#29D6C8;text-shadow:0 0 24px rgba(41,214,200,.45);\">qui<\/span> per <span style=\"font-style:italic;-webkit-text-fill-color:#29D6C8;text-shadow:0 0 24px rgba(41,214,200,.45);\">Esaltare<\/span><br>Il Tuo Sorriso<\/div>\n    <\/div>\n\n    <div id=\"statsWrap\" style=\"position:relative;height:760px;margin-top:40px;\">\n      <div class=\"bubble\" style=\"position:absolute;left:14%;bottom:150px;width:190px;height:190px;border-radius:50%;background:#39464d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;\">\n        <div style=\"font-family:'Instrument Serif',serif;font-size:52px;color:#1B2226;\">2<\/div>\n        <div style=\"font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1B2226;text-align:center;\">Sedi<\/div>\n      <\/div>\n      <div class=\"bubble\" style=\"position:absolute;left:24%;bottom:330px;width:250px;height:250px;border-radius:50%;background:#0E1519;border:1px solid rgba(41,214,200,.4);box-shadow:0 0 34px rgba(41,214,200,.18), inset 0 0 24px rgba(41,214,200,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;\">\n        <div style=\"font-family:'Instrument Serif',serif;font-size:66px;color:#B8F2EC;text-shadow:0 0 18px rgba(41,214,200,.5);\">21<\/div>\n        <div style=\"font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7C8A90;text-align:center;\">Anni di<br>Attivit\u00e0<\/div>\n      <\/div>\n      <div class=\"bubble\" style=\"position:absolute;left:35%;bottom:70px;width:330px;height:330px;border-radius:50%;background:#c9d0d3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;\">\n        <div style=\"font-family:'Instrument Serif',serif;font-size:96px;color:#1B2226;\">18K+<\/div>\n        <div style=\"font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4C5C63;text-align:center;\">Pazienti<br>Soddisfatti<\/div>\n      <\/div>\n      <div class=\"bubble\" style=\"position:absolute;left:49%;bottom:350px;width:240px;height:240px;border-radius:50%;background:#ECEEF0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;\">\n        <div style=\"font-family:'Instrument Serif',serif;font-size:64px;color:#1B2226;\">12k<\/div>\n        <div style=\"font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4C5C63;text-align:center;\">Faccette<br>Applicate<\/div>\n      <\/div>\n      <div class=\"bubble\" style=\"position:absolute;left:58%;bottom:110px;width:320px;height:320px;border-radius:50%;background:#aeb9be;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;\">\n        <div style=\"font-family:'Instrument Serif',serif;font-size:92px;color:#1B2226;\">24K<\/div>\n        <div style=\"font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#39464d;text-align:center;\">Corone<br>Applicate<\/div>\n      <\/div>\n      <div class=\"bubble\" style=\"position:absolute;left:73%;bottom:300px;width:230px;height:230px;border-radius:50%;background:#39464d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;\">\n        <div style=\"font-family:'Instrument Serif',serif;font-size:58px;color:#ECEEF0;\">3k<\/div>\n        <div style=\"font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c9d0d3;text-align:center;\">Ore di Formazione<br>Continua<\/div>\n      <\/div>\n      <div style=\"position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:120%;height:900px;border-radius:50%;border:1px solid rgba(242,246,247,.22);pointer-events:none;\"><\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ============ FOOTER ============ -->\n  <footer id=\"footer\" data-screen-label=\"Footer\" style=\"background:#060A0E;color:#F2F6F7;padding:150px 64px 40px;border-top:1px solid rgba(242,246,247,.08);\">\n    <div class=\"charX\" style=\"font-family:'Instrument Serif',serif;font-size:clamp(44px,5.2vw,84px);line-height:1.05;max-width:900px;\">Il tuo sorriso perfetto, <span style=\"font-style:italic;color:#29D6C8;text-shadow:0 0 24px rgba(41,214,200,.45);\">portato alla luce<\/span><\/div>\n\n    <div style=\"display:grid;grid-template-columns:1fr 1fr 1.2fr 1.4fr;gap:48px;margin-top:90px;\">\n      <div style=\"display:flex;flex-direction:column;gap:14px;font-size:15px;\">\n        <div style=\"font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#4C5C63;margin-bottom:8px;\">Servizi<\/div>\n        <a href=\"#servSec\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Odontoiatria Estetica<\/a>\n        <a href=\"#servSec\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Odontoiatria Restaurativa<\/a>\n        <a href=\"#servSec\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Igiene e Prevenzione<\/a>\n        <a href=\"#servSec\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Estetica del Viso<\/a>\n      <\/div>\n      <div style=\"display:flex;flex-direction:column;gap:14px;font-size:15px;\">\n        <div style=\"font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#4C5C63;margin-bottom:8px;\">La Clinica<\/div>\n        <a href=\"#aboutSec\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Chi Siamo<\/a>\n        <a href=\"#teamSec\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Il Team<\/a>\n        <a href=\"#techSec\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Tecnologia<\/a>\n        <a href=\"#footer\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"8\">Laboratorio<\/a>\n      <\/div>\n      <div style=\"display:flex;flex-direction:column;gap:22px;font-size:15px;line-height:1.6;\">\n        <div style=\"font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#4C5C63;margin-bottom:0;\">Sedi<\/div>\n        <div><div style=\"font-weight:600;\">Milano<\/div><div style=\"color:#7C8A90;\">Via Montenapoleone 8<br>Lun\u2013Ven \u00b7 9:00\u201318:00<\/div><\/div>\n        <div><div style=\"font-weight:600;\">Roma<\/div><div style=\"color:#7C8A90;\">Via del Corso 12<br>Lun\u2013Sab \u00b7 9:00\u201319:00<\/div><\/div>\n        <div style=\"color:#B8F2EC;\">+39 02 5550 0144<\/div>\n      <\/div>\n\n      <!-- inline booking form -->\n      <form data-book-form style=\"background:#0E1519;border:1px solid rgba(41,214,200,.16);border-radius:4px;padding:30px 28px;display:flex;flex-direction:column;gap:16px;\">\n        <div class=\"form-live\" style=\"display:flex;flex-direction:column;gap:16px;\">\n          <div style=\"font-family:'Instrument Serif',serif;font-size:26px;\">Prenota una chiamata<\/div>\n          <div style=\"display:flex;gap:10px;\">\n            <button type=\"button\" data-locpill class=\"loc-on\" style=\"cursor:pointer;border-radius:40px;padding:10px 18px;font:500 13px 'Instrument Sans',sans-serif;background:#29D6C8;color:#060A0E;border:1px solid #29D6C8;\">Milano<\/button>\n            <button type=\"button\" data-locpill style=\"cursor:pointer;border-radius:40px;padding:10px 18px;font:500 13px 'Instrument Sans',sans-serif;background:transparent;color:#7C8A90;border:1px solid rgba(124,138,144,.4);\">Roma<\/button>\n          <\/div>\n          <input placeholder=\"Il tuo nome\" style=\"background:transparent;border:none;border-bottom:1px solid rgba(242,246,247,.18);padding:12px 2px;color:#F2F6F7;font:15px 'Instrument Sans',sans-serif;outline:none;\" data-hv=\"11\">\n          <input placeholder=\"Numero di telefono\" style=\"background:transparent;border:none;border-bottom:1px solid rgba(242,246,247,.18);padding:12px 2px;color:#F2F6F7;font:15px 'Instrument Sans',sans-serif;outline:none;\" data-hv=\"11\">\n          <div style=\"display:flex;align-items:flex-end;gap:16px;\">\n            <input placeholder=\"Messaggio (facoltativo)\" style=\"flex:1;background:transparent;border:none;border-bottom:1px solid rgba(242,246,247,.18);padding:12px 2px;color:#F2F6F7;font:15px 'Instrument Sans',sans-serif;outline:none;\" data-hv=\"11\">\n            <button type=\"submit\" style=\"cursor:pointer;width:58px;height:58px;border-radius:50%;border:none;background:#29D6C8;color:#060A0E;font-size:22px;box-shadow:0 0 22px rgba(41,214,200,.4);\" data-hv=\"5\">\u2192<\/button>\n          <\/div>\n        <\/div>\n        <div class=\"form-thanks\" style=\"display:none;flex-direction:column;gap:12px;align-items:flex-start;min-height:200px;justify-content:center;\">\n          <div style=\"width:34px;height:34px;border-radius:50%;border:1.5px solid #29D6C8;display:grid;place-items:center;box-shadow:0 0 18px rgba(41,214,200,.45);\"><div style=\"width:9px;height:9px;border-radius:50%;background:#29D6C8;\"><\/div><\/div>\n          <div style=\"font-family:'Instrument Serif',serif;font-size:26px;\">Grazie<\/div>\n          <div style=\"font-size:14px;line-height:1.6;color:#7C8A90;\">Abbiamo ricevuto la tua richiesta. La nostra coordinatrice ti richiamer\u00e0 entro un giorno lavorativo.<\/div>\n        <\/div>\n      <\/form>\n    <\/div>\n\n    <div style=\"display:flex;justify-content:space-between;align-items:center;margin-top:100px;padding-top:24px;border-top:1px solid rgba(242,246,247,.08);font-size:13px;color:#4C5C63;\">\n      <div>\u00a9 2026 Lumen Dental Atelier. Tutti i diritti riservati.<\/div>\n      <div>Privacy \u00b7 Accessibilit\u00e0 \u00b7 Sito di i-image<\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- ============ BOOK A CALL MODAL \u2014 full screen ============ -->\n  <div id=\"modalOverlay\" style=\"position:fixed;inset:0;z-index:100;display:none;background:rgba(6,10,14,.5);\">\n    <div id=\"modalPanel\" style=\"position:absolute;inset:0;background:#0E1519;color:#F2F6F7;overflow:hidden;display:flex;flex-direction:column;\">\n\n      <!-- close -->\n      <div style=\"position:absolute;top:28px;right:36px;z-index:5;display:flex;align-items:center;gap:16px;\">\n        <span style=\"font-size:15px;font-weight:500;color:#7C8A90;\">Chiudi<\/span>\n        <button data-close-modal style=\"cursor:pointer;background:rgba(242,246,247,.06);border:1px solid rgba(124,138,144,.4);color:#F2F6F7;border-radius:50%;width:52px;height:52px;font-size:17px;\" data-hv=\"9\">\u2715<\/button>\n      <\/div>\n\n      <!-- top: contact info left \u00b7 form right -->\n      <div style=\"flex:1;display:grid;grid-template-columns:1fr 1.3fr;gap:60px;padding:clamp(80px,12vh,110px) 64px 24px;box-sizing:border-box;min-height:0;overflow-y:auto;\">\n\n        <!-- contact \/ address \/ socials -->\n        <div style=\"display:flex;flex-direction:column;gap:34px;max-width:380px;\">\n          <div style=\"display:flex;align-items:center;gap:12px;\">\n            <div style=\"width:30px;height:30px;border-radius:50%;border:1.5px solid #29D6C8;display:grid;place-items:center;box-shadow:0 0 18px rgba(41,214,200,.45);\"><div style=\"width:8px;height:8px;border-radius:50%;background:#29D6C8;\"><\/div><\/div>\n            <div style=\"font-weight:600;line-height:1.05;font-size:15px;\">Lumen<br><span style=\"font-weight:400;opacity:.75;\">Dental Atelier<\/span><\/div>\n          <\/div>\n          <div style=\"display:flex;flex-direction:column;gap:20px;font-size:15px;line-height:1.6;\">\n            <div style=\"font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#4C5C63;\">Sedi e Contatti<\/div>\n            <div><div style=\"font-weight:600;\">Milano \u00b7 Brera<\/div><div style=\"color:#7C8A90;\">Via Montenapoleone 8, 20121<br>Lun\u2013Ven \u00b7 9:00\u201318:00<\/div><a href=\"tel:+390255500144\" style=\"color:#B8F2EC;text-decoration:none;\" data-hv=\"4\">+39 02 5550 0144<\/a><\/div>\n            <div><div style=\"font-weight:600;\">Roma \u00b7 Centro<\/div><div style=\"color:#7C8A90;\">Via del Corso 12, 00186<br>Lun\u2013Sab \u00b7 9:00\u201319:00<\/div><a href=\"tel:+390655500268\" style=\"color:#B8F2EC;text-decoration:none;\" data-hv=\"4\">+39 06 5550 0268<\/a><\/div>\n            <a href=\"mailto:ciao@lumenatelier.it\" style=\"color:#F2F6F7;text-decoration:none;\" data-hv=\"4\">ciao@lumenatelier.it<\/a>\n          <\/div>\n          <div style=\"display:flex;gap:12px;\">\n            <a href=\"#\" style=\"display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(124,138,144,.4);color:#F2F6F7;text-decoration:none;\" data-hv=\"10\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"><\/rect><circle cx=\"12\" cy=\"12\" r=\"4.5\"><\/circle><circle cx=\"17.6\" cy=\"6.4\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"><\/circle><\/svg><\/a>\n            <a href=\"#\" style=\"display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(124,138,144,.4);color:#F2F6F7;text-decoration:none;\" data-hv=\"10\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13.5 21v-7h2.6l.4-3h-3V9.1c0-.9.3-1.5 1.6-1.5H16.6V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.8 1.4-3.8 3.9V11H7.9v3h2.6v7h3z\"><\/path><\/svg><\/a>\n            <a href=\"#\" style=\"display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(124,138,144,.4);color:#F2F6F7;text-decoration:none;\" data-hv=\"10\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.1 13.6c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .3-3.3-.7-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.5.5c-.2.2-.3.4-.1.7.2.3.9 1.5 2 2.4 1.4 1.2 2.5 1.6 2.9 1.7.3.2.5.1.7-.1l.9-1c.2-.3.4-.2.7-.1l2.1 1c.3.1.5.2.6.4 0 .1 0 .7-.2 1.3z\"><\/path><\/svg><\/a>\n          <\/div>\n        <\/div>\n\n        <!-- form -->\n        <div style=\"max-width:640px;padding-top:8px;\">\n          <div style=\"font-size:19px;font-weight:600;line-height:1.45;margin-bottom:44px;max-width:420px;\">Pronto a prenotare o hai solo qualche domanda? Siamo qui per te.<\/div>\n          <form data-book-form>\n            <div class=\"form-live\" style=\"display:flex;flex-direction:column;gap:30px;\">\n              <div style=\"display:flex;gap:10px;\">\n                <button type=\"button\" data-locpill class=\"loc-on\" style=\"cursor:pointer;border-radius:40px;padding:12px 22px;font:500 14px 'Instrument Sans',sans-serif;background:#29D6C8;color:#060A0E;border:1px solid #29D6C8;\">Milano<\/button>\n                <button type=\"button\" data-locpill style=\"cursor:pointer;border-radius:40px;padding:12px 22px;font:500 14px 'Instrument Sans',sans-serif;background:transparent;color:#7C8A90;border:1px solid rgba(124,138,144,.4);\">Roma<\/button>\n              <\/div>\n              <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:20px;\">\n                <input placeholder=\"Il tuo nome\" style=\"background:transparent;border:1px solid rgba(124,138,144,.35);border-radius:40px;padding:20px 26px;color:#F2F6F7;font:16px 'Instrument Sans',sans-serif;outline:none;box-sizing:border-box;width:100%;\" data-hv=\"12\">\n                <input placeholder=\"Numero di telefono\" style=\"background:transparent;border:1px solid rgba(124,138,144,.35);border-radius:40px;padding:20px 26px;color:#F2F6F7;font:16px 'Instrument Sans',sans-serif;outline:none;box-sizing:border-box;width:100%;\" data-hv=\"12\">\n              <\/div>\n              <div style=\"display:flex;align-items:center;gap:20px;\">\n                <input placeholder=\"Messaggio\" style=\"flex:1;background:transparent;border:1px solid rgba(124,138,144,.35);border-radius:40px;padding:26px;color:#F2F6F7;font:16px 'Instrument Sans',sans-serif;outline:none;box-sizing:border-box;\" data-hv=\"12\">\n                <button type=\"submit\" style=\"cursor:pointer;flex:none;width:78px;height:78px;border-radius:50%;border:none;background:#29D6C8;color:#060A0E;font-size:26px;box-shadow:0 0 28px rgba(41,214,200,.45);\" data-hv=\"5\">\u2192<\/button>\n              <\/div>\n            <\/div>\n            <div class=\"form-thanks\" style=\"display:none;flex-direction:column;gap:14px;align-items:flex-start;min-height:260px;justify-content:center;\">\n              <div style=\"width:44px;height:44px;border-radius:50%;border:1.5px solid #29D6C8;display:grid;place-items:center;box-shadow:0 0 22px rgba(41,214,200,.5);\"><div style=\"width:11px;height:11px;border-radius:50%;background:#29D6C8;\"><\/div><\/div>\n              <div style=\"font-family:'Instrument Serif',serif;font-size:32px;\">Grazie<\/div>\n              <div style=\"font-size:15px;line-height:1.6;color:#7C8A90;max-width:380px;\">Abbiamo ricevuto la tua richiesta. La nostra coordinatrice ti richiamer\u00e0 entro un giorno lavorativo per trovare l\u2019orario perfetto.<\/div>\n            <\/div>\n          <\/form>\n        <\/div>\n      <\/div>\n\n      <!-- giant headline -->\n      <div id=\"modalTitle\" style=\"flex:none;padding:0 40px 8px;font-family:'Instrument Serif',serif;font-size:clamp(60px,min(12.5vw,16vh),220px);line-height:.88;white-space:nowrap;letter-spacing:-.01em;background:linear-gradient(105deg,#F2F6F7 30%,#29D6C8 55%,#39464d 80%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;pointer-events:none;\">Prenota una chiamata<\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n\n<\/div>\n<script>\n\n\/* ================= LUMEN \u2014 WordPress runner ================= *\/\nwindow.LUMEN_HERO_SRC = window.LUMEN_HERO_SRC || 'https:\/\/i-imageproject.it\/wp-content\/uploads\/2026\/07\/hero.mp4';\n\nclass DCLogic {\n  constructor(props) { this.props = props || {}; }\n  setState() {} forceUpdate() {}\n}\n\n\nclass Component extends DCLogic {\n\n  componentDidMount() {\n    this._killed = false;\n    this._raf = [];\n    this.boot();\n  }\n\n  componentWillUnmount() {\n    this._killed = true;\n    this._booted = false; \/\/ allow re-boot if the runtime remounts this instance\n    (this._raf || []).forEach(id => cancelAnimationFrame(id));\n    this._raf = [];\n    if (this._healTimer) { clearInterval(this._healTimer); this._healTimer = null; }\n    \/\/ DEFER teardown one tick: a transient unmount\/remount must not kill the live setup\n    setTimeout(() => {\n      if (!this._killed) return; \/\/ remounted \u2014 keep everything alive\n      if (this._tickerFn && window.gsap) { try { window.gsap.ticker.remove(this._tickerFn); } catch (e) {} this._tickerFn = null; }\n      if (this._ctx) {\n        \/\/ only revert if OUR ctx is still the live one; never touch a newer boot's ctx\n        if (window.__lumenCtx === this._ctx) {\n          try { this._ctx.revert(); } catch (e) { console.warn('ctx.revert failed', e); }\n          window.__lumenCtx = null;\n        }\n        this._ctx = null;\n      }\n      if (this._lenis) {\n        if (window.__lumenLenis === this._lenis) {\n          try { this._lenis.destroy(); } catch (e) {}\n          window.__lumenLenis = null;\n        }\n        this._lenis = null;\n      }\n    }, 0);\n  }\n\n  waitFor(cond, timeout) {\n    return new Promise((res) => {\n      const t0 = Date.now();\n      const tick = () => {\n        if (this._killed) return;\n        if (cond()) return res(true);\n        if (Date.now() - t0 > (timeout || 8000)) return res(false);\n        setTimeout(tick, 60);\n      };\n      tick();\n    });\n  }\n\n  async boot() {\n    const ok = await this.waitFor(() => window.gsap && window.ScrollTrigger);\n    if (!ok || this._killed) return;\n    if (this._booted) return; \/\/ guard double boot on same instance\n    this._booted = true;\n    const gsap = window.gsap;\n    gsap.registerPlugin(window.ScrollTrigger);\n\n    \/\/ If a previous (dead or duplicate) instance left animations behind, revert them fully\n    if (window.__lumenCtx) { try { window.__lumenCtx.revert(); } catch (e) {} window.__lumenCtx = null; }\n    if (window.__lumenLenis) { try { window.__lumenLenis.destroy(); } catch (e) {} window.__lumenLenis = null; }\n    \/\/ unwrap any orphaned pin-spacers left by a dead instance\n    if (window.ScrollTrigger.getAll().length === 0) {\n      document.querySelectorAll('.pin-spacer').forEach(sp => {\n        const child = sp.firstElementChild;\n        if (child) {\n          sp.parentNode.insertBefore(child, sp);\n          gsap.set(child, { clearProps: 'transform,top,left,width,height,position,margin,padding,maxWidth,maxHeight,boxSizing' });\n        }\n        sp.remove();\n      });\n    }\n\n    \/\/ ---- Lenis smooth scroll ----\n    if (this._tickerFn && window.gsap) { try { window.gsap.ticker.remove(this._tickerFn); } catch (e) {} this._tickerFn = null; }\n    const isTouch = window.matchMedia('(hover: none), (pointer: coarse)').matches;\n    try {\n      if (isTouch) {\n        \/\/ touch devices: native scroll + normalization keeps pinning jitter-free\n        window.ScrollTrigger.normalizeScroll(true);\n      } else if (window.Lenis) {\n        this._lenis = new window.Lenis({ duration: 1.15, easing: t => 1 - Math.pow(1 - t, 3), smoothWheel: true, wheelMultiplier: 1 });\n        window.__lumenLenis = this._lenis;\n        this._lenis.on('scroll', window.ScrollTrigger.update);\n        this._tickerFn = (time) => { if (this._lenis) this._lenis.raf(time * 1000); }; gsap.ticker.add(this._tickerFn);\n        gsap.ticker.lagSmoothing(0);\n      }\n    } catch (e) { \/* smooth scroll optional *\/ }\n\n    \/\/ scope every tween\/trigger to this instance so unmount reverts only ours\n    this._ctx = gsap.context(() => {\n      this.setupUI();\n      this.setupHero(gsap);\n      this.setupCards(gsap);\n      this.setupAbout(gsap);\n      this.setupServices(gsap);\n      this.setupTech(gsap);\n      this.setupTeam(gsap);\n      this.setupWhy(gsap);\n      this.setupCharScrub(gsap);\n    }, document.getElementById('page'));\n    window.__lumenCtx = this._ctx;\n    if (this.props.particles ?? true) this.setupParticles();\n\n    \/\/ ---- watchdog: if triggers were killed by a stray revert, re-boot ----\n    this._healCount = this._healCount || 0;\n    if (this._healTimer) clearInterval(this._healTimer);\n    this._healTimer = setInterval(() => {\n      if (this._killed) { clearInterval(this._healTimer); this._healTimer = null; return; }\n      if (!window.ScrollTrigger) return;\n      if (window.ScrollTrigger.getAll().length > 0) return;\n      if (this._healCount >= 3) { clearInterval(this._healTimer); this._healTimer = null; return; }\n      this._healCount++;\n      console.warn('Lumen: scroll triggers lost \u2014 re-booting animations (attempt ' + this._healCount + ')');\n      this._booted = false;\n      this._ctx = null; \/\/ dead ctx; boot() reverts window.__lumenCtx and rebuilds\n      this.boot();\n    }, 900);\n  }\n\n  \/\/ ============ UI: nav, mega menu, modal, forms ============\n  setupUI() {\n    const nav = document.getElementById('nav');\n    const mega = document.getElementById('megaMenu');\n    const overlay = document.getElementById('modalOverlay');\n    const panel = document.getElementById('modalPanel');\n    const gsap = window.gsap;\n\n    \/\/ nav solid on scroll \u2014 dark text also whenever the light mega menu is open\n    const applyNavTone = () => {\n      const solid = window.scrollY > window.innerHeight * 0.7 || mega.style.display === 'block';\n      nav.style.background = (window.scrollY > window.innerHeight * 0.7) ? '#ECEEF0' : 'transparent';\n      nav.style.setProperty('--nc', solid ? '#1B2226' : '#F2F6F7');\n      nav.style.boxShadow = solid && mega.style.display !== 'block' ? '0 1px 0 rgba(27,34,38,.08)' : 'none';\n    };\n    const onScroll = applyNavTone;\n    window.addEventListener('scroll', onScroll, { passive: true });\n    onScroll();\n\n    \/\/ full-screen menu helpers\n    const menu = document.getElementById('menuOverlay');\n    const menuIcon = document.getElementById('menuIcon');\n    const closeMenu = () => {\n      if (menu.style.display !== 'block') return;\n      menuIcon.textContent = '\u2261';\n      gsap.to(menu, { opacity: 0, duration: .35, ease: 'power2.in', onComplete: () => { menu.style.display = 'none'; } });\n    };\n    const openMenu = () => {\n      mega.style.display = 'none';\n      applyNavTone();\n      menu.style.display = 'block';\n      menuIcon.textContent = '\u2715';\n      gsap.fromTo(menu, { opacity: 0 }, { opacity: 1, duration: .4, ease: 'power2.out' });\n      gsap.fromTo('.menuFx', { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: .7, stagger: .06, ease: 'power3.out' });\n    };\n    const scrollToSection = (sel) => {\n      const el = document.querySelector(sel);\n      if (!el) return;\n      const y = el.getBoundingClientRect().top + window.scrollY;\n      if (this._lenis) this._lenis.scrollTo(y, { duration: 1.4 });\n      else window.scrollTo({ top: y, behavior: 'smooth' });\n    };\n\n    \/\/ click delegation \u2014 bind once, globally idempotent across boots\/hot-reloads\n    if (window.__lumenClickHandler) document.removeEventListener('click', window.__lumenClickHandler);\n    window.__lumenClickHandler = (e) => {\n      const t = e.target;\n      const scrollLink = t.closest('[data-scroll-to]');\n      if (scrollLink) {\n        closeMenu();\n        mega.style.display = 'none';\n        applyNavTone();\n        scrollToSection(scrollLink.getAttribute('data-scroll-to'));\n        return;\n      }\n      if (t.closest('[data-menu-toggle]')) {\n        if (menu.style.display === 'block') closeMenu(); else openMenu();\n        return;\n      }\n      if (t.closest('[data-open-modal]')) {\n        closeMenu();\n        overlay.style.display = 'block';\n        gsap.fromTo(overlay, { opacity: 0 }, { opacity: 1, duration: .3, ease: 'power3.out' });\n        gsap.fromTo(panel, { y: '100%' }, { y: '0%', duration: .7, ease: 'power4.out' });\n        gsap.fromTo('#modalTitle', { y: 120, opacity: 0 }, { y: 0, opacity: 1, duration: .9, delay: .2, ease: 'power4.out' });\n      } else if (t.closest('[data-close-modal]')) {\n        gsap.to(panel, { y: '100%', duration: .5, ease: 'power3.in' });\n        gsap.to(overlay, { opacity: 0, duration: .5, onComplete: () => { overlay.style.display = 'none'; } });\n      } else if (t.closest('[data-services-toggle]')) {\n        closeMenu();\n        const open = mega.style.display !== 'block';\n        mega.style.display = open ? 'block' : 'none';\n        applyNavTone();\n        if (open) gsap.fromTo(mega, { y: -24, opacity: 0 }, { y: 0, opacity: 1, duration: .4, ease: 'power3.out' });\n      } else if (!t.closest('#megaMenu') && mega.style.display === 'block') {\n        mega.style.display = 'none';\n        applyNavTone();\n      }\n      \/\/ location pills\n      const pill = t.closest('[data-locpill]');\n      if (pill) {\n        const group = pill.parentElement.querySelectorAll('[data-locpill]');\n        group.forEach(p => {\n          const on = p === pill;\n          p.style.background = on ? '#29D6C8' : 'transparent';\n          p.style.color = on ? '#060A0E' : '#7C8A90';\n          p.style.border = on ? '1px solid #29D6C8' : '1px solid rgba(124,138,144,.4)';\n        });\n      }\n    };\n    document.addEventListener('click', window.__lumenClickHandler);\n\n    \/\/ booking forms \u2192 thanks state\n    document.querySelectorAll('[data-book-form]').forEach(form => {\n      form.addEventListener('submit', (e) => {\n        e.preventDefault();\n        const live = form.querySelector('.form-live');\n        const thanks = form.querySelector('.form-thanks');\n        gsap.to(live, { opacity: 0, duration: .3, onComplete: () => {\n          live.style.display = 'none';\n          thanks.style.display = 'flex';\n          gsap.fromTo(thanks, { opacity: 0, y: 14 }, { opacity: 1, y: 0, duration: .5, ease: 'power3.out' });\n        }});\n      });\n    });\n  }\n\n  \/\/ ============ HERO: scroll-scrubbed canvas video ============\n  setupHero(gsap) {\n    const canvas = document.getElementById('heroCanvas');\n    const ctx = canvas.getContext('2d');\n    const sec = document.getElementById('heroSec');\n    let frames = [];        \/\/ ImageBitmaps\n    let vidW = 16, vidH = 9;\n    let target = 0;         \/\/ progress from ScrollTrigger\n    let shown = 0;          \/\/ eased progress actually drawn\n    let lastKey = '';\n\n    const sizeCanvas = () => {\n      const dpr = Math.min(window.devicePixelRatio || 1, 2);\n      canvas.width = canvas.clientWidth * dpr;\n      canvas.height = canvas.clientHeight * dpr;\n      lastKey = '';\n      draw(true);\n    };\n\n    const placeImage = (img, alpha) => {\n      const cw = canvas.width, ch = canvas.height;\n      const s = Math.max(cw \/ vidW, ch \/ vidH);\n      const w = vidW * s, h = vidH * s;\n      ctx.globalAlpha = alpha;\n      ctx.drawImage(img, (cw - w) \/ 2, (ch - h) \/ 2, w, h);\n    };\n\n    \/\/ cross-fades between adjacent frames for sub-frame smoothness\n    const draw = (force) => {\n      if (!frames.length) return;\n      const pos = shown * (frames.length - 1);\n      const i0 = Math.min(frames.length - 1, Math.floor(pos));\n      const i1 = Math.min(frames.length - 1, i0 + 1);\n      const frac = pos - i0;\n      const key = i0 + ':' + frac.toFixed(2);\n      if (!force && key === lastKey) return;\n      lastKey = key;\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      placeImage(frames[i0], 1);\n      if (i1 !== i0 && frac > 0.01) placeImage(frames[i1], frac);\n      ctx.globalAlpha = 1;\n    };\n\n    window.addEventListener('resize', sizeCanvas);\n    sizeCanvas();\n\n    \/\/ rAF loop eases shown progress toward the scroll target\n    const tick = () => {\n      if (this._killed) return;\n      shown += (target - shown) * 0.14;\n      if (Math.abs(target - shown) < 0.0004) shown = target;\n      draw();\n      requestAnimationFrame(tick);\n    };\n    requestAnimationFrame(tick);\n\n    \/\/ pin + scrub (scrub: 0.5 adds GSAP-level smoothing on top)\n    window.ScrollTrigger.create({\n      trigger: sec, start: 'top top', end: '+=150%', pin: true, scrub: 0.5, anticipatePin: 1,\n      onUpdate: (st) => { target = st.progress; }\n    });\n\n    \/\/ headline word reveal + underline bar\n    gsap.from('.hw', { y: 46, opacity: 0, duration: 1.05, ease: 'power3.out', stagger: 0.09, delay: 0.2 });\n    gsap.to('#accentBar', { scaleX: 1, duration: 1, ease: 'power3.out', delay: 1.1 });\n    \/\/ content gently fades as scrub ends\n    gsap.to('#heroContent', {\n      opacity: 0, y: -60, ease: 'none',\n      scrollTrigger: { trigger: sec, start: '60% top', end: '+=40%', scrub: true }\n    });\n\n    \/\/ ---- frame extraction ----\n    const N = Math.max(24, Math.min(140, this.props.scrubFrames ?? 90));\n    const video = document.createElement('video');\n    video.muted = true; video.playsInline = true; video.preload = 'auto'; video.crossOrigin = 'anonymous';\n    \/\/ fetch as blob first \u2014 direct src can stall on servers without range support\n    fetch(window.LUMEN_HERO_SRC)\n      .then(r => { if (!r.ok) throw new Error('http ' + r.status); return r.blob(); })\n      .then(b => { video.src = URL.createObjectURL(b); video.load(); })\n      .catch(() => { video.src = window.LUMEN_HERO_SRC; video.load(); });\n\n    \/\/ Safari can't createImageBitmap(video) \u2014 snapshot each frame to an offscreen canvas instead\n    const grabFrame = () => {\n      const c = document.createElement('canvas');\n      c.width = vidW; c.height = vidH;\n      c.getContext('2d').drawImage(video, 0, 0, vidW, vidH);\n      return c;\n    };\n\n    const seekTo = (t) => new Promise((res) => {\n      let done = false;\n      const finish = () => { if (done) return; done = true; video.removeEventListener('seeked', finish); res(); };\n      video.addEventListener('seeked', finish);\n      video.currentTime = t;\n      setTimeout(finish, 1200); \/\/ safety\n    });\n\n    \/\/ wait until the video has real frame data (loadeddata), not just metadata \u2014 Safari needs this\n    video.addEventListener('loadeddata', async () => {\n      if (this._extracting) return;\n      this._extracting = true;\n      vidW = video.videoWidth || 1920; vidH = video.videoHeight || 1080;\n      const dur = video.duration;\n      try {\n        \/\/ decode warm-up: Safari returns blank canvases until the pipeline has produced a frame\n        try { await video.play(); video.pause(); } catch (e) {}\n        for (let i = 0; i < N; i++) {\n          if (this._killed) return;\n          await seekTo((i \/ (N - 1)) * Math.max(0, dur - 0.05));\n          \/\/ give Safari one paint tick to deliver the decoded frame\n          await new Promise(r => requestAnimationFrame(r));\n          const snap = grabFrame();\n          \/\/ verify the snapshot isn't blank (first frame only)\n          if (i === 0) {\n            const px = snap.getContext('2d').getImageData(vidW >> 1, vidH >> 1, 1, 1).data;\n            if (px[3] === 0) { await new Promise(r => setTimeout(r, 250)); snap.getContext('2d').drawImage(video, 0, 0, vidW, vidH); }\n          }\n          frames.push(snap);\n          if (i === 0 || i % 8 === 0) { lastKey = ''; draw(true); }\n        }\n        lastKey = ''; draw(true);\n      } catch (err) {\n        \/\/ fallback: loop the raw video behind the canvas\n        video.loop = true; video.autoplay = true;\n        video.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;';\n        canvas.parentElement.insertBefore(video, canvas);\n        canvas.style.display = 'none';\n        video.play().catch(() => {});\n      }\n    });\n    video.addEventListener('error', () => {\n      \/\/ solid glow fallback\n      canvas.style.background = 'radial-gradient(60% 80% at 55% 45%, rgba(41,214,200,.18), transparent 70%), #060A0E';\n    });\n  }\n\n  \/\/ ============ ambient particles ============\n  setupParticles() {\n    const canvas = document.getElementById('particleCanvas');\n    const ctx = canvas.getContext('2d');\n    const size = () => { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; };\n    size(); window.addEventListener('resize', size);\n    const COLORS = ['41,214,200', '62,123,250', '184,242,236'];\n    const P = Array.from({ length: 55 }, () => ({\n      x: Math.random(), y: Math.random(),\n      r: Math.random() * 1.8 + 0.4,\n      vy: -(Math.random() * 0.0006 + 0.0002),\n      vx: (Math.random() - 0.5) * 0.0003,\n      c: COLORS[Math.floor(Math.random() * 3)],\n      a: Math.random() * 0.5 + 0.15,\n      ph: Math.random() * Math.PI * 2\n    }));\n    const loop = (t) => {\n      if (this._killed) return;\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      for (const p of P) {\n        p.y += p.vy; p.x += p.vx;\n        if (p.y < -0.02) { p.y = 1.02; p.x = Math.random(); }\n        const tw = 0.5 + 0.5 * Math.sin(t * 0.001 + p.ph);\n        ctx.beginPath();\n        ctx.arc(p.x * canvas.width, p.y * canvas.height, p.r, 0, Math.PI * 2);\n        ctx.fillStyle = `rgba(${p.c},${p.a * tw})`;\n        ctx.fill();\n      }\n      this._raf.push(requestAnimationFrame(loop));\n    };\n    this._raf.push(requestAnimationFrame(loop));\n  }\n\n  \/\/ ============ value cards: pinned horizontal scroll ============\n  setupCards(gsap) {\n    const track = document.getElementById('cardsTrack');\n    const counter = document.getElementById('cardsCounter');\n    const bar = document.getElementById('cardsBar');\n    if (!track) return;\n    gsap.to(track, {\n      x: () => -(track.scrollWidth - window.innerWidth), ease: 'none',\n      scrollTrigger: {\n        trigger: '#cardsSec', start: 'top top', end: '+=250%', pin: true, scrub: 0.6, anticipatePin: 1,\n        invalidateOnRefresh: true,\n        onUpdate: (st) => {\n          const i = Math.min(2, Math.floor(st.progress * 3));\n          counter.textContent = '0' + (i + 1);\n          bar.style.width = (33.3 + st.progress * 66.7) + '%';\n        }\n      }\n    });\n  }\n\n  \/\/ ============ about: portrait grow + ink fill ============\n  setupAbout(gsap) {\n    gsap.to('#aboutImg', {\n      scale: 1, filter: 'grayscale(1) blur(0px)', ease: 'none',\n      scrollTrigger: { trigger: '#aboutSec', start: 'top 75%', end: 'top 15%', scrub: true }\n    });\n    \/\/ parallax: image drifts on scroll through the whole section\n    gsap.fromTo('#aboutImg',\n      { y: 60, backgroundPositionY: '0%' },\n      { y: -60, backgroundPositionY: '40%', ease: 'none',\n        scrollTrigger: { trigger: '#aboutSec', start: 'top bottom', end: 'bottom top', scrub: 0.4 } }\n    );\n    gsap.to('#aboutInk', {\n      backgroundPosition: '0% 0%', ease: 'none',\n      scrollTrigger: { trigger: '#aboutInk', start: 'top 80%', end: 'bottom 45%', scrub: true }\n    });\n    gsap.from('#avatarRow', {\n      opacity: 0, y: 24, duration: .9, ease: 'power3.out',\n      scrollTrigger: { trigger: '#aboutSec', start: 'top 55%' }\n    });\n  }\n\n  \/\/ ============ services pinned scrub ============\n  setupServices(gsap) {\n    const cats = [\n      { blurb: 'Trattamenti guidati dall\u2019arte che perfezionano forma, colore e simmetria per un sorriso naturalmente radioso.',\n        items: ['Faccette in Ceramica', 'Digital Smile Design', 'Sbiancamento Dentale', 'Rimodellamento dello Smalto'] },\n      { blurb: 'Trattamenti restaurativi esperti per ricostruire, proteggere e ripristinare i tuoi denti \u2014 fiducia nella funzione e nell\u2019aspetto.',\n        items: ['Restauro su Impianti', 'Corone e Ponti', 'Riabilitazione Totale', 'Otturazioni Estetiche'] },\n      { blurb: 'Cure proattive e delicate che mantengono piccoli i piccoli problemi \u2014 e sani i sorrisi sani, per decenni.',\n        items: ['Igiene e Pulizia', 'Controlli Digitali', 'Terapia Gengivale', 'Bite Notturni'] },\n      { blurb: 'Oltre il sorriso: trattamenti viso discreti che completano il quadro, eseguiti con precisione clinica.',\n        items: ['Botox e Filler', 'Valorizzazione Labbra', 'Terapia PRF', 'Ringiovanimento Cutaneo'] }\n    ];\n    const titles = gsap.utils.toArray('.servTitle');\n    const navItems = gsap.utils.toArray('.servNav');\n    const listRows = gsap.utils.toArray('.servItem');\n    const imgLayers = gsap.utils.toArray('.servImgLayer');\n    const blurb = document.getElementById('servBlurb');\n    let cur = 0;\n\n    const setActive = (i) => {\n      if (i === cur) return;\n      const goingDown = i > cur;\n      const prev = cur;\n      cur = i;\n      \/\/ left images: new layer slides smoothly over the previous one\n      imgLayers.forEach((layer, j) => { layer.style.zIndex = j === i ? 3 : (j === prev ? 2 : 1); });\n      const inLayer = imgLayers[i], outLayer = imgLayers[prev];\n      if (inLayer && outLayer && inLayer !== outLayer) {\n        gsap.set(inLayer, { visibility: 'visible' });\n        gsap.fromTo(inLayer,\n          { clipPath: goingDown ? 'inset(100% 0 0 0)' : 'inset(0 0 100% 0)', y: goingDown ? 60 : -60 },\n          { clipPath: 'inset(0% 0 0% 0)', y: 0, duration: .7, ease: 'power3.out' });\n        gsap.fromTo(outLayer, { y: 0, scale: 1 }, {\n          y: goingDown ? -50 : 50, scale: 1.04, duration: .7, ease: 'power3.out',\n          onComplete: () => { if (cur !== prev) gsap.set(outLayer, { visibility: 'hidden', y: 0, scale: 1 }); }\n        });\n      }\n      titles.forEach((t, j) => gsap.to(t, { opacity: j === i ? 1 : 0, y: j === i ? 0 : 24, duration: .55, ease: 'power3.out' }));\n      navItems.forEach((n, j) => { n.style.color = j === i ? '#F2F6F7' : '#4C5C63'; n.style.fontWeight = j === i ? '600' : '400'; });\n      gsap.fromTo(blurb, { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: .45, ease: 'power3.out' });\n      blurb.textContent = cats[i].blurb;\n      listRows.forEach((row, j) => {\n        row.firstChild.textContent = cats[i].items[j] + ' ';\n        gsap.fromTo(row, { opacity: 0, x: 16 }, { opacity: 1, x: 0, duration: .4, delay: j * 0.05, ease: 'power3.out' });\n      });\n    };\n    \/\/ init titles offset\n    titles.forEach((t, j) => { if (j > 0) gsap.set(t, { y: 24 }); });\n\n    window.ScrollTrigger.create({\n      trigger: '#servSec', start: 'top top', end: '+=300%', pin: true, scrub: 0.5, anticipatePin: 1,\n      onUpdate: (st) => setActive(Math.min(3, Math.floor(st.progress * 4)))\n    });\n  }\n\n  \/\/ ============ technology pinned scrub ============\n  setupTech(gsap) {\n    const labels = ['https:\/\/images.unsplash.com\/photo-1588776814546-1ffcf47267a5?auto=format&fit=crop&w=900&q=70', 'https:\/\/images.unsplash.com\/photo-1606811841689-23dfddce3e95?auto=format&fit=crop&w=900&q=70', 'https:\/\/images.unsplash.com\/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=900&q=70', 'https:\/\/images.unsplash.com\/photo-1606811971618-4486d14f3f99?auto=format&fit=crop&w=900&q=70', 'https:\/\/images.unsplash.com\/photo-1588776814546-1ffcf47267a5?auto=format&fit=crop&w=900&q=70', 'https:\/\/images.unsplash.com\/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=900&q=70'];\n    const rows = gsap.utils.toArray('.techItem');\n    const counter = document.getElementById('techCounter');\n    const img = document.getElementById('techImg');\n    let cur = 0;\n    const setActive = (i) => {\n      if (i === cur) return;\n      cur = i;\n      counter.textContent = String(i + 1).padStart(2, '0');\n      img.style.backgroundImage = 'url(' + labels[i] + ')';\n      gsap.fromTo(img, { opacity: 0.35, scale: 0.985 }, { opacity: 1, scale: 1, duration: .45, ease: 'power3.out' });\n      rows.forEach((row, j) => {\n        const name = row.querySelector('.techName');\n        const more = row.querySelector('.techMore');\n        const on = j === i;\n        gsap.to(name, { fontSize: on ? '44px' : '32px', color: on ? '#1B2226' : '#adb8bd', duration: .45, ease: 'power3.out' });\n        gsap.to(more, { opacity: on ? 1 : 0.35, duration: .3 });\n        more.style.color = on ? '#1B2226' : '#7C8A90';\n      });\n    };\n    window.ScrollTrigger.create({\n      trigger: '#techSec', start: 'top top', end: '+=350%', pin: true, scrub: 0.5, anticipatePin: 1,\n      onUpdate: (st) => setActive(Math.min(5, Math.floor(st.progress * 6)))\n    });\n  }\n\n  \/\/ ============ headings: subtle appear (no char split \u2014 keeps alignment intact) ============\n  setupCharScrub(gsap) {\n    gsap.utils.toArray('.charX').forEach((el) => {\n      \/\/ clean up any leftover char-split spans from a previous version\n      if (el.dataset.charsplit) {\n        el.querySelectorAll('.chx').forEach(s => { s.replaceWith(s.textContent); });\n        el.normalize();\n        delete el.dataset.charsplit;\n      }\n      gsap.from(el, {\n        opacity: 0, y: 18, duration: .9, ease: 'power3.out',\n        scrollTrigger: { trigger: el, start: 'top 88%' }\n      });\n    });\n  }\n\n  \/\/ ============ team: pinned horizontal scroll ============\n  setupTeam(gsap) {\n    const track = document.getElementById('teamTrack');\n    const headline = document.getElementById('teamHeadline');\n    if (!track) return;\n    const dist = () => Math.max(0, track.scrollWidth - window.innerWidth);\n    gsap.to(track, {\n      x: () => -dist(), ease: 'none',\n      scrollTrigger: {\n        trigger: '#teamSec', start: 'top top', end: () => '+=' + (dist() + window.innerHeight * .4),\n        pin: true, scrub: 0.6, anticipatePin: 1, invalidateOnRefresh: true\n      }\n    });\n    \/\/ headline moves slower for parallax depth\n    gsap.to(headline, {\n      x: () => -dist() * 0.35, ease: 'none',\n      scrollTrigger: {\n        trigger: '#teamSec', start: 'top top', end: () => '+=' + (dist() + window.innerHeight * .4),\n        scrub: 0.6, invalidateOnRefresh: true\n      }\n    });\n  }\n\n  \/\/ ============ why choose us: ink fill + bubble drop ============\n  setupWhy(gsap) {\n    gsap.to('#whyInk', {\n      backgroundPosition: '0% 0%', ease: 'none',\n      scrollTrigger: { trigger: '#whySec', start: 'top 70%', end: 'top 10%', scrub: true }\n    });\n    gsap.from('.bubble', {\n      y: -560, ease: 'bounce.out', duration: 1.6, stagger: 0.13,\n      scrollTrigger: { trigger: '#statsWrap', start: 'top 58%' }\n    });\n    gsap.from('.bubble', {\n      opacity: 0, duration: .45, stagger: 0.13, ease: 'power1.out',\n      scrollTrigger: { trigger: '#statsWrap', start: 'top 58%' }\n    });\n    gsap.from('.bubble', {\n      rotation: () => (Math.random() * 14 - 7), duration: 1.6, stagger: 0.13, ease: 'power3.out',\n      scrollTrigger: { trigger: '#statsWrap', start: 'top 58%' }\n    });\n  }\n\n  renderVals() { return {}; }\n}\n\n\n\n(function () {\n  const props = { particles: true, scrubFrames: 90 };\n  const start = () => {\n    const app = new Component(props);\n    window.__lumenApp = app;\n    app.componentDidMount();\n    window.addEventListener('beforeunload', () => { try { app.componentWillUnmount(); } catch (e) {} });\n  };\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);\n  else start();\n})();\n\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>LumenDental Atelier Menu \u2261 Servizi \u25be Modulo paziente \u2197 +39 02 5550 0144Milano \u00b7 Brera \u25be Prenota una chiamata + Servizi \u2715 Odontoiatria Estetica \u2197 Odontoiatria Restaurativa \u2197 Igiene e Prevenzione \u2197 Estetica del Viso \u2197 Servizi: Odontoiatria Estetica Odontoiatria Restaurativa Igiene e Prevenzione Estetica del Viso Modulo paziente \u2197 FAQ \u2197 Chi Siamo Il [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"no-header-footer-pages","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/i-imageproject.it\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i-imageproject.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/i-imageproject.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/i-imageproject.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i-imageproject.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":7,"href":"https:\/\/i-imageproject.it\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/i-imageproject.it\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/i-imageproject.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}