/* "The problem we solve" — before → after, then enterprise-ready */
.en { background: var(--bg); }
.en-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 380px at 88% 8%, rgba(233, 30, 140, 0.12), transparent 70%), radial-gradient(520px 380px at 6% 78%, rgba(45, 125, 210, 0.14), transparent 70%); }
.en-in { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

.en-compare { padding: clamp(14px, 2.4vw, 28px); border: 1px solid var(--border2); border-radius: 28px; background: color-mix(in srgb, var(--bg2) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.en-compare__head, .en-row { display: grid; grid-template-columns: minmax(0, 0.8fr) 52px minmax(0, 1.2fr); align-items: center; gap: 0; }
.en-compare__head { margin-bottom: 10px; padding: 0 6px; }
.en-col { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.en-col--was { color: var(--text3); }
.en-col--now { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(95deg, #e91e8c, #9b2fad 52%, #2d7dd2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.en-col--now img { -webkit-text-fill-color: initial; }
.en-row { padding: 6px; }
.en-row + .en-row { border-top: 1px dashed var(--border); }
.en-was { padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text3); font-size: 1.05rem; }
.en-was span { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text3) 55%, transparent); text-decoration-thickness: 1.5px; }
.en-arrow { display: grid; place-items: center; color: var(--text3); }
.en-now { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid color-mix(in srgb, #9b2fad 38%, var(--border2)); border-radius: 16px; background: linear-gradient(95deg, color-mix(in srgb, #e91e8c 8%, transparent), color-mix(in srgb, #2d7dd2 8%, transparent)); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s; }
.en-row:hover .en-now { transform: translateX(4px); box-shadow: 0 18px 36px -24px #9b2fad; }
.en-now__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #e91e8c, #9b2fad 55%, #2d7dd2); box-shadow: 0 10px 20px -10px rgba(155, 47, 173, 0.8); }
.en-now__tx { min-width: 0; line-height: 1.3; }
.en-now__tx b { display: block; font-size: 1.1rem; font-weight: 600; color: var(--text); }
.en-now__tx small { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--text2); }
/* rows slide in once the section is visible */
.en-row { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 0.12s + 0.15s); }
.en-row.is-on { opacity: 1; transform: none; }

.en-ready-wrap { margin-top: clamp(32px, 5vw, 56px); text-align: center; }
.en-ready-h { margin: 0 0 18px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); }
.en-ready { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.en-ready li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; border: 1px solid var(--border2); border-radius: 20px; background: var(--bg2); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; }
.en-ready li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, #9b2fad 55%, var(--border2)); }
.en-ready__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 13px; color: #9b2fad; background: color-mix(in srgb, #9b2fad 14%, transparent); }
.en-ready b { font-size: 1.02rem; color: var(--text); }
.en-ready small { font-size: 0.86rem; color: var(--text3); }

.en-cta { margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.en-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.en-cta p { margin: 16px 0 0; font-size: 0.86rem; color: var(--text3); }

@media (max-width: 760px) {
    .en-compare { padding: 12px; border-radius: 24px; }
    .en-compare__head { display: none; }                       /* each pair labels itself on phones */
    .en-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 4px; }
    .en-was { padding: 12px 16px 26px; font-size: 0.98rem; border-radius: 14px 14px 0 0; }
    .en-was::before { content: 'Traditional'; display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
    .en-arrow { position: relative; height: 0; z-index: 2; display: block; }
    .en-arrow svg { position: absolute; left: 50%; top: -16px; width: 32px; height: 32px; padding: 6px; box-sizing: border-box; transform: translateX(-50%) rotate(90deg); border-radius: 50%; background: var(--bg2); border: 1px solid var(--border2); color: var(--text2); }
    .en-now { margin-top: 0; padding-top: 30px; border-top-left-radius: 0; border-top-right-radius: 0; }
    .en-row:hover .en-now { transform: none; }
    .en-ready { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .en-cta__btns .sx-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .en-row { opacity: 1; transform: none; transition: none; } }