.before-after{padding:96px 60px;background:#0A0F1E;position:relative;overflow:hidden}
.before-after::before{content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(59,130,246,0.08) 0%,transparent 70%);pointer-events:none}

.before-after-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.before-after-label{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#4D9FFF;margin-bottom:12px}
.before-after-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-bottom:16px;color:#fff}
.before-after-sub{font-size:1rem;color:rgba(255,255,255,0.45);line-height:1.75;max-width:580px;margin-bottom:56px}

/* ── COMPARISON GRID ── */
.compare-wrap{display:grid;grid-template-columns:1fr 80px 1fr;gap:0;align-items:stretch}

/* Before column */
.before-col{background:rgba(255,255,255,0.03);border:2px solid rgba(255,255,255,0.08);border-radius:20px 0 0 20px;overflow:hidden}
.after-col{background:rgba(59,130,246,0.06);border:2px solid rgba(59,130,246,0.3);border-radius:0 20px 20px 0;overflow:hidden}

/* Column headers */
.col-header{padding:20px 28px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,0.06)}
.before-col .col-header{background:rgba(255,255,255,0.03)}
.after-col .col-header{background:rgba(59,130,246,0.1);border-bottom:1px solid rgba(59,130,246,0.2)}

.header-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.before-col .header-icon{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1)}
.after-col .header-icon{background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.3)}

.header-text{font-size:0.9rem;font-weight:700;letter-spacing:-0.01em}
.before-col .header-text{color:rgba(255,255,255,0.5)}
.after-col .header-text{color:#60A5FA}

/* Rows */
.compare-rows2{padding:8px 0}
.compare-row2{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.2s}
.compare-row2:last-child{border-bottom:none}
.before-col .compare-row:hover{background:rgba(255,255,255,0.03)}
.after-col .compare-row:hover{background:rgba(59,130,246,0.06)}

.row-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.before-col .row-icon{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.3)}
.after-col .row-icon{background:rgba(59,130,246,0.15);color:#60A5FA;border:1px solid rgba(59,130,246,0.3)}

.row-text{font-size:0.88rem;line-height:1.55}
.before-col .row-text{color:rgba(255,255,255,0.45)}
.after-col .row-text{color:rgba(255,255,255,0.85)}
.after-col .row-text strong{color:#fff;font-weight:600}

/* Middle divider column */
.middle-col{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:12px}
.middle-line{width:1px;flex:1;background:linear-gradient(to bottom,transparent,rgba(59,130,246,0.3),transparent)}
.arrow-badge{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 20px rgba(59,130,246,0.4);flex-shrink:0}



/* ── RESPONSIVE ── */
@media(max-width:768px){
  .before-after{padding:64px 20px}
  .compare-wrap{grid-template-columns:1fr;gap:16px}
  .before-col{border-radius:16px}
  .after-col{border-radius:16px}
  .middle-col{flex-direction:row;height:48px;gap:8px}
  .middle-line{width:auto;height:1px;flex:1;background:linear-gradient(to right,transparent,rgba(59,130,246,0.3),transparent)}
}