/* Independent high-resolution illustrations, a source-quality app screen,
   and real HTML labels. The old flattened screenshot is not displayed. */
.hero{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
.hero-art.hero-composition{height:auto;aspect-ratio:auto;container-type:inline-size;min-width:0;width:100%;background:none;border-radius:0}
.hero-scene{position:relative;aspect-ratio:710/510;isolation:isolate;border-radius:44px}
.scene-halo{position:absolute;inset:3% 0 0;border-radius:48% 43% 36% 36%;background:radial-gradient(ellipse at 48% 48%,#e3edff 0,#eff4ff 64%,#fff 100%);z-index:0}
.scene-connection{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.scene-shop,.scene-customer,.scene-merchant{position:absolute;display:block;object-fit:contain;object-position:center bottom;pointer-events:none;user-select:none}
.scene-shop{right:-1.5%;bottom:3%;width:auto;height:94%;z-index:2}
.scene-customer{left:-2%;bottom:6%;width:auto;height:74%;z-index:4}
.scene-merchant{right:.5%;bottom:6%;width:auto;height:76%;z-index:5}
.hero-device{position:absolute;z-index:6;left:34%;top:12%;width:29%;aspect-ratio:402/896;padding:4px;border:2px solid #737c89;border-radius:28px;background:#1c2330;transform:rotate(-5deg);box-shadow:0 24px 36px -15px #243b6738,0 3px 5px #0e173322;display:block;transition:transform .45s var(--motion-ease),box-shadow .45s ease}
.device-screen{display:block;width:100%;height:100%;border-radius:22px;background:#f8f9fb;overflow:hidden}
.device-screen img{display:block;width:100%;height:auto;aspect-ratio:402/874;object-fit:contain}
.device-island{position:absolute;top:3%;left:38%;width:26%;height:3.3%;background:#171d27;border-radius:20px;pointer-events:none}
.scene-status{position:absolute;z-index:8;right:9%;top:0;display:flex;align-items:center;gap:11px;padding:15px 17px;background:#fff;border:1px solid #edf1fa;border-radius:19px;box-shadow:0 12px 30px #5874a410}
.scene-status b,.scene-status small{display:block;white-space:nowrap;line-height:1.5}
.scene-status b{font-size:13px;color:#435976;font-weight:900}
.scene-status small{margin-top:3px;font-size:11px;color:#93a1b6}
.scene-check{display:grid;place-items:center;width:36px;height:45px;border-radius:50%;background:#eafaf1;color:#48b98e;flex-shrink:0}
.scene-check svg{width:21px;height:21px}
.scene-label{position:absolute;bottom:3%;z-index:8;display:flex;align-items:center;gap:8px;min-height:36px;padding:9px 14px;border-radius:99px;border:1px solid #f5f7ff;background:#fff;box-shadow:0 8px 18px #6681ae14;font-size:12px;font-weight:800;line-height:1.4;white-space:nowrap}
.scene-label i{height:6px;width:6px;border-radius:50%;background:#43bfae;flex-shrink:0}
.customer-label{left:7%}.merchant-label{right:3%}.merchant-label i{background:#ffb03a}
.scene-roles{display:flex;align-items:center;justify-content:center;gap:14px;padding:19px 8% 0;font-size:12px;line-height:1.5;color:#889cba}
.scene-roles b{color:var(--blue);font-size:16px;font-weight:900;letter-spacing:-.06em}
.scene-roles i{height:1px;position:relative;flex:1;border-top:1px dashed #b8ccff}
.scene-roles i::after{content:"";position:absolute;height:5px;width:5px;background:#ffb248;border-radius:50%;left:43%;top:-3px}
.scene-caption{margin:24px 0 0;text-align:center;font-size:11px;color:#93a2bb;line-height:1.6}
@supports(width:1cqi){
 .hero-device{padding:.55cqi;border-radius:4.2cqi;border-width:.28cqi}
 .device-screen{border-radius:3.3cqi}
 .scene-status{gap:1.5cqi;padding:2.1cqi 2.4cqi;border-radius:2.7cqi}
 .scene-status b{font-size:clamp(9px,1.9cqi,14px)}
 .scene-status small{font-size:clamp(8px,1.58cqi,12px)}
 .scene-check{width:5.1cqi;height:6.4cqi}.scene-check svg{width:3cqi;height:3cqi}
 .scene-label{font-size:clamp(10px,1.7cqi,13px);padding:1.3cqi 2cqi;min-height:5.1cqi;gap:1.1cqi}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .hero-device:hover{transform:rotate(-3deg) translateY(-6px);box-shadow:0 30px 42px -15px #243b6740}
 .hero-device:active{transform:rotate(-3deg) translateY(-2px)}
}
@media(prefers-reduced-motion:no-preference){
 .scene-status{animation:layer-card-enter .7s .3s both}
 .scene-customer{animation:layer-customer-enter .85s .08s both}
 .scene-merchant{animation:layer-merchant-enter .85s .15s both}
 .scene-label{animation:layer-card-enter .7s .4s both}
}
@keyframes layer-card-enter{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes layer-customer-enter{from{opacity:0;translate:-12px 0}to{opacity:1;translate:0 0}}
@keyframes layer-merchant-enter{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
@media(max-width:1200px) and (min-width:901px){.hero{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-art.hero-composition{max-width:710px;margin:auto}}
@media(max-width:640px){
 .hero-art.hero-composition{width:100%;max-width:520px}
 .hero-scene{border-radius:24px}
 .scene-status{right:4%}
 .scene-label{min-height:27px;padding:7px 10px;gap:5px;font-size:10px}
 .scene-label i{width:4px;height:4px}.customer-label{left:4%}.merchant-label{right:0}
 .scene-roles{padding:14px 4% 0;gap:10px;font-size:10px}.scene-roles b{font-size:14px}
 .scene-caption{margin-top:15px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .hero-composition *{animation:none!important;transition:none!important}
}