/* Tangible product illustrations: CSS perspective, extruded edges and local assets. */
body.landing .hero-grid { grid-template-columns: 1.06fr 1fr; gap: 36px; }
.product-scene { min-width: 0; width: 100%; margin: 0; color: #17243d; }
.scene-space { position: relative; width: 100%; aspect-ratio: 1.05; container-type: inline-size; perspective: 1100px; isolation: isolate; }
.scene-world, .flow-world { position: absolute; inset: 0; transform-style: preserve-3d; }
.scene-phone { position: absolute; left: 32%; top: 5%; width: 43%; height: 81%; border-radius: 7cqw; background: linear-gradient(125deg,#f5f7fc 5%,#a6b0c3 48%,#e4e9f4 70%); padding: 1.5cqw; transform: rotateX(0deg) rotateY(-8deg) rotateZ(-1deg); transform-style: preserve-3d; box-shadow: 1px 1px 0 #fff inset, 2px 2px 0 #8896ac, 4px 4px 0 #afbdd1, 6px 6px 0 #c2ccdc, 8px 8px 0 #98a7bc, 20px 26px 30px -18px #2b416655; }
.scene-phone::before { content: ''; position: absolute; right: -4px; top: 24%; width: 4px; height: 14%; background: #8b9bb3; border-radius: 2px; }
.phone-screen { position: relative; height: 100%; padding: 3cqw 3cqw; background: linear-gradient(145deg,#fff 50%,#edf2ff); border: 1px solid #d5ddeb; border-radius: 5.8cqw; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.phone-island { position: absolute; left: 34%; top: 2cqw; width: 32%; height: 2.5cqw; border-radius: 20px; background: #273245; }
.phone-topline { display: flex; justify-content: space-between; width: 100%; font-size: 1.6cqw; font-weight: 600; padding: 0 .5cqw; }
.phone-brand { font-size: 4.6cqw; font-weight: 650; letter-spacing: -.15cqw; margin: 5.5cqw 0 2cqw; }
.phone-brand > span { color: #1d49ff; }
.phone-caption { font-size: 1.9cqw; color: #73809a; }
.phone-amount { font-size: 6.3cqw; line-height: 1.4; font-weight: 600; letter-spacing: -.3cqw; margin: 1cqw 0 2.5cqw; }
.phone-amount > span { font-size: 4.4cqw; font-weight: 400; }
.phone-qr { width: 72%; position: relative; padding: 1.5cqw; border: 1px solid #d9e3ff; border-radius: 2cqw; background: white; }
.phone-qr img { display: block; width: 100%; height: auto; }
.qr-scan { position: absolute; top: 12%; left: 5%; width: 90%; height: 2px; background: #1d49ff; box-shadow: 0 -5px 12px #1d49ff88; }
.phone-instruction { margin-top: 2.4cqw; font-size: 1.65cqw; color: #74819b; white-space: nowrap; }
.phone-paybar { width: 100%; display: flex; justify-content: space-between; padding: 2.4cqw 2cqw; margin-top: auto; border-radius: 2cqw; background: #1d49ff; color: white; font-size: 2cqw; }
.phone-home { width: 36%; height: .6cqw; border-radius: 5px; background: #273245; margin-top: 2.5cqw; }
.scene-qr-stand { position: absolute; left: 4%; top: 35%; width: 30%; padding: 3cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqw; background: #fff; border: 1px solid #e6ebf4; border-radius: 2.8cqw; transform: rotateX(0deg) rotateY(-8deg) rotateZ(-1deg) translateZ(45px); box-shadow: 2px 3px 0 #ccd6e8, 4px 6px 0 #dfe6f2, 10px 22px 30px -15px #314b8255; }
.stand-brand { font-size: 3.3cqw; font-weight: 650; color: #1d49ff; align-self: flex-start; }
.scene-qr-stand img { width: 100%; height: auto; }
.scene-qr-stand > span:last-child { font-size: 1.7cqw; color: #66738a; }
.scene-coin { position: absolute; right: 4%; top: 12%; width: 14cqw; height: 14cqw; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,#7191ff,#1d49ff 60%,#1331bd); color: white; border: 1px solid #91a8ff; transform: rotateY(-18deg) rotateX(0deg) rotateZ(3deg); box-shadow: 1px 1px 0 #1d49ff, 3px 2px 0 #2341c2, 5px 3px 0 #1c35a6, 7px 4px 0 #2847bc, 10px 15px 22px -10px #1d49ff55; }
.scene-coin > span { display: grid; place-items: center; width: 81%; height: 81%; border: 1px solid #a7bbff77; border-radius: 50%; font-size: 7cqw; font-weight: 550; text-shadow: 1px 2px #152fa9; }
.scene-confirmation { position: absolute; right: 4%; bottom: 10%; display: flex; align-items: center; gap: 2.4cqw; padding: 3cqw 4cqw 3cqw 3cqw; border: 1px solid #e0e7f4; border-radius: 3cqw; background: #fff; transform: rotateY(-3deg) rotateX(0deg) translateZ(65px); box-shadow: 2px 3px 0 #dbe3f2, 4px 5px 0 #edf1f8, 0 22px 32px -19px #34518466; }
.scene-check { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: #1d49ff; color: white; font-size: 3.6cqw; }
.scene-confirmation strong { display: block; font-size: 2.6cqw; font-weight: 550; }
.scene-confirmation div > span { display: block; margin-top: .7cqw; font-size: 2cqw; color: #73809a; }
.scene-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 4%; font-size: 12px; color: #73809a; }
.scene-footer a { color: #526079; text-decoration: none; }
.scene-footer a:hover { color: #1d49ff; }
.scene-footer a > span { margin-left: 12px; }
.scene-toggle { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e3e8f0; color: #66738a; background: #fff; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; }
.scene-toggle:hover { color: #1d49ff; border-color: #aebff6; }
body.landing #features .features-visual-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; }
body.landing #features .features-grid { grid-template-columns: 1fr; gap: 0; }
body.landing #features .card-feature { padding: 22px 0; }
.flow-scene .scene-space { aspect-ratio: 1.2; }
.flow-world { transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg); }
.flow-track { position: absolute; left: 18%; top: 46%; width: 67%; height: 4px; background: #b6c8ff; transform: translateZ(8px); }
.flow-pulse { display: block; position: absolute; top: -3px; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #1d49ff; box-shadow: 0 0 0 5px #1d49ff1a; }
.flow-document { position: absolute; width: 30%; height: 49%; left: 0; top: 23%; padding: 3cqw; border-radius: 2cqw; background: #fff; border: 1px solid #e0e7f6; transform: translateZ(34px); box-shadow: 2px 3px 0 #d4dff4, 4px 6px 0 #edf2fd, 0 14px 24px -10px #365eaa44; }
.flow-document-label { display: block; font-size: 1.7cqw; color: #7b88a1; letter-spacing: .15cqw; }
.flow-document strong { display: block; font-size: 4cqw; font-weight: 550; margin: 3cqw 0 4cqw; }
.document-line { display: block; height: .8cqw; width: 95%; background: #e8edf6; margin-bottom: 1.4cqw; border-radius: 4px; }
.document-line.short { width: 64%; }
.document-stamp { position: absolute; bottom: 3cqw; right: 3cqw; width: 6cqw; height: 6cqw; border: 1px solid #aabcff; color: #1d49ff; border-radius: 50%; display: grid; place-items: center; font-size: 3.5cqw; }
.flow-processor { position: absolute; left: 36%; top: 38%; width: 18%; aspect-ratio: 1; border-radius: 3.6cqw; background: #1d49ff; display: grid; place-items: center; transform: translateZ(48px); box-shadow: 1px 2px 0 #133ce9, 3px 5px 0 #1236c4, 5px 8px 0 #2348e6, 12px 25px 28px -16px #1d49ff77; }
.flow-processor img { width: 100%; height: 100%; border-radius: inherit; }
.flow-ledger { position: absolute; right: 0; top: 22%; width: 39%; padding: 3cqw; background: #fff; border: 1px solid #dbe4f6; border-radius: 2.8cqw; transform: translateZ(70px); box-shadow: 2px 3px 0 #d0dcf0, 4px 6px 0 #e4eafa, 0 22px 30px -18px #365eaa55; }
.ledger-heading { display: flex; justify-content: space-between; font-size: 2.9cqw; margin-bottom: 3cqw; }
.ledger-heading strong { font-weight: 550; }
.ledger-heading > span { color: #1d49ff; }
.ledger-row { display: flex; align-items: center; gap: 1cqw; padding: 2cqw 0; border-top: 1px solid #edf1f7; font-size: 2cqw; white-space: nowrap; }
.ledger-row > span:first-child { color: #7b88a1; margin-right: auto; }
.ledger-row i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #1d49ff; }
.ledger-new { color: #1d49ff; }
.ledger-total { display: block; font-size: 1.7cqw; color: #7b88a1; margin-top: 2cqw; }
@media (max-width: 1000px) {
  body.landing .hero-grid { gap: 16px; }
  body.landing #features .features-visual-layout { gap: 32px; }
}
@media (max-width: 800px) {
  body.landing .hero-grid { grid-template-columns: 1fr; }
  .hero-scene { max-width: 560px; margin: 12px auto 0; }
  body.landing #features .features-visual-layout { grid-template-columns: 1fr; gap: 28px; }
  .flow-scene { max-width: 560px; margin: 0 auto; }
  body.landing #features .features-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
}
@media (max-width: 480px) {
  body.landing .hero { padding-bottom: 28px; }
  .scene-footer { font-size: 11px; padding: 0; }
  body.landing #features .features-grid { grid-template-columns: 1fr; }
  .scene-space { perspective: 900px; }
}
/* Keep the extruded objects in separate compositing layers so surfaces never intersect. */
.scene-world { transform-style: flat; perspective: 1100px; }
.scene-phone { z-index: 2; }
.scene-qr-stand { z-index: 3; }
.scene-coin { z-index: 1; }
.scene-confirmation { z-index: 4; }
.flow-world { inset: 5%; }
@media (min-width: 801px) {
  body.landing .hero-title { font-size: clamp(42px,4.05vw,58px); letter-spacing: -2px; }
}
/* The live-test launcher and its illustrative payment/refund cycle share one row. */
body.landing #demo > .container { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); column-gap: 70px; align-items: center; }
body.landing #demo .demo-heading { grid-column: 1; grid-row: 1; margin: 0; align-self: end; }
body.landing #demo .demo-heading h2 { margin-bottom: 16px; }
body.landing #demo .demo-heading p { margin-bottom: 0; }
body.landing #demo .demo-workspace { display: contents; }
body.landing #demo .demo-entry { grid-column: 1; grid-row: 2; padding: 0; align-self: start; }
body.landing #demo .demo-launch-list { margin: 24px 0; }
body.landing #demo .demo-safety-note { margin-bottom: 0; }
.sandbox-scene { grid-column: 2; grid-row: 1 / span 2; }
.sandbox-scene .scene-space { aspect-ratio: 1.2; perspective: 1100px; }
.sandbox-orbit { position: absolute; left: 14%; top: 14%; width: 72%; height: 78%; border: 2px solid #dce5fd; border-bottom-color: #7694ef; border-right-color: #a1b8ff; border-radius: 50%; transform: rotateX(8deg) rotateZ(-8deg); }
.sandbox-orbit > span { position: absolute; bottom: -3cqw; right: 8%; font-size: 8cqw; color: #7694ef; transform: rotate(-20deg); }
.sandbox-receipt { position: absolute; left: 29%; top: 7%; width: 47%; height: 78%; padding: 4cqw; background: #fff; border: 1px solid #e1e8f4; border-radius: 3cqw; transform: rotateX(0deg) rotateY(-6deg) rotateZ(-1deg); box-shadow: 2px 3px 0 #ccd8ec, 4px 6px 0 #e4eaf6, 6px 9px 0 #d7e0f0, 16px 28px 36px -18px #334f8250; }
.sandbox-brand { font-size: 4.2cqw; font-weight: 650; letter-spacing: -.15cqw; }
.sandbox-brand > span { color: #1d49ff; }
.sandbox-brand small { display: block; margin-top: 1cqw; color: #7b879a; font-size: 1.5cqw; letter-spacing: .16cqw; font-weight: 400; }
.sandbox-symbol { display: grid; place-items: center; width: 7cqw; height: 7cqw; margin: 4cqw auto 2cqw; color: #1d49ff; background: #eef3ff; border-radius: 50%; font-size: 4cqw; }
.sandbox-amount { display: block; font-size: 11cqw; line-height: 1.1; font-weight: 550; text-align: center; letter-spacing: -.5cqw; }
.sandbox-amount > span { font-size: 7cqw; font-weight: 400; }
.sandbox-status { position: relative; height: 6cqw; margin: 2cqw 0; text-align: center; color: #1d49ff; font-size: 2.3cqw; }
.sandbox-status > span { position: absolute; inset: 0; }
.sandbox-refunded { opacity: 0; }
.sandbox-detail { display: flex; justify-content: space-between; padding: 2cqw 0; border-top: 1px solid #edf1f7; font-size: 1.8cqw; }
.sandbox-detail > span:first-child { color: #7b879a; }
.sandbox-receipt-bottom { position: absolute; bottom: 2.6cqw; left: 4cqw; right: 4cqw; display: flex; justify-content: space-between; }
.sandbox-receipt-bottom > span { width: 2.3cqw; height: .55cqw; background: #e4eaf5; border-radius: 4px; }
.sandbox-token { position: absolute; left: 7%; top: 45%; width: 17cqw; height: 17cqw; border-radius: 50%; background: linear-gradient(140deg,#84a0ff,#1d49ff 65%,#193cc9); padding: 1.4cqw; color: #fff; transform: rotateY(-16deg) rotateZ(-2deg); box-shadow: 2px 2px 0 #1f3dc0, 4px 4px 0 #3251d0, 6px 6px 0 #1731a4, 12px 20px 26px -13px #1d49ff55; }
.sandbox-token > span { display: flex; align-items: baseline; justify-content: center; padding-top: 2.1cqw; height: 100%; border: 1px solid #ffffff66; border-radius: 50%; font-size: 6cqw; font-weight: 550; }
.sandbox-token small { font-size: 3cqw; margin-left: .5cqw; }
.sandbox-return { position: absolute; right: 3%; bottom: 8%; display: flex; align-items: center; gap: 2cqw; padding: 2.7cqw 3cqw; border-radius: 2.6cqw; background: #fff; border: 1px solid #dee6f6; box-shadow: 2px 3px 0 #dce4f3, 4px 6px 0 #edf1f8, 0 15px 28px -18px #334f8277; transform: rotateY(-3deg) rotateZ(0deg); }
.sandbox-return > span { display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 50%; background: #1d49ff; color: #fff; font-size: 4cqw; }
.sandbox-return strong { display: block; font-size: 2.6cqw; font-weight: 550; }
.sandbox-return small { display: block; margin-top: .7cqw; font-size: 1.8cqw; color: #7b879a; }
/* Connection illustration is paired with the three actual onboarding steps. */
body.landing #how .setup-layout { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 28px 64px; align-items: center; }
body.landing #how .setup-heading { grid-column: 1 / -1; padding: 0; }
body.landing #how .setup-heading h2 { margin-bottom: 0; font-size: clamp(32px,3.3vw,44px); }
body.landing #how .setup-steps li { padding-bottom: 24px; gap: 16px; grid-template-columns: 28px minmax(0,1fr); }
body.landing #how .setup-steps h3 { margin-top: 0; margin-bottom: 7px; }
body.landing #how .setup-index { width: 28px; height: 28px; justify-content: start; }
body.landing #how .setup-actions { padding: 0 0 0 44px; margin-top: 8px; }
.connect-scene .scene-space { aspect-ratio: 1.65; }
.connect-world { position: absolute; inset: 6% 5%; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(-6deg) rotateZ(0deg); }
.connect-cable { position: absolute; left: 24%; top: 46%; width: 54%; height: 4cqw; border-radius: 2cqw; background: linear-gradient(#e3e9f5,#fff 40%,#a7b9da); box-shadow: 1px 4px 0 #b9c9e3; transform: translateZ(20px); }
.connect-fastpay { position: absolute; left: 8%; top: 20%; width: 24%; aspect-ratio: 1; transform: translateZ(36px); border-radius: 4cqw; box-shadow: 2px 3px 0 #153ac7, 4px 7px 0 #264cde, 10px 20px 22px -13px #1d49ff55; }
.connect-fastpay img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.connect-plug { position: absolute; left: 37%; top: 35%; width: 16%; height: 26%; border-radius: 2.5cqw; background: linear-gradient(140deg,#fff,#edf2fc); border: 1px solid #d3def2; box-shadow: 2px 4px 0 #c6d4ec; transform: translateZ(26px); }
.connect-plug i { position: absolute; right: -3cqw; top: 23%; width: 3cqw; height: 1.2cqw; background: #8eabdf; box-shadow: 0 2px 0 #637da6; }
.connect-plug i:last-child { top: 65%; }
.connect-bank { position: absolute; right: 3%; top: 19%; width: 36%; height: 52%; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding: 4cqw; border: 1px solid #dce4f1; border-radius: 3.5cqw; background: #fff; transform: translateZ(38px); box-shadow: 2px 3px 0 #c7d4e9, 4px 6px 0 #e1e8f5, 10px 20px 24px -16px #334f8266; }
.connect-bank img { width: 100%; height: auto; }
.connect-bank > span { font-size: 1.7cqw; color: #7b879a; text-align: center; }
.connect-complete { position: absolute; left: 30%; bottom: 1%; padding: 2.2cqw 3cqw; display: flex; align-items: center; gap: 1.8cqw; border-radius: 2.5cqw; background: #fff; border: 1px solid #dee6f5; color: #526079; font-size: 2.2cqw; box-shadow: 2px 3px 0 #e1e8f5; transform: translateZ(48px); white-space: nowrap; }
.connect-complete > span { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; background: #1d49ff; color: white; font-size: 2.5cqw; }
@media(max-width:1000px) {
  body.landing #demo > .container { column-gap: 32px; }
  body.landing #how .setup-layout { column-gap: 32px; }
}
@media(max-width:760px) {
  body.landing #demo > .container { grid-template-columns: minmax(0,1fr); gap: 24px; }
  body.landing #demo .demo-heading { grid-row: 1; }
  body.landing #demo .demo-entry { grid-row: 3; }
  body.landing #demo .demo-launch-list { margin-top: 0; }
  .sandbox-scene { grid-column: 1; grid-row: 2; max-width: 540px; margin: 0 auto; }
  body.landing #how .setup-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .connect-scene { max-width: 540px; margin: 0 auto; }
  body.landing #how .setup-guide { padding-top: 8px; }
}
.sandbox-orbit { z-index: 0; }
.sandbox-receipt { z-index: 1; }
.sandbox-token { z-index: 2; }
.sandbox-return { z-index: 3; }