/* EUKLI home product scroll showcases — white editorial, two pinned three-step tracks. */
.hp-track{position:relative;border-top:1px solid #e7ebee;background:#fff;isolation:isolate}
.hp-sticky{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;position:relative;padding-block:45px}
.hp-copy{display:flex;flex-direction:column;min-width:0}
.hp-heading{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.hp-serial{font:800 10px/1.5 Arial,sans-serif;letter-spacing:.12em;color:#708193;display:block;width:100%}
.hp-product-name{font-size:25px;letter-spacing:-.065em;display:inline-flex;align-items:center;gap:12px;font-weight:850}
.hp-product-name img{width:38px;height:38px;border-radius:9px;object-fit:cover}
.hp-product-name>span:last-child{font-size:14px;color:#61788c}
.hp-product-name:hover{color:#214d78}
.hp-now-word{font:900 26px/1 Arial,sans-serif;letter-spacing:-.1em}
.hp-development{font-size:11px;color:#697b8a;padding:8px 11px;border:1px solid #e1e8ed;border-radius:30px;white-space:nowrap}
.hp-slide-stack{min-height:260px;display:flex;flex-direction:column;justify-content:center;position:relative;margin:22px 0}
.hp-slide{padding:16px 0}
.hp-step{display:block;font:800 11px/1.2 Arial,sans-serif;letter-spacing:.12em;color:#64788b;margin-bottom:14px}
.hp-slide h3{font-size:clamp(38px,4.2vw,63px);line-height:1.19;margin:0 0 18px;font-weight:850;letter-spacing:-.082em;max-width:520px}
.hp-slide p{font-size:clamp(14px,1.28vw,17px);line-height:1.85;color:#566675;max-width:410px;margin:0}
.hp-copy-footer{margin-top:16px}
.hp-detail-link{display:inline-flex;gap:22px;align-items:center;border-bottom:1px solid #193b5a;padding-bottom:8px;font-size:14px;font-weight:800}
.hp-detail-link:hover{color:#245480;gap:29px}
.hp-art{height:570px;display:grid;place-items:center;background:#fafbfd;position:relative;border:1px solid #eaf0f4;border-radius:12px;overflow:hidden;min-width:0}
.hp-art-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(25,57,88,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(25,57,88,.045) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 63% 63% at 50% 48%,rgba(0,0,0,.8),transparent 100%);-webkit-mask-image:radial-gradient(ellipse 63% 63% at 50% 48%,rgba(0,0,0,.8),transparent 100%)}
.hp-art-stage{position:absolute;inset:0;display:grid;place-items:center}
.hp-preview{display:none;position:absolute;inset:0;place-items:center;pointer-events:none}
.hp-preview:first-child{display:grid}
.hp-preview .phone{transform:scale(.79);filter:drop-shadow(0 17px 20px rgba(15,35,57,.11))}
.hp-art-note{position:absolute;right:15px;bottom:14px;color:#97a5b1;font:750 9px/1 Arial,sans-serif;letter-spacing:.11em}
.hp-progress{display:none;font:800 11px/1 Arial,sans-serif;letter-spacing:.08em;color:#193959;gap:11px;align-items:center;justify-content:center}
.hp-progress>span:first-child{font-variant-numeric:tabular-nums;font-size:14px}
.hp-progress>span:last-child{color:#9caaba}
.hp-progress-bars{display:flex;gap:5px}
.hp-progress-bars i{display:block;position:relative;width:43px;height:3px;background:#dce4eb;border-radius:2px;overflow:hidden}
.hp-progress-bars i::after{content:"";position:absolute;inset:0;background:#244c74;transform:scaleX(var(--hp-bar,0));transform-origin:left}
.home-product-ready .hp-track{height:266svh}
.home-product-ready .hp-sticky{position:sticky;top:76px;height:calc(100svh - 76px);padding:12px 0 55px;overflow:hidden}
.home-product-ready .hp-copy{align-self:stretch;justify-content:space-between;min-height:0}
.home-product-ready .hp-slide-stack{flex:1;min-height:0;margin:9px 0}
.home-product-ready .hp-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 10px 0 0;opacity:var(--hp-w-0,1);transform:translate3d(0,var(--hp-y-0,0px),0);pointer-events:none}
.home-product-ready .hp-slide[data-hp-slide="1"]{opacity:var(--hp-w-1,0);transform:translate3d(0,var(--hp-y-1,22px),0)}
.home-product-ready .hp-slide[data-hp-slide="2"]{opacity:var(--hp-w-2,0);transform:translate3d(0,var(--hp-y-2,22px),0)}
.home-product-ready .hp-art{width:100%;height:min(590px,calc(100% - 24px));align-self:center;justify-self:center}
.home-product-ready .hp-preview{display:grid;opacity:var(--hp-w-0,1);transform:translate3d(0,var(--hp-py-0,0px),0) scale(var(--hp-scale-0,1))}
.home-product-ready .hp-preview[data-hp-preview="1"]{opacity:var(--hp-w-1,0);transform:translate3d(0,var(--hp-py-1,20px),0) scale(var(--hp-scale-1,.96))}
.home-product-ready .hp-preview[data-hp-preview="2"]{opacity:var(--hp-w-2,0);transform:translate3d(0,var(--hp-py-2,20px),0) scale(var(--hp-scale-2,.96))}
.home-product-ready .hp-progress{display:flex;position:absolute;bottom:17px;left:0;right:0}
@media(min-width:761px) and (max-width:1100px){
 .hp-sticky{gap:17px}
 .hp-art{height:min(520px,calc(100% - 35px))}
 .hp-slide h3{font-size:clamp(35px,4.2vw,54px)}
 .hp-preview .phone{transform:scale(.71)}
 .hp-development{font-size:10px}
}
@media(max-width:760px){
 .hp-sticky{display:grid;grid-template-columns:1fr;gap:13px}
 .hp-art{height:360px}
 .hp-preview .phone{transform:scale(.58)}
 .hp-slide h3{font-size:36px}
 .home-product-ready .hp-track{height:248svh}
 .home-product-ready .hp-sticky{top:68px;height:calc(100svh - 68px);grid-template-columns:1fr;grid-template-rows:minmax(215px,43%) minmax(245px,57%);gap:0;padding:10px 0 44px}
 .home-product-ready .hp-copy{min-height:0;padding:0;overflow:hidden}
 .home-product-ready .hp-heading{gap:8px}
 .home-product-ready .hp-serial{font-size:9px}
 .home-product-ready .hp-product-name{font-size:20px;gap:8px}
 .home-product-ready .hp-product-name img{height:27px;width:27px;border-radius:6px}
 .home-product-ready .hp-now-word{font-size:22px}
 .home-product-ready .hp-development{padding:6px 9px;font-size:9px}
 .home-product-ready .hp-slide-stack{margin:5px 0;min-height:0}
 .home-product-ready .hp-slide h3{font-size:clamp(28px,7.8vw,41px);line-height:1.16;margin-bottom:9px}
 .home-product-ready .hp-slide p{font-size:clamp(11px,3.2vw,13px);line-height:1.65}
 .home-product-ready .hp-step{font-size:9px;margin-bottom:8px}
 .home-product-ready .hp-copy-footer{margin-top:0}
 .home-product-ready .hp-detail-link{font-size:11px;padding-bottom:4px;gap:13px}
 .home-product-ready .hp-art{width:100%;height:calc(100% - 12px);min-height:0;align-self:center;border-radius:10px}
 .home-product-ready .hp-preview .phone{transform:scale(.57)}
 .home-product-ready .hp-art-note{font-size:7px;bottom:7px;right:8px}
 .home-product-ready .hp-progress{bottom:12px}
 .home-product-ready .hp-progress-bars i{width:27px;height:2px}
}
@media(max-width:390px){
 .home-product-ready .hp-sticky{grid-template-rows:minmax(200px,43%) minmax(220px,57%)}
 .home-product-ready .hp-slide h3{font-size:clamp(26px,8vw,34px)}
 .home-product-ready .hp-preview .phone{transform:scale(.48)}
 .home-product-ready .hp-development{display:none}
}
@media(prefers-reduced-motion:reduce){
 .home-product-ready .hp-track{height:auto}
 .home-product-ready .hp-sticky{position:relative;top:auto;height:auto;padding:30px 0 40px}
 .home-product-ready .hp-slide{position:relative;inset:auto;opacity:1!important;transform:none!important;pointer-events:auto;margin:20px 0;border-bottom:1px solid #e8edf0}
 .home-product-ready .hp-preview:not(:first-child){display:none}
 .home-product-ready .hp-progress{display:none}
}