.conversion-hero {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative;
  height: 220vh;
  color: #fff;
  background: #070b14;
  isolation: isolate;
}

.conversion-hero__sticky {
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  min-height: 650px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  padding: 4vh 6vw;
}

.conversion-hero__ambient {
  position: absolute;
  inset: -5%;
  z-index: -3;
  background:
    radial-gradient(circle at 71% 44%, rgba(91, 104, 238, 0.2), transparent 33%),
    radial-gradient(circle at 55% 62%, rgba(50, 194, 151, 0.08), transparent 29%),
    linear-gradient(145deg, #080c16, #0a1020 55%, #0d1424);
  will-change: transform;
}

.conversion-hero__ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(142, 153, 192, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 153, 192, 0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 70% 50%, #000, transparent 66%);
  transform: perspective(700px) rotateX(58deg) translateY(120px);
  transform-origin: center;
}

.conversion-hero__ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 11, 20, 0.86) 0%, transparent 48%, rgba(7, 11, 20, 0.12) 100%);
}

.conversion-hero__orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.45;
  animation: orb-drift 9s var(--ease-in-out) infinite alternate;
}

.conversion-hero__orb.o1 { width: 4px; height: 4px; left: 12%; top: 18%; background: #8fa1ff; }
.conversion-hero__orb.o2 { width: 6px; height: 6px; right: 12%; top: 25%; background: #62dcb4; animation-delay: -3s; }
.conversion-hero__orb.o3 { width: 3px; height: 3px; left: 44%; bottom: 18%; background: #fff; animation-delay: -6s; }

.conversion-copy {
  position: relative;
  z-index: 3;
  max-width: 620px;
}

.conversion-copy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid rgba(143, 155, 194, 0.24);
  border-radius: 99px;
  color: #b6bfd8;
  background: rgba(16, 23, 41, 0.7);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.conversion-copy__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #71e0b8;
  box-shadow: 0 0 0 4px rgba(113, 224, 184, 0.1), 0 0 13px rgba(113, 224, 184, 0.5);
}

.conversion-copy h1 {
  max-width: 680px;
  margin: 24px 0 20px;
  color: #f8f9ff;
  text-align: left;
  font-size: clamp(45px, 5.1vw, 76px);
  line-height: 1.01;
}

.conversion-copy h1 em {
  background: linear-gradient(100deg, #909cff, #ae8cff 52%, #7cddbc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.conversion-copy > p {
  max-width: 590px;
  color: #aeb7cd;
  font-size: 17px;
  line-height: 1.7;
}

.conversion-copy .actions { justify-content: flex-start; }
.conversion-copy .button.secondary { color: #e9ecf8; background: rgba(255, 255, 255, 0.055); border-color: rgba(166, 178, 210, 0.25); }

.conversion-copy__proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #7f8aa5;
  font-size: 11px;
}

.conversion-copy__proof b { color: #c2cadf; }

.conversion-scene {
  position: relative;
  height: min(690px, 76vh);
  perspective: 1100px;
  transform-style: preserve-3d;
}

.conversion-scene::before,
.conversion-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.conversion-scene::before {
  width: 420px;
  height: 420px;
  margin: -210px;
  border: 1px solid rgba(131, 145, 191, 0.08);
  box-shadow: inset 0 0 90px rgba(89, 103, 241, 0.035);
}

.conversion-scene::after {
  width: 265px;
  height: 265px;
  margin: -132px;
  border: 1px dashed rgba(117, 214, 181, 0.09);
}

.conversion-scene__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.currency-token {
  position: absolute;
  left: 0;
  top: 0;
  width: 108px;
  height: 108px;
  margin: -54px;
  opacity: 1;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.coin-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.35) 0 2%, transparent 14%),
    radial-gradient(circle at 47% 43%, var(--coin-face-light), var(--coin-face) 56%, var(--coin-shadow) 100%);
  box-shadow:
    0 21px 44px rgba(0, 0, 0, 0.46),
    0 0 30px var(--coin-glow),
    inset 0 1px 1px rgba(255, 255, 255, 0.36),
    inset 0 -11px 20px rgba(0, 0, 0, 0.44),
    inset 0 0 0 5px rgba(255, 255, 255, 0.055);
  transform-style: preserve-3d;
  animation: coin-breathe var(--float-duration, 6.8s) var(--ease-in-out) infinite alternate;
}

.coin-shell::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--coin-accent);
  border-radius: 50%;
  opacity: 0.58;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.coin-shell::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.26) 46%, transparent 58%);
  transform: translate3d(-34%, -12%, 8px);
  opacity: 0.72;
}

.currency-token[data-code="USD"] .coin-shell { --float-duration: 7.2s; animation-delay: -1.2s; }
.currency-token[data-code="EUR"] .coin-shell { --float-duration: 7.8s; animation-delay: -3.1s; }
.currency-token[data-code="JPY"] .coin-shell { --float-duration: 6.5s; animation-delay: -4.6s; }
.currency-token[data-code="KRW"] .coin-shell { --float-duration: 7.5s; animation-delay: -2.2s; }
.currency-token[data-code="AED"] .coin-shell { --float-duration: 6.9s; animation-delay: -5.4s; }

.coin-shell__symbol {
  position: relative;
  z-index: 2;
  color: var(--coin-ink);
  font: 700 38px Manrope;
  text-shadow: 0 1px rgba(255, 255, 255, 0.24), 0 -2px 5px rgba(0, 0, 0, 0.4);
  transform: translate3d(0, -3px, 13px);
}

.coin-shell__code {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  color: var(--coin-ink);
  opacity: 0.68;
  font: 800 8px Manrope;
  letter-spacing: 0.17em;
  transform: translateZ(10px);
}

.currency-token[data-code="USD"] { --coin-face-light:#dec58d; --coin-face:#9a7742; --coin-shadow:#49351f; --coin-accent:#f2d89c; --coin-ink:#fff4d8; --coin-glow:rgba(198,153,76,.18); }
.currency-token[data-code="EUR"] { --coin-face-light:#c8d0df; --coin-face:#778397; --coin-shadow:#343c4b; --coin-accent:#c7d5ff; --coin-ink:#f1f4ff; --coin-glow:rgba(130,151,220,.18); }
.currency-token[data-code="JPY"] { --coin-face-light:#d5c9cb; --coin-face:#917b80; --coin-shadow:#45383b; --coin-accent:#f1cdd1; --coin-ink:#fff2f3; --coin-glow:rgba(208,137,148,.16); }
.currency-token[data-code="KRW"] { --coin-face-light:#bad0d2; --coin-face:#68898f; --coin-shadow:#2d464b; --coin-accent:#bcebef; --coin-ink:#effdff; --coin-glow:rgba(92,184,198,.16); }
.currency-token[data-code="AED"] { --coin-face-light:#bcd0c2; --coin-face:#698774; --coin-shadow:#2d4435; --coin-accent:#c4efd1; --coin-ink:#f0fff4; --coin-glow:rgba(102,188,133,.16); }

.currency-trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 1px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(112, 223, 185, 0.7), rgba(133, 146, 255, 0.25) 48%, transparent);
  will-change: transform, opacity;
}

.currency-trail::after {
  content: "";
  position: absolute;
  left: 26%;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e1e5ff;
  box-shadow: 54px 0 #80d8ba, 112px 0 #8290ed;
  animation: trail-flow 2.1s linear infinite;
}

.inr-token {
  position: absolute;
  left: 0;
  top: 0;
  width: 202px;
  height: 202px;
  margin: -101px;
  opacity: 0;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.inr-token__halo {
  position: absolute;
  inset: -58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 211, 170, 0.2), rgba(89, 104, 255, 0.08) 44%, transparent 68%);
  opacity: 0.74;
  animation: halo-breathe 4s var(--ease-in-out) infinite alternate;
}

.inr-token__ring {
  position: absolute;
  inset: -20px;
  border: 1px solid rgba(151, 165, 236, 0.42);
  border-left-color: transparent;
  border-right-color: rgba(102, 221, 181, 0.72);
  border-radius: 50%;
  animation: ring-spin 14s linear infinite;
}

.inr-token__coin {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(218, 255, 241, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 21%, rgba(255,255,255,.6) 0 2%, transparent 14%),
    radial-gradient(circle at 48% 43%, #a5e8ce, #3aa67e 54%, #14563f 100%);
  box-shadow:
    0 30px 72px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(91, 211, 170, 0.34),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -22px 30px rgba(8, 61, 42, 0.55),
    inset 0 0 0 8px rgba(255, 255, 255, 0.08);
}

.inr-token__coin::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(227, 255, 245, 0.62);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(7, 77, 52, 0.15);
}

.inr-token__coin::after {
  content: "";
  position: absolute;
  inset: -15%;
  background: linear-gradient(112deg, transparent 35%, rgba(255,255,255,.3) 47%, transparent 58%);
  transform: translate3d(-32%, -14%, 8px);
}

.inr-token__symbol {
  position: relative;
  z-index: 2;
  color: #0f513b;
  font: 800 82px Manrope;
  text-shadow: 0 2px rgba(255,255,255,.48), 0 -3px 8px rgba(4,61,42,.34);
  transform: translate3d(0, -8px, 22px);
}

.inr-token__meta {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -51px;
  display: grid;
  gap: 2px;
  width: max-content;
  padding: 8px 12px;
  border: 1px solid rgba(157, 229, 205, 0.24);
  border-radius: 8px;
  color: #d9f9ed;
  background: rgba(8, 25, 22, 0.76);
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.inr-token__meta b { font: 700 13px Manrope; }
.inr-token__meta small { color: #76c7ab; font-size: 7px; font-weight: 800; letter-spacing: .14em; }

.conversion-scene__label {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid rgba(142, 154, 191, 0.23);
  border-radius: 99px;
  color: #aeb8d1;
  background: rgba(13, 20, 36, 0.75);
  white-space: nowrap;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.conversion-scene__label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7888ef;
  box-shadow: 0 0 12px rgba(120, 136, 239, .8);
  transition: background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.conversion-hero[data-phase="inr"] .conversion-scene__label i {
  background: #6ed5b2;
  box-shadow: 0 0 12px rgba(110, 213, 178, .8);
}

.conversion-progress {
  position: absolute;
  left: 6vw;
  right: 6vw;
  bottom: 22px;
  height: 1px;
  background: rgba(255,255,255,.08);
}

.conversion-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #6fd9b5, #7d89ef);
  box-shadow: 0 0 8px rgba(125, 137, 239, .62);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.conversion-progress span {
  position: absolute;
  right: 0;
  bottom: 10px;
  color: #69758e;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

@keyframes coin-breathe {
  from { transform: translate3d(0, -3px, 0) rotateX(2deg) rotateY(-3deg); }
  to { transform: translate3d(0, 4px, 0) rotateX(-2deg) rotateY(3deg); }
}

@keyframes orb-drift {
  to { transform: translate3d(22px, -16px, 0); opacity: .78; }
}

@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes halo-breathe { to { transform: scale(1.04); opacity: .58; } }
@keyframes trail-flow { to { transform: translateX(38px); } }

@media (max-width: 1000px) {
  .conversion-hero__sticky { grid-template-columns: .9fr 1.1fr; padding-inline: 4vw; }
  .conversion-copy h1 { font-size: clamp(42px, 5.6vw, 62px); }
  .conversion-scene { margin-inline: -50px; transform: scale(.84); }
  .conversion-copy > p { font-size: 15px; }
}

@media (max-width: 719px) {
  .conversion-hero { height: 175vh; }
  .conversion-hero__sticky { top: 64px; height: calc(100vh - 64px); min-height: 650px; display: flex; flex-direction: column; padding: 32px 20px 24px; }
  .conversion-hero__ambient::after { background: linear-gradient(180deg, rgba(7,11,20,.46), transparent 52%); }
  .conversion-copy { max-width: 520px; text-align: center; }
  .conversion-copy h1 { margin: 15px 0 12px; text-align: center; font-size: clamp(37px, 10.8vw, 50px); }
  .conversion-copy > p { margin: 0 auto; font-size: 14px; line-height: 1.55; }
  .conversion-copy .actions { justify-content: center; margin-top: 17px; }
  .conversion-copy__proof { display: none; }
  .conversion-scene { width: 100%; height: 330px; min-height: 330px; margin: 3px 0 0; transform: none; }
  .conversion-scene::before { width: 270px; height: 270px; margin: -135px; }
  .conversion-scene::after { width: 180px; height: 180px; margin: -90px; }
  .currency-token { width: 72px; height: 72px; margin: -36px; }
  .coin-shell__symbol { font-size: 25px; }
  .coin-shell__code { bottom: 12px; font-size: 6px; }
  .coin-shell::before { inset: 5px; }
  .inr-token { width: 140px; height: 140px; margin: -70px; }
  .inr-token__symbol { font-size: 57px; }
  .inr-token__meta { bottom: -45px; }
  .conversion-scene__label { bottom: 0; }
  .conversion-progress { left: 20px; right: 20px; bottom: 13px; }
  .conversion-progress span { display: none; }
}

@media (max-height: 720px) and (min-width: 720px) {
  .conversion-hero__sticky { min-height: 560px; }
  .conversion-scene { height: 560px; transform: scale(.82); }
  .conversion-copy h1 { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-hero { height: auto; }
  .conversion-hero__sticky { position: relative; top: 0; }
  .conversion-hero__ambient,
  .conversion-hero__orb,
  .coin-shell,
  .inr-token__halo,
  .inr-token__ring,
  .currency-trail::after { animation: none; }
  .conversion-progress { display: none; }
}