/* Home hero, "product screen" version (preview).
   Centred two-part headline, then the real Platform on a large framed screen that rises flat as you scroll,
   lit by two soft blooms (green = the brand's "up", cool blue for balance) over a dotted field.
   A cursor walks the app: India breadth → US breadth → sector performance. Real screenshots only. */

.hx { position: relative; text-align: center; padding: 64px 20px 0; overflow: hidden; isolation: isolate; }
.hx::before { display: none; }

/* dotted field, fading out toward the edges */
.hx-dots { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 62%, #000 30%, transparent 85%);
          mask-image: radial-gradient(70% 60% at 50% 62%, #000 30%, transparent 85%); }

.hx h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.035em; margin: 22px auto 0; max-width: 980px; font-weight: 800; }
.hx .lede { margin-top: 20px; }
.hx .cta-row { margin-top: 28px; }
.hx .lede { max-width: 640px; }

/* ---------- stage ---------- */
.hx-stage { position: relative; max-width: 1180px; margin: 48px auto 0; perspective: 1600px; }
.hx-bloom { position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease) .5s; }
.hx-bloom.l { left: -10%; top: -14%; background: radial-gradient(circle, rgba(48,209,88,.52), rgba(48,209,88,0) 64%); }
.hx-bloom.r { right: -10%; top: -12%; background: radial-gradient(circle, rgba(90,140,255,.42), rgba(90,140,255,0) 64%); }
.hx.in .hx-bloom { opacity: 1; }

.hx-frame { position: relative; transform-origin: 50% 100%;
  transform: translateY(var(--ty, 70px)) rotateX(var(--rx, 16deg)) scale(var(--sc, .96));
  opacity: 0; transition: opacity .9s var(--ease) .25s; will-change: transform; }
.hx.in .hx-frame { opacity: 1; }

.hx-screen { position: relative; padding: 10px; border-radius: 22px; background: #0b0c0e;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 50px 120px -30px rgba(0,0,0,.9), 0 30px 80px -40px rgba(48,209,88,.25); }
/* rim light: a hairline of light along the top edge, brightest at the centre */
.hx-screen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.06) 18%, transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.hx-view { position: relative; aspect-ratio: 16 / 10; border-radius: 13px; overflow: hidden; background: #0d0f12; }
.hx-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left;
  opacity: 0; transition: opacity .55s var(--ease); }
.hx-view img.on { opacity: 1; }

/* the fold cuts the screen: fade its lower part into the page */
.hx-fade { position: absolute; left: -2%; right: -2%; bottom: -1px; height: 32%; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,6,0), var(--bg) 92%); }

/* ---------- cursor ---------- */
.hx-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 3; pointer-events: none;
  transform: translate(var(--cx, 60%), var(--cy, 40%)); transition: transform 1.1s cubic-bezier(.45, .05, .2, 1); }
.hx-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.hx-cursor .ring { position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9); opacity: 0; transform: scale(.4); }
.hx-cursor.click .ring { animation: hx-click .5s var(--ease); }
.hx-cursor.click svg { transform: scale(.86); transition: transform .12s; }
@keyframes hx-click { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- what you're looking at ---------- */
.hx-steps { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: -64px auto 0; padding-bottom: 40px; }
.hx-steps button { all: unset; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--dim);
  padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: rgba(12,13,15,.7);
  backdrop-filter: blur(8px); transition: color .3s, box-shadow .3s; }
.hx-steps button[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.hx-steps button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 720px) {
  .hx { padding-top: 64px; }
  .hx-stage { margin-top: 44px; }
  .hx-screen { padding: 6px; border-radius: 14px; }
  .hx-view { border-radius: 9px; }
  .hx-cursor { display: none; }
  .hx-steps { margin-top: -28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-frame { --ty: 0px !important; --rx: 0deg !important; --sc: 1 !important; opacity: 1; transition: none; }
  .hx-bloom { opacity: 1; transition: none; }
  .hx-cursor { display: none; }
}