/* ==========================================================================
   Home page — hero
   --------------------------------------------------------------------------
   The floating crypto shapes sat on top of the headline. Nothing in the hero
   declares a z-index, and the shapes are absolutely positioned while the copy
   is static — positioned elements paint above static ones, so the decoration
   always won.

   Their placement is the theme's own and is left untouched; only the stacking
   order is corrected, so the shapes drift behind the text as intended.
   ========================================================================== */

/* The decorative layer. */
.hero .hero-shape > div {
  z-index: 1;
}

/* Everything the visitor reads or clicks sits above it. `.hero-shape` is a
   sibling of `.container`, so one rule covers the headline, the deposits
   panel and the scroll cue. */
.hero > .container {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Vertical rhythm
   --------------------------------------------------------------------------
   Measured gaps between the painted content of adjacent sections ran 313px,
   50px, 5px, 150px, 367px — the About and Process sections were essentially
   touching while others had a screenful of air. These bring the sequence into
   a consistent range without changing any section's internal layout.
   ========================================================================== */

/* Was 135px on top of the hero's own trailing space. */
.hero + .partners {
  padding-top: 100px;
}

/* The About copy ended 5px above the Process cards. */
.about {
  padding-bottom: 110px;
}

/* Process carried 150px below and only 35px above, which read as lopsided. */
.process {
  padding-top: 0;
  padding-bottom: 120px;
}

/* The gap before the rotating band is left as the theme had it: the colour
   splash under the mobile-app panel occupies ~165px of it, and the band's own
   160px padding is part of that section's restored styling. */

@media (max-width: 991px) {
  .hero + .partners {
    padding-top: 70px;
  }

  .about {
    padding-bottom: 70px;
  }

  .process {
    padding-bottom: 80px;
  }
}

/* ==========================================================================
   About artwork
   --------------------------------------------------------------------------
   The USDT render was pinned by a negative `right`/`top` offset, which is why
   it hung off the edge and sat high. `.about-img` becomes a box over the right
   half of the section instead, and the artwork centres inside it — so it stays
   vertically middle and horizontally centred beside the copy at any size.

   Home page only: on about-us.php this same section continues with a pull
   quote and further copy, so centring against the whole section would drop the
   image into the middle of that text.
   ========================================================================== */

.about > .container {
  position: relative;
  z-index: 1;
}

/* The markup puts `.about-img` inside `.container`, so it inherits the grid
   and needs no width of its own — `inset: 0` is exactly the container box.
   (main.css widens `.container` to 1320px from 1024px up, which is why
   mirroring Bootstrap's own ladder here would have been wrong.)

   `.container` carries z-index 1, so it forms a stacking context and the
   artwork's negative z-index keeps it behind the copy without falling behind
   the section itself.

   The 140px top padding matches `.about-wrap`'s own `pt-140`. Without it the
   artwork centres on the column box and reads about 70px high against the
   copy, which starts below that padding. */
.about .about-img {
  position: absolute;
  inset: 0;
  padding: 140px 15px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: -1;
  pointer-events: none;
}

/* Size the image itself, never the `<picture>` wrapper. `picture()` only emits
   a wrapper when a matching .webp sits next to the source, so a rule hung on
   `picture` silently stops applying the moment the artwork is swapped for one
   without a webp companion — at which point `width: 100%` on the img resolved
   against the full 1290px container and the render sprawled across the copy.
   `display: contents` lets a wrapper, when there is one, pass the sizing
   straight through. */
.about .about-img picture {
  display: contents;
}

/* Undo the offset-based placement these now replace. */
.about .about-img img {
  position: static;
  width: min(500px, 42%);
  height: auto;
  right: auto;
  top: auto;
}

/* Below the two-column breakpoint the artwork returns to the flow. */
@media (max-width: 991px) {
  .about .about-img {
    position: static;
    width: auto;
    padding: 0;
    display: block;
  }

  /* The artwork is cropped tight to the coin, so unlike the render this
     replaced it brings no transparent margin of its own — the gap above and
     below has to be real spacing rather than a negative pull. */
  .about .about-img img {
    display: block;
    width: min(420px, 72vw);
    margin: 36px auto 0;
  }
}

/* ==========================================================================
   Hero headline
   --------------------------------------------------------------------------
   The theme stepped the headline down through five fixed breakpoints
   (102 / 90 / 60 / 43 / 30px) but only touched `line-height` at the last of
   them. Every size in between therefore rendered inside the base 87px line
   box: at 991px that is 43px type with 44px of dead air between its lines.

   One fluid ramp replaces the ladder and the leading becomes a ratio, so the
   line box always tracks the type. The cap comes down from 102px to 72px —
   at 102px the headline filled the full 1290px container and dwarfed the
   standfirst under it. `max-width` holds it to a display measure so the
   break falls between phrases rather than wherever the container ends.
   ========================================================================== */

.hero .hero--sec-titlt .title {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   Mobile app panel
   --------------------------------------------------------------------------
   Three separate things broke this section below the two-column breakpoint.
   ========================================================================== */

/* 1. `.feature-crypto` draws the panel's border but carries no padding of its
      own, so the Bootstrap row inside it bled its negative gutters 12–15px
      past that border on each side — a horizontal overflow inside the card,
      and the reason the panel could push the page wider than the viewport.
      Dropping the gutter and the matching column padding together keeps the
      desktop geometry identical (column content still meets the card edge,
      which is how the phone artwork reaches the corner) while removing the
      overhang. */
.feature .feature-crypto > .row {
  margin-left: 0;
  margin-right: 0;
}

.feature .feature-crypto > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* 2. "Mobile Cryptobank" inherited the same 87px line box as the hero
      headline, so once it wrapped on a narrow screen a two-word heading
      occupied 174px and floated clear of the copy below it. The negative
      bottom margin existed only to claw back part of that gap. */
.feature .feature-crypto .mobile-crypto .xb-item--title {
  font-size: clamp(1.625rem, 3.2vw, 1.875rem);
  line-height: var(--leading-heading);
  margin-bottom: 14px;
}

/* 3. The eyebrow row is a flex line; let the "new" badge drop rather than
      squeeze the label on the narrowest screens. */
.feature .feature-crypto .mobile-crypto .xb-item--sub-title span {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* The panel artwork is a real app screenshot at 1619×971. The render it
   replaced was 601px wide and sized itself from that intrinsic width, with no
   CSS width anywhere — so the column's width was an accident of the file's
   pixel dimensions, and a larger file would simply have overflowed it.

   The row is `align-items: flex-end`, so the column is bottom-aligned rather
   than stretched. That suits this screenshot, whose phones run flush to the
   bottom of their frame: they stand on the floor of the panel. */
.feature .feature-crypto .cry-mobile-img img {
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  /* The phone artwork sits alone in a full-width column once the panel
     stacks, so the -20px pull that nudged it toward the copy in the
     two-column layout instead dragged it across the panel's left border —
     and at 375px and under, past the left edge of the viewport itself. */
  .feature .feature-crypto .cry-mobile-img {
    margin-left: 0;
    text-align: center;
  }

  /* Wider cap than the render this replaced: the screenshot is 1.67:1 against
     the old 1.39:1, so at the same width it stands considerably shorter. */
  .feature .feature-crypto .cry-mobile-img img {
    width: min(100%, 470px);
    height: auto;
  }
}

/* ==========================================================================
   App store badges
   --------------------------------------------------------------------------
   The theme's `.them-btn` slides a duplicate of its label up on hover, driven
   by `data-text`. That works for a one-word pill and not at all for a badge
   with a kicker above the store name, so these are their own component rather
   than an override of it.

   The surface is the glass-plus-gradient-hairline treatment used by the header
   buttons, the burger and the footer's social tiles, so the download call to
   action belongs to the same family as the rest of the site's controls.
   ========================================================================== */

/* The wrapper carried -9px margins to cancel the old buttons' own 9px. These
   use `gap`, so the negative margin would just pull them outside the panel. */
.feature .feature-crypto .mobile-crypto .xb-item--crypto-btn {
  margin: 0;
  gap: 12px;
  padding-top: 34px;
}

.feature .feature-crypto .mobile-crypto .store-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 60px;
  padding: 0 22px 0 20px;
  border: 0;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  color: var(--color-heading);
  text-decoration: none;
  /* Clips the shine to the badge. */
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Gradient hairline: white at the top-left running to amber at the
   bottom-right, so the badge catches light like the cards do. */
.feature .feature-crypto .mobile-crypto .store-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 166, 8, 0.38)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: background var(--transition-fast);
}

/* One pass of light across the face on hover, parking off the far side. */
.feature .feature-crypto .mobile-crypto .store-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-130%);
  pointer-events: none;
}

.feature .feature-crypto .mobile-crypto .store-btn:hover,
.feature .feature-crypto .mobile-crypto .store-btn:focus-visible {
  background: rgba(255, 166, 8, 0.1);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 26px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(255, 166, 8, 0.22);
}

.feature .feature-crypto .mobile-crypto .store-btn:hover::before,
.feature .feature-crypto .mobile-crypto .store-btn:focus-visible::before {
  background: linear-gradient(
    140deg,
    rgba(255, 214, 140, 0.8),
    rgba(255, 166, 8, 0.5) 50%,
    rgba(255, 166, 8, 0.9)
  );
}

.feature .feature-crypto .mobile-crypto .store-btn:hover::after,
.feature .feature-crypto .mobile-crypto .store-btn:focus-visible::after {
  transform: translateX(130%);
  transition: transform 0.65s var(--ease-out);
}

.feature .feature-crypto .mobile-crypto .store-btn:active {
  transform: translateY(-1px);
}

.feature .feature-crypto .mobile-crypto .store-btn__icon {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  font-size: 27px;
  line-height: 1;
  color: var(--color-heading);
  transition: color var(--transition-fast);
}

.feature .feature-crypto .mobile-crypto .store-btn:hover .store-btn__icon,
.feature .feature-crypto .mobile-crypto .store-btn:focus-visible .store-btn__icon {
  color: var(--color-primary);
}

.feature .feature-crypto .mobile-crypto .store-btn__text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.feature .feature-crypto .mobile-crypto .store-btn__kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-muted);
}

.feature .feature-crypto .mobile-crypto .store-btn__name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-heading);
}

@media (prefers-reduced-motion: reduce) {
  .feature .feature-crypto .mobile-crypto .store-btn::after {
    display: none;
  }

  .feature .feature-crypto .mobile-crypto .store-btn:hover,
  .feature .feature-crypto .mobile-crypto .store-btn:focus-visible {
    transform: none;
  }
}

/* The pair needs roughly 380px of room. The panel offers the viewport less
   64px of padding, so below about 445px they wrapped to one per line and sat
   there at a stranded width. Stack them full width instead — the threshold
   keeps a little slack so the switch never lands on a pair that only just
   fits. */
@media (max-width: 480px) {
  .feature .feature-crypto .mobile-crypto .xb-item--crypto-btn {
    display: grid;
  }

  .feature .feature-crypto .mobile-crypto .store-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   "Why Choose Us?" cards
   --------------------------------------------------------------------------
   The card is a fixed 202px box with a 100px icon, no horizontal padding and
   a 15px margin on each side. That is comfortable at the 289px it gets on a
   desktop, where every label fits on one line. Two-up on a phone it is not:
   at 375px the card is 158px wide and at 320px it is 130px — so the icon
   alone takes three quarters of the width, and any label longer than "Low
   Fees" wraps against the rounded border with 1px of clearance.

   Below the two-column layout the card is rebuilt around its content. The
   ramps are fluid rather than stepped, and every one of them resolves to the
   theme's own value at 767px, so nothing jumps as the query drops out.
   ========================================================================== */

@media (max-width: 767px) {
  /* Swiper gives each slide `height: 100%`, which against an auto-height
     wrapper resolves to the tallest card. Releasing it lets the flex line
     stretch every slide to the tallest instead, so the card below can trade
     its fixed 202px for a minimum and still line up with its neighbour —
     a fixed height would clip a third line outright, since the card already
     carries `overflow: hidden` for the glow behind it. */
  .partner-active .swiper-slide {
    height: auto;
  }

  .partner-slider .xb-item--brand {
    height: 100%;
    min-height: clamp(186px, 34vw, 202px);
    margin-left: clamp(6px, 2vw, 15px);
    margin-right: clamp(6px, 2vw, 15px);
    padding: 24px 14px;
    border-radius: 24px;
  }

  .partner-slider .xb-item--brand img {
    width: clamp(64px, 16vw, 100px);
    height: clamp(64px, 16vw, 100px);
  }

  /* The span is a shrink-to-fit flex item, so a one-line label was centred
     but a wrapped one was not — the second line hung left under a centred
     icon. */
  .partner-slider .xb-item--brand span {
    padding-top: 14px;
    font-size: clamp(0.9375rem, 2.6vw, 1rem);
    line-height: 1.35;
    text-align: center;
  }
}