.transform{position:relative;isolation:isolate;overflow:hidden;margin:20px 9% 0!important;padding:82px 7%!important;grid-template-columns:.78fr 1.22fr!important;gap:70px!important;align-items:center;border:1px solid rgba(255,255,255,.2)!important;border-radius:26px!important;background:radial-gradient(circle at 4% 100%,rgba(51,202,194,.3),transparent 32%),radial-gradient(circle at 98% 0,rgba(102,225,217,.2),transparent 28%),linear-gradient(130deg,#052d38,#075765 55%,#087a82)!important;box-shadow:0 30px 70px rgba(3,45,55,.25)!important}
.transform::before{content:"";position:absolute;z-index:-1;left:-70px;bottom:-95px;width:250px;height:250px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 40px rgba(255,255,255,.025),0 0 0 80px rgba(255,255,255,.018)}
.transform::after{content:"01  →  02";position:absolute;z-index:-1;left:6%;bottom:20px;color:rgba(255,255,255,.055);font:800 clamp(4rem,8vw,7rem)/1 Manrope,sans-serif;letter-spacing:-.08em;white-space:nowrap}
.transform-copy{position:relative;z-index:2}.transform-copy .eyebrow{display:inline-flex!important;align-items:center;gap:9px;margin-bottom:20px!important;padding:0!important;border:0!important;background:none!important;color:#a5eee7!important}.transform-copy .eyebrow::before{content:"";width:25px;height:1px;background:#75ddd6}.transform .transform-copy h2{max-width:480px;margin-bottom:20px!important;color:#fff;font-size:clamp(2.4rem,3.7vw,3.55rem)!important;line-height:1.04}.transform-copy>p:last-child{max-width:400px!important;margin:0;color:rgba(224,246,244,.72)!important;font-size:14px!important}
.transform .compare{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important}.transform .compare::before{content:"→"!important;position:absolute!important;z-index:5!important;left:50%!important;top:50%!important;width:42px!important;height:42px!important;display:grid!important;place-items:center!important;transform:translate(-50%,-50%)!important;border:5px solid #08636d!important;border-radius:50%!important;background:#fff!important;color:#07818a!important;font-size:18px!important;font-weight:800!important;box-shadow:0 10px 25px rgba(0,34,42,.25)!important}
.transform .compare>div{position:relative;min-height:340px!important;padding:28px 23px!important;border-radius:18px!important;transition:transform .3s ease,box-shadow .3s ease!important}.transform .compare .before{transform:translateY(15px);border:1px solid rgba(255,255,255,.13)!important;background:rgba(3,39,49,.62)!important;color:#fff;box-shadow:0 20px 38px rgba(0,24,31,.18);backdrop-filter:blur(12px)}.transform .compare .after{transform:translateY(-15px);border:1px solid rgba(255,255,255,.75)!important;background:linear-gradient(150deg,#f7fffe,#dff7f4)!important;color:#0b3540!important;box-shadow:0 24px 44px rgba(0,35,43,.24)}.transform .compare>div:hover{transform:translateY(-4px)!important;box-shadow:0 28px 48px rgba(0,30,38,.27)}
.transform .compare small{display:inline-flex!important;align-items:center;gap:7px;margin-bottom:20px!important;color:#a6d3d4!important;font-size:8px!important;font-weight:800;letter-spacing:.12em}.transform .compare small::before{content:"";width:7px;height:7px;border-radius:50%;background:#e78b82;box-shadow:0 0 0 4px rgba(231,139,130,.1)}.transform .compare .after small{color:#087d83!important}.transform .compare .after small::before{background:#22b49d;box-shadow:0 0 0 4px rgba(34,180,157,.11)}
.card-visual{position:relative;height:82px;margin:-2px 0 17px;overflow:hidden;border-radius:12px}.card-visual span{position:absolute;z-index:2;display:grid;place-items:center;height:25px;padding:0 9px;border-radius:7px;font:700 7px Manrope,sans-serif}.before-visual{border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 50% 50%,rgba(231,139,130,.12),transparent 58%)}.before-visual span{border:1px solid rgba(255,255,255,.12);background:#174853;color:#a9c3c5;transform:rotate(var(--tilt))}.before-visual span:nth-child(1){--tilt:-7deg;left:9px;top:12px}.before-visual span:nth-child(2){--tilt:5deg;right:12px;top:15px}.before-visual span:nth-child(3){--tilt:-3deg;left:50%;bottom:9px;transform:translateX(-50%) rotate(var(--tilt))}.before-visual i{position:absolute;width:42px;height:1px;background:repeating-linear-gradient(90deg,rgba(231,139,130,.4) 0 4px,transparent 4px 8px)}.before-visual i:nth-of-type(1){left:49px;top:30px;transform:rotate(18deg)}.before-visual i:nth-of-type(2){right:48px;top:33px;transform:rotate(-20deg)}.before-visual i:nth-of-type(3){left:50%;top:45px;transform:translateX(-50%) rotate(90deg)}.after-visual{border:1px solid rgba(12,139,143,.13);background:linear-gradient(135deg,rgba(20,164,163,.08),rgba(255,255,255,.35))}.after-visual::before{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,#72d8d0,#149f9f,#72d8d0)}.after-visual span{top:50%;transform:translateY(-50%);border:1px solid rgba(14,136,140,.18);background:#fff;color:#177c82;box-shadow:0 5px 12px rgba(7,102,108,.1)}.after-visual span:nth-child(1){left:7px}.after-visual span:nth-child(2){left:50%;height:34px;transform:translate(-50%,-50%);background:#087f87;color:#fff;border-color:#087f87;box-shadow:0 7px 17px rgba(8,127,135,.25)}.after-visual span:nth-child(3){right:7px}.after-visual i{position:absolute;z-index:3;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#7ce1d7;box-shadow:0 0 0 3px rgba(124,225,215,.16)}.after-visual i:nth-of-type(1){left:31%}.after-visual i:nth-of-type(2){right:31%}
.transform .compare ul{position:relative;margin:0!important;padding:0!important;line-height:normal!important}.transform .compare ul::before{content:"";position:absolute;left:12px;top:22px;bottom:22px;width:1px;background:rgba(255,255,255,.1)}.transform .after ul::before{background:rgba(8,123,130,.12)}.transform .compare li{position:relative;display:flex!important;align-items:center;min-height:57px!important;margin:0!important;padding:10px 0 10px 39px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;color:#d9eaeb;font-size:10px;font-weight:600}.transform .compare .after li{border-color:rgba(8,112,119,.09)!important;color:#244d55}.transform .compare li:last-child{border-bottom:0!important}.transform .compare li::before{content:""!important;position:absolute;z-index:1;left:7px;width:11px!important;height:11px!important;display:block!important;margin:0!important;border:3px solid #184e58;border-radius:50%!important;background:#658087!important;color:transparent!important}.transform .compare .after li::before{border-color:#dff7f4;background:#1eb29d!important;box-shadow:0 0 0 3px rgba(30,178,157,.12)}
@media(max-width:1000px){.transform{grid-template-columns:1fr!important;gap:48px!important}.transform-copy>p:last-child{max-width:570px!important}.transform .compare{max-width:720px;width:100%;margin:auto}}
@media(max-width:650px){.transform{margin:0 22px!important;padding:48px 18px!important;border-radius:22px!important}.transform::after{font-size:3.6rem}.transform .compare{grid-template-columns:1fr;gap:18px}.transform .compare::before{content:"↓"!important}.transform .compare .before,.transform .compare .after{min-height:auto!important;transform:none}.transform .compare>div:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){.transform .compare>div{transition:none!important}}