/* How it works v3 — scroll-driven 3D pipeline */
.cx-sec{padding-bottom:0}
.cx{position:relative;height:720vh;margin-top:88px}
.cx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 50% 58%,#1e1e1e 0%,#111 55%,#0a0a0a 100%);color:#fff}
.cx-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.cx-pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 75% 75% at 50% 50%,transparent 55%,rgba(0,0,0,.6) 100%)}
.cx-pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.cx-hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.cx-hud::before,.cx-hud::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.cx-hud::before{left:0;top:0;bottom:0;width:min(520px,48%);background:linear-gradient(to right,rgba(10,10,10,.85) 30%,rgba(10,10,10,0))}
.cx-hud::after{left:0;right:0;bottom:0;height:140px;background:linear-gradient(to top,rgba(10,10,10,.95) 35%,rgba(10,10,10,0))}
.cx-g{height:100%;padding-top:100px;padding-bottom:28px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:32px}
.cx-ph{grid-area:1/1}
.cx-num{display:flex;align-items:flex-start;gap:12px;font-weight:300;font-size:clamp(64px,7.5vw,120px);line-height:.82;letter-spacing:-.05em}
.cx-num small{font-family:var(--m);font-size:13px;letter-spacing:.14em;color:var(--g1);padding-top:.7em}
.cx-title{margin-top:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-l);display:flex;align-items:center;gap:10px}
.cx-title::before{content:"";width:8px;height:8px;background:var(--or);flex:none}
.cx-desc{margin:12px 0 0;font-weight:300;font-size:clamp(17px,1.5vw,22px);line-height:1.38;max-width:30ch;text-wrap:pretty;color:#fff}
.sw{animation:cxIn .6s var(--e) both}
@keyframes cxIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cx-tel{grid-area:2/1;margin:28px 0 0;align-self:start;transition:opacity .4s var(--e);display:grid;grid-template-columns:auto auto;gap:7px 28px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cx-tel-h{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;color:var(--or-l);padding-bottom:9px;margin-bottom:3px;border-bottom:1px solid rgba(255,255,255,.1)}
.cx-tel-h i{font-style:normal;display:inline-flex;align-items:center;gap:6px;color:#fff}
.cx-tel-h i::before{content:"";width:6px;height:6px;border-radius:50%;background:#FF5F4A;animation:cxBlink 1.4s steps(2) infinite}
@keyframes cxBlink{50%{opacity:.2}}
.cx-tel dt{color:#C4C4C4}
.cx-tel dd{margin:0;text-align:right;color:#fff;font-variant-numeric:tabular-nums;min-width:12ch}
.cx-tel.off{opacity:0}
.cx-chk{grid-area:2/1;align-self:start;margin-top:28px;padding:14px 16px;border:1px solid rgba(255,255,255,.14);background:rgba(10,10,10,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--m);font-size:13px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--e),transform .5s var(--e)}
.cx-chk.on{opacity:1;transform:none}
.cx-chk-h{display:flex;justify-content:space-between;gap:12px;color:var(--g1);padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.cx-chk-h b{font-weight:400;color:#fff;white-space:nowrap}
.cx-chk-h b::before{content:"$ ";color:var(--or-l)}
.cx-ck{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:#7a7a7a;transition:color .3s}
.cx-ck b{font-weight:400;opacity:0;transition:opacity .3s;color:var(--or-l)}
.cx-ck.on{color:#fff}
.cx-ck.on b{opacity:1}
.cx-stamp{margin-top:8px;padding:8px;text-align:center;letter-spacing:.2em;text-transform:uppercase;background:var(--or);color:#fff;opacity:0;transform:scale(.94);transition:opacity .4s,transform .5s var(--e)}
.cx-stamp.on{opacity:1;transform:none}
.cx-hint{grid-area:3/1/4/3;justify-self:center;margin-bottom:18px;display:flex;align-items:center;gap:12px;font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:opacity .4s}
.cx-hint::after{content:"";width:1px;height:22px;background:linear-gradient(#fff,transparent);transform-origin:50% 0;animation:cxDrop 1.6s var(--e) infinite}
@keyframes cxDrop{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.cx-hint.off{opacity:0}
.cx-ch{grid-area:4/1/5/3;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14);pointer-events:auto}
.cx-ch button{all:unset;cursor:pointer;position:relative;display:flex;align-items:baseline;gap:10px;padding:14px 12px 2px 0;font-family:var(--m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g1);transition:color .3s}
.cx-ch button::before{content:"";position:absolute;left:0;right:12px;top:-1px;height:2px;background:var(--or-l);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.cx-ch b{font-weight:400}
.cx-ch span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-ch button:hover,.cx-ch button.act{color:#fff}
.cx-ch button.act b{color:var(--or-l)}
.cx-ch button:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-height:780px){.vf .cx-desc{display:none}.cx-tel{display:none}.cx-num{font-size:64px}.cx-desc{font-size:16px}.cx-chk{margin-top:18px}}
@media (max-width:860px){.cx-tel{display:none}.cx-g{grid-template-columns:minmax(0,1fr);padding-top:84px}.cx-hint,.cx-ch{grid-column:1}.cx-ch span{display:none}.cx-desc{font-size:16px}}