.comparison-section{background:#fff;overflow:hidden}.comparison-heading{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:38px}.comparison-heading h2{font-size:clamp(40px,5.8vw,78px);line-height:.92;letter-spacing:-.085em;margin:7vw 0 0}.comparison-heading h2 em{color:#177ce8}.comparison-heading>p{max-width:370px;font-size:15px;line-height:1.65;color:#55729a;margin:0}.comparison-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.comparison-tabs button{font:700 11px Manrope;background:#edf6ff;border:1px solid #c4def6;color:#35608f;border-radius:999px;padding:10px 16px;cursor:pointer;transition:.25s}.comparison-tabs button:hover,.comparison-tabs button[aria-selected="true"]{background:#177ce8;border-color:#177ce8;color:#fff}.comparison-shell{--split:50%;height:585px;border-radius:20px;position:relative;overflow:hidden;background:#40434a;box-shadow:0 25px 55px rgba(8,58,125,.18);touch-action:none}.comparison-state{position:absolute;inset:0;padding:28px 30px}.comparison-before{background:linear-gradient(145deg,#41434a,#2a2c31);color:#eceef1;filter:saturate(.32)}.comparison-after{background:linear-gradient(145deg,#eaf6ff,#fff);color:#123b74;clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:2}.state-label{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;letter-spacing:-.03em}.state-label span{font:10px "DM Mono";font-weight:500;letter-spacing:0;color:#a7aab0}.comparison-after .state-label span{color:#5581ac}.dashboard{max-width:620px;margin:31px auto 0;display:grid;grid-template-columns:1.3fr 1fr;gap:14px;filter:blur(.35px)}.after-dashboard{filter:none}.browser{grid-row:span 2;min-height:310px;background:#eeeff1;border-radius:13px;overflow:hidden;box-shadow:0 12px 25px rgba(0,0,0,.2)}.browser-top{height:34px;background:#26282d;display:flex;align-items:center;gap:5px;padding:0 11px}.browser-top i{width:6px;height:6px;border-radius:50%;background:#696d75}.browser-top b{font:9px "DM Mono";margin-left:10px;color:#a7aab0}.old-site{height:calc(100% - 34px);background:#d1d4d5;display:grid;place-content:center;text-align:center;gap:12px;color:#70757a}.old-site strong{font-size:24px;letter-spacing:-.07em}.old-site span{font-size:11px}.old-site button{background:#909599;color:#e3e4e4;border:0;padding:8px 13px;font-size:10px;justify-self:center}.new-site{height:calc(100% - 34px);padding:33px 29px;background:linear-gradient(130deg,#fff 0 62%,#1d84ec 62%);position:relative;overflow:hidden}.new-site>span{font:9px "DM Mono";color:#177ce8}.new-site strong{font-size:clamp(26px,3vw,40px);line-height:.93;letter-spacing:-.08em;display:block;margin:23px 0;color:#123b74}.new-site button{border:0;border-radius:20px;background:#177ce8;color:#fff;padding:10px 14px;font-size:10px;font-weight:700}.new-site>i{position:absolute;width:155px;height:155px;border-radius:50%;background:#ffe152;right:-32px;bottom:-37px}.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.metric-row>div,.chart-card,.status-row{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:15px}.comparison-after .metric-row>div,.comparison-after .chart-card,.comparison-after .status-row{background:#fff;border-color:#cfe5f8;box-shadow:0 8px 18px rgba(24,95,174,.07)}.metric-row small,.chart-card small{display:block;font:9px "DM Mono";opacity:.65}.metric-row b{display:inline-block;font-size:23px;letter-spacing:-.07em;margin-top:7px}.metric-row span{font-size:9px;margin-left:4px;opacity:.65}.chart-card{grid-column:2}.chart-card>div{display:flex;justify-content:space-between}.chart-card b{font-size:10px}.negative{color:#f48181}.positive{color:#29ac72}.chart-card svg{width:100%;height:75px;margin-top:7px}.grid{stroke:currentColor;opacity:.1;stroke-width:1}.line{fill:none;stroke-width:3;stroke-linecap:round}.before-line{stroke:#f37e7e}.after-line{stroke:#18b56e;stroke-dasharray:400;stroke-dashoffset:400}.comparison-shell.is-active .after-line{animation:draw-line 2.3s ease-in-out forwards}.status-row{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px}.status-row span{display:grid;grid-template-columns:14px 1fr;column-gap:7px;align-items:center}.status-row i{width:10px;height:10px;border-radius:50%;grid-row:span 2}.status-row .slow,.status-row .bad{background:#eb7777;box-shadow:0 0 0 5px rgba(235,119,119,.13)}.status-row .fast,.status-row .good{background:#1ab678;box-shadow:0 0 0 5px rgba(26,182,120,.13)}.status-row b{font-size:12px}.status-row small{font-size:9px;opacity:.65}.comparison-divider{position:absolute;z-index:4;left:var(--split);top:0;bottom:0;width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 12px rgba(0,0,0,.25)}.slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:#177ce8;color:#fff;display:grid;place-items:center;cursor:ew-resize;box-shadow:0 7px 17px rgba(1,52,112,.32);outline:0}.slider-handle:focus-visible{box-shadow:0 0 0 5px #ffe152,0 7px 17px rgba(1,52,112,.32)}.comparison-glow{position:absolute;z-index:3;left:calc(var(--split) - 90px);top:34%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(91,185,255,.38),transparent 68%);pointer-events:none;opacity:0}.comparison-shell.is-active .comparison-glow{animation:glow 2.4s ease-in-out}.particles{position:absolute;z-index:3;inset:0;pointer-events:none}.particles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe152;left:var(--x);top:var(--y);opacity:0}.particles i:nth-child(1){--x:53%;--y:32%}.particles i:nth-child(2){--x:64%;--y:43%}.particles i:nth-child(3){--x:57%;--y:61%}.particles i:nth-child(4){--x:72%;--y:26%}.particles i:nth-child(5){--x:78%;--y:65%}.comparison-shell.is-active .particles i{animation:particle 1.8s ease-out}.comparison-note{font:10px "DM Mono";color:#7189a4;margin:16px 0 0}@keyframes draw-line{to{stroke-dashoffset:0}}@keyframes glow{0%,100%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.3)}}@keyframes particle{20%{opacity:1}100%{opacity:0;transform:translate(40px,-50px) scale(.2)}}@media(max-width:700px){.comparison-heading{display:block}.comparison-heading>p{margin-top:24px}.comparison-shell{height:530px;border-radius:15px}.comparison-state{padding:19px 14px}.dashboard{margin-top:21px;grid-template-columns:1fr 1fr;gap:8px}.browser{grid-column:1/-1;grid-row:auto;min-height:175px}.metric-row{gap:8px}.metric-row>div,.chart-card,.status-row{padding:10px;border-radius:8px}.chart-card{grid-column:1/-1}.chart-card svg{height:40px}.status-row{gap:3px}.status-row span{grid-template-columns:10px 1fr;column-gap:4px}.status-row b{font-size:10px}.status-row small{font-size:7px}.new-site{padding:20px}.new-site strong{margin:15px 0;font-size:26px}.comparison-tabs{flex-wrap:nowrap;overflow:auto;padding-bottom:4px}.comparison-tabs button{white-space:nowrap}.comparison-note{line-height:1.5}}