body.new-computer-showroom{--hw-navy:#061d31;--hw-blue:#087d98;--hw-cyan:#27d8e5;--hw-ice:#eefbff;--hw-silver:#c5d5dd}
body.new-computer-showroom .sf-body{padding-bottom:42px}
.hw-studio{position:relative;isolation:isolate;overflow:hidden;padding:88px 0 76px;color:#12364a;background:radial-gradient(circle at 78% 12%,rgba(41,219,230,.25),transparent 28%),radial-gradient(circle at 8% 82%,rgba(111,139,255,.16),transparent 27%),linear-gradient(135deg,#f7fdff 0%,#e8f7fa 47%,#edf0fb 100%);border-block:1px solid rgba(17,110,136,.18)}
.hw-studio:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.24;background-image:linear-gradient(rgba(11,123,151,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(11,123,151,.15) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.hw-studio:after{content:"";position:absolute;width:460px;height:460px;right:-180px;top:34%;z-index:-1;border:1px solid rgba(39,216,229,.35);border-radius:50%;box-shadow:0 0 80px rgba(39,216,229,.15),inset 0 0 60px rgba(39,216,229,.12)}
.hw-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:60px;align-items:center;margin-bottom:45px}
.hw-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid rgba(8,125,152,.25);border-radius:999px;background:rgba(255,255,255,.64);box-shadow:0 10px 28px rgba(13,72,94,.08);font:700 12px/1 "Exo 2",sans-serif;letter-spacing:.18em;color:#087d98}
.hw-eyebrow i,.hw-result-status i{width:8px;height:8px;border-radius:50%;background:#27d8e5;box-shadow:0 0 0 5px rgba(39,216,229,.13),0 0 17px #27d8e5}
.hw-intro h2{max-width:760px;margin:20px 0 14px;font:700 clamp(38px,5vw,67px)/.98 "Rajdhani",sans-serif;letter-spacing:-.035em;color:#08283d}
.hw-intro h2 em{display:block;font-style:normal;color:#0789a2}
.hw-intro p{max-width:680px;margin:0;color:#486879;font-size:18px;line-height:1.7}
.hw-device-stage{position:relative;height:315px;perspective:1000px;filter:drop-shadow(0 28px 35px rgba(5,43,62,.22))}
.hw-laptop{position:absolute;width:270px;height:178px;left:12px;top:28px;border:7px solid #cbdce3;border-radius:13px 13px 6px 6px;background:linear-gradient(145deg,#052f48,#0999ad 58%,#42e3e9);box-shadow:inset 0 0 0 2px #fff,0 0 45px rgba(36,213,227,.28);transform:rotateY(17deg) rotateX(2deg)}
.hw-laptop span{position:absolute;inset:18px;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.38),transparent 65%),repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 30px);border:1px solid rgba(255,255,255,.34)}
.hw-laptop:after{content:"";position:absolute;width:335px;height:32px;left:-31px;top:170px;border-radius:3px 3px 16px 16px;background:linear-gradient(#e7f2f6,#91a9b3);clip-path:polygon(8% 0,92% 0,100% 78%,93% 100%,7% 100%,0 78%)}
.hw-tower{position:absolute;width:100px;height:210px;right:8px;bottom:29px;border:2px solid rgba(255,255,255,.7);border-radius:11px;background:linear-gradient(150deg,#dceaf0,#8eabb8 52%,#143c50);box-shadow:inset -10px 0 26px rgba(0,23,38,.34)}
.hw-tower i{display:block;width:53px;height:53px;margin:13px auto;border:3px solid rgba(45,228,235,.72);border-radius:50%;box-shadow:inset 0 0 14px rgba(37,230,236,.6),0 0 18px rgba(37,230,236,.35)}
.hw-scan-line{position:absolute;left:0;right:0;top:35%;height:2px;background:linear-gradient(90deg,transparent,#51fbff,transparent);box-shadow:0 0 16px #28e6ef;animation:hwScan 4.5s ease-in-out infinite}
@keyframes hwScan{0%,100%{transform:translateY(-55px);opacity:0}25%,75%{opacity:1}50%{transform:translateY(170px)}}
.hw-matchmaker{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);overflow:hidden;border:1px solid rgba(255,255,255,.85);border-radius:28px;background:rgba(255,255,255,.62);box-shadow:0 30px 80px rgba(4,62,82,.16),inset 0 1px 0 #fff;backdrop-filter:blur(18px)}
.hw-controls{padding:34px}
.hw-step{display:grid;grid-template-columns:38px 1fr;column-gap:14px;padding:22px 0;border-bottom:1px solid rgba(14,99,122,.13)}
.hw-step:first-child{padding-top:0}.hw-step:last-child{border:0;padding-bottom:0}
.hw-step>span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#f9ffff,#c5e2e8);border:1px solid rgba(14,120,145,.22);font:700 12px "Exo 2";color:#097e98;box-shadow:0 6px 13px rgba(7,93,117,.12)}
.hw-step small,.hw-result small,.hw-budget small{display:block;margin-bottom:4px;font:700 11px/1.2 "Exo 2";letter-spacing:.13em;color:#27859a}
.hw-step strong{font-size:18px;color:#12394d}
.hw-options{grid-column:2;display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.hw-options button{min-height:42px;padding:9px 15px;border:1px solid rgba(14,99,122,.2);border-radius:13px;background:rgba(244,252,254,.9);color:#395f71;font:700 14px "Exo 2";cursor:pointer;box-shadow:0 5px 12px rgba(7,61,81,.05);transition:transform .2s,box-shadow .2s,color .2s,background .2s}
.hw-options button:hover,.hw-options button:focus-visible{transform:translateY(-2px);border-color:#21c8d8;box-shadow:0 9px 22px rgba(19,180,197,.18);outline:none}
.hw-options button.is-selected{color:#fff;border-color:#119eb1;background:linear-gradient(135deg,#087a94,#22cbd7);box-shadow:0 8px 22px rgba(14,165,184,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.hw-result{position:relative;align-self:stretch;padding:43px 38px;color:#fff;background:radial-gradient(circle at 90% 5%,rgba(58,227,234,.35),transparent 32%),linear-gradient(150deg,#072c42,#07546a 63%,#087f91);box-shadow:inset 1px 0 rgba(255,255,255,.18)}
.hw-result:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.08) 43%,transparent 64%);transform:translateX(-100%);animation:hwSheen 6s ease-in-out infinite}
@keyframes hwSheen{0%,45%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
.hw-result-status{display:flex;align-items:center;gap:10px;margin-bottom:35px;font:700 11px "Exo 2";letter-spacing:.15em;color:#9ff7fb}
.hw-result>small{color:#a6dce5}.hw-result h3{margin:7px 0 12px;font:700 35px/1 "Rajdhani";color:#fff}.hw-result>p{min-height:76px;margin:0;color:#d7eef2;line-height:1.55}
.hw-result.is-updated h3{animation:hwResult .35s ease}
@keyframes hwResult{50%{transform:translateX(7px);color:#6fffff}}
.hw-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0}
.hw-specs div{padding:13px;border:1px solid rgba(174,248,252,.18);border-radius:13px;background:rgba(255,255,255,.07)}
.hw-specs small{color:#81cbd7}.hw-specs strong{display:block;font-size:14px;color:#fff}
.hw-budget{padding:17px 0;border-block:1px solid rgba(192,248,251,.19)}.hw-budget small{color:#9ce6ed}.hw-budget strong{display:block;margin:4px 0;font:700 28px "Rajdhani";color:#70f4f4}.hw-budget span{display:block;font-size:11px;line-height:1.45;color:#bedbe1}
.hw-build-button{position:relative;z-index:1;width:100%;min-height:55px;margin-top:24px;padding:12px 18px;border:1px solid rgba(255,255,255,.7);border-radius:15px;background:linear-gradient(135deg,#eaffff,#48e1e6);color:#06364b;font:800 14px "Exo 2";cursor:pointer;box-shadow:0 12px 28px rgba(0,21,35,.25);transition:transform .2s,box-shadow .2s}
.hw-build-button span{float:right;font-size:20px}.hw-build-button:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,20,34,.34),0 0 22px rgba(76,236,240,.22)}
.hw-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.hw-value-grid article{min-height:210px;padding:24px;border:1px solid rgba(255,255,255,.9);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(225,244,247,.63));box-shadow:0 14px 35px rgba(10,74,94,.09);transition:transform .25s,box-shadow .25s}
.hw-value-grid article:hover{transform:translateY(-5px);box-shadow:0 19px 40px rgba(10,116,139,.16)}
.hw-value-grid span{font:700 11px "Exo 2";color:#11a9ba}.hw-value-grid h3{margin:28px 0 9px;font:700 21px/1.05 "Rajdhani";color:#0a3850}.hw-value-grid p{margin:0;color:#547283;font-size:14px;line-height:1.55}
.hw-service-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding:20px 24px;border:1px solid rgba(11,114,139,.18);border-radius:18px;background:rgba(231,249,251,.78);box-shadow:inset 0 1px #fff;color:#315c6e}
.hw-service-strip div{padding-right:18px;border-right:1px solid rgba(9,105,130,.16)}.hw-service-strip div:last-child{padding:0;border:0}.hw-service-strip small{display:block;font:700 9px "Exo 2";letter-spacing:.12em;color:#16889f}.hw-service-strip strong{font-size:13px}
@media(max-width:900px){.hw-intro,.hw-matchmaker{grid-template-columns:1fr}.hw-device-stage{max-width:430px;margin:auto;width:100%}.hw-value-grid{grid-template-columns:1fr 1fr}.hw-service-strip{flex-wrap:wrap;justify-content:flex-start}.hw-service-strip div{min-width:28%}}
@media(max-width:640px){.hw-studio{padding:55px 0}.hw-intro{gap:25px;margin-bottom:30px}.hw-intro h2{font-size:43px}.hw-intro p{font-size:16px}.hw-device-stage{height:240px;transform:scale(.83);transform-origin:center top;margin-bottom:-36px}.hw-controls{padding:24px 18px}.hw-step{grid-template-columns:34px 1fr}.hw-options{grid-column:1/3}.hw-options button{flex:1 1 calc(50% - 6px);min-height:48px}.hw-result{padding:32px 22px}.hw-result h3{font-size:32px}.hw-specs{grid-template-columns:1fr 1fr}.hw-value-grid{grid-template-columns:1fr}.hw-value-grid article{min-height:0}.hw-service-strip{align-items:flex-start}.hw-service-strip div{width:calc(50% - 10px);min-width:0;border:0;padding:0}.hw-service-strip div:first-child{width:100%}}
@media(prefers-reduced-motion:reduce){.hw-scan-line,.hw-result:after{animation:none}.hw-options button,.hw-value-grid article,.hw-build-button{transition:none}}