.transformation{height:230vh;min-height:1300px;background:#ed007a;color:#fff;position:relative}
.transformation-pin{height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden;display:flex;align-items:center}
.transformation-pin:before{content:"";position:absolute;right:-18vw;top:-35vw;width:70vw;aspect-ratio:1;border:1px solid #ffffff3b;border-radius:50%;box-shadow:0 0 0 75px #ffffff0a,0 0 0 150px #ffffff08,0 0 0 225px #ffffff06;pointer-events:none}
.transformation-layout{position:relative;z-index:1;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:3%;height:100%;padding-bottom:45px}
.transformation-copy{position:relative;z-index:2}
.transformation-copy .eyebrow{color:#ffe0ee;font-size:10px}
.transformation-copy h2{font-size:clamp(51px,5.5vw,84px);letter-spacing:-.078em;line-height:.98;margin:27px 0 22px;max-width:640px}
.transformation-copy h2 span{color:#241019}
.transformation-copy>p:not(.eyebrow){font-size:17px;line-height:1.55;max-width:430px;margin:0 0 23px}
.transformation-copy .button{min-height:53px}
.transformation-progress{width:185px;height:3px;margin-top:35px;background:#ffffff60}
.transformation-progress span{display:block;width:0;height:100%;background:#fff}
.transformation-stage{position:relative;height:min(62vh,550px);min-height:450px;isolation:isolate}
.transformation-stage:before{content:"";position:absolute;left:15%;top:11%;width:70%;height:70%;background:#47001f;filter:blur(75px);opacity:.35;z-index:-1}
.transformation-monitor{position:absolute;left:2%;top:13%;width:77%;filter:drop-shadow(0 25px 27px #5600208c)}
.monitor-frame{position:relative;width:100%;padding:13px;background:linear-gradient(130deg,#29262e,#0f0e13);border:1px solid #777078;border-radius:14px 14px 7px 7px;box-shadow:inset 0 0 0 2px #131216}
.monitor-camera{position:absolute;left:50%;top:5px;width:4px;height:4px;border-radius:50%;background:#777078}
.monitor-screen{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#ddd}
.old-screen,.new-screen{position:absolute;inset:0;overflow:hidden}
.old-screen{background:#e8e8e8;color:#242424;opacity:1}
.old-bar{height:18%;padding:8px 5%;display:flex;justify-content:space-between;align-items:center;background:#666;color:#fff;font-family:Arial,sans-serif;font-size:10px}
.old-bar span{font-size:7px}
.old-banner{margin:6% 5% 3%;padding:6% 4%;background:linear-gradient(90deg,#9f2323,#c44827);color:#ffef57;font-family:Georgia,serif;font-size:clamp(18px,2vw,32px);font-weight:900;text-align:center;line-height:1}
.old-banner small{font-size:.45em}
.old-boxes{display:flex;gap:5%;margin:0 5%}
.old-boxes i{display:block;width:30%;height:25px;background:#aaa;border:3px solid #999}
.old-button{margin:4% 5%;padding:5px 9px;width:max-content;background:#777;color:#fff;font:700 8px Arial}
.new-screen{opacity:0;background:linear-gradient(128deg,#0d0c11 10%,#1a1019 66%,#5c0b36)}
.new-nav{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:5% 7%;color:#fff}
.new-nav b{font-size:20px}.new-nav b span{color:#ed007a}.new-nav small{font-size:8px;letter-spacing:.12em}
.new-screen-copy{position:relative;z-index:2;margin:5% 7%;font-size:clamp(22px,2.5vw,41px);font-weight:800;line-height:.94;letter-spacing:-.07em}
.new-screen-copy em{font-style:normal;color:#ff3096}
.new-screen-cta{position:absolute;z-index:2;bottom:8%;left:7%;background:#ed007a;color:#fff;padding:8px 11px;font-size:8px;font-weight:800;letter-spacing:.08em}
.new-orb{position:absolute;right:-8%;bottom:-35%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff7bb7,#d80070 42%,#440522 75%,#120810);box-shadow:0 0 40px #ed007a8a}
.monitor-neck{width:11%;height:50px;margin:auto;background:linear-gradient(90deg,#151418,#404047,#151418)}
.monitor-foot{width:38%;height:12px;margin:auto;background:linear-gradient(#4c4a50,#17161a);border-radius:50% 50% 4px 4px}
.trash-can{position:absolute;right:4%;bottom:6%;width:20%;max-width:122px;height:33%;max-height:170px;filter:drop-shadow(0 18px 17px #67002d8f)}
.trash-lid{position:absolute;z-index:2;top:1%;left:-11%;width:122%;height:14%;border-radius:6px;background:linear-gradient(#37343d,#1e1b21);transform-origin:15% 80%;transform:rotate(0deg)}
.trash-lid:before{content:"";position:absolute;width:35%;height:45%;left:32%;bottom:90%;background:#252229;border-radius:6px 6px 0 0}
.trash-body{position:absolute;inset:14% 0 0;background:linear-gradient(100deg,#242128,#4b464e 50%,#1c1a20);clip-path:polygon(3% 0,97% 0,85% 100%,15% 100%);display:flex;justify-content:center;gap:11%;padding-top:21%}
.trash-body span{display:block;width:8%;height:64%;background:#16141a88;border-radius:4px}
.flying-site{position:absolute;z-index:5;left:0;top:0;width:180px;height:133px;background:#ddd;border:5px solid #fff;color:#282828;box-shadow:0 16px 28px #44001e96;opacity:0;pointer-events:none;will-change:transform,opacity}
.flying-top{height:19%;padding:3px 6px;background:#666;color:#fff;font:700 8px Arial;display:flex;justify-content:space-between}
.flying-title{margin:8px 9px 6px;background:#a82c29;color:#fff079;text-align:center;font:900 16px Georgia;padding:9px 1px}
.flying-bars{display:flex;gap:7px;margin:0 10px}.flying-bars i{display:block;width:30%;height:11px;background:#aaa}
.flying-cta{background:#777;color:#fff;width:max-content;margin:8px 10px;font:700 6px Arial;padding:3px 5px}
.scene-status{position:absolute;left:3%;bottom:6%;font-size:11px;font-weight:850;letter-spacing:.18em}
.status-after{display:none}
.transformation-pin .statement-marquee{z-index:3}
@media(max-width:1100px){.transformation-copy h2{font-size:clamp(46px,5.3vw,67px)}.transformation-stage{min-height:390px}.transformation-monitor{top:17%}.trash-can{bottom:8%}}
@media(max-width:760px){
  .transformation{height:190svh;min-height:1050px}
  .transformation-pin{height:100svh;min-height:0;display:block}
  .transformation-layout{display:flex;flex-direction:column;justify-content:center;gap:8px;padding-top:24px;padding-bottom:44px}
  .transformation-copy{width:100%}
  .transformation-copy .eyebrow{font-size:9px}
  .transformation-copy h2{font-size:clamp(39px,9vw,57px);margin:12px 0 10px;max-width:550px}
  .transformation-copy>p:not(.eyebrow){font-size:13px;line-height:1.35;margin-bottom:10px;max-width:470px}
  .transformation-copy .button{min-height:42px;padding:0 15px;font-size:12px}
  .transformation-progress{margin-top:12px;width:110px}
  .transformation-stage{height:36vh;min-height:250px;max-height:360px;width:100%;flex:none}
  .transformation-monitor{width:72%;left:4%;top:7%}
  .monitor-frame{padding:7px;border-radius:8px}
  .monitor-camera{top:2px}
  .monitor-neck{height:27px}.monitor-foot{height:7px}
  .old-bar{padding:3px 5%;font-size:6px}.old-bar span{font-size:4px}
  .old-banner{font-size:clamp(13px,3.4vw,23px)}
  .old-boxes i{height:15px}.old-button{font-size:5px}
  .new-nav b{font-size:15px}.new-nav small{font-size:6px}
  .new-screen-copy{font-size:clamp(16px,5vw,30px)}
  .new-screen-cta{font-size:5px;padding:5px 7px}
  .trash-can{width:18%;height:43%;right:3%;bottom:8%}
  .scene-status{bottom:6%;font-size:8px}
  .flying-site{width:115px;height:86px;border-width:3px}
  .flying-top{font-size:5px}.flying-title{font-size:10px;padding:4px 1px;margin:5px 6px 4px}
  .flying-bars{gap:4px;margin:0 6px}.flying-bars i{height:7px}
  .flying-cta{font-size:4px;margin:4px 6px}
}
@media(max-height:670px) and (max-width:760px){
  .transformation-copy h2{font-size:36px}
  .transformation-copy>p:not(.eyebrow){display:none}
  .transformation-stage{height:33vh;min-height:220px}
}
@media(prefers-reduced-motion:reduce){
  .transformation{height:auto;min-height:0}
  .transformation-pin{position:relative;height:auto;min-height:0;padding:75px 0 60px}
  .transformation-layout{height:auto}
  .old-screen,.flying-site{display:none}
  .new-screen{opacity:1}
  .status-before{display:none}.status-after{display:inline}
}