/* Compare Section */
.compare{padding:40px clamp(24px,6vw,80px);color:#0b0f1c}
.compare-header{max-width:1080px;margin:0 auto 22px;text-align:center}
.compare-title{font-size:32px;line-height:1.2;margin:0 0 16px;font-weight:800;background: linear-gradient(93deg, #a38aff, #4e4dff);background-clip: text;-webkit-text-fill-color: transparent;}
.compare-tabs{display:flex;gap:28px;justify-content:center;align-items:center}
.compare-tabs .tab{font-size:20px;appearance:none;border:none;background:transparent;color:#8ab4ff;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}
.compare-tabs .tab:hover{background:rgba(0,0,0,.06)}
.compare-tabs .tab.active{color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)}

.compare-stage{--split:50%;position:relative;margin:18px auto 0;max-width:1080px;height:520px;border-radius:28px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18);background:#cfd9e6}
.compare-stage .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-stage .img.before{filter:blur(0px) contrast(.92) saturate(.85) brightness(.97)}
.compare-stage .img.after{clip-path:polygon(var(--split) 0, 100% 0, 100% 100%, var(--split) 100%)}

/* 分割线 */
.compare-stage .divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.03)}

/* 拖动控件 */
.handle{position:absolute;left:var(--split);top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:none;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18);cursor:ew-resize;display:flex;align-items:center;justify-content:center;gap:6px}
.handle:active{transform:translate(-50%,-50%) scale(.98)}
.handle .chev{display:inline-block;width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.9}
.handle .chev.left{background-image:url('../images/left.svg')}
.handle .chev.right{background-image:url('../images/right.svg')}