QUOTEPRO – TS2 Informatica<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --arancione: #ff6900;\n --arancione-scuro: #e55d00;\n --azzurro: #0693e3;\n --azzurro-scuro: #0578b9;\n --grigio-chiaro: #f7f8fc;\n --grigio-testo: #555;\n --scuro: #1a1a2e;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n color: #333;\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* ========== HERO ========== *\/\n .hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, var(--scuro) 0%, #16213e 50%, #0a1628 100%);\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -20%;\n width: 800px;\n height: 800px;\n background: radial-gradient(circle, rgba(6,147,227,0.15) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .hero::after {\n content: '';\n position: absolute;\n bottom: -30%;\n left: -10%;\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(255,105,0,0.1) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .hero-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 80px 40px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n position: relative;\n z-index: 1;\n }\n\n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,105,0,0.15);\n border: 1px solid rgba(255,105,0,0.3);\n color: var(--arancione);\n padding: 6px 16px;\n border-radius: 50px;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n margin-bottom: 24px;\n }\n\n .hero-badge::before {\n content: '';\n width: 8px;\n height: 8px;\n background: var(--arancione);\n border-radius: 50%;\n animation: pulse-dot 2s infinite;\n }\n\n @keyframes pulse-dot {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n\n .hero h1 {\n font-size: 56px;\n font-weight: 800;\n color: #fff;\n line-height: 1.1;\n margin-bottom: 12px;\n }\n\n .hero h1 span {\n background: linear-gradient(135deg, var(--arancione), #ffaa00);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero-subtitle {\n font-size: 22px;\n color: rgba(255,255,255,0.7);\n font-weight: 300;\n margin-bottom: 24px;\n }\n\n .hero-text {\n font-size: 16px;\n color: rgba(255,255,255,0.5);\n margin-bottom: 36px;\n max-width: 480px;\n }\n\n .hero-buttons {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 600;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n border: none;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, var(--arancione), #ff8a00);\n color: #fff;\n box-shadow: 0 4px 20px rgba(255,105,0,0.4);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(255,105,0,0.5);\n }\n\n .btn-outline {\n background: rgba(255,255,255,0.05);\n color: #fff;\n border: 1px solid rgba(255,255,255,0.2);\n }\n\n .btn-outline:hover {\n background: rgba(255,255,255,0.1);\n border-color: rgba(255,255,255,0.4);\n }\n\n .hero-visual {\n position: relative;\n display: flex;\n justify-content: center;\n }\n\n .hero-mockup {\n width: 100%;\n max-width: 580px;\n border-radius: 12px;\n filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5));\n animation: float 6s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-15px); }\n }\n\n .hero-glow {\n position: absolute;\n width: 400px;\n height: 400px;\n background: radial-gradient(circle, rgba(6,147,227,0.2) 0%, transparent 70%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -1;\n }\n\n \/* ========== STATS BAR ========== *\/\n .stats-bar {\n background: #fff;\n padding: 0 40px;\n position: relative;\n z-index: 2;\n }\n\n .stats-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 0;\n transform: translateY(-50%);\n background: #fff;\n border-radius: 16px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.08);\n overflow: hidden;\n }\n\n .stat-item {\n padding: 32px 24px;\n text-align: center;\n border-right: 1px solid #f0f0f0;\n }\n\n .stat-item:last-child {\n border-right: none;\n }\n\n .stat-number {\n font-size: 36px;\n font-weight: 800;\n background: linear-gradient(135deg, var(--azzurro), var(--arancione));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .stat-label {\n font-size: 14px;\n color: var(--grigio-testo);\n margin-top: 4px;\n }\n\n \/* ========== FEATURES ========== *\/\n .features {\n padding: 60px 40px 100px;\n background: #fff;\n }\n\n .section-header {\n text-align: center;\n max-width: 640px;\n margin: 0 auto 64px;\n }\n\n .section-tag {\n display: inline-block;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--azzurro);\n margin-bottom: 12px;\n }\n\n .section-header h2 {\n font-size: 40px;\n font-weight: 800;\n color: var(--scuro);\n margin-bottom: 16px;\n line-height: 1.2;\n }\n\n .section-header p {\n font-size: 17px;\n color: var(--grigio-testo);\n }\n\n .features-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n }\n\n .feature-card {\n padding: 36px 28px;\n border-radius: 16px;\n background: var(--grigio-chiaro);\n border: 1px solid #eef0f5;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .feature-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--azzurro), var(--arancione));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .feature-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 32px rgba(0,0,0,0.08);\n border-color: transparent;\n }\n\n .feature-card:hover::before {\n opacity: 1;\n }\n\n .feature-icon {\n width: 52px;\n height: 52px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n font-size: 24px;\n }\n\n .feature-icon.blue {\n background: rgba(6,147,227,0.1);\n color: var(--azzurro);\n }\n\n .feature-icon.orange {\n background: rgba(255,105,0,0.1);\n color: var(--arancione);\n }\n\n .feature-card h3 {\n font-size: 18px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 10px;\n }\n\n .feature-card p {\n font-size: 14px;\n color: var(--grigio-testo);\n line-height: 1.7;\n }\n\n \/* ========== SETTORI ========== *\/\n .sectors {\n padding: 100px 40px;\n background: linear-gradient(135deg, var(--scuro) 0%, #16213e 100%);\n position: relative;\n }\n\n .sectors .section-tag {\n color: var(--arancione);\n }\n\n .sectors .section-header h2 {\n color: #fff;\n }\n\n .sectors .section-header p {\n color: rgba(255,255,255,0.6);\n }\n\n .sectors-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n }\n\n .sector-card {\n padding: 40px 32px;\n border-radius: 16px;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.08);\n text-align: center;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n }\n\n .sector-card:hover {\n background: rgba(255,255,255,0.08);\n border-color: rgba(255,255,255,0.15);\n transform: translateY(-4px);\n }\n\n .sector-icon {\n font-size: 40px;\n margin-bottom: 20px;\n }\n\n .sector-card h3 {\n font-size: 20px;\n font-weight: 700;\n color: #fff;\n margin-bottom: 12px;\n }\n\n .sector-card p {\n font-size: 14px;\n color: rgba(255,255,255,0.5);\n line-height: 1.7;\n }\n\n \/* ========== VANTAGGI ========== *\/\n .advantages {\n padding: 100px 40px;\n background: #fff;\n }\n\n .advantages-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n }\n\n .advantages-list {\n display: flex;\n flex-direction: column;\n gap: 28px;\n }\n\n .advantage-item {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n }\n\n .advantage-check {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n background: linear-gradient(135deg, var(--azzurro), #38b6ff);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #fff;\n font-size: 18px;\n }\n\n .advantage-item h4 {\n font-size: 17px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 4px;\n }\n\n .advantage-item p {\n font-size: 14px;\n color: var(--grigio-testo);\n line-height: 1.6;\n }\n\n .advantages-visual {\n position: relative;\n }\n\n .advantages-visual-box {\n background: linear-gradient(135deg, var(--grigio-chiaro), #eef2ff);\n border-radius: 20px;\n padding: 48px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .advantages-visual-box::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n background: linear-gradient(135deg, var(--azzurro), var(--arancione));\n border-radius: 22px;\n z-index: -1;\n opacity: 0.3;\n }\n\n .visual-big-icon {\n font-size: 80px;\n margin-bottom: 20px;\n }\n\n .visual-title {\n font-size: 24px;\n font-weight: 800;\n color: var(--scuro);\n margin-bottom: 8px;\n }\n\n .visual-sub {\n font-size: 15px;\n color: var(--grigio-testo);\n }\n\n \/* ========== SHOWCASE 3D ========== *\/\n .showcase-3d {\n padding: 100px 40px;\n background: #fff;\n overflow: hidden;\n }\n\n .showcase-3d-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n }\n\n .showcase-3d-visual {\n position: relative;\n border-radius: 20px;\n overflow: hidden;\n aspect-ratio: 4\/3;\n background: linear-gradient(135deg, #0d1b2a, #1b2838);\n box-shadow: 0 20px 60px rgba(0,0,0,0.2);\n }\n\n .showcase-3d-canvas {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .cube-3d {\n width: 120px;\n height: 120px;\n position: relative;\n transform-style: preserve-3d;\n animation: rotateCube 12s linear infinite;\n }\n\n .cube-face {\n position: absolute;\n width: 120px;\n height: 120px;\n border: 2px solid rgba(6,147,227,0.4);\n background: rgba(6,147,227,0.06);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n }\n\n .cube-face:nth-child(1) { transform: rotateY(0deg) translateZ(60px); }\n .cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(60px); }\n .cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(60px); }\n .cube-face:nth-child(4) { transform: rotateY(270deg) translateZ(60px); }\n .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(60px); }\n .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(60px); }\n\n @keyframes rotateCube {\n 0% { transform: rotateX(-20deg) rotateY(0deg); }\n 100% { transform: rotateX(-20deg) rotateY(360deg); }\n }\n\n .showcase-3d-grid-bg {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 50%;\n background: linear-gradient(to top, rgba(6,147,227,0.08), transparent);\n }\n\n .showcase-3d-grid-lines {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 40%;\n background-image:\n linear-gradient(rgba(6,147,227,0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(6,147,227,0.1) 1px, transparent 1px);\n background-size: 30px 30px;\n transform: perspective(300px) rotateX(50deg);\n transform-origin: bottom;\n }\n\n .showcase-3d-toolbar {\n position: absolute;\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 6px;\n background: rgba(0,0,0,0.5);\n backdrop-filter: blur(10px);\n padding: 8px 14px;\n border-radius: 12px;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n .toolbar-dot {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.15);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n color: rgba(255,255,255,0.5);\n transition: all 0.3s;\n cursor: default;\n }\n\n .toolbar-dot:hover {\n background: rgba(6,147,227,0.3);\n border-color: var(--azzurro);\n color: #fff;\n }\n\n .showcase-3d-badge {\n position: absolute;\n top: 16px;\n left: 16px;\n background: rgba(255,105,0,0.2);\n border: 1px solid rgba(255,105,0,0.3);\n color: var(--arancione);\n padding: 4px 12px;\n border-radius: 8px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .feature-highlights {\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-top: 32px;\n }\n\n .feature-highlight {\n display: flex;\n gap: 16px;\n align-items: flex-start;\n padding: 16px;\n border-radius: 12px;\n transition: background 0.3s;\n }\n\n .feature-highlight:hover {\n background: var(--grigio-chiaro);\n }\n\n .fh-icon {\n width: 44px;\n height: 44px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n font-size: 20px;\n }\n\n .fh-icon.gradient-blue {\n background: linear-gradient(135deg, var(--azzurro), #38b6ff);\n color: #fff;\n }\n\n .fh-icon.gradient-orange {\n background: linear-gradient(135deg, var(--arancione), #ffaa00);\n color: #fff;\n }\n\n .feature-highlight h4 {\n font-size: 15px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 2px;\n }\n\n .feature-highlight p {\n font-size: 13px;\n color: var(--grigio-testo);\n line-height: 1.5;\n }\n\n \/* ========== STRUMENTI PROFESSIONALI ========== *\/\n .tools-section {\n padding: 100px 40px;\n background: var(--grigio-chiaro);\n }\n\n .tools-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n }\n\n .tool-card {\n background: #fff;\n border-radius: 16px;\n padding: 32px 24px;\n text-align: center;\n border: 1px solid #eef0f5;\n transition: all 0.3s ease;\n position: relative;\n }\n\n .tool-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 16px 40px rgba(0,0,0,0.08);\n }\n\n .tool-card-icon {\n width: 64px;\n height: 64px;\n border-radius: 16px;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n }\n\n .tool-card-icon.tc-blue {\n background: linear-gradient(135deg, rgba(6,147,227,0.12), rgba(6,147,227,0.04));\n color: var(--azzurro);\n }\n\n .tool-card-icon.tc-orange {\n background: linear-gradient(135deg, rgba(255,105,0,0.12), rgba(255,105,0,0.04));\n color: var(--arancione);\n }\n\n .tool-card-icon.tc-gradient {\n background: linear-gradient(135deg, var(--azzurro), var(--arancione));\n color: #fff;\n }\n\n .tool-card h3 {\n font-size: 16px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 8px;\n }\n\n .tool-card p {\n font-size: 13px;\n color: var(--grigio-testo);\n line-height: 1.6;\n }\n\n .tool-card-tag {\n display: inline-block;\n margin-top: 14px;\n font-size: 11px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: 6px;\n letter-spacing: 0.5px;\n }\n\n .tag-blue {\n background: rgba(6,147,227,0.1);\n color: var(--azzurro);\n }\n\n .tag-orange {\n background: rgba(255,105,0,0.1);\n color: var(--arancione);\n }\n\n \/* ========== 3D STUDIO ========== *\/\n .studio-3d {\n padding: 100px 40px;\n background: linear-gradient(135deg, #0a1628 0%, var(--scuro) 50%, #16213e 100%);\n position: relative;\n overflow: hidden;\n }\n\n .studio-3d::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 900px;\n height: 900px;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle, rgba(6,147,227,0.06) 0%, transparent 60%);\n border-radius: 50%;\n }\n\n .studio-3d .section-tag { color: var(--arancione); }\n .studio-3d .section-header h2 { color: #fff; }\n .studio-3d .section-header p { color: rgba(255,255,255,0.55); }\n\n .studio-tabs {\n max-width: 1200px;\n margin: 0 auto 48px;\n display: flex;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n position: relative;\n z-index: 1;\n }\n\n .studio-tab {\n padding: 10px 22px;\n border-radius: 50px;\n border: 1px solid rgba(255,255,255,0.1);\n background: rgba(255,255,255,0.04);\n color: rgba(255,255,255,0.5);\n font-size: 13px;\n font-weight: 600;\n cursor: default;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .studio-tab:hover {\n border-color: rgba(255,255,255,0.25);\n color: rgba(255,255,255,0.8);\n }\n\n .studio-tab.active {\n background: linear-gradient(135deg, var(--azzurro), #38b6ff);\n border-color: transparent;\n color: #fff;\n }\n\n .studio-features {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n position: relative;\n z-index: 1;\n }\n\n .studio-card {\n border-radius: 16px;\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.07);\n padding: 32px 28px;\n transition: all 0.3s ease;\n backdrop-filter: blur(8px);\n position: relative;\n overflow: hidden;\n }\n\n .studio-card::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--azzurro), var(--arancione));\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .studio-card:hover {\n background: rgba(255,255,255,0.06);\n border-color: rgba(255,255,255,0.12);\n transform: translateY(-4px);\n }\n\n .studio-card:hover::after {\n opacity: 1;\n }\n\n .studio-card-header {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 16px;\n }\n\n .studio-card-icon {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n flex-shrink: 0;\n }\n\n .sci-blue {\n background: rgba(6,147,227,0.15);\n color: var(--azzurro);\n }\n\n .sci-orange {\n background: rgba(255,105,0,0.15);\n color: var(--arancione);\n }\n\n .sci-gradient {\n background: linear-gradient(135deg, rgba(6,147,227,0.2), rgba(255,105,0,0.2));\n color: #fff;\n }\n\n .studio-card h3 {\n font-size: 17px;\n font-weight: 700;\n color: #fff;\n }\n\n .studio-card > p {\n font-size: 14px;\n color: rgba(255,255,255,0.45);\n line-height: 1.7;\n margin-bottom: 18px;\n }\n\n .studio-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n }\n\n .studio-mini-tag {\n font-size: 10px;\n font-weight: 600;\n padding: 3px 9px;\n border-radius: 5px;\n background: rgba(255,255,255,0.06);\n color: rgba(255,255,255,0.4);\n border: 1px solid rgba(255,255,255,0.08);\n letter-spacing: 0.3px;\n }\n\n .studio-mini-tag.highlight {\n background: rgba(6,147,227,0.12);\n border-color: rgba(6,147,227,0.25);\n color: var(--azzurro);\n }\n\n .studio-mini-tag.highlight-orange {\n background: rgba(255,105,0,0.12);\n border-color: rgba(255,105,0,0.25);\n color: var(--arancione);\n }\n\n .studio-banner {\n max-width: 1200px;\n margin: 40px auto 0;\n padding: 28px 36px;\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 16px;\n display: flex;\n align-items: center;\n gap: 20px;\n position: relative;\n z-index: 1;\n }\n\n .studio-banner-icon {\n font-size: 36px;\n flex-shrink: 0;\n }\n\n .studio-banner h4 {\n font-size: 16px;\n font-weight: 700;\n color: #fff;\n margin-bottom: 4px;\n }\n\n .studio-banner p {\n font-size: 13px;\n color: rgba(255,255,255,0.45);\n line-height: 1.6;\n }\n\n \/* ========== WORKFLOW ========== *\/\n .workflow {\n padding: 100px 40px;\n background: #fff;\n }\n\n .workflow-steps {\n max-width: 1000px;\n margin: 0 auto;\n display: flex;\n gap: 0;\n position: relative;\n }\n\n .workflow-steps::before {\n content: '';\n position: absolute;\n top: 40px;\n left: 60px;\n right: 60px;\n height: 3px;\n background: linear-gradient(90deg, var(--azzurro), var(--arancione));\n border-radius: 2px;\n }\n\n .workflow-step {\n flex: 1;\n text-align: center;\n position: relative;\n z-index: 1;\n }\n\n .step-circle {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: #fff;\n border: 3px solid #eee;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n font-size: 28px;\n transition: all 0.3s;\n }\n\n .workflow-step:hover .step-circle {\n border-color: var(--azzurro);\n box-shadow: 0 4px 20px rgba(6,147,227,0.2);\n transform: scale(1.08);\n }\n\n .step-num {\n font-size: 11px;\n font-weight: 800;\n color: var(--azzurro);\n letter-spacing: 1px;\n text-transform: uppercase;\n margin-bottom: 6px;\n }\n\n .workflow-step h4 {\n font-size: 15px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 6px;\n }\n\n .workflow-step p {\n font-size: 13px;\n color: var(--grigio-testo);\n max-width: 180px;\n margin: 0 auto;\n line-height: 1.5;\n }\n\n \/* ========== CTA \/ DEMO ========== *\/\n .cta-section {\n padding: 100px 40px;\n background: var(--grigio-chiaro);\n position: relative;\n }\n\n .cta-inner {\n max-width: 800px;\n margin: 0 auto;\n background: linear-gradient(135deg, var(--scuro), #16213e);\n border-radius: 24px;\n padding: 60px 48px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .cta-inner::before {\n content: '';\n position: absolute;\n top: -100px;\n right: -100px;\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, rgba(255,105,0,0.15) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .cta-inner::after {\n content: '';\n position: absolute;\n bottom: -80px;\n left: -80px;\n width: 250px;\n height: 250px;\n background: radial-gradient(circle, rgba(6,147,227,0.12) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .cta-inner h2 {\n font-size: 36px;\n font-weight: 800;\n color: #fff;\n margin-bottom: 12px;\n position: relative;\n z-index: 1;\n }\n\n .cta-inner > p {\n color: rgba(255,255,255,0.6);\n font-size: 16px;\n margin-bottom: 36px;\n position: relative;\n z-index: 1;\n }\n\n .cta-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n max-width: 560px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n .cta-form input,\n .cta-form textarea {\n width: 100%;\n padding: 14px 18px;\n border-radius: 10px;\n border: 1px solid rgba(255,255,255,0.12);\n background: rgba(255,255,255,0.06);\n color: #fff;\n font-size: 14px;\n font-family: 'Inter', sans-serif;\n transition: border-color 0.3s;\n outline: none;\n }\n\n .cta-form input::placeholder,\n .cta-form textarea::placeholder {\n color: rgba(255,255,255,0.35);\n }\n\n .cta-form input:focus,\n .cta-form textarea:focus {\n border-color: var(--azzurro);\n }\n\n .cta-form textarea {\n grid-column: 1 \/ -1;\n resize: vertical;\n min-height: 100px;\n }\n\n .cta-form .btn-primary {\n grid-column: 1 \/ -1;\n justify-content: center;\n padding: 16px;\n font-size: 16px;\n }\n\n \/* ========== FOOTER ========== *\/\n .footer {\n padding: 48px 40px 24px;\n background: var(--scuro);\n color: rgba(255,255,255,0.5);\n }\n\n .footer-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n .footer-brand {\n font-size: 20px;\n font-weight: 800;\n color: #fff;\n }\n\n .footer-brand span {\n color: var(--arancione);\n }\n\n .footer-info {\n font-size: 13px;\n line-height: 1.8;\n text-align: center;\n }\n\n .footer-info a {\n color: var(--azzurro);\n text-decoration: none;\n }\n\n .footer-socials {\n display: flex;\n gap: 12px;\n }\n\n .footer-socials a {\n width: 38px;\n height: 38px;\n border-radius: 10px;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgba(255,255,255,0.6);\n text-decoration: none;\n font-size: 16px;\n transition: all 0.3s;\n }\n\n .footer-socials a:hover {\n background: var(--azzurro);\n border-color: var(--azzurro);\n color: #fff;\n }\n\n .footer-bottom {\n max-width: 1200px;\n margin: 24px auto 0;\n padding-top: 20px;\n border-top: 1px solid rgba(255,255,255,0.06);\n text-align: center;\n font-size: 12px;\n }\n\n \/* ========== RESPONSIVE ========== *\/\n @media (max-width: 1024px) {\n .hero-content {\n grid-template-columns: 1fr;\n text-align: center;\n gap: 40px;\n }\n .hero h1 { font-size: 42px; }\n .hero-subtitle { font-size: 19px; }\n .hero-text { margin: 0 auto 36px; }\n .hero-buttons { justify-content: center; }\n .stats-inner { grid-template-columns: repeat(2, 1fr); }\n .features-grid { grid-template-columns: repeat(2, 1fr); }\n .sectors-grid { grid-template-columns: repeat(2, 1fr); }\n .advantages-grid { grid-template-columns: 1fr; }\n .showcase-3d-grid { grid-template-columns: 1fr; }\n .tools-grid { grid-template-columns: repeat(2, 1fr); }\n .studio-features { grid-template-columns: repeat(2, 1fr); }\n .studio-banner { flex-direction: column; text-align: center; }\n .workflow-steps { flex-wrap: wrap; gap: 32px; }\n .workflow-steps::before { display: none; }\n }\n\n @media (max-width: 640px) {\n .hero h1 { font-size: 32px; }\n .hero-content { padding: 60px 20px; }\n .features, .sectors, .advantages, .cta-section { padding: 60px 20px; }\n .section-header h2 { font-size: 28px; }\n .stats-inner { grid-template-columns: 1fr 1fr; transform: translateY(-30px); }\n .stat-number { font-size: 28px; }\n .features-grid, .sectors-grid { grid-template-columns: 1fr; }\n .tools-grid { grid-template-columns: 1fr; }\n .studio-features { grid-template-columns: 1fr; }\n .showcase-3d, .tools-section, .studio-3d, .workflow { padding: 60px 20px; }\n .cta-inner { padding: 40px 24px; }\n .cta-inner h2 { font-size: 26px; }\n .cta-form { grid-template-columns: 1fr; }\n .footer-inner { flex-direction: column; text-align: center; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <section class=\"hero\">\n <div class=\"hero-content\">\n <div class=\"hero-text-side\">\n <div class=\"hero-badge\">Piattaforma Cloud<\/div>\n <h1>QUOTE<span>PRO<\/span><\/h1>\n <p class=\"hero-subtitle\">La soluzione integrata per Aziende, Agenti e Rivenditori<\/p>\n <p class=\"hero-text\">Semplifica il processo di creazione e gestione dei preventivi, garantendo comunicazione chiara e flusso di lavoro senza intoppi.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"#demo\" class=\"btn btn-primary\">Richiedi una Demo →<\/a>\n <a href=\"#features\" class=\"btn btn-outline\">Scopri di più<\/a>\n <\/div>\n <\/div>\n <div class=\"hero-visual\">\n <div class=\"hero-glow\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/ts2informatica.com\/wp-content\/uploads\/2024\/01\/macbook_mocku-1024x589.png\" alt=\"QuotePro Dashboard\" class=\"hero-mockup\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"stats-bar\">\n <div class=\"stats-inner\">\n <div class=\"stat-item\">\n <div class=\"stat-number\">100%<\/div>\n <div class=\"stat-label\">Cloud Based<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">3x<\/div>\n <div class=\"stat-label\">Più veloce nei preventivi<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">360°<\/div>\n <div class=\"stat-label\">Visione completa<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">24\/7<\/div>\n <div class=\"stat-label\">Sempre accessibile<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"features\" id=\"features\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Funzionalità<\/div>\n <h2>Tutto ciò che serve per gestire i preventivi<\/h2>\n <p>Una piattaforma completa e intuitiva che semplifica ogni fase del processo commerciale.<\/p>\n <\/div>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon blue\">⚡<\/div>\n <h3>Creazione intuitiva<\/h3>\n <p>Gli agenti creano preventivi personalizzati in pochi click, riducendo i tempi di preparazione e aumentando la produttività.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon orange\">🤝<\/div>\n <h3>Collaborazione efficiente<\/h3>\n <p>Facilita la collaborazione tra azienda e agenti con una comunicazione diretta, trasparente e in tempo reale.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon blue\">📦<\/div>\n <h3>Gestione rivenditori<\/h3>\n <p>Gestione dell’inventario semplificata e creazione di preventivi rapidi per i clienti finali.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon orange\">⚙<\/div>\n <h3>Processo integrato<\/h3>\n <p>Garanzia di coerenza nelle offerte e semplificazione della gestione di prodotti e servizi aziendali.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon blue\">📈<\/div>\n <h3>Aumento delle vendite<\/h3>\n <p>Preventivi chiari e professionali aumentano la probabilità di chiusura e la fiducia del cliente.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon orange\">📊<\/div>\n <h3>Tracciabilità e analisi<\/h3>\n <p>Accesso ad analisi delle prestazioni per il monitoraggio e l’ottimizzazione delle strategie di vendita.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"sectors\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Settori<\/div>\n <h2>Pensato per il tuo mercato<\/h2>\n <p>QuotePro si adatta alle esigenze specifiche di diversi settori industriali e commerciali.<\/p>\n <\/div>\n <div class=\"sectors-grid\">\n <div class=\"sector-card\">\n <div class=\"sector-icon\">🏭<\/div>\n <h3>Produzione e Distribuzione<\/h3>\n <p>Gestisci cataloghi complessi, configurazioni prodotto e listini personalizzati per ogni canale distributivo.<\/p>\n <\/div>\n <div class=\"sector-card\">\n <div class=\"sector-icon\">💼<\/div>\n <h3>Settore Vendite<\/h3>\n <p>Dota la tua rete commerciale di uno strumento potente per creare offerte professionali ovunque si trovino.<\/p>\n <\/div>\n <div class=\"sector-card\">\n <div class=\"sector-icon\">🛒<\/div>\n <h3>Commercio e Retail<\/h3>\n <p>Semplifica la gestione dei preventivi all’ingrosso e al dettaglio con un’unica piattaforma centralizzata.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"showcase-3d\">\n <div class=\"showcase-3d-grid\">\n <div class=\"showcase-3d-visual\">\n <div class=\"showcase-3d-grid-bg\"><\/div>\n <div class=\"showcase-3d-grid-lines\"><\/div>\n <div class=\"showcase-3d-canvas\">\n <div class=\"cube-3d\">\n <div class=\"cube-face\">📦<\/div>\n <div class=\"cube-face\">⚙<\/div>\n <div class=\"cube-face\">👁<\/div>\n <div class=\"cube-face\">🎨<\/div>\n <div class=\"cube-face\"><\/div>\n <div class=\"cube-face\"><\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-3d-badge\">Three.js WebGL<\/div>\n <div class=\"showcase-3d-toolbar\">\n <div class=\"toolbar-dot\" title=\"Vista Frontale\">F<\/div>\n <div class=\"toolbar-dot\" title=\"Vista Laterale\">L<\/div>\n <div class=\"toolbar-dot\" title=\"Vista Dall'alto\">T<\/div>\n <div class=\"toolbar-dot\" title=\"Ruota\">↻<\/div>\n <div class=\"toolbar-dot\" title=\"Esplodi\">✶<\/div>\n <div class=\"toolbar-dot\" title=\"Screenshot\">📷<\/div>\n <div class=\"toolbar-dot\" title=\"Wireframe\">▦<\/div>\n <div class=\"toolbar-dot\" title=\"Fullscreen\">⛶<\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"section-header\" style=\"text-align:left; margin-bottom:16px;\">\n <div class=\"section-tag\">Anteprima 3D Interattiva<\/div>\n <h2>Il prodotto prende vita davanti ai tuoi occhi<\/h2>\n <p>Visualizza in tempo reale ogni configurazione con un viewer 3D integrato direttamente nel preventivo.<\/p>\n <\/div>\n <div class=\"feature-highlights\">\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-blue\">👁<\/div>\n <div>\n <h4>Viste predefinite e libere<\/h4>\n <p>Frontale, laterale, dall’alto o ruota liberamente il modello con il mouse. Zoom, pan e orbita a portata di click.<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-orange\">✶<\/div>\n <div>\n <h4>Vista esplosa e wireframe<\/h4>\n <p>Scopri i singoli componenti con l’esplosione animata o analizza la struttura in modalità wireframe.<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-blue\">📷<\/div>\n <div>\n <h4>Screenshot e dimensioni<\/h4>\n <p>Cattura immagini HD del prodotto configurato e visualizza le quote dimensionali direttamente nella scena.<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-orange\">🎨<\/div>\n <div>\n <h4>Materiali e ambienti realistici<\/h4>\n <p>Cambia texture, colori e ambienti HDRI per mostrare il prodotto nella luce migliore, con rendering PBR.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"tools-section\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Strumenti Professionali<\/div>\n <h2>Dalla configurazione alla documentazione<\/h2>\n <p>Tutto ciò che serve per trasformare una configurazione in un preventivo completo e professionale.<\/p>\n <\/div>\n <div class=\"tools-grid\">\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-blue\">📄<\/div>\n <h3>Schede Tecniche<\/h3>\n <p>Genera automaticamente schede tecniche dettagliate con tutte le specifiche del prodotto configurato.<\/p>\n <span class=\"tool-card-tag tag-blue\">Auto-generazione<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-orange\">🗎<\/div>\n <h3>Esportazione PDF<\/h3>\n <p>Preventivi, schede prodotto e documentazione esportabili in PDF professionali pronti per il cliente.<\/p>\n <span class=\"tool-card-tag tag-orange\">One-click<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-blue\">📑<\/div>\n <h3>Report Avanzati<\/h3>\n <p>Report personalizzabili con grafici, statistiche e analisi delle vendite per decisioni data-driven.<\/p>\n <span class=\"tool-card-tag tag-blue\">DevExpress<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-orange\">🌐<\/div>\n <h3>Multilingua<\/h3>\n <p>Preventivi e documentazione in più lingue per servire clienti internazionali senza barriere.<\/p>\n <span class=\"tool-card-tag tag-orange\">Globale<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-gradient\">⚙<\/div>\n <h3>Configuratore Prodotto<\/h3>\n <p>Configura ogni attributo del prodotto con vincoli tecnici automatici che prevengono errori e incompatibilità.<\/p>\n <span class=\"tool-card-tag tag-blue\">Regole smart<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-blue\">💰<\/div>\n <h3>Calcolo Prezzi<\/h3>\n <p>Listini, maggiorazioni, sconti e costi di manodopera calcolati in tempo reale durante la configurazione.<\/p>\n <span class=\"tool-card-tag tag-blue\">Real-time<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-orange\">👥<\/div>\n <h3>Gestione Clienti<\/h3>\n <p>Anagrafica clienti completa con storico preventivi, preferenze e condizioni commerciali personalizzate.<\/p>\n <span class=\"tool-card-tag tag-orange\">CRM integrato<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-gradient\">🔒<\/div>\n <h3>Ruoli e Permessi<\/h3>\n <p>Controllo granulare degli accessi per azienda, agenti e rivenditori con permessi personalizzabili.<\/p>\n <span class=\"tool-card-tag tag-orange\">Sicurezza<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"studio-3d\">\n <div class=\"section-header\">\n <div class=\"section-tag\">3D Studio Integrato<\/div>\n <h2>Crea e gestisci i modelli 3D direttamente nell’applicazione<\/h2>\n <p>Un ambiente completo per importare, comporre e configurare modelli 3D parametrici senza uscire dalla piattaforma.<\/p>\n <\/div>\n\n <div class=\"studio-features\">\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-blue\">✎<\/div>\n <h3>Editor 3D integrato<\/h3>\n <\/div>\n <p>Crea e modifica modelli 3D direttamente nel browser con l’editor WebGL integrato. Importa file GLTF\/GLB, esplora la gerarchia dei nodi e salva le modifiche con un click.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">GLTF<\/span>\n <span class=\"studio-mini-tag highlight\">GLB<\/span>\n <span class=\"studio-mini-tag\">Upload drag & drop<\/span>\n <span class=\"studio-mini-tag\">Esporta GLB<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-orange\">📦<\/div>\n <h3>Composizione modulare<\/h3>\n <\/div>\n <p>Assembla modelli complessi combinando più moduli 3D. Ogni modulo si aggancia a un nodo di riferimento del modello base con posizione, rotazione e scala configurabili.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight-orange\">Moduli<\/span>\n <span class=\"studio-mini-tag highlight-orange\">Snap a nodo<\/span>\n <span class=\"studio-mini-tag\">Offset XYZ<\/span>\n <span class=\"studio-mini-tag\">Priorità<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-gradient\">🔭<\/div>\n <h3>Regole per nodo<\/h3>\n <\/div>\n <p>Applica regole di visibilità, scala, posizione, rotazione e materiale ai singoli nodi del modello. Ogni regola può essere condizionata agli attributi del prodotto configurato.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">Visibilità<\/span>\n <span class=\"studio-mini-tag highlight\">Scala<\/span>\n <span class=\"studio-mini-tag highlight\">Materiale<\/span>\n <span class=\"studio-mini-tag\">Condizionale<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-blue\">🎨<\/div>\n <h3>Libreria texture<\/h3>\n <\/div>\n <p>Gestisci una libreria centralizzata di texture organizzata per categorie. Applica texture ai materiali dei nodi e collegale agli attributi colore del prodotto per cambio dinamico.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">Categorie<\/span>\n <span class=\"studio-mini-tag\">Anteprima<\/span>\n <span class=\"studio-mini-tag\">PBR<\/span>\n <span class=\"studio-mini-tag\">Colori dinamici<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-orange\">📐<\/div>\n <h3>Formule parametriche<\/h3>\n <\/div>\n <p>Usa formule come <strong style=\"color:var(--arancione)\">{Larghezza}<\/strong>, <strong style=\"color:var(--arancione)\">{Altezza}<\/strong>, <strong style=\"color:var(--arancione)\">{Spessore}<\/strong> nei valori di scala, posizione e offset dei moduli. Il modello si adatta automaticamente alle dimensioni scelte dal cliente.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight-orange\">{Larghezza}\/2<\/span>\n <span class=\"studio-mini-tag highlight-orange\">{Altezza}*0.8<\/span>\n <span class=\"studio-mini-tag\">Espressioni math<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-gradient\">🔗<\/div>\n <h3>Selezione condizionale<\/h3>\n <\/div>\n <p>Associa modelli 3D diversi alla stessa famiglia di prodotti con condizioni AND\/OR basate su attributi e dimensioni. Il sistema sceglie automaticamente il modello corretto in fase di configurazione.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">AND \/ OR<\/span>\n <span class=\"studio-mini-tag\">Per famiglia<\/span>\n <span class=\"studio-mini-tag\">Priorità<\/span>\n <span class=\"studio-mini-tag\">Multi-variante<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"studio-banner\">\n <div class=\"studio-banner-icon\">🛠<\/div>\n <div>\n <h4>Zero competenze 3D richieste<\/h4>\n <p>L’interfaccia visuale con albero dei nodi, anteprima in tempo reale e configurazione punta-e-clicca permette a chiunque di gestire modelli 3D parametrici. Importa il modello dal tuo progettista, configura regole e moduli, e il gioco è fatto.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"workflow\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Come funziona<\/div>\n <h2>Dal prodotto al preventivo in 5 passi<\/h2>\n <p>Un flusso di lavoro semplice e lineare che guida agenti e rivenditori verso la chiusura.<\/p>\n <\/div>\n <div class=\"workflow-steps\">\n <div class=\"workflow-step\">\n <div class=\"step-circle\">🔎<\/div>\n <div class=\"step-num\">Passo 1<\/div>\n <h4>Scegli il prodotto<\/h4>\n <p>Seleziona la famiglia di prodotti dal catalogo.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">⚙<\/div>\n <div class=\"step-num\">Passo 2<\/div>\n <h4>Configura<\/h4>\n <p>Personalizza ogni attributo con vincoli automatici.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">👁<\/div>\n <div class=\"step-num\">Passo 3<\/div>\n <h4>Visualizza in 3D<\/h4>\n <p>Verifica il risultato con l’anteprima 3D interattiva.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">💰<\/div>\n <div class=\"step-num\">Passo 4<\/div>\n <h4>Ottieni il prezzo<\/h4>\n <p>Il prezzo si aggiorna in tempo reale con sconti e listini.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">📄<\/div>\n <div class=\"step-num\">Passo 5<\/div>\n <h4>Genera il preventivo<\/h4>\n <p>Esporta PDF completo con scheda tecnica e immagini 3D.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"advantages\">\n <div class=\"advantages-grid\">\n <div>\n <div class=\"section-header\" style=\"text-align:left; margin-bottom:40px;\">\n <div class=\"section-tag\">Vantaggi<\/div>\n <h2>Perché scegliere QuotePro<\/h2>\n <p>Funzionalità pensate per fare la differenza nel tuo processo commerciale.<\/p>\n <\/div>\n <div class=\"advantages-list\">\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Trasparenza totale<\/h4>\n <p>Panoramica completa con dettagli tecnici nel preventivo finale. Nessun dato nascosto, tutto chiaro e verificabile.<\/p>\n <\/div>\n <\/div>\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Conferma istantanea<\/h4>\n <p>Il cliente visualizza un’anteprima completa del preventivo senza incertezze, accelerando la decisione d’acquisto.<\/p>\n <\/div>\n <\/div>\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Differenziazione competitiva<\/h4>\n <p>Offri un’esperienza di configurazione avanzata che ti distingue dalla concorrenza e valorizza il tuo brand.<\/p>\n <\/div>\n <\/div>\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Accessibilità cloud<\/h4>\n <p>Lavora da qualsiasi dispositivo, ovunque ti trovi. I dati sono sempre sincronizzati e al sicuro.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"advantages-visual\">\n <div class=\"advantages-visual-box\">\n <div class=\"visual-big-icon\">🚀<\/div>\n <div class=\"visual-title\">Pronto in pochi giorni<\/div>\n <div class=\"visual-sub\">Setup rapido, formazione inclusa e supporto dedicato per partire subito.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta-section\" id=\"demo\">\n <div class=\"cta-inner\">\n <h2>Richiedi una Demo Gratuita<\/h2>\n <p>Scopri come QuotePro può trasformare il tuo processo di preventivazione. Contattaci per una dimostrazione personalizzata.<\/p>\n<a href=\"https:\/\/ts2informatica.com\/index.php\/contatti\/\" class=\"btn btn-primary\" style=\"margin-top:12px; font-size:17px; padding:18px 44px;\">Contattaci →<\/a>\n <\/div>\n <\/section>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>QUOTEPRO – TS2 Informatica Piattaforma Cloud QUOTEPRO La soluzione integrata per Aziende, Agenti e Rivenditori Semplifica il processo di creazione e gestione dei preventivi, garantendo comunicazione chiara e flusso di lavoro senza intoppi. Richiedi una Demo → Scopri di più 100% Cloud Based 3x Più veloce nei preventivi 360° Visione completa 24\/7 Sempre accessibile Funzionalità […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages\/468"}],"collection":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/comments?post=468"}],"version-history":[{"count":5,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages\/468\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages\/468\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/media?parent=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":468,"date":"2026-02-16T12:14:46","date_gmt":"2026-02-16T12:14:46","guid":{"rendered":"https:\/\/ts2informatica.com\/?page_id=468"},"modified":"2026-02-16T14:33:56","modified_gmt":"2026-02-16T14:33:56","slug":"quotepro","status":"publish","type":"page","link":"https:\/\/ts2informatica.com\/index.php\/quotepro\/","title":{"rendered":"QuotePro"},"content":{"rendered":"\n\n\n\n \n \n QUOTEPRO – TS2 Informatica<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --arancione: #ff6900;\n --arancione-scuro: #e55d00;\n --azzurro: #0693e3;\n --azzurro-scuro: #0578b9;\n --grigio-chiaro: #f7f8fc;\n --grigio-testo: #555;\n --scuro: #1a1a2e;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n color: #333;\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* ========== HERO ========== *\/\n .hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, var(--scuro) 0%, #16213e 50%, #0a1628 100%);\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -20%;\n width: 800px;\n height: 800px;\n background: radial-gradient(circle, rgba(6,147,227,0.15) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .hero::after {\n content: '';\n position: absolute;\n bottom: -30%;\n left: -10%;\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(255,105,0,0.1) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .hero-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 80px 40px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n position: relative;\n z-index: 1;\n }\n\n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,105,0,0.15);\n border: 1px solid rgba(255,105,0,0.3);\n color: var(--arancione);\n padding: 6px 16px;\n border-radius: 50px;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n margin-bottom: 24px;\n }\n\n .hero-badge::before {\n content: '';\n width: 8px;\n height: 8px;\n background: var(--arancione);\n border-radius: 50%;\n animation: pulse-dot 2s infinite;\n }\n\n @keyframes pulse-dot {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n\n .hero h1 {\n font-size: 56px;\n font-weight: 800;\n color: #fff;\n line-height: 1.1;\n margin-bottom: 12px;\n }\n\n .hero h1 span {\n background: linear-gradient(135deg, var(--arancione), #ffaa00);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero-subtitle {\n font-size: 22px;\n color: rgba(255,255,255,0.7);\n font-weight: 300;\n margin-bottom: 24px;\n }\n\n .hero-text {\n font-size: 16px;\n color: rgba(255,255,255,0.5);\n margin-bottom: 36px;\n max-width: 480px;\n }\n\n .hero-buttons {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 600;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n border: none;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, var(--arancione), #ff8a00);\n color: #fff;\n box-shadow: 0 4px 20px rgba(255,105,0,0.4);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(255,105,0,0.5);\n }\n\n .btn-outline {\n background: rgba(255,255,255,0.05);\n color: #fff;\n border: 1px solid rgba(255,255,255,0.2);\n }\n\n .btn-outline:hover {\n background: rgba(255,255,255,0.1);\n border-color: rgba(255,255,255,0.4);\n }\n\n .hero-visual {\n position: relative;\n display: flex;\n justify-content: center;\n }\n\n .hero-mockup {\n width: 100%;\n max-width: 580px;\n border-radius: 12px;\n filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5));\n animation: float 6s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-15px); }\n }\n\n .hero-glow {\n position: absolute;\n width: 400px;\n height: 400px;\n background: radial-gradient(circle, rgba(6,147,227,0.2) 0%, transparent 70%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -1;\n }\n\n \/* ========== STATS BAR ========== *\/\n .stats-bar {\n background: #fff;\n padding: 0 40px;\n position: relative;\n z-index: 2;\n }\n\n .stats-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 0;\n transform: translateY(-50%);\n background: #fff;\n border-radius: 16px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.08);\n overflow: hidden;\n }\n\n .stat-item {\n padding: 32px 24px;\n text-align: center;\n border-right: 1px solid #f0f0f0;\n }\n\n .stat-item:last-child {\n border-right: none;\n }\n\n .stat-number {\n font-size: 36px;\n font-weight: 800;\n background: linear-gradient(135deg, var(--azzurro), var(--arancione));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .stat-label {\n font-size: 14px;\n color: var(--grigio-testo);\n margin-top: 4px;\n }\n\n \/* ========== FEATURES ========== *\/\n .features {\n padding: 60px 40px 100px;\n background: #fff;\n }\n\n .section-header {\n text-align: center;\n max-width: 640px;\n margin: 0 auto 64px;\n }\n\n .section-tag {\n display: inline-block;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--azzurro);\n margin-bottom: 12px;\n }\n\n .section-header h2 {\n font-size: 40px;\n font-weight: 800;\n color: var(--scuro);\n margin-bottom: 16px;\n line-height: 1.2;\n }\n\n .section-header p {\n font-size: 17px;\n color: var(--grigio-testo);\n }\n\n .features-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n }\n\n .feature-card {\n padding: 36px 28px;\n border-radius: 16px;\n background: var(--grigio-chiaro);\n border: 1px solid #eef0f5;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .feature-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--azzurro), var(--arancione));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .feature-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 32px rgba(0,0,0,0.08);\n border-color: transparent;\n }\n\n .feature-card:hover::before {\n opacity: 1;\n }\n\n .feature-icon {\n width: 52px;\n height: 52px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n font-size: 24px;\n }\n\n .feature-icon.blue {\n background: rgba(6,147,227,0.1);\n color: var(--azzurro);\n }\n\n .feature-icon.orange {\n background: rgba(255,105,0,0.1);\n color: var(--arancione);\n }\n\n .feature-card h3 {\n font-size: 18px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 10px;\n }\n\n .feature-card p {\n font-size: 14px;\n color: var(--grigio-testo);\n line-height: 1.7;\n }\n\n \/* ========== SETTORI ========== *\/\n .sectors {\n padding: 100px 40px;\n background: linear-gradient(135deg, var(--scuro) 0%, #16213e 100%);\n position: relative;\n }\n\n .sectors .section-tag {\n color: var(--arancione);\n }\n\n .sectors .section-header h2 {\n color: #fff;\n }\n\n .sectors .section-header p {\n color: rgba(255,255,255,0.6);\n }\n\n .sectors-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n }\n\n .sector-card {\n padding: 40px 32px;\n border-radius: 16px;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.08);\n text-align: center;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n }\n\n .sector-card:hover {\n background: rgba(255,255,255,0.08);\n border-color: rgba(255,255,255,0.15);\n transform: translateY(-4px);\n }\n\n .sector-icon {\n font-size: 40px;\n margin-bottom: 20px;\n }\n\n .sector-card h3 {\n font-size: 20px;\n font-weight: 700;\n color: #fff;\n margin-bottom: 12px;\n }\n\n .sector-card p {\n font-size: 14px;\n color: rgba(255,255,255,0.5);\n line-height: 1.7;\n }\n\n \/* ========== VANTAGGI ========== *\/\n .advantages {\n padding: 100px 40px;\n background: #fff;\n }\n\n .advantages-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n }\n\n .advantages-list {\n display: flex;\n flex-direction: column;\n gap: 28px;\n }\n\n .advantage-item {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n }\n\n .advantage-check {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n background: linear-gradient(135deg, var(--azzurro), #38b6ff);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #fff;\n font-size: 18px;\n }\n\n .advantage-item h4 {\n font-size: 17px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 4px;\n }\n\n .advantage-item p {\n font-size: 14px;\n color: var(--grigio-testo);\n line-height: 1.6;\n }\n\n .advantages-visual {\n position: relative;\n }\n\n .advantages-visual-box {\n background: linear-gradient(135deg, var(--grigio-chiaro), #eef2ff);\n border-radius: 20px;\n padding: 48px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .advantages-visual-box::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n background: linear-gradient(135deg, var(--azzurro), var(--arancione));\n border-radius: 22px;\n z-index: -1;\n opacity: 0.3;\n }\n\n .visual-big-icon {\n font-size: 80px;\n margin-bottom: 20px;\n }\n\n .visual-title {\n font-size: 24px;\n font-weight: 800;\n color: var(--scuro);\n margin-bottom: 8px;\n }\n\n .visual-sub {\n font-size: 15px;\n color: var(--grigio-testo);\n }\n\n \/* ========== SHOWCASE 3D ========== *\/\n .showcase-3d {\n padding: 100px 40px;\n background: #fff;\n overflow: hidden;\n }\n\n .showcase-3d-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n }\n\n .showcase-3d-visual {\n position: relative;\n border-radius: 20px;\n overflow: hidden;\n aspect-ratio: 4\/3;\n background: linear-gradient(135deg, #0d1b2a, #1b2838);\n box-shadow: 0 20px 60px rgba(0,0,0,0.2);\n }\n\n .showcase-3d-canvas {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .cube-3d {\n width: 120px;\n height: 120px;\n position: relative;\n transform-style: preserve-3d;\n animation: rotateCube 12s linear infinite;\n }\n\n .cube-face {\n position: absolute;\n width: 120px;\n height: 120px;\n border: 2px solid rgba(6,147,227,0.4);\n background: rgba(6,147,227,0.06);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n }\n\n .cube-face:nth-child(1) { transform: rotateY(0deg) translateZ(60px); }\n .cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(60px); }\n .cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(60px); }\n .cube-face:nth-child(4) { transform: rotateY(270deg) translateZ(60px); }\n .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(60px); }\n .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(60px); }\n\n @keyframes rotateCube {\n 0% { transform: rotateX(-20deg) rotateY(0deg); }\n 100% { transform: rotateX(-20deg) rotateY(360deg); }\n }\n\n .showcase-3d-grid-bg {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 50%;\n background: linear-gradient(to top, rgba(6,147,227,0.08), transparent);\n }\n\n .showcase-3d-grid-lines {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 40%;\n background-image:\n linear-gradient(rgba(6,147,227,0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(6,147,227,0.1) 1px, transparent 1px);\n background-size: 30px 30px;\n transform: perspective(300px) rotateX(50deg);\n transform-origin: bottom;\n }\n\n .showcase-3d-toolbar {\n position: absolute;\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 6px;\n background: rgba(0,0,0,0.5);\n backdrop-filter: blur(10px);\n padding: 8px 14px;\n border-radius: 12px;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n .toolbar-dot {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.15);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n color: rgba(255,255,255,0.5);\n transition: all 0.3s;\n cursor: default;\n }\n\n .toolbar-dot:hover {\n background: rgba(6,147,227,0.3);\n border-color: var(--azzurro);\n color: #fff;\n }\n\n .showcase-3d-badge {\n position: absolute;\n top: 16px;\n left: 16px;\n background: rgba(255,105,0,0.2);\n border: 1px solid rgba(255,105,0,0.3);\n color: var(--arancione);\n padding: 4px 12px;\n border-radius: 8px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .feature-highlights {\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-top: 32px;\n }\n\n .feature-highlight {\n display: flex;\n gap: 16px;\n align-items: flex-start;\n padding: 16px;\n border-radius: 12px;\n transition: background 0.3s;\n }\n\n .feature-highlight:hover {\n background: var(--grigio-chiaro);\n }\n\n .fh-icon {\n width: 44px;\n height: 44px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n font-size: 20px;\n }\n\n .fh-icon.gradient-blue {\n background: linear-gradient(135deg, var(--azzurro), #38b6ff);\n color: #fff;\n }\n\n .fh-icon.gradient-orange {\n background: linear-gradient(135deg, var(--arancione), #ffaa00);\n color: #fff;\n }\n\n .feature-highlight h4 {\n font-size: 15px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 2px;\n }\n\n .feature-highlight p {\n font-size: 13px;\n color: var(--grigio-testo);\n line-height: 1.5;\n }\n\n \/* ========== STRUMENTI PROFESSIONALI ========== *\/\n .tools-section {\n padding: 100px 40px;\n background: var(--grigio-chiaro);\n }\n\n .tools-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n }\n\n .tool-card {\n background: #fff;\n border-radius: 16px;\n padding: 32px 24px;\n text-align: center;\n border: 1px solid #eef0f5;\n transition: all 0.3s ease;\n position: relative;\n }\n\n .tool-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 16px 40px rgba(0,0,0,0.08);\n }\n\n .tool-card-icon {\n width: 64px;\n height: 64px;\n border-radius: 16px;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n }\n\n .tool-card-icon.tc-blue {\n background: linear-gradient(135deg, rgba(6,147,227,0.12), rgba(6,147,227,0.04));\n color: var(--azzurro);\n }\n\n .tool-card-icon.tc-orange {\n background: linear-gradient(135deg, rgba(255,105,0,0.12), rgba(255,105,0,0.04));\n color: var(--arancione);\n }\n\n .tool-card-icon.tc-gradient {\n background: linear-gradient(135deg, var(--azzurro), var(--arancione));\n color: #fff;\n }\n\n .tool-card h3 {\n font-size: 16px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 8px;\n }\n\n .tool-card p {\n font-size: 13px;\n color: var(--grigio-testo);\n line-height: 1.6;\n }\n\n .tool-card-tag {\n display: inline-block;\n margin-top: 14px;\n font-size: 11px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: 6px;\n letter-spacing: 0.5px;\n }\n\n .tag-blue {\n background: rgba(6,147,227,0.1);\n color: var(--azzurro);\n }\n\n .tag-orange {\n background: rgba(255,105,0,0.1);\n color: var(--arancione);\n }\n\n \/* ========== 3D STUDIO ========== *\/\n .studio-3d {\n padding: 100px 40px;\n background: linear-gradient(135deg, #0a1628 0%, var(--scuro) 50%, #16213e 100%);\n position: relative;\n overflow: hidden;\n }\n\n .studio-3d::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 900px;\n height: 900px;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle, rgba(6,147,227,0.06) 0%, transparent 60%);\n border-radius: 50%;\n }\n\n .studio-3d .section-tag { color: var(--arancione); }\n .studio-3d .section-header h2 { color: #fff; }\n .studio-3d .section-header p { color: rgba(255,255,255,0.55); }\n\n .studio-tabs {\n max-width: 1200px;\n margin: 0 auto 48px;\n display: flex;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n position: relative;\n z-index: 1;\n }\n\n .studio-tab {\n padding: 10px 22px;\n border-radius: 50px;\n border: 1px solid rgba(255,255,255,0.1);\n background: rgba(255,255,255,0.04);\n color: rgba(255,255,255,0.5);\n font-size: 13px;\n font-weight: 600;\n cursor: default;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .studio-tab:hover {\n border-color: rgba(255,255,255,0.25);\n color: rgba(255,255,255,0.8);\n }\n\n .studio-tab.active {\n background: linear-gradient(135deg, var(--azzurro), #38b6ff);\n border-color: transparent;\n color: #fff;\n }\n\n .studio-features {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n position: relative;\n z-index: 1;\n }\n\n .studio-card {\n border-radius: 16px;\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.07);\n padding: 32px 28px;\n transition: all 0.3s ease;\n backdrop-filter: blur(8px);\n position: relative;\n overflow: hidden;\n }\n\n .studio-card::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--azzurro), var(--arancione));\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .studio-card:hover {\n background: rgba(255,255,255,0.06);\n border-color: rgba(255,255,255,0.12);\n transform: translateY(-4px);\n }\n\n .studio-card:hover::after {\n opacity: 1;\n }\n\n .studio-card-header {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 16px;\n }\n\n .studio-card-icon {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n flex-shrink: 0;\n }\n\n .sci-blue {\n background: rgba(6,147,227,0.15);\n color: var(--azzurro);\n }\n\n .sci-orange {\n background: rgba(255,105,0,0.15);\n color: var(--arancione);\n }\n\n .sci-gradient {\n background: linear-gradient(135deg, rgba(6,147,227,0.2), rgba(255,105,0,0.2));\n color: #fff;\n }\n\n .studio-card h3 {\n font-size: 17px;\n font-weight: 700;\n color: #fff;\n }\n\n .studio-card > p {\n font-size: 14px;\n color: rgba(255,255,255,0.45);\n line-height: 1.7;\n margin-bottom: 18px;\n }\n\n .studio-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n }\n\n .studio-mini-tag {\n font-size: 10px;\n font-weight: 600;\n padding: 3px 9px;\n border-radius: 5px;\n background: rgba(255,255,255,0.06);\n color: rgba(255,255,255,0.4);\n border: 1px solid rgba(255,255,255,0.08);\n letter-spacing: 0.3px;\n }\n\n .studio-mini-tag.highlight {\n background: rgba(6,147,227,0.12);\n border-color: rgba(6,147,227,0.25);\n color: var(--azzurro);\n }\n\n .studio-mini-tag.highlight-orange {\n background: rgba(255,105,0,0.12);\n border-color: rgba(255,105,0,0.25);\n color: var(--arancione);\n }\n\n .studio-banner {\n max-width: 1200px;\n margin: 40px auto 0;\n padding: 28px 36px;\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 16px;\n display: flex;\n align-items: center;\n gap: 20px;\n position: relative;\n z-index: 1;\n }\n\n .studio-banner-icon {\n font-size: 36px;\n flex-shrink: 0;\n }\n\n .studio-banner h4 {\n font-size: 16px;\n font-weight: 700;\n color: #fff;\n margin-bottom: 4px;\n }\n\n .studio-banner p {\n font-size: 13px;\n color: rgba(255,255,255,0.45);\n line-height: 1.6;\n }\n\n \/* ========== WORKFLOW ========== *\/\n .workflow {\n padding: 100px 40px;\n background: #fff;\n }\n\n .workflow-steps {\n max-width: 1000px;\n margin: 0 auto;\n display: flex;\n gap: 0;\n position: relative;\n }\n\n .workflow-steps::before {\n content: '';\n position: absolute;\n top: 40px;\n left: 60px;\n right: 60px;\n height: 3px;\n background: linear-gradient(90deg, var(--azzurro), var(--arancione));\n border-radius: 2px;\n }\n\n .workflow-step {\n flex: 1;\n text-align: center;\n position: relative;\n z-index: 1;\n }\n\n .step-circle {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: #fff;\n border: 3px solid #eee;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n font-size: 28px;\n transition: all 0.3s;\n }\n\n .workflow-step:hover .step-circle {\n border-color: var(--azzurro);\n box-shadow: 0 4px 20px rgba(6,147,227,0.2);\n transform: scale(1.08);\n }\n\n .step-num {\n font-size: 11px;\n font-weight: 800;\n color: var(--azzurro);\n letter-spacing: 1px;\n text-transform: uppercase;\n margin-bottom: 6px;\n }\n\n .workflow-step h4 {\n font-size: 15px;\n font-weight: 700;\n color: var(--scuro);\n margin-bottom: 6px;\n }\n\n .workflow-step p {\n font-size: 13px;\n color: var(--grigio-testo);\n max-width: 180px;\n margin: 0 auto;\n line-height: 1.5;\n }\n\n \/* ========== CTA \/ DEMO ========== *\/\n .cta-section {\n padding: 100px 40px;\n background: var(--grigio-chiaro);\n position: relative;\n }\n\n .cta-inner {\n max-width: 800px;\n margin: 0 auto;\n background: linear-gradient(135deg, var(--scuro), #16213e);\n border-radius: 24px;\n padding: 60px 48px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .cta-inner::before {\n content: '';\n position: absolute;\n top: -100px;\n right: -100px;\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, rgba(255,105,0,0.15) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .cta-inner::after {\n content: '';\n position: absolute;\n bottom: -80px;\n left: -80px;\n width: 250px;\n height: 250px;\n background: radial-gradient(circle, rgba(6,147,227,0.12) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n .cta-inner h2 {\n font-size: 36px;\n font-weight: 800;\n color: #fff;\n margin-bottom: 12px;\n position: relative;\n z-index: 1;\n }\n\n .cta-inner > p {\n color: rgba(255,255,255,0.6);\n font-size: 16px;\n margin-bottom: 36px;\n position: relative;\n z-index: 1;\n }\n\n .cta-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n max-width: 560px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n .cta-form input,\n .cta-form textarea {\n width: 100%;\n padding: 14px 18px;\n border-radius: 10px;\n border: 1px solid rgba(255,255,255,0.12);\n background: rgba(255,255,255,0.06);\n color: #fff;\n font-size: 14px;\n font-family: 'Inter', sans-serif;\n transition: border-color 0.3s;\n outline: none;\n }\n\n .cta-form input::placeholder,\n .cta-form textarea::placeholder {\n color: rgba(255,255,255,0.35);\n }\n\n .cta-form input:focus,\n .cta-form textarea:focus {\n border-color: var(--azzurro);\n }\n\n .cta-form textarea {\n grid-column: 1 \/ -1;\n resize: vertical;\n min-height: 100px;\n }\n\n .cta-form .btn-primary {\n grid-column: 1 \/ -1;\n justify-content: center;\n padding: 16px;\n font-size: 16px;\n }\n\n \/* ========== FOOTER ========== *\/\n .footer {\n padding: 48px 40px 24px;\n background: var(--scuro);\n color: rgba(255,255,255,0.5);\n }\n\n .footer-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n .footer-brand {\n font-size: 20px;\n font-weight: 800;\n color: #fff;\n }\n\n .footer-brand span {\n color: var(--arancione);\n }\n\n .footer-info {\n font-size: 13px;\n line-height: 1.8;\n text-align: center;\n }\n\n .footer-info a {\n color: var(--azzurro);\n text-decoration: none;\n }\n\n .footer-socials {\n display: flex;\n gap: 12px;\n }\n\n .footer-socials a {\n width: 38px;\n height: 38px;\n border-radius: 10px;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgba(255,255,255,0.6);\n text-decoration: none;\n font-size: 16px;\n transition: all 0.3s;\n }\n\n .footer-socials a:hover {\n background: var(--azzurro);\n border-color: var(--azzurro);\n color: #fff;\n }\n\n .footer-bottom {\n max-width: 1200px;\n margin: 24px auto 0;\n padding-top: 20px;\n border-top: 1px solid rgba(255,255,255,0.06);\n text-align: center;\n font-size: 12px;\n }\n\n \/* ========== RESPONSIVE ========== *\/\n @media (max-width: 1024px) {\n .hero-content {\n grid-template-columns: 1fr;\n text-align: center;\n gap: 40px;\n }\n .hero h1 { font-size: 42px; }\n .hero-subtitle { font-size: 19px; }\n .hero-text { margin: 0 auto 36px; }\n .hero-buttons { justify-content: center; }\n .stats-inner { grid-template-columns: repeat(2, 1fr); }\n .features-grid { grid-template-columns: repeat(2, 1fr); }\n .sectors-grid { grid-template-columns: repeat(2, 1fr); }\n .advantages-grid { grid-template-columns: 1fr; }\n .showcase-3d-grid { grid-template-columns: 1fr; }\n .tools-grid { grid-template-columns: repeat(2, 1fr); }\n .studio-features { grid-template-columns: repeat(2, 1fr); }\n .studio-banner { flex-direction: column; text-align: center; }\n .workflow-steps { flex-wrap: wrap; gap: 32px; }\n .workflow-steps::before { display: none; }\n }\n\n @media (max-width: 640px) {\n .hero h1 { font-size: 32px; }\n .hero-content { padding: 60px 20px; }\n .features, .sectors, .advantages, .cta-section { padding: 60px 20px; }\n .section-header h2 { font-size: 28px; }\n .stats-inner { grid-template-columns: 1fr 1fr; transform: translateY(-30px); }\n .stat-number { font-size: 28px; }\n .features-grid, .sectors-grid { grid-template-columns: 1fr; }\n .tools-grid { grid-template-columns: 1fr; }\n .studio-features { grid-template-columns: 1fr; }\n .showcase-3d, .tools-section, .studio-3d, .workflow { padding: 60px 20px; }\n .cta-inner { padding: 40px 24px; }\n .cta-inner h2 { font-size: 26px; }\n .cta-form { grid-template-columns: 1fr; }\n .footer-inner { flex-direction: column; text-align: center; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <section class=\"hero\">\n <div class=\"hero-content\">\n <div class=\"hero-text-side\">\n <div class=\"hero-badge\">Piattaforma Cloud<\/div>\n <h1>QUOTE<span>PRO<\/span><\/h1>\n <p class=\"hero-subtitle\">La soluzione integrata per Aziende, Agenti e Rivenditori<\/p>\n <p class=\"hero-text\">Semplifica il processo di creazione e gestione dei preventivi, garantendo comunicazione chiara e flusso di lavoro senza intoppi.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"#demo\" class=\"btn btn-primary\">Richiedi una Demo →<\/a>\n <a href=\"#features\" class=\"btn btn-outline\">Scopri di più<\/a>\n <\/div>\n <\/div>\n <div class=\"hero-visual\">\n <div class=\"hero-glow\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/ts2informatica.com\/wp-content\/uploads\/2024\/01\/macbook_mocku-1024x589.png\" alt=\"QuotePro Dashboard\" class=\"hero-mockup\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"stats-bar\">\n <div class=\"stats-inner\">\n <div class=\"stat-item\">\n <div class=\"stat-number\">100%<\/div>\n <div class=\"stat-label\">Cloud Based<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">3x<\/div>\n <div class=\"stat-label\">Più veloce nei preventivi<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">360°<\/div>\n <div class=\"stat-label\">Visione completa<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">24\/7<\/div>\n <div class=\"stat-label\">Sempre accessibile<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"features\" id=\"features\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Funzionalità<\/div>\n <h2>Tutto ciò che serve per gestire i preventivi<\/h2>\n <p>Una piattaforma completa e intuitiva che semplifica ogni fase del processo commerciale.<\/p>\n <\/div>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon blue\">⚡<\/div>\n <h3>Creazione intuitiva<\/h3>\n <p>Gli agenti creano preventivi personalizzati in pochi click, riducendo i tempi di preparazione e aumentando la produttività.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon orange\">🤝<\/div>\n <h3>Collaborazione efficiente<\/h3>\n <p>Facilita la collaborazione tra azienda e agenti con una comunicazione diretta, trasparente e in tempo reale.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon blue\">📦<\/div>\n <h3>Gestione rivenditori<\/h3>\n <p>Gestione dell’inventario semplificata e creazione di preventivi rapidi per i clienti finali.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon orange\">⚙<\/div>\n <h3>Processo integrato<\/h3>\n <p>Garanzia di coerenza nelle offerte e semplificazione della gestione di prodotti e servizi aziendali.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon blue\">📈<\/div>\n <h3>Aumento delle vendite<\/h3>\n <p>Preventivi chiari e professionali aumentano la probabilità di chiusura e la fiducia del cliente.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon orange\">📊<\/div>\n <h3>Tracciabilità e analisi<\/h3>\n <p>Accesso ad analisi delle prestazioni per il monitoraggio e l’ottimizzazione delle strategie di vendita.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"sectors\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Settori<\/div>\n <h2>Pensato per il tuo mercato<\/h2>\n <p>QuotePro si adatta alle esigenze specifiche di diversi settori industriali e commerciali.<\/p>\n <\/div>\n <div class=\"sectors-grid\">\n <div class=\"sector-card\">\n <div class=\"sector-icon\">🏭<\/div>\n <h3>Produzione e Distribuzione<\/h3>\n <p>Gestisci cataloghi complessi, configurazioni prodotto e listini personalizzati per ogni canale distributivo.<\/p>\n <\/div>\n <div class=\"sector-card\">\n <div class=\"sector-icon\">💼<\/div>\n <h3>Settore Vendite<\/h3>\n <p>Dota la tua rete commerciale di uno strumento potente per creare offerte professionali ovunque si trovino.<\/p>\n <\/div>\n <div class=\"sector-card\">\n <div class=\"sector-icon\">🛒<\/div>\n <h3>Commercio e Retail<\/h3>\n <p>Semplifica la gestione dei preventivi all’ingrosso e al dettaglio con un’unica piattaforma centralizzata.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"showcase-3d\">\n <div class=\"showcase-3d-grid\">\n <div class=\"showcase-3d-visual\">\n <div class=\"showcase-3d-grid-bg\"><\/div>\n <div class=\"showcase-3d-grid-lines\"><\/div>\n <div class=\"showcase-3d-canvas\">\n <div class=\"cube-3d\">\n <div class=\"cube-face\">📦<\/div>\n <div class=\"cube-face\">⚙<\/div>\n <div class=\"cube-face\">👁<\/div>\n <div class=\"cube-face\">🎨<\/div>\n <div class=\"cube-face\"><\/div>\n <div class=\"cube-face\"><\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-3d-badge\">Three.js WebGL<\/div>\n <div class=\"showcase-3d-toolbar\">\n <div class=\"toolbar-dot\" title=\"Vista Frontale\">F<\/div>\n <div class=\"toolbar-dot\" title=\"Vista Laterale\">L<\/div>\n <div class=\"toolbar-dot\" title=\"Vista Dall'alto\">T<\/div>\n <div class=\"toolbar-dot\" title=\"Ruota\">↻<\/div>\n <div class=\"toolbar-dot\" title=\"Esplodi\">✶<\/div>\n <div class=\"toolbar-dot\" title=\"Screenshot\">📷<\/div>\n <div class=\"toolbar-dot\" title=\"Wireframe\">▦<\/div>\n <div class=\"toolbar-dot\" title=\"Fullscreen\">⛶<\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"section-header\" style=\"text-align:left; margin-bottom:16px;\">\n <div class=\"section-tag\">Anteprima 3D Interattiva<\/div>\n <h2>Il prodotto prende vita davanti ai tuoi occhi<\/h2>\n <p>Visualizza in tempo reale ogni configurazione con un viewer 3D integrato direttamente nel preventivo.<\/p>\n <\/div>\n <div class=\"feature-highlights\">\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-blue\">👁<\/div>\n <div>\n <h4>Viste predefinite e libere<\/h4>\n <p>Frontale, laterale, dall’alto o ruota liberamente il modello con il mouse. Zoom, pan e orbita a portata di click.<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-orange\">✶<\/div>\n <div>\n <h4>Vista esplosa e wireframe<\/h4>\n <p>Scopri i singoli componenti con l’esplosione animata o analizza la struttura in modalità wireframe.<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-blue\">📷<\/div>\n <div>\n <h4>Screenshot e dimensioni<\/h4>\n <p>Cattura immagini HD del prodotto configurato e visualizza le quote dimensionali direttamente nella scena.<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-highlight\">\n <div class=\"fh-icon gradient-orange\">🎨<\/div>\n <div>\n <h4>Materiali e ambienti realistici<\/h4>\n <p>Cambia texture, colori e ambienti HDRI per mostrare il prodotto nella luce migliore, con rendering PBR.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"tools-section\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Strumenti Professionali<\/div>\n <h2>Dalla configurazione alla documentazione<\/h2>\n <p>Tutto ciò che serve per trasformare una configurazione in un preventivo completo e professionale.<\/p>\n <\/div>\n <div class=\"tools-grid\">\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-blue\">📄<\/div>\n <h3>Schede Tecniche<\/h3>\n <p>Genera automaticamente schede tecniche dettagliate con tutte le specifiche del prodotto configurato.<\/p>\n <span class=\"tool-card-tag tag-blue\">Auto-generazione<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-orange\">🗎<\/div>\n <h3>Esportazione PDF<\/h3>\n <p>Preventivi, schede prodotto e documentazione esportabili in PDF professionali pronti per il cliente.<\/p>\n <span class=\"tool-card-tag tag-orange\">One-click<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-blue\">📑<\/div>\n <h3>Report Avanzati<\/h3>\n <p>Report personalizzabili con grafici, statistiche e analisi delle vendite per decisioni data-driven.<\/p>\n <span class=\"tool-card-tag tag-blue\">DevExpress<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-orange\">🌐<\/div>\n <h3>Multilingua<\/h3>\n <p>Preventivi e documentazione in più lingue per servire clienti internazionali senza barriere.<\/p>\n <span class=\"tool-card-tag tag-orange\">Globale<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-gradient\">⚙<\/div>\n <h3>Configuratore Prodotto<\/h3>\n <p>Configura ogni attributo del prodotto con vincoli tecnici automatici che prevengono errori e incompatibilità.<\/p>\n <span class=\"tool-card-tag tag-blue\">Regole smart<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-blue\">💰<\/div>\n <h3>Calcolo Prezzi<\/h3>\n <p>Listini, maggiorazioni, sconti e costi di manodopera calcolati in tempo reale durante la configurazione.<\/p>\n <span class=\"tool-card-tag tag-blue\">Real-time<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-orange\">👥<\/div>\n <h3>Gestione Clienti<\/h3>\n <p>Anagrafica clienti completa con storico preventivi, preferenze e condizioni commerciali personalizzate.<\/p>\n <span class=\"tool-card-tag tag-orange\">CRM integrato<\/span>\n <\/div>\n <div class=\"tool-card\">\n <div class=\"tool-card-icon tc-gradient\">🔒<\/div>\n <h3>Ruoli e Permessi<\/h3>\n <p>Controllo granulare degli accessi per azienda, agenti e rivenditori con permessi personalizzabili.<\/p>\n <span class=\"tool-card-tag tag-orange\">Sicurezza<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"studio-3d\">\n <div class=\"section-header\">\n <div class=\"section-tag\">3D Studio Integrato<\/div>\n <h2>Crea e gestisci i modelli 3D direttamente nell’applicazione<\/h2>\n <p>Un ambiente completo per importare, comporre e configurare modelli 3D parametrici senza uscire dalla piattaforma.<\/p>\n <\/div>\n\n <div class=\"studio-features\">\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-blue\">✎<\/div>\n <h3>Editor 3D integrato<\/h3>\n <\/div>\n <p>Crea e modifica modelli 3D direttamente nel browser con l’editor WebGL integrato. Importa file GLTF\/GLB, esplora la gerarchia dei nodi e salva le modifiche con un click.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">GLTF<\/span>\n <span class=\"studio-mini-tag highlight\">GLB<\/span>\n <span class=\"studio-mini-tag\">Upload drag & drop<\/span>\n <span class=\"studio-mini-tag\">Esporta GLB<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-orange\">📦<\/div>\n <h3>Composizione modulare<\/h3>\n <\/div>\n <p>Assembla modelli complessi combinando più moduli 3D. Ogni modulo si aggancia a un nodo di riferimento del modello base con posizione, rotazione e scala configurabili.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight-orange\">Moduli<\/span>\n <span class=\"studio-mini-tag highlight-orange\">Snap a nodo<\/span>\n <span class=\"studio-mini-tag\">Offset XYZ<\/span>\n <span class=\"studio-mini-tag\">Priorità<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-gradient\">🔭<\/div>\n <h3>Regole per nodo<\/h3>\n <\/div>\n <p>Applica regole di visibilità, scala, posizione, rotazione e materiale ai singoli nodi del modello. Ogni regola può essere condizionata agli attributi del prodotto configurato.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">Visibilità<\/span>\n <span class=\"studio-mini-tag highlight\">Scala<\/span>\n <span class=\"studio-mini-tag highlight\">Materiale<\/span>\n <span class=\"studio-mini-tag\">Condizionale<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-blue\">🎨<\/div>\n <h3>Libreria texture<\/h3>\n <\/div>\n <p>Gestisci una libreria centralizzata di texture organizzata per categorie. Applica texture ai materiali dei nodi e collegale agli attributi colore del prodotto per cambio dinamico.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">Categorie<\/span>\n <span class=\"studio-mini-tag\">Anteprima<\/span>\n <span class=\"studio-mini-tag\">PBR<\/span>\n <span class=\"studio-mini-tag\">Colori dinamici<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-orange\">📐<\/div>\n <h3>Formule parametriche<\/h3>\n <\/div>\n <p>Usa formule come <strong style=\"color:var(--arancione)\">{Larghezza}<\/strong>, <strong style=\"color:var(--arancione)\">{Altezza}<\/strong>, <strong style=\"color:var(--arancione)\">{Spessore}<\/strong> nei valori di scala, posizione e offset dei moduli. Il modello si adatta automaticamente alle dimensioni scelte dal cliente.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight-orange\">{Larghezza}\/2<\/span>\n <span class=\"studio-mini-tag highlight-orange\">{Altezza}*0.8<\/span>\n <span class=\"studio-mini-tag\">Espressioni math<\/span>\n <\/div>\n <\/div>\n <div class=\"studio-card\">\n <div class=\"studio-card-header\">\n <div class=\"studio-card-icon sci-gradient\">🔗<\/div>\n <h3>Selezione condizionale<\/h3>\n <\/div>\n <p>Associa modelli 3D diversi alla stessa famiglia di prodotti con condizioni AND\/OR basate su attributi e dimensioni. Il sistema sceglie automaticamente il modello corretto in fase di configurazione.<\/p>\n <div class=\"studio-tags\">\n <span class=\"studio-mini-tag highlight\">AND \/ OR<\/span>\n <span class=\"studio-mini-tag\">Per famiglia<\/span>\n <span class=\"studio-mini-tag\">Priorità<\/span>\n <span class=\"studio-mini-tag\">Multi-variante<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"studio-banner\">\n <div class=\"studio-banner-icon\">🛠<\/div>\n <div>\n <h4>Zero competenze 3D richieste<\/h4>\n <p>L’interfaccia visuale con albero dei nodi, anteprima in tempo reale e configurazione punta-e-clicca permette a chiunque di gestire modelli 3D parametrici. Importa il modello dal tuo progettista, configura regole e moduli, e il gioco è fatto.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"workflow\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Come funziona<\/div>\n <h2>Dal prodotto al preventivo in 5 passi<\/h2>\n <p>Un flusso di lavoro semplice e lineare che guida agenti e rivenditori verso la chiusura.<\/p>\n <\/div>\n <div class=\"workflow-steps\">\n <div class=\"workflow-step\">\n <div class=\"step-circle\">🔎<\/div>\n <div class=\"step-num\">Passo 1<\/div>\n <h4>Scegli il prodotto<\/h4>\n <p>Seleziona la famiglia di prodotti dal catalogo.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">⚙<\/div>\n <div class=\"step-num\">Passo 2<\/div>\n <h4>Configura<\/h4>\n <p>Personalizza ogni attributo con vincoli automatici.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">👁<\/div>\n <div class=\"step-num\">Passo 3<\/div>\n <h4>Visualizza in 3D<\/h4>\n <p>Verifica il risultato con l’anteprima 3D interattiva.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">💰<\/div>\n <div class=\"step-num\">Passo 4<\/div>\n <h4>Ottieni il prezzo<\/h4>\n <p>Il prezzo si aggiorna in tempo reale con sconti e listini.<\/p>\n <\/div>\n <div class=\"workflow-step\">\n <div class=\"step-circle\">📄<\/div>\n <div class=\"step-num\">Passo 5<\/div>\n <h4>Genera il preventivo<\/h4>\n <p>Esporta PDF completo con scheda tecnica e immagini 3D.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"advantages\">\n <div class=\"advantages-grid\">\n <div>\n <div class=\"section-header\" style=\"text-align:left; margin-bottom:40px;\">\n <div class=\"section-tag\">Vantaggi<\/div>\n <h2>Perché scegliere QuotePro<\/h2>\n <p>Funzionalità pensate per fare la differenza nel tuo processo commerciale.<\/p>\n <\/div>\n <div class=\"advantages-list\">\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Trasparenza totale<\/h4>\n <p>Panoramica completa con dettagli tecnici nel preventivo finale. Nessun dato nascosto, tutto chiaro e verificabile.<\/p>\n <\/div>\n <\/div>\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Conferma istantanea<\/h4>\n <p>Il cliente visualizza un’anteprima completa del preventivo senza incertezze, accelerando la decisione d’acquisto.<\/p>\n <\/div>\n <\/div>\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Differenziazione competitiva<\/h4>\n <p>Offri un’esperienza di configurazione avanzata che ti distingue dalla concorrenza e valorizza il tuo brand.<\/p>\n <\/div>\n <\/div>\n <div class=\"advantage-item\">\n <div class=\"advantage-check\">✓<\/div>\n <div>\n <h4>Accessibilità cloud<\/h4>\n <p>Lavora da qualsiasi dispositivo, ovunque ti trovi. I dati sono sempre sincronizzati e al sicuro.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"advantages-visual\">\n <div class=\"advantages-visual-box\">\n <div class=\"visual-big-icon\">🚀<\/div>\n <div class=\"visual-title\">Pronto in pochi giorni<\/div>\n <div class=\"visual-sub\">Setup rapido, formazione inclusa e supporto dedicato per partire subito.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta-section\" id=\"demo\">\n <div class=\"cta-inner\">\n <h2>Richiedi una Demo Gratuita<\/h2>\n <p>Scopri come QuotePro può trasformare il tuo processo di preventivazione. Contattaci per una dimostrazione personalizzata.<\/p>\n<a href=\"https:\/\/ts2informatica.com\/index.php\/contatti\/\" class=\"btn btn-primary\" style=\"margin-top:12px; font-size:17px; padding:18px 44px;\">Contattaci →<\/a>\n <\/div>\n <\/section>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>QUOTEPRO – TS2 Informatica Piattaforma Cloud QUOTEPRO La soluzione integrata per Aziende, Agenti e Rivenditori Semplifica il processo di creazione e gestione dei preventivi, garantendo comunicazione chiara e flusso di lavoro senza intoppi. Richiedi una Demo → Scopri di più 100% Cloud Based 3x Più veloce nei preventivi 360° Visione completa 24\/7 Sempre accessibile Funzionalità […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages\/468"}],"collection":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/comments?post=468"}],"version-history":[{"count":5,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages\/468\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/pages\/468\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/ts2informatica.com\/index.php\/wp-json\/wp\/v2\/media?parent=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}