/* Lightweight 3D depth treatment; no WebGL, third-party assets, or device sensors. */
.hero-scene {
  perspective: 1350px;
  perspective-origin: 50% 46%;
  transform-style: preserve-3d;
  isolation: isolate;
}

.hero-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(520px, 88%);
  height: 72px;
  left: 6%;
  bottom: 36px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(28, 69, 47, .22), rgba(28, 69, 47, 0) 72%);
  transform: rotateX(68deg) rotateZ(-5deg) translateZ(-55px);
  pointer-events: none;
}

.hero-scene .hero-orbit {
  transform-style: preserve-3d;
  pointer-events: none;
}

.hero-scene .orbit-one {
  transform: rotateX(67deg) rotateY(-12deg) rotateZ(-17deg) translateZ(-58px);
}

.hero-scene .orbit-two {
  transform: rotateX(61deg) rotateY(13deg) rotateZ(21deg) translateZ(-92px);
}

.scene-platform {
  position: absolute;
  z-index: 0;
  left: 8%;
  bottom: 38px;
  width: 82%;
  height: 36px;
  border: 1px solid rgba(66, 108, 75, .12);
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(227, 236, 220, .18), rgba(255, 255, 255, .68), rgba(222, 234, 218, .22));
  box-shadow: 0 22px 30px rgba(35, 62, 44, .08);
  transform: rotateX(72deg) rotateZ(-2deg) translateZ(-25px);
  pointer-events: none;
}

.mini-dashboard {
  z-index: 1;
  transform: translate3d(-3px, 0, 22px) rotateY(-13deg) rotateX(6deg) rotateZ(-1deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 850ms cubic-bezier(.2, .72, .2, 1), box-shadow 850ms cubic-bezier(.2, .72, .2, 1);
  box-shadow: 20px 34px 78px rgba(27, 58, 38, .19), 0 2px 4px rgba(27, 58, 38, .04);
}

.mini-dashboard::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 12px;
  right: 12px;
  bottom: -12px;
  height: 15px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(90deg, #d6e1d4, #f5f7f2 42%, #d4e0d1);
  transform: rotateX(-78deg) translateZ(-1px);
  transform-origin: top;
  pointer-events: none;
}

.hero-note {
  transform: translateZ(72px);
  backface-visibility: hidden;
}

.note-top {
  transform: translate3d(0, 0, 80px) rotateY(-7deg);
}

.note-bottom {
  transform: translate3d(0, 0, 65px) rotateY(8deg);
}

.scene-coin {
  position: absolute;
  z-index: 3;
  top: -2%;
  right: 2%;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  color: #fffdf5;
  background: radial-gradient(circle at 34% 28%, #95bc8b 0, #4d8664 40%, #1d674b 76%);
  box-shadow: inset -8px -9px 15px rgba(11, 52, 34, .27), inset 3px 3px 8px rgba(255, 255, 255, .48), 0 18px 35px rgba(29, 76, 48, .24);
  transform: translateZ(96px) rotateY(-16deg) rotateX(14deg);
  animation: coin-float 7s ease-in-out infinite;
  pointer-events: none;
}

.scene-coin::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(243, 250, 224, .55);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(243, 250, 224, .1);
}

.scene-coin::after {
  content: "";
  position: absolute;
  inset: 3px -4px 3px 4px;
  border-right: 2px solid rgba(29, 89, 58, .58);
  border-radius: 50%;
  transform: rotateY(35deg);
}

.scene-coin span {
  position: relative;
  z-index: 1;
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(18, 61, 38, .32);
  transform: translateZ(6px);
}

.bar-fill-bank { width: 52%; }
.bar-fill-upi { width: 34%; }
.progress-fill-83 { width: 83%; }

.source-card,
.story-card,
.demo-app,
.gst-sheet {
  transform-style: preserve-3d;
  transition: transform 350ms ease, box-shadow 350ms ease;
}

.demo-app {
  transform: perspective(1800px) rotateX(1.2deg);
  transform-origin: center top;
}

@media (hover: hover) and (pointer: fine) {
  .hero-scene:hover .mini-dashboard,
  .hero-scene:focus-within .mini-dashboard {
    transform: translate3d(-1px, -4px, 48px) rotateY(-5deg) rotateX(3deg) rotateZ(-.4deg);
    box-shadow: 13px 45px 92px rgba(27, 58, 38, .21), 0 3px 7px rgba(27, 58, 38, .06);
  }

  .hero-scene:hover .scene-coin,
  .hero-scene:focus-within .scene-coin {
    animation-play-state: paused;
    transform: translate3d(-4px, -7px, 112px) rotateY(12deg) rotateX(8deg);
  }

  .source-card:hover,
  .source-card:focus-within,
  .story-card:hover,
  .story-card:focus-within {
    transform: perspective(800px) translate3d(0, -5px, 8px) rotateX(1.5deg) rotateY(-1deg);
    box-shadow: 0 18px 38px rgba(36, 62, 44, .11);
  }

  .demo-app:hover {
    transform: perspective(1800px) translateY(-3px) rotateX(0deg);
    box-shadow: 0 30px 98px rgba(0, 0, 0, .25);
  }
}

@keyframes coin-float {
  0%, 100% { transform: translate3d(0, 0, 96px) rotateY(-16deg) rotateX(14deg); }
  50% { transform: translate3d(0, -9px, 105px) rotateY(12deg) rotateX(9deg); }
}

@media (max-width: 900px) {
  .mini-dashboard {
    transform: translate3d(0, 0, 16px) rotateY(-8deg) rotateX(4deg) rotateZ(-.6deg);
  }
  .scene-platform { left: 4%; width: 90%; }
  .scene-coin { right: 2%; top: -2%; width: 58px; height: 58px; }
}

@media (max-width: 580px) {
  .hero-scene { perspective: 1050px; perspective-origin: 50% 48%; }
  .mini-dashboard {
    transform: translate3d(0, 0, 10px) rotateY(-4deg) rotateX(2.5deg) rotateZ(-.25deg);
  }
  .mini-dashboard::after { bottom: -8px; height: 10px; }
  .scene-platform { bottom: 29px; height: 28px; transform: rotateX(72deg) rotateZ(-2deg) translateZ(-15px); }
  .scene-coin { display: none; }
  .scene-coin::before { inset: 5px; }
  .scene-coin span { font-size: 18px; }
  .note-top { transform: translate3d(0, 0, 35px) rotateY(-4deg); }
  .note-bottom { transform: translate3d(0, 0, 30px) rotateY(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-coin { animation: none; }
  .mini-dashboard,
  .source-card,
  .story-card,
  .demo-app,
  .gst-sheet { transition: none; }
}