/*
 * iTrade Group — what the page needs now that the Webflow runtime is gone.
 *
 * Loaded after itrade.css. Three jobs:
 *   1. undo every resting state that only existed because a script was going
 *      to animate out of it,
 *   2. give the three formerly scroll-scrubbed sections a static layout,
 *   3. style the mobile menu, accordion and slider that itrade-ui.js drives.
 *
 * Nothing here is `!important` unless it has to outrank a Webflow base rule.
 */

/* ----------------------------------------------------------------- 1. resting states */

/*
 * Webflow hid animated content until its engine booted, and the engine wrote
 * each element's "before" state as an inline style. Both are gone from the
 * markup now, but the base stylesheet still carries a few resting states that
 * assumed something would animate them away. Anything that is meant to be seen
 * is simply seen.
 */
.w-slider-mask,
.w-slide {
  opacity: 1;
}

/* The slider's own grey placeholder background, never visible before because a
 * script painted over it on boot. */
.w-slider,
.w-slider-mask {
  background: transparent;
}

/* ------------------------------------------------------- 2. the three static sections */

/*
 * These were `position: sticky` panels inside tall wrappers, with their
 * contents driven by scroll progress. That mechanism produced every bug
 * reported on this page: sections that emptied when you scrolled back up, a
 * card sequence that replayed itself, and a resting state that depended on how
 * you arrived — scrolled through, the workflow cards landed at translateY
 * 0/70/140/210; jumped to directly, three of the four piled up at 0.
 *
 * They are now ordinary sections. The wrappers keep no extra height, so the
 * document loses roughly 5,000px of scrolling that showed nothing new.
 */
.work-section-wrapper,
.price-section-wrap,
.integrations-section-wrap {
  height: auto;
}

/*
 * The spacers that existed only to be scrolled through.
 *
 * Each pinned section was held in place by a stack of empty bars — three at
 * 450px behind the workflow, three at 900px behind the pricing, three at 900px
 * behind the brokers. 6,750px of nothing, whose only purpose was to give the
 * scrubbed timelines a distance to run over. They are empty divs; with no
 * timeline they are 6,750px of blank page.
 */
.banner-scroll-wrapper,
.price-wrap,
.integrations-scroll-wrap {
  display: none;
}

.work-section,
.price-section,
.integrations-section {
  position: static;
  top: auto;
}

/*
 * The workflow cards.
 *
 * They were absolutely positioned on top of each other and fanned out by the
 * animation. Below 768px the template already lays them out as ordinary flow,
 * and that is the layout kept here at every width — it is the one that cannot
 * fall out of step with itself.
 */
.works-card-wrapp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
}

.work-card {
  position: static;
  transform: none;
  opacity: 1;
  filter: none;
  width: 100%;
}

/*
 * On desktop the four cards are the fanned stack the design intends, laid out
 * in CSS rather than arrived at by animation. The offsets are the ones the
 * finished sequence used to land on (0 / 70 / 140 / 210), and the container is
 * tall enough to hold the last card in full.
 *
 * This is the same picture as before, minus the way of getting there — which
 * was the part that broke. Two separate animations owned these cards, so the
 * resting state depended on how you arrived: scrolled through, they fanned;
 * jumped to, three of the four piled up on top of each other.
 */
@media screen and (min-width: 992px) {
  .works-card-wrapp {
    display: block;
    position: relative;
    height: 450px;
  }

  .work-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  /*
   * The resting offsets are declared as a custom property rather than as
   * `transform` directly. The entrance animation in section 10 also wants the
   * transform channel, and CSS has only one — so it composes onto
   * `--itrade-rest` instead of replacing it. Setting `transform` here directly
   * is what silently collapsed this staircase into a single pile once the
   * entrance was added.
   */
  .work-card       { transform: var(--itrade-rest, none); }
  .work-card.one   { --itrade-rest: translateY(0); }
  .work-card.two   { --itrade-rest: translateY(70px); }
  .work-card.three { --itrade-rest: translateY(140px); }
  .work-card.four  { --itrade-rest: translateY(210px); }
}

/* The image beside the cards was a four-way crossfade driven by the same
 * scroll progress. With no scroll progress there is nothing to fade between,
 * so the first image is the one that shows. */
.work-image-wrapper {
  position: relative;
}

.work-image-wrap {
  opacity: 0;
}

.work-image-wrap.one {
  opacity: 1;
}

/* The pricing columns and the broker tiles both already sit in their final
 * places in the stylesheet; only their entrance was scripted. */
.price-collection-list,
.integrations-card,
.integrations-card-effect,
.background-stroke,
.feature-item-card,
.statistics-card,
.statistics-wrapper {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ------------------------------------------------------------------ 3. mobile menu */

@media screen and (max-width: 991px) {
  /*
   * Webflow moved the menu into a generated overlay element. There is no
   * generated element any more: the panel is the menu itself, shown by a class
   * on the navbar.
   */
  .nav-menu-wrap {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navbar.itrade-nav-open .nav-menu-wrap {
    display: block;
  }

  .menu-button {
    display: block;
    cursor: pointer;
  }

  /* The hamburger becomes a close cross while the panel is open. */
  .navbar.itrade-nav-open .nav-button-line.is-first {
    transform: translateY(6px) rotate(45deg);
  }

  .navbar.itrade-nav-open .nav-button-line.is-second {
    opacity: 0;
  }

  .navbar.itrade-nav-open .nav-button-line.is-third {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-button-line {
    transition: transform .2s ease, opacity .2s ease;
  }

  .nav-menu-button.is-mobile {
    display: flex;
  }
}

@media screen and (min-width: 992px) {
  /* Above the breakpoint the menu is always the horizontal bar, and the
   * hamburger does not exist. */
  .nav-menu-wrap {
    display: block;
  }

  .menu-button {
    display: none;
  }
}

/* ------------------------------------------------------------------- 4. accordion */

/*
 * `.faq-answer-wrap` is the element Webflow marked `.w-dropdown-list`, whose
 * base rule is `display: none; position: absolute`. The template already
 * overrides both to `display: flex; position: static; overflow: hidden`, and
 * closed it by writing `height: 0` inline. That is the contract itrade-ui.js
 * now drives, so the only thing missing was something to animate the height.
 */
.faq-answer-wrap {
  height: 0;
  transition: height .28s ease;
}

.faq-question {
  cursor: pointer;
  user-select: none;
}

/* The vertical stroke of the plus turns to lie on top of the horizontal one,
 * which reads as a minus. */
.plus-icon-line {
  transition: transform .2s ease, opacity .2s ease;
}

.faq-block.itrade-open .plus-icon-line.is-two {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ---------------------------------------------------------------------- 5. slider */

.w-slider-arrow-left,
.w-slider-arrow-right {
  cursor: pointer;
  user-select: none;
}

.w-slider-dot {
  cursor: pointer;
}

/* --------------------------------------------------------------- 6. no-JS safety */

/*
 * If itrade-ui.js fails to load, the accordion would be permanently shut,
 * because its closed height is CSS rather than an inline style now. Answers
 * open by default until the script says otherwise, so the content is always
 * reachable.
 */
html:not(.itrade-ui-ready) .faq-answer-wrap {
  height: auto;
}

/* ------------------------------------------------- 7. hover effects IX2 used to set up */

/*
 * Several hover effects are built from two stacked copies of the same label,
 * plus a coloured panel behind the button. The interactions engine put those
 * pieces into their resting state at boot — the second label parked out of
 * sight, the panel at opacity 0 — and moved them on hover. Nothing does that
 * now, so without a resting state here the panel paints over every button
 * (which turned all three pricing buttons blue) and both labels render on top
 * of each other.
 *
 * Restated as plain CSS, which also means the hover now costs nothing.
 */
.button-hover-brand {
  opacity: 0;
  transition: opacity .25s ease;
}

.w-inline-block:hover > .button-hover-brand,
a:hover .button-hover-brand,
.button-tertiary:hover .button-hover-brand,
.button-primary:hover .button-hover-brand {
  opacity: 1;
}

/*
 * The label swap. `.button-inner-flex` is already `overflow: hidden`, so the
 * second copy simply waits one line below and the pair slides up together.
 */
.button-inner-flex {
  position: relative;
}

.button-text {
  transition: transform .28s ease;
}

.button-text.absolute {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

a:hover .button-text:not(.absolute) {
  transform: translateY(-100%);
}

a:hover .button-text.absolute {
  transform: translateY(0);
}

/* The nav links use the same two-copy trick with [link-top] / [link-bottom]. */
.nav-link-block {
  overflow: hidden;
  position: relative;
}

.nav-link {
  transition: transform .28s ease;
}

[link-bottom] {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

.nav-link-block:hover [link-top] {
  transform: translateY(-100%);
}

.nav-link-block:hover [link-bottom] {
  transform: translateY(0);
}

/* ------------------------------------------------- 8. horizontal clipping, section-local */

/*
 * Two things still hang past the edge: a decorative gradient bleeding off the
 * left of the hero, and the slider's strip of slides running off the right
 * (its mask is deliberately `overflow: visible` so the next card peeks).
 * Neither overflows at all above 992px.
 *
 * The clip therefore belongs on the sections, not on the document. Clipping
 * `.page-wrapper` meant clipping 1440x9430 — 13.6 megapixels — which Safari
 * turns into a single huge backing store and then blanks the whole viewport for
 * seconds while it re-rasterises. Each section here is one to two screens tall,
 * so the same visual result costs a handful of small layers instead.
 *
 * `clip` rather than `hidden`: `hidden` would make each section a scroll
 * container, which changes how anchors and any future sticky child behave.
 * `hidden` stays first as the fallback for browsers without `clip`.
 *
 * Do NOT widen this to `.page-wrapper > *` or `.main-wrapper`: those ARE the
 * document (12.8 Mpx), so clipping them recreates exactly the layer this change
 * exists to remove. Only elements that are at most a screen or two tall belong
 * in this list.
 */
section,
header,
footer,
.work-section-wrapper,
.price-section-wrap,
.integrations-section-wrap {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ------------------------------------------------- 9. the brokers section, made cheap */

/*
 * Two things made "הברוקר שלכם. הממשק שלנו." the heaviest section on the page,
 * and neither was the markup.
 *
 * 1. `gloab-ellips.svg` is a 3 KB file that carries an SVG <filter> with FIVE
 *    feGaussianBlur passes over a 2189x1344 filter region — 2.9 megapixels of
 *    blur convolution — to draw one glowing horizon, displayed at 1440x408.
 *    Safari is very slow at SVG filters. It is now a pre-rendered 28 KB WebP:
 *    same picture (compared side by side), no filter, one cheap scaled blit.
 *    A CSS radial-gradient was tried first and cannot reproduce the crisp bright
 *    rim — it only ever gives a soft blob.
 *
 * 2. Each of the seven tiles carried SIX stacked blurred shadows out to 154px:
 *    42 large blur passes for one section. Three layers are visually
 *    indistinguishable from six at these radii (checked side by side); one
 *    layer and a radial-gradient both lose the tight bright rim.
 */
.integrations-card-effect {
  box-shadow:
    0 0 8px 0 var(--_colors---brand),
    0 0 46px 0 var(--_colors---brand),
    0 0 130px 0 var(--_colors---brand);
}

/* ------------------------------------------------------- 10. entrance animation, free */

/*
 * How to have animation that costs nothing.
 *
 * Only two properties can be animated by the compositor without the main thread
 * doing any work per frame: `transform` and `opacity`. Everything else — width,
 * top, box-shadow, filter, background-position — forces layout and/or paint on
 * every single frame. The old Webflow entrances animated all sorts of things
 * and drove them from a scroll handler, which is how one section cost ~880ms of
 * script per 2,600px scrolled.
 *
 * So: transform and opacity only, driven by CSS transitions, triggered once by
 * an IntersectionObserver. No scroll handler exists. The observer fires a
 * handful of times in the life of the page and then stops watching each element
 * (see itrade-ui.js) — which also makes the reveal ONE-WAY by construction. It
 * cannot replay, and it cannot run backwards when you scroll up, which is the
 * failure mode that made the old page feel broken.
 *
 * `.itrade-anim` is only ever applied by script, and only to elements that are
 * below the fold at the time, so nothing that has already been painted is
 * hidden and there is no flash. With JavaScript off, nothing is ever hidden.
 */
@media (prefers-reduced-motion: no-preference) {
  /*
   * COMPOSE, NEVER REPLACE.
   *
   * Several of these elements already need a transform of their own to sit
   * where they belong: the workflow cards are a staircase, and the centre
   * broker tile is centred with translate(-50%, -50%). CSS gives an element one
   * transform, so an entrance that writes `transform: none` silently destroys
   * that positioning — which is exactly what happened here: the workflow cards
   * collapsed into a single pile, and every broker tile stayed frozen at
   * scale(.86) because the start state outranked `.is-in`.
   *
   * So the resting transform lives in `--itrade-rest`, and every rule below
   * composes onto it. An element with no resting transform gets `none` and
   * behaves exactly as before.
   */
  .itrade-anim {
    opacity: 0;
    transform: var(--itrade-rest, none) translate3d(0, 28px, 0) scale(.985);
  }

  .itrade-anim.is-in {
    opacity: 1;
    transform: var(--itrade-rest, none) scale(1);
    /*
     * Opacity finishes well before the movement does. Arriving at full
     * strength while still travelling the last few pixels is what stops an
     * entrance reading as a slide — the element is simply there, and settling.
     */
    transition: opacity var(--t-base) var(--ease-soft), transform var(--t-slow) var(--ease);
  }

  /* Tiles scale up rather than slide — they sit in a fixed constellation. */
  .integrations-card.itrade-anim {
    transform: var(--itrade-rest, none) scale(.86);
  }

  .integrations-card.itrade-anim.is-in {
    transform: var(--itrade-rest, none) scale(1);
  }

  /* The centre tile is positioned by transform, so it must be a rest value. */
  .integrations-card.four {
    --itrade-rest: translate(-50%, -50%);
  }

  /*
   * Stagger. These are transition delays, so they still cost nothing — there is
   * no timer and no JavaScript per element.
   */
  .itrade-anim.is-in                         { transition-delay: 0ms; }
  .integrations-card.itrade-anim.is-in       { transition-delay: 40ms; }
  .integrations-card.two.itrade-anim.is-in   { transition-delay: 100ms; }
  .integrations-card.three.itrade-anim.is-in { transition-delay: 160ms; }
  .integrations-card.four.itrade-anim.is-in  { transition-delay: 220ms; }
  .integrations-card.five.itrade-anim.is-in  { transition-delay: 280ms; }
  .integrations-card.six.itrade-anim.is-in   { transition-delay: 340ms; }
  .integrations-card.seven.itrade-anim.is-in { transition-delay: 400ms; }

  /*
   * Grid children arrive one after another. `:nth-child` costs nothing at match
   * time and keeps the stagger entirely in CSS.
   */
  .pricing-collection-item:nth-child(2) .itrade-anim.is-in,
  .blog-card-grid > *:nth-child(2) .itrade-anim.is-in,
  .feature-card-wrap > *:nth-child(2) .itrade-anim.is-in { transition-delay: 90ms; }

  .pricing-collection-item:nth-child(3) .itrade-anim.is-in,
  .blog-card-grid > *:nth-child(3) .itrade-anim.is-in,
  .feature-card-wrap > *:nth-child(3) .itrade-anim.is-in { transition-delay: 180ms; }

  .faq-stroke.itrade-anim.is-in                  { transition-delay: 0ms; }
  .faq-stroke:nth-child(2).itrade-anim.is-in     { transition-delay: 70ms; }
  .faq-stroke:nth-child(3).itrade-anim.is-in     { transition-delay: 140ms; }
  .faq-stroke:nth-child(4).itrade-anim.is-in     { transition-delay: 210ms; }
  .faq-stroke:nth-child(5).itrade-anim.is-in     { transition-delay: 280ms; }

  /* Images and panels settle in with a touch of scale instead of a slide. */
  .work-image-wrapper.itrade-anim,
  .feature-item-image-wrap.itrade-anim,
  .trusted-image.itrade-anim,
  .ts-slider.itrade-anim {
    transform: var(--itrade-rest, none) scale(.965);
  }

  .work-image-wrapper.itrade-anim.is-in,
  .feature-item-image-wrap.itrade-anim.is-in,
  .trusted-image.itrade-anim.is-in,
  .ts-slider.itrade-anim.is-in {
    transform: var(--itrade-rest, none) scale(1);
  }
}

/* -------------------------------------------------------------- 11. the brand logo */

/*
 * The supplied logo, whole — mark above "iTrade" above "GROUP".
 *
 * It replaces the typeset wordmark that used to sit here, so the name is not
 * said twice.
 *
 * The height matters. This is a stacked, roughly square lockup, and its wording
 * is a small fraction of it: "iTrade" is about a quarter of the total height and
 * "GROUP" about a twelfth. At the 30px a mark-only logo would take, "GROUP"
 * lands near four pixels and stops being type at all. At 60px — which the 100px
 * navbar has room for — "iTrade" reads at ~16px and "GROUP" at ~8px, which is
 * the smallest this lockup can be set and still be read.
 *
 * The artwork is white with a blue accent and is only ever placed on dark here.
 */
.navbar-brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
}

.itrade-brand-logo {
  height: 60px;
  width: auto;
  display: block;
  flex: none;
}

.footer-brand .itrade-brand-logo {
  height: 54px;
}

@media screen and (max-width: 991px) {
  .itrade-brand-logo {
    height: 48px;
  }

  .footer-brand .itrade-brand-logo {
    height: 44px;
  }
}

/* ============================================================ 12. the motion system */

/*
 * One vocabulary for every transition on the page.
 *
 * Before this there were five durations (.2s, .25s, .28s, .5s, .55s) and three
 * different easings, chosen ad hoc as each piece was written. That is what
 * makes a page feel assembled rather than designed: nothing shares a rhythm, so
 * no two things ever feel like they belong to the same object.
 *
 * The curve is an expo-out. It leaves fast and lands slowly, which reads as
 * something heavy coming to rest rather than something being moved — the single
 * biggest difference between "it animates" and "it feels considered".
 */
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .22s;
  --t-base: .42s;
  --t-slow: .8s;
}

/*
 * Following a link inside the page should travel, not teleport.
 *
 * Ten links in the nav and footer point at #products, #ai, #brokers, #workflow,
 * #faq and #data. Every one of them jumped instantly. This is the first thing a
 * visitor does after arriving, so it is the first thing that tells them what
 * kind of site this is.
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Land the section under the navbar, not behind it. */
section[id],
[id^="workflow"],
[id^="products"],
[id^="brokers"],
[id^="faq"],
[id^="data"],
[id^="ai"] {
  scroll-margin-top: 24px;
}

/* Re-state the existing transitions in the shared vocabulary. */
.faq-answer-wrap { transition: height var(--t-base) var(--ease-soft); }
.plus-icon-line { transition: transform var(--t-fast) var(--ease-soft), opacity var(--t-fast) var(--ease-soft); }
.button-hover-brand { transition: opacity var(--t-fast) var(--ease-soft); }
.button-text,
.nav-link { transition: transform var(--t-base) var(--ease); }
.nav-button-line { transition: transform var(--t-fast) var(--ease-soft), opacity var(--t-fast) var(--ease-soft); }

/* ------------------------------------------------------------- 13. choreography */

/*
 * Within a section, things arrive in reading order rather than all at once.
 *
 * Everything sharing one instant is what makes a reveal feel mechanical; a
 * short cascade reads as a single considered movement. These are transition
 * delays on elements that are already animating, so the cost is unchanged —
 * there is no timer and no JavaScript per element.
 *
 * The badge leads because it sits above the heading, the heading follows, and
 * the body of the section comes last.
 */
@media (prefers-reduced-motion: no-preference) {
  .section-badge.itrade-anim.is-in { transition-delay: 0ms; }
  .pricing-title.itrade-anim.is-in { transition-delay: 80ms; }
  .heading-text-wrap.itrade-anim.is-in { transition-delay: 80ms; }

  .statistics-card.itrade-anim.is-in,
  .feature-item-card.itrade-anim.is-in,
  .price-collection-list.itrade-anim.is-in,
  .pricing-card.itrade-anim.is-in,
  .blog-card.itrade-anim.is-in,
  .blog-item.itrade-anim.is-in,
  .work-card.itrade-anim.is-in,
  .work-image-wrapper.itrade-anim.is-in,
  .ts-slider.itrade-anim.is-in { transition-delay: 160ms; }

  /*
   * The workflow cards deal themselves out like a hand of cards.
   *
   * The gap has to beat the fade, not sit inside it. At 70ms apart against a
   * 420ms fade all four were airborne at the same time — card 01 finished while
   * 04 was still at 0.63 — which reads as one movement rather than four. 200ms
   * apart means each card has clearly started before the next one does, and the
   * whole hand is dealt in about a second.
   */
  .work-card.one.itrade-anim.is-in   { transition-delay: 120ms; }
  .work-card.two.itrade-anim.is-in   { transition-delay: 320ms; }
  .work-card.three.itrade-anim.is-in { transition-delay: 520ms; }
  .work-card.four.itrade-anim.is-in  { transition-delay: 720ms; }

  /* The broker constellation keeps its own outward cascade. */
  .integrations-card.itrade-anim.is-in       { transition-delay: 160ms; }
  .integrations-card.two.itrade-anim.is-in   { transition-delay: 220ms; }
  .integrations-card.three.itrade-anim.is-in { transition-delay: 280ms; }
  .integrations-card.four.itrade-anim.is-in  { transition-delay: 340ms; }
  .integrations-card.five.itrade-anim.is-in  { transition-delay: 400ms; }
  .integrations-card.six.itrade-anim.is-in   { transition-delay: 460ms; }
  .integrations-card.seven.itrade-anim.is-in { transition-delay: 520ms; }
}

/* ------------------------------------- 14. scroll-linked parallax — WRITTEN, NOT SHIPPED */

/*
 * Deliberately held back.
 *
 * `animation-timeline: view()` gives scroll-linked parallax with no JavaScript
 * and no per-frame main-thread work, and it measured clean in Chrome. It is not
 * enabled because every rendering problem reported on this site so far has been
 * Safari-specific — the whole-viewport blanking was Safari's handling of a large
 * `overflow: clip`, and Safari's scroll-driven-animation support is far newer
 * than Chrome's. Shipping an unproven compositor feature into the one browser
 * that has already been the problem is not a trade worth making blind.
 *
 * The implementation is kept here so it can be switched on the moment it can be
 * measured in Safari (Safari > Settings > Developer > Allow remote automation,
 * then the harness in the scratchpad drives it for real).
 *
 * .hero-image-grid          { animation: itrade-rise linear both;
 *                             animation-timeline: scroll(); animation-range: 0 900px; }
 * .gloab-image-wrap         { animation: itrade-drift linear both;
 *                             animation-timeline: view(); animation-range: entry 0% cover 60%; }
 * .integration-line-bg-wrap { animation: itrade-settle linear both;
 *                             animation-timeline: view(); animation-range: entry 0% cover 50%; }
 *
 * @keyframes itrade-rise   { from { transform: translate3d(0,0,0); }   to { transform: translate3d(0,-24px,0); } }
 * @keyframes itrade-drift  { from { transform: translate3d(0,24px,0); } to { transform: translate3d(0,0,0); } }
 * @keyframes itrade-settle { from { transform: scale(1.04); opacity: .55; } to { transform: scale(1); opacity: 1; } }
 */

/* ------------------------------------------------------- 15. micro-interactions */

/*
 * Cards answer the pointer. A 3px lift on the shared curve is enough to make a
 * surface feel physical; anything more and it becomes a toy.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pricing-card,
  .feature-item-card,
  .blog-card,
  .integrations-card-inner {
    transition: transform var(--t-base) var(--ease);
  }

  .pricing-card:hover,
  .feature-item-card:hover,
  .blog-card:hover {
    transform: translate3d(0, -3px, 0);
  }

  .integrations-card:hover .integrations-card-inner {
    transform: translate3d(0, -3px, 0) scale(1.03);
  }
}