/* A connected composition: pen, fine guide and terminal icons reveal together. */
#home.home-overlay-header .home-origin { --origin-row-space: clamp(188px,15vw,210px); padding: clamp(72px,6.5vw,112px) 0 clamp(56px,5vw,88px); overflow: visible; background: #F5F5F7; color: #17191d; }
#home .home-origin__intro { width: 90%; max-width: 1200px; margin: 0 auto; text-align: center; }
#home .home-origin__title { margin: 0; color: #17191d; font-size: clamp(34px,3.3vw,60px); line-height: 1.35; text-wrap: balance; }
#home .home-origin__accent { display: inline-block; padding: 0 .16em .04em; border-radius: .22em; background: #b5d6f0; color: inherit; }
#home .home-origin__title-line { display: block; margin-top: 8px; }
#home .home-origin__intro p { max-width: 840px; margin: 24px auto 0; color: #515660; font-size: 18px; line-height: 1.9; text-wrap: pretty; }
#home .home-origin__scroll { position: relative; margin-top: clamp(76px,6.5vw,104px); }
#home .home-origin__stage { position: relative; width: 90%; max-width: 1240px; margin: 0 auto; padding-top: var(--origin-row-space); }
#home .home-origin__apps { position: absolute; z-index: 3; left: 7%; right: 7%; top: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: start; gap: clamp(16px,2vw,32px); margin: 0; padding: 0; list-style: none; }
#home .home-origin__app { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 0; text-align: center; }
#home .home-origin__icon { position: relative; display: grid; place-items: center; width: clamp(88px,7vw,112px); height: clamp(88px,7vw,112px); isolation: isolate; transition: transform .65s cubic-bezier(.2,.7,.2,1),filter .65s ease; }
#home .home-origin__icon::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 50%; background: radial-gradient(circle,rgba(53,160,230,.19),rgba(53,160,230,0) 70%); opacity: 0; transform: scale(.7); transition: opacity .65s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
#home .home-origin__icon::after { content: ''; position: absolute; inset: 9%; border: 1px solid rgba(28,136,207,.38); border-radius: 24%; opacity: 0; pointer-events: none; transform: scale(.84); }
#home .home-origin__icon > img { display: block; width: 100%; height: 100%; object-fit: contain; }
#home .home-origin__app h3 { --site-title-weight: 400; margin: 0; color: #273746; font-size: clamp(14px,1.2vw,19px); line-height: 1.6; white-space: nowrap; transition: color .5s ease; }
#home .home-origin__guide { position: absolute; z-index: 2; left: 14.8%; top: calc(var(--origin-row-space) - 24px); width: 5.3%; height: calc(var(--origin-box-height,400px)*.56 + 24px); border: solid rgba(66,83,100,.36); border-width: 0 0 1px 1px; pointer-events: none; }
#home .home-origin__box { position: relative; z-index: 1; width: 82%; max-width: 940px; margin: 0 auto; }
#home .home-origin__box > img { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--origin-lock-top,85px) - var(--origin-row-space) - 28px); object-fit: contain; }
#home .home-origin.is-origin-motion-ready .home-origin__app { opacity: var(--origin-app-opacity,0); transform: translate3d(0,var(--origin-app-y,8px),0); }
#home .home-origin.is-origin-motion-ready .home-origin__guide { opacity: var(--origin-guide-opacity,0); }
#home .home-origin.is-origin-motion-ready .home-origin__box { opacity: var(--origin-box-opacity,0); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #home .home-origin__app:hover .home-origin__icon { transform: translate3d(0,-4px,0); filter: drop-shadow(0 5px 8px rgba(3,105,174,.12)); }
  #home .home-origin__app:hover .home-origin__icon::before { opacity: 1; transform: scale(1.12); }
  #home .home-origin__app:hover .home-origin__icon::after { animation: origin-device-signal 1.2s cubic-bezier(.2,.65,.3,1) 1 both; }
  #home .home-origin__app:hover h3 { color: #0369ae; }
}
@keyframes origin-device-signal { 0% { opacity: 0; transform: scale(.84); } 28% { opacity: .55; } 100% { opacity: 0; transform: scale(1.18); } }
@media (max-width: 760px) {
  #home.home-overlay-header .home-origin { --origin-row-space: 300px; padding: 56px 0 48px; }
  #home .home-origin__intro { width: calc(100% - 36px); }
  #home .home-origin__title { font-size: clamp(29px,6.5vw,38px); line-height: 1.4; }
  #home .home-origin__title-line { margin-top: 9px; }
  #home .home-origin__intro p { max-width: 450px; margin-top: 20px; font-size: 15px; line-height: 1.9; }
  #home .home-origin__scroll { margin-top: 48px; }
  #home .home-origin__stage { width: calc(100% - 24px); }
  #home .home-origin__apps { left: 0; right: 0; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 22px 10px; }
  #home .home-origin__app { grid-column: span 2; gap: 12px; }
  #home .home-origin__app:nth-child(4) { grid-column: 2 / span 2; }
  #home .home-origin__app:nth-child(5) { grid-column: 4 / span 2; }
  #home .home-origin__icon { width: 80px; height: 80px; }
  #home .home-origin__app h3 { font-size: 14px; line-height: 1.5; white-space: normal; text-wrap: balance; }
  #home .home-origin__guide { left: 8%; width: 12%; top: calc(var(--origin-row-space) - 10px); height: calc(var(--origin-box-height,200px)*.56 + 10px); }
  #home .home-origin__box { width: 94%; max-width: 560px; }
}
@media (prefers-reduced-motion: reduce), (max-height: 579px) {
  #home .home-origin.is-origin-motion-ready .home-origin__app { opacity: 1; transform: none; }
  #home .home-origin.is-origin-motion-ready .home-origin__guide,
  #home .home-origin.is-origin-motion-ready .home-origin__box { opacity: 1; }
  #home .home-origin__box > img { max-height: none; }
  #home .home-origin__icon,#home .home-origin__icon::before,#home .home-origin__app h3 { transition: none; }
}
@media print {
  #home.home-overlay-header .home-origin { padding: 48px 0; print-color-adjust: exact; }
  #home .home-origin.is-origin-motion-ready .home-origin__app { opacity: 1; transform: none; }
  #home .home-origin.is-origin-motion-ready .home-origin__guide,
  #home .home-origin.is-origin-motion-ready .home-origin__box { opacity: 1; }
  #home .home-origin__box > img { max-height: none; }
}