/* JSOFY R16.4 / Continuous cinematic product story and portrait media rail.
   All source imagery and routes are JSOFY-owned baseline artifacts. */
html:has(.page-home){scroll-behavior:smooth}
.page-home .r164-story{position:relative;background:#111216;color:#f8f9fc;padding:0 0 clamp(75px,8vw,130px);isolation:isolate;overflow:clip}
.page-home .r164-story-heading{padding:clamp(110px,12vw,170px) 0 85px;max-width:1100px;text-align:center;position:relative;z-index:1}
.page-home .r164-eyebrow{color:#a5aaca;font-size:12px;font-weight:800;letter-spacing:.22em;margin:0 0 22px}
.page-home .r164-story-heading h2{color:#f8f9ff;font-size:clamp(46px,7vw,105px);font-weight:700;letter-spacing:-.075em;line-height:1.03;margin:0 0 22px}
.page-home .r164-story-heading h2 span{background:linear-gradient(100deg,#ccd3ff,#a5a3ff 45%,#ebc1e2);color:transparent;background-clip:text}
.page-home .r164-story-heading>p:not(.r164-eyebrow){color:#aeb3c1;font-size:clamp(15px,1.3vw,20px);line-height:1.75;max-width:720px;margin:0 auto}
.page-home .r164-scroll-note{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.22em;color:#7e869d;margin-top:40px}
.page-home .r164-stack{position:relative;width:min(calc(100% - 9vw),1450px);margin:auto;isolation:isolate}
.page-home .r164-step{position:relative;display:flex;align-items:center;min-height:clamp(650px,91svh,980px);padding:clamp(65px,8vw,120px) clamp(40px,6vw,100px);margin-bottom:30px;border-radius:35px;overflow:hidden;border:1px solid #ffffff14;isolation:isolate}
.page-home .r164-step:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 86% 67%,#8a8fdc36 0%,transparent 57%),linear-gradient(112deg,#252932 18%,#333441 100%)}
.page-home .r164-step--pos:before{background:radial-gradient(ellipse at 83% 70%,#627b9e77,transparent 56%),linear-gradient(120deg,#242b35,#313b45)}
.page-home .r164-step--catalog:before{background:radial-gradient(ellipse at 85% 59%,#b0a0a466,transparent 55%),linear-gradient(115deg,#25262b,#464049)}
.page-home .r164-step--web:before{background:radial-gradient(ellipse at 90% 35%,#828bdc68,transparent 60%),linear-gradient(115deg,#252735,#3d3a57)}
.page-home .r164-step--connect:before{background:radial-gradient(ellipse at 77% 70%,#468b9b88,transparent 58%),linear-gradient(110deg,#202b32,#2d464d)}
.page-home .r164-step--home:before{background:radial-gradient(ellipse at 84% 50%,#65a98965,transparent 56%),linear-gradient(115deg,#252d2d,#30433b)}
.page-home .r164-step-content{width:48%;max-width:620px;position:relative;z-index:5;opacity:.6;transform:translate3d(0,30px,0);transition:opacity .65s cubic-bezier(.2,.75,.15,1),transform .65s cubic-bezier(.2,.75,.15,1)}
.page-home .r164-step.is-seen .r164-step-content{opacity:1;transform:translate3d(0,0,0)}
.page-home .r164-counter{display:block;color:#a7b4dc;font-size:12px;letter-spacing:.16em;font-weight:800;margin-bottom:30px}
.page-home .r164-counter i{font-style:normal;color:#7e869b}
.page-home .r164-step-content h3{font-size:clamp(35px,4.3vw,74px);line-height:1.08;font-weight:700;letter-spacing:-.065em;color:#f9faff;margin-bottom:22px}
.page-home .r164-step-content h3 em{font-style:normal;color:#ccd5df}
.page-home .r164-step-content>p{font-size:clamp(17px,1.45vw,22px);line-height:1.55;letter-spacing:-.015em;color:#b8bcc8;max-width:565px;margin:0 0 36px}
.page-home .r164-step-link{display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid #c3cbdf90;padding:0 0 11px;color:#f3f5fc;font-size:14px;font-weight:700;position:relative;z-index:6}
.page-home .r164-step-link:hover{color:#b4c0ff}
.page-home .r164-integrations{display:flex;flex-wrap:wrap;max-width:480px;gap:8px;margin:0 0 28px}
.page-home .r164-integrations span{font-size:11px;line-height:1.1;white-space:nowrap;color:#eef3f9;background:#ffffff11;border:1px solid #ffffff25;border-radius:99px;padding:9px 11px}
.page-home .r164-phone-overlay{position:absolute;inset:0;z-index:3;pointer-events:none}
.page-home .r164-phone-pin{position:sticky;top:clamp(55px,11svh,135px);height:min(77svh,770px);width:55%;margin-left:auto;display:flex;align-items:center;justify-content:center;--r164-travel:0px;--r164-turn:0deg;--r164-float:0px;transform:translate3d(0,var(--r164-travel),0)}
.page-home .r164-device-sheen{position:absolute;inset:6% 10% 0 13%;background:radial-gradient(ellipse,#899be955 0,transparent 66%);filter:blur(32px)}
.page-home .r164-device{position:relative;z-index:2;height:100%;max-height:735px;aspect-ratio:0.505;border-radius:clamp(37px,4vw,58px);background:linear-gradient(115deg,#e2e7f7 0%,#161c25 13%,#303847 53%,#dfe5f4 91%,#293443 100%);padding:7px;box-shadow:0 50px 105px #0009,0 0 0 1px #e8ebfa85;transform:perspective(1250px) rotateY(var(--r164-tilt-y,0deg)) rotateZ(var(--r164-turn)) translate3d(0,var(--r164-float),0);transition:transform .11s linear}
.page-home .r164-device-glass{height:100%;width:100%;border-radius:inherit;position:relative;overflow:hidden;background:linear-gradient(#f0f2f9,#d8dfea);border:4px solid #0c1119;isolation:isolate}
.page-home .r164-device-island{position:absolute;z-index:7;top:12px;left:50%;transform:translateX(-50%);background:#06070a;border-radius:999px;width:31%;height:23px;box-shadow:inset 0 1px 2px #26272a}
.page-home .r164-device-status{position:absolute;z-index:7;color:#111821;top:12px;left:9%;right:7%;display:flex;justify-content:space-between;font-size:12px;letter-spacing:-.02em;font-weight:800}
.page-home .r164-device-status span{font-size:10px}
.page-home .r164-device-screens{position:absolute;inset:0;overflow:hidden}
.page-home .r164-device-screen{position:absolute;inset:0;overflow:hidden;opacity:0;transform:translate3d(0,20px,0) scale(.98);background:#f1f4fb;will-change:opacity,transform}
.page-home .r164-device-screen:first-child{opacity:1}
.page-home .r164-device-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.page-home .r164-device-screen:nth-child(2) img,.page-home .r164-device-screen:nth-child(3) img,.page-home .r164-device-screen:nth-child(4) img{object-fit:cover;object-position:55% 50%}
.page-home .r164-ui-top{position:absolute;z-index:4;top:50px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;background:#ffffffed;border:1px solid #fff8;border-radius:100px;box-shadow:0 7px 24px #17283a30;color:#222936;padding:6px 9px;font-size:12px}
.page-home .r164-app-dot{background:#222940;color:white;border-radius:50%;font-size:16px;display:grid;place-items:center;height:28px;width:28px}
.page-home .r164-ui-dots{letter-spacing:.14em;color:#626e87}
.page-home .r164-ui-bottom{position:absolute;z-index:4;bottom:16px;left:7%;right:7%;border-radius:999px;display:flex;align-items:center;justify-content:space-between;background:#131a2de9;color:#f8f9ff;box-shadow:0 10px 25px #0005;padding:13px 17px;font-size:11px;font-weight:700}
.page-home .r164-ui-bottom i{width:6px;height:6px;border-radius:50%;background:#9ce7c2}
.page-home .r164-floating{position:absolute;display:flex;align-items:center;gap:12px;z-index:4;padding:12px 17px;border-radius:19px;border:1px solid #f7f9ffad;color:#212a3b;background:#f8faffee;box-shadow:0 20px 60px #090e2180,0 2px 8px #26273d18;backdrop-filter:blur(12px);transform:translate3d(0,var(--r164-float),0)}
.page-home .r164-floating--one{left:0;bottom:21%;transform:translate3d(-4%,calc(var(--r164-float) * -.65),0) rotate(-5deg)}
.page-home .r164-floating--two{right:-1%;top:25%;transform:translate3d(0,var(--r164-float),0) rotate(5deg)}
.page-home .r164-floating-icon{display:grid;place-items:center;color:#475ac0;font-size:23px;height:38px;width:38px;background:#e6eafd;border-radius:13px}
.page-home .r164-floating strong{display:block;font-weight:800;font-size:13px;color:#273146}.page-home .r164-floating small{display:block;font-size:10px;color:#748097;margin-top:4px}
.page-home .r164-floating--mini{right:6%;bottom:13%;width:55px;height:55px;border-radius:16px;display:grid;place-items:center;color:#444dd0;font-size:24px;transform:rotate(15deg)}
/* A purposeful 10-domain integration cloud replaces unrelated third-party logos. */
.page-home .r164-ecosystem-chips{position:absolute;inset:0;z-index:5;opacity:0;transform:translate3d(0,23px,0);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.78,.2,1);pointer-events:none}
.page-home .r164-story[data-active="3"] .r164-ecosystem-chips{opacity:1;transform:translate3d(0,0,0)}
.page-home .r164-story[data-active="3"] .r164-floating{opacity:0}
.page-home .r164-ecosystem-chips span{position:absolute;display:flex;align-items:center;gap:5px;color:#364c77;background:#fbfcfff3;border:1px solid #ffffffb0;box-shadow:0 18px 35px #11162655;border-radius:14px;padding:10px 13px;font-size:18px;font-weight:700;white-space:nowrap}
.page-home .r164-ecosystem-chips span b{font-size:11px;font-weight:800}
.page-home .r164-ecosystem-chips span:nth-child(1){top:10%;left:17%;transform:rotate(-12deg)}
.page-home .r164-ecosystem-chips span:nth-child(2){top:5%;right:10%;transform:rotate(9deg)}
.page-home .r164-ecosystem-chips span:nth-child(3){top:26%;left:0;transform:rotate(13deg)}
.page-home .r164-ecosystem-chips span:nth-child(4){top:34%;right:-4%;transform:rotate(-9deg)}
.page-home .r164-ecosystem-chips span:nth-child(5){top:48%;left:3%;transform:rotate(-9deg)}
.page-home .r164-ecosystem-chips span:nth-child(6){top:59%;right:-6%;transform:rotate(7deg)}
.page-home .r164-ecosystem-chips span:nth-child(7){top:71%;left:0;transform:rotate(7deg)}
.page-home .r164-ecosystem-chips span:nth-child(8){bottom:8%;right:7%;transform:rotate(-14deg)}
.page-home .r164-ecosystem-chips span:nth-child(9){bottom:7%;left:23%;transform:rotate(8deg)}
.page-home .r164-ecosystem-chips span:nth-child(10){top:17%;right:2%;transform:rotate(13deg)}
.page-home .r164-story-outro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:55px;color:#a1a5b6;font-size:12px;font-weight:700;letter-spacing:.08em}
.page-home .r164-story-outro a{color:#fff;background:#30333d;border:1px solid #ffffff40;padding:16px 24px;border-radius:100px;white-space:nowrap}
.page-home .r164-mobile-art{display:none}
/* Vertical Bevel-like cinematic scroll flows into the 9 existing JSOFY chapters. */
.page-home .r161-gallery-section{background:#101115;color:#f7f7f9;padding:clamp(90px,10vw,150px) 0 clamp(85px,10vw,150px)}
.page-home .r161-gallery-heading{display:block;text-align:center;margin-bottom:54px}
.page-home .r161-gallery-heading>div:first-child{max-width:1000px;margin:0 auto 30px}
.page-home .r161-gallery-heading h2{color:#f8f8fa;margin-left:auto;margin-right:auto;font-size:clamp(39px,5vw,78px);line-height:1.05;letter-spacing:-.06em}
.page-home .r161-gallery-heading h2 span{color:#c6c8d0}
.page-home .r161-gallery-description{color:#a6a7b1;margin:0 auto;line-height:1.7;font-size:clamp(15px,1.35vw,19px)}
.page-home .r161-gallery-heading .r161-kicker{color:#a0a5bd;font-size:11px;letter-spacing:.22em}
.page-home .r161-gallery-controls{justify-content:center}
.page-home .r161-gallery-arrow,.page-home .r163-gallery-pause{background:#24252c;color:#fff;border-color:#494b56}
.page-home .r161-gallery-arrow:hover:not(:disabled),.page-home .r163-gallery-pause:hover{background:#393b47;border-color:#676d89}
.page-home .r161-gallery-count,.page-home .r161-gallery-hint{color:#a1a4ae}
.page-home .r161-gallery-rail{gap:clamp(16px,2vw,29px);padding-top:8px;padding-bottom:20px}
.page-home .r161-gallery-item{flex-basis:clamp(210px,21vw,335px)}
.page-home .r161-gallery-visual{height:clamp(340px,37vw,540px);border-radius:25px;background:linear-gradient(150deg,#dce3f2,#f2e9ef);border:1px solid #ffffff1c;box-shadow:none}
.page-home .r161-gallery-item:nth-child(2n) .r161-gallery-visual{background:linear-gradient(130deg,#a6c4dd,#636e93)}
.page-home .r161-gallery-item:nth-child(3n) .r161-gallery-visual{background:linear-gradient(155deg,#d8dbff,#a1d3bb)}
.page-home .r161-gallery-visual img{object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.75,.15,1)}
.page-home .r161-gallery-item:nth-child(3n+1) .r161-gallery-visual img{object-position:28% center}
.page-home .r161-gallery-item:nth-child(3n+2) .r161-gallery-visual img{object-position:75% center}
.page-home .r161-gallery-visual-pos-real img,.page-home .r161-gallery-visual-home-real img{object-fit:cover;object-position:top}
.page-home .r161-gallery-caption strong{color:#f4f5f9;font-size:clamp(14px,1.1vw,17px)}
.page-home .r161-gallery-caption span:first-child,.page-home .r161-gallery-caption span:last-child{color:#a1a6bc}
.page-home .r161-gallery-item img{aspect-ratio:auto}
@media(max-width:1020px){
 .page-home .r164-step{padding:62px 5%;min-height:75svh}
 .page-home .r164-step-content{width:49%}
 .page-home .r164-phone-pin{width:53%}
 .page-home .r164-floating--one{left:-3%}
 .page-home .r164-floating--two{right:-4%}
}
@media(max-width:850px){
 .page-home .r164-story-heading{padding:80px 0 45px}
 .page-home .r164-stack{width:min(calc(100% - 32px),620px)}
 .page-home .r164-phone-overlay{display:none}
 .page-home .r164-step{min-height:auto;display:block;padding:45px clamp(20px,5vw,40px) 20px;margin-bottom:17px;border-radius:24px}
 .page-home .r164-step-content{width:100%;max-width:none;opacity:1;transform:none}
 .page-home .r164-step-content h3{font-size:clamp(34px,6vw,50px)}
 .page-home .r164-step-content>p{font-size:15px;line-height:1.65}
 .page-home .r164-counter{font-size:10px;margin-bottom:20px}
 .page-home .r164-mobile-art{display:block;position:relative;width:100%;height:clamp(250px,60vw,450px);margin:38px auto 0;overflow:hidden;border-radius:21px;border:1px solid #ffffff23;background:#e4e9f4}
 .page-home .r164-mobile-art img{width:100%;height:100%;object-fit:cover;object-position:center top}
 .page-home .r164-step--pos .r164-mobile-art img,.page-home .r164-step--home .r164-mobile-art img{object-fit:contain}
 .page-home .r164-story-outro{display:block;text-align:center;padding-top:32px}
 .page-home .r164-story-outro a{display:inline-flex;margin-top:18px}
 .page-home .r161-gallery-item{flex-basis:min(70vw,290px)}
 .page-home .r161-gallery-visual{height:clamp(310px,100vw,450px)}
}
@media(prefers-reduced-motion:reduce){
 .page-home .r164-step-content{opacity:1!important;transform:none!important;transition:none!important}
 .page-home .r164-device,.page-home .r164-phone-pin,.page-home .r164-floating{transform:none!important;transition:none!important}
 .page-home .r164-device-screen{transition:none!important}
}
.r163-save-data .r164-device-screen{will-change:auto!important}