/* ── Comparison Slider (interactive-2) ───────────── */
        .comparison-section {
            background: linear-gradient(180deg, #0a0e1a 0%, #0f1424 100%);
        }
        .comparison-section .container { text-align: center; }
        .comp-comparison {
            position: relative;
            width: 900px;
            max-width: 95vw;
            height: 560px;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 40px 100px rgba(0,0,0,0.4);
            user-select: none;
            margin: 3rem auto 0;
        }
        .comp-label {
            position: absolute;
            top: 16px;
            z-index: 20;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .comp-label-before {
            left: 16px;
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.2);
        }
        .comp-label-after {
            right: 16px;
            background: rgba(34, 197, 94, 0.15);
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.2);
        }
        .comp-panel {
            position: absolute;
            top: 0;
            height: 100%;
            overflow: hidden;
        }
        .comp-panel-before {
            left: 0;
            width: 100%;
            z-index: 1;
        }
        .comp-panel-after {
            right: 0;
            width: 100%;
            z-index: 2;
            clip-path: inset(0 0 0 50%);
        }
        .comp-panel-content {
            width: 900px;
            max-width: 95vw;
            height: 100%;
            padding: 52px 28px 28px;
        }
        .comp-panel-after .comp-panel-content {
            position: absolute;
            right: 0;
            top: 0;
        }
        .comp-terminal, .comp-panel-content {
            text-align: left;
        }
        .comp-terminal {
            background: #1a1a2e;
            height: 100%;
            border-radius: 0;
            font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
            font-size: 12.5px;
            line-height: 1.7;
            padding: 20px;
            overflow: hidden;
            color: #a1a1aa;
        }
        .comp-term-prompt { color: #4ade80; }
        .comp-term-cmd { color: #e4e4e7; }
        .comp-term-error { color: #f87171; }
        .comp-term-warning { color: #fbbf24; }
        .comp-term-dim { color: #52525b; }
        .comp-term-blue { color: #60a5fa; }
        .comp-term-line { white-space: nowrap; }
        .comp-steady-ui {
            background: #0f1219;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 40px;
        }
        .comp-fake-menubar {
            width: 320px;
            background: rgba(30, 30, 36, 0.95);
            backdrop-filter: blur(40px);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            padding: 8px;
            margin-top: 20px;
        }
        .comp-fake-header {
            padding: 8px 10px 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 6px;
        }
        .comp-fake-header-icon {
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
        }
        .comp-fake-header-text {
            font-size: 14px;
            font-weight: 600;
            color: #f4f4f5;
        }
        .comp-fake-header-version {
            font-size: 11px;
            color: #52525b;
            margin-left: auto;
        }
        .comp-server-row {
            padding: 10px 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.15s;
            cursor: default;
        }
        .comp-server-row:hover { background: rgba(255,255,255,0.04); }
        .comp-server-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .comp-server-dot.green { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.4); }
        .comp-server-dot.blue { background: #60a5fa; box-shadow: 0 0 6px rgba(96, 165, 250, 0.4); }
        .comp-server-dot.amber { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }
        .comp-server-info { flex: 1; min-width: 0; }
        .comp-server-name {
            font-size: 13px;
            font-weight: 500;
            color: #e4e4e7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .comp-server-detail {
            font-size: 11px;
            color: #52525b;
            margin-top: 1px;
        }
        .comp-server-badge {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 500;
            flex-shrink: 0;
        }
        .comp-badge-mounted { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
        .comp-badge-syncing { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
        .comp-badge-idle { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
        .comp-add-row {
            padding: 10px 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #52525b;
            font-size: 13px;
            cursor: pointer;
            margin-top: 4px;
            border-top: 1px solid rgba(255,255,255,0.05);
            padding-top: 14px;
        }
        .comp-add-row:hover { color: #3b82f6; }
        .comp-tagline-green { color: #4ade80; }
        .comp-tagline-dim { color: #3f3f46; }
        .comp-divider {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 4px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 30;
            cursor: ew-resize;
        }
        .comp-divider-line {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.3);
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.15);
            transition: box-shadow 0.3s;
        }
        .comp-divider:hover .comp-divider-line,
        .comp-divider.dragging .comp-divider-line {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.7), 0 0 50px rgba(59, 130, 246, 0.3);
            background: rgba(255,255,255,0.5);
        }
        .comp-divider-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(20, 20, 30, 0.9);
            border: 2px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(59, 130, 246, 0.2);
            transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
        }
        .comp-divider:hover .comp-divider-handle,
        .comp-divider.dragging .comp-divider-handle {
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(59, 130, 246, 0.4);
            transform: translate(-50%, -50%) scale(1.1);
        }
        .comp-divider-arrow {
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
        .comp-divider-arrow.left { border-right: 6px solid rgba(255,255,255,0.4); }
        .comp-divider-arrow.right { border-left: 6px solid rgba(255,255,255,0.4); }
        .comp-divider:hover .comp-divider-arrow.left,
        .comp-divider.dragging .comp-divider-arrow.left { border-right-color: rgba(59, 130, 246, 0.8); }
        .comp-divider:hover .comp-divider-arrow.right,
        .comp-divider.dragging .comp-divider-arrow.right { border-left-color: rgba(59, 130, 246, 0.8); }
        .comp-drag-hint {
            margin-top: 24px;
            font-size: 13px;
            color: #3f3f46;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .comp-drag-hint svg { width: 16px; height: 16px; opacity: 0.4; }