.arada-gradient { background: linear-gradient(135deg, #f97316 0%, #db2777 100%); }
body { background-color: #0f0f11; font-family: sans-serif; overflow-x: hidden; }
.comparison-slider { position: relative; overflow: hidden; background-color: #000; border-radius: 40px; }
.before-image { position: absolute; inset: 0; z-index: 10; clip-path: inset(0 50% 0 0); }
.slider-input { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; appearance: none; z-index: 30; cursor: col-resize; outline: none; }
.slider-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #db2777; z-index: 25; pointer-events: none; transform: translateX(-50%); }
.slider-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; background: #161618; border: 4px solid #db2777; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 20px rgba(219, 39, 119, 0.4); }
.cat-card.active { border-color: #db2777; background: rgba(219, 39, 119, 0.05); transform: translateY(-5px); transition: all 0.3s ease; }
.group:hover img { transform: scale(1.05); transition: transform 2s ease; }