.navigation {
    background: transparent;
}

.home-hero-section {
  width: 100%;
  min-height: 700px;
  background: radial-gradient(50.74% 60.92% at 50% 55.31%, #0D2E54 0%, #0C1B31 100%);
  position: relative;
}

.home .page > .hero-wrapper > .home-hero-section {
  min-height: 700px;
}

.home .page > section,
.home .page > .hero-wrapper > section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 700px;
}

.home-hero-shell {
  width: 100%;
  margin: 0 auto;
   position: relative; /* Position relative so absolutely-positioned children (the recharge
     image) are anchored to this shell. Keep overflow visible so the
     image can extend to the shell edges and ignore inner paddings. */
   overflow: visible;
}

.section {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 700px;
  width: 100%;
  margin: 0;
  align-self: stretch;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.right-dots {
  position: absolute;
  bottom: 72px;
  right: 72px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  width: 300px;
  height: 300px;
}

.left-dots {
  position: absolute;
  top: 0;
  left: 72px;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  width: 300px;
  height: 300px;
}

@media (max-width: 1080px) {
.right-dots {
  right: 24px;
  bottom: 24px;
  width: 140px;
  height: 140px;
}

.left-dots {
  left: 24px;
  width: 140px;
  height: 140px;
}
}

.phone-input-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.phone-input-title {
  color: var(--light-onPrimary);
  font-family: var(--display-display-small-font-family);
  font-size: var(--display-display-small-font-size);
  line-height: var(--display-display-small-line-height);
  font-weight: var(--display-display-small-font-weight);
  font-style: var(--display-display-small-font-style);
}

.text-highlight {
  color: var(--light-tertiary);
  font-family: 'Gentium Book Basic', serif;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1px;
}

.phone-input-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  min-width: 0;
  padding: 0 24px;
  width: 100%;
  align-self: center;
}

.recharge-image {
  flex: 1 1 auto;
  right: 0;
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: stretch;
}

.recharge-image picture,
.recharge-image img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom right;
}

.hero-cards-scene {
  position: relative;
  width: 100%;
  padding-left: 16px;
  box-sizing: border-box;
}

.hero-cards-fallback,
.hero-cards-fallback img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}

.hero-cards-fallback {
  transition: opacity 160ms ease;
}

.hero-cards-inline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.hero-cards-inline svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-cards-scene.is-inline-ready .hero-cards-fallback {
  opacity: 0;
}

.hero-cards-scene.is-inline-ready .hero-cards-inline {
  opacity: 1;
}


@media (min-width: 1080px) {
  .home .page > section,
  .home .page > .hero-wrapper > section {
    min-height: 600px;
  }

  .home-hero-section,
  .home .page > .hero-wrapper > .home-hero-section {
    min-height: 600px;
  }

  .section {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    min-height: 600px;
    padding: 0;
    gap: 0;
  }

  .phone-input-layout {
    flex: 1 1 40%;
    min-width: 0;
    justify-content: center;
    padding: 0 24px; 
    align-self: center;
  }

  .recharge-image {
    position: relative;
    flex: 1 1 60%;
    right: -72px;
    bottom: 0;
    width: calc(50% + 72px);
    height: auto;
    max-width: none;
    pointer-events: none;
    z-index: 0;
  }

  .phone-input-error {
    text-align: left;
  }
}

@media (max-width: 1079px) {
  .hero-cards-scene {
    overflow: hidden;
  }

  .hero-cards-fallback {
    transform: translateY(-1px);
    margin-bottom: -1px;
  }

  .hero-cards-inline {
    inset: -1px 0 0 0;
    height: calc(100% + 1px);
  }

  .section {
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    min-height: 700px;
    padding: 0;
    gap: 48px;
  }

  .phone-input-layout {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    padding: 0 24px;
    align-self: center;
  }

  .recharge-image {
    flex: none;
    max-width: 100%;
    width: 100%;
    align-self: center;
    position: relative;
    margin-top: auto;
  }

  .phone-input-error {
    text-align: left;
  }
}

.phone-input-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 0;
  background: transparent;
}

.phone-input-form {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.phone-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 0;
}

.phone-input-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(162deg, #444DF3 17.17%, #9730F2 87.07%);
  border-radius: 24px;
  z-index: -1;
}

.phone-input-container {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 3;
}

.phone-input-wrapper {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 20px 0 20px;
  align-items: center;
  gap: 8px;
  border-radius: 24px;
  border: 3px solid transparent;
  background: var(--light-surface);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.phone-input-wrapper:not(.disabled):not(.focused):not(.error):hover {
  border-color: var(--fixed-phoneInputHover);
  background: var(--light-surface);
}

.phone-input-wrapper.focused {
  border-color: var(--fixed-phoneInputFocus);
  box-shadow: 4px 0 32px 0 rgba(0, 0, 0, 0.50);
}

.phone-input-wrapper.error {
  border: 3px solid var(--light-error, #E8475F);
}

.phone-input-wrapper.error.focused {
  border: 3px solid var(--light-error, #E8475F);
}

.phone-input-wrapper.disabled {
  border-color: var(--light-outline);
  background: var(--light-surfaceContainerLow);
  opacity: 1;
  cursor: not-allowed;
}

.phone-input-country-code {
  color: var(--light-onSurface);
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  font-style: var(--body-body-large-font-style);
  font-weight: var(--body-body-large-font-weight);
  line-height: var(--body-body-large-line-height);
}

.phone-input-field {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--light-onSurface);
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  font-style: var(--body-body-large-font-style);
  font-weight: var(--body-body-large-font-weight);
  line-height: var(--body-body-large-line-height);
  padding: 0;
}

.phone-input-field::placeholder {
  color: var(--light-outline);
}

.phone-input-error {
  position: absolute;
  top: 100%;
  left: 16px;
  color: var(--light-error);
  text-shadow: 0 0 24px #000;
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  font-style: var(--body-body-large-font-style);
  font-weight: var(--body-body-large-font-weight);
  line-height: var(--body-body-large-line-height);
}

.phone-input-error:not(:empty) {
  margin-top: 12px;
}

/* HOW IT WORKS SECTION STYLES */

.how-it-works-section {
  background-color: var(--light-surface);
  width: 100%;
  min-height: 700px;
  position: relative;
  padding: 56px 24px;
}

.how-it-works-shell {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.how-it-works-phones {
  position: absolute;
  top: 64px;
  left: 72px;
  display: flex;
  justify-content: flex-start;
}

.how-it-works-dots {
  position: absolute;
  top: 72px;
  right: 72px;
  display: flex;
  justify-content: flex-end;
}

.how-it-works-phones,
.how-it-works-dots {
  z-index: 0;
  pointer-events: none;
}

.text-content,
.steps-container {
  position: relative;
  z-index: 1;
}

.text-content {
    text-align: center;
    margin-bottom: 48px;
}

.main-title {
    color: var(--light-secondary);
    font-family: var(--display-display-medium-font-family);
    font-size: var(--display-display-medium-font-size);
    line-height: var(--display-display-medium-line-height);
    font-weight: var(--display-display-medium-font-weight);
    font-style: var(--display-display-medium-font-style);
    margin-bottom: 24px;
}

.works-highlight {
  color: var(--light-secondary);
  font-family: "Gentium Book Basic";
  font-size: 52px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1px;
}

.subtitle {
  color: var(--light-onSurfaceVariant);
    font-family: var(--body-body-large-font-family);
    font-size: var(--body-body-large-font-size);
    font-style: var(--body-body-large-font-style);
    font-weight: var(--body-body-large-font-weight);
    line-height: var(--body-body-large-line-height);
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  max-width: 1080px;
  width: 100%;
}

.step-card {
  background-color: var(--light-secondaryContainer);
  border-radius: 32px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.icon-placeholder {
    color: var(--light-onSecondaryContainer);
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

.step-text {
    color: var(--light-onSecondaryContainer);
    font-family: var(--title-title-medium-font-family);
    font-size: var(--title-title-medium-font-size);
    line-height: var(--title-title-medium-line-height);
    font-weight: var(--title-title-medium-font-weight);
    font-style: var(--title-title-medium-font-style);
}

@media (max-width: 1080px) {
    .steps-container {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: center;
    }
    .step-card {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 1080px) {
  .how-it-works-section {
    padding: 72px 0;
  }

  .how-it-works-shell {
    padding: 0;
  }
}

/* OUR NUMBERS SECTION STYLES */
.our-numbers-section {
  width: 100%;
  background: var(--linear-gradientDark);
}

/* Background brand image positioned behind navigation but above page content */
.brand-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  top: -96px;
}

.brand-bg img {
  height: 90%;
  width: auto;
  max-width: none;
  aspect-ratio: 1 / 1;
  transform: translateY(24px);
}

@media (min-width: 1080px) and (max-width: 1365px) {
  .home-hero-section {
    overflow: visible;
  }
}

@media (max-width: 1080px) {
  .brand-bg {
    align-items: center;
    justify-content: center;
  }

  .brand-bg img {
    height: 420px;
    width: auto;
    transform: none;
  }
}

/* Ensure main page content stacks above the background image */
.page {
  position: relative;
  z-index: 1;
}

.section-wrapper {
  color: var(--light-inverseOnSurface);
  text-align: center;
  position: relative;
  min-height: inherit;
  width: 100%;
  padding: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.our-numbers-phones {
  position: absolute;
  top: 72px;
  left: 72px;
  display: flex;
  justify-content: flex-start;
}

.our-numbers-dots {
  position: absolute;
  top: 72px;
  right: 72px;
  left: 72px;
  display: flex;
  justify-content: flex-end;
}

.our-numbers-triple-x {
  display: flex;
  position: absolute;
  left: 72px;
  bottom: 72px;
  right: 72px;
  justify-content: center;
}

.our-numbers-section .section-title {
  font-family: var(--display-display-medium-font-family);
  font-size: var(--display-display-medium-font-size);
  line-height: var(--display-display-medium-line-height);
  font-weight: var(--display-display-medium-font-weight);
  font-style: var(--display-display-medium-font-style);
  padding-bottom: 72px;
}

.our-numbers-section .section-title span {
  color: var(--light-tertiary);
  font-family: "Gentium Book Basic";
  font-size: 52px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1px;
}

.numbers-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
}

.number-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px;
}

.divider {
  width: 1px;
  height: 100px;
  background-color: var(--light-onPrimary);
  opacity: 0.6;
  flex-shrink: 0;
}

.number-card h3 {
  color: var(--fixed-onPrimaryFixed);
  font-family: "Dela Gothic One";
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -1px;
}

.number-card p {
  color:var(--fixed-onPrimaryFixedVariant);
  font-family: Rubik;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.4px;
  padding-top: 12px;
  width: 100%;
}

.number-card:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 60px;
  background-color: var(--linear-gradientDark);
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
}

/* SUPPORTED COUNTRIES SECTION STYLES */
.supported-countries-section {
  background-color: var(--light-surface);
  width: 100%;
  position: relative;
}

.supported-countries-shell {
  width: 100%;
  min-height: inherit;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.supported-countries-dots-top {
  position: absolute;
  right: 72px;
  top: 8px;
  display: flex;
  justify-content: flex-end;
  z-index: 2;
  pointer-events: none;
}

.supported-countries-dots-bottom {
  position: absolute;
  left: 72px;
  bottom: 8px;
  display: flex;
  justify-content: flex-start;
  z-index: 2;
  pointer-events: none;
}

.supported-countries-phones-bottom {
  display: none;
}

.supported-countries-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 72px 0;
  box-sizing: border-box;
  gap: 48px;
}

.supported-countries-title {
  color: var(--light-secondary);
  text-align: center;
  font-size: 0;
  line-height: 0;
  margin: 0;
}

.supported-countries-title-prefix {
  display: inline-block;
  font-family: "Dela Gothic One";
  font-size: 45px;
  font-style: normal;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1px;
  padding-right: 8px;
  color: var(--light-secondary);
}

.supported-countries-title-highlight {
  display: inline-block;
  font-family: "Gentium Book Basic";
  font-size: 52px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1px;
  color: var(--light-secondary);
}

.supported-countries-carousel {
  --supported-countries-gap: 24px;
  --supported-countries-mask-hidden-width: 24px;
  --supported-countries-mask-fade-width: 72px;
  --supported-countries-mask-edge-overscan: 2px;
  --supported-countries-flag-size: 120px;
  --supported-countries-flag-size-active: 140px;
  --supported-countries-flag-scale: 0.86;
  --supported-countries-flag-radius: 40px;
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 10px var(--supported-countries-mask-hidden-width);
  box-sizing: border-box;
}

.supported-countries-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.supported-countries-carousel::before,
.supported-countries-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(
    var(--supported-countries-mask-hidden-width)
    + var(--supported-countries-mask-fade-width)
    + var(--supported-countries-mask-edge-overscan)
  );
  pointer-events: none;
  z-index: 2;
}

.supported-countries-carousel::before {
  left: calc(-1 * var(--supported-countries-mask-edge-overscan));
  background: linear-gradient(
    to right,
    var(--light-surface) 0%,
    var(--light-surface) calc(
      var(--supported-countries-mask-hidden-width)
      + var(--supported-countries-mask-edge-overscan)
    ),
    var(--light-surfaceTransparent) 100%
  );
}

.supported-countries-carousel::after {
  right: calc(-1 * var(--supported-countries-mask-edge-overscan));
  background: linear-gradient(
    to left,
    var(--light-surface) 0%,
    var(--light-surface) calc(
      var(--supported-countries-mask-hidden-width)
      + var(--supported-countries-mask-edge-overscan)
    ),
    var(--light-surfaceTransparent) 100%
  );
}

.supported-countries-track {
  display: flex;
  width: max-content;
  padding: 10px 0 4px;
}

.supported-countries-sequence {
  display: flex;
  gap: var(--supported-countries-gap);
  width: max-content;
  flex: 0 0 auto;
  padding-right: var(--supported-countries-gap);
}

.supported-countries-country {
  width: var(--supported-countries-flag-size-active);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* Keep the card height tied to the current flag size so mobile does not
     inherit desktop-only empty space below the country name. */
  min-height: calc(var(--supported-countries-flag-size-active) + 52px);
}

.supported-countries-carousel.is-loop-reset .supported-countries-country {
  transition: none;
}

.supported-countries-flag {
  --supported-countries-flag-current-scale: var(--supported-countries-flag-scale);
  --supported-countries-flag-current-shift: 0px;
  width: var(--supported-countries-flag-size-active);
  height: var(--supported-countries-flag-size-active);
  display: block;
  line-height: var(--supported-countries-flag-size-active);
  border-radius: var(--supported-countries-flag-radius);
  object-fit: cover;
  box-shadow: 0 24px 32px rgba(42, 43, 51, 0.15);
  flex-shrink: 0;
  font-size: 0;
  transform-origin: center center;
  transform:
    translateY(var(--supported-countries-flag-current-shift))
    scale(var(--supported-countries-flag-current-scale));
  backface-visibility: hidden;
  transition:
    box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1),
    color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.supported-countries-country.is-active .supported-countries-flag {
  --supported-countries-flag-current-scale: 1;
  --supported-countries-flag-current-shift: 0px;
  box-shadow: 0 28px 40px rgba(42, 43, 51, 0.22);
}

.supported-countries-carousel.is-loop-reset .supported-countries-flag {
  transition: none;
}

.supported-countries-carousel.is-loop-reset .supported-countries-country-name {
  transition: none;
}

.supported-countries-country-name {
  min-height: 36px;
  color: var(--light-onSurface, #2a2b33);
  text-align: center;
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  font-style: var(--body-body-large-font-style);
  font-weight: var(--body-body-large-font-weight);
  line-height: var(--body-body-large-line-height);
  margin: 0;
  transform: translateY(0);
  transition:
    color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.supported-countries-country.is-active .supported-countries-country-name {
  color: var(--light-secondary);
  transform: translateY(0);
}

.supported-countries-caption {
  color: var(--light-onSurfaceVariant, #6b6b73);
  text-align: center;
  font-family: var(--title-title-large-font-family);
  font-size: var(--title-title-large-font-size);
  font-style: var(--title-title-large-font-style);
  font-weight: var(--title-title-large-font-weight);
  line-height: var(--title-title-large-line-height);
  margin: 0;
}

@media (max-width: 1080px) {
  .supported-countries-section {
    padding: 32px 16px;
  }

  .supported-countries-content {
    padding: 48px 0;
  }

  .supported-countries-title-prefix {
    font-size: 32px;
    line-height: 32px;
  }

  .supported-countries-title-highlight {
    font-size: 36px;
    line-height: 34px;
  }

  .supported-countries-carousel {
    --supported-countries-gap: 12px;
    --supported-countries-mask-hidden-width: 24px;
    --supported-countries-mask-fade-width: 72px;
    --supported-countries-flag-size: 80px;
    --supported-countries-flag-size-active: 100px;
    --supported-countries-flag-scale: 0.8;
    --supported-countries-flag-radius: 20px;
  }

  .supported-countries-dots-top {
    right: 24px;
  }

  .supported-countries-dots-bottom {
    display: none;
  }

  .supported-countries-phones-bottom {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    z-index: -1;
    pointer-events: none;
    bottom: 24px;
    left: 24px;
    transform: rotate(180deg);
  }
  
}

@media (min-width: 1080px) {
  .supported-countries-section {
    padding: 72px 0;
  }

  .supported-countries-carousel {
    --supported-countries-mask-hidden-width: 72px;
    --supported-countries-mask-fade-width: 240px;
  }
}

@media (max-width: 1080px) {
  .numbers-grid {
    flex-direction: column;
    gap: 24px;
  }

  .number-card {
    padding: 24px 0;
    width: 100%;
  }

  .divider {
    width: 80%;
    height: 1px;
    margin: 0 auto;
  }
}