/* Real work is the focal point. Motion only traces the method and adds shallow depth. */
.hero{padding-top:60px;padding-bottom:52px}
.hero-product-visual{background:#ffffffd9;box-shadow:0 28px 80px #12303f12}
.hero-product-visual .method-flow{margin:15px 0 12px}.hero-product-visual .method-no{width:28px;height:28px;margin-bottom:7px}.hero-product-visual .method-flow strong{font-size:11px;line-height:1.5}.hero-product-visual .flow-track{top:14px;left:14px;right:14px}
.hero-product-visual::before{content:'';position:absolute;inset:-16px 17px 17px -16px;border:1px solid #b4cbd0;border-radius:16px;z-index:-1;transform:rotate(-2deg)}
.software-captures{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 9px}
.software-capture{position:relative;grid-column:1;width:84%;transform:translate3d(0,var(--capture-shift,0px),0) rotate(-1.5deg);transition:box-shadow .3s}
.software-capture:nth-child(2){width:62%;justify-self:end;margin-top:-100px;transform:translate3d(0,var(--capture-shift,0px),0) rotate(2deg);box-shadow:0 14px 35px #12303f25}
.software-capture span{padding:11px 13px;background:#fff;font-size:11px}
.software-capture:hover,.software-capture:focus-visible{z-index:2;transform:translate3d(0,calc(var(--capture-shift,0px) - 4px),0) rotate(-1.5deg);box-shadow:0 16px 36px #12303f26}
.software-capture:nth-child(2):hover,.software-capture:nth-child(2):focus-visible{transform:translate3d(0,calc(var(--capture-shift,0px) - 4px),0) rotate(2deg)}
.offer-motion,.visual-motion{min-height:44px;font-size:11px}
.method-drawing{display:flex;align-items:center;justify-content:space-between;color:var(--accent);margin-bottom:15px}
.method-drawing svg{width:112px;height:98px;overflow:visible}
.method-drawing>span{font:500 12px/1 var(--sans);letter-spacing:.1em}
.group-grid{gap:32px}
.group-card{border-top:0;border-bottom:1px solid var(--line);padding-top:8px}
.method-signal{transform-origin:94px 78px;animation:method-inspect 4s ease-in-out infinite paused}.method-signal circle{fill:#dfecee}
.method-route{stroke-dasharray:6 6;animation:method-connect 3s linear infinite paused}
.method-check{stroke-width:2.5;stroke-dasharray:50;stroke-dashoffset:0;animation:method-verify 4s ease-in-out -2.5s infinite paused}
[data-visual-motion=running] .method-signal,[data-visual-motion=running] .method-route,[data-visual-motion=running] .method-check{animation-play-state:running}
.service-deck{position:relative;z-index:1}
.service-hint{color:#b9cdd1;font-size:12px;margin:0 0 22px}
.service-item{border-top:1px solid #ffffff35;scroll-margin-top:110px}
.service-item:last-child{border-bottom:1px solid #ffffff35}
.service-item summary{display:flex;align-items:center;gap:18px;list-style:none;cursor:pointer;padding:22px 0;color:#c4d5d8;min-height:80px}
.service-item summary::-webkit-details-marker{display:none}
.service-item summary h3{font:400 clamp(24px,2.4vw,32px)/1.18 var(--serif);letter-spacing:-.02em;flex:1}
.service-number{font:11px/1 var(--sans);color:#8cbec6}
.service-expand{font:300 23px/1 var(--sans);width:20px;text-align:center;flex-shrink:0;color:#9dcbd0}
.service-item[open] summary{color:#fff}
.service-item[open] .service-expand{font-size:0}
.service-item[open] .service-expand::after{content:'−';font-size:23px}
.service-item summary:hover{color:#fff}
.service-item summary:focus-visible,.service-deck a:focus-visible{outline-color:#b8e4e9}
.service-body{display:grid;grid-template-columns:.72fr 1.28fr;gap:45px;padding:8px 0 32px}
.service-item:not([open]) .service-body{display:none}
.service-explanation{min-width:0}
.service-explanation>p:first-child{color:#c4d5d8;font-size:14px;line-height:1.8;max-width:440px}
.service-symbol{width:70px;height:70px;display:block;color:#8bc5cd;margin:20px 0 12px}
.service-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0 0 17px;gap:12px;position:relative}
.service-route::before{content:'';position:absolute;left:6px;right:6px;top:5px;height:1px;background:#446573}
.service-route li{position:relative;font:12px/1.5 var(--sans);color:#e1ecee;min-width:0;padding-top:21px}
.service-route li::before{content:'';position:absolute;left:0;top:0;width:11px;height:11px;border:1px solid #a4d0d6;border-radius:50%;background:var(--navy);animation:service-step 6s ease-in-out infinite paused}
.service-route li:nth-child(2)::before{animation-delay:2s}.service-route li:nth-child(3)::before{animation-delay:4s}
[data-visual-motion=running] .service-route li::before{animation-play-state:running}
.service-note{color:#a9c0c7;font-size:11px;line-height:1.6;max-width:400px;margin-bottom:20px}
.service-explanation .text-link{display:inline-block;margin-top:0;font-size:12px}
.service-proof{min-width:0;margin:0;align-self:center;transform:translate3d(0,var(--proof-shift,0px),0);border:1px solid #ffffff35;border-radius:9px;overflow:hidden;background:#f2f6f5;color:var(--navy);box-shadow:0 28px 60px #031a2744}
.service-proof-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 20px;font:10px/1.5 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid #d1dfe2}
.service-proof-head::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.service-proof-head>span:first-child{margin-right:auto}
.service-screen{display:block;background:#fff;overflow:hidden}
.service-screen img{width:100%;height:auto;aspect-ratio:1265/712;object-fit:contain;display:block;transition:transform .45s}
.service-screen:hover img{transform:scale(1.025)}
.service-proof figcaption{padding:20px 23px 24px;border-top:1px solid #d1dfe2}
.service-proof figcaption>span{font:600 11px/1.5 var(--sans);letter-spacing:.04em;color:var(--accent)}
.service-proof figcaption p{font:400 clamp(20px,2vw,26px)/1.3 var(--serif);margin-top:10px;max-width:550px}
.visual-motion{position:relative;z-index:1;display:block;margin:28px 0 0 auto;padding:7px 13px;border:1px solid #7b9aa6;background:transparent;color:#d4e7ea;border-radius:4px;cursor:pointer}
.visual-motion[hidden]{display:none}.visual-motion[aria-pressed=true]{background:#254958}
@media(min-width:851px){
  .service-deck{padding-right:calc(60% + 45px);min-height:560px}
  .service-body{display:block;padding:3px 0 30px}
  .service-proof{position:absolute;right:0;top:50%;width:60%;transform:translate3d(0,calc(-50% + var(--proof-shift,0px)),0)}
}
@media(max-width:1120px){.service-deck{column-gap:35px}.service-body{gap:35px}.service-item summary{gap:12px}.service-item summary h3{font-size:26px}.service-proof figcaption{padding:18px}.service-route{gap:9px}.service-route li{font-size:11px}}
@media(max-width:850px){
  .hero-product-visual{max-width:620px}.software-captures{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:8px 0}
  .software-capture{width:100%;grid-column:auto}.software-capture:nth-child(2){width:100%;margin-top:30px;grid-column:auto;align-self:start}
  .service-body{grid-template-columns:1fr;gap:28px;padding-bottom:35px}.service-proof{max-width:680px;width:100%}.service-explanation>p:first-child{max-width:650px}.service-symbol{float:left;margin:18px 25px 8px 0}.service-route{padding-top:20px;min-height:95px}.service-route::before{top:25px}.service-note{clear:both;max-width:650px}.service-item summary{padding:22px 0;min-height:75px}.service-item summary h3{font-size:28px}
  .method-drawing svg{width:100px;height:88px}.group-card{padding-right:0}
}
@media(max-width:520px){
  .hero-product-visual::before{inset:-9px 9px 9px -9px}.hero-product-visual{padding:18px}.software-captures{grid-template-columns:1fr;padding:0 0 4px}.software-capture{width:90%;grid-column:1}.software-capture:nth-child(2){width:76%;grid-column:1;margin-top:-40px}.software-capture span{font-size:11px;padding:9px 11px}
  .method-drawing{margin-bottom:10px}.method-drawing svg{width:98px;height:86px}.group-grid{gap:23px}.group-card{padding-bottom:25px}
  .service-item summary h3{font-size:25px}.service-item summary{gap:12px}.service-symbol{width:54px;height:54px;margin-right:14px}.service-route li{font-size:10px}.service-proof-head{padding:12px;font-size:9px;letter-spacing:.02em}.service-proof figcaption{padding:16px}.service-proof figcaption p{font-size:22px}.service-screen:hover img{transform:none}
}
@keyframes method-inspect{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-17px)}}
@keyframes method-connect{to{stroke-dashoffset:-24}}
@keyframes method-verify{0%,15%{stroke-dashoffset:50}55%,100%{stroke-dashoffset:0}}
@keyframes service-step{0%,25%{background:#a4d0d6;box-shadow:0 0 0 4px #a4d0d615}34%,100%{background:var(--navy);box-shadow:none}}
@media(prefers-reduced-motion:reduce){
  .method-signal,.method-route,.method-check,.service-route li::before{animation:none}
  .software-capture,.software-capture:nth-child(2),.software-capture:hover,.software-capture:focus-visible,.software-capture:nth-child(2):hover,.software-capture:nth-child(2):focus-visible{transform:none}
  .service-proof{--proof-shift:0px!important}
  .service-screen img{transition:none}.service-screen:hover img{transform:none}
}