.hero {
  --hero-h: 840px;
  --hero-head: 88px;
  --hero-strip: 97px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--hero-h);
  overflow: hidden;
}
@supports (height: 100svh) {
  .hero { --hero-h: clamp(680px, 100svh, 900px); }
}
.hero__inner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  padding-top: calc(var(--hero-head) + 12px);
}
.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
  max-width: 576px;
}
.hero__title {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  text-transform: uppercase;
}
.hero__title-lead {
  font-size: var(--fs-hero-lead);
  line-height: var(--lh-hero-lead);
  font-weight: var(--fw-hero-lead);
}
.hero__title-accent {
  font-size: var(--fs-hero-accent);
  line-height: var(--lh-hero-accent);
  font-weight: var(--fw-hero-accent);
}
.hero__lead { color: var(--color-text-secondary); }
.hero__lead-strong {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding-top: 19px;
}
.hero__globe {
  --globe-room: calc(var(--hero-h) - var(--hero-head) - var(--hero-strip) - 28px);
  --globe-d: max(384px, min(var(--globe-room), 100vw - 688px, 704px));
  --globe-s: calc(var(--globe-d) * 1.25);
  --globe-top: calc(var(--hero-head) + 20px + (var(--globe-room) - var(--globe-d)) / 2 - var(--globe-d) * 0.125);
  --globe-cx: max(50vw + 305.5px, 672px + var(--globe-d) / 2);
  --globe-safe-top: max(0px, var(--hero-head) + 20px - var(--globe-top));
  --globe-safe-left: max(0px, max(656px, 50vw - 64px) + 24px - var(--globe-cx) + var(--globe-s) / 2);
  --globe-safe-bottom: max(0px, var(--globe-top) + var(--globe-s) - var(--hero-h) + var(--hero-strip) + 8px);
  --globe-safe-right: max(0px, var(--globe-cx) + var(--globe-s) / 2 - 100vw + 24px);
  position: absolute;
  top: var(--globe-top);
  left: calc(max(50% + 305.5px, 672px + var(--globe-d) / 2) - var(--globe-s) / 2);
  width: var(--globe-s);
  height: var(--globe-s);
  pointer-events: none;
}
.hero__globe-float {
  position: absolute;
  inset: 0;
}
.hero__globe-poster {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 700ms var(--ease-out);
}
.hero__globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
}
.hero__globe-canvas.is-over { cursor: grab; }
.hero__globe.is-dragging .hero__globe-canvas { cursor: grabbing; }
.hero__globe.is-live .hero__globe-canvas { opacity: 1; }
.hero__globe.is-live .hero__globe-poster { opacity: 0; }
.hero__globe-cards {
  position: absolute;
  inset: 0;
  padding: var(--globe-safe-top, 0px) var(--globe-safe-right, 0px) var(--globe-safe-bottom, 0px) var(--globe-safe-left, 0px);
  pointer-events: none;
}
.hero__globe.is-live .hero__globe-float { animation: globe-float 9s ease-in-out infinite alternate; }
.hero__globe.is-paused .hero__globe-float { animation-play-state: paused; }
@keyframes globe-float {
  from { translate: 0 0; }
  to { translate: 0 -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__globe-float { animation: none !important; }
}

.globe-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 210px;
  padding: 13px;
  background: var(--color-quote-card);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 21px rgb(0 0 0 / 0.5); /* Drop shadow 0 12 30 × 0,7 */
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.globe-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}
.globe-card__flag {
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 2px;
}
.globe-card__symbol {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: var(--lh-body-lg);
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.globe-card__base { color: var(--color-accent); }
.globe-card__closed {
  display: none;
  font-size: 14px;
  line-height: var(--lh-body-lg);
  color: var(--color-text-secondary);
}
.globe-card.is-closed .globe-card__closed { display: inline; }
.globe-card.is-closed .globe-card__change { display: none; }
.globe-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  white-space: nowrap;
}
.globe-card__price {
  font-size: 28px;
  line-height: 1.05;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  transition: color 600ms var(--ease-out);
}
.globe-card.is-closed .globe-card__price { color: var(--color-text-secondary); }
.globe-card.is-tick-up .globe-card__price { color: color-mix(in srgb, var(--color-accent-bright) 70%, var(--color-text)); transition: none; }
.globe-card.is-tick-down .globe-card__price { color: color-mix(in srgb, var(--color-quote-down) 70%, var(--color-text)); transition: none; }
.globe-card__change {
  font-size: 14px;
  line-height: var(--lh-body-lg);
  color: var(--color-accent);
}
.globe-card__change.is-down { color: var(--color-quote-down); }
.globe-card__change.is-flat { color: var(--color-text-secondary); }

.hero__facts {
  position: relative;
  z-index: 1;
  border-block: var(--border-width) solid var(--color-border-subtle);
  background-color: var(--color-strip-wash);
}
.hero__facts-inner {
  display: flex;
  align-items: center;
  padding-block: var(--space-24);
}
.hero__facts-mark {
  flex: none;
  width: 35px;
  height: 29px;
  opacity: 0.85;
}
.hero__facts-list {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}
@media (max-height: 979px) {
  .hero__facts-list { padding-right: calc(var(--fab-size) + var(--space-24)); }
}
.hero__fact {
  display: flex;
  flex: 2 1 auto;
  align-items: center;
}
.hero__fact::before,
.hero__fact::after {
  content: "";
  flex: 1 1 0;
  height: 34px;
}
.hero__fact::before { border-right: var(--border-width) solid var(--color-border-subtle); }
.hero__fact--first { flex-grow: 1; }
.hero__fact--first::before { display: none; }
.hero__fact-body {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-4);
  order: 1;
  white-space: nowrap;
}
.hero__fact-body--row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.hero__fact-icon {
  flex: none;
  width: 18px;
  height: 22px;
}
.hero__fact-value { color: var(--color-text); }
.hero__fact-label { color: var(--color-text-secondary); }
.hero__fact-number {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
  .hero { min-height: 0; }
  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 96px);
    padding-bottom: var(--space-48);
  }
  .hero__copy {
    max-width: 600px;
    padding-bottom: var(--space-48);
  }
  .hero__globe {
    --globe-safe-top: 16px;
    --globe-safe-left: 0px;
    --globe-safe-bottom: 0px;
    --globe-safe-right: 0px;
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    width: 100%;
    height: auto;
    margin-top: var(--space-16);
  }
  .hero__globe-float {
    position: relative;
    width: 100%;
    height: 560px;
  }
  .hero__globe-poster { object-fit: contain; }
  .hero__facts-mark { display: none; }
  .hero__facts-list { padding-right: 0; }
  .hero__fact--first { flex-grow: 0; }
  .hero__fact--first::after { display: none; }
}

@media (max-width: 767px) {
  .hero__inner { padding-top: calc(64px + var(--space-48)); }
  .hero__copy {
    gap: var(--space-24);
    padding-bottom: 0;
  }
  .hero__actions {
    flex-direction: column;
    padding-top: var(--space-8);
  }
  .hero__globe-float { height: min(100vw - 2 * var(--page-gutter), 460px); }
  .globe-card {
    gap: 4px;
    width: 156px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
  }
  .globe-card__head { gap: 5px; }
  .globe-card__flag { width: 16px; height: 11px; }
  .globe-card__symbol,
  .globe-card__closed,
  .globe-card__change { font-size: 11px; line-height: var(--lh-small); }
  .globe-card__price { font-size: 20px; }
  .hero__facts-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-20) var(--space-16);
  }
  .hero__fact::before,
  .hero__fact::after { display: none; }
  .hero__fact-body { white-space: normal; }
}

.markets {
  padding-block: 130px 112px;
  background-image: url('../assets/img/markets-bg.webp'),
    linear-gradient(180deg, var(--color-surface-dark) 40%, var(--color-surface-light) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.markets__inner {
  display: flex;
  flex-direction: column;
  gap: var(--section-head-gap);
}

.markets__grid {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}
.markets__row--top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 436px;
  gap: var(--grid-gap);
}
.markets__stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}
.markets__row--bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.market-card {
  --glow-w: 506px; --glow-h: 115px; --glow-x: 58.6%; --glow-y: 45.8%;
  --glow2-w: 274px; --glow2-h: 44px; --glow2-x: 48.7%; --glow2-y: 60.9%;
  --art-w: 452px; --art-h: 452px; --art-right: -38px; --art-bottom: -138px;
  --copy-max: 440px;
  --card-gap: var(--space-16);
  --tile-glow: 0.7;
  --tile-title: var(--color-text);
  --tile-text: var(--color-text-secondary);
  --tile-link: var(--fg-accent);
  --tile-btn-bg: transparent;
  --tile-btn-border: var(--color-text);
  --art-dx: 0%; --art-dy: 0%; --art-k: 1;
  --art-to-dx: -8.4%; --art-to-dy: -4.5%; --art-to-k: 1.2015;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--card-gap);
  padding: var(--space-32);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-card);
  background-image: var(--gradient-card-shade); /* CUSTOM-CSS: «Vector» */
  color: var(--color-text);
}
.market-card::before,
.market-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  opacity: var(--tile-glow);
  filter: blur(50px);
  pointer-events: none;
  transition: opacity var(--dur-tile) var(--ease-in-out-back);
}
.market-card::before {
  left: var(--glow-x);
  top: var(--glow-y);
  width: var(--glow-w);
  height: var(--glow-h);
  background-image: var(--gradient-glow-mint);
  transform: translate(-50%, -50%) rotate(23.76deg);
}
.market-card::after {
  left: var(--glow2-x);
  top: var(--glow2-y);
  width: var(--glow2-w);
  height: var(--glow2-h);
  background-color: var(--color-glow-cyan);
  transform: translate(-50%, -50%) rotate(23.76deg);
}
.market-card__art {
  position: absolute;
  z-index: 1;
  right: var(--art-right);
  bottom: var(--art-bottom);
  width: var(--art-w);
  height: auto;
  max-width: none;
  pointer-events: none;
  translate: var(--art-dx) var(--art-dy);
  scale: var(--art-k);
  transition: translate var(--dur-tile) var(--ease-in-out-back), scale var(--dur-tile) var(--ease-in-out-back);
}
.market-card__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: var(--copy-max);
}
.market-card__title {
  color: var(--tile-title);
  transition: color var(--dur-tile) var(--ease-in-out-back);
}
.market-card__text {
  color: var(--tile-text);
  transition: color var(--dur-tile) var(--ease-in-out-back);
}
.market-card__cta {
  position: relative;
  z-index: 2;
}
.market-card__cta::before {
  content: "";
  position: absolute;
  inset: -400px -900px;
}
.market-card__cta--link {
  color: var(--tile-link);
  transition: color var(--dur-tile) var(--ease-in-out-back);
}
.market-card__cta--btn {
  border-color: var(--tile-btn-border);
  background-color: var(--tile-btn-bg);
  transition: background-color var(--dur-tile) var(--ease-in-out-back), border-color var(--dur-tile) var(--ease-in-out-back);
}
@media (hover: hover) {
  .market-card:hover {
    --tile-glow: 1;
    --tile-title: var(--color-accent);
    --tile-text: var(--color-surface-light);
    --tile-link: var(--color-link-hot);
    --tile-btn-bg: var(--color-cta);
    --tile-btn-border: var(--color-cta);
    --art-dx: var(--art-to-dx); --art-dy: var(--art-to-dy); --art-k: var(--art-to-k);
  }
  .market-card__cta--link:hover { text-decoration-line: none; }
  .market-card__cta--link:hover::after { transform: none; }
  .market-card__cta--btn:hover {
    border-color: var(--tile-btn-border);
    background-color: var(--tile-btn-bg);
    color: var(--color-text);
  }
}
.market-card:has(.market-card__cta:focus-visible) {
  --tile-glow: 1;
  --tile-title: var(--color-accent);
  --tile-text: var(--color-surface-light);
  --tile-link: var(--color-link-hot);
  --tile-btn-bg: var(--color-cta);
  --tile-btn-border: var(--color-cta);
  --art-dx: var(--art-to-dx); --art-dy: var(--art-to-dy); --art-k: var(--art-to-k);
}
@media (prefers-reduced-motion: reduce) {
  .market-card::before,
  .market-card::after,
  .market-card__art { transition: none; }
}

.market-card--hero { min-height: 344px; }

.market-card--small {
  --glow-w: 248px; --glow-h: 56px; --glow-x: 80.8%; --glow-y: 47.6%;
  --glow2-w: 135px; --glow2-h: 22px; --glow2-x: 71.6%; --glow2-y: 63.5%;
  --art-w: 293px; --art-h: 293px; --art-right: -88px; --art-bottom: -109px;
  --art-to-dx: -15.3%; --art-to-dy: -0.9%; --art-to-k: 1.179;
  --copy-max: none;
  flex: 1 1 0;
  justify-content: flex-start;
  min-height: 164px;
  padding: var(--space-20) 68px var(--space-20) var(--space-32);
}
.market-card--tinted { background-color: var(--color-surface-card-tint); }
.market-card--metals { --art-h: 268px; --art-bottom: -51px; }

.market-card--wide {
  --glow-w: 257px; --glow-h: 65px; --glow-x: 65.9%; --glow-y: 50.8%;
  --glow2-w: 156px; --glow2-h: 25px; --glow2-x: 55.3%; --glow2-y: 31.5%;
  --art-w: 330px; --art-h: 330px; --art-right: -2px; --art-bottom: -82px;
  --art-to-dx: -6.5%; --art-to-dy: 2.3%; --art-to-k: 1.118;
  --copy-max: 338px;
  --card-gap: var(--space-12);
  min-height: 200px;
}

.market-card--hero { --art-w: 388px; --art-right: 14px; --art-bottom: -14px; }
.market-card--stocks { --art-w: 152px; --art-right: 6px; --art-bottom: -8px; }
.market-card--crypto { --art-w: 124px; --art-right: -30px; --art-bottom: -22px; }
.market-card--indices { --art-w: 205px; --art-right: 66px; --art-bottom: -14px; }
.market-card--metals { --art-w: 280px; --art-right: 4px; --art-bottom: -34px; }
.market-card--stocks,
.market-card--crypto,
.market-card--indices,
.market-card--metals { --art-to-dx: 0%; --art-to-dy: -4%; --art-to-k: 1.06; }

@media (max-width: 1024px) {
  .markets__row--top { grid-template-columns: minmax(0, 1fr); }
  .markets__stack { flex-direction: row; }
  .market-card--wide {
    --art-w: 230px; --art-h: 230px; --art-right: -24px; --art-bottom: -64px;
    --copy-max: 58%;
  }
  .market-card--metals { --art-h: 187px; --art-bottom: -30px; }
  .market-card--indices { --art-w: 160px; --art-right: 20px; --art-bottom: -14px; }
  .market-card--metals { --art-w: 180px; --art-right: 4px; --art-bottom: -6px; }
}

@media (max-width: 767px) {
  .markets__stack { flex-direction: column; }
  .markets__row--bottom { grid-template-columns: minmax(0, 1fr); }
  .market-card,
  .market-card--small,
  .market-card--wide {
    --copy-max: none;
    justify-content: flex-start;
    min-height: 0;
    padding: var(--space-24);
  }
  .market-card__cta { margin-top: var(--art-gap); }
  .market-card__text { text-wrap: pretty; }
  .market-card--hero {
    --art-w: 176px; --art-h: 176px; --art-right: 0px; --art-bottom: -38px; --art-gap: 64px;
    min-height: 0;
  }
  .market-card--small {
    --art-w: 190px; --art-h: 190px; --art-right: 12px; --art-bottom: -44px; --art-gap: 64px;
    flex: none;
  }
  .market-card--wide { --art-w: 180px; --art-h: 180px; --art-right: 16px; --art-bottom: -40px; --art-gap: 64px; }
  .market-card--metals { --art-w: 160px; --art-h: 130px; --art-right: 16px; --art-bottom: 45px; --art-gap: 92px; }
  .market-card--hero { --art-w: 160px; --art-right: 16px; --art-bottom: 6px; }
  .market-card--stocks { --art-w: 112px; --art-right: 24px; --art-bottom: -6px; }
  .market-card--crypto { --art-w: 96px; --art-right: 28px; --art-bottom: -10px; }
  .market-card--indices { --art-w: 116px; --art-right: 30px; --art-bottom: -10px; }
  .market-card--metals { --art-w: 120px; --art-right: 24px; --art-bottom: 60px; }
}

.why {
  padding-block: var(--section-pad-sm) var(--section-pad-lg);
  background-image: var(--gradient-mint-band);
  background-size: 100% 91.4%;
  background-repeat: no-repeat;
}
.why__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-44);
}
.why__actions {
  display: flex;
  justify-content: center;
}

.why__features {
  display: grid;
  grid-template-columns: minmax(0, 803fr) minmax(0, 477fr);
  overflow: clip;
  border-radius: var(--radius-section);
}

.why__visual {
  container-type: inline-size;
  overflow: clip;
  background-color: var(--color-visual-bg);
}
.why__stage-box {
  --k: tan(atan2(100cqw, 803px));
  position: sticky;
  top: calc(var(--header-h) + var(--space-24));
  height: calc(893px * var(--k));
}
.why__stage {
  position: relative;
  left: calc((100cqw - 803px * var(--k)) / 2);
  width: 803px;
  height: 893px;
  scale: var(--k);
  transform-origin: 0 0;
  --fs-h2: 2.5rem;
  --fs-overline: 0.75rem;
  --fs-small: 0.875rem;
}

.why-visual {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
}
.why-visual--active {
  visibility: visible;
  opacity: 1;
  transition: none;
}
.why-visual__list {
  position: absolute;
  inset: 0;
}
.why-visual__quotes { position: absolute; inset: 0; }
.why-visual__caption {
  position: absolute;
  font-size: var(--fs-vis-caption);
  line-height: normal;
  letter-spacing: var(--ls-vis-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-muted);
}
.why-visual__caption--conditions { left: 78px; top: 760px; letter-spacing: var(--ls-overline); } /* type-overline, T7 */
.why-visual__caption--execution { left: 88px; top: 806px; }
.why-visual__caption--markets { left: 56px; top: 800px; }
.why-visual__caption--funding { left: 101px; top: 800px; }

.why-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.why-glow--conditions {
  left: 20px; top: 90px; width: 760px; height: 700px;
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  filter: blur(80px);
  opacity: 0.724;
}
.why-glow--execution {
  left: 91px; top: 20px; width: 620px; height: 620px;
  background-color: color-mix(in srgb, var(--color-accent) 13%, transparent);
  filter: blur(75px);
}
.why-glow--markets {
  left: 50px; top: 130px; width: 700px; height: 640px;
  background-color: color-mix(in srgb, var(--color-accent) 11%, transparent);
  filter: blur(85px);
}
.why-glow--funding {
  left: 72px; top: 300px; width: 660px; height: 560px;
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  filter: blur(82.5px);
}

.condition {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 470px;
  min-height: 116px;
  padding: 17px 27px 11px;
  border: var(--border-width) solid var(--color-divider-glass);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--color-visual-card) 92%, transparent);
  box-shadow: var(--shadow-card);
}
.condition::after {
  content: "";
  position: absolute;
  top: 21px;
  right: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-visual-dot);
}
.condition--active { border-color: var(--color-border-mint); }
.condition--active::after { background-color: var(--color-accent); }
.condition--deposit { left: 78px; top: 150px; }
.condition--spreads { left: 168px; top: 300px; }
.condition--commission { left: 98px; top: 450px; }
.condition--swap { left: 168px; top: 600px; }
.condition__label { color: var(--color-text-muted); }
.condition__value {
  margin-top: 2px;
  color: var(--color-text);
  text-transform: none;
}
.condition__value--accent { color: var(--color-accent); }
.condition__note {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
}

.why-ring {
  position: absolute;
  border: 1.5px solid;
  border-radius: 50%;
}
.why-ring--4 { left: 101px; top: 30px; width: 600px; height: 600px; border-color: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.why-ring--3 { left: 169px; top: 98px; width: 464px; height: 464px; border-color: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.why-ring--2 {
  left: 235px; top: 164px; width: 332px; height: 332px;
  border-color: color-mix(in srgb, var(--color-accent) 26%, transparent);
  opacity: 0.868; scale: 1.023;
}
.why-ring--1 {
  left: 297px; top: 226px; width: 208px; height: 208px;
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  opacity: 0.55; scale: 1.08;
}
.why-core {
  position: absolute;
  left: 390px; top: 319px; width: 22px; height: 22px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: var(--shadow-dot-glow-lg);
  scale: 1.116;
}
.why-speed {
  position: absolute;
  left: 0; right: 0; top: 512px;
  font-size: var(--fs-vis-speed);
  line-height: normal;
  font-weight: var(--fw-bold);
  text-align: center;
  white-space: nowrap;
  color: var(--color-text);
}
.why-speed__label {
  position: absolute;
  left: 0; right: 0; top: 606px;
  font-size: var(--fs-vis-meta);
  line-height: normal;
  letter-spacing: 2px;
  font-weight: var(--fw-semibold);
  text-align: center;
  white-space: nowrap;
  color: var(--color-text-muted);
}
.why-track {
  position: absolute;
  left: 88px; top: 706px; width: 626px; height: 2px;
  background-color: var(--color-border-subtle);
}
.why-track__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 470px;
  background-color: var(--color-accent);
}
.why-track__tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 8px;
  background-color: var(--color-border-glass);
}
.why-track__tick--1 { left: 0; }
.why-track__tick--2 { left: 125px; }
.why-track__tick--3 { left: 250px; }
.why-track__tick--4 { left: 375px; }
.why-track__tick--5 { left: 500px; }
.why-track__tick--6 { left: 625px; }
.why-track__head {
  position: absolute;
  left: 558px; top: 700px; width: 14px; height: 14px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: var(--shadow-dot-glow);
}
.why-track__label {
  position: absolute;
  top: 728px;
  font-size: var(--fs-vis-label);
  line-height: normal;
  letter-spacing: var(--ls-vis-label);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--color-text-muted);
}
.why-track__label--sent { left: 88px; }
.why-track__label--filled { right: 89px; color: var(--color-accent); }

.why-quote {
  position: absolute;
  width: 264px;
  height: 92px;
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--color-visual-card) 94%, transparent);
  box-shadow: var(--shadow-card);
  line-height: normal;
  white-space: nowrap;
  color: var(--color-text);
}
.why-quote--xau { left: 56px; top: 168px; scale: 1.031; }
.why-quote--btc { left: 424px; top: 356px; }
.why-quote--eur { left: 132px; top: 542px; }
.why-quote__pair,
.why-quote__price,
.why-quote__change { position: absolute; left: 21px; }
.why-quote__pair { top: 17px; font-size: var(--fs-vis-pair); font-weight: var(--fw-semibold); }
.why-quote__price { top: 41px; font-size: var(--fs-vis-price); font-weight: var(--fw-bold); }
.why-quote__change {
  left: 193px;
  top: 20px;
  font-size: var(--fs-vis-change);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}
.why-quote__change--down,
.why-chip__change--down { color: var(--color-down); }
.why-chip {
  position: absolute;
  height: 44px;
  border: var(--border-width) solid color-mix(in srgb, var(--color-surface-light) 7%, transparent);
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--color-visual-card) 80%, transparent);
  opacity: 0.85;
  line-height: normal;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--color-text);
}
.why-chip__name { position: absolute; left: 15px; top: 11px; font-size: var(--fs-vis-meta); }
.why-chip__change { position: absolute; left: 111px; top: 12px; font-size: var(--fs-vis-label); color: var(--color-accent); }
.why-chip--us500 { left: 462px; top: 152px; width: 170px; }
.why-chip--usdjpy { left: 316px; top: 686px; width: 176px; }
.why-chip--usdjpy .why-chip__change { left: 117px; }
.why-chip--dax { left: 548px; top: 574px; width: 170px; }
.why-chip--faint {
  height: 38px;
  border-color: color-mix(in srgb, var(--color-surface-light) 5%, transparent);
  background-color: color-mix(in srgb, var(--color-visual-card) 60%, transparent);
  opacity: 0.55;
}
.why-chip--faint .why-chip__name { top: 10px; }
.why-chip--usoil { left: 78px; top: 402px; width: 96px; }
.why-chip--usoil .why-chip__name { left: 34px; }
.why-chip--brent { left: 590px; top: 250px; width: 124px; }
.why-chip--brent .why-chip__name { left: 36px; }
.why-chip--gbp { left: 386px; top: 246px; width: 124px; opacity: 0.5; }
.why-chip--gbp .why-chip__name { left: 30px; top: 9px; }

.why-methods { position: absolute; inset: 0; }
.why-method {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 60px;
  border: var(--border-width) solid color-mix(in srgb, var(--color-surface-light) 7%, transparent);
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--color-visual-card) 85%, transparent);
  font-size: var(--fs-vis-method);
  line-height: normal;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--color-visual-label);
}
.why-method--cards { left: 88px; top: 124px; scale: 1.017; }
.why-method--apple { left: 300px; top: 124px; }
.why-method--google { left: 512px; top: 124px; }
.why-method--skrill { left: 88px; top: 196px; }
.why-method--usdt { left: 300px; top: 196px; }
.why-method--bank { left: 512px; top: 196px; }
.why-stem {
  position: absolute;
  left: 400px; top: 256px; width: 2px; height: 152px;
  background-color: var(--color-border-mint);
}
.why-withdrawal {
  position: absolute;
  left: 101px; top: 408px; width: 600px; height: 206px;
  border: var(--border-width) solid var(--color-border-mint-mid);
  border-radius: var(--radius-xl);
  background-color: color-mix(in srgb, var(--color-visual-card) 95%, transparent);
  box-shadow: var(--shadow-card);
  line-height: normal;
  white-space: nowrap;
}
.why-withdrawal__cap {
  position: absolute;
  left: 292px; top: -8px; width: 14px; height: 14px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: var(--shadow-dot-glow);
}
.why-withdrawal__label {
  position: absolute;
  left: 35px; top: 31px;
  font-size: var(--fs-vis-label);
  letter-spacing: var(--ls-vis-label);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.why-withdrawal__amount {
  position: absolute;
  left: 35px; top: 57px;
  font-size: var(--fs-vis-amount);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.why-withdrawal__status {
  position: absolute;
  left: 35px; top: 131px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 113px;
  height: 38px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-tint-strong);
  font-size: var(--fs-vis-meta);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}
.why-withdrawal__note {
  position: absolute;
  left: 166px; top: 142px;
  font-size: var(--fs-vis-meta);
  color: var(--color-text-muted);
}
.why-flow {
  position: absolute;
  left: 104px; top: 668px; width: 597px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-vis-meta);
  line-height: normal;
  white-space: nowrap;
  color: var(--color-text-muted);
}
.why-flow__step {
  display: flex;
  align-items: center;
  gap: 7px;
}
.why-flow__step::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-visual-dot-step);
}
.why-flow__step--done { font-weight: var(--fw-semibold); color: var(--color-text); }
.why-flow__step--done::before { background-color: var(--color-accent); }
.why-flow__line {
  flex: 1 1 0;
  height: 1px;
  background-color: var(--color-visual-line);
}

@keyframes why-in {
  from { opacity: 0; translate: var(--from-x, 0) var(--from-y, 0); scale: var(--from-s, 1); }
}
.why-visual--active :is(.why-glow, .condition, .why-visual__caption, .why-ring, .why-speed,
  .why-speed__label, .why-track, .why-track__head, .why-track__label, .why-quote, .why-chip,
  .why-method, .why-stem, .why-withdrawal, .why-withdrawal__cap, .why-flow) {
  animation: why-in var(--a-dur, 450ms) var(--ease-out) var(--a-delay, 0ms) both;
}
.why__stage-box.is-waiting .why-visual * { animation-play-state: paused; }

.condition--deposit { --a-delay: 250ms; --from-x: -24px; }
.condition--spreads { --a-delay: 350ms; --from-x: 24px; }
.condition--commission { --a-delay: 450ms; --from-x: -24px; }
.condition--swap { --a-delay: 550ms; --from-x: 24px; }
.why-visual__caption--conditions { --a-delay: 1000ms; --a-dur: 400ms; }
.why-visual--active .condition--deposit {
  animation: why-in 450ms var(--ease-out) 250ms both, why-pulse 600ms ease-in-out 1400ms both;
}
.why-visual--active .why-glow--conditions { animation: why-glow-flash 1400ms linear both; }
@keyframes why-pulse {
  50% { scale: 1.03; }
}
@keyframes why-glow-flash {
  0% { opacity: 0; scale: 0.9; animation-timing-function: var(--ease-out); }
  50% { opacity: 1; scale: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0.724; scale: 1; }
}

.why-glow--execution { --a-dur: 600ms; --from-s: 0.9; }
.why-ring--3 { --a-delay: 490ms; --a-dur: 400ms; --from-s: 0.6; }
.why-ring--4 { --a-delay: 610ms; --a-dur: 400ms; --from-s: 0.6; }
.why-speed { --a-delay: 700ms; --a-dur: 500ms; --from-y: 16px; }
.why-speed__label { --a-delay: 850ms; --from-y: 16px; }
.why-track { --a-delay: 900ms; --a-dur: 400ms; }
.why-track__head { --a-delay: 1000ms; --a-dur: 600ms; --from-x: -470px; }
.why-track__label,
.why-visual__caption--execution { --a-delay: 1200ms; --a-dur: 400ms; }
.why-visual--active .why-ring--1 { animation: why-ring-1 2000ms linear both; }
.why-visual--active .why-ring--2 { animation: why-ring-2 2250ms linear both; }
.why-visual--active .why-core { animation: why-core 2100ms linear both; }
@keyframes why-ring-1 {
  0%, 12.5% { opacity: 0; scale: 0.6; animation-timing-function: var(--ease-out); }
  32.5% { opacity: 1; scale: 1; }
  80% { opacity: 1; scale: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0.55; scale: 1.08; }
}
@keyframes why-ring-2 {
  0%, 16.44% { opacity: 0; scale: 0.6; animation-timing-function: var(--ease-out); }
  34.22% { opacity: 1; scale: 1; }
  82.22% { opacity: 1; scale: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0.868; scale: 1.023; }
}
@keyframes why-core {
  0%, 9.52% { opacity: 0; scale: 0; animation-timing-function: var(--ease-out); }
  16.67% { scale: 1.2; animation-timing-function: var(--ease-out); }
  23.81% { opacity: 1; scale: 1; }
  76.19% { scale: 1; animation-timing-function: ease-in-out; }
  88.1% { scale: 1.35; animation-timing-function: ease-in-out; }
  100% { opacity: 1; scale: 1.116; }
}

.why-glow--markets { --a-dur: 700ms; --from-s: 0.9; }
.why-quote--btc { --a-delay: 400ms; --from-s: 0.92; }
.why-quote--eur { --a-delay: 500ms; --from-s: 0.92; }
.why-chip--us500 { --a-delay: 600ms; --from-y: 12px; }
.why-chip--usdjpy { --a-delay: 690ms; --from-y: 12px; }
.why-chip--dax { --a-delay: 780ms; --from-y: 12px; }
.why-chip--usoil { --a-delay: 900ms; --from-y: 8px; }
.why-chip--brent { --a-delay: 990ms; --from-y: 8px; }
.why-chip--gbp { --a-delay: 1080ms; --from-y: 8px; }
.why-visual__caption--markets { --a-delay: 1400ms; --a-dur: 400ms; }
.why-visual--active .why-quote--xau { animation: why-quote-focus 2100ms linear both; }
@keyframes why-quote-focus {
  0%, 14.29% { opacity: 0; scale: 0.92; animation-timing-function: var(--ease-out); }
  35.71% { opacity: 1; scale: 1; }
  85.71% { opacity: 1; scale: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 1; scale: 1.031; }
}

.why-glow--funding { --a-dur: 700ms; --from-s: 0.92; }
.why-method--apple { --a-delay: 270ms; --a-dur: 400ms; --from-s: 0.9; }
.why-method--google { --a-delay: 340ms; --a-dur: 400ms; --from-s: 0.9; }
.why-method--skrill { --a-delay: 410ms; --a-dur: 400ms; --from-s: 0.9; }
.why-method--usdt { --a-delay: 480ms; --a-dur: 400ms; --from-s: 0.9; }
.why-method--bank { --a-delay: 550ms; --a-dur: 400ms; --from-s: 0.9; }
.why-stem { --a-delay: 800ms; --a-dur: 300ms; }
.why-withdrawal { --a-delay: 1000ms; --a-dur: 500ms; --from-y: 24px; }
.why-withdrawal__cap { --a-delay: 1300ms; --a-dur: 200ms; --from-s: 0; }
.why-flow { --a-delay: 1400ms; --a-dur: 400ms; }
.why-visual__caption--funding { --a-delay: 1500ms; --a-dur: 400ms; }
.why-visual--active .why-method--cards { animation: why-method-pick 2150ms linear both; }
@keyframes why-method-pick {
  0%, 9.3% { opacity: 0; scale: 0.9; animation-timing-function: var(--ease-out); }
  27.91% { opacity: 1; scale: 1; }
  88.37% { opacity: 1; scale: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 1; scale: 1.017; }
}

@media (prefers-reduced-motion: reduce) {
  .why-visual * { animation: none !important; }
}

.why__facts {
  display: flex;
  flex-direction: column;
}
.fact-card {
  --fg: var(--color-text);
  --fg-2: var(--color-text-secondary);
  --focus: var(--color-accent);
  --chip-bg: var(--color-accent-tint-soft);
  --chip-fg: var(--color-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: -1px;
  padding: 36px var(--space-40);
  border: var(--border-width) solid var(--color-border-subtle);
  background-color: var(--color-surface-card);
  cursor: pointer;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease;
}
.fact-card:focus-visible { outline-offset: -4px; }
.fact-card--active {
  z-index: 1;
  border-color: var(--color-border-mint);
  background-color: var(--color-surface-card-hover);
  box-shadow: var(--shadow-mint-glow);
}
.fact-card--first { border-top-right-radius: var(--radius-section); }
.fact-card--last {
  margin-bottom: 0;
  border-bottom-right-radius: var(--radius-section);
}
.fact-card__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: var(--chip-bg);
  transition: background-color var(--dur-base) ease;
}
.fact-card__icon {
  width: 24px;
  height: 24px;
  background-color: var(--chip-fg);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: background-color var(--dur-base) ease;
}
.fact-card__icon--document { --icon: url('../assets/icons/document.svg'); }
.fact-card__icon--trend-up { --icon: url('../assets/icons/trend-up.svg'); }
.fact-card__icon--chart-bars { --icon: url('../assets/icons/chart-bars.svg'); }
.fact-card__icon--wallet { --icon: url('../assets/icons/wallet.svg'); }
.fact-card__title {
  color: var(--fg);
  transition: color var(--dur-base) ease;
}
.fact-card__text {
  color: var(--fg-2);
  transition: color var(--dur-base) ease;
}

@media (max-width: 1024px) {
  .why__features {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    border-radius: 0;
  }
  .why__visual {
    position: sticky;
    top: var(--pin-top);
    z-index: 2;
    padding-block: var(--space-8) var(--space-12);
    overflow: visible;
    background-color: transparent;
  }
  .why__stage-box {
    --k: min(tan(atan2(100cqw, 747px)), tan(atan2(46vh, 830px)), 0.5);
    position: relative;
    top: auto;
    height: calc(830px * var(--k));
    overflow: clip;
    border-radius: var(--radius-xl);
    background-color: var(--color-visual-bg);
  }
  .why__stage {
    left: calc((100cqw - 747px * var(--k)) / 2 - 28px * var(--k));
    top: calc(-20px * var(--k));
  }
  .why__facts { gap: var(--space-12); }
  .fact-card,
  .fact-card--first,
  .fact-card--last {
    margin-bottom: 0;
    padding: 28px var(--space-24);
    border-radius: var(--radius-lg);
  }
}

.audiences {
  padding-block: var(--section-pad-lg);
  background-image: var(--gradient-mint-top);
  background-size: 100% 240px;
  background-repeat: no-repeat;
}
.audiences__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 90px;
}
.audiences__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-44);
}
.account-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-48) var(--space-48) var(--space-40);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-mint);
  border-radius: var(--radius-xl);
  background-image: var(--gradient-account-card);
}
.account-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12px;
  right: -45px;
  width: 250px;
  height: 208px;
  background: url('../assets/img/account-decor.svg') center / contain no-repeat;
  pointer-events: none;
}
.account-card__title {
  color: var(--color-text);
  font-weight: var(--fw-regular);
}
.account-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  padding-top: var(--space-20);
  border-top: var(--border-width) solid var(--color-border-subtle);
}
.account-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}
.account-card__item::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background-color: var(--color-accent);
  -webkit-mask: url('../assets/icons/check.svg') center / contain no-repeat;
  mask: url('../assets/icons/check.svg') center / contain no-repeat;
}
.account-card__cta { margin-top: var(--space-24); }

/* ════════ Platform (7045:11509) ════════════════════════════════ */
.platform {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-pad);
  background-image: var(--gradient-mint-fade);
}
.platform::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    url('../assets/img/platform-mark.svg') 6px -150px / 605px 493px no-repeat,
    url('../assets/img/platform-mark.svg') 6px 391px / 605px 493px no-repeat;
  pointer-events: none;
}
.platform__inner {
  display: flex;
  align-items: center;
  min-height: 470px;
}
.platform__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  max-width: 46.875%;
  padding-right: var(--space-44);
}
.platform__visual {
  position: absolute;
  z-index: 0;
  top: 0;
  right: max(0px, calc(50% - 720px));
  width: min(872px, calc((100% - var(--page-gutter) * 2) * 0.68125));
  height: auto;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}

/* ════════ Payments (7045:12002) ════════════════════════════════ */
.payments { padding-block: var(--section-pad); }
.payments__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 57px;
}
.payments__copy {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
.payments__methods {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.payments__row {
  display: flex;
  gap: var(--grid-gap);
}
.payment-tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  min-height: 118px;
  padding: 27px var(--space-24);
  border: var(--border-width) solid var(--color-border-on-light);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-light);
  box-shadow: var(--shadow-card-light);
}
.payment-tile--grow { flex: 1 1 0; }
.payment-tile--apple { padding-inline: 37px; }
.payment-tile--google { padding-inline: 34px; }
.payment-tile--skrill { padding-inline: 30px; }
.payment-tile--usdt { padding-inline: 26px; }
.payment-tile__logo {
  display: block;
  max-width: 100%;
  height: auto;
}
.payment-tile__chip {
  display: flex;
  flex: none;
  padding: 10px;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-tint);
}
.payment-tile__label {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  color: var(--color-text-on-light);
  white-space: nowrap;
}

.business {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 123px 87px;
  background-image:
    radial-gradient(640px 580px at 86.8% 19%, color-mix(in srgb, var(--color-accent) 38%, transparent) 0%, color-mix(in srgb, var(--color-accent) 22%, transparent) 35%, color-mix(in srgb, var(--color-accent) 6%, transparent) 70%, transparent 100%),
    radial-gradient(680px 500px at 100% 72%, color-mix(in srgb, var(--color-mesh-deep) 90%, transparent) 0%, transparent 100%),
    radial-gradient(400px 400px at 18.8% 82%, color-mix(in srgb, var(--color-mesh-cyan) 16%, transparent) 0%, transparent 100%),
    radial-gradient(460px 440px at 36% 19%, color-mix(in srgb, var(--color-mesh-blue) 35%, transparent) 0%, transparent 100%);
}
.business__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.business__head { max-width: 820px; }

.business__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 414px;
  margin-inline: auto;
}
.business__stage::before,
.business__stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.business__stage::before {
  left: 23.6%;
  top: -12px;
  width: 52.8%;
  height: 520px;
  background-color: color-mix(in srgb, var(--color-glow-green) 22%, transparent);
  filter: blur(80px);
}
.business__stage::after {
  left: 27.1%;
  top: -44px;
  width: 45.8%;
  height: 560px;
  background-color: color-mix(in srgb, var(--color-mark-core) 72%, transparent);
  filter: blur(90px);
}
.business__mark {
  position: absolute;
  left: 34.51%;
  top: 48px;
  width: 30.97%;
  height: auto;
}

.callout {
  position: absolute;
  top: 129px;
  width: 211px;
}
.callout--left { left: 16.6%; }
.callout--right { left: 68.125%; }
.callout::before {
  content: "";
  position: absolute;
  top: 45px;
  left: -38px;
  width: 57px;
  height: 142px;
  background: url('../assets/img/callout-connector.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.callout--right::before {
  left: 188px;
  transform: scaleX(-1);
}
.callout__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--space-16);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass)); /* CUSTOM-CSS: Glass */
}
.callout__card::before,
.callout__card::after {
  content: "";
  position: absolute;
  width: 15.5px;
  height: 15px;
  background: url('../assets/img/callout-corner.svg') center / contain no-repeat;
}
.callout__card::before { top: 8px; right: 8px; }
.callout__card::after { bottom: 8px; left: 8px; transform: rotate(180deg); }
.callout__title {
  color: var(--color-text);
  text-align: center;
}
.callout__text {
  position: absolute;
  top: 122px;
  width: 244px;
  color: var(--color-text);
  opacity: 0.8;
}
.callout__text--left { left: 37px; }
.callout__text--right { right: 41px; text-align: right; }

.business__actions {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

@media (max-width: 1024px) {
  .business { padding-block: var(--section-pad); }
  .business__stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-40) var(--space-24);
    height: auto;
    max-width: calc(var(--content-width) + var(--page-gutter) * 2);
    margin-top: var(--space-32);
    padding-inline: var(--page-gutter);
  }
  .business__stage::before { left: 10%; width: 80%; top: 0; }
  .business__stage::after { left: 20%; width: 60%; top: 0; }
  .business__mark {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(360px, 80%);
  }
  .callout,
  .callout__text {
    position: static;
    width: auto;
  }
  .callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
  }
  .callout::before { display: none; }
  .callout__card { width: min(211px, 100%); }
  .callout__text--left,
  .callout__text--right { text-align: center; max-width: 320px; }
  .business__actions { margin-top: var(--space-40); }
}

@media (max-width: 767px) {
  .business__stage { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .audiences__inner,
  .payments__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
  .audiences__copy { order: -1; }
  .platform { padding-bottom: var(--space-24); }
  .payments__copy,
  .payments__methods { grid-column: 1; grid-row: auto; }
  .platform__inner { min-height: 0; }
  .platform__copy { max-width: 600px; padding-right: 0; }
  .platform__visual {
    position: static;
    display: block;
    width: min(872px, 100%);
    margin: var(--space-32) auto 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent),
      linear-gradient(180deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent),
      linear-gradient(180deg, transparent, black 10%, black 90%, transparent);
    mask-composite: intersect;
  }
  .business { min-height: 0; padding-block: var(--section-pad); }
}

@media (max-width: 767px) {
  .account-card { padding: var(--space-32) var(--space-24); }
  .payments__methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .payments__row { display: contents; }
  .payments__methods {
    grid-auto-rows: 1fr;
    gap: 0;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border-on-light);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-light);
    box-shadow: var(--shadow-card-light);
  }
  .payment-tile,
  .payment-tile--apple,
  .payment-tile--google,
  .payment-tile--skrill,
  .payment-tile--usdt {
    min-height: 80px;
    padding: var(--space-16);
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .payment-tile--visa,
  .payment-tile--apple,
  .payment-tile--skrill,
  .payment-tile--usdt { border-right: var(--border-width) solid var(--color-divider-on-light); }
  .payment-tile:not(.payment-tile--usdt, .payment-tile--bank) { border-bottom: var(--border-width) solid var(--color-divider-on-light); }
  .payment-tile__logo { width: var(--pay-logo-w, auto); }
  .payment-tile--visa { --pay-logo-w: 72px; }
  .payment-tile--mastercard { --pay-logo-w: 108px; }
  .payment-tile--apple { --pay-logo-w: 26px; }
  .payment-tile--google { --pay-logo-w: 29px; }
  .payment-tile--skrill { --pay-logo-w: 68px; }
  .payment-tile--neteller { --pay-logo-w: 104px; }
  .payment-tile--usdt { --pay-logo-w: 88px; }
  .payment-tile--bank { gap: var(--space-8); }
  .payment-tile--bank .payment-tile__chip { padding: 4px; }
  .payment-tile--bank .payment-tile__chip img { width: 20px; height: 20px; }
  .payment-tile--bank .payment-tile__label {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: 0;
    white-space: normal;
  }
}
