/* A payment network, not an ornamental object. Positions follow the WebGL projection. */
.network-scene{height:465px;margin-top:5px;--node-0-x:19%;--node-0-y:27%;--node-1-x:81%;--node-1-y:25%;--node-2-x:80%;--node-2-y:73%;--node-3-x:20%;--node-3-y:73%;--center-x:50%;--center-y:50%;touch-action:pan-y}
.network-scene canvas{height:100%;cursor:grab;touch-action:pan-y}
.network-scene canvas:active{cursor:grabbing}
.network-scene>.scene-fallback{height:100%;opacity:.38}
.network-static{width:100%;height:100%}
.network-label{position:absolute;z-index:6;display:flex;align-items:center;gap:12px;transform:translate(-50%,-50%);padding:14px 17px;background:#101722d9;border:1px solid #94b3dc38;border-radius:12px;backdrop-filter:blur(12px);color:#e8eef7;white-space:nowrap;text-align:left;font:500 13px/1.45 var(--font);transition:background .2s,border-color .2s,box-shadow .2s}
.network-label{width:max-content}.network-label>span{display:block}.network-label small{display:block;font-size:11px;font-weight:400;color:#a3b4ca;margin-top:3px}
.network-label>.icon{width:22px;height:22px;color:#c5ddff}
.network-origin{left:var(--node-0-x);top:var(--node-0-y);pointer-events:none;background:#0c111add;border-color:#d4e5ff42}
.network-endpoint[data-network-route="1"]{left:var(--node-1-x);top:var(--node-1-y)}
.network-endpoint[data-network-route="2"]{left:var(--node-2-x);top:var(--node-2-y)}
.network-endpoint[data-network-route="3"]{left:var(--node-3-x);top:var(--node-3-y)}
.network-label .endpoint-arrow{width:15px;height:15px;color:#8fa5c2;margin-left:8px}
.network-endpoint:hover{background:#273850ef;border-color:#d3e6ffb3}
.network-endpoint.is-selected{border-color:#baf6819c;background:#17261eef}
.network-endpoint.is-selected>.icon{color:#eef6ff}
.network-endpoint:focus-visible{outline:2px solid #f0f6ff;outline-offset:5px}
.network-hub{position:absolute;left:var(--center-x);top:var(--center-y);transform:translate(-50%,-50%);z-index:5;pointer-events:none;padding:19px 22px;background:#080d16d9;border:1px solid #e0ecff5e;border-radius:14px;backdrop-filter:blur(16px)}
.network-hub img{width:118px;height:auto;filter:none}
.screen-reader-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.network-scene .scene-status{bottom:15px;text-align:center;left:15%;right:15%}
html:not(.interactions-ready) .network-endpoint{pointer-events:none}
@media(max-width:1190px){.network-scene{height:440px;margin-inline:-20px}.network-label{padding:12px 14px;font-size:12px;gap:9px}.network-hub img{width:110px}.network-hub{padding:17px 20px}}
@media(max-width:899px){.network-scene{height:430px;margin-inline:-24px}.network-label .endpoint-arrow{display:none}.network-label{padding:11px 13px}}
@media(max-width:599px){
  .hero h1{font-size:clamp(31px,9vw,52px)}
  .network-scene{height:390px;margin:10px -20px 0;--node-0-x:25%;--node-0-y:25%;--node-1-x:75%;--node-1-y:25%;--node-2-x:75%;--node-2-y:72%;--node-3-x:25%;--node-3-y:72%}
  .network-scene canvas,.network-scene>.scene-fallback{height:100%}
  .network-label{gap:7px;padding:10px 11px;font-size:11px;border-radius:10px;max-width:154px}
  .network-label small{font-size:11px;line-height:1.4;white-space:normal;max-width:103px}.network-label>.icon{width:17px;height:17px;flex-shrink:0}
  .network-origin small{max-width:90px}.network-hub{padding:15px 17px;border-radius:12px}.network-hub img{width:96px}
  .network-origin{left:clamp(80px,var(--node-0-x),calc(100% - 80px))}
  .network-endpoint[data-network-route="1"]{left:clamp(80px,var(--node-1-x),calc(100% - 80px))}
  .network-endpoint[data-network-route="2"]{left:clamp(80px,var(--node-2-x),calc(100% - 80px))}
  .network-endpoint[data-network-route="3"]{left:clamp(80px,var(--node-3-x),calc(100% - 80px))}
  .network-scene .scene-status{left:7%;right:7%;bottom:25px}
}
@media(prefers-reduced-motion:reduce){.network-label{transition:none}}

/* A readable entrance, followed by a narrow, occasional reflection across the second line. */
.hero h1{perspective:900px}
.hero h1 .title-line{display:block;position:relative;transform-origin:50% 100%;animation:title-arrive 1.15s cubic-bezier(.16,1,.3,1) both}
.hero h1 .title-line-last{animation-delay:.14s;color:#e7ecef}
.hero h1 .title-light{position:absolute;inset:0;color:#baf681;pointer-events:none;text-shadow:0 2px 19px #baf68170;mask-image:linear-gradient(110deg,transparent 38%,#000 48%,#000 52%,transparent 62%);mask-size:300% 100%;mask-position:100% 0;animation:title-reflection 6.5s cubic-bezier(.4,0,.2,1) .7s infinite}
@keyframes title-arrive{from{opacity:.6;filter:blur(10px);transform:translateY(28px) rotateX(16deg) scaleX(.94);clip-path:inset(0 0 14%)}to{opacity:1;filter:blur(0);transform:none;clip-path:inset(0 0 0)}}
@keyframes title-reflection{0%,8%{mask-position:100% 0}60%,100%{mask-position:0% 0}}
.motion-paused .hero h1 .title-line{animation:none}.motion-paused .hero h1 .title-light{display:none}
@media(prefers-reduced-motion:reduce){.hero h1 .title-line{animation:none}.hero h1 .title-light{display:none}}
@media(min-width:900px) and (max-height:800px){
  .hero-copy{padding-top:25px}.hero h1{font-size:clamp(48px,5vw,64px)}
  .hero-description{margin-top:18px;font-size:14px;line-height:1.6}
  .hero-actions{margin-top:19px}.hero-actions .button{min-height:44px;padding-block:11px}
  .network-scene{height:300px;margin-top:6px}.network-label{padding:11px 14px;font-size:12px}
  .network-hub{padding:14px 18px}.network-hub img{width:106px}
}