Virtual Try-On Section<\/title>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n overflow-x: hidden;\n }\n \n \/* Full-width container that extends edge-to-edge *\/\n .vto-full-width-wrapper {\n width: 100%;\n position: relative;\n left: 0;\n right: 0;\n margin: 0;\n overflow: hidden;\n }\n \n .vto-section {\n position: relative;\n background: #ffffff;\n padding: 120px 20px;\n overflow: hidden;\n }\n \n \/* Simple floating color splats *\/\n .vto-bg-splat {\n position: absolute;\n border-radius: 50%;\n filter: blur(90px);\n opacity: 0.25;\n z-index: 0;\n animation: float 12s ease-in-out infinite;\n }\n \n .vto-bg-splat-1 {\n top: -150px;\n right: 5%;\n width: 600px;\n height: 600px;\n background: #818cf8;\n animation-delay: 0s;\n }\n \n .vto-bg-splat-2 {\n bottom: -150px;\n left: 0%;\n width: 700px;\n height: 700px;\n background: #f9a8d4;\n animation-delay: -6s;\n }\n \n .vto-bg-splat-3 {\n top: 40%;\n right: -100px;\n width: 550px;\n height: 550px;\n background: #fbbf24;\n animation-delay: -3s;\n }\n \n .vto-bg-splat-4 {\n top: 10%;\n left: -100px;\n width: 500px;\n height: 500px;\n background: #c4b5fd;\n animation-delay: -8s;\n }\n \n .vto-bg-splat-5 {\n bottom: 20%;\n right: 15%;\n width: 450px;\n height: 450px;\n background: #a5f3fc;\n animation-delay: -4s;\n }\n \n .vto-bg-splat-6 {\n top: 55%;\n left: 35%;\n width: 400px;\n height: 400px;\n background: #fdba74;\n animation-delay: -10s;\n }\n \n .vto-bg-splat-7 {\n bottom: 50%;\n left: 10%;\n width: 350px;\n height: 350px;\n background: #fb923c;\n animation-delay: -2s;\n }\n \n .vto-bg-splat-8 {\n top: 30%;\n right: 35%;\n width: 380px;\n height: 380px;\n background: #e9d5ff;\n animation-delay: -7s;\n }\n \n \/* Content container - respects Astra's content width *\/\n .vto-container {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n padding: 0 20px;\n }\n \n \/* Hero *\/\n .vto-hero {\n text-align: center;\n margin-bottom: 100px;\n position: relative;\n }\n \n .vto-hero h1 {\n font-size: 4.5rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 28px;\n line-height: 1.1;\n letter-spacing: -0.04em;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.2s forwards;\n }\n \n .vto-hero h1 .highlight {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 50%, #f9a8d4 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: gradientShift 3s ease infinite;\n background-size: 200% auto;\n }\n \n .vto-hero p {\n font-size: 1.35rem;\n color: #475569;\n max-width: 750px;\n margin: 0 auto 52px;\n line-height: 1.7;\n font-weight: 400;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.4s forwards;\n }\n \n .vto-cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 20px 48px;\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n color: #ffffff;\n text-decoration: none;\n border-radius: 12px;\n font-size: 1.1rem;\n font-weight: 700;\n transition: all 0.4s ease;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.6s forwards;\n box-shadow: 0 8px 32px rgba(129, 140, 248, 0.25);\n position: relative;\n overflow: hidden;\n }\n \n .vto-cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.6s;\n }\n \n .vto-cta:hover::before {\n left: 100%;\n }\n \n .vto-cta:hover {\n transform: translateY(-3px) scale(1.03);\n box-shadow: 0 12px 40px rgba(129, 140, 248, 0.35);\n color: #ffffff;\n }\n \n .vto-cta:active {\n transform: translateY(-1px) scale(1.01);\n box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3);\n }\n \n \/* Feature Grid *\/\n .vto-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n position: relative;\n }\n \n .vto-card {\n background: #ffffff;\n border: 3px solid transparent;\n border-radius: 24px;\n padding: 60px 44px;\n text-align: center;\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 0;\n transform: translateY(40px);\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);\n }\n \n \/* Gradient borders that animate *\/\n .vto-card::before {\n content: '';\n position: absolute;\n top: -3px;\n left: -3px;\n right: -3px;\n bottom: -3px;\n background: linear-gradient(135deg, #818cf8, #c4b5fd, #f9a8d4, #fbbf24);\n border-radius: 24px;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.6s ease;\n background-size: 300% 300%;\n animation: gradientRotate 4s ease infinite;\n }\n \n .vto-card:hover::before {\n opacity: 0.7;\n }\n \n .vto-card:active::before {\n opacity: 0.5;\n }\n \n \/* Vibrant glow effects *\/\n .vto-card:nth-child(1)::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(129, 140, 248, 0.15) 0%, transparent 70%);\n transition: all 0.7s ease;\n z-index: -1;\n }\n \n .vto-card:nth-child(2)::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(196, 181, 253, 0.15) 0%, transparent 70%);\n transition: all 0.7s ease;\n z-index: -1;\n }\n \n .vto-card:nth-child(3)::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(249, 168, 212, 0.15) 0%, transparent 70%);\n transition: all 0.7s ease;\n z-index: -1;\n }\n \n .vto-card:hover::after {\n width: 450px;\n height: 450px;\n }\n \n .vto-card:active::after {\n width: 350px;\n height: 350px;\n }\n \n .vto-card:nth-child(1) {\n animation: slideUp 0.8s ease-out 0.8s forwards;\n }\n \n .vto-card:nth-child(2) {\n animation: slideUp 0.8s ease-out 1s forwards;\n }\n \n .vto-card:nth-child(3) {\n animation: slideUp 0.8s ease-out 1.2s forwards;\n }\n \n .vto-card:hover {\n transform: translateY(-12px) scale(1.01);\n box-shadow: 0 20px 60px rgba(129, 140, 248, 0.18);\n }\n \n .vto-card:active {\n transform: translateY(-6px) scale(1.005);\n box-shadow: 0 12px 40px rgba(129, 140, 248, 0.15);\n }\n \n .vto-icon-wrapper {\n width: 100px;\n height: 100px;\n margin: 0 auto 36px;\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n border-radius: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 8px 32px rgba(129, 140, 248, 0.25);\n position: relative;\n z-index: 1;\n }\n \n .vto-card:nth-child(2) .vto-icon-wrapper {\n background: linear-gradient(135deg, #c4b5fd 0%, #f9a8d4 100%);\n box-shadow: 0 8px 32px rgba(196, 181, 253, 0.25);\n }\n \n .vto-card:nth-child(3) .vto-icon-wrapper {\n background: linear-gradient(135deg, #f9a8d4 0%, #fbbf24 100%);\n box-shadow: 0 8px 32px rgba(249, 168, 212, 0.25);\n }\n \n .vto-card:hover .vto-icon-wrapper {\n transform: scale(1.1) rotate(8deg);\n box-shadow: 0 12px 40px rgba(129, 140, 248, 0.35);\n }\n \n .vto-card:active .vto-icon-wrapper {\n transform: scale(1.05) rotate(5deg);\n box-shadow: 0 8px 30px rgba(129, 140, 248, 0.3);\n }\n \n .vto-icon {\n font-size: 2.5rem;\n }\n \n .vto-card h3 {\n font-size: 1.5rem;\n font-weight: 700;\n color: #0f172a;\n margin-bottom: 18px;\n letter-spacing: -0.02em;\n position: relative;\n z-index: 1;\n }\n \n .vto-card p {\n font-size: 1.05rem;\n color: #475569;\n line-height: 1.7;\n margin: 0;\n font-weight: 400;\n position: relative;\n z-index: 1;\n }\n \n \/* Animations *\/\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes slideUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes float {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(50px, -30px) scale(1.1); }\n 66% { transform: translate(-30px, 40px) scale(0.9); }\n }\n \n @keyframes gradientShift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n \n @keyframes gradientRotate {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n \n \/* How It Works Section *\/\n .vto-how-section {\n position: relative;\n background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);\n padding: 120px 20px;\n overflow: hidden;\n margin-top: -1px;\n }\n \n .vto-how-hero {\n text-align: center;\n margin-bottom: 80px;\n position: relative;\n }\n \n .vto-how-hero h2 {\n font-size: 3.5rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 24px;\n line-height: 1.1;\n letter-spacing: -0.04em;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.2s forwards;\n }\n \n .vto-how-hero h2 .highlight {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 50%, #f9a8d4 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: gradientShift 3s ease infinite;\n background-size: 200% auto;\n }\n \n .vto-how-hero p {\n font-size: 1.25rem;\n color: #475569;\n max-width: 700px;\n margin: 0 auto;\n line-height: 1.7;\n font-weight: 400;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.4s forwards;\n }\n \n \/* Options Grid *\/\n .vto-options-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 48px;\n position: relative;\n margin-bottom: 60px;\n }\n \n .vto-option-card {\n background: #ffffff;\n border-radius: 32px;\n padding: 56px 48px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 0;\n transform: translateY(40px);\n }\n \n \/* Shimmer effect on premium card *\/\n .vto-option-card:nth-child(2)::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(\n 45deg,\n transparent 30%,\n rgba(255, 255, 255, 0.3) 50%,\n transparent 70%\n );\n animation: shimmer 3s ease-in-out infinite;\n pointer-events: none;\n }\n \n @keyframes shimmer {\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\n }\n \n .vto-option-card:nth-child(1) {\n animation: slideUp 0.8s ease-out 0.6s forwards;\n border: 3px solid #e2e8f0;\n transition: all 0.6s ease;\n }\n \n .vto-option-card:nth-child(1):hover {\n border-color: #cbd5e1;\n background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);\n }\n \n .vto-option-card:nth-child(2) {\n animation: slideUp 0.8s ease-out 0.8s forwards;\n border: 3px solid transparent;\n background: linear-gradient(#ffffff, #ffffff) padding-box,\n linear-gradient(135deg, #818cf8, #c4b5fd) border-box;\n background-size: 200% 200%;\n animation: slideUp 0.8s ease-out 0.8s forwards, borderPulse 4s ease-in-out infinite;\n }\n \n @keyframes borderPulse {\n 0%, 100% { \n background-position: 0% 50%;\n }\n 50% { \n background-position: 100% 50%;\n }\n }\n \n .vto-option-card:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 16px 60px rgba(129, 140, 248, 0.15);\n }\n \n \/* Badge *\/\n .vto-badge {\n display: inline-block;\n padding: 10px 24px;\n border-radius: 100px;\n font-size: 0.85rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 28px;\n animation: badgeBounce 2s ease-in-out infinite;\n }\n \n @keyframes badgeBounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-5px); }\n }\n \n .vto-badge-budget {\n background: #f1f5f9;\n color: #475569;\n }\n \n .vto-badge-premium {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n color: #ffffff;\n box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3);\n animation: badgeBounce 2s ease-in-out infinite, badgePulse 2s ease-in-out infinite;\n }\n \n @keyframes badgePulse {\n 0%, 100% { box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3); }\n 50% { box-shadow: 0 6px 30px rgba(129, 140, 248, 0.5); }\n }\n \n .vto-option-card h3 {\n font-size: 2rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 16px;\n letter-spacing: -0.02em;\n transition: all 0.4s ease;\n }\n \n .vto-option-card:hover h3 {\n transform: translateX(8px);\n }\n \n .vto-option-card:nth-child(2):hover h3 {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n background-size: 200% auto;\n animation: gradientShift 2s ease infinite;\n }\n \n .vto-option-card .subtitle {\n font-size: 1.15rem;\n color: #64748b;\n margin-bottom: 36px;\n line-height: 1.6;\n transition: all 0.3s ease;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 1.2s forwards;\n }\n \n .vto-option-card:hover .subtitle {\n color: #475569;\n transform: translateY(-4px);\n }\n \n \/* Steps *\/\n .vto-steps {\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin-bottom: 40px;\n }\n \n .vto-step {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n padding: 24px;\n background: #f8fafc;\n border-radius: 16px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateX(-30px);\n }\n \n .vto-step:nth-child(1) {\n animation: slideInRight 0.6s ease-out 1s forwards;\n }\n \n .vto-step:nth-child(2) {\n animation: slideInRight 0.6s ease-out 1.15s forwards;\n }\n \n .vto-step:nth-child(3) {\n animation: slideInRight 0.6s ease-out 1.3s forwards;\n }\n \n .vto-step:nth-child(4) {\n animation: slideInRight 0.6s ease-out 1.45s forwards;\n }\n \n @keyframes slideInRight {\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n .vto-step::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n transform: scaleY(0);\n transform-origin: top;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n .vto-option-card:hover .vto-step::before,\n .vto-step:hover::before {\n transform: scaleY(1);\n }\n \n \/* Animated dots indicator *\/\n .vto-step::after {\n content: '';\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 8px;\n background: #818cf8;\n border-radius: 50%;\n opacity: 0;\n transition: all 0.4s ease;\n }\n \n .vto-step:hover::after {\n opacity: 1;\n animation: dotPulse 1.5s ease-in-out infinite;\n }\n \n @keyframes dotPulse {\n 0%, 100% { \n transform: translateY(-50%) scale(1);\n box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.7);\n }\n 50% { \n transform: translateY(-50%) scale(1.2);\n box-shadow: 0 0 0 10px rgba(129, 140, 248, 0);\n }\n }\n \n .vto-step:hover {\n background: #f1f5f9;\n transform: translateX(8px);\n }\n \n .vto-step-number {\n min-width: 44px;\n height: 44px;\n background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);\n color: #ffffff;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 1.1rem;\n box-shadow: 0 4px 16px rgba(100, 116, 139, 0.2);\n transition: all 0.4s ease;\n animation: numberFloat 3s ease-in-out infinite;\n }\n \n .vto-step:nth-child(1) .vto-step-number {\n animation-delay: 0s;\n }\n \n .vto-step:nth-child(2) .vto-step-number {\n animation-delay: 0.5s;\n }\n \n .vto-step:nth-child(3) .vto-step-number {\n animation-delay: 1s;\n }\n \n .vto-step:nth-child(4) .vto-step-number {\n animation-delay: 1.5s;\n }\n \n @keyframes numberFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-8px) rotate(5deg); }\n }\n \n .vto-step:hover .vto-step-number {\n transform: scale(1.15) rotate(15deg);\n box-shadow: 0 6px 24px rgba(129, 140, 248, 0.4);\n }\n \n .vto-option-card:nth-child(2) .vto-step-number {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n box-shadow: 0 4px 16px rgba(129, 140, 248, 0.25);\n }\n \n .vto-step-content h4 {\n font-size: 1.1rem;\n font-weight: 700;\n color: #0f172a;\n margin-bottom: 8px;\n }\n \n .vto-step-content p {\n font-size: 0.95rem;\n color: #64748b;\n line-height: 1.6;\n margin: 0;\n }\n \n \/* Features List *\/\n .vto-features {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-top: 32px;\n border-top: 2px solid #e2e8f0;\n }\n \n .vto-feature {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 1rem;\n color: #475569;\n opacity: 0;\n animation: fadeInLeft 0.6s ease-out forwards;\n transition: all 0.3s ease;\n }\n \n .vto-feature:nth-child(1) { animation-delay: 1s; }\n .vto-feature:nth-child(2) { animation-delay: 1.1s; }\n .vto-feature:nth-child(3) { animation-delay: 1.2s; }\n .vto-feature:nth-child(4) { animation-delay: 1.3s; }\n \n @keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n .vto-feature:hover {\n transform: translateX(8px);\n color: #0f172a;\n }\n \n .vto-feature i {\n color: #64748b;\n font-size: 1.1rem;\n animation: checkPulse 2s ease-in-out infinite;\n transition: all 0.3s ease;\n }\n \n .vto-option-card:nth-child(2) .vto-feature i {\n color: #818cf8;\n }\n \n .vto-feature:hover i {\n transform: scale(1.2) rotate(360deg);\n }\n \n .vto-option-card:nth-child(2) .vto-feature:hover i {\n color: #c4b5fd;\n }\n \n @keyframes checkPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n \n \/* Price Tag *\/\n .vto-price {\n text-align: center;\n padding: 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 16px;\n margin-top: 32px;\n }\n \n .vto-price-amount {\n font-size: 2.5rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 8px;\n }\n \n .vto-option-card:nth-child(1) .vto-price-amount {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .vto-price-label {\n font-size: 1rem;\n color: #64748b;\n font-weight: 500;\n }\n \n \/* Responsive *\/\n @media (max-width: 968px) {\n .vto-grid {\n grid-template-columns: 1fr;\n gap: 28px;\n }\n \n .vto-options-grid {\n grid-template-columns: 1fr;\n gap: 36px;\n }\n \n .vto-how-hero h2 {\n font-size: 2.5rem;\n }\n }\n \n @media (max-width: 768px) {\n .vto-section {\n padding: 80px 20px;\n }\n \n .vto-hero {\n margin-bottom: 70px;\n }\n \n .vto-hero h1 {\n font-size: 2.5rem;\n }\n \n .vto-hero p {\n font-size: 1.15rem;\n }\n \n .vto-card {\n padding: 48px 36px;\n }\n \n .vto-icon-wrapper {\n width: 80px;\n height: 80px;\n }\n \n .vto-icon {\n font-size: 2rem;\n }\n \n .vto-how-section {\n padding: 80px 20px;\n }\n \n .vto-how-hero h2 {\n font-size: 2rem;\n }\n \n .vto-option-card {\n padding: 40px 32px;\n }\n \n .vto-step {\n flex-direction: column;\n gap: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"vto-full-width-wrapper\">\n <div class=\"vto-section\">\n \n <div class=\"vto-bg-splat vto-bg-splat-1\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-2\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-3\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-4\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-5\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-6\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-7\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-8\"><\/div>\n \n \n <div class=\"vto-container\">\n \n <div class=\"vto-hero\">\n <h1>AI-Powered <span class=\"highlight\">Virtual Try-On<\/span> Technology<\/h1>\n <p>Explore how AI-driven virtual try-on experiences can transform your customer’s shopping journey. This interactive demo visualizes the possibilities for your brand.<\/p>\n <a href=\"\/index.php\/demo\/\" class=\"vto-cta\">\n <span>Experience the Demo<\/span>\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/a>\n <\/div>\n \n \n <div class=\"vto-grid\">\n \n <div class=\"vto-card\">\n <div class=\"vto-icon-wrapper\">\n <span class=\"vto-icon\">\ud83c\udfaf<\/span>\n <\/div>\n <h3>Increase Conversions, Reduce Returns<\/h3>\n <p>Virtual try-on builds unparalleled purchase confidence. Customers see exactly what they’re getting, leading to higher conversions and dramatically fewer returns.<\/p>\n <\/div>\n \n \n <div class=\"vto-card\">\n <div class=\"vto-icon-wrapper\">\n <span class=\"vto-icon\">\u26a1<\/span>\n <\/div>\n <h3>Seamless Integration<\/h3>\n <p>Deploy in minutes across WooCommerce and major platforms. Zero coding required. Our intelligent system adapts to your existing infrastructure effortlessly.<\/p>\n <\/div>\n \n \n <div class=\"vto-card\">\n <div class=\"vto-icon-wrapper\">\n <span class=\"vto-icon\">\ud83d\udd27<\/span>\n <\/div>\n <h3>Customizable & Insight-Driven<\/h3>\n <p>Complete brand control with deep analytics integration. Track engagement patterns, understand behavior, and continuously optimize your customer experience.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"vto-full-width-wrapper\">\n <div class=\"vto-how-section\">\n \n <div class=\"vto-bg-splat vto-bg-splat-2\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-5\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-7\"><\/div>\n \n <div class=\"vto-container\">\n \n <div class=\"vto-how-hero\">\n <h2>How <span class=\"highlight\">It Works<\/span><\/h2>\n <p>Choose the perfect solution for your business. From personalized try-ons to scalable model-based experiences.<\/p>\n <\/div>\n \n \n <div class=\"vto-options-grid\">\n \n <div class=\"vto-option-card\">\n <span class=\"vto-badge vto-badge-budget\">Budget Edition<\/span>\n <h3>Model-Based Try-On<\/h3>\n <p class=\"subtitle\">Pre-generated models that match your customers’ profiles for instant visualization.<\/p>\n \n <div class=\"vto-steps\">\n <div class=\"vto-step\">\n <div class=\"vto-step-number\">1<\/div>\n <div class=\"vto-step-content\">\n <h4>Easy Setup & Product Selection<\/h4>\n <p>Install the extension, choose which products to enable, and our AI generates diverse model variations.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">2<\/div>\n <div class=\"vto-step-content\">\n <h4>Smart Matching Questions<\/h4>\n <p>Customers answer quick questions about body type, height, and style preferences.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">3<\/div>\n <div class=\"vto-step-content\">\n <h4>Find Your Match<\/h4>\n <p>AI recommends models that closely match their profile, showing how the product looks on similar body types.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">4<\/div>\n <div class=\"vto-step-content\">\n <h4>Size Recommendation<\/h4>\n <p>Based on selected model and preferences, get intelligent size suggestions to reduce returns.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"vto-features\">\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>No customer photo upload required<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Instant loading with pre-rendered models<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Diverse model library (all body types)<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Smart size recommendations<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"vto-option-card\">\n <span class=\"vto-badge vto-badge-premium\">Premium Edition<\/span>\n <h3>Personal Virtual Try-On<\/h3>\n <p class=\"subtitle\">Every customer gets their own AI-generated try-on experience using their actual photo.<\/p>\n \n <div class=\"vto-steps\">\n <div class=\"vto-step\">\n <div class=\"vto-step-number\">1<\/div>\n <div class=\"vto-step-content\">\n <h4>Customer Uploads Photo<\/h4>\n <p>Your shoppers upload a single photo of themselves directly on your product page.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">2<\/div>\n <div class=\"vto-step-content\">\n <h4>AI Detects Product<\/h4>\n <p>Our intelligent system automatically identifies the garment from your product images.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">3<\/div>\n <div class=\"vto-step-content\">\n <h4>Instant Generation<\/h4>\n <p>Advanced AI model creates a photorealistic image showing them wearing your exact product.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">4<\/div>\n <div class=\"vto-step-content\">\n <h4>Try Multiple Items<\/h4>\n <p>Customers can try on different products, colors, and styles using the same photo.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"vto-features\">\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Hyper-personalized experience for each shopper<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Maximum conversion rates & confidence<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Automatic garment detection & placement<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Photorealistic AI rendering<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<div data-block-name=\"woocommerce\/single-product\" data-product-id=\"98\" class=\"wp-block-woocommerce-single-product woocommerce\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-block-name=\"woocommerce\/single-product\" data-product-id=\"78\" class=\"wp-block-woocommerce-single-product woocommerce\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-block-name=\"woocommerce\/single-product\" data-product-id=\"78\" class=\"wp-block-woocommerce-single-product woocommerce\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div data-block-name=\"woocommerce\/product-image\" data-is-descendent-of-single-product-block=\"true\" data-show-sale-badge=\"false\" class=\"wc-block-components-product-image wc-block-grid__product-image wc-block-components-product-image--aspect-ratio-auto wp-block-woocommerce-product-image\"><a href=\"https:\/\/duusbergmann.dk\/index.php\/product\/gray-quarter-zip\/\" style=\"\" data-wp-on--click=\"woocommerce\/product-collection::actions.viewProduct\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"536\" src=\"https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-600x536.jpg\" class=\"attachment-woocommerce_single size-woocommerce_single\" alt=\"Gray quarter zip\" data-testid=\"product-image\" data-image-id=\"96\" style=\"object-fit:cover;\" title=\"Gray quarter zip\" srcset=\"https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-600x536.jpg 600w, https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-300x268.jpg 300w, https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-768x686.jpg 768w, https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385.jpg 940w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><div class=\"wc-block-components-product-image__inner-container\">\n<div data-block-name=\"woocommerce\/product-sale-badge\" class=\"wp-block-woocommerce-product-sale-badge \"><div class=\"wc-block-components-product-sale-badge alignright wc-block-components-product-sale-badge--align-right\" style=\"\"><span class=\"wc-block-components-product-sale-badge__text\" aria-hidden=\"true\">Sale<\/span><span class=\"screen-reader-text\">Product on sale<\/span><\/div><\/div>\n<\/div><\/a><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/duusbergmann.dk\/index.php\/product\/gray-quarter-zip\/\" target=\"_self\" >Gray quarter zip<\/a><\/h2>\n\n\n\n<div data-block-name=\"woocommerce\/product-price\" data-is-descendent-of-single-product-block=\"true\" class=\"wp-block-woocommerce-product-price\"><div class=\"wc-block-components-product-price wc-block-grid__product-price \" style=\"\" >\n\t\t\t\t\t<del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><bdi>1.000,00 <span class=\"woocommerce-Price-currencySymbol\">kr.<\/span><\/bdi><\/span><\/del> <span class=\"screen-reader-text\">Original price was: 1.000,00 kr..<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><bdi>300,00 <span class=\"woocommerce-Price-currencySymbol\">kr.<\/span><\/bdi><\/span><\/ins><span class=\"screen-reader-text\">Current price is: 300,00 kr..<\/span>\n\t\t\t\t<\/div><\/div>\n\n\n\n<div data-block-name=\"woocommerce\/add-to-cart-form\" class=\"wp-block-add-to-cart-form wc-block-add-to-cart-form wc-block-add-to-cart-form--input wp-block-woocommerce-add-to-cart-form\" >\n\t<div class=\"vfr-widget-root\" \n\t\t\t\tdata-product-id=\"78\"\n\t\t\t\tdata-product-image=\"https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385.jpg\"\n\t\t\t\tdata-rest-url=\"https:\/\/duusbergmann.dk\/index.php\/wp-json\/virtual-fitting-room\/v1\/saas\"\n\t\t\t\tdata-nonce=\"6fe699ea1a\"\n\t\t\t\tdata-config=\"{"displayMode":"carousel","theme":"light","primaryColor":"#0F172A","secondaryColor":"#000000","backgroundColor":"#fafafa","textColor":"#0F172A","borderColor":"#E2E8F0","fontFamily":"'Inter', sans-serif","fontSize":16,"borderRadius":20,"cardStyle":"elevated","gridColumns":2,"gridColumnsMobile":2,"cardAspectRatio":"3:4","showModelNames":true,"showSizeLabels":false,"showPopularBadge":false,"enableModeSwitch":false,"enablePhotoUpload":false,"enableCameraCapture":true,"showPoseGuide":true,"animationLevel":"full","hoverEffects":true,"loadingStyle":"shimmer","lazyLoadImages":true,"cacheResults":true,"analyticsEnabled":true,"availableModes":["grid"],"questions":[],"privacyText":"Your photo is never stored","maxFileSize":10,"injectionMode":"gallery","gridDescription":"Se p\\u00e5 en der ligner dig","gridSubtitle":"V\\u00e6lg en der ligner dig","addToCartText":"Tilf\\u00f8j til kurv","tryAnotherText":"Pr\\u00f8v en anden","addToCartColor":"#ef4444","showUrgencyBadge":false,"urgencyBadgeText":"Limited Stock","showTrustIndicators":true,"addToCartAnimation":true,"saveText":"Save","modalSize":"large","shareText":"Share","brandColor":"#000000","fontWeight":"medium","hoverScale":1.02,"lineHeight":1.6,"modalTitle":"","showSlider":true,"accentColor":"#1c1a17","resultTitle":"Here's your try-on","errorMessage":"Something went wrong. Please try again.","modelTabText":"Try on Model","photoTabText":"Use Your Photo","surfaceColor":"#FFFFFF","tryAgainText":"Try Again","showAddToCart":true,"animationStyle":"smooth","loadingMessage":"Creating your personalized try-on...","modalAnimation":"scale","showComparison":true,"modalBackground":"blur","shadowIntensity":"medium","showModalHeader":false,"showSocialProof":true,"galleryBadgeText":"Your Try-On","themePersonality":"custom","floatingBadgeText":"New!","loadingSubMessage":"Usually takes 15-30 seconds","showFloatingBadge":false,"widgetDescription":"Pr\\u00f8v p\\u00e5","floatingButtonIcon":true,"floatingButtonText":"Pr\\u00f8v p\\u00e5","floatingButtonStyle":"pill","sliderInitialPosition":50,"floatingButtonPosition":"bottom-right","showSizeRecommendation":true,"galleryNotificationText":"Try-on added to gallery!","models":[]}\">\n\t\t\t\t<noscript>Enable JavaScript to use Virtual Try-On<\/noscript>\n\t\t\t<\/div>\n\t<form class=\"cart\" action=\"https:\/\/duusbergmann.dk\/index.php\/product\/gray-quarter-zip\/\" method=\"post\" enctype='multipart\/form-data'>\n\t\t\n\t\t<div class=\"quantity\">\n\t\t<label class=\"screen-reader-text\" for=\"quantity_6a67c225b28f6\">Gray quarter zip quantity<\/label>\n\t<input\n\t\ttype=\"number\"\n\t\t\t\tid=\"quantity_6a67c225b28f6\"\n\t\tclass=\"input-text qty text\"\n\t\tname=\"quantity\"\n\t\tvalue=\"1\"\n\t\taria-label=\"Product quantity\"\n\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t\tstep=\"1\"\n\t\t\tplaceholder=\"\"\n\t\t\tinputmode=\"numeric\"\n\t\t\tautocomplete=\"off\"\n\t\t\t\/>\n\t<\/div>\n\n\t\t<button type=\"submit\" name=\"add-to-cart\" value=\"78\" class=\"single_add_to_cart_button button alt\">Add to cart<\/button>\n\n\t\t\t<\/form>\n\n\t\n<\/div>\n\n\n<div data-block-name=\"woocommerce\/product-meta\" class=\"wp-block-woocommerce-product-meta\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\"><div data-block-name=\"woocommerce\/product-sku\" class=\"wc-block-components-product-sku wc-block-grid__product-sku wp-block-woocommerce-product-sku product_meta wp-block-post-terms \" style=\"\">\n\t\t\t\t<span class=\"wp-block-post-terms__prefix\">SKU:<\/span>\n\t\t\t\t<span class=\"sku\" >10<\/span>\n\t\t\t\t\n\t\t\t<\/div>\n\n<div class=\"taxonomy-product_cat wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">Category: <\/span><a href=\"https:\/\/duusbergmann.dk\/index.php\/product-category\/uncategorized\/\" rel=\"tag\">Uncategorized<\/a><\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Virtual Try-On Section AI-Powered Virtual Try-On Technology Explore how AI-driven virtual try-on experiences can transform your customer’s shopping journey. This […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-117","page","type-page","status-publish","hentry","desktop-align-left","tablet-align-left","mobile-align-left"],"_links":{"self":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":24,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":117,"date":"2025-10-08T20:47:36","date_gmt":"2025-10-08T20:47:36","guid":{"rendered":"https:\/\/duusbergmann.dk\/?page_id=117"},"modified":"2025-11-26T13:10:14","modified_gmt":"2025-11-26T13:10:14","slug":"homepage","status":"publish","type":"page","link":"https:\/\/duusbergmann.dk\/","title":{"rendered":"Homepage"},"content":{"rendered":"\n\n\n\n \n \n Virtual Try-On Section<\/title>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n overflow-x: hidden;\n }\n \n \/* Full-width container that extends edge-to-edge *\/\n .vto-full-width-wrapper {\n width: 100%;\n position: relative;\n left: 0;\n right: 0;\n margin: 0;\n overflow: hidden;\n }\n \n .vto-section {\n position: relative;\n background: #ffffff;\n padding: 120px 20px;\n overflow: hidden;\n }\n \n \/* Simple floating color splats *\/\n .vto-bg-splat {\n position: absolute;\n border-radius: 50%;\n filter: blur(90px);\n opacity: 0.25;\n z-index: 0;\n animation: float 12s ease-in-out infinite;\n }\n \n .vto-bg-splat-1 {\n top: -150px;\n right: 5%;\n width: 600px;\n height: 600px;\n background: #818cf8;\n animation-delay: 0s;\n }\n \n .vto-bg-splat-2 {\n bottom: -150px;\n left: 0%;\n width: 700px;\n height: 700px;\n background: #f9a8d4;\n animation-delay: -6s;\n }\n \n .vto-bg-splat-3 {\n top: 40%;\n right: -100px;\n width: 550px;\n height: 550px;\n background: #fbbf24;\n animation-delay: -3s;\n }\n \n .vto-bg-splat-4 {\n top: 10%;\n left: -100px;\n width: 500px;\n height: 500px;\n background: #c4b5fd;\n animation-delay: -8s;\n }\n \n .vto-bg-splat-5 {\n bottom: 20%;\n right: 15%;\n width: 450px;\n height: 450px;\n background: #a5f3fc;\n animation-delay: -4s;\n }\n \n .vto-bg-splat-6 {\n top: 55%;\n left: 35%;\n width: 400px;\n height: 400px;\n background: #fdba74;\n animation-delay: -10s;\n }\n \n .vto-bg-splat-7 {\n bottom: 50%;\n left: 10%;\n width: 350px;\n height: 350px;\n background: #fb923c;\n animation-delay: -2s;\n }\n \n .vto-bg-splat-8 {\n top: 30%;\n right: 35%;\n width: 380px;\n height: 380px;\n background: #e9d5ff;\n animation-delay: -7s;\n }\n \n \/* Content container - respects Astra's content width *\/\n .vto-container {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n padding: 0 20px;\n }\n \n \/* Hero *\/\n .vto-hero {\n text-align: center;\n margin-bottom: 100px;\n position: relative;\n }\n \n .vto-hero h1 {\n font-size: 4.5rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 28px;\n line-height: 1.1;\n letter-spacing: -0.04em;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.2s forwards;\n }\n \n .vto-hero h1 .highlight {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 50%, #f9a8d4 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: gradientShift 3s ease infinite;\n background-size: 200% auto;\n }\n \n .vto-hero p {\n font-size: 1.35rem;\n color: #475569;\n max-width: 750px;\n margin: 0 auto 52px;\n line-height: 1.7;\n font-weight: 400;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.4s forwards;\n }\n \n .vto-cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 20px 48px;\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n color: #ffffff;\n text-decoration: none;\n border-radius: 12px;\n font-size: 1.1rem;\n font-weight: 700;\n transition: all 0.4s ease;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.6s forwards;\n box-shadow: 0 8px 32px rgba(129, 140, 248, 0.25);\n position: relative;\n overflow: hidden;\n }\n \n .vto-cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.6s;\n }\n \n .vto-cta:hover::before {\n left: 100%;\n }\n \n .vto-cta:hover {\n transform: translateY(-3px) scale(1.03);\n box-shadow: 0 12px 40px rgba(129, 140, 248, 0.35);\n color: #ffffff;\n }\n \n .vto-cta:active {\n transform: translateY(-1px) scale(1.01);\n box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3);\n }\n \n \/* Feature Grid *\/\n .vto-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n position: relative;\n }\n \n .vto-card {\n background: #ffffff;\n border: 3px solid transparent;\n border-radius: 24px;\n padding: 60px 44px;\n text-align: center;\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 0;\n transform: translateY(40px);\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);\n }\n \n \/* Gradient borders that animate *\/\n .vto-card::before {\n content: '';\n position: absolute;\n top: -3px;\n left: -3px;\n right: -3px;\n bottom: -3px;\n background: linear-gradient(135deg, #818cf8, #c4b5fd, #f9a8d4, #fbbf24);\n border-radius: 24px;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.6s ease;\n background-size: 300% 300%;\n animation: gradientRotate 4s ease infinite;\n }\n \n .vto-card:hover::before {\n opacity: 0.7;\n }\n \n .vto-card:active::before {\n opacity: 0.5;\n }\n \n \/* Vibrant glow effects *\/\n .vto-card:nth-child(1)::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(129, 140, 248, 0.15) 0%, transparent 70%);\n transition: all 0.7s ease;\n z-index: -1;\n }\n \n .vto-card:nth-child(2)::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(196, 181, 253, 0.15) 0%, transparent 70%);\n transition: all 0.7s ease;\n z-index: -1;\n }\n \n .vto-card:nth-child(3)::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(249, 168, 212, 0.15) 0%, transparent 70%);\n transition: all 0.7s ease;\n z-index: -1;\n }\n \n .vto-card:hover::after {\n width: 450px;\n height: 450px;\n }\n \n .vto-card:active::after {\n width: 350px;\n height: 350px;\n }\n \n .vto-card:nth-child(1) {\n animation: slideUp 0.8s ease-out 0.8s forwards;\n }\n \n .vto-card:nth-child(2) {\n animation: slideUp 0.8s ease-out 1s forwards;\n }\n \n .vto-card:nth-child(3) {\n animation: slideUp 0.8s ease-out 1.2s forwards;\n }\n \n .vto-card:hover {\n transform: translateY(-12px) scale(1.01);\n box-shadow: 0 20px 60px rgba(129, 140, 248, 0.18);\n }\n \n .vto-card:active {\n transform: translateY(-6px) scale(1.005);\n box-shadow: 0 12px 40px rgba(129, 140, 248, 0.15);\n }\n \n .vto-icon-wrapper {\n width: 100px;\n height: 100px;\n margin: 0 auto 36px;\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n border-radius: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 8px 32px rgba(129, 140, 248, 0.25);\n position: relative;\n z-index: 1;\n }\n \n .vto-card:nth-child(2) .vto-icon-wrapper {\n background: linear-gradient(135deg, #c4b5fd 0%, #f9a8d4 100%);\n box-shadow: 0 8px 32px rgba(196, 181, 253, 0.25);\n }\n \n .vto-card:nth-child(3) .vto-icon-wrapper {\n background: linear-gradient(135deg, #f9a8d4 0%, #fbbf24 100%);\n box-shadow: 0 8px 32px rgba(249, 168, 212, 0.25);\n }\n \n .vto-card:hover .vto-icon-wrapper {\n transform: scale(1.1) rotate(8deg);\n box-shadow: 0 12px 40px rgba(129, 140, 248, 0.35);\n }\n \n .vto-card:active .vto-icon-wrapper {\n transform: scale(1.05) rotate(5deg);\n box-shadow: 0 8px 30px rgba(129, 140, 248, 0.3);\n }\n \n .vto-icon {\n font-size: 2.5rem;\n }\n \n .vto-card h3 {\n font-size: 1.5rem;\n font-weight: 700;\n color: #0f172a;\n margin-bottom: 18px;\n letter-spacing: -0.02em;\n position: relative;\n z-index: 1;\n }\n \n .vto-card p {\n font-size: 1.05rem;\n color: #475569;\n line-height: 1.7;\n margin: 0;\n font-weight: 400;\n position: relative;\n z-index: 1;\n }\n \n \/* Animations *\/\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes slideUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes float {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(50px, -30px) scale(1.1); }\n 66% { transform: translate(-30px, 40px) scale(0.9); }\n }\n \n @keyframes gradientShift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n \n @keyframes gradientRotate {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n \n \/* How It Works Section *\/\n .vto-how-section {\n position: relative;\n background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);\n padding: 120px 20px;\n overflow: hidden;\n margin-top: -1px;\n }\n \n .vto-how-hero {\n text-align: center;\n margin-bottom: 80px;\n position: relative;\n }\n \n .vto-how-hero h2 {\n font-size: 3.5rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 24px;\n line-height: 1.1;\n letter-spacing: -0.04em;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.2s forwards;\n }\n \n .vto-how-hero h2 .highlight {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 50%, #f9a8d4 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: gradientShift 3s ease infinite;\n background-size: 200% auto;\n }\n \n .vto-how-hero p {\n font-size: 1.25rem;\n color: #475569;\n max-width: 700px;\n margin: 0 auto;\n line-height: 1.7;\n font-weight: 400;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 0.4s forwards;\n }\n \n \/* Options Grid *\/\n .vto-options-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 48px;\n position: relative;\n margin-bottom: 60px;\n }\n \n .vto-option-card {\n background: #ffffff;\n border-radius: 32px;\n padding: 56px 48px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 0;\n transform: translateY(40px);\n }\n \n \/* Shimmer effect on premium card *\/\n .vto-option-card:nth-child(2)::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(\n 45deg,\n transparent 30%,\n rgba(255, 255, 255, 0.3) 50%,\n transparent 70%\n );\n animation: shimmer 3s ease-in-out infinite;\n pointer-events: none;\n }\n \n @keyframes shimmer {\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\n }\n \n .vto-option-card:nth-child(1) {\n animation: slideUp 0.8s ease-out 0.6s forwards;\n border: 3px solid #e2e8f0;\n transition: all 0.6s ease;\n }\n \n .vto-option-card:nth-child(1):hover {\n border-color: #cbd5e1;\n background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);\n }\n \n .vto-option-card:nth-child(2) {\n animation: slideUp 0.8s ease-out 0.8s forwards;\n border: 3px solid transparent;\n background: linear-gradient(#ffffff, #ffffff) padding-box,\n linear-gradient(135deg, #818cf8, #c4b5fd) border-box;\n background-size: 200% 200%;\n animation: slideUp 0.8s ease-out 0.8s forwards, borderPulse 4s ease-in-out infinite;\n }\n \n @keyframes borderPulse {\n 0%, 100% { \n background-position: 0% 50%;\n }\n 50% { \n background-position: 100% 50%;\n }\n }\n \n .vto-option-card:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 16px 60px rgba(129, 140, 248, 0.15);\n }\n \n \/* Badge *\/\n .vto-badge {\n display: inline-block;\n padding: 10px 24px;\n border-radius: 100px;\n font-size: 0.85rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 28px;\n animation: badgeBounce 2s ease-in-out infinite;\n }\n \n @keyframes badgeBounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-5px); }\n }\n \n .vto-badge-budget {\n background: #f1f5f9;\n color: #475569;\n }\n \n .vto-badge-premium {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n color: #ffffff;\n box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3);\n animation: badgeBounce 2s ease-in-out infinite, badgePulse 2s ease-in-out infinite;\n }\n \n @keyframes badgePulse {\n 0%, 100% { box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3); }\n 50% { box-shadow: 0 6px 30px rgba(129, 140, 248, 0.5); }\n }\n \n .vto-option-card h3 {\n font-size: 2rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 16px;\n letter-spacing: -0.02em;\n transition: all 0.4s ease;\n }\n \n .vto-option-card:hover h3 {\n transform: translateX(8px);\n }\n \n .vto-option-card:nth-child(2):hover h3 {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n background-size: 200% auto;\n animation: gradientShift 2s ease infinite;\n }\n \n .vto-option-card .subtitle {\n font-size: 1.15rem;\n color: #64748b;\n margin-bottom: 36px;\n line-height: 1.6;\n transition: all 0.3s ease;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 1.2s forwards;\n }\n \n .vto-option-card:hover .subtitle {\n color: #475569;\n transform: translateY(-4px);\n }\n \n \/* Steps *\/\n .vto-steps {\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin-bottom: 40px;\n }\n \n .vto-step {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n padding: 24px;\n background: #f8fafc;\n border-radius: 16px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateX(-30px);\n }\n \n .vto-step:nth-child(1) {\n animation: slideInRight 0.6s ease-out 1s forwards;\n }\n \n .vto-step:nth-child(2) {\n animation: slideInRight 0.6s ease-out 1.15s forwards;\n }\n \n .vto-step:nth-child(3) {\n animation: slideInRight 0.6s ease-out 1.3s forwards;\n }\n \n .vto-step:nth-child(4) {\n animation: slideInRight 0.6s ease-out 1.45s forwards;\n }\n \n @keyframes slideInRight {\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n .vto-step::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n transform: scaleY(0);\n transform-origin: top;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n .vto-option-card:hover .vto-step::before,\n .vto-step:hover::before {\n transform: scaleY(1);\n }\n \n \/* Animated dots indicator *\/\n .vto-step::after {\n content: '';\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 8px;\n background: #818cf8;\n border-radius: 50%;\n opacity: 0;\n transition: all 0.4s ease;\n }\n \n .vto-step:hover::after {\n opacity: 1;\n animation: dotPulse 1.5s ease-in-out infinite;\n }\n \n @keyframes dotPulse {\n 0%, 100% { \n transform: translateY(-50%) scale(1);\n box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.7);\n }\n 50% { \n transform: translateY(-50%) scale(1.2);\n box-shadow: 0 0 0 10px rgba(129, 140, 248, 0);\n }\n }\n \n .vto-step:hover {\n background: #f1f5f9;\n transform: translateX(8px);\n }\n \n .vto-step-number {\n min-width: 44px;\n height: 44px;\n background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);\n color: #ffffff;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 1.1rem;\n box-shadow: 0 4px 16px rgba(100, 116, 139, 0.2);\n transition: all 0.4s ease;\n animation: numberFloat 3s ease-in-out infinite;\n }\n \n .vto-step:nth-child(1) .vto-step-number {\n animation-delay: 0s;\n }\n \n .vto-step:nth-child(2) .vto-step-number {\n animation-delay: 0.5s;\n }\n \n .vto-step:nth-child(3) .vto-step-number {\n animation-delay: 1s;\n }\n \n .vto-step:nth-child(4) .vto-step-number {\n animation-delay: 1.5s;\n }\n \n @keyframes numberFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-8px) rotate(5deg); }\n }\n \n .vto-step:hover .vto-step-number {\n transform: scale(1.15) rotate(15deg);\n box-shadow: 0 6px 24px rgba(129, 140, 248, 0.4);\n }\n \n .vto-option-card:nth-child(2) .vto-step-number {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n box-shadow: 0 4px 16px rgba(129, 140, 248, 0.25);\n }\n \n .vto-step-content h4 {\n font-size: 1.1rem;\n font-weight: 700;\n color: #0f172a;\n margin-bottom: 8px;\n }\n \n .vto-step-content p {\n font-size: 0.95rem;\n color: #64748b;\n line-height: 1.6;\n margin: 0;\n }\n \n \/* Features List *\/\n .vto-features {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-top: 32px;\n border-top: 2px solid #e2e8f0;\n }\n \n .vto-feature {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 1rem;\n color: #475569;\n opacity: 0;\n animation: fadeInLeft 0.6s ease-out forwards;\n transition: all 0.3s ease;\n }\n \n .vto-feature:nth-child(1) { animation-delay: 1s; }\n .vto-feature:nth-child(2) { animation-delay: 1.1s; }\n .vto-feature:nth-child(3) { animation-delay: 1.2s; }\n .vto-feature:nth-child(4) { animation-delay: 1.3s; }\n \n @keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n .vto-feature:hover {\n transform: translateX(8px);\n color: #0f172a;\n }\n \n .vto-feature i {\n color: #64748b;\n font-size: 1.1rem;\n animation: checkPulse 2s ease-in-out infinite;\n transition: all 0.3s ease;\n }\n \n .vto-option-card:nth-child(2) .vto-feature i {\n color: #818cf8;\n }\n \n .vto-feature:hover i {\n transform: scale(1.2) rotate(360deg);\n }\n \n .vto-option-card:nth-child(2) .vto-feature:hover i {\n color: #c4b5fd;\n }\n \n @keyframes checkPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n \n \/* Price Tag *\/\n .vto-price {\n text-align: center;\n padding: 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 16px;\n margin-top: 32px;\n }\n \n .vto-price-amount {\n font-size: 2.5rem;\n font-weight: 800;\n color: #0f172a;\n margin-bottom: 8px;\n }\n \n .vto-option-card:nth-child(1) .vto-price-amount {\n background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .vto-price-label {\n font-size: 1rem;\n color: #64748b;\n font-weight: 500;\n }\n \n \/* Responsive *\/\n @media (max-width: 968px) {\n .vto-grid {\n grid-template-columns: 1fr;\n gap: 28px;\n }\n \n .vto-options-grid {\n grid-template-columns: 1fr;\n gap: 36px;\n }\n \n .vto-how-hero h2 {\n font-size: 2.5rem;\n }\n }\n \n @media (max-width: 768px) {\n .vto-section {\n padding: 80px 20px;\n }\n \n .vto-hero {\n margin-bottom: 70px;\n }\n \n .vto-hero h1 {\n font-size: 2.5rem;\n }\n \n .vto-hero p {\n font-size: 1.15rem;\n }\n \n .vto-card {\n padding: 48px 36px;\n }\n \n .vto-icon-wrapper {\n width: 80px;\n height: 80px;\n }\n \n .vto-icon {\n font-size: 2rem;\n }\n \n .vto-how-section {\n padding: 80px 20px;\n }\n \n .vto-how-hero h2 {\n font-size: 2rem;\n }\n \n .vto-option-card {\n padding: 40px 32px;\n }\n \n .vto-step {\n flex-direction: column;\n gap: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"vto-full-width-wrapper\">\n <div class=\"vto-section\">\n \n <div class=\"vto-bg-splat vto-bg-splat-1\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-2\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-3\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-4\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-5\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-6\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-7\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-8\"><\/div>\n \n \n <div class=\"vto-container\">\n \n <div class=\"vto-hero\">\n <h1>AI-Powered <span class=\"highlight\">Virtual Try-On<\/span> Technology<\/h1>\n <p>Explore how AI-driven virtual try-on experiences can transform your customer’s shopping journey. This interactive demo visualizes the possibilities for your brand.<\/p>\n <a href=\"\/index.php\/demo\/\" class=\"vto-cta\">\n <span>Experience the Demo<\/span>\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/a>\n <\/div>\n \n \n <div class=\"vto-grid\">\n \n <div class=\"vto-card\">\n <div class=\"vto-icon-wrapper\">\n <span class=\"vto-icon\">\ud83c\udfaf<\/span>\n <\/div>\n <h3>Increase Conversions, Reduce Returns<\/h3>\n <p>Virtual try-on builds unparalleled purchase confidence. Customers see exactly what they’re getting, leading to higher conversions and dramatically fewer returns.<\/p>\n <\/div>\n \n \n <div class=\"vto-card\">\n <div class=\"vto-icon-wrapper\">\n <span class=\"vto-icon\">\u26a1<\/span>\n <\/div>\n <h3>Seamless Integration<\/h3>\n <p>Deploy in minutes across WooCommerce and major platforms. Zero coding required. Our intelligent system adapts to your existing infrastructure effortlessly.<\/p>\n <\/div>\n \n \n <div class=\"vto-card\">\n <div class=\"vto-icon-wrapper\">\n <span class=\"vto-icon\">\ud83d\udd27<\/span>\n <\/div>\n <h3>Customizable & Insight-Driven<\/h3>\n <p>Complete brand control with deep analytics integration. Track engagement patterns, understand behavior, and continuously optimize your customer experience.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"vto-full-width-wrapper\">\n <div class=\"vto-how-section\">\n \n <div class=\"vto-bg-splat vto-bg-splat-2\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-5\"><\/div>\n <div class=\"vto-bg-splat vto-bg-splat-7\"><\/div>\n \n <div class=\"vto-container\">\n \n <div class=\"vto-how-hero\">\n <h2>How <span class=\"highlight\">It Works<\/span><\/h2>\n <p>Choose the perfect solution for your business. From personalized try-ons to scalable model-based experiences.<\/p>\n <\/div>\n \n \n <div class=\"vto-options-grid\">\n \n <div class=\"vto-option-card\">\n <span class=\"vto-badge vto-badge-budget\">Budget Edition<\/span>\n <h3>Model-Based Try-On<\/h3>\n <p class=\"subtitle\">Pre-generated models that match your customers’ profiles for instant visualization.<\/p>\n \n <div class=\"vto-steps\">\n <div class=\"vto-step\">\n <div class=\"vto-step-number\">1<\/div>\n <div class=\"vto-step-content\">\n <h4>Easy Setup & Product Selection<\/h4>\n <p>Install the extension, choose which products to enable, and our AI generates diverse model variations.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">2<\/div>\n <div class=\"vto-step-content\">\n <h4>Smart Matching Questions<\/h4>\n <p>Customers answer quick questions about body type, height, and style preferences.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">3<\/div>\n <div class=\"vto-step-content\">\n <h4>Find Your Match<\/h4>\n <p>AI recommends models that closely match their profile, showing how the product looks on similar body types.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">4<\/div>\n <div class=\"vto-step-content\">\n <h4>Size Recommendation<\/h4>\n <p>Based on selected model and preferences, get intelligent size suggestions to reduce returns.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"vto-features\">\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>No customer photo upload required<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Instant loading with pre-rendered models<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Diverse model library (all body types)<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Smart size recommendations<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"vto-option-card\">\n <span class=\"vto-badge vto-badge-premium\">Premium Edition<\/span>\n <h3>Personal Virtual Try-On<\/h3>\n <p class=\"subtitle\">Every customer gets their own AI-generated try-on experience using their actual photo.<\/p>\n \n <div class=\"vto-steps\">\n <div class=\"vto-step\">\n <div class=\"vto-step-number\">1<\/div>\n <div class=\"vto-step-content\">\n <h4>Customer Uploads Photo<\/h4>\n <p>Your shoppers upload a single photo of themselves directly on your product page.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">2<\/div>\n <div class=\"vto-step-content\">\n <h4>AI Detects Product<\/h4>\n <p>Our intelligent system automatically identifies the garment from your product images.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">3<\/div>\n <div class=\"vto-step-content\">\n <h4>Instant Generation<\/h4>\n <p>Advanced AI model creates a photorealistic image showing them wearing your exact product.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"vto-step\">\n <div class=\"vto-step-number\">4<\/div>\n <div class=\"vto-step-content\">\n <h4>Try Multiple Items<\/h4>\n <p>Customers can try on different products, colors, and styles using the same photo.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"vto-features\">\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Hyper-personalized experience for each shopper<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Maximum conversion rates & confidence<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Automatic garment detection & placement<\/span>\n <\/div>\n <div class=\"vto-feature\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span>Photorealistic AI rendering<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<div data-block-name=\"woocommerce\/single-product\" data-product-id=\"98\" class=\"wp-block-woocommerce-single-product woocommerce\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-block-name=\"woocommerce\/single-product\" data-product-id=\"78\" class=\"wp-block-woocommerce-single-product woocommerce\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-block-name=\"woocommerce\/single-product\" data-product-id=\"78\" class=\"wp-block-woocommerce-single-product woocommerce\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div data-block-name=\"woocommerce\/product-image\" data-is-descendent-of-single-product-block=\"true\" data-show-sale-badge=\"false\" class=\"wc-block-components-product-image wc-block-grid__product-image wc-block-components-product-image--aspect-ratio-auto wp-block-woocommerce-product-image\"><a href=\"https:\/\/duusbergmann.dk\/index.php\/product\/gray-quarter-zip\/\" style=\"\" data-wp-on--click=\"woocommerce\/product-collection::actions.viewProduct\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"536\" src=\"https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-600x536.jpg\" class=\"attachment-woocommerce_single size-woocommerce_single\" alt=\"Gray quarter zip\" data-testid=\"product-image\" data-image-id=\"96\" style=\"object-fit:cover;\" title=\"Gray quarter zip\" srcset=\"https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-600x536.jpg 600w, https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-300x268.jpg 300w, https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385-768x686.jpg 768w, https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385.jpg 940w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><div class=\"wc-block-components-product-image__inner-container\">\n<div data-block-name=\"woocommerce\/product-sale-badge\" class=\"wp-block-woocommerce-product-sale-badge \"><div class=\"wc-block-components-product-sale-badge alignright wc-block-components-product-sale-badge--align-right\" style=\"\"><span class=\"wc-block-components-product-sale-badge__text\" aria-hidden=\"true\">Sale<\/span><span class=\"screen-reader-text\">Product on sale<\/span><\/div><\/div>\n<\/div><\/a><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/duusbergmann.dk\/index.php\/product\/gray-quarter-zip\/\" target=\"_self\" >Gray quarter zip<\/a><\/h2>\n\n\n\n<div data-block-name=\"woocommerce\/product-price\" data-is-descendent-of-single-product-block=\"true\" class=\"wp-block-woocommerce-product-price\"><div class=\"wc-block-components-product-price wc-block-grid__product-price \" style=\"\" >\n\t\t\t\t\t<del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><bdi>1.000,00 <span class=\"woocommerce-Price-currencySymbol\">kr.<\/span><\/bdi><\/span><\/del> <span class=\"screen-reader-text\">Original price was: 1.000,00 kr..<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><bdi>300,00 <span class=\"woocommerce-Price-currencySymbol\">kr.<\/span><\/bdi><\/span><\/ins><span class=\"screen-reader-text\">Current price is: 300,00 kr..<\/span>\n\t\t\t\t<\/div><\/div>\n\n\n\n<div data-block-name=\"woocommerce\/add-to-cart-form\" class=\"wp-block-add-to-cart-form wc-block-add-to-cart-form wc-block-add-to-cart-form--input wp-block-woocommerce-add-to-cart-form\" >\n\t<div class=\"vfr-widget-root\" \n\t\t\t\tdata-product-id=\"78\"\n\t\t\t\tdata-product-image=\"https:\/\/duusbergmann.dk\/wp-content\/uploads\/2025\/10\/Gray-quarter-zip-e1759951187385.jpg\"\n\t\t\t\tdata-rest-url=\"https:\/\/duusbergmann.dk\/index.php\/wp-json\/virtual-fitting-room\/v1\/saas\"\n\t\t\t\tdata-nonce=\"6fe699ea1a\"\n\t\t\t\tdata-config=\"{"displayMode":"carousel","theme":"light","primaryColor":"#0F172A","secondaryColor":"#000000","backgroundColor":"#fafafa","textColor":"#0F172A","borderColor":"#E2E8F0","fontFamily":"'Inter', sans-serif","fontSize":16,"borderRadius":20,"cardStyle":"elevated","gridColumns":2,"gridColumnsMobile":2,"cardAspectRatio":"3:4","showModelNames":true,"showSizeLabels":false,"showPopularBadge":false,"enableModeSwitch":false,"enablePhotoUpload":false,"enableCameraCapture":true,"showPoseGuide":true,"animationLevel":"full","hoverEffects":true,"loadingStyle":"shimmer","lazyLoadImages":true,"cacheResults":true,"analyticsEnabled":true,"availableModes":["grid"],"questions":[],"privacyText":"Your photo is never stored","maxFileSize":10,"injectionMode":"gallery","gridDescription":"Se p\\u00e5 en der ligner dig","gridSubtitle":"V\\u00e6lg en der ligner dig","addToCartText":"Tilf\\u00f8j til kurv","tryAnotherText":"Pr\\u00f8v en anden","addToCartColor":"#ef4444","showUrgencyBadge":false,"urgencyBadgeText":"Limited Stock","showTrustIndicators":true,"addToCartAnimation":true,"saveText":"Save","modalSize":"large","shareText":"Share","brandColor":"#000000","fontWeight":"medium","hoverScale":1.02,"lineHeight":1.6,"modalTitle":"","showSlider":true,"accentColor":"#1c1a17","resultTitle":"Here's your try-on","errorMessage":"Something went wrong. Please try again.","modelTabText":"Try on Model","photoTabText":"Use Your Photo","surfaceColor":"#FFFFFF","tryAgainText":"Try Again","showAddToCart":true,"animationStyle":"smooth","loadingMessage":"Creating your personalized try-on...","modalAnimation":"scale","showComparison":true,"modalBackground":"blur","shadowIntensity":"medium","showModalHeader":false,"showSocialProof":true,"galleryBadgeText":"Your Try-On","themePersonality":"custom","floatingBadgeText":"New!","loadingSubMessage":"Usually takes 15-30 seconds","showFloatingBadge":false,"widgetDescription":"Pr\\u00f8v p\\u00e5","floatingButtonIcon":true,"floatingButtonText":"Pr\\u00f8v p\\u00e5","floatingButtonStyle":"pill","sliderInitialPosition":50,"floatingButtonPosition":"bottom-right","showSizeRecommendation":true,"galleryNotificationText":"Try-on added to gallery!","models":[]}\">\n\t\t\t\t<noscript>Enable JavaScript to use Virtual Try-On<\/noscript>\n\t\t\t<\/div>\n\t<form class=\"cart\" action=\"https:\/\/duusbergmann.dk\/index.php\/product\/gray-quarter-zip\/\" method=\"post\" enctype='multipart\/form-data'>\n\t\t\n\t\t<div class=\"quantity\">\n\t\t<label class=\"screen-reader-text\" for=\"quantity_6a67c225b28f6\">Gray quarter zip quantity<\/label>\n\t<input\n\t\ttype=\"number\"\n\t\t\t\tid=\"quantity_6a67c225b28f6\"\n\t\tclass=\"input-text qty text\"\n\t\tname=\"quantity\"\n\t\tvalue=\"1\"\n\t\taria-label=\"Product quantity\"\n\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t\tstep=\"1\"\n\t\t\tplaceholder=\"\"\n\t\t\tinputmode=\"numeric\"\n\t\t\tautocomplete=\"off\"\n\t\t\t\/>\n\t<\/div>\n\n\t\t<button type=\"submit\" name=\"add-to-cart\" value=\"78\" class=\"single_add_to_cart_button button alt\">Add to cart<\/button>\n\n\t\t\t<\/form>\n\n\t\n<\/div>\n\n\n<div data-block-name=\"woocommerce\/product-meta\" class=\"wp-block-woocommerce-product-meta\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\"><div data-block-name=\"woocommerce\/product-sku\" class=\"wc-block-components-product-sku wc-block-grid__product-sku wp-block-woocommerce-product-sku product_meta wp-block-post-terms \" style=\"\">\n\t\t\t\t<span class=\"wp-block-post-terms__prefix\">SKU:<\/span>\n\t\t\t\t<span class=\"sku\" >10<\/span>\n\t\t\t\t\n\t\t\t<\/div>\n\n<div class=\"taxonomy-product_cat wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">Category: <\/span><a href=\"https:\/\/duusbergmann.dk\/index.php\/product-category\/uncategorized\/\" rel=\"tag\">Uncategorized<\/a><\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Virtual Try-On Section AI-Powered Virtual Try-On Technology Explore how AI-driven virtual try-on experiences can transform your customer’s shopping journey. This […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-117","page","type-page","status-publish","hentry","desktop-align-left","tablet-align-left","mobile-align-left"],"_links":{"self":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":24,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/duusbergmann.dk\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}