@keyframes arrowPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}.comparison-demo{margin:2rem 0 3rem;text-align:center}.comparison-title-gradient{font-size:2.2rem;font-weight:800;margin-bottom:2rem;text-align:center;line-height:1.2;background:linear-gradient(-45deg,#667eea,#764ba2,#8b5fbf,#5a9fd4,#667eea,#9b7cbf);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite}@supports not (-webkit-background-clip:text){.comparison-title-gradient{color:#667eea;background:0 0;-webkit-text-fill-color:unset}}.comparison-demo h3{font-size:1.8rem;font-weight:700;color:var(--dark);margin-bottom:1.5rem}.before-after-grid{display:flex;align-items:stretch;justify-content:center;gap:2rem;margin:2rem 0;position:relative;max-width:1200px;margin-left:auto;margin-right:auto}.after-card,.before-card{flex:1;max-width:480px;background:var(--white);border:2px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,linear-gradient(-45deg,#667eea,#764ba2,#8b5fbf,#5a9fd4,#667eea,#9b7cbf) border-box;background-size:100% 100%,400% 400%;animation:gradientShift 4s ease infinite;border-radius:24px;padding:1.8rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column;height:100%;will-change:transform,box-shadow,background-position;opacity:0;transform:translateY(20px)}.after-card.loaded,.before-card.loaded{opacity:1;transform:translateY(0)}.after-card::before,.before-card::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(102,126,234,.03)0,rgba(118,75,162,.03) 100%);opacity:0;transition:opacity .4s ease;pointer-events:none}.after-card:hover::before,.before-card:hover::before{opacity:1}.after-card:hover,.before-card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 25px 50px rgba(102,126,234,.2)}.after-card h4,.after-card h4 i,.before-card h4,.before-card h4 i{display:flex;align-items:center;animation:gradientShift 4s ease infinite}.after-card h4,.before-card h4{font-size:1.1rem;font-weight:700;margin-bottom:1.2rem;gap:.75rem;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.after-card h4 i,.before-card h4 i{width:32px;height:32px;border-radius:50%;justify-content:center;font-size:.9rem;color:var(--white);-webkit-text-fill-color:var(--white)}.example{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem;flex-grow:1}.example-row{position:relative;padding:1.25rem;border-radius:16px;background:rgba(102,126,234,.04);border:1px solid rgba(102,126,234,.1);transition:all .3s ease}.example-row:hover{background:rgba(102,126,234,.06);border-color:rgba(102,126,234,.2);transform:translateX(4px)}.label{font-size:.75rem;font-weight:700;background:linear-gradient(-45deg,#667eea,#764ba2,#8b5fbf,#5a9fd4,#667eea,#9b7cbf);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem;display:block}.content{font-size:.9rem;line-height:1.6;color:var(--gray-700);font-weight:500}.content.generic{color:var(--gray-500);font-style:italic}.content.optimized{color:var(--dark);font-weight:600}.content.negative{color:#e74c3c;font-weight:600}.content.positive{background:linear-gradient(-45deg,#667eea,#764ba2,#8b5fbf,#5a9fd4,#667eea,#9b7cbf);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;font-weight:700}.impact,.seo-score{font-weight:700;background:rgba(102,126,234,.1);color:#667eea}.seo-score{display:inline-block;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;margin-top:.5rem}.seo-score.bad{border:1px solid var(--danger)}.seo-score.good{border:1px solid var(--success)}.impact{text-align:center;font-size:1rem;padding:1rem;border-radius:var(--radius)}.vs-arrow{flex-direction:column;gap:.75rem;z-index:2;flex-shrink:0}.after-card h4,.after-card h4 i,.before-card h4,.before-card h4 i,.vs-arrow i,.vs-arrow span{background:linear-gradient(-45deg,#667eea,#764ba2,#8b5fbf,#5a9fd4,#667eea,#9b7cbf);background-size:400% 400%}.vs-arrow,.vs-arrow i{display:flex;align-items:center;justify-content:center;position:relative}.vs-arrow i{width:56px;height:56px;animation:gradientShift 4s ease infinite,arrowPulse 3s ease-in-out infinite;border-radius:50%;color:var(--white);font-size:1.3rem;box-shadow:0 8px 25px rgba(102,126,234,.3);overflow:hidden;will-change:transform;z-index:1}.vs-arrow span{font-size:.8rem;font-weight:600;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;text-transform:uppercase;letter-spacing:1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.duration{font-size:.9rem;opacity:.8;font-weight:500}@media (max-width:768px){.comparison-demo h3{font-size:1.5rem;margin-bottom:1rem;text-align:center;padding:0 1rem}.before-after-grid{flex-direction:column;gap:1.5rem;margin:1.5rem 0;padding:0 .5rem}.vs-arrow{transform:rotate(90deg);margin:.5rem 0;order:2}.vs-arrow i{width:44px;height:44px;font-size:1rem}.vs-arrow .mobile-arrow-down{display:none}.vs-arrow .mobile-arrow-down::after{content:"";font-family:"Font Awesome 5 Free","Font Awesome 5 Pro","Font Awesome 6 Free","Font Awesome 6 Pro";font-weight:900;display:inline-block;color:var(--white);font-size:1rem}.before-card{order:1}.after-card{order:3}.after-card,.before-card{padding:1.25rem;max-width:100%;border-radius:18px;margin:0}.after-card h4,.before-card h4{font-size:.95rem;text-align:center;justify-content:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}.after-card h4 i,.before-card h4 i{width:28px;height:28px;font-size:.8rem}.example{gap:1rem}.example-row{padding:.875rem;border-radius:12px;transition:all .2s ease}.example-row:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(102,126,234,.1)}.label{font-size:.65rem;margin-bottom:.4rem;letter-spacing:.5px}.content{font-size:.8rem;line-height:1.5}.content.optimized,.content.positive{font-size:.75rem;line-height:1.4}.seo-score{padding:.4rem .8rem;font-size:.75rem;margin-top:.75rem;border-radius:16px}.impact{font-size:.9rem;padding:.875rem;margin-top:1.5rem;border-radius:12px;line-height:1.4}}@media (max-width:480px){.comparison-demo h3{font-size:1.3rem;line-height:1.3}.before-after-grid{padding:0 .25rem;gap:1.25rem}.after-card,.before-card{padding:1rem;border-radius:16px}.after-card h4,.before-card h4{font-size:.9rem;gap:.4rem}.example-row{padding:.75rem}.content{font-size:.75rem}.content.optimized,.content.positive{font-size:.7rem}.vs-arrow i{width:40px;height:40px;font-size:.9rem}.impact{font-size:.85rem;padding:.75rem}}@media (max-width:1024px) and (min-width:769px){.before-after-grid{gap:1.5rem}.after-card,.before-card{padding:1.6rem}}