.hero-art{min-height:390px;position:relative;display:grid;place-items:center}.partnership-visual{position:relative;width:min(100%,440px);height:345px}.process-path{position:absolute;left:15%;right:9%;top:53%;height:2px;background:#008C95}.process-path:before,.process-path:after{content:'';position:absolute;top:50%;width:14px;height:14px;border:3px solid #F4EFE7;border-radius:50%;background:#008C95;transform:translateY(-50%)}.process-path:before{left:27%}.process-path:after{right:22%}.person{position:absolute;bottom:33px;width:154px;height:235px}.person-one{left:7%;color:#102A43}.person-two{right:7%;color:#008C95}.person .head{position:absolute;top:0;left:52px;width:55px;height:55px;border-radius:50%;background:currentColor}.person .body{position:absolute;left:0;bottom:0;width:154px;height:155px;border-radius:78px 78px 35px 35px;background:currentColor}.person-one .body{border-radius:78px 22px 68px 35px}.person-two .body{border-radius:22px 78px 35px 68px}.person-one .body:after,.person-two .body:after{content:'';position:absolute;background:#F4EFE7;width:77px;height:118px;bottom:0}.person-one .body:after{right:0;border-radius:77px 0 0 0}.person-two .body:after{left:0;border-radius:0 77px 0 0}.connection{position:absolute;left:42%;right:42%;bottom:95px;height:34px;border-bottom:4px solid #102A43;border-radius:0 0 36px 36px}.digital-panel{position:absolute;left:50%;top:34px;transform:translateX(-50%);width:110px;padding:13px;border:1px solid rgba(16,42,67,.18);border-radius:12px;background:#fff;box-shadow:0 12px 28px rgba(16,42,67,.1)}.digital-panel i{display:block;height:6px;border-radius:4px;background:#EAF3F2;margin:6px 0}.digital-panel i:first-child{width:70%;background:#008C95}.digital-panel i:last-child{width:48%}.visual-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;font:700 .74rem Manrope,Arial,sans-serif;letter-spacing:.1em;color:#334E68;text-transform:uppercase}@media(max-width:850px){.hero-art{min-height:300px;order:-1}.partnership-visual{transform:scale(.86)} }@media(max-width:500px){.hero-art{min-height:250px}.partnership-visual{transform:scale(.68)}}
/* A calm, visual-only layer for the existing Sopai partnership illustration. */
.partnership-visual:before{content:'';position:absolute;inset:11% 2% 15%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(0,140,149,.1) 0 1px,transparent 1.5px);background-size:19px 19px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);opacity:.6;pointer-events:none}
.process-path{background:linear-gradient(90deg,#008C95 0%,#62d4d9 42%,#008C95 72%,#008C95 100%);background-size:210% 100%;animation:sopai-flow 7s ease-in-out infinite}
.process-path:before,.process-path:after{animation:sopai-node 3.5s ease-in-out infinite}.process-path:after{animation-delay:1.2s}
.digital-panel{animation:sopai-float 5.5s ease-in-out infinite}
.person-one{animation:sopai-person-one 6.5s ease-in-out infinite}.person-two{animation:sopai-person-two 6.5s ease-in-out infinite .5s}
.connection{animation:sopai-connection 5s ease-in-out infinite}
@keyframes sopai-flow{0%,100%{background-position:100% 0}50%{background-position:0 0}}@keyframes sopai-node{0%,100%{box-shadow:0 0 0 0 rgba(0,140,149,.18)}50%{box-shadow:0 0 0 9px rgba(0,140,149,0)}}@keyframes sopai-float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}@keyframes sopai-person-one{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes sopai-person-two{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}@keyframes sopai-connection{0%,100%{opacity:.72;transform:scaleX(.94)}50%{opacity:1;transform:scaleX(1.04)}}
@media(prefers-reduced-motion:reduce){.process-path,.process-path:before,.process-path:after,.digital-panel,.person-one,.person-two,.connection{animation:none}}

/* Vectra-inspired energy, translated into Sopai's own calm visual language. */
.hero{position:relative;isolation:isolate}.hero:before{content:'';position:absolute;z-index:-1;right:-10%;top:-28%;width:min(48vw,660px);height:min(48vw,660px);border-radius:50%;background:radial-gradient(circle,rgba(98,212,217,.24),rgba(0,140,149,.08) 35%,transparent 68%);filter:blur(4px);animation:sopai-ambient-drift 14s ease-in-out infinite;pointer-events:none}.hero:after{content:'';position:absolute;z-index:-1;right:6%;top:16%;width:285px;height:285px;border:1px solid rgba(16,42,67,.12);border-radius:50%;box-shadow:0 0 0 32px rgba(0,140,149,.035),0 0 0 64px rgba(0,140,149,.018);animation:sopai-orbit 42s linear infinite;pointer-events:none}.partnership-visual:after{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:330px;height:330px;transform:translate(-50%,-50%);border:1px dashed rgba(0,140,149,.28);border-radius:50%;box-shadow:inset 0 0 0 40px rgba(255,255,255,.13);animation:sopai-orbit 35s linear infinite;pointer-events:none}.partnership-visual{filter:drop-shadow(0 26px 34px rgba(16,42,67,.08))}.digital-panel{backdrop-filter:blur(7px);background:rgba(255,255,255,.85)}@keyframes sopai-ambient-drift{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.75}50%{transform:translate3d(-38px,28px,0) scale(1.08);opacity:1}}@keyframes sopai-orbit{to{rotate:360deg}}
@media(max-width:850px){.hero:after{right:-12%;top:13%;width:220px;height:220px}.hero:before{width:500px;height:500px;right:-48%;top:0}.partnership-visual:after{width:270px;height:270px}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after,.partnership-visual:after{animation:none}}

/* Fluid 3D hero treatment requested for the People · Process · Digital Support visual. */
.hero-art{perspective:1050px;perspective-origin:50% 46%;isolation:isolate}.partnership-visual{--scene-scale:1;transform-style:preserve-3d;will-change:transform;animation:sopai-scene-tilt 10s cubic-bezier(.45,.05,.25,1) infinite;filter:drop-shadow(0 30px 32px rgba(16,42,67,.13))}.partnership-visual:before{transform:translateZ(-45px);opacity:.86}.partnership-visual:after{transform:translate(-50%,-50%) translateZ(-28px);box-shadow:inset 0 0 0 38px rgba(255,255,255,.16),0 0 45px rgba(0,140,149,.11)}.person{transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 18px 15px rgba(16,42,67,.18))}.person .head{transform:translateZ(28px);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.3) 0 9%,currentColor 44%,color-mix(in srgb,currentColor,#000 17%) 100%);box-shadow:inset -10px -12px 18px rgba(0,0,0,.16),inset 7px 6px 12px rgba(255,255,255,.12),0 12px 20px rgba(16,42,67,.2);animation:sopai-head-drift 4.8s ease-in-out infinite}.person .body{transform:translateZ(10px);background:linear-gradient(135deg,color-mix(in srgb,currentColor,#fff 15%) 0%,currentColor 48%,color-mix(in srgb,currentColor,#000 18%) 100%);box-shadow:inset 16px 10px 22px rgba(255,255,255,.11),inset -22px -18px 30px rgba(0,0,0,.13),0 24px 30px rgba(16,42,67,.15);animation:sopai-body-breathe 5.6s ease-in-out infinite}.person-two .head,.person-two .body{animation-delay:.55s}.person-one{animation:sopai-person-one-3d 7.5s ease-in-out infinite}.person-two{animation:sopai-person-two-3d 7.5s ease-in-out infinite .45s}.digital-panel{transform-style:preserve-3d;will-change:transform;border-color:rgba(0,140,149,.2);box-shadow:0 24px 35px rgba(16,42,67,.16),inset 0 1px 0 rgba(255,255,255,.9);animation:sopai-panel-3d 6.2s ease-in-out infinite}.digital-panel:after{content:'';position:absolute;inset:6px;border:1px solid rgba(98,212,217,.22);border-radius:8px;pointer-events:none}.process-path{transform:translateZ(14px);box-shadow:0 0 18px rgba(0,140,149,.28)}.connection{transform-origin:center;filter:drop-shadow(0 7px 7px rgba(16,42,67,.2));animation:sopai-connection-3d 5s ease-in-out infinite}.visual-label{transform:translateX(-50%) translateZ(20px);text-shadow:0 7px 14px rgba(16,42,67,.16);animation:sopai-label-float 6.5s ease-in-out infinite}
@keyframes sopai-scene-tilt{0%,100%{transform:scale(var(--scene-scale)) rotateX(1deg) rotateY(-2.5deg) translateY(0)}35%{transform:scale(var(--scene-scale)) rotateX(-1.5deg) rotateY(3deg) translateY(-4px)}70%{transform:scale(var(--scene-scale)) rotateX(1.8deg) rotateY(1deg) translateY(2px)}}
@keyframes sopai-person-one-3d{0%,100%{transform:translate3d(-3px,1px,18px) rotateY(4deg) rotateZ(-.5deg)}50%{transform:translate3d(6px,-7px,38px) rotateY(-5deg) rotateZ(.7deg)}}
@keyframes sopai-person-two-3d{0%,100%{transform:translate3d(3px,-2px,25px) rotateY(-4deg) rotateZ(.5deg)}50%{transform:translate3d(-6px,6px,42px) rotateY(5deg) rotateZ(-.7deg)}}
@keyframes sopai-head-drift{0%,100%{transform:translate3d(0,0,28px) rotateZ(-1deg)}50%{transform:translate3d(2px,-5px,42px) rotateZ(1.5deg)}}
@keyframes sopai-body-breathe{0%,100%{transform:translateZ(10px) scale3d(1,1,1)}50%{transform:translateZ(20px) scale3d(1.015,.99,1)}}
@keyframes sopai-panel-3d{0%,100%{transform:translateX(-50%) translate3d(0,0,46px) rotateX(1deg) rotateY(-4deg)}50%{transform:translateX(-50%) translate3d(0,-13px,68px) rotateX(-4deg) rotateY(5deg)}}
@keyframes sopai-connection-3d{0%,100%{opacity:.74;transform:translateZ(12px) scaleX(.91)}50%{opacity:1;transform:translateZ(31px) scaleX(1.08)}}
@keyframes sopai-label-float{0%,100%{transform:translateX(-50%) translate3d(0,0,20px)}50%{transform:translateX(-50%) translate3d(0,-3px,30px)}}
@media(max-width:850px){.partnership-visual{--scene-scale:.86}.person .head,.person .body{animation-duration:6.5s}}
@media(max-width:500px){.partnership-visual{--scene-scale:.68}}
@media(prefers-reduced-motion:reduce){.partnership-visual,.person-one,.person-two,.person .head,.person .body,.digital-panel,.connection,.visual-label{animation:none!important}.partnership-visual{transform:scale(var(--scene-scale))}.person-one,.person-two,.person .head,.person .body,.connection{transform:none}.digital-panel{transform:translateX(-50%)}.visual-label{transform:translateX(-50%)}}

/* Original Sopai 3D story: people collaborate, processes improve, digital support follows. */
.hero-art{min-width:0}
.home-story-visual{width:540px;max-width:100%;height:390px;filter:none;isolation:isolate;animation:sopai-home-story-tilt 10s ease-in-out infinite}
.home-story-visual:before{inset:8% 0 9%;z-index:-2;background:radial-gradient(circle at 50% 50%,rgba(98,212,217,.13) 0 1px,transparent 1.5px);background-size:20px 20px;mask-image:radial-gradient(ellipse at center,#000 28%,transparent 72%)}
.home-story-visual:after{z-index:-1;width:365px;height:300px;border-color:rgba(0,140,149,.19);box-shadow:0 0 0 31px rgba(0,140,149,.028),0 0 46px rgba(98,212,217,.13);animation:sopai-home-ring 30s linear infinite}
.home-scene-image{position:absolute;z-index:2;left:50%;top:48%;width:112%;height:auto;max-width:112%;transform:translate(-50%,-50%) translateZ(34px);filter:drop-shadow(0 24px 23px rgba(16,42,67,.15));mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,#000 0 67%,rgba(0,0,0,.93) 77%,transparent 100%);animation:sopai-home-image-float 7.5s ease-in-out infinite;will-change:transform}
.home-scene-ring{position:absolute;z-index:1;left:50%;top:49%;width:92%;height:72%;border:1px solid rgba(98,212,217,.3);border-radius:50%;transform:translate(-50%,-50%) rotateX(63deg) rotateZ(-13deg);box-shadow:0 0 0 18px rgba(255,255,255,.12),0 0 30px rgba(0,140,149,.09);animation:sopai-home-orbit-ring 16s linear infinite}
.home-scene-node{position:absolute;z-index:3;border-radius:50%;background:radial-gradient(circle at 31% 28%,#fff 0 8%,#62d4d9 13%,var(--teal) 57%,#00636a 100%);box-shadow:inset -7px -8px 13px rgba(8,29,48,.28),0 13px 22px rgba(16,42,67,.2),0 0 17px rgba(98,212,217,.26)}
.home-scene-node-one{width:36px;height:36px;left:3%;top:25%;animation:sopai-home-node-one 8s ease-in-out infinite}
.home-scene-node-two{width:24px;height:24px;right:1%;bottom:27%;background:radial-gradient(circle at 31% 28%,#fff 0 8%,#52728e 14%,var(--navy) 62%,#071827 100%);animation:sopai-home-node-two 9s ease-in-out infinite}
.home-story-visual .visual-label{z-index:4;bottom:1px;padding:6px 12px;border-radius:999px;background:rgba(244,239,231,.82);backdrop-filter:blur(7px)}
@keyframes sopai-home-story-tilt{0%,100%{transform:rotateX(1deg) rotateY(-2deg) translateY(0)}50%{transform:rotateX(-1.5deg) rotateY(2.5deg) translateY(-5px)}}
@keyframes sopai-home-image-float{0%,100%{transform:translate(-50%,-50%) translate3d(0,0,34px) scale(1)}50%{transform:translate(-50%,-50%) translate3d(0,-8px,58px) scale(1.018)}}
@keyframes sopai-home-ring{to{transform:translate(-50%,-50%) translateZ(-28px) rotate(360deg)}}
@keyframes sopai-home-orbit-ring{to{transform:translate(-50%,-50%) rotateX(63deg) rotateZ(347deg)}}
@keyframes sopai-home-node-one{0%,100%{transform:translate3d(0,0,20px) scale(.9)}50%{transform:translate3d(19px,-14px,70px) scale(1.08)}}
@keyframes sopai-home-node-two{0%,100%{transform:translate3d(0,0,16px)}50%{transform:translate3d(-18px,13px,56px) scale(1.12)}}
@media(max-width:850px){.home-story-visual{width:min(100%,520px);height:330px}.home-story-visual:after{width:315px;height:250px}.home-scene-image{width:104%}}
@media(max-width:500px){.home-story-visual{width:480px;height:285px}.home-story-visual:after{width:270px;height:215px}.home-scene-image{width:92%}.home-scene-node-one{left:12%}.home-scene-node-two{right:11%}}
@media(prefers-reduced-motion:reduce){.home-story-visual,.home-story-visual:after,.home-scene-image,.home-scene-ring,.home-scene-node-one,.home-scene-node-two{animation:none!important}.home-story-visual{transform:none}.home-scene-image{transform:translate(-50%,-50%)}.home-scene-ring{transform:translate(-50%,-50%) rotateX(63deg) rotateZ(-13deg)}}

/* Homepage story refinement: collaborative people feed a clearer process, then digital support. */
.home-story-visual{width:570px;height:410px;padding:0;border-radius:34px;perspective:1100px}
.home-story-visual:before{inset:3% -2% 7%;border-radius:42%;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.96) 0 16%,rgba(98,212,217,.16) 46%,rgba(0,140,149,.035) 69%,transparent 73%);mask-image:none;opacity:1;filter:drop-shadow(0 28px 40px rgba(16,42,67,.1))}
.home-story-visual:after{width:91%;height:78%;border:1px solid rgba(0,140,149,.22);box-shadow:0 0 0 24px rgba(255,255,255,.16),0 0 0 53px rgba(0,140,149,.025),0 0 48px rgba(98,212,217,.15)}
.home-scene-image{top:49%;width:108%;max-width:108%;padding:9px;border:3px solid rgba(255,255,255,.82);border-radius:31px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(98,212,217,.2),0 28px 42px rgba(16,42,67,.2);mix-blend-mode:normal;mask-image:none;filter:saturate(.98) contrast(1.025) drop-shadow(0 22px 26px rgba(16,42,67,.13))}
.home-scene-ring{width:99%;height:78%;top:50%;border-color:rgba(98,212,217,.38);box-shadow:0 0 0 17px rgba(255,255,255,.12),0 0 32px rgba(0,140,149,.13)}
.home-story-chip{position:absolute;z-index:7;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:7px 13px;border:1px solid rgba(255,255,255,.88);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(223,243,241,.9));box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(16,42,67,.17);color:var(--navy);font:800 .68rem Manrope,Arial,sans-serif;letter-spacing:.025em;text-transform:uppercase;backdrop-filter:blur(8px);will-change:transform;animation:sopai-home-chip 5.8s ease-in-out infinite}
.home-story-chip-people{left:6%;top:25%;animation-delay:-.4s}.home-story-chip-process{left:42%;top:7%;animation-delay:-2.1s}.home-story-chip-digital{right:2%;top:28%;animation-delay:-3.7s}
.home-story-arrow{position:absolute;z-index:8;color:#fff;font:900 1.25rem/1 Manrope,Arial,sans-serif;text-shadow:0 0 4px #fff,0 0 10px #62d4d9,0 0 18px var(--teal);filter:drop-shadow(0 4px 7px rgba(16,42,67,.22));animation:sopai-home-arrow 3.3s ease-in-out infinite}
.home-story-arrow-one{left:33%;top:20%;transform:rotate(-22deg);animation-delay:-.3s}.home-story-arrow-two{right:29%;top:18%;transform:rotate(20deg);animation-delay:-1.7s}
.home-story-visual .visual-label{bottom:-5px;padding:8px 15px;border:1px solid rgba(0,140,149,.17);background:rgba(244,239,231,.91);box-shadow:0 9px 20px rgba(16,42,67,.1);letter-spacing:.13em}
@keyframes sopai-home-chip{0%,100%{transform:translate3d(0,0,54px) rotate(-1deg)}50%{transform:translate3d(0,-7px,82px) rotate(1deg)}}
@keyframes sopai-home-arrow{0%,100%{opacity:.38;scale:.82}45%{opacity:1;scale:1.17}70%{opacity:.6;translate:5px 0}}
@media(max-width:850px){.home-story-visual{width:min(100%,540px);height:370px}.home-scene-image{width:101%}.home-story-chip{font-size:.61rem;min-height:28px}.home-story-chip-people{left:8%}.home-story-chip-digital{right:4%}}
@media(max-width:500px){.home-story-visual{width:470px;height:300px}.home-scene-image{width:91%;padding:6px;border-width:2px}.home-story-chip{font-size:.52rem;padding:5px 8px;min-height:24px}.home-story-chip-people{left:14%;top:24%}.home-story-chip-process{left:43%;top:9%}.home-story-chip-digital{right:11%;top:27%}.home-story-arrow-one{left:35%;top:19%}.home-story-arrow-two{right:31%;top:18%}.home-story-visual .visual-label{font-size:.59rem}}
@media(prefers-reduced-motion:reduce){.home-story-chip,.home-story-arrow{animation:none}.home-story-chip{transform:none}.home-story-arrow{opacity:.8}}